@cookielab.io/klovi 1.0.0 → 2.0.0

package/dist/public/{index-v6xty79x.js → index-g1psfqj1.js}

@@ -40924,7 +40924,7 @@ var init_all = __esm(() => {
 var favicon_default = "./favicon-39pjvakn.svg";
 
 // src/frontend/App.tsx
-var import_react16 = __toESM(require_react(), 1);
+var import_react19 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/frontend/hooks/useFetch.ts
@@ -40937,9 +40937,10 @@ function useFetch(url, deps) {
   const retry = import_react.useCallback(() => setRetryCount((c) => c + 1), []);
   import_react.useEffect(() => {
     let cancelled = false;
+    const controller = new AbortController;
     setLoading(true);
     setError(null);
-    fetch(url).then((r) => {
+    fetch(url, { signal: controller.signal }).then((r) => {
       if (!r.ok)
         throw new Error(`HTTP ${r.status}`);
       return r.json();
@@ -40949,13 +40950,14 @@ function useFetch(url, deps) {
         setLoading(false);
       }
     }).catch((e) => {
-      if (!cancelled) {
+      if (!cancelled && !controller.signal.aborted) {
         setError(e instanceof Error ? e.message : String(e));
         setLoading(false);
       }
     });
     return () => {
       cancelled = true;
+      controller.abort();
     };
   }, [url, retryCount, ...deps]);
   return { data, loading, error, retry };
@@ -41422,6 +41424,44 @@ function Layout({ sidebar, hideSidebar, onSearchClick, children }) {
   }, undefined, true, undefined, this);
 }
 
+// src/frontend/hooks/useSessionData.ts
+function buildSessionUrl(sessionId, project) {
+  return `/api/sessions/${encodeURIComponent(sessionId)}?project=${encodeURIComponent(project)}`;
+}
+function buildSubAgentSessionUrl(sessionId, project, agentId) {
+  return `/api/sessions/${encodeURIComponent(sessionId)}/subagents/${encodeURIComponent(agentId)}?project=${encodeURIComponent(project)}`;
+}
+function useSessionData(sessionId, project) {
+  return useFetch(buildSessionUrl(sessionId, project), [sessionId, project]);
+}
+function useSubAgentSessionData(sessionId, project, agentId) {
+  return useFetch(buildSubAgentSessionUrl(sessionId, project, agentId), [
+    sessionId,
+    project,
+    agentId
+  ]);
+}
+
+// src/frontend/components/ui/FetchError.tsx
+var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
+function FetchError({ error, onRetry, showPrefix = false }) {
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+    className: "fetch-error",
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+        className: "fetch-error-message",
+        children: showPrefix ? `Error: ${error}` : error
+      }, undefined, false, undefined, this),
+      onRetry ? /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("button", {
+        type: "button",
+        className: "btn btn-sm",
+        onClick: onRetry,
+        children: "Retry"
+      }, undefined, false, undefined, this) : null
+    ]
+  }, undefined, true, undefined, this);
+}
+
 // src/frontend/utils/time.ts
 function formatTimestamp(iso) {
   const date = new Date(iso);
@@ -41499,7 +41539,7 @@ 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);
+var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
 
 class ErrorBoundary extends import_react3.Component {
   state = { error: null };
@@ -41514,17 +41554,17 @@ class ErrorBoundary extends import_react3.Component {
     if (!error)
       return this.props.children;
     if (this.props.inline) {
-      return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
         className: "error-card",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
             className: "error-card-header",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                 className: "error-card-title",
                 children: "Failed to render"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("button", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("button", {
                 type: "button",
                 className: "btn btn-sm",
                 onClick: this.retry,
@@ -41532,13 +41572,13 @@ class ErrorBoundary extends import_react3.Component {
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("details", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("details", {
             className: "error-card-details",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("summary", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("summary", {
                 children: "Error details"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("pre", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("pre", {
                 children: error.stack || error.message
               }, undefined, false, undefined, this)
             ]
@@ -41546,18 +41586,18 @@ class ErrorBoundary extends import_react3.Component {
         ]
       }, undefined, true, undefined, this);
     }
-    return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
       className: "error-view",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+        /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
           className: "error-view-title",
           children: "Something went wrong"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+        /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
           className: "error-view-message",
           children: error.message
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("button", {
+        /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("button", {
           type: "button",
           className: "btn btn-primary",
           onClick: this.retry,
@@ -41899,12 +41939,12 @@ function productionCreate(_, jsx, jsxs) {
     return key ? fn(type, props, key) : fn(type, props);
   }
 }
-function developmentCreate(filePath, jsxDEV6) {
+function developmentCreate(filePath, jsxDEV7) {
   return create2;
   function create2(node, type, props, key) {
     const isStaticChildren = Array.isArray(props.children);
     const point3 = pointStart(node);
-    return jsxDEV6(type, props, key, isStaticChildren, {
+    return jsxDEV7(type, props, key, isStaticChildren, {
       columnNumber: point3 ? point3.column - 1 : undefined,
       fileName: filePath,
       lineNumber: point3 ? point3.line : undefined
@@ -53821,23 +53861,23 @@ function useFontSize() {
 }
 
 // src/frontend/components/ui/CodeBlock.tsx
-var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime7 = __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", {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
     className: "code-block-wrapper",
     children: [
-      language && /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+      language && /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
         className: "code-block-header",
-        children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
+        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
           children: language
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
         className: "code-block-content",
-        children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV(prism_default2, {
+        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(prism_default2, {
           language: lang,
           style: style2,
           customStyle: {
@@ -53855,7 +53895,7 @@ function CodeBlock({ language, children }) {
 }
 
 // src/frontend/components/ui/MarkdownRenderer.tsx
-var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
 var FILE_REF_RE = /@([\w./-]+\.\w+)/g;
 function renderTextWithFileRefs(text7) {
   const parts = [];
@@ -53866,7 +53906,7 @@ function renderTextWithFileRefs(text7) {
     if (match.index > last) {
       parts.push(text7.slice(last, match.index));
     }
-    parts.push(/* @__PURE__ */ jsx_dev_runtime7.jsxDEV("code", {
+    parts.push(/* @__PURE__ */ jsx_dev_runtime8.jsxDEV("code", {
       className: "file-ref",
       children: [
         "@",
@@ -53880,18 +53920,18 @@ function renderTextWithFileRefs(text7) {
     return text7;
   if (last < text7.length)
     parts.push(text7.slice(last));
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(jsx_dev_runtime7.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(jsx_dev_runtime8.Fragment, {
     children: parts
   }, undefined, false, undefined, this);
 }
 function MarkdownRenderer({ content: content3 }) {
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
     className: "markdown-content",
-    children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(Markdown, {
+    children: /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(Markdown, {
       remarkPlugins: [remarkGfm],
       components: {
         p({ children }) {
-          return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("p", {
+          return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("p", {
             children: import_react8.default.Children.map(children, (child) => typeof child === "string" ? renderTextWithFileRefs(child) : child)
           }, undefined, false, undefined, this);
         },
@@ -53900,19 +53940,19 @@ function MarkdownRenderer({ content: content3 }) {
           const text7 = String(children).replace(/\n$/, "");
           if (!match && !text7.includes(`
 `)) {
-            return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("code", {
+            return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("code", {
               className,
               ...props,
               children
             }, undefined, false, undefined, this);
           }
-          return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(CodeBlock, {
+          return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(CodeBlock, {
             language: match?.[1],
             children: text7
           }, undefined, false, undefined, this);
         },
         a({ href, children, ...props }) {
-          return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("a", {
+          return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("a", {
             href,
             target: "_blank",
             rel: "noopener noreferrer",
@@ -53948,9 +53988,6 @@ function groupContentBlocks(blocks) {
 }
 
 // src/frontend/utils/model.ts
-function isClaudeModel(model) {
-  return model.startsWith("claude-");
-}
 function shortModel(model) {
   const claudeMatch = model.match(/claude-(opus|sonnet|haiku)-(\d+)(?:-(\d{1,2}))?(?:-\d{8,})?$/);
   if (claudeMatch) {
@@ -53980,29 +54017,29 @@ function shortModel(model) {
 
 // src/frontend/components/ui/CollapsibleSection.tsx
 var import_react9 = __toESM(require_react(), 1);
-var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime9 = __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", {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
     className: "collapsible",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("button", {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("button", {
         type: "button",
         className: "collapsible-header",
         onClick: () => setOpen(!open),
         children: [
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
             className: `collapsible-chevron ${open ? "open" : ""}`,
             children: "▶"
           }, undefined, false, undefined, this),
           title
         ]
       }, undefined, true, undefined, this),
-      open && /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+      open && /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
         className: "collapsible-content",
         children
       }, undefined, false, undefined, this)
@@ -54010,8 +54047,61 @@ function CollapsibleSection({
   }, undefined, true, undefined, this);
 }
 
+// src/server/plugins/shared/text-utils.ts
+function truncate(text7, maxLength) {
+  return text7.length <= maxLength ? text7 : `${text7.slice(0, maxLength)}...`;
+}
+
+// src/server/plugins/codex-cli/extractors.ts
+var codexSummaryExtractors = {
+  command_execution: (i) => truncate(String(i.command || ""), 80),
+  file_change: (i) => {
+    const changes = i.changes;
+    if (Array.isArray(changes) && changes.length > 0) {
+      return String(changes[0].path || "");
+    }
+    return "";
+  },
+  web_search: (i) => truncate(String(i.query || ""), 60)
+};
+var codexInputFormatters = {
+  command_execution: (i) => String(i.command || ""),
+  file_change: (i) => {
+    const changes = i.changes;
+    if (Array.isArray(changes)) {
+      return changes.map((c2) => `${c2.kind || "change"}: ${c2.path || ""}`).join(`
+`);
+    }
+    return JSON.stringify(i, null, 2);
+  },
+  web_search: (i) => `Query: ${String(i.query || "")}`
+};
+
+// src/server/plugins/opencode/extractors.ts
+var openCodeSummaryExtractors = {};
+var openCodeInputFormatters = {};
+
+// src/frontend/plugin-registry.ts
+var pluginRegistry = new Map;
+function registerFrontendPlugin(id, plugin) {
+  pluginRegistry.set(id, plugin);
+}
+function getFrontendPlugin(id) {
+  return pluginRegistry.get(id);
+}
+registerFrontendPlugin("codex-cli", {
+  displayName: "Codex",
+  summaryExtractors: codexSummaryExtractors,
+  inputFormatters: codexInputFormatters
+});
+registerFrontendPlugin("opencode", {
+  displayName: "OpenCode",
+  summaryExtractors: openCodeSummaryExtractors,
+  inputFormatters: openCodeInputFormatters
+});
+
 // src/frontend/components/ui/DiffView.tsx
-var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
 function formatDiff(oldString, newString) {
   const lines = [];
   if (oldString !== "") {
@@ -54033,18 +54123,18 @@ 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", {
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
     className: "diff-view-wrapper",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
         className: "diff-view-header",
-        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
           children: filePath
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
         className: "diff-view-content",
-        children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(prism_default2, {
+        children: /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(prism_default2, {
           language: "diff",
           style: style2,
           customStyle: {
@@ -54061,6 +54151,9 @@ function DiffView({ filePath, oldString, newString }) {
   }, undefined, true, undefined, this);
 }
 
+// src/frontend/components/message/SmartToolOutput.tsx
+var import_react11 = __toESM(require_react(), 1);
+
 // src/frontend/utils/format-detector.ts
 function detectOutputFormat(output) {
   const trimmed = output.trim();
@@ -54155,68 +54248,103 @@ function hasCodeStructure(text7) {
   return lines.length >= 2 && /^(export|import|const|let|var|function|class)\s/.test(text7);
 }
 
+// src/frontend/components/ui/ImageLightbox.tsx
+var import_react10 = __toESM(require_react(), 1);
+var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+function ImageLightbox({ src, onClose }) {
+  const [visible, setVisible] = import_react10.useState(false);
+  const handleClose = import_react10.useCallback(() => {
+    setVisible(false);
+    setTimeout(onClose, 200);
+  }, [onClose]);
+  import_react10.useEffect(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setVisible(true));
+    });
+  }, []);
+  import_react10.useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape")
+        handleClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [handleClose]);
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+    className: `lightbox-overlay ${visible ? "lightbox-visible" : ""}`,
+    onClick: handleClose,
+    children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("img", {
+      className: "lightbox-image",
+      src,
+      alt: "Full size preview"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
 // src/frontend/components/message/SmartToolOutput.tsx
-var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime12 = __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;
+  const [lightboxSrc, setLightboxSrc] = import_react11.useState(null);
+  const closeLightbox = import_react11.useCallback(() => setLightboxSrc(null), []);
   if (!output && (!resultImages || resultImages.length === 0))
     return null;
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
         className: "tool-section-label",
         children: "Output"
       }, undefined, false, undefined, this),
-      output && (detectedLang && !isError ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(CodeBlock, {
+      output && (detectedLang && !isError ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(CodeBlock, {
         language: detectedLang,
         children: truncated
-      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
         className: `tool-call-output ${isError ? "tool-call-error" : ""}`,
         children: truncated
       }, undefined, false, undefined, this)),
-      wasTruncated && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      wasTruncated && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
         className: "tool-call-truncated",
         children: "... (truncated)"
       }, undefined, false, undefined, this),
-      resultImages && resultImages.length > 0 && /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      resultImages && resultImages.length > 0 && /* @__PURE__ */ jsx_dev_runtime12.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)
+        children: resultImages.map((img, i) => /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("img", {
+          className: "tool-result-image",
+          src: `data:${img.mediaType};base64,${img.data}`,
+          alt: `Tool result ${i + 1}`,
+          onClick: () => setLightboxSrc(`data:${img.mediaType};base64,${img.data}`)
         }, i, false, undefined, this))
+      }, undefined, false, undefined, this),
+      lightboxSrc && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(ImageLightbox, {
+        src: lightboxSrc,
+        onClose: closeLightbox
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 
 // src/frontend/components/message/BashToolContent.tsx
-var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime13 = __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, {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(jsx_dev_runtime13.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
         style: { marginBottom: 8 },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
             className: "tool-section-label",
             children: "Command"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(CodeBlock, {
+          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(CodeBlock, {
             language: "bash",
             children: command
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(SmartToolOutput, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(SmartToolOutput, {
         output: call.result,
         isError: call.isError,
         resultImages: call.resultImages
@@ -54226,38 +54354,46 @@ function BashToolContent({ call }) {
 }
 
 // src/frontend/components/message/ToolCall.tsx
-var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime14 = __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 hasInputFormatter(call, pluginId) {
+  if (pluginId) {
+    const plugin = getFrontendPlugin(pluginId);
+    if (plugin?.inputFormatters[call.name])
+      return true;
+  }
+  return call.name in INPUT_FORMATTERS;
+}
+function isJsonFallbackInput(call, pluginId) {
+  return !hasInputFormatter(call, pluginId);
 }
-function DefaultToolContent({ call }) {
-  const formattedInput = formatToolInput(call);
-  const jsonInput = isJsonFallbackInput(call);
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
+function DefaultToolContent({ call, pluginId }) {
+  const formattedInput = formatToolInput(call, pluginId);
+  const jsonInput = isJsonFallbackInput(call, pluginId);
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(jsx_dev_runtime14.Fragment, {
     children: [
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
         style: { marginBottom: 8 },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
             className: "tool-section-label",
             children: "Input"
           }, undefined, false, undefined, this),
-          jsonInput ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(CodeBlock, {
+          jsonInput ? /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(CodeBlock, {
             language: "json",
             children: formattedInput
-          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+          }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
             className: "tool-call-input",
             children: formattedInput
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(SmartToolOutput, {
+      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(SmartToolOutput, {
         output: call.result,
         isError: call.isError,
         resultImages: call.resultImages
@@ -54265,41 +54401,41 @@ function DefaultToolContent({ call }) {
     ]
   }, undefined, true, undefined, this);
 }
-function ToolCall({ call, sessionId, project }) {
-  const summary = getToolSummary(call);
+function ToolCall({ call, sessionId, project, pluginId }) {
+  const summary = getToolSummary(call, pluginId);
   const mcpServer = getMcpServer(call.name);
   const skillName = getSkillName(call);
   const hasSubAgent = call.name === "Task" && call.subAgentId && sessionId && project;
   const displayName = hasSubAgent ? "Sub-Agent" : mcpServer ? call.name.split("__").slice(1).join("__").replace(/__/g, " > ") : skillName ?? call.name;
-  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
     className: "tool-call",
-    children: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(CollapsibleSection, {
-      title: /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
+    children: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(CollapsibleSection, {
+      title: /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
         children: [
-          mcpServer && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
+          mcpServer && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             className: "tool-mcp-server",
             children: mcpServer
           }, undefined, false, undefined, this),
-          skillName && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
+          skillName && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             className: "tool-skill-badge",
             children: "skill"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             className: "tool-call-name",
             children: displayName
           }, undefined, false, undefined, this),
-          summary && !skillName && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
+          summary && !skillName && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             className: "tool-call-summary",
             children: [
               " — ",
               summary
             ]
           }, undefined, true, undefined, this),
-          call.isError && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
+          call.isError && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
             className: "tool-call-error",
             children: " (error)"
           }, undefined, false, undefined, this),
-          hasSubAgent && /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("a", {
+          hasSubAgent && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("a", {
             className: "subagent-link",
             href: `#/${project}/${sessionId}/subagent/${call.subAgentId}`,
             onClick: (e) => e.stopPropagation(),
@@ -54307,14 +54443,15 @@ function ToolCall({ call, sessionId, project }) {
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      children: isEditWithDiff(call) ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(DiffView, {
+      children: isEditWithDiff(call) ? /* @__PURE__ */ jsx_dev_runtime14.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, {
+      }, undefined, false, undefined, this) : call.name === "Bash" ? /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(BashToolContent, {
         call
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(DefaultToolContent, {
+        call,
+        pluginId
       }, undefined, false, undefined, this)
     }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
@@ -54333,7 +54470,7 @@ function getSkillName(call) {
 function getAskUserQuestionSummary(input) {
   if (Array.isArray(input.questions) && input.questions.length > 0) {
     const q2 = input.questions[0];
-    return truncate(String(q2.question || ""), 60);
+    return truncate2(String(q2.question || ""), 60);
   }
   return "";
 }
@@ -54342,16 +54479,16 @@ var fileSummaryExtractors = {
   Write: (i) => String(i.file_path || ""),
   Edit: (i) => String(i.file_path || ""),
   Glob: (i) => String(i.pattern || ""),
-  Grep: (i) => truncate(String(i.pattern || ""), 60),
+  Grep: (i) => truncate2(String(i.pattern || ""), 60),
   NotebookEdit: (i) => String(i.notebook_path || ""),
   NotebookRead: (i) => String(i.notebook_path || "")
 };
 var shellSummaryExtractors = {
-  Bash: (i) => truncate(String(i.command || ""), 80)
+  Bash: (i) => truncate2(String(i.command || ""), 80)
 };
 var agentSummaryExtractors = {
-  Task: (i) => truncate(String(i.description || ""), 60),
-  TaskCreate: (i) => truncate(String(i.subject || ""), 60),
+  Task: (i) => truncate2(String(i.description || ""), 60),
+  TaskCreate: (i) => truncate2(String(i.subject || ""), 60),
   TaskUpdate: (i) => `#${i.taskId || "?"}${i.status ? ` → ${i.status}` : ""}`,
   TaskList: () => "List all tasks",
   TaskGet: (i) => `#${i.taskId || "?"}`,
@@ -54360,11 +54497,11 @@ var agentSummaryExtractors = {
   KillShell: (i) => String(i.task_id || i.shell_id || ""),
   EnterPlanMode: () => "Enter plan mode",
   ExitPlanMode: () => "Exit plan mode",
-  TodoWrite: (i) => truncate(String(i.subject || ""), 60)
+  TodoWrite: (i) => truncate2(String(i.subject || ""), 60)
 };
 var webSummaryExtractors = {
-  WebFetch: (i) => truncate(String(i.url || ""), 60),
-  WebSearch: (i) => truncate(String(i.query || ""), 60)
+  WebFetch: (i) => truncate2(String(i.url || ""), 60),
+  WebSearch: (i) => truncate2(String(i.query || ""), 60)
 };
 var interactionSummaryExtractors = {
   AskUserQuestion: (i) => getAskUserQuestionSummary(i),
@@ -54377,7 +54514,13 @@ var SUMMARY_EXTRACTORS = {
   ...webSummaryExtractors,
   ...interactionSummaryExtractors
 };
-function getToolSummary(call) {
+function getToolSummary(call, pluginId) {
+  if (pluginId) {
+    const plugin = getFrontendPlugin(pluginId);
+    const pluginExtractor = plugin?.summaryExtractors[call.name];
+    if (pluginExtractor)
+      return pluginExtractor(call.input);
+  }
   if (call.name.startsWith("mcp__")) {
     return call.name.split("__").slice(2).join(" > ") || "";
   }
@@ -54413,7 +54556,7 @@ function formatWriteInput(input) {
     parts.push(`File: ${input.file_path}`);
   if (input.content)
     parts.push(`Content:
-${truncate(String(input.content), MAX_CONTENT_LENGTH)}`);
+${truncate2(String(input.content), MAX_CONTENT_LENGTH)}`);
   return parts.join(`
 
 `);
@@ -54452,7 +54595,7 @@ function formatNotebookEditInput(input) {
     parts.push(`Mode: ${input.edit_mode}`);
   if (input.new_source)
     parts.push(`Source:
-${truncate(String(input.new_source), MAX_CONTENT_LENGTH)}`);
+${truncate2(String(input.new_source), MAX_CONTENT_LENGTH)}`);
   return parts.join(`
 `) || JSON.stringify(input, null, 2);
 }
@@ -54513,11 +54656,17 @@ var INPUT_FORMATTERS = {
   ...agentInputFormatters,
   ...interactionInputFormatters
 };
-function formatToolInput(call) {
+function formatToolInput(call, pluginId) {
+  if (pluginId) {
+    const plugin = getFrontendPlugin(pluginId);
+    const pluginFormatter = plugin?.inputFormatters[call.name];
+    if (pluginFormatter)
+      return pluginFormatter(call.input);
+  }
   const formatter = INPUT_FORMATTERS[call.name];
   return formatter ? formatter(call.input) : JSON.stringify(call.input, null, 2);
 }
-function truncate(s2, max) {
+function truncate2(s2, max) {
   if (s2.length <= max)
     return s2;
   return `${s2.slice(0, max)}...`;
@@ -54529,28 +54678,28 @@ function truncateOutput(s2) {
 }
 
 // src/frontend/components/message/ThinkingBlock.tsx
-var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime15 = __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_runtime13.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
     className: "thinking-block",
-    children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(CollapsibleSection, {
-      title: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
+    children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(CollapsibleSection, {
+      title: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
             style: { color: "var(--text-muted)" },
             children: "Thinking:"
           }, undefined, false, undefined, this),
           " ",
-          /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
             className: "tool-call-summary",
             children: preview
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
+      children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
         className: "thinking-content",
-        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(MarkdownRenderer, {
+        children: /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(MarkdownRenderer, {
           content: block.text
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this)
@@ -54559,42 +54708,43 @@ function ThinkingBlock({ block }) {
 }
 
 // src/frontend/components/message/AssistantMessage.tsx
-var jsx_dev_runtime14 = __toESM(require_jsx_dev_runtime(), 1);
-function renderGroup(group, sessionId, project) {
+var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
+function renderGroup(group, sessionId, project, pluginId) {
   return group.map((block, i) => {
     if (block.type === "thinking") {
-      return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(ThinkingBlock, {
+      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ThinkingBlock, {
         block: block.block
       }, `thinking-${i}`, false, undefined, this);
     }
     if (block.type === "text") {
-      return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(MarkdownRenderer, {
+      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(MarkdownRenderer, {
         content: block.text
       }, `text-${i}`, false, undefined, this);
     }
-    return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(ToolCall, {
+    return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ToolCall, {
       call: block.call,
       sessionId,
-      project
+      project,
+      pluginId
     }, `tool-${i}`, false, undefined, this);
   });
 }
 function UsageFooter({ usage }) {
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
     className: "token-usage",
     children: [
       usage.inputTokens.toLocaleString(),
       " in / ",
       usage.outputTokens.toLocaleString(),
       " out",
-      usage.cacheReadTokens && usage.cacheReadTokens > 0 && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
+      usage.cacheReadTokens && usage.cacheReadTokens > 0 && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
         children: [
           " · ",
           usage.cacheReadTokens.toLocaleString(),
           " cache read"
         ]
       }, undefined, true, undefined, this),
-      usage.cacheCreationTokens && usage.cacheCreationTokens > 0 && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
+      usage.cacheCreationTokens && usage.cacheCreationTokens > 0 && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
         children: [
           " · ",
           usage.cacheCreationTokens.toLocaleString(),
@@ -54608,7 +54758,8 @@ function AssistantMessage({
   turn,
   visibleSubSteps,
   sessionId,
-  project
+  project,
+  pluginId
 }) {
   const groups = groupContentBlocks(turn.contentBlocks);
   const limit = visibleSubSteps !== undefined ? visibleSubSteps : groups.length;
@@ -54619,21 +54770,21 @@ function AssistantMessage({
   const introGroup = hasNonText && firstIsText ? visibleGroups[0] : null;
   const treeGroups = hasNonText ? introGroup ? visibleGroups.slice(1) : visibleGroups : [];
   const flatGroups = hasNonText ? [] : visibleGroups;
-  return /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
     className: "turn",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
         className: "turn-header",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
             className: "turn-badge turn-badge-assistant",
             children: "Assistant"
           }, undefined, false, undefined, this),
-          turn.model && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("span", {
+          turn.model && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
             className: "turn-badge turn-badge-model",
             children: shortModel(turn.model)
           }, undefined, false, undefined, this),
-          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("time", {
+          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("time", {
             className: "turn-timestamp",
             dateTime: turn.timestamp,
             "data-tooltip": formatFullDateTime(turn.timestamp),
@@ -54641,25 +54792,25 @@ function AssistantMessage({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
         className: "message message-assistant",
         children: [
-          introGroup && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+          introGroup && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
             className: isPresentation && treeGroups.length === 0 ? "step-enter" : "",
-            children: renderGroup(introGroup, sessionId, project)
+            children: renderGroup(introGroup, sessionId, project, pluginId)
           }, undefined, false, undefined, this),
-          treeGroups.length > 0 && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+          treeGroups.length > 0 && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
             className: "exec-tree",
-            children: treeGroups.map((group, i) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+            children: treeGroups.map((group, i) => /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
               className: `tree-node${isPresentation && i === treeGroups.length - 1 ? " step-enter" : ""}`,
-              children: renderGroup(group, sessionId, project)
+              children: renderGroup(group, sessionId, project, pluginId)
             }, i, false, undefined, this))
           }, undefined, false, undefined, this),
-          flatGroups.map((group, i) => /* @__PURE__ */ jsx_dev_runtime14.jsxDEV("div", {
+          flatGroups.map((group, i) => /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
             className: isPresentation && i === flatGroups.length - 1 ? "step-enter" : "",
-            children: renderGroup(group, sessionId, project)
+            children: renderGroup(group, sessionId, project, pluginId)
           }, i, false, undefined, this)),
-          turn.usage && /* @__PURE__ */ jsx_dev_runtime14.jsxDEV(UsageFooter, {
+          turn.usage && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(UsageFooter, {
             usage: turn.usage
           }, undefined, false, undefined, this)
         ]
@@ -54669,7 +54820,7 @@ function AssistantMessage({
 }
 
 // src/frontend/components/message/UserMessage.tsx
-var jsx_dev_runtime15 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
 var STATUS_RE = /^\[.+\]$/;
 var PLAN_PREFIX = "Implement the following plan";
 function UserMessage({
@@ -54680,14 +54831,14 @@ function UserMessage({
   project
 }) {
   if (turn.bashInput !== undefined) {
-    return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
       className: "status-notice bash-input-notice",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
+        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
           className: "bash-input-prompt",
           children: "$"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("code", {
+        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("code", {
           className: "bash-input-command",
           children: turn.bashInput
         }, undefined, false, undefined, this)
@@ -54695,11 +54846,11 @@ function UserMessage({
     }, undefined, true, undefined, this);
   }
   if (turn.ideOpenedFile !== undefined) {
-    return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
       className: "status-notice ide-opened-file-notice",
       children: [
         "Opened ",
-        /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("code", {
+        /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("code", {
           className: "ide-opened-file-path",
           children: turn.ideOpenedFile
         }, undefined, false, undefined, this)
@@ -54708,7 +54859,7 @@ function UserMessage({
   }
   const isStatus = STATUS_RE.test(turn.text.trim());
   if (isStatus) {
-    return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
       className: "status-notice",
       children: turn.text
     }, undefined, false, undefined, this);
@@ -54718,27 +54869,27 @@ function UserMessage({
   const showImplLink = implSessionId && project && !isPlanMessage;
   const role = isSubAgent ? "Root Agent" : "User";
   const badgeClass = isSubAgent ? "turn-badge-agent" : "turn-badge-user";
-  return /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
     className: "turn",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
         className: "turn-header",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
             className: `turn-badge ${badgeClass}`,
             children: role
           }, undefined, false, undefined, this),
-          showPlanLink && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("a", {
+          showPlanLink && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("a", {
             className: "subagent-link",
             href: `#/${project}/${planSessionId}`,
             children: "View planning session"
           }, undefined, false, undefined, this),
-          showImplLink && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("a", {
+          showImplLink && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("a", {
             className: "subagent-link",
             href: `#/${project}/${implSessionId}`,
             children: "View implementation session"
           }, undefined, false, undefined, this),
-          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("time", {
+          turn.timestamp && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("time", {
             className: "turn-timestamp",
             dateTime: turn.timestamp,
             "data-tooltip": formatFullDateTime(turn.timestamp),
@@ -54746,28 +54897,28 @@ function UserMessage({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
         className: `message ${isSubAgent ? "message-root-agent" : "message-user"}`,
         children: [
-          turn.command && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+          turn.command && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
             className: "command-call",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
                 className: "tool-skill-badge",
                 children: "skill"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
                 className: "command-call-label",
                 children: turn.command.name
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime15.jsxDEV(MarkdownRenderer, {
+          /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(MarkdownRenderer, {
             content: turn.text
           }, undefined, false, undefined, this),
-          turn.attachments && turn.attachments.length > 0 && /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("div", {
+          turn.attachments && turn.attachments.length > 0 && /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
             className: "attachments",
-            children: turn.attachments.map((a, i) => /* @__PURE__ */ jsx_dev_runtime15.jsxDEV("span", {
+            children: turn.attachments.map((a, i) => /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("span", {
               className: "attachment-badge",
               children: [
                 "image/",
@@ -54782,14 +54933,14 @@ function UserMessage({
 }
 
 // src/frontend/components/message/MessageList.tsx
-var jsx_dev_runtime16 = __toESM(require_jsx_dev_runtime(), 1);
-function renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project, isSubAgent, planSessionId, implSessionId) {
+var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
+function renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project, pluginId, isSubAgent, planSessionId, implSessionId) {
   const activeClass = isActive ? "active-message" : "";
   switch (turn.kind) {
     case "user":
-      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         className: isActive ? "active-message step-enter" : "",
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(UserMessage, {
+        children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(UserMessage, {
           turn,
           isSubAgent,
           planSessionId,
@@ -54798,27 +54949,28 @@ function renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project,
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this);
     case "assistant":
-      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         className: activeClass,
-        children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(AssistantMessage, {
+        children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(AssistantMessage, {
           turn,
           visibleSubSteps: visibleSubSteps?.get(index2),
           sessionId,
-          project
+          project,
+          pluginId
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this);
     case "system":
-      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         className: `turn ${activeClass}`,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
             className: "turn-header",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("span", {
                 className: "turn-badge turn-badge-system",
                 children: "System"
               }, undefined, false, undefined, this),
-              turn.timestamp && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("time", {
+              turn.timestamp && /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("time", {
                 className: "turn-timestamp",
                 dateTime: turn.timestamp,
                 "data-tooltip": formatFullDateTime(turn.timestamp),
@@ -54826,26 +54978,26 @@ function renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project,
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
             className: "message message-system",
-            children: /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(MarkdownRenderer, {
+            children: /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(MarkdownRenderer, {
               content: turn.text
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this);
     case "parse_error":
-      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+      return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
         className: `turn ${activeClass}`,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
             className: "turn-header",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("span", {
                 className: "turn-badge turn-badge-error",
                 children: "Parse Error"
               }, undefined, false, undefined, this),
-              turn.lineNumber > 0 && /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("span", {
+              turn.lineNumber > 0 && /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("span", {
                 className: "parse-error-line",
                 children: [
                   "line ",
@@ -54854,24 +55006,24 @@ function renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project,
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
             className: "message message-parse-error",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime18.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", {
+              turn.errorDetails && /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
                 className: "parse-error-details",
                 children: turn.errorDetails
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("details", {
+              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("details", {
                 className: "parse-error-raw",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("summary", {
+                  /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("summary", {
                     children: "Raw content"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("pre", {
+                  /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("pre", {
                     children: turn.rawLine
                   }, undefined, false, undefined, this)
                 ]
@@ -54890,6 +55042,7 @@ function MessageList({
   visibleSubSteps,
   sessionId,
   project,
+  pluginId,
   isSubAgent,
   planSessionId,
   implSessionId
@@ -54899,56 +55052,43 @@ function MessageList({
       return false;
     return !STATUS_RE2.test(t.text.trim());
   });
-  return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
     className: "message-list",
     children: turns.map((turn, index2) => {
       const isActive = visibleSubSteps ? index2 === turns.length - 1 : false;
-      return /* @__PURE__ */ jsx_dev_runtime16.jsxDEV(ErrorBoundary, {
+      return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV(ErrorBoundary, {
         inline: true,
-        children: renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project, isSubAgent, planSessionId, index2 === firstUserTurnIndex ? implSessionId : undefined)
+        children: renderTurn(turn, index2, isActive, visibleSubSteps, sessionId, project, pluginId, 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_runtime17 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
 function SubAgentView({ sessionId, project, agentId }) {
-  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}/subagents/${agentId}?project=${encodeURIComponent(project)}`, [sessionId, project, agentId]);
+  const { data, loading, error, retry } = useSubAgentSessionData(sessionId, project, agentId);
   if (loading)
-    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
       className: "loading",
       children: "Loading sub-agent conversation..."
     }, undefined, false, undefined, this);
-  if (error) {
-    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
-      className: "fetch-error",
-      children: [
-        /* @__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 (error)
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(FetchError, {
+      error,
+      onRetry: retry,
+      showPrefix: true
+    }, undefined, false, undefined, this);
   if (!data?.session || data.session.turns.length === 0)
-    return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
       className: "subagent-empty",
       children: "No sub-agent conversation data available."
     }, undefined, false, undefined, this);
-  return /* @__PURE__ */ jsx_dev_runtime17.jsxDEV(MessageList, {
+  return /* @__PURE__ */ jsx_dev_runtime19.jsxDEV(MessageList, {
     turns: data.session.turns,
     sessionId,
     project,
+    pluginId: data.session.pluginId,
     isSubAgent: true
   }, undefined, false, undefined, this);
 }
@@ -54960,25 +55100,25 @@ function projectDisplayName(project) {
 }
 
 // src/frontend/components/project/HiddenProjectList.tsx
-var jsx_dev_runtime18 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
 function HiddenProjectList({ hiddenIds, onUnhide, onBack }) {
   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_runtime18.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
       className: "loading",
       children: "Loading..."
     }, undefined, false, undefined, this);
   if (error) {
-    return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
       className: "fetch-error",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("span", {
+        /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
           className: "fetch-error-message",
           children: error
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("button", {
+        /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("button", {
           type: "button",
           className: "btn btn-sm",
           onClick: retry,
@@ -54987,40 +55127,40 @@ function HiddenProjectList({ hiddenIds, onUnhide, onBack }) {
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
     className: "hidden-projects-page",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: "back-btn",
         onClick: onBack,
         children: "← Back to projects"
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("h2", {
+      /* @__PURE__ */ jsx_dev_runtime20.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_runtime18.jsxDEV("div", {
+      hidden.length === 0 ? /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: "empty-state",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
             className: "empty-state-title",
             children: "No hidden projects"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("p", {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("p", {
             children: "Projects you hide will appear here"
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this) : hidden.map((project) => /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+      }, undefined, true, undefined, this) : hidden.map((project) => /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
         className: "list-item list-item-with-action",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
             className: "list-item-content",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
                 className: "list-item-title",
                 children: projectDisplayName(project)
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("div", {
+              /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
                 className: "list-item-meta",
                 children: [
                   project.sessionCount,
@@ -55030,7 +55170,7 @@ function HiddenProjectList({ hiddenIds, onUnhide, onBack }) {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime18.jsxDEV("button", {
+          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("button", {
             type: "button",
             className: "btn btn-sm",
             onClick: () => onUnhide(project.encodedPath),
@@ -55042,198 +55182,20 @@ function HiddenProjectList({ hiddenIds, onUnhide, onBack }) {
   }, undefined, true, undefined, this);
 }
 
-// src/frontend/components/project/ProjectList.tsx
-var import_react10 = __toESM(require_react(), 1);
-var jsx_dev_runtime19 = __toESM(require_jsx_dev_runtime(), 1);
-function ProjectList({
-  onSelect,
-  selected,
-  hiddenIds,
-  onHide,
-  onShowHidden
-}) {
-  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_runtime19.jsxDEV("div", {
-      className: "loading",
-      children: "Loading projects..."
-    }, undefined, false, undefined, this);
-  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_runtime19.jsxDEV("input", {
-        className: "filter-input",
-        placeholder: "Filter projects...",
-        value: filter,
-        onChange: (e) => setFilter(e.target.value)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
-        className: "list-section-title",
-        children: [
-          "Projects (",
-          filtered.length,
-          ")"
-        ]
-      }, undefined, true, undefined, this),
-      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_runtime19.jsxDEV("div", {
-            className: "list-item-content",
-            children: [
-              /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
-                className: "list-item-title",
-                children: projectDisplayName(project)
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("div", {
-                className: "list-item-meta",
-                children: [
-                  project.sessionCount,
-                  " session",
-                  project.sessionCount !== 1 ? "s" : "",
-                  " · ",
-                  /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("time", {
-                    dateTime: project.lastActivity,
-                    title: formatFullDateTime(project.lastActivity),
-                    children: formatRelativeTime(project.lastActivity)
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this)
-            ]
-          }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime19.jsxDEV("button", {
-            type: "button",
-            className: "btn-hide",
-            title: "Hide project",
-            onClick: (e) => {
-              e.stopPropagation();
-              onHide(project.encodedPath);
-            },
-            children: "×"
-          }, undefined, false, undefined, this)
-        ]
-      }, project.encodedPath, true, undefined, this)),
-      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_runtime19.jsxDEV("div", {
-        className: "hidden-projects-link",
-        onClick: onShowHidden,
-        children: [
-          hiddenIds.size,
-          " hidden project",
-          hiddenIds.size !== 1 ? "s" : ""
-        ]
-      }, undefined, true, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/frontend/components/project/SessionList.tsx
-var jsx_dev_runtime20 = __toESM(require_jsx_dev_runtime(), 1);
-function SessionList({ project, onSelect, onBack, selectedId }) {
-  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_runtime20.jsxDEV("div", {
-    children: [
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
-        className: "back-btn",
-        onClick: onBack,
-        children: "← Projects"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
-        className: "list-section-title",
-        children: displayName
-      }, undefined, false, undefined, this),
-      loading && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
-        className: "loading",
-        children: "Loading sessions..."
-      }, undefined, false, undefined, this),
-      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_runtime20.jsxDEV("div", {
-            className: "list-item-title",
-            children: session.firstMessage || session.slug
-          }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
-            className: "list-item-meta",
-            children: [
-              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_runtime20.jsxDEV("span", {
-                children: [
-                  shortModel(session.model),
-                  " · "
-                ]
-              }, undefined, true, undefined, this),
-              session.gitBranch && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("span", {
-                children: [
-                  session.gitBranch,
-                  " · "
-                ]
-              }, undefined, true, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("time", {
-                dateTime: session.timestamp,
-                title: formatFullDateTime(session.timestamp),
-                children: formatTime(session.timestamp)
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, session.sessionId, true, undefined, this)),
-      !loading && !error && sessions.length === 0 && /* @__PURE__ */ jsx_dev_runtime20.jsxDEV("div", {
-        className: "empty-list-message",
-        children: "No sessions found"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+// src/frontend/components/search/SearchModal.tsx
+var import_react12 = __toESM(require_react(), 1);
+
+// src/frontend/utils/plugin.ts
+var PLUGIN_NAMES = {
+  "claude-code": "Claude Code",
+  "codex-cli": "Codex",
+  opencode: "OpenCode"
+};
+function pluginDisplayName(pluginId) {
+  return PLUGIN_NAMES[pluginId] ?? pluginId;
 }
 
 // src/frontend/components/search/SearchModal.tsx
-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) {
@@ -55241,15 +55203,15 @@ function matchesQuery(result, query) {
   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_react11.useState("");
-  const [highlightedIndex, setHighlightedIndex] = import_react11.useState(0);
-  const inputRef = import_react11.useRef(null);
-  const resultsRef = import_react11.useRef(null);
+  const [query, setQuery] = import_react12.useState("");
+  const [highlightedIndex, setHighlightedIndex] = import_react12.useState(0);
+  const inputRef = import_react12.useRef(null);
+  const resultsRef = import_react12.useRef(null);
   const filtered = query ? sessions.filter((s2) => matchesQuery(s2, query)).slice(0, MAX_RESULTS) : sessions.slice(0, MAX_RESULTS);
-  import_react11.useEffect(() => {
+  import_react12.useEffect(() => {
     inputRef.current?.focus();
   }, []);
-  import_react11.useEffect(() => {
+  import_react12.useEffect(() => {
     const container = resultsRef.current;
     if (!container)
       return;
@@ -55259,10 +55221,10 @@ function SearchModal({ sessions, onSelect, onClose }) {
       item.scrollIntoView({ block: "nearest" });
     }
   }, [highlightedIndex]);
-  const handleSelect = import_react11.useCallback((result) => {
+  const handleSelect = import_react12.useCallback((result) => {
     onSelect(result.encodedPath, result.sessionId);
   }, [onSelect]);
-  const handleKeyDown = import_react11.useCallback((e) => {
+  const handleKeyDown = import_react12.useCallback((e) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
@@ -55334,10 +55296,17 @@ function SearchModal({ sessions, onSelect, onClose }) {
                 className: "search-result-meta",
                 children: [
                   result.projectName,
-                  " · ",
-                  shortModel(result.model),
-                  result.gitBranch ? ` · ${result.gitBranch}` : "",
-                  " ·",
+                  result.pluginId && /* @__PURE__ */ jsx_dev_runtime21.jsxDEV(jsx_dev_runtime21.Fragment, {
+                    children: [
+                      " ",
+                      /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("span", {
+                        className: "plugin-badge",
+                        children: pluginDisplayName(result.pluginId)
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  " ",
+                  "·",
                   " ",
                   /* @__PURE__ */ jsx_dev_runtime21.jsxDEV("time", {
                     dateTime: result.timestamp,
@@ -55384,12 +55353,12 @@ function SearchModal({ sessions, onSelect, onClose }) {
 }
 
 // src/frontend/components/session/PresentationShell.tsx
-var import_react14 = __toESM(require_react(), 1);
+var import_react15 = __toESM(require_react(), 1);
 
 // src/frontend/hooks/useKeyboard.ts
-var import_react12 = __toESM(require_react(), 1);
+var import_react13 = __toESM(require_react(), 1);
 function useKeyboard(handlers2, active) {
-  import_react12.useEffect(() => {
+  import_react13.useEffect(() => {
     if (!active)
       return;
     function handleKeyDown(e) {
@@ -55432,7 +55401,7 @@ function useKeyboard(handlers2, active) {
 }
 
 // src/frontend/hooks/usePresentationMode.ts
-var import_react13 = __toESM(require_react(), 1);
+var import_react14 = __toESM(require_react(), 1);
 function countSubSteps(turn) {
   if (turn.kind !== "assistant")
     return 1;
@@ -55440,10 +55409,10 @@ function countSubSteps(turn) {
   return Math.max(groupContentBlocks(a.contentBlocks).length, 1);
 }
 function usePresentationMode(turns) {
-  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 [active, setActive] = import_react14.useState(false);
+  const [fullscreen, setFullscreen] = import_react14.useState(false);
+  const [currentStep, setCurrentStep] = import_react14.useState(0);
+  const steps = import_react14.useMemo(() => {
     const result = [];
     for (let i = 0;i < turns.length; i++) {
       const sub = countSubSteps(turns[i]);
@@ -55454,7 +55423,7 @@ function usePresentationMode(turns) {
     return result;
   }, [turns]);
   const totalSteps = steps.length;
-  const turnBoundaries = import_react13.useMemo(() => {
+  const turnBoundaries = import_react14.useMemo(() => {
     const boundaries = [];
     for (let i = 0;i < steps.length; i++) {
       const next2 = steps[i + 1];
@@ -55464,7 +55433,7 @@ function usePresentationMode(turns) {
     }
     return boundaries;
   }, [steps]);
-  const { visibleTurns, visibleSubSteps } = import_react13.useMemo(() => {
+  const { visibleTurns, visibleSubSteps } = import_react14.useMemo(() => {
     if (!active || steps.length === 0) {
       return { visibleTurns: turns, visibleSubSteps: new Map };
     }
@@ -55478,22 +55447,22 @@ function usePresentationMode(turns) {
     subSteps.set(maxTurnIndex, step.subStep + 1);
     return { visibleTurns: visible, visibleSubSteps: subSteps };
   }, [active, currentStep, steps, turns]);
-  const enter = import_react13.useCallback(() => {
+  const enter = import_react14.useCallback(() => {
     setActive(true);
     setCurrentStep(0);
   }, []);
-  const exit3 = import_react13.useCallback(() => {
+  const exit3 = import_react14.useCallback(() => {
     setActive(false);
     setFullscreen(false);
     setCurrentStep(0);
   }, []);
-  const next = import_react13.useCallback(() => {
+  const next = import_react14.useCallback(() => {
     setCurrentStep((s2) => Math.min(s2 + 1, steps.length - 1));
   }, [steps.length]);
-  const prev = import_react13.useCallback(() => {
+  const prev = import_react14.useCallback(() => {
     setCurrentStep((s2) => Math.max(s2 - 1, 0));
   }, []);
-  const nextTurn = import_react13.useCallback(() => {
+  const nextTurn = import_react14.useCallback(() => {
     setCurrentStep((s2) => {
       for (const b of turnBoundaries) {
         if (b > s2)
@@ -55502,7 +55471,7 @@ function usePresentationMode(turns) {
       return s2;
     });
   }, [turnBoundaries]);
-  const prevTurn = import_react13.useCallback(() => {
+  const prevTurn = import_react14.useCallback(() => {
     setCurrentStep((s2) => {
       for (let i = turnBoundaries.length - 1;i >= 0; i--) {
         if (turnBoundaries[i] < s2)
@@ -55511,7 +55480,7 @@ function usePresentationMode(turns) {
       return s2;
     });
   }, [turnBoundaries]);
-  const toggleFullscreen = import_react13.useCallback(() => {
+  const toggleFullscreen = import_react14.useCallback(() => {
     setFullscreen((f) => !f);
   }, []);
   return {
@@ -55538,11 +55507,12 @@ function PresentationShell({
   onExit,
   sessionId,
   project,
+  pluginId,
   isSubAgent
 }) {
-  const scrollRef = import_react14.useRef(null);
+  const scrollRef = import_react15.useRef(null);
   const presentation = usePresentationMode(turns);
-  import_react14.useEffect(() => {
+  import_react15.useEffect(() => {
     if (turns.length > 0 && !presentation.active) {
       presentation.enter();
     }
@@ -55556,7 +55526,7 @@ function PresentationShell({
     onFullscreen: presentation.toggleFullscreen
   }, presentation.active);
   const currentStep = presentation.currentStep;
-  import_react14.useEffect(() => {
+  import_react15.useEffect(() => {
     if (currentStep >= 0 && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -55572,6 +55542,7 @@ function PresentationShell({
         visibleSubSteps: presentation.visibleSubSteps,
         sessionId,
         project,
+        pluginId,
         isSubAgent
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsx_dev_runtime22.jsxDEV("div", {
@@ -55605,81 +55576,70 @@ function PresentationShell({
 // src/frontend/components/session/SessionPresentation.tsx
 var jsx_dev_runtime23 = __toESM(require_jsx_dev_runtime(), 1);
 function SessionPresentation({ sessionId, project, onExit }) {
-  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}?project=${encodeURIComponent(project)}`, [sessionId, project]);
+  const { data, loading, error, retry } = useSessionData(sessionId, project);
   if (loading)
     return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV("div", {
       className: "loading",
       children: "Loading session..."
     }, undefined, false, undefined, this);
-  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 (error)
+    return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(FetchError, {
+      error,
+      onRetry: retry,
+      showPrefix: true
+    }, undefined, false, undefined, this);
   if (!data?.session)
     return null;
   return /* @__PURE__ */ jsx_dev_runtime23.jsxDEV(PresentationShell, {
     turns: data.session.turns,
     onExit,
     sessionId,
-    project
+    project,
+    pluginId: data.session.pluginId
   }, undefined, false, undefined, this);
 }
 
 // src/frontend/components/session/SessionView.tsx
 var jsx_dev_runtime24 = __toESM(require_jsx_dev_runtime(), 1);
-function SessionView({ sessionId, project }) {
-  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}?project=${encodeURIComponent(project)}`, [sessionId, project]);
+function SessionView({ sessionId, project, gitBranch }) {
+  const { data, loading, error, retry } = useSessionData(sessionId, project);
   if (loading)
     return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
       className: "loading",
       children: "Loading session..."
     }, undefined, false, undefined, this);
-  if (error) {
-    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
-      className: "fetch-error",
-      children: [
-        /* @__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 (error)
+    return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(FetchError, {
+      error,
+      onRetry: retry,
+      showPrefix: true
+    }, undefined, false, undefined, this);
   if (!data?.session)
     return null;
   const session = data.session;
-  return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(MessageList, {
-    turns: session.turns,
-    sessionId,
-    project,
-    planSessionId: session.planSessionId,
-    implSessionId: session.implSessionId
-  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(jsx_dev_runtime24.Fragment, {
+    children: [
+      gitBranch && /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("div", {
+        className: "session-branch-bar",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime24.jsxDEV("span", {
+            className: "session-branch-icon",
+            children: "⎇"
+          }, undefined, false, undefined, this),
+          " ",
+          gitBranch
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime24.jsxDEV(MessageList, {
+        turns: session.turns,
+        sessionId,
+        project,
+        pluginId: session.pluginId,
+        planSessionId: session.planSessionId,
+        implSessionId: session.implSessionId
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
 }
 
 // src/frontend/components/session/SubAgentPresentation.tsx
@@ -55690,32 +55650,18 @@ function SubAgentPresentation({
   agentId,
   onExit
 }) {
-  const { data, loading, error, retry } = useFetch(`/api/sessions/${sessionId}/subagents/${agentId}?project=${encodeURIComponent(project)}`, [sessionId, project, agentId]);
+  const { data, loading, error, retry } = useSubAgentSessionData(sessionId, project, agentId);
   if (loading)
     return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV("div", {
       className: "loading",
       children: "Loading sub-agent conversation..."
     }, undefined, false, undefined, this);
-  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 (error)
+    return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(FetchError, {
+      error,
+      onRetry: retry,
+      showPrefix: true
+    }, undefined, false, undefined, this);
   if (!data?.session || data.session.turns.length === 0)
     return null;
   return /* @__PURE__ */ jsx_dev_runtime25.jsxDEV(PresentationShell, {
@@ -55723,12 +55669,13 @@ function SubAgentPresentation({
     onExit,
     sessionId,
     project,
+    pluginId: data.session.pluginId,
     isSubAgent: true
   }, undefined, false, undefined, this);
 }
 
 // src/frontend/hooks/useHiddenProjects.ts
-var import_react15 = __toESM(require_react(), 1);
+var import_react16 = __toESM(require_react(), 1);
 var STORAGE_KEY = "klovi-hidden-projects";
 function loadHiddenIds() {
   try {
@@ -55750,8 +55697,8 @@ function persistHiddenIds(ids) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(store));
 }
 function useHiddenProjects() {
-  const [hiddenIds, setHiddenIds] = import_react15.useState(() => loadHiddenIds());
-  const hide = import_react15.useCallback((encodedPath) => {
+  const [hiddenIds, setHiddenIds] = import_react16.useState(() => loadHiddenIds());
+  const hide = import_react16.useCallback((encodedPath) => {
     setHiddenIds((prev) => {
       const next = new Set(prev);
       next.add(encodedPath);
@@ -55759,7 +55706,7 @@ function useHiddenProjects() {
       return next;
     });
   }, []);
-  const unhide = import_react15.useCallback((encodedPath) => {
+  const unhide = import_react16.useCallback((encodedPath) => {
     setHiddenIds((prev) => {
       const next = new Set(prev);
       next.delete(encodedPath);
@@ -55767,12 +55714,38 @@ function useHiddenProjects() {
       return next;
     });
   }, []);
-  const isHidden = import_react15.useCallback((encodedPath) => hiddenIds.has(encodedPath), [hiddenIds]);
+  const isHidden = import_react16.useCallback((encodedPath) => hiddenIds.has(encodedPath), [hiddenIds]);
   return { hiddenIds, hide, unhide, isHidden };
 }
 
-// src/frontend/App.tsx
-var jsx_dev_runtime26 = __toESM(require_jsx_dev_runtime(), 1);
+// src/frontend/hooks/useViewState.ts
+var import_react17 = __toESM(require_react(), 1);
+
+// src/shared/session-id.ts
+var SESSION_ID_SEPARATOR = "::";
+function parseSessionId(sessionId) {
+  const separatorIdx = sessionId.indexOf(SESSION_ID_SEPARATOR);
+  if (separatorIdx === -1) {
+    return { pluginId: null, rawSessionId: sessionId };
+  }
+  return {
+    pluginId: sessionId.slice(0, separatorIdx),
+    rawSessionId: sessionId.slice(separatorIdx + SESSION_ID_SEPARATOR.length)
+  };
+}
+
+// src/frontend/view-state.ts
+function getResumeCommand(pluginId, encodedSessionId) {
+  const rawSessionId = parseSessionId(encodedSessionId).rawSessionId;
+  switch (pluginId) {
+    case "claude-code":
+      return `claude --resume ${rawSessionId}`;
+    case "codex-cli":
+      return `codex resume ${rawSessionId}`;
+    default:
+      return;
+  }
+}
 function viewToHash(view) {
   if (view.kind === "hidden")
     return "#/hidden";
@@ -55784,6 +55757,33 @@ function viewToHash(view) {
     return `#/${view.project.encodedPath}/${view.sessionId}/subagent/${view.agentId}`;
   return "#/";
 }
+async function loadProject(encodedPath) {
+  const res = await fetch("/api/projects");
+  if (!res.ok)
+    return;
+  const data = await res.json();
+  return data.projects.find((p) => p.encodedPath === encodedPath);
+}
+async function loadProjectSession(project, sessionId) {
+  const res = await fetch(`/api/projects/${encodeURIComponent(project.encodedPath)}/sessions`);
+  if (!res.ok)
+    return;
+  const data = await res.json();
+  return data.sessions.find((s2) => s2.sessionId === sessionId);
+}
+async function resolveProjectAndSession(encodedPath, sessionId) {
+  try {
+    const project = await loadProject(encodedPath);
+    if (!project)
+      return null;
+    const session = await loadProjectSession(project, sessionId);
+    if (!session)
+      return null;
+    return { project, session };
+  } catch {
+    return null;
+  }
+}
 async function restoreFromHash() {
   const hash = window.location.hash.replace(/^#\/?/, "");
   if (!hash)
@@ -55794,11 +55794,11 @@ async function restoreFromHash() {
   const encodedPath = parts[0];
   const sessionId = parts[1];
   const isSubAgent = parts[2] === "subagent" && parts[3];
+  if (!encodedPath)
+    return { kind: "home" };
   let project;
   try {
-    const res = await fetch("/api/projects");
-    const data = await res.json();
-    project = data.projects.find((p) => p.encodedPath === encodedPath);
+    project = await loadProject(encodedPath);
   } catch {
     return { kind: "home" };
   }
@@ -55810,9 +55810,7 @@ async function restoreFromHash() {
     return { kind: "subagent", project, sessionId, agentId: parts[3], presenting: false };
   }
   try {
-    const res = await fetch(`/api/projects/${encodedPath}/sessions`);
-    const data = await res.json();
-    const session = data.sessions.find((s2) => s2.sessionId === sessionId);
+    const session = await loadProjectSession(project, sessionId);
     if (session) {
       return { kind: "session", project, session, presenting: false };
     }
@@ -55843,111 +55841,328 @@ function getHeaderInfo(view) {
   }
   return { title: "Klovi", breadcrumb: "" };
 }
-function getSidebarContent(view, selectProject, hiddenIds, hide, goHidden, selectSession, goHome) {
+
+// src/frontend/hooks/useViewState.ts
+function useViewState() {
+  const [view, setView] = import_react17.useState({ kind: "home" });
+  const [ready, setReady] = import_react17.useState(false);
+  import_react17.useEffect(() => {
+    restoreFromHash().then((v2) => {
+      setView(v2);
+      setReady(true);
+    });
+  }, []);
+  import_react17.useEffect(() => {
+    if (!ready)
+      return;
+    const newHash = viewToHash(view);
+    if (window.location.hash !== newHash) {
+      history.pushState(null, "", newHash);
+    }
+  }, [view, ready]);
+  import_react17.useEffect(() => {
+    const handler = () => {
+      restoreFromHash().then(setView);
+    };
+    window.addEventListener("popstate", handler);
+    return () => window.removeEventListener("popstate", handler);
+  }, []);
+  const selectProject = import_react17.useCallback((project) => {
+    setView({ kind: "project", project });
+  }, []);
+  const selectSession = import_react17.useCallback((session) => {
+    setView((current) => {
+      if (current.kind === "project" || current.kind === "session") {
+        return {
+          kind: "session",
+          project: current.project,
+          session,
+          presenting: false
+        };
+      }
+      return current;
+    });
+  }, []);
+  const goHome = import_react17.useCallback(() => setView({ kind: "home" }), []);
+  const goHidden = import_react17.useCallback(() => setView({ kind: "hidden" }), []);
+  const canPresent = view.kind === "session" || view.kind === "subagent";
+  const togglePresentation = import_react17.useCallback(() => {
+    setView((current) => {
+      if (current.kind === "session" || current.kind === "subagent") {
+        return { ...current, presenting: !current.presenting };
+      }
+      return current;
+    });
+  }, []);
+  return {
+    view,
+    ready,
+    setView,
+    selectProject,
+    selectSession,
+    goHome,
+    goHidden,
+    canPresent,
+    togglePresentation
+  };
+}
+
+// src/frontend/components/project/ProjectList.tsx
+var import_react18 = __toESM(require_react(), 1);
+var jsx_dev_runtime26 = __toESM(require_jsx_dev_runtime(), 1);
+function ProjectList({
+  onSelect,
+  selected,
+  hiddenIds,
+  onHide,
+  onShowHidden
+}) {
+  const { data, loading, error, retry } = useFetch("/api/projects", []);
+  const [filter, setFilter] = import_react18.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_runtime26.jsxDEV("div", {
+      className: "loading",
+      children: "Loading projects..."
+    }, undefined, false, undefined, this);
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+      className: "fetch-error",
+      children: [
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("span", {
+          className: "fetch-error-message",
+          children: error
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("button", {
+          type: "button",
+          className: "btn btn-sm",
+          onClick: retry,
+          children: "Retry"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("input", {
+        className: "filter-input",
+        placeholder: "Filter projects...",
+        value: filter,
+        onChange: (e) => setFilter(e.target.value)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+        className: "list-section-title",
+        children: [
+          "Projects (",
+          filtered.length,
+          ")"
+        ]
+      }, undefined, true, undefined, this),
+      filtered.map((project) => /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+        className: `list-item list-item-with-action ${selected === project.encodedPath ? "active" : ""}`,
+        onClick: () => onSelect(project),
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+            className: "list-item-content",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+                className: "list-item-title",
+                children: projectDisplayName(project)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+                className: "list-item-meta",
+                children: [
+                  project.sessionCount,
+                  " session",
+                  project.sessionCount !== 1 ? "s" : "",
+                  " · ",
+                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("time", {
+                    dateTime: project.lastActivity,
+                    title: formatFullDateTime(project.lastActivity),
+                    children: formatRelativeTime(project.lastActivity)
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("button", {
+            type: "button",
+            className: "btn-hide",
+            title: "Hide project",
+            onClick: (e) => {
+              e.stopPropagation();
+              onHide(project.encodedPath);
+            },
+            children: "×"
+          }, undefined, false, undefined, this)
+        ]
+      }, project.encodedPath, true, undefined, this)),
+      filtered.length === 0 && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+        className: "empty-list-message",
+        children: "No projects found"
+      }, undefined, false, undefined, this),
+      hiddenIds.size > 0 && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+        className: "hidden-projects-link",
+        onClick: onShowHidden,
+        children: [
+          hiddenIds.size,
+          " hidden project",
+          hiddenIds.size !== 1 ? "s" : ""
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/frontend/components/project/SessionList.tsx
+var jsx_dev_runtime27 = __toESM(require_jsx_dev_runtime(), 1);
+function SessionList({ project, onSelect, onBack, selectedId }) {
+  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_runtime27.jsxDEV("div", {
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("div", {
+        className: "back-btn",
+        onClick: onBack,
+        children: "← Projects"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("div", {
+        className: "list-section-title",
+        children: displayName
+      }, undefined, false, undefined, this),
+      loading && /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("div", {
+        className: "loading",
+        children: "Loading sessions..."
+      }, undefined, false, undefined, this),
+      error && /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("div", {
+        className: "fetch-error",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("span", {
+            className: "fetch-error-message",
+            children: error
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime27.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_runtime27.jsxDEV("div", {
+        className: `list-item ${selectedId === session.sessionId ? "active" : ""}${session.sessionType ? ` ${session.sessionType}` : ""}`,
+        onClick: () => onSelect(session),
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("div", {
+            className: "list-item-title",
+            children: session.firstMessage || session.slug
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("div", {
+            className: "list-item-meta",
+            children: [
+              session.pluginId && /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("span", {
+                className: "plugin-badge",
+                children: pluginDisplayName(session.pluginId)
+              }, undefined, false, undefined, this),
+              " ",
+              session.sessionType && /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("span", {
+                className: `session-type-badge ${session.sessionType}`,
+                children: session.sessionType === "plan" ? "Plan" : "Impl"
+              }, undefined, false, undefined, this),
+              " ",
+              /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("time", {
+                dateTime: session.timestamp,
+                title: formatFullDateTime(session.timestamp),
+                children: formatTime(session.timestamp)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, session.sessionId, true, undefined, this)),
+      !loading && !error && sessions.length === 0 && /* @__PURE__ */ jsx_dev_runtime27.jsxDEV("div", {
+        className: "empty-list-message",
+        children: "No sessions found"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/frontend/sidebar-content.tsx
+var jsx_dev_runtime28 = __toESM(require_jsx_dev_runtime(), 1);
+function getSidebarContent(view, hiddenIds, actions) {
   if (view.kind === "home" || view.kind === "hidden") {
-    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(ProjectList, {
-      onSelect: selectProject,
+    return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(ProjectList, {
+      onSelect: actions.selectProject,
       hiddenIds,
-      onHide: hide,
-      onShowHidden: goHidden
+      onHide: actions.hide,
+      onShowHidden: actions.goHidden
     }, undefined, false, undefined, this);
   }
   if (view.kind === "project") {
-    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionList, {
+    return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SessionList, {
       project: view.project,
-      onSelect: selectSession,
-      onBack: goHome
+      onSelect: actions.selectSession,
+      onBack: actions.goHome
     }, undefined, false, undefined, this);
   }
   if (view.kind === "subagent") {
-    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionList, {
+    return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SessionList, {
       project: view.project,
-      onSelect: selectSession,
-      onBack: goHome,
+      onSelect: actions.selectSession,
+      onBack: actions.goHome,
       selectedId: view.sessionId
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionList, {
+  return /* @__PURE__ */ jsx_dev_runtime28.jsxDEV(SessionList, {
     project: view.project,
-    onSelect: selectSession,
-    onBack: goHome,
+    onSelect: actions.selectSession,
+    onBack: actions.goHome,
     selectedId: view.session.sessionId
   }, undefined, false, undefined, this);
 }
+
+// src/frontend/App.tsx
+var jsx_dev_runtime29 = __toESM(require_jsx_dev_runtime(), 1);
 function App() {
   const { setting: themeSetting, cycle: cycleTheme } = useTheme();
   const { size: fontSize, increase, decrease } = useFontSize();
   const { hiddenIds, hide, unhide } = useHiddenProjects();
-  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_react16.useEffect(() => {
-    if (!ready)
-      return;
-    const newHash = viewToHash(view);
-    if (window.location.hash !== newHash) {
-      history.pushState(null, "", newHash);
-    }
-  }, [view, ready]);
-  import_react16.useEffect(() => {
-    const handler = () => {
-      restoreFromHash().then(setView);
-    };
-    window.addEventListener("popstate", handler);
-    return () => window.removeEventListener("popstate", handler);
-  }, []);
-  const selectProject = (project) => {
-    setView({ kind: "project", project });
-  };
-  const selectSession = (session) => {
-    if (view.kind === "project" || view.kind === "session") {
-      setView({
-        kind: "session",
-        project: view.project,
-        session,
-        presenting: false
-      });
-    }
-  };
-  const goHome = () => setView({ kind: "home" });
-  const goHidden = () => setView({ kind: "hidden" });
-  const canPresent = view.kind === "session" || view.kind === "subagent";
-  const togglePresentation = import_react16.useCallback(() => {
-    if (view.kind === "session" || view.kind === "subagent") {
-      setView({ ...view, presenting: !view.presenting });
-    }
-  }, [view]);
-  const fetchSearchSessions = import_react16.useCallback(() => {
+  const {
+    view,
+    ready,
+    setView,
+    selectProject,
+    selectSession,
+    goHome,
+    goHidden,
+    canPresent,
+    togglePresentation
+  } = useViewState();
+  const [searchOpen, setSearchOpen] = import_react19.useState(false);
+  const [searchSessions, setSearchSessions] = import_react19.useState([]);
+  const fetchSearchSessions = import_react19.useCallback(() => {
     fetch("/api/search/sessions").then((res) => res.json()).then((data) => setSearchSessions(data.sessions)).catch(() => {});
   }, []);
-  const openSearch = import_react16.useCallback(() => {
+  const openSearch = import_react19.useCallback(() => {
     setSearchOpen(true);
     fetchSearchSessions();
   }, [fetchSearchSessions]);
-  const handleSearchSelect = import_react16.useCallback(async (encodedPath, sessionId) => {
+  const handleSearchSelect = import_react19.useCallback(async (encodedPath, sessionId) => {
     setSearchOpen(false);
-    try {
-      const [projectsRes, sessionsRes] = await Promise.all([
-        fetch("/api/projects"),
-        fetch(`/api/projects/${encodedPath}/sessions`)
-      ]);
-      const projectsData = await projectsRes.json();
-      const sessionsData = await sessionsRes.json();
-      const project = projectsData.projects.find((p) => p.encodedPath === encodedPath);
-      const session = sessionsData.sessions.find((s2) => s2.sessionId === sessionId);
-      if (project && session) {
-        setView({ kind: "session", project, session, presenting: false });
-      }
-    } catch {}
-  }, []);
-  import_react16.useEffect(() => {
+    const resolved = await resolveProjectAndSession(encodedPath, sessionId);
+    if (resolved) {
+      setView({
+        kind: "session",
+        project: resolved.project,
+        session: resolved.session,
+        presenting: false
+      });
+    }
+  }, [setView]);
+  import_react19.useEffect(() => {
     function handleCmdK(e) {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -55961,7 +56176,7 @@ function App() {
     window.addEventListener("keydown", handleCmdK);
     return () => window.removeEventListener("keydown", handleCmdK);
   }, [fetchSearchSessions]);
-  import_react16.useEffect(() => {
+  import_react19.useEffect(() => {
     function handleKeyDown(e) {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
         return;
@@ -55989,30 +56204,36 @@ function App() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [canPresent, togglePresentation, increase, decrease]);
   const { title: headerTitle, breadcrumb } = getHeaderInfo(view);
-  const sidebarContent = getSidebarContent(view, selectProject, hiddenIds, hide, goHidden, selectSession, goHome);
-  const isPresenting = canPresent && view.presenting;
+  const sidebarContent = getSidebarContent(view, hiddenIds, {
+    selectProject,
+    selectSession,
+    goHome,
+    goHidden,
+    hide
+  });
+  const isPresenting = view.kind === "session" || view.kind === "subagent" ? view.presenting : false;
   if (!ready) {
-    return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime29.jsxDEV("div", {
       className: "loading",
       children: "Loading..."
     }, undefined, false, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
+  return /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(jsx_dev_runtime29.Fragment, {
     children: [
-      searchOpen && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SearchModal, {
+      searchOpen && /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(SearchModal, {
         sessions: searchSessions,
         onSelect: handleSearchSelect,
         onClose: () => setSearchOpen(false)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(Layout, {
+      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(Layout, {
         sidebar: sidebarContent,
         hideSidebar: isPresenting,
         onSearchClick: openSearch,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(Header, {
+          /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(Header, {
             title: headerTitle,
             breadcrumb,
-            copyCommand: view.kind === "session" && isClaudeModel(view.session.model) ? `claude --resume ${view.session.sessionId}` : undefined,
+            copyCommand: view.kind === "session" ? getResumeCommand(view.session.pluginId, view.session.sessionId) : undefined,
             backHref: view.kind === "subagent" ? `#/${view.project.encodedPath}/${view.sessionId}` : undefined,
             sessionType: view.kind === "session" ? view.session.sessionType : undefined,
             themeSetting,
@@ -56024,63 +56245,64 @@ function App() {
             onTogglePresentation: togglePresentation,
             showPresentationToggle: canPresent
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(ErrorBoundary, {
+          /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(ErrorBoundary, {
             children: [
-              view.kind === "home" && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(jsx_dev_runtime26.Fragment, {
+              view.kind === "home" && /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(jsx_dev_runtime29.Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+                  /* @__PURE__ */ jsx_dev_runtime29.jsxDEV("div", {
                     className: "empty-state",
                     children: [
-                      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("img", {
+                      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV("img", {
                         src: favicon_default,
                         alt: "",
                         width: "64",
                         height: "64",
                         className: "empty-state-logo"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+                      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV("div", {
                         className: "empty-state-title",
                         children: "Welcome to Klovi"
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("p", {
+                      /* @__PURE__ */ jsx_dev_runtime29.jsxDEV("p", {
                         children: "Select a project from the sidebar to browse your AI coding sessions"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(DashboardStats, {}, undefined, false, undefined, this)
+                  /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(DashboardStats, {}, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
-              view.kind === "hidden" && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(HiddenProjectList, {
+              view.kind === "hidden" && /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(HiddenProjectList, {
                 hiddenIds,
                 onUnhide: unhide,
                 onBack: goHome
               }, undefined, false, undefined, this),
-              view.kind === "project" && /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+              view.kind === "project" && /* @__PURE__ */ jsx_dev_runtime29.jsxDEV("div", {
                 className: "empty-state",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("div", {
+                  /* @__PURE__ */ jsx_dev_runtime29.jsxDEV("div", {
                     className: "empty-state-title",
                     children: "Select a session"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime26.jsxDEV("p", {
+                  /* @__PURE__ */ jsx_dev_runtime29.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_runtime26.jsxDEV(SessionPresentation, {
+              view.kind === "session" && (view.presenting ? /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(SessionPresentation, {
                 sessionId: view.session.sessionId,
                 project: view.project.encodedPath,
                 onExit: togglePresentation
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SessionView, {
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(SessionView, {
                 sessionId: view.session.sessionId,
-                project: view.project.encodedPath
+                project: view.project.encodedPath,
+                gitBranch: view.session.gitBranch
               }, undefined, false, undefined, this)),
-              view.kind === "subagent" && (view.presenting ? /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SubAgentPresentation, {
+              view.kind === "subagent" && (view.presenting ? /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(SubAgentPresentation, {
                 sessionId: view.sessionId,
                 project: view.project.encodedPath,
                 agentId: view.agentId,
                 onExit: togglePresentation
-              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime26.jsxDEV(SubAgentView, {
+              }, undefined, false, undefined, this) : /* @__PURE__ */ jsx_dev_runtime29.jsxDEV(SubAgentView, {
                 sessionId: view.sessionId,
                 project: view.project.encodedPath,
                 agentId: view.agentId
@@ -56093,4 +56315,4 @@ function App() {
   }, undefined, true, undefined, this);
 }
 var root4 = import_client.createRoot(document.getElementById("root"));
-root4.render(/* @__PURE__ */ jsx_dev_runtime26.jsxDEV(App, {}, undefined, false, undefined, this));
+root4.render(/* @__PURE__ */ jsx_dev_runtime29.jsxDEV(App, {}, undefined, false, undefined, this));