feat(apollo-vertex): dashboard expanded insight view and prompt bar#856
feat(apollo-vertex): dashboard expanded insight view and prompt bar#856ruudandriessen wants to merge 1 commit into
Conversation
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
ruudandriessen
force-pushed
the
pr/4-dashboard-expanded
branch
from
93e246a to
571c7d4
Compare
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
Adds a new “Apollo Vertex” dashboard preview template, including expanded insight drilldowns, an Autopilot prompt bar UX, and supporting routing/data scaffolding, plus new insight-* theme tokens and Autopilot icon assets for the UI.
Changes:
- Introduces new dashboard template modules (routes/shell wrapper/loading/data context/sample data) under
apps/apollo-vertex/templates/dashboard/. - Adds expanded insight drilldown content and chart/card renderers, along with a new prompt bar UI.
- Extends the Vertex registry theme with
insight-*colors and updates card base spacing; adds Autopilot SVG assets and preview pages.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| apps/apollo-vertex/templates/dashboard/PromptBar.tsx | New prompt bar UI with collapsed/expanded states and prompt suggestions. |
| apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx | Insight card body renderers (KPI + multiple chart types) with compact/expanded modes. |
| apps/apollo-vertex/templates/dashboard/glow-config.ts | Dashboard layout/config types, default configs, and background styling helper. |
| apps/apollo-vertex/templates/dashboard/ExpandedInsightContent.tsx | Expanded insight drilldown content + suggested Autopilot prompts. |
| apps/apollo-vertex/templates/dashboard/DashboardTemplateDynamic.tsx | Client-only dynamic wrapper for the dashboard template. |
| apps/apollo-vertex/templates/dashboard/DashboardTemplate.tsx | Client-side template bootstrapping (TanStack Router + React Query) with localStorage persistence. |
| apps/apollo-vertex/templates/dashboard/DashboardShellWrapper.tsx | Shell wrapper with sidebar/minimal nav configuration. |
| apps/apollo-vertex/templates/dashboard/DashboardRoutes.tsx | TanStack Router route tree for dashboard and minimal dashboard previews. |
| apps/apollo-vertex/templates/dashboard/DashboardLoading.tsx | Animated loading phases (logo → skeleton → done) wrapper component. |
| apps/apollo-vertex/templates/dashboard/DashboardDataProvider.tsx | Provides dashboard dataset via context. |
| apps/apollo-vertex/templates/dashboard/DashboardContent.tsx | Stubbed dashboard content route component (currently returns null). |
| apps/apollo-vertex/templates/dashboard/DashboardCards.tsx | Sample card components (KPIs, tables, charts, progress lists). |
| apps/apollo-vertex/templates/dashboard/dashboard-data.ts | Dashboard dataset types and sample datasets/presets. |
| apps/apollo-vertex/templates/dashboard/dashboard-data-context.ts | Context + useDashboardData hook for dashboard dataset access. |
| apps/apollo-vertex/templates/dashboard/AutopilotInsight.tsx | Placeholder “Autopilot Insight” panel UI. |
| apps/apollo-vertex/registry/card/card.tsx | Adjusts base Card spacing defaults (adds gap and vertical padding). |
| apps/apollo-vertex/registry.json | Adds insight-* color tokens (and font tokens in theme config). |
| apps/apollo-vertex/public/Autopilot_light.svg | Adds Autopilot icon asset (light). |
| apps/apollo-vertex/public/Autopilot_dark.svg | Adds Autopilot icon asset (dark). |
| apps/apollo-vertex/app/preview/dashboard/page.tsx | Adds preview route page for the dashboard template. |
| apps/apollo-vertex/app/preview/dashboard-minimal/page.tsx | Adds preview route page for the minimal dashboard template. |
| apps/apollo-vertex/app/preview/_meta.ts | Hides preview pages in navigation metadata. |
| apps/apollo-vertex/app/globals.css | Adds Tailwind v4 @source directives for registry/templates. |
| import { useState } from "react"; | ||
| import { MessagesSquare, Minimize2 } from "lucide-react"; | ||
| import { Badge } from "@/components/ui/badge"; | ||
| import type { CardConfig, CardGradient } from "./glow-config"; | ||
| import { useDashboardData } from "./DashboardDataProvider"; | ||
|
|
||
| function cardBgStyle( | ||
| bg: string, | ||
| opacity: number, | ||
| gradient: CardGradient, | ||
| ): React.CSSProperties { | ||
| if (gradient.enabled) { | ||
| const alpha = gradient.opacity / 100; | ||
| return { | ||
| "--card-bg-override": `linear-gradient(${gradient.angle}deg, color-mix(in srgb, ${gradient.start} ${alpha * 100}%, transparent), color-mix(in srgb, ${gradient.end} ${alpha * 100}%, transparent))`, | ||
| borderColor: "transparent", | ||
| } as React.CSSProperties; | ||
| } | ||
| const value = | ||
| bg === "white" | ||
| ? `rgba(255,255,255,${opacity / 100})` | ||
| : `color-mix(in srgb, var(--${bg}) ${opacity}%, transparent)`; | ||
| return { "--card-bg-override": value } as React.CSSProperties; | ||
| } |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
📊 Coverage + size by packagePer-package bundle size on this PR (no JS/TS source changes detected under
"Coverage" is each package's own |
| import { useState } from "react"; | ||
| import { MessagesSquare, Minimize2 } from "lucide-react"; | ||
| import { Badge } from "@/components/ui/badge"; | ||
| import type { CardConfig, CardGradient } from "./glow-config"; | ||
| import { useDashboardData } from "./DashboardDataProvider"; | ||
|
|
||
| function cardBgStyle( | ||
| bg: string, | ||
| opacity: number, | ||
| gradient: CardGradient, | ||
| ): React.CSSProperties { | ||
| if (gradient.enabled) { | ||
| const alpha = gradient.opacity / 100; | ||
| return { | ||
| "--card-bg-override": `linear-gradient(${gradient.angle}deg, color-mix(in srgb, ${gradient.start} ${alpha * 100}%, transparent), color-mix(in srgb, ${gradient.end} ${alpha * 100}%, transparent))`, | ||
| borderColor: "transparent", | ||
| } as React.CSSProperties; | ||
| } | ||
| const value = | ||
| bg === "white" | ||
| ? `rgba(255,255,255,${opacity / 100})` | ||
| : `color-mix(in srgb, var(--${bg}) ${opacity}%, transparent)`; | ||
| return { "--card-bg-override": value } as React.CSSProperties; | ||
| } |
| <Badge | ||
| variant="secondary" | ||
| status="info" | ||
| className="!bg-white/35 !text-foreground opacity-0 translate-y-2 group-focus-within:opacity-100 group-focus-within:translate-y-0 transition-all duration-300 cursor-pointer" | ||
| onClick={() => | ||
| handleChipClick( | ||
| data.promptSuggestions[0] ?? "Show me top risk factors", | ||
| ) | ||
| } | ||
| > | ||
| {data.promptSuggestions[0] ?? "Show me top risk factors"} | ||
| </Badge> |
| <Badge | ||
| variant="secondary" | ||
| status="info" | ||
| className="!bg-white/35 !text-foreground opacity-0 translate-y-2 group-focus-within:opacity-100 group-focus-within:translate-y-0 transition-all duration-300 delay-75 cursor-pointer" | ||
| onClick={() => | ||
| handleChipClick( | ||
| data.promptSuggestions[1] ?? | ||
| "Compare Q1 vs Q2 performance", | ||
| ) | ||
| } | ||
| > | ||
| {data.promptSuggestions[1] ?? "Compare Q1 vs Q2 performance"} | ||
| </Badge> | ||
| </div> |
| const handleSubmit = () => { | ||
| if (hasInput && onSubmit) { | ||
| onSubmit(value); | ||
| } | ||
| }; |
| return { "--card-bg-override": value } as React.CSSProperties; | ||
| } | ||
|
|
||
| export function PromptBar({ |
| export const drilldownTabs: { key: DrilldownTab; label: string }[] = [ | ||
| { key: "overview", label: "Overview" }, | ||
| { key: "categories", label: "Categories" }, | ||
| { key: "products", label: "Products" }, | ||
| { key: "actions", label: "Actions" }, | ||
| ]; |
| onClick={() => { | ||
| setPressedPrompt(prompt); | ||
| onPromptSelect?.(prompt); | ||
| setTimeout(() => setPressedPrompt(null), 600); | ||
| }} |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 571c7d46f9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| import { MessagesSquare, Minimize2 } from "lucide-react"; | ||
| import { Badge } from "@/components/ui/badge"; | ||
| import type { CardConfig, CardGradient } from "./glow-config"; | ||
| import { useDashboardData } from "./DashboardDataProvider"; |
There was a problem hiding this comment.
DashboardDataProvider only exports the provider component; the useDashboardData hook is exported from dashboard-data-context.ts and used that way elsewhere in this folder. As soon as PromptBar is included in the dashboard/typecheck, this named import fails the build, so import the hook from ./dashboard-data-context or re-export it from the provider module.
Useful? React with 👍 / 👎.
| | "products" | ||
| | "actions"; | ||
|
|
||
| export const drilldownTabs: { key: DrilldownTab; label: string }[] = [ |
There was a problem hiding this comment.
Consumers that render the expanded view from drilldownTabs cannot select the trend content because the array omits the trend key even though DrilldownTab and DrilldownTabContent define it. This leaves the new TrendChart branch unreachable from the tab UI; add a { key: "trend", ... } entry if the trend section is meant to be shown.
Useful? React with 👍 / 👎.
| <Badge | ||
| variant="secondary" | ||
| status="info" | ||
| className="!bg-white/35 !text-foreground opacity-0 translate-y-2 group-focus-within:opacity-100 group-focus-within:translate-y-0 transition-all duration-300 cursor-pointer" | ||
| onClick={() => |
There was a problem hiding this comment.
Badge renders a span by default, so these clickable suggestion chips are mouse-only: keyboard users cannot tab to them or activate them when the prompt suggestions open. In this collapsed prompt bar path, render the chips as real buttons (or provide equivalent role/tabIndex/key handling) so selecting suggestions is accessible.
Useful? React with 👍 / 👎.
| <button | ||
| type="button" | ||
| onClick={onCollapse} | ||
| className="size-7 rounded-md flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-all" | ||
| > |
There was a problem hiding this comment.
This icon-only collapse control has no visible text or aria-label, while the other icon buttons in this component are labeled. In the expanded prompt bar, screen reader users will encounter an unnamed button and will not know it collapses the chat response area.
Useful? React with 👍 / 👎.
| Trend over time | ||
| </div> | ||
| <p className="text-xs text-muted-foreground mb-4"> | ||
| 8-week view of the top 3 return reasons | ||
| </p> |
There was a problem hiding this comment.
The apollo-vertex AGENTS.md requires user-facing strings to be rendered through useTranslation() with keys added to locales/en.json, but the new expanded insight UI hard-codes labels and descriptions starting here. This prevents the dashboard copy from participating in the app's localization workflow; add English keys and render these strings via t(...).
Useful? React with 👍 / 👎.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ruudandriessen
force-pushed
the
pr/4-dashboard-expanded
branch
from
571c7d4 to
e0f338b
Compare
No description provided.