@workerdeck/ui 1.4.0 → 2.0.0

package/build/{SessionPanel-DQp2oStr.mjs → SessionPanel-CE5AVkg6.mjs}

@@ -5,11 +5,11 @@ import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
-import { ArrowDown, ArrowDownCircle, ArrowLeft, ArrowUp, AtSign, Brain, ChartPie, Check, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, ClipboardList, Clock, Code, Copy, Download, File, FileDiff, FileText, Folder, FolderSearch, FolderTree, Gauge, Globe, Hand, Image, Info, Link2, LoaderCircle, MessageCircleQuestion, MessageSquareText, MoreHorizontal, Paperclip, PencilLine, Plug, Power, PowerOff, Puzzle, RefreshCw, RotateCcw, RotateCw, Search, ShieldCheck, SlashSquare, Sparkles, Square, SquarePen, Terminal, TriangleAlert, UsersRound, WifiOff, Wrench, X, Zap } from "lucide-react";
+import { ArrowDown, ArrowDownCircle, ArrowLeft, ArrowRight, ArrowUp, AtSign, Brain, ChartPie, Check, CheckSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Circle, CircleAlert, ClipboardList, Clock, Code, Copy, Download, File, FileDiff, FileText, Folder, FolderSearch, FolderTree, Gauge, Globe, Hand, Image, Info, Link2, LoaderCircle, MessageCircleQuestion, MessageSquareText, MoreHorizontal, Paperclip, PencilLine, Plug, Power, PowerOff, Puzzle, RefreshCw, RotateCcw, RotateCw, Search, ShieldCheck, SlashSquare, Sparkles, Square, SquarePen, Terminal, TriangleAlert, UsersRound, WifiOff, Wrench, X, Zap } from "lucide-react";
 import { Menu } from "@base-ui/react/menu";
 import { Dialog } from "@base-ui/react/dialog";
 import { Tooltip } from "@base-ui/react/tooltip";
-import { PROTOCOL_VERSION, mergeUsage, orderUsageWindows, subagentLabel, toolTitle, usageInfos } from "@workerdeck/protocol";
+import { PROTOCOL_VERSION, mergeUsage, orderUsageWindows, parseTodoWriteInput, sessionTasks, subagentLabel, taskCountLabel, taskSummary, toolTitle, usageInfos, visibleTasks } from "@workerdeck/protocol";
 import { recapLine, scanPromptTokens, summarizeSince, useAttachments, useClaudeSession, useDraft, useHostFileSearch, useProfileUsage, useToolCallHost } from "@workerdeck/react";
 import { Streamdown } from "streamdown";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
@@ -5140,7 +5140,7 @@ function taskBusy(task, children) {
 function taskFailed(task) {
 	return callFailed(task);
 }
-function taskSummary(task, children) {
+function taskSummary$1(task, children) {
 	const busy = taskBusy(task, children);
 	const calls = children.reduce((n, child) => n + (child.kind === "tool_call" ? 1 : 0), 0);
 	const label = taskLabel(task);
@@ -5155,34 +5155,10 @@ const GLYPH = {
 	in_progress: "◐",
 	completed: "☒"
 };
-function todoEntry(value) {
-	if (typeof value !== "object" || value === null) return;
-	const raw = value;
-	const status = raw.status;
-	if (status !== "pending" && status !== "in_progress" && status !== "completed") return;
-	const content = typeof raw.content === "string" ? raw.content.trim() : "";
-	if (content === "") return;
-	const active = typeof raw.activeForm === "string" ? raw.activeForm.trim() : "";
-	return {
-		status,
-		text: status === "in_progress" && active !== "" ? active : content
-	};
-}
-function parseTodos(input) {
-	const todos = input?.todos;
-	if (!Array.isArray(todos) || todos.length === 0) return;
-	const out = [];
-	for (const value of todos) {
-		const entry = todoEntry(value);
-		if (entry === void 0) return;
-		out.push(entry);
-	}
-	return out;
-}
 function todoPreview(name, input) {
 	if (name !== "TodoWrite") return;
-	const todos = parseTodos(input);
-	if (todos === void 0) return;
+	const todos = parseTodoWriteInput(input);
+	if (todos === void 0 || todos.length === 0) return;
 	const done = todos.reduce((n, todo) => n + (todo.status === "completed" ? 1 : 0), 0);
 	const shown = todos.slice(0, PREVIEW_TODOS);
 	const hidden = todos.length - shown.length;
@@ -6076,6 +6052,102 @@ function ContextDialog({ usage, engine, open, onOpenChange, className }) {
 	});
 }
 //#endregion
+//#region src/components/agent/TaskList.tsx
+function TaskList({ tasks, showCompleted, onShowCompletedChange, onSelectTask, className }) {
+	const summary = taskSummary(tasks);
+	const shown = visibleTasks(tasks, showCompleted);
+	const hidden = tasks.length - shown.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-4 pb-1.5",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-label text-fg-3",
+				children: [
+					summary.done,
+					" of ",
+					summary.total,
+					" done",
+					summary.failed > 0 ? ` · ${summary.failed} failed` : ""
+				]
+			}), summary.done > 0 && onShowCompletedChange ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onShowCompletedChange(!showCompleted),
+				className: "shrink-0 rounded-[4px] px-1 py-0.5 text-label text-fg-4 outline-none hover:bg-row-hover hover:text-fg-2",
+				children: showCompleted ? "Hide completed" : `Show completed (${summary.done})`
+			}) : null]
+		}), shown.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "py-6 text-center text-body-sm text-fg-4",
+			children: tasks.length === 0 ? "No tasks yet — a checklist appears once the agent plans one." : `${hidden} completed, all hidden.`
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: shown.map((task) => /* @__PURE__ */ jsx(TaskRow$1, {
+				task,
+				onSelect: onSelectTask
+			}, task.key))
+		})]
+	});
+}
+function TaskRow$1({ task, onSelect }) {
+	const pressable = onSelect !== void 0 && task.toolUseId !== void 0;
+	const body = task.state === "failed" ? "text-danger" : task.state === "done" ? "text-fg-4" : "text-fg-2";
+	const row = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(TaskIcon, { state: task.state }),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 flex-1 truncate text-left", task.state === "done" ? "line-through" : void 0),
+			children: task.label
+		}),
+		task.detail ? /* @__PURE__ */ jsx("span", {
+			className: "shrink-0 tabular-nums text-fg-4",
+			children: task.detail
+		}) : null,
+		pressable ? /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5 shrink-0 text-fg-4" }) : null
+	] });
+	const className = cn("flex w-full items-center gap-1.5 rounded-[4px] px-1.5 py-1 text-body-sm outline-none", body);
+	if (!pressable) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: row
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title: task.label,
+		onClick: () => onSelect(task),
+		className: cn(className, "hover:bg-row-active"),
+		children: row
+	});
+}
+function TaskIcon({ state }) {
+	switch (state) {
+		case "running": return /* @__PURE__ */ jsx(Spinner, { className: "size-[13px] shrink-0" });
+		case "failed": return /* @__PURE__ */ jsx(CircleAlert, { className: "size-[13px] shrink-0" });
+		case "done": return /* @__PURE__ */ jsx(Check, { className: "size-[13px] shrink-0" });
+		default: return /* @__PURE__ */ jsx(Circle, { className: "size-[13px] shrink-0 text-fg-4" });
+	}
+}
+//#endregion
+//#region src/components/agent/TasksDialog.tsx
+function TasksDialog({ tasks, showCompleted, onShowCompletedChange, onSelectTask, open, onOpenChange, className }) {
+	return /* @__PURE__ */ jsx(Dialog$1, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className,
+			children: [/* @__PURE__ */ jsx(DialogHeader, {
+				title: "Tasks",
+				description: "The agent's checklist and the tasks it has spawned"
+			}), /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx(TaskList, {
+				tasks,
+				showCompleted,
+				onShowCompletedChange,
+				onSelectTask: onSelectTask ? (task) => {
+					onOpenChange(false);
+					onSelectTask(task);
+				} : void 0
+			}) })]
+		})
+	});
+}
+//#endregion
 //#region src/components/agent/EntryIcon.tsx
 function EntryIcon({ type }) {
 	if (type === "dir") return /* @__PURE__ */ jsx(Folder, { className: "size-3.5 shrink-0 text-accent" });
@@ -8106,7 +8178,7 @@ function Slot({ onClick, hint, children }) {
 		children
 	});
 }
-function StatusBar({ state, rateLimits, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, controls, actions, placement = "top", className }) {
+function StatusBar({ state, rateLimits, connected, connection, onOpenStatus, onOpenContext, onOpenUsage, tasks, onOpenTasks, controls, actions, placement = "top", className }) {
 	const meta = STATUS_META[state.status];
 	const now = useNow();
 	const windows = rateLimits ?? state.rateLimits;
@@ -8114,6 +8186,7 @@ function StatusBar({ state, rateLimits, connected, connection, onOpenStatus, onO
 	const weekly = windows?.seven_day;
 	const link = connection ?? (connected === false ? "reconnecting" : "live");
 	const terminal = useTranscriptVariant() === "terminal";
+	const taskCount = tasks && tasks.length > 0 ? taskSummary(tasks) : void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "status-bar",
 		className: cn("flex h-[var(--wd-status-bar-height)] items-baseline gap-2 border-border bg-surface p-1.5", placement === "bottom" ? terminal ? void 0 : "border-t" : "border-b", className),
@@ -8157,6 +8230,17 @@ function StatusBar({ state, rateLimits, connected, connection, onOpenStatus, onO
 					}) : null]
 				})
 			}) : null,
+			taskCount ? /* @__PURE__ */ jsx(Slot, {
+				onClick: onOpenTasks,
+				hint: "Tasks",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "text-label text-fg-3",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn("tabular-nums", taskCount.running > 0 ? "text-info" : void 0),
+						children: taskCountLabel(taskCount)
+					}), " tasks"]
+				})
+			}) : null,
 			controls ? /* @__PURE__ */ jsx("span", {
 				className: "self-center",
 				children: controls
@@ -8867,7 +8951,7 @@ function itemHeight(item, m) {
 	}
 }
 function blockHeight(block, m) {
-	if ("task" in block) return rowH(taskSummary(block.task, taskChildItems(block)), m);
+	if ("task" in block) return rowH(taskSummary$1(block.task, taskChildItems(block)), m);
 	if ("run" in block) {
 		const busy = block.run.some((item) => item.status === "running" || item.status === "pending");
 		return rowH(runSummary(block.run, busy), m);
@@ -9837,7 +9921,7 @@ function TaskRow({ block, fileUrl, onOpenSubagent }) {
 				glyph: busy ? pulse : "●",
 				glyphTone: failed ? "red" : busy ? "mark" : "dim",
 				tone: failed ? "red" : "green",
-				children: taskSummary(block.task, children)
+				children: taskSummary$1(block.task, children)
 			})
 		}), open ? /* @__PURE__ */ jsxs("div", {
 			className: "term-nested",
@@ -11033,7 +11117,7 @@ const INTERACTIVE = [
 	"[role=\"radio\"]",
 	"[role=\"tab\"]"
 ].join(",");
-function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", midTurnSend = "fold", affordances, terminalMetrics, scrubber = false, bookmarks, onToggleBookmark, reveal, openSubagent, onSubagentChange, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, toolHost, clientTools, cacheTranscript, emptyState, onLinkClick, fontSize, className }) {
+function SessionPanel({ client, sessionId, header, panelSurface = "internal", statusSurface = "internal", statusPlacement = "top", onOpenPanel, onVitals, transcriptVariant = "cards", transcriptDensity = "comfortable", transcriptFont = "sans", midTurnSend = "fold", affordances, terminalMetrics, scrubber = false, bookmarks, onToggleBookmark, reveal, subagents, openSubagent, onSubagentChange, stickyPrompt = false, controlsSurface = "internal", onControls, focusComposerOnClick = false, unseen, readOnly = false, toolHost, clientTools, cacheTranscript, emptyState, onLinkClick, fontSize, className }) {
 	const effectiveTermFontSize = terminalMetrics?.fontSize ?? fontSize;
 	const effectiveTermLineHeight = terminalMetrics?.lineHeight ?? (fontSize !== void 0 ? Math.round(fontSize * (18 / 13)) : void 0);
 	const external = panelSurface === "external";
@@ -11042,6 +11126,8 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 	const controlsExternal = controlsSurface === "external" || controlsInStatus;
 	const [protocolError, setProtocolError] = useState(void 0);
 	const [panel, setPanel] = useState();
+	const [showCompletedTasks, setShowCompletedTasks] = useState(false);
+	const [taskReveal, setTaskReveal] = useState();
 	const { state, connection, replaying, protocolMismatch, models, effectiveModel, handle, send, approve, deny, interrupt, setModel, setPermissionMode, reconnectNow, loadFullResult } = useClaudeSession(client, sessionId, {
 		onProtocolError: setProtocolError,
 		cacheTranscript
@@ -11096,6 +11182,14 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		const stamps = Object.values(usage).map((w) => w.updatedAt);
 		return stamps.length > 0 ? Math.max(...stamps) : void 0;
 	}, [usage]);
+	const tasks = useMemo(() => sessionTasks({
+		checklist: state.checklist,
+		subagents: subagents ?? state.session?.subagents
+	}), [
+		state.checklist,
+		subagents,
+		state.session?.subagents
+	]);
 	const onVitalsRef = useRef(onVitals);
 	onVitalsRef.current = onVitals;
 	const vitalsModel = effectiveModel ?? state.model;
@@ -11113,6 +11207,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 			skills: state.skills,
 			cwd: state.cwd,
 			contextUsage: state.contextUsage,
+			tasks,
 			rateLimits,
 			rateLimitsUpdatedAt: usageUpdatedAt,
 			itemCount: state.items.length,
@@ -11130,6 +11225,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		state.skills,
 		state.cwd,
 		state.contextUsage,
+		tasks,
 		rateLimits,
 		usageUpdatedAt,
 		state.items.length,
@@ -11268,6 +11364,8 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 		onOpenStatus: external && !onOpenPanel ? void 0 : () => openPanel("info"),
 		onOpenContext: external && !onOpenPanel ? void 0 : () => openPanel("context"),
 		onOpenUsage: external && !onOpenPanel ? void 0 : () => openPanel("usage"),
+		tasks,
+		onOpenTasks: external && !onOpenPanel ? void 0 : () => openPanel("tasks"),
 		actions: headerTakesActions ? void 0 : menu
 	});
 	const panelRef = useRef(null);
@@ -11359,7 +11457,7 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 											from: catchUp.itemCount,
 											since: catchUp.since
 										} : void 0,
-										reveal: returnReveal ?? reveal,
+										reveal: taskReveal ?? returnReveal ?? reveal,
 										frame: subagentId === void 0 ? void 0 : { parentToolUseId: subagentId },
 										onOpenSubagent: enterSubagent,
 										emptyState,
@@ -11485,6 +11583,19 @@ function SessionPanel({ client, sessionId, header, panelSurface = "internal", st
 										open: panel === "mcp",
 										onOpenChange: (next) => setPanel(next ? "mcp" : void 0)
 									}),
+									/* @__PURE__ */ jsx(TasksDialog, {
+										tasks,
+										showCompleted: showCompletedTasks,
+										onShowCompletedChange: setShowCompletedTasks,
+										onSelectTask: (task) => {
+											if (task.toolUseId) setTaskReveal({
+												toolUseId: task.toolUseId,
+												nonce: Date.now()
+											});
+										},
+										open: panel === "tasks",
+										onOpenChange: (next) => setPanel(next ? "tasks" : void 0)
+									}),
 									/* @__PURE__ */ jsx(SkillsDialog, {
 										skills: state.skills,
 										open: panel === "skills",
@@ -11568,6 +11679,6 @@ function Notice({ level, onDismiss, children }) {
 	});
 }
 //#endregion
-export { Ink as $, PermissionPrompt as A, DialogHeader as At, EntryIcon as B, SelectItem as Bt, SessionInfoDialog as C, Tip as Ct, QuestionPrompt as D, DialogBody as Dt, QUESTION_BEHAVIORS as E, Dialog$1 as Et, permissionModeMeta as F, MenuItem as Ft, TerminalSurface as G, Input as Gt, contextNote as H, SelectTrigger as Ht, ModelSelect as I, MenuSeparator as It, TerminalMarkdown as J, Button as Jt, ToolTitleProvider as K, Badge as Kt, SkillsDialog as L, MenuTrigger as Lt, PERMISSION_MODES as M, DialogTrigger as Mt, PermissionModeSelect as N, Menu$1 as Nt, parseUserQuestions as O, DialogClose as Ot, permissionModeChoices as P, MenuContent as Pt, Blank as Q, McpDialog as R, Select$1 as Rt, STATUS_META as S, copyText as St, TerminalPermissionPrompt as T, TooltipProvider as Tt, Composer as U, SelectValue as Ut, ContextDialog as V, SelectItemText as Vt, skillPrompt as W, PortalScope as Wt, previewPatch as X, cn as Xt, TerminalDiff as Y, buttonVariants as Yt, Band as Z, Loader as _, ProgressRing as _t, HeldSendsBar as a, toolIcon as at, ConversationScrollButton as b, Spinner as bt, ToolCallCard as c, useTranscriptDensity as ct, Message as d, hashtagTrigger as dt, Row as et, MessageContent as f, mentionTrigger as ft, SessionEmptyState as g, segmentsToPlainText as gt, TerminalTranscript as h, plainTextToSegments as ht, useMinuteClock as i, isMutatingTool as it, Response as j, DialogRow as jt, SubagentStrip as k, DialogContent as kt, Reasoning as l, useTranscriptVariant as lt, TerminalItemView as m, PromptArea as mt, UsageDialog as n, WithActions as nt, useHeldSends as o, TranscriptDensityProvider as ot, FileCard as p, usePromptAreaState as pt, useToolTitle as q, badgeVariants as qt, UsageMeters as r, useAffordances as rt, Transcript as s, TranscriptVariantProvider as st, SessionPanel as t, CopyAction as tt, PromptTokenText as u, commandTrigger as ut, Conversation as v, Splitter as vt, TerminalQuestionPrompt as w, TooltipContent as wt, StatusBar as x, CopyButton as xt, ConversationContent as y, CodeBlock as yt, HostFilesDialog as z, SelectContent as zt };
+export { Band as $, PermissionPrompt as A, DialogClose as At, EntryIcon as B, Select$1 as Bt, SessionInfoDialog as C, CopyButton as Ct, QuestionPrompt as D, TooltipProvider as Dt, QUESTION_BEHAVIORS as E, TooltipContent as Et, permissionModeMeta as F, Menu$1 as Ft, Composer as G, SelectValue as Gt, TaskList as H, SelectItem as Ht, ModelSelect as I, MenuContent as It, ToolTitleProvider as J, Badge as Jt, skillPrompt as K, PortalScope as Kt, SkillsDialog as L, MenuItem as Lt, PERMISSION_MODES as M, DialogHeader as Mt, PermissionModeSelect as N, DialogRow as Nt, parseUserQuestions as O, Dialog$1 as Ot, permissionModeChoices as P, DialogTrigger as Pt, previewPatch as Q, cn as Qt, McpDialog as R, MenuSeparator as Rt, STATUS_META as S, Spinner as St, TerminalPermissionPrompt as T, Tip as Tt, ContextDialog as U, SelectItemText as Ut, TasksDialog as V, SelectContent as Vt, contextNote as W, SelectTrigger as Wt, TerminalMarkdown as X, Button as Xt, useToolTitle as Y, badgeVariants as Yt, TerminalDiff as Z, buttonVariants as Zt, Loader as _, plainTextToSegments as _t, HeldSendsBar as a, useAffordances as at, ConversationScrollButton as b, Splitter as bt, ToolCallCard as c, TranscriptDensityProvider as ct, Message as d, useTranscriptVariant as dt, Blank as et, MessageContent as f, commandTrigger as ft, SessionEmptyState as g, PromptArea as gt, TerminalTranscript as h, usePromptAreaState as ht, useMinuteClock as i, WithActions as it, Response as j, DialogContent as jt, SubagentStrip as k, DialogBody as kt, Reasoning as l, TranscriptVariantProvider as lt, TerminalItemView as m, mentionTrigger as mt, UsageDialog as n, Row as nt, useHeldSends as o, isMutatingTool as ot, FileCard as p, hashtagTrigger as pt, TerminalSurface as q, Input as qt, UsageMeters as r, CopyAction as rt, Transcript as s, toolIcon as st, SessionPanel as t, Ink as tt, PromptTokenText as u, useTranscriptDensity as ut, Conversation as v, segmentsToPlainText as vt, TerminalQuestionPrompt as w, copyText as wt, StatusBar as x, CodeBlock as xt, ConversationContent as y, ProgressRing as yt, HostFilesDialog as z, MenuTrigger as zt };
 
-//# sourceMappingURL=SessionPanel-DQp2oStr.mjs.map
+//# sourceMappingURL=SessionPanel-CE5AVkg6.mjs.map