+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/agent-sidebar.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/agent-sidebar.tsx
new file mode 100644
index 000000000..0c14b501c
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/agent-sidebar.tsx
@@ -0,0 +1,266 @@
+import { BrainIcon, Loader2Icon, RefreshCwIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Highlight } from "../hooks/use-action-dispatcher";
+import { useAgentStream } from "../hooks/use-agent-stream";
+import type { DashboardFilters, KPIData } from "../hooks/use-dashboard-data";
+import {
+ type FeedAction,
+ type FeedAnomaly,
+ type FeedInsight,
+ parseFeedAnomalies,
+ parseFeedInsights,
+} from "../lib/feed-actions";
+import { ActionableCard } from "./actionable-card";
+
+interface AgentSidebarProps {
+ kpis: KPIData | null;
+ kpisLoaded: boolean;
+ filters: DashboardFilters;
+ highlights: Highlight[];
+ /** Dispatches a structured action back to the dashboard without an LLM round-trip. */
+ onAction: (action: FeedAction) => void;
+ /** Fires when the user clicks an `ask` chip — routes to the main chat drawer. */
+ onAsk: (prompt: string) => void;
+}
+
+function buildKPISummary(
+ kpis: KPIData,
+ filters: DashboardFilters,
+ highlights: Highlight[],
+): string {
+ const parts = [
+ `Total trips: ${kpis.total_trips.toLocaleString()}`,
+ `Avg fare: $${kpis.avg_fare}`,
+ `Avg distance: ${kpis.avg_distance} mi`,
+ `Fare range: $${kpis.min_fare}–$${kpis.max_fare}`,
+ `Top pickup zone: ${kpis.top_pickup_zone} (${kpis.top_zone_trips.toLocaleString()} trips)`,
+ ];
+ const activeFilters = Object.entries(filters)
+ .filter(([, v]) => typeof v === "string" && v)
+ .map(([k, v]) => `${k}=${v}`);
+ if (activeFilters.length > 0) {
+ parts.push(`Active filters: ${activeFilters.join(", ")}`);
+ } else {
+ parts.push("Active filters: none (full 2016 dataset)");
+ }
+ if (highlights.length > 0) {
+ parts.push(
+ `Highlights: ${highlights
+ .map(
+ (h) =>
+ `${h.start}→${h.end}${h.label ? ` (${h.label})` : ""} [${h.color}]`,
+ )
+ .join(", ")}`,
+ );
+ }
+ return parts.join(". ");
+}
+
+/**
+ * Debounce helper so a rapid sequence of filter/highlight changes collapses
+ * into one ephemeral agent re-run. 700ms is short enough to feel responsive
+ * but long enough to coalesce a typical click+click interaction.
+ */
+function useDebouncedSignal(dep: string, delayMs: number): string {
+ const [stable, setStable] = useState(dep);
+ useEffect(() => {
+ const t = setTimeout(() => setStable(dep), delayMs);
+ return () => clearTimeout(t);
+ }, [dep, delayMs]);
+ return stable;
+}
+
+const SUGGESTED_FOLLOWUPS = [
+ "Compare this slice to the prior month.",
+ "What ZIPs show the highest fare-per-mile?",
+ "Were there any days with abnormal trip counts?",
+];
+
+export function AgentSidebar({
+ kpis,
+ kpisLoaded,
+ filters,
+ highlights,
+ onAction,
+ onAsk,
+}: AgentSidebarProps) {
+ const [insights, setInsights] = useState
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/anomaly-card.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/anomaly-card.tsx
new file mode 100644
index 000000000..72c8f0ef2
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/anomaly-card.tsx
@@ -0,0 +1,68 @@
+import { AlertTriangleIcon } from "lucide-react";
+
+type Severity = "low" | "medium" | "high";
+
+interface AnomalyCardProps {
+ title: string;
+ description: string;
+ severity: Severity;
+}
+
+const SEVERITY_STYLES: Record<
+ Severity,
+ { border: string; bg: string; icon: string; badge: string }
+> = {
+ low: {
+ border: "border-yellow-200 dark:border-yellow-900",
+ bg: "bg-yellow-50/50 dark:bg-yellow-950/30",
+ icon: "text-yellow-500",
+ badge:
+ "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400",
+ },
+ medium: {
+ border: "border-orange-200 dark:border-orange-900",
+ bg: "bg-orange-50/50 dark:bg-orange-950/30",
+ icon: "text-orange-500",
+ badge:
+ "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-400",
+ },
+ high: {
+ border: "border-red-200 dark:border-red-900",
+ bg: "bg-red-50/50 dark:bg-red-950/30",
+ icon: "text-red-500",
+ badge: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400",
+ },
+};
+
+export function AnomalyCard({
+ title,
+ description,
+ severity,
+}: AnomalyCardProps) {
+ const styles = SEVERITY_STYLES[severity];
+
+ return (
+
+
+
+
+
+
+
+ {isAnalyzing && totalFindings === 0 && (
+
+
+ {kpisLoaded && (
+
+
+ )}
+
+ {!isAnalyzing && totalFindings === 0 && !kpisLoaded && (
+ Analyzing data…
++ Loading dashboard data… +
+ )} + + {!isAnalyzing && totalFindings === 0 && kpisLoaded && ( ++ No findings for this slice — try widening the filters. +
+ )} + + {insights.map((insight, i) => ( +
+
+ )}
+ + Try asking +
+
+ {SUGGESTED_FOLLOWUPS.map((prompt) => (
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/approval-card.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/approval-card.tsx
new file mode 100644
index 000000000..47f24b338
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/approval-card.tsx
@@ -0,0 +1,337 @@
+import {
+ CheckCircle2Icon,
+ PencilIcon,
+ PlusCircleIcon,
+ ShieldAlertIcon,
+} from "lucide-react";
+import { useCallback, useState } from "react";
+import type { Highlight } from "../hooks/use-action-dispatcher";
+import type { DashboardFilters } from "../hooks/use-dashboard-data";
+import { captureDashboardAsDataUrl } from "../lib/capture-dashboard";
+
+type ToolEffect = "read" | "write" | "update" | "destructive";
+
+export interface PendingApproval {
+ approvalId: string;
+ streamId: string;
+ toolName: string;
+ args: unknown;
+ annotations?: {
+ effect?: ToolEffect;
+ readOnly?: boolean;
+ destructive?: boolean;
+ idempotent?: boolean;
+ };
+}
+
+/**
+ * Resolve the semantic tier we should render for this approval. Prefers
+ * the explicit `effect` label; falls back to the legacy `destructive` flag
+ * so tools that haven't migrated yet keep their red treatment. Anything
+ * with no mutation hint at all falls through as `write` — the approval
+ * gate fired for a reason, and `write` is the lowest-severity default.
+ */
+function resolveEffect(
+ ann: PendingApproval["annotations"],
+): Exclude
+
+
+
+
+
+ + {title} +
+ + {severity} + ++ {description} +
+
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/chat-drawer.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/chat-drawer.tsx
new file mode 100644
index 000000000..559f5950d
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/chat-drawer.tsx
@@ -0,0 +1,248 @@
+import {
+ FilterIcon,
+ Loader2Icon,
+ MessageSquareIcon,
+ SendIcon,
+ SparklesIcon,
+ XIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { PendingApproval } from "./approval-card";
+
+export interface ChatMessage {
+ id: string;
+ role: "user" | "assistant" | "system";
+ content: string;
+ /** When true, this is the in-progress assistant turn being streamed. */
+ streaming?: boolean;
+}
+
+interface ChatDrawerProps {
+ messages: ChatMessage[];
+ isLoading: boolean;
+ onSend: (message: string) => void;
+ /** Rendered inline in the message list for the turn that triggered it. */
+ approvalCardForMessage: (messageId: string) => React.ReactNode | null;
+ pendingApprovals: PendingApproval[];
+ /** Floating affordance: the toggle button also shows a pending-approval dot. */
+ unreadCount?: number;
+ /** Controlled open state so the parent can auto-open the drawer when a
+ * dashboard interaction (chips, heatmap cells, quick actions, follow-ups)
+ * dispatches a turn the user needs to see. */
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+const EXAMPLE_QUERIES = [
+ "Filter to November 2016",
+ "Highlight the first week of Jan 2016 in red",
+ "Save this view as Peak Week",
+ "Focus on the fare distribution",
+ "Clear all filters and highlights",
+];
+
+/**
+ * Floating chat drawer. Toggled by the ⌘J keyboard shortcut or the
+ * floating message-square button in the bottom-right. Multi-turn
+ * conversation history stays mounted in state so previous turns remain
+ * visible as the user iterates.
+ */
+export function ChatDrawer({
+ messages,
+ isLoading,
+ onSend,
+ approvalCardForMessage,
+ pendingApprovals,
+ unreadCount,
+ open,
+ onOpenChange,
+}: ChatDrawerProps) {
+ const [input, setInput] = useState("");
+ const [showTips, setShowTips] = useState(true);
+ const bottomRef = useRef
+
+
+ {Object.keys(args).length > 0 && (
+
+
+
+
+ + Approval required +
+ + {theme.badgeLabel} + +
+ The agent wants to call{" "}
+
+ {approval.toolName}
+
+ {isSaveView
+ ? ". Approving captures the current dashboard and uploads it as a saved view."
+ : `. ${theme.verb}`}
+
+
+
+ {Object.entries(args).map(([key, value]) => (
+
+
+ )}
+
+
+ Arguments
+
+ | + {key} + | ++ {typeof value === "string" + ? value + : JSON.stringify(value, null, 2)} + | +
+
+
+ {phase.kind === "uploading" && (
+
+ Current dashboard state
+
+
+ filters: {formatFilters(filters)}
+
+
+ highlights:{" "}
+ {formatHighlights(highlights)}
+
+
+ 
+
+ )}
+
+ {phase.kind === "done" && (
+
+ Captured preview (uploading…)
+
+
+
+ )}
+
+ {phase.kind === "error" && (
+ {phase.volumePath}
+
+
+ {phase.message}
+
+ )}
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/fare-chart.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/fare-chart.tsx
new file mode 100644
index 000000000..383174aec
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/fare-chart.tsx
@@ -0,0 +1,78 @@
+import {
+ Bar,
+ BarChart,
+ CartesianGrid,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import { useChartColors } from "../hooks/use-chart-colors";
+import type { FareBucket } from "../hooks/use-dashboard-data";
+
+interface FareChartProps {
+ data: FareBucket[];
+ isLoading: boolean;
+}
+
+export function FareChart({ data, isLoading }: FareChartProps) {
+ const c = useChartColors();
+
+ if (isLoading) {
+ return (
+
+ {message.content || (message.streaming ? "…" : "")}
+
+
+
+ );
+ }
+
+ return (
+ + Fare Distribution +
+
+
+
+
+
+
+
+ v >= 1000 ? `${(v / 1000).toFixed(0)}K` : String(v)
+ }
+ />
+ {
+ if (name === "trip_count")
+ return [value.toLocaleString(), "Trips"];
+ return [value, name];
+ }}
+ />
+
+
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/focusable-chart.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/focusable-chart.tsx
new file mode 100644
index 000000000..689145a4b
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/focusable-chart.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import {
+ type FocusableChartId,
+ useFocusable,
+} from "../hooks/use-focus-registry";
+
+interface FocusableChartProps {
+ chartId: FocusableChartId;
+ children: ReactNode;
+}
+
+/**
+ * Wraps a chart with a focus-ring pulse effect. Pairs with `focusChart(id)`
+ * — when the `dashboard_pilot` agent emits a `focus_chart({ chart_id })`
+ * tool call, the dispatcher invokes the registered callback here, which
+ * scrolls into view and flips `focused` true for 1.2s.
+ *
+ * Named `chartId` (not `id`) because this is a logical focus-registry key,
+ * not a DOM id attribute.
+ */
+export function FocusableChart({ chartId, children }: FocusableChartProps) {
+ const { setRef, focused } = useFocusable(chartId);
+
+ return (
+ + Fare Distribution +
+
+ {children}
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/hourly-heatmap.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/hourly-heatmap.tsx
new file mode 100644
index 000000000..51ce98ed8
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/hourly-heatmap.tsx
@@ -0,0 +1,186 @@
+import { useMemo } from "react";
+import type { HeatmapCell } from "../hooks/use-dashboard-data";
+
+interface HourlyHeatmapProps {
+ data: HeatmapCell[];
+ isLoading: boolean;
+ /** Fires when the user clicks a cell. Receives a human-readable slot label
+ * the route typically routes to `dispatchToAgent` so the agent can narrate. */
+ onCellClick?: (label: string, cell: HeatmapCell) => void;
+}
+
+// Spark's DAYOFWEEK returns 1..7 (Sunday=1, Saturday=7). We render Mon–Sun
+// for commuter intuition, so the row order is shifted.
+const DAY_ROW_ORDER: Array<{ label: string; dayOfWeek: number }> = [
+ { label: "Mon", dayOfWeek: 2 },
+ { label: "Tue", dayOfWeek: 3 },
+ { label: "Wed", dayOfWeek: 4 },
+ { label: "Thu", dayOfWeek: 5 },
+ { label: "Fri", dayOfWeek: 6 },
+ { label: "Sat", dayOfWeek: 7 },
+ { label: "Sun", dayOfWeek: 1 },
+];
+
+const FULL_DAY_LABEL: Record
+
+ );
+ }
+
+ return (
+ + Pickup Heatmap +
+ +
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/insight-card.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/insight-card.tsx
new file mode 100644
index 000000000..b17b44d70
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/insight-card.tsx
@@ -0,0 +1,24 @@
+import { LightbulbIcon } from "lucide-react";
+
+interface InsightCardProps {
+ title: string;
+ description: string;
+}
+
+export function InsightCard({ title, description }: InsightCardProps) {
+ return (
+
+
+
+ + Pickup Heatmap + + day × hour + +
+ + click a cell to investigate + +
+
+
+
+
+ {HOURS.map((h) => (
+
+
+ {h % 3 === 0 ? formatHour(h) : ""}
+
+ ))}
+
+ {DAY_ROW_ORDER.map((row) => (
+
+
+ ))}
+
+ {row.label}
+
+ {HOURS.map((h) => {
+ const cell = cellByKey.get(`${row.dayOfWeek}-${h}`);
+ const count = cell?.trip_count ?? 0;
+ const bg = cellColor(count, maxCount, dark);
+ const label = `${FULL_DAY_LABEL[row.dayOfWeek]} at ${formatHour(h)}`;
+ const title = `${label}: ${count.toLocaleString()} trips${
+ cell ? ` · $${cell.avg_fare} avg fare` : ""
+ }`;
+ return (
+
+ fewer
+
+
+ {[0, 0.25, 0.5, 0.75, 1].map((t) => (
+
+ ))}
+
+ more
+ {maxCount > 0 && (
+
+ peak {maxCount.toLocaleString()} trips/slot
+
+ )}
+
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/inspector-toggle.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/inspector-toggle.tsx
new file mode 100644
index 000000000..4a0388b6b
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/inspector-toggle.tsx
@@ -0,0 +1,31 @@
+import { ActivityIcon } from "lucide-react";
+import {
+ toggleInspector,
+ useStreamInspector,
+} from "../hooks/use-stream-inspector";
+
+/**
+ * Floating icon in the bottom-right that opens the Stream Inspector.
+ * Complements the ⌘K keyboard shortcut with a discoverable affordance.
+ */
+export function InspectorToggle() {
+ const { records } = useStreamInspector();
+ const currentRunEvents = records[0]?.events.length ?? 0;
+
+ return (
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/kpi-cards.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/kpi-cards.tsx
new file mode 100644
index 000000000..8d6ddd843
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/kpi-cards.tsx
@@ -0,0 +1,258 @@
+import { CarIcon, DollarSignIcon, MapPinIcon, RulerIcon } from "lucide-react";
+import { useId, useMemo } from "react";
+import { useChartColors } from "../hooks/use-chart-colors";
+import type { KPIData, SparklineRow } from "../hooks/use-dashboard-data";
+
+interface KPICardsProps {
+ data: KPIData | null;
+ sparklines: SparklineRow[];
+ isLoading: boolean;
+}
+
+interface CardProps {
+ title: string;
+ value: string;
+ subtitle?: string;
+ icon: React.ReactNode;
+ isLoading: boolean;
+ /** 30-bar trailing series (or empty → no sparkline). Values are normalized inside. */
+ series: number[];
+ trend?: number;
+}
+
+/**
+ * Fixed-size inline sparkline. Using a hand-rolled SVG rather than recharts
+ * because:
+ * - recharts inside a grid of 4 cards would mount 4× chart engines with
+ * ResponsiveContainer observers — heavy for a decorative element;
+ * - we want sub-pixel control over the baseline tint + end-cap dot.
+ */
+function Sparkline({
+ values,
+ color,
+ isLoading,
+}: {
+ values: number[];
+ color: string;
+ isLoading: boolean;
+}) {
+ const gradientId = useId();
+ const width = 120;
+ const height = 36;
+
+ const { pathD, areaD, lastPoint } = useMemo(() => {
+ if (values.length === 0) {
+ return { pathD: "", areaD: "", lastPoint: null };
+ }
+ const min = Math.min(...values);
+ const max = Math.max(...values);
+ const span = max - min || 1;
+ const step = values.length > 1 ? width / (values.length - 1) : width;
+ const points = values.map((v, i) => {
+ const x = i * step;
+ const y = height - 4 - ((v - min) / span) * (height - 8);
+ return { x, y };
+ });
+ const d = points
+ .map(
+ (p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`,
+ )
+ .join(" ");
+ const area = `${d} L ${width} ${height} L 0 ${height} Z`;
+ return { pathD: d, areaD: area, lastPoint: points[points.length - 1] };
+ }, [values]);
+
+ if (isLoading) {
+ return ;
+ }
+ // Intentionally-empty series (e.g. categorical KPI like "Top Pickup Zone"):
+ // keep the slot reserved so the four cards stay the same height, but render
+ // nothing inside — otherwise the muted placeholder looks like a ghost
+ // "still loading" spinner.
+ if (values.length === 0) {
+ return ;
+ }
+
+ return (
+
+ );
+}
+
+function KPICard({
+ title,
+ value,
+ subtitle,
+ icon,
+ isLoading,
+ series,
+ trend,
+}: CardProps) {
+ const c = useChartColors();
+ const trendLabel =
+ trend === undefined
+ ? null
+ : trend > 0
+ ? `+${trend.toFixed(0)}%`
+ : `${trend.toFixed(0)}%`;
+ const trendColor =
+ trend === undefined
+ ? ""
+ : trend > 0
+ ? "text-emerald-600 dark:text-emerald-400"
+ : trend < 0
+ ? "text-rose-600 dark:text-rose-400"
+ : "text-muted-foreground";
+
+ return (
+
+
+
+
+ + {title} +
++ {description} +
+
+
+ );
+}
+
+function formatNumber(n: number): string {
+ if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+ if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+ return n.toLocaleString();
+}
+
+/** Percent delta between the last `tail` window and the previous window. */
+function windowedTrend(values: number[], tail: number): number | undefined {
+ // Drop nulls/undefined/NaN (e.g. days with no trips after a fare filter) and
+ // coerce everything to Number defensively — some drivers hand back DECIMAL
+ // columns as strings, and `0 + "12.35"` would silently string-concat and
+ // render "NaN%" once we tried to divide.
+ const clean = values.map((v) => Number(v)).filter(Number.isFinite);
+ if (clean.length < tail * 2) return undefined;
+ const recent = clean.slice(-tail);
+ const prior = clean.slice(-tail * 2, -tail);
+ const recentAvg = recent.reduce((a, b) => a + b, 0) / recent.length;
+ const priorAvg = prior.reduce((a, b) => a + b, 0) / prior.length;
+ if (!Number.isFinite(recentAvg) || !Number.isFinite(priorAvg))
+ return undefined;
+ if (priorAvg === 0) return undefined;
+ return ((recentAvg - priorAvg) / priorAvg) * 100;
+}
+
+export function KPICards({ data, sparklines, isLoading }: KPICardsProps) {
+ // Coerce on intake so downstream sparkline paths and trend math stay purely
+ // numeric — avoids surprises if a driver ever hands back DECIMAL-as-string.
+ const toNum = (v: unknown) => {
+ const n = Number(v);
+ return Number.isFinite(n) ? n : 0;
+ };
+ const tripSeries = sparklines.map((r) => toNum(r.trip_count));
+ const fareSeries = sparklines.map((r) => toNum(r.avg_fare));
+ const distSeries = sparklines.map((r) => toNum(r.avg_distance));
+ const revenueSeries = sparklines.map((r) => toNum(r.total_revenue));
+
+ const TREND_WINDOW = 7;
+
+ return (
+
+
+ {title}
+
+ {icon}
+
+ {isLoading ? (
+
+ ) : (
+ <>
+
+
+ {subtitle && (
+ {value}
+ {trendLabel && ( + + {trendLabel} + + )} ++ {subtitle} +
+ )} +
+
+
+ )}
+
+ 0
+ ? `$${formatNumber(
+ // Explicit Number() wrap on each accumulator step defends
+ // against a single stray string in the series silently
+ // turning the whole sum into a concatenated blob.
+ revenueSeries.reduce(
+ (a, b) => a + (Number.isFinite(b) ? Number(b) : 0),
+ 0,
+ ),
+ )} revenue`
+ : undefined
+ }
+ icon={
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/quick-actions-bar.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/quick-actions-bar.tsx
new file mode 100644
index 000000000..c67aa0662
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/quick-actions-bar.tsx
@@ -0,0 +1,119 @@
+import { BookmarkPlusIcon, EraserIcon, FilterXIcon, XIcon } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+
+interface QuickActionsBarProps {
+ /**
+ * Dispatches a message through the chat pipeline (same `useAgentStream`
+ * the text input uses). Keeps the demo narrative honest: clicks are just
+ * prefilled prompts — the agent still reasons and the approval gate
+ * still fires for destructive actions.
+ */
+ onSend: (message: string) => void;
+ disabled?: boolean;
+}
+
+export function QuickActionsBar({
+ onSend,
+ disabled = false,
+}: QuickActionsBarProps) {
+ const [savingName, setSavingName] = useState
+
+ Quick actions
+
+
+ {savingName === null ? (
+
+ ) : (
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/saved-views-panel.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/saved-views-panel.tsx
new file mode 100644
index 000000000..b1eb184bf
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/saved-views-panel.tsx
@@ -0,0 +1,193 @@
+import {
+ BookmarkIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+ Loader2Icon,
+ RefreshCwIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+
+export interface SavedView {
+ pngPath: string;
+ metaPath: string;
+ metadata: {
+ name?: string;
+ description?: string | null;
+ filters?: Record
+
+ )}
+
+
+
+
+
+ {/*
+ Header row is a flex container rather than a single big button so
+ the refresh action can sit beside the collapse toggle without
+ being nested inside it (`
+ );
+}
+
+function SavedViewCard({
+ view,
+ onLoad,
+}: {
+ view: SavedView;
+ onLoad: () => void;
+}) {
+ const savedAt = view.metadata.savedAt
+ ? new Date(view.metadata.savedAt).toLocaleString()
+ : "";
+
+ return (
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/stream-inspector.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/stream-inspector.tsx
new file mode 100644
index 000000000..adf15dccc
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/stream-inspector.tsx
@@ -0,0 +1,246 @@
+import { ChevronDownIcon, ChevronRightIcon, XIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import {
+ clearInspectorHistory,
+ closeInspector,
+ type StreamEventRecord,
+ type StreamRecord,
+ useStreamInspector,
+} from "../hooks/use-stream-inspector";
+
+type FilterMode =
+ | "all"
+ | "tool_calls"
+ | "messages"
+ | "approvals"
+ | "sub_agents";
+
+const FILTER_OPTIONS: Array<{ id: FilterMode; label: string }> = [
+ { id: "all", label: "All" },
+ { id: "tool_calls", label: "Tool calls" },
+ { id: "messages", label: "Messages" },
+ { id: "approvals", label: "Approvals" },
+ { id: "sub_agents", label: "Sub-agents" },
+];
+
+function matchesFilter(
+ event: StreamEventRecord["event"],
+ mode: FilterMode,
+): boolean {
+ if (mode === "all") return true;
+ if (mode === "messages") {
+ return (
+ event.type === "response.output_text.delta" ||
+ event.type === "response.output_item.added" ||
+ event.type === "response.output_item.done" ||
+ event.type === "response.completed"
+ );
+ }
+ if (mode === "tool_calls") {
+ return (
+ (event.type === "response.output_item.added" ||
+ event.type === "response.output_item.done") &&
+ event.item?.type === "function_call"
+ );
+ }
+ if (mode === "approvals") {
+ return event.type === "appkit.approval_pending";
+ }
+ if (mode === "sub_agents") {
+ // Sub-agent invocations surface as `agent-
+
+
+ );
+}
+
+function RunBlock({ record }: { record: StreamRecord }) {
+ return (
+
+
+ );
+}
+
+export function StreamInspector() {
+ const { isOpen, records } = useStreamInspector();
+ const [filter, setFilter] = useState
+
+
+ {record.label}
+
+
+ {record.events.length} events · started{" "}
+ {new Date(
+ Date.now() - (performance.now() - record.startedAt),
+ ).toLocaleTimeString()}
+
+
+ {record.events.map((er, idx) => (
+
+
+
+ );
+ }
+
+ return (
+ + Top Pickup Zones +
+ +
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/components/trip-chart.tsx b/apps/dev-playground/client/src/features/smart-dashboard/components/trip-chart.tsx
new file mode 100644
index 000000000..89f365f10
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/components/trip-chart.tsx
@@ -0,0 +1,144 @@
+import { useId } from "react";
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ ReferenceArea,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import type { Highlight } from "../hooks/use-action-dispatcher";
+import { useChartColors } from "../hooks/use-chart-colors";
+import type { TripOverTime } from "../hooks/use-dashboard-data";
+
+interface TripChartProps {
+ data: TripOverTime[];
+ highlights: Highlight[];
+ isLoading: boolean;
+}
+
+const HIGHLIGHT_COLORS: Record
+
+
+ {rows.length === 0 ? (
+ + Top Pickup Zones +
+
+
+
+
+
+ No zones in range
+
+ ) : (
+
+ {rows.map((row) => {
+ const value =
+ metric === "trips" ? row.trip_count : row.total_revenue;
+ const pct = max > 0 ? (value / max) * 100 : 0;
+ const isHighlighted = highlightSet.has(row.pickup_zip);
+ const highlightLabel = highlightSet.get(row.pickup_zip);
+
+ return (
+
+ );
+ })}
+
+ )}
+
+
+ );
+ }
+
+ return (
+ + Trips Over Time +
+
+
+
+
+
+
+
+
+
+
+
+ v >= 1000 ? `${(v / 1000).toFixed(0)}K` : String(v)
+ }
+ />
+ [value.toLocaleString(), "Trips"]}
+ />
+ {highlights.map((h, i) => {
+ const x1 = findClosestDate(h.start, dates, "start");
+ const x2 = findClosestDate(h.end, dates, "end");
+ if (!x1 || !x2) return null;
+ return (
+
+
+
+ );
+}
diff --git a/apps/dev-playground/client/src/features/smart-dashboard/hooks/use-action-dispatcher.ts b/apps/dev-playground/client/src/features/smart-dashboard/hooks/use-action-dispatcher.ts
new file mode 100644
index 000000000..c133847ca
--- /dev/null
+++ b/apps/dev-playground/client/src/features/smart-dashboard/hooks/use-action-dispatcher.ts
@@ -0,0 +1,310 @@
+import { useCallback, useMemo, useRef } from "react";
+import type { SSEEvent } from "./use-agent-stream";
+import type { DashboardFilters } from "./use-dashboard-data";
+import { focusChart, isFocusableChartId } from "./use-focus-registry";
+
+export interface Highlight {
+ start: string;
+ end: string;
+ color: "blue" | "red" | "yellow";
+ label?: string;
+}
+
+export interface HighlightedZone {
+ zip: string;
+ label?: string;
+}
+
+const DASHBOARD_TOOLS = new Set