@aphrody/m3-ai 3.3.0

package/dist/index.js

@@ -0,0 +1,2227 @@
+'use client';
+import { forwardRef, useState, useMemo, useRef, useEffect, useId, useCallback } from 'react';
+import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'motion/react';
+import { usePopover, Popover, SelectPill, Icon, CircleButton, Button, DropdownMenu, Collapsible, CollapsibleTrigger, CollapsibleContent, Select, SelectOption, Input, TextArea } from '@aphrody/m3-primitives';
+import { m3Easings, m3Durations } from '@aphrody/m3-motion';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+
+// src/types.ts
+var TASK_STATUS_ORDER = [
+  "in_progress",
+  "ready",
+  "pending_approval",
+  "backlog",
+  "done"
+];
+var TASK_STATUS_LABEL = {
+  in_progress: "In Progress",
+  ready: "Ready",
+  pending_approval: "Pending Approval",
+  backlog: "Backlog",
+  done: "Done"
+};
+var TASK_PRIORITY_LABEL = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low"
+};
+function tryParseJson(text) {
+  if (!text || text.trim().length === 0) return null;
+  try {
+    const parsed = JSON.parse(text);
+    if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+      return parsed;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function isErrorResult(text, parsed) {
+  if (parsed?.error) return true;
+  if (parsed?.status === "error") return true;
+  if (parsed?.success === false) return true;
+  if (typeof parsed?.exit_code === "number" && parsed.exit_code !== 0) return true;
+  const lower = text.toLowerCase();
+  return lower.startsWith("error:") || lower.startsWith("error -") || lower.startsWith("failed:") || lower.startsWith("toolset error:");
+}
+function pairTranscriptSteps(steps) {
+  const items = [];
+  const resultsById = /* @__PURE__ */ new Map();
+  for (const step of steps) {
+    if (step.type === "tool_result") {
+      resultsById.set(step.call_id, { name: step.name, text: step.text });
+    }
+  }
+  for (const step of steps) {
+    if (step.type === "action") {
+      for (const content of step.content) {
+        if (content.type === "text") {
+          items.push({ kind: "text", text: content.text });
+        } else if (content.type === "tool_call") {
+          const result = resultsById.get(content.id);
+          const parsedArgs = tryParseJson(content.args);
+          const parsedResult = result ? tryParseJson(result.text) : null;
+          const hasError = result ? isErrorResult(result.text, parsedResult) : false;
+          items.push({
+            kind: "tool",
+            pair: {
+              id: content.id,
+              name: content.name,
+              argsRaw: content.args,
+              args: parsedArgs,
+              resultRaw: result?.text ?? null,
+              result: parsedResult,
+              status: result ? hasError ? "error" : "completed" : "running"
+            }
+          });
+        }
+      }
+    }
+  }
+  return items;
+}
+var focusRing = "outline-none focus-visible:outline-3 focus-visible:outline-secondary focus-visible:outline-offset-2";
+var expandMotion = {
+  initial: { height: 0, opacity: 0 },
+  animate: {
+    height: "auto",
+    opacity: 1,
+    transition: { duration: m3Durations.medium2, ease: m3Easings.emphasizedDecelerate }
+  },
+  exit: {
+    height: 0,
+    opacity: 0,
+    transition: { duration: m3Durations.short4, ease: m3Easings.emphasizedAccelerate }
+  }
+};
+function CircularIndicator({
+  size = 16,
+  className,
+  label = "Loading"
+}) {
+  const stroke = size <= 16 ? 2 : size <= 24 ? 3 : 4;
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "progressbar",
+      "aria-label": label,
+      className: clsx("m3-circular-indicator inline-flex shrink-0 text-primary", className),
+      style: { width: size, height: size },
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: `0 0 ${size} ${size}`,
+          className: "animate-spin",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              strokeDasharray: `${c * 0.7} ${c}`
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var chipTones = {
+  primary: "bg-primary-container text-on-primary-container",
+  success: "bg-success-container text-on-success-container",
+  error: "bg-error-container text-on-error-container",
+  warning: "bg-warning-container text-on-warning-container",
+  neutral: "border border-outline-variant text-on-surface-variant"
+};
+function StatusChip({
+  tone,
+  icon,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx(
+        "inline-flex h-6 shrink-0 items-center gap-1 rounded-small px-2 text-label-medium",
+        chipTones[tone],
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+var toolRenderers = {
+  browser_launch: {
+    summary(pair) {
+      const headless = pair.args?.headless;
+      return headless === false ? "Launch browser (visible)" : "Launch browser";
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: "Browser session started" });
+    }
+  },
+  browser_navigate: {
+    summary(pair) {
+      const url = pair.args?.url;
+      return url ? truncate(String(url), 60) : null;
+    },
+    resultView(pair) {
+      if (!pair.result) return /* @__PURE__ */ jsx(ResultText, { text: pair.resultRaw });
+      const title = pair.result.title;
+      const url = pair.result.url;
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-3 py-2", children: [
+        title && /* @__PURE__ */ jsxs("p", { className: "text-body-small text-on-surface-variant", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-outline", children: "Title: " }),
+          title
+        ] }),
+        url && /* @__PURE__ */ jsx("p", { className: "font-code text-body-small text-outline", children: truncate(url, 80) })
+      ] });
+    }
+  },
+  browser_snapshot: {
+    summary(pair) {
+      if (!pair.resultRaw) return "Taking snapshot...";
+      const matches = pair.resultRaw.match(/\[\d+\]/g);
+      const count = matches?.length ?? 0;
+      return count > 0 ? `${count} interactive element${count !== 1 ? "s" : ""}` : "Page snapshot";
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 20 });
+    }
+  },
+  browser_click: {
+    summary(pair) {
+      const index = pair.args?.index;
+      return index !== void 0 ? `Click element [${index}]` : "Click";
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: pair.resultRaw });
+    }
+  },
+  browser_type: {
+    summary(pair) {
+      const index = pair.args?.index;
+      const hasSecret = pair.args?.secret !== void 0;
+      const text = pair.args?.text;
+      if (hasSecret) {
+        return index !== void 0 ? `Type secret into [${index}]` : "Type secret";
+      }
+      if (text) {
+        const display = truncate(String(text), 30);
+        return index !== void 0 ? `Type "${display}" into [${index}]` : `Type "${display}"`;
+      }
+      return index !== void 0 ? `Type into [${index}]` : "Type";
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: pair.resultRaw });
+    }
+  },
+  browser_press_key: {
+    summary(pair) {
+      const key = pair.args?.key;
+      return key ? `Press ${key}` : "Press key";
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: pair.resultRaw });
+    }
+  },
+  browser_screenshot: {
+    summary() {
+      return "Capture screenshot";
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      if (pair.result?.base64) {
+        const mimeType = pair.result.mime_type ?? "image/png";
+        return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `data:${mimeType};base64,${pair.result.base64}`,
+            alt: "Browser screenshot",
+            className: "max-h-60 rounded-extra-small border border-outline-variant object-contain"
+          }
+        ) });
+      }
+      return /* @__PURE__ */ jsx(ResultLine, { text: truncate(pair.resultRaw, 100) });
+    }
+  },
+  browser_evaluate: {
+    summary(pair) {
+      const expression = pair.args?.expression;
+      return expression ? truncate(String(expression), 50) : "Evaluate JS";
+    },
+    argsView(pair) {
+      const expression = pair.args?.expression;
+      if (!expression) return null;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 text-body-small font-medium text-outline", children: "JavaScript" }),
+        /* @__PURE__ */ jsx("pre", { className: "max-h-40 overflow-auto font-code text-body-small text-on-surface-variant", children: String(expression) })
+      ] });
+    }
+  },
+  browser_tab_open: {
+    summary(pair) {
+      const url = pair.args?.url;
+      return url ? `Open tab: ${truncate(String(url), 50)}` : "Open new tab";
+    }
+  },
+  browser_tab_list: {
+    summary() {
+      return "List tabs";
+    }
+  },
+  browser_tab_close: {
+    summary(pair) {
+      const tabId = pair.args?.tab_id;
+      return tabId !== void 0 ? `Close tab ${tabId}` : "Close tab";
+    }
+  },
+  browser_close: {
+    summary() {
+      return "Close browser";
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: "Browser session closed" });
+    }
+  },
+  shell: {
+    summary(pair) {
+      const command = pair.args?.command;
+      if (!command) return null;
+      if (pair.result && typeof pair.result.exit_code === "number") {
+        const code = pair.result.exit_code;
+        const cmdStr = truncate(String(command), 50);
+        return code === 0 ? cmdStr : `${cmdStr} (exit ${code})`;
+      }
+      return truncate(String(command), 60);
+    },
+    argsView(pair) {
+      const command = pair.args?.command;
+      if (!command) return null;
+      return /* @__PURE__ */ jsx("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: /* @__PURE__ */ jsxs("pre", { className: "max-h-40 overflow-auto font-code text-body-small text-on-surface-variant", children: [
+        /* @__PURE__ */ jsx("span", { className: "select-none text-outline", children: "$ " }),
+        String(command)
+      ] }) });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ShellResultView, { pair });
+    }
+  },
+  file_read: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const path = pair.args?.path;
+      return path ? truncate(String(path), 60) : null;
+    },
+    argsView(pair) {
+      const path = pair.args?.path;
+      if (!path) return null;
+      const offset = pair.args?.offset;
+      const limit = pair.args?.limit;
+      return /* @__PURE__ */ jsx("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: /* @__PURE__ */ jsxs("p", { className: "font-code text-body-small text-on-surface-variant", children: [
+        String(path),
+        offset ? ` (from line ${offset})` : "",
+        limit ? ` (${limit} lines)` : ""
+      ] }) });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 30 });
+    }
+  },
+  file_write: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const path = pair.args?.path;
+      return path ? truncate(String(path), 60) : null;
+    },
+    argsView(pair) {
+      const path = pair.args?.path;
+      const content = pair.args?.content;
+      if (!path && !content) return null;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: [
+        !!path && /* @__PURE__ */ jsx("p", { className: "mb-1 font-code text-body-small text-on-surface-variant", children: String(path) }),
+        !!content && /* @__PURE__ */ jsx("pre", { className: "max-h-40 overflow-auto font-code text-body-small text-outline", children: truncate(String(content), 2e3) })
+      ] });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: truncate(pair.resultRaw, 100) });
+    }
+  },
+  file_edit: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const path = pair.args?.path;
+      return path ? truncate(String(path), 60) : null;
+    },
+    argsView(pair) {
+      const path = pair.args?.path;
+      const oldStr = pair.args?.old_string;
+      const newStr = pair.args?.new_string;
+      if (!path) return null;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 font-code text-body-small text-on-surface-variant", children: String(path) }),
+        !!oldStr && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-body-small font-medium text-error", children: "Old" }),
+          /* @__PURE__ */ jsx("pre", { className: "max-h-20 overflow-auto font-code text-body-small text-error", children: truncate(String(oldStr), 500) })
+        ] }),
+        !!newStr && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-body-small font-medium text-success", children: "New" }),
+          /* @__PURE__ */ jsx("pre", { className: "max-h-20 overflow-auto font-code text-body-small text-success", children: truncate(String(newStr), 500) })
+        ] })
+      ] });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: truncate(pair.resultRaw, 100) });
+    }
+  },
+  file_list: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const path = pair.args?.path;
+      return path ? truncate(String(path), 60) : null;
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 30 });
+    }
+  },
+  exec: {
+    summary(pair) {
+      const program = pair.args?.program;
+      const cmdArgs = pair.args?.args;
+      if (!program) return null;
+      const parts = [String(program)];
+      if (Array.isArray(cmdArgs)) {
+        for (const arg of cmdArgs) parts.push(String(arg));
+      }
+      const full = parts.join(" ");
+      if (pair.result && typeof pair.result.exit_code === "number") {
+        const code = pair.result.exit_code;
+        const cmdStr = truncate(full, 50);
+        return code === 0 ? cmdStr : `${cmdStr} (exit ${code})`;
+      }
+      return truncate(full, 60);
+    },
+    argsView(pair) {
+      const program = pair.args?.program;
+      if (!program) return null;
+      const parts = [String(program)];
+      const cmdArgs = pair.args?.args;
+      if (Array.isArray(cmdArgs)) {
+        for (const arg of cmdArgs) parts.push(String(arg));
+      }
+      return /* @__PURE__ */ jsx("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: /* @__PURE__ */ jsxs("pre", { className: "max-h-40 overflow-auto font-code text-body-small text-on-surface-variant", children: [
+        /* @__PURE__ */ jsx("span", { className: "select-none text-outline", children: "$ " }),
+        parts.join(" ")
+      ] }) });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ShellResultView, { pair });
+    }
+  },
+  set_status: {
+    summary(pair) {
+      const kind = pair.args?.kind;
+      const message = pair.args?.message;
+      if (kind === "outcome") {
+        return message ? `Outcome: ${truncate(String(message), 50)}` : "Outcome set";
+      }
+      return message ? truncate(String(message), 60) : null;
+    },
+    resultView() {
+      return null;
+    }
+  },
+  // OpenCode tools
+  read: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const filePath = pair.args?.filePath ?? pair.args?.file_path;
+      return filePath ? truncate(String(filePath), 60) : null;
+    },
+    argsView(pair) {
+      const filePath = pair.args?.filePath ?? pair.args?.file_path;
+      if (!filePath) return null;
+      const offset = pair.args?.offset;
+      const limit = pair.args?.limit;
+      return /* @__PURE__ */ jsx("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: /* @__PURE__ */ jsxs("p", { className: "font-code text-body-small text-on-surface-variant", children: [
+        String(filePath),
+        offset ? ` (from line ${offset})` : "",
+        limit ? ` (${limit} lines)` : ""
+      ] }) });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 30 });
+    }
+  },
+  write: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const filePath = pair.args?.filePath ?? pair.args?.file_path;
+      return filePath ? truncate(String(filePath), 60) : null;
+    },
+    argsView(pair) {
+      const filePath = pair.args?.filePath ?? pair.args?.file_path;
+      const content = pair.args?.content;
+      if (!filePath && !content) return null;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: [
+        !!filePath && /* @__PURE__ */ jsx("p", { className: "mb-1 font-code text-body-small text-on-surface-variant", children: String(filePath) }),
+        !!content && /* @__PURE__ */ jsx("pre", { className: "max-h-40 overflow-auto font-code text-body-small text-outline", children: truncate(String(content), 2e3) })
+      ] });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: truncate(pair.resultRaw, 100) });
+    }
+  },
+  edit: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const filePath = pair.args?.filePath ?? pair.args?.file_path;
+      return filePath ? truncate(String(filePath), 60) : null;
+    },
+    argsView(pair) {
+      const filePath = pair.args?.filePath ?? pair.args?.file_path;
+      const oldStr = pair.args?.oldString ?? pair.args?.old_string;
+      const newStr = pair.args?.newString ?? pair.args?.new_string;
+      if (!filePath) return null;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 font-code text-body-small text-on-surface-variant", children: String(filePath) }),
+        !!oldStr && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-body-small font-medium text-error", children: "Old" }),
+          /* @__PURE__ */ jsx("pre", { className: "max-h-20 overflow-auto font-code text-body-small text-error", children: truncate(String(oldStr), 500) })
+        ] }),
+        !!newStr && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-body-small font-medium text-success", children: "New" }),
+          /* @__PURE__ */ jsx("pre", { className: "max-h-20 overflow-auto font-code text-body-small text-success", children: truncate(String(newStr), 500) })
+        ] })
+      ] });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ResultLine, { text: truncate(pair.resultRaw, 100) });
+    }
+  },
+  bash: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const command = pair.args?.command;
+      if (!command) return null;
+      if (pair.result && typeof pair.result.exit_code === "number") {
+        const code = pair.result.exit_code;
+        const cmdStr = truncate(String(command), 50);
+        return code === 0 ? cmdStr : `${cmdStr} (exit ${code})`;
+      }
+      return truncate(String(command), 60);
+    },
+    argsView(pair) {
+      const command = pair.args?.command;
+      if (!command) return null;
+      return /* @__PURE__ */ jsx("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: /* @__PURE__ */ jsxs("pre", { className: "max-h-40 overflow-auto font-code text-body-small text-on-surface-variant", children: [
+        /* @__PURE__ */ jsx("span", { className: "select-none text-outline", children: "$ " }),
+        String(command)
+      ] }) });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(ShellResultView, { pair });
+    }
+  },
+  glob: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const pattern = pair.args?.pattern;
+      return pattern ? truncate(String(pattern), 60) : null;
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 20 });
+    }
+  },
+  grep: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const pattern = pair.args?.pattern;
+      const include = pair.args?.include;
+      if (pattern && include) {
+        return `/${pattern}/ in ${include}`;
+      }
+      return pattern ? `/${truncate(String(pattern), 40)}/` : null;
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 20 });
+    }
+  },
+  webfetch: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const url = pair.args?.url;
+      return url ? truncate(String(url), 60) : null;
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 20 });
+    }
+  },
+  read_skill: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const name = pair.args?.name;
+      return name ? String(name) : null;
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 30 });
+    }
+  },
+  web_search: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const query = pair.args?.query;
+      const resultCount = pair.result?.result_count ?? (Array.isArray(pair.result?.results) ? pair.result.results.length : null);
+      const queryStr = query ? truncate(String(query), 50) : null;
+      if (queryStr && resultCount != null) {
+        return `${queryStr} (${resultCount} result${resultCount !== 1 ? "s" : ""})`;
+      }
+      return queryStr;
+    },
+    argsView(pair) {
+      const query = pair.args?.query;
+      if (!query) return null;
+      const count = pair.args?.count;
+      const freshness = pair.args?.freshness;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-body-small text-on-surface-variant", children: [
+          /* @__PURE__ */ jsx("span", { className: "select-none text-outline", children: "Search: " }),
+          String(query)
+        ] }),
+        !!(count || freshness) && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-body-small text-outline", children: [
+          count ? `${count} results` : "",
+          count && freshness ? " \xB7 " : "",
+          freshness ? `${freshness}` : ""
+        ] })
+      ] });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 20 });
+    }
+  },
+  spacebot_docs: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const action = pair.args?.action;
+      const docId = pair.args?.doc_id;
+      if (action === "read" && docId) {
+        return truncate(String(docId), 50);
+      }
+      return action ? String(action) : "list";
+    },
+    argsView(pair) {
+      const action = pair.args?.action;
+      const docId = pair.args?.doc_id;
+      const query = pair.args?.query;
+      if (!action && !docId) return null;
+      return /* @__PURE__ */ jsxs("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: [
+        !!docId && /* @__PURE__ */ jsx("p", { className: "font-code text-body-small text-on-surface-variant", children: String(docId) }),
+        !!query && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-body-small text-outline", children: [
+          "filter: ",
+          String(query)
+        ] })
+      ] });
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 30 });
+    }
+  },
+  todowrite: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      return "Update tasks";
+    },
+    resultView() {
+      return null;
+    }
+  },
+  task: {
+    summary(pair) {
+      if (pair.title) return pair.title;
+      const description = pair.args?.description;
+      return description ? truncate(String(description), 60) : null;
+    },
+    resultView(pair) {
+      if (!pair.resultRaw) return null;
+      return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 20 });
+    }
+  }
+};
+var defaultRenderer = {
+  summary(pair) {
+    if (!pair.argsRaw || pair.argsRaw === "{}") return null;
+    return truncate(pair.argsRaw, 60);
+  }
+};
+function getRenderer(name) {
+  return toolRenderers[name] ?? defaultRenderer;
+}
+function ResultLine({ text }) {
+  return /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-body-small text-on-surface-variant", children: text });
+}
+function ResultText({ text }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsx("pre", { className: "max-h-60 overflow-auto whitespace-pre-wrap px-3 py-2 font-code text-body-small text-on-surface-variant", children: text });
+}
+function CollapsiblePre({ text, maxLines = 20 }) {
+  const [expanded, setExpanded] = useState(false);
+  const lines = text.split("\n");
+  const needsCollapse = lines.length > maxLines;
+  const displayText = needsCollapse && !expanded ? lines.slice(0, maxLines).join("\n") + "\n..." : text;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("pre", { className: "max-h-80 overflow-auto whitespace-pre-wrap px-3 py-2 font-code text-body-small text-on-surface-variant", children: displayText }),
+    needsCollapse && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: clsx(
+          "flex h-8 w-full items-center justify-center gap-1 border-t border-outline-variant px-3 text-label-medium text-primary",
+          "transition-colors duration-200 ease-standard hover:bg-primary/8 active:bg-primary/10",
+          focusRing
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "expand_more",
+              size: 18,
+              className: clsx(
+                "transition-transform duration-200 ease-standard",
+                expanded && "rotate-180"
+              )
+            }
+          ),
+          expanded ? "Show less" : `Show all ${lines.length} lines`
+        ]
+      }
+    )
+  ] });
+}
+function ShellResultView({ pair }) {
+  const r = pair.result;
+  if (!r || typeof r.exit_code !== "number") {
+    return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 30 });
+  }
+  const exitCode = r.exit_code;
+  const stdout = typeof r.stdout === "string" ? r.stdout : "";
+  const stderr = typeof r.stderr === "string" ? r.stderr : "";
+  const hasStdout = stdout.trim().length > 0;
+  const hasStderr = stderr.trim().length > 0;
+  const isError = exitCode !== 0;
+  if (!hasStdout && !hasStderr && exitCode === 0) {
+    return /* @__PURE__ */ jsx(ResultLine, { text: "Completed with no output" });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    isError && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 border-b border-outline-variant px-3 py-1.5", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex h-6 items-center rounded-small bg-error px-2 font-code text-label-medium text-on-error", children: [
+      "exit ",
+      exitCode
+    ] }) }),
+    hasStdout && /* @__PURE__ */ jsx("div", { className: hasStderr ? "border-b border-outline-variant" : "", children: /* @__PURE__ */ jsx(CollapsiblePre, { text: stdout.replace(/\n$/, ""), maxLines: 30 }) }),
+    hasStderr && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 px-3 pt-2 pb-0.5", children: /* @__PURE__ */ jsx("span", { className: clsx("text-label-medium", isError ? "text-error" : "text-warning"), children: "stderr" }) }),
+      /* @__PURE__ */ jsx(
+        "pre",
+        {
+          className: clsx(
+            "max-h-40 overflow-auto whitespace-pre-wrap px-3 pb-2 font-code text-body-small",
+            isError ? "text-error" : "text-warning"
+          ),
+          children: stderr.replace(/\n$/, "")
+        }
+      )
+    ] })
+  ] });
+}
+var STATUS_ICONS = {
+  running: "pending",
+  completed: "check_circle",
+  error: "error"
+};
+var STATUS_COLORS = {
+  running: "text-primary",
+  completed: "text-success",
+  error: "text-error"
+};
+var STATUS_LABELS = {
+  running: "Running",
+  completed: "Completed",
+  error: "Error"
+};
+function toolIcon(name) {
+  if (name.startsWith("browser_")) return "language";
+  if (name.startsWith("file_") || name === "read" || name === "write" || name === "edit") {
+    return "description";
+  }
+  if (name === "shell" || name === "exec" || name === "bash") return "terminal";
+  if (name === "glob" || name === "grep" || name === "web_search") return "search";
+  if (name === "webfetch") return "language";
+  if (name === "set_status") return "schedule";
+  return "build";
+}
+function formatToolName(name) {
+  const overrides = {
+    webfetch: "Web Fetch",
+    todowrite: "Todo",
+    read_skill: "Read Skill",
+    web_search: "Web Search",
+    spacebot_docs: "Docs"
+  };
+  if (overrides[name]) return overrides[name];
+  const stripped = name.replace(/^browser_/, "").replace(/^file_/, "").replace(/^tab_/, "Tab ");
+  return stripped.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function toolCategory(name) {
+  if (name.startsWith("browser_")) return "Browser";
+  if (name.startsWith("file_")) return "File";
+  return null;
+}
+function ToolCall({ pair, defaultExpanded = false, className }) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const bodyId = useId();
+  const renderer = getRenderer(pair.name);
+  const summary = renderer.summary(pair);
+  const category = toolCategory(pair.name);
+  const displayName = formatToolName(pair.name);
+  const isError = pair.status === "error";
+  const args = expanded ? renderArgs(pair, renderer) : null;
+  const result = expanded ? renderResult(pair, renderer) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-status": pair.status,
+      className: clsx(
+        "m3-tool-call min-w-0 overflow-hidden rounded-medium border bg-surface-container-low text-on-surface",
+        isError ? "border-error" : "border-outline-variant",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            "aria-expanded": expanded,
+            "aria-controls": bodyId,
+            className: clsx(
+              "flex min-h-10 w-full items-center gap-2 rounded-medium px-3 py-2 text-left",
+              "transition-colors duration-200 ease-standard hover:bg-on-surface/8 active:bg-on-surface/10",
+              focusRing
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    "flex size-5 shrink-0 items-center justify-center",
+                    STATUS_COLORS[pair.status]
+                  ),
+                  children: pair.status === "running" ? /* @__PURE__ */ jsx(CircularIndicator, { size: 16, label: "Running" }) : /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: STATUS_ICONS[pair.status],
+                      size: 18,
+                      filled: true,
+                      label: STATUS_LABELS[pair.status]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(Icon, { name: toolIcon(pair.name), size: 18, className: "shrink-0 text-on-surface-variant" }),
+              category && /* @__PURE__ */ jsx("span", { className: "text-label-medium text-outline", children: category }),
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-label-large text-on-surface", children: displayName }),
+              summary && !expanded ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-body-small text-on-surface-variant", children: summary }) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              isError && /* @__PURE__ */ jsx(StatusChip, { tone: "error", className: "h-5 px-1.5 text-label-small", children: "error" }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "expand_more",
+                  size: 20,
+                  className: clsx(
+                    "shrink-0 text-on-surface-variant transition-transform duration-300 ease-emphasized",
+                    expanded && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded ? /* @__PURE__ */ jsx(motion.div, { id: bodyId, ...expandMotion, className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-outline-variant px-3 py-3", children: [
+          args,
+          result != null && result !== false ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "m3-tool-result overflow-hidden rounded-small",
+                isError ? "bg-error-container text-on-error-container [&_.text-on-surface-variant]:text-on-error-container [&_.text-outline]:text-on-error-container/80" : "bg-surface-container-highest text-on-surface-variant"
+              ),
+              children: result
+            }
+          ) : null
+        ] }) }, "body") : null })
+      ]
+    }
+  );
+}
+function renderArgs(pair, renderer) {
+  if (renderer.argsView) {
+    const custom = renderer.argsView(pair);
+    if (custom) return custom;
+  }
+  if (pair.args && Object.keys(pair.args).length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: Object.entries(pair.args).map(([key, value]) => /* @__PURE__ */ jsxs("p", { className: "font-code text-body-small", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-outline", children: [
+        key,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-on-surface-variant", children: formatArgValue(key, value) })
+    ] }, key)) }) });
+  }
+  if (pair.argsRaw && pair.argsRaw !== "{}" && pair.argsRaw.trim().length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-small bg-surface-container-highest px-3 py-2", children: /* @__PURE__ */ jsx("pre", { className: "max-h-40 overflow-auto font-code text-body-small text-on-surface-variant", children: pair.argsRaw }) });
+  }
+  return null;
+}
+function renderResult(pair, renderer) {
+  if (pair.status === "running") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-body-small text-on-surface-variant", children: [
+      /* @__PURE__ */ jsx(CircularIndicator, { size: 14, label: "Running" }),
+      "Running..."
+    ] });
+  }
+  if (renderer.resultView) {
+    const custom = renderer.resultView(pair);
+    if (custom !== void 0) return custom;
+  }
+  if (!pair.resultRaw) return null;
+  if (pair.result && Object.keys(pair.result).length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: Object.entries(pair.result).map(([key, value]) => /* @__PURE__ */ jsxs("p", { className: "font-code text-body-small", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-outline", children: [
+        key,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-on-surface-variant", children: typeof value === "string" ? truncate(value, 200) : JSON.stringify(value) })
+    ] }, key)) }) });
+  }
+  return /* @__PURE__ */ jsx(CollapsiblePre, { text: pair.resultRaw, maxLines: 20 });
+}
+function formatArgValue(key, value) {
+  if (key === "secret" && typeof value === "string") {
+    return "***";
+  }
+  if (typeof value === "string") {
+    return truncate(value, 100);
+  }
+  if (typeof value === "boolean" || typeof value === "number") {
+    return String(value);
+  }
+  return JSON.stringify(value);
+}
+function truncate(text, maxLen) {
+  if (text.length <= maxLen) return text;
+  return text.slice(0, maxLen) + "...";
+}
+var bodyClass = {
+  small: "text-body-small",
+  medium: "text-body-medium",
+  large: "text-body-large"
+};
+function m3Components(size) {
+  const body = bodyClass[size];
+  return {
+    h1: ({ node: _node, className, children, ...props }) => /* @__PURE__ */ jsx(
+      "h1",
+      {
+        className: clsx("mt-4 mb-2 text-headline-small text-on-surface first:mt-0", className),
+        ...props,
+        children
+      }
+    ),
+    h2: ({ node: _node, className, children, ...props }) => /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: clsx("mt-4 mb-2 text-title-large text-on-surface first:mt-0", className),
+        ...props,
+        children
+      }
+    ),
+    h3: ({ node: _node, className, children, ...props }) => /* @__PURE__ */ jsx(
+      "h3",
+      {
+        className: clsx("mt-3 mb-1.5 text-title-medium text-on-surface first:mt-0", className),
+        ...props,
+        children
+      }
+    ),
+    h4: ({ node: _node, className, children, ...props }) => /* @__PURE__ */ jsx(
+      "h4",
+      {
+        className: clsx("mt-3 mb-1 text-title-small text-on-surface first:mt-0", className),
+        ...props,
+        children
+      }
+    ),
+    h5: ({ node: _node, className, children, ...props }) => /* @__PURE__ */ jsx(
+      "h5",
+      {
+        className: clsx("mt-3 mb-1 text-title-small text-on-surface-variant first:mt-0", className),
+        ...props,
+        children
+      }
+    ),
+    h6: ({ node: _node, className, children, ...props }) => /* @__PURE__ */ jsx(
+      "h6",
+      {
+        className: clsx("mt-3 mb-1 text-label-large text-on-surface-variant first:mt-0", className),
+        ...props,
+        children
+      }
+    ),
+    p: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("p", { className: clsx("my-2 first:mt-0 last:mb-0", body, className), ...props }),
+    a: ({ node: _node, className, children, ...props }) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: clsx(
+          "text-primary underline underline-offset-2 hover:decoration-2",
+          "rounded-extra-small outline-none focus-visible:outline-3 focus-visible:outline-secondary focus-visible:outline-offset-2",
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    strong: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("strong", { className: clsx("font-semibold text-on-surface", className), ...props }),
+    ul: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: clsx("my-2 list-disc pl-6 marker:text-on-surface-variant", body, className),
+        ...props
+      }
+    ),
+    ol: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: clsx("my-2 list-decimal pl-6 marker:text-on-surface-variant", body, className),
+        ...props
+      }
+    ),
+    li: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("li", { className: clsx("my-1", className), ...props }),
+    blockquote: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
+      "blockquote",
+      {
+        className: clsx(
+          "my-3 border-l-4 border-outline-variant pl-4 text-on-surface-variant",
+          className
+        ),
+        ...props
+      }
+    ),
+    code: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: clsx(
+          "rounded-extra-small bg-surface-container-highest px-1 py-0.5 font-code text-[0.9em] text-on-surface",
+          className
+        ),
+        ...props
+      }
+    ),
+    pre: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: clsx(
+          "my-3 overflow-x-auto rounded-small bg-surface-container-highest p-3 font-code text-body-small text-on-surface",
+          "[&_code]:bg-transparent [&_code]:p-0 [&_code]:text-[length:inherit]",
+          className
+        ),
+        ...props
+      }
+    ),
+    hr: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("hr", { className: clsx("my-4 border-outline-variant", className), ...props }),
+    table: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("div", { className: "my-3 overflow-x-auto rounded-small border border-outline-variant", children: /* @__PURE__ */ jsx("table", { className: clsx("w-full border-collapse", body, className), ...props }) }),
+    thead: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("thead", { className: clsx("bg-surface-container", className), ...props }),
+    th: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        className: clsx(
+          "border-b border-outline-variant px-3 py-2 text-left text-title-small text-on-surface",
+          className
+        ),
+        ...props
+      }
+    ),
+    td: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: clsx("border-t border-outline-variant px-3 py-2 text-on-surface", className),
+        ...props
+      }
+    ),
+    img: ({ node: _node, className, alt, ...props }) => /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: clsx("my-2 max-w-full rounded-medium", className),
+        alt: alt ?? "",
+        ...props
+      }
+    ),
+    input: ({ node: _node, className, ...props }) => /* @__PURE__ */ jsx("input", { className: clsx("mr-2 accent-primary", className), ...props })
+  };
+}
+var Markdown = forwardRef(
+  ({ content, className, size = "medium", allowHtml = false }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx("markdown min-w-0 text-on-surface", bodyClass[size], className),
+        children: /* @__PURE__ */ jsx(
+          ReactMarkdown,
+          {
+            remarkPlugins: [remarkGfm],
+            rehypePlugins: allowHtml ? [rehypeRaw] : void 0,
+            components: m3Components(size),
+            children: content
+          }
+        )
+      }
+    );
+  }
+);
+Markdown.displayName = "Markdown";
+function MessageBubble({
+  content,
+  isUser,
+  isStreaming = false,
+  onCopy,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("group flex flex-col py-2", isUser ? "items-end" : "items-start", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              "min-w-0",
+              isUser ? "max-w-[80%] rounded-large rounded-br-extra-small bg-secondary-container px-4 py-2.5 text-body-large text-on-secondary-container" : "w-full max-w-full bg-transparent text-body-large text-on-surface"
+            ),
+            "aria-busy": isStreaming || void 0,
+            children: isUser ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap break-words", children: content }) : /* @__PURE__ */ jsx(Markdown, { content, size: "large", className: "break-words" })
+          }
+        ),
+        !isUser && onCopy ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100", children: /* @__PURE__ */ jsx(
+          CircleButton,
+          {
+            icon: "content_copy",
+            variant: "standard",
+            size: "sm",
+            onClick: () => onCopy(content),
+            "aria-label": isStreaming ? "Copy Streaming Message" : "Copy Message",
+            title: isStreaming ? "Copy streaming message" : "Copy message"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function stripExcessWhitespace(text) {
+  return text.replace(/ {3,}/g, "  ");
+}
+function statusTone(status) {
+  switch (status) {
+    case "running":
+      return "primary";
+    case "completed":
+      return "success";
+    case "failed":
+    case "error":
+    case "cancelled":
+      return "error";
+    default:
+      return "neutral";
+  }
+}
+function InlineWorkerCard({
+  title,
+  status,
+  toolCallCount,
+  liveStatus,
+  transcript,
+  isTranscriptLoading,
+  onCopyLogs,
+  onCancel,
+  className,
+  defaultExpanded = false
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const contentId = useId();
+  const items = useMemo(() => pairTranscriptSteps(transcript), [transcript]);
+  const isRunning = status === "running";
+  const isDone = status === "completed";
+  const tone = statusTone(status);
+  return /* @__PURE__ */ jsxs("div", { className: clsx("group flex min-w-0 flex-col items-start", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded-medium bg-surface-container text-on-surface", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setExpanded((v) => !v),
+          "aria-expanded": expanded,
+          "aria-controls": contentId,
+          className: clsx(
+            "flex w-full items-start gap-3 rounded-medium px-4 py-3 text-left transition-colors duration-200 ease-standard",
+            "hover:bg-on-surface/8 active:bg-on-surface/10",
+            focusRing
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center", children: isRunning ? /* @__PURE__ */ jsx(CircularIndicator, { size: 20, label: "Worker running" }) : isDone ? /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-success-container text-on-success-container", children: /* @__PURE__ */ jsx(Icon, { name: "check_circle", size: 18, filled: true }) }) : tone === "error" ? /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-error-container text-on-error-container", children: /* @__PURE__ */ jsx(Icon, { name: "error", size: 18, filled: true }) }) : /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-surface-container-highest text-on-surface-variant", children: /* @__PURE__ */ jsx(Icon, { name: "build", size: 18 }) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "line-clamp-2 min-w-0 flex-1 text-title-small text-on-surface", children: title }),
+                /* @__PURE__ */ jsx(StatusChip, { tone, children: status })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2 text-body-small text-on-surface-variant", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  toolCallCount,
+                  " tool calls"
+                ] }),
+                liveStatus ? /* @__PURE__ */ jsx("span", { className: "truncate text-outline", children: liveStatus }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "expand_more",
+                size: 20,
+                className: clsx(
+                  "mt-1.5 shrink-0 text-on-surface-variant transition-transform duration-300 ease-emphasized",
+                  expanded ? "rotate-180" : ""
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded ? /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          id: contentId,
+          ...expandMotion,
+          className: "overflow-hidden",
+          children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 border-t border-outline-variant px-4 py-3", children: isTranscriptLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-body-small text-on-surface-variant", children: [
+            /* @__PURE__ */ jsx(CircularIndicator, { size: 16, label: "Loading transcript" }),
+            "Loading worker transcript..."
+          ] }) : items.length > 0 ? items.map(
+            (item) => item.kind === "tool" ? /* @__PURE__ */ jsx(ToolCall, { pair: item.pair }, item.pair.id) : /* @__PURE__ */ jsx(
+              Markdown,
+              {
+                content: stripExcessWhitespace(item.text),
+                size: "small",
+                className: "text-on-surface-variant"
+              },
+              `text-${item.text}`
+            )
+          ) : /* @__PURE__ */ jsx("div", { className: "text-body-small text-on-surface-variant", children: "No tool calls yet." }) })
+        },
+        "transcript"
+      ) : null })
+    ] }),
+    (onCopyLogs || onCancel && isRunning) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex gap-1 opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100", children: [
+      onCopyLogs && /* @__PURE__ */ jsxs(Button, { variant: "text", size: "xs", onClick: onCopyLogs, title: "Copy logs", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "content_copy", size: 18 }),
+        "Copy"
+      ] }),
+      onCancel && isRunning && /* @__PURE__ */ jsxs(Button, { variant: "text", size: "xs", onClick: onCancel, title: "Cancel", children: [
+        /* @__PURE__ */ jsx(Icon, { name: "stop", size: 18 }),
+        "Cancel"
+      ] })
+    ] })
+  ] });
+}
+function InlineBranchCard({
+  description,
+  completedAt,
+  conclusion,
+  className,
+  defaultExpanded = false
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isRunning = !completedAt;
+  const contentId = useId();
+  const canExpand = !!conclusion;
+  return /* @__PURE__ */ jsx("div", { className: clsx("group flex min-w-0 flex-col items-start", className), children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded-medium bg-surface-container text-on-surface", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => canExpand && setExpanded((v) => !v),
+        "aria-expanded": canExpand ? expanded : void 0,
+        "aria-controls": canExpand ? contentId : void 0,
+        className: clsx(
+          "flex w-full items-start gap-3 rounded-medium px-4 py-3 text-left transition-colors duration-200 ease-standard",
+          canExpand && "hover:bg-on-surface/8 active:bg-on-surface/10",
+          focusRing
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center", children: isRunning ? /* @__PURE__ */ jsx(CircularIndicator, { size: 20, label: "Thinking" }) : /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-primary-container text-on-primary-container", children: /* @__PURE__ */ jsx(Icon, { name: "alt_route", size: 18 }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 self-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "line-clamp-2 min-w-0 flex-1 text-title-small text-on-surface", children: description }),
+            /* @__PURE__ */ jsx(StatusChip, { tone: isRunning ? "primary" : "success", children: isRunning ? "thinking" : "done" })
+          ] }) }),
+          canExpand && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "expand_more",
+              size: 20,
+              className: clsx(
+                "mt-1.5 shrink-0 text-on-surface-variant transition-transform duration-300 ease-emphasized",
+                expanded ? "rotate-180" : ""
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: expanded && conclusion ? /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        id: contentId,
+        ...expandMotion,
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsx("div", { className: "border-t border-outline-variant px-4 py-3", children: /* @__PURE__ */ jsx(Markdown, { content: conclusion, size: "small", className: "text-on-surface-variant" }) })
+      },
+      "conclusion"
+    ) : null })
+  ] }) });
+}
+function groupModelsByProvider(models, search = "") {
+  const q = search.trim().toLowerCase();
+  const filtered = q ? models.filter((m) => m.name.toLowerCase().includes(q) || m.provider.toLowerCase().includes(q)) : models;
+  return filtered.reduce(
+    (acc, model) => {
+      if (!acc[model.provider]) acc[model.provider] = [];
+      acc[model.provider].push(model);
+      return acc;
+    },
+    {}
+  );
+}
+function ModelOptionList({ grouped, value, onSelect, className }) {
+  const providers = Object.entries(grouped);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listbox",
+      "aria-label": "Models",
+      className: clsx("flex flex-col", className),
+      children: [
+        providers.map(([provider, providerModels], groupIndex) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "group",
+            "aria-label": provider,
+            className: clsx(groupIndex > 0 && "mt-1 border-t border-outline-variant pt-1"),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-title-small text-on-surface-variant", children: provider }),
+              providerModels.map((model) => {
+                const selected = model.id === value;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    onClick: () => onSelect(model.id),
+                    className: clsx(
+                      "flex min-h-12 w-full items-center gap-3 px-3 py-2 text-left",
+                      "transition-colors duration-200 ease-standard",
+                      selected ? "bg-secondary-container text-on-secondary-container" : "text-on-surface hover:bg-on-surface/8 active:bg-on-surface/10",
+                      focusRing,
+                      "focus-visible:outline-offset-[-3px]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("div", { className: "truncate text-label-large", children: model.name }),
+                        model.context_window || model.capabilities?.length ? /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1", children: [
+                          model.context_window ? /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              className: clsx(
+                                "text-body-small",
+                                selected ? "text-on-secondary-container" : "text-on-surface-variant"
+                              ),
+                              children: [
+                                model.context_window.toLocaleString(),
+                                " tokens"
+                              ]
+                            }
+                          ) : null,
+                          model.capabilities?.map((capability) => /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: clsx(
+                                "inline-flex h-5 items-center rounded-small border border-outline-variant px-1.5 text-label-small",
+                                selected ? "text-on-secondary-container" : "text-on-surface-variant"
+                              ),
+                              children: capability
+                            },
+                            capability
+                          ))
+                        ] }) : null
+                      ] }),
+                      selected && /* @__PURE__ */ jsx(Icon, { name: "check", size: 20, className: "shrink-0" })
+                    ]
+                  },
+                  model.id
+                );
+              })
+            ]
+          },
+          provider
+        )),
+        providers.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-center text-body-small text-on-surface-variant", children: "No models found" })
+      ]
+    }
+  );
+}
+function ModelSearchField({
+  value,
+  onChange,
+  placeholder
+}) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "px-2 pb-2", children: /* @__PURE__ */ jsxs("label", { className: "flex h-10 items-center gap-2 rounded-full bg-surface-container-high px-3 text-on-surface-variant focus-within:bg-surface-container-highest", children: [
+    /* @__PURE__ */ jsx(Icon, { name: "search", size: 20, className: "shrink-0" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        "aria-label": placeholder,
+        className: "min-w-0 flex-1 bg-transparent text-body-large text-on-surface outline-none placeholder:text-on-surface-variant"
+      }
+    )
+  ] }) });
+}
+var ModelSelector = forwardRef(
+  ({
+    models,
+    value,
+    onChange,
+    placeholder = "Select model...",
+    searchPlaceholder = "Search models...",
+    variant,
+    size,
+    popover: externalPopover,
+    className,
+    disabled
+  }, ref) => {
+    const internalPopover = usePopover();
+    const popover = externalPopover ?? internalPopover;
+    const [search, setSearch] = useState("");
+    const selectedModel = models.find((m) => m.id === value);
+    const grouped = useMemo(() => groupModelsByProvider(models, search), [models, search]);
+    return /* @__PURE__ */ jsxs(
+      Popover.Root,
+      {
+        open: popover.open,
+        onOpenChange: (open) => {
+          popover.setOpen(open);
+          if (!open) setSearch("");
+        },
+        children: [
+          /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            SelectPill,
+            {
+              ref,
+              variant,
+              size,
+              disabled,
+              "aria-haspopup": "listbox",
+              className: clsx("w-full", className),
+              children: selectedModel?.name ?? placeholder
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            Popover.Content,
+            {
+              align: "end",
+              sideOffset: 8,
+              style: { width: 280 },
+              className: "overflow-hidden rounded-extra-small! py-2",
+              children: [
+                /* @__PURE__ */ jsx(ModelSearchField, { value: search, onChange: setSearch, placeholder: searchPlaceholder }),
+                /* @__PURE__ */ jsx("div", { className: "max-h-[320px] overflow-y-auto", children: /* @__PURE__ */ jsx(
+                  ModelOptionList,
+                  {
+                    grouped,
+                    value,
+                    onSelect: (id) => {
+                      onChange(id);
+                      popover.setOpen(false);
+                      setSearch("");
+                    }
+                  }
+                ) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ModelSelector.displayName = "ModelSelector";
+var iconButtonEnter = {
+  initial: { scale: 0.6, opacity: 0 },
+  animate: {
+    scale: 1,
+    opacity: 1,
+    transition: { duration: m3Durations.short4, ease: m3Easings.emphasizedDecelerate }
+  },
+  exit: {
+    scale: 0.6,
+    opacity: 0,
+    transition: { duration: m3Durations.short3, ease: m3Easings.emphasizedAccelerate }
+  }
+};
+function ChatComposer({
+  draft,
+  onDraftChange,
+  onSend,
+  placeholder = "Ask something...",
+  heading,
+  isSending = false,
+  projectSelector,
+  modelSelector,
+  onOpenVoice,
+  toolbarExtra,
+  onStop,
+  className
+}) {
+  const canSend = !isSending && draft.trim().length > 0;
+  const showStop = isSending && !!onStop;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    heading && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2 px-1 text-title-small text-on-surface-variant", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "auto_awesome", size: 18, filled: true, className: "text-primary" }),
+      heading
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "m3-chat-composer rounded-extra-large bg-surface-container-high px-4 pt-3 pb-2 text-on-surface",
+          "transition-colors duration-200 ease-standard focus-within:bg-surface-container-highest",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              value: draft,
+              onChange: (event) => onDraftChange(event.target.value),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !event.shiftKey) {
+                  event.preventDefault();
+                  onSend();
+                }
+              },
+              placeholder,
+              "aria-label": placeholder,
+              rows: 2,
+              className: "block w-full resize-none border-0 bg-transparent px-1 text-body-large text-on-surface caret-primary outline-none placeholder:text-on-surface-variant focus:outline-none focus:ring-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between gap-2", children: [
+            projectSelector ? /* @__PURE__ */ jsx("div", { className: "w-[210px]", children: /* @__PURE__ */ jsxs(
+              Popover.Root,
+              {
+                open: projectSelector.popover.open,
+                onOpenChange: projectSelector.popover.setOpen,
+                children: [
+                  /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(SelectPill, { className: "w-full", "aria-haspopup": "listbox", children: projectSelector.value }) }),
+                  /* @__PURE__ */ jsx(
+                    Popover.Content,
+                    {
+                      align: "start",
+                      sideOffset: 8,
+                      className: "min-w-[210px] overflow-hidden rounded-extra-small! py-2",
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          role: "listbox",
+                          "aria-label": "Projects",
+                          children: projectSelector.options.map((option) => {
+                            const selected = option === projectSelector.value;
+                            return /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                role: "option",
+                                "aria-selected": selected,
+                                onClick: () => {
+                                  projectSelector.onChange(option);
+                                  projectSelector.popover.setOpen(false);
+                                },
+                                className: clsx(
+                                  "flex h-12 w-full items-center gap-3 px-3 text-left text-label-large",
+                                  "transition-colors duration-200 ease-standard",
+                                  selected ? "bg-secondary-container text-on-secondary-container" : "text-on-surface hover:bg-on-surface/8",
+                                  focusRing,
+                                  "focus-visible:outline-offset-[-3px]"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option }),
+                                  selected && /* @__PURE__ */ jsx(Icon, { name: "check", size: 20 })
+                                ]
+                              },
+                              option
+                            );
+                          })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }) : /* @__PURE__ */ jsx("div", {}),
+            /* @__PURE__ */ jsxs(motion.div, { layout: true, className: "flex items-center gap-1", children: [
+              modelSelector && /* @__PURE__ */ jsx("div", { className: "w-[180px]", children: /* @__PURE__ */ jsx(
+                ModelSelector,
+                {
+                  models: modelSelector.options,
+                  value: modelSelector.value,
+                  onChange: modelSelector.onChange,
+                  size: "md"
+                }
+              ) }),
+              toolbarExtra,
+              onOpenVoice && /* @__PURE__ */ jsx(
+                CircleButton,
+                {
+                  icon: "mic",
+                  variant: "standard",
+                  onClick: onOpenVoice,
+                  disabled: isSending,
+                  "aria-label": "Open Voice Input"
+                }
+              ),
+              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: showStop ? /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  type: "button",
+                  ...iconButtonEnter,
+                  onClick: onStop,
+                  "aria-label": "Stop",
+                  className: clsx(
+                    "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary",
+                    "transition-colors duration-200 ease-standard hover:bg-primary/92 active:bg-primary/90",
+                    focusRing
+                  ),
+                  children: /* @__PURE__ */ jsx(Icon, { name: "stop", size: 24, filled: true })
+                },
+                "stop"
+              ) : canSend ? /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  type: "button",
+                  ...iconButtonEnter,
+                  onClick: onSend,
+                  "aria-label": "Send",
+                  className: clsx(
+                    "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary",
+                    "transition-colors duration-200 ease-standard hover:bg-primary/92 active:bg-primary/90",
+                    focusRing
+                  ),
+                  children: /* @__PURE__ */ jsx(Icon, { name: "arrow_upward", size: 24 })
+                },
+                "send"
+              ) : null })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+var config = {
+  done: { icon: "check_circle", filled: true, color: "text-success" },
+  in_progress: { icon: "clock_loader_40", filled: true, color: "text-primary" },
+  ready: { icon: "radio_button_checked", filled: false, color: "text-primary" },
+  pending_approval: { icon: "schedule", filled: false, color: "text-warning" },
+  backlog: { icon: "radio_button_unchecked", filled: false, color: "text-outline" }
+};
+function TaskStatusIcon({ status, size = 16, className, label }) {
+  const { icon, filled, color } = config[status];
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: icon,
+      size,
+      filled,
+      label: label ?? TASK_STATUS_LABEL[status],
+      "data-status": status,
+      className: clsx(color, className)
+    }
+  );
+}
+var config2 = {
+  critical: { icon: "priority_high", filled: true, color: "text-error" },
+  high: { icon: "keyboard_double_arrow_up", filled: false, color: "text-warning" },
+  medium: { icon: "drag_handle", filled: false, color: "text-primary" },
+  low: { icon: "keyboard_arrow_down", filled: false, color: "text-outline" }
+};
+function TaskPriorityIcon({ priority, size = 14, className, label }) {
+  const { icon, filled, color } = config2[priority];
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: icon,
+      size,
+      filled,
+      weight: 600,
+      label: label ?? `${TASK_PRIORITY_LABEL[priority]} priority`,
+      "data-priority": priority,
+      className: clsx(color, className)
+    }
+  );
+}
+var TASK_ROW_GRID = "20px 18px 72px 1fr 56px 96px 40px";
+var TASK_ROW_HEIGHT = 48;
+function TaskRow({
+  task,
+  onClick,
+  isActive,
+  resolveAgentName,
+  onStatusChange,
+  onDelete,
+  className
+}) {
+  const completedSubtasks = task.subtasks.filter((s) => s.completed).length;
+  const assigneeName = resolveAgentName?.(task.assigned_agent_id) ?? task.assigned_agent_id;
+  const hasActions = onStatusChange || onDelete;
+  const isRowInteractive = typeof onClick === "function";
+  const handleRowKeyDown = (e) => {
+    if (e.repeat) return;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onClick?.(task);
+    }
+  };
+  const handleRowKeyUp = (e) => {
+    if (e.repeat) return;
+    if (e.key === " ") {
+      e.preventDefault();
+      onClick?.(task);
+    }
+  };
+  const rowClassName = clsx(
+    "task-row group grid w-full items-center border-b border-outline-variant text-left",
+    "transition-colors duration-200 ease-standard",
+    focusRing,
+    "focus-visible:outline-offset-[-3px]",
+    isActive ? "bg-secondary-container text-on-secondary-container" : "bg-transparent text-on-surface hover:bg-on-surface/8",
+    isRowInteractive && !isActive && "active:bg-on-surface/10",
+    className
+  );
+  const rowStyle = {
+    gridTemplateColumns: TASK_ROW_GRID,
+    minHeight: TASK_ROW_HEIGHT,
+    paddingLeft: 16,
+    paddingRight: 8,
+    gap: 12
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TaskStatusIcon, { status: task.status, size: 20 }),
+    /* @__PURE__ */ jsx(TaskPriorityIcon, { priority: task.priority, size: 18 }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: clsx(
+          "truncate font-code text-body-small",
+          isActive ? "text-on-secondary-container" : "text-on-surface-variant"
+        ),
+        children: [
+          "SPC-",
+          task.task_number
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-body-large", children: task.title }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(
+          "text-right text-body-small",
+          isActive ? "text-on-secondary-container" : "text-on-surface-variant"
+        ),
+        children: task.subtasks.length > 0 ? `${completedSubtasks}/${task.subtasks.length}` : ""
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(
+          "truncate text-right text-body-small",
+          isActive ? "text-on-secondary-container" : "text-on-surface-variant"
+        ),
+        children: assigneeName
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: hasActions ? /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Task Actions",
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+          },
+          className: clsx(
+            "flex size-8 items-center justify-center rounded-full text-on-surface-variant",
+            "opacity-0 transition-[opacity,background-color] duration-200 ease-standard",
+            "hover:bg-on-surface/8 active:bg-on-surface/10",
+            "group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 data-popup-open:opacity-100",
+            focusRing
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { name: "more_vert", size: 20 })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", sideOffset: 4, children: [
+        onStatusChange && TASK_STATUS_ORDER.filter((s) => s !== task.status).map((s) => /* @__PURE__ */ jsxs(
+          DropdownMenu.Item,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onStatusChange(task, s);
+            },
+            children: [
+              /* @__PURE__ */ jsx(TaskStatusIcon, { status: s, size: 20, label: "" }),
+              /* @__PURE__ */ jsx("span", { children: TASK_STATUS_LABEL[s] })
+            ]
+          },
+          s
+        )),
+        onStatusChange && onDelete && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+        onDelete && /* @__PURE__ */ jsxs(
+          DropdownMenu.Item,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete(task);
+            },
+            className: "text-error",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "delete", size: 20 }),
+              /* @__PURE__ */ jsx("span", { children: "Delete" })
+            ]
+          }
+        )
+      ] })
+    ] }) : null })
+  ] });
+  if (!isRowInteractive) {
+    return /* @__PURE__ */ jsx("div", { "aria-current": isActive ? "true" : void 0, className: rowClassName, style: rowStyle, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-current": isActive ? "true" : void 0,
+      onClick: () => onClick(task),
+      onKeyDown: handleRowKeyDown,
+      onKeyUp: handleRowKeyUp,
+      className: rowClassName,
+      style: rowStyle,
+      children: content
+    }
+  );
+}
+var GRID_STYLE = {
+  gridTemplateColumns: TASK_ROW_GRID,
+  paddingLeft: 16,
+  paddingRight: 8,
+  gap: 12
+};
+function TaskList({
+  tasks,
+  groups = TASK_STATUS_ORDER,
+  collapsedGroups,
+  onToggleGroup,
+  activeTaskId,
+  onTaskClick,
+  onStatusChange,
+  onDelete,
+  resolveAgentName,
+  className
+}) {
+  const grouped = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const status of groups) map.set(status, []);
+    for (const task of tasks) {
+      const bucket = map.get(task.status);
+      if (bucket) bucket.push(task);
+    }
+    return map;
+  }, [tasks, groups]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col bg-surface text-on-surface", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid items-center border-b border-outline-variant text-label-medium text-on-surface-variant",
+        style: { ...GRID_STYLE, height: 32 },
+        children: [
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx("span", { children: "ID" }),
+          /* @__PURE__ */ jsx("span", { children: "Title" }),
+          /* @__PURE__ */ jsx("span", { className: "text-right", children: "Subs" }),
+          /* @__PURE__ */ jsx("span", { className: "text-right", children: "Assignee" }),
+          /* @__PURE__ */ jsx("span", {})
+        ]
+      }
+    ),
+    groups.map((status) => {
+      const items = grouped.get(status) ?? [];
+      const isOpen = !collapsedGroups?.has(status);
+      return /* @__PURE__ */ jsxs(Collapsible, { open: isOpen, onOpenChange: () => onToggleGroup?.(status), children: [
+        /* @__PURE__ */ jsxs(
+          CollapsibleTrigger,
+          {
+            className: clsx(
+              "grid w-full items-center rounded-none border-b border-outline-variant bg-surface-container-low",
+              "text-title-small text-on-surface transition-colors duration-200 ease-standard",
+              "hover:bg-on-surface/8 active:bg-on-surface/10",
+              focusRing,
+              "focus-visible:outline-offset-[-3px]"
+            ),
+            style: { ...GRID_STYLE, height: 40 },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center text-on-surface-variant", children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "chevron_right",
+                  size: 20,
+                  className: clsx(
+                    "shrink-0 transition-transform duration-300 ease-emphasized",
+                    isOpen && "rotate-90"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(TaskStatusIcon, { status, size: 18, label: "" }) }),
+              /* @__PURE__ */ jsxs("span", { className: "col-span-5 flex items-center gap-1.5 text-left", children: [
+                TASK_STATUS_LABEL[status],
+                /* @__PURE__ */ jsxs("span", { className: "text-body-small text-on-surface-variant", children: [
+                  "(",
+                  items.length,
+                  ")"
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: items.length > 0 ? items.map((task) => /* @__PURE__ */ jsx(
+          TaskRow,
+          {
+            task,
+            isActive: task.id === activeTaskId,
+            onClick: onTaskClick,
+            onStatusChange,
+            onDelete,
+            resolveAgentName
+          },
+          task.id
+        )) : /* @__PURE__ */ jsx("div", { className: "border-b border-outline-variant px-4 py-3 text-body-small text-on-surface-variant", children: "No tasks" }) })
+      ] }, status);
+    })
+  ] });
+}
+function formatDate(iso) {
+  return new Date(iso).toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function Property({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-label-medium text-on-surface-variant", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "flex min-h-8 items-center gap-1.5 text-body-medium text-on-surface", children })
+  ] });
+}
+function TaskDetail({
+  task,
+  resolveAgentName,
+  onStatusChange,
+  onSubtaskToggle,
+  onDelete,
+  onClose,
+  className
+}) {
+  const ownerName = resolveAgentName?.(task.owner_agent_id) ?? task.owner_agent_id;
+  const assigneeName = resolveAgentName?.(task.assigned_agent_id) ?? task.assigned_agent_id;
+  const completedCount = task.subtasks.filter((s) => s.completed).length;
+  return /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col gap-6 bg-surface p-6 text-on-surface", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(TaskStatusIcon, { status: task.status, size: 20 }),
+          /* @__PURE__ */ jsx(TaskPriorityIcon, { priority: task.priority, size: 18 }),
+          /* @__PURE__ */ jsxs("span", { className: "font-code text-body-small text-on-surface-variant", children: [
+            "SPC-",
+            task.task_number
+          ] })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(CircleButton, { icon: "close", variant: "standard", onClick: onClose, "aria-label": "Close" })
+      ] }),
+      /* @__PURE__ */ jsx("h2", { className: "text-headline-small text-on-surface", children: task.title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-6 gap-y-4 medium:grid-cols-4", children: [
+      /* @__PURE__ */ jsx(Property, { label: "Status", children: onStatusChange ? /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: task.status,
+          size: "md",
+          onChange: (value) => onStatusChange(task, value),
+          children: TASK_STATUS_ORDER.map((s) => /* @__PURE__ */ jsx(SelectOption, { value: s, children: TASK_STATUS_LABEL[s] }, s))
+        }
+      ) : TASK_STATUS_LABEL[task.status] }),
+      /* @__PURE__ */ jsxs(Property, { label: "Priority", children: [
+        /* @__PURE__ */ jsx(TaskPriorityIcon, { priority: task.priority, size: 18, label: "" }),
+        TASK_PRIORITY_LABEL[task.priority]
+      ] }),
+      /* @__PURE__ */ jsx(Property, { label: "Owner", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: ownerName }) }),
+      /* @__PURE__ */ jsx(Property, { label: "Assigned", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: assigneeName }) })
+    ] }),
+    task.subtasks.length > 0 && /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-title-small text-on-surface", children: "Subtasks" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-body-small text-on-surface-variant", children: [
+          completedCount,
+          "/",
+          task.subtasks.length
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "m-0 list-none overflow-hidden rounded-medium border border-outline-variant p-0", children: task.subtasks.map((subtask, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": subtask.completed,
+          onClick: () => onSubtaskToggle?.(task, i, !subtask.completed),
+          className: clsx(
+            "flex min-h-12 w-full items-center gap-4 px-4 py-2 text-left text-body-large",
+            "transition-colors duration-200 ease-standard hover:bg-on-surface/8 active:bg-on-surface/10",
+            focusRing,
+            "focus-visible:outline-offset-[-3px]",
+            i > 0 && "border-t border-outline-variant"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: clsx(
+                  "flex size-[18px] shrink-0 items-center justify-center rounded-[2px] transition-colors duration-200 ease-standard",
+                  subtask.completed ? "bg-primary text-on-primary" : "border-2 border-on-surface-variant"
+                ),
+                children: subtask.completed && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, weight: 700 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: clsx(
+                  "min-w-0 flex-1",
+                  subtask.completed ? "text-on-surface-variant line-through" : "text-on-surface"
+                ),
+                children: subtask.title
+              }
+            )
+          ]
+        }
+      ) }, subtask.title)) })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-title-small text-on-surface", children: "Description" }),
+      task.description ? /* @__PURE__ */ jsx(Markdown, { content: task.description, size: "medium" }) : /* @__PURE__ */ jsx("p", { className: "text-body-medium text-on-surface-variant", children: "No description" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-body-small text-on-surface-variant", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Created ",
+        formatDate(task.created_at)
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Updated ",
+        formatDate(task.updated_at)
+      ] }),
+      task.completed_at && /* @__PURE__ */ jsxs("span", { children: [
+        "Completed ",
+        formatDate(task.completed_at)
+      ] })
+    ] }),
+    (onStatusChange || onDelete) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      onStatusChange && task.status === "pending_approval" && /* @__PURE__ */ jsx(Button, { variant: "filled", size: "lg", onClick: () => onStatusChange(task, "ready"), children: "Approve" }),
+      onStatusChange && task.status === "backlog" && /* @__PURE__ */ jsx(Button, { variant: "filled", size: "lg", onClick: () => onStatusChange(task, "in_progress"), children: "Execute" }),
+      onStatusChange && (task.status === "in_progress" || task.status === "ready") && /* @__PURE__ */ jsx(Button, { variant: "filled", size: "lg", onClick: () => onStatusChange(task, "done"), children: "Mark Done" }),
+      onStatusChange && task.status === "done" && /* @__PURE__ */ jsx(Button, { variant: "text", size: "lg", onClick: () => onStatusChange(task, "ready"), children: "Reopen" }),
+      onDelete && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onDelete(task),
+          className: clsx(
+            "inline-flex h-10 items-center justify-center gap-2 rounded-full px-3 text-label-large text-error",
+            "transition-colors duration-200 ease-standard hover:bg-error/8 active:bg-error/10",
+            focusRing
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "delete", size: 18 }),
+            "Delete"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var PRIORITIES = ["critical", "high", "medium", "low"];
+function TaskCreateForm({
+  onSubmit,
+  onCancel,
+  defaultPriority = "medium",
+  isSubmitting,
+  className
+}) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [priority, setPriority] = useState(defaultPriority);
+  const titleInputId = useId();
+  const descriptionInputId = useId();
+  const titleInputRef = useRef(null);
+  useEffect(() => {
+    titleInputRef.current?.focus();
+  }, []);
+  const canSubmit = title.trim().length > 0 && !isSubmitting;
+  const handleSubmit = useCallback(() => {
+    if (!canSubmit) return;
+    onSubmit({ title: title.trim(), description: description.trim(), priority });
+    setTitle("");
+    setDescription("");
+    setPriority(defaultPriority);
+  }, [canSubmit, onSubmit, title, description, priority, defaultPriority]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex flex-col gap-3 rounded-medium bg-surface-container-low p-4 text-on-surface",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: titleInputId, className: "sr-only", children: "Task Title" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: titleInputRef,
+              id: titleInputId,
+              type: "text",
+              size: "lg",
+              value: title,
+              onChange: (e) => setTitle(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleSubmit();
+                if (e.key === "Escape") onCancel?.();
+              },
+              placeholder: "Task title...",
+              className: "min-w-0 flex-1",
+              disabled: isSubmitting
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: priority,
+              size: "lg",
+              onChange: (value) => setPriority(value),
+              disabled: isSubmitting,
+              children: PRIORITIES.map((p) => /* @__PURE__ */ jsx(SelectOption, { value: p, children: TASK_PRIORITY_LABEL[p] }, p))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("label", { htmlFor: descriptionInputId, className: "sr-only", children: "Description" }),
+        /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            id: descriptionInputId,
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: "Description (optional)",
+            rows: 2,
+            className: "w-full resize-none",
+            disabled: isSubmitting
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+          onCancel && /* @__PURE__ */ jsx(Button, { variant: "text", size: "lg", onClick: onCancel, disabled: isSubmitting, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { variant: "filled", size: "lg", disabled: !canSubmit, onClick: handleSubmit, children: "Create" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { ChatComposer, InlineBranchCard, InlineWorkerCard, Markdown, MessageBubble, ModelOptionList, ModelSelector, TASK_PRIORITY_LABEL, TASK_STATUS_LABEL, TASK_STATUS_ORDER, TaskCreateForm, TaskDetail, TaskList, TaskPriorityIcon, TaskRow, TaskStatusIcon, ToolCall, groupModelsByProvider, isErrorResult, pairTranscriptSteps, tryParseJson };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map