@radnine/storybook-addon-claude 0.1.1

package/LICENSE

@@ -0,0 +1,31 @@
+Proprietary Software License
+
+Copyright (c) 2025-2026 Rad Nine Software Inc.. All rights reserved.
+
+This software and associated documentation files (the "Software") are the
+proprietary and confidential property of Rad Nine Software Inc..
+
+Permission is hereby granted to authorized licensees to use the Software
+solely for their own internal purposes, subject to the following conditions:
+
+1. The Software may not be copied, modified, merged, published, distributed,
+   sublicensed, sold, or otherwise transferred to any third party without
+   the prior written consent of Rad Nine Software Inc..
+
+2. The Software may not be reverse-engineered, decompiled, or disassembled,
+   except to the extent that such activity is expressly permitted by
+   applicable law.
+
+3. This license does not grant any ownership rights in the Software. All
+   intellectual property rights in the Software remain with Rad Nine Software Inc..
+
+4. This license may be terminated by Rad Nine Software Inc. at any time upon written
+   notice. Upon termination, the licensee must cease all use of the Software
+   and destroy all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+RADIXHOUND BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/Panel.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClaudePanel = ClaudePanel;
+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 _useClaudeSession = require("./useClaudeSession");
+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.
+ *
+ * Manages the auth token, connects to the standalone daemon,
+ * and provides the chat interface with story-context awareness.
+ */
+function ClaudePanel({
+  active
+}) {
+  // Persisted addon state for the token and port
+  const [addonState, setAddonState] = (0, _managerApi.useAddonState)(_constants.ADDON_ID, {
+    token: getInitialToken(),
+    port: _constants.DEFAULT_PORT,
+    contextEnabled: true
+  });
+  const token = addonState?.token || null;
+  const port = addonState?.port || _constants.DEFAULT_PORT;
+  const contextEnabled = addonState?.contextEnabled ?? true;
+
+  // Story context
+  const storyContext = (0, _useStoryContext.useStoryContext)();
+
+  // Claude session
+  const {
+    connectionState,
+    messages,
+    sessionId,
+    isProcessing,
+    sendMessage,
+    startSession,
+    disconnect,
+    isConnected
+  } = (0, _useClaudeSession.useClaudeSession)({
+    host: _constants.DEFAULT_HOST,
+    port,
+    token
+  });
+  const handleTokenSubmit = (0, _react.useCallback)((newToken, newPort) => {
+    setAddonState({
+      ...addonState,
+      token: newToken,
+      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) {
+      // Auto-start a session on first message
+      startSession();
+    }
+    const prefix = contextEnabled ? (0, _useStoryContext.buildContextPrefix)(storyContext) : null;
+    sendMessage(text, prefix);
+  }, [sessionId, startSession, sendMessage, contextEnabled, storyContext]);
+  const toggleContext = (0, _react.useCallback)(() => {
+    setAddonState({
+      ...addonState,
+      contextEnabled: !contextEnabled
+    });
+  }, [addonState, contextEnabled, setAddonState]);
+
+  // Don't render if panel is not active
+  if (!active) return null;
+
+  // No token — show token input
+  if (!token) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: styles.panel,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TokenInput.TokenInput, {
+        onSubmit: handleTokenSubmit
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: styles.panel,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ConnectionStatus.ConnectionStatus, {
+      state: connectionState,
+      sessionId: sessionId,
+      onDisconnect: handleDisconnect
+    }), storyContext.componentPath && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: styles.contextBar,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+        style: styles.contextLabel,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "checkbox",
+          checked: contextEnabled,
+          onChange: toggleContext,
+          style: styles.contextCheckbox
+        }), "Context: ", /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+          style: styles.contextPath,
+          children: storyContext.componentPath
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageList.MessageList, {
+      messages: messages
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MessageInput.MessageInput, {
+      onSend: handleSend,
+      disabled: !isConnected,
+      isProcessing: isProcessing
+    })]
+  });
+}
+
+/**
+ * Read initial token from environment variable if available.
+ */
+function getInitialToken() {
+  try {
+    // Storybook exposes env vars prefixed with STORYBOOK_
+    return typeof process !== 'undefined' && process.env?.STORYBOOK_CLAUDE_DAEMON_TOKEN || typeof process !== 'undefined' && process.env?.CLAUDE_DAEMON_TOKEN || null;
+  } catch {
+    return null;
+  }
+}
+const styles = {
+  panel: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+  },
+  contextBar: {
+    padding: '4px 12px',
+    borderBottom: '1px solid rgba(0,0,0,0.1)',
+    backgroundColor: '#fafafa',
+    fontSize: '12px'
+  },
+  contextLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    color: '#666',
+    cursor: 'pointer'
+  },
+  contextCheckbox: {
+    margin: 0
+  },
+  contextPath: {
+    fontFamily: 'monospace',
+    fontSize: '11px',
+    backgroundColor: '#eee',
+    padding: '1px 4px',
+    borderRadius: '3px'
+  }
+};

package/dist/WebSocketClient.js

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebSocketClient = void 0;
+var _constants = require("./constants");
+/**
+ * Browser WebSocket client for the standalone daemon (Phase 2 protocol).
+ *
+ * Handles connection lifecycle, authentication, auto-reconnect with
+ * exponential backoff, and the activate/command/output message protocol.
+ */
+class WebSocketClient {
+  constructor(options = {}) {
+    this._host = options.host || _constants.DEFAULT_HOST;
+    this._port = options.port || _constants.DEFAULT_PORT;
+    this._token = options.token || null;
+    this._ws = null;
+    this._state = _constants.CONNECTION_STATES.DISCONNECTED;
+    this._listeners = new Map();
+    this._reconnectAttempt = 0;
+    this._maxReconnectAttempts = options.maxReconnectAttempts || 10;
+    this._baseDelay = options.baseDelay || 1000;
+    this._maxDelay = options.maxDelay || 30000;
+    this._reconnectTimer = null;
+    this._pingInterval = null;
+    this._pingIntervalMs = options.pingIntervalMs || 30000;
+  }
+  get state() {
+    return this._state;
+  }
+  get isConnected() {
+    return this._state === _constants.CONNECTION_STATES.CONNECTED;
+  }
+
+  /**
+   * Register an event listener.
+   * Events: 'state_change', 'session_activated', 'output', 'complete', 'error', 'pong'
+   */
+  on(event, callback) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, new Set());
+    }
+    this._listeners.get(event).add(callback);
+    return () => this._listeners.get(event)?.delete(callback);
+  }
+
+  /**
+   * Connect to the standalone daemon.
+   */
+  connect() {
+    if (this._ws) {
+      this._ws.close();
+    }
+    if (!this._token) {
+      this._emit('error', {
+        code: 'NO_TOKEN',
+        message: 'Auth token is required'
+      });
+      return;
+    }
+
+    // Preserve RECONNECTING state so failed reconnect attempts still trigger
+    // _scheduleReconnect in the onclose handler.
+    if (this._state !== _constants.CONNECTION_STATES.RECONNECTING) {
+      this._setState(_constants.CONNECTION_STATES.CONNECTING);
+    }
+    const url = `ws://${this._host}:${this._port}/?token=${encodeURIComponent(this._token)}`;
+    try {
+      this._ws = new WebSocket(url);
+    } catch (err) {
+      this._setState(_constants.CONNECTION_STATES.DISCONNECTED);
+      this._emit('error', {
+        code: 'CONNECT_FAILED',
+        message: err.message
+      });
+      return;
+    }
+    this._ws.onopen = () => {
+      this._setState(_constants.CONNECTION_STATES.CONNECTED);
+      this._reconnectAttempt = 0;
+      this._startPing();
+    };
+    this._ws.onmessage = event => {
+      this._handleMessage(event.data);
+    };
+    this._ws.onclose = event => {
+      this._stopPing();
+      const wasConnected = this._state === _constants.CONNECTION_STATES.CONNECTED;
+      this._ws = null;
+
+      // Auth failure — don't reconnect
+      if (event.code === 4001) {
+        this._setState(_constants.CONNECTION_STATES.DISCONNECTED);
+        this._emit('error', {
+          code: 'AUTH_FAILED',
+          message: 'Authentication failed'
+        });
+        return;
+      }
+
+      // If we were connected, try to reconnect
+      if (wasConnected || this._state === _constants.CONNECTION_STATES.RECONNECTING) {
+        this._scheduleReconnect();
+      } else {
+        this._setState(_constants.CONNECTION_STATES.DISCONNECTED);
+      }
+    };
+    this._ws.onerror = () => {
+      // The close event will fire after this — reconnection is handled there
+    };
+  }
+
+  /**
+   * Disconnect and stop reconnection attempts.
+   */
+  disconnect() {
+    this._clearReconnect();
+    this._stopPing();
+    if (this._ws) {
+      this._ws.close(1000, 'Client disconnecting');
+      this._ws = null;
+    }
+    this._setState(_constants.CONNECTION_STATES.DISCONNECTED);
+  }
+
+  /**
+   * Update the auth token (e.g., when user pastes it in UI).
+   */
+  setToken(token) {
+    this._token = token;
+  }
+
+  /**
+   * Activate a session. Must be called after connecting.
+   */
+  activate(sessionId, workingDir) {
+    this._send({
+      type: 'activate',
+      sessionId,
+      workingDir
+    });
+  }
+
+  /**
+   * Send a command (user message) to Claude.
+   */
+  sendCommand(sessionId, text, commandId) {
+    this._send({
+      type: 'command',
+      sessionId,
+      commandId: commandId || crypto.randomUUID(),
+      text
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+
+  _send(msg) {
+    if (this._ws && this._ws.readyState === WebSocket.OPEN) {
+      this._ws.send(JSON.stringify(msg));
+    }
+  }
+  _handleMessage(raw) {
+    let msg;
+    try {
+      msg = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    switch (msg.type) {
+      case 'session_activated':
+      case 'output':
+      case 'complete':
+      case 'error':
+      case 'pong':
+        this._emit(msg.type, msg);
+        break;
+      default:
+        // Unknown message type — emit as generic event
+        this._emit('message', msg);
+    }
+  }
+  _setState(newState) {
+    if (this._state !== newState) {
+      const oldState = this._state;
+      this._state = newState;
+      this._emit('state_change', {
+        oldState,
+        newState
+      });
+    }
+  }
+  _emit(event, data) {
+    const listeners = this._listeners.get(event);
+    if (listeners) {
+      for (const cb of listeners) {
+        try {
+          cb(data);
+        } catch {
+          // Don't let listener errors break the client
+        }
+      }
+    }
+  }
+  _scheduleReconnect() {
+    if (this._reconnectAttempt >= this._maxReconnectAttempts) {
+      this._setState(_constants.CONNECTION_STATES.DISCONNECTED);
+      this._emit('error', {
+        code: 'MAX_RECONNECT',
+        message: 'Max reconnection attempts reached'
+      });
+      return;
+    }
+    this._setState(_constants.CONNECTION_STATES.RECONNECTING);
+    const delay = Math.min(this._baseDelay * Math.pow(2, this._reconnectAttempt), this._maxDelay);
+    this._reconnectAttempt++;
+    this._reconnectTimer = setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+  _clearReconnect() {
+    if (this._reconnectTimer) {
+      clearTimeout(this._reconnectTimer);
+      this._reconnectTimer = null;
+    }
+    this._reconnectAttempt = 0;
+  }
+  _startPing() {
+    this._stopPing();
+    this._pingInterval = setInterval(() => {
+      this._send({
+        type: 'ping'
+      });
+    }, this._pingIntervalMs);
+  }
+  _stopPing() {
+    if (this._pingInterval) {
+      clearInterval(this._pingInterval);
+      this._pingInterval = null;
+    }
+  }
+}
+exports.WebSocketClient = WebSocketClient;

package/dist/components/ConnectionStatus.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectionStatus = ConnectionStatus;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const STATUS_CONFIG = {
+  [_constants.CONNECTION_STATES.CONNECTED]: {
+    label: 'Connected',
+    color: '#4caf50'
+  },
+  [_constants.CONNECTION_STATES.CONNECTING]: {
+    label: 'Connecting...',
+    color: '#ff9800'
+  },
+  [_constants.CONNECTION_STATES.RECONNECTING]: {
+    label: 'Reconnecting...',
+    color: '#ff9800'
+  },
+  [_constants.CONNECTION_STATES.DISCONNECTED]: {
+    label: 'Disconnected',
+    color: '#f44336'
+  }
+};
+function ConnectionStatus({
+  state,
+  sessionId,
+  onDisconnect
+}) {
+  const config = STATUS_CONFIG[state] || STATUS_CONFIG[_constants.CONNECTION_STATES.DISCONNECTED];
+  const isConnected = state === _constants.CONNECTION_STATES.CONNECTED;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.indicator,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          ...styles.dot,
+          backgroundColor: config.color
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: styles.label,
+        children: config.label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: styles.right,
+      children: [sessionId && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        style: styles.sessionId,
+        title: sessionId,
+        children: [sessionId.slice(0, 8), "..."]
+      }), onDisconnect && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: onDisconnect,
+        style: styles.disconnectButton,
+        title: isConnected ? 'Disconnect' : 'Change Token',
+        "aria-label": isConnected ? 'Disconnect' : 'Change Token',
+        children: isConnected ? 'Disconnect' : 'Change Token'
+      })]
+    })]
+  });
+}
+const 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'
+  },
+  disconnectButton: {
+    padding: '2px 8px',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+    color: '#666',
+    fontSize: '11px',
+    cursor: 'pointer',
+    lineHeight: '1.4'
+  }
+};

package/dist/components/MessageInput.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageInput = MessageInput;
+var _react = _interopRequireWildcard(require("react"));
+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); }
+/**
+ * Text input with send button for the Claude chat panel.
+ * Supports Enter to send, Shift+Enter for newline.
+ */
+function MessageInput({
+  onSend,
+  disabled,
+  isProcessing
+}) {
+  const [text, setText] = (0, _react.useState)('');
+  const textareaRef = (0, _react.useRef)(null);
+  const handleSend = () => {
+    const trimmed = text.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setText('');
+    // Reset textarea height
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const handleInput = e => {
+    setText(e.target.value);
+    // Auto-resize textarea
+    const el = e.target;
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+      ref: textareaRef,
+      style: styles.textarea,
+      value: text,
+      onChange: handleInput,
+      onKeyDown: handleKeyDown,
+      placeholder: disabled ? 'Connect to daemon first...' : 'Ask Claude...',
+      disabled: disabled,
+      rows: 1
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      style: {
+        ...styles.button,
+        ...(disabled || !text.trim() ? styles.buttonDisabled : {})
+      },
+      onClick: handleSend,
+      disabled: disabled || !text.trim(),
+      title: "Send message (Enter)",
+      children: isProcessing ? '...' : 'Send'
+    })]
+  });
+}
+const styles = {
+  container: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    gap: '8px',
+    padding: '8px 12px',
+    borderTop: '1px solid rgba(0,0,0,0.1)'
+  },
+  textarea: {
+    flex: 1,
+    padding: '8px 10px',
+    border: '1px solid #ddd',
+    borderRadius: '8px',
+    fontSize: '13px',
+    fontFamily: 'inherit',
+    lineHeight: '1.4',
+    resize: 'none',
+    outline: 'none',
+    minHeight: '36px',
+    maxHeight: '120px'
+  },
+  button: {
+    padding: '8px 16px',
+    border: 'none',
+    borderRadius: '8px',
+    backgroundColor: '#1ea7fd',
+    color: '#fff',
+    fontSize: '13px',
+    fontWeight: 600,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    minHeight: '36px'
+  },
+  buttonDisabled: {
+    backgroundColor: '#ccc',
+    cursor: 'not-allowed'
+  }
+};