@radnine/storybook-addon-claude 0.3.3 → 0.5.0

package/dist/manager.js

@@ -1,33 +1,1827 @@
-"use strict";
-
-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',
-    match: ({
-      viewMode
-    }) => viewMode === 'story',
-    render: _Panel.ClaudePanel
+// src/manager.js
+import { addons, types } from "storybook/manager-api";
+
+// src/constants.js
+var ADDON_ID = "storybook-addon-claude";
+var PANEL_ID = `${ADDON_ID}/panel`;
+var PAGE_ID = `${ADDON_ID}/page`;
+var TOOL_ID = `${ADDON_ID}/tool`;
+var DEFAULT_PORT = 3001;
+var DEFAULT_HOST = "localhost";
+var GLOBAL_SESSION_KEY = "claude-global";
+var CONNECTION_STATES = {
+  DISCONNECTED: "disconnected",
+  CONNECTING: "connecting",
+  CONNECTED: "connected",
+  RECONNECTING: "reconnecting"
+};
+
+// src/Panel.jsx
+import React7, { useCallback as useCallback3 } from "react";
+import { useAddonState } from "storybook/manager-api";
+
+// src/components/ConnectionStatus.jsx
+import React from "react";
+var STATUS_CONFIG = {
+  [CONNECTION_STATES.CONNECTED]: {
+    label: "Connected",
+    color: "#4caf50"
+  },
+  [CONNECTION_STATES.CONNECTING]: {
+    label: "Connecting...",
+    color: "#ff9800"
+  },
+  [CONNECTION_STATES.RECONNECTING]: {
+    label: "Reconnecting...",
+    color: "#ff9800"
+  },
+  [CONNECTION_STATES.DISCONNECTED]: {
+    label: "Disconnected",
+    color: "#f44336"
+  }
+};
+function ConnectionStatus({ state, sessionId, onDisconnect, onNewChat, isProcessing }) {
+  const config = STATUS_CONFIG[state] || STATUS_CONFIG[CONNECTION_STATES.DISCONNECTED];
+  const isConnected = state === CONNECTION_STATES.CONNECTED;
+  return /* @__PURE__ */ React.createElement("div", { style: styles.container }, /* @__PURE__ */ React.createElement("div", { style: styles.indicator }, /* @__PURE__ */ React.createElement("span", { style: { ...styles.dot, backgroundColor: config.color } }), /* @__PURE__ */ React.createElement("span", { style: styles.label }, config.label)), /* @__PURE__ */ React.createElement("div", { style: styles.right }, sessionId && /* @__PURE__ */ React.createElement("span", { style: styles.sessionId, title: sessionId }, sessionId.slice(0, 8), "..."), onNewChat && isConnected && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: onNewChat,
+      disabled: isProcessing,
+      style: {
+        ...styles.actionButton,
+        ...isProcessing ? styles.actionButtonDisabled : {}
+      },
+      title: "Clear chat and start fresh session",
+      "aria-label": "New Chat"
+    },
+    "New Chat"
+  ), onDisconnect && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: onDisconnect,
+      style: styles.actionButton,
+      title: isConnected ? "Disconnect" : "Change Token",
+      "aria-label": isConnected ? "Disconnect" : "Change Token"
+    },
+    isConnected ? "Disconnect" : "Change Token"
+  )));
+}
+var 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"
+  },
+  actionButton: {
+    padding: "2px 8px",
+    border: "1px solid #ccc",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    color: "#666",
+    fontSize: "11px",
+    cursor: "pointer",
+    lineHeight: "1.4"
+  },
+  actionButtonDisabled: {
+    opacity: 0.4,
+    cursor: "default"
+  }
+};
+
+// src/components/MessageList.jsx
+import React3, { useEffect, useRef } from "react";
+
+// src/components/MarkdownContent.jsx
+import React2, { useMemo } from "react";
+import { marked } from "marked";
+var renderer = new marked.Renderer();
+renderer.link = function({ href, title, text }) {
+  const titleAttr = title ? ` title="${title}"` : "";
+  return `<a href="${href}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`;
+};
+marked.setOptions({
+  renderer,
+  gfm: true,
+  breaks: true
+});
+var MARKDOWN_STYLES = `
+.claude-md { line-height: 1.5; word-break: break-word; }
+.claude-md h1 { font-size: 1.1em; font-weight: 600; margin: 8px 0 4px; }
+.claude-md h2 { font-size: 1.05em; font-weight: 600; margin: 8px 0 4px; }
+.claude-md h3 { font-size: 1em; font-weight: 600; margin: 6px 0 3px; }
+.claude-md h4, .claude-md h5, .claude-md h6 { font-size: 1em; font-weight: 600; margin: 4px 0 2px; }
+.claude-md p { margin: 4px 0; }
+.claude-md ul, .claude-md ol { margin: 4px 0; padding-left: 20px; }
+.claude-md li { margin: 2px 0; }
+.claude-md code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
+.claude-md pre { background: rgba(0,0,0,0.04); padding: 8px; border-radius: 4px; overflow-x: auto; margin: 4px 0; }
+.claude-md pre code { background: none; padding: 0; }
+.claude-md table { border-collapse: collapse; margin: 4px 0; font-size: 0.95em; }
+.claude-md th, .claude-md td { border: 1px solid rgba(0,0,0,0.15); padding: 4px 8px; }
+.claude-md th { background: rgba(0,0,0,0.04); font-weight: 600; }
+.claude-md blockquote { border-left: 3px solid rgba(0,0,0,0.15); margin: 4px 0; padding: 2px 8px; color: #666; }
+.claude-md a { color: #0366d6; text-decoration: none; }
+.claude-md a:hover { text-decoration: underline; }
+.claude-md hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 8px 0; }
+.claude-md > *:first-child { margin-top: 0; }
+.claude-md > *:last-child { margin-bottom: 0; }
+`;
+var stylesInjected = false;
+function ensureStyles() {
+  if (stylesInjected) return;
+  try {
+    const style = document.createElement("style");
+    style.textContent = MARKDOWN_STYLES;
+    document.head.appendChild(style);
+    stylesInjected = true;
+  } catch (_e) {
+  }
+}
+function MarkdownContent({ text }) {
+  ensureStyles();
+  const html = useMemo(() => {
+    if (!text) return "";
+    return marked.parse(text);
+  }, [text]);
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: "claude-md",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+
+// src/components/MessageList.jsx
+function MessageList({ messages }) {
+  const bottomRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  if (messages.length === 0) {
+    return /* @__PURE__ */ React3.createElement("div", { style: styles2.empty }, "No messages yet. Send a message to start chatting with Claude.");
+  }
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.container }, messages.map((msg) => /* @__PURE__ */ React3.createElement(MessageItem, { key: msg.id, message: msg })), /* @__PURE__ */ React3.createElement("div", { ref: bottomRef }));
+}
+function MessageItem({ message }) {
+  switch (message.type) {
+    case "user_input":
+      return /* @__PURE__ */ React3.createElement(UserMessage, { text: message.text });
+    case "skill_invocation":
+      return /* @__PURE__ */ React3.createElement(SkillInvocationMessage, { skill: message.skill });
+    case "output":
+      return /* @__PURE__ */ React3.createElement(OutputMessage, { data: message.data, replay: message.replay });
+    case "complete":
+      return /* @__PURE__ */ React3.createElement(CompleteMessage, { message });
+    case "error":
+      return /* @__PURE__ */ React3.createElement(ErrorMessage, { message });
+    default:
+      return null;
+  }
+}
+function UserMessage({ text }) {
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.userRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.userBubble }, text));
+}
+function OutputMessage({ data, replay }) {
+  if (!data) return null;
+  const classifiedType = classifyOutputType(data);
+  switch (classifiedType) {
+    case "assistant":
+      return /* @__PURE__ */ React3.createElement(AssistantMessage, { data, replay });
+    case "tool_use":
+      return /* @__PURE__ */ React3.createElement(ToolUseMessage, { data });
+    case "tool_result":
+      return /* @__PURE__ */ React3.createElement(ToolResultMessage, { data });
+    case "result":
+      return /* @__PURE__ */ React3.createElement(ResultMessage, { data });
+    case "system":
+      return /* @__PURE__ */ React3.createElement(SystemMessage, { data });
+    case "rate_limit_event":
+      return /* @__PURE__ */ React3.createElement(RateLimitMessage, { data });
+    case "_skip":
+      return null;
+    default:
+      return /* @__PURE__ */ React3.createElement(GenericOutputMessage, { data, replay });
+  }
+}
+function classifyOutputType(data) {
+  var _a;
+  if (!data || typeof data !== "object") return void 0;
+  const rawType = data.type;
+  const content = ((_a = data == null ? void 0 : data.message) == null ? void 0 : _a.content) || (data == null ? void 0 : data.content);
+  const contentArray = Array.isArray(content) ? content : [];
+  switch (rawType) {
+    case "assistant": {
+      const hasToolUse = contentArray.some((b) => (b == null ? void 0 : b.type) === "tool_use");
+      const hasText = contentArray.some((b) => {
+        var _a2;
+        return (b == null ? void 0 : b.type) === "text" && ((_a2 = b.text) == null ? void 0 : _a2.trim());
+      });
+      const hasOnlyThinking = contentArray.length > 0 && contentArray.every((b) => (b == null ? void 0 : b.type) === "thinking");
+      if (hasOnlyThinking) return "_skip";
+      if (hasToolUse && !hasText) return "tool_use";
+      return "assistant";
+    }
+    case "user": {
+      const hasToolResult = contentArray.some((b) => (b == null ? void 0 : b.type) === "tool_result");
+      if (hasToolResult) return "tool_result";
+      return "_skip";
+    }
+    case "system": {
+      if (data.subtype === "init") return "_skip";
+      return "system";
+    }
+    default:
+      return rawType;
+  }
+}
+function AssistantMessage({ data, replay }) {
+  const text = extractAssistantText(data);
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.assistantRow }, /* @__PURE__ */ React3.createElement("div", { style: { ...styles2.assistantBubble, ...replay ? styles2.replay : {} } }, text ? /* @__PURE__ */ React3.createElement(MarkdownContent, { text }) : "(empty response)"));
+}
+function ToolUseMessage({ data }) {
+  const toolName = extractToolName(data);
+  const summary = extractToolSummary(data);
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: styles2.toolSummary }, /* @__PURE__ */ React3.createElement("span", { style: styles2.toolIcon }, "\u2699"), " ", toolName, summary ? `: ${summary}` : ""), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+}
+function ToolResultMessage({ data }) {
+  const isError = extractToolResultError(data);
+  const summary = extractToolResultSummary(data);
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: { ...styles2.toolSummary, color: isError ? "#f44336" : "#4caf50" } }, isError ? "Error" : "Done", summary ? `: ${summary}` : ""), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+}
+function ResultMessage({ data }) {
+  const subtype = (data == null ? void 0 : data.subtype) || "unknown";
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.resultRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.resultBubble }, /* @__PURE__ */ React3.createElement("span", { style: styles2.resultLabel }, subtype === "success" ? "Completed" : `Result: ${subtype}`)));
+}
+function SystemMessage({ data }) {
+  if (typeof (data == null ? void 0 : data.message) === "string") {
+    return /* @__PURE__ */ React3.createElement("div", { style: styles2.systemRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.systemBubble }, data.message));
+  }
+  const label = (data == null ? void 0 : data.subtype) ? `System: ${data.subtype}` : "System event";
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: styles2.toolSummary }, label), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+}
+function RateLimitMessage({ data }) {
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: { ...styles2.toolSummary, color: "#ff9800" } }, "Rate limited (waiting...)"), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+}
+function GenericOutputMessage({ data, replay }) {
+  const text = extractAssistantText(data);
+  if (text && text.startsWith("[Context from Storybook]")) {
+    return null;
+  }
+  if (text) {
+    return /* @__PURE__ */ React3.createElement("div", { style: styles2.assistantRow }, /* @__PURE__ */ React3.createElement("div", { style: { ...styles2.assistantBubble, ...replay ? styles2.replay : {} } }, /* @__PURE__ */ React3.createElement(MarkdownContent, { text })));
+  }
+  const summaryLabel = typeof data === "object" && data.type ? `System: ${data.type}` : "System message";
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.toolRow }, /* @__PURE__ */ React3.createElement("details", { style: styles2.toolDetails }, /* @__PURE__ */ React3.createElement("summary", { style: styles2.toolSummary }, summaryLabel), /* @__PURE__ */ React3.createElement("pre", { style: styles2.toolContent }, JSON.stringify(data, null, 2))));
+}
+function CompleteMessage({ message }) {
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.systemRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.completeBubble }, "Command completed (exit ", message.exitCode ?? "?", ")", message.durationMs != null && ` in ${(message.durationMs / 1e3).toFixed(1)}s`));
+}
+function SkillInvocationMessage({ skill }) {
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.skillRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.skillBubble }, /* @__PURE__ */ React3.createElement("span", { style: styles2.skillIcon }, skill.icon), /* @__PURE__ */ React3.createElement("span", { style: styles2.skillLabel }, "Skill: ", skill.label)));
+}
+function ErrorMessage({ message }) {
+  return /* @__PURE__ */ React3.createElement("div", { style: styles2.errorRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.errorBubble }, message.code && /* @__PURE__ */ React3.createElement("span", { style: styles2.errorCode }, message.code, ": "), message.message || "Unknown error"));
+}
+function extractAssistantText(data) {
+  var _a;
+  const content = ((_a = data == null ? void 0 : data.message) == null ? void 0 : _a.content) || (data == null ? void 0 : data.content);
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    const textBlocks = content.filter((b) => b.type === "text");
+    return textBlocks.map((b) => b.text).join("\n");
+  }
+  if (content && content.type === "text") return content.text;
+  return null;
+}
+function extractToolName(data) {
+  var _a;
+  const content = ((_a = data == null ? void 0 : data.message) == null ? void 0 : _a.content) || (data == null ? void 0 : data.content);
+  if (Array.isArray(content)) {
+    const toolBlock = content.find((b) => b.type === "tool_use");
+    return (toolBlock == null ? void 0 : toolBlock.name) || "Tool";
+  }
+  if ((content == null ? void 0 : content.type) === "tool_use") return content.name || "Tool";
+  return "Tool";
+}
+function extractToolSummary(data) {
+  var _a;
+  const content = ((_a = data == null ? void 0 : data.message) == null ? void 0 : _a.content) || (data == null ? void 0 : data.content);
+  if (Array.isArray(content)) {
+    const toolBlock = content.find((b) => b.type === "tool_use");
+    if (toolBlock == null ? void 0 : toolBlock.input) {
+      const input = toolBlock.input;
+      if (input.file_path) return input.file_path;
+      if (input.command) return input.command.slice(0, 60);
+      if (input.path) return input.path;
+    }
+  }
+  return null;
+}
+function extractToolResultError(data) {
+  var _a;
+  const content = ((_a = data == null ? void 0 : data.message) == null ? void 0 : _a.content) || (data == null ? void 0 : data.content);
+  if (Array.isArray(content)) {
+    const resultBlock = content.find((b) => b.type === "tool_result");
+    return (resultBlock == null ? void 0 : resultBlock.is_error) === true;
+  }
+  return false;
+}
+function extractToolResultSummary(data) {
+  var _a;
+  const content = ((_a = data == null ? void 0 : data.message) == null ? void 0 : _a.content) || (data == null ? void 0 : data.content);
+  if (Array.isArray(content)) {
+    const resultBlock = content.find((b) => b.type === "tool_result");
+    if (typeof (resultBlock == null ? void 0 : resultBlock.content) === "string") {
+      return resultBlock.content.split("\n")[0].slice(0, 100);
+    }
+  }
+  return null;
+}
+var styles2 = {
+  container: {
+    flex: 1,
+    overflowY: "auto",
+    padding: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  empty: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#999",
+    fontSize: "13px",
+    padding: "24px",
+    textAlign: "center"
+  },
+  // User messages (right-aligned)
+  userRow: {
+    display: "flex",
+    justifyContent: "flex-end"
+  },
+  userBubble: {
+    maxWidth: "80%",
+    padding: "8px 12px",
+    borderRadius: "12px 12px 2px 12px",
+    backgroundColor: "#1ea7fd",
+    color: "#fff",
+    fontSize: "13px",
+    lineHeight: "1.4",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word"
+  },
+  // Assistant messages (left-aligned)
+  assistantRow: {
+    display: "flex",
+    justifyContent: "flex-start"
+  },
+  assistantBubble: {
+    maxWidth: "80%",
+    padding: "8px 12px",
+    borderRadius: "12px 12px 12px 2px",
+    backgroundColor: "#f0f0f0",
+    color: "#333",
+    fontSize: "13px",
+    lineHeight: "1.4",
+    wordBreak: "break-word"
+  },
+  replay: {
+    opacity: 0.7
+  },
+  // Tool messages (collapsed)
+  toolRow: {
+    display: "flex",
+    justifyContent: "flex-start",
+    maxWidth: "90%"
+  },
+  toolDetails: {
+    fontSize: "12px",
+    color: "#666",
+    cursor: "pointer",
+    width: "100%"
+  },
+  toolSummary: {
+    padding: "4px 8px",
+    borderRadius: "6px",
+    backgroundColor: "#f5f5f5",
+    border: "1px solid #e0e0e0",
+    listStyle: "none",
+    userSelect: "none"
+  },
+  toolIcon: {
+    fontSize: "11px"
+  },
+  toolContent: {
+    margin: "4px 0 0 0",
+    padding: "8px",
+    backgroundColor: "#fafafa",
+    border: "1px solid #e0e0e0",
+    borderRadius: "4px",
+    fontSize: "11px",
+    overflow: "auto",
+    maxHeight: "200px"
+  },
+  // Result / system / complete
+  resultRow: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  resultBubble: {
+    padding: "6px 12px",
+    borderRadius: "8px",
+    backgroundColor: "#e8f5e9",
+    fontSize: "12px",
+    color: "#2e7d32",
+    textAlign: "center"
+  },
+  resultLabel: {
+    fontWeight: 600
+  },
+  resultText: {
+    marginTop: "4px",
+    fontSize: "12px",
+    color: "#555"
+  },
+  systemRow: {
+    display: "flex",
+    justifyContent: "center"
+  },
+  systemBubble: {
+    padding: "4px 10px",
+    borderRadius: "6px",
+    backgroundColor: "#f5f5f5",
+    fontSize: "11px",
+    color: "#999",
+    fontStyle: "italic"
+  },
+  completeBubble: {
+    padding: "4px 10px",
+    borderRadius: "6px",
+    backgroundColor: "#f0f4f8",
+    fontSize: "11px",
+    color: "#777"
+  },
+  genericContent: {
+    margin: 0,
+    padding: "8px",
+    backgroundColor: "#fafafa",
+    border: "1px solid #e0e0e0",
+    borderRadius: "4px",
+    fontSize: "11px",
+    overflow: "auto",
+    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",
+    justifyContent: "center"
+  },
+  errorBubble: {
+    padding: "6px 12px",
+    borderRadius: "8px",
+    backgroundColor: "#ffebee",
+    fontSize: "12px",
+    color: "#c62828"
+  },
+  errorCode: {
+    fontWeight: 600,
+    fontFamily: "monospace"
+  }
+};
+
+// src/components/MessageInput.jsx
+import React4, { useState, useRef as useRef2 } from "react";
+function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
+  const [text, setText] = useState("");
+  const textareaRef = useRef2(null);
+  const handleSend = () => {
+    const trimmed = text.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setText("");
+    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);
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = Math.min(el.scrollHeight, 120) + "px";
+  };
+  return /* @__PURE__ */ React4.createElement("div", { style: styles3.container }, /* @__PURE__ */ React4.createElement(
+    "textarea",
+    {
+      ref: textareaRef,
+      style: styles3.textarea,
+      value: text,
+      onChange: handleInput,
+      onKeyDown: handleKeyDown,
+      placeholder: disabled ? "Connect to daemon first..." : placeholder || "Ask Claude...",
+      disabled,
+      rows: 1
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      style: {
+        ...styles3.button,
+        ...disabled || !text.trim() ? styles3.buttonDisabled : {}
+      },
+      onClick: handleSend,
+      disabled: disabled || !text.trim(),
+      title: "Send message (Enter)"
+    },
+    isProcessing ? "..." : "Send"
+  ));
+}
+var styles3 = {
+  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"
+  }
+};
+
+// src/components/TokenInput.jsx
+import React5, { useState as useState2 } from "react";
+function TokenInput({ onSubmit, defaultPort = 3001 }) {
+  const [token, setToken] = useState2("");
+  const [port, setPort] = useState2(String(defaultPort));
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const trimmed = token.trim();
+    if (trimmed) {
+      const portNum = parseInt(port, 10) || defaultPort;
+      onSubmit(trimmed, portNum);
+    }
+  };
+  return /* @__PURE__ */ React5.createElement("div", { style: styles4.container }, /* @__PURE__ */ React5.createElement("div", { style: styles4.title }, "Connect to Claude Daemon"), /* @__PURE__ */ React5.createElement("p", { style: styles4.description }, "Enter the auth token from the daemon's startup output, or set the ", /* @__PURE__ */ React5.createElement("code", { style: styles4.code }, "CLAUDE_DAEMON_TOKEN"), " environment variable."), /* @__PURE__ */ React5.createElement("form", { onSubmit: handleSubmit, style: styles4.form }, /* @__PURE__ */ React5.createElement("div", { style: styles4.inputRow }, /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "text",
+      value: token,
+      onChange: (e) => setToken(e.target.value),
+      placeholder: "Paste daemon auth token...",
+      style: styles4.input,
+      autoFocus: true
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "number",
+      value: port,
+      onChange: (e) => setPort(e.target.value),
+      placeholder: "Port",
+      style: styles4.portInput,
+      min: "1",
+      max: "65535",
+      "aria-label": "Port"
+    }
+  )), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      type: "submit",
+      disabled: !token.trim(),
+      style: {
+        ...styles4.button,
+        ...!token.trim() ? styles4.buttonDisabled : {}
+      }
+    },
+    "Connect"
+  )));
+}
+var styles4 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "24px",
+    height: "100%"
+  },
+  title: {
+    fontSize: "16px",
+    fontWeight: 600,
+    marginBottom: "8px",
+    color: "#333"
+  },
+  description: {
+    fontSize: "13px",
+    color: "#666",
+    textAlign: "center",
+    maxWidth: "320px",
+    lineHeight: "1.5",
+    marginBottom: "16px"
+  },
+  code: {
+    fontFamily: "monospace",
+    backgroundColor: "#f5f5f5",
+    padding: "2px 4px",
+    borderRadius: "3px",
+    fontSize: "12px"
+  },
+  form: {
+    display: "flex",
+    gap: "8px",
+    width: "100%",
+    maxWidth: "400px",
+    alignItems: "center"
+  },
+  inputRow: {
+    display: "flex",
+    gap: "8px",
+    flex: 1
+  },
+  input: {
+    flex: 1,
+    padding: "8px 12px",
+    border: "1px solid #ddd",
+    borderRadius: "8px",
+    fontSize: "13px",
+    fontFamily: "monospace",
+    outline: "none"
+  },
+  portInput: {
+    width: "72px",
+    padding: "8px 8px",
+    border: "1px solid #ddd",
+    borderRadius: "8px",
+    fontSize: "13px",
+    fontFamily: "monospace",
+    outline: "none",
+    textAlign: "center"
+  },
+  button: {
+    padding: "8px 16px",
+    border: "none",
+    borderRadius: "8px",
+    backgroundColor: "#1ea7fd",
+    color: "#fff",
+    fontSize: "13px",
+    fontWeight: 600,
+    cursor: "pointer"
+  },
+  buttonDisabled: {
+    backgroundColor: "#ccc",
+    cursor: "not-allowed"
+  }
+};
+
+// src/components/GitContextBar.jsx
+import React6 from "react";
+function GitContextBar({ branch, pr, loading }) {
+  if (loading || !branch) return null;
+  return /* @__PURE__ */ React6.createElement("div", { style: styles5.container }, /* @__PURE__ */ React6.createElement("div", { style: styles5.left }, /* @__PURE__ */ React6.createElement("span", { style: styles5.branchIcon, title: "Git branch" }, "\u2387"), /* @__PURE__ */ React6.createElement("span", { style: styles5.branchName }, branch)), pr && /* @__PURE__ */ React6.createElement("div", { style: styles5.right }, /* @__PURE__ */ React6.createElement(
+    "a",
+    {
+      href: pr.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: styles5.prLink,
+      title: pr.title
+    },
+    "PR #",
+    pr.number
+  )));
+}
+var styles5 = {
+  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"
+  }
+};
+
+// src/useClaudeSession.js
+import { useState as useState3, useEffect as useEffect2, useRef as useRef3, useCallback } from "react";
+
+// src/WebSocketClient.js
+var WebSocketClient = class {
+  constructor(options = {}) {
+    this._host = options.host || DEFAULT_HOST;
+    this._port = options.port || DEFAULT_PORT;
+    this._token = options.token || null;
+    this._ws = null;
+    this._state = CONNECTION_STATES.DISCONNECTED;
+    this._listeners = /* @__PURE__ */ new Map();
+    this._reconnectAttempt = 0;
+    this._maxReconnectAttempts = options.maxReconnectAttempts || 10;
+    this._baseDelay = options.baseDelay || 1e3;
+    this._maxDelay = options.maxDelay || 3e4;
+    this._reconnectTimer = null;
+    this._pingInterval = null;
+    this._pingIntervalMs = options.pingIntervalMs || 3e4;
+  }
+  get state() {
+    return this._state;
+  }
+  get isConnected() {
+    return this._state === 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, /* @__PURE__ */ new Set());
+    }
+    this._listeners.get(event).add(callback);
+    return () => {
+      var _a;
+      return (_a = this._listeners.get(event)) == null ? void 0 : _a.delete(callback);
+    };
+  }
+  /**
+   * Connect to the standalone daemon.
+   */
+  connect() {
+    if (this._ws) {
+      this._ws.close();
+    }
+    if (this._state !== CONNECTION_STATES.RECONNECTING) {
+      this._setState(CONNECTION_STATES.CONNECTING);
+    }
+    const params = this._token ? `?token=${encodeURIComponent(this._token)}` : "";
+    const url = `ws://${this._host}:${this._port}/${params}`;
+    try {
+      this._ws = new WebSocket(url);
+    } catch (err) {
+      this._setState(CONNECTION_STATES.DISCONNECTED);
+      this._emit("error", { code: "CONNECT_FAILED", message: err.message });
+      return;
+    }
+    this._ws.onopen = () => {
+      this._setState(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 === CONNECTION_STATES.CONNECTED;
+      this._ws = null;
+      if (event.code === 4001) {
+        this._setState(CONNECTION_STATES.DISCONNECTED);
+        this._emit("error", { code: "AUTH_FAILED", message: "Authentication failed" });
+        return;
+      }
+      if (wasConnected || this._state === CONNECTION_STATES.RECONNECTING) {
+        this._scheduleReconnect();
+      } else {
+        this._setState(CONNECTION_STATES.DISCONNECTED);
+      }
+    };
+    this._ws.onerror = () => {
+    };
+  }
+  /**
+   * Disconnect and stop reconnection attempts.
+   */
+  disconnect() {
+    this._clearReconnect();
+    this._stopPing();
+    if (this._ws) {
+      this._ws.close(1e3, "Client disconnecting");
+      this._ws = null;
+    }
+    this._setState(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
+    });
+  }
+  /**
+   * Clear (tear down) a session on the daemon.
+   */
+  clearSession(sessionId) {
+    this._send({
+      type: "clear_session",
+      sessionId
+    });
+  }
+  /**
+   * Send a query to the daemon.
+   */
+  sendQuery(queryType) {
+    this._send({
+      type: "query",
+      queryType
+    });
+  }
+  // ---------------------------------------------------------------------------
+  // 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 "session_cleared":
+      case "output":
+      case "complete":
+      case "error":
+      case "user_input":
+      case "pong":
+      case "query_result":
+        this._emit(msg.type, msg);
+        break;
+      default:
+        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 {
+        }
+      }
+    }
+  }
+  _scheduleReconnect() {
+    if (this._reconnectAttempt >= this._maxReconnectAttempts) {
+      this._setState(CONNECTION_STATES.DISCONNECTED);
+      this._emit("error", { code: "MAX_RECONNECT", message: "Max reconnection attempts reached" });
+      return;
+    }
+    this._setState(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;
+    }
+  }
+};
+
+// src/useClaudeSession.js
+var DEFAULT_STORAGE_KEY = `${ADDON_ID}:sessionId`;
+function loadPersistedSessionId(storageKey) {
+  try {
+    return localStorage.getItem(storageKey) || null;
+  } catch {
+    return null;
+  }
+}
+function persistSessionId(storageKey, id) {
+  try {
+    if (id) {
+      localStorage.setItem(storageKey, id);
+    } else {
+      localStorage.removeItem(storageKey);
+    }
+  } catch {
+  }
+}
+function useClaudeSession(options = {}) {
+  const { host, port, token, sessionId: initialSessionId, storageKey } = options;
+  const _storageKey = storageKey || DEFAULT_STORAGE_KEY;
+  const [connectionState, setConnectionState] = useState3(CONNECTION_STATES.DISCONNECTED);
+  const [messages, setMessages] = useState3([]);
+  const [sessionId, setSessionId] = useState3(initialSessionId || loadPersistedSessionId(_storageKey));
+  const [isProcessing, setIsProcessing] = useState3(false);
+  const [authFailed, setAuthFailed] = useState3(false);
+  const clientRef = useRef3(null);
+  const sessionIdRef = useRef3(sessionId);
+  sessionIdRef.current = sessionId;
+  useEffect2(() => {
+    const client = new WebSocketClient({ host, port, token });
+    clientRef.current = client;
+    const unsubs = [
+      client.on("state_change", ({ newState }) => {
+        setConnectionState(newState);
+      }),
+      client.on("session_activated", (msg) => {
+        setSessionId(msg.sessionId);
+        persistSessionId(_storageKey, msg.sessionId);
+      }),
+      client.on("session_cleared", () => {
+        const newSid = crypto.randomUUID();
+        sessionIdRef.current = newSid;
+        setSessionId(newSid);
+        persistSessionId(_storageKey, newSid);
+        setMessages([]);
+        setIsProcessing(false);
+        client.activate(newSid);
+      }),
+      client.on("output", (msg) => {
+        if (msg.sessionId !== sessionIdRef.current) return;
+        setMessages((prev) => [...prev, { ...msg, id: crypto.randomUUID() }]);
+        if (msg.data && msg.data.type === "result") {
+          setIsProcessing(false);
+        }
+      }),
+      client.on("user_input", (msg) => {
+        if (msg.sessionId !== sessionIdRef.current) return;
+        let text = msg.text || "";
+        const ctxMarker = "[Context from Storybook]";
+        if (text.startsWith(ctxMarker)) {
+          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, { ...msg, id: crypto.randomUUID() }]);
+        setIsProcessing(false);
+      }),
+      client.on("error", (msg) => {
+        if (msg.code === "AUTH_FAILED") {
+          setAuthFailed(true);
+          return;
+        }
+        setMessages((prev) => [
+          ...prev,
+          { type: "error", ...msg, id: crypto.randomUUID(), timestamp: Date.now() }
+        ]);
+        setIsProcessing(false);
+      })
+    ];
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+      client.disconnect();
+    };
+  }, [host, port, token]);
+  useEffect2(() => {
+    const client = clientRef.current;
+    if (!client) return;
+    if (token) {
+      client.setToken(token);
+    }
+    setAuthFailed(false);
+    client.connect();
+    return () => client.disconnect();
+  }, [token]);
+  useEffect2(() => {
+    const client = clientRef.current;
+    if (!client || connectionState !== CONNECTION_STATES.CONNECTED || !sessionId) return;
+    client.activate(sessionId);
+  }, [connectionState, sessionId]);
+  const sendMessage = useCallback(
+    (text, contextPrefix) => {
+      const client = clientRef.current;
+      if (!client || !client.isConnected || !sessionIdRef.current) return;
+      const fullText = contextPrefix ? `${contextPrefix}
+
+${text}` : text;
+      setMessages((prev) => [
+        ...prev,
+        {
+          type: "user_input",
+          text,
+          id: crypto.randomUUID(),
+          timestamp: Date.now()
+        }
+      ]);
+      setIsProcessing(true);
+      client.sendCommand(sessionIdRef.current, fullText);
+    },
+    []
+  );
+  const startSession = useCallback(
+    (newSessionId, workingDir) => {
+      const client = clientRef.current;
+      const sid = newSessionId || crypto.randomUUID();
+      sessionIdRef.current = sid;
+      setSessionId(sid);
+      persistSessionId(_storageKey, sid);
+      setMessages([]);
+      if (client && client.isConnected) {
+        client.activate(sid, workingDir);
+      }
+      return sid;
+    },
+    []
+  );
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+  }, []);
+  const disconnect = useCallback(() => {
+    const client = clientRef.current;
+    if (client) {
+      client.disconnect();
+    }
+    sessionIdRef.current = null;
+    setSessionId(null);
+    persistSessionId(_storageKey, null);
+    setMessages([]);
+    setIsProcessing(false);
+  }, []);
+  const newChat = useCallback(() => {
+    const client = clientRef.current;
+    const currentSid = sessionIdRef.current;
+    if (client && client.isConnected && currentSid) {
+      client.clearSession(currentSid);
+    } else {
+      startSession();
+    }
+  }, [startSession]);
+  return {
+    connectionState,
+    messages,
+    sessionId,
+    isProcessing,
+    authFailed,
+    sendMessage,
+    startSession,
+    clearMessages,
+    setMessages,
+    disconnect,
+    newChat,
+    isConnected: connectionState === CONNECTION_STATES.CONNECTED,
+    client: clientRef.current
+  };
+}
+
+// src/useGitContext.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);
+  const intervalRef = useRef4(null);
+  const unsubRef = useRef4(null);
+  const fetchContext = useCallback2(() => {
+    if (!client || !client.isConnected) return;
+    setLoading(true);
+    client.sendQuery("git_context");
+  }, [client]);
+  useEffect3(() => {
+    if (!client) return;
+    const unsub = client.on("query_result", (msg) => {
+      if (msg.queryType === "git_context") {
+        setGitData(msg.data || null);
+        setLoading(false);
+      }
+    });
+    const unsubErr = client.on("error", (msg) => {
+      if (msg.code === "UNKNOWN_TYPE" || msg.code === "UNKNOWN_QUERY") {
+        setLoading(false);
+      }
+    });
+    unsubRef.current = () => {
+      unsub();
+      unsubErr();
+    };
+    return () => {
+      if (unsubRef.current) unsubRef.current();
+    };
+  }, [client]);
+  useEffect3(() => {
+    if (connectionState !== CONNECTION_STATES.CONNECTED) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      return;
+    }
+    fetchContext();
+    intervalRef.current = setInterval(fetchContext, 6e4);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [connectionState, fetchContext]);
+  return {
+    branch: (gitData == null ? void 0 : gitData.branch) || null,
+    pr: (gitData == null ? void 0 : gitData.pr) || null,
+    loading
+  };
+}
+
+// src/useStoryContext.js
+import { useStorybookState } from "storybook/manager-api";
+function useStoryContext() {
+  var _a;
+  const state = useStorybookState();
+  if (!state || !state.storyId) {
+    return { storyId: null, componentPath: null, storyTitle: null };
+  }
+  const story = (_a = state.index) == null ? void 0 : _a[state.storyId];
+  if (!story) {
+    return { storyId: state.storyId, componentPath: null, storyTitle: null };
+  }
+  const componentPath = extractComponentPath(story);
+  const storyTitle = story.title || null;
+  return {
+    storyId: state.storyId,
+    componentPath,
+    storyTitle
+  };
+}
+function buildContextPrefix(storyContext) {
+  if (!storyContext.componentPath && !storyContext.storyTitle) {
+    return null;
+  }
+  const parts = ["[Context from Storybook]"];
+  if (storyContext.componentPath) {
+    parts.push(`The user is viewing the component at: ${storyContext.componentPath}`);
+  }
+  if (storyContext.storyTitle) {
+    parts.push(`Story: ${storyContext.storyTitle}`);
+  }
+  parts.push("Please focus your edits on this component file.");
+  return parts.join("\n");
+}
+function extractComponentPath(story) {
+  if (story.importPath) {
+    return storyFileToComponentFile(story.importPath);
+  }
+  const params = story.parameters;
+  if (params == null ? void 0 : params.fileName) {
+    return storyFileToComponentFile(params.fileName);
+  }
+  return null;
+}
+function storyFileToComponentFile(storyPath) {
+  const converted = storyPath.replace(/\.stories\.([jt]sx?)$/, ".$1");
+  return converted !== storyPath ? converted : storyPath;
+}
+
+// src/Panel.jsx
+function ClaudePanel({ active }) {
+  const [addonState, setAddonState] = useAddonState(ADDON_ID, {
+    token: getInitialToken(),
+    port: getInitialPort(),
+    contextEnabled: true
+  });
+  const token = (addonState == null ? void 0 : addonState.token) || null;
+  const port = (addonState == null ? void 0 : addonState.port) || DEFAULT_PORT;
+  const contextEnabled = (addonState == null ? void 0 : addonState.contextEnabled) ?? true;
+  const storyContext = useStoryContext();
+  const {
+    connectionState,
+    messages,
+    sessionId,
+    isProcessing,
+    authFailed,
+    sendMessage,
+    startSession,
+    disconnect,
+    newChat,
+    isConnected,
+    client
+  } = useClaudeSession({
+    host: DEFAULT_HOST,
+    port,
+    token
   });
+  const gitContext = useGitContext(client, connectionState);
+  const handleTokenSubmit = useCallback3(
+    (newToken, newPort) => {
+      setAddonState({ ...addonState, token: newToken, port: newPort || DEFAULT_PORT });
+    },
+    [addonState, setAddonState]
+  );
+  const handleDisconnect = useCallback3(() => {
+    disconnect();
+    setAddonState({ ...addonState, token: null });
+  }, [addonState, setAddonState, disconnect]);
+  const handleSend = useCallback3(
+    (text) => {
+      if (!sessionId) {
+        startSession();
+      }
+      const prefix = contextEnabled ? buildContextPrefix(storyContext) : null;
+      sendMessage(text, prefix);
+    },
+    [sessionId, startSession, sendMessage, contextEnabled, storyContext]
+  );
+  const toggleContext = useCallback3(() => {
+    setAddonState({ ...addonState, contextEnabled: !contextEnabled });
+  }, [addonState, contextEnabled, setAddonState]);
+  if (!active) return null;
+  if (authFailed && !token) {
+    return /* @__PURE__ */ React7.createElement("div", { style: styles6.panel }, /* @__PURE__ */ React7.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
+  }
+  return /* @__PURE__ */ React7.createElement("div", { style: styles6.panel }, /* @__PURE__ */ React7.createElement(ConnectionStatus, { state: connectionState, sessionId, onDisconnect: handleDisconnect, onNewChat: newChat, isProcessing }), /* @__PURE__ */ React7.createElement(GitContextBar, { branch: gitContext.branch, pr: gitContext.pr, loading: gitContext.loading }), storyContext.componentPath && /* @__PURE__ */ React7.createElement("div", { style: styles6.contextBar }, /* @__PURE__ */ React7.createElement("label", { style: styles6.contextLabel }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: contextEnabled,
+      onChange: toggleContext,
+      style: styles6.contextCheckbox
+    }
+  ), "Context: ", /* @__PURE__ */ React7.createElement("code", { style: styles6.contextPath }, storyContext.componentPath))), /* @__PURE__ */ React7.createElement(MessageList, { messages }), /* @__PURE__ */ React7.createElement(
+    MessageInput,
+    {
+      onSend: handleSend,
+      disabled: !isConnected,
+      isProcessing
+    }
+  ));
+}
+function getInitialPort() {
+  var _a;
+  try {
+    if (typeof window !== "undefined" && window.__CLAUDE_DAEMON_PORT__) {
+      return parseInt(window.__CLAUDE_DAEMON_PORT__, 10) || DEFAULT_PORT;
+    }
+    const envPort = typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.STORYBOOK_CLAUDE_DAEMON_PORT) || null;
+    return envPort ? parseInt(envPort, 10) : DEFAULT_PORT;
+  } catch {
+    return DEFAULT_PORT;
+  }
+}
+function getInitialToken() {
+  var _a, _b;
+  try {
+    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;
+  }
+}
+var styles6 = {
+  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"
+  }
+};
+
+// src/GlobalPanel.jsx
+import React9, { useCallback as useCallback4, useMemo as useMemo2 } from "react";
+import { useAddonState as useAddonState2 } from "storybook/manager-api";
 
-  // 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
+// src/components/SkillsBar.jsx
+import React8 from "react";
+function SkillsBar({ skills, onTrigger, disabled }) {
+  if (!skills || skills.length === 0) return null;
+  return /* @__PURE__ */ React8.createElement("div", { style: styles7.bar }, skills.map((skill) => /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      key: skill.id,
+      style: {
+        ...styles7.button,
+        ...disabled ? styles7.buttonDisabled : {}
+      },
+      onClick: () => onTrigger(skill),
+      disabled,
+      title: skill.prompt
+    },
+    /* @__PURE__ */ React8.createElement("span", { style: styles7.icon }, skill.icon),
+    /* @__PURE__ */ React8.createElement("span", null, skill.label)
+  )));
+}
+var styles7 = {
+  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"
+  }
+};
+
+// src/skills.js
+var 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: "\u{1F50D}",
+    prompt: "Audit all components and list any that are missing Storybook stories or have outdated ones."
+  }
+];
+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."
+  };
+}
+function getGlobalSkills(gitContext) {
+  const pr = (gitContext == null ? void 0 : 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
+  ];
+}
+
+// src/GlobalPanel.jsx
+function GlobalPanel() {
+  const handleBack = useCallback4(() => {
+    window.history.back();
+  }, []);
+  const [addonState, setAddonState] = useAddonState2(ADDON_ID, {
+    token: getInitialToken2(),
+    port: getInitialPort2()
+  });
+  const token = (addonState == null ? void 0 : addonState.token) || null;
+  const port = (addonState == null ? void 0 : addonState.port) || DEFAULT_PORT;
+  const {
+    connectionState,
+    messages,
+    sessionId,
+    isProcessing,
+    authFailed,
+    sendMessage,
+    startSession,
+    setMessages,
+    isConnected,
+    client
+  } = useClaudeSession({
+    host: DEFAULT_HOST,
+    port,
+    token,
+    sessionId: GLOBAL_SESSION_KEY,
+    storageKey: `${ADDON_ID}:globalSessionId`
   });
+  const gitContext = useGitContext(client, connectionState);
+  const skills = useMemo2(() => getGlobalSkills(gitContext), [gitContext]);
+  const handleTokenSubmit = useCallback4(
+    (newToken, newPort) => {
+      setAddonState({ ...addonState, token: newToken, port: newPort || DEFAULT_PORT });
+    },
+    [addonState, setAddonState]
+  );
+  const handleSend = useCallback4(
+    (text) => {
+      if (!sessionId) {
+        startSession(GLOBAL_SESSION_KEY);
+      }
+      sendMessage(text);
+    },
+    [sessionId, startSession, sendMessage]
+  );
+  const handleSkillTrigger = useCallback4(
+    (skill) => {
+      setMessages((prev) => [
+        ...prev,
+        {
+          type: "skill_invocation",
+          skill,
+          id: crypto.randomUUID(),
+          timestamp: Date.now()
+        }
+      ]);
+      handleSend(skill.prompt);
+    },
+    [handleSend, setMessages]
+  );
+  if (authFailed && !token) {
+    return /* @__PURE__ */ React9.createElement("div", { style: styles8.page }, /* @__PURE__ */ React9.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
+  }
+  const statusColor = connectionState === CONNECTION_STATES.CONNECTED ? "#4caf50" : connectionState === CONNECTION_STATES.DISCONNECTED ? "#f44336" : "#ff9800";
+  const statusLabel = connectionState === CONNECTION_STATES.CONNECTED ? "Connected" : connectionState === CONNECTION_STATES.CONNECTING ? "Connecting..." : connectionState === CONNECTION_STATES.RECONNECTING ? "Reconnecting..." : "Disconnected";
+  return /* @__PURE__ */ React9.createElement("div", { style: styles8.page }, /* @__PURE__ */ React9.createElement("div", { style: styles8.titleBar }, /* @__PURE__ */ React9.createElement("div", { style: styles8.titleLeft }, /* @__PURE__ */ React9.createElement("div", { style: styles8.title }, "Claude \u2014 Global Chat"), /* @__PURE__ */ React9.createElement("span", { style: { ...styles8.statusDot, backgroundColor: statusColor }, title: statusLabel }), /* @__PURE__ */ React9.createElement("span", { style: styles8.statusLabel }, statusLabel), /* @__PURE__ */ React9.createElement(
+    "span",
+    {
+      style: styles8.infoIcon,
+      title: "Chat with Claude about your entire project. Not scoped to any specific component."
+    },
+    /* @__PURE__ */ React9.createElement("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "currentColor" }, /* @__PURE__ */ React9.createElement("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__ */ React9.createElement("button", { style: styles8.backButton, onClick: handleBack, title: "Back to components" }, /* @__PURE__ */ React9.createElement("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React9.createElement("path", { d: "M19 12H5" }), /* @__PURE__ */ React9.createElement("path", { d: "M12 19l-7-7 7-7" })), /* @__PURE__ */ React9.createElement("span", { style: { marginLeft: "4px" } }, "Back"))), /* @__PURE__ */ React9.createElement("div", { style: styles8.toolsBar }, /* @__PURE__ */ React9.createElement(SkillsBar, { skills, onTrigger: handleSkillTrigger, disabled: !isConnected }), gitContext.branch && /* @__PURE__ */ React9.createElement("div", { style: styles8.gitContext }, /* @__PURE__ */ React9.createElement("div", { style: styles8.branchName }, /* @__PURE__ */ React9.createElement("span", { style: styles8.branchIcon, title: "Git branch" }, "\u2387"), gitContext.branch), gitContext.pr && /* @__PURE__ */ React9.createElement(
+    "a",
+    {
+      href: gitContext.pr.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: styles8.prLink,
+      title: gitContext.pr.title
+    },
+    "PR #",
+    gitContext.pr.number
+  ))), /* @__PURE__ */ React9.createElement("div", { style: styles8.chatArea }, /* @__PURE__ */ React9.createElement(MessageList, { messages }), /* @__PURE__ */ React9.createElement(
+    MessageInput,
+    {
+      onSend: handleSend,
+      disabled: !isConnected,
+      isProcessing,
+      placeholder: "Ask Claude about your project..."
+    }
+  )));
+}
+function getInitialPort2() {
+  var _a;
+  try {
+    if (typeof window !== "undefined" && window.__CLAUDE_DAEMON_PORT__) {
+      return parseInt(window.__CLAUDE_DAEMON_PORT__, 10) || DEFAULT_PORT;
+    }
+    const envPort = typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.STORYBOOK_CLAUDE_DAEMON_PORT) || null;
+    return envPort ? parseInt(envPort, 10) : DEFAULT_PORT;
+  } catch {
+    return DEFAULT_PORT;
+  }
+}
+function getInitialToken2() {
+  var _a, _b;
+  try {
+    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;
+  }
+}
+var styles8 = {
+  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"
+  }
+};
 
-  // 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
+// src/components/GlobalChatButton.jsx
+import React10, { useCallback as useCallback5 } from "react";
+import { useStorybookApi } from "storybook/manager-api";
+import { Button } from "storybook/internal/components";
+function GlobalChatButton() {
+  const api = useStorybookApi();
+  const handleClick = useCallback5(() => {
+    api.navigateUrl("/?path=/claude", { replace: false });
+  }, [api]);
+  return /* @__PURE__ */ React10.createElement(Button, { variant: "ghost", padding: "small", "aria-label": "Open Claude Global Chat", onClick: handleClick }, /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React10.createElement("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+  ));
+}
+
+// src/manager.js
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: "Claude",
+    match: ({ viewMode }) => viewMode === "story",
+    render: ClaudePanel
+  });
+  addons.add(PAGE_ID, {
+    type: types.experimental_PAGE,
+    title: "Claude Global",
+    url: "/claude",
+    render: GlobalPanel
+  });
+  addons.add(TOOL_ID, {
+    type: types.TOOLEXTRA,
+    title: "Claude Global Chat",
+    render: GlobalChatButton
   });
-});
+});