@radnine/storybook-addon-claude 0.2.4 → 0.2.6

package/dist/Panel.js

@@ -27,7 +27,7 @@ function ClaudePanel({
   // Persisted addon state for the token and port
   const [addonState, setAddonState] = (0, _managerApi.useAddonState)(_constants.ADDON_ID, {
     token: getInitialToken(),
-    port: _constants.DEFAULT_PORT,
+    port: getInitialPort(),
     contextEnabled: true
   });
   const token = addonState?.token || null;
@@ -124,6 +124,25 @@ function ClaudePanel({
   });
 }
 
+/**
+ * Read initial port from environment or global variable if available.
+ * Supports: window.__CLAUDE_DAEMON_PORT__ (set via managerHead in main.ts)
+ *           process.env.STORYBOOK_CLAUDE_DAEMON_PORT (if available)
+ */
+function getInitialPort() {
+  try {
+    // Manager-injected global (most reliable for addon panels)
+    if (typeof window !== 'undefined' && window.__CLAUDE_DAEMON_PORT__) {
+      return parseInt(window.__CLAUDE_DAEMON_PORT__, 10) || _constants.DEFAULT_PORT;
+    }
+    // Env var fallback (works in preview iframe with Vite replacement)
+    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;
+  }
+}
+
 /**
  * Read initial token from environment variable if available.
  */

package/dist/WebSocketClient.js

@@ -172,6 +172,7 @@ class WebSocketClient {
       case 'output':
       case 'complete':
       case 'error':
+      case 'user_input':
       case 'pong':
         this._emit(msg.type, msg);
         break;

package/dist/components/MessageList.js

@@ -86,8 +86,14 @@ function OutputMessage({
   replay
 }) {
   if (!data) return null;
-  const dataType = typeof data === 'object' ? data.type : null;
-  switch (dataType) {
+
+  // Classify the message the same way the daemon's message-parser does:
+  // - assistant with tool_use content → tool_use
+  // - user with tool_result content → tool_result
+  // - plain user echo → hide (noise)
+  // - system init → hide (noise)
+  const classifiedType = classifyOutputType(data);
+  switch (classifiedType) {
     case 'assistant':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(AssistantMessage, {
         data: data,
@@ -113,14 +119,61 @@ function OutputMessage({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(RateLimitMessage, {
         data: data
       });
+    case '_skip':
+      return null;
     default:
-      // If data is a classified output with message content, try to extract text
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(GenericOutputMessage, {
         data: data,
         replay: replay
       });
   }
 }
+
+/**
+ * Classify a raw Claude CLI stream-json message into a display type.
+ *
+ * Claude CLI emits:
+ *   { type: 'assistant', message: { content: [...] } }  — may contain text and/or tool_use blocks
+ *   { type: 'user', message: { content: [...] } }       — echoed tool_result blocks (internal noise)
+ *   { type: 'system', subtype: 'init', ... }            — system init (internal noise)
+ *
+ * We reclassify so the UI routes to the right renderer.
+ */
+function classifyOutputType(data) {
+  if (!data || typeof data !== 'object') return undefined;
+  const rawType = data.type;
+  const content = data?.message?.content || data?.content;
+  const contentArray = Array.isArray(content) ? content : [];
+  switch (rawType) {
+    case 'assistant':
+      {
+        const hasToolUse = contentArray.some(b => b?.type === 'tool_use');
+        const hasText = contentArray.some(b => b?.type === 'text' && b.text?.trim());
+        // Only thinking blocks and no text/tool_use — skip (internal noise)
+        const hasOnlyThinking = contentArray.length > 0 && contentArray.every(b => b?.type === 'thinking');
+        if (hasOnlyThinking) return '_skip';
+        // Tool use with no meaningful text → tool_use renderer
+        if (hasToolUse && !hasText) return 'tool_use';
+        return 'assistant';
+      }
+    case 'user':
+      {
+        // User messages with tool_result content are internal echoes — render as tool_result
+        const hasToolResult = contentArray.some(b => b?.type === 'tool_result');
+        if (hasToolResult) return 'tool_result';
+        // Plain user echo is noise — skip
+        return '_skip';
+      }
+    case 'system':
+      {
+        // System init messages are noise — skip
+        if (data.subtype === 'init') return '_skip';
+        return 'system';
+      }
+    default:
+      return rawType;
+  }
+}
 function AssistantMessage({
   data,
   replay

package/dist/useClaudeSession.js

@@ -71,6 +71,23 @@ function useClaudeSession(options = {}) {
         ...msg,
         id: crypto.randomUUID()
       }]);
+    }), client.on('user_input', msg => {
+      if (msg.sessionId !== sessionIdRef.current) return;
+      // Replayed user messages from session history — strip context prefix
+      let text = msg.text || '';
+      const ctxMarker = '[Context from Storybook]';
+      if (text.startsWith(ctxMarker)) {
+        // Strip everything up to the double-newline separator
+        const idx = text.indexOf('\n\n');
+        text = idx >= 0 ? text.slice(idx + 2) : text;
+      }
+      setMessages(prev => [...prev, {
+        type: 'user_input',
+        text,
+        id: crypto.randomUUID(),
+        timestamp: msg.timestamp,
+        replay: true
+      }]);
     }), client.on('complete', msg => {
       if (msg.sessionId !== sessionIdRef.current) return;
       setMessages(prev => [...prev, {

package/package.json

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