@workerdeck/ui 0.11.0 → 0.12.0

package/build/index.mjs

@@ -1,10 +1,11 @@
-import { $ as TooltipProvider, A as permissionModeMeta, B as mentionTrigger, C as TranscriptVariantProvider, Ct as cn, D as PERMISSION_MODES, E as toolIcon, F as ContextDialog, G as ProgressRing, H as PromptArea, I as Composer, J as Spinner, K as Splitter, L as skillPrompt, M as SkillsDialog, N as McpDialog, O as PermissionModeSelect, P as HostFilesDialog, Q as TooltipContent, R as commandTrigger, S as Response, St as buttonVariants, T as isMutatingTool, U as plainTextToSegments, V as usePromptAreaState, W as segmentsToPlainText, X as copyText, Y as CopyButton, Z as Tip, _ as SessionInfoDialog, _t as SelectValue, a as SessionEmptyState, at as DialogRow, b as parseUserQuestions, bt as badgeVariants, c as Message, ct as MenuContent, d as FileCard, dt as MenuTrigger, et as Dialog, f as Conversation, ft as Select, g as STATUS_META, gt as SelectTrigger, h as StatusBar, ht as SelectItemText, i as ToolCallCard, it as DialogHeader, j as ModelSelect, k as permissionModeChoices, l as MessageContent, lt as MenuItem, m as ConversationScrollButton, mt as SelectItem, n as UsageDialog, nt as DialogClose, o as Reasoning, ot as DialogTrigger, p as ConversationContent, pt as SelectContent, q as CodeBlock, r as Transcript, rt as DialogContent, s as PromptTokenText, st as Menu, t as SessionPanel, tt as DialogBody, u as Loader, ut as MenuSeparator, v as QUESTION_BEHAVIORS, vt as Input, w as useTranscriptVariant, x as PermissionPrompt, xt as Button, y as QuestionPrompt, yt as Badge, z as hashtagTrigger } from "./SessionPanel-_U8tjX29.mjs";
+import { $ as Tip, A as PermissionModeSelect, B as commandTrigger, C as TranscriptDensityProvider, Ct as Button, D as isMutatingTool, E as useTranscriptVariant, F as McpDialog, G as plainTextToSegments, H as mentionTrigger, I as HostFilesDialog, J as Splitter, K as segmentsToPlainText, L as ContextDialog, M as permissionModeMeta, N as ModelSelect, O as toolIcon, P as SkillsDialog, Q as copyText, R as Composer, S as Response, St as badgeVariants, T as useTranscriptDensity, Tt as cn, U as usePromptAreaState, V as hashtagTrigger, W as PromptArea, X as Spinner, Y as CodeBlock, Z as CopyButton, _ as SessionInfoDialog, _t as SelectItemText, a as SessionEmptyState, at as DialogContent, b as parseUserQuestions, bt as Input, c as Message, ct as DialogTrigger, d as FileCard, dt as MenuItem, et as TooltipContent, f as Conversation, ft as MenuSeparator, g as STATUS_META, gt as SelectItem, h as StatusBar, ht as SelectContent, i as ToolCallCard, it as DialogClose, j as permissionModeChoices, k as PERMISSION_MODES, l as MessageContent, lt as Menu, m as ConversationScrollButton, mt as Select, n as UsageDialog, nt as Dialog, o as Reasoning, ot as DialogHeader, p as ConversationContent, pt as MenuTrigger, q as ProgressRing, r as Transcript, rt as DialogBody, s as PromptTokenText, st as DialogRow, t as SessionPanel, tt as TooltipProvider, u as Loader, ut as MenuContent, v as QUESTION_BEHAVIORS, vt as SelectTrigger, w as TranscriptVariantProvider, wt as buttonVariants, x as PermissionPrompt, xt as Badge, y as QuestionPrompt, yt as SelectValue, z as skillPrompt } from "./SessionPanel-NQ8ksCfj.mjs";
 import { a as formatDuration, c as formatRelativeTime, d as rateLimitWindowSeconds, f as toolInputPreview, i as formatCountdown, l as formatTokens, n as formatBytes, o as formatRateLimitWindow, r as formatCost, s as formatRateLimitWindowLong, t as formatAgoPrecise, u as friendlyModel } from "./format-DqR56Y8l.mjs";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Trash2 } from "lucide-react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Pencil, Search, Trash2, X } from "lucide-react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Toaster as Toaster$1, toast } from "sonner";
+import { STATE_LABELS, STATE_ORDER, adaptersOf, clearFilters, filterRows, groupRows, hasFacetFilter, sessionLabel, subsetSummary } from "@workerdeck/protocol";
 //#region src/components/ui/Card.tsx
 function Card({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -156,6 +157,330 @@ function SessionList({ sessions, activeId, onSelect, onDelete, emptyText = "No s
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, Composer, ContextDialog, Conversation, ConversationContent, ConversationScrollButton, CopyButton, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, FileCard, HostFilesDialog, Input, Loader, McpDialog, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, PromptArea, PromptTokenText, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionEmptyState, SessionInfoDialog, SessionList, SessionListItem, SessionPanel, SkillsDialog, Spinner, Splitter, StatusBar, Textarea, Tip, Toaster, ToolCallCard, TooltipContent, TooltipProvider, Transcript, TranscriptVariantProvider, UsageDialog, badgeVariants, buttonVariants, cn, commandTrigger, copyText, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, rateLimitWindowSeconds, segmentsToPlainText, skillPrompt, toast, toolIcon, toolInputPreview, usePromptAreaState, useTranscriptVariant };
+//#region src/components/agent/SessionBrowser.tsx
+function SessionBrowser({ rows, config, onConfigChange, scope, activeId, onSelect, onDelete, onRename, emptyState, className }) {
+	const visible = useMemo(() => filterRows(rows, config, scope), [
+		rows,
+		config,
+		scope
+	]);
+	const groups = useMemo(() => groupRows(visible, config), [visible, config]);
+	const subset = subsetSummary(config, scope, visible.length, rows.length);
+	const adapters = useMemo(() => adaptersOf(rows), [rows]);
+	const gateways = useMemo(() => {
+		const seen = /* @__PURE__ */ new Map();
+		for (const row of rows) seen.set(row.hostId, row.hostName);
+		return [...seen].map(([id, name]) => ({
+			id,
+			name
+		}));
+	}, [rows]);
+	const set = (patch) => onConfigChange({
+		...config,
+		...patch
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "session-browser",
+		className: cn("flex flex-col gap-3", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative min-w-48 flex-1",
+						children: [/* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-fg-4" }), /* @__PURE__ */ jsx(Input, {
+							value: config.search,
+							onChange: (e) => set({ search: e.target.value }),
+							placeholder: "Search sessions",
+							"aria-label": "Search sessions",
+							className: "pl-8"
+						})]
+					}),
+					/* @__PURE__ */ jsx(FacetSelect, {
+						label: "State",
+						value: config.states,
+						options: STATE_ORDER.map((s) => ({
+							value: s,
+							label: STATE_LABELS[s]
+						})),
+						onChange: (states) => set({ states })
+					}),
+					adapters.length > 1 ? /* @__PURE__ */ jsx(FacetSelect, {
+						label: "Engine",
+						value: config.adapters,
+						options: adapters.map((a) => ({
+							value: a,
+							label: a
+						})),
+						onChange: (adapters) => set({ adapters })
+					}) : null,
+					gateways.length > 1 ? /* @__PURE__ */ jsx(FacetSelect, {
+						label: "Gateway",
+						value: config.gateways,
+						options: gateways.map((g) => ({
+							value: g.id,
+							label: g.name
+						})),
+						onChange: (gateways) => set({ gateways })
+					}) : null,
+					/* @__PURE__ */ jsx(OneOfSelect, {
+						label: "Group",
+						value: config.groupBy,
+						options: [
+							{
+								value: "none",
+								label: "No grouping"
+							},
+							{
+								value: "state",
+								label: "By state"
+							},
+							{
+								value: "adapter",
+								label: "By engine"
+							},
+							...gateways.length > 1 ? [{
+								value: "gateway",
+								label: "By gateway"
+							}] : []
+						],
+						onChange: (groupBy) => set({ groupBy })
+					}),
+					/* @__PURE__ */ jsx(OneOfSelect, {
+						label: "Sort",
+						value: config.sortBy,
+						options: [
+							{
+								value: "recent",
+								label: "Recent"
+							},
+							{
+								value: "name",
+								label: "Name"
+							},
+							{
+								value: "state",
+								label: "State"
+							},
+							...gateways.length > 1 ? [{
+								value: "gateway",
+								label: "Gateway"
+							}] : []
+						],
+						onChange: (sortBy) => set({ sortBy })
+					})
+				]
+			}),
+			subset ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-label text-fg-4",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					subset.shown,
+					" of ",
+					subset.total,
+					subset.causes.length ? ` · ${subset.causes.join(" · ")}` : null
+				] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "text-fg-3 underline underline-offset-2 hover:text-fg-1",
+					onClick: () => onConfigChange(clearFilters(config)),
+					children: "Show all"
+				})]
+			}) : null,
+			rows.length === 0 ? emptyState ?? /* @__PURE__ */ jsx(Empty, { children: "No sessions yet." }) : visible.length === 0 ? /* @__PURE__ */ jsx(Empty, { children: hasFacetFilter(config) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				"No sessions match.",
+				" ",
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "underline underline-offset-2 hover:text-fg-1",
+					onClick: () => onConfigChange(clearFilters(config)),
+					children: "Clear filters"
+				})
+			] }) : "No sessions here." }) : /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-4",
+				children: groups.map((group) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1",
+					children: [config.groupBy !== "none" && group.label ? /* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline gap-2 px-2.5 text-label font-medium text-fg-4",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "uppercase tracking-wide",
+							children: group.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-fg-4/70",
+							children: group.rows.length
+						})]
+					}) : null, group.rows.map((row) => /* @__PURE__ */ jsx(SessionRowItem, {
+						row,
+						active: row.info.id === activeId,
+						showGateway: gateways.length > 1,
+						onSelect,
+						onDelete,
+						onRename
+					}, `${row.hostId}:${row.info.id}`))]
+				}, group.key))
+			})
+		]
+	});
+}
+function Empty({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-2.5 py-6 text-center text-body-sm text-fg-4",
+		children
+	});
+}
+function SessionRowItem({ row, active, showGateway, onSelect, onDelete, onRename }) {
+	const { info } = row;
+	const meta = STATUS_META[info.status];
+	const [editing, setEditing] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "session-row",
+		"data-active": active || void 0,
+		className: cn("group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors", active ? "border-border bg-surface" : "hover:bg-surface-hover"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						editing && onRename ? /* @__PURE__ */ jsx(NameEditor, {
+							initial: info.title ?? "",
+							onCommit: (title) => {
+								setEditing(false);
+								onRename(row, title);
+							},
+							onCancel: () => setEditing(false)
+						}) : /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => onSelect?.(row),
+							className: "min-w-0 truncate text-left text-body-sm font-medium text-fg-1 outline-none",
+							children: sessionLabel(info)
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							variant: meta.variant,
+							dot: true,
+							className: "shrink-0",
+							children: meta.label
+						}),
+						row.unseen > 0 ? /* @__PURE__ */ jsx(Badge, {
+							variant: "accent",
+							className: "shrink-0",
+							title: `${row.unseen} new`,
+							children: row.unseen
+						}) : null
+					]
+				}), /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => !editing && onSelect?.(row),
+					className: "mt-0.5 flex w-full items-center gap-2 text-left font-mono text-label text-fg-4 outline-none",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: info.cwd
+						}),
+						showGateway ? /* @__PURE__ */ jsx("span", {
+							className: "shrink-0",
+							children: row.hostName
+						}) : null,
+						info.profile ? /* @__PURE__ */ jsxs("span", {
+							className: "shrink-0",
+							children: ["@", info.profile]
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: "shrink-0",
+							children: formatCost(info.totalCostUsd)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "shrink-0",
+							children: formatRelativeTime(info.lastActivityAt ?? info.createdAt)
+						})
+					]
+				})]
+			}),
+			onRename && !editing ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Rename session",
+				className: "opacity-0 transition-opacity group-hover:opacity-100",
+				onClick: () => setEditing(true),
+				children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5 text-fg-3" })
+			}) : null,
+			onDelete ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": "Close session",
+				className: "opacity-0 transition-opacity group-hover:opacity-100",
+				onClick: () => onDelete(row),
+				children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5 text-fg-3" })
+			}) : null
+		]
+	});
+}
+/**
+* Inline rename. Enter commits, Escape cancels, blur commits — but only a blur
+* that is still inside this document: switching windows must not silently commit,
+* nor kill the editor in the frame it opened.
+*/
+function NameEditor({ initial, onCommit, onCancel }) {
+	const [value, setValue] = useState(initial);
+	const ref = useRef(null);
+	useEffect(() => {
+		ref.current?.select();
+	}, []);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		value,
+		autoFocus: true,
+		"aria-label": "Session name",
+		onClick: (e) => e.stopPropagation(),
+		onChange: (e) => setValue(e.target.value),
+		onBlur: () => document.hasFocus() ? onCommit(value.trim()) : void 0,
+		onKeyDown: (e) => {
+			if (e.key === "Enter") onCommit(value.trim());
+			else if (e.key === "Escape") onCancel();
+			e.stopPropagation();
+		},
+		className: "-my-0.5 min-w-0 flex-1 rounded-sm border border-ring bg-bg px-1 py-0.5 text-body-sm font-medium text-fg-1 outline-none"
+	});
+}
+/** A multi-select facet. Empty = no filter, which is why the trigger reads the
+* facet's name rather than "All": nothing is being excluded. */
+function FacetSelect({ label, value, options, onChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsxs(Select, {
+			multiple: true,
+			value,
+			onValueChange: (v) => onChange(v),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				"aria-label": label,
+				className: "min-w-28",
+				children: /* @__PURE__ */ jsx(SelectValue, { children: value.length === 0 ? label : value.length === 1 ? options.find((o) => o.value === value[0])?.label ?? label : `${label} · ${value.length}` })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				children: /* @__PURE__ */ jsx(SelectItemText, { children: option.label })
+			}, option.value)) })]
+		}), value.length > 0 ? /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": `Clear ${label}`,
+			onClick: () => onChange([]),
+			children: /* @__PURE__ */ jsx(X, { className: "size-3 text-fg-4" })
+		}) : null]
+	});
+}
+function OneOfSelect({ label, value, options, onChange }) {
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		onValueChange: (v) => onChange(v),
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			"aria-label": label,
+			className: "min-w-28",
+			children: /* @__PURE__ */ jsx(SelectValue, { children: options.find((o) => o.value === value)?.label ?? label })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			value: option.value,
+			children: /* @__PURE__ */ jsx(SelectItemText, { children: option.label })
+		}, option.value)) })]
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardHeader, CardTitle, CodeBlock, Composer, ContextDialog, Conversation, ConversationContent, ConversationScrollButton, CopyButton, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, FileCard, HostFilesDialog, Input, Loader, McpDialog, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, ModelSelect, PERMISSION_MODES, PermissionModeSelect, PermissionPrompt, ProgressRing, PromptArea, PromptTokenText, QUESTION_BEHAVIORS, QuestionPrompt, Reasoning, Response, STATUS_META, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, SessionEmptyState, SessionInfoDialog, SessionList, SessionListItem, SessionPanel, SkillsDialog, Spinner, Splitter, StatusBar, Textarea, Tip, Toaster, ToolCallCard, TooltipContent, TooltipProvider, Transcript, TranscriptDensityProvider, TranscriptVariantProvider, UsageDialog, badgeVariants, buttonVariants, cn, commandTrigger, copyText, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, rateLimitWindowSeconds, segmentsToPlainText, skillPrompt, toast, toolIcon, toolInputPreview, usePromptAreaState, useTranscriptDensity, useTranscriptVariant };
 
 //# sourceMappingURL=index.mjs.map

package/build/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["AlertDialogPrimitive","SonnerToaster"],"sources":["../src/components/ui/Card.tsx","../src/components/ui/Textarea.tsx","../src/components/ui/AlertDialog.tsx","../src/components/ui/Sonner.tsx","../src/components/prompt-area/segment-helpers.ts","../src/components/agent/SessionList.tsx"],"sourcesContent":["import { type HTMLAttributes } from 'react'\nimport { cn } from '../../lib/utils.ts'\n\nexport function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot='card'\n      className={cn('rounded-lg border border-border bg-surface', className)}\n      {...props}\n    />\n  )\n}\n\nexport function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('flex items-start justify-between gap-3 px-4 pt-3.5 pb-3', className)}\n      {...props}\n    />\n  )\n}\n\nexport function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {\n  return <h3 className={cn('text-heading-3 font-semibold text-text', className)} {...props} />\n}\n\nexport function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('px-4 pb-4', className)} {...props} />\n}\n","import { type TextareaHTMLAttributes, forwardRef } from 'react'\nimport { cn } from '../../lib/utils.ts'\n\nexport const Textarea = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement>\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    data-slot='textarea'\n    className={cn(\n      'w-full resize-none rounded-md border border-border bg-bg px-2.5 py-2 text-body-sm text-text',\n      'placeholder:text-fg-4 transition-colors outline-none',\n      'hover:border-border-strong focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40',\n      'disabled:pointer-events-none disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  />\n))\nTextarea.displayName = 'Textarea'\n","import { type FunctionComponent } from 'react'\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'\nimport { cn } from '../../lib/utils.ts'\n\nexport const AlertDialog = AlertDialogPrimitive.Root\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger\nexport const AlertDialogClose = AlertDialogPrimitive.Close\n\nexport const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Props> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <AlertDialogPrimitive.Portal>\n    <AlertDialogPrimitive.Backdrop\n      className={cn(\n        'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',\n        'transition-opacity duration-(--motion-base)',\n        'data-starting-style:opacity-0 data-ending-style:opacity-0',\n      )}\n    />\n    <AlertDialogPrimitive.Popup\n      data-slot='alert-dialog-content'\n      className={cn(\n        'fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2',\n        'rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none',\n        'transition-[opacity,transform] duration-(--motion-base)',\n        'data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}>\n      {children}\n    </AlertDialogPrimitive.Popup>\n  </AlertDialogPrimitive.Portal>\n)\n\nexport const AlertDialogTitle: FunctionComponent<AlertDialogPrimitive.Title.Props> = ({\n  className,\n  ...props\n}) => (\n  <AlertDialogPrimitive.Title\n    className={cn('text-heading-3 font-semibold text-text', className)}\n    {...props}\n  />\n)\n\nexport const AlertDialogDescription: FunctionComponent<AlertDialogPrimitive.Description.Props> = ({\n  className,\n  ...props\n}) => (\n  <AlertDialogPrimitive.Description\n    className={cn('mt-1.5 text-body-sm text-muted-foreground', className)}\n    {...props}\n  />\n)\n","import { Toaster as SonnerToaster, toast } from 'sonner'\n\nexport { toast }\n\n/** Token-themed toaster; relies on the [data-theme] swap, so no `theme` prop needed. */\nexport function Toaster() {\n  return (\n    <SonnerToaster\n      position='bottom-right'\n      toastOptions={{\n        style: {\n          background: 'var(--surface)',\n          color: 'var(--text)',\n          border: '1px solid var(--border)',\n          boxShadow: 'var(--shadow-md)',\n          fontFamily: 'var(--cw-font-sans)',\n          fontSize: 'var(--text-body-sm)',\n        },\n      }}\n    />\n  )\n}\n","/**\n * Convenience helpers for creating and inspecting Segments.\n *\n * These reduce boilerplate when building AI chat UIs that work with the\n * PromptArea document model.\n *\n * @example\n * ```ts\n * import { text, chip, isSegmentsEmpty, segmentsToPlainText } from './segment-helpers.ts'\n *\n * const greeting = [text('Hello '), chip({ trigger: '@', value: 'u1', displayText: 'Alice' })]\n * isSegmentsEmpty(greeting) // false\n * segmentsToPlainText(greeting) // \"Hello @Alice\"\n * ```\n */\n\nimport type { Segment, TextSegment, ChipSegment } from './types.ts'\nimport { segmentsToPlainText, plainTextToSegments } from './prompt-area-engine.ts'\n\n// Re-export serialization utilities so consumers have a single import.\nexport { segmentsToPlainText, plainTextToSegments }\n\n// ---------------------------------------------------------------------------\n// Factories\n// ---------------------------------------------------------------------------\n\n/** Create a text segment. */\nexport function text(value: string): TextSegment {\n  return { type: 'text', text: value }\n}\n\n/** Create a chip segment. */\nexport function chip(opts: Omit<ChipSegment, 'type'>): ChipSegment {\n  return { type: 'chip', ...opts }\n}\n\n// ---------------------------------------------------------------------------\n// Predicates\n// ---------------------------------------------------------------------------\n\n/** Returns `true` when the segment array is empty or contains only whitespace text. */\nexport function isSegmentsEmpty(segments: Segment[]): boolean {\n  if (segments.length === 0) return true\n  return segments.every((seg) => seg.type === 'text' && seg.text.trim() === '')\n}\n\n/** Returns `true` when the segment array contains at least one chip. */\nexport function hasChips(segments: Segment[]): boolean {\n  return segments.some((seg) => seg.type === 'chip')\n}\n\n/** Extracts all chip segments from a segment array. */\nexport function getChips(segments: Segment[]): ChipSegment[] {\n  return segments.filter((seg): seg is ChipSegment => seg.type === 'chip')\n}\n\n/** Extracts chips matching a specific trigger character. */\nexport function getChipsByTrigger(segments: Segment[], trigger: string): ChipSegment[] {\n  return segments.filter(\n    (seg): seg is ChipSegment => seg.type === 'chip' && seg.trigger === trigger,\n  )\n}\n","import type { SessionInfo } from '@workerdeck/protocol'\nimport { Trash2 } from 'lucide-react'\nimport { Badge } from '../ui/Badge.tsx'\nimport { Button } from '../ui/Button.tsx'\nimport { cn } from '../../lib/utils.ts'\nimport { formatCost, formatRelativeTime } from '../../lib/format.ts'\nimport { STATUS_META } from './status.ts'\n\nexport interface SessionListItemProps {\n  session: SessionInfo\n  active?: boolean\n  onSelect?: (id: string) => void\n  onDelete?: (id: string) => void\n}\n\nexport function SessionListItem({ session, active, onSelect, onDelete }: SessionListItemProps) {\n  const meta = STATUS_META[session.status]\n  return (\n    <div\n      data-slot='session-list-item'\n      data-active={active || undefined}\n      className={cn(\n        'group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors',\n        active ? 'border-border bg-surface' : 'hover:bg-surface-hover',\n      )}>\n      <button\n        type='button'\n        onClick={() => onSelect?.(session.id)}\n        className='min-w-0 flex-1 text-left outline-none'>\n        <div className='flex items-center gap-2'>\n          <span className='truncate text-body-sm font-medium text-fg-1'>\n            {session.title ?? session.id.slice(0, 8)}\n          </span>\n          <Badge variant={meta.variant} dot className='shrink-0'>\n            {meta.label}\n          </Badge>\n        </div>\n        <div className='mt-0.5 flex items-center gap-2 font-mono text-label text-fg-4'>\n          <span className='truncate'>{session.cwd}</span>\n          {session.profile ? <span className='shrink-0'>@{session.profile}</span> : null}\n          <span className='shrink-0'>{formatCost(session.totalCostUsd)}</span>\n          <span className='shrink-0'>{formatRelativeTime(session.lastActivityAt ?? session.createdAt)}</span>\n        </div>\n      </button>\n      {onDelete ? (\n        <Button\n          variant='ghost'\n          size='icon-sm'\n          aria-label='Close session'\n          className='opacity-0 transition-opacity group-hover:opacity-100'\n          onClick={() => onDelete(session.id)}>\n          <Trash2 className='size-3.5 text-fg-3' />\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\nexport interface SessionListProps {\n  sessions: SessionInfo[]\n  activeId?: string\n  onSelect?: (id: string) => void\n  onDelete?: (id: string) => void\n  emptyText?: string\n  className?: string\n}\n\nexport function SessionList({\n  sessions,\n  activeId,\n  onSelect,\n  onDelete,\n  emptyText = 'No sessions yet.',\n  className,\n}: SessionListProps) {\n  return (\n    <div data-slot='session-list' className={cn('flex flex-col gap-1', className)}>\n      {sessions.length === 0 ? (\n        <div className='px-2.5 py-6 text-center text-body-sm text-fg-4'>{emptyText}</div>\n      ) : (\n        sessions.map((session) => (\n          <SessionListItem\n            key={session.id}\n            session={session}\n            active={session.id === activeId}\n            onSelect={onSelect}\n            onDelete={onDelete}\n          />\n        ))\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAgB,KAAK,EAAE,WAAW,GAAG,SAAyC;AAC5E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8CAA8C,UAAU;EACtE,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAAyC;AAClF,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,2DAA2D,UAAU;EACnF,GAAI;EACJ,CAAA;;AAIN,SAAgB,UAAU,EAAE,WAAW,GAAG,SAA6C;AACrF,QAAO,oBAAC,MAAD;EAAI,WAAW,GAAG,0CAA0C,UAAU;EAAE,GAAI;EAAS,CAAA;;AAG9F,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAyC;AACnF,QAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;EAAE,GAAI;EAAS,CAAA;;;;ACxBlE,MAAa,WAAW,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,YAAD;CACO;CACL,aAAU;CACV,WAAW,GACT,+FACA,wDACA,wGACA,oDACA,UACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,SAAS,cAAc;;;AChBvB,MAAa,cAAcA,cAAqB;AAChD,MAAa,qBAAqBA,cAAqB;AACvD,MAAa,mBAAmBA,cAAqB;AAErD,MAAa,sBAA2E,EACtF,WACA,UACA,GAAG,YAEH,qBAACA,cAAqB,QAAtB,EAAA,UAAA,CACE,oBAACA,cAAqB,UAAtB,EACE,WAAW,GACT,sDACA,+CACA,4DACD,EACD,CAAA,EACF,oBAACA,cAAqB,OAAtB;CACE,aAAU;CACV,WAAW,GACT,iGACA,oFACA,2DACA,8DACA,0DACA,UACD;CACD,GAAI;CACH;CAC0B,CAAA,CACD,EAAA,CAAA;AAGhC,MAAa,oBAAyE,EACpF,WACA,GAAG,YAEH,oBAACA,cAAqB,OAAtB;CACE,WAAW,GAAG,0CAA0C,UAAU;CAClE,GAAI;CACJ,CAAA;AAGJ,MAAa,0BAAqF,EAChG,WACA,GAAG,YAEH,oBAACA,cAAqB,aAAtB;CACE,WAAW,GAAG,6CAA6C,UAAU;CACrE,GAAI;CACJ,CAAA;;;;ACjDJ,SAAgB,UAAU;AACxB,QACE,oBAACC,WAAD;EACE,UAAS;EACT,cAAc,EACZ,OAAO;GACL,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,WAAW;GACX,YAAY;GACZ,UAAU;GACX,EACF;EACD,CAAA;;;;;ACsBN,SAAgB,gBAAgB,UAA8B;AAC5D,KAAI,SAAS,WAAW,EAAG,QAAO;AAClC,QAAO,SAAS,OAAO,QAAQ,IAAI,SAAS,UAAU,IAAI,KAAK,MAAM,KAAK,GAAG;;;AAc/E,SAAgB,kBAAkB,UAAqB,SAAgC;AACrF,QAAO,SAAS,QACb,QAA4B,IAAI,SAAS,UAAU,IAAI,YAAY,QACrE;;;;AC7CH,SAAgB,gBAAgB,EAAE,SAAS,QAAQ,UAAU,YAAkC;CAC7F,MAAM,OAAO,YAAY,QAAQ;AACjC,QACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa,UAAU,KAAA;EACvB,WAAW,GACT,qHACA,SAAS,6BAA6B,yBACvC;YANH,CAOE,qBAAC,UAAD;GACE,MAAK;GACL,eAAe,WAAW,QAAQ,GAAG;GACrC,WAAU;aAHZ,CAIE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eACb,QAAQ,SAAS,QAAQ,GAAG,MAAM,GAAG,EAAE;KACnC,CAAA,EACP,oBAAC,OAAD;KAAO,SAAS,KAAK;KAAS,KAAA;KAAI,WAAU;eACzC,KAAK;KACA,CAAA,CACJ;OACN,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAY,QAAQ;MAAW,CAAA;KAC9C,QAAQ,UAAU,qBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA2B,KAAE,QAAQ,QAAe;UAAG;KAC1E,oBAAC,QAAD;MAAM,WAAU;gBAAY,WAAW,QAAQ,aAAa;MAAQ,CAAA;KACpE,oBAAC,QAAD;MAAM,WAAU;gBAAY,mBAAmB,QAAQ,kBAAkB,QAAQ,UAAU;MAAQ,CAAA;KAC/F;MACC;MACR,WACC,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,cAAW;GACX,WAAU;GACV,eAAe,SAAS,QAAQ,GAAG;aACnC,oBAAC,QAAD,EAAQ,WAAU,sBAAuB,CAAA;GAClC,CAAA,GACP,KACA;;;AAaV,SAAgB,YAAY,EAC1B,UACA,UACA,UACA,UACA,YAAY,oBACZ,aACmB;AACnB,QACE,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,uBAAuB,UAAU;YAC1E,SAAS,WAAW,IACnB,oBAAC,OAAD;GAAK,WAAU;aAAkD;GAAgB,CAAA,GAEjF,SAAS,KAAK,YACZ,oBAAC,iBAAD;GAEW;GACT,QAAQ,QAAQ,OAAO;GACb;GACA;GACV,EALK,QAAQ,GAKb,CACF;EAEA,CAAA"}
+{"version":3,"file":"index.mjs","names":["AlertDialogPrimitive","SonnerToaster"],"sources":["../src/components/ui/Card.tsx","../src/components/ui/Textarea.tsx","../src/components/ui/AlertDialog.tsx","../src/components/ui/Sonner.tsx","../src/components/prompt-area/segment-helpers.ts","../src/components/agent/SessionList.tsx","../src/components/agent/SessionBrowser.tsx"],"sourcesContent":["import { type HTMLAttributes } from 'react'\nimport { cn } from '../../lib/utils.ts'\n\nexport function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot='card'\n      className={cn('rounded-lg border border-border bg-surface', className)}\n      {...props}\n    />\n  )\n}\n\nexport function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('flex items-start justify-between gap-3 px-4 pt-3.5 pb-3', className)}\n      {...props}\n    />\n  )\n}\n\nexport function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {\n  return <h3 className={cn('text-heading-3 font-semibold text-text', className)} {...props} />\n}\n\nexport function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('px-4 pb-4', className)} {...props} />\n}\n","import { type TextareaHTMLAttributes, forwardRef } from 'react'\nimport { cn } from '../../lib/utils.ts'\n\nexport const Textarea = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement>\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    data-slot='textarea'\n    className={cn(\n      'w-full resize-none rounded-md border border-border bg-bg px-2.5 py-2 text-body-sm text-text',\n      'placeholder:text-fg-4 transition-colors outline-none',\n      'hover:border-border-strong focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40',\n      'disabled:pointer-events-none disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  />\n))\nTextarea.displayName = 'Textarea'\n","import { type FunctionComponent } from 'react'\nimport { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'\nimport { cn } from '../../lib/utils.ts'\n\nexport const AlertDialog = AlertDialogPrimitive.Root\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger\nexport const AlertDialogClose = AlertDialogPrimitive.Close\n\nexport const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Props> = ({\n  className,\n  children,\n  ...props\n}) => (\n  <AlertDialogPrimitive.Portal>\n    <AlertDialogPrimitive.Backdrop\n      className={cn(\n        'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',\n        'transition-opacity duration-(--motion-base)',\n        'data-starting-style:opacity-0 data-ending-style:opacity-0',\n      )}\n    />\n    <AlertDialogPrimitive.Popup\n      data-slot='alert-dialog-content'\n      className={cn(\n        'fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2',\n        'rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none',\n        'transition-[opacity,transform] duration-(--motion-base)',\n        'data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}>\n      {children}\n    </AlertDialogPrimitive.Popup>\n  </AlertDialogPrimitive.Portal>\n)\n\nexport const AlertDialogTitle: FunctionComponent<AlertDialogPrimitive.Title.Props> = ({\n  className,\n  ...props\n}) => (\n  <AlertDialogPrimitive.Title\n    className={cn('text-heading-3 font-semibold text-text', className)}\n    {...props}\n  />\n)\n\nexport const AlertDialogDescription: FunctionComponent<AlertDialogPrimitive.Description.Props> = ({\n  className,\n  ...props\n}) => (\n  <AlertDialogPrimitive.Description\n    className={cn('mt-1.5 text-body-sm text-muted-foreground', className)}\n    {...props}\n  />\n)\n","import { Toaster as SonnerToaster, toast } from 'sonner'\n\nexport { toast }\n\n/** Token-themed toaster; relies on the [data-theme] swap, so no `theme` prop needed. */\nexport function Toaster() {\n  return (\n    <SonnerToaster\n      position='bottom-right'\n      toastOptions={{\n        style: {\n          background: 'var(--surface)',\n          color: 'var(--text)',\n          border: '1px solid var(--border)',\n          boxShadow: 'var(--shadow-md)',\n          fontFamily: 'var(--cw-font-sans)',\n          fontSize: 'var(--text-body-sm)',\n        },\n      }}\n    />\n  )\n}\n","/**\n * Convenience helpers for creating and inspecting Segments.\n *\n * These reduce boilerplate when building AI chat UIs that work with the\n * PromptArea document model.\n *\n * @example\n * ```ts\n * import { text, chip, isSegmentsEmpty, segmentsToPlainText } from './segment-helpers.ts'\n *\n * const greeting = [text('Hello '), chip({ trigger: '@', value: 'u1', displayText: 'Alice' })]\n * isSegmentsEmpty(greeting) // false\n * segmentsToPlainText(greeting) // \"Hello @Alice\"\n * ```\n */\n\nimport type { Segment, TextSegment, ChipSegment } from './types.ts'\nimport { segmentsToPlainText, plainTextToSegments } from './prompt-area-engine.ts'\n\n// Re-export serialization utilities so consumers have a single import.\nexport { segmentsToPlainText, plainTextToSegments }\n\n// ---------------------------------------------------------------------------\n// Factories\n// ---------------------------------------------------------------------------\n\n/** Create a text segment. */\nexport function text(value: string): TextSegment {\n  return { type: 'text', text: value }\n}\n\n/** Create a chip segment. */\nexport function chip(opts: Omit<ChipSegment, 'type'>): ChipSegment {\n  return { type: 'chip', ...opts }\n}\n\n// ---------------------------------------------------------------------------\n// Predicates\n// ---------------------------------------------------------------------------\n\n/** Returns `true` when the segment array is empty or contains only whitespace text. */\nexport function isSegmentsEmpty(segments: Segment[]): boolean {\n  if (segments.length === 0) return true\n  return segments.every((seg) => seg.type === 'text' && seg.text.trim() === '')\n}\n\n/** Returns `true` when the segment array contains at least one chip. */\nexport function hasChips(segments: Segment[]): boolean {\n  return segments.some((seg) => seg.type === 'chip')\n}\n\n/** Extracts all chip segments from a segment array. */\nexport function getChips(segments: Segment[]): ChipSegment[] {\n  return segments.filter((seg): seg is ChipSegment => seg.type === 'chip')\n}\n\n/** Extracts chips matching a specific trigger character. */\nexport function getChipsByTrigger(segments: Segment[], trigger: string): ChipSegment[] {\n  return segments.filter(\n    (seg): seg is ChipSegment => seg.type === 'chip' && seg.trigger === trigger,\n  )\n}\n","import type { SessionInfo } from '@workerdeck/protocol'\nimport { Trash2 } from 'lucide-react'\nimport { Badge } from '../ui/Badge.tsx'\nimport { Button } from '../ui/Button.tsx'\nimport { cn } from '../../lib/utils.ts'\nimport { formatCost, formatRelativeTime } from '../../lib/format.ts'\nimport { STATUS_META } from './status.ts'\n\nexport interface SessionListItemProps {\n  session: SessionInfo\n  active?: boolean\n  onSelect?: (id: string) => void\n  onDelete?: (id: string) => void\n}\n\nexport function SessionListItem({ session, active, onSelect, onDelete }: SessionListItemProps) {\n  const meta = STATUS_META[session.status]\n  return (\n    <div\n      data-slot='session-list-item'\n      data-active={active || undefined}\n      className={cn(\n        'group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors',\n        active ? 'border-border bg-surface' : 'hover:bg-surface-hover',\n      )}>\n      <button\n        type='button'\n        onClick={() => onSelect?.(session.id)}\n        className='min-w-0 flex-1 text-left outline-none'>\n        <div className='flex items-center gap-2'>\n          <span className='truncate text-body-sm font-medium text-fg-1'>\n            {session.title ?? session.id.slice(0, 8)}\n          </span>\n          <Badge variant={meta.variant} dot className='shrink-0'>\n            {meta.label}\n          </Badge>\n        </div>\n        <div className='mt-0.5 flex items-center gap-2 font-mono text-label text-fg-4'>\n          <span className='truncate'>{session.cwd}</span>\n          {session.profile ? <span className='shrink-0'>@{session.profile}</span> : null}\n          <span className='shrink-0'>{formatCost(session.totalCostUsd)}</span>\n          <span className='shrink-0'>{formatRelativeTime(session.lastActivityAt ?? session.createdAt)}</span>\n        </div>\n      </button>\n      {onDelete ? (\n        <Button\n          variant='ghost'\n          size='icon-sm'\n          aria-label='Close session'\n          className='opacity-0 transition-opacity group-hover:opacity-100'\n          onClick={() => onDelete(session.id)}>\n          <Trash2 className='size-3.5 text-fg-3' />\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\nexport interface SessionListProps {\n  sessions: SessionInfo[]\n  activeId?: string\n  onSelect?: (id: string) => void\n  onDelete?: (id: string) => void\n  emptyText?: string\n  className?: string\n}\n\nexport function SessionList({\n  sessions,\n  activeId,\n  onSelect,\n  onDelete,\n  emptyText = 'No sessions yet.',\n  className,\n}: SessionListProps) {\n  return (\n    <div data-slot='session-list' className={cn('flex flex-col gap-1', className)}>\n      {sessions.length === 0 ? (\n        <div className='px-2.5 py-6 text-center text-body-sm text-fg-4'>{emptyText}</div>\n      ) : (\n        sessions.map((session) => (\n          <SessionListItem\n            key={session.id}\n            session={session}\n            active={session.id === activeId}\n            onSelect={onSelect}\n            onDelete={onDelete}\n          />\n        ))\n      )}\n    </div>\n  )\n}\n","import { useEffect, useMemo, useRef, useState } from 'react'\nimport { Pencil, Search, Trash2, X } from 'lucide-react'\nimport {\n  STATE_LABELS,\n  STATE_ORDER,\n  adaptersOf,\n  clearFilters,\n  filterRows,\n  groupRows,\n  hasFacetFilter,\n  sessionLabel,\n  subsetSummary,\n} from '@workerdeck/protocol'\nimport type {\n  GroupBy,\n  SessionRow,\n  SessionState,\n  SortBy,\n  ViewConfig,\n  WorkspaceScope,\n} from '@workerdeck/protocol'\nimport { Badge } from '../ui/Badge.tsx'\nimport { Button } from '../ui/Button.tsx'\nimport { Input } from '../ui/Input.tsx'\nimport { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'\nimport { cn } from '../../lib/utils.ts'\nimport { formatCost, formatRelativeTime } from '../../lib/format.ts'\nimport { STATUS_META } from './status.ts'\n\n/**\n * A sessions list with the affordances a list of thirty needs: search, facets,\n * grouping, sorting, unread counts, and one honest line about what is hidden.\n *\n * The *rules* are `@workerdeck/protocol`'s (`filterRows`/`groupRows`/\n * `subsetSummary`), not this component's — the VS Code sidebar renders the same\n * model with workbench chrome, its activity-bar badge counts the same rows this\n * would show, and iOS mirrors them in Swift. What lives here is the styled\n * rendering of that model, so a host that wants the dashboard's look gets it\n * without reimplementing the model behind it.\n *\n * `SessionList` remains beside this for the plain case (a fixed set of rows, no\n * controls); this is what you reach for when the list is the screen.\n */\n\nexport interface SessionBrowserProps {\n  rows: SessionRow[]\n  config: ViewConfig\n  onConfigChange: (config: ViewConfig) => void\n  /** The host's own folders, if it has such a notion. Absent — a dashboard, a\n   * phone — makes the scope filter genuinely inert rather than empty. */\n  scope?: WorkspaceScope\n  activeId?: string\n  onSelect?: (row: SessionRow) => void\n  onDelete?: (row: SessionRow) => void\n  /**\n   * Rename, from the row's pencil. Empty string restores the derived title. A\n   * gateway edit (`PATCH /sessions/:id`), never a local override — every client\n   * should see the same name. Omit to make titles read-only.\n   *\n   * A hover affordance rather than the extension's double-click-the-title,\n   * because here a single click on the row navigates: the *first* click of a\n   * double-click would have already left the page.\n   */\n  onRename?: (row: SessionRow, title: string) => void\n  /** Rendered when nothing at all exists (as opposed to nothing matching). */\n  emptyState?: React.ReactNode\n  className?: string\n}\n\nexport function SessionBrowser({\n  rows,\n  config,\n  onConfigChange,\n  scope,\n  activeId,\n  onSelect,\n  onDelete,\n  onRename,\n  emptyState,\n  className,\n}: SessionBrowserProps) {\n  const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])\n  const groups = useMemo(() => groupRows(visible, config), [visible, config])\n  const subset = subsetSummary(config, scope, visible.length, rows.length)\n  // Derived, not enumerated: a new engine or a new gateway needs no change here,\n  // and a facet with one possible value is not a choice worth showing.\n  const adapters = useMemo(() => adaptersOf(rows), [rows])\n  const gateways = useMemo(() => {\n    const seen = new Map<string, string>()\n    for (const row of rows) seen.set(row.hostId, row.hostName)\n    return [...seen].map(([id, name]) => ({ id, name }))\n  }, [rows])\n\n  const set = (patch: Partial<ViewConfig>) => onConfigChange({ ...config, ...patch })\n\n  return (\n    <div data-slot='session-browser' className={cn('flex flex-col gap-3', className)}>\n      <div className='flex flex-wrap items-center gap-2'>\n        <div className='relative min-w-48 flex-1'>\n          <Search className='pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-fg-4' />\n          <Input\n            value={config.search}\n            onChange={(e) => set({ search: e.target.value })}\n            placeholder='Search sessions'\n            aria-label='Search sessions'\n            className='pl-8'\n          />\n        </div>\n        <FacetSelect\n          label='State'\n          value={config.states}\n          options={STATE_ORDER.map((s) => ({ value: s, label: STATE_LABELS[s] }))}\n          onChange={(states) => set({ states: states as SessionState[] })}\n        />\n        {adapters.length > 1 ? (\n          <FacetSelect\n            label='Engine'\n            value={config.adapters}\n            options={adapters.map((a) => ({ value: a, label: a }))}\n            onChange={(adapters) => set({ adapters })}\n          />\n        ) : null}\n        {gateways.length > 1 ? (\n          <FacetSelect\n            label='Gateway'\n            value={config.gateways}\n            options={gateways.map((g) => ({ value: g.id, label: g.name }))}\n            onChange={(gateways) => set({ gateways })}\n          />\n        ) : null}\n        <OneOfSelect\n          label='Group'\n          value={config.groupBy}\n          options={[\n            { value: 'none', label: 'No grouping' },\n            { value: 'state', label: 'By state' },\n            { value: 'adapter', label: 'By engine' },\n            ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'By gateway' }] : []),\n          ]}\n          onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}\n        />\n        <OneOfSelect\n          label='Sort'\n          value={config.sortBy}\n          options={[\n            { value: 'recent', label: 'Recent' },\n            { value: 'name', label: 'Name' },\n            { value: 'state', label: 'State' },\n            ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'Gateway' }] : []),\n          ]}\n          onChange={(sortBy) => set({ sortBy: sortBy as SortBy })}\n        />\n      </div>\n\n      {subset ? (\n        <div className='flex items-center gap-2 text-label text-fg-4'>\n          <span>\n            {subset.shown} of {subset.total}\n            {subset.causes.length ? ` · ${subset.causes.join(' · ')}` : null}\n          </span>\n          <button\n            type='button'\n            className='text-fg-3 underline underline-offset-2 hover:text-fg-1'\n            onClick={() => onConfigChange(clearFilters(config))}>\n            Show all\n          </button>\n        </div>\n      ) : null}\n\n      {rows.length === 0 ? (\n        (emptyState ?? <Empty>No sessions yet.</Empty>)\n      ) : visible.length === 0 ? (\n        // Two different dead ends, two different ways out. \"Nothing matches\" is\n        // a filter someone set; anything else is the state of the world.\n        <Empty>\n          {hasFacetFilter(config) ? (\n            <>\n              No sessions match.{' '}\n              <button\n                type='button'\n                className='underline underline-offset-2 hover:text-fg-1'\n                onClick={() => onConfigChange(clearFilters(config))}>\n                Clear filters\n              </button>\n            </>\n          ) : (\n            'No sessions here.'\n          )}\n        </Empty>\n      ) : (\n        <div className='flex flex-col gap-4'>\n          {groups.map((group) => (\n            <div key={group.key} className='flex flex-col gap-1'>\n              {config.groupBy !== 'none' && group.label ? (\n                <div className='flex items-baseline gap-2 px-2.5 text-label font-medium text-fg-4'>\n                  <span className='uppercase tracking-wide'>{group.label}</span>\n                  <span className='text-fg-4/70'>{group.rows.length}</span>\n                </div>\n              ) : null}\n              {group.rows.map((row) => (\n                <SessionRowItem\n                  key={`${row.hostId}:${row.info.id}`}\n                  row={row}\n                  active={row.info.id === activeId}\n                  showGateway={gateways.length > 1}\n                  onSelect={onSelect}\n                  onDelete={onDelete}\n                  onRename={onRename}\n                />\n              ))}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction Empty({ children }: { children: React.ReactNode }) {\n  return <div className='px-2.5 py-6 text-center text-body-sm text-fg-4'>{children}</div>\n}\n\ninterface SessionRowItemProps {\n  row: SessionRow\n  active?: boolean\n  showGateway?: boolean\n  onSelect?: (row: SessionRow) => void\n  onDelete?: (row: SessionRow) => void\n  onRename?: (row: SessionRow, title: string) => void\n}\n\nfunction SessionRowItem({\n  row,\n  active,\n  showGateway,\n  onSelect,\n  onDelete,\n  onRename,\n}: SessionRowItemProps) {\n  const { info } = row\n  const meta = STATUS_META[info.status]\n  const [editing, setEditing] = useState(false)\n\n  return (\n    <div\n      data-slot='session-row'\n      data-active={active || undefined}\n      className={cn(\n        'group flex w-full items-center gap-2 rounded-md border border-transparent px-2.5 py-2 text-left transition-colors',\n        active ? 'border-border bg-surface' : 'hover:bg-surface-hover',\n      )}>\n      <div className='min-w-0 flex-1'>\n        <div className='flex items-center gap-2'>\n          {/* The editor replaces the link rather than sitting inside it — an\n              input nested in a button is invalid, and disabling the button to\n              protect the edit disables the field with it. */}\n          {editing && onRename ? (\n            <NameEditor\n              initial={info.title ?? ''}\n              onCommit={(title) => {\n                setEditing(false)\n                onRename(row, title)\n              }}\n              onCancel={() => setEditing(false)}\n            />\n          ) : (\n            <button\n              type='button'\n              onClick={() => onSelect?.(row)}\n              className='min-w-0 truncate text-left text-body-sm font-medium text-fg-1 outline-none'>\n              {sessionLabel(info)}\n            </button>\n          )}\n          <Badge variant={meta.variant} dot className='shrink-0'>\n            {meta.label}\n          </Badge>\n          {row.unseen > 0 ? (\n            // Transcript rows since this session was last on screen — the same\n            // unit the VS Code badge counts, because turns undercount badly.\n            <Badge variant='accent' className='shrink-0' title={`${row.unseen} new`}>\n              {row.unseen}\n            </Badge>\n          ) : null}\n        </div>\n        <button\n          type='button'\n          onClick={() => !editing && onSelect?.(row)}\n          className='mt-0.5 flex w-full items-center gap-2 text-left font-mono text-label text-fg-4 outline-none'>\n          <span className='truncate'>{info.cwd}</span>\n          {showGateway ? <span className='shrink-0'>{row.hostName}</span> : null}\n          {info.profile ? <span className='shrink-0'>@{info.profile}</span> : null}\n          <span className='shrink-0'>{formatCost(info.totalCostUsd)}</span>\n          <span className='shrink-0'>\n            {formatRelativeTime(info.lastActivityAt ?? info.createdAt)}\n          </span>\n        </button>\n      </div>\n      {onRename && !editing ? (\n        <Button\n          variant='ghost'\n          size='icon-sm'\n          aria-label='Rename session'\n          className='opacity-0 transition-opacity group-hover:opacity-100'\n          onClick={() => setEditing(true)}>\n          <Pencil className='size-3.5 text-fg-3' />\n        </Button>\n      ) : null}\n      {onDelete ? (\n        <Button\n          variant='ghost'\n          size='icon-sm'\n          aria-label='Close session'\n          className='opacity-0 transition-opacity group-hover:opacity-100'\n          onClick={() => onDelete(row)}>\n          <Trash2 className='size-3.5 text-fg-3' />\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\n/**\n * Inline rename. Enter commits, Escape cancels, blur commits — but only a blur\n * that is still inside this document: switching windows must not silently commit,\n * nor kill the editor in the frame it opened.\n */\nfunction NameEditor({\n  initial,\n  onCommit,\n  onCancel,\n}: {\n  initial: string\n  onCommit: (title: string) => void\n  onCancel: () => void\n}) {\n  const [value, setValue] = useState(initial)\n  const ref = useRef<HTMLInputElement>(null)\n  useEffect(() => {\n    ref.current?.select()\n  }, [])\n  return (\n    <input\n      ref={ref}\n      value={value}\n      autoFocus\n      aria-label='Session name'\n      // The row is a button; a click in here must not select the session.\n      onClick={(e) => e.stopPropagation()}\n      onChange={(e) => setValue(e.target.value)}\n      onBlur={() => (document.hasFocus() ? onCommit(value.trim()) : undefined)}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') onCommit(value.trim())\n        else if (e.key === 'Escape') onCancel()\n        e.stopPropagation()\n      }}\n      className='-my-0.5 min-w-0 flex-1 rounded-sm border border-ring bg-bg px-1 py-0.5 text-body-sm font-medium text-fg-1 outline-none'\n    />\n  )\n}\n\n/** A multi-select facet. Empty = no filter, which is why the trigger reads the\n * facet's name rather than \"All\": nothing is being excluded. */\nfunction FacetSelect({\n  label,\n  value,\n  options,\n  onChange,\n}: {\n  label: string\n  value: string[]\n  options: { value: string; label: string }[]\n  onChange: (value: string[]) => void\n}) {\n  return (\n    <div className='flex items-center gap-1'>\n      <Select multiple value={value} onValueChange={(v) => onChange(v as string[])}>\n        <SelectTrigger aria-label={label} className='min-w-28'>\n          <SelectValue>\n            {value.length === 0\n              ? label\n              : value.length === 1\n                ? (options.find((o) => o.value === value[0])?.label ?? label)\n                : `${label} · ${value.length}`}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          {options.map((option) => (\n            <SelectItem key={option.value} value={option.value}>\n              <SelectItemText>{option.label}</SelectItemText>\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      {value.length > 0 ? (\n        <Button variant='ghost' size='icon-sm' aria-label={`Clear ${label}`} onClick={() => onChange([])}>\n          <X className='size-3 text-fg-4' />\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\nfunction OneOfSelect({\n  label,\n  value,\n  options,\n  onChange,\n}: {\n  label: string\n  value: string\n  options: readonly { value: string; label: string }[]\n  onChange: (value: string) => void\n}) {\n  return (\n    <Select value={value} onValueChange={(v) => onChange(v as string)}>\n      <SelectTrigger aria-label={label} className='min-w-28'>\n        <SelectValue>{options.find((o) => o.value === value)?.label ?? label}</SelectValue>\n      </SelectTrigger>\n      <SelectContent>\n        {options.map((option) => (\n          <SelectItem key={option.value} value={option.value}>\n            <SelectItemText>{option.label}</SelectItemText>\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n"],"mappings":"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"}

package/build/workspace.d.mts

@@ -1,4 +1,4 @@
-import { r as SessionPanelProps } from "./SessionPanel-CyhygZx_.mjs";
+import { r as SessionPanelProps } from "./SessionPanel-Dy9lQrOV.mjs";
 import * as _$react from "react";
 import { CSSProperties } from "react";
 import { OpenFile, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";
@@ -11,10 +11,32 @@ interface SessionWorkspaceProps {
   /** Passed straight through to {@link SessionPanel} — including the render-prop
    * form that claims the session-actions menu. */
   header?: SessionPanelProps['header'];
+  /**
+   * Panel seams the workspace does not interpret, forwarded verbatim.
+   *
+   * They are listed rather than spread so the workspace stays explicit about
+   * what it passes on: the panel owns the session's one attach, and a seam that
+   * silently arrived here would be a second place to look for why a session
+   * renders the way it does.
+   */
+  transcriptVariant?: SessionPanelProps['transcriptVariant'];
+  transcriptDensity?: SessionPanelProps['transcriptDensity'];
+  unseen?: SessionPanelProps['unseen'];
+  onVitals?: SessionPanelProps['onVitals'];
   /** Rail width in pixels on first render. */
   defaultRailWidth?: number;
   /** Start with the file rail collapsed even on a wide viewport. */
   defaultRailCollapsed?: boolean;
+  /**
+   * The rail moved. Paired with the two defaults so an embedder can persist the
+   * layout — the workspace deliberately does not, because *where* to keep it (a
+   * Memento, localStorage, a workspace file) is the embedder's call, and a
+   * component that picked one would be wrong in the other hosts.
+   */
+  onRailChange?: (rail: {
+    width: number;
+    collapsed: boolean;
+  }) => void;
   className?: string;
 }
 /**
@@ -42,8 +64,13 @@ declare function SessionWorkspace({
   client,
   sessionId,
   header,
+  transcriptVariant,
+  transcriptDensity,
+  unseen,
+  onVitals,
   defaultRailWidth,
   defaultRailCollapsed,
+  onRailChange,
   className
 }: SessionWorkspaceProps): _$react.JSX.Element;
 //#endregion

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { $ as TooltipProvider, Ct as cn, J as Spinner, K as Splitter, Z as Tip, t as SessionPanel, vt as Input, xt as Button } from "./SessionPanel-_U8tjX29.mjs";
+import { $ as Tip, Ct as Button, J as Splitter, Tt as cn, X as Spinner, bt as Input, t as SessionPanel, tt as TooltipProvider } from "./SessionPanel-NQ8ksCfj.mjs";
 import { n as formatBytes } from "./format-DqR56Y8l.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -694,7 +694,7 @@ const EDITOR_MIN = 120;
 *    The conditional children before it are `? :` expressions that leave a null in
 *    their slot, which is exactly what keeps its index stable.
 */
-function SessionWorkspace({ client, sessionId, header, defaultRailWidth = 260, defaultRailCollapsed, className }) {
+function SessionWorkspace({ client, sessionId, header, transcriptVariant, transcriptDensity, unseen, onVitals, defaultRailWidth = 260, defaultRailCollapsed, onRailChange, className }) {
 	const { info } = useSessionInfo(client, sessionId);
 	const cwd = info?.cwd;
 	const tree = useHostFileTree(client, cwd);
@@ -710,6 +710,14 @@ function SessionWorkspace({ client, sessionId, header, defaultRailWidth = 260, d
 	const wide = useIsWide();
 	const [railCollapsed, setRailCollapsed] = useState(defaultRailCollapsed ?? false);
 	const [railWidth, setRailWidth] = useState(defaultRailWidth);
+	const onRailChangeRef = useRef(onRailChange);
+	onRailChangeRef.current = onRailChange;
+	useEffect(() => {
+		onRailChangeRef.current?.({
+			width: railWidth,
+			collapsed: railCollapsed
+		});
+	}, [railWidth, railCollapsed]);
 	const [editorHeight, setEditorHeight] = useState(360);
 	const hasFiles = files.files.length > 0;
 	const overlayRail = !wide;
@@ -800,6 +808,10 @@ function SessionWorkspace({ client, sessionId, header, defaultRailWidth = 260, d
 							client,
 							sessionId,
 							header: hoisted,
+							transcriptVariant,
+							transcriptDensity,
+							unseen,
+							onVitals,
 							className: "min-h-0 flex-1"
 						})
 					]