[DO NOT MERGE] Combined AI expression preview#849
Draft
petervachon wants to merge 1 commit into
Draft
Conversation
Throwaway branch unioning all AI PRs for a single complete preview. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
This PR aggregates the stacked “AI visual expression” work into a single preview branch so Badge/Button/Input/Card docs and the AI Toolkit guidance page can be viewed together in apollo-vertex.
Changes:
- Adds AI primitives (
AiMark,AiGlow) and applies AI variants/styles to core UI elements (Badge status, Button variants, Card glow tweaks). - Introduces the AI Toolkit guidelines page with multiple demo compositions (surfaces, selectable cards, examples).
- Updates foundation token docs/data and reconciles AI-related CSS vars in
registry.json.
Reviewed changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/apollo-vertex/registry/card/card.tsx | Softens selectable/hover glow opacity in dark mode. |
| apps/apollo-vertex/registry/button/button.tsx | Adds ai, ai-soft, ai-outline button variants using AI gradient tokens. |
| apps/apollo-vertex/registry/badge/badge.tsx | Adds status="ai" compound variants using AI gradient tokens. |
| apps/apollo-vertex/registry/ai-mark/ai-mark.tsx | Adds the filled astroid AI mark primitive with optional gradient fill. |
| apps/apollo-vertex/registry/ai-glow/ai-glow.tsx | Adds AiGlow primitive with card and group variants for decorative AI glows. |
| apps/apollo-vertex/registry.json | Reconciles AI tokens (gradients/glow/glass) but also drops the solution-tests registry item. |
| apps/apollo-vertex/lib/foundation-tokens.ts | Adds the “Insight” color ramp token group. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/surfaces.tsx | Adds AI surfaces demos (chat input + AI card compositions). |
| apps/apollo-vertex/app/guidelines/ai-toolkit/selectable-cards.tsx | Adds local selectable card demo mirroring Card’s selectable behavior. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/recommended-actions.tsx | Adds “recommended actions” card-group demo over shared AI glow. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/product-grid.tsx | Adds product grid demo highlighting an AI “best match”. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/plan-selector.tsx | Adds plan selector demo using Card selectable="ai" for the recommendation. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/page.mdx | Adds the AI Toolkit guidance page content. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/mark-usage.tsx | Adds AI mark usage matrix across badges/buttons/timeline states. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/input-field.tsx | Adds default input-field baseline demo. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/examples.tsx | Adds examples section assembling multiple AI compositions. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/color-showcase.tsx | Adds ramp + gradient token showcase with live token rendering. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/astroid.tsx | Adds inlined astroid icon (outline/fill capable) for guideline demos. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/astroid-thinking.tsx | Adds animated “thinking” mark state (framer-motion). |
| apps/apollo-vertex/app/guidelines/ai-toolkit/ai-mark.tsx | Adds “mark + wordmark” display for the guideline page. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/ai-input.tsx | Adds ai-chat-style input demo with AI focus border. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/ai-input-field.tsx | Adds composed “AI variant” input-field demo with glow + tooltip mark. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/ai-icon.tsx | Adds filled astroid icon wrapper for guideline demos. |
| apps/apollo-vertex/app/guidelines/ai-toolkit/activity-timeline.tsx | Adds mixed AI/user activity timeline demo. |
| apps/apollo-vertex/app/guidelines/_meta.ts | Adds “AI Toolkit” nav entry. |
| apps/apollo-vertex/app/foundation/colors/page.mdx | Updates Foundation Colors docs to document all AI gradient tokens. |
| apps/apollo-vertex/app/components/input/page.mdx | Adds “AI variant” section referencing the composed demo. |
| apps/apollo-vertex/app/components/input/ai-input-demo.tsx | Adds AI Input composition demo for the Input docs page. |
| apps/apollo-vertex/app/components/card/page.mdx | Adds “AI glow” docs section and demos for AiGlow. |
| apps/apollo-vertex/app/components/card/ai-glow-demo.tsx | Adds single-card + group AiGlow demos for Card docs. |
| apps/apollo-vertex/app/components/button/page.mdx | Adds AI variants docs/examples for Button. |
| apps/apollo-vertex/app/components/badge/page.mdx | Adds AI status docs/examples for Badge. |
| "use client"; | ||
|
|
||
| import { cva, type VariantProps } from "class-variance-authority"; | ||
| import { useId } from "react"; |
Comment on lines
+27
to
+29
| interface AiGlowProps | ||
| extends React.ComponentProps<"div">, | ||
| VariantProps<typeof aiGlowVariants> {} |
Comment on lines
2570
to
2595
| { | ||
| "name": "feature-flag-guard", | ||
| "type": "registry:ui", | ||
| "title": "FeatureFlagGuard", | ||
| "description": "Wrapper component that conditionally renders children based on a feature flag value.", | ||
| "registryDependencies": ["@uipath/use-feature-flag"], | ||
| "files": [ | ||
| { | ||
| "path": "registry/feature-flag-guard/feature-flag-guard.tsx", | ||
| "type": "registry:ui" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "protected-feature-route", | ||
| "type": "registry:ui", | ||
| "title": "ProtectedFeatureRoute", | ||
| "description": "Route-level guard that throws an error when a feature flag is disabled.", | ||
| "registryDependencies": ["@uipath/use-feature-flag"], | ||
| "files": [ | ||
| { | ||
| "path": "registry/protected-feature-route/protected-feature-route.tsx", | ||
| "type": "registry:ui" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "solution-tests", | ||
| "type": "registry:ui", | ||
| "title": "Solution Tests", | ||
| "description": "Page-level view for managing UiPath Solution Tests — test cases, batch runs, KPI trend, run-result baselines, and adopt/update/remove actions. Domain-neutral: the smart container reads the generic UiPathST* entity collections from your vs-core solution via collection-backed hooks, and the subject entity is parameterized via SolutionTestsConfig.", | ||
| "dependencies": [ | ||
| "@tanstack/react-db@^0.1.86", | ||
| "@tanstack/react-query@^5.90.0", | ||
| "@tanstack/react-table", | ||
| "@tanstack/react-router", | ||
| "@uipath/vs-core@^2.0.6", | ||
| "@uipath/uipath-typescript@^1.0.0", | ||
| "react-i18next", | ||
| "recharts@2.15.4", | ||
| "sonner", | ||
| "lucide-react", | ||
| "zod" | ||
| ], | ||
| "registryDependencies": [ | ||
| "@uipath/alert", | ||
| "@uipath/badge", | ||
| "@uipath/button", | ||
| "@uipath/card", | ||
| "@uipath/chart", | ||
| "@uipath/data-table", | ||
| "@uipath/dialog", | ||
| "@uipath/empty", | ||
| "@uipath/page-header", | ||
| "@uipath/skeleton", | ||
| "@uipath/sonner", | ||
| "@uipath/spinner", | ||
| "@uipath/switch", | ||
| "@uipath/table", | ||
| "@uipath/tabs", | ||
| "@uipath/tooltip" | ||
| ], | ||
| "files": [ | ||
| { | ||
| "path": "registry/solution-tests/index.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/index.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/solution-tests-view.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/solution-tests-view.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/solution-tests.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/solution-tests.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/context.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/context.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/hooks.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/hooks.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/constants.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/constants.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/mutations.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/mutations.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/attachments.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/attachments.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/actions.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/actions.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/create-actions.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/create-actions.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/use-solution-tests.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/use-solution-tests.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/use-solution-test-collection.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/use-solution-test-collection.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/use-solution-test-batch-runs.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/use-solution-test-batch-runs.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/use-solution-test-runs.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/use-solution-test-runs.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/use-baseline-jobs.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/use-baseline-jobs.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/use-run-results.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/use-run-results.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/use-force-stop.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/use-force-stop.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/config.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/config.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/types.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/types.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/tabs.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/tabs.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/status-maps.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/status-maps.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/utils.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/utils.ts" | ||
| }, | ||
| { "path": "lib/renderValueOrEmptyState.ts", "type": "registry:lib" }, | ||
| { "path": "lib/constants.ts", "type": "registry:lib" }, | ||
| { | ||
| "path": "registry/solution-tests/user-messages.ts", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/user-messages.ts" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/user-messages-view.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/user-messages-view.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/json-viewer-dialog.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/json-viewer-dialog.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/delete-confirm-dialog.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/delete-confirm-dialog.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/evaluator-results-view.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/evaluator-results-view.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/kpi-bar.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/kpi-bar.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/expanded-agents.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/expanded-agents.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/expanded-agents-view.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/expanded-agents-view.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/result-expanded-content.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/result-expanded-content.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/run-confirm-dialog.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/run-confirm-dialog.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/run-details-dialog.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/run-details-dialog.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/run-details-dialog-view.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/run-details-dialog-view.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/expanded-run-tests.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/expanded-run-tests.tsx" | ||
| }, | ||
| { | ||
| "path": "registry/solution-tests/expanded-run-tests-view.tsx", | ||
| "type": "registry:ui", | ||
| "target": "components/ui/solution-tests/expanded-run-tests-view.tsx" | ||
| } | ||
| ] | ||
| } |
Contributor
📊 Coverage + size by packagePer-package bundle size on this PR (no JS/TS source changes detected under
"Coverage" is each package's own |
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.
Throwaway branch unioning all 7 AI PRs (#843, #844, #845, #846, #847, #848, #840) so the whole thing renders in one preview. Not for merge; delete after review.