docs(web): add Dream Progress screenshots + capture script

Wires up the DEV-only /dream-progress showcase to a Playwright script
that captures idle/active/stalled variants for documentation. Also
regenerates routeTree.gen.ts to include the new queue + showcase routes
and folds in Biome formatter fixes.

Run `node scripts/screenshot-dream-progress.mjs` from packages/web with
the dev server up to refresh the images.

packages/web/scripts/screenshot-dream-progress.mjs

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+/**
+ * Capture documentation screenshots for the Dream Progress panel.
+ *
+ * The dev server must already be running at the URL passed in via PREVIEW_URL
+ * (defaults to http://localhost:5178). The /dream-progress showcase route is
+ * DEV-only and renders three variants of the panel against mock data.
+ *
+ * Usage:
+ *   PREVIEW_URL=http://localhost:5178 OUT_DIR=../../docs/screenshots/live-dream-progress \
+ *     node scripts/screenshot-dream-progress.mjs
+ */
+import { mkdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "@playwright/test";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PREVIEW_URL = process.env.PREVIEW_URL ?? "http://localhost:5178";
+const OUT_DIR = path.resolve(
+	__dirname,
+	process.env.OUT_DIR ?? "../../../docs/screenshots/live-dream-progress",
+);
+
+async function main() {
+	await mkdir(OUT_DIR, { recursive: true });
+	const browser = await chromium.launch();
+	const context = await browser.newContext({
+		viewport: { width: 1440, height: 900 },
+		deviceScaleFactor: 2,
+		colorScheme: "dark",
+	});
+	const page = await context.newPage();
+
+	// Seed localStorage with a fake instance so the root redirect doesn't kick
+	// us to the settings page. The showcase doesn't actually make any network
+	// requests — it renders against in-memory mock data.
+	await page.addInitScript(() => {
+		localStorage.setItem(
+			"openconcho:instances",
+			JSON.stringify({
+				instances: [
+					{
+						id: "inst_dev_demo",
+						name: "Demo (mock)",
+						baseUrl: "http://localhost:9999",
+						token: "",
+					},
+				],
+				activeId: "inst_dev_demo",
+			}),
+		);
+	});
+
+	await page.goto(`${PREVIEW_URL}/dream-progress`, { waitUntil: "networkidle" });
+	await page.waitForSelector('[data-testid="dream-progress-panel"]');
+	// Let framer-motion entrance animations settle.
+	await page.waitForTimeout(600);
+
+	// Full showcase — top-to-bottom view of all three variants.
+	await page.screenshot({
+		path: path.join(OUT_DIR, "overview.png"),
+		fullPage: true,
+	});
+
+	// Variant: idle
+	{
+		const handle = await page.locator("section").nth(0);
+		await handle.scrollIntoViewIfNeeded();
+		await page.waitForTimeout(150);
+		await handle.screenshot({ path: path.join(OUT_DIR, "idle.png") });
+	}
+
+	// Variant: active (with per-session breakdown)
+	{
+		const handle = await page.locator("section").nth(1);
+		await handle.scrollIntoViewIfNeeded();
+		await page.waitForTimeout(150);
+		await handle.screenshot({ path: path.join(OUT_DIR, "active.png") });
+	}
+
+	// Variant: stalled (>30m without forward progress)
+	{
+		const handle = await page.locator("section").nth(2);
+		await handle.scrollIntoViewIfNeeded();
+		await page.waitForTimeout(150);
+		await handle.screenshot({ path: path.join(OUT_DIR, "stalled.png") });
+	}
+
+	await browser.close();
+	console.log(`Saved screenshots to ${OUT_DIR}`);
+}
+
+main().catch((err) => {
+	console.error(err);
+	process.exit(1);
+});

packages/web/src/components/workspaces/DreamProgressPanel.tsx

@@ -144,9 +144,9 @@ export function DreamProgressPanel({
 								Stalled for {formatElapsed(stale.elapsedMs)} without forward progress
 							</Body>
 							<Caption as="p" className="mt-0.5">
-								Work has been in-flight since{" "}
+								Work has been in-flight since {new Date(stale.stalledSince).toLocaleTimeString()}{" "}
-								{new Date(stale.stalledSince).toLocaleTimeString()} with no advance in the
+								with no advance in the completed count. A specialist may be hung — check Honcho
-								completed count. A specialist may be hung — check Honcho logs.
+								logs.
 							</Caption>
 						</div>
 					</div>
@@ -197,9 +197,9 @@ export function DreamProgressPanel({
 						strokeWidth={2}
 					/>
 					<Caption as="p">
-						Honcho's <code className="font-mono">/queue/status</code> exposes aggregate counts
+						Honcho's <code className="font-mono">/queue/status</code> exposes aggregate counts only.
-						only. Per-dream observer/observed pair, specialist phase (deduction vs. induction),
+						Per-dream observer/observed pair, specialist phase (deduction vs. induction), and token
-						and token telemetry are tracked upstream —{" "}
+						telemetry are tracked upstream —{" "}
 						<a
 							href="https://github.com/plastic-labs/honcho/issues/new?title=Surface+per-work-unit+detail+in+queue/status&labels=enhancement"
 							target="_blank"
@@ -246,11 +246,7 @@ function SessionsTable({
 	return (
 		<div className="px-5 pb-5">
 			<div className="flex items-center gap-1.5 mb-2">
-				<TimerReset
+				<TimerReset className="w-3.5 h-3.5" style={{ color: "var(--text-3)" }} strokeWidth={1.5} />
-					className="w-3.5 h-3.5"
-					style={{ color: "var(--text-3)" }}
-					strokeWidth={1.5}
-				/>
 				<Caption>
 					{entries.length} session{entries.length !== 1 ? "s" : ""} with active work
 				</Caption>
@@ -281,10 +277,7 @@ function SessionsTable({
 					</thead>
 					<tbody>
 						{entries.map(([sid, s], i) => (
-							<tr
+							<tr key={sid} style={{ borderTop: i > 0 ? "1px solid var(--border)" : undefined }}>
-								key={sid}
-								style={{ borderTop: i > 0 ? "1px solid var(--border)" : undefined }}
-							>
 								<td className="py-1.5 px-3">
 									<Link
 										to={"/workspaces/$workspaceId/sessions/$sessionId" as never}
@@ -295,28 +288,16 @@ function SessionsTable({
 										{mask(sid)}
 									</Link>
 								</td>
-								<td
+								<td className="py-1.5 px-3 text-right font-mono" style={{ color: "var(--text-2)" }}>
-									className="py-1.5 px-3 text-right font-mono"
-									style={{ color: "var(--text-2)" }}
-								>
 									{s.total_work_units}
 								</td>
-								<td
+								<td className="py-1.5 px-3 text-right font-mono" style={{ color: COLOR.success }}>
-									className="py-1.5 px-3 text-right font-mono"
-									style={{ color: COLOR.success }}
-								>
 									{s.completed_work_units}
 								</td>
-								<td
+								<td className="py-1.5 px-3 text-right font-mono" style={{ color: COLOR.warning }}>
-									className="py-1.5 px-3 text-right font-mono"
-									style={{ color: COLOR.warning }}
-								>
 									{s.in_progress_work_units}
 								</td>
-								<td
+								<td className="py-1.5 px-3 text-right font-mono" style={{ color: "var(--text-3)" }}>
-									className="py-1.5 px-3 text-right font-mono"
-									style={{ color: "var(--text-3)" }}
-								>
 									{s.pending_work_units}
 								</td>
 							</tr>

packages/web/src/routeTree.gen.ts

@@ -14,8 +14,10 @@ import { Route as SettingsRouteImport } from './routes/settings'
 import { Route as ExploreRouteImport } from './routes/explore'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as WorkspacesWorkspaceIdRouteImport } from './routes/workspaces_.$workspaceId'
+import { Route as DevDreamProgressRouteImport } from './routes/_dev.dream-progress'
 import { Route as WorkspacesWorkspaceIdWebhooksRouteImport } from './routes/workspaces_.$workspaceId_.webhooks'
 import { Route as WorkspacesWorkspaceIdSessionsRouteImport } from './routes/workspaces_.$workspaceId_.sessions'
+import { Route as WorkspacesWorkspaceIdQueueRouteImport } from './routes/workspaces_.$workspaceId_.queue'
 import { Route as WorkspacesWorkspaceIdPeersRouteImport } from './routes/workspaces_.$workspaceId_.peers'
 import { Route as WorkspacesWorkspaceIdConclusionsRouteImport } from './routes/workspaces_.$workspaceId_.conclusions'
 import { Route as WorkspacesWorkspaceIdSessionsSessionIdRouteImport } from './routes/workspaces_.$workspaceId_.sessions_.$sessionId'
@@ -47,6 +49,11 @@ const WorkspacesWorkspaceIdRoute = WorkspacesWorkspaceIdRouteImport.update({
   path: '/workspaces/$workspaceId',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DevDreamProgressRoute = DevDreamProgressRouteImport.update({
+  id: '/_dev/dream-progress',
+  path: '/dream-progress',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const WorkspacesWorkspaceIdWebhooksRoute =
   WorkspacesWorkspaceIdWebhooksRouteImport.update({
     id: '/workspaces_/$workspaceId_/webhooks',
@@ -59,6 +66,12 @@ const WorkspacesWorkspaceIdSessionsRoute =
     path: '/workspaces/$workspaceId/sessions',
     getParentRoute: () => rootRouteImport,
   } as any)
+const WorkspacesWorkspaceIdQueueRoute =
+  WorkspacesWorkspaceIdQueueRouteImport.update({
+    id: '/workspaces_/$workspaceId_/queue',
+    path: '/workspaces/$workspaceId/queue',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const WorkspacesWorkspaceIdPeersRoute =
   WorkspacesWorkspaceIdPeersRouteImport.update({
     id: '/workspaces_/$workspaceId_/peers',
@@ -95,9 +108,11 @@ export interface FileRoutesByFullPath {
   '/explore': typeof ExploreRoute
   '/settings': typeof SettingsRoute
   '/workspaces': typeof WorkspacesRoute
+  '/dream-progress': typeof DevDreamProgressRoute
   '/workspaces/$workspaceId': typeof WorkspacesWorkspaceIdRoute
   '/workspaces/$workspaceId/conclusions': typeof WorkspacesWorkspaceIdConclusionsRoute
   '/workspaces/$workspaceId/peers': typeof WorkspacesWorkspaceIdPeersRoute
+  '/workspaces/$workspaceId/queue': typeof WorkspacesWorkspaceIdQueueRoute
   '/workspaces/$workspaceId/sessions': typeof WorkspacesWorkspaceIdSessionsRoute
   '/workspaces/$workspaceId/webhooks': typeof WorkspacesWorkspaceIdWebhooksRoute
   '/workspaces/$workspaceId/peers/$peerId': typeof WorkspacesWorkspaceIdPeersPeerIdRoute
@@ -109,9 +124,11 @@ export interface FileRoutesByTo {
   '/explore': typeof ExploreRoute
   '/settings': typeof SettingsRoute
   '/workspaces': typeof WorkspacesRoute
+  '/dream-progress': typeof DevDreamProgressRoute
   '/workspaces/$workspaceId': typeof WorkspacesWorkspaceIdRoute
   '/workspaces/$workspaceId/conclusions': typeof WorkspacesWorkspaceIdConclusionsRoute
   '/workspaces/$workspaceId/peers': typeof WorkspacesWorkspaceIdPeersRoute
+  '/workspaces/$workspaceId/queue': typeof WorkspacesWorkspaceIdQueueRoute
   '/workspaces/$workspaceId/sessions': typeof WorkspacesWorkspaceIdSessionsRoute
   '/workspaces/$workspaceId/webhooks': typeof WorkspacesWorkspaceIdWebhooksRoute
   '/workspaces/$workspaceId/peers/$peerId': typeof WorkspacesWorkspaceIdPeersPeerIdRoute
@@ -124,9 +141,11 @@ export interface FileRoutesById {
   '/explore': typeof ExploreRoute
   '/settings': typeof SettingsRoute
   '/workspaces': typeof WorkspacesRoute
+  '/_dev/dream-progress': typeof DevDreamProgressRoute
   '/workspaces_/$workspaceId': typeof WorkspacesWorkspaceIdRoute
   '/workspaces_/$workspaceId_/conclusions': typeof WorkspacesWorkspaceIdConclusionsRoute
   '/workspaces_/$workspaceId_/peers': typeof WorkspacesWorkspaceIdPeersRoute
+  '/workspaces_/$workspaceId_/queue': typeof WorkspacesWorkspaceIdQueueRoute
   '/workspaces_/$workspaceId_/sessions': typeof WorkspacesWorkspaceIdSessionsRoute
   '/workspaces_/$workspaceId_/webhooks': typeof WorkspacesWorkspaceIdWebhooksRoute
   '/workspaces_/$workspaceId_/peers_/$peerId': typeof WorkspacesWorkspaceIdPeersPeerIdRoute
@@ -140,9 +159,11 @@ export interface FileRouteTypes {
     | '/explore'
     | '/settings'
     | '/workspaces'
+    | '/dream-progress'
     | '/workspaces/$workspaceId'
     | '/workspaces/$workspaceId/conclusions'
     | '/workspaces/$workspaceId/peers'
+    | '/workspaces/$workspaceId/queue'
     | '/workspaces/$workspaceId/sessions'
     | '/workspaces/$workspaceId/webhooks'
     | '/workspaces/$workspaceId/peers/$peerId'
@@ -154,9 +175,11 @@ export interface FileRouteTypes {
     | '/explore'
     | '/settings'
     | '/workspaces'
+    | '/dream-progress'
     | '/workspaces/$workspaceId'
     | '/workspaces/$workspaceId/conclusions'
     | '/workspaces/$workspaceId/peers'
+    | '/workspaces/$workspaceId/queue'
     | '/workspaces/$workspaceId/sessions'
     | '/workspaces/$workspaceId/webhooks'
     | '/workspaces/$workspaceId/peers/$peerId'
@@ -168,9 +191,11 @@ export interface FileRouteTypes {
     | '/explore'
     | '/settings'
     | '/workspaces'
+    | '/_dev/dream-progress'
     | '/workspaces_/$workspaceId'
     | '/workspaces_/$workspaceId_/conclusions'
     | '/workspaces_/$workspaceId_/peers'
+    | '/workspaces_/$workspaceId_/queue'
     | '/workspaces_/$workspaceId_/sessions'
     | '/workspaces_/$workspaceId_/webhooks'
     | '/workspaces_/$workspaceId_/peers_/$peerId'
@@ -183,9 +208,11 @@ export interface RootRouteChildren {
   ExploreRoute: typeof ExploreRoute
   SettingsRoute: typeof SettingsRoute
   WorkspacesRoute: typeof WorkspacesRoute
+  DevDreamProgressRoute: typeof DevDreamProgressRoute
   WorkspacesWorkspaceIdRoute: typeof WorkspacesWorkspaceIdRoute
   WorkspacesWorkspaceIdConclusionsRoute: typeof WorkspacesWorkspaceIdConclusionsRoute
   WorkspacesWorkspaceIdPeersRoute: typeof WorkspacesWorkspaceIdPeersRoute
+  WorkspacesWorkspaceIdQueueRoute: typeof WorkspacesWorkspaceIdQueueRoute
   WorkspacesWorkspaceIdSessionsRoute: typeof WorkspacesWorkspaceIdSessionsRoute
   WorkspacesWorkspaceIdWebhooksRoute: typeof WorkspacesWorkspaceIdWebhooksRoute
   WorkspacesWorkspaceIdPeersPeerIdRoute: typeof WorkspacesWorkspaceIdPeersPeerIdRoute
@@ -230,6 +257,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof WorkspacesWorkspaceIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_dev/dream-progress': {
+      id: '/_dev/dream-progress'
+      path: '/dream-progress'
+      fullPath: '/dream-progress'
+      preLoaderRoute: typeof DevDreamProgressRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/workspaces_/$workspaceId_/webhooks': {
       id: '/workspaces_/$workspaceId_/webhooks'
       path: '/workspaces/$workspaceId/webhooks'
@@ -244,6 +278,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof WorkspacesWorkspaceIdSessionsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/workspaces_/$workspaceId_/queue': {
+      id: '/workspaces_/$workspaceId_/queue'
+      path: '/workspaces/$workspaceId/queue'
+      fullPath: '/workspaces/$workspaceId/queue'
+      preLoaderRoute: typeof WorkspacesWorkspaceIdQueueRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/workspaces_/$workspaceId_/peers': {
       id: '/workspaces_/$workspaceId_/peers'
       path: '/workspaces/$workspaceId/peers'
@@ -287,9 +328,11 @@ const rootRouteChildren: RootRouteChildren = {
   ExploreRoute: ExploreRoute,
   SettingsRoute: SettingsRoute,
   WorkspacesRoute: WorkspacesRoute,
+  DevDreamProgressRoute: DevDreamProgressRoute,
   WorkspacesWorkspaceIdRoute: WorkspacesWorkspaceIdRoute,
   WorkspacesWorkspaceIdConclusionsRoute: WorkspacesWorkspaceIdConclusionsRoute,
   WorkspacesWorkspaceIdPeersRoute: WorkspacesWorkspaceIdPeersRoute,
+  WorkspacesWorkspaceIdQueueRoute: WorkspacesWorkspaceIdQueueRoute,
   WorkspacesWorkspaceIdSessionsRoute: WorkspacesWorkspaceIdSessionsRoute,
   WorkspacesWorkspaceIdWebhooksRoute: WorkspacesWorkspaceIdWebhooksRoute,
   WorkspacesWorkspaceIdPeersPeerIdRoute: WorkspacesWorkspaceIdPeersPeerIdRoute,

packages/web/src/routes/_dev.dream-progress.tsx

@@ -86,12 +86,7 @@ function DreamProgressShowcase() {
 				>
 					Idle
 				</h3>
-				<DreamProgressPanel
+				<DreamProgressPanel workspaceId={WORKSPACE_ID} data={IDLE} isLoading={false} error={null} />
-					workspaceId={WORKSPACE_ID}
-					data={IDLE}
-					isLoading={false}
-					error={null}
-				/>
 			</section>
 
 			<section>