agentgui 1.0.552 → 1.0.554

package/lib/claude-runner.js

@@ -95,6 +95,10 @@ class AgentRunner {
         try { config.onPid(proc.pid); } catch (e) {}
       }
 
+      if (config.onProcess) {
+        try { config.onProcess(proc); } catch (e) {}
+      }
+
       let jsonBuffer = '';
       const outputs = [];
       let timedOut = false;
@@ -274,6 +278,10 @@ class AgentRunner {
         try { config.onPid(proc.pid); } catch (e) {}
       }
 
+      if (config.onProcess) {
+        try { config.onProcess(proc); } catch (e) {}
+      }
+
       const outputs = [];
       let timedOut = false;
       let sessionId = null;

package/lib/ws-handlers-conv.js

@@ -5,7 +5,7 @@ function notFound(msg = 'Not found') { fail(404, msg); }
 
 export function register(router, deps) {
   const { queries, activeExecutions, messageQueues, rateLimitState,
-    broadcastSync, processMessageWithStreaming } = deps;
+    broadcastSync, processMessageWithStreaming, activeProcessesByConvId } = deps;
 
   router.handle('conv.ls', () => {
     const conversations = queries.getConversationsList();
@@ -114,6 +114,28 @@ export function register(router, deps) {
     return { ok: true, injected: true, conversationId: p.id, messageId: message.id };
   });
 
+  router.handle('conv.steer', (p) => {
+    const conv = queries.getConversation(p.id);
+    if (!conv) notFound('Conversation not found');
+    if (!p.content) fail(400, 'Missing content');
+    const entry = activeExecutions.get(p.id);
+    if (!entry) fail(409, 'No active execution to steer');
+    const proc = activeProcessesByConvId.get(p.id);
+    if (!proc || !proc.stdin) fail(409, 'Process not available for steering');
+
+    const message = queries.createMessage(p.id, 'user', p.content);
+    queries.createEvent('message.created', { role: 'user', messageId: message.id }, p.id);
+    broadcastSync({ type: 'message_created', conversationId: p.id, message, timestamp: Date.now() });
+
+    try {
+      // Write directly to stdin for steering
+      proc.stdin.write(p.content + '\n');
+      return { ok: true, steered: true, conversationId: p.id, messageId: message.id };
+    } catch (err) {
+      fail(500, `Failed to steer: ${err.message}`);
+    }
+  });
+
   router.handle('msg.ls', (p) => {
     return queries.getPaginatedMessages(p.id, Math.min(p.limit || 50, 100), Math.max(p.offset || 0, 0));
   });

package/package.json

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

package/server.js

@@ -292,6 +292,7 @@ const activeScripts = new Map();
 const messageQueues = new Map();
 const rateLimitState = new Map();
 const activeProcessesByRunId = new Map();
+const activeProcessesByConvId = new Map(); // Store process handles by conversationId for steering
 const acpQueries = queries;
 const STUCK_AGENT_THRESHOLD_MS = 600000;
 const NO_PID_GRACE_PERIOD_MS = 60000;
@@ -3806,18 +3807,24 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       onPid: (pid) => {
         const entry = activeExecutions.get(conversationId);
         if (entry) entry.pid = pid;
+      },
+      onProcess: (proc) => {
+        // Store process handle for steering
+        activeProcessesByConvId.set(conversationId, proc);
       }
     };
 
     const { outputs, sessionId: claudeSessionId } = await runClaudeWithStreaming(content, cwd, agentId || 'claude-code', config);
-    
+
     // Check if rate limit was already handled in stream detection
     if (rateLimitState.get(conversationId)?.isStreamDetected) {
       debugLog(`[rate-limit] Rate limit already handled in stream for conv ${conversationId}, skipping success handler`);
+      activeProcessesByConvId.delete(conversationId);
       return;
     }
-    
+
     activeExecutions.delete(conversationId);
+    activeProcessesByConvId.delete(conversationId);
     batcher.drain();
     debugLog(`[stream] Claude returned ${outputs.length} outputs, sessionId=${claudeSessionId}`);
 
@@ -4134,7 +4141,7 @@ const wsRouter = new WsRouter();
 
 registerConvHandlers(wsRouter, {
   queries, activeExecutions, messageQueues, rateLimitState,
-  broadcastSync, processMessageWithStreaming
+  broadcastSync, processMessageWithStreaming, activeProcessesByConvId
 });
 
 registerSessionHandlers(wsRouter, {

package/static/index.html

@@ -948,6 +948,26 @@
     .inject-btn:disabled { opacity: 0.4; cursor: not-allowed; }
     .inject-btn.visible { display: flex; }
 
+    .steer-btn {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      background-color: #06b6d4;
+      color: white;
+      border: none;
+      border-radius: 0.5rem;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: background-color 0.15s;
+      margin-right: 0.25rem;
+    }
+
+    .steer-btn:hover:not(:disabled) { background-color: #0891b2; }
+    .steer-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .steer-btn.visible { display: flex; }
+
     /* ===== OVERLAY for mobile sidebar ===== */
     .sidebar-overlay {
       display: none;
@@ -1478,7 +1498,7 @@
       overflow: hidden;
     }
 
-    html.dark .block-thinking { background: #1e1033; }
+    html.dark .block-thinking { }
 
     .block-thinking summary {
       padding: 0.375rem 0.75rem;
@@ -1495,7 +1515,7 @@
     }
 
     html.dark .block-thinking summary { color: #c4b5fd; }
-    .block-thinking summary:hover { background: rgba(139,92,246,0.08); }
+    .block-thinking summary:hover { }
 
     .block-thinking .thinking-content {
       padding: 0.375rem 0.75rem;
@@ -1515,7 +1535,7 @@
       overflow: hidden;
     }
 
-    html.dark .block-tool-use { background: #0c1a24; }
+    html.dark .block-tool-use { }
 
     .block-tool-use .tool-header {
       padding: 0.375rem 0.75rem;
@@ -1525,7 +1545,7 @@
       background: #cffafe;
     }
 
-    html.dark .block-tool-use .tool-header { background: #0e2a3a; }
+    html.dark .block-tool-use .tool-header { }
 
     .block-tool-use .tool-header .tool-icon {
       display: flex;
@@ -1545,13 +1565,12 @@
 
     .block-tool-use .tool-header .tool-name code {
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      background: #a5f3fc;
       padding: 0.125rem 0.5rem;
       border-radius: 0.25rem;
       font-size: 0.8rem;
     }
 
-    html.dark .block-tool-use .tool-header .tool-name code { background: #164e63; }
+    html.dark .block-tool-use .tool-header .tool-name code { }
 
     .block-tool-use .tool-params {
       padding: 0.5rem 0.75rem;
@@ -1884,15 +1903,13 @@
     .folded-tool-info > .folded-tool-body { border-top-color: #c7d2fe; }
     html.dark .folded-tool-info > .folded-tool-body { border-top-color: #3730a3; }
 
-    /* --- Per-block-type unique colored backgrounds --- */
-    .block-type-text { background: #f8fafc; }
-    html.dark .block-type-text { background: #1e293b; }
+    /* --- Per-block-type unique colored backgrounds (removed) --- */
 
     /* --- Per-tool-name header colors (tool-color-*) --- */
-    .tool-color-read.folded-tool > .folded-tool-bar { background: #dbeafe; }
-    html.dark .tool-color-read.folded-tool > .folded-tool-bar { background: #1e3a5f; }
-    .tool-color-read.folded-tool > .folded-tool-bar:hover { background: #bfdbfe; }
-    html.dark .tool-color-read.folded-tool > .folded-tool-bar:hover { background: #1e40af; }
+    .tool-color-read.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-read.folded-tool > .folded-tool-bar { }
+    .tool-color-read.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-read.folded-tool > .folded-tool-bar:hover { }
     .tool-color-read.folded-tool > .folded-tool-bar::before { color: #2563eb; }
     html.dark .tool-color-read.folded-tool > .folded-tool-bar::before { color: #60a5fa; }
     .tool-color-read .folded-tool-icon { color: #2563eb; }
@@ -1901,15 +1918,13 @@
     html.dark .tool-color-read .folded-tool-name { color: #93bbfd; }
     .tool-color-read .folded-tool-desc { color: #1d4ed8; }
     html.dark .tool-color-read .folded-tool-desc { color: #60a5fa; }
-    .tool-color-read { background: #eff6ff; }
-    html.dark .tool-color-read { background: #0c1929; }
     .tool-color-read > .folded-tool-body { border-top-color: #bfdbfe; }
     html.dark .tool-color-read > .folded-tool-body { border-top-color: #1e3a5f; }
 
-    .tool-color-write.folded-tool > .folded-tool-bar { background: #fef3c7; }
-    html.dark .tool-color-write.folded-tool > .folded-tool-bar { background: #422006; }
-    .tool-color-write.folded-tool > .folded-tool-bar:hover { background: #fde68a; }
-    html.dark .tool-color-write.folded-tool > .folded-tool-bar:hover { background: #78350f; }
+    .tool-color-write.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-write.folded-tool > .folded-tool-bar { }
+    .tool-color-write.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-write.folded-tool > .folded-tool-bar:hover { }
     .tool-color-write.folded-tool > .folded-tool-bar::before { color: #d97706; }
     html.dark .tool-color-write.folded-tool > .folded-tool-bar::before { color: #fbbf24; }
     .tool-color-write .folded-tool-icon { color: #d97706; }
@@ -1918,15 +1933,13 @@
     html.dark .tool-color-write .folded-tool-name { color: #fcd34d; }
     .tool-color-write .folded-tool-desc { color: #b45309; }
     html.dark .tool-color-write .folded-tool-desc { color: #fbbf24; }
-    .tool-color-write { background: #fffbeb; }
-    html.dark .tool-color-write { background: #1c1507; }
     .tool-color-write > .folded-tool-body { border-top-color: #fde68a; }
     html.dark .tool-color-write > .folded-tool-body { border-top-color: #422006; }
 
-    .tool-color-edit.folded-tool > .folded-tool-bar { background: #ede9fe; }
-    html.dark .tool-color-edit.folded-tool > .folded-tool-bar { background: #2e1065; }
-    .tool-color-edit.folded-tool > .folded-tool-bar:hover { background: #ddd6fe; }
-    html.dark .tool-color-edit.folded-tool > .folded-tool-bar:hover { background: #4c1d95; }
+    .tool-color-edit.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-edit.folded-tool > .folded-tool-bar { }
+    .tool-color-edit.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-edit.folded-tool > .folded-tool-bar:hover { }
     .tool-color-edit.folded-tool > .folded-tool-bar::before { color: #7c3aed; }
     html.dark .tool-color-edit.folded-tool > .folded-tool-bar::before { color: #a78bfa; }
     .tool-color-edit .folded-tool-icon { color: #7c3aed; }
@@ -1935,15 +1948,13 @@
     html.dark .tool-color-edit .folded-tool-name { color: #c4b5fd; }
     .tool-color-edit .folded-tool-desc { color: #6d28d9; }
     html.dark .tool-color-edit .folded-tool-desc { color: #a78bfa; }
-    .tool-color-edit { background: #f5f3ff; }
-    html.dark .tool-color-edit { background: #1a0a2e; }
     .tool-color-edit > .folded-tool-body { border-top-color: #ddd6fe; }
     html.dark .tool-color-edit > .folded-tool-body { border-top-color: #2e1065; }
 
-    .tool-color-bash.folded-tool > .folded-tool-bar { background: #cbd5e1; }
-    html.dark .tool-color-bash.folded-tool > .folded-tool-bar { background: #475569; }
-    .tool-color-bash.folded-tool > .folded-tool-bar:hover { background: #cbd5e1; }
-    html.dark .tool-color-bash.folded-tool > .folded-tool-bar:hover { background: #334155; }
+    .tool-color-bash.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-bash.folded-tool > .folded-tool-bar { }
+    .tool-color-bash.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-bash.folded-tool > .folded-tool-bar:hover { }
     .tool-color-bash.folded-tool > .folded-tool-bar::before { color: #475569; }
     html.dark .tool-color-bash.folded-tool > .folded-tool-bar::before { color: #94a3b8; }
     .tool-color-bash .folded-tool-icon { color: #475569; }
@@ -1952,15 +1963,13 @@
     html.dark .tool-color-bash .folded-tool-name { color: #cbd5e1; }
     .tool-color-bash .folded-tool-desc { color: #475569; }
     html.dark .tool-color-bash .folded-tool-desc { color: #94a3b8; }
-    .tool-color-bash { background: #f8fafc; }
-    html.dark .tool-color-bash { background: #0f172a; }
     .tool-color-bash > .folded-tool-body { border-top-color: #cbd5e1; }
     html.dark .tool-color-bash > .folded-tool-body { border-top-color: #334155; }
 
-    .tool-color-glob.folded-tool > .folded-tool-bar { background: #d1fae5; }
-    html.dark .tool-color-glob.folded-tool > .folded-tool-bar { background: #064e3b; }
-    .tool-color-glob.folded-tool > .folded-tool-bar:hover { background: #a7f3d0; }
-    html.dark .tool-color-glob.folded-tool > .folded-tool-bar:hover { background: #065f46; }
+    .tool-color-glob.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-glob.folded-tool > .folded-tool-bar { }
+    .tool-color-glob.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-glob.folded-tool > .folded-tool-bar:hover { }
     .tool-color-glob.folded-tool > .folded-tool-bar::before { color: #059669; }
     html.dark .tool-color-glob.folded-tool > .folded-tool-bar::before { color: #34d399; }
     .tool-color-glob .folded-tool-icon { color: #059669; }
@@ -1969,15 +1978,13 @@
     html.dark .tool-color-glob .folded-tool-name { color: #6ee7b7; }
     .tool-color-glob .folded-tool-desc { color: #047857; }
     html.dark .tool-color-glob .folded-tool-desc { color: #34d399; }
-    .tool-color-glob { background: #ecfdf5; }
-    html.dark .tool-color-glob { background: #022c22; }
     .tool-color-glob > .folded-tool-body { border-top-color: #a7f3d0; }
     html.dark .tool-color-glob > .folded-tool-body { border-top-color: #064e3b; }
 
-    .tool-color-grep.folded-tool > .folded-tool-bar { background: #ffe4e6; }
-    html.dark .tool-color-grep.folded-tool > .folded-tool-bar { background: #4c0519; }
-    .tool-color-grep.folded-tool > .folded-tool-bar:hover { background: #fecdd3; }
-    html.dark .tool-color-grep.folded-tool > .folded-tool-bar:hover { background: #881337; }
+    .tool-color-grep.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-grep.folded-tool > .folded-tool-bar { }
+    .tool-color-grep.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-grep.folded-tool > .folded-tool-bar:hover { }
     .tool-color-grep.folded-tool > .folded-tool-bar::before { color: #e11d48; }
     html.dark .tool-color-grep.folded-tool > .folded-tool-bar::before { color: #fb7185; }
     .tool-color-grep .folded-tool-icon { color: #e11d48; }
@@ -1986,15 +1993,13 @@
     html.dark .tool-color-grep .folded-tool-name { color: #fda4af; }
     .tool-color-grep .folded-tool-desc { color: #be123c; }
     html.dark .tool-color-grep .folded-tool-desc { color: #fb7185; }
-    .tool-color-grep { background: #fff1f2; }
-    html.dark .tool-color-grep { background: #2a0a10; }
     .tool-color-grep > .folded-tool-body { border-top-color: #fecdd3; }
     html.dark .tool-color-grep > .folded-tool-body { border-top-color: #4c0519; }
 
-    .tool-color-web.folded-tool > .folded-tool-bar { background: #e0f2fe; }
-    html.dark .tool-color-web.folded-tool > .folded-tool-bar { background: #0c4a6e; }
-    .tool-color-web.folded-tool > .folded-tool-bar:hover { background: #bae6fd; }
-    html.dark .tool-color-web.folded-tool > .folded-tool-bar:hover { background: #075985; }
+    .tool-color-web.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-web.folded-tool > .folded-tool-bar { }
+    .tool-color-web.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-web.folded-tool > .folded-tool-bar:hover { }
     .tool-color-web.folded-tool > .folded-tool-bar::before { color: #0284c7; }
     html.dark .tool-color-web.folded-tool > .folded-tool-bar::before { color: #38bdf8; }
     .tool-color-web .folded-tool-icon { color: #0284c7; }
@@ -2003,15 +2008,13 @@
     html.dark .tool-color-web .folded-tool-name { color: #7dd3fc; }
     .tool-color-web .folded-tool-desc { color: #0369a1; }
     html.dark .tool-color-web .folded-tool-desc { color: #38bdf8; }
-    .tool-color-web { background: #f0f9ff; }
-    html.dark .tool-color-web { background: #0a1929; }
     .tool-color-web > .folded-tool-body { border-top-color: #bae6fd; }
     html.dark .tool-color-web > .folded-tool-body { border-top-color: #0c4a6e; }
 
-    .tool-color-todo.folded-tool > .folded-tool-bar { background: #ffedd5; }
-    html.dark .tool-color-todo.folded-tool > .folded-tool-bar { background: #431407; }
-    .tool-color-todo.folded-tool > .folded-tool-bar:hover { background: #fed7aa; }
-    html.dark .tool-color-todo.folded-tool > .folded-tool-bar:hover { background: #7c2d12; }
+    .tool-color-todo.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-todo.folded-tool > .folded-tool-bar { }
+    .tool-color-todo.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-todo.folded-tool > .folded-tool-bar:hover { }
     .tool-color-todo.folded-tool > .folded-tool-bar::before { color: #ea580c; }
     html.dark .tool-color-todo.folded-tool > .folded-tool-bar::before { color: #fb923c; }
     .tool-color-todo .folded-tool-icon { color: #ea580c; }
@@ -2020,15 +2023,13 @@
     html.dark .tool-color-todo .folded-tool-name { color: #fdba74; }
     .tool-color-todo .folded-tool-desc { color: #c2410c; }
     html.dark .tool-color-todo .folded-tool-desc { color: #fb923c; }
-    .tool-color-todo { background: #fff7ed; }
-    html.dark .tool-color-todo { background: #1c0f02; }
     .tool-color-todo > .folded-tool-body { border-top-color: #fed7aa; }
     html.dark .tool-color-todo > .folded-tool-body { border-top-color: #431407; }
 
-    .tool-color-task.folded-tool > .folded-tool-bar { background: #bfdbfe; }
-    html.dark .tool-color-task.folded-tool > .folded-tool-bar { background: #2563eb; }
-    .tool-color-task.folded-tool > .folded-tool-bar:hover { background: #c7d2fe; }
-    html.dark .tool-color-task.folded-tool > .folded-tool-bar:hover { background: #312e81; }
+    .tool-color-task.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-task.folded-tool > .folded-tool-bar { }
+    .tool-color-task.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-task.folded-tool > .folded-tool-bar:hover { }
     .tool-color-task.folded-tool > .folded-tool-bar::before { color: #4f46e5; }
     html.dark .tool-color-task.folded-tool > .folded-tool-bar::before { color: #818cf8; }
     .tool-color-task .folded-tool-icon { color: #4f46e5; }
@@ -2037,15 +2038,13 @@
     html.dark .tool-color-task .folded-tool-name { color: #a5b4fc; }
     .tool-color-task .folded-tool-desc { color: #4338ca; }
     html.dark .tool-color-task .folded-tool-desc { color: #818cf8; }
-    .tool-color-task { background: #eef2ff; }
-    html.dark .tool-color-task { background: #0f0d29; }
     .tool-color-task > .folded-tool-body { border-top-color: #c7d2fe; }
     html.dark .tool-color-task > .folded-tool-body { border-top-color: #1e1b4b; }
 
-    .tool-color-default.folded-tool > .folded-tool-bar { background: #cffafe; }
-    html.dark .tool-color-default.folded-tool > .folded-tool-bar { background: #0e2a3a; }
-    .tool-color-default.folded-tool > .folded-tool-bar:hover { background: #a5f3fc; }
-    html.dark .tool-color-default.folded-tool > .folded-tool-bar:hover { background: #164e63; }
+    .tool-color-default.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-default.folded-tool > .folded-tool-bar { }
+    .tool-color-default.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-default.folded-tool > .folded-tool-bar:hover { }
     .tool-color-default.folded-tool > .folded-tool-bar::before { color: #0891b2; }
     html.dark .tool-color-default.folded-tool > .folded-tool-bar::before { color: #22d3ee; }
     .tool-color-default .folded-tool-icon { color: #0891b2; }
@@ -2054,16 +2053,14 @@
     html.dark .tool-color-default .folded-tool-name { color: #67e8f9; }
     .tool-color-default .folded-tool-desc { color: #0e7490; }
     html.dark .tool-color-default .folded-tool-desc { color: #22d3ee; }
-    .tool-color-default { background: #ecfeff; }
-    html.dark .tool-color-default { background: #0c1a24; }
     .tool-color-default > .folded-tool-body { border-top-color: #a5f3fc; }
     html.dark .tool-color-default > .folded-tool-body { border-top-color: #164e63; }
 
     /* Execute - Purple */
-    .tool-color-execute.folded-tool > .folded-tool-bar { background: #e9d5ff; }
-    html.dark .tool-color-execute.folded-tool > .folded-tool-bar { background: #7c3aed; }
-    .tool-color-execute.folded-tool > .folded-tool-bar:hover { background: #e9d5ff; }
-    html.dark .tool-color-execute.folded-tool > .folded-tool-bar:hover { background: #4c1d95; }
+    .tool-color-execute.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-execute.folded-tool > .folded-tool-bar { }
+    .tool-color-execute.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-execute.folded-tool > .folded-tool-bar:hover { }
     .tool-color-execute.folded-tool > .folded-tool-bar::before { color: #a855f7; }
     html.dark .tool-color-execute.folded-tool > .folded-tool-bar::before { color: #d8b4fe; }
     .tool-color-execute .folded-tool-icon { color: #a855f7; }
@@ -2072,16 +2069,14 @@
     html.dark .tool-color-execute .folded-tool-name { color: #e879f9; }
     .tool-color-execute .folded-tool-desc { color: #7e22ce; }
     html.dark .tool-color-execute .folded-tool-desc { color: #d8b4fe; }
-    .tool-color-execute { background: #faf5ff; }
-    html.dark .tool-color-execute { background: #1a0d2e; }
     .tool-color-execute > .folded-tool-body { border-top-color: #e9d5ff; }
     html.dark .tool-color-execute > .folded-tool-body { border-top-color: #4c1d95; }
 
     /* Sleep - Orange */
-    .tool-color-sleep.folded-tool > .folded-tool-bar { background: #fed7aa; }
-    html.dark .tool-color-sleep.folded-tool > .folded-tool-bar { background: #ea580c; }
-    .tool-color-sleep.folded-tool > .folded-tool-bar:hover { background: #fdba74; }
-    html.dark .tool-color-sleep.folded-tool > .folded-tool-bar:hover { background: #7c2d12; }
+    .tool-color-sleep.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-sleep.folded-tool > .folded-tool-bar { }
+    .tool-color-sleep.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-sleep.folded-tool > .folded-tool-bar:hover { }
     .tool-color-sleep.folded-tool > .folded-tool-bar::before { color: #f97316; }
     html.dark .tool-color-sleep.folded-tool > .folded-tool-bar::before { color: #fb923c; }
     .tool-color-sleep .folded-tool-icon { color: #f97316; }
@@ -2090,16 +2085,14 @@
     html.dark .tool-color-sleep .folded-tool-name { color: #fed7aa; }
     .tool-color-sleep .folded-tool-desc { color: #b45309; }
     html.dark .tool-color-sleep .folded-tool-desc { color: #fb923c; }
-    .tool-color-sleep { background: #fff7ed; }
-    html.dark .tool-color-sleep { background: #1f1409; }
     .tool-color-sleep > .folded-tool-body { border-top-color: #fdba74; }
     html.dark .tool-color-sleep > .folded-tool-body { border-top-color: #7c2d12; }
 
     /* Search - Green */
-    .tool-color-search.folded-tool > .folded-tool-bar { background: #a7f3d0; }
-    html.dark .tool-color-search.folded-tool > .folded-tool-bar { background: #059669; }
-    .tool-color-search.folded-tool > .folded-tool-bar:hover { background: #bbf7d0; }
-    html.dark .tool-color-search.folded-tool > .folded-tool-bar:hover { background: #16a34a; }
+    .tool-color-search.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-search.folded-tool > .folded-tool-bar { }
+    .tool-color-search.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-search.folded-tool > .folded-tool-bar:hover { }
     .tool-color-search.folded-tool > .folded-tool-bar::before { color: #16a34a; }
     html.dark .tool-color-search.folded-tool > .folded-tool-bar::before { color: #86efac; }
     .tool-color-search .folded-tool-icon { color: #16a34a; }
@@ -2108,16 +2101,14 @@
     html.dark .tool-color-search .folded-tool-name { color: #bbf7d0; }
     .tool-color-search .folded-tool-desc { color: #166534; }
     html.dark .tool-color-search .folded-tool-desc { color: #86efac; }
-    .tool-color-search { background: #f0fdf4; }
-    html.dark .tool-color-search { background: #0a1c0e; }
     .tool-color-search > .folded-tool-body { border-top-color: #bbf7d0; }
     html.dark .tool-color-search > .folded-tool-body { border-top-color: #16a34a; }
 
     /* Skill - Yellow/Amber */
-    .tool-color-skill.folded-tool > .folded-tool-bar { background: #d9f99d; }
-    html.dark .tool-color-skill.folded-tool > .folded-tool-bar { background: #65a30d; }
-    .tool-color-skill.folded-tool > .folded-tool-bar:hover { background: #fde68a; }
-    html.dark .tool-color-skill.folded-tool > .folded-tool-bar:hover { background: #78350f; }
+    .tool-color-skill.folded-tool > .folded-tool-bar { }
+    html.dark .tool-color-skill.folded-tool > .folded-tool-bar { }
+    .tool-color-skill.folded-tool > .folded-tool-bar:hover { }
+    html.dark .tool-color-skill.folded-tool > .folded-tool-bar:hover { }
     .tool-color-skill.folded-tool > .folded-tool-bar::before { color: #d97706; }
     html.dark .tool-color-skill.folded-tool > .folded-tool-bar::before { color: #fbbf24; }
     .tool-color-skill .folded-tool-icon { color: #d97706; }
@@ -2126,45 +2117,35 @@
     html.dark .tool-color-skill .folded-tool-name { color: #fcd34d; }
     .tool-color-skill .folded-tool-desc { color: #b45309; }
     html.dark .tool-color-skill .folded-tool-desc { color: #fbbf24; }
-    .tool-color-skill { background: #fffbeb; }
-    html.dark .tool-color-skill { background: #1c1507; }
     .tool-color-skill > .folded-tool-body { border-top-color: #fde68a; }
     html.dark .tool-color-skill > .folded-tool-body { border-top-color: #78350f; }
 
-    .block-type-tool_result { background: #f3f4f6; }
-    html.dark .block-type-tool_result { background: #1f2937; }
-    .block-type-tool_result .tool-result-status { background: #e5e7eb; }
-    html.dark .block-type-tool_result .tool-result-status { background: #374151; }
+    .block-type-tool_result .tool-result-status { }
+    html.dark .block-type-tool_result .tool-result-status { }
     .block-type-tool_result .folded-tool-icon { color: #16a34a; }
     html.dark .block-type-tool_result .folded-tool-icon { color: #4ade80; }
     .block-type-tool_result .folded-tool-name { color: #374151; }
     html.dark .block-type-tool_result .folded-tool-name { color: #d1d5db; }
     .block-type-tool_result > .folded-tool-body { border-top-color: #d1d5db; }
     html.dark .block-type-tool_result > .folded-tool-body { border-top-color: #4b5563; }
-    .block-type-tool_result.tool-result-error { background: #f3f4f6; }
-    html.dark .block-type-tool_result.tool-result-error { background: #1f2937; }
-    .block-type-tool_result.tool-result-error .tool-result-status { background: #e5e7eb; }
-    html.dark .block-type-tool_result.tool-result-error .tool-result-status { background: #374151; }
+    .block-type-tool_result.tool-result-error { }
+    html.dark .block-type-tool_result.tool-result-error { }
+    .block-type-tool_result.tool-result-error .tool-result-status { }
+    html.dark .block-type-tool_result.tool-result-error .tool-result-status { }
     .block-type-tool_result.tool-result-error .folded-tool-icon { color: #dc2626; }
     html.dark .block-type-tool_result.tool-result-error .folded-tool-icon { color: #f87171; }
     .block-type-tool_result.tool-result-error .folded-tool-name { color: #374151; }
     html.dark .block-type-tool_result.tool-result-error .folded-tool-name { color: #d1d5db; }
 
-    .block-type-code { background: #1e293b; }
-    html.dark .block-type-code { background: #0f172a; }
 
-    .block-type-thinking { background: #f5f3ff; }
-    html.dark .block-type-thinking { background: #1e1033; }
 
-    .block-type-bash { background: #fffbeb; }
-    html.dark .block-type-bash { background: #1c1507; }
 
-    .block-type-system { background: #eef2ff; }
-    html.dark .block-type-system { background: #15103a; }
-    .block-type-system.folded-tool > .folded-tool-bar { background: #e0e7ff; }
-    html.dark .block-type-system.folded-tool > .folded-tool-bar { background: #1e1b4b; }
-    .block-type-system.folded-tool > .folded-tool-bar:hover { background: #c7d2fe; }
-    html.dark .block-type-system.folded-tool > .folded-tool-bar:hover { background: #312e81; }
+    .block-type-system { }
+    html.dark .block-type-system { }
+    .block-type-system.folded-tool > .folded-tool-bar { }
+    html.dark .block-type-system.folded-tool > .folded-tool-bar { }
+    .block-type-system.folded-tool > .folded-tool-bar:hover { }
+    html.dark .block-type-system.folded-tool > .folded-tool-bar:hover { }
     .block-type-system.folded-tool > .folded-tool-bar::before { color: #6366f1; }
     html.dark .block-type-system.folded-tool > .folded-tool-bar::before { color: #a5b4fc; }
     .block-type-system .folded-tool-icon { color: #6366f1; }
@@ -2176,12 +2157,12 @@
     .block-type-system > .folded-tool-body { border-top-color: #c7d2fe; }
     html.dark .block-type-system > .folded-tool-body { border-top-color: #3730a3; }
 
-    .block-type-result { background: #f0fdf4; }
-    html.dark .block-type-result { background: #0a1f0f; }
-    .block-type-result.folded-tool > .folded-tool-bar { background: #dcfce7; }
-    html.dark .block-type-result.folded-tool > .folded-tool-bar { background: #0f2b1a; }
-    .block-type-result.folded-tool > .folded-tool-bar:hover { background: #bbf7d0; }
-    html.dark .block-type-result.folded-tool > .folded-tool-bar:hover { background: #14532d; }
+    .block-type-result { }
+    html.dark .block-type-result { }
+    .block-type-result.folded-tool > .folded-tool-bar { }
+    html.dark .block-type-result.folded-tool > .folded-tool-bar { }
+    .block-type-result.folded-tool > .folded-tool-bar:hover { }
+    html.dark .block-type-result.folded-tool > .folded-tool-bar:hover { }
     .block-type-result.folded-tool > .folded-tool-bar::before { color: #16a34a; }
     html.dark .block-type-result.folded-tool > .folded-tool-bar::before { color: #4ade80; }
     .block-type-result .folded-tool-icon { color: #16a34a; }
@@ -2193,12 +2174,12 @@
     .block-type-result > .folded-tool-body { border-top-color: #bbf7d0; }
     html.dark .block-type-result > .folded-tool-body { border-top-color: #166534; }
 
-    .block-type-error { background: #fef2f2; }
-    html.dark .block-type-error { background: #1c0f0f; }
-    .block-type-error.folded-tool > .folded-tool-bar { background: #fee2e2; }
-    html.dark .block-type-error.folded-tool > .folded-tool-bar { background: #2c1010; }
-    .block-type-error.folded-tool > .folded-tool-bar:hover { background: #fecaca; }
-    html.dark .block-type-error.folded-tool > .folded-tool-bar:hover { background: #451a1a; }
+    .block-type-error { }
+    html.dark .block-type-error { }
+    .block-type-error.folded-tool > .folded-tool-bar { }
+    html.dark .block-type-error.folded-tool > .folded-tool-bar { }
+    .block-type-error.folded-tool > .folded-tool-bar:hover { }
+    html.dark .block-type-error.folded-tool > .folded-tool-bar:hover { }
     .block-type-error.folded-tool > .folded-tool-bar::before { color: #ef4444; }
     html.dark .block-type-error.folded-tool > .folded-tool-bar::before { color: #f87171; }
     .block-type-error .folded-tool-icon { color: #ef4444; }
@@ -2210,23 +2191,11 @@
     .block-type-error > .folded-tool-body { border-top-color: #fecaca; }
     html.dark .block-type-error > .folded-tool-body { border-top-color: #7f1d1d; }
 
-    .block-type-image { background: #fdf2f8; }
-    html.dark .block-type-image { background: #1f0a1a; }
 
-    .block-type-plan { background: #eff6ff; }
-    html.dark .block-type-plan { background: #0c1929; }
 
-    .block-type-usage { background: #f9fafb; }
-    html.dark .block-type-usage { background: #1f2937; }
 
-    .block-type-premature { background: #fffbeb; }
-    html.dark .block-type-premature { background: #1c1507; }
 
-    .block-type-tool_status { background: #f0f9ff; }
-    html.dark .block-type-tool_status { background: #0c1929; }
 
-    .block-type-generic { background: #f9fafb; }
-    html.dark .block-type-generic { background: #1f2937; }
 
     /* --- Code block header (non-collapsible) --- */
     .code-block-header {
@@ -3216,6 +3185,11 @@
               <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
             </svg>
           </button>
+          <button class="steer-btn" id="steerBtn" title="Steer running agent with message" aria-label="Steer agent">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
+            </svg>
+          </button>
           <button class="stop-btn" id="stopBtn" title="Stop running agent (emergency)" aria-label="Stop agent">
             <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
               <path d="M6 6h12v12H6z"/>

package/static/js/client.js

@@ -458,6 +458,7 @@ class AgentGUIClient {
 
     this.ui.stopButton = document.getElementById('stopBtn');
     this.ui.injectButton = document.getElementById('injectBtn');
+    this.ui.steerButton = document.getElementById('steerBtn');
 
     if (this.ui.stopButton) {
       this.ui.stopButton.addEventListener('click', async () => {
@@ -485,6 +486,28 @@ class AgentGUIClient {
       });
     }
 
+    if (this.ui.steerButton) {
+      this.ui.steerButton.addEventListener('click', async () => {
+        if (!this.state.currentConversation) return;
+        const message = this.ui.messageInput?.value || '';
+        if (!message.trim()) {
+          this.showError('Please enter a message to steer');
+          return;
+        }
+        try {
+          const data = await window.wsClient.rpc('conv.steer', { id: this.state.currentConversation.id, content: message });
+          console.log('Steer response:', data);
+          if (this.ui.messageInput) {
+            this.ui.messageInput.value = '';
+            this.ui.messageInput.style.height = 'auto';
+          }
+        } catch (err) {
+          console.error('Failed to steer:', err);
+          this.showError('Failed to steer: ' + err.message);
+        }
+      });
+    }
+
     if (this.ui.messageInput) {
       this.ui.messageInput.addEventListener('keydown', (e) => {
         if (e.key === 'Enter' && e.ctrlKey) {
@@ -708,9 +731,10 @@ class AgentGUIClient {
       return;
     }
 
-    // Show stop and inject buttons when streaming starts for current conversation
+    // Show stop, steer, and inject buttons when streaming starts for current conversation
     if (this.ui.stopButton) this.ui.stopButton.classList.add('visible');
     if (this.ui.injectButton) this.ui.injectButton.classList.add('visible');
+    if (this.ui.steerButton) this.ui.steerButton.classList.add('visible');
     if (this.ui.sendButton) this.ui.sendButton.style.display = 'none';
 
     this.state.streamingConversations.set(data.conversationId, true);
@@ -937,9 +961,10 @@ class AgentGUIClient {
     console.error('Streaming error:', data);
     this._clearThinkingCountdown();
 
-    // Hide stop and inject buttons on error
+    // Hide stop, steer, and inject buttons on error
     if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
     if (this.ui.injectButton) this.ui.injectButton.classList.remove('visible');
+    if (this.ui.steerButton) this.ui.steerButton.classList.remove('visible');
     if (this.ui.sendButton) this.ui.sendButton.style.display = '';
 
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
@@ -988,9 +1013,10 @@ class AgentGUIClient {
     console.log('Streaming completed:', data);
     this._clearThinkingCountdown();
 
-    // Hide stop and inject buttons when streaming completes
+    // Hide stop, steer, and inject buttons when streaming completes
     if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
     if (this.ui.injectButton) this.ui.injectButton.classList.remove('visible');
+    if (this.ui.steerButton) this.ui.steerButton.classList.remove('visible');
     if (this.ui.sendButton) this.ui.sendButton.style.display = '';
 
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
@@ -2437,6 +2463,7 @@ class AgentGUIClient {
 
       if (this.ui.stopButton) this.ui.stopButton.classList.remove('visible');
       if (this.ui.injectButton) this.ui.injectButton.classList.remove('visible');
+      if (this.ui.steerButton) this.ui.steerButton.classList.remove('visible');
       if (this.ui.sendButton) this.ui.sendButton.style.display = '';
 
       var prevId = this.state.currentConversation?.id;