@radnine/storybook-addon-claude 0.2.9 → 0.3.1

package/dist/GlobalPanel.js

@@ -0,0 +1,299 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalPanel = GlobalPanel;
+var _react = _interopRequireWildcard(require("react"));
+var _managerApi = require("storybook/manager-api");
+var _MessageList = require("./components/MessageList");
+var _MessageInput = require("./components/MessageInput");
+var _TokenInput = require("./components/TokenInput");
+var _useClaudeSession = require("./useClaudeSession");
+var _SkillsBar = require("./components/SkillsBar");
+var _useGitContext = require("./useGitContext");
+var _constants = require("./constants");
+var _skills = require("./skills");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Full-page global Claude chat — not scoped to any component.
+ *
+ * Registered as an experimental_PAGE so it gets its own route.
+ * Uses a fixed session key so the conversation persists across navigations.
+ * Does not inject any story/component context.
+ */
+function GlobalPanel() {
+  const handleBack = (0, _react.useCallback)(() => {
+    window.history.back();
+  }, []);
+  const [addonState, setAddonState] = (0, _managerApi.useAddonState)(_constants.ADDON_ID, {
+    token: getInitialToken(),
+    port: getInitialPort()
+  });
+  const token = addonState?.token || null;
+  const port = addonState?.port || _constants.DEFAULT_PORT;
+  const {
+    connectionState,
+    messages,
+    sessionId,
+    isProcessing,
+    authFailed,
+    sendMessage,
+    startSession,
+    setMessages,
+    isConnected,
+    client
+  } = (0, _useClaudeSession.useClaudeSession)({
+    host: _constants.DEFAULT_HOST,
+    port,
+    token,
+    sessionId: _constants.GLOBAL_SESSION_KEY,
+    storageKey: `${_constants.ADDON_ID}:globalSessionId`
+  });
+
+  // Git context from daemon
+  const gitContext = (0, _useGitContext.useGitContext)(client, connectionState);
+  const skills = (0, _react.useMemo)(() => (0, _skills.getGlobalSkills)(gitContext), [gitContext]);
+  const handleTokenSubmit = (0, _react.useCallback)((newToken, newPort) => {
+    setAddonState({
+      ...addonState,
+      token: newToken,
+      port: newPort || _constants.DEFAULT_PORT
+    });
+  }, [addonState, setAddonState]);
+  const handleSend = (0, _react.useCallback)(text => {
+    if (!sessionId) {
+      startSession(_constants.GLOBAL_SESSION_KEY);
+    }
+    sendMessage(text);
+  }, [sessionId, startSession, sendMessage]);
+  const handleSkillTrigger = (0, _react.useCallback)(skill => {
+    // Insert a visual indicator in the chat
+    setMessages(prev => [...prev, {
+      type: 'skill_invocation',
+      skill,
+      id: crypto.randomUUID(),
+      timestamp: Date.now()
+    }]);
+    // Send the skill's prompt through the normal chat flow
+    handleSend(skill.prompt);
+  }, [handleSend, setMessages]);
+  if (authFailed && !token) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: styles.page,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TokenInput.TokenInput, {
+        onSubmit: handleTokenSubmit
+      })
+    });
+  }
+  const statusColor = connectionState === _constants.CONNECTION_STATES.CONNECTED ? '#4caf50' : connectionState === _constants.CONNECTION_STATES.DISCONNECTED ? '#f44336' : '#ff9800';
+  const statusLabel = connectionState === _constants.CONNECTION_STATES.CONNECTED ? 'Connected' : connectionState === _constants.CONNECTION_STATES.CONNECTING ? 'Connecting...' : connectionState === _constants.CONNECTION_STATES.RECONNECTING ? 'Reconnecting...' : 'Disconnected';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: styles.page,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.titleBar,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: styles.titleLeft,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: styles.title,
+          children: "Claude \u2014 Global Chat"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            ...styles.statusDot,
+            backgroundColor: statusColor
+          },
+          title: statusLabel
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: styles.statusLabel,
+          children: statusLabel
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: styles.infoIcon,
+          title: "Chat with Claude about your entire project. Not scoped to any specific component.",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+            viewBox: "0 0 16 16",
+            width: "14",
+            height: "14",
+            fill: "currentColor",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("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__*/(0, _jsxRuntime.jsxs)("button", {
+        style: styles.backButton,
+        onClick: handleBack,
+        title: "Back to components",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+          viewBox: "0 0 24 24",
+          width: "14",
+          height: "14",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+            d: "M19 12H5"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+            d: "M12 19l-7-7 7-7"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            marginLeft: '4px'
+          },
+          children: "Back"
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.toolsBar,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SkillsBar.SkillsBar, {
+        skills: skills,
+        onTrigger: handleSkillTrigger,
+        disabled: !isConnected
+      }), gitContext.branch && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        style: styles.gitContext,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: styles.branchName,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            style: styles.branchIcon,
+            title: "Git branch",
+            children: "\u2387"
+          }), gitContext.branch]
+        }), gitContext.pr && /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+          href: gitContext.pr.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: styles.prLink,
+          title: gitContext.pr.title,
+          children: ["PR #", gitContext.pr.number]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.chatArea,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageList.MessageList, {
+        messages: messages
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageInput.MessageInput, {
+        onSend: handleSend,
+        disabled: !isConnected,
+        isProcessing: isProcessing,
+        placeholder: "Ask Claude about your project..."
+      })]
+    })]
+  });
+}
+function getInitialPort() {
+  try {
+    if (typeof window !== 'undefined' && window.__CLAUDE_DAEMON_PORT__) {
+      return parseInt(window.__CLAUDE_DAEMON_PORT__, 10) || _constants.DEFAULT_PORT;
+    }
+    const envPort = typeof process !== 'undefined' && process.env?.STORYBOOK_CLAUDE_DAEMON_PORT || null;
+    return envPort ? parseInt(envPort, 10) : _constants.DEFAULT_PORT;
+  } catch {
+    return _constants.DEFAULT_PORT;
+  }
+}
+function getInitialToken() {
+  try {
+    return typeof process !== 'undefined' && process.env?.STORYBOOK_CLAUDE_DAEMON_TOKEN || typeof process !== 'undefined' && process.env?.CLAUDE_DAEMON_TOKEN || null;
+  } catch {
+    return null;
+  }
+}
+const styles = {
+  page: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100vh',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+  },
+  // Bar 1
+  titleBar: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 16px',
+    borderBottom: '1px solid rgba(0,0,0,0.1)',
+    backgroundColor: '#fafafa'
+  },
+  titleLeft: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px'
+  },
+  title: {
+    fontSize: '16px',
+    fontWeight: 600,
+    color: '#333'
+  },
+  statusDot: {
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    display: 'inline-block',
+    flexShrink: 0
+  },
+  statusLabel: {
+    fontSize: '12px',
+    color: '#888'
+  },
+  infoIcon: {
+    color: '#bbb',
+    cursor: 'help',
+    display: 'inline-flex',
+    alignItems: 'center'
+  },
+  backButton: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '6px 12px',
+    border: '1px solid rgba(0,0,0,0.15)',
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+    color: '#555',
+    fontSize: '13px',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap'
+  },
+  // Bar 2
+  toolsBar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottom: '1px solid rgba(0,0,0,0.06)',
+    backgroundColor: '#fff'
+  },
+  gitContext: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    gap: '1px',
+    padding: '6px 12px',
+    flexShrink: 0
+  },
+  branchName: {
+    fontFamily: 'monospace',
+    fontSize: '11px',
+    color: '#555',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '3px'
+  },
+  branchIcon: {
+    fontSize: '12px',
+    color: '#888'
+  },
+  prLink: {
+    color: '#0366d6',
+    textDecoration: 'none',
+    fontFamily: 'monospace',
+    fontSize: '11px'
+  },
+  // Chat area
+  chatArea: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    overflow: 'hidden'
+  }
+};

package/dist/Panel.js

@@ -10,13 +10,15 @@ var _ConnectionStatus = require("./components/ConnectionStatus");
 var _MessageList = require("./components/MessageList");
 var _MessageInput = require("./components/MessageInput");
 var _TokenInput = require("./components/TokenInput");
+var _GitContextBar = require("./components/GitContextBar");
 var _useClaudeSession = require("./useClaudeSession");
+var _useGitContext = require("./useGitContext");
 var _useStoryContext = require("./useStoryContext");
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
- * Main Storybook addon panel for Claude.
+ * Component-scoped Storybook addon panel for Claude.
  *
  * Manages the auth token, connects to the standalone daemon,
  * and provides the chat interface with story-context awareness.
@@ -47,12 +49,16 @@ function ClaudePanel({
     sendMessage,
     startSession,
     disconnect,
-    isConnected
+    isConnected,
+    client
   } = (0, _useClaudeSession.useClaudeSession)({
     host: _constants.DEFAULT_HOST,
     port,
     token
   });
+
+  // Git context from daemon
+  const gitContext = (0, _useGitContext.useGitContext)(client, connectionState);
   const handleTokenSubmit = (0, _react.useCallback)((newToken, newPort) => {
     setAddonState({
       ...addonState,
@@ -69,7 +75,6 @@ function ClaudePanel({
   }, [addonState, setAddonState, disconnect]);
   const handleSend = (0, _react.useCallback)(text => {
     if (!sessionId) {
-      // Auto-start a session on first message
       startSession();
     }
     const prefix = contextEnabled ? (0, _useStoryContext.buildContextPrefix)(storyContext) : null;
@@ -100,6 +105,10 @@ function ClaudePanel({
       state: connectionState,
       sessionId: sessionId,
       onDisconnect: handleDisconnect
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GitContextBar.GitContextBar, {
+      branch: gitContext.branch,
+      pr: gitContext.pr,
+      loading: gitContext.loading
     }), storyContext.componentPath && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: styles.contextBar,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {

package/dist/WebSocketClient.js

@@ -151,6 +151,16 @@ class WebSocketClient {
     });
   }
 
+  /**
+   * Send a query to the daemon.
+   */
+  sendQuery(queryType) {
+    this._send({
+      type: 'query',
+      queryType
+    });
+  }
+
   // ---------------------------------------------------------------------------
   // Internal
   // ---------------------------------------------------------------------------
@@ -174,6 +184,7 @@ class WebSocketClient {
       case 'error':
       case 'user_input':
       case 'pong':
+      case 'query_result':
         this._emit(msg.type, msg);
         break;
       default:

package/dist/components/GitContextBar.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GitContextBar = GitContextBar;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Thin horizontal bar displaying the current git branch and PR link.
+ *
+ * Renders nothing if loading or no data is available.
+ */
+function GitContextBar({
+  branch,
+  pr,
+  loading
+}) {
+  if (loading || !branch) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.left,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: styles.branchIcon,
+        title: "Git branch",
+        children: "\u2387"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: styles.branchName,
+        children: branch
+      })]
+    }), pr && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: styles.right,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("a", {
+        href: pr.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: styles.prLink,
+        title: pr.title,
+        children: ["PR #", pr.number]
+      })
+    })]
+  });
+}
+const styles = {
+  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'
+  }
+};

package/dist/components/GlobalChatButton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalChatButton = GlobalChatButton;
+var _react = _interopRequireWildcard(require("react"));
+var _managerApi = require("storybook/manager-api");
+var _components = require("storybook/internal/components");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Toolbar button that navigates to the global Claude chat page.
+ */
+function GlobalChatButton() {
+  const api = (0, _managerApi.useStorybookApi)();
+  const handleClick = (0, _react.useCallback)(() => {
+    api.navigateUrl('/?path=/claude', {
+      replace: false
+    });
+  }, [api]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.IconButton, {
+    title: "Open Claude Global Chat",
+    onClick: handleClick,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      viewBox: "0 0 24 24",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+      })
+    })
+  });
+}

package/dist/components/MessageInput.js

@@ -14,7 +14,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function MessageInput({
   onSend,
   disabled,
-  isProcessing
+  isProcessing,
+  placeholder
 }) {
   const [text, setText] = (0, _react.useState)('');
   const textareaRef = (0, _react.useRef)(null);
@@ -49,7 +50,7 @@ function MessageInput({
       value: text,
       onChange: handleInput,
       onKeyDown: handleKeyDown,
-      placeholder: disabled ? 'Connect to daemon first...' : 'Ask Claude...',
+      placeholder: disabled ? 'Connect to daemon first...' : placeholder || 'Ask Claude...',
       disabled: disabled,
       rows: 1
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {

package/dist/components/MessageList.js

@@ -53,6 +53,10 @@ function MessageItem({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(UserMessage, {
         text: message.text
       });
+    case 'skill_invocation':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkillInvocationMessage, {
+        skill: message.skill
+      });
     case 'output':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutputMessage, {
         data: message.data,
@@ -354,6 +358,23 @@ function CompleteMessage({
     })
   });
 }
+function SkillInvocationMessage({
+  skill
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: styles.skillRow,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.skillBubble,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: styles.skillIcon,
+        children: skill.icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        style: styles.skillLabel,
+        children: ["Skill: ", skill.label]
+      })]
+    })
+  });
+}
 function ErrorMessage({
   message
 }) {
@@ -567,6 +588,28 @@ const styles = {
     maxHeight: '200px',
     maxWidth: '90%'
   },
+  // Skill invocation
+  skillRow: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  skillBubble: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '6px',
+    padding: '6px 14px',
+    borderRadius: '8px',
+    backgroundColor: '#e8eaf6',
+    fontSize: '12px',
+    color: '#3949ab',
+    fontWeight: 500
+  },
+  skillIcon: {
+    fontSize: '14px'
+  },
+  skillLabel: {
+    fontWeight: 600
+  },
   // Error messages
   errorRow: {
     display: 'flex',

package/dist/components/SkillsBar.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkillsBar = SkillsBar;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Horizontal row of skill buttons rendered in the global chat page.
+ *
+ * Each button triggers its skill's prompt through the chat session.
+ * Disabled when not connected to the daemon.
+ */
+function SkillsBar({
+  skills,
+  onTrigger,
+  disabled
+}) {
+  if (!skills || skills.length === 0) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: styles.bar,
+    children: skills.map(skill => /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+      style: {
+        ...styles.button,
+        ...(disabled ? styles.buttonDisabled : {})
+      },
+      onClick: () => onTrigger(skill),
+      disabled: disabled,
+      title: skill.prompt,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: styles.icon,
+        children: skill.icon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: skill.label
+      })]
+    }, skill.id))
+  });
+}
+const styles = {
+  bar: {
+    display: 'flex',
+    gap: '6px',
+    padding: '8px 12px',
+    overflowX: 'auto',
+    flexShrink: 0
+  },
+  button: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4px',
+    padding: '5px 10px',
+    border: '1px solid rgba(0,0,0,0.12)',
+    borderRadius: '16px',
+    backgroundColor: '#fff',
+    color: '#444',
+    fontSize: '12px',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    transition: 'background-color 0.15s'
+  },
+  buttonDisabled: {
+    opacity: 0.45,
+    cursor: 'default'
+  },
+  icon: {
+    fontSize: '13px'
+  }
+};

package/dist/constants.js

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PARAM_KEY = exports.PANEL_ID = exports.DEFAULT_PORT = exports.DEFAULT_HOST = exports.CONNECTION_STATES = exports.ADDON_ID = void 0;
+exports.TOOL_ID = exports.PARAM_KEY = exports.PANEL_ID = exports.PAGE_ID = exports.GLOBAL_SESSION_KEY = exports.DEFAULT_PORT = exports.DEFAULT_HOST = exports.CONNECTION_STATES = exports.ADDON_ID = void 0;
 const ADDON_ID = exports.ADDON_ID = 'storybook-addon-claude';
 const PANEL_ID = exports.PANEL_ID = `${ADDON_ID}/panel`;
+const PAGE_ID = exports.PAGE_ID = `${ADDON_ID}/page`;
+const TOOL_ID = exports.TOOL_ID = `${ADDON_ID}/tool`;
 const PARAM_KEY = exports.PARAM_KEY = 'claude';
 const DEFAULT_PORT = exports.DEFAULT_PORT = 3001;
 const DEFAULT_HOST = exports.DEFAULT_HOST = 'localhost';
+const GLOBAL_SESSION_KEY = exports.GLOBAL_SESSION_KEY = 'claude-global';
 const CONNECTION_STATES = exports.CONNECTION_STATES = {
   DISCONNECTED: 'disconnected',
   CONNECTING: 'connecting',

package/dist/manager.js

@@ -3,7 +3,10 @@
 var _managerApi = require("storybook/manager-api");
 var _constants = require("./constants");
 var _Panel = require("./Panel");
+var _GlobalPanel = require("./GlobalPanel");
+var _GlobalChatButton = require("./components/GlobalChatButton");
 _managerApi.addons.register(_constants.ADDON_ID, api => {
+  // Component-scoped chat panel (addon area below canvas)
   _managerApi.addons.add(_constants.PANEL_ID, {
     type: _managerApi.types.PANEL,
     title: 'Claude',
@@ -12,4 +15,19 @@ _managerApi.addons.register(_constants.ADDON_ID, api => {
     }) => viewMode === 'story',
     render: _Panel.ClaudePanel
   });
+
+  // Global chat page (full-page route, not scoped to any component)
+  _managerApi.addons.add(_constants.PAGE_ID, {
+    type: _managerApi.types.experimental_PAGE,
+    title: 'Claude Global',
+    url: '/claude',
+    render: _GlobalPanel.GlobalPanel
+  });
+
+  // Toolbar button for quick navigation to global chat
+  _managerApi.addons.add(_constants.TOOL_ID, {
+    type: _managerApi.types.TOOLEXTRA,
+    title: 'Claude Global Chat',
+    render: _GlobalChatButton.GlobalChatButton
+  });
 });

package/dist/skills.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGlobalSkills = getGlobalSkills;
+/**
+ * Hardcoded global skill definitions.
+ *
+ * Each skill is a chat shortcut — triggering it sends the prompt through the
+ * active session and shows a visual indicator in the message list.
+ */
+
+const STATIC_SKILLS = [{
+  id: 'sync-components',
+  label: 'Sync Components',
+  icon: '\u21BB',
+  prompt: 'Synchronize all Storybook components with their Figma designs. Report what changed.'
+}, {
+  id: 'run-tests',
+  label: 'Run Tests',
+  icon: '\u25B6',
+  prompt: 'Run the full test suite and summarize the results.'
+}, {
+  id: 'audit-stories',
+  label: 'Audit Stories',
+  icon: '\uD83D\uDD0D',
+  prompt: 'Audit all components and list any that are missing Storybook stories or have outdated ones.'
+}];
+
+/**
+ * Returns the PR skill definition based on whether a PR exists on the current branch.
+ */
+function getPrSkill(pr) {
+  if (pr && pr.number) {
+    return {
+      id: 'finalize-pr',
+      label: 'Finalize PR',
+      icon: '\u2714',
+      prompt: `Check the status of PR #${pr.number} (${pr.url}). Review CI checks, review status, and merge conflicts. If everything is green and approved, offer to merge it. If there are issues, summarize what needs attention to make it ready for merge.`
+    };
+  }
+  return {
+    id: 'new-pr',
+    label: 'New PR',
+    icon: '\u2795',
+    prompt: 'Create a new pull request for the current branch with a summary of all changes.'
+  };
+}
+
+/**
+ * Build the full skills list, with the PR skill adapting to git context.
+ */
+function getGlobalSkills(gitContext) {
+  const pr = gitContext?.pr || null;
+  return [STATIC_SKILLS[0],
+  // Sync Components
+  getPrSkill(pr),
+  // New PR / Finalize PR
+  STATIC_SKILLS[1],
+  // Run Tests
+  STATIC_SKILLS[2] // Audit Stories
+  ];
+}

package/dist/useClaudeSession.js

@@ -7,20 +7,20 @@ exports.useClaudeSession = useClaudeSession;
 var _react = require("react");
 var _WebSocketClient = require("./WebSocketClient");
 var _constants = require("./constants");
-const SESSION_STORAGE_KEY = `${_constants.ADDON_ID}:sessionId`;
-function loadPersistedSessionId() {
+const DEFAULT_STORAGE_KEY = `${_constants.ADDON_ID}:sessionId`;
+function loadPersistedSessionId(storageKey) {
   try {
-    return localStorage.getItem(SESSION_STORAGE_KEY) || null;
+    return localStorage.getItem(storageKey) || null;
   } catch {
     return null;
   }
 }
-function persistSessionId(id) {
+function persistSessionId(storageKey, id) {
   try {
     if (id) {
-      localStorage.setItem(SESSION_STORAGE_KEY, id);
+      localStorage.setItem(storageKey, id);
     } else {
-      localStorage.removeItem(SESSION_STORAGE_KEY);
+      localStorage.removeItem(storageKey);
     }
   } catch {
     // localStorage may be unavailable
@@ -39,11 +39,13 @@ function useClaudeSession(options = {}) {
     host,
     port,
     token,
-    sessionId: initialSessionId
+    sessionId: initialSessionId,
+    storageKey
   } = options;
+  const _storageKey = storageKey || DEFAULT_STORAGE_KEY;
   const [connectionState, setConnectionState] = (0, _react.useState)(_constants.CONNECTION_STATES.DISCONNECTED);
   const [messages, setMessages] = (0, _react.useState)([]);
-  const [sessionId, setSessionId] = (0, _react.useState)(initialSessionId || loadPersistedSessionId());
+  const [sessionId, setSessionId] = (0, _react.useState)(initialSessionId || loadPersistedSessionId(_storageKey));
   const [isProcessing, setIsProcessing] = (0, _react.useState)(false);
   const [authFailed, setAuthFailed] = (0, _react.useState)(false);
   const clientRef = (0, _react.useRef)(null);
@@ -64,13 +66,18 @@ function useClaudeSession(options = {}) {
       setConnectionState(newState);
     }), client.on('session_activated', msg => {
       setSessionId(msg.sessionId);
-      persistSessionId(msg.sessionId);
+      persistSessionId(_storageKey, msg.sessionId);
     }), client.on('output', msg => {
       if (msg.sessionId !== sessionIdRef.current) return;
       setMessages(prev => [...prev, {
         ...msg,
         id: crypto.randomUUID()
       }]);
+      // A 'result' output signals the end of Claude's turn in streaming mode
+      // (the CLI process stays alive, so 'complete' may never fire)
+      if (msg.data && msg.data.type === 'result') {
+        setIsProcessing(false);
+      }
     }), client.on('user_input', msg => {
       if (msg.sessionId !== sessionIdRef.current) return;
       // Replayed user messages from session history — strip context prefix
@@ -155,7 +162,7 @@ function useClaudeSession(options = {}) {
     // Synchronously update the ref so sendMessage sees it immediately
     sessionIdRef.current = sid;
     setSessionId(sid);
-    persistSessionId(sid);
+    persistSessionId(_storageKey, sid);
     setMessages([]);
     if (client && client.isConnected) {
       client.activate(sid, workingDir);
@@ -172,7 +179,7 @@ function useClaudeSession(options = {}) {
     }
     sessionIdRef.current = null;
     setSessionId(null);
-    persistSessionId(null);
+    persistSessionId(_storageKey, null);
     setMessages([]);
     setIsProcessing(false);
   }, []);
@@ -185,7 +192,9 @@ function useClaudeSession(options = {}) {
     sendMessage,
     startSession,
     clearMessages,
+    setMessages,
     disconnect,
-    isConnected: connectionState === _constants.CONNECTION_STATES.CONNECTED
+    isConnected: connectionState === _constants.CONNECTION_STATES.CONNECTED,
+    client: clientRef.current
   };
 }

package/dist/useGitContext.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGitContext = useGitContext;
+var _react = require("react");
+var _constants = require("./constants");
+/**
+ * React hook that fetches git context (branch, PR info) from the daemon.
+ *
+ * Sends a `query` message with `queryType: 'git_context'` when the WebSocket
+ * client is connected, and refreshes every 60 seconds.
+ *
+ * @param {import('./WebSocketClient').WebSocketClient} client - The WebSocket client instance
+ * @param {string} connectionState - Current connection state
+ * @returns {{ branch: string|null, pr: object|null, loading: boolean }}
+ */
+function useGitContext(client, connectionState) {
+  const [gitData, setGitData] = (0, _react.useState)(null);
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const intervalRef = (0, _react.useRef)(null);
+  const unsubRef = (0, _react.useRef)(null);
+  const fetchContext = (0, _react.useCallback)(() => {
+    if (!client || !client.isConnected) return;
+    setLoading(true);
+    client.sendQuery('git_context');
+  }, [client]);
+  (0, _react.useEffect)(() => {
+    if (!client) return;
+
+    // Listen for query_result messages
+    const unsub = client.on('query_result', msg => {
+      if (msg.queryType === 'git_context') {
+        setGitData(msg.data || null);
+        setLoading(false);
+      }
+    });
+
+    // Also listen for errors related to queries (older daemons)
+    const unsubErr = client.on('error', msg => {
+      if (msg.code === 'UNKNOWN_TYPE' || msg.code === 'UNKNOWN_QUERY') {
+        // Daemon doesn't support query — stop trying
+        setLoading(false);
+      }
+    });
+    unsubRef.current = () => {
+      unsub();
+      unsubErr();
+    };
+    return () => {
+      if (unsubRef.current) unsubRef.current();
+    };
+  }, [client]);
+
+  // Fetch on connect and refresh every 60 seconds
+  (0, _react.useEffect)(() => {
+    if (connectionState !== _constants.CONNECTION_STATES.CONNECTED) {
+      // Clear interval when not connected
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+
+    // Fetch immediately on connect
+    fetchContext();
+
+    // Refresh every 60 seconds
+    intervalRef.current = setInterval(fetchContext, 60000);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [connectionState, fetchContext]);
+  return {
+    branch: gitData?.branch || null,
+    pr: gitData?.pr || null,
+    loading
+  };
+}

package/package.json

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