@radnine/storybook-addon-claude 0.5.2 → 0.6.0

package/dist/manager.js

@@ -86,16 +86,16 @@ 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__ */ React2.createElement("div", { style: styles.empty }, "No messages yet. Send a message to start chatting with Claude.");
   }
-  return /* @__PURE__ */ React2.createElement("div", { style: styles.container }, messages.map((msg) => /* @__PURE__ */ React2.createElement(MessageItem, { key: msg.id, message: msg })), /* @__PURE__ */ React2.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) {
@@ -107,6 +107,8 @@ function MessageItem({ message }) {
       return /* @__PURE__ */ React2.createElement(OutputMessage, { data: message.data, replay: message.replay });
     case "complete":
       return /* @__PURE__ */ React2.createElement(CompleteMessage, { message });
+    case "cancelled":
+      return /* @__PURE__ */ React2.createElement(CancelledMessage, null);
     case "error":
       return /* @__PURE__ */ React2.createElement(ErrorMessage, { message });
     default:
@@ -211,9 +213,20 @@ function GenericOutputMessage({ data, replay }) {
 function CompleteMessage({ message }) {
   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__ */ 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__ */ 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"));
 }
@@ -398,6 +411,29 @@ var styles = {
     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",
@@ -451,7 +487,7 @@ var styles = {
 
 // src/components/MessageInput.jsx
 import React3, { useState, useRef as useRef2 } from "react";
-function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
+function MessageInput({ onSend, disabled, isProcessing, placeholder, onCancel }) {
   const [text, setText] = useState("");
   const textareaRef = useRef2(null);
   const handleSend = () => {
@@ -464,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();
     }
@@ -475,6 +514,29 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
     el.style.height = "auto";
     el.style.height = Math.min(el.scrollHeight, 120) + "px";
   };
+  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",
     {
@@ -498,7 +560,7 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
       disabled: disabled || !text.trim(),
       title: "Send message (Enter)"
     },
-    isProcessing ? "..." : "Send"
+    "Send"
   ));
 }
 var styles2 = {
@@ -537,6 +599,18 @@ var styles2 = {
   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"
   }
 };
 
@@ -674,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();
@@ -693,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)) {
@@ -716,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) {
@@ -768,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.
    */
@@ -798,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.
    */
@@ -810,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));
@@ -831,6 +944,7 @@ var WebSocketClient = class {
       case "user_input":
       case "pong":
       case "query_result":
+      case "cancelled":
         this._emit(msg.type, msg);
         break;
       default:
@@ -922,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;
@@ -980,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 () => {
@@ -1019,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);
     },
     []
   );
@@ -1061,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,
@@ -1073,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) {
@@ -1119,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
   };
 }
@@ -1202,6 +1336,7 @@ function ClaudePanel({ active }) {
     sendMessage,
     startSession,
     newChat,
+    cancelCommand,
     isConnected,
     client
   } = useClaudeSession({
@@ -1256,12 +1391,13 @@ function ClaudePanel({ active }) {
       "aria-label": "New Chat"
     },
     "New Chat"
-  ))), /* @__PURE__ */ React5.createElement(MessageList, { messages }), /* @__PURE__ */ React5.createElement(
+  ))), /* @__PURE__ */ React5.createElement(MessageList, { messages, isProcessing }), /* @__PURE__ */ React5.createElement(
     MessageInput,
     {
       onSend: handleSend,
       disabled: !isConnected,
-      isProcessing
+      isProcessing,
+      onCancel: cancelCommand
     }
   ));
 }
@@ -1280,6 +1416,9 @@ 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;
@@ -1382,7 +1521,7 @@ function SkillsBar({ skills, onTrigger, disabled }) {
       },
       onClick: () => onTrigger(skill),
       disabled,
-      title: skill.prompt
+      title: skill.description || skill.prompt
     },
     /* @__PURE__ */ React6.createElement("span", { style: styles5.icon }, skill.icon),
     /* @__PURE__ */ React6.createElement("span", null, skill.label)
@@ -1419,8 +1558,18 @@ var styles5 = {
   }
 };
 
+// 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",
@@ -1456,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)
   ];
 }
 
@@ -1490,6 +1635,7 @@ function GlobalPanel() {
     sendMessage,
     startSession,
     setMessages,
+    cancelCommand,
     isConnected,
     client
   } = useClaudeSession({
@@ -1500,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 });
@@ -1554,13 +1704,14 @@ function GlobalPanel() {
     },
     "PR #",
     gitContext.pr.number
-  ))), /* @__PURE__ */ React7.createElement("div", { style: styles6.chatArea }, /* @__PURE__ */ React7.createElement(MessageList, { messages }), /* @__PURE__ */ React7.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
     }
   )));
 }
@@ -1579,6 +1730,9 @@ 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;

package/package.json

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