@pikaa-ai/pikaa 0.3.1 → 0.3.4

package/dist/index.js

@@ -1133,11 +1133,32 @@ class CredentialsStore {
       return null;
     try {
       const raw = readFileSync(this.filePath, "utf8");
-      return JSON.parse(raw);
+      const creds = JSON.parse(raw);
+      if (creds && creds.idToken && (!creds.user || !creds.user.username)) {
+        try {
+          const parts = creds.idToken.split(".");
+          if (parts[1]) {
+            const payload = JSON.parse(Buffer.from(parts[1], "base64").toString("utf8"));
+            creds.user = {
+              ...creds.user,
+              id: creds.user?.id || payload.sub,
+              email: creds.user?.email || payload.email || payload["https://api.openai.com/profile"]?.email,
+              username: creds.user?.username || payload.preferred_username || payload.username || payload.name || (payload.email ? payload.email.split("@")[0] : undefined),
+              role: creds.user?.role || payload.role,
+              plan: creds.user?.plan || payload["https://api.openai.com/auth"]?.chatgpt_plan_type || payload.plan || payload.tier
+            };
+          }
+        } catch {}
+      }
+      return creds;
     } catch {
       return null;
     }
   }
+  getUser() {
+    const creds = this.load();
+    return creds?.user;
+  }
   save(credentials) {
     const dir = resolve(this.filePath, "..");
     if (!existsSync(dir)) {
@@ -1164,6 +1185,16 @@ class CredentialsStore {
     const creds = this.load();
     return creds?.baseUrl;
   }
+  getDefaultModel() {
+    const creds = this.load();
+    return creds?.defaultModel || creds?.model;
+  }
+  setDefaultModel(model) {
+    const existing = this.load() || { accessToken: "" };
+    existing.defaultModel = model;
+    existing.model = model;
+    this.save(existing);
+  }
 }
 
 // src/client/model-client.ts
@@ -1226,7 +1257,7 @@ class DefaultModelClientSession {
         if (toolCalls.length > 0) {
           messages.push({
             role: "assistant",
-            content: null,
+            content: cleanedContent || null,
             tool_calls: toolCalls
           });
           i = j - 1;
@@ -1382,6 +1413,8 @@ class DefaultModelClientSession {
           const dataStr = trimmed.slice(6);
           if (dataStr === "[DONE]") {
             for (const tc of pendingToolCalls.values()) {
+              if (!tc.name || !tc.name.trim())
+                continue;
               let parsedArgs = {};
               try {
                 parsedArgs = JSON.parse(tc.arguments);
@@ -1496,6 +1529,8 @@ class DefaultModelClientSession {
         }
       }
       for (const tc of pendingToolCalls.values()) {
+        if (!tc.name || !tc.name.trim())
+          continue;
         let parsedArgs = {};
         try {
           parsedArgs = JSON.parse(tc.arguments);
@@ -3818,6 +3853,8 @@ async function runTurn(session, turnContext, input) {
       }
       if (toolCallRequests.length > 0) {
         for (const toolCall of toolCallRequests) {
+          if (!toolCall.name || !toolCall.name.trim())
+            continue;
           const functionCallItem = {
             id: `call_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
             type: "function_call",
@@ -8501,6 +8538,13 @@ class SessionPersistenceManager {
     this.bindSession(session2, restored.thread.role);
     return session2;
   }
+  loadSession(threadId) {
+    try {
+      return this.store.restoreSession(threadId);
+    } catch {
+      return null;
+    }
+  }
   listSessions(options) {
     return this.store.listThreads(options);
   }
@@ -8528,6 +8572,7 @@ class SkillsLoader {
   includeGlobal;
   includeBuiltIn;
   disabledSkills;
+  skillsCache = new Map;
   constructor(optionsOrRoots = {}) {
     if (Array.isArray(optionsOrRoots)) {
       this.customRoots = optionsOrRoots;
@@ -8544,17 +8589,24 @@ class SkillsLoader {
       ]);
     }
   }
+  clearCache() {
+    this.skillsCache.clear();
+  }
   disableSkill(name) {
     const key = name.trim().toLowerCase();
     this.disabledSkills.add(key);
+    this.clearCache();
     return true;
   }
   enableSkill(name) {
     const key = name.trim().toLowerCase();
-    return this.disabledSkills.delete(key);
+    const res = this.disabledSkills.delete(key);
+    this.clearCache();
+    return res;
   }
   toggleSkill(name) {
     const key = name.trim().toLowerCase();
+    this.clearCache();
     if (this.disabledSkills.has(key)) {
       this.disabledSkills.delete(key);
       return true;
@@ -8571,6 +8623,7 @@ class SkillsLoader {
   }
   setBuiltInEnabled(enabled) {
     this.includeBuiltIn = enabled;
+    this.clearCache();
   }
   getDiscoveryRoots(cwd) {
     const roots = [resolve20(cwd, ".agents", "skills")];
@@ -8596,6 +8649,12 @@ class SkillsLoader {
     return this.listSkills(cwd, options);
   }
   listSkills(cwd, options) {
+    const cacheKey = `${cwd}:${options?.includeDisabled ?? false}`;
+    const cached = this.skillsCache.get(cacheKey);
+    const now = Date.now();
+    if (cached && now - cached.timestamp < 30000) {
+      return cached.skills;
+    }
     const roots = this.getDiscoveryRoots(cwd);
     const discovered = new Map;
     for (const root of roots) {
@@ -8618,7 +8677,9 @@ class SkillsLoader {
         }
       } catch {}
     }
-    return Array.from(discovered.values());
+    const result = Array.from(discovered.values());
+    this.skillsCache.set(cacheKey, { timestamp: now, skills: result });
+    return result;
   }
   loadSkill(cwd, skillName) {
     if (this.isSkillDisabled(skillName)) {
@@ -8642,20 +8703,32 @@ class SkillsLoader {
       return null;
     }
   }
-  parseSkillFrontmatter(filePath, fallbackName, rootDir, cwd) {
+  parseSkillFrontmatter(filePath, dirName, root, cwd) {
     try {
       const raw = readFileSync10(filePath, "utf8");
       const { attributes } = this.extractFrontmatterAndBody(raw);
-      const isWorkspace = filePath.startsWith(resolve20(cwd, ".agents"));
-      const isBuiltIn = filePath.includes(join8("groupy", "skills")) || rootDir.endsWith("skills") || attributes.source === "built-in";
-      const scope = isWorkspace ? "workspace" : isBuiltIn ? "built-in" : "global";
+      let scope = "global";
+      const normPath = filePath.toLowerCase().replace(/\\/g, "/");
+      const normCwd = cwd.toLowerCase().replace(/\\/g, "/");
+      const normRoot = root.toLowerCase().replace(/\\/g, "/");
+      if (normRoot.includes(".agents") || normRoot === `${normCwd}/skills` || normPath.startsWith(normCwd) || this.customRoots.some((r) => normPath.startsWith(resolve20(r).toLowerCase().replace(/\\/g, "/")))) {
+        scope = "workspace";
+      } else if (normRoot.includes("groupy") && (normRoot.endsWith("skills") || normRoot.includes("plugins"))) {
+        scope = "built-in";
+      }
+      const name = attributes["name"] || dirName;
+      const description = attributes["description"] || "Autonomous agent skill";
+      const shortDescription = attributes["short-description"] || attributes["summary"];
       return {
-        name: attributes.name || fallbackName,
-        description: attributes.description || "Specialized skill workflow.",
-        shortDescription: attributes.short_description || attributes.shortDescription,
+        name,
+        description,
+        shortDescription,
         path: filePath,
-        rootDir,
-        scope
+        rootDir: root,
+        dirPath: resolve20(filePath, ".."),
+        scope,
+        enabled: true,
+        tags: attributes["tags"] ? attributes["tags"].split(",").map((t) => t.trim()) : undefined
       };
     } catch {
       return null;
@@ -8664,17 +8737,20 @@ class SkillsLoader {
   extractFrontmatterAndBody(raw) {
     const attributes = {};
     let body = raw;
-    const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n([\s\S]*)$/);
-    if (match) {
-      const frontmatterText = match[1] || "";
-      body = match[2] || "";
-      for (const line of frontmatterText.split(`
-`)) {
-        const trimmed = line.trim();
-        if (!trimmed || trimmed.startsWith("#"))
-          continue;
-        const colonIdx = trimmed.indexOf(":");
-        if (colonIdx > 0) {
+    if (raw.startsWith("---")) {
+      const match = raw.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n([\s\S]*)$/);
+      if (match) {
+        const yamlContent = match[1] ?? "";
+        body = match[2] ?? "";
+        const lines = yamlContent.split(`
+`);
+        for (const line of lines) {
+          const trimmed = line.trim();
+          if (!trimmed || trimmed.startsWith("#"))
+            continue;
+          const colonIdx = trimmed.indexOf(":");
+          if (colonIdx === -1)
+            continue;
           const key = trimmed.slice(0, colonIdx).trim();
           let val = trimmed.slice(colonIdx + 1).trim();
           if (val.startsWith('"') && val.endsWith('"') || val.startsWith("'") && val.endsWith("'")) {
@@ -8690,22 +8766,23 @@ class SkillsLoader {
     const skills = this.listSkills(cwd, { includeDisabled: false });
     if (skills.length === 0)
       return "";
-    const prioritySkills = skills.filter((s) => s.scope === "workspace" || s.scope === "built-in");
+    const workspaceSkills = skills.filter((s) => s.scope === "workspace");
+    const builtInSkills = skills.filter((s) => s.scope === "built-in");
     const otherSkills = skills.filter((s) => s.scope !== "workspace" && s.scope !== "built-in");
-    const selectedSkills = [...prioritySkills, ...otherSkills].slice(0, 250);
+    const selectedSkills = [...workspaceSkills, ...builtInSkills, ...otherSkills].slice(0, 150);
     const lines = selectedSkills.map((s) => {
       const desc = s.shortDescription || s.description;
       return `- **${s.name}**: ${desc}`;
     });
     const suffix = skills.length > selectedSkills.length ? `
-... and ${skills.length - selectedSkills.length} additional skills available via load_skill.` : "";
+... and ${skills.length - selectedSkills.length} additional domain skills available via \`load_skill\`.` : "";
     return `
 ## Available Domain Skills
 <available_skills>
 ${lines.join(`
 `)}${suffix}
 </available_skills>
-When tackling complex specialized tasks that match any of these skills (e.g., scientific computing, biology/bioinformatics, chemistry, physics, quantum computing, machine learning, mathematics, security auditing, UI frontend design, systematic debugging, TDD), you MUST autonomously use the \`load_skill\` tool to retrieve full instructions before implementing.`;
+When tackling complex specialized tasks that match any of these skills, autonomously use the \`load_skill\` tool to retrieve full instructions before implementing.`;
   }
 }
 // src/memories/store.ts
@@ -9270,30 +9347,186 @@ class AuthClient {
     return createHash("sha256").update(verifier).digest("base64url");
   }
 }
-// src/ui/components/claude/claude-message.tsx
+// src/ui/components/claude/claude-header.tsx
 var jsx_dev_runtime = __toESM(require_jsx_dev_runtime(), 1);
+var ROSE = "#cd694a";
+var GRAY = "#949494";
+var LOGO_BITS = [
+  "001111000000000000",
+  "011001101111111110",
+  "011001100010010010",
+  "001111000000000000"
+];
+function ClaudeLogo({
+  scale = 4,
+  color = ROSE,
+  className
+}) {
+  const w = LOGO_BITS[0].length;
+  const h = LOGO_BITS.length;
+  const PH = 2.4;
+  const rects = [];
+  LOGO_BITS.forEach((row, y) => {
+    let x = 0;
+    while (x < w) {
+      if (row[x] === "1") {
+        let end = x;
+        while (end < w && row[end] === "1")
+          end += 1;
+        rects.push(/* @__PURE__ */ jsx_dev_runtime.jsxDEV("rect", {
+          x,
+          y: y * PH,
+          width: end - x,
+          height: PH
+        }, `${x}-${y}`, false, undefined, this));
+        x = end;
+      } else {
+        x += 1;
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("svg", {
+    "aria-hidden": true,
+    width: w * scale,
+    height: h * PH * scale,
+    viewBox: `0 0 ${w} ${h * PH}`,
+    shapeRendering: "crispEdges",
+    fill: color,
+    className,
+    children: rects
+  }, undefined, false, undefined, this);
+}
+function ClaudeHeader({
+  version = "v0.3.2",
+  user = "Developer",
+  model = "Claude 3.7 Sonnet (Thinking)",
+  plan: plan2 = "Pro",
+  branch = "main",
+  cwd = "~/workspace",
+  tips = ["Ask Groupy to create a new app, test code, or run tasks"],
+  whatsNew = [
+    "Added full Claude Code terminal UI parity",
+    "Added multi-agent sub-agent spawning & security tools"
+  ],
+  className
+}) {
+  const modelLine = `${model} \xB7 Groupy ${plan2}`;
+  const branchLine = `\uE0A0 ${branch}`;
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("fieldset", {
+    className: `min-w-0 rounded-[6px] border px-3 pb-3.5 pt-1 font-mono text-[13px] leading-[1.5] text-[#c0caf5] sm:px-4 ${className || ""}`,
+    style: { borderColor: ROSE },
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("legend", {
+        className: "max-w-full truncate px-2",
+        style: { color: ROSE },
+        children: [
+          "Groupy Code ",
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
+            style: { color: GRAY },
+            children: version
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+        className: "grid min-w-0 gap-4 sm:grid-cols-[minmax(0,1fr)_1px_minmax(0,1.1fr)]",
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            className: "flex min-w-0 flex-col items-center gap-2 py-1 text-center",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "font-semibold text-white",
+                children: [
+                  "Welcome back ",
+                  user,
+                  "!"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV(ClaudeLogo, {
+                className: "my-1.5"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "min-w-0 space-y-0.5 break-words",
+                style: { color: GRAY },
+                children: [
+                  /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                    children: modelLine
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                    children: branchLine
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                    children: cwd
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            "aria-hidden": true,
+            className: "hidden sm:block",
+            style: { background: `${ROSE}55` }
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            className: "min-w-0 space-y-1",
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "font-semibold",
+                style: { color: ROSE },
+                children: "Tips for getting started"
+              }, undefined, false, undefined, this),
+              tips.map((t) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "truncate text-white/90",
+                children: t
+              }, t, false, undefined, this)),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "my-1.5 h-px",
+                style: { background: ROSE }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "font-semibold",
+                style: { color: ROSE },
+                children: "What's new"
+              }, undefined, false, undefined, this),
+              whatsNew.map((t) => /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "truncate text-white/90",
+                children: t
+              }, t, false, undefined, this)),
+              /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+                className: "truncate italic",
+                style: { color: GRAY },
+                children: "/release-notes for more"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/ui/components/claude/claude-message.tsx
+var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
 function ClaudeMessage({
   role = "assistant",
   className = "",
   children
 }) {
   if (role === "user") {
-    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
       className: `flex w-full min-w-0 items-baseline font-mono text-[13px] leading-[1.55] px-2 py-1 rounded-sm ${className}`,
       style: { background: "#3a3a3a" },
       children: [
-        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("span", {
           "aria-hidden": "true",
           className: "shrink-0 font-bold select-none",
           style: { color: "#8a8a8a" },
           children: "\u276F"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("span", {
           "aria-hidden": "true",
           className: "shrink-0",
           style: { display: "inline-block", width: "1ch" }
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime.jsxDEV("span", {
+        /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("span", {
           className: "min-w-0 flex-1 break-words font-medium",
           style: { color: "#ffffff" },
           children
@@ -9301,14 +9534,14 @@ function ClaudeMessage({
       ]
     }, undefined, true, undefined, this);
   }
-  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
     className: `font-mono text-[13px] leading-[1.6] text-[#c0caf5] ${className}`,
     children
   }, undefined, false, undefined, this);
 }
 // src/ui/components/claude/claude-thinking.tsx
 var React = __toESM(require_react(), 1);
-var jsx_dev_runtime2 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime3 = __toESM(require_jsx_dev_runtime(), 1);
 var CLAUDE_GLYPHS = ["\xB7", "\u2722", "\u2733", "\u2736", "\u273B", "\u273D", "\u273B", "\u2736", "\u2733", "\u2722"];
 var CLAUDE_VERBS = [
   "Thinking",
@@ -9353,7 +9586,7 @@ function ClaudeThinking({
     return null;
   const currentVerb = verbs[verbIdx % verbs.length] || "Thinking";
   const tokens = showTokens ? ` \xB7 \u2191 ${Math.max(0, secs * 137)} tokens` : "";
-  return /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
     role: "status",
     "aria-live": "polite",
     className: `flex items-center gap-2 font-mono text-[13px] leading-normal ${className}`,
@@ -9361,7 +9594,7 @@ function ClaudeThinking({
       fontFamily: "var(--font-geist-mono, ui-monospace, monospace)"
     },
     children: [
-      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("style", {
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("style", {
         children: `
         .cw-verb {
           background-image: linear-gradient(100deg, ${CLAUDE_COLOR} 43%, ${HILITE_COLOR} 50%, ${CLAUDE_COLOR} 57%);
@@ -9386,19 +9619,19 @@ function ClaudeThinking({
         }
       `
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("span", {
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
         "aria-hidden": "true",
         style: { color: CLAUDE_COLOR, width: "1ch", display: "inline-block" },
         children: CLAUDE_GLYPHS[glyph]
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("span", {
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
         className: "cw-verb font-medium",
         children: [
           currentVerb,
           "\u2026"
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime2.jsxDEV("span", {
+      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
         style: { color: DIM_COLOR },
         children: [
           "(",
@@ -9412,7 +9645,7 @@ function ClaudeThinking({
   }, undefined, true, undefined, this);
 }
 // src/ui/components/claude/claude-tool-call.tsx
-var jsx_dev_runtime3 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
 var STATUS_COLOR = {
   success: "#4ea96f",
   error: "#f7768e",
@@ -9428,40 +9661,40 @@ function ClaudeToolCall({
   children
 }) {
   const expandable = Boolean(children);
-  return /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("details", {
+  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("details", {
     open: defaultOpen,
     className: `group font-mono text-[13px] leading-[1.55] [&_summary::-webkit-details-marker]:hidden ${className}`,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("summary", {
+      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("summary", {
         className: `list-none ${expandable ? "cursor-pointer" : "cursor-default"} rounded-none outline-none focus-visible:ring-1 focus-visible:ring-[#7dcfff]/60`,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
             className: "flex min-w-0 items-baseline gap-2",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                 "aria-hidden": "true",
                 className: "shrink-0",
                 style: { color: STATUS_COLOR[status] },
                 children: "\u23FA"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                 className: "min-w-0 break-words",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                     className: "text-[#c0caf5] font-semibold",
                     children: tool3
                   }, undefined, false, undefined, this),
-                  arg !== undefined ? /* @__PURE__ */ jsx_dev_runtime3.jsxDEV(jsx_dev_runtime3.Fragment, {
+                  arg !== undefined ? /* @__PURE__ */ jsx_dev_runtime4.jsxDEV(jsx_dev_runtime4.Fragment, {
                     children: [
-                      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+                      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                         className: "text-[#565f89]",
                         children: " ("
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+                      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                         className: "text-[#7dcfff]",
                         children: arg
                       }, undefined, false, undefined, this),
-                      /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+                      /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                         className: "text-[#565f89]",
                         children: ")"
                       }, undefined, false, undefined, this)
@@ -9471,27 +9704,27 @@ function ClaudeToolCall({
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
             className: "flex min-w-0 items-baseline gap-2 text-[#8b8fa3]",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                 "aria-hidden": "true",
                 className: "invisible shrink-0",
                 children: "\u23FA"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                 className: "flex min-w-0 items-baseline gap-2",
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                     "aria-hidden": "true",
                     className: "shrink-0 text-[#565f89]",
                     children: "\u23BF"
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                     className: "min-w-0 break-words",
                     children: [
                       result,
-                      expandable ? /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("span", {
+                      expandable ? /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
                         className: "ml-2 text-[#565f89] group-open:hidden",
                         children: "(ctrl+o to expand)"
                       }, undefined, false, undefined, this) : null
@@ -9503,7 +9736,7 @@ function ClaudeToolCall({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      expandable ? /* @__PURE__ */ jsx_dev_runtime3.jsxDEV("div", {
+      expandable ? /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("div", {
         className: "mt-1 whitespace-pre-wrap pl-[32px] text-[#8b8fa3] border-l border-[#565f89]/30 ml-2",
         children
       }, undefined, false, undefined, this) : null
@@ -9511,7 +9744,7 @@ function ClaudeToolCall({
   }, undefined, true, undefined, this);
 }
 // src/ui/components/claude/claude-todo-list.tsx
-var jsx_dev_runtime4 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
 var DONE_COLOR = "#87d787";
 var ACTIVE_COLOR = "#d78787";
 var DIM_COLOR2 = "#949494";
@@ -9524,19 +9757,19 @@ function ClaudeTodoList({
   todos,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("ol", {
+  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("ol", {
     className: `font-mono text-[13px] leading-[1.6] list-none p-0 m-0 ${className}`,
     children: todos.map((t, i) => {
       const iconColor = t.status === "done" ? DONE_COLOR : t.status === "active" ? ACTIVE_COLOR : undefined;
-      return /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("li", {
+      return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("li", {
         className: "whitespace-pre",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
             "aria-hidden": "true",
             style: { color: DIM_COLOR2 },
             children: i === 0 ? "  \u23BF " : "    "
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
             "aria-hidden": "true",
             style: { color: iconColor },
             children: [
@@ -9544,14 +9777,14 @@ function ClaudeTodoList({
               " "
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
             className: `${t.status === "done" ? "line-through" : ""} ${t.status === "active" ? "font-semibold" : ""}`,
             style: {
               color: t.status === "done" ? DIM_COLOR2 : undefined
             },
             children: [
               t.label,
-              /* @__PURE__ */ jsx_dev_runtime4.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
                 className: "sr-only",
                 children: [
                   " ",
@@ -9568,7 +9801,7 @@ function ClaudeTodoList({
   }, undefined, false, undefined, this);
 }
 // src/ui/components/claude/claude-diff.tsx
-var jsx_dev_runtime5 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
 var GREEN = "#4ea96f";
 var RED = "#f7768e";
 var MUTED = "#565f89";
@@ -9580,34 +9813,34 @@ function ClaudeDiff({
   lines,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
     className: `min-w-0 font-mono text-[13px] leading-[1.55] ${className}`,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
         className: "flex min-w-0 flex-wrap items-baseline gap-x-2",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
             "aria-hidden": "true",
             className: "shrink-0 font-bold",
             style: { color: GREEN },
             children: "\u23FA"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
             className: "text-[#c0caf5] font-semibold",
             children: "Update"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
             className: "min-w-0 break-all",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                 className: "text-[#565f89]",
                 children: "("
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                 className: "text-[#7dcfff]",
                 children: file
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                 className: "text-[#565f89]",
                 children: ")"
               }, undefined, false, undefined, this)
@@ -9615,53 +9848,53 @@ function ClaudeDiff({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      summary ? /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+      summary ? /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
         className: "flex min-w-0 items-baseline gap-2 text-[#8b8fa3]",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
             "aria-hidden": "true",
             className: "invisible shrink-0",
             children: "\u23FA"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
             "aria-hidden": "true",
             className: "shrink-0",
             style: { color: MUTED },
             children: "\u23BF"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
             className: "min-w-0 break-words",
             children: summary
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this) : null,
-      /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("pre", {
+      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("pre", {
         className: "mt-1 min-w-0 overflow-x-auto rounded-none border border-[#202022] bg-[#101010] py-1.5 pl-2 pr-3 font-mono text-[12.5px]",
         children: lines.map((l, i) => {
           const bg = l.type === "add" ? "rgba(78, 169, 111, 0.10)" : l.type === "del" ? "rgba(247, 118, 142, 0.12)" : "transparent";
           const mark = l.type === "add" ? "+" : l.type === "del" ? "-" : " ";
           const markColor = l.type === "add" ? GREEN : l.type === "del" ? RED : MUTED;
-          return /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("div", {
+          return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
             className: "flex min-w-0",
             style: { background: bg },
             children: [
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                 className: "w-9 shrink-0 select-none pr-2 text-right font-mono",
                 style: { color: "#3b3f52" },
                 children: l.n ?? ""
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                 className: "w-3 shrink-0 select-none font-bold",
                 style: { color: markColor },
                 children: mark
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                 className: "min-w-0 break-all",
                 style: {
                   color: l.type === "ctx" ? DIM_TEXT : TEXT_COLOR
                 },
                 children: [
-                  l.type !== "ctx" ? /* @__PURE__ */ jsx_dev_runtime5.jsxDEV("span", {
+                  l.type !== "ctx" ? /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
                     className: "sr-only",
                     children: l.type === "add" ? "added: " : "removed: "
                   }, undefined, false, undefined, this) : null,
@@ -9676,9 +9909,9 @@ function ClaudeDiff({
   }, undefined, true, undefined, this);
 }
 // src/ui/components/claude/claude-prompt.tsx
-var jsx_dev_runtime6 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
 var FG = "#c0caf5";
-var GRAY = "#949494";
+var GRAY2 = "#949494";
 var RULE = "#808080";
 var ULTRACODE_RAINBOW = "linear-gradient(90deg,#afafd7,#d7afd7,#ff87af,#ffaf87,#ffd787,#afd787,#afafd7)";
 var MODES = {
@@ -9691,7 +9924,7 @@ var MODES = {
   manual: {
     glyph: "\u23F8",
     label: "manual mode on",
-    color: GRAY,
+    color: GRAY2,
     hint: "\xB7 ? for shortcuts \xB7 \u2190 for agents"
   },
   "accept-edits": {
@@ -9734,16 +9967,16 @@ function ClaudePrompt({
   const e = effort === false ? null : effort ? EFFORTS[effort] : EFFORTS.xhigh;
   const controlled = value !== undefined;
   const rainbow = Boolean(e?.rainbow);
-  return /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
     className: `min-w-0 font-mono text-[13px] leading-[1.6] ${className}`,
     children: [
-      e ? /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+      e ? /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
         className: "flex justify-end px-1 pb-1 text-[12px]",
-        style: { color: GRAY },
-        children: /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
+        style: { color: GRAY2 },
+        children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
           className: "min-w-0 break-words text-right",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
+            /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
               "aria-hidden": "true",
               children: e.glyph
             }, undefined, false, undefined, this),
@@ -9752,7 +9985,7 @@ function ClaudePrompt({
           ]
         }, undefined, true, undefined, this)
       }, undefined, false, undefined, this) : null,
-      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
         className: "flex min-w-0 items-center gap-0 border-y py-0.5",
         style: rainbow ? {
           borderImageSource: ULTRACODE_RAINBOW,
@@ -9763,13 +9996,13 @@ function ClaudePrompt({
           borderBottomStyle: "solid"
         } : { borderColor: RULE },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
             "aria-hidden": "true",
             className: "shrink-0 pl-0 pr-0",
             style: { color: FG },
             children: "\u276F"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("input", {
+          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("input", {
             type: "text",
             "aria-label": "Prompt",
             placeholder,
@@ -9780,13 +10013,13 @@ function ClaudePrompt({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
         className: "mt-1.5 min-w-0 break-words px-1 text-[12px]",
         children: [
-          /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
             style: { color: m.color },
             children: [
-              /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
                 "aria-hidden": "true",
                 children: [
                   m.glyph,
@@ -9796,8 +10029,8 @@ function ClaudePrompt({
               m.label
             ]
           }, undefined, true, undefined, this),
-          m.hint ? /* @__PURE__ */ jsx_dev_runtime6.jsxDEV("span", {
-            style: { color: GRAY },
+          m.hint ? /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
+            style: { color: GRAY2 },
             children: [
               " ",
               m.hint
@@ -9808,10 +10041,95 @@ function ClaudePrompt({
     ]
   }, undefined, true, undefined, this);
 }
-// src/ui/components/grok/grok-header.tsx
+// src/ui/components/claude/claude-permission.tsx
 var React2 = __toESM(require_react(), 1);
-var jsx_dev_runtime7 = __toESM(require_jsx_dev_runtime(), 1);
-var LOGO_BITS = [
+var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var ROSE2 = "#cd694a";
+function ClaudePermission({
+  title = "Bash command",
+  command = "bun run test",
+  question = "Do you want to proceed?",
+  options = [
+    "Yes",
+    "Yes, and don't ask again this session",
+    "No, and tell Groupy what to do (esc)"
+  ],
+  defaultSelected = 0,
+  onChoose,
+  className
+}) {
+  const [sel, setSel] = React2.useState(defaultSelected);
+  function onKey(e, i) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const next = e.key === "ArrowDown" ? (i + 1) % options.length : (i - 1 + options.length) % options.length;
+      setSel(next);
+      e.currentTarget.parentElement?.children[next]?.focus();
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setSel(i);
+      onChoose?.(i);
+    }
+  }
+  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("fieldset", {
+    className: `rounded-none border px-3.5 py-2.5 font-mono text-[13px] leading-[1.6] ${className || ""}`,
+    style: { borderColor: ROSE2 },
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("legend", {
+        className: "px-2 font-semibold",
+        style: { color: ROSE2 },
+        children: title
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+        className: "text-[#c0caf5]",
+        children: command
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+        className: "mb-1.5 mt-2 text-[#c0caf5]",
+        children: question
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+        role: "radiogroup",
+        "aria-label": question,
+        children: options.map((opt, i) => {
+          const active = sel === i;
+          return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+            role: "radio",
+            "aria-checked": active,
+            tabIndex: active ? 0 : -1,
+            onKeyDown: (e) => onKey(e, i),
+            onClick: () => {
+              setSel(i);
+              onChoose?.(i);
+            },
+            className: "flex cursor-pointer items-baseline gap-2 rounded px-1 py-0.5 outline-none focus-visible:ring-1 focus-visible:ring-[#7dcfff]/60",
+            style: { background: active ? `${ROSE2}1f` : "transparent" },
+            children: [
+              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+                "aria-hidden": true,
+                style: { color: active ? ROSE2 : "transparent", width: "1ch" },
+                children: "\u276F"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+                style: { color: active ? "#c0caf5" : "#8b8fa3" },
+                className: active ? "font-semibold" : undefined,
+                children: [
+                  i + 1,
+                  ". ",
+                  opt
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, i, true, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+// src/ui/components/grok/grok-header.tsx
+var React3 = __toESM(require_react(), 1);
+var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
+var LOGO_BITS2 = [
   "00000000000000000000000001",
   "00000000000111110000000010",
   "00000000111111111110000100",
@@ -9839,8 +10157,8 @@ var LOGO_BITS = [
 ];
 var AMBER = "#e0af68";
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React2.useState(false);
-  React2.useEffect(() => {
+  const [reduced, setReduced] = React3.useState(false);
+  React3.useEffect(() => {
     if (typeof window === "undefined")
       return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -9855,20 +10173,20 @@ function GrokLogo({
   scale = 4,
   className = ""
 }) {
-  const uid = React2.useId().replace(/[^a-z0-9]/gi, "");
+  const uid = React3.useId().replace(/[^a-z0-9]/gi, "");
   const reduced = usePrefersReducedMotion();
-  const cols = LOGO_BITS[0].length;
-  const rows = LOGO_BITS.length;
+  const cols = LOGO_BITS2[0].length;
+  const rows = LOGO_BITS2.length;
   const CELL = 10;
   const DOT = 5.2;
   const off = (CELL - DOT) / 2;
   const W = cols * CELL;
   const H = rows * CELL;
   const dots = [];
-  LOGO_BITS.forEach((row, y) => {
+  LOGO_BITS2.forEach((row, y) => {
     for (let x = 0;x < cols; x += 1) {
       if (row[x] === "1") {
-        dots.push(/* @__PURE__ */ jsx_dev_runtime7.jsxDEV("rect", {
+        dots.push(/* @__PURE__ */ jsx_dev_runtime9.jsxDEV("rect", {
           x: x * CELL + off,
           y: y * CELL + off,
           width: DOT,
@@ -9878,23 +10196,23 @@ function GrokLogo({
       }
     }
   });
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("svg", {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("svg", {
     "aria-hidden": "true",
     width: cols * scale,
     height: rows * scale,
     viewBox: `0 0 ${W} ${H}`,
     className,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("defs", {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("defs", {
         children: [
-          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("mask", {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("mask", {
             id: `m${uid}`,
-            children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("g", {
+            children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("g", {
               fill: "#fff",
               children: dots
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("linearGradient", {
+          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("linearGradient", {
             id: `g${uid}`,
             gradientUnits: "userSpaceOnUse",
             x1: "0",
@@ -9903,15 +10221,15 @@ function GrokLogo({
             y2: H * 0.18,
             spreadMethod: "reflect",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("stop", {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("stop", {
                 offset: "0",
                 stopColor: "#616161"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("stop", {
+              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("stop", {
                 offset: "1",
                 stopColor: "#d4d4d4"
               }, undefined, false, undefined, this),
-              reduced ? null : /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("animateTransform", {
+              reduced ? null : /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("animateTransform", {
                 attributeName: "gradientTransform",
                 type: "translate",
                 from: "0 0",
@@ -9923,7 +10241,7 @@ function GrokLogo({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("rect", {
+      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("rect", {
         width: W,
         height: H,
         fill: `url(#g${uid})`,
@@ -9945,53 +10263,53 @@ function GrokHeader({
   menu = DEFAULT_MENU,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
     className: `min-w-0 rounded-[6px] border border-[#2f2f33] px-3 py-4 font-mono text-[13px] leading-[1.5] text-[#e8e8e8] sm:px-4 ${className}`,
-    children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+    children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
       className: "flex min-w-0 items-center gap-5",
       children: [
-        /* @__PURE__ */ jsx_dev_runtime7.jsxDEV(GrokLogo, {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV(GrokLogo, {
           className: "hidden shrink-0 sm:block"
         }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+        /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
           className: "min-w-0 flex-1",
           children: [
-            /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
               className: "break-words",
               children: [
-                /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
+                /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
                   className: "font-semibold",
                   children: "Groupy Build Beta"
                 }, undefined, false, undefined, this),
                 " ",
-                /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
+                /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
                   className: "text-[#7a7a7a]",
                   children: version
                 }, undefined, false, undefined, this)
               ]
             }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
               className: "mt-2 break-words font-semibold",
               style: { color: AMBER },
               children: headline
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("div", {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
               className: "truncate text-[#8b8b90]",
               children: subhead
             }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("ul", {
+            /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("ul", {
               className: "mt-2.5 min-w-0 space-y-0.5 list-none p-0 m-0",
-              children: menu.map((m) => /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("li", {
-                children: /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("button", {
+              children: menu.map((m) => /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("li", {
+                children: /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("button", {
                   type: "button",
                   onClick: m.action,
                   className: "flex w-full min-w-0 items-center justify-between gap-4 rounded px-1 py-0.5 text-left hover:bg-white/5 bg-transparent border-0 text-[#e8e8e8] cursor-pointer",
                   children: [
-                    /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
+                    /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
                       className: "min-w-0 truncate",
                       children: m.label
                     }, undefined, false, undefined, this),
-                    m.key ? /* @__PURE__ */ jsx_dev_runtime7.jsxDEV("span", {
+                    m.key ? /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
                       className: "shrink-0 text-[#6a6a6a]",
                       children: m.key
                     }, undefined, false, undefined, this) : null
@@ -10006,7 +10324,7 @@ function GrokHeader({
   }, undefined, false, undefined, this);
 }
 // src/ui/components/grok/grok-status.tsx
-var jsx_dev_runtime8 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
 var FG2 = "#e1e1e1";
 var MUTED2 = "#8b8b90";
 var DIM = "#808080";
@@ -10024,16 +10342,16 @@ function GrokStatus({
 }) {
   const showTurn = typeof turn2 === "number" && typeof turnTotal === "number" && turnTotal > 0;
   const showMcp = typeof mcp === "number" && typeof mcpTotal === "number" && mcpTotal > 0;
-  return /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
     className: `flex min-w-0 flex-wrap items-baseline justify-between gap-x-4 gap-y-1 font-mono text-[12px] ${className}`,
     role: "status",
     "aria-label": "Session status",
     children: [
-      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
         className: "min-w-0 max-w-full truncate",
         style: { color: MUTED2 },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
             "aria-hidden": "true",
             style: { color: FG2 },
             children: [
@@ -10041,28 +10359,28 @@ function GrokStatus({
               " "
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
             style: { color: FG2 },
             className: "font-medium",
             children: branch
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
             style: { color: DIM },
             children: " "
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
             children: directory
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
         className: "flex min-w-0 flex-wrap items-baseline gap-x-2 tabular-nums",
         style: { color: MUTED2 },
         children: [
-          showMcp ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          showMcp ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
             style: { color: DIM },
             children: [
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
                 "aria-hidden": "true",
                 children: "\u2834 "
               }, undefined, false, undefined, this),
@@ -10073,23 +10391,23 @@ function GrokStatus({
               ")"
             ]
           }, undefined, true, undefined, this) : null,
-          /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
             children: [
               contextUsed,
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
                 style: { color: DIM },
                 children: " / "
               }, undefined, false, undefined, this),
               contextLimit
             ]
           }, undefined, true, undefined, this),
-          showTurn ? /* @__PURE__ */ jsx_dev_runtime8.jsxDEV(jsx_dev_runtime8.Fragment, {
+          showTurn ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
                 style: { color: DIM },
                 children: "\u2502"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
                 children: [
                   turn2,
                   "/",
@@ -10097,12 +10415,12 @@ function GrokStatus({
                 ]
               }, undefined, true, undefined, this),
               " ",
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
                 "aria-hidden": "true",
                 style: { color: OK },
                 children: "\u2713"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime8.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
                 className: "sr-only",
                 children: " steps complete"
               }, undefined, false, undefined, this)
@@ -10114,8 +10432,8 @@ function GrokStatus({
   }, undefined, true, undefined, this);
 }
 // src/ui/components/grok/grok-permission.tsx
-var React3 = __toESM(require_react(), 1);
-var jsx_dev_runtime9 = __toESM(require_jsx_dev_runtime(), 1);
+var React4 = __toESM(require_react(), 1);
+var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
 var BORDER = "#808080";
 var FG3 = "#e1e1e1";
 var MUTED3 = "#8b8b90";
@@ -10133,7 +10451,7 @@ function GrokPermission({
   onChoose,
   className = ""
 }) {
-  const [sel, setSel] = React3.useState(defaultSelected);
+  const [sel, setSel] = React4.useState(defaultSelected);
   function onKey(e, i) {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
@@ -10146,32 +10464,32 @@ function GrokPermission({
       onChoose?.(i);
     }
   }
-  return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
     className: `font-mono text-[13px] leading-[1.55] ${className}`,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
         className: "border-l-2 pl-3",
         style: { borderColor: BORDER },
         role: "group",
         "aria-label": title,
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
             className: "mb-1 font-medium",
             style: { color: FG3 },
             children: title
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
             className: "mb-2 break-all",
             style: { color: MUTED3 },
             children: command
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
             role: "radiogroup",
             "aria-label": title,
             className: "space-y-1",
             children: options.map((opt, i) => {
               const active = sel === i;
-              return /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+              return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
                 role: "radio",
                 "aria-checked": active,
                 tabIndex: active ? 0 : -1,
@@ -10183,19 +10501,19 @@ function GrokPermission({
                 className: `flex cursor-pointer items-baseline gap-2 outline-none focus-visible:ring-1 focus-visible:ring-white/30 ${active ? "font-semibold" : ""}`,
                 style: { color: active ? FG3 : MUTED3 },
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
                     "aria-hidden": "true",
                     className: "shrink-0 tabular-nums",
                     children: [
                       i + 1,
                       " ",
-                      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+                      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
                         style: { color: active ? FG3 : DIM2 },
                         children: active ? "(\u25CF)" : "(\u25CB)"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
                     children: opt
                   }, undefined, false, undefined, this)
                 ]
@@ -10204,13 +10522,13 @@ function GrokPermission({
           }, undefined, false, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
         className: "mt-3 flex flex-wrap items-center gap-x-2 text-[12px]",
         style: { color: DIM2 },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
                 className: "font-semibold",
                 style: { color: FG3 },
                 children: [
@@ -10222,13 +10540,13 @@ function GrokPermission({
               ":select"
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
             "aria-hidden": "true",
             children: "\u2502"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
                 className: "font-semibold",
                 style: { color: FG3 },
                 children: "Ctrl+o"
@@ -10236,13 +10554,13 @@ function GrokPermission({
               ":yolo"
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
             "aria-hidden": "true",
             children: "\u2502"
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime9.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
                 className: "font-semibold",
                 style: { color: FG3 },
                 children: "Ctrl+c"
@@ -10256,7 +10574,7 @@ function GrokPermission({
   }, undefined, true, undefined, this);
 }
 // src/ui/components/grok/grok-prompt.tsx
-var jsx_dev_runtime10 = __toESM(require_jsx_dev_runtime(), 1);
+var jsx_dev_runtime12 = __toESM(require_jsx_dev_runtime(), 1);
 var BORDER2 = "#505058";
 var FG4 = "#e1e1e1";
 var MUTED4 = "#6c6c6c";
@@ -10287,23 +10605,23 @@ function GrokPrompt({
   const modeLabel = MODE_LABEL[mode];
   const caretColor = mode === "plan" || mode === "plan-approval" ? PLAN : FG4;
   const legend = modeLabel ? `${model} \xB7 ${modeLabel}` : model;
-  return /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
     className: `min-w-0 font-mono text-[13px] leading-[1.5] ${className}`,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
         className: "relative min-w-0 rounded-sm border px-2 py-1.5",
         style: { borderColor: BORDER2, background: SURFACE },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
             className: "flex min-w-0 items-center gap-0",
             children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                 "aria-hidden": "true",
                 className: "shrink-0",
                 style: { color: caretColor },
                 children: "\u276F"
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("input", {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("input", {
                 type: "text",
                 "aria-label": "Prompt",
                 placeholder,
@@ -10317,21 +10635,21 @@ function GrokPrompt({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             className: "absolute -bottom-2.5 right-2 max-w-[calc(100%-1rem)] truncate px-1 text-[12px] sm:right-3",
             style: { background: SURFACE, color: MUTED4 },
             title: legend,
             children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                 children: model
               }, undefined, false, undefined, this),
-              modeLabel ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
+              modeLabel ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                     style: { color: SEP },
                     children: " \xB7 "
                   }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                     children: modeLabel
                   }, undefined, false, undefined, this)
                 ]
@@ -10340,13 +10658,13 @@ function GrokPrompt({
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
-      showShortcuts ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("div", {
+      showShortcuts ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("div", {
         className: "mt-3 flex flex-wrap items-center gap-2 text-[12px]",
         style: { color: MUTED4 },
         children: [
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                 className: "font-semibold",
                 style: { color: FG4 },
                 children: "Shift+Tab"
@@ -10354,16 +10672,16 @@ function GrokPrompt({
               ":mode"
             ]
           }, undefined, true, undefined, this),
-          busy ? /* @__PURE__ */ jsx_dev_runtime10.jsxDEV(jsx_dev_runtime10.Fragment, {
+          busy ? /* @__PURE__ */ jsx_dev_runtime12.jsxDEV(jsx_dev_runtime12.Fragment, {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                 "aria-hidden": "true",
                 className: "inline-block h-3 w-px",
                 style: { background: SEP }
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                 children: [
-                  /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+                  /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                     className: "font-semibold",
                     style: { color: FG4 },
                     children: "Ctrl+c"
@@ -10373,14 +10691,14 @@ function GrokPrompt({
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this) : null,
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             "aria-hidden": "true",
             className: "inline-block h-3 w-px",
             style: { background: SEP }
           }, undefined, false, undefined, this),
-          /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+          /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
             children: [
-              /* @__PURE__ */ jsx_dev_runtime10.jsxDEV("span", {
+              /* @__PURE__ */ jsx_dev_runtime12.jsxDEV("span", {
                 className: "font-semibold",
                 style: { color: FG4 },
                 children: "Ctrl+x"
@@ -10394,8 +10712,8 @@ function GrokPrompt({
   }, undefined, true, undefined, this);
 }
 // src/ui/components/grok/grok-slash-menu.tsx
-var React4 = __toESM(require_react(), 1);
-var jsx_dev_runtime11 = __toESM(require_jsx_dev_runtime(), 1);
+var React5 = __toESM(require_react(), 1);
+var jsx_dev_runtime13 = __toESM(require_jsx_dev_runtime(), 1);
 var DEFAULT_COMMANDS = [
   { name: "/quit", description: "Quit the application" },
   { name: "/help", description: "Browse commands and keyboard shortcuts" },
@@ -10419,8 +10737,8 @@ function GrokSlashMenu({
   onSelect,
   className = ""
 }) {
-  const [value, setValue] = React4.useState("/");
-  const [active, setActive] = React4.useState(0);
+  const [value, setValue] = React5.useState("/");
+  const [active, setActive] = React5.useState(0);
   const query = value.startsWith("/") ? value.slice(1) : value;
   const list = commands.filter((c) => c.name.slice(1).toLowerCase().startsWith(query.toLowerCase()));
   const clampedActive = list.length ? Math.min(active, list.length - 1) : 0;
@@ -10442,20 +10760,20 @@ function GrokSlashMenu({
       }
     }
   }
-  return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+  return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
     className: `font-mono text-[13px] leading-[1.55] ${className}`,
     children: [
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("div", {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("div", {
         className: "mb-2 border-y py-1.5",
         style: { borderColor: RULE_COLOR },
         role: "listbox",
         "aria-label": "Slash commands",
         "aria-activedescendant": list.length ? `grok-slash-${clampedActive}` : undefined,
-        children: /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("ul", {
+        children: /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("ul", {
           className: "space-y-0.5 list-none p-0 m-0",
           children: list.map((c, i) => {
             const activeRow = i === clampedActive;
-            return /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("li", {
+            return /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("li", {
               id: `grok-slash-${i}`,
               role: "option",
               "aria-selected": activeRow,
@@ -10467,18 +10785,18 @@ function GrokSlashMenu({
               className: "flex cursor-pointer items-baseline gap-2 truncate px-1",
               style: { color: activeRow ? ACTIVE_COLOR2 : INACTIVE_COLOR },
               children: [
-                /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
+                /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
                   "aria-hidden": "true",
                   className: "inline-block w-[2ch] shrink-0",
                   style: { color: activeRow ? ACTIVE_COLOR2 : "transparent" },
                   children: "\u276F"
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
+                /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
                   className: "inline-block shrink-0 font-medium",
                   style: { width: `${NAME_COLS}ch` },
                   children: c.name
                 }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsx_dev_runtime11.jsxDEV("span", {
+                /* @__PURE__ */ jsx_dev_runtime13.jsxDEV("span", {
                   className: "min-w-0 truncate",
                   children: c.description
                 }, undefined, false, undefined, this)
@@ -10487,7 +10805,7 @@ function GrokSlashMenu({
           })
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsx_dev_runtime11.jsxDEV(GrokPrompt, {
+      /* @__PURE__ */ jsx_dev_runtime13.jsxDEV(GrokPrompt, {
         value,
         onChange: (e) => {
           setValue(e.target.value);
@@ -10514,7 +10832,10 @@ export {
   ChromeDevToolsController,
   ChromeDevToolsMcpServer,
   ClaudeDiff,
+  ClaudeHeader,
+  ClaudeLogo,
   ClaudeMessage,
+  ClaudePermission,
   ClaudePrompt,
   ClaudeThinking,
   ClaudeTodoList,