@siteboon/claude-code-ui 1.17.1 → 1.18.0

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 (13) hide show
  1. package/README.ko.md +369 -0
  2. package/README.md +1 -1
  3. package/README.zh-CN.md +1 -1
  4. package/dist/assets/index-BiDFBFLP.css +32 -0
  5. package/dist/assets/index-CF54Qj8d.js +1405 -0
  6. package/dist/assets/{vendor-codemirror-BXil-2fV.js → vendor-codemirror-l-lAmaJ1.js} +21 -19
  7. package/dist/index.html +3 -3
  8. package/package.json +3 -2
  9. package/server/claude-sdk.js +48 -60
  10. package/server/database/auth.db +0 -0
  11. package/server/index.js +0 -3
  12. package/dist/assets/index-1FHLTpt_.js +0 -1239
  13. package/dist/assets/index-BZ3x0u4p.css +0 -32
package/dist/index.html CHANGED
@@ -25,11 +25,11 @@
25
25
 
26
26
  <!-- Prevent zoom on iOS -->
27
27
  <meta name="format-detection" content="telephone=no" />
28
- <script type="module" crossorigin src="/assets/index-1FHLTpt_.js"></script>
28
+ <script type="module" crossorigin src="/assets/index-CF54Qj8d.js"></script>
29
29
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-DIN4KjD2.js">
30
- <link rel="modulepreload" crossorigin href="/assets/vendor-codemirror-BXil-2fV.js">
30
+ <link rel="modulepreload" crossorigin href="/assets/vendor-codemirror-l-lAmaJ1.js">
31
31
  <link rel="modulepreload" crossorigin href="/assets/vendor-xterm-DfaPXD3y.js">
32
- <link rel="stylesheet" crossorigin href="/assets/index-BZ3x0u4p.css">
32
+ <link rel="stylesheet" crossorigin href="/assets/index-BiDFBFLP.css">
33
33
  </head>
34
34
  <body>
35
35
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siteboon/claude-code-ui",
3
- "version": "1.17.1",
3
+ "version": "1.18.0",
4
4
  "description": "A web-based UI for Claude Code CLI",
5
5
  "type": "module",
6
6
  "main": "server/index.js",
@@ -42,7 +42,7 @@
42
42
  "author": "Claude Code UI Contributors",
43
43
  "license": "GPL-3.0",
44
44
  "dependencies": {
45
- "@anthropic-ai/claude-agent-sdk": "^0.1.29",
45
+ "@anthropic-ai/claude-agent-sdk": "^0.1.71",
46
46
  "@codemirror/lang-css": "^6.3.1",
47
47
  "@codemirror/lang-html": "^6.4.9",
48
48
  "@codemirror/lang-javascript": "^6.2.4",
@@ -89,6 +89,7 @@
89
89
  "react-router-dom": "^6.8.1",
90
90
  "react-syntax-highlighter": "^15.6.1",
91
91
  "rehype-katex": "^7.0.1",
92
+ "rehype-raw": "^7.0.0",
92
93
  "remark-gfm": "^4.0.0",
93
94
  "remark-math": "^6.0.0",
94
95
  "sqlite": "^5.1.1",
package/server/claude-sdk.js CHANGED
@@ -13,41 +13,26 @@
13
13
  */
14
14
 
15
15
  import { query } from '@anthropic-ai/claude-agent-sdk';
16
- // Used to mint unique approval request IDs when randomUUID is not available.
17
- // This keeps parallel tool approvals from colliding; it does not add any crypto/security guarantees.
18
16
  import crypto from 'crypto';
19
17
  import { promises as fs } from 'fs';
20
18
  import path from 'path';
21
19
  import os from 'os';
22
20
  import { CLAUDE_MODELS } from '../shared/modelConstants.js';
23
21
 
24
- // Session tracking: Map of session IDs to active query instances
25
22
  const activeSessions = new Map();
26
- // In-memory registry of pending tool approvals keyed by requestId.
27
- // This does not persist approvals or share across processes; it exists so the
28
- // SDK can pause tool execution while the UI decides what to do.
29
23
  const pendingToolApprovals = new Map();
30
24
 
31
- // Default approval timeout kept under the SDK's 60s control timeout.
32
- // This does not change SDK limits; it only defines how long we wait for the UI,
33
- // introduced to avoid hanging the run when no decision arrives.
34
25
  const TOOL_APPROVAL_TIMEOUT_MS = parseInt(process.env.CLAUDE_TOOL_APPROVAL_TIMEOUT_MS, 10) || 55000;
35
26
 
36
- // Generate a stable request ID for UI approval flows.
37
- // This does not encode tool details or get shown to users; it exists so the UI
38
- // can respond to the correct pending request without collisions.
27
+ const TOOLS_REQUIRING_INTERACTION = new Set(['AskUserQuestion']);
28
+
39
29
  function createRequestId() {
40
- // if clause is used because randomUUID is not available in older Node.js versions
41
30
  if (typeof crypto.randomUUID === 'function') {
42
31
  return crypto.randomUUID();
43
32
  }
44
33
  return crypto.randomBytes(16).toString('hex');
45
34
  }
46
35
 
47
- // Wait for a UI approval decision, honoring SDK cancellation.
48
- // This does not auto-approve or auto-deny; it only resolves with UI input,
49
- // and it cleans up the pending map to avoid leaks, introduced to prevent
50
- // replying after the SDK cancels the control request.
51
36
  function waitForToolApproval(requestId, options = {}) {
52
37
  const { timeoutMs = TOOL_APPROVAL_TIMEOUT_MS, signal, onCancel } = options;
53
38
 
@@ -61,24 +46,25 @@ function waitForToolApproval(requestId, options = {}) {
61
46
  resolve(decision);
62
47
  };
63
48
 
49
+ let timeout;
50
+
64
51
  const cleanup = () => {
65
52
  pendingToolApprovals.delete(requestId);
66
- clearTimeout(timeout);
53
+ if (timeout) clearTimeout(timeout);
67
54
  if (signal && abortHandler) {
68
55
  signal.removeEventListener('abort', abortHandler);
69
56
  }
70
57
  };
71
58
 
72
- // Timeout is local to this process; it does not override SDK timing.
73
- // It exists to prevent the UI prompt from lingering indefinitely.
74
- const timeout = setTimeout(() => {
75
- onCancel?.('timeout');
76
- finalize(null);
77
- }, timeoutMs);
59
+ // timeoutMs 0 = wait indefinitely (interactive tools)
60
+ if (timeoutMs > 0) {
61
+ timeout = setTimeout(() => {
62
+ onCancel?.('timeout');
63
+ finalize(null);
64
+ }, timeoutMs);
65
+ }
78
66
 
79
67
  const abortHandler = () => {
80
- // If the SDK cancels the control request, stop waiting to avoid
81
- // replying after the process is no longer ready for writes.
82
68
  onCancel?.('cancelled');
83
69
  finalize({ cancelled: true });
84
70
  };
@@ -98,9 +84,6 @@ function waitForToolApproval(requestId, options = {}) {
98
84
  });
99
85
  }
100
86
 
101
- // Resolve a pending approval. This does not validate the decision payload;
102
- // validation and tool matching remain in canUseTool, which keeps this as a
103
- // lightweight WebSocket -> SDK relay.
104
87
  function resolveToolApproval(requestId, decision) {
105
88
  const resolver = pendingToolApprovals.get(requestId);
106
89
  if (resolver) {
@@ -175,9 +158,6 @@ function mapCliOptionsToSDK(options = {}) {
175
158
  sdkOptions.permissionMode = 'bypassPermissions';
176
159
  }
177
160
 
178
- // Map allowed tools (always set to avoid implicit "allow all" defaults).
179
- // This does not grant permissions by itself; it just configures the SDK,
180
- // introduced because leaving it undefined made the SDK treat it as "all tools allowed."
181
161
  let allowedTools = [...(settings.allowedTools || [])];
182
162
 
183
163
  // Add plan mode default tools
@@ -192,8 +172,11 @@ function mapCliOptionsToSDK(options = {}) {
192
172
 
193
173
  sdkOptions.allowedTools = allowedTools;
194
174
 
195
- // Map disallowed tools (always set so the SDK doesn't treat "undefined" as permissive).
196
- // This does not override allowlists; it only feeds the canUseTool gate.
175
+ // Use the tools preset to make all default built-in tools available (including AskUserQuestion).
176
+ // This was introduced in SDK 0.1.57. Omitting this preserves existing behavior (all tools available),
177
+ // but being explicit ensures forward compatibility and clarity.
178
+ sdkOptions.tools = { type: 'preset', preset: 'claude_code' };
179
+
197
180
  sdkOptions.disallowedTools = settings.disallowedTools || [];
198
181
 
199
182
  // Map model (default to sonnet)
@@ -267,9 +250,7 @@ function getAllSessions() {
267
250
  * @returns {Object} Transformed message ready for WebSocket
268
251
  */
269
252
  function transformMessage(sdkMessage) {
270
- // SDK messages are already in a format compatible with the frontend
271
- // The CLI sends them wrapped in {type: 'claude-response', data: message}
272
- // We'll do the same here to maintain compatibility
253
+ // Pass-through; SDK messages match frontend format.
273
254
  return sdkMessage;
274
255
  }
275
256
 
@@ -490,27 +471,27 @@ async function queryClaudeSDK(command, options = {}, ws) {
490
471
  tempImagePaths = imageResult.tempImagePaths;
491
472
  tempDir = imageResult.tempDir;
492
473
 
493
- // Gate tool usage with explicit UI approval when not auto-approved.
494
- // This does not render UI or persist permissions; it only bridges to the UI
495
- // via WebSocket and waits for the response, introduced so tool calls pause
496
- // instead of auto-running when the allowlist is empty.
497
474
  sdkOptions.canUseTool = async (toolName, input, context) => {
498
- if (sdkOptions.permissionMode === 'bypassPermissions') {
499
- return { behavior: 'allow', updatedInput: input };
500
- }
475
+ const requiresInteraction = TOOLS_REQUIRING_INTERACTION.has(toolName);
501
476
 
502
- const isDisallowed = (sdkOptions.disallowedTools || []).some(entry =>
503
- matchesToolPermission(entry, toolName, input)
504
- );
505
- if (isDisallowed) {
506
- return { behavior: 'deny', message: 'Tool disallowed by settings' };
507
- }
477
+ if (!requiresInteraction) {
478
+ if (sdkOptions.permissionMode === 'bypassPermissions') {
479
+ return { behavior: 'allow', updatedInput: input };
480
+ }
508
481
 
509
- const isAllowed = (sdkOptions.allowedTools || []).some(entry =>
510
- matchesToolPermission(entry, toolName, input)
511
- );
512
- if (isAllowed) {
513
- return { behavior: 'allow', updatedInput: input };
482
+ const isDisallowed = (sdkOptions.disallowedTools || []).some(entry =>
483
+ matchesToolPermission(entry, toolName, input)
484
+ );
485
+ if (isDisallowed) {
486
+ return { behavior: 'deny', message: 'Tool disallowed by settings' };
487
+ }
488
+
489
+ const isAllowed = (sdkOptions.allowedTools || []).some(entry =>
490
+ matchesToolPermission(entry, toolName, input)
491
+ );
492
+ if (isAllowed) {
493
+ return { behavior: 'allow', updatedInput: input };
494
+ }
514
495
  }
515
496
 
516
497
  const requestId = createRequestId();
@@ -522,9 +503,8 @@ async function queryClaudeSDK(command, options = {}, ws) {
522
503
  sessionId: capturedSessionId || sessionId || null
523
504
  });
524
505
 
525
- // Wait for the UI; if the SDK cancels, notify the UI so it can dismiss the banner.
526
- // This does not retry or resurface the prompt; it just reflects the cancellation.
527
506
  const decision = await waitForToolApproval(requestId, {
507
+ timeoutMs: requiresInteraction ? 0 : undefined,
528
508
  signal: context?.signal,
529
509
  onCancel: (reason) => {
530
510
  ws.send({
@@ -544,8 +524,6 @@ async function queryClaudeSDK(command, options = {}, ws) {
544
524
  }
545
525
 
546
526
  if (decision.allow) {
547
- // rememberEntry only updates this run's in-memory allowlist to prevent
548
- // repeated prompts in the same session; persistence is handled by the UI.
549
527
  if (decision.rememberEntry && typeof decision.rememberEntry === 'string') {
550
528
  if (!sdkOptions.allowedTools.includes(decision.rememberEntry)) {
551
529
  sdkOptions.allowedTools.push(decision.rememberEntry);
@@ -560,12 +538,22 @@ async function queryClaudeSDK(command, options = {}, ws) {
560
538
  return { behavior: 'deny', message: decision.message ?? 'User denied tool use' };
561
539
  };
562
540
 
563
- // Create SDK query instance
541
+ // Set stream-close timeout for interactive tools (Query constructor reads it synchronously). Claude Agent SDK has a default of 5s and this overrides it
542
+ const prevStreamTimeout = process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
543
+ process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = '300000';
544
+
564
545
  const queryInstance = query({
565
546
  prompt: finalCommand,
566
547
  options: sdkOptions
567
548
  });
568
549
 
550
+ // Restore immediately — Query constructor already captured the value
551
+ if (prevStreamTimeout !== undefined) {
552
+ process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT = prevStreamTimeout;
553
+ } else {
554
+ delete process.env.CLAUDE_CODE_STREAM_CLOSE_TIMEOUT;
555
+ }
556
+
569
557
  // Track the query instance for abort capability
570
558
  if (capturedSessionId) {
571
559
  addSession(capturedSessionId, queryInstance, tempImagePaths, tempDir);
package/server/database/auth.db ADDED
Binary file
package/server/index.js CHANGED
@@ -703,7 +703,6 @@ app.get('/api/projects/:projectName/file', authenticateToken, async (req, res) =
703
703
  const { projectName } = req.params;
704
704
  const { filePath } = req.query;
705
705
 
706
- console.log('[DEBUG] File read request:', projectName, filePath);
707
706
 
708
707
  // Security: ensure the requested path is inside the project root
709
708
  if (!filePath) {
@@ -744,7 +743,6 @@ app.get('/api/projects/:projectName/files/content', authenticateToken, async (re
744
743
  const { projectName } = req.params;
745
744
  const { path: filePath } = req.query;
746
745
 
747
- console.log('[DEBUG] Binary file serve request:', projectName, filePath);
748
746
 
749
747
  // Security: ensure the requested path is inside the project root
750
748
  if (!filePath) {
@@ -798,7 +796,6 @@ app.put('/api/projects/:projectName/file', authenticateToken, async (req, res) =
798
796
  const { projectName } = req.params;
799
797
  const { filePath, content } = req.body;
800
798
 
801
- console.log('[DEBUG] File save request:', projectName, filePath);
802
799
 
803
800
  // Security: ensure the requested path is inside the project root
804
801
  if (!filePath) {