@radnine/storybook-addon-claude 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/manager.js +167 -260
  2. package/package.json +1 -1
package/dist/manager.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // src/manager.js
2
- import { addons, types } from "storybook/manager-api";
2
+ import React9 from "react";
3
+ import { addons, types, useStorybookState as useStorybookState2 } from "storybook/manager-api";
3
4
 
4
5
  // src/constants.js
5
6
  var ADDON_ID = "storybook-addon-claude";
@@ -17,111 +18,14 @@ var CONNECTION_STATES = {
17
18
  };
18
19
 
19
20
  // src/Panel.jsx
20
- import React7, { useCallback as useCallback3 } from "react";
21
+ import React5, { useCallback as useCallback3 } from "react";
21
22
  import { useAddonState } from "storybook/manager-api";
22
23
 
23
- // src/components/ConnectionStatus.jsx
24
- import React from "react";
25
- var STATUS_CONFIG = {
26
- [CONNECTION_STATES.CONNECTED]: {
27
- label: "Connected",
28
- color: "#4caf50"
29
- },
30
- [CONNECTION_STATES.CONNECTING]: {
31
- label: "Connecting...",
32
- color: "#ff9800"
33
- },
34
- [CONNECTION_STATES.RECONNECTING]: {
35
- label: "Reconnecting...",
36
- color: "#ff9800"
37
- },
38
- [CONNECTION_STATES.DISCONNECTED]: {
39
- label: "Disconnected",
40
- color: "#f44336"
41
- }
42
- };
43
- function ConnectionStatus({ state, sessionId, onDisconnect, onNewChat, isProcessing }) {
44
- const config = STATUS_CONFIG[state] || STATUS_CONFIG[CONNECTION_STATES.DISCONNECTED];
45
- const isConnected = state === CONNECTION_STATES.CONNECTED;
46
- 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(
47
- "button",
48
- {
49
- onClick: onNewChat,
50
- disabled: isProcessing,
51
- style: {
52
- ...styles.actionButton,
53
- ...isProcessing ? styles.actionButtonDisabled : {}
54
- },
55
- title: "Clear chat and start fresh session",
56
- "aria-label": "New Chat"
57
- },
58
- "New Chat"
59
- ), onDisconnect && /* @__PURE__ */ React.createElement(
60
- "button",
61
- {
62
- onClick: onDisconnect,
63
- style: styles.actionButton,
64
- title: isConnected ? "Disconnect" : "Change Token",
65
- "aria-label": isConnected ? "Disconnect" : "Change Token"
66
- },
67
- isConnected ? "Disconnect" : "Change Token"
68
- )));
69
- }
70
- var styles = {
71
- container: {
72
- display: "flex",
73
- alignItems: "center",
74
- justifyContent: "space-between",
75
- padding: "6px 12px",
76
- borderBottom: "1px solid rgba(0,0,0,0.1)",
77
- fontSize: "12px",
78
- fontFamily: "inherit"
79
- },
80
- indicator: {
81
- display: "flex",
82
- alignItems: "center",
83
- gap: "6px"
84
- },
85
- dot: {
86
- width: "8px",
87
- height: "8px",
88
- borderRadius: "50%",
89
- display: "inline-block"
90
- },
91
- label: {
92
- color: "#666"
93
- },
94
- right: {
95
- display: "flex",
96
- alignItems: "center",
97
- gap: "8px"
98
- },
99
- sessionId: {
100
- color: "#999",
101
- fontFamily: "monospace",
102
- fontSize: "11px"
103
- },
104
- actionButton: {
105
- padding: "2px 8px",
106
- border: "1px solid #ccc",
107
- borderRadius: "4px",
108
- backgroundColor: "transparent",
109
- color: "#666",
110
- fontSize: "11px",
111
- cursor: "pointer",
112
- lineHeight: "1.4"
113
- },
114
- actionButtonDisabled: {
115
- opacity: 0.4,
116
- cursor: "default"
117
- }
118
- };
119
-
120
24
  // src/components/MessageList.jsx
121
- import React3, { useEffect, useRef } from "react";
25
+ import React2, { useEffect, useRef } from "react";
122
26
 
123
27
  // src/components/MarkdownContent.jsx
124
- import React2, { useMemo } from "react";
28
+ import React, { useMemo } from "react";
125
29
  import { marked } from "marked";
126
30
  var renderer = new marked.Renderer();
127
31
  renderer.link = function({ href, title, text }) {
@@ -172,7 +76,7 @@ function MarkdownContent({ text }) {
172
76
  if (!text) return "";
173
77
  return marked.parse(text);
174
78
  }, [text]);
175
- return /* @__PURE__ */ React2.createElement(
79
+ return /* @__PURE__ */ React.createElement(
176
80
  "div",
177
81
  {
178
82
  className: "claude-md",
@@ -189,49 +93,49 @@ function MessageList({ messages }) {
189
93
  (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
190
94
  }, [messages]);
191
95
  if (messages.length === 0) {
192
- return /* @__PURE__ */ React3.createElement("div", { style: styles2.empty }, "No messages yet. Send a message to start chatting with Claude.");
96
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.empty }, "No messages yet. Send a message to start chatting with Claude.");
193
97
  }
194
- 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 }));
98
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.container }, messages.map((msg) => /* @__PURE__ */ React2.createElement(MessageItem, { key: msg.id, message: msg })), /* @__PURE__ */ React2.createElement("div", { ref: bottomRef }));
195
99
  }
196
100
  function MessageItem({ message }) {
197
101
  switch (message.type) {
198
102
  case "user_input":
199
- return /* @__PURE__ */ React3.createElement(UserMessage, { text: message.text });
103
+ return /* @__PURE__ */ React2.createElement(UserMessage, { text: message.text });
200
104
  case "skill_invocation":
201
- return /* @__PURE__ */ React3.createElement(SkillInvocationMessage, { skill: message.skill });
105
+ return /* @__PURE__ */ React2.createElement(SkillInvocationMessage, { skill: message.skill });
202
106
  case "output":
203
- return /* @__PURE__ */ React3.createElement(OutputMessage, { data: message.data, replay: message.replay });
107
+ return /* @__PURE__ */ React2.createElement(OutputMessage, { data: message.data, replay: message.replay });
204
108
  case "complete":
205
- return /* @__PURE__ */ React3.createElement(CompleteMessage, { message });
109
+ return /* @__PURE__ */ React2.createElement(CompleteMessage, { message });
206
110
  case "error":
207
- return /* @__PURE__ */ React3.createElement(ErrorMessage, { message });
111
+ return /* @__PURE__ */ React2.createElement(ErrorMessage, { message });
208
112
  default:
209
113
  return null;
210
114
  }
211
115
  }
212
116
  function UserMessage({ text }) {
213
- return /* @__PURE__ */ React3.createElement("div", { style: styles2.userRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.userBubble }, text));
117
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.userRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.userBubble }, text));
214
118
  }
215
119
  function OutputMessage({ data, replay }) {
216
120
  if (!data) return null;
217
121
  const classifiedType = classifyOutputType(data);
218
122
  switch (classifiedType) {
219
123
  case "assistant":
220
- return /* @__PURE__ */ React3.createElement(AssistantMessage, { data, replay });
124
+ return /* @__PURE__ */ React2.createElement(AssistantMessage, { data, replay });
221
125
  case "tool_use":
222
- return /* @__PURE__ */ React3.createElement(ToolUseMessage, { data });
126
+ return /* @__PURE__ */ React2.createElement(ToolUseMessage, { data });
223
127
  case "tool_result":
224
- return /* @__PURE__ */ React3.createElement(ToolResultMessage, { data });
128
+ return /* @__PURE__ */ React2.createElement(ToolResultMessage, { data });
225
129
  case "result":
226
- return /* @__PURE__ */ React3.createElement(ResultMessage, { data });
130
+ return /* @__PURE__ */ React2.createElement(ResultMessage, { data });
227
131
  case "system":
228
- return /* @__PURE__ */ React3.createElement(SystemMessage, { data });
132
+ return /* @__PURE__ */ React2.createElement(SystemMessage, { data });
229
133
  case "rate_limit_event":
230
- return /* @__PURE__ */ React3.createElement(RateLimitMessage, { data });
134
+ return /* @__PURE__ */ React2.createElement(RateLimitMessage, { data });
231
135
  case "_skip":
232
136
  return null;
233
137
  default:
234
- return /* @__PURE__ */ React3.createElement(GenericOutputMessage, { data, replay });
138
+ return /* @__PURE__ */ React2.createElement(GenericOutputMessage, { data, replay });
235
139
  }
236
140
  }
237
141
  function classifyOutputType(data) {
@@ -267,31 +171,31 @@ function classifyOutputType(data) {
267
171
  }
268
172
  function AssistantMessage({ data, replay }) {
269
173
  const text = extractAssistantText(data);
270
- 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)"));
174
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.assistantRow }, /* @__PURE__ */ React2.createElement("div", { style: { ...styles.assistantBubble, ...replay ? styles.replay : {} } }, text ? /* @__PURE__ */ React2.createElement(MarkdownContent, { text }) : "(empty response)"));
271
175
  }
272
176
  function ToolUseMessage({ data }) {
273
177
  const toolName = extractToolName(data);
274
178
  const summary = extractToolSummary(data);
275
- 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))));
179
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: styles.toolSummary }, /* @__PURE__ */ React2.createElement("span", { style: styles.toolIcon }, "\u2699"), " ", toolName, summary ? `: ${summary}` : ""), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
276
180
  }
277
181
  function ToolResultMessage({ data }) {
278
182
  const isError = extractToolResultError(data);
279
183
  const summary = extractToolResultSummary(data);
280
- 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))));
184
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: { ...styles.toolSummary, color: isError ? "#f44336" : "#4caf50" } }, isError ? "Error" : "Done", summary ? `: ${summary}` : ""), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
281
185
  }
282
186
  function ResultMessage({ data }) {
283
187
  const subtype = (data == null ? void 0 : data.subtype) || "unknown";
284
- 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}`)));
188
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.resultRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.resultBubble }, /* @__PURE__ */ React2.createElement("span", { style: styles.resultLabel }, subtype === "success" ? "Completed" : `Result: ${subtype}`)));
285
189
  }
286
190
  function SystemMessage({ data }) {
287
191
  if (typeof (data == null ? void 0 : data.message) === "string") {
288
- return /* @__PURE__ */ React3.createElement("div", { style: styles2.systemRow }, /* @__PURE__ */ React3.createElement("div", { style: styles2.systemBubble }, data.message));
192
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.systemRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.systemBubble }, data.message));
289
193
  }
290
194
  const label = (data == null ? void 0 : data.subtype) ? `System: ${data.subtype}` : "System event";
291
- 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))));
195
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: styles.toolSummary }, label), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
292
196
  }
293
197
  function RateLimitMessage({ data }) {
294
- 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))));
198
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: { ...styles.toolSummary, color: "#ff9800" } }, "Rate limited (waiting...)"), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
295
199
  }
296
200
  function GenericOutputMessage({ data, replay }) {
297
201
  const text = extractAssistantText(data);
@@ -299,19 +203,19 @@ function GenericOutputMessage({ data, replay }) {
299
203
  return null;
300
204
  }
301
205
  if (text) {
302
- return /* @__PURE__ */ React3.createElement("div", { style: styles2.assistantRow }, /* @__PURE__ */ React3.createElement("div", { style: { ...styles2.assistantBubble, ...replay ? styles2.replay : {} } }, /* @__PURE__ */ React3.createElement(MarkdownContent, { text })));
206
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.assistantRow }, /* @__PURE__ */ React2.createElement("div", { style: { ...styles.assistantBubble, ...replay ? styles.replay : {} } }, /* @__PURE__ */ React2.createElement(MarkdownContent, { text })));
303
207
  }
304
208
  const summaryLabel = typeof data === "object" && data.type ? `System: ${data.type}` : "System message";
305
- 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))));
209
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.toolRow }, /* @__PURE__ */ React2.createElement("details", { style: styles.toolDetails }, /* @__PURE__ */ React2.createElement("summary", { style: styles.toolSummary }, summaryLabel), /* @__PURE__ */ React2.createElement("pre", { style: styles.toolContent }, JSON.stringify(data, null, 2))));
306
210
  }
307
211
  function CompleteMessage({ message }) {
308
- 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`));
212
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.systemRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.completeBubble }, "Command completed (exit ", message.exitCode ?? "?", ")", message.durationMs != null && ` in ${(message.durationMs / 1e3).toFixed(1)}s`));
309
213
  }
310
214
  function SkillInvocationMessage({ skill }) {
311
- 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)));
215
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.skillRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.skillBubble }, /* @__PURE__ */ React2.createElement("span", { style: styles.skillIcon }, skill.icon), /* @__PURE__ */ React2.createElement("span", { style: styles.skillLabel }, "Skill: ", skill.label)));
312
216
  }
313
217
  function ErrorMessage({ message }) {
314
- 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"));
218
+ return /* @__PURE__ */ React2.createElement("div", { style: styles.errorRow }, /* @__PURE__ */ React2.createElement("div", { style: styles.errorBubble }, message.code && /* @__PURE__ */ React2.createElement("span", { style: styles.errorCode }, message.code, ": "), message.message || "Unknown error"));
315
219
  }
316
220
  function extractAssistantText(data) {
317
221
  var _a;
@@ -368,7 +272,7 @@ function extractToolResultSummary(data) {
368
272
  }
369
273
  return null;
370
274
  }
371
- var styles2 = {
275
+ var styles = {
372
276
  container: {
373
277
  flex: 1,
374
278
  overflowY: "auto",
@@ -546,7 +450,7 @@ var styles2 = {
546
450
  };
547
451
 
548
452
  // src/components/MessageInput.jsx
549
- import React4, { useState, useRef as useRef2 } from "react";
453
+ import React3, { useState, useRef as useRef2 } from "react";
550
454
  function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
551
455
  const [text, setText] = useState("");
552
456
  const textareaRef = useRef2(null);
@@ -571,11 +475,11 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
571
475
  el.style.height = "auto";
572
476
  el.style.height = Math.min(el.scrollHeight, 120) + "px";
573
477
  };
574
- return /* @__PURE__ */ React4.createElement("div", { style: styles3.container }, /* @__PURE__ */ React4.createElement(
478
+ return /* @__PURE__ */ React3.createElement("div", { style: styles2.container }, /* @__PURE__ */ React3.createElement(
575
479
  "textarea",
576
480
  {
577
481
  ref: textareaRef,
578
- style: styles3.textarea,
482
+ style: styles2.textarea,
579
483
  value: text,
580
484
  onChange: handleInput,
581
485
  onKeyDown: handleKeyDown,
@@ -583,12 +487,12 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
583
487
  disabled,
584
488
  rows: 1
585
489
  }
586
- ), /* @__PURE__ */ React4.createElement(
490
+ ), /* @__PURE__ */ React3.createElement(
587
491
  "button",
588
492
  {
589
493
  style: {
590
- ...styles3.button,
591
- ...disabled || !text.trim() ? styles3.buttonDisabled : {}
494
+ ...styles2.button,
495
+ ...disabled || !text.trim() ? styles2.buttonDisabled : {}
592
496
  },
593
497
  onClick: handleSend,
594
498
  disabled: disabled || !text.trim(),
@@ -597,7 +501,7 @@ function MessageInput({ onSend, disabled, isProcessing, placeholder }) {
597
501
  isProcessing ? "..." : "Send"
598
502
  ));
599
503
  }
600
- var styles3 = {
504
+ var styles2 = {
601
505
  container: {
602
506
  display: "flex",
603
507
  alignItems: "flex-end",
@@ -637,7 +541,7 @@ var styles3 = {
637
541
  };
638
542
 
639
543
  // src/components/TokenInput.jsx
640
- import React5, { useState as useState2 } from "react";
544
+ import React4, { useState as useState2 } from "react";
641
545
  function TokenInput({ onSubmit, defaultPort = 3001 }) {
642
546
  const [token, setToken] = useState2("");
643
547
  const [port, setPort] = useState2(String(defaultPort));
@@ -649,42 +553,42 @@ function TokenInput({ onSubmit, defaultPort = 3001 }) {
649
553
  onSubmit(trimmed, portNum);
650
554
  }
651
555
  };
652
- 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(
556
+ return /* @__PURE__ */ React4.createElement("div", { style: styles3.container }, /* @__PURE__ */ React4.createElement("div", { style: styles3.title }, "Connect to Claude Daemon"), /* @__PURE__ */ React4.createElement("p", { style: styles3.description }, "Enter the auth token from the daemon's startup output, or set the ", /* @__PURE__ */ React4.createElement("code", { style: styles3.code }, "CLAUDE_DAEMON_TOKEN"), " environment variable."), /* @__PURE__ */ React4.createElement("form", { onSubmit: handleSubmit, style: styles3.form }, /* @__PURE__ */ React4.createElement("div", { style: styles3.inputRow }, /* @__PURE__ */ React4.createElement(
653
557
  "input",
654
558
  {
655
559
  type: "text",
656
560
  value: token,
657
561
  onChange: (e) => setToken(e.target.value),
658
562
  placeholder: "Paste daemon auth token...",
659
- style: styles4.input,
563
+ style: styles3.input,
660
564
  autoFocus: true
661
565
  }
662
- ), /* @__PURE__ */ React5.createElement(
566
+ ), /* @__PURE__ */ React4.createElement(
663
567
  "input",
664
568
  {
665
569
  type: "number",
666
570
  value: port,
667
571
  onChange: (e) => setPort(e.target.value),
668
572
  placeholder: "Port",
669
- style: styles4.portInput,
573
+ style: styles3.portInput,
670
574
  min: "1",
671
575
  max: "65535",
672
576
  "aria-label": "Port"
673
577
  }
674
- )), /* @__PURE__ */ React5.createElement(
578
+ )), /* @__PURE__ */ React4.createElement(
675
579
  "button",
676
580
  {
677
581
  type: "submit",
678
582
  disabled: !token.trim(),
679
583
  style: {
680
- ...styles4.button,
681
- ...!token.trim() ? styles4.buttonDisabled : {}
584
+ ...styles3.button,
585
+ ...!token.trim() ? styles3.buttonDisabled : {}
682
586
  }
683
587
  },
684
588
  "Connect"
685
589
  )));
686
590
  }
687
- var styles4 = {
591
+ var styles3 = {
688
592
  container: {
689
593
  display: "flex",
690
594
  flexDirection: "column",
@@ -761,63 +665,6 @@ var styles4 = {
761
665
  }
762
666
  };
763
667
 
764
- // src/components/GitContextBar.jsx
765
- import React6 from "react";
766
- function GitContextBar({ branch, pr, loading }) {
767
- if (loading || !branch) return null;
768
- 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(
769
- "a",
770
- {
771
- href: pr.url,
772
- target: "_blank",
773
- rel: "noopener noreferrer",
774
- style: styles5.prLink,
775
- title: pr.title
776
- },
777
- "PR #",
778
- pr.number
779
- )));
780
- }
781
- var styles5 = {
782
- container: {
783
- display: "flex",
784
- alignItems: "center",
785
- justifyContent: "space-between",
786
- padding: "3px 12px",
787
- borderBottom: "1px solid rgba(0,0,0,0.1)",
788
- backgroundColor: "#f5f5f5",
789
- fontSize: "11px",
790
- fontFamily: "inherit"
791
- },
792
- left: {
793
- display: "flex",
794
- alignItems: "center",
795
- gap: "4px"
796
- },
797
- branchIcon: {
798
- fontSize: "12px",
799
- color: "#888"
800
- },
801
- branchName: {
802
- fontFamily: "monospace",
803
- fontSize: "11px",
804
- color: "#555",
805
- backgroundColor: "#eee",
806
- padding: "1px 5px",
807
- borderRadius: "3px"
808
- },
809
- right: {
810
- display: "flex",
811
- alignItems: "center"
812
- },
813
- prLink: {
814
- color: "#0366d6",
815
- textDecoration: "none",
816
- fontFamily: "monospace",
817
- fontSize: "11px"
818
- }
819
- };
820
-
821
668
  // src/useClaudeSession.js
822
669
  import { useState as useState3, useEffect as useEffect2, useRef as useRef3, useCallback } from "react";
823
670
 
@@ -1341,12 +1188,10 @@ function storyFileToComponentFile(storyPath) {
1341
1188
  function ClaudePanel({ active }) {
1342
1189
  const [addonState, setAddonState] = useAddonState(ADDON_ID, {
1343
1190
  token: getInitialToken(),
1344
- port: getInitialPort(),
1345
- contextEnabled: true
1191
+ port: getInitialPort()
1346
1192
  });
1347
1193
  const token = (addonState == null ? void 0 : addonState.token) || null;
1348
1194
  const port = (addonState == null ? void 0 : addonState.port) || DEFAULT_PORT;
1349
- const contextEnabled = (addonState == null ? void 0 : addonState.contextEnabled) ?? true;
1350
1195
  const storyContext = useStoryContext();
1351
1196
  const {
1352
1197
  connectionState,
@@ -1356,7 +1201,6 @@ function ClaudePanel({ active }) {
1356
1201
  authFailed,
1357
1202
  sendMessage,
1358
1203
  startSession,
1359
- disconnect,
1360
1204
  newChat,
1361
1205
  isConnected,
1362
1206
  client
@@ -1372,36 +1216,47 @@ function ClaudePanel({ active }) {
1372
1216
  },
1373
1217
  [addonState, setAddonState]
1374
1218
  );
1375
- const handleDisconnect = useCallback3(() => {
1376
- disconnect();
1377
- setAddonState({ ...addonState, token: null });
1378
- }, [addonState, setAddonState, disconnect]);
1379
1219
  const handleSend = useCallback3(
1380
1220
  (text) => {
1381
1221
  if (!sessionId) {
1382
1222
  startSession();
1383
1223
  }
1384
- const prefix = contextEnabled ? buildContextPrefix(storyContext) : null;
1224
+ const prefix = buildContextPrefix(storyContext);
1385
1225
  sendMessage(text, prefix);
1386
1226
  },
1387
- [sessionId, startSession, sendMessage, contextEnabled, storyContext]
1227
+ [sessionId, startSession, sendMessage, storyContext]
1388
1228
  );
1389
- const toggleContext = useCallback3(() => {
1390
- setAddonState({ ...addonState, contextEnabled: !contextEnabled });
1391
- }, [addonState, contextEnabled, setAddonState]);
1392
1229
  if (!active) return null;
1393
1230
  if (authFailed && !token) {
1394
- return /* @__PURE__ */ React7.createElement("div", { style: styles6.panel }, /* @__PURE__ */ React7.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
1231
+ return /* @__PURE__ */ React5.createElement("div", { style: styles4.panel }, /* @__PURE__ */ React5.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
1395
1232
  }
1396
- 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(
1397
- "input",
1233
+ const statusColor = connectionState === CONNECTION_STATES.CONNECTED ? "#4caf50" : connectionState === CONNECTION_STATES.DISCONNECTED ? "#f44336" : "#ff9800";
1234
+ const statusLabel = connectionState === CONNECTION_STATES.CONNECTED ? "Connected" : connectionState === CONNECTION_STATES.CONNECTING ? "Connecting..." : connectionState === CONNECTION_STATES.RECONNECTING ? "Reconnecting..." : "Disconnected";
1235
+ return /* @__PURE__ */ React5.createElement("div", { style: styles4.panel }, /* @__PURE__ */ React5.createElement("div", { style: styles4.headerBar }, /* @__PURE__ */ React5.createElement("div", { style: styles4.headerLeft }, /* @__PURE__ */ React5.createElement("span", { style: { ...styles4.statusDot, backgroundColor: statusColor }, title: statusLabel }), /* @__PURE__ */ React5.createElement("span", { style: styles4.statusLabel }, statusLabel)), /* @__PURE__ */ React5.createElement("div", { style: styles4.headerRight }, gitContext.branch && /* @__PURE__ */ React5.createElement("div", { style: styles4.gitContext }, /* @__PURE__ */ React5.createElement("div", { style: styles4.branchName }, /* @__PURE__ */ React5.createElement("span", { style: styles4.branchIcon, title: "Git branch" }, "\u2387"), gitContext.branch), gitContext.pr && /* @__PURE__ */ React5.createElement(
1236
+ "a",
1398
1237
  {
1399
- type: "checkbox",
1400
- checked: contextEnabled,
1401
- onChange: toggleContext,
1402
- style: styles6.contextCheckbox
1403
- }
1404
- ), "Context: ", /* @__PURE__ */ React7.createElement("code", { style: styles6.contextPath }, storyContext.componentPath))), /* @__PURE__ */ React7.createElement(MessageList, { messages }), /* @__PURE__ */ React7.createElement(
1238
+ href: gitContext.pr.url,
1239
+ target: "_blank",
1240
+ rel: "noopener noreferrer",
1241
+ style: styles4.prLink,
1242
+ title: gitContext.pr.title
1243
+ },
1244
+ "PR #",
1245
+ gitContext.pr.number
1246
+ )), isConnected && /* @__PURE__ */ React5.createElement(
1247
+ "button",
1248
+ {
1249
+ onClick: newChat,
1250
+ disabled: isProcessing,
1251
+ style: {
1252
+ ...styles4.newChatButton,
1253
+ ...isProcessing ? styles4.newChatButtonDisabled : {}
1254
+ },
1255
+ title: "Clear chat and start fresh session",
1256
+ "aria-label": "New Chat"
1257
+ },
1258
+ "New Chat"
1259
+ ))), /* @__PURE__ */ React5.createElement(MessageList, { messages }), /* @__PURE__ */ React5.createElement(
1405
1260
  MessageInput,
1406
1261
  {
1407
1262
  onSend: handleSend,
@@ -1430,63 +1285,110 @@ function getInitialToken() {
1430
1285
  return null;
1431
1286
  }
1432
1287
  }
1433
- var styles6 = {
1288
+ var styles4 = {
1434
1289
  panel: {
1435
1290
  display: "flex",
1436
1291
  flexDirection: "column",
1437
1292
  height: "100%",
1438
1293
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
1439
1294
  },
1440
- contextBar: {
1441
- padding: "4px 12px",
1295
+ headerBar: {
1296
+ display: "flex",
1297
+ alignItems: "center",
1298
+ justifyContent: "space-between",
1299
+ padding: "6px 12px",
1442
1300
  borderBottom: "1px solid rgba(0,0,0,0.1)",
1443
- backgroundColor: "#fafafa",
1444
- fontSize: "12px"
1301
+ backgroundColor: "#f5f5f5",
1302
+ fontSize: "12px",
1303
+ fontFamily: "inherit"
1445
1304
  },
1446
- contextLabel: {
1305
+ headerLeft: {
1447
1306
  display: "flex",
1448
1307
  alignItems: "center",
1449
- gap: "4px",
1450
- color: "#666",
1451
- cursor: "pointer"
1308
+ gap: "6px"
1309
+ },
1310
+ statusDot: {
1311
+ width: "8px",
1312
+ height: "8px",
1313
+ borderRadius: "50%",
1314
+ display: "inline-block",
1315
+ flexShrink: 0
1452
1316
  },
1453
- contextCheckbox: {
1454
- margin: 0
1317
+ statusLabel: {
1318
+ fontSize: "12px",
1319
+ color: "#666"
1320
+ },
1321
+ headerRight: {
1322
+ display: "flex",
1323
+ alignItems: "center",
1324
+ gap: "12px"
1455
1325
  },
1456
- contextPath: {
1326
+ gitContext: {
1327
+ display: "flex",
1328
+ flexDirection: "column",
1329
+ alignItems: "flex-end",
1330
+ gap: "1px"
1331
+ },
1332
+ branchName: {
1457
1333
  fontFamily: "monospace",
1458
1334
  fontSize: "11px",
1459
- backgroundColor: "#eee",
1460
- padding: "1px 4px",
1461
- borderRadius: "3px"
1335
+ color: "#555",
1336
+ display: "flex",
1337
+ alignItems: "center",
1338
+ gap: "3px"
1339
+ },
1340
+ branchIcon: {
1341
+ fontSize: "12px",
1342
+ color: "#888"
1343
+ },
1344
+ prLink: {
1345
+ color: "#0366d6",
1346
+ textDecoration: "none",
1347
+ fontFamily: "monospace",
1348
+ fontSize: "11px"
1349
+ },
1350
+ newChatButton: {
1351
+ padding: "2px 8px",
1352
+ border: "1px solid #ccc",
1353
+ borderRadius: "4px",
1354
+ backgroundColor: "transparent",
1355
+ color: "#666",
1356
+ fontSize: "11px",
1357
+ cursor: "pointer",
1358
+ lineHeight: "1.4",
1359
+ whiteSpace: "nowrap"
1360
+ },
1361
+ newChatButtonDisabled: {
1362
+ opacity: 0.4,
1363
+ cursor: "default"
1462
1364
  }
1463
1365
  };
1464
1366
 
1465
1367
  // src/GlobalPanel.jsx
1466
- import React9, { useCallback as useCallback4, useMemo as useMemo2 } from "react";
1368
+ import React7, { useCallback as useCallback4, useMemo as useMemo2 } from "react";
1467
1369
  import { useAddonState as useAddonState2 } from "storybook/manager-api";
1468
1370
 
1469
1371
  // src/components/SkillsBar.jsx
1470
- import React8 from "react";
1372
+ import React6 from "react";
1471
1373
  function SkillsBar({ skills, onTrigger, disabled }) {
1472
1374
  if (!skills || skills.length === 0) return null;
1473
- return /* @__PURE__ */ React8.createElement("div", { style: styles7.bar }, skills.map((skill) => /* @__PURE__ */ React8.createElement(
1375
+ return /* @__PURE__ */ React6.createElement("div", { style: styles5.bar }, skills.map((skill) => /* @__PURE__ */ React6.createElement(
1474
1376
  "button",
1475
1377
  {
1476
1378
  key: skill.id,
1477
1379
  style: {
1478
- ...styles7.button,
1479
- ...disabled ? styles7.buttonDisabled : {}
1380
+ ...styles5.button,
1381
+ ...disabled ? styles5.buttonDisabled : {}
1480
1382
  },
1481
1383
  onClick: () => onTrigger(skill),
1482
1384
  disabled,
1483
1385
  title: skill.prompt
1484
1386
  },
1485
- /* @__PURE__ */ React8.createElement("span", { style: styles7.icon }, skill.icon),
1486
- /* @__PURE__ */ React8.createElement("span", null, skill.label)
1387
+ /* @__PURE__ */ React6.createElement("span", { style: styles5.icon }, skill.icon),
1388
+ /* @__PURE__ */ React6.createElement("span", null, skill.label)
1487
1389
  )));
1488
1390
  }
1489
- var styles7 = {
1391
+ var styles5 = {
1490
1392
  bar: {
1491
1393
  display: "flex",
1492
1394
  gap: "6px",
@@ -1630,29 +1532,29 @@ function GlobalPanel() {
1630
1532
  [handleSend, setMessages]
1631
1533
  );
1632
1534
  if (authFailed && !token) {
1633
- return /* @__PURE__ */ React9.createElement("div", { style: styles8.page }, /* @__PURE__ */ React9.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
1535
+ return /* @__PURE__ */ React7.createElement("div", { style: styles6.page }, /* @__PURE__ */ React7.createElement(TokenInput, { onSubmit: handleTokenSubmit }));
1634
1536
  }
1635
1537
  const statusColor = connectionState === CONNECTION_STATES.CONNECTED ? "#4caf50" : connectionState === CONNECTION_STATES.DISCONNECTED ? "#f44336" : "#ff9800";
1636
1538
  const statusLabel = connectionState === CONNECTION_STATES.CONNECTED ? "Connected" : connectionState === CONNECTION_STATES.CONNECTING ? "Connecting..." : connectionState === CONNECTION_STATES.RECONNECTING ? "Reconnecting..." : "Disconnected";
1637
- 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(
1539
+ return /* @__PURE__ */ React7.createElement("div", { style: styles6.page }, /* @__PURE__ */ React7.createElement("div", { style: styles6.titleBar }, /* @__PURE__ */ React7.createElement("div", { style: styles6.titleLeft }, /* @__PURE__ */ React7.createElement("div", { style: styles6.title }, "Claude \u2014 Global Chat"), /* @__PURE__ */ React7.createElement("span", { style: { ...styles6.statusDot, backgroundColor: statusColor }, title: statusLabel }), /* @__PURE__ */ React7.createElement("span", { style: styles6.statusLabel }, statusLabel), /* @__PURE__ */ React7.createElement(
1638
1540
  "span",
1639
1541
  {
1640
- style: styles8.infoIcon,
1542
+ style: styles6.infoIcon,
1641
1543
  title: "Chat with Claude about your entire project. Not scoped to any specific component."
1642
1544
  },
1643
- /* @__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" }))
1644
- )), /* @__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(
1545
+ /* @__PURE__ */ React7.createElement("svg", { viewBox: "0 0 16 16", width: "14", height: "14", fill: "currentColor" }, /* @__PURE__ */ React7.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" }))
1546
+ )), /* @__PURE__ */ React7.createElement("button", { style: styles6.backButton, onClick: handleBack, title: "Back to components" }, /* @__PURE__ */ React7.createElement("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React7.createElement("path", { d: "M19 12H5" }), /* @__PURE__ */ React7.createElement("path", { d: "M12 19l-7-7 7-7" })), /* @__PURE__ */ React7.createElement("span", { style: { marginLeft: "4px" } }, "Back"))), /* @__PURE__ */ React7.createElement("div", { style: styles6.toolsBar }, /* @__PURE__ */ React7.createElement(SkillsBar, { skills, onTrigger: handleSkillTrigger, disabled: !isConnected }), gitContext.branch && /* @__PURE__ */ React7.createElement("div", { style: styles6.gitContext }, /* @__PURE__ */ React7.createElement("div", { style: styles6.branchName }, /* @__PURE__ */ React7.createElement("span", { style: styles6.branchIcon, title: "Git branch" }, "\u2387"), gitContext.branch), gitContext.pr && /* @__PURE__ */ React7.createElement(
1645
1547
  "a",
1646
1548
  {
1647
1549
  href: gitContext.pr.url,
1648
1550
  target: "_blank",
1649
1551
  rel: "noopener noreferrer",
1650
- style: styles8.prLink,
1552
+ style: styles6.prLink,
1651
1553
  title: gitContext.pr.title
1652
1554
  },
1653
1555
  "PR #",
1654
1556
  gitContext.pr.number
1655
- ))), /* @__PURE__ */ React9.createElement("div", { style: styles8.chatArea }, /* @__PURE__ */ React9.createElement(MessageList, { messages }), /* @__PURE__ */ React9.createElement(
1557
+ ))), /* @__PURE__ */ React7.createElement("div", { style: styles6.chatArea }, /* @__PURE__ */ React7.createElement(MessageList, { messages }), /* @__PURE__ */ React7.createElement(
1656
1558
  MessageInput,
1657
1559
  {
1658
1560
  onSend: handleSend,
@@ -1682,7 +1584,7 @@ function getInitialToken2() {
1682
1584
  return null;
1683
1585
  }
1684
1586
  }
1685
- var styles8 = {
1587
+ var styles6 = {
1686
1588
  page: {
1687
1589
  display: "flex",
1688
1590
  flexDirection: "column",
@@ -1781,7 +1683,7 @@ var styles8 = {
1781
1683
  };
1782
1684
 
1783
1685
  // src/components/GlobalChatButton.jsx
1784
- import React10, { useCallback as useCallback5 } from "react";
1686
+ import React8, { useCallback as useCallback5 } from "react";
1785
1687
  import { useStorybookApi } from "storybook/manager-api";
1786
1688
  import { Button } from "storybook/internal/components";
1787
1689
  function GlobalChatButton() {
@@ -1789,7 +1691,7 @@ function GlobalChatButton() {
1789
1691
  const handleClick = useCallback5(() => {
1790
1692
  api.navigateUrl("/?path=/claude", { replace: false });
1791
1693
  }, [api]);
1792
- return /* @__PURE__ */ React10.createElement(Button, { variant: "ghost", padding: "small", "aria-label": "Open Claude Global Chat", onClick: handleClick }, /* @__PURE__ */ React10.createElement(
1694
+ return /* @__PURE__ */ React8.createElement(Button, { variant: "ghost", padding: "small", "aria-label": "Open Claude Global Chat", onClick: handleClick }, /* @__PURE__ */ React8.createElement(
1793
1695
  "svg",
1794
1696
  {
1795
1697
  viewBox: "0 0 24 24",
@@ -1801,11 +1703,16 @@ function GlobalChatButton() {
1801
1703
  strokeLinecap: "round",
1802
1704
  strokeLinejoin: "round"
1803
1705
  },
1804
- /* @__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" })
1706
+ /* @__PURE__ */ React8.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" })
1805
1707
  ));
1806
1708
  }
1807
1709
 
1808
1710
  // src/manager.js
1711
+ function ClaudePageRoute() {
1712
+ const { path } = useStorybookState2();
1713
+ if (path !== "/claude") return null;
1714
+ return /* @__PURE__ */ React9.createElement(GlobalPanel, null);
1715
+ }
1809
1716
  addons.register(ADDON_ID, (api) => {
1810
1717
  addons.add(PANEL_ID, {
1811
1718
  type: types.PANEL,
@@ -1817,7 +1724,7 @@ addons.register(ADDON_ID, (api) => {
1817
1724
  type: types.experimental_PAGE,
1818
1725
  title: "Claude Global",
1819
1726
  url: "/claude",
1820
- render: GlobalPanel
1727
+ render: ClaudePageRoute
1821
1728
  });
1822
1729
  addons.add(TOOL_ID, {
1823
1730
  type: types.TOOLEXTRA,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radnine/storybook-addon-claude",
3
- "version": "0.5.0",
3
+ "version": "0.5.2",
4
4
  "description": "Storybook addon panel for chatting with Claude via the standalone daemon",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {