From edd4b37325a899b7606a83ec8ba2eb38350d9ef7 Mon Sep 17 00:00:00 2001
From: Chris Hengge <chris.hengge@gmail.com>
Date: Sat, 21 Mar 2026 21:09:00 -0500
Subject: [PATCH 1/5] fix(web/dashboard): rename channels card heading and add
 internal scroll (#4178)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The card heading used the key dashboard.active_channels ("Active Channels")
even though the card has a toggle between Active and All views, making the
static heading misleading. The channel list div had no height cap, causing
tall channel lists to stretch the card and break 3-column grid alignment.

- Change heading to t("dashboard.channels") — key already present in all
  three locales (zh/en/tr), no i18n changes needed
- Add overflow-y-auto max-h-48 pr-1 to the channel list wrapper so it
  scrolls internally instead of stretching the card
---
 web/src/pages/Dashboard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index 587ce3cdb..719e21296 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -236,7 +236,7 @@ export default function Dashboard() {
               className="text-sm font-semibold uppercase tracking-wider"
               style={{ color: "var(--pc-text-primary)" }}
             >
-              {t("dashboard.active_channels")}
+              {t("dashboard.channels")}
             </h2>
             <button
               onClick={() => setShowAllChannels((v) => !v)}
@@ -265,7 +265,7 @@ export default function Dashboard() {
                 : t("dashboard.filter_active")}
             </button>
           </div>
-          <div className="space-y-2">
+          <div className="space-y-2 overflow-y-auto max-h-48 pr-1">
             {Object.entries(status.channels).length === 0 ? (
               <p className="text-sm" style={{ color: "var(--pc-text-faint)" }}>
                 {t("dashboard.no_channels")}

From a84aa60554353c4d5e63fc4ab7f3f13c31113559 Mon Sep 17 00:00:00 2001
From: Chris Hengge <chris.hengge@gmail.com>
Date: Sat, 21 Mar 2026 21:11:15 -0500
Subject: [PATCH 2/5] fix(web/cron): contain table scroll within viewport
 (#4186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The cron page used a block-flow root with no height constraint, causing
the jobs table to grow taller than the viewport and the page itself to
scroll. This was inconsistent with the Memory page pattern.

- Change page root to flex flex-col h-full matching Memory's layout
- Table wrapper gains flex-1 min-h-0 overflow-auto so it fills
  remaining height and scrolls both axes internally
- Table header already has position:sticky so it pins correctly
  inside the scrolling container with no CSS change needed

Risk: Low — layout only, no logic or API change.
Does not change: job CRUD, modal, catch-up toggle, run history panel.
---
 web/src/pages/Cron.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Cron.tsx b/web/src/pages/Cron.tsx
index cb2904b91..c45d7dc56 100644
--- a/web/src/pages/Cron.tsx
+++ b/web/src/pages/Cron.tsx
@@ -293,7 +293,7 @@ export default function Cron() {
   }
 
   return (
-    <div className="p-6 space-y-6 animate-fade-in">
+    <div className="flex flex-col h-full p-6 gap-6 animate-fade-in overflow-hidden">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -415,7 +415,7 @@ export default function Cron() {
           <p style={{ color: 'var(--pc-text-muted)' }}>{t('cron.empty')}</p>
         </div>
       ) : (
-        <div className="card overflow-x-auto rounded-2xl">
+        <div className="card overflow-auto rounded-2xl flex-1 min-h-0">
           <table className="table-electric">
             <thead>
               <tr>

From 0aefde95f20b235a85426f200cf3b3b5824ef537 Mon Sep 17 00:00:00 2001
From: Chris Hengge <chris.hengge@gmail.com>
Date: Sat, 21 Mar 2026 21:11:18 -0500
Subject: [PATCH 3/5] fix(web/config): fill viewport and add TOML syntax
 highlighting (#4201)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two issues with the config editor:

Layout: the page root had no height constraint and the textarea used
min-h-[500px] resize-y, causing independent scrollbars on both the
page and the editor. Fixed by adopting the Memory/Cron flex column
pattern so the editor fills the remaining viewport height with a single
scroll surface.

Highlighting: plain textarea with no visual structure for TOML.
Added a zero-dependency layered pre-overlay technique — no new npm
packages (per CLAUDE.md anti-pattern rules). A pre element sits
absolute behind a transparent textarea; highlightToml() produces HTML
colour-coding sections, keys, strings, booleans, numbers, datetimes,
and comments via per-line regex. onScroll syncs the overlay. Tab key
inserts two spaces instead of leaving focus.

dangerouslySetInnerHTML used on the pre — content is the user's own
local config, not from the network, risk equivalent to any local editor.

Risk: Low-Medium — no API or backend change. New rendering logic
in editor only.
Does not change: save/load API calls, validation, sensitive field
masking behaviour.
---
 web/src/pages/Config.tsx | 136 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 126 insertions(+), 10 deletions(-)

diff --git a/web/src/pages/Config.tsx b/web/src/pages/Config.tsx
index 66167b791..f23d25b47 100644
--- a/web/src/pages/Config.tsx
+++ b/web/src/pages/Config.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import {
   Settings,
   Save,
@@ -9,6 +9,91 @@ import {
 import { getConfig, putConfig } from '@/lib/api';
 import { t } from '@/lib/i18n';
 
+
+// ---------------------------------------------------------------------------
+// Lightweight zero-dependency TOML syntax highlighter.
+// Produces an HTML string. The <pre> overlay sits behind the <textarea> so
+// the textarea remains the editable surface; the pre just provides colour.
+// ---------------------------------------------------------------------------
+function highlightToml(raw: string): string {
+  const lines = raw.split('\n');
+  const result: string[] = [];
+
+  for (const line of lines) {
+    const escaped = line
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+
+    // Section header  [section] or [[array]]
+    if (/^\s*\[/.test(escaped)) {
+      result.push(`<span style="color:#67e8f9;font-weight:600">${escaped}</span>`);
+      continue;
+    }
+
+    // Comment line
+    if (/^\s*#/.test(escaped)) {
+      result.push(`<span style="color:#52525b;font-style:italic">${escaped}</span>`);
+      continue;
+    }
+
+    // Key = value line
+    const kvMatch = escaped.match(/^(\s*)([A-Za-z0-9_\-.]+)(\s*=\s*)(.*)$/);
+    if (kvMatch) {
+      const [, indent, key, eq, rawValue] = kvMatch;
+      const value = colorValue(rawValue ?? '');
+      result.push(
+        `${indent}<span style="color:#a78bfa">${key}</span>`
+        + `<span style="color:#71717a">${eq}</span>${value}`
+      );
+      continue;
+    }
+
+    result.push(escaped);
+  }
+
+  return result.join('\n') + '\n';
+}
+
+function colorValue(v: string): string {
+  const trimmed = v.trim();
+  const commentIdx = findUnquotedHash(trimmed);
+  if (commentIdx !== -1) {
+    const valueCore = trimmed.slice(0, commentIdx).trimEnd();
+    const comment = `<span style="color:#52525b;font-style:italic">${trimmed.slice(commentIdx)}</span>`;
+    const leading = v.slice(0, v.indexOf(trimmed));
+    return leading + colorScalar(valueCore) + ' ' + comment;
+  }
+  return colorScalar(v);
+}
+
+function findUnquotedHash(s: string): number {
+  let inSingle = false;
+  let inDouble = false;
+  for (let i = 0; i < s.length; i++) {
+    const c = s[i];
+    if (c === "'" && !inDouble) inSingle = !inSingle;
+    else if (c === '"' && !inSingle) inDouble = !inDouble;
+    else if (c === '#' && !inSingle && !inDouble) return i;
+  }
+  return -1;
+}
+
+function colorScalar(v: string): string {
+  const t = v.trim();
+  if (t === 'true' || t === 'false')
+    return `<span style="color:#34d399">${v}</span>`;
+  if (/^-?\d[\d_]*(\.[\d_]*)?([eE][+-]?\d+)?$/.test(t))
+    return `<span style="color:#fbbf24">${v}</span>`;
+  if (t.startsWith('"') || t.startsWith("'"))
+    return `<span style="color:#86efac">${v}</span>`;
+  if (t.startsWith('[') || t.startsWith('{'))
+    return `<span style="color:#e2e8f0">${v}</span>`;
+  if (/^\d{4}-\d{2}-\d{2}/.test(t))
+    return `<span style="color:#fb923c">${v}</span>`;
+  return v;
+}
+
 export default function Config() {
   const [config, setConfig] = useState('');
   const [loading, setLoading] = useState(true);
@@ -16,6 +101,16 @@ export default function Config() {
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
 
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const preRef = useRef<HTMLPreElement>(null);
+
+  const syncScroll = useCallback(() => {
+    if (preRef.current && textareaRef.current) {
+      preRef.current.scrollTop = textareaRef.current.scrollTop;
+      preRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+  }, []);
+
   useEffect(() => {
     getConfig()
       .then((data) => { setConfig(typeof data === 'string' ? data : JSON.stringify(data, null, 2)); })
@@ -53,7 +148,7 @@ export default function Config() {
   }
 
   return (
-    <div className="p-6 space-y-6 animate-fade-in">
+    <div className="flex flex-col h-full p-6 gap-6 animate-fade-in overflow-hidden">
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
@@ -95,7 +190,7 @@ export default function Config() {
       )}
 
       {/* Config Editor */}
-      <div className="card overflow-hidden rounded-2xl">
+      <div className="card overflow-hidden rounded-2xl flex flex-col flex-1 min-h-0">
         <div className="flex items-center justify-between px-4 py-2.5 border-b" style={{ borderColor: 'var(--pc-border)', background: 'var(--pc-accent-glow)' }}>
           <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: 'var(--pc-text-muted)' }}>
             {t('config.toml_label')}
@@ -104,13 +199,34 @@ export default function Config() {
             {config.split('\n').length} {t('config.lines')}
           </span>
         </div>
-        <textarea
-          value={config}
-          onChange={(e) => setConfig(e.target.value)}
-          spellCheck={false}
-          className="w-full min-h-[500px] text-sm p-4 resize-y focus:outline-none font-mono"
-          style={{ background: 'var(--pc-bg-base)', color: 'var(--pc-text-secondary)', tabSize: 4 }}
-        />
+        <div className="relative flex-1 min-h-0 overflow-hidden">
+          <pre
+            ref={preRef}
+            aria-hidden="true"
+            className="absolute inset-0 text-sm p-4 font-mono overflow-auto whitespace-pre pointer-events-none m-0"
+            style={{ background: 'var(--pc-bg-base)', tabSize: 4 }}
+            dangerouslySetInnerHTML={{ __html: highlightToml(config) }}
+          />
+          <textarea
+            ref={textareaRef}
+            value={config}
+            onChange={(e) => setConfig(e.target.value)}
+            onScroll={syncScroll}
+            onKeyDown={(e) => {
+              if (e.key === 'Tab') {
+                e.preventDefault();
+                const el = e.currentTarget;
+                const start = el.selectionStart;
+                const end = el.selectionEnd;
+                setConfig(config.slice(0, start) + '  ' + config.slice(end));
+                requestAnimationFrame(() => { el.selectionStart = el.selectionEnd = start + 2; });
+              }
+            }}
+            spellCheck={false}
+            className="absolute inset-0 w-full h-full text-sm p-4 resize-none focus:outline-none font-mono caret-white"
+            style={{ background: 'transparent', color: 'transparent', tabSize: 4 }}
+          />
+        </div>
       </div>
     </div>
   );

From 3c1e710c380a09074616f8fd4175f1ba60ade5de Mon Sep 17 00:00:00 2001
From: Chris Hengge <chris.hengge@gmail.com>
Date: Sat, 21 Mar 2026 21:11:20 -0500
Subject: [PATCH 4/5] fix(web/logs): layout, footer status indicator, and
 empty-state note (#4203)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three issues addressed:

Empty page: the logs page shows nothing at idle because the SSE stream
only carries ObserverEvent variants (llm_request, tool_call, error,
agent_start, agent_end). Daemon stdout and RUST_LOG tracing output go
to the terminal/log file and are never forwarded to the broadcast
channel — this is correct behaviour, not a misconfiguration. Added a
dismissible informational banner explaining what appears on the stream
and how to access tracing output (RUST_LOG + terminal).

Layout: flex-1 log entries div was missing min-h-0, which can cause
flex children to refuse to shrink below content size in some browsers.

Connection indicator: moved from the toolbar (where it cluttered the
title and controls) to a compact footer strip below the scroll area,
matching the /agent page pattern exactly.

Also added colour rules for llm_request, agent_start, agent_end,
tool_call_start event types which previously fell through to default
grey.

Risk: Low — UI layout and informational copy only, no backend change.
Does not change: SSE connection logic, event parsing, pause/resume,
type filters, or the underlying broadcast observer.
---
 web/src/pages/Logs.tsx | 50 ++++++++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index 0d96d92f7..a47cad64f 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -24,7 +24,13 @@ function eventTypeStyle(type: string): { color: string; bg: string; border: stri
       return { color: 'var(--color-status-warning)', bg: 'rgba(255, 170, 0, 0.06)', border: 'rgba(255, 170, 0, 0.2)' };
     case 'tool_call':
     case 'tool_result':
+    case 'tool_call_start':
       return { color: '#a78bfa', bg: 'rgba(167, 139, 250, 0.06)', border: 'rgba(167, 139, 250, 0.2)' };
+    case 'llm_request':
+      return { color: '#38bdf8', bg: 'rgba(56, 189, 248, 0.06)', border: 'rgba(56, 189, 248, 0.2)' };
+    case 'agent_start':
+    case 'agent_end':
+      return { color: '#34d399', bg: 'rgba(52, 211, 153, 0.06)', border: 'rgba(52, 211, 153, 0.2)' };
     case 'message':
     case 'chat':
       return { color: 'var(--pc-accent)', bg: 'var(--pc-accent-glow)', border: 'var(--pc-accent-dim)' };
@@ -43,6 +49,7 @@ export default function Logs() {
   const [paused, setPaused] = useState(false);
   const [connected, setConnected] = useState(false);
   const [autoScroll, setAutoScroll] = useState(true);
+  const [infoDismissed, setInfoDismissed] = useState(false);
   const [typeFilters, setTypeFilters] = useState<Set<string>>(new Set());
   const containerRef = useRef<HTMLDivElement>(null);
   const sseRef = useRef<SSEClient | null>(null);
@@ -121,21 +128,12 @@ export default function Logs() {
   const filteredEntries = typeFilters.size === 0 ? entries : entries.filter((e) => typeFilters.has(e.event.type));
 
   return (
-    <div className="flex flex-col h-[calc(100vh-3.5rem)]">
+    <div className="flex flex-col h-full">
       {/* Toolbar */}
       <div className="flex items-center justify-between px-6 py-3 border-b animate-fade-in" style={{ borderColor: 'var(--pc-border)', background: 'var(--pc-bg-surface)' }}>
         <div className="flex items-center gap-3">
           <Activity className="h-5 w-5" style={{ color: 'var(--pc-accent)' }} />
           <h2 className="text-sm font-semibold uppercase tracking-wider" style={{ color: 'var(--pc-text-primary)' }}>{t('logs.live_logs')}</h2>
-          <div className="flex items-center gap-2 ml-2">
-            <span className="status-dot" style={
-              connected ? { background: 'var(--color-status-success)', boxShadow: '0 0 6px var(--color-status-success)' } : { background: 'var(--color-status-error)', boxShadow: '0 0 6px var(--color-status-error)' }
-            }
-            />
-            <span className="text-[10px]" style={{ color: 'var(--pc-text-faint)' }}>
-              {connected ? t('logs.connected') : t('logs.disconnected')}
-            </span>
-          </div>
           <span className="text-[10px] font-mono ml-2" style={{ color: 'var(--pc-text-faint)' }}>
             {filteredEntries.length} {t('logs.events')}
           </span>
@@ -195,11 +193,32 @@ export default function Logs() {
         </div>
       )}
 
+      {/* Informational banner — what appears here and what does not */}
+      {!infoDismissed && (
+        <div className="flex items-start gap-3 px-6 py-3 border-b flex-shrink-0" style={{ borderColor: 'rgba(56, 189, 248, 0.2)', background: 'rgba(56, 189, 248, 0.05)' }}>
+          <div className="flex-1 text-xs" style={{ color: 'var(--pc-text-secondary)' }}>
+            <span className="font-semibold" style={{ color: '#38bdf8' }}>What appears here: </span>
+            agent activity over SSE — LLM requests, tool calls, agent start/end, and errors.
+            {' '}<span className="font-semibold" style={{ color: 'var(--pc-text-muted)' }}>What does not: </span>
+            daemon stdout and <code>RUST_LOG</code> tracing output go to the terminal or log file, not this stream.
+            {' '}To see tracing logs, run the daemon with <code>RUST_LOG=info zeroclaw</code> and check your terminal.
+          </div>
+          <button
+            onClick={() => setInfoDismissed(true)}
+            className="flex-shrink-0 text-[10px] btn-icon"
+            aria-label="Dismiss"
+            style={{ color: 'var(--pc-text-faint)' }}
+          >
+            ✕
+          </button>
+        </div>
+      )}
+
       {/* Log entries */}
       <div
         ref={containerRef}
         onScroll={handleScroll}
-        className="flex-1 overflow-y-auto p-4 space-y-2"
+        className="flex-1 overflow-y-auto p-4 space-y-2 min-h-0"
       >
         {filteredEntries.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full animate-fade-in" style={{ color: 'var(--pc-text-muted)' }}>
@@ -249,6 +268,15 @@ export default function Logs() {
           })
           )}
       </div>
+      {/* Footer: connection status */}
+      <div className="flex items-center justify-center gap-2 px-6 py-2 border-t flex-shrink-0" style={{ borderColor: 'var(--pc-border)', background: 'var(--pc-bg-surface)' }}>
+        <span className="status-dot" style={
+          connected ? { background: 'var(--color-status-success)', boxShadow: '0 0 6px var(--color-status-success)' } : { background: 'var(--color-status-error)', boxShadow: '0 0 6px var(--color-status-error)' }
+        } />
+        <span className="text-[10px]" style={{ color: 'var(--pc-text-faint)' }}>
+          {connected ? t('logs.connected') : t('logs.disconnected')}
+        </span>
+      </div>
     </div>
   );
 }

From daca2d9354f647fb06f558e3e45cacdd8e006c05 Mon Sep 17 00:00:00 2001
From: Chris Hengge <chris.hengge@gmail.com>
Date: Sat, 21 Mar 2026 21:25:18 -0500
Subject: [PATCH 5/5] fix(web/tools): make section headings collapsible (#4180)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Agent Tools and CLI Tools section headings were static divs with no
way to collapse sections the user is not interested in, making the
page unwieldy with a large tool set.

- Convert both section heading divs to button elements toggling
  agentSectionOpen / cliSectionOpen state (both default open)
- Section content renders conditionally on those booleans
- ChevronsUpDown icon added (already in lucide-react bundle) that
  fades in on hover and indicates collapsed/expanded state
- No change to individual tool card parameter schema expand/collapse

Risk: Low — UI state only, no API or logic change.
Does not change: search/filter behaviour, tool card expand/collapse,
CLI tools table structure.
---
 web/src/pages/Tools.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/pages/Tools.tsx b/web/src/pages/Tools.tsx
index eb10dc5b7..34a28826f 100644
--- a/web/src/pages/Tools.tsx
+++ b/web/src/pages/Tools.tsx
@@ -6,6 +6,7 @@ import {
   ChevronRight,
   Terminal,
   Package,
+  ChevronsUpDown,
 } from 'lucide-react';
 import type { ToolSpec, CliTool } from '@/types/api';
 import { getTools, getCliTools } from '@/lib/api';