agentgui 1.0.161 → 1.0.162

package/package.json

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

package/static/index.html

@@ -389,7 +389,7 @@
       max-width: 100%;
       margin: 0;
       width: 100%;
-      padding: 1.5rem 2rem;
+      padding: 0.75rem 2rem;
       display: flex;
       flex-direction: column;
       min-height: 100%;
@@ -398,14 +398,14 @@
     #output {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: 0.25rem;
       flex: 1;
     }
 
     /* --- Conversation display --- */
     .conversation-header {
-      padding: 0.75rem 0;
-      margin-bottom: 1rem;
+      padding: 0.5rem 0;
+      margin-bottom: 0.5rem;
     }
 
     .conversation-header h2 { margin: 0 0 0.25rem 0; font-size: 1.25rem; }
@@ -415,8 +415,8 @@
 
     /* --- Messages --- */
     .message {
-      margin-bottom: 1.25rem;
-      padding: 0.875rem 1rem;
+      margin-bottom: 0.5rem;
+      padding: 0.5rem 0.75rem;
       border-radius: 0.75rem;
       max-width: 85%;
       word-break: break-word;
@@ -440,7 +440,7 @@
       font-size: 0.7rem;
       text-transform: uppercase;
       letter-spacing: 0.04em;
-      margin-bottom: 0.375rem;
+      margin-bottom: 0.125rem;
       opacity: 0.7;
     }
 
@@ -456,7 +456,7 @@
 
     .message-timestamp {
       font-size: 0.7rem;
-      margin-top: 0.5rem;
+      margin-top: 0.25rem;
       opacity: 0.6;
     }
 
@@ -466,7 +466,7 @@
     .message-blocks {
       display: flex;
       flex-direction: column;
-      gap: 0.75rem;
+      gap: 0.375rem;
     }
 
     .message-text {
@@ -478,9 +478,9 @@
     .message-code {
       background-color: var(--color-bg-code);
       border-radius: 0.375rem;
-      padding: 0.75rem;
+      padding: 0.5rem;
       overflow-x: auto;
-      margin: 0.5rem 0;
+      margin: 0.25rem 0;
     }
 
     .message-code pre {
@@ -502,8 +502,8 @@
 
     /* --- Streaming block types --- */
     .streaming-block-system {
-      padding: 0.5rem 0.75rem;
-      margin: 0.25rem 0;
+      padding: 0.375rem 0.75rem;
+      margin: 0.125rem 0;
       background: rgba(59,130,246,0.08);
       border-radius: 0.375rem;
       font-size: 0.8rem;
@@ -600,8 +600,8 @@
     }
 
     .streaming-block-result {
-      padding: 0.5rem 0.75rem;
-      margin: 0.5rem 0;
+      padding: 0.375rem 0.75rem;
+      margin: 0.125rem 0;
       border-radius: 0.375rem;
       background: rgba(16,185,129,0.08);
       font-size: 0.8rem;
@@ -716,7 +716,7 @@
 
     /* ===== HTML rendered content ===== */
     .html-rendered-label {
-      padding: 0.5rem;
+      padding: 0.25rem 0.5rem;
       background: #eff6ff;
       border-radius: 0.25rem;
       font-size: 0.75rem;
@@ -724,14 +724,14 @@
       color: #1d4ed8;
       text-transform: uppercase;
       letter-spacing: 0.05em;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.25rem;
     }
 
     html.dark .html-rendered-label { background: #1e3a5f; color: #93c5fd; }
 
     .html-content {
       background: #ffffff;
-      padding: 1rem;
+      padding: 0.5rem 0.75rem;
       border-radius: 0.375rem;
       overflow-x: auto;
     }
@@ -748,8 +748,8 @@
 
     pre { margin: 0; overflow-x: auto; }
     code { font-family: 'Monaco','Menlo','Ubuntu Mono', monospace; font-size: 0.875rem; }
-    details { margin: 0.5rem 0; }
-    summary { cursor: pointer; user-select: none; padding: 0.5rem; border-radius: 0.25rem; transition: background-color 0.2s; }
+    details { margin: 0.25rem 0; }
+    summary { cursor: pointer; user-select: none; padding: 0.375rem; border-radius: 0.25rem; transition: background-color 0.2s; }
     summary:hover { background-color: var(--color-bg-secondary); }
 
     /* ===== Folder Browser Modal ===== */
@@ -822,7 +822,7 @@
       .main-header { padding: 0 0.75rem; }
       .header-title { font-size: 1rem; }
 
-      .messages-wrapper { padding: 1rem 0.75rem; }
+      .messages-wrapper { padding: 0.5rem 0.75rem; }
 
       .message { max-width: 90%; }
 
@@ -844,7 +844,7 @@
     @media (max-width: 480px) {
       .sidebar { width: calc(100% - 3rem); max-width: 320px; }
       .message { max-width: 95%; }
-      .messages-wrapper { padding: 0.75rem 0.5rem; }
+      .messages-wrapper { padding: 0.375rem 0.5rem; }
       .input-section { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
       .agent-selector { display: none; }
     }
@@ -1072,7 +1072,7 @@
     .conversation-messages { contain: content; }
     .streaming-blocks { contain: content; }
     .sidebar-list { contain: strict; content-visibility: auto; }
-    .message { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 120px; }
+    .message { contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 80px; }
     #output-scroll { will-change: transform; }
 
     .voice-block .voice-result-stats {
@@ -1127,16 +1127,16 @@
 
     /* ===== STREAMING BLOCK STYLES ===== */
     .block-text {
-      margin-bottom: 0.75rem;
-      padding: 1rem;
+      margin-bottom: 0.25rem;
+      padding: 0.5rem 0.75rem;
       background: var(--color-bg-primary);
       border-radius: 0.5rem;
-      line-height: 1.7;
+      line-height: 1.5;
       font-size: 0.9rem;
     }
 
     .block-text + .block-text {
-      margin-top: -0.75rem;
+      margin-top: -0.25rem;
       padding-top: 0;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -1149,7 +1149,7 @@
     }
 
     .block-code {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       overflow: hidden;
     }
@@ -1187,7 +1187,7 @@
 
     .block-code pre {
       margin: 0;
-      padding: 1rem;
+      padding: 0.625rem 0.75rem;
       background: #111827;
       color: #e5e7eb;
       overflow-x: auto;
@@ -1196,7 +1196,7 @@
     }
 
     .block-thinking {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       background: #f5f3ff;
       overflow: hidden;
@@ -1205,7 +1205,7 @@
     html.dark .block-thinking { background: #1e1033; }
 
     .block-thinking summary {
-      padding: 0.75rem 1rem;
+      padding: 0.375rem 0.75rem;
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -1222,18 +1222,18 @@
     .block-thinking summary:hover { background: rgba(139,92,246,0.08); }
 
     .block-thinking .thinking-content {
-      padding: 0.75rem 1rem;
+      padding: 0.375rem 0.75rem;
       font-size: 0.85rem;
       color: #5b21b6;
       white-space: pre-wrap;
-      line-height: 1.6;
+      line-height: 1.5;
     }
 
     html.dark .block-thinking .thinking-content { color: #c4b5fd; }
 
     /* --- Tool Use Block --- */
     .block-tool-use {
-      margin-bottom: 0.25rem;
+      margin-bottom: 0.125rem;
       border-radius: 0.5rem;
       background: #ecfeff;
       overflow: hidden;
@@ -1475,7 +1475,7 @@
 
     /* --- Folded Tool Use (compact success-style bar) --- */
     .folded-tool {
-      margin: 0.25rem 0;
+      margin: 0.125rem 0;
       border-radius: 0.375rem;
       overflow: hidden;
       background: #f0fdf4;
@@ -1616,7 +1616,7 @@
 
     /* --- Collapsible Code Summary --- */
     .collapsible-code {
-      margin: 0.25rem 0;
+      margin: 0.125rem 0;
       border-radius: 0.375rem;
       overflow: hidden;
       background: #1e293b;
@@ -1672,7 +1672,7 @@
 
     /* --- Tool Result Block --- */
     .block-tool-result {
-      margin-bottom: 0.25rem;
+      margin-bottom: 0.125rem;
       border-radius: 0.5rem;
       overflow: hidden;
     }
@@ -1708,7 +1708,7 @@
     html.dark .block-tool-result.result-error .status-label { color: #fca5a5; }
 
     .block-tool-result .result-body {
-      padding: 0.625rem 1rem;
+      padding: 0.375rem 0.75rem;
       font-size: 0.8rem;
       white-space: pre-wrap;
       word-break: break-all;
@@ -1758,7 +1758,7 @@
 
     /* --- Result Summary Block --- */
     .block-result {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       overflow: hidden;
     }
@@ -1775,7 +1775,7 @@
     html.dark .block-result.result-err { background: linear-gradient(135deg, #1c0f0f, #2c1010); }
 
     .block-result .result-summary-header {
-      padding: 0.625rem 1rem;
+      padding: 0.375rem 0.75rem;
       display: flex;
       align-items: center;
       gap: 0.5rem;
@@ -1791,7 +1791,7 @@
     .block-result .result-stats {
       display: flex;
       gap: 1.5rem;
-      padding: 0 1rem 0.625rem;
+      padding: 0 0.75rem 0.375rem;
       font-size: 0.8rem;
       flex-wrap: wrap;
     }
@@ -1807,7 +1807,7 @@
     .block-result .result-stat .stat-label { color: var(--color-text-secondary); font-size: 0.75rem; }
 
     .block-result .result-content {
-      padding: 0.625rem 1rem;
+      padding: 0.375rem 0.75rem;
       font-size: 0.85rem;
       white-space: pre-wrap;
       word-break: break-word;
@@ -1818,7 +1818,7 @@
 
     /* --- System Block --- */
     .block-system {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       background: #eef2ff;
       overflow: hidden;
@@ -1827,7 +1827,7 @@
     html.dark .block-system { background: #15103a; }
 
     .block-system .system-header {
-      padding: 0.625rem 1rem;
+      padding: 0.375rem 0.75rem;
       background: #e0e7ff;
       font-weight: 600;
       font-size: 0.85rem;
@@ -1837,12 +1837,12 @@
     html.dark .block-system .system-header { background: #1e1b4b; color: #a5b4fc; }
 
     .block-system .system-body {
-      padding: 0.75rem 1rem;
+      padding: 0.375rem 0.75rem;
       font-size: 0.8rem;
       color: #3730a3;
       display: flex;
       flex-direction: column;
-      gap: 0.375rem;
+      gap: 0.25rem;
     }
 
     html.dark .block-system .system-body { color: #c7d2fe; }
@@ -1875,14 +1875,14 @@
 
     /* --- Bash Block --- */
     .block-bash {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       overflow: hidden;
       background: #111827;
     }
 
     .block-bash .bash-command {
-      padding: 0.625rem 1rem;
+      padding: 0.375rem 0.75rem;
       display: flex;
       align-items: flex-start;
       gap: 0.5rem;
@@ -1898,7 +1898,7 @@
     }
 
     .block-bash .bash-output {
-      padding: 0.625rem 1rem;
+      padding: 0.375rem 0.75rem;
       color: #9ca3af;
       font-size: 0.75rem;
       overflow-x: auto;
@@ -1909,8 +1909,8 @@
 
     /* --- Generic Block --- */
     .block-generic {
-      margin-bottom: 0.75rem;
-      padding: 0.75rem 1rem;
+      margin-bottom: 0.25rem;
+      padding: 0.5rem 0.75rem;
       border-radius: 0.5rem;
       background: var(--color-bg-secondary);
     }
@@ -1952,8 +1952,8 @@
 
     /* --- Error Block --- */
     .block-error {
-      margin-bottom: 0.75rem;
-      padding: 0.75rem 1rem;
+      margin-bottom: 0.25rem;
+      padding: 0.5rem 0.75rem;
       border-radius: 0.5rem;
       background: #fef2f2;
     }
@@ -1962,7 +1962,7 @@
 
     /* --- Image Block --- */
     .block-image {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       overflow: hidden;
     }
@@ -1972,8 +1972,8 @@
 
     /* ===== STREAMING EVENTS ===== */
     .event-streaming-start {
-      margin-bottom: 0.75rem;
-      padding: 0.75rem 1rem;
+      margin-bottom: 0.25rem;
+      padding: 0.375rem 0.75rem;
       background: #eff6ff;
       border-radius: 0.5rem;
       display: flex;
@@ -1984,8 +1984,8 @@
     html.dark .event-streaming-start { background: #0c1a2e; }
 
     .event-streaming-complete {
-      margin-bottom: 0.75rem;
-      padding: 0.75rem 1rem;
+      margin-bottom: 0.25rem;
+      padding: 0.375rem 0.75rem;
       background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
       border-radius: 0.5rem;
     }