diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx index 1ac3f23..b28bb3a 100644 --- a/apps/web/src/App.tsx +++ b/apps/web/src/App.tsx @@ -1,11 +1,25 @@ import { AgentActivity } from "./components/AgentActivity.js"; import { ApprovalQueue } from "./components/ApprovalQueue.js"; import { ErrorBanner } from "./components/ErrorBanner.js"; +import { GuidedDemoPanel } from "./components/GuidedDemoPanel.js"; import { useScanSession } from "./hooks/useScanSession.js"; +import { useGuidedDemo } from "./hooks/useGuidedDemo.js"; import { classifyClientError, recoveryFor, type ProductErrorKind } from "./lib/errors.js"; export function App() { const session = useScanSession(); + const demoMode = + import.meta.env.VITE_DEMO_MODE === "1" || + import.meta.env.VITE_SCAN_DRIVER === "replay" || + session.activity.driver === "replay"; + const guided = useGuidedDemo({ + activity: session.activity, + cards: session.cards, + beginScan: session.beginScan, + updateCard: session.updateCard, + cancelScan: session.cancelScan, + resetDemoScan: session.resetDemoScan, + }); const costs = session.activity.costs; const capped = session.activity.status === "cost_capped"; const partial = session.activity.status === "partial"; @@ -44,6 +58,15 @@ export function App() { : "no active scan"} {session.activity.driver ? ` · ${session.activity.driver}` : ""} + {demoMode && !guided.active ? ( + + ) : null} {showBanner && message ? ( @@ -72,9 +95,20 @@ export function App() { scanId={session.activity.scanId} scanStatus={session.activity.status} onCardUpdated={session.updateCard} + guidedMode={demoMode && guided.state.phase !== "idle"} + guidedCardId={guided.state.targetCardId} /> + {demoMode && guided.state.phase !== "idle" ? ( + + ) : null} +