feat(apollo-vertex): AI Toolkit v1.1 — visual expression guidance and disclosure patterns#898
Draft
petervachon wants to merge 4 commits into
Draft
feat(apollo-vertex): AI Toolkit v1.1 — visual expression guidance and disclosure patterns#898petervachon wants to merge 4 commits into
petervachon wants to merge 4 commits into
Conversation
Add "Disclose in proportion" as second principle, add EU AI Act transparency note to Mark and wordmark section, and correct badge and button variant descriptors to frame variant choice as emphasis and placement rather than meaning. Add caveat notes for both subsections. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds the AiCaveat registry component and wires it across all AI surfaces in the AI Toolkit guidance page. - Add AiCaveat component (registry/ai-caveat/ai-caveat.tsx) with two variants: standalone (info icon + text, mt-4 standard gap) and withMark (no icon, pl-5 indent to align under the identity mark label, for group boundary placement) - Standardize content-to-caveat gap to 16px everywhere by making AiCaveat own mt-4 and using gap-0 on host cards so flex gap does not compound - Apply standalone caveat footer to: Card (Primary) three cards, Card (selectable) AI insights card, Plan selection (above Continue), Product recommendation (group level below three-card row) - Apply withMark caveat to: Card (Group) and Recommended actions group boundaries (tight under the mark heading, no icon, ~4px to mark) - Add source attribution line to activity timeline Agent reviewed step and to the inline marker in mark-usage - Update mark-usage badge and button variant descriptors to emphasis/placement language Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…pass Add Legal compliance index page with status badges, requirement coverage table, and source attribution; restructure AI Toolkit nav with Visual Expression and Legal children via _meta.ts; restructure Visual Expression title with metadata export and v1.1 AI badge; add withMark variant to AiCaveat with full placement/spacing JSDoc; wire AiCaveat across all AI surfaces (primary cards, selectable cards, plan selector, product grid, recommended actions); replace placeholder copy with canonical labels and real example content. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…al page cleanup Replace internal "For Legal: compliance index" footer with a plain public cross-link; rename disclosure strings column "Source in the doc" to "Basis" and remove "in the doc" phrasing from cell copy; fix source-line anchor targets to #in-components where the timeline marker group actually lives. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
Contributor
📊 Coverage + size by packagePer-package bundle size on this PR (no JS/TS source changes detected under
"Coverage" is each package's own |
There was a problem hiding this comment.
Pull request overview
Adds AI Toolkit v1.1 guidance to Apollo Vertex by introducing a reusable disclosure component and wiring it through the AI Toolkit guideline surfaces, plus a new “Legal” compliance index page and updated navigation/title/copy across the toolkit.
Changes:
- Introduces
AiCaveatregistry component (standalone + withMark) and uses it across AI Toolkit surface demos. - Adds
/guidelines/ai-toolkit/legalwith requirement coverage + disclosure strings + legal basis attribution. - Updates AI Toolkit navigation (
_meta.ts), Visual Expression page metadata/title/badge, and refreshes example copy (cards, badges, input label, source line).
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/apollo-vertex/registry/ai-caveat/ai-caveat.tsx | New disclosure component + usage guidance JSDoc for AI fallibility notice. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/surfaces.tsx | Adds AiCaveat to primary surface demos; adjusts card spacing and example copy. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/selectable-cards.tsx | Adds AiCaveat to selectable AI card; updates selectable-card example content/spacing. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/recommended-actions.tsx | Adds group-boundary AiCaveat under the AI mark for recommended actions. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/product-grid.tsx | Adds a single disclosure below the product grid instead of per-card. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/plan-selector.tsx | Adds disclosure below plan selector options. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/page.mdx | Visual Expression metadata/title update, v1.1 badge, and link to Legal page. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/mark-usage.tsx | Updates label/description guidance; adds “source line” example content. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/legal/page.mdx | New compliance index page mapping requirements to toolkit patterns and disclosure strings. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/input-field.tsx | Updates example label/placeholder to “Cost center”. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/ai-input-field.tsx | Updates AI input example label/placeholder to “Cost center”. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/activity-timeline.tsx | Adds optional source links to timeline events and renders a “From …” line. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/_meta.ts | Adds AI Toolkit nav parent/children labels (Visual Expression + Legal). |
Comment on lines
+11
to
+15
| * `withMark`: text only, no icon. Use ONLY when locked directly under the | ||
| * identity mark at a group boundary, with nothing between the mark and the | ||
| * caveat. The mark carries the AI signal; the icon would be redundant. Text | ||
| * is indented (`pl-5`) to align under the mark label, not the mark icon. | ||
| */ |
Comment on lines
+48
to
+51
| * Content-to-caveat gap is 16px, owned by the component (`mt-4`). Host cards | ||
| * must use `gap-0` so the card's flex gap does not compound with `mt-4`. For | ||
| * `withMark`, callers use `className="-mt-2 mb-3"` to achieve the ~4px gap | ||
| * under the mark's `mb-3`. |
| )} | ||
| {event.sources && event.sources.length > 0 && ( | ||
| <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground/70"> | ||
| <Link2 className="size-3 shrink-0" /> |
| <Link2 className="size-3 shrink-0" /> | ||
| From{" "} | ||
| {event.sources.map((s, i) => ( | ||
| <span key={s.label}> |
| Compared price, warranty, and lead time | ||
| </p> | ||
| <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground/70"> | ||
| <Link2 className="size-3 shrink-0" /> |
| @@ -92,7 +93,8 @@ export function SelectableCards() { | |||
| </Badge> | |||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
standalone(info icon + text) andwithMark(indent-only, no icon) variants; full JSDoc covering when to show, placement rules, spacing contract, tier rule, and copy policygap-0so the component-ownedmt-4is the sole content-to-caveat gap/guidelines/ai-toolkit/legalmapping each in-product disclosure requirement to how and where the toolkit meets it, with status badges (In place / Planned / Handled elsewhere), linked coverage table, verbatim disclosure strings, and source/legal-basis attribution; public-safe (no internal document links or internal-facing framing)_meta.tscreates a parent with Visual Expression and Legal as childrenmetadataexport for custom tab title; v1.1 AI badge in the H1 using the primary solid gradient treatmentOpen questions for Legal (not on the public page)
Test plan
/guidelines/ai-toolkitloads; Visual Expression H1 shows v1.1 AI badge; footer cross-link goes to Legal pagewithMarkvariant (no icon, text aligned)/guidelines/ai-toolkit/legalloads; status badges render (green / blue / neutral); "In place" rows link to correct sections/components; no "Open questions for Legal" section; no internal document name or link🤖 Generated with Claude Code