feat(web): add Dream Output Viewer

Dreams are currently a black box — to benchmark Tier L models on dreamer
induction quality we need to see what each model produced. This adds a
workspace-scoped /dreams route that surfaces every dream run as a
group of conclusions split into explicit / deductive / inductive
columns, with click-to-expand premise trees.

What's here:

- `lib/dreams.ts`: pure helpers. `clusterConclusionsIntoDreams` groups a
  raw conclusions list into per-pair bursts using a configurable time
  window (default 60s). `expandPremiseTree` walks `reasoning_tree` first
  and falls back to a flat `premises` ID list, with cycle detection and
  a depth cap. Defines an `ExtendedConclusion` type that augments the
  generated schema with `conclusion_type`, `premises`, and
  `reasoning_tree` — Honcho's migration f1a2b3c4d5e6 added those
  columns but `schema.d.ts` doesn't expose them yet, so the UI degrades
  gracefully (unknown types fall into "explicit").

- `api/queries.ts`: new `useDreams` hook that paginates the conclusions
  list endpoint up to a configurable cap (default 400) and hands the
  raw list to the UI for clustering. New `dreams` query key.

- `components/dreams/`:
  - `DreamList.tsx` — route entry. Shows recent dreams as rows with
    timestamp, observer→observed pair, and per-type counts. Selecting
    a row expands an inline detail panel above the list.
  - `DreamDetail.tsx` — three-column view (explicit / deductive /
    inductive). Each inductive conclusion has a "Show premises" button
    that expands the reasoning chain.
  - `PremiseTree.tsx` — recursive premise renderer with type badges,
    cycle indicator, and graceful handling of premises that fall
    outside the loaded page.

- Routing: `routes/workspaces_.$workspaceId_.dreams.tsx` registers the
  page; routeTree.gen.ts regenerated.

- Sidebar: new "Dreams" entry between Conclusions and Webhooks
  (MoonStar icon to distinguish from the dark-mode Moon).

- Breadcrumb: "dreams" added to SECTION_LABELS so the trail resolves.

Tests (vitest, 14 new):
- clustering: empty input; same-pair burst within window; gap exceeds
  threshold → split; different pairs don't merge even with overlapping
  timestamps; custom gap window; newest-first ordering; counts default
  unknown types to explicit.
- premise tree: empty children for no premises; flat list → direct
  children; multi-level reasoning_tree recursion; missing premise
  flagged (not in loaded page); cycle detection halts recursion;
  maxDepth cap; reasoning_tree preferred over flat premises.

Verified manually in the preview: route mounts, sidebar/breadcrumb
resolve, error path renders cleanly, typecheck + lint + dream tests
all clean. The unrelated `app.test.tsx` failure is pre-existing on
main.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 2 people

packages/web/src/api/keys.ts

@@ -32,5 +32,8 @@ export const QK = {
 	conclusionsQuery: (wsId: string, q: string, filters: Record<string, unknown>) =>
 		["conclusions-query", wsId, q, filters] as const,
 
+	dreams: (wsId: string, filters: Record<string, unknown>, limit: number) =>
+		["dreams", wsId, filters, limit] as const,
+
 	webhooks: (wsId: string) => ["webhooks", wsId] as const,
 };

packages/web/src/api/queries.ts

@@ -690,6 +690,50 @@ export function useDeleteConclusion(workspaceId: string) {
 	});
 }
 
+// ─── Dreams ───────────────────────────────────────────────────────────────────
+//
+// Dreams are synthetic groupings of conclusions: bursts produced by a single
+// dream run for one (observer, observed) pair. We fetch a generous batch of
+// conclusions and let the UI cluster them via `clusterConclusionsIntoDreams`.
+
+const DREAM_FETCH_PAGE_SIZE = 100;
+const DREAM_MAX_PAGES = 4;
+
+export function useDreams(
+	workspaceId: string,
+	filters: Record<string, unknown> = {},
+	limit = DREAM_FETCH_PAGE_SIZE * DREAM_MAX_PAGES,
+) {
+	return useQuery({
+		queryKey: QK.dreams(workspaceId, filters, limit),
+		queryFn: async () => {
+			const collected: unknown[] = [];
+			const pageSize = Math.min(DREAM_FETCH_PAGE_SIZE, limit);
+			let page = 1;
+			while (collected.length < limit) {
+				const { data, error } = await client.current.POST(
+					"/v3/workspaces/{workspace_id}/conclusions/list",
+					{
+						params: {
+							path: { workspace_id: workspaceId },
+							query: { page, page_size: pageSize, reverse: false },
+						},
+						body: filters,
+					},
+				);
+				if (error) err(error);
+				const items = (data as { items?: unknown[] } | undefined)?.items ?? [];
+				const totalPages = (data as { pages?: number } | undefined)?.pages ?? 1;
+				collected.push(...items);
+				if (items.length === 0 || page >= totalPages || page >= DREAM_MAX_PAGES) break;
+				page++;
+			}
+			return collected.slice(0, limit);
+		},
+		enabled: Boolean(workspaceId),
+	});
+}
+
 // ─── Webhooks ─────────────────────────────────────────────────────────────────
 
 export function useWebhooks(workspaceId: string) {

packages/web/src/components/dreams/DreamDetail.tsx

@@ -0,0 +1,242 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronRight, Eye, Lightbulb, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import { TimestampChip } from "@/components/shared/TimestampChip";
+import { Button } from "@/components/ui/button";
+import { Body, Caption, MonoCaption, Muted, SectionHeading } from "@/components/ui/typography";
+import { useDemo } from "@/hooks/useDemo";
+import { COLOR } from "@/lib/constants";
+import {
+	buildPremiseIndex,
+	type ConclusionType,
+	type Dream,
+	dreamCounts,
+	type ExtendedConclusion,
+	expandPremiseTree,
+	inferConclusionType,
+	type PremiseNode,
+} from "@/lib/dreams";
+import { ConclusionTypeBadge, PremiseTree } from "./PremiseTree";
+
+const COLUMNS: Array<{ type: ConclusionType; label: string; description: string }> = [
+	{
+		type: "explicit",
+		label: "Explicit",
+		description: "Surface observations pulled directly from messages",
+	},
+	{
+		type: "deductive",
+		label: "Deductive",
+		description: "Logical consequences of explicit observations",
+	},
+	{
+		type: "inductive",
+		label: "Inductive",
+		description: "Generalized patterns inferred from deductives",
+	},
+];
+
+interface DreamDetailProps {
+	dream: Dream;
+	onClose: () => void;
+}
+
+export function DreamDetail({ dream, onClose }: DreamDetailProps) {
+	const { mask } = useDemo();
+	const counts = useMemo(() => dreamCounts(dream), [dream]);
+	const index = useMemo(() => buildPremiseIndex(dream.conclusions), [dream]);
+
+	const grouped = useMemo(() => {
+		const buckets: Record<ConclusionType, ExtendedConclusion[]> = {
+			explicit: [],
+			deductive: [],
+			inductive: [],
+		};
+		for (const c of dream.conclusions) {
+			buckets[inferConclusionType(c)].push(c);
+		}
+		return buckets;
+	}, [dream]);
+
+	return (
+		<motion.section
+			key={dream.id}
+			initial={{ opacity: 0, y: 12 }}
+			animate={{ opacity: 1, y: 0 }}
+			exit={{ opacity: 0, y: -8 }}
+			transition={{ duration: 0.18 }}
+			className="rounded-2xl p-5"
+			style={{
+				background: "var(--bg-2)",
+				border: `1px solid ${COLOR.accentBorder}`,
+			}}
+		>
+			<header className="flex items-start gap-3 mb-5">
+				<div className="flex-1 min-w-0">
+					<div className="flex items-center gap-2 flex-wrap mb-1">
+						<Lightbulb className="w-4 h-4" style={{ color: "var(--accent)" }} strokeWidth={1.5} />
+						<SectionHeading className="mb-0">Dream detail</SectionHeading>
+						<TimestampChip value={dream.latestIso.replace("T", " ").replace(/\.\d+Z?$/, "")} />
+					</div>
+					<div className="flex items-center gap-2 flex-wrap text-xs">
+						<Eye className="w-3 h-3" style={{ color: "var(--text-4)" }} strokeWidth={1.5} />
+						<MonoCaption>{mask(dream.observer_id)}</MonoCaption>
+						{dream.observed_id && (
+							<>
+								<ChevronRight
+									className="w-3 h-3"
+									style={{ color: "var(--text-4)" }}
+									strokeWidth={2}
+								/>
+								<MonoCaption>{mask(dream.observed_id)}</MonoCaption>
+							</>
+						)}
+						<span className="mx-1.5" style={{ color: "var(--text-4)" }}>
+							·
+						</span>
+						<Caption>
+							{counts.total} conclusion{counts.total === 1 ? "" : "s"}
+						</Caption>
+					</div>
+				</div>
+				<Button variant="ghost" size="icon" onClick={onClose} aria-label="Close dream detail">
+					<X className="w-4 h-4" strokeWidth={1.5} />
+				</Button>
+			</header>
+
+			<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+				{COLUMNS.map((col) => (
+					<ColumnPanel
+						key={col.type}
+						type={col.type}
+						label={col.label}
+						description={col.description}
+						conclusions={grouped[col.type]}
+						index={index}
+					/>
+				))}
+			</div>
+		</motion.section>
+	);
+}
+
+interface ColumnPanelProps {
+	type: ConclusionType;
+	label: string;
+	description: string;
+	conclusions: ExtendedConclusion[];
+	index: Map<string, ExtendedConclusion>;
+}
+
+function ColumnPanel({ type, label, description, conclusions, index }: ColumnPanelProps) {
+	return (
+		<div
+			className="rounded-xl p-4 flex flex-col"
+			style={{
+				background: "var(--surface)",
+				border: "1px solid var(--border)",
+				minHeight: "8rem",
+			}}
+		>
+			<div className="flex items-center gap-2 mb-1">
+				<ConclusionTypeBadge type={type} />
+				<span className="text-sm font-semibold" style={{ color: "var(--text-1)" }}>
+					{label}
+				</span>
+				<span
+					className="ml-auto text-xs font-mono px-1.5 py-0.5 rounded-full"
+					style={{
+						background: "var(--surface)",
+						color: "var(--text-3)",
+						border: "1px solid var(--border)",
+					}}
+				>
+					{conclusions.length}
+				</span>
+			</div>
+			<Muted className="text-[11px] mb-3">{description}</Muted>
+
+			{conclusions.length === 0 ? (
+				<Caption className="italic">No {label.toLowerCase()} conclusions in this dream.</Caption>
+			) : (
+				<ul className="space-y-2.5">
+					{conclusions.map((c) => (
+						<li key={c.id}>
+							<ConclusionCard conclusion={c} index={index} expandable={type === "inductive"} />
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+}
+
+interface ConclusionCardProps {
+	conclusion: ExtendedConclusion;
+	index: Map<string, ExtendedConclusion>;
+	expandable: boolean;
+}
+
+function ConclusionCard({ conclusion, index, expandable }: ConclusionCardProps) {
+	const { mask } = useDemo();
+	const [open, setOpen] = useState(false);
+	const tree = useMemo<PremiseNode | null>(
+		() => (open ? expandPremiseTree(conclusion.id, index) : null),
+		[open, conclusion.id, index],
+	);
+	const hasPremises = Boolean(
+		(conclusion.reasoning_tree?.premises?.length ?? 0) > 0 ||
+			(conclusion.premises?.length ?? 0) > 0,
+	);
+
+	return (
+		<div
+			className="rounded-lg p-3 text-xs"
+			style={{ background: "var(--bg-2)", border: "1px solid var(--border)" }}
+		>
+			<Body className="text-xs whitespace-pre-wrap leading-snug mb-2">
+				{mask(conclusion.content)}
+			</Body>
+			<div className="flex items-center justify-between gap-2">
+				<MonoCaption className="truncate">{mask(conclusion.id)}</MonoCaption>
+				{expandable && hasPremises && (
+					<button
+						type="button"
+						onClick={() => setOpen((v) => !v)}
+						className="flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded transition-colors"
+						style={{
+							background: open ? COLOR.accentDim : "transparent",
+							color: open ? "var(--accent-text)" : "var(--text-3)",
+							border: `1px solid ${open ? COLOR.accentBorder : "var(--border)"}`,
+						}}
+						aria-expanded={open}
+					>
+						<ChevronRight
+							className="w-3 h-3 transition-transform"
+							style={{ transform: open ? "rotate(90deg)" : undefined }}
+							strokeWidth={2}
+						/>
+						{open ? "Hide" : "Show"} premises
+					</button>
+				)}
+			</div>
+
+			<AnimatePresence>
+				{open && tree && (
+					<motion.div
+						initial={{ opacity: 0, height: 0 }}
+						animate={{ opacity: 1, height: "auto" }}
+						exit={{ opacity: 0, height: 0 }}
+						transition={{ duration: 0.18 }}
+						className="overflow-hidden"
+					>
+						<div className="mt-3 pt-3" style={{ borderTop: `1px solid ${COLOR.accentBorder}` }}>
+							<Caption className="mb-2 block">Reasoning chain</Caption>
+							<PremiseTree root={tree} />
+						</div>
+					</motion.div>
+				)}
+			</AnimatePresence>
+		</div>
+	);
+}