agentgui 1.0.119 → 1.0.121

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 (6) hide show
  1. package/lib/claude-runner.js +1 -2
  2. package/package.json +1 -1
  3. package/server.js +4 -6
  4. package/static/index.html +32 -86
  5. package/static/js/client.js +5 -5
  6. package/static/js/streaming-renderer.js +145 -5
package/lib/claude-runner.js CHANGED
@@ -3,7 +3,6 @@ import { spawn } from 'child_process';
3
3
  export async function runClaudeWithStreaming(prompt, cwd, agentId = 'claude-code', config = {}) {
4
4
  return new Promise((resolve, reject) => {
5
5
  const {
6
- skipPermissions = false,
7
6
  verbose = true,
8
7
  outputFormat = 'stream-json',
9
8
  timeout = 300000,
@@ -17,7 +16,7 @@ export async function runClaudeWithStreaming(prompt, cwd, agentId = 'claude-code
17
16
  if (print) flags.push('--print');
18
17
  if (verbose) flags.push('--verbose');
19
18
  flags.push(`--output-format=${outputFormat}`);
20
- if (skipPermissions) flags.push('--dangerously-skip-permissions');
19
+ flags.push('--dangerously-skip-permissions');
21
20
  if (resumeSessionId) flags.push('--resume', resumeSessionId);
22
21
  if (systemPrompt) flags.push('--append-system-prompt', systemPrompt);
23
22
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agentgui",
3
- "version": "1.0.119",
3
+ "version": "1.0.121",
4
4
  "description": "Multi-agent ACP client with real-time communication",
5
5
  "type": "module",
6
6
  "main": "server.js",
package/server.js CHANGED
@@ -243,7 +243,6 @@ const server = http.createServer(async (req, res) => {
243
243
 
244
244
  const prompt = body.content || '';
245
245
  const agentId = body.agentId || 'claude-code';
246
- const skipPermissions = body.skipPermissions || false;
247
246
 
248
247
  const userMessage = queries.createMessage(conversationId, 'user', prompt);
249
248
  queries.createEvent('message.created', { role: 'user', messageId: userMessage.id }, conversationId);
@@ -253,7 +252,7 @@ const server = http.createServer(async (req, res) => {
253
252
  if (activeExecutions.has(conversationId)) {
254
253
  debugLog(`[stream] Conversation ${conversationId} is busy, queuing message`);
255
254
  if (!messageQueues.has(conversationId)) messageQueues.set(conversationId, []);
256
- messageQueues.get(conversationId).push({ content: prompt, agentId, skipPermissions, messageId: userMessage.id });
255
+ messageQueues.get(conversationId).push({ content: prompt, agentId, messageId: userMessage.id });
257
256
 
258
257
  const queueLength = messageQueues.get(conversationId).length;
259
258
  broadcastSync({ type: 'queue_status', conversationId, queueLength, messageId: userMessage.id, timestamp: Date.now() });
@@ -278,7 +277,7 @@ const server = http.createServer(async (req, res) => {
278
277
  timestamp: Date.now()
279
278
  });
280
279
 
281
- processMessageWithStreaming(conversationId, userMessage.id, session.id, prompt, agentId, skipPermissions)
280
+ processMessageWithStreaming(conversationId, userMessage.id, session.id, prompt, agentId)
282
281
  .catch(err => debugLog(`[stream] Uncaught error: ${err.message}`));
283
282
  return;
284
283
  }
@@ -533,7 +532,7 @@ function persistChunkWithRetry(sessionId, conversationId, sequence, blockType, b
533
532
  return null;
534
533
  }
535
534
 
536
- async function processMessageWithStreaming(conversationId, messageId, sessionId, content, agentId, skipPermissions = false) {
535
+ async function processMessageWithStreaming(conversationId, messageId, sessionId, content, agentId) {
537
536
  const startTime = Date.now();
538
537
  activeExecutions.set(conversationId, true);
539
538
  queries.setIsStreaming(conversationId, true);
@@ -644,7 +643,6 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
644
643
  };
645
644
 
646
645
  const config = {
647
- skipPermissions,
648
646
  verbose: true,
649
647
  outputFormat: 'stream-json',
650
648
  timeout: 1800000,
@@ -726,7 +724,7 @@ function drainMessageQueue(conversationId) {
726
724
  timestamp: Date.now()
727
725
  });
728
726
 
729
- processMessageWithStreaming(conversationId, next.messageId, session.id, next.content, next.agentId, next.skipPermissions)
727
+ processMessageWithStreaming(conversationId, next.messageId, session.id, next.content, next.agentId)
730
728
  .catch(err => debugLog(`[queue] Error processing queued message: ${err.message}`));
731
729
  }
732
730
 
package/static/index.html CHANGED
@@ -65,7 +65,6 @@
65
65
  display: flex;
66
66
  flex-direction: column;
67
67
  background-color: var(--color-bg-secondary);
68
- border-right: 1px solid var(--color-border);
69
68
  overflow: hidden;
70
69
  transition: width 0.25s ease, min-width 0.25s ease;
71
70
  }
@@ -78,7 +77,6 @@
78
77
 
79
78
  .sidebar-header {
80
79
  padding: 0.75rem 1rem;
81
- border-bottom: 1px solid var(--color-border);
82
80
  display: flex;
83
81
  justify-content: space-between;
84
82
  align-items: center;
@@ -235,7 +233,6 @@
235
233
  min-height: var(--header-height);
236
234
  flex-shrink: 0;
237
235
  background-color: var(--color-bg-secondary);
238
- border-bottom: 1px solid var(--color-border);
239
236
  }
240
237
 
241
238
  .sidebar-toggle-btn {
@@ -245,7 +242,7 @@
245
242
  width: 36px;
246
243
  height: 36px;
247
244
  background: none;
248
- border: 1px solid var(--color-border);
245
+ border: none;
249
246
  border-radius: 0.375rem;
250
247
  cursor: pointer;
251
248
  color: var(--color-text-secondary);
@@ -290,7 +287,6 @@
290
287
  font-size: 0.75rem;
291
288
  font-weight: 500;
292
289
  background-color: var(--color-bg-primary);
293
- border: 1px solid var(--color-border);
294
290
  }
295
291
 
296
292
  .status-indicator {
@@ -314,7 +310,7 @@
314
310
  width: 36px;
315
311
  height: 36px;
316
312
  background: none;
317
- border: 1px solid var(--color-border);
313
+ border: none;
318
314
  border-radius: 0.375rem;
319
315
  cursor: pointer;
320
316
  color: var(--color-text-secondary);
@@ -330,7 +326,6 @@
330
326
  .view-toggle-bar {
331
327
  display: flex;
332
328
  gap: 0;
333
- border-bottom: 1px solid var(--color-border);
334
329
  background: var(--color-bg-secondary);
335
330
  flex-shrink: 0;
336
331
  padding: 0 1rem;
@@ -382,7 +377,6 @@
382
377
  /* --- Conversation display --- */
383
378
  .conversation-header {
384
379
  padding: 0.75rem 0;
385
- border-bottom: 1px solid var(--color-border);
386
380
  margin-bottom: 1rem;
387
381
  }
388
382
 
@@ -409,7 +403,6 @@
409
403
 
410
404
  .message-assistant {
411
405
  background-color: var(--color-bg-secondary);
412
- border: 1px solid var(--color-border);
413
406
  margin-right: auto;
414
407
  border-bottom-left-radius: 0.25rem;
415
408
  }
@@ -484,7 +477,6 @@
484
477
  padding: 0.5rem 0.75rem;
485
478
  margin: 0.25rem 0;
486
479
  background: rgba(59,130,246,0.08);
487
- border: 1px solid rgba(59,130,246,0.2);
488
480
  border-radius: 0.375rem;
489
481
  font-size: 0.8rem;
490
482
  display: flex;
@@ -536,7 +528,6 @@
536
528
  html.dark .tool-use-name { color: #22d3ee; }
537
529
 
538
530
  .tool-input-details {
539
- border-top: 1px solid rgba(6,182,212,0.15);
540
531
  }
541
532
 
542
533
  .tool-input-summary {
@@ -576,7 +567,6 @@
576
567
  .tool-result-header {
577
568
  padding: 0.375rem 0.75rem;
578
569
  font-size: 0.7rem;
579
- border-bottom: 1px solid rgba(255,255,255,0.05);
580
570
  }
581
571
 
582
572
  .tool-result-ok-badge {
@@ -607,7 +597,6 @@
607
597
  }
608
598
 
609
599
  .streaming-block-tool-result.tool-result-error {
610
- border: 1px solid rgba(239,68,68,0.3);
611
600
  }
612
601
 
613
602
  .streaming-block-result {
@@ -615,7 +604,6 @@
615
604
  margin: 0.5rem 0;
616
605
  border-radius: 0.375rem;
617
606
  background: rgba(16,185,129,0.08);
618
- border: 1px solid rgba(16,185,129,0.2);
619
607
  font-size: 0.8rem;
620
608
  display: flex;
621
609
  align-items: center;
@@ -624,7 +612,6 @@
624
612
 
625
613
  .streaming-block-result.result-error {
626
614
  background: rgba(239,68,68,0.08);
627
- border-color: rgba(239,68,68,0.2);
628
615
  }
629
616
 
630
617
  .result-status {
@@ -646,7 +633,6 @@
646
633
  /* --- Input area: fixed at bottom --- */
647
634
  .input-section {
648
635
  flex-shrink: 0;
649
- border-top: 1px solid var(--color-border);
650
636
  background-color: var(--color-bg-primary);
651
637
  padding: 0.75rem 1rem;
652
638
  }
@@ -662,7 +648,7 @@
662
648
 
663
649
  .agent-selector {
664
650
  padding: 0.5rem;
665
- border: 1px solid var(--color-border);
651
+ border: none;
666
652
  border-radius: 0.375rem;
667
653
  background-color: var(--color-bg-secondary);
668
654
  color: var(--color-text-primary);
@@ -674,7 +660,7 @@
674
660
  .message-textarea {
675
661
  flex: 1;
676
662
  padding: 0.625rem 0.875rem;
677
- border: 1px solid var(--color-border);
663
+ border: none;
678
664
  border-radius: 0.75rem;
679
665
  background-color: var(--color-bg-secondary);
680
666
  color: var(--color-text-primary);
@@ -689,7 +675,6 @@
689
675
 
690
676
  .message-textarea:focus {
691
677
  outline: none;
692
- border-color: var(--color-primary);
693
678
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
694
679
  }
695
680
 
@@ -733,7 +718,6 @@
733
718
  .html-rendered-label {
734
719
  padding: 0.5rem;
735
720
  background: #eff6ff;
736
- border: 1px solid #bfdbfe;
737
721
  border-radius: 0.25rem;
738
722
  font-size: 0.75rem;
739
723
  font-weight: 600;
@@ -743,20 +727,19 @@
743
727
  margin-bottom: 0.5rem;
744
728
  }
745
729
 
746
- html.dark .html-rendered-label { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
730
+ html.dark .html-rendered-label { background: #1e3a5f; color: #93c5fd; }
747
731
 
748
732
  .html-content {
749
733
  background: #ffffff;
750
734
  padding: 1rem;
751
735
  border-radius: 0.375rem;
752
- border: 1px solid var(--color-border);
753
736
  overflow-x: auto;
754
737
  }
755
738
 
756
739
  html.dark .html-content { background: #1f2937; }
757
740
 
758
741
  .html-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
759
- .html-content th, .html-content td { border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
742
+ .html-content th, .html-content td { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
760
743
  .html-content th { background: var(--color-bg-secondary); font-weight: 600; }
761
744
  .html-content ul, .html-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
762
745
  .html-content li { margin: 0.25rem 0; }
@@ -772,31 +755,31 @@
772
755
  /* ===== Folder Browser Modal ===== */
773
756
  .folder-modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; align-items:center; justify-content:center; }
774
757
  .folder-modal-overlay.visible { display:flex; }
775
- .folder-modal { background:var(--color-bg-primary); border:1px solid var(--color-border); border-radius:0.5rem; width:500px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
776
- .folder-modal-header { padding:1rem; border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
758
+ .folder-modal { background:var(--color-bg-primary); border-radius:0.5rem; width:500px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
759
+ .folder-modal-header { padding:1rem; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
777
760
  .folder-modal-header h3 { margin:0; font-size:1rem; font-weight:600; }
778
761
  .folder-modal-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--color-text-secondary); padding:0.25rem; line-height:1; }
779
762
  .folder-modal-close:hover { color:var(--color-text-primary); }
780
- .folder-breadcrumb { padding:0.75rem 1rem; border-bottom:1px solid var(--color-border); font-size:0.8rem; font-family:'Monaco','Menlo',monospace; color:var(--color-text-secondary); background:var(--color-bg-secondary); display:flex; align-items:center; gap:0.25rem; flex-shrink:0; overflow-x:auto; white-space:nowrap; }
763
+ .folder-breadcrumb { padding:0.75rem 1rem; font-size:0.8rem; font-family:'Monaco','Menlo',monospace; color:var(--color-text-secondary); background:var(--color-bg-secondary); display:flex; align-items:center; gap:0.25rem; flex-shrink:0; overflow-x:auto; white-space:nowrap; }
781
764
  .folder-breadcrumb-segment { cursor:pointer; color:var(--color-primary); padding:0.125rem 0.25rem; border-radius:0.25rem; }
782
765
  .folder-breadcrumb-segment:hover { background:var(--color-bg-primary); text-decoration:underline; }
783
766
  .folder-breadcrumb-separator { color:var(--color-text-secondary); }
784
767
  .folder-list { flex:1; overflow-y:auto; min-height:200px; max-height:400px; list-style:none; margin:0; padding:0; }
785
- .folder-list-item { padding:0.5rem 1rem; cursor:pointer; display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; border-bottom:1px solid var(--color-border); transition:background-color 0.15s; }
768
+ .folder-list-item { padding:0.5rem 1rem; cursor:pointer; display:flex; align-items:center; gap:0.5rem; font-size:0.875rem; transition:background-color 0.15s; }
786
769
  .folder-list-item:hover { background:var(--color-bg-secondary); }
787
770
  .folder-list-item-icon { font-size:1rem; flex-shrink:0; width:1.25rem; text-align:center; }
788
771
  .folder-list-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
789
772
  .folder-list-empty { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
790
773
  .folder-list-loading { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
791
774
  .folder-list-error { padding:1rem; text-align:center; color:var(--color-error); font-size:0.875rem; }
792
- .folder-modal-footer { padding:0.75rem 1rem; border-top:1px solid var(--color-border); display:flex; justify-content:flex-end; gap:0.5rem; flex-shrink:0; }
775
+ .folder-modal-footer { padding:0.75rem 1rem; display:flex; justify-content:flex-end; gap:0.5rem; flex-shrink:0; }
793
776
  .folder-modal-footer .btn { padding:0.5rem 1rem; font-size:0.8rem; }
794
777
 
795
778
  .btn { padding:0.5rem 1rem; border:none; border-radius:0.375rem; font-weight:500; cursor:pointer; transition:all 0.15s; font-size:0.875rem; }
796
779
  .btn-primary { background-color:var(--color-primary); color:white; }
797
780
  .btn-primary:hover:not(:disabled) { background-color:var(--color-primary-dark); }
798
781
  .btn:disabled { opacity:0.5; cursor:not-allowed; }
799
- .btn-secondary { background:var(--color-bg-secondary); color:var(--color-text-primary); border:1px solid var(--color-border); }
782
+ .btn-secondary { background:var(--color-bg-secondary); color:var(--color-text-primary); border:none; }
800
783
  .btn-secondary:hover { background:var(--color-border); }
801
784
 
802
785
  /* ===== Drop zone ===== */
@@ -936,7 +919,6 @@
936
919
  padding: 1rem;
937
920
  background: var(--color-bg-primary);
938
921
  border-radius: 0.5rem;
939
- border: 1px solid var(--color-border);
940
922
  line-height: 1.7;
941
923
  font-size: 0.9rem;
942
924
  }
@@ -945,7 +927,6 @@
945
927
  margin-bottom: 0.75rem;
946
928
  border-radius: 0.5rem;
947
929
  overflow: hidden;
948
- border: 1px solid var(--color-border);
949
930
  }
950
931
 
951
932
  .block-code .code-header {
@@ -955,7 +936,6 @@
955
936
  gap: 0.5rem;
956
937
  background: #1f2937;
957
938
  padding: 0.5rem 1rem;
958
- border-bottom: 1px solid #374151;
959
939
  }
960
940
 
961
941
  .block-code .code-header .lang-badge {
@@ -993,12 +973,11 @@
993
973
  .block-thinking {
994
974
  margin-bottom: 0.75rem;
995
975
  border-radius: 0.5rem;
996
- border: 2px solid #c4b5fd;
997
976
  background: #f5f3ff;
998
977
  overflow: hidden;
999
978
  }
1000
979
 
1001
- html.dark .block-thinking { border-color: #5b21b6; background: #1e1033; }
980
+ html.dark .block-thinking { background: #1e1033; }
1002
981
 
1003
982
  .block-thinking summary {
1004
983
  padding: 0.75rem 1rem;
@@ -1019,36 +998,33 @@
1019
998
 
1020
999
  .block-thinking .thinking-content {
1021
1000
  padding: 0.75rem 1rem;
1022
- border-top: 1px solid #c4b5fd;
1023
1001
  font-size: 0.85rem;
1024
1002
  color: #5b21b6;
1025
1003
  white-space: pre-wrap;
1026
1004
  line-height: 1.6;
1027
1005
  }
1028
1006
 
1029
- html.dark .block-thinking .thinking-content { border-color: #5b21b6; color: #c4b5fd; }
1007
+ html.dark .block-thinking .thinking-content { color: #c4b5fd; }
1030
1008
 
1031
1009
  /* --- Tool Use Block --- */
1032
1010
  .block-tool-use {
1033
1011
  margin-bottom: 0.75rem;
1034
1012
  border-radius: 0.5rem;
1035
- border: 1px solid #a5f3fc;
1036
1013
  background: #ecfeff;
1037
1014
  overflow: hidden;
1038
1015
  }
1039
1016
 
1040
- html.dark .block-tool-use { border-color: #155e75; background: #0c1a24; }
1017
+ html.dark .block-tool-use { background: #0c1a24; }
1041
1018
 
1042
1019
  .block-tool-use .tool-header {
1043
1020
  padding: 0.625rem 1rem;
1044
- border-bottom: 1px solid #a5f3fc;
1045
1021
  display: flex;
1046
1022
  align-items: center;
1047
1023
  gap: 0.5rem;
1048
1024
  background: #cffafe;
1049
1025
  }
1050
1026
 
1051
- html.dark .block-tool-use .tool-header { border-color: #155e75; background: #0e2a3a; }
1027
+ html.dark .block-tool-use .tool-header { background: #0e2a3a; }
1052
1028
 
1053
1029
  .block-tool-use .tool-header .tool-icon {
1054
1030
  display: flex;
@@ -1098,7 +1074,6 @@
1098
1074
  gap: 0.5rem;
1099
1075
  padding: 0.5rem 0.75rem;
1100
1076
  background: var(--color-bg-primary);
1101
- border: 1px solid #a5f3fc;
1102
1077
  border-radius: 0.375rem;
1103
1078
  font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
1104
1079
  font-size: 0.8rem;
@@ -1106,8 +1081,6 @@
1106
1081
  overflow-x: auto;
1107
1082
  }
1108
1083
 
1109
- html.dark .tool-param-file { border-color: #155e75; }
1110
-
1111
1084
  .tool-param-file .file-icon { color: #0891b2; flex-shrink: 0; font-size: 1rem; }
1112
1085
  .tool-param-file .file-dir { color: var(--color-text-secondary); }
1113
1086
  .tool-param-file .file-name { font-weight: 600; color: var(--color-text-primary); }
@@ -1131,7 +1104,6 @@
1131
1104
  .tool-param-diff {
1132
1105
  border-radius: 0.375rem;
1133
1106
  overflow: hidden;
1134
- border: 1px solid var(--color-border);
1135
1107
  font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
1136
1108
  font-size: 0.75rem;
1137
1109
  }
@@ -1139,7 +1111,6 @@
1139
1111
  .tool-param-diff .diff-header {
1140
1112
  padding: 0.375rem 0.75rem;
1141
1113
  background: var(--color-bg-secondary);
1142
- border-bottom: 1px solid var(--color-border);
1143
1114
  font-weight: 600;
1144
1115
  font-size: 0.7rem;
1145
1116
  text-transform: uppercase;
@@ -1151,7 +1122,6 @@
1151
1122
  padding: 0.5rem 0.75rem;
1152
1123
  background: #fef2f2;
1153
1124
  color: #991b1b;
1154
- border-bottom: 1px solid var(--color-border);
1155
1125
  white-space: pre-wrap;
1156
1126
  word-break: break-all;
1157
1127
  max-height: 200px;
@@ -1178,12 +1148,9 @@
1178
1148
  gap: 0.5rem;
1179
1149
  padding: 0.5rem 0.75rem;
1180
1150
  background: var(--color-bg-primary);
1181
- border: 1px solid #a5f3fc;
1182
1151
  border-radius: 0.375rem;
1183
1152
  font-size: 0.85rem;
1184
1153
  }
1185
-
1186
- html.dark .tool-param-query { border-color: #155e75; }
1187
1154
  .tool-param-query .query-icon { flex-shrink: 0; font-size: 1rem; }
1188
1155
 
1189
1156
  .tool-param-url {
@@ -1192,7 +1159,6 @@
1192
1159
  gap: 0.5rem;
1193
1160
  padding: 0.5rem 0.75rem;
1194
1161
  background: var(--color-bg-primary);
1195
- border: 1px solid #a5f3fc;
1196
1162
  border-radius: 0.375rem;
1197
1163
  font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
1198
1164
  font-size: 0.8rem;
@@ -1200,7 +1166,7 @@
1200
1166
  word-break: break-all;
1201
1167
  }
1202
1168
 
1203
- html.dark .tool-param-url { border-color: #155e75; color: #60a5fa; }
1169
+ html.dark .tool-param-url { color: #60a5fa; }
1204
1170
  .tool-param-url .url-icon { flex-shrink: 0; font-size: 1rem; }
1205
1171
 
1206
1172
  .tool-param-todos {
@@ -1217,7 +1183,6 @@
1217
1183
  border-radius: 0.25rem;
1218
1184
  font-size: 0.8rem;
1219
1185
  background: var(--color-bg-primary);
1220
- border: 1px solid var(--color-border);
1221
1186
  }
1222
1187
 
1223
1188
  .tool-param-todos .todo-status {
@@ -1230,13 +1195,10 @@
1230
1195
 
1231
1196
  .tool-param-json {
1232
1197
  background: var(--color-bg-primary);
1233
- border: 1px solid #a5f3fc;
1234
1198
  border-radius: 0.375rem;
1235
1199
  overflow: hidden;
1236
1200
  }
1237
1201
 
1238
- html.dark .tool-param-json { border-color: #155e75; }
1239
-
1240
1202
  .tool-param-json pre {
1241
1203
  margin: 0;
1242
1204
  padding: 0.625rem 0.875rem;
@@ -1251,7 +1213,6 @@
1251
1213
  .tool-param-content-preview {
1252
1214
  border-radius: 0.375rem;
1253
1215
  overflow: hidden;
1254
- border: 1px solid var(--color-border);
1255
1216
  }
1256
1217
 
1257
1218
  .tool-param-content-preview .preview-header {
@@ -1262,7 +1223,6 @@
1262
1223
  text-transform: uppercase;
1263
1224
  letter-spacing: 0.03em;
1264
1225
  color: var(--color-text-secondary);
1265
- border-bottom: 1px solid var(--color-border);
1266
1226
  display: flex;
1267
1227
  justify-content: space-between;
1268
1228
  align-items: center;
@@ -1286,7 +1246,6 @@
1286
1246
  color: var(--color-text-secondary);
1287
1247
  background: var(--color-bg-secondary);
1288
1248
  text-align: center;
1289
- border-top: 1px solid var(--color-border);
1290
1249
  }
1291
1250
 
1292
1251
  /* --- Tool Result Block --- */
@@ -1296,10 +1255,10 @@
1296
1255
  overflow: hidden;
1297
1256
  }
1298
1257
 
1299
- .block-tool-result.result-success { border: 1px solid #86efac; background: #f0fdf4; }
1300
- .block-tool-result.result-error { border: 1px solid #fca5a5; background: #fef2f2; }
1301
- html.dark .block-tool-result.result-success { border-color: #166534; background: #0a1f0f; }
1302
- html.dark .block-tool-result.result-error { border-color: #991b1b; background: #1c0f0f; }
1258
+ .block-tool-result.result-success { background: #f0fdf4; }
1259
+ .block-tool-result.result-error { background: #fef2f2; }
1260
+ html.dark .block-tool-result.result-success { background: #0a1f0f; }
1261
+ html.dark .block-tool-result.result-error { background: #1c0f0f; }
1303
1262
 
1304
1263
  .block-tool-result .result-header {
1305
1264
  padding: 0.5rem 1rem;
@@ -1308,10 +1267,10 @@
1308
1267
  justify-content: space-between;
1309
1268
  }
1310
1269
 
1311
- .block-tool-result.result-success .result-header { background: #dcfce7; border-bottom: 1px solid #86efac; }
1312
- .block-tool-result.result-error .result-header { background: #fee2e2; border-bottom: 1px solid #fca5a5; }
1313
- html.dark .block-tool-result.result-success .result-header { background: #0f2b1a; border-color: #166534; }
1314
- html.dark .block-tool-result.result-error .result-header { background: #2c1010; border-color: #991b1b; }
1270
+ .block-tool-result.result-success .result-header { background: #dcfce7; }
1271
+ .block-tool-result.result-error .result-header { background: #fee2e2; }
1272
+ html.dark .block-tool-result.result-success .result-header { background: #0f2b1a; }
1273
+ html.dark .block-tool-result.result-error .result-header { background: #2c1010; }
1315
1274
 
1316
1275
  .block-tool-result .result-header .status-label {
1317
1276
  display: flex;
@@ -1360,7 +1319,6 @@
1360
1319
  padding: 0.375rem;
1361
1320
  background: var(--color-bg-secondary);
1362
1321
  border: none;
1363
- border-top: 1px solid var(--color-border);
1364
1322
  cursor: pointer;
1365
1323
  font-size: 0.75rem;
1366
1324
  color: var(--color-primary);
@@ -1385,16 +1343,14 @@
1385
1343
 
1386
1344
  .block-result.result-ok {
1387
1345
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
1388
- border: 1px solid #86efac;
1389
1346
  }
1390
1347
 
1391
1348
  .block-result.result-err {
1392
1349
  background: linear-gradient(135deg, #fef2f2, #fff1f2);
1393
- border: 1px solid #fca5a5;
1394
1350
  }
1395
1351
 
1396
- html.dark .block-result.result-ok { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); border-color: #166534; }
1397
- html.dark .block-result.result-err { background: linear-gradient(135deg, #1c0f0f, #2c1010); border-color: #991b1b; }
1352
+ html.dark .block-result.result-ok { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); }
1353
+ html.dark .block-result.result-err { background: linear-gradient(135deg, #1c0f0f, #2c1010); }
1398
1354
 
1399
1355
  .block-result .result-summary-header {
1400
1356
  padding: 0.625rem 1rem;
@@ -1430,7 +1386,6 @@
1430
1386
 
1431
1387
  .block-result .result-content {
1432
1388
  padding: 0.625rem 1rem;
1433
- border-top: 1px solid var(--color-border);
1434
1389
  font-size: 0.85rem;
1435
1390
  white-space: pre-wrap;
1436
1391
  word-break: break-word;
@@ -1443,23 +1398,21 @@
1443
1398
  .block-system {
1444
1399
  margin-bottom: 0.75rem;
1445
1400
  border-radius: 0.5rem;
1446
- border: 1px solid #c7d2fe;
1447
1401
  background: #eef2ff;
1448
1402
  overflow: hidden;
1449
1403
  }
1450
1404
 
1451
- html.dark .block-system { border-color: #3730a3; background: #15103a; }
1405
+ html.dark .block-system { background: #15103a; }
1452
1406
 
1453
1407
  .block-system .system-header {
1454
1408
  padding: 0.625rem 1rem;
1455
1409
  background: #e0e7ff;
1456
- border-bottom: 1px solid #c7d2fe;
1457
1410
  font-weight: 600;
1458
1411
  font-size: 0.85rem;
1459
1412
  color: #3730a3;
1460
1413
  }
1461
1414
 
1462
- html.dark .block-system .system-header { background: #1e1b4b; border-color: #3730a3; color: #a5b4fc; }
1415
+ html.dark .block-system .system-header { background: #1e1b4b; color: #a5b4fc; }
1463
1416
 
1464
1417
  .block-system .system-body {
1465
1418
  padding: 0.75rem 1rem;
@@ -1503,13 +1456,11 @@
1503
1456
  margin-bottom: 0.75rem;
1504
1457
  border-radius: 0.5rem;
1505
1458
  overflow: hidden;
1506
- border: 1px solid #374151;
1507
1459
  background: #111827;
1508
1460
  }
1509
1461
 
1510
1462
  .block-bash .bash-command {
1511
1463
  padding: 0.625rem 1rem;
1512
- border-bottom: 1px solid #374151;
1513
1464
  display: flex;
1514
1465
  align-items: flex-start;
1515
1466
  gap: 0.5rem;
@@ -1539,7 +1490,6 @@
1539
1490
  margin-bottom: 0.75rem;
1540
1491
  padding: 0.75rem 1rem;
1541
1492
  border-radius: 0.5rem;
1542
- border: 1px solid var(--color-border);
1543
1493
  background: var(--color-bg-secondary);
1544
1494
  }
1545
1495
 
@@ -1583,18 +1533,16 @@
1583
1533
  margin-bottom: 0.75rem;
1584
1534
  padding: 0.75rem 1rem;
1585
1535
  border-radius: 0.5rem;
1586
- border: 1px solid #fca5a5;
1587
1536
  background: #fef2f2;
1588
1537
  }
1589
1538
 
1590
- html.dark .block-error { border-color: #991b1b; background: #1c0f0f; }
1539
+ html.dark .block-error { background: #1c0f0f; }
1591
1540
 
1592
1541
  /* --- Image Block --- */
1593
1542
  .block-image {
1594
1543
  margin-bottom: 0.75rem;
1595
1544
  border-radius: 0.5rem;
1596
1545
  overflow: hidden;
1597
- border: 1px solid var(--color-border);
1598
1546
  }
1599
1547
 
1600
1548
  .block-image img { max-width: 100%; height: auto; max-height: 24rem; object-fit: contain; display: block; }
@@ -1605,24 +1553,22 @@
1605
1553
  margin-bottom: 0.75rem;
1606
1554
  padding: 0.75rem 1rem;
1607
1555
  background: #eff6ff;
1608
- border: 1px solid #bfdbfe;
1609
1556
  border-radius: 0.5rem;
1610
1557
  display: flex;
1611
1558
  align-items: center;
1612
1559
  gap: 0.625rem;
1613
1560
  }
1614
1561
 
1615
- html.dark .event-streaming-start { background: #0c1a2e; border-color: #1e40af; }
1562
+ html.dark .event-streaming-start { background: #0c1a2e; }
1616
1563
 
1617
1564
  .event-streaming-complete {
1618
1565
  margin-bottom: 0.75rem;
1619
1566
  padding: 0.75rem 1rem;
1620
1567
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
1621
- border: 1px solid #86efac;
1622
1568
  border-radius: 0.5rem;
1623
1569
  }
1624
1570
 
1625
- html.dark .event-streaming-complete { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); border-color: #166534; }
1571
+ html.dark .event-streaming-complete { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); }
1626
1572
  </style>
1627
1573
  </head>
1628
1574
  <body>
package/static/js/client.js CHANGED
@@ -708,8 +708,8 @@ class AgentGUIClient {
708
708
  html += `<div class="streaming-block-tool-use"><div class="tool-use-header"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(block.name || 'unknown')}</span></div>${inputHtml}</div>`;
709
709
  } else if (block.type === 'tool_result') {
710
710
  const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
711
- const displayContent = content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content;
712
- html += `<div class="streaming-block-tool-result${block.is_error ? ' tool-result-error' : ''}"><div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div><pre class="tool-result-pre">${this.escapeHtml(displayContent)}</pre></div>`;
711
+ const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this)) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
712
+ html += `<div class="streaming-block-tool-result${block.is_error ? ' tool-result-error' : ''}"><div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div>${smartHtml}</div>`;
713
713
  }
714
714
  });
715
715
  }
@@ -780,7 +780,7 @@ class AgentGUIClient {
780
780
  const response = await fetch(`${window.__BASE_URL}/api/conversations/${conversationId}/stream`, {
781
781
  method: 'POST',
782
782
  headers: { 'Content-Type': 'application/json' },
783
- body: JSON.stringify({ content: prompt, agentId, skipPermissions: false })
783
+ body: JSON.stringify({ content: prompt, agentId })
784
784
  });
785
785
 
786
786
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
@@ -1234,8 +1234,8 @@ class AgentGUIClient {
1234
1234
  contentHtml += `<div class="streaming-block-tool-use"><div class="tool-use-header"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(block.name || 'unknown')}</span></div>${inputHtml}</div>`;
1235
1235
  } else if (block.type === 'tool_result') {
1236
1236
  const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
1237
- const displayContent = content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content;
1238
- contentHtml += `<div class="streaming-block-tool-result${block.is_error ? ' tool-result-error' : ''}"><div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div><pre class="tool-result-pre">${this.escapeHtml(displayContent)}</pre></div>`;
1237
+ const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this)) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
1238
+ contentHtml += `<div class="streaming-block-tool-result${block.is_error ? ' tool-result-error' : ''}"><div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div>${smartHtml}</div>`;
1239
1239
  }
1240
1240
  });
1241
1241
  }
package/static/js/streaming-renderer.js CHANGED
@@ -620,6 +620,150 @@ class StreamingRenderer {
620
620
  return div;
621
621
  }
622
622
 
623
+ /**
624
+ * Render content smartly - detect JSON, images, file lists, markdown
625
+ */
626
+ renderSmartContent(contentStr) {
627
+ const trimmed = contentStr.trim();
628
+
629
+ if (trimmed.startsWith('data:image/')) {
630
+ return `<div style="padding:0.5rem"><img src="${this.escapeHtml(trimmed)}" style="max-width:100%;max-height:24rem;border-radius:0.375rem" loading="lazy"></div>`;
631
+ }
632
+
633
+ if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
634
+ try {
635
+ const parsed = JSON.parse(trimmed);
636
+ return `<div style="padding:0.625rem 1rem">${this.renderParametersBeautiful(parsed)}</div>`;
637
+ } catch (e) {}
638
+ }
639
+
640
+ const lines = trimmed.split('\n');
641
+ const allFilePaths = lines.length > 1 && lines.every(l => l.trim() === '' || l.trim().startsWith('/'));
642
+ if (allFilePaths && lines.filter(l => l.trim()).length > 0) {
643
+ const fileHtml = lines.filter(l => l.trim()).map(l => {
644
+ const p = l.trim();
645
+ const parts = p.split('/');
646
+ const name = parts.pop();
647
+ const dir = parts.join('/');
648
+ return `<div style="display:flex;align-items:center;gap:0.375rem;padding:0.1875rem 0;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem"><span style="opacity:0.5">&#128196;</span><span style="color:var(--color-text-secondary)">${this.escapeHtml(dir)}/</span><span style="font-weight:600">${this.escapeHtml(name)}</span></div>`;
649
+ }).join('');
650
+ return `<div style="padding:0.625rem 1rem">${fileHtml}</div>`;
651
+ }
652
+
653
+ if (trimmed.length > 1500) {
654
+ return `<div class="result-body collapsed" style="padding:0.625rem 1rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;line-height:1.5">${this.escapeHtml(trimmed)}</div><button class="expand-btn" onclick="this.previousElementSibling.classList.toggle('collapsed');this.textContent=this.textContent==='Show more'?'Show less':'Show more'">Show more</button>`;
655
+ }
656
+
657
+ return `<div style="padding:0.625rem 1rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;line-height:1.5">${this.escapeHtml(trimmed)}</div>`;
658
+ }
659
+
660
+ /**
661
+ * Render parsed JSON/object as formatted key-value display
662
+ */
663
+ renderParametersBeautiful(data, depth = 0) {
664
+ if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
665
+ if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
666
+ if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
667
+
668
+ if (typeof data === 'string') {
669
+ if (data.length > 500) {
670
+ const lines = data.split('\n').length;
671
+ return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:#d1d5db;padding:0.5rem;border-radius:0.375rem;line-height:1.5">${this.escapeHtml(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars, ' + lines + ' lines)' : ''}</div>`;
672
+ }
673
+ if (data.startsWith('/') && !data.includes(' ') && data.includes('.')) return this.renderFilePath(data);
674
+ return `<span style="color:var(--color-text-primary)">${this.escapeHtml(data)}</span>`;
675
+ }
676
+
677
+ if (Array.isArray(data)) {
678
+ if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
679
+ if (data.every(i => typeof i === 'string') && data.length <= 20) {
680
+ return `<div style="display:flex;flex-wrap:wrap;gap:0.25rem">${data.map(i => `<span style="display:inline-block;padding:0.125rem 0.5rem;background:var(--color-bg-secondary);border-radius:1rem;font-size:0.7rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(i)}</span>`).join('')}</div>`;
681
+ }
682
+ return `<div style="display:flex;flex-direction:column;gap:0.25rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((item, i) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="color:var(--color-text-secondary);font-size:0.7rem;min-width:1.5rem;text-align:right;flex-shrink:0">${i}</span><div style="flex:1;min-width:0">${this.renderParametersBeautiful(item, depth + 1)}</div></div>`).join('')}</div>`;
683
+ }
684
+
685
+ if (typeof data === 'object') {
686
+ const entries = Object.entries(data);
687
+ if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
688
+ return `<div style="display:flex;flex-direction:column;gap:0.375rem;${depth > 0 ? 'padding-left:1rem' : ''}">${entries.map(([k, v]) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="font-weight:600;font-size:0.75rem;color:#0891b2;flex-shrink:0;min-width:fit-content;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(k)}</span><div style="flex:1;min-width:0;font-size:0.8rem">${this.renderParametersBeautiful(v, depth + 1)}</div></div>`).join('')}</div>`;
689
+ }
690
+
691
+ return `<span>${this.escapeHtml(String(data))}</span>`;
692
+ }
693
+
694
+ /**
695
+ * Static HTML version of smart content rendering for use in string templates
696
+ */
697
+ static renderSmartContentHTML(contentStr, escapeHtml) {
698
+ const trimmed = contentStr.trim();
699
+ const esc = escapeHtml || (t => t.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])));
700
+
701
+ if (trimmed.startsWith('data:image/')) {
702
+ return `<div style="padding:0.5rem"><img src="${esc(trimmed)}" style="max-width:100%;max-height:24rem;border-radius:0.375rem" loading="lazy"></div>`;
703
+ }
704
+
705
+ if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
706
+ try {
707
+ const parsed = JSON.parse(trimmed);
708
+ return `<div style="padding:0.625rem 1rem">${StreamingRenderer.renderParamsHTML(parsed, 0, esc)}</div>`;
709
+ } catch (e) {}
710
+ }
711
+
712
+ const lines = trimmed.split('\n');
713
+ const allFilePaths = lines.length > 1 && lines.every(l => l.trim() === '' || l.trim().startsWith('/'));
714
+ if (allFilePaths && lines.filter(l => l.trim()).length > 0) {
715
+ const fileHtml = lines.filter(l => l.trim()).map(l => {
716
+ const p = l.trim();
717
+ const parts = p.split('/');
718
+ const name = parts.pop();
719
+ const dir = parts.join('/');
720
+ return `<div style="display:flex;align-items:center;gap:0.375rem;padding:0.1875rem 0;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem"><span style="opacity:0.5">&#128196;</span><span style="color:var(--color-text-secondary)">${esc(dir)}/</span><span style="font-weight:600">${esc(name)}</span></div>`;
721
+ }).join('');
722
+ return `<div style="padding:0.625rem 1rem">${fileHtml}</div>`;
723
+ }
724
+
725
+ const displayContent = trimmed.length > 2000 ? trimmed.substring(0, 2000) + '\n... (truncated)' : trimmed;
726
+ return `<pre class="tool-result-pre">${esc(displayContent)}</pre>`;
727
+ }
728
+
729
+ /**
730
+ * Static HTML version of parameter rendering
731
+ */
732
+ static renderParamsHTML(data, depth, esc) {
733
+ if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
734
+ if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
735
+ if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
736
+
737
+ if (typeof data === 'string') {
738
+ if (data.length > 500) {
739
+ return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:#d1d5db;padding:0.5rem;border-radius:0.375rem;line-height:1.5">${esc(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars)' : ''}</div>`;
740
+ }
741
+ if (data.startsWith('/') && !data.includes(' ') && data.includes('.')) {
742
+ const parts = data.split('/');
743
+ const name = parts.pop();
744
+ const dir = parts.join('/');
745
+ return `<div style="display:flex;align-items:center;gap:0.375rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.8rem"><span style="opacity:0.5">&#128196;</span><span style="color:var(--color-text-secondary)">${esc(dir)}/</span><span style="font-weight:600">${esc(name)}</span></div>`;
746
+ }
747
+ return `<span style="color:var(--color-text-primary)">${esc(data)}</span>`;
748
+ }
749
+
750
+ if (Array.isArray(data)) {
751
+ if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
752
+ if (data.every(i => typeof i === 'string') && data.length <= 20) {
753
+ return `<div style="display:flex;flex-wrap:wrap;gap:0.25rem">${data.map(i => `<span style="display:inline-block;padding:0.125rem 0.5rem;background:var(--color-bg-secondary);border-radius:1rem;font-size:0.7rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${esc(i)}</span>`).join('')}</div>`;
754
+ }
755
+ return `<div style="display:flex;flex-direction:column;gap:0.25rem;${depth > 0 ? 'padding-left:1rem' : ''}">${data.map((item, i) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="color:var(--color-text-secondary);font-size:0.7rem;min-width:1.5rem;text-align:right;flex-shrink:0">${i}</span><div style="flex:1;min-width:0">${StreamingRenderer.renderParamsHTML(item, depth + 1, esc)}</div></div>`).join('')}</div>`;
756
+ }
757
+
758
+ if (typeof data === 'object') {
759
+ const entries = Object.entries(data);
760
+ if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
761
+ return `<div style="display:flex;flex-direction:column;gap:0.375rem;${depth > 0 ? 'padding-left:1rem' : ''}">${entries.map(([k, v]) => `<div style="display:flex;gap:0.5rem;align-items:flex-start"><span style="font-weight:600;font-size:0.75rem;color:#0891b2;flex-shrink:0;min-width:fit-content;font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${esc(k)}</span><div style="flex:1;min-width:0;font-size:0.8rem">${StreamingRenderer.renderParamsHTML(v, depth + 1, esc)}</div></div>`).join('')}</div>`;
762
+ }
763
+
764
+ return `<span>${esc(String(data))}</span>`;
765
+ }
766
+
623
767
  /**
624
768
  * Render tool result block with smart content display
625
769
  */
@@ -631,21 +775,17 @@ class StreamingRenderer {
631
775
  const content = block.content || '';
632
776
  const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
633
777
  const toolUseId = block.tool_use_id || '';
634
- const isLong = contentStr.length > 1500;
635
778
 
636
779
  const iconSvg = isError
637
780
  ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
638
781
  : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
639
782
 
640
- const displayContent = isLong ? contentStr.substring(0, 1500) : contentStr;
641
-
642
783
  div.innerHTML = `
643
784
  <div class="result-header">
644
785
  <span class="status-label">${iconSvg} ${isError ? 'Error' : 'Success'}</span>
645
786
  ${toolUseId ? `<span class="result-id">${this.escapeHtml(toolUseId)}</span>` : ''}
646
787
  </div>
647
- <div class="result-body${isLong ? ' collapsed' : ''}">${this.escapeHtml(displayContent)}</div>
648
- ${isLong ? '<button class="expand-btn" onclick="this.previousElementSibling.classList.toggle(\'collapsed\');this.textContent=this.textContent===\'Show more\'?\'Show less\':\'Show more\'">Show more</button>' : ''}
788
+ ${this.renderSmartContent(contentStr)}
649
789
  `;
650
790
 
651
791
  return div;