@radnine/storybook-addon-claude 0.5.1 → 0.5.3

package/dist/manager.js

@@ -1,5 +1,5 @@
 // src/manager.js
-import React11 from "react";
+import React9 from "react";
 import { addons, types, useStorybookState as useStorybookState2 } from "storybook/manager-api";
 
 // src/constants.js
@@ -18,111 +18,14 @@ var CONNECTION_STATES = {
 };
 
 // src/Panel.jsx
-import React7, { useCallback as useCallback3 } from "react";
+import React5, { useCallback as useCallback3 } from "react";
 import { useAddonState } from "storybook/manager-api";
 
-// src/components/ConnectionStatus.jsx
-import React from "react";
-var STATUS_CONFIG = {
-  [CONNECTION_STATES.CONNECTED]: {
-    label: "Connected",
-    color: "#4caf50"
-  },
-  [CONNECTION_STATES.CONNECTING]: {
-    label: "Connecting...",
-    color: "#ff9800"
-  },
-  [CONNECTION_STATES.RECONNECTING]: {
-    label: "Reconnecting...",
-    color: "#ff9800"
-  },
-  [CONNECTION_STATES.DISCONNECTED]: {
-    label: "Disconnected",
-    color: "#f44336"
-  }
-};
-function ConnectionStatus({ state, sessionId, onDisconnect, onNewChat, isProcessing }) {
-  const config = STATUS_CONFIG[state] || STATUS_CONFIG[CONNECTION_STATES.DISCONNECTED];
-  const isConnected = state === CONNECTION_STATES.CONNECTED;
-  return /* @__PURE__ */ React.createElement("div", { style: styles.container }, /* @__PURE__ */ React.createElement("div", { style: styles.indicator }, /* @__PURE__ */ React.createElement("span", { style: { ...styles.dot, backgroundColor: config.color } }), /* @__PURE__ */ React.createElement("span", { style: styles.label }, config.label)), /* @__PURE__ */ React.createElement("div", { style: styles.right }, sessionId && /* @__PURE__ */ React.createElement("span", { style: styles.sessionId, title: sessionId }, sessionId.slice(0, 8), "..."), onNewChat && isConnected && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: onNewChat,
-      disabled: isProcessing,
-      style: {
-        ...styles.actionButton,
-        ...isProcessing ? styles.actionButtonDisabled : {}
-      },
-      title: "Clear chat and start fresh session",
-      "aria-label": "New Chat"
-    },
-    "New Chat"
-  ), onDisconnect && /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      onClick: onDisconnect,
-      style: styles.actionButton,
-      title: isConnected ? "Disconnect" : "Change Token",
-      "aria-label": isConnected ? "Disconnect" : "Change Token"
-    },
-    isConnected ? "Disconnect" : "Change Token"
-  )));
-}
-var styles = {
-  container: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "6px 12px",
-    borderBottom: "1px solid rgba(0,0,0,0.1)",
-    fontSize: "12px",
-    fontFamily: "inherit"
-  },
-  indicator: {
-    display: "flex",
-    alignItems: "center",
-    gap: "6px"
-  },
-  dot: {
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%",
-    display: "inline-block"
-  },
-  label: {
-    color: "#666"
-  },
-  right: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px"
-  },
-  sessionId: {
-    color: "#999",
-    fontFamily: "monospace",
-    fontSize: "11px"
-  },
-  actionButton: {
-    padding: "2px 8px",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    backgroundColor: "transparent",
-    color: "#666",
-    fontSize: "11px",
-    cursor: "pointer",
-    lineHeight: "1.4"
-  },
-  actionButtonDisabled: {
-    opacity: 0.4,
-    cursor: "default"
-  }
-};
-
 // src/components/MessageList.jsx
-import React3, { useEffect, useRef } from "react";
+import React2, { useEffect, useRef } from "react";
 
 // src/components/MarkdownContent.jsx
-import React2, { useMemo } from "react";
+import React, { useMemo } from "react";
 import { marked } from "marked";
 var renderer = new marked.Renderer();
 renderer.link = function({ href, title, text }) {
@@ -173,7 +76,7 @@ function MarkdownContent({ text }) {
     if (!text) return "";
     return marked.parse(text);
   }, [text]);
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: "claude-md",
@@ -183,56 +86,58 @@ function MarkdownContent({ text }) {
 }
 
 // src/components/MessageList.jsx
-function MessageList({ messages }) {
+function MessageList({ messages, isProcessing }) {
   const bottomRef = useRef(null);
   useEffect(() => {
     var _a;
     (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  }, [messages, isProcessing]);
   if (messages.length === 0) {
-    return /* @__PURE__ */ React3.createElement("div", { style: styles2.empty }, "No messages yet. Send a message to start chatting with Claude.");
+    return /* @__PURE__ */ React2.createElement("div", { style: styles.empty }, "No messages yet. Send a message to start chatting with Claude.");
   }
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.container }, messages.map((msg) => /* @__PURE__ */ React3.createElement(MessageItem, { key: msg.id, message: msg })), /* @__PURE__ */ React3.createElement("div", { ref: bottomRef }));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.container }, messages.map((msg) => /* @__PURE__ */ React2.createElement(MessageItem, { key: msg.id, message: msg })), isProcessing && /* @__PURE__ */ React2.createElement(TypingIndicator, null), /* @__PURE__ */ React2.createElement("div", { ref: bottomRef }));
 }
 function MessageItem({ message }) {
   switch (message.type) {
     case "user_input":
-      return /* @__PURE__ */ React3.createElement(UserMessage, { text: message.text });
+      return /* @__PURE__ */ React2.createElement(UserMessage, { text: message.text });
     case "skill_invocation":
-      return /* @__PURE__ */ React3.createElement(SkillInvocationMessage, { skill: message.skill });
+      return /* @__PURE__ */ React2.createElement(SkillInvocationMessage, { skill: message.skill });
     case "output":
-      return /* @__PURE__ */ React3.createElement(OutputMessage, { data: message.data, replay: message.replay });
+      return /* @__PURE__ */ React2.createElement(OutputMessage, { data: message.data, replay: message.replay });
     case "complete":
-      return /* @__PURE__ */ React3.createElement(CompleteMessage, { message });
+      return /* @__PURE__ */ React2.createElement(CompleteMessage, { message });
+    case "cancelled":
+      return /* @__PURE__ */ React2.createElement(CancelledMessage, null);
     case "error":
-      return /* @__PURE__ */ React3.createElement(ErrorMessage, { message });
+      return /* @__PURE__ */ React2.createElement(ErrorMessage, { message });
     default:
       return null;
   }
 }
 function UserMessage({ text }) {
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.userRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.userBubble }, text));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.userRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.userBubble }, text));
 }
 function OutputMessage({ data, replay }) {
   if (!data) return null;
   const classifiedType = classifyOutputType(data);
   switch (classifiedType) {
     case "assistant":
-      return /* @__PURE__ */ React3.createElement(AssistantMessage, { data, replay });
+      return /* @__PURE__ */ React2.createElement(AssistantMessage, { data, replay });
     case "tool_use":
-      return /* @__PURE__ */ React3.createElement(ToolUseMessage, { data });
+      return /* @__PURE__ */ React2.createElement(ToolUseMessage, { data });
     case "tool_result":
-      return /* @__PURE__ */ React3.createElement(ToolResultMessage, { data });
+      return /* @__PURE__ */ React2.createElement(ToolResultMessage, { data });
     case "result":
-      return /* @__PURE__ */ React3.createElement(ResultMessage, { data });
+      return /* @__PURE__ */ React2.createElement(ResultMessage, { data });
     case "system":
-      return /* @__PURE__ */ React3.createElement(SystemMessage, { data });
+      return /* @__PURE__ */ React2.createElement(SystemMessage, { data });
     case "rate_limit_event":
-      return /* @__PURE__ */ React3.createElement(RateLimitMessage, { data });
+      return /* @__PURE__ */ React2.createElement(RateLimitMessage, { data });
     case "_skip":
       return null;
     default:
-      return /* @__PURE__ */ React3.createElement(GenericOutputMessage, { data, replay });
+      return /* @__PURE__ */ React2.createElement(GenericOutputMessage, { data, replay });
   }
 }
 function classifyOutputType(data) {
@@ -268,31 +173,31 @@ function classifyOutputType(data) {
 }
 function AssistantMessage({ data, replay }) {
   const text = extractAssistantText(data);
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.assistantRow }, /* @__PURE__ */ React3.createElement("div", { style: { ...styles2.assistantBubble, ...replay ? styles2.replay : {} } }, text ? /* @__PURE__ */ React3.createElement(MarkdownContent, { text }) : "(empty response)"));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.assistantRow }, /* @__PURE__ */ React2.createElement("div", { style: { ...styles.assistantBubble, ...replay ? styles.replay : {} } }, text ? /* @__PURE__ */ React2.createElement(MarkdownContent, { text }) : "(empty response)"));
 }
 function ToolUseMessage({ data }) {
   const toolName = extractToolName(data);
   const summary = extractToolSummary(data);
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: styles2.toolSummary }, /* @__PURE__ */ React3.createElement("span", { style: styles2.toolIcon }, "\u2699"), " ", toolName, summary ? `: ${summary}` : ""), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: styles.toolSummary }, /* @__PURE__ */ React2.createElement("span", { style: styles.toolIcon }, "\u2699"), " ", toolName, summary ? `: ${summary}` : ""), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
 }
 function ToolResultMessage({ data }) {
   const isError = extractToolResultError(data);
   const summary = extractToolResultSummary(data);
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: { ...styles2.toolSummary, color: isError ? "#f44336" : "#4caf50" } }, isError ? "Error" : "Done", summary ? `: ${summary}` : ""), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: { ...styles.toolSummary, color: isError ? "#f44336" : "#4caf50" } }, isError ? "Error" : "Done", summary ? `: ${summary}` : ""), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
 }
 function ResultMessage({ data }) {
   const subtype = (data == null ? void 0 : data.subtype) || "unknown";
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.resultRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.resultBubble }, /* @__PURE__ */ React3.createElement("span", { style: styles2.resultLabel }, subtype === "success" ? "Completed" : `Result: ${subtype}`)));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.resultRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.resultBubble }, /* @__PURE__ */ React2.createElement("span", { style: styles.resultLabel }, subtype === "success" ? "Completed" : `Result: ${subtype}`)));
 }
 function SystemMessage({ data }) {
   if (typeof (data == null ? void 0 : data.message) === "string") {
-    return /* @__PURE__ */ React3.createElement("div", { style: styles2.systemRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.systemBubble }, data.message));
+    return /* @__PURE__ */ React2.createElement("div", { style: styles.systemRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.systemBubble }, data.message));
   }
   const label = (data == null ? void 0 : data.subtype) ? `System: ${data.subtype}` : "System event";
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: styles2.toolSummary }, label), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: styles.toolSummary }, label), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
 }
 function RateLimitMessage({ data }) {
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: { ...styles2.toolSummary, color: "#ff9800" } }, "Rate limited (waiting...)"), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: { ...styles.toolSummary, color: "#ff9800" } }, "Rate limited (waiting...)"), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
 }
 function GenericOutputMessage({ data, replay }) {
   const text = extractAssistantText(data);
@@ -300,19 +205,30 @@ function GenericOutputMessage({ data, replay }) {
     return null;
   }
   if (text) {
-    return /* @__PURE__ */ React3.createElement("div", { style: styles2.assistantRow }, /* @__PURE__ */ React3.createElement("div", { style: { ...styles2.assistantBubble, ...replay ? styles2.replay : {} } }, /* @__PURE__ */ React3.createElement(MarkdownContent, { text })));
+    return /* @__PURE__ */ React2.createElement("div", { style: styles.assistantRow }, /* @__PURE__ */ React2.createElement("div", { style: { ...styles.assistantBubble, ...replay ? styles.replay : {} } }, /* @__PURE__ */ React2.createElement(MarkdownContent, { text })));
   }
   const summaryLabel = typeof data === "object" && data.type ? `System: ${data.type}` : "System message";
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: styles2.toolSummary }, summaryLabel), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: styles.toolSummary }, summaryLabel), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
 }
 function CompleteMessage({ message }) {
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.systemRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.completeBubble }, "Command completed (exit ", message.exitCode ?? "?", ")", message.durationMs != null && ` in ${(message.durationMs / 1e3).toFixed(1)}s`));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.systemRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.completeBubble }, "Command completed (exit ", message.exitCode ?? "?", ")", message.durationMs != null && ` in ${(message.durationMs / 1e3).toFixed(1)}s`));
+}
+function CancelledMessage() {
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.resultRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.cancelledBubble }, /* @__PURE__ */ React2.createElement("span", { style: styles.resultLabel }, "Cancelled")));
 }
 function SkillInvocationMessage({ skill }) {
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.skillRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.skillBubble }, /* @__PURE__ */ React3.createElement("span", { style: styles2.skillIcon }, skill.icon), /* @__PURE__ */ React3.createElement("span", { style: styles2.skillLabel }, "Skill: ", skill.label)));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.skillRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.skillBubble }, /* @__PURE__ */ React2.createElement("span", { style: styles.skillIcon }, skill.icon), /* @__PURE__ */ React2.createElement("span", { style: styles.skillLabel }, "Skill: ", skill.label)));
+}
+function TypingIndicator() {
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.assistantRow }, /* @__PURE__ */ React2.createElement("style", null, `
+        @keyframes claude-typing-bounce {
+          0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+          30% { opacity: 1; transform: translateY(-3px); }
+        }
+      `), /* @__PURE__ */ React2.createElement("div", { style: styles.typingBubble }, /* @__PURE__ */ React2.createElement("span", { style: styles.typingDot }), /* @__PURE__ */ React2.createElement("span", { style: { ...styles.typingDot, animationDelay: "0.2s" } }), /* @__PURE__ */ React2.createElement("span", { style: { ...styles.typingDot, animationDelay: "0.4s" } })));
 }
 function ErrorMessage({ message }) {
-  return /* @__PURE__ */ React3.createElement("div", { style: styles2.errorRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.errorBubble }, message.code && /* @__PURE__ */ React3.createElement("span", { style: styles2.errorCode }, message.code, ": "), message.message || "Unknown error"));
+  return /* @__PURE__ */ React2.createElement("div", { style: styles.errorRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.errorBubble }, message.code && /* @__PURE__ */ React2.createElement("span", { style: styles.errorCode }, message.code, ": "), message.message || "Unknown error"));
 }
 function extractAssistantText(data) {
   var _a;
@@ -369,7 +285,7 @@ function extractToolResultSummary(data) {
   }
   return null;
 }
-var styles2 = {
+var styles = {
   container: {
     flex: 1,
     overflowY: "auto",
@@ -495,6 +411,29 @@ var styles2 = {
     fontSize: "11px",
     color: "#777"
   },
+  typingBubble: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "10px 14px",
+    borderRadius: "12px 12px 12px 2px",
+    backgroundColor: "#f0f0f0"
+  },
+  typingDot: {
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    backgroundColor: "#999",
+    animation: "claude-typing-bounce 1.2s infinite"
+  },
+  cancelledBubble: {
+    padding: "6px 12px",
+    borderRadius: "8px",
+    backgroundColor: "#fff3e0",
+    fontSize: "12px",
+    color: "#e65100",
+    textAlign: "center"
+  },
   genericContent: {
     margin: 0,
     padding: "8px",
@@ -547,8 +486,8 @@ var styles2 = {
 };
 
 // src/components/MessageInput.jsx
-import React4, { useState, useRef as useRef2 } from "react";
-function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
+import React3, { useState, useRef as useRef2 } from "react";
+function MessageInput({ onSend, disabled, isProcessing, placeholder, onCancel }) {
   const [text, setText] = useState("");
   const textareaRef = useRef2(null);
   const handleSend = () => {
@@ -561,7 +500,10 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
     }
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
+    if (e.key === "Escape" && isProcessing && onCancel) {
+      e.preventDefault();
+      onCancel();
+    } else if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
@@ -572,11 +514,34 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
     el.style.height = "auto";
     el.style.height = Math.min(el.scrollHeight, 120) + "px";
   };
-  return /* @__PURE__ */ React4.createElement("div", { style: styles3.container }, /* @__PURE__ */ React4.createElement(
+  if (isProcessing && onCancel) {
+    return /* @__PURE__ */ React3.createElement("div", { style: styles2.container }, /* @__PURE__ */ React3.createElement(
+      "textarea",
+      {
+        ref: textareaRef,
+        style: styles2.textarea,
+        value: text,
+        onChange: handleInput,
+        onKeyDown: handleKeyDown,
+        placeholder: disabled ? "Connect to daemon first..." : placeholder || "Ask Claude...",
+        disabled: true,
+        rows: 1
+      }
+    ), /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        style: styles2.buttonCancel,
+        onClick: onCancel,
+        title: "Cancel response (Escape)"
+      },
+      "Cancel"
+    ));
+  }
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.container }, /* @__PURE__ */ React3.createElement(
     "textarea",
     {
       ref: textareaRef,
-      style: styles3.textarea,
+      style: styles2.textarea,
       value: text,
       onChange: handleInput,
       onKeyDown: handleKeyDown,
@@ -584,21 +549,21 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
       disabled,
       rows: 1
     }
-  ), /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React3.createElement(
     "button",
     {
       style: {
-        ...styles3.button,
-        ...disabled || !text.trim() ? styles3.buttonDisabled : {}
+        ...styles2.button,
+        ...disabled || !text.trim() ? styles2.buttonDisabled : {}
       },
       onClick: handleSend,
       disabled: disabled || !text.trim(),
       title: "Send message (Enter)"
     },
-    isProcessing ? "..." : "Send"
+    "Send"
   ));
 }
-var styles3 = {
+var styles2 = {
   container: {
     display: "flex",
     alignItems: "flex-end",
@@ -634,11 +599,23 @@ var styles3 = {
   buttonDisabled: {
     backgroundColor: "#ccc",
     cursor: "not-allowed"
+  },
+  buttonCancel: {
+    padding: "8px 16px",
+    border: "none",
+    borderRadius: "8px",
+    backgroundColor: "#e53e3e",
+    color: "#fff",
+    fontSize: "13px",
+    fontWeight: 600,
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    minHeight: "36px"
   }
 };
 
 // src/components/TokenInput.jsx
-import React5, { useState as useState2 } from "react";
+import React4, { useState as useState2 } from "react";
 function TokenInput({ onSubmit, defaultPort = 3001 }) {
   const [token, setToken] = useState2("");
   const [port, setPort] = useState2(String(defaultPort));
@@ -650,42 +627,42 @@ function TokenInput({ onSubmit, defaultPort = 3001 }) {
       onSubmit(trimmed, portNum);
     }
   };
-  return /* @__PURE__ */ React5.createElement("div", { style: styles4.container }, /* @__PURE__ */ React5.createElement("div", { style: styles4.title }, "Connect to Claude Daemon"), /* @__PURE__ */ React5.createElement("p", { style: styles4.description }, "Enter the auth token from the daemon's startup output, or set the ", /* @__PURE__ */ React5.createElement("code", { style: styles4.code }, "CLAUDE_DAEMON_TOKEN"), " environment variable."), /* @__PURE__ */ React5.createElement("form", { onSubmit: handleSubmit, style: styles4.form }, /* @__PURE__ */ React5.createElement("div", { style: styles4.inputRow }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { style: styles3.container }, /* @__PURE__ */ React4.createElement("div", { style: styles3.title }, "Connect to Claude Daemon"), /* @__PURE__ */ React4.createElement("p", { style: styles3.description }, "Enter the auth token from the daemon's startup output, or set the ", /* @__PURE__ */ React4.createElement("code", { style: styles3.code }, "CLAUDE_DAEMON_TOKEN"), " environment variable."), /* @__PURE__ */ React4.createElement("form", { onSubmit: handleSubmit, style: styles3.form }, /* @__PURE__ */ React4.createElement("div", { style: styles3.inputRow }, /* @__PURE__ */ React4.createElement(
     "input",
     {
       type: "text",
       value: token,
       onChange: (e) => setToken(e.target.value),
       placeholder: "Paste daemon auth token...",
-      style: styles4.input,
+      style: styles3.input,
       autoFocus: true
     }
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React4.createElement(
     "input",
     {
       type: "number",
       value: port,
       onChange: (e) => setPort(e.target.value),
       placeholder: "Port",
-      style: styles4.portInput,
+      style: styles3.portInput,
       min: "1",
       max: "65535",
       "aria-label": "Port"
     }
-  )), /* @__PURE__ */ React5.createElement(
+  )), /* @__PURE__ */ React4.createElement(
     "button",
     {
       type: "submit",
       disabled: !token.trim(),
       style: {
-        ...styles4.button,
-        ...!token.trim() ? styles4.buttonDisabled : {}
+        ...styles3.button,
+        ...!token.trim() ? styles3.buttonDisabled : {}
       }
     },
     "Connect"
   )));
 }
-var styles4 = {
+var styles3 = {
   container: {
     display: "flex",
     flexDirection: "column",
@@ -762,63 +739,6 @@ var styles4 = {
   }
 };
 
-// src/components/GitContextBar.jsx
-import React6 from "react";
-function GitContextBar({ branch, pr, loading }) {
-  if (loading || !branch) return null;
-  return /* @__PURE__ */ React6.createElement("div", { style: styles5.container }, /* @__PURE__ */ React6.createElement("div", { style: styles5.left }, /* @__PURE__ */ React6.createElement("span", { style: styles5.branchIcon, title: "Git branch" }, "\u2387"), /* @__PURE__ */ React6.createElement("span", { style: styles5.branchName }, branch)), pr && /* @__PURE__ */ React6.createElement("div", { style: styles5.right }, /* @__PURE__ */ React6.createElement(
-    "a",
-    {
-      href: pr.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      style: styles5.prLink,
-      title: pr.title
-    },
-    "PR #",
-    pr.number
-  )));
-}
-var styles5 = {
-  container: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "3px 12px",
-    borderBottom: "1px solid rgba(0,0,0,0.1)",
-    backgroundColor: "#f5f5f5",
-    fontSize: "11px",
-    fontFamily: "inherit"
-  },
-  left: {
-    display: "flex",
-    alignItems: "center",
-    gap: "4px"
-  },
-  branchIcon: {
-    fontSize: "12px",
-    color: "#888"
-  },
-  branchName: {
-    fontFamily: "monospace",
-    fontSize: "11px",
-    color: "#555",
-    backgroundColor: "#eee",
-    padding: "1px 5px",
-    borderRadius: "3px"
-  },
-  right: {
-    display: "flex",
-    alignItems: "center"
-  },
-  prLink: {
-    color: "#0366d6",
-    textDecoration: "none",
-    fontFamily: "monospace",
-    fontSize: "11px"
-  }
-};
-
 // src/useClaudeSession.js
 import { useState as useState3, useEffect as useEffect2, useRef as useRef3, useCallback } from "react";
 
@@ -828,6 +748,7 @@ var WebSocketClient = class {
     this._host = options.host || DEFAULT_HOST;
     this._port = options.port || DEFAULT_PORT;
     this._token = options.token || null;
+    this._daemonUrl = options.daemonUrl || null;
     this._ws = null;
     this._state = CONNECTION_STATES.DISCONNECTED;
     this._listeners = /* @__PURE__ */ new Map();
@@ -847,7 +768,7 @@ var WebSocketClient = class {
   }
   /**
    * Register an event listener.
-   * Events: 'state_change', 'session_activated', 'output', 'complete', 'error', 'pong'
+   * Events: 'state_change', 'session_activated', 'output', 'complete', 'error', 'pong', 'cancelled'
    */
   on(event, callback) {
     if (!this._listeners.has(event)) {
@@ -870,7 +791,7 @@ var WebSocketClient = class {
       this._setState(CONNECTION_STATES.CONNECTING);
     }
     const params = this._token ? `?token=${encodeURIComponent(this._token)}` : "";
-    const url = `ws://${this._host}:${this._port}/${params}`;
+    const url = this._buildUrl(params);
     try {
       this._ws = new WebSocket(url);
     } catch (err) {
@@ -922,6 +843,12 @@ var WebSocketClient = class {
   setToken(token) {
     this._token = token;
   }
+  /**
+   * Update the daemon URL for remote environments.
+   */
+  setDaemonUrl(url) {
+    this._daemonUrl = url;
+  }
   /**
    * Activate a session. Must be called after connecting.
    */
@@ -952,6 +879,16 @@ var WebSocketClient = class {
       sessionId
     });
   }
+  /**
+   * Cancel a command in progress.
+   */
+  cancelCommand(sessionId, commandId) {
+    this._send({
+      type: "cancel",
+      sessionId,
+      commandId
+    });
+  }
   /**
    * Send a query to the daemon.
    */
@@ -964,6 +901,28 @@ var WebSocketClient = class {
   // ---------------------------------------------------------------------------
   // Internal
   // ---------------------------------------------------------------------------
+  /**
+   * Build the WebSocket URL. Priority:
+   *  1. Explicit `daemonUrl` option (fully custom URL)
+   *  2. Auto-detected Codespaces forwarded URL (derived from current hostname)
+   *  3. Local `ws://host:port/` fallback
+   */
+  _buildUrl(params) {
+    if (this._daemonUrl) {
+      const base = this._daemonUrl.replace(/\/$/, "");
+      return `${base}/${params}`;
+    }
+    if (typeof window !== "undefined" && window.location) {
+      const hostname = window.location.hostname;
+      const match = hostname.match(/^(.+)-(\d+)(\..*\.app\.github\.dev)$/);
+      if (match) {
+        const [, prefix, , suffix] = match;
+        const daemonHost = `${prefix}-${this._port}${suffix}`;
+        return `wss://${daemonHost}/${params}`;
+      }
+    }
+    return `ws://${this._host}:${this._port}/${params}`;
+  }
   _send(msg) {
     if (this._ws && this._ws.readyState === WebSocket.OPEN) {
       this._ws.send(JSON.stringify(msg));
@@ -985,6 +944,7 @@ var WebSocketClient = class {
       case "user_input":
       case "pong":
       case "query_result":
+      case "cancelled":
         this._emit(msg.type, msg);
         break;
       default:
@@ -1076,6 +1036,7 @@ function useClaudeSession(options = {}) {
   const clientRef = useRef3(null);
   const sessionIdRef = useRef3(sessionId);
   sessionIdRef.current = sessionId;
+  const currentCommandIdRef = useRef3(null);
   useEffect2(() => {
     const client = new WebSocketClient({ host, port, token });
     clientRef.current = client;
@@ -1134,6 +1095,12 @@ function useClaudeSession(options = {}) {
           { type: "error", ...msg, id: crypto.randomUUID(), timestamp: Date.now() }
         ]);
         setIsProcessing(false);
+      }),
+      client.on("cancelled", (msg) => {
+        if (msg.sessionId !== sessionIdRef.current) return;
+        setMessages((prev) => [...prev, { type: "cancelled", id: crypto.randomUUID(), timestamp: msg.timestamp, sessionId: msg.sessionId }]);
+        setIsProcessing(false);
+        currentCommandIdRef.current = null;
       })
     ];
     return () => {
@@ -1173,7 +1140,9 @@ ${text}` : text;
         }
       ]);
       setIsProcessing(true);
-      client.sendCommand(sessionIdRef.current, fullText);
+      const commandId = crypto.randomUUID();
+      currentCommandIdRef.current = commandId;
+      client.sendCommand(sessionIdRef.current, fullText, commandId);
     },
     []
   );
@@ -1215,6 +1184,12 @@ ${text}` : text;
       startSession();
     }
   }, [startSession]);
+  const cancelCommand = useCallback(() => {
+    const client = clientRef.current;
+    const cmdId = currentCommandIdRef.current;
+    if (!client || !client.isConnected || !sessionIdRef.current) return;
+    client.cancelCommand(sessionIdRef.current, cmdId);
+  }, []);
   return {
     connectionState,
     messages,
@@ -1227,44 +1202,42 @@ ${text}` : text;
     setMessages,
     disconnect,
     newChat,
+    cancelCommand,
     isConnected: connectionState === CONNECTION_STATES.CONNECTED,
     client: clientRef.current
   };
 }
 
-// src/useGitContext.js
+// src/useDaemonQuery.js
 import { useState as useState4, useEffect as useEffect3, useRef as useRef4, useCallback as useCallback2 } from "react";
-function useGitContext(client, connectionState) {
-  const [gitData, setGitData] = useState4(null);
-  const [loading, setLoading] = useState4(false);
+function useDaemonQuery(client, connectionState, queryType, pollIntervalMs) {
+  const [data, setData] = useState4(null);
+  const [error, setError] = useState4(null);
   const intervalRef = useRef4(null);
-  const unsubRef = useRef4(null);
-  const fetchContext = useCallback2(() => {
+  const dataRef = useRef4(null);
+  const fetchQuery = useCallback2(() => {
     if (!client || !client.isConnected) return;
-    setLoading(true);
-    client.sendQuery("git_context");
-  }, [client]);
+    client.sendQuery(queryType);
+  }, [client, queryType]);
   useEffect3(() => {
     if (!client) return;
     const unsub = client.on("query_result", (msg) => {
-      if (msg.queryType === "git_context") {
-        setGitData(msg.data || null);
-        setLoading(false);
+      if (msg.queryType === queryType) {
+        dataRef.current = msg.data || null;
+        setData(msg.data || null);
+        setError(null);
       }
     });
     const unsubErr = client.on("error", (msg) => {
       if (msg.code === "UNKNOWN_TYPE" || msg.code === "UNKNOWN_QUERY") {
-        setLoading(false);
+        setError(msg.message || "Unsupported query");
       }
     });
-    unsubRef.current = () => {
+    return () => {
       unsub();
       unsubErr();
     };
-    return () => {
-      if (unsubRef.current) unsubRef.current();
-    };
-  }, [client]);
+  }, [client, queryType]);
   useEffect3(() => {
     if (connectionState !== CONNECTION_STATES.CONNECTED) {
       if (intervalRef.current) {
@@ -1273,18 +1246,25 @@ function useGitContext(client, connectionState) {
       }
       return;
     }
-    fetchContext();
-    intervalRef.current = setInterval(fetchContext, 6e4);
+    fetchQuery();
+    intervalRef.current = setInterval(fetchQuery, pollIntervalMs);
     return () => {
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
       }
     };
-  }, [connectionState, fetchContext]);
+  }, [connectionState, fetchQuery, pollIntervalMs]);
+  const loading = data === null && dataRef.current === null && error === null;
+  return { data, loading, error };
+}
+
+// src/useGitContext.js
+function useGitContext(client, connectionState) {
+  const { data, loading } = useDaemonQuery(client, connectionState, "git_context", 6e4);
   return {
-    branch: (gitData == null ? void 0 : gitData.branch) || null,
-    pr: (gitData == null ? void 0 : gitData.pr) || null,
+    branch: (data == null ? void 0 : data.branch) || null,
+    pr: (data == null ? void 0 : data.pr) || null,
     loading
   };
 }
@@ -1342,12 +1322,10 @@ function storyFileToComponentFile(storyPath) {
 function ClaudePanel({ active }) {
   const [addonState, setAddonState] = useAddonState(ADDON_ID, {
     token: getInitialToken(),
-    port: getInitialPort(),
-    contextEnabled: true
+    port: getInitialPort()
   });
   const token = (addonState == null ? void 0 : addonState.token) || null;
   const port = (addonState == null ? void 0 : addonState.port) || DEFAULT_PORT;
-  const contextEnabled = (addonState == null ? void 0 : addonState.contextEnabled) ?? true;
   const storyContext = useStoryContext();
   const {
     connectionState,
@@ -1357,8 +1335,8 @@ function ClaudePanel({ active }) {
     authFailed,
     sendMessage,
     startSession,
-    disconnect,
     newChat,
+    cancelCommand,
     isConnected,
     client
   } = useClaudeSession({
@@ -1373,41 +1351,53 @@ function ClaudePanel({ active }) {
     },
     [addonState, setAddonState]
   );
-  const handleDisconnect = useCallback3(() => {
-    disconnect();
-    setAddonState({ ...addonState, token: null });
-  }, [addonState, setAddonState, disconnect]);
   const handleSend = useCallback3(
     (text) => {
       if (!sessionId) {
         startSession();
       }
-      const prefix = contextEnabled ? buildContextPrefix(storyContext) : null;
+      const prefix = buildContextPrefix(storyContext);
       sendMessage(text, prefix);
     },
-    [sessionId, startSession, sendMessage, contextEnabled, storyContext]
+    [sessionId, startSession, sendMessage, storyContext]
   );
-  const toggleContext = useCallback3(() => {
-    setAddonState({ ...addonState, contextEnabled: !contextEnabled });
-  }, [addonState, contextEnabled, setAddonState]);
   if (!active) return null;
   if (authFailed && !token) {
-    return /* @__PURE__ */ React7.createElement("div", { style: styles6.panel }, /* @__PURE__ */ React7.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
+    return /* @__PURE__ */ React5.createElement("div", { style: styles4.panel }, /* @__PURE__ */ React5.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
   }
-  return /* @__PURE__ */ React7.createElement("div", { style: styles6.panel }, /* @__PURE__ */ React7.createElement(ConnectionStatus, { state: connectionState, sessionId, onDisconnect: handleDisconnect, onNewChat: newChat, isProcessing }), /* @__PURE__ */ React7.createElement(GitContextBar, { branch: gitContext.branch, pr: gitContext.pr, loading: gitContext.loading }), storyContext.componentPath && /* @__PURE__ */ React7.createElement("div", { style: styles6.contextBar }, /* @__PURE__ */ React7.createElement("label", { style: styles6.contextLabel }, /* @__PURE__ */ React7.createElement(
-    "input",
+  const statusColor = connectionState === CONNECTION_STATES.CONNECTED ? "#4caf50" : connectionState === CONNECTION_STATES.DISCONNECTED ? "#f44336" : "#ff9800";
+  const statusLabel = connectionState === CONNECTION_STATES.CONNECTED ? "Connected" : connectionState === CONNECTION_STATES.CONNECTING ? "Connecting..." : connectionState === CONNECTION_STATES.RECONNECTING ? "Reconnecting..." : "Disconnected";
+  return /* @__PURE__ */ React5.createElement("div", { style: styles4.panel }, /* @__PURE__ */ React5.createElement("div", { style: styles4.headerBar }, /* @__PURE__ */ React5.createElement("div", { style: styles4.headerLeft }, /* @__PURE__ */ React5.createElement("span", { style: { ...styles4.statusDot, backgroundColor: statusColor }, title: statusLabel }), /* @__PURE__ */ React5.createElement("span", { style: styles4.statusLabel }, statusLabel)), /* @__PURE__ */ React5.createElement("div", { style: styles4.headerRight }, gitContext.branch && /* @__PURE__ */ React5.createElement("div", { style: styles4.gitContext }, /* @__PURE__ */ React5.createElement("div", { style: styles4.branchName }, /* @__PURE__ */ React5.createElement("span", { style: styles4.branchIcon, title: "Git branch" }, "\u2387"), gitContext.branch), gitContext.pr && /* @__PURE__ */ React5.createElement(
+    "a",
     {
-      type: "checkbox",
-      checked: contextEnabled,
-      onChange: toggleContext,
-      style: styles6.contextCheckbox
-    }
-  ), "Context: ", /* @__PURE__ */ React7.createElement("code", { style: styles6.contextPath }, storyContext.componentPath))), /* @__PURE__ */ React7.createElement(MessageList, { messages }), /* @__PURE__ */ React7.createElement(
+      href: gitContext.pr.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: styles4.prLink,
+      title: gitContext.pr.title
+    },
+    "PR #",
+    gitContext.pr.number
+  )), isConnected && /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: newChat,
+      disabled: isProcessing,
+      style: {
+        ...styles4.newChatButton,
+        ...isProcessing ? styles4.newChatButtonDisabled : {}
+      },
+      title: "Clear chat and start fresh session",
+      "aria-label": "New Chat"
+    },
+    "New Chat"
+  ))), /* @__PURE__ */ React5.createElement(MessageList, { messages, isProcessing }), /* @__PURE__ */ React5.createElement(
     MessageInput,
     {
       onSend: handleSend,
       disabled: !isConnected,
-      isProcessing
+      isProcessing,
+      onCancel: cancelCommand
     }
   ));
 }
@@ -1426,68 +1416,118 @@ function getInitialPort() {
 function getInitialToken() {
   var _a, _b;
   try {
+    if (typeof window !== "undefined" && window.__CLAUDE_DAEMON_TOKEN__) {
+      return window.__CLAUDE_DAEMON_TOKEN__;
+    }
     return typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.STORYBOOK_CLAUDE_DAEMON_TOKEN) || typeof process !== "undefined" && ((_b = process.env) == null ? void 0 : _b.CLAUDE_DAEMON_TOKEN) || null;
   } catch {
     return null;
   }
 }
-var styles6 = {
+var styles4 = {
   panel: {
     display: "flex",
     flexDirection: "column",
     height: "100%",
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
   },
-  contextBar: {
-    padding: "4px 12px",
+  headerBar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "6px 12px",
     borderBottom: "1px solid rgba(0,0,0,0.1)",
-    backgroundColor: "#fafafa",
-    fontSize: "12px"
+    backgroundColor: "#f5f5f5",
+    fontSize: "12px",
+    fontFamily: "inherit"
   },
-  contextLabel: {
+  headerLeft: {
     display: "flex",
     alignItems: "center",
-    gap: "4px",
-    color: "#666",
-    cursor: "pointer"
+    gap: "6px"
   },
-  contextCheckbox: {
-    margin: 0
+  statusDot: {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    display: "inline-block",
+    flexShrink: 0
   },
-  contextPath: {
+  statusLabel: {
+    fontSize: "12px",
+    color: "#666"
+  },
+  headerRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px"
+  },
+  gitContext: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: "1px"
+  },
+  branchName: {
     fontFamily: "monospace",
     fontSize: "11px",
-    backgroundColor: "#eee",
-    padding: "1px 4px",
-    borderRadius: "3px"
+    color: "#555",
+    display: "flex",
+    alignItems: "center",
+    gap: "3px"
+  },
+  branchIcon: {
+    fontSize: "12px",
+    color: "#888"
+  },
+  prLink: {
+    color: "#0366d6",
+    textDecoration: "none",
+    fontFamily: "monospace",
+    fontSize: "11px"
+  },
+  newChatButton: {
+    padding: "2px 8px",
+    border: "1px solid #ccc",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    color: "#666",
+    fontSize: "11px",
+    cursor: "pointer",
+    lineHeight: "1.4",
+    whiteSpace: "nowrap"
+  },
+  newChatButtonDisabled: {
+    opacity: 0.4,
+    cursor: "default"
   }
 };
 
 // src/GlobalPanel.jsx
-import React9, { useCallback as useCallback4, useMemo as useMemo2 } from "react";
+import React7, { useCallback as useCallback4, useMemo as useMemo2 } from "react";
 import { useAddonState as useAddonState2 } from "storybook/manager-api";
 
 // src/components/SkillsBar.jsx
-import React8 from "react";
+import React6 from "react";
 function SkillsBar({ skills, onTrigger, disabled }) {
   if (!skills || skills.length === 0) return null;
-  return /* @__PURE__ */ React8.createElement("div", { style: styles7.bar }, skills.map((skill) => /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { style: styles5.bar }, skills.map((skill) => /* @__PURE__ */ React6.createElement(
     "button",
     {
       key: skill.id,
       style: {
-        ...styles7.button,
-        ...disabled ? styles7.buttonDisabled : {}
+        ...styles5.button,
+        ...disabled ? styles5.buttonDisabled : {}
       },
       onClick: () => onTrigger(skill),
       disabled,
-      title: skill.prompt
+      title: skill.description || skill.prompt
     },
-    /* @__PURE__ */ React8.createElement("span", { style: styles7.icon }, skill.icon),
-    /* @__PURE__ */ React8.createElement("span", null, skill.label)
+    /* @__PURE__ */ React6.createElement("span", { style: styles5.icon }, skill.icon),
+    /* @__PURE__ */ React6.createElement("span", null, skill.label)
   )));
 }
-var styles7 = {
+var styles5 = {
   bar: {
     display: "flex",
     gap: "6px",
@@ -1518,8 +1558,18 @@ var styles7 = {
   }
 };
 
+// src/useSkillsConfig.js
+function useSkillsConfig(client, connectionState) {
+  const { data, loading } = useDaemonQuery(client, connectionState, "skills_config", 12e4);
+  return {
+    skills: (data == null ? void 0 : data.skills) || [],
+    source: (data == null ? void 0 : data.source) || "none",
+    loading
+  };
+}
+
 // src/skills.js
-var STATIC_SKILLS = [
+var DEFAULT_SKILLS = [
   {
     id: "sync-components",
     label: "Sync Components",
@@ -1555,17 +1605,13 @@ function getPrSkill(pr) {
     prompt: "Create a new pull request for the current branch with a summary of all changes."
   };
 }
-function getGlobalSkills(gitContext) {
+function getGlobalSkills(gitContext, configSkills) {
   const pr = (gitContext == null ? void 0 : gitContext.pr) || null;
+  const skills = configSkills && configSkills.length > 0 ? configSkills : DEFAULT_SKILLS;
   return [
-    STATIC_SKILLS[0],
-    // Sync Components
+    skills[0],
     getPrSkill(pr),
-    // New PR / Finalize PR
-    STATIC_SKILLS[1],
-    // Run Tests
-    STATIC_SKILLS[2]
-    // Audit Stories
+    ...skills.slice(1)
   ];
 }
 
@@ -1589,6 +1635,7 @@ function GlobalPanel() {
     sendMessage,
     startSession,
     setMessages,
+    cancelCommand,
     isConnected,
     client
   } = useClaudeSession({
@@ -1599,7 +1646,11 @@ function GlobalPanel() {
     storageKey: `${ADDON_ID}:globalSessionId`
   });
   const gitContext = useGitContext(client, connectionState);
-  const skills = useMemo2(() => getGlobalSkills(gitContext), [gitContext]);
+  const skillsConfig = useSkillsConfig(client, connectionState);
+  const skills = useMemo2(
+    () => getGlobalSkills(gitContext, skillsConfig.skills),
+    [gitContext, skillsConfig.skills]
+  );
   const handleTokenSubmit = useCallback4(
     (newToken, newPort) => {
       setAddonState({ ...addonState, token: newToken, port: newPort || DEFAULT_PORT });
@@ -1631,35 +1682,36 @@ function GlobalPanel() {
     [handleSend, setMessages]
   );
   if (authFailed && !token) {
-    return /* @__PURE__ */ React9.createElement("div", { style: styles8.page }, /* @__PURE__ */ React9.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
+    return /* @__PURE__ */ React7.createElement("div", { style: styles6.page }, /* @__PURE__ */ React7.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
   }
   const statusColor = connectionState === CONNECTION_STATES.CONNECTED ? "#4caf50" : connectionState === CONNECTION_STATES.DISCONNECTED ? "#f44336" : "#ff9800";
   const statusLabel = connectionState === CONNECTION_STATES.CONNECTED ? "Connected" : connectionState === CONNECTION_STATES.CONNECTING ? "Connecting..." : connectionState === CONNECTION_STATES.RECONNECTING ? "Reconnecting..." : "Disconnected";
-  return /* @__PURE__ */ React9.createElement("div", { style: styles8.page }, /* @__PURE__ */ React9.createElement("div", { style: styles8.titleBar }, /* @__PURE__ */ React9.createElement("div", { style: styles8.titleLeft }, /* @__PURE__ */ React9.createElement("div", { style: styles8.title }, "Claude \u2014 Global Chat"), /* @__PURE__ */ React9.createElement("span", { style: { ...styles8.statusDot, backgroundColor: statusColor }, title: statusLabel }), /* @__PURE__ */ React9.createElement("span", { style: styles8.statusLabel }, statusLabel), /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { style: styles6.page }, /* @__PURE__ */ React7.createElement("div", { style: styles6.titleBar }, /* @__PURE__ */ React7.createElement("div", { style: styles6.titleLeft }, /* @__PURE__ */ React7.createElement("div", { style: styles6.title }, "Claude \u2014 Global Chat"), /* @__PURE__ */ React7.createElement("span", { style: { ...styles6.statusDot, backgroundColor: statusColor }, title: statusLabel }), /* @__PURE__ */ React7.createElement("span", { style: styles6.statusLabel }, statusLabel), /* @__PURE__ */ React7.createElement(
     "span",
     {
-      style: styles8.infoIcon,
+      style: styles6.infoIcon,
       title: "Chat with Claude about your entire project. Not scoped to any specific component."
     },
-    /* @__PURE__ */ React9.createElement("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "currentColor" }, /* @__PURE__ */ React9.createElement("path", { d: "M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.93 12.588-.003.009H7.074l-.003-.01c-.027-.18-.04-.362-.04-.545 0-1.02.356-1.852 1.065-2.497.295-.268.59-.502.793-.737.2-.232.303-.493.303-.784 0-.318-.112-.564-.337-.738-.228-.177-.56-.266-.994-.266-.39 0-.738.074-1.046.222-.307.148-.57.35-.787.607l-.12.152-.94-.762.12-.152c.32-.395.727-.71 1.222-.943A3.77 3.77 0 0 1 7.92 5.4c.744 0 1.35.19 1.818.57.47.382.706.886.706 1.514 0 .474-.14.892-.42 1.254-.277.358-.656.68-1.137.966-.38.226-.636.463-.765.71-.13.25-.196.564-.196.943 0 .082.003.163.01.244l-.006-.013zM8 14.074a.87.87 0 0 1-.638-.262.87.87 0 0 1-.262-.638c0-.25.087-.463.262-.638A.87.87 0 0 1 8 12.274c.25 0 .463.087.638.262a.87.87 0 0 1 .262.638.87.87 0 0 1-.262.638A.87.87 0 0 1 8 14.074z" }))
-  )), /* @__PURE__ */ React9.createElement("button", { style: styles8.backButton, onClick: handleBack, title: "Back to components" }, /* @__PURE__ */ React9.createElement("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React9.createElement("path", { d: "M19 12H5" }), /* @__PURE__ */ React9.createElement("path", { d: "M12 19l-7-7 7-7" })), /* @__PURE__ */ React9.createElement("span", { style: { marginLeft: "4px" } }, "Back"))), /* @__PURE__ */ React9.createElement("div", { style: styles8.toolsBar }, /* @__PURE__ */ React9.createElement(SkillsBar, { skills, onTrigger: handleSkillTrigger, disabled: !isConnected }), gitContext.branch && /* @__PURE__ */ React9.createElement("div", { style: styles8.gitContext }, /* @__PURE__ */ React9.createElement("div", { style: styles8.branchName }, /* @__PURE__ */ React9.createElement("span", { style: styles8.branchIcon, title: "Git branch" }, "\u2387"), gitContext.branch), gitContext.pr && /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React7.createElement("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.93 12.588-.003.009H7.074l-.003-.01c-.027-.18-.04-.362-.04-.545 0-1.02.356-1.852 1.065-2.497.295-.268.59-.502.793-.737.2-.232.303-.493.303-.784 0-.318-.112-.564-.337-.738-.228-.177-.56-.266-.994-.266-.39 0-.738.074-1.046.222-.307.148-.57.35-.787.607l-.12.152-.94-.762.12-.152c.32-.395.727-.71 1.222-.943A3.77 3.77 0 0 1 7.92 5.4c.744 0 1.35.19 1.818.57.47.382.706.886.706 1.514 0 .474-.14.892-.42 1.254-.277.358-.656.68-1.137.966-.38.226-.636.463-.765.71-.13.25-.196.564-.196.943 0 .082.003.163.01.244l-.006-.013zM8 14.074a.87.87 0 0 1-.638-.262.87.87 0 0 1-.262-.638c0-.25.087-.463.262-.638A.87.87 0 0 1 8 12.274c.25 0 .463.087.638.262a.87.87 0 0 1 .262.638.87.87 0 0 1-.262.638A.87.87 0 0 1 8 14.074z" }))
+  )), /* @__PURE__ */ React7.createElement("button", { style: styles6.backButton, onClick: handleBack, title: "Back to components" }, /* @__PURE__ */ React7.createElement("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React7.createElement("path", { d: "M19 12H5" }), /* @__PURE__ */ React7.createElement("path", { d: "M12 19l-7-7 7-7" })), /* @__PURE__ */ React7.createElement("span", { style: { marginLeft: "4px" } }, "Back"))), /* @__PURE__ */ React7.createElement("div", { style: styles6.toolsBar }, /* @__PURE__ */ React7.createElement(SkillsBar, { skills, onTrigger: handleSkillTrigger, disabled: !isConnected }), gitContext.branch && /* @__PURE__ */ React7.createElement("div", { style: styles6.gitContext }, /* @__PURE__ */ React7.createElement("div", { style: styles6.branchName }, /* @__PURE__ */ React7.createElement("span", { style: styles6.branchIcon, title: "Git branch" }, "\u2387"), gitContext.branch), gitContext.pr && /* @__PURE__ */ React7.createElement(
     "a",
     {
       href: gitContext.pr.url,
       target: "_blank",
       rel: "noopener noreferrer",
-      style: styles8.prLink,
+      style: styles6.prLink,
       title: gitContext.pr.title
     },
     "PR #",
     gitContext.pr.number
-  ))), /* @__PURE__ */ React9.createElement("div", { style: styles8.chatArea }, /* @__PURE__ */ React9.createElement(MessageList, { messages }), /* @__PURE__ */ React9.createElement(
+  ))), /* @__PURE__ */ React7.createElement("div", { style: styles6.chatArea }, /* @__PURE__ */ React7.createElement(MessageList, { messages, isProcessing }), /* @__PURE__ */ React7.createElement(
     MessageInput,
     {
       onSend: handleSend,
       disabled: !isConnected,
       isProcessing,
-      placeholder: "Ask Claude about your project..."
+      placeholder: "Ask Claude about your project...",
+      onCancel: cancelCommand
     }
   )));
 }
@@ -1678,12 +1730,15 @@ function getInitialPort2() {
 function getInitialToken2() {
   var _a, _b;
   try {
+    if (typeof window !== "undefined" && window.__CLAUDE_DAEMON_TOKEN__) {
+      return window.__CLAUDE_DAEMON_TOKEN__;
+    }
     return typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.STORYBOOK_CLAUDE_DAEMON_TOKEN) || typeof process !== "undefined" && ((_b = process.env) == null ? void 0 : _b.CLAUDE_DAEMON_TOKEN) || null;
   } catch {
     return null;
   }
 }
-var styles8 = {
+var styles6 = {
   page: {
     display: "flex",
     flexDirection: "column",
@@ -1782,7 +1837,7 @@ var styles8 = {
 };
 
 // src/components/GlobalChatButton.jsx
-import React10, { useCallback as useCallback5 } from "react";
+import React8, { useCallback as useCallback5 } from "react";
 import { useStorybookApi } from "storybook/manager-api";
 import { Button } from "storybook/internal/components";
 function GlobalChatButton() {
@@ -1790,7 +1845,7 @@ function GlobalChatButton() {
   const handleClick = useCallback5(() => {
     api.navigateUrl("/?path=/claude", { replace: false });
   }, [api]);
-  return /* @__PURE__ */ React10.createElement(Button, { variant: "ghost", padding: "small", "aria-label": "Open Claude Global Chat", onClick: handleClick }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React8.createElement(Button, { variant: "ghost", padding: "small", "aria-label": "Open Claude Global Chat", onClick: handleClick }, /* @__PURE__ */ React8.createElement(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -1802,7 +1857,7 @@ function GlobalChatButton() {
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React10.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+    /* @__PURE__ */ React8.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
   ));
 }
 
@@ -1810,7 +1865,7 @@ function GlobalChatButton() {
 function ClaudePageRoute() {
   const { path } = useStorybookState2();
   if (path !== "/claude") return null;
-  return /* @__PURE__ */ React11.createElement(GlobalPanel, null);
+  return /* @__PURE__ */ React9.createElement(GlobalPanel, null);
 }
 addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radnine/storybook-addon-claude",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Storybook addon panel for chatting with Claude via the standalone daemon",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {