@cookielab.io/klovi 0.12.0 → 0.13.0

package/dist/public/{index-73xxsc87.js → index-42y46a3t.js}

@@ -40924,11 +40924,44 @@ var init_all = __esm(() => {
 var favicon_default = "./favicon-d3ne5n0v.svg";
 
 // src/frontend/App.tsx
-var import_react22 = __toESM(require_react(), 1);
+var import_react16 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
-// src/frontend/components/dashboard/DashboardStats.tsx
+// src/frontend/hooks/useFetch.ts
 var import_react = __toESM(require_react(), 1);
+function useFetch(url, deps) {
+  const [data, setData] = import_react.useState(null);
+  const [loading, setLoading] = import_react.useState(true);
+  const [error, setError] = import_react.useState(null);
+  const [retryCount, setRetryCount] = import_react.useState(0);
+  const retry = import_react.useCallback(() => setRetryCount((c) => c + 1), []);
+  import_react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetch(url).then((r) => {
+      if (!r.ok)
+        throw new Error(`HTTP ${r.status}`);
+      return r.json();
+    }).then((result) => {
+      if (!cancelled) {
+        setData(result);
+        setLoading(false);
+      }
+    }).catch((e) => {
+      if (!cancelled) {
+        setError(e instanceof Error ? e.message : String(e));
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url, retryCount, ...deps]);
+  return { data, loading, error, retry };
+}
+
+// src/frontend/components/dashboard/DashboardStats.tsx
 var jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
 var fmt = new Intl.NumberFormat;
 function compactNumber(n) {
@@ -40944,12 +40977,11 @@ function simplifyModelName(model) {
   const match = model.match(/claude-(\w+-[\d-]+?)(?:-\d{8})?$/);
   return match?.[1] ?? model;
 }
+function totalTokens(usage) {
+  return usage.inputTokens + usage.outputTokens + usage.cacheReadTokens + usage.cacheCreationTokens;
+}
 function DashboardStats() {
-  const [stats, setStats] = import_react.useState(null);
-  const [loading, setLoading] = import_react.useState(true);
-  import_react.useEffect(() => {
-    fetch("/api/stats").then((r) => r.json()).then((data) => setStats(data.stats)).catch(() => {}).finally(() => setLoading(false));
-  }, []);
+  const { data, loading, error, retry } = useFetch("/api/stats", []);
   if (loading) {
     return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
       className: "dashboard-stats",
@@ -40961,9 +40993,27 @@ function DashboardStats() {
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+      className: "fetch-error",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: error
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const stats = data?.stats;
   if (!stats)
     return null;
-  const sortedModels = Object.entries(stats.models).sort((a, b) => b[1] - a[1]);
+  const sortedModels = Object.entries(stats.models).sort((a, b) => totalTokens(b[1]) - totalTokens(a[1]));
   return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
     className: "dashboard-stats",
     children: [
@@ -40996,6 +41046,50 @@ function DashboardStats() {
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            className: "stat-card",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "stat-value",
+                children: fmt.format(stats.messages)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "stat-label",
+                children: "Messages"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+        className: "stats-row stats-row-3",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            className: "stat-card",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "stat-value",
+                children: fmt.format(stats.todaySessions)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "stat-label",
+                children: "Today Sessions"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            className: "stat-card",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "stat-value",
+                children: fmt.format(stats.thisWeekSessions)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "stat-label",
+                children: "This Week"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
             className: "stat-card",
             children: [
@@ -41086,7 +41180,7 @@ function DashboardStats() {
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsx_dev_runtime.jsxDEV("ul", {
             className: "model-list",
-            children: sortedModels.map(([model, count]) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("li", {
+            children: sortedModels.map(([model, usage]) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("li", {
               children: [
                 /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
                   className: "model-name",
@@ -41095,8 +41189,8 @@ function DashboardStats() {
                 /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
                   className: "model-count",
                   children: [
-                    fmt.format(count),
-                    " turns"
+                    compactNumber(totalTokens(usage)),
+                    " tokens"
                   ]
                 }, undefined, true, undefined, this)
               ]
@@ -41255,13 +41349,9 @@ function Header({
 }
 
 // src/frontend/components/layout/Sidebar.tsx
-var import_react3 = __toESM(require_react(), 1);
 var jsx_dev_runtime3 = __toESM(require_jsx_dev_runtime(), 1);
 function Sidebar({ children, onSearchClick }) {
-  const [versionInfo, setVersionInfo] = import_react3.useState(null);
-  import_react3.useEffect(() => {
-    fetch("/api/version").then((res) => res.json()).then((data) => setVersionInfo(data)).catch(() => {});
-  }, []);
+  const { data: versionInfo } = useFetch("/api/version", []);
   return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
     className: "sidebar",
     children: [
@@ -41332,9 +41422,6 @@ function Layout({ sidebar, hideSidebar, onSearchClick, children }) {
   }, undefined, true, undefined, this);
 }
 
-// src/frontend/components/message/SubAgentView.tsx
-var import_react9 = __toESM(require_react(), 1);
-
 // src/frontend/utils/time.ts
 function formatTimestamp(iso) {
   const date = new Date(iso);
@@ -41397,8 +41484,79 @@ function formatTime(iso) {
   });
 }
 
+// src/frontend/components/ui/ErrorBoundary.tsx
+var import_react3 = __toESM(require_react(), 1);
+var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
+
+class ErrorBoundary extends import_react3.Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  retry = () => {
+    this.setState({ error: null });
+  };
+  render() {
+    const { error } = this.state;
+    if (!error)
+      return this.props.children;
+    if (this.props.inline) {
+      return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+        className: "error-card",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+            className: "error-card-header",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+                className: "error-card-title",
+                children: "Failed to render"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("button", {
+                type: "button",
+                className: "btn btn-sm",
+                onClick: this.retry,
+                children: "Retry"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("details", {
+            className: "error-card-details",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("summary", {
+                children: "Error details"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("pre", {
+                children: error.stack || error.message
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    }
+    return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+      className: "error-view",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+          className: "error-view-title",
+          children: "Something went wrong"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+          className: "error-view-message",
+          children: error.message
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-primary",
+          onClick: this.retry,
+          children: "Try Again"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+}
+
 // src/frontend/components/ui/MarkdownRenderer.tsx
-var import_react7 = __toESM(require_react(), 1);
+var import_react8 = __toESM(require_react(), 1);
 
 // node_modules/devlop/lib/development.js
 var codesWarned = new Set;
@@ -41728,12 +41886,12 @@ function productionCreate(_, jsx, jsxs) {
     return key ? fn(type, props, key) : fn(type, props);
   }
 }
-function developmentCreate(filePath, jsxDEV5) {
+function developmentCreate(filePath, jsxDEV6) {
   return create2;
   function create2(node, type, props, key) {
     const isStaticChildren = Array.isArray(props.children);
     const point3 = pointStart(node);
-    return jsxDEV5(type, props, key, isStaticChildren, {
+    return jsxDEV6(type, props, key, isStaticChildren, {
       columnNumber: point3 ? point3.column - 1 : undefined,
       fileName: filePath,
       lineNumber: point3 ? point3.line : undefined
@@ -53101,210 +53259,1010 @@ var one_dark_default = {
     stroke: "hsl(220, 14%, 71%)"
   }
 };
-// src/frontend/components/ui/CodeBlock.tsx
-var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
-function CodeBlock({ language, children }) {
-  const lang = language || "text";
-  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
-    className: "code-block-wrapper",
-    children: [
-      language && /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
-        className: "code-block-header",
-        children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
-          children: language
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
-        className: "code-block-content",
-        children: /* @__PURE__ */ jsx_dev_runtime5.jsxDEV(prism_default2, {
-          language: lang,
-          style: one_dark_default,
-          customStyle: {
-            margin: 0,
-            fontSize: "0.85em",
-            lineHeight: 1.5
-          },
-          showLineNumbers: children.split(`
-`).length > 3,
-          children: children.replace(/\n$/, "")
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/frontend/components/ui/MarkdownRenderer.tsx
-var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
-var FILE_REF_RE = /@([\w./-]+\.\w+)/g;
-function renderTextWithFileRefs(text7) {
-  const parts = [];
-  let last = 0;
-  FILE_REF_RE.lastIndex = 0;
-  let match = FILE_REF_RE.exec(text7);
-  while (match !== null) {
-    if (match.index > last) {
-      parts.push(text7.slice(last, match.index));
-    }
-    parts.push(/* @__PURE__ */ jsx_dev_runtime6.jsxDEV("code", {
-      className: "file-ref",
-      children: [
-        "@",
-        match[1]
-      ]
-    }, match.index, true, undefined, this));
-    last = FILE_REF_RE.lastIndex;
-    match = FILE_REF_RE.exec(text7);
-  }
-  if (parts.length === 0)
-    return text7;
-  if (last < text7.length)
-    parts.push(text7.slice(last));
-  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(jsx_dev_runtime6.Fragment, {
-    children: parts
-  }, undefined, false, undefined, this);
-}
-function MarkdownRenderer({ content: content3 }) {
-  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
-    className: "markdown-content",
-    children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(Markdown, {
-      remarkPlugins: [remarkGfm],
-      components: {
-        p({ children }) {
-          return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("p", {
-            children: import_react7.default.Children.map(children, (child) => typeof child === "string" ? renderTextWithFileRefs(child) : child)
-          }, undefined, false, undefined, this);
-        },
-        code({ className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || "");
-          const text7 = String(children).replace(/\n$/, "");
-          if (!match && !text7.includes(`
-`)) {
-            return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("code", {
-              className,
-              ...props,
-              children
-            }, undefined, false, undefined, this);
-          }
-          return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(CodeBlock, {
-            language: match?.[1],
-            children: text7
-          }, undefined, false, undefined, this);
-        },
-        a({ href, children, ...props }) {
-          return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("a", {
-            href,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            ...props,
-            children
-          }, undefined, false, undefined, this);
-        }
-      },
-      children: content3
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-
-// src/shared/content-blocks.ts
-function groupContentBlocks(blocks) {
-  const groups = [];
-  let nonTextGroup = [];
-  for (const block of blocks) {
-    if (block.type === "text") {
-      if (nonTextGroup.length > 0) {
-        groups.push(nonTextGroup);
-        nonTextGroup = [];
-      }
-      groups.push([block]);
-    } else {
-      nonTextGroup.push(block);
-    }
-  }
-  if (nonTextGroup.length > 0) {
-    groups.push(nonTextGroup);
-  }
-  return groups;
-}
-
-// src/frontend/utils/model.ts
-function shortModel(model) {
-  const match = model.match(/claude-(opus|sonnet|haiku)-(\d+)(?:-(\d{1,2}))?(?:-\d{8,})?$/);
-  if (match) {
-    const family = match[1].charAt(0).toUpperCase() + match[1].slice(1);
-    const major = match[2];
-    const minor = match[3];
-    return minor ? `${family} ${major}.${minor}` : `${family} ${major}`;
-  }
-  return model;
-}
-
-// src/frontend/components/ui/CollapsibleSection.tsx
-var import_react8 = __toESM(require_react(), 1);
-var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
-function CollapsibleSection({
-  title,
-  defaultOpen = false,
-  children
-}) {
-  const [open, setOpen] = import_react8.useState(defaultOpen);
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
-    className: "collapsible",
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("button", {
-        type: "button",
-        className: "collapsible-header",
-        onClick: () => setOpen(!open),
-        children: [
-          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
-            className: `collapsible-chevron ${open ? "open" : ""}`,
-            children: "▶"
-          }, undefined, false, undefined, this),
-          title
-        ]
-      }, undefined, true, undefined, this),
-      open && /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
-        className: "collapsible-content",
-        children
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/frontend/components/message/ToolCall.tsx
-var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
-var MAX_OUTPUT_LENGTH = 5000;
-var MAX_CONTENT_LENGTH = 2000;
-var MAX_THINKING_PREVIEW = 100;
-function ToolCall({ call, sessionId, project }) {
+// node_modules/react-syntax-highlighter/dist/esm/styles/prism/one-light.js
+var one_light_default = {
+  'code[class*="language-"]': {
+    background: "hsl(230, 1%, 98%)",
+    color: "hsl(230, 8%, 24%)",
+    fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+    direction: "ltr",
+    textAlign: "left",
+    whiteSpace: "pre",
+    wordSpacing: "normal",
+    wordBreak: "normal",
+    lineHeight: "1.5",
+    MozTabSize: "2",
+    OTabSize: "2",
+    tabSize: "2",
+    WebkitHyphens: "none",
+    MozHyphens: "none",
+    msHyphens: "none",
+    hyphens: "none"
+  },
+  'pre[class*="language-"]': {
+    background: "hsl(230, 1%, 98%)",
+    color: "hsl(230, 8%, 24%)",
+    fontFamily: '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+    direction: "ltr",
+    textAlign: "left",
+    whiteSpace: "pre",
+    wordSpacing: "normal",
+    wordBreak: "normal",
+    lineHeight: "1.5",
+    MozTabSize: "2",
+    OTabSize: "2",
+    tabSize: "2",
+    WebkitHyphens: "none",
+    MozHyphens: "none",
+    msHyphens: "none",
+    hyphens: "none",
+    padding: "1em",
+    margin: "0.5em 0",
+    overflow: "auto",
+    borderRadius: "0.3em"
+  },
+  'code[class*="language-"]::-moz-selection': {
+    background: "hsl(230, 1%, 90%)",
+    color: "inherit"
+  },
+  'code[class*="language-"] *::-moz-selection': {
+    background: "hsl(230, 1%, 90%)",
+    color: "inherit"
+  },
+  'pre[class*="language-"] *::-moz-selection': {
+    background: "hsl(230, 1%, 90%)",
+    color: "inherit"
+  },
+  'code[class*="language-"]::selection': {
+    background: "hsl(230, 1%, 90%)",
+    color: "inherit"
+  },
+  'code[class*="language-"] *::selection': {
+    background: "hsl(230, 1%, 90%)",
+    color: "inherit"
+  },
+  'pre[class*="language-"] *::selection': {
+    background: "hsl(230, 1%, 90%)",
+    color: "inherit"
+  },
+  ':not(pre) > code[class*="language-"]': {
+    padding: "0.2em 0.3em",
+    borderRadius: "0.3em",
+    whiteSpace: "normal"
+  },
+  comment: {
+    color: "hsl(230, 4%, 64%)",
+    fontStyle: "italic"
+  },
+  prolog: {
+    color: "hsl(230, 4%, 64%)"
+  },
+  cdata: {
+    color: "hsl(230, 4%, 64%)"
+  },
+  doctype: {
+    color: "hsl(230, 8%, 24%)"
+  },
+  punctuation: {
+    color: "hsl(230, 8%, 24%)"
+  },
+  entity: {
+    color: "hsl(230, 8%, 24%)",
+    cursor: "help"
+  },
+  "attr-name": {
+    color: "hsl(35, 99%, 36%)"
+  },
+  "class-name": {
+    color: "hsl(35, 99%, 36%)"
+  },
+  boolean: {
+    color: "hsl(35, 99%, 36%)"
+  },
+  constant: {
+    color: "hsl(35, 99%, 36%)"
+  },
+  number: {
+    color: "hsl(35, 99%, 36%)"
+  },
+  atrule: {
+    color: "hsl(35, 99%, 36%)"
+  },
+  keyword: {
+    color: "hsl(301, 63%, 40%)"
+  },
+  property: {
+    color: "hsl(5, 74%, 59%)"
+  },
+  tag: {
+    color: "hsl(5, 74%, 59%)"
+  },
+  symbol: {
+    color: "hsl(5, 74%, 59%)"
+  },
+  deleted: {
+    color: "hsl(5, 74%, 59%)"
+  },
+  important: {
+    color: "hsl(5, 74%, 59%)"
+  },
+  selector: {
+    color: "hsl(119, 34%, 47%)"
+  },
+  string: {
+    color: "hsl(119, 34%, 47%)"
+  },
+  char: {
+    color: "hsl(119, 34%, 47%)"
+  },
+  builtin: {
+    color: "hsl(119, 34%, 47%)"
+  },
+  inserted: {
+    color: "hsl(119, 34%, 47%)"
+  },
+  regex: {
+    color: "hsl(119, 34%, 47%)"
+  },
+  "attr-value": {
+    color: "hsl(119, 34%, 47%)"
+  },
+  "attr-value > .token.punctuation": {
+    color: "hsl(119, 34%, 47%)"
+  },
+  variable: {
+    color: "hsl(221, 87%, 60%)"
+  },
+  operator: {
+    color: "hsl(221, 87%, 60%)"
+  },
+  function: {
+    color: "hsl(221, 87%, 60%)"
+  },
+  url: {
+    color: "hsl(198, 99%, 37%)"
+  },
+  "attr-value > .token.punctuation.attr-equals": {
+    color: "hsl(230, 8%, 24%)"
+  },
+  "special-attr > .token.attr-value > .token.value.css": {
+    color: "hsl(230, 8%, 24%)"
+  },
+  ".language-css .token.selector": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  ".language-css .token.property": {
+    color: "hsl(230, 8%, 24%)"
+  },
+  ".language-css .token.function": {
+    color: "hsl(198, 99%, 37%)"
+  },
+  ".language-css .token.url > .token.function": {
+    color: "hsl(198, 99%, 37%)"
+  },
+  ".language-css .token.url > .token.string.url": {
+    color: "hsl(119, 34%, 47%)"
+  },
+  ".language-css .token.important": {
+    color: "hsl(301, 63%, 40%)"
+  },
+  ".language-css .token.atrule .token.rule": {
+    color: "hsl(301, 63%, 40%)"
+  },
+  ".language-javascript .token.operator": {
+    color: "hsl(301, 63%, 40%)"
+  },
+  ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation": {
+    color: "hsl(344, 84%, 43%)"
+  },
+  ".language-json .token.operator": {
+    color: "hsl(230, 8%, 24%)"
+  },
+  ".language-json .token.null.keyword": {
+    color: "hsl(35, 99%, 36%)"
+  },
+  ".language-markdown .token.url": {
+    color: "hsl(230, 8%, 24%)"
+  },
+  ".language-markdown .token.url > .token.operator": {
+    color: "hsl(230, 8%, 24%)"
+  },
+  ".language-markdown .token.url-reference.url > .token.string": {
+    color: "hsl(230, 8%, 24%)"
+  },
+  ".language-markdown .token.url > .token.content": {
+    color: "hsl(221, 87%, 60%)"
+  },
+  ".language-markdown .token.url > .token.url": {
+    color: "hsl(198, 99%, 37%)"
+  },
+  ".language-markdown .token.url-reference.url": {
+    color: "hsl(198, 99%, 37%)"
+  },
+  ".language-markdown .token.blockquote.punctuation": {
+    color: "hsl(230, 4%, 64%)",
+    fontStyle: "italic"
+  },
+  ".language-markdown .token.hr.punctuation": {
+    color: "hsl(230, 4%, 64%)",
+    fontStyle: "italic"
+  },
+  ".language-markdown .token.code-snippet": {
+    color: "hsl(119, 34%, 47%)"
+  },
+  ".language-markdown .token.bold .token.content": {
+    color: "hsl(35, 99%, 36%)"
+  },
+  ".language-markdown .token.italic .token.content": {
+    color: "hsl(301, 63%, 40%)"
+  },
+  ".language-markdown .token.strike .token.content": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  ".language-markdown .token.strike .token.punctuation": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  ".language-markdown .token.list.punctuation": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  ".language-markdown .token.title.important > .token.punctuation": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  bold: {
+    fontWeight: "bold"
+  },
+  italic: {
+    fontStyle: "italic"
+  },
+  namespace: {
+    Opacity: "0.8"
+  },
+  "token.tab:not(:empty):before": {
+    color: "hsla(230, 8%, 24%, 0.2)"
+  },
+  "token.cr:before": {
+    color: "hsla(230, 8%, 24%, 0.2)"
+  },
+  "token.lf:before": {
+    color: "hsla(230, 8%, 24%, 0.2)"
+  },
+  "token.space:before": {
+    color: "hsla(230, 8%, 24%, 0.2)"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
+    marginRight: "0.4em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
+    background: "hsl(230, 1%, 90%)",
+    color: "hsl(230, 6%, 44%)",
+    padding: "0.1em 0.4em",
+    borderRadius: "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
+    background: "hsl(230, 1%, 90%)",
+    color: "hsl(230, 6%, 44%)",
+    padding: "0.1em 0.4em",
+    borderRadius: "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
+    background: "hsl(230, 1%, 90%)",
+    color: "hsl(230, 6%, 44%)",
+    padding: "0.1em 0.4em",
+    borderRadius: "0.3em"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
+    background: "hsl(230, 1%, 78%)",
+    color: "hsl(230, 8%, 24%)"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
+    background: "hsl(230, 1%, 78%)",
+    color: "hsl(230, 8%, 24%)"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
+    background: "hsl(230, 1%, 78%)",
+    color: "hsl(230, 8%, 24%)"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
+    background: "hsl(230, 1%, 78%)",
+    color: "hsl(230, 8%, 24%)"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
+    background: "hsl(230, 1%, 78%)",
+    color: "hsl(230, 8%, 24%)"
+  },
+  "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
+    background: "hsl(230, 1%, 78%)",
+    color: "hsl(230, 8%, 24%)"
+  },
+  ".line-highlight.line-highlight": {
+    background: "hsla(230, 8%, 24%, 0.05)"
+  },
+  ".line-highlight.line-highlight:before": {
+    background: "hsl(230, 1%, 90%)",
+    color: "hsl(230, 8%, 24%)",
+    padding: "0.1em 0.6em",
+    borderRadius: "0.3em",
+    boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)"
+  },
+  ".line-highlight.line-highlight[data-end]:after": {
+    background: "hsl(230, 1%, 90%)",
+    color: "hsl(230, 8%, 24%)",
+    padding: "0.1em 0.6em",
+    borderRadius: "0.3em",
+    boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)"
+  },
+  "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before": {
+    backgroundColor: "hsla(230, 8%, 24%, 0.05)"
+  },
+  ".line-numbers.line-numbers .line-numbers-rows": {
+    borderRightColor: "hsla(230, 8%, 24%, 0.2)"
+  },
+  ".command-line .command-line-prompt": {
+    borderRightColor: "hsla(230, 8%, 24%, 0.2)"
+  },
+  ".line-numbers .line-numbers-rows > span:before": {
+    color: "hsl(230, 1%, 62%)"
+  },
+  ".command-line .command-line-prompt > span:before": {
+    color: "hsl(230, 1%, 62%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-1": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-5": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-9": {
+    color: "hsl(5, 74%, 59%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-2": {
+    color: "hsl(119, 34%, 47%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-6": {
+    color: "hsl(119, 34%, 47%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-10": {
+    color: "hsl(119, 34%, 47%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-3": {
+    color: "hsl(221, 87%, 60%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-7": {
+    color: "hsl(221, 87%, 60%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-11": {
+    color: "hsl(221, 87%, 60%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-4": {
+    color: "hsl(301, 63%, 40%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-8": {
+    color: "hsl(301, 63%, 40%)"
+  },
+  ".rainbow-braces .token.token.punctuation.brace-level-12": {
+    color: "hsl(301, 63%, 40%)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
+    backgroundColor: "hsla(353, 100%, 66%, 0.15)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
+    backgroundColor: "hsla(353, 100%, 66%, 0.15)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
+    backgroundColor: "hsla(353, 95%, 66%, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
+    backgroundColor: "hsla(137, 100%, 55%, 0.15)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
+    backgroundColor: "hsla(137, 100%, 55%, 0.15)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
+    backgroundColor: "hsla(135, 73%, 55%, 0.25)"
+  },
+  ".prism-previewer.prism-previewer:before": {
+    borderColor: "hsl(0, 0, 95%)"
+  },
+  ".prism-previewer-gradient.prism-previewer-gradient div": {
+    borderColor: "hsl(0, 0, 95%)",
+    borderRadius: "0.3em"
+  },
+  ".prism-previewer-color.prism-previewer-color:before": {
+    borderRadius: "0.3em"
+  },
+  ".prism-previewer-easing.prism-previewer-easing:before": {
+    borderRadius: "0.3em"
+  },
+  ".prism-previewer.prism-previewer:after": {
+    borderTopColor: "hsl(0, 0, 95%)"
+  },
+  ".prism-previewer-flipped.prism-previewer-flipped.after": {
+    borderBottomColor: "hsl(0, 0, 95%)"
+  },
+  ".prism-previewer-angle.prism-previewer-angle:before": {
+    background: "hsl(0, 0%, 100%)"
+  },
+  ".prism-previewer-time.prism-previewer-time:before": {
+    background: "hsl(0, 0%, 100%)"
+  },
+  ".prism-previewer-easing.prism-previewer-easing": {
+    background: "hsl(0, 0%, 100%)"
+  },
+  ".prism-previewer-angle.prism-previewer-angle circle": {
+    stroke: "hsl(230, 8%, 24%)",
+    strokeOpacity: "1"
+  },
+  ".prism-previewer-time.prism-previewer-time circle": {
+    stroke: "hsl(230, 8%, 24%)",
+    strokeOpacity: "1"
+  },
+  ".prism-previewer-easing.prism-previewer-easing circle": {
+    stroke: "hsl(230, 8%, 24%)",
+    fill: "transparent"
+  },
+  ".prism-previewer-easing.prism-previewer-easing path": {
+    stroke: "hsl(230, 8%, 24%)"
+  },
+  ".prism-previewer-easing.prism-previewer-easing line": {
+    stroke: "hsl(230, 8%, 24%)"
+  }
+};
+// src/frontend/hooks/useTheme.ts
+var import_react7 = __toESM(require_react(), 1);
+function getSystemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveTheme(setting) {
+  if (setting === "system")
+    return getSystemTheme();
+  return setting;
+}
+function useTheme() {
+  const [setting, setSetting] = import_react7.useState(() => {
+    const stored = localStorage.getItem("klovi-theme");
+    if (stored === "light" || stored === "dark")
+      return stored;
+    return "system";
+  });
+  const [resolved, setResolved] = import_react7.useState(() => resolveTheme(setting));
+  import_react7.useEffect(() => {
+    document.documentElement.setAttribute("data-theme", resolved);
+  }, [resolved]);
+  import_react7.useEffect(() => {
+    localStorage.setItem("klovi-theme", setting);
+    setResolved(resolveTheme(setting));
+  }, [setting]);
+  import_react7.useEffect(() => {
+    if (setting !== "system")
+      return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => setResolved(getSystemTheme());
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [setting]);
+  const cycle = import_react7.useCallback(() => {
+    setSetting((s2) => {
+      if (s2 === "system")
+        return "light";
+      if (s2 === "light")
+        return "dark";
+      return "system";
+    });
+  }, []);
+  return { setting, resolved, cycle };
+}
+function useFontSize() {
+  const [size, setSize] = import_react7.useState(() => {
+    const stored = localStorage.getItem("klovi-font-size");
+    return stored ? parseInt(stored, 10) : 15;
+  });
+  import_react7.useEffect(() => {
+    document.documentElement.style.setProperty("--font-size-base", `${size}px`);
+    localStorage.setItem("klovi-font-size", String(size));
+  }, [size]);
+  const increase = import_react7.useCallback(() => setSize((s2) => Math.min(s2 + 2, 28)), []);
+  const decrease = import_react7.useCallback(() => setSize((s2) => Math.max(s2 - 2, 10)), []);
+  return { size, increase, decrease };
+}
+
+// src/frontend/components/ui/CodeBlock.tsx
+var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
+function CodeBlock({ language, children }) {
+  const { resolved: theme } = useTheme();
+  const lang = language || "text";
+  const style2 = theme === "dark" ? one_dark_default : one_light_default;
+  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+    className: "code-block-wrapper",
+    children: [
+      language && /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+        className: "code-block-header",
+        children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
+          children: language
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+        className: "code-block-content",
+        children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(prism_default2, {
+          language: lang,
+          style: style2,
+          customStyle: {
+            margin: 0,
+            fontSize: "0.85em",
+            lineHeight: 1.5
+          },
+          showLineNumbers: children.split(`
+`).length > 3,
+          children: children.replace(/\n$/, "")
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/frontend/components/ui/MarkdownRenderer.tsx
+var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
+var FILE_REF_RE = /@([\w./-]+\.\w+)/g;
+function renderTextWithFileRefs(text7) {
+  const parts = [];
+  let last = 0;
+  FILE_REF_RE.lastIndex = 0;
+  let match = FILE_REF_RE.exec(text7);
+  while (match !== null) {
+    if (match.index > last) {
+      parts.push(text7.slice(last, match.index));
+    }
+    parts.push(/* @__PURE__ */ jsx_dev_runtime7.jsxDEV("code", {
+      className: "file-ref",
+      children: [
+        "@",
+        match[1]
+      ]
+    }, match.index, true, undefined, this));
+    last = FILE_REF_RE.lastIndex;
+    match = FILE_REF_RE.exec(text7);
+  }
+  if (parts.length === 0)
+    return text7;
+  if (last < text7.length)
+    parts.push(text7.slice(last));
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(jsx_dev_runtime7.Fragment, {
+    children: parts
+  }, undefined, false, undefined, this);
+}
+function MarkdownRenderer({ content: content3 }) {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+    className: "markdown-content",
+    children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Markdown, {
+      remarkPlugins: [remarkGfm],
+      components: {
+        p({ children }) {
+          return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("p", {
+            children: import_react8.default.Children.map(children, (child) => typeof child === "string" ? renderTextWithFileRefs(child) : child)
+          }, undefined, false, undefined, this);
+        },
+        code({ className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || "");
+          const text7 = String(children).replace(/\n$/, "");
+          if (!match && !text7.includes(`
+`)) {
+            return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("code", {
+              className,
+              ...props,
+              children
+            }, undefined, false, undefined, this);
+          }
+          return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(CodeBlock, {
+            language: match?.[1],
+            children: text7
+          }, undefined, false, undefined, this);
+        },
+        a({ href, children, ...props }) {
+          return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("a", {
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            ...props,
+            children
+          }, undefined, false, undefined, this);
+        }
+      },
+      children: content3
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/shared/content-blocks.ts
+function groupContentBlocks(blocks) {
+  const groups = [];
+  let nonTextGroup = [];
+  for (const block of blocks) {
+    if (block.type === "text") {
+      if (nonTextGroup.length > 0) {
+        groups.push(nonTextGroup);
+        nonTextGroup = [];
+      }
+      groups.push([block]);
+    } else {
+      nonTextGroup.push(block);
+    }
+  }
+  if (nonTextGroup.length > 0) {
+    groups.push(nonTextGroup);
+  }
+  return groups;
+}
+
+// src/frontend/utils/model.ts
+function shortModel(model) {
+  const match = model.match(/claude-(opus|sonnet|haiku)-(\d+)(?:-(\d{1,2}))?(?:-\d{8,})?$/);
+  if (match) {
+    const family = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+    const major = match[2];
+    const minor = match[3];
+    return minor ? `${family} ${major}.${minor}` : `${family} ${major}`;
+  }
+  return model;
+}
+
+// src/frontend/components/ui/CollapsibleSection.tsx
+var import_react9 = __toESM(require_react(), 1);
+var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+function CollapsibleSection({
+  title,
+  defaultOpen = false,
+  children
+}) {
+  const [open, setOpen] = import_react9.useState(defaultOpen);
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+    className: "collapsible",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("button", {
+        type: "button",
+        className: "collapsible-header",
+        onClick: () => setOpen(!open),
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+            className: `collapsible-chevron ${open ? "open" : ""}`,
+            children: "▶"
+          }, undefined, false, undefined, this),
+          title
+        ]
+      }, undefined, true, undefined, this),
+      open && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+        className: "collapsible-content",
+        children
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/frontend/components/ui/DiffView.tsx
+var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
+function formatDiff(oldString, newString) {
+  const lines = [];
+  if (oldString !== "") {
+    for (const line of oldString.split(`
+`)) {
+      lines.push(`-${line}`);
+    }
+  }
+  if (newString !== "") {
+    for (const line of newString.split(`
+`)) {
+      lines.push(`+${line}`);
+    }
+  }
+  return lines.join(`
+`);
+}
+function DiffView({ filePath, oldString, newString }) {
+  const { resolved: theme } = useTheme();
+  const diff2 = formatDiff(oldString, newString);
+  const style2 = theme === "dark" ? one_dark_default : one_light_default;
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+    className: "diff-view-wrapper",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+        className: "diff-view-header",
+        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          children: filePath
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+        className: "diff-view-content",
+        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(prism_default2, {
+          language: "diff",
+          style: style2,
+          customStyle: {
+            margin: 0,
+            fontSize: "0.85em",
+            lineHeight: 1.5
+          },
+          showLineNumbers: diff2.split(`
+`).length > 3,
+          children: diff2
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/frontend/utils/format-detector.ts
+function detectOutputFormat(output) {
+  const trimmed = output.trim();
+  if (!trimmed)
+    return null;
+  if (isJson(trimmed))
+    return "json";
+  if (isDiff(trimmed))
+    return "diff";
+  if (isXmlOrHtml(trimmed))
+    return "markup";
+  if (isTypeScript(trimmed))
+    return "typescript";
+  if (isPython(trimmed))
+    return "python";
+  if (isCss(trimmed))
+    return "css";
+  if (isYaml(trimmed))
+    return "yaml";
+  return null;
+}
+function isJson(text7) {
+  const first = text7[0];
+  const last = text7[text7.length - 1];
+  if (!(first === "{" && last === "}" || first === "[" && last === "]"))
+    return false;
+  try {
+    JSON.parse(text7);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function isDiff(text7) {
+  if (text7.startsWith("diff ") || text7.startsWith("--- ") || text7.startsWith("+++ "))
+    return true;
+  const lines = text7.split(`
+`);
+  let diffLineCount = 0;
+  for (const line of lines) {
+    if (line.startsWith("+") || line.startsWith("-") || line.startsWith("@@")) {
+      diffLineCount++;
+    }
+  }
+  return diffLineCount >= 3 && diffLineCount / lines.length > 0.3;
+}
+function isXmlOrHtml(text7) {
+  if (text7.startsWith("<?xml") || text7.startsWith("<!DOCTYPE") || text7.startsWith("<!doctype")) {
+    return true;
+  }
+  if (text7.startsWith("<") && /<\/\w+>\s*$/.test(text7))
+    return true;
+  return false;
+}
+function isTypeScript(text7) {
+  if (/^(export\s+)?(interface|type)\s+\w+/.test(text7))
+    return true;
+  if (/:\s*(string|number|boolean|Record|Array)\b/.test(text7) && hasCodeStructure(text7))
+    return true;
+  return false;
+}
+function isPython(text7) {
+  if (/^(def|class|import|from)\s+\w+/.test(text7))
+    return true;
+  if (text7.includes("if __name__"))
+    return true;
+  const lines = text7.split(`
+`);
+  const pyLines = lines.filter((l) => /^\s*(def|class|if|for|while|with|try|except)\s/.test(l));
+  return pyLines.length >= 2;
+}
+function isCss(text7) {
+  if (/^[@.#:\w[\]-]+\s*\{/m.test(text7) && /:\s*[^;]+;/m.test(text7))
+    return true;
+  if (/^@(media|import|keyframes|font-face)\s/.test(text7))
+    return true;
+  return false;
+}
+function isYaml(text7) {
+  if (text7.startsWith("---"))
+    return true;
+  if (text7.includes("{") || text7.includes("["))
+    return false;
+  const lines = text7.split(`
+`);
+  const kvLines = lines.filter((l) => /^\s*[\w.-]+:\s/.test(l));
+  return kvLines.length >= 2 && kvLines.length / lines.length > 0.3;
+}
+function hasCodeStructure(text7) {
+  const lines = text7.split(`
+`);
+  return lines.length >= 2 && /^(export|import|const|let|var|function|class)\s/.test(text7);
+}
+
+// src/frontend/components/message/SmartToolOutput.tsx
+var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+function SmartToolOutput({ output, isError, resultImages }) {
+  const truncated = truncateOutput(output);
+  const wasTruncated = output.length > MAX_OUTPUT_LENGTH;
+  const detectedLang = truncated ? detectOutputFormat(truncated) : null;
+  if (!output && (!resultImages || resultImages.length === 0))
+    return null;
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+        className: "tool-section-label",
+        children: "Output"
+      }, undefined, false, undefined, this),
+      output && (detectedLang && !isError ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(CodeBlock, {
+        language: detectedLang,
+        children: truncated
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+        className: `tool-call-output ${isError ? "tool-call-error" : ""}`,
+        children: truncated
+      }, undefined, false, undefined, this)),
+      wasTruncated && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+        className: "tool-call-truncated",
+        children: "... (truncated)"
+      }, undefined, false, undefined, this),
+      resultImages && resultImages.length > 0 && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+        className: "tool-result-images",
+        children: resultImages.map((img, i) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("a", {
+          href: `data:${img.mediaType};base64,${img.data}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("img", {
+            className: "tool-result-image",
+            src: `data:${img.mediaType};base64,${img.data}`,
+            alt: `Tool result ${i + 1}`
+          }, undefined, false, undefined, this)
+        }, i, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/frontend/components/message/BashToolContent.tsx
+var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+function BashToolContent({ call }) {
+  const command = String(call.input.command || "");
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(jsx_dev_runtime11.Fragment, {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+        style: { marginBottom: 8 },
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+            className: "tool-section-label",
+            children: "Command"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(CodeBlock, {
+            language: "bash",
+            children: command
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(SmartToolOutput, {
+        output: call.result,
+        isError: call.isError,
+        resultImages: call.resultImages
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/frontend/components/message/ToolCall.tsx
+var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var MAX_OUTPUT_LENGTH = 5000;
+var MAX_CONTENT_LENGTH = 2000;
+var MAX_THINKING_PREVIEW = 100;
+function isEditWithDiff(call) {
+  return call.name === "Edit" && typeof call.input.old_string === "string" && typeof call.input.new_string === "string";
+}
+function isJsonFallbackInput(call) {
+  return !(call.name in INPUT_FORMATTERS);
+}
+function DefaultToolContent({ call }) {
+  const formattedInput = formatToolInput(call);
+  const jsonInput = isJsonFallbackInput(call);
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+        style: { marginBottom: 8 },
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+            className: "tool-section-label",
+            children: "Input"
+          }, undefined, false, undefined, this),
+          jsonInput ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(CodeBlock, {
+            language: "json",
+            children: formattedInput
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+            className: "tool-call-input",
+            children: formattedInput
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(SmartToolOutput, {
+        output: call.result,
+        isError: call.isError,
+        resultImages: call.resultImages
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ToolCall({ call, sessionId, project }) {
   const summary = getToolSummary(call);
   const mcpServer = getMcpServer(call.name);
   const hasSubAgent = call.name === "Task" && call.subAgentId && sessionId && project;
   const displayName = hasSubAgent ? "Sub-Agent" : mcpServer ? call.name.split("__").slice(1).join("__").replace(/__/g, " > ") : call.name;
-  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
     className: "tool-call",
-    children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(CollapsibleSection, {
-      title: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(CollapsibleSection, {
+      title: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
         children: [
-          mcpServer && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          mcpServer && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             className: "tool-mcp-server",
             children: mcpServer
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             className: "tool-call-name",
             children: displayName
           }, undefined, false, undefined, this),
-          summary && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          summary && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             className: "tool-call-summary",
             children: [
               " — ",
               summary
             ]
           }, undefined, true, undefined, this),
-          call.isError && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          call.isError && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             className: "tool-call-error",
             children: " (error)"
           }, undefined, false, undefined, this),
-          hasSubAgent && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("a", {
+          hasSubAgent && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("a", {
             className: "subagent-link",
             href: `#/${project}/${sessionId}/subagent/${call.subAgentId}`,
             onClick: (e) => e.stopPropagation(),
@@ -53312,47 +54270,16 @@ function ToolCall({ call, sessionId, project }) {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      children: [
-        /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
-          style: { marginBottom: 8 },
-          children: [
-            /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
-              className: "tool-section-label",
-              children: "Input"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
-              className: "tool-call-input",
-              children: formatToolInput(call)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this),
-        (call.result || call.resultImages && call.resultImages.length > 0) && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
-          children: [
-            /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
-              className: "tool-section-label",
-              children: "Output"
-            }, undefined, false, undefined, this),
-            call.result && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
-              className: `tool-call-output ${call.isError ? "tool-call-error" : ""}`,
-              children: truncateOutput(call.result)
-            }, undefined, false, undefined, this),
-            call.resultImages && call.resultImages.length > 0 && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
-              className: "tool-result-images",
-              children: call.resultImages.map((img, i) => /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("a", {
-                href: `data:${img.mediaType};base64,${img.data}`,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("img", {
-                  className: "tool-result-image",
-                  src: `data:${img.mediaType};base64,${img.data}`,
-                  alt: `Tool result ${i + 1}`
-                }, undefined, false, undefined, this)
-              }, i, false, undefined, this))
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      ]
-    }, undefined, true, undefined, this)
+      children: isEditWithDiff(call) ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(DiffView, {
+        filePath: String(call.input.file_path || ""),
+        oldString: String(call.input.old_string),
+        newString: String(call.input.new_string)
+      }, undefined, false, undefined, this) : call.name === "Bash" ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(BashToolContent, {
+        call
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(DefaultToolContent, {
+        call
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 function getMcpServer(name2) {
@@ -53529,34 +54456,32 @@ function truncate(s2, max) {
 function truncateOutput(s2) {
   if (s2.length <= MAX_OUTPUT_LENGTH)
     return s2;
-  return `${s2.slice(0, MAX_OUTPUT_LENGTH)}
-
-... (truncated)`;
+  return s2.slice(0, MAX_OUTPUT_LENGTH);
 }
 
 // src/frontend/components/message/ThinkingBlock.tsx
-var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
 function ThinkingBlock({ block }) {
   const preview = block.text.length > MAX_THINKING_PREVIEW ? `${block.text.slice(0, MAX_THINKING_PREVIEW)}...` : block.text;
-  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
     className: "thinking-block",
-    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(CollapsibleSection, {
-      title: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(CollapsibleSection, {
+      title: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
             style: { color: "var(--text-muted)" },
             children: "Thinking:"
           }, undefined, false, undefined, this),
           " ",
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
             className: "tool-call-summary",
             children: preview
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
         className: "thinking-content",
-        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(MarkdownRenderer, {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(MarkdownRenderer, {
           content: block.text
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -53565,7 +54490,7 @@ function ThinkingBlock({ block }) {
 }
 
 // src/frontend/components/message/AssistantMessage.tsx
-var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
 function AssistantMessage({
   turn,
   visibleSubSteps,
@@ -53576,19 +54501,19 @@ function AssistantMessage({
   const subSteps = [];
   for (let g = 0;g < groups.length; g++) {
     const group = groups[g];
-    subSteps.push(/* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+    subSteps.push(/* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
       children: group.map((block, i) => {
         if (block.type === "thinking") {
-          return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ThinkingBlock, {
+          return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(ThinkingBlock, {
             block: block.block
           }, `thinking-${i}`, false, undefined, this);
         }
         if (block.type === "text") {
-          return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(MarkdownRenderer, {
+          return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(MarkdownRenderer, {
             content: block.text
           }, `text-${i}`, false, undefined, this);
         }
-        return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(ToolCall, {
+        return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(ToolCall, {
           call: block.call,
           sessionId,
           project
@@ -53598,28 +54523,28 @@ function AssistantMessage({
   }
   const limit = visibleSubSteps !== undefined ? visibleSubSteps : subSteps.length;
   const visible = subSteps.slice(0, limit);
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
     className: "message message-assistant",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
         className: "message-role",
         children: [
           "Assistant",
-          turn.model && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          turn.model && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             style: { fontWeight: 400, marginLeft: 8 },
             children: shortModel(turn.model)
           }, undefined, false, undefined, this),
-          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             className: "message-timestamp",
             children: formatTimestamp(turn.timestamp)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      visible.map((node2, i) => /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      visible.map((node2, i) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
         className: visibleSubSteps !== undefined && i === visible.length - 1 ? "step-enter" : "",
         children: node2
       }, i, false, undefined, this)),
-      turn.usage && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      turn.usage && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
         className: "token-usage",
         children: [
           turn.usage.inputTokens.toLocaleString(),
@@ -53627,14 +54552,14 @@ function AssistantMessage({
           turn.usage.outputTokens.toLocaleString(),
           " ",
           "out",
-          turn.usage.cacheReadTokens && turn.usage.cacheReadTokens > 0 && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          turn.usage.cacheReadTokens && turn.usage.cacheReadTokens > 0 && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             children: [
               " · ",
               turn.usage.cacheReadTokens.toLocaleString(),
               " cache read"
             ]
           }, undefined, true, undefined, this),
-          turn.usage.cacheCreationTokens && turn.usage.cacheCreationTokens > 0 && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          turn.usage.cacheCreationTokens && turn.usage.cacheCreationTokens > 0 && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             children: [
               " · ",
               turn.usage.cacheCreationTokens.toLocaleString(),
@@ -53648,7 +54573,7 @@ function AssistantMessage({
 }
 
 // src/frontend/components/message/UserMessage.tsx
-var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
 var STATUS_RE = /^\[.+\]$/;
 var PLAN_PREFIX = "Implement the following plan";
 function UserMessage({
@@ -53660,7 +54585,7 @@ function UserMessage({
 }) {
   const isStatus = STATUS_RE.test(turn.text.trim());
   if (isStatus) {
-    return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
       className: "status-notice",
       children: turn.text
     }, undefined, false, undefined, this);
@@ -53668,42 +54593,42 @@ function UserMessage({
   const isPlanMessage = turn.text.startsWith(PLAN_PREFIX);
   const showPlanLink = planSessionId && project && isPlanMessage;
   const showImplLink = implSessionId && project && !isPlanMessage;
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
     className: `message ${isSubAgent ? "message-root-agent" : "message-user"}`,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
         className: "message-role",
         children: [
           isSubAgent ? "Root Agent" : "User",
-          showPlanLink && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("a", {
+          showPlanLink && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("a", {
             className: "subagent-link",
             href: `#/${project}/${planSessionId}`,
             children: "View planning session"
           }, undefined, false, undefined, this),
-          showImplLink && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("a", {
+          showImplLink && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("a", {
             className: "subagent-link",
             href: `#/${project}/${implSessionId}`,
             children: "View implementation session"
           }, undefined, false, undefined, this),
-          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
+          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
             className: "message-timestamp",
             children: formatTimestamp(turn.timestamp)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      turn.command && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+      turn.command && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
         className: "command-call",
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
+        children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
           className: "command-call-label",
           children: turn.command.name
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(MarkdownRenderer, {
+      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(MarkdownRenderer, {
         content: turn.text
       }, undefined, false, undefined, this),
-      turn.attachments && turn.attachments.length > 0 && /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+      turn.attachments && turn.attachments.length > 0 && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
         className: "attachments",
-        children: turn.attachments.map((a, i) => /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
+        children: turn.attachments.map((a, i) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
           className: "attachment-badge",
           children: [
             "image/",
@@ -53716,50 +54641,88 @@ function UserMessage({
 }
 
 // src/frontend/components/message/MessageList.tsx
-var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
 function renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project, isSubAgent, planSessionId, implSessionId) {
   const activeClass = isActive ? "active-message" : "";
   switch (turn.kind) {
     case "user":
-      return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
         className: isActive ? "active-message step-enter" : "",
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(UserMessage, {
+        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(UserMessage, {
           turn,
           isSubAgent,
           planSessionId,
           implSessionId,
           project
         }, undefined, false, undefined, this)
-      }, turn.uuid || index2, false, undefined, this);
+      }, undefined, false, undefined, this);
     case "assistant":
-      return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
         className: activeClass,
-        children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(AssistantMessage, {
+        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(AssistantMessage, {
           turn,
           visibleSubSteps: visibleSubSteps?.get(index2),
           sessionId,
           project
         }, undefined, false, undefined, this)
-      }, turn.uuid || index2, false, undefined, this);
+      }, undefined, false, undefined, this);
     case "system":
-      return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
         className: `message message-system ${activeClass}`,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
             className: "message-role",
             children: [
               "System",
-              turn.timestamp && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
+              turn.timestamp && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
                 className: "message-timestamp",
                 children: formatTimestamp(turn.timestamp)
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(MarkdownRenderer, {
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(MarkdownRenderer, {
             content: turn.text
           }, undefined, false, undefined, this)
         ]
-      }, turn.uuid || index2, true, undefined, this);
+      }, undefined, true, undefined, this);
+    case "parse_error":
+      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+        className: `message message-parse-error ${activeClass}`,
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+            className: "message-role",
+            children: [
+              "Parse Error",
+              turn.lineNumber > 0 && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
+                className: "parse-error-line",
+                children: [
+                  "line ",
+                  turn.lineNumber
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+            className: "parse-error-type",
+            children: turn.errorType === "json_parse" ? "Invalid JSON" : "Invalid Structure"
+          }, undefined, false, undefined, this),
+          turn.errorDetails && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+            className: "parse-error-details",
+            children: turn.errorDetails
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("details", {
+            className: "parse-error-raw",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("summary", {
+                children: "Raw content"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("pre", {
+                children: turn.rawLine
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
     default:
       return null;
   }
@@ -53779,66 +54742,60 @@ function MessageList({
       return false;
     return !STATUS_RE2.test(t.text.trim());
   });
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
     className: "message-list",
     children: turns.map((turn, index2) => {
       const isActive = visibleSubSteps ? index2 === turns.length - 1 : false;
-      return renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project, isSubAgent, planSessionId, index2 === firstUserTurnIndex ? implSessionId : undefined);
+      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ErrorBoundary, {
+        inline: true,
+        children: renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project, isSubAgent, planSessionId, index2 === firstUserTurnIndex ? implSessionId : undefined)
+      }, turn.uuid || index2, false, undefined, this);
     })
   }, undefined, false, undefined, this);
 }
 
 // src/frontend/components/message/SubAgentView.tsx
-var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
 function SubAgentView({ sessionId, project, agentId }) {
-  const [session, setSession] = import_react9.useState(null);
-  const [loading, setLoading] = import_react9.useState(true);
-  const [error, setError] = import_react9.useState(null);
-  import_react9.useEffect(() => {
-    setLoading(true);
-    setError(null);
-    fetch(`/api/sessions/${sessionId}/subagents/${agentId}?project=${encodeURIComponent(project)}`).then((r2) => {
-      if (!r2.ok)
-        throw new Error(`HTTP ${r2.status}`);
-      return r2.json();
-    }).then((data) => {
-      setSession(data.session);
-      setLoading(false);
-    }).catch((e) => {
-      setError(e.message);
-      setLoading(false);
-    });
-  }, [sessionId, project, agentId]);
+  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}/subagents/${agentId}?project=${encodeURIComponent(project)}`, [sessionId, project, agentId]);
   if (loading)
-    return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
       className: "loading",
       children: "Loading sub-agent conversation..."
     }, undefined, false, undefined, this);
-  if (error)
-    return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
-      className: "loading",
-      style: { color: "var(--error)" },
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+      className: "fetch-error",
       children: [
-        "Error: ",
-        error
+        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: [
+            "Error: ",
+            error
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this);
-  if (!session || session.turns.length === 0)
-    return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
+  }
+  if (!data?.session || data.session.turns.length === 0)
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
       className: "subagent-empty",
       children: "No sub-agent conversation data available."
     }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(MessageList, {
-    turns: session.turns,
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(MessageList, {
+    turns: data.session.turns,
     sessionId,
     project,
     isSubAgent: true
   }, undefined, false, undefined, this);
 }
 
-// src/frontend/components/project/HiddenProjectList.tsx
-var import_react10 = __toESM(require_react(), 1);
-
 // src/frontend/utils/project.ts
 function projectDisplayName(project) {
   const parts = project.name.split(/[/\\]/).filter(Boolean);
@@ -53846,56 +54803,67 @@ function projectDisplayName(project) {
 }
 
 // src/frontend/components/project/HiddenProjectList.tsx
-var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
 function HiddenProjectList({ hiddenIds, onUnhide, onBack }) {
-  const [projects, setProjects] = import_react10.useState([]);
-  const [loading, setLoading] = import_react10.useState(true);
-  import_react10.useEffect(() => {
-    fetch("/api/projects").then((r2) => r2.json()).then((data) => {
-      setProjects(data.projects);
-      setLoading(false);
-    }).catch(() => setLoading(false));
-  }, []);
+  const { data, loading, error, retry } = useFetch("/api/projects", []);
+  const projects = data?.projects ?? [];
   const hidden = projects.filter((p) => hiddenIds.has(p.encodedPath));
   if (loading)
-    return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
       className: "loading",
       children: "Loading..."
     }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+      className: "fetch-error",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: error
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
     className: "hidden-projects-page",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         className: "back-btn",
         onClick: onBack,
         children: "← Back to projects"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("h2", {
+      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("h2", {
         style: { margin: "16px 0 12px", fontSize: "1.1rem", color: "var(--text-primary)" },
         children: "Hidden Projects"
       }, undefined, false, undefined, this),
-      hidden.length === 0 ? /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+      hidden.length === 0 ? /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         className: "empty-state",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
             className: "empty-state-title",
             children: "No hidden projects"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("p", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("p", {
             children: "Projects you hide will appear here"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : hidden.map((project) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+      }, undefined, true, undefined, this) : hidden.map((project) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         className: "list-item list-item-with-action",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
             className: "list-item-content",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
                 className: "list-item-title",
                 children: projectDisplayName(project)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
                 className: "list-item-meta",
                 children: [
                   project.sessionCount,
@@ -53905,7 +54873,7 @@ function HiddenProjectList({ hiddenIds, onUnhide, onBack }) {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("button", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("button", {
             type: "button",
             className: "btn btn-sm",
             onClick: () => onUnhide(project.encodedPath),
@@ -53918,8 +54886,8 @@ function HiddenProjectList({ hiddenIds, onUnhide, onBack }) {
 }
 
 // src/frontend/components/project/ProjectList.tsx
-var import_react11 = __toESM(require_react(), 1);
-var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react10 = __toESM(require_react(), 1);
+var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
 function ProjectList({
   onSelect,
   selected,
@@ -53927,30 +54895,41 @@ function ProjectList({
   onHide,
   onShowHidden
 }) {
-  const [projects, setProjects] = import_react11.useState([]);
-  const [filter, setFilter] = import_react11.useState("");
-  const [loading, setLoading] = import_react11.useState(true);
-  import_react11.useEffect(() => {
-    fetch("/api/projects").then((r2) => r2.json()).then((data) => {
-      setProjects(data.projects);
-      setLoading(false);
-    }).catch(() => setLoading(false));
-  }, []);
+  const { data, loading, error, retry } = useFetch("/api/projects", []);
+  const [filter, setFilter] = import_react10.useState("");
+  const projects = data?.projects ?? [];
   const filtered = projects.filter((p) => !hiddenIds.has(p.encodedPath) && (p.name.toLowerCase().includes(filter.toLowerCase()) || p.encodedPath.toLowerCase().includes(filter.toLowerCase())));
   if (loading)
-    return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
       className: "loading",
       children: "Loading projects..."
     }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
+      className: "fetch-error",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: error
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("input", {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("input", {
         className: "filter-input",
         placeholder: "Filter projects...",
         value: filter,
         onChange: (e) => setFilter(e.target.value)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
         className: "list-section-title",
         children: [
           "Projects (",
@@ -53958,18 +54937,18 @@ function ProjectList({
           ")"
         ]
       }, undefined, true, undefined, this),
-      filtered.map((project) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+      filtered.map((project) => /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
         className: `list-item list-item-with-action ${selected === project.encodedPath ? "active" : ""}`,
         onClick: () => onSelect(project),
         children: [
-          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
             className: "list-item-content",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
                 className: "list-item-title",
                 children: projectDisplayName(project)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
                 className: "list-item-meta",
                 children: [
                   project.sessionCount,
@@ -53981,7 +54960,7 @@ function ProjectList({
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("button", {
+          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("button", {
             type: "button",
             className: "btn-hide",
             title: "Hide project",
@@ -53993,11 +54972,11 @@ function ProjectList({
           }, undefined, false, undefined, this)
         ]
       }, project.encodedPath, true, undefined, this)),
-      filtered.length === 0 && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+      filtered.length === 0 && /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
         className: "empty-list-message",
         children: "No projects found"
       }, undefined, false, undefined, this),
-      hiddenIds.size > 0 && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+      hiddenIds.size > 0 && /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
         className: "hidden-projects-link",
         onClick: onShowHidden,
         children: [
@@ -54011,58 +54990,65 @@ function ProjectList({
 }
 
 // src/frontend/components/project/SessionList.tsx
-var import_react12 = __toESM(require_react(), 1);
-var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
 function SessionList({ project, onSelect, onBack, selectedId }) {
-  const [sessions, setSessions] = import_react12.useState([]);
-  const [loading, setLoading] = import_react12.useState(true);
-  import_react12.useEffect(() => {
-    setLoading(true);
-    fetch(`/api/projects/${encodeURIComponent(project.encodedPath)}/sessions`).then((r2) => r2.json()).then((data) => {
-      setSessions(data.sessions);
-      setLoading(false);
-    }).catch(() => setLoading(false));
-  }, [project.encodedPath]);
+  const { data, loading, error, retry } = useFetch(`/api/projects/${encodeURIComponent(project.encodedPath)}/sessions`, [project.encodedPath]);
+  const sessions = data?.sessions ?? [];
   const parts = project.name.split("/").filter(Boolean);
   const displayName = parts.slice(-2).join("/");
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: "back-btn",
         onClick: onBack,
         children: "← Projects"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: "list-section-title",
         children: displayName
       }, undefined, false, undefined, this),
-      loading && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      loading && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: "loading",
         children: "Loading sessions..."
       }, undefined, false, undefined, this),
-      !loading && sessions.map((session) => /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      error && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
+        className: "fetch-error",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
+            className: "fetch-error-message",
+            children: error
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("button", {
+            type: "button",
+            className: "btn btn-sm",
+            onClick: retry,
+            children: "Retry"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      !loading && !error && sessions.map((session) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: `list-item ${selectedId === session.sessionId ? "active" : ""}${session.sessionType ? ` ${session.sessionType}` : ""}`,
         onClick: () => onSelect(session),
         children: [
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
             className: "list-item-title",
             children: session.firstMessage || session.slug
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
             className: "list-item-meta",
             children: [
-              session.sessionType && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
+              session.sessionType && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
                 className: `session-type-badge ${session.sessionType}`,
                 children: session.sessionType === "plan" ? "Plan" : "Impl"
               }, undefined, false, undefined, this),
               " ",
-              session.model && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
+              session.model && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
                 children: [
                   shortModel(session.model),
                   " · "
                 ]
               }, undefined, true, undefined, this),
-              session.gitBranch && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
+              session.gitBranch && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
                 children: [
                   session.gitBranch,
                   " · "
@@ -54073,7 +55059,7 @@ function SessionList({ project, onSelect, onBack, selectedId }) {
           }, undefined, true, undefined, this)
         ]
       }, session.sessionId, true, undefined, this)),
-      !loading && sessions.length === 0 && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      !loading && !error && sessions.length === 0 && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: "empty-list-message",
         children: "No sessions found"
       }, undefined, false, undefined, this)
@@ -54082,23 +55068,23 @@ function SessionList({ project, onSelect, onBack, selectedId }) {
 }
 
 // src/frontend/components/search/SearchModal.tsx
-var import_react13 = __toESM(require_react(), 1);
-var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
+var import_react11 = __toESM(require_react(), 1);
+var jsx_dev_runtime21 = __toESM(require_jsx_dev_runtime(), 1);
 var MAX_RESULTS = 20;
 function matchesQuery(result, query) {
   const q2 = query.toLowerCase();
   return result.firstMessage.toLowerCase().includes(q2) || result.projectName.toLowerCase().includes(q2) || result.gitBranch.toLowerCase().includes(q2);
 }
 function SearchModal({ sessions, onSelect, onClose }) {
-  const [query, setQuery] = import_react13.useState("");
-  const [highlightedIndex, setHighlightedIndex] = import_react13.useState(0);
-  const inputRef = import_react13.useRef(null);
-  const resultsRef = import_react13.useRef(null);
+  const [query, setQuery] = import_react11.useState("");
+  const [highlightedIndex, setHighlightedIndex] = import_react11.useState(0);
+  const inputRef = import_react11.useRef(null);
+  const resultsRef = import_react11.useRef(null);
   const filtered = query ? sessions.filter((s2) => matchesQuery(s2, query)).slice(0, MAX_RESULTS) : sessions.slice(0, MAX_RESULTS);
-  import_react13.useEffect(() => {
+  import_react11.useEffect(() => {
     inputRef.current?.focus();
   }, []);
-  import_react13.useEffect(() => {
+  import_react11.useEffect(() => {
     const container = resultsRef.current;
     if (!container)
       return;
@@ -54108,10 +55094,10 @@ function SearchModal({ sessions, onSelect, onClose }) {
       item.scrollIntoView({ block: "nearest" });
     }
   }, [highlightedIndex]);
-  const handleSelect = import_react13.useCallback((result) => {
+  const handleSelect = import_react11.useCallback((result) => {
     onSelect(result.encodedPath, result.sessionId);
   }, [onSelect]);
-  const handleKeyDown = import_react13.useCallback((e) => {
+  const handleKeyDown = import_react11.useCallback((e) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
@@ -54133,16 +55119,16 @@ function SearchModal({ sessions, onSelect, onClose }) {
         break;
     }
   }, [filtered, highlightedIndex, handleSelect, onClose]);
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
     className: "search-overlay",
     onMouseDown: onClose,
-    children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+    children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
       className: "search-modal",
       onMouseDown: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
           className: "search-input-wrapper",
-          children: /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("input", {
+          children: /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("input", {
             ref: inputRef,
             className: "search-input",
             type: "text",
@@ -54155,31 +55141,31 @@ function SearchModal({ sessions, onSelect, onClose }) {
             onKeyDown: handleKeyDown
           }, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
           className: "search-results",
           ref: resultsRef,
-          children: filtered.length === 0 ? /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+          children: filtered.length === 0 ? /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
             className: "search-empty",
             children: "No results found"
-          }, undefined, false, undefined, this) : filtered.map((result, index2) => /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+          }, undefined, false, undefined, this) : filtered.map((result, index2) => /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
             className: `search-result-item ${index2 === highlightedIndex ? "highlighted" : ""}`,
             "data-search-item": true,
             onClick: () => handleSelect(result),
             onMouseEnter: () => setHighlightedIndex(index2),
             children: [
-              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
                 className: "search-result-title",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("span", {
                     children: result.firstMessage
                   }, undefined, false, undefined, this),
-                  result.sessionType && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
+                  result.sessionType && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("span", {
                     className: `session-type-badge ${result.sessionType}`,
                     children: result.sessionType
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
                 className: "search-result-meta",
                 children: [
                   result.projectName,
@@ -54194,28 +55180,28 @@ function SearchModal({ sessions, onSelect, onClose }) {
             ]
           }, `${result.encodedPath}-${result.sessionId}`, true, undefined, this))
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+        /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
           className: "search-footer",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
+            /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("span", {
               children: [
-                /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("kbd", {
+                /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("kbd", {
                   children: "↑↓"
                 }, undefined, false, undefined, this),
                 " navigate"
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
+            /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("span", {
               children: [
-                /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("kbd", {
+                /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("kbd", {
                   children: "↵"
                 }, undefined, false, undefined, this),
                 " open"
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
+            /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("span", {
               children: [
-                /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("kbd", {
+                /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("kbd", {
                   children: "esc"
                 }, undefined, false, undefined, this),
                 " close"
@@ -54228,16 +55214,13 @@ function SearchModal({ sessions, onSelect, onClose }) {
   }, undefined, false, undefined, this);
 }
 
-// src/frontend/components/session/SessionPresentation.tsx
-var import_react17 = __toESM(require_react(), 1);
-
 // src/frontend/components/session/PresentationShell.tsx
-var import_react16 = __toESM(require_react(), 1);
+var import_react14 = __toESM(require_react(), 1);
 
 // src/frontend/hooks/useKeyboard.ts
-var import_react14 = __toESM(require_react(), 1);
+var import_react12 = __toESM(require_react(), 1);
 function useKeyboard(handlers2, active) {
-  import_react14.useEffect(() => {
+  import_react12.useEffect(() => {
     if (!active)
       return;
     function handleKeyDown(e) {
@@ -54280,7 +55263,7 @@ function useKeyboard(handlers2, active) {
 }
 
 // src/frontend/hooks/usePresentationMode.ts
-var import_react15 = __toESM(require_react(), 1);
+var import_react13 = __toESM(require_react(), 1);
 function countSubSteps(turn) {
   if (turn.kind !== "assistant")
     return 1;
@@ -54288,10 +55271,10 @@ function countSubSteps(turn) {
   return Math.max(groupContentBlocks(a.contentBlocks).length, 1);
 }
 function usePresentationMode(turns) {
-  const [active, setActive] = import_react15.useState(false);
-  const [fullscreen, setFullscreen] = import_react15.useState(false);
-  const [currentStep, setCurrentStep] = import_react15.useState(0);
-  const steps = import_react15.useMemo(() => {
+  const [active, setActive] = import_react13.useState(false);
+  const [fullscreen, setFullscreen] = import_react13.useState(false);
+  const [currentStep, setCurrentStep] = import_react13.useState(0);
+  const steps = import_react13.useMemo(() => {
     const result = [];
     for (let i = 0;i < turns.length; i++) {
       const sub = countSubSteps(turns[i]);
@@ -54302,7 +55285,7 @@ function usePresentationMode(turns) {
     return result;
   }, [turns]);
   const totalSteps = steps.length;
-  const turnBoundaries = import_react15.useMemo(() => {
+  const turnBoundaries = import_react13.useMemo(() => {
     const boundaries = [];
     for (let i = 0;i < steps.length; i++) {
       const next2 = steps[i + 1];
@@ -54312,7 +55295,7 @@ function usePresentationMode(turns) {
     }
     return boundaries;
   }, [steps]);
-  const { visibleTurns, visibleSubSteps } = import_react15.useMemo(() => {
+  const { visibleTurns, visibleSubSteps } = import_react13.useMemo(() => {
     if (!active || steps.length === 0) {
       return { visibleTurns: turns, visibleSubSteps: new Map };
     }
@@ -54326,22 +55309,22 @@ function usePresentationMode(turns) {
     subSteps.set(maxTurnIndex, step.subStep + 1);
     return { visibleTurns: visible, visibleSubSteps: subSteps };
   }, [active, currentStep, steps, turns]);
-  const enter = import_react15.useCallback(() => {
+  const enter = import_react13.useCallback(() => {
     setActive(true);
     setCurrentStep(0);
   }, []);
-  const exit3 = import_react15.useCallback(() => {
+  const exit3 = import_react13.useCallback(() => {
     setActive(false);
     setFullscreen(false);
     setCurrentStep(0);
   }, []);
-  const next = import_react15.useCallback(() => {
+  const next = import_react13.useCallback(() => {
     setCurrentStep((s2) => Math.min(s2 + 1, steps.length - 1));
   }, [steps.length]);
-  const prev = import_react15.useCallback(() => {
+  const prev = import_react13.useCallback(() => {
     setCurrentStep((s2) => Math.max(s2 - 1, 0));
   }, []);
-  const nextTurn = import_react15.useCallback(() => {
+  const nextTurn = import_react13.useCallback(() => {
     setCurrentStep((s2) => {
       for (const b of turnBoundaries) {
         if (b > s2)
@@ -54350,7 +55333,7 @@ function usePresentationMode(turns) {
       return s2;
     });
   }, [turnBoundaries]);
-  const prevTurn = import_react15.useCallback(() => {
+  const prevTurn = import_react13.useCallback(() => {
     setCurrentStep((s2) => {
       for (let i = turnBoundaries.length - 1;i >= 0; i--) {
         if (turnBoundaries[i] < s2)
@@ -54359,7 +55342,7 @@ function usePresentationMode(turns) {
       return s2;
     });
   }, [turnBoundaries]);
-  const toggleFullscreen = import_react15.useCallback(() => {
+  const toggleFullscreen = import_react13.useCallback(() => {
     setFullscreen((f) => !f);
   }, []);
   return {
@@ -54380,7 +55363,7 @@ function usePresentationMode(turns) {
 }
 
 // src/frontend/components/session/PresentationShell.tsx
-var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime22 = __toESM(require_jsx_dev_runtime(), 1);
 function PresentationShell({
   turns,
   onExit,
@@ -54388,9 +55371,9 @@ function PresentationShell({
   project,
   isSubAgent
 }) {
-  const scrollRef = import_react16.useRef(null);
+  const scrollRef = import_react14.useRef(null);
   const presentation = usePresentationMode(turns);
-  import_react16.useEffect(() => {
+  import_react14.useEffect(() => {
     if (turns.length > 0 && !presentation.active) {
       presentation.enter();
     }
@@ -54404,28 +55387,28 @@ function PresentationShell({
     onFullscreen: presentation.toggleFullscreen
   }, presentation.active);
   const currentStep = presentation.currentStep;
-  import_react16.useEffect(() => {
+  import_react14.useEffect(() => {
     if (currentStep >= 0 && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [currentStep]);
   const progress = presentation.totalSteps > 0 ? (presentation.currentStep + 1) / presentation.totalSteps * 100 : 0;
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
     className: `presentation-mode ${presentation.fullscreen ? "fullscreen" : ""}`,
     ref: scrollRef,
     style: { overflowY: "auto", height: "calc(100vh - 92px)" },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(MessageList, {
+      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(MessageList, {
         turns: presentation.visibleTurns,
         visibleSubSteps: presentation.visibleSubSteps,
         sessionId,
         project,
         isSubAgent
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
         className: "presentation-progress",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("span", {
             children: [
               "Step ",
               presentation.currentStep + 1,
@@ -54433,14 +55416,14 @@ function PresentationShell({
               presentation.totalSteps
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
             className: "presentation-progress-bar",
-            children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+            children: /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
               className: "presentation-progress-fill",
               style: { width: `${progress}%` }
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("span", {
             style: { fontSize: "0.75rem" },
             children: "← → step · ↑ ↓ message · Esc exit · F fullscreen"
           }, undefined, false, undefined, this)
@@ -54451,26 +55434,38 @@ function PresentationShell({
 }
 
 // src/frontend/components/session/SessionPresentation.tsx
-var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime23 = __toESM(require_jsx_dev_runtime(), 1);
 function SessionPresentation({ sessionId, project, onExit }) {
-  const [session, setSession] = import_react17.useState(null);
-  const [loading, setLoading] = import_react17.useState(true);
-  import_react17.useEffect(() => {
-    setLoading(true);
-    fetch(`/api/sessions/${sessionId}?project=${encodeURIComponent(project)}`).then((r2) => r2.json()).then((data) => {
-      setSession(data.session);
-      setLoading(false);
-    }).catch(() => setLoading(false));
-  }, [sessionId, project]);
+  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}?project=${encodeURIComponent(project)}`, [sessionId, project]);
   if (loading)
-    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV("div", {
       className: "loading",
       children: "Loading session..."
     }, undefined, false, undefined, this);
-  if (!session)
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV("div", {
+      className: "fetch-error",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime23.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: [
+            "Error: ",
+            error
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime23.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (!data?.session)
     return null;
-  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(PresentationShell, {
-    turns: session.turns,
+  return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(PresentationShell, {
+    turns: data.session.turns,
     onExit,
     sessionId,
     project
@@ -54478,44 +55473,38 @@ function SessionPresentation({ sessionId, project, onExit }) {
 }
 
 // src/frontend/components/session/SessionView.tsx
-var import_react18 = __toESM(require_react(), 1);
-var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime24 = __toESM(require_jsx_dev_runtime(), 1);
 function SessionView({ sessionId, project }) {
-  const [session, setSession] = import_react18.useState(null);
-  const [loading, setLoading] = import_react18.useState(true);
-  const [error, setError] = import_react18.useState(null);
-  import_react18.useEffect(() => {
-    setLoading(true);
-    setError(null);
-    fetch(`/api/sessions/${sessionId}?project=${encodeURIComponent(project)}`).then((r2) => {
-      if (!r2.ok)
-        throw new Error(`HTTP ${r2.status}`);
-      return r2.json();
-    }).then((data) => {
-      setSession(data.session);
-      setLoading(false);
-    }).catch((e) => {
-      setError(e.message);
-      setLoading(false);
-    });
-  }, [sessionId, project]);
+  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}?project=${encodeURIComponent(project)}`, [sessionId, project]);
   if (loading)
-    return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
       className: "loading",
       children: "Loading session..."
     }, undefined, false, undefined, this);
-  if (error)
-    return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
-      className: "loading",
-      style: { color: "var(--error)" },
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
+      className: "fetch-error",
       children: [
-        "Error: ",
-        error
+        /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: [
+            "Error: ",
+            error
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this);
-  if (!session)
+  }
+  if (!data?.session)
     return null;
-  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV(MessageList, {
+  const session = data.session;
+  return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(MessageList, {
     turns: session.turns,
     sessionId,
     project,
@@ -54525,32 +55514,43 @@ function SessionView({ sessionId, project }) {
 }
 
 // src/frontend/components/session/SubAgentPresentation.tsx
-var import_react19 = __toESM(require_react(), 1);
-var jsx_dev_runtime21 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime25 = __toESM(require_jsx_dev_runtime(), 1);
 function SubAgentPresentation({
   sessionId,
   project,
   agentId,
   onExit
 }) {
-  const [session, setSession] = import_react19.useState(null);
-  const [loading, setLoading] = import_react19.useState(true);
-  import_react19.useEffect(() => {
-    setLoading(true);
-    fetch(`/api/sessions/${sessionId}/subagents/${agentId}?project=${encodeURIComponent(project)}`).then((r2) => r2.json()).then((data) => {
-      setSession(data.session);
-      setLoading(false);
-    }).catch(() => setLoading(false));
-  }, [sessionId, project, agentId]);
+  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}/subagents/${agentId}?project=${encodeURIComponent(project)}`, [sessionId, project, agentId]);
   if (loading)
-    return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV("div", {
       className: "loading",
       children: "Loading sub-agent conversation..."
     }, undefined, false, undefined, this);
-  if (!session || session.turns.length === 0)
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV("div", {
+      className: "fetch-error",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime25.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: [
+            "Error: ",
+            error
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime25.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (!data?.session || data.session.turns.length === 0)
     return null;
-  return /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(PresentationShell, {
-    turns: session.turns,
+  return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(PresentationShell, {
+    turns: data.session.turns,
     onExit,
     sessionId,
     project,
@@ -54559,7 +55559,7 @@ function SubAgentPresentation({
 }
 
 // src/frontend/hooks/useHiddenProjects.ts
-var import_react20 = __toESM(require_react(), 1);
+var import_react15 = __toESM(require_react(), 1);
 var STORAGE_KEY = "klovi-hidden-projects";
 function loadHiddenIds() {
   try {
@@ -54581,8 +55581,8 @@ function persistHiddenIds(ids) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
 }
 function useHiddenProjects() {
-  const [hiddenIds, setHiddenIds] = import_react20.useState(() => loadHiddenIds());
-  const hide = import_react20.useCallback((encodedPath) => {
+  const [hiddenIds, setHiddenIds] = import_react15.useState(() => loadHiddenIds());
+  const hide = import_react15.useCallback((encodedPath) => {
     setHiddenIds((prev) => {
       const next = new Set(prev);
       next.add(encodedPath);
@@ -54590,7 +55590,7 @@ function useHiddenProjects() {
       return next;
     });
   }, []);
-  const unhide = import_react20.useCallback((encodedPath) => {
+  const unhide = import_react15.useCallback((encodedPath) => {
     setHiddenIds((prev) => {
       const next = new Set(prev);
       next.delete(encodedPath);
@@ -54598,70 +55598,12 @@ function useHiddenProjects() {
       return next;
     });
   }, []);
-  const isHidden = import_react20.useCallback((encodedPath) => hiddenIds.has(encodedPath), [hiddenIds]);
+  const isHidden = import_react15.useCallback((encodedPath) => hiddenIds.has(encodedPath), [hiddenIds]);
   return { hiddenIds, hide, unhide, isHidden };
 }
 
-// src/frontend/hooks/useTheme.ts
-var import_react21 = __toESM(require_react(), 1);
-function getSystemTheme() {
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function resolveTheme(setting) {
-  if (setting === "system")
-    return getSystemTheme();
-  return setting;
-}
-function useTheme() {
-  const [setting, setSetting] = import_react21.useState(() => {
-    const stored = localStorage.getItem("klovi-theme");
-    if (stored === "light" || stored === "dark")
-      return stored;
-    return "system";
-  });
-  const [resolved, setResolved] = import_react21.useState(() => resolveTheme(setting));
-  import_react21.useEffect(() => {
-    document.documentElement.setAttribute("data-theme", resolved);
-  }, [resolved]);
-  import_react21.useEffect(() => {
-    localStorage.setItem("klovi-theme", setting);
-    setResolved(resolveTheme(setting));
-  }, [setting]);
-  import_react21.useEffect(() => {
-    if (setting !== "system")
-      return;
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    const handler = () => setResolved(getSystemTheme());
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [setting]);
-  const cycle = import_react21.useCallback(() => {
-    setSetting((s2) => {
-      if (s2 === "system")
-        return "light";
-      if (s2 === "light")
-        return "dark";
-      return "system";
-    });
-  }, []);
-  return { setting, resolved, cycle };
-}
-function useFontSize() {
-  const [size, setSize] = import_react21.useState(() => {
-    const stored = localStorage.getItem("klovi-font-size");
-    return stored ? parseInt(stored, 10) : 15;
-  });
-  import_react21.useEffect(() => {
-    document.documentElement.style.setProperty("--font-size-base", `${size}px`);
-    localStorage.setItem("klovi-font-size", String(size));
-  }, [size]);
-  const increase = import_react21.useCallback(() => setSize((s2) => Math.min(s2 + 2, 28)), []);
-  const decrease = import_react21.useCallback(() => setSize((s2) => Math.max(s2 - 2, 10)), []);
-  return { size, increase, decrease };
-}
-
 // src/frontend/App.tsx
-var jsx_dev_runtime22 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime26 = __toESM(require_jsx_dev_runtime(), 1);
 function viewToHash(view) {
   if (view.kind === "hidden")
     return "#/hidden";
@@ -54734,7 +55676,7 @@ function getHeaderInfo(view) {
 }
 function getSidebarContent(view, selectProject, hiddenIds, hide, goHidden, selectSession, goHome) {
   if (view.kind === "home" || view.kind === "hidden") {
-    return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(ProjectList, {
+    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(ProjectList, {
       onSelect: selectProject,
       hiddenIds,
       onHide: hide,
@@ -54742,21 +55684,21 @@ function getSidebarContent(view, selectProject, hiddenIds, hide, goHidden, selec
     }, undefined, false, undefined, this);
   }
   if (view.kind === "project") {
-    return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SessionList, {
+    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionList, {
       project: view.project,
       onSelect: selectSession,
       onBack: goHome
     }, undefined, false, undefined, this);
   }
   if (view.kind === "subagent") {
-    return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SessionList, {
+    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionList, {
       project: view.project,
       onSelect: selectSession,
       onBack: goHome,
       selectedId: view.sessionId
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SessionList, {
+  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionList, {
     project: view.project,
     onSelect: selectSession,
     onBack: goHome,
@@ -54767,17 +55709,17 @@ function App() {
   const { setting: themeSetting, cycle: cycleTheme } = useTheme();
   const { size: fontSize, increase, decrease } = useFontSize();
   const { hiddenIds, hide, unhide } = useHiddenProjects();
-  const [view, setView] = import_react22.useState({ kind: "home" });
-  const [ready, setReady] = import_react22.useState(false);
-  const [searchOpen, setSearchOpen] = import_react22.useState(false);
-  const [searchSessions, setSearchSessions] = import_react22.useState([]);
-  import_react22.useEffect(() => {
+  const [view, setView] = import_react16.useState({ kind: "home" });
+  const [ready, setReady] = import_react16.useState(false);
+  const [searchOpen, setSearchOpen] = import_react16.useState(false);
+  const [searchSessions, setSearchSessions] = import_react16.useState([]);
+  import_react16.useEffect(() => {
     restoreFromHash().then((v2) => {
       setView(v2);
       setReady(true);
     });
   }, []);
-  import_react22.useEffect(() => {
+  import_react16.useEffect(() => {
     if (!ready)
       return;
     const newHash = viewToHash(view);
@@ -54785,7 +55727,7 @@ function App() {
       history.pushState(null, "", newHash);
     }
   }, [view, ready]);
-  import_react22.useEffect(() => {
+  import_react16.useEffect(() => {
     const handler = () => {
       restoreFromHash().then(setView);
     };
@@ -54808,19 +55750,19 @@ function App() {
   const goHome = () => setView({ kind: "home" });
   const goHidden = () => setView({ kind: "hidden" });
   const canPresent = view.kind === "session" || view.kind === "subagent";
-  const togglePresentation = import_react22.useCallback(() => {
+  const togglePresentation = import_react16.useCallback(() => {
     if (view.kind === "session" || view.kind === "subagent") {
       setView({ ...view, presenting: !view.presenting });
     }
   }, [view]);
-  const fetchSearchSessions = import_react22.useCallback(() => {
+  const fetchSearchSessions = import_react16.useCallback(() => {
     fetch("/api/search/sessions").then((res) => res.json()).then((data) => setSearchSessions(data.sessions)).catch(() => {});
   }, []);
-  const openSearch = import_react22.useCallback(() => {
+  const openSearch = import_react16.useCallback(() => {
     setSearchOpen(true);
     fetchSearchSessions();
   }, [fetchSearchSessions]);
-  const handleSearchSelect = import_react22.useCallback(async (encodedPath, sessionId) => {
+  const handleSearchSelect = import_react16.useCallback(async (encodedPath, sessionId) => {
     setSearchOpen(false);
     try {
       const [projectsRes, sessionsRes] = await Promise.all([
@@ -54836,7 +55778,7 @@ function App() {
       }
     } catch {}
   }, []);
-  import_react22.useEffect(() => {
+  import_react16.useEffect(() => {
     function handleCmdK(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -54850,7 +55792,7 @@ function App() {
     window.addEventListener("keydown", handleCmdK);
     return () => window.removeEventListener("keydown", handleCmdK);
   }, [fetchSearchSessions]);
-  import_react22.useEffect(() => {
+  import_react16.useEffect(() => {
     function handleKeyDown(e) {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
         return;
@@ -54881,24 +55823,24 @@ function App() {
   const sidebarContent = getSidebarContent(view, selectProject, hiddenIds, hide, goHidden, selectSession, goHome);
   const isPresenting = canPresent && view.presenting;
   if (!ready) {
-    return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
       className: "loading",
       children: "Loading..."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(jsx_dev_runtime22.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
     children: [
-      searchOpen && /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SearchModal, {
+      searchOpen && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SearchModal, {
         sessions: searchSessions,
         onSelect: handleSearchSelect,
         onClose: () => setSearchOpen(false)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(Layout, {
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(Layout, {
         sidebar: sidebarContent,
         hideSidebar: isPresenting,
         onSearchClick: openSearch,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(Header, {
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(Header, {
             title: headerTitle,
             breadcrumb,
             copyCommand: view.kind === "session" ? `claude --resume ${view.session.sessionId}` : undefined,
@@ -54913,69 +55855,73 @@ function App() {
             onTogglePresentation: togglePresentation,
             showPresentationToggle: canPresent
           }, undefined, false, undefined, this),
-          view.kind === "home" && /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(jsx_dev_runtime22.Fragment, {
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(ErrorBoundary, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
+              view.kind === "home" && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
+                children: [
+                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+                    className: "empty-state",
+                    children: [
+                      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("img", {
+                        src: favicon_default,
+                        alt: "",
+                        width: "64",
+                        height: "64",
+                        className: "empty-state-logo"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+                        className: "empty-state-title",
+                        children: "Welcome to Klovi"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("p", {
+                        children: "Select a project from the sidebar to browse your Claude Code sessions"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(DashboardStats, {}, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              view.kind === "hidden" && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(HiddenProjectList, {
+                hiddenIds,
+                onUnhide: unhide,
+                onBack: goHome
+              }, undefined, false, undefined, this),
+              view.kind === "project" && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
                 className: "empty-state",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("img", {
-                    src: favicon_default,
-                    alt: "",
-                    width: "64",
-                    height: "64",
-                    className: "empty-state-logo"
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
+                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
                     className: "empty-state-title",
-                    children: "Welcome to Klovi"
+                    children: "Select a session"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("p", {
-                    children: "Select a project from the sidebar to browse your Claude Code sessions"
+                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("p", {
+                    children: "Choose a conversation from the sidebar"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(DashboardStats, {}, undefined, false, undefined, this)
+              view.kind === "session" && (view.presenting ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionPresentation, {
+                sessionId: view.session.sessionId,
+                project: view.project.encodedPath,
+                onExit: togglePresentation
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionView, {
+                sessionId: view.session.sessionId,
+                project: view.project.encodedPath
+              }, undefined, false, undefined, this)),
+              view.kind === "subagent" && (view.presenting ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SubAgentPresentation, {
+                sessionId: view.sessionId,
+                project: view.project.encodedPath,
+                agentId: view.agentId,
+                onExit: togglePresentation
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SubAgentView, {
+                sessionId: view.sessionId,
+                project: view.project.encodedPath,
+                agentId: view.agentId
+              }, undefined, false, undefined, this))
             ]
-          }, undefined, true, undefined, this),
-          view.kind === "hidden" && /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(HiddenProjectList, {
-            hiddenIds,
-            onUnhide: unhide,
-            onBack: goHome
-          }, undefined, false, undefined, this),
-          view.kind === "project" && /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
-            className: "empty-state",
-            children: [
-              /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
-                className: "empty-state-title",
-                children: "Select a session"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("p", {
-                children: "Choose a conversation from the sidebar"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          view.kind === "session" && (view.presenting ? /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SessionPresentation, {
-            sessionId: view.session.sessionId,
-            project: view.project.encodedPath,
-            onExit: togglePresentation
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SessionView, {
-            sessionId: view.session.sessionId,
-            project: view.project.encodedPath
-          }, undefined, false, undefined, this)),
-          view.kind === "subagent" && (view.presenting ? /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SubAgentPresentation, {
-            sessionId: view.sessionId,
-            project: view.project.encodedPath,
-            agentId: view.agentId,
-            onExit: togglePresentation
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime22.jsxDEV(SubAgentView, {
-            sessionId: view.sessionId,
-            project: view.project.encodedPath,
-            agentId: view.agentId
-          }, undefined, false, undefined, this))
+          }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 var root4 = import_client.createRoot(document.getElementById("root"));
-root4.render(/* @__PURE__ */ jsx_dev_runtime22.jsxDEV(App, {}, undefined, false, undefined, this));
+root4.render(/* @__PURE__ */ jsx_dev_runtime26.jsxDEV(App, {}, undefined, false, undefined, this));