feat(apollo-vertex): add ConfidenceSignal component - #1034
Conversation
Adds a signal-bar AI confidence chip (high/medium/low/unknown) with min/med/max density variants, a tooltip on every chip, and a popover for factor breakdowns and next-step CTAs, plus an opt-in one-time acquire animation that respects prefers-reduced-motion. The action CTA (nextStep) is required for medium/low confidence per team decision, and optional for high/unknown, enforced via a discriminated union type. Level labels and default explanations resolve through react-i18next under the confidence_signal_* prefix. Registered in registry.json with docs at /components/confidence-signal.
|
Apollo Coded App preview deployments are ready.
|
Dependency License Review
License distribution
Excluded packages
|
📊 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 a new ConfidenceSignal UI component to the apps/apollo-vertex registry, along with documentation and i18n copy, so it can be consumed via the Vertex component registry and showcased under /components/confidence-signal.
Changes:
- Introduces
ConfidenceSignal(chip + tooltip, optional popover with factors/CTAs) and supporting subcomponents (bars, chip, factors, CTA, per-level config). - Registers the component in
apps/apollo-vertex/registry.jsonand adds English translation keys. - Adds the docs page and navigation metadata entry for the component.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| apps/apollo-vertex/registry/confidence-signal/confidence-signal.tsx | Main component wiring tooltip + optional popover; exports public API types. |
| apps/apollo-vertex/registry/confidence-signal/confidence-signal-levels.ts | Defines levels, CTA/factor types, and per-level copy + visual configuration. |
| apps/apollo-vertex/registry/confidence-signal/confidence-signal-factors.tsx | Renders factor breakdown rows for the popover body. |
| apps/apollo-vertex/registry/confidence-signal/confidence-signal-cta.tsx | Renders CTA as link-button (href) or button (onClick). |
| apps/apollo-vertex/registry/confidence-signal/confidence-signal-chip.tsx | Renders the chip/button with icon + label and accessibility labeling. |
| apps/apollo-vertex/registry/confidence-signal/confidence-signal-bars.tsx | SVG signal bars with optional “acquire” animation (reduced-motion aware). |
| apps/apollo-vertex/registry.json | Registers the new confidence-signal component and its registry targets/deps. |
| apps/apollo-vertex/locales/en.json | Adds confidence_signal_* English strings for labels/explanations. |
| apps/apollo-vertex/app/components/confidence-signal/page.mdx | Adds the documentation page and usage examples. |
| apps/apollo-vertex/app/components/_meta.ts | Adds the component to the components navigation list. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Storybook visual diff✅ No stories are affected by this PR's changes; nothing to compare. Logs Updated (PT): Aug 10, 2026, 09:33:25 AM |
…-signal The registry check flags any component that references an Apollo CSS variable without providing it via cssVars or a registryDependency. confidence-signal mapped color-warning-foreground in its theme block but never supplied the light/dark literal, unlike every other entry that uses this token (e.g. alert). Same oklch value in both themes, matching the existing convention elsewhere in registry.json. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated no new comments.
Suppressed comments (2)
apps/apollo-vertex/registry/confidence-signal/confidence-signal-cta.tsx:50
Buttondoesn’t set a defaulttype, so this CTA renders as a submit button by default. IfConfidenceSignalis used inside a form, clicking thenextStepCTA could unintentionally submit the form. Settype="button"for the button-rendered CTA.
<Button
variant="outline"
size="sm"
className={cn("w-full", className)}
onClick={cta.onClick}
apps/apollo-vertex/registry/confidence-signal/confidence-signal-factors.tsx:37
- The React key for factor rows isn’t guaranteed to be unique. Two identical
{label, value}pairs will collide, causing React warnings and potentially stale row rendering. Include the index (or a stable id field) in the key to ensure uniqueness.
{factors.map((factor) => (
// Labels are not guaranteed unique, so pair label with value: two rows
// that match on both are indistinguishable to the reader anyway.
<ConfidenceSignalFactorRow
key={`${factor.label}:${factor.value}`}
Summary
Mirrors #1001 onto a branch in this repo (not a fork) so the CI checks
gated on
head.repo.fork == false(Build, Lint, Format, Check DependencyConsistency) actually run. Chloe doesn't have write access to
apollo-uiyet, so those checks were silently skipped rather than failing on #1001.
Same single commit, same author, no changes to the code itself.
Verified locally
biome checkon the newconfidence-signalfiles: cleantsc --noEmit: zero errors in the new files/components/confidence-signalcorrectlyNote:
pnpm build's typecheck step currently fails onapp/components/form-wizard/form-wizard-demo.tsx— pre-existing onmain, unrelated to this change.Closes nothing — #1001 stays open as the original PR; this is just to
get real CI signal while the access issue is sorted out separately.
🤖 Generated with Claude Code