@radnine/storybook-addon-claude 0.3.0 → 0.3.1

package/dist/GlobalPanel.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalPanel = GlobalPanel;
 var _react = _interopRequireWildcard(require("react"));
 var _managerApi = require("storybook/manager-api");
-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 _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); }
 /**
@@ -41,7 +41,7 @@ function GlobalPanel() {
     authFailed,
     sendMessage,
     startSession,
-    disconnect,
+    setMessages,
     isConnected,
     client
   } = (0, _useClaudeSession.useClaudeSession)({
@@ -54,6 +54,7 @@ function GlobalPanel() {
 
   // 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,
@@ -61,19 +62,23 @@ function GlobalPanel() {
       port: newPort || _constants.DEFAULT_PORT
     });
   }, [addonState, setAddonState]);
-  const handleDisconnect = (0, _react.useCallback)(() => {
-    disconnect();
-    setAddonState({
-      ...addonState,
-      token: null
-    });
-  }, [addonState, setAddonState, disconnect]);
   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,
@@ -82,57 +87,91 @@ function GlobalPanel() {
       })
     });
   }
+  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.jsx)("div", {
-      style: styles.header,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        style: styles.headerRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.title,
-            children: "Claude \u2014 Global Chat"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            style: styles.subtitle,
-            children: "Chat with Claude about your entire project. Not scoped to any specific component."
-          })]
-        }), /*#__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",
+    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: "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"
+            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)(_ConnectionStatus.ConnectionStatus, {
-        state: connectionState,
-        sessionId: sessionId,
-        onDisconnect: handleDisconnect
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GitContextBar.GitContextBar, {
-        branch: gitContext.branch,
-        pr: gitContext.pr,
-        loading: gitContext.loading
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageList.MessageList, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageList.MessageList, {
         messages: messages
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageInput.MessageInput, {
         onSend: handleSend,
@@ -168,14 +207,40 @@ const styles = {
     height: '100vh',
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
   },
-  header: {
-    padding: '16px 24px',
+  // Bar 1
+  titleBar: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 16px',
     borderBottom: '1px solid rgba(0,0,0,0.1)',
     backgroundColor: '#fafafa'
   },
-  headerRow: {
+  titleLeft: {
     display: 'flex',
-    justifyContent: 'space-between',
+    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: {
@@ -190,16 +255,41 @@ const styles = {
     cursor: 'pointer',
     whiteSpace: 'nowrap'
   },
-  title: {
-    fontSize: '18px',
-    fontWeight: 600,
-    color: '#333'
+  // Bar 2
+  toolsBar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottom: '1px solid rgba(0,0,0,0.06)',
+    backgroundColor: '#fff'
   },
-  subtitle: {
-    fontSize: '13px',
-    color: '#888',
-    marginTop: '4px'
+  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',

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/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/package.json

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