feat(webapp): storybook gallery for the dashboard agent

apps/webapp/app/components/dashboard-agent/demo/components/DemoChartCard.tsx

@@ -0,0 +1,32 @@
+import type { AgentIntent, ChartAction } from "@internal/dashboard-agent-contracts";
+import { QueryResultsChart } from "~/components/code/QueryResultsChart";
+import { AGENT_CHART_PLOT_CLASS, ChartActions } from "../../AgentChart";
+import { AgentCard, AgentCardHeader } from "../../agent-card";
+import { demoChart } from "../fixtures/chart";
+
+export function DemoChartCard({
+  title = demoChart.title,
+  actions,
+  onIntent,
+}: {
+  title?: string;
+  actions?: ChartAction[];
+  onIntent?: (intent: AgentIntent) => void;
+}) {
+  return (
+    <AgentCard>
+      {title ? (
+        <AgentCardHeader className="text-xs font-medium text-text-dimmed">{title}</AgentCardHeader>
+      ) : null}
+      <div className={AGENT_CHART_PLOT_CLASS}>
+        <QueryResultsChart
+          rows={demoChart.rows}
+          columns={demoChart.columns}
+          config={demoChart.config}
+          timeRange={demoChart.timeRange}
+        />
+      </div>
+      <ChartActions actions={actions ?? []} onIntent={onIntent} />
+    </AgentCard>
+  );
+}

apps/webapp/app/components/dashboard-agent/demo/components/DemoIntentBubble.tsx

@@ -0,0 +1,60 @@
+import {
+  ArrowTopRightOnSquareIcon,
+  CheckCircleIcon,
+  NoSymbolIcon,
+} from "@heroicons/react/20/solid";
+import { Button } from "~/components/primitives/Buttons";
+import { cn } from "~/utils/cn";
+import { AgentStatusIcon } from "../../agent-badges";
+import { ChatStatusLine } from "../../chat-layout";
+import type { DemoIntent } from "../fixtures/intents";
+
+export function DemoIntentBubble({
+  intent,
+  onIntercept,
+}: {
+  intent: DemoIntent;
+  onIntercept?: (message: string) => void;
+}) {
+  const rejected = !intent.executable;
+
+  return (
+    <div
+      className={cn(
+        "rounded-md border px-3 py-3",
+        rejected
+          ? "border-border-bright bg-background-bright/40"
+          : "border-indigo-500/30 bg-indigo-500/5"
+      )}
+    >
+      <ChatStatusLine
+        icon={
+          <AgentStatusIcon
+            tone={rejected ? "error" : "success"}
+            icon={rejected ? NoSymbolIcon : CheckCircleIcon}
+            className="mt-px"
+          />
+        }
+      >
+        <p className="text-xs text-text-bright">{intent.outcome}</p>
+        {intent.deepLinkLabel ? (
+          <Button
+            variant="secondary/small"
+            LeadingIcon={ArrowTopRightOnSquareIcon}
+            onClick={() =>
+              onIntercept?.(
+                `would navigate to ${intent.deepLinkLabel} (${
+                  intent.intent.kind === "navigate" ? intent.intent.target : intent.intent.kind
+                })`
+              )
+            }
+          >
+            <span className="break-all text-left font-mono text-[10px]">
+              {intent.deepLinkLabel}
+            </span>
+          </Button>
+        ) : null}
+      </ChatStatusLine>
+    </div>
+  );
+}