agentgui 1.0.119 → 1.0.120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.119",
+  "version": "1.0.120",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/static/index.html

@@ -65,7 +65,6 @@
       display: flex;
       flex-direction: column;
       background-color: var(--color-bg-secondary);
-      border-right: 1px solid var(--color-border);
       overflow: hidden;
       transition: width 0.25s ease, min-width 0.25s ease;
     }
@@ -78,7 +77,6 @@
 
     .sidebar-header {
       padding: 0.75rem 1rem;
-      border-bottom: 1px solid var(--color-border);
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -235,7 +233,6 @@
       min-height: var(--header-height);
       flex-shrink: 0;
       background-color: var(--color-bg-secondary);
-      border-bottom: 1px solid var(--color-border);
     }
 
     .sidebar-toggle-btn {
@@ -245,7 +242,7 @@
       width: 36px;
       height: 36px;
       background: none;
-      border: 1px solid var(--color-border);
+      border: none;
       border-radius: 0.375rem;
       cursor: pointer;
       color: var(--color-text-secondary);
@@ -290,7 +287,6 @@
       font-size: 0.75rem;
       font-weight: 500;
       background-color: var(--color-bg-primary);
-      border: 1px solid var(--color-border);
     }
 
     .status-indicator {
@@ -314,7 +310,7 @@
       width: 36px;
       height: 36px;
       background: none;
-      border: 1px solid var(--color-border);
+      border: none;
       border-radius: 0.375rem;
       cursor: pointer;
       color: var(--color-text-secondary);
@@ -330,7 +326,6 @@
     .view-toggle-bar {
       display: flex;
       gap: 0;
-      border-bottom: 1px solid var(--color-border);
       background: var(--color-bg-secondary);
       flex-shrink: 0;
       padding: 0 1rem;
@@ -382,7 +377,6 @@
     /* --- Conversation display --- */
     .conversation-header {
       padding: 0.75rem 0;
-      border-bottom: 1px solid var(--color-border);
       margin-bottom: 1rem;
     }
 
@@ -409,7 +403,6 @@
 
     .message-assistant {
       background-color: var(--color-bg-secondary);
-      border: 1px solid var(--color-border);
       margin-right: auto;
       border-bottom-left-radius: 0.25rem;
     }
@@ -484,7 +477,6 @@
       padding: 0.5rem 0.75rem;
       margin: 0.25rem 0;
       background: rgba(59,130,246,0.08);
-      border: 1px solid rgba(59,130,246,0.2);
       border-radius: 0.375rem;
       font-size: 0.8rem;
       display: flex;
@@ -536,7 +528,6 @@
     html.dark .tool-use-name { color: #22d3ee; }
 
     .tool-input-details {
-      border-top: 1px solid rgba(6,182,212,0.15);
     }
 
     .tool-input-summary {
@@ -576,7 +567,6 @@
     .tool-result-header {
       padding: 0.375rem 0.75rem;
       font-size: 0.7rem;
-      border-bottom: 1px solid rgba(255,255,255,0.05);
     }
 
     .tool-result-ok-badge {
@@ -607,7 +597,6 @@
     }
 
     .streaming-block-tool-result.tool-result-error {
-      border: 1px solid rgba(239,68,68,0.3);
     }
 
     .streaming-block-result {
@@ -615,7 +604,6 @@
       margin: 0.5rem 0;
       border-radius: 0.375rem;
       background: rgba(16,185,129,0.08);
-      border: 1px solid rgba(16,185,129,0.2);
       font-size: 0.8rem;
       display: flex;
       align-items: center;
@@ -624,7 +612,6 @@
 
     .streaming-block-result.result-error {
       background: rgba(239,68,68,0.08);
-      border-color: rgba(239,68,68,0.2);
     }
 
     .result-status {
@@ -646,7 +633,6 @@
     /* --- Input area: fixed at bottom --- */
     .input-section {
       flex-shrink: 0;
-      border-top: 1px solid var(--color-border);
       background-color: var(--color-bg-primary);
       padding: 0.75rem 1rem;
     }
@@ -662,7 +648,7 @@
 
     .agent-selector {
       padding: 0.5rem;
-      border: 1px solid var(--color-border);
+      border: none;
       border-radius: 0.375rem;
       background-color: var(--color-bg-secondary);
       color: var(--color-text-primary);
@@ -674,7 +660,7 @@
     .message-textarea {
       flex: 1;
       padding: 0.625rem 0.875rem;
-      border: 1px solid var(--color-border);
+      border: none;
       border-radius: 0.75rem;
       background-color: var(--color-bg-secondary);
       color: var(--color-text-primary);
@@ -689,7 +675,6 @@
 
     .message-textarea:focus {
       outline: none;
-      border-color: var(--color-primary);
       box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
     }
 
@@ -733,7 +718,6 @@
     .html-rendered-label {
       padding: 0.5rem;
       background: #eff6ff;
-      border: 1px solid #bfdbfe;
       border-radius: 0.25rem;
       font-size: 0.75rem;
       font-weight: 600;
@@ -743,20 +727,19 @@
       margin-bottom: 0.5rem;
     }
 
-    html.dark .html-rendered-label { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
+    html.dark .html-rendered-label { background: #1e3a5f; color: #93c5fd; }
 
     .html-content {
       background: #ffffff;
       padding: 1rem;
       border-radius: 0.375rem;
-      border: 1px solid var(--color-border);
       overflow-x: auto;
     }
 
     html.dark .html-content { background: #1f2937; }
 
     .html-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
-    .html-content th, .html-content td { border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
+    .html-content th, .html-content td { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; }
     .html-content th { background: var(--color-bg-secondary); font-weight: 600; }
     .html-content ul, .html-content ol { padding-left: 1.5rem; margin: 0.5rem 0; }
     .html-content li { margin: 0.25rem 0; }
@@ -772,31 +755,31 @@
     /* ===== Folder Browser Modal ===== */
     .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; }
     .folder-modal-overlay.visible { display:flex; }
-    .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); }
-    .folder-modal-header { padding:1rem; border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
+    .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); }
+    .folder-modal-header { padding:1rem; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
     .folder-modal-header h3 { margin:0; font-size:1rem; font-weight:600; }
     .folder-modal-close { background:none; border:none; font-size:1.25rem; cursor:pointer; color:var(--color-text-secondary); padding:0.25rem; line-height:1; }
     .folder-modal-close:hover { color:var(--color-text-primary); }
-    .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; }
+    .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; }
     .folder-breadcrumb-segment { cursor:pointer; color:var(--color-primary); padding:0.125rem 0.25rem; border-radius:0.25rem; }
     .folder-breadcrumb-segment:hover { background:var(--color-bg-primary); text-decoration:underline; }
     .folder-breadcrumb-separator { color:var(--color-text-secondary); }
     .folder-list { flex:1; overflow-y:auto; min-height:200px; max-height:400px; list-style:none; margin:0; padding:0; }
-    .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; }
+    .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; }
     .folder-list-item:hover { background:var(--color-bg-secondary); }
     .folder-list-item-icon { font-size:1rem; flex-shrink:0; width:1.25rem; text-align:center; }
     .folder-list-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
     .folder-list-empty { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
     .folder-list-loading { padding:2rem 1rem; text-align:center; color:var(--color-text-secondary); font-size:0.875rem; }
     .folder-list-error { padding:1rem; text-align:center; color:var(--color-error); font-size:0.875rem; }
-    .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; }
+    .folder-modal-footer { padding:0.75rem 1rem; display:flex; justify-content:flex-end; gap:0.5rem; flex-shrink:0; }
     .folder-modal-footer .btn { padding:0.5rem 1rem; font-size:0.8rem; }
 
     .btn { padding:0.5rem 1rem; border:none; border-radius:0.375rem; font-weight:500; cursor:pointer; transition:all 0.15s; font-size:0.875rem; }
     .btn-primary { background-color:var(--color-primary); color:white; }
     .btn-primary:hover:not(:disabled) { background-color:var(--color-primary-dark); }
     .btn:disabled { opacity:0.5; cursor:not-allowed; }
-    .btn-secondary { background:var(--color-bg-secondary); color:var(--color-text-primary); border:1px solid var(--color-border); }
+    .btn-secondary { background:var(--color-bg-secondary); color:var(--color-text-primary); border:none; }
     .btn-secondary:hover { background:var(--color-border); }
 
     /* ===== Drop zone ===== */
@@ -936,7 +919,6 @@
       padding: 1rem;
       background: var(--color-bg-primary);
       border-radius: 0.5rem;
-      border: 1px solid var(--color-border);
       line-height: 1.7;
       font-size: 0.9rem;
     }
@@ -945,7 +927,6 @@
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
       overflow: hidden;
-      border: 1px solid var(--color-border);
     }
 
     .block-code .code-header {
@@ -955,7 +936,6 @@
       gap: 0.5rem;
       background: #1f2937;
       padding: 0.5rem 1rem;
-      border-bottom: 1px solid #374151;
     }
 
     .block-code .code-header .lang-badge {
@@ -993,12 +973,11 @@
     .block-thinking {
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
-      border: 2px solid #c4b5fd;
       background: #f5f3ff;
       overflow: hidden;
     }
 
-    html.dark .block-thinking { border-color: #5b21b6; background: #1e1033; }
+    html.dark .block-thinking { background: #1e1033; }
 
     .block-thinking summary {
       padding: 0.75rem 1rem;
@@ -1019,36 +998,33 @@
 
     .block-thinking .thinking-content {
       padding: 0.75rem 1rem;
-      border-top: 1px solid #c4b5fd;
       font-size: 0.85rem;
       color: #5b21b6;
       white-space: pre-wrap;
       line-height: 1.6;
     }
 
-    html.dark .block-thinking .thinking-content { border-color: #5b21b6; color: #c4b5fd; }
+    html.dark .block-thinking .thinking-content { color: #c4b5fd; }
 
     /* --- Tool Use Block --- */
     .block-tool-use {
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
-      border: 1px solid #a5f3fc;
       background: #ecfeff;
       overflow: hidden;
     }
 
-    html.dark .block-tool-use { border-color: #155e75; background: #0c1a24; }
+    html.dark .block-tool-use { background: #0c1a24; }
 
     .block-tool-use .tool-header {
       padding: 0.625rem 1rem;
-      border-bottom: 1px solid #a5f3fc;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       background: #cffafe;
     }
 
-    html.dark .block-tool-use .tool-header { border-color: #155e75; background: #0e2a3a; }
+    html.dark .block-tool-use .tool-header { background: #0e2a3a; }
 
     .block-tool-use .tool-header .tool-icon {
       display: flex;
@@ -1098,7 +1074,6 @@
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       background: var(--color-bg-primary);
-      border: 1px solid #a5f3fc;
       border-radius: 0.375rem;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
       font-size: 0.8rem;
@@ -1106,8 +1081,6 @@
       overflow-x: auto;
     }
 
-    html.dark .tool-param-file { border-color: #155e75; }
-
     .tool-param-file .file-icon { color: #0891b2; flex-shrink: 0; font-size: 1rem; }
     .tool-param-file .file-dir { color: var(--color-text-secondary); }
     .tool-param-file .file-name { font-weight: 600; color: var(--color-text-primary); }
@@ -1131,7 +1104,6 @@
     .tool-param-diff {
       border-radius: 0.375rem;
       overflow: hidden;
-      border: 1px solid var(--color-border);
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
       font-size: 0.75rem;
     }
@@ -1139,7 +1111,6 @@
     .tool-param-diff .diff-header {
       padding: 0.375rem 0.75rem;
       background: var(--color-bg-secondary);
-      border-bottom: 1px solid var(--color-border);
       font-weight: 600;
       font-size: 0.7rem;
       text-transform: uppercase;
@@ -1151,7 +1122,6 @@
       padding: 0.5rem 0.75rem;
       background: #fef2f2;
       color: #991b1b;
-      border-bottom: 1px solid var(--color-border);
       white-space: pre-wrap;
       word-break: break-all;
       max-height: 200px;
@@ -1178,12 +1148,9 @@
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       background: var(--color-bg-primary);
-      border: 1px solid #a5f3fc;
       border-radius: 0.375rem;
       font-size: 0.85rem;
     }
-
-    html.dark .tool-param-query { border-color: #155e75; }
     .tool-param-query .query-icon { flex-shrink: 0; font-size: 1rem; }
 
     .tool-param-url {
@@ -1192,7 +1159,6 @@
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       background: var(--color-bg-primary);
-      border: 1px solid #a5f3fc;
       border-radius: 0.375rem;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
       font-size: 0.8rem;
@@ -1200,7 +1166,7 @@
       word-break: break-all;
     }
 
-    html.dark .tool-param-url { border-color: #155e75; color: #60a5fa; }
+    html.dark .tool-param-url { color: #60a5fa; }
     .tool-param-url .url-icon { flex-shrink: 0; font-size: 1rem; }
 
     .tool-param-todos {
@@ -1217,7 +1183,6 @@
       border-radius: 0.25rem;
       font-size: 0.8rem;
       background: var(--color-bg-primary);
-      border: 1px solid var(--color-border);
     }
 
     .tool-param-todos .todo-status {
@@ -1230,13 +1195,10 @@
 
     .tool-param-json {
       background: var(--color-bg-primary);
-      border: 1px solid #a5f3fc;
       border-radius: 0.375rem;
       overflow: hidden;
     }
 
-    html.dark .tool-param-json { border-color: #155e75; }
-
     .tool-param-json pre {
       margin: 0;
       padding: 0.625rem 0.875rem;
@@ -1251,7 +1213,6 @@
     .tool-param-content-preview {
       border-radius: 0.375rem;
       overflow: hidden;
-      border: 1px solid var(--color-border);
     }
 
     .tool-param-content-preview .preview-header {
@@ -1262,7 +1223,6 @@
       text-transform: uppercase;
       letter-spacing: 0.03em;
       color: var(--color-text-secondary);
-      border-bottom: 1px solid var(--color-border);
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -1286,7 +1246,6 @@
       color: var(--color-text-secondary);
       background: var(--color-bg-secondary);
       text-align: center;
-      border-top: 1px solid var(--color-border);
     }
 
     /* --- Tool Result Block --- */
@@ -1296,10 +1255,10 @@
       overflow: hidden;
     }
 
-    .block-tool-result.result-success { border: 1px solid #86efac; background: #f0fdf4; }
-    .block-tool-result.result-error { border: 1px solid #fca5a5; background: #fef2f2; }
-    html.dark .block-tool-result.result-success { border-color: #166534; background: #0a1f0f; }
-    html.dark .block-tool-result.result-error { border-color: #991b1b; background: #1c0f0f; }
+    .block-tool-result.result-success { background: #f0fdf4; }
+    .block-tool-result.result-error { background: #fef2f2; }
+    html.dark .block-tool-result.result-success { background: #0a1f0f; }
+    html.dark .block-tool-result.result-error { background: #1c0f0f; }
 
     .block-tool-result .result-header {
       padding: 0.5rem 1rem;
@@ -1308,10 +1267,10 @@
       justify-content: space-between;
     }
 
-    .block-tool-result.result-success .result-header { background: #dcfce7; border-bottom: 1px solid #86efac; }
-    .block-tool-result.result-error .result-header { background: #fee2e2; border-bottom: 1px solid #fca5a5; }
-    html.dark .block-tool-result.result-success .result-header { background: #0f2b1a; border-color: #166534; }
-    html.dark .block-tool-result.result-error .result-header { background: #2c1010; border-color: #991b1b; }
+    .block-tool-result.result-success .result-header { background: #dcfce7; }
+    .block-tool-result.result-error .result-header { background: #fee2e2; }
+    html.dark .block-tool-result.result-success .result-header { background: #0f2b1a; }
+    html.dark .block-tool-result.result-error .result-header { background: #2c1010; }
 
     .block-tool-result .result-header .status-label {
       display: flex;
@@ -1360,7 +1319,6 @@
       padding: 0.375rem;
       background: var(--color-bg-secondary);
       border: none;
-      border-top: 1px solid var(--color-border);
       cursor: pointer;
       font-size: 0.75rem;
       color: var(--color-primary);
@@ -1385,16 +1343,14 @@
 
     .block-result.result-ok {
       background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
-      border: 1px solid #86efac;
     }
 
     .block-result.result-err {
       background: linear-gradient(135deg, #fef2f2, #fff1f2);
-      border: 1px solid #fca5a5;
     }
 
-    html.dark .block-result.result-ok { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); border-color: #166534; }
-    html.dark .block-result.result-err { background: linear-gradient(135deg, #1c0f0f, #2c1010); border-color: #991b1b; }
+    html.dark .block-result.result-ok { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); }
+    html.dark .block-result.result-err { background: linear-gradient(135deg, #1c0f0f, #2c1010); }
 
     .block-result .result-summary-header {
       padding: 0.625rem 1rem;
@@ -1430,7 +1386,6 @@
 
     .block-result .result-content {
       padding: 0.625rem 1rem;
-      border-top: 1px solid var(--color-border);
       font-size: 0.85rem;
       white-space: pre-wrap;
       word-break: break-word;
@@ -1443,23 +1398,21 @@
     .block-system {
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
-      border: 1px solid #c7d2fe;
       background: #eef2ff;
       overflow: hidden;
     }
 
-    html.dark .block-system { border-color: #3730a3; background: #15103a; }
+    html.dark .block-system { background: #15103a; }
 
     .block-system .system-header {
       padding: 0.625rem 1rem;
       background: #e0e7ff;
-      border-bottom: 1px solid #c7d2fe;
       font-weight: 600;
       font-size: 0.85rem;
       color: #3730a3;
     }
 
-    html.dark .block-system .system-header { background: #1e1b4b; border-color: #3730a3; color: #a5b4fc; }
+    html.dark .block-system .system-header { background: #1e1b4b; color: #a5b4fc; }
 
     .block-system .system-body {
       padding: 0.75rem 1rem;
@@ -1503,13 +1456,11 @@
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
       overflow: hidden;
-      border: 1px solid #374151;
       background: #111827;
     }
 
     .block-bash .bash-command {
       padding: 0.625rem 1rem;
-      border-bottom: 1px solid #374151;
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
@@ -1539,7 +1490,6 @@
       margin-bottom: 0.75rem;
       padding: 0.75rem 1rem;
       border-radius: 0.5rem;
-      border: 1px solid var(--color-border);
       background: var(--color-bg-secondary);
     }
 
@@ -1583,18 +1533,16 @@
       margin-bottom: 0.75rem;
       padding: 0.75rem 1rem;
       border-radius: 0.5rem;
-      border: 1px solid #fca5a5;
       background: #fef2f2;
     }
 
-    html.dark .block-error { border-color: #991b1b; background: #1c0f0f; }
+    html.dark .block-error { background: #1c0f0f; }
 
     /* --- Image Block --- */
     .block-image {
       margin-bottom: 0.75rem;
       border-radius: 0.5rem;
       overflow: hidden;
-      border: 1px solid var(--color-border);
     }
 
     .block-image img { max-width: 100%; height: auto; max-height: 24rem; object-fit: contain; display: block; }
@@ -1605,24 +1553,22 @@
       margin-bottom: 0.75rem;
       padding: 0.75rem 1rem;
       background: #eff6ff;
-      border: 1px solid #bfdbfe;
       border-radius: 0.5rem;
       display: flex;
       align-items: center;
       gap: 0.625rem;
     }
 
-    html.dark .event-streaming-start { background: #0c1a2e; border-color: #1e40af; }
+    html.dark .event-streaming-start { background: #0c1a2e; }
 
     .event-streaming-complete {
       margin-bottom: 0.75rem;
       padding: 0.75rem 1rem;
       background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
-      border: 1px solid #86efac;
       border-radius: 0.5rem;
     }
 
-    html.dark .event-streaming-complete { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); border-color: #166534; }
+    html.dark .event-streaming-complete { background: linear-gradient(135deg, #0a1f0f, #0f2b1a); }
   </style>
 </head>
 <body>

package/static/js/client.js

@@ -708,8 +708,8 @@ class AgentGUIClient {
             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>`;
           } else if (block.type === 'tool_result') {
             const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
-            const displayContent = content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content;
-            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>`;
+            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>`;
+            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>`;
           }
         });
       }
@@ -1234,8 +1234,8 @@ class AgentGUIClient {
               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>`;
             } else if (block.type === 'tool_result') {
               const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
-              const displayContent = content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content;
-              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>`;
+              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>`;
+              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>`;
             }
           });
         }

package/static/js/streaming-renderer.js

@@ -620,6 +620,150 @@ class StreamingRenderer {
     return div;
   }
 
+  /**
+   * Render content smartly - detect JSON, images, file lists, markdown
+   */
+  renderSmartContent(contentStr) {
+    const trimmed = contentStr.trim();
+
+    if (trimmed.startsWith('data:image/')) {
+      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>`;
+    }
+
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        return `<div style="padding:0.625rem 1rem">${this.renderParametersBeautiful(parsed)}</div>`;
+      } catch (e) {}
+    }
+
+    const lines = trimmed.split('\n');
+    const allFilePaths = lines.length > 1 && lines.every(l => l.trim() === '' || l.trim().startsWith('/'));
+    if (allFilePaths && lines.filter(l => l.trim()).length > 0) {
+      const fileHtml = lines.filter(l => l.trim()).map(l => {
+        const p = l.trim();
+        const parts = p.split('/');
+        const name = parts.pop();
+        const dir = parts.join('/');
+        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>`;
+      }).join('');
+      return `<div style="padding:0.625rem 1rem">${fileHtml}</div>`;
+    }
+
+    if (trimmed.length > 1500) {
+      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>`;
+    }
+
+    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>`;
+  }
+
+  /**
+   * Render parsed JSON/object as formatted key-value display
+   */
+  renderParametersBeautiful(data, depth = 0) {
+    if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
+    if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
+    if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
+
+    if (typeof data === 'string') {
+      if (data.length > 500) {
+        const lines = data.split('\n').length;
+        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>`;
+      }
+      if (data.startsWith('/') && !data.includes(' ') && data.includes('.')) return this.renderFilePath(data);
+      return `<span style="color:var(--color-text-primary)">${this.escapeHtml(data)}</span>`;
+    }
+
+    if (Array.isArray(data)) {
+      if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
+      if (data.every(i => typeof i === 'string') && data.length <= 20) {
+        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>`;
+      }
+      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>`;
+    }
+
+    if (typeof data === 'object') {
+      const entries = Object.entries(data);
+      if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
+      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>`;
+    }
+
+    return `<span>${this.escapeHtml(String(data))}</span>`;
+  }
+
+  /**
+   * Static HTML version of smart content rendering for use in string templates
+   */
+  static renderSmartContentHTML(contentStr, escapeHtml) {
+    const trimmed = contentStr.trim();
+    const esc = escapeHtml || (t => t.replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c])));
+
+    if (trimmed.startsWith('data:image/')) {
+      return `<div style="padding:0.5rem"><img src="${esc(trimmed)}" style="max-width:100%;max-height:24rem;border-radius:0.375rem" loading="lazy"></div>`;
+    }
+
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        return `<div style="padding:0.625rem 1rem">${StreamingRenderer.renderParamsHTML(parsed, 0, esc)}</div>`;
+      } catch (e) {}
+    }
+
+    const lines = trimmed.split('\n');
+    const allFilePaths = lines.length > 1 && lines.every(l => l.trim() === '' || l.trim().startsWith('/'));
+    if (allFilePaths && lines.filter(l => l.trim()).length > 0) {
+      const fileHtml = lines.filter(l => l.trim()).map(l => {
+        const p = l.trim();
+        const parts = p.split('/');
+        const name = parts.pop();
+        const dir = parts.join('/');
+        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>`;
+      }).join('');
+      return `<div style="padding:0.625rem 1rem">${fileHtml}</div>`;
+    }
+
+    const displayContent = trimmed.length > 2000 ? trimmed.substring(0, 2000) + '\n... (truncated)' : trimmed;
+    return `<pre class="tool-result-pre">${esc(displayContent)}</pre>`;
+  }
+
+  /**
+   * Static HTML version of parameter rendering
+   */
+  static renderParamsHTML(data, depth, esc) {
+    if (data === null || data === undefined) return `<span style="color:var(--color-text-secondary);font-style:italic">null</span>`;
+    if (typeof data === 'boolean') return `<span style="color:#d97706;font-weight:600">${data}</span>`;
+    if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
+
+    if (typeof data === 'string') {
+      if (data.length > 500) {
+        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>`;
+      }
+      if (data.startsWith('/') && !data.includes(' ') && data.includes('.')) {
+        const parts = data.split('/');
+        const name = parts.pop();
+        const dir = parts.join('/');
+        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>`;
+      }
+      return `<span style="color:var(--color-text-primary)">${esc(data)}</span>`;
+    }
+
+    if (Array.isArray(data)) {
+      if (data.length === 0) return `<span style="color:var(--color-text-secondary)">[]</span>`;
+      if (data.every(i => typeof i === 'string') && data.length <= 20) {
+        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>`;
+      }
+      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>`;
+    }
+
+    if (typeof data === 'object') {
+      const entries = Object.entries(data);
+      if (entries.length === 0) return `<span style="color:var(--color-text-secondary)">{}</span>`;
+      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>`;
+    }
+
+    return `<span>${esc(String(data))}</span>`;
+  }
+
   /**
    * Render tool result block with smart content display
    */
@@ -631,21 +775,17 @@ class StreamingRenderer {
     const content = block.content || '';
     const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
     const toolUseId = block.tool_use_id || '';
-    const isLong = contentStr.length > 1500;
 
     const iconSvg = isError
       ? '<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>'
       : '<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>';
 
-    const displayContent = isLong ? contentStr.substring(0, 1500) : contentStr;
-
     div.innerHTML = `
       <div class="result-header">
         <span class="status-label">${iconSvg} ${isError ? 'Error' : 'Success'}</span>
         ${toolUseId ? `<span class="result-id">${this.escapeHtml(toolUseId)}</span>` : ''}
       </div>
-      <div class="result-body${isLong ? ' collapsed' : ''}">${this.escapeHtml(displayContent)}</div>
-      ${isLong ? '<button class="expand-btn" onclick="this.previousElementSibling.classList.toggle(\'collapsed\');this.textContent=this.textContent===\'Show more\'?\'Show less\':\'Show more\'">Show more</button>' : ''}
+      ${this.renderSmartContent(contentStr)}
     `;
 
     return div;