@polderlabs/bizar 4.5.2 → 4.7.1

package/bizar-dash/src/web/components/VirtualList.tsx

@@ -0,0 +1,53 @@
+// src/web/components/VirtualList.tsx — hand-rolled virtual scrolling (no external deps).
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+
+export function VirtualList<T>({
+  items,
+  renderItem,
+  itemHeight = 80,
+  height = 400,
+  overscan = 5,
+  className,
+}: {
+  items: T[];
+  renderItem: (item: T, index: number) => React.ReactNode;
+  itemHeight?: number;
+  height?: number;
+  overscan?: number;
+  className?: string;
+}) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const visibleRange = useMemo(() => {
+    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+    const end = Math.min(
+      items.length,
+      Math.ceil((scrollTop + height) / itemHeight) + overscan,
+    );
+    return { start, end };
+  }, [scrollTop, itemHeight, height, overscan, items.length]);
+
+  const totalHeight = items.length * itemHeight;
+  const offsetY = visibleRange.start * itemHeight;
+  const visibleItems = items.slice(visibleRange.start, visibleRange.end);
+
+  return (
+    <div
+      ref={containerRef}
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+      style={{ height, overflowY: 'auto' }}
+      className={className}
+    >
+      <div style={{ height: totalHeight, position: 'relative' }}>
+        <div style={{ transform: `translateY(${offsetY}px)` }}>
+          {visibleItems.map((item, i) => (
+            <div key={visibleRange.start + i} style={{ height: itemHeight }}>
+              {renderItem(item, visibleRange.start + i)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/chat/ChatThread.tsx

@@ -8,6 +8,7 @@ import { useEffect, useRef } from 'react';
 import { LoadingSkeleton } from './LoadingSkeleton';
 import { WelcomeScreen } from './WelcomeScreen';
 import { MessageBubble } from './MessageBubble';
+import { VirtualList } from '../VirtualList';
 
 interface Message {
   role?: string;
@@ -105,17 +106,22 @@ export function ChatThread({
 
   return (
     <div className="chat-thread legacy" ref={innerRef}>
-      {messages.map((m, i) => (
-        <MessageBubble
-          key={`${i}-${m.ts ?? ''}`}
-          message={m}
-          pinned={pinned.has(i)}
-          onCopy={() => onCopy(m)}
-          onDelete={() => onDelete(i)}
-          onTogglePin={() => onTogglePin(i)}
-          onRegenerate={() => onRegenerate(String(m.ts ?? i))}
-        />
-      ))}
+      <VirtualList
+        items={messages}
+        itemHeight={120}
+        height={800}
+        className="chat-thread-virtual"
+        renderItem={(m, i) => (
+          <MessageBubble
+            message={m}
+            pinned={pinned.has(i)}
+            onCopy={() => onCopy(m)}
+            onDelete={() => onDelete(i)}
+            onTogglePin={() => onTogglePin(i)}
+            onRegenerate={() => onRegenerate(String(m.ts ?? i))}
+          />
+        )}
+      />
     </div>
   );
 }

package/bizar-dash/src/web/components/chat/Composer.tsx

@@ -125,6 +125,8 @@ export function Composer({
           multiple
           style={{ display: 'none' }}
           onChange={onFiles}
+          aria-label="Attach files"
+          tabIndex={-1}
         />
         <button
           type="button"

package/bizar-dash/src/web/hooks/useI18n.ts

@@ -0,0 +1,13 @@
+// src/web/hooks/useI18n.ts — React hook for translations.
+import { useState } from 'react';
+import { t, setLocale, getLocale } from '../lib/i18n';
+
+export function useI18n() {
+  const [, force] = useState(0);
+  return {
+    t,
+    setLocale,
+    locale: getLocale(),
+    rerender: () => force((n) => n + 1),
+  };
+}

package/bizar-dash/src/web/lib/i18n.ts

@@ -0,0 +1,25 @@
+// src/web/lib/i18n.ts — tiny key-based translation system.
+export type Locale = 'en' | string;
+export type Translations = Record<string, string>;
+
+let currentLocale: Locale = 'en';
+const translations: Record<Locale, Translations> = { en: {} };
+
+export function setLocale(locale: Locale, dict?: Translations) {
+  currentLocale = locale;
+  if (dict) translations[locale] = dict;
+}
+
+export function t(key: string, vars?: Record<string, string | number>): string {
+  let s = translations[currentLocale]?.[key] || translations['en']?.[key] || key;
+  if (vars) {
+    for (const [k, v] of Object.entries(vars)) {
+      s = s.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v));
+    }
+  }
+  return s;
+}
+
+export function getLocale(): Locale {
+  return currentLocale;
+}

package/bizar-dash/src/web/locales/en.json

@@ -0,0 +1,52 @@
+{
+  "settings.title": "Settings",
+  "settings.general": "General",
+  "settings.envVars": "Environment Variables",
+  "settings.providers": "Providers",
+  "settings.theme": "Theme",
+  "settings.themeMode": "Mode",
+  "settings.themeAccent": "Accent",
+  "settings.layout": "Layout",
+  "settings.notifications": "Notifications",
+  "settings.activity": "Activity",
+  "settings.save": "Save",
+  "settings.reset": "Reset",
+  "settings.reload": "Reload",
+  "settings.dashboard": "Dashboard",
+  "settings.background": "Background Agents",
+  "settings.systemLlm": "System LLM API",
+  "settings.headroom": "Headroom",
+  "settings.updates": "Updates",
+  "settings.about": "About",
+  "settings.auth": "Authentication",
+  "settings.agents": "Agent Behavior",
+  "settings.service": "Service",
+  "settings.tailscale": "Tailscale Serve",
+  "chat.title": "Chat",
+  "chat.newSession": "New session",
+  "chat.sendMessage": "Send message",
+  "chat.placeholder": "Type your message…",
+  "chat.export": "Export transcript",
+  "chat.rename": "Rename session",
+  "chat.delete": "Delete session",
+  "memory.title": "Memory",
+  "memory.overview": "Overview",
+  "memory.lightrag": "LightRAG",
+  "memory.obsidian": "Obsidian Vault",
+  "memory.gitSync": "Git Sync",
+  "memory.semantic": "Semantic Search",
+  "memory.config": "Config",
+  "memory.refresh": "Refresh memory",
+  "tasks.title": "Tasks",
+  "tasks.create": "Create task",
+  "tasks.complete": "Mark complete",
+  "tasks.delete": "Delete task",
+  "activity.title": "Activity",
+  "activity.live": "Live",
+  "activity.paused": "Paused",
+  "activity.refresh": "Refresh",
+  "history.title": "History",
+  "history.export": "Export",
+  "overview.title": "Overview",
+  "overview.submit": "Submit to Odin"
+}

package/bizar-dash/src/web/main.tsx

@@ -3,6 +3,11 @@ import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import { MobileApp } from './MobileApp';
+import en from './locales/en.json';
+import { setLocale } from './lib/i18n';
+
+// Initialize i18n
+setLocale('en', en);
 // Import mobile CSS so the MobileApp renders with styles when served
 // from index.html (e.g. when the auto-redirect to /m is bypassed).
 import './styles/main.css';

package/bizar-dash/src/web/styles/main.css

@@ -101,6 +101,41 @@ pre,
   border: 0;
 }
 
+/* v4.8.0 — WCAG 2.2 AA: skip-to-main-content link. Visually hidden
+   until focused (keyboard tab), then pops in at the top-left so
+   users can jump past the topbar + sidebar into the active view.
+   Anchors must be focusable by default; we just hide them visually. */
+.skip-to-main {
+  position: absolute;
+  top: -100px;
+  left: var(--space-2);
+  z-index: 9999;
+  padding: 10px 14px;
+  background: var(--accent);
+  color: #ffffff;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  box-shadow: var(--shadow-2);
+  transition: top 120ms var(--ease);
+}
+.skip-to-main:focus,
+.skip-to-main:focus-visible {
+  top: var(--space-2);
+  outline: 2px solid var(--accent-2);
+  outline-offset: 2px;
+}
+
+/* v4.8.0 — Make <main> programmatically focusable for the skip link
+   without a visible focus ring (it has no interactive content). */
+#main-content:focus {
+  outline: none;
+}
+#main-content:focus-visible {
+  outline: none;
+}
+
 /* ─── Theme tokens ─────────────────────────────────────────────────── */
 
 :root {
@@ -258,10 +293,10 @@ pre,
   --accent-glow: rgba(124, 58, 237, 0.18);
   --accent-soft: rgba(124, 58, 237, 0.06);
 
-  --success: #059669;
-  --warning: #d97706;
-  --error: #dc2626;
-  --info: #2563eb;
+  --success: #047857;
+  --warning: #b45309;
+  --error: #b91c1c;
+  --info: #1d4ed8;
   --success-soft: rgba(5, 150, 105, 0.12);
   --error-soft: rgba(220, 38, 38, 0.08);
   --warning-soft: rgba(217, 119, 6, 0.12);
@@ -281,10 +316,12 @@ pre,
   /* v3.21.x — Surface and semantic tokens (light theme overrides). */
   --surface-1: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
   --surface-2: color-mix(in oklab, var(--bg) 84%, var(--text) 16%);
-  --success: oklch(0.62 0.16 145);
-  --warning: oklch(0.72 0.14 70);
-  --error: oklch(0.60 0.20 25);
-  --info: oklch(0.62 0.13 235);
+  /* v4.8.0 — Darken light-theme status colors so they pass WCAG AA (4.5:1)
+     against the light surface (#f7f8fa). */
+  --success: oklch(0.48 0.14 145);
+  --warning: oklch(0.55 0.15 70);
+  --error: oklch(0.48 0.20 25);
+  --info: oklch(0.48 0.16 235);
   --bg-1: #f4f4f5;
   --bg-2: #e4e4e7;
 
@@ -945,6 +982,17 @@ pre,
   box-shadow: 0 0 0 3px var(--accent-bg);
 }
 
+/* v4.8.0 — Placeholder color must pass AA (4.5:1) against input
+   backgrounds on both themes. Default browser placeholder is too
+   light on dark and too dark on light, so we pin to --text-dim
+   which is computed to ~9:1 (dark) / ~6:1 (light). */
+.input::placeholder,
+.textarea::placeholder,
+.select::placeholder {
+  color: var(--text-dim);
+  opacity: 1;
+}
+
 .textarea.invalid {
   border-color: var(--error);
 }
@@ -5004,6 +5052,12 @@ kbd {
   cursor: pointer;
   user-select: none;
   transition: background var(--motion-fast) var(--ease);
+  background: transparent;
+  border: 0;
+  color: inherit;
+  text-align: left;
+  width: 100%;
+  font: inherit;
 }
 
 .mods-registry-head:hover {
@@ -5214,6 +5268,14 @@ kbd {
   cursor: pointer;
   user-select: none;
   padding: 4px 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  text-align: left;
+  font: inherit;
+}
+button.mod-instructions-head {
+  width: 100%;
 }
 .mod-instructions-head:hover { color: var(--accent); }
 .mod-instructions-spacer { flex: 1; }

package/bizar-dash/src/web/views/Activity.tsx

@@ -35,6 +35,7 @@ import { Button } from '../components/Button';
 import { Card, CardTitle } from '../components/Card';
 import { EmptyState } from '../components/EmptyState';
 import { Spinner } from '../components/Spinner';
+import { VirtualList } from '../components/VirtualList';
 import { useToast } from '../components/Toast';
 import { useModal } from '../components/Modal';
 import { api } from '../lib/api';
@@ -776,23 +777,29 @@ export function Activity({ snapshot, refreshSnapshot }: Props) {
                     <p>No events yet.</p>
                   </div>
                 ) : (
-                  [...events].reverse().map((ev, i) => {
-                    const Icon =
-                      ev.author ? Bot : ev.kind === 'task' ? CheckSquare : ev.kind === 'bg' ? Cpu : ActivityIcon;
-                    return (
-                      <div key={`${ev.ts}-${i}`} className="tl-stream-event">
-                        <span className="tl-stream-event-time">
-                          {new Date(ev.ts).toLocaleTimeString('en-GB', { hour12: false })}
-                        </span>
-                        <span className="tl-stream-event-icon" style={{ color: statusColor(ev.kind) }}>
-                          <Icon size={12} />
-                        </span>
-                        <span className="tl-stream-event-text">
-                          {ev.author || ev.text || ev.kind}
-                        </span>
-                      </div>
-                    );
-                  })
+                  <VirtualList
+                    items={[...events].reverse()}
+                    itemHeight={40}
+                    height={400}
+                    className="tl-stream-virtual"
+                    renderItem={(ev) => {
+                      const Icon =
+                        ev.author ? Bot : ev.kind === 'task' ? CheckSquare : ev.kind === 'bg' ? Cpu : ActivityIcon;
+                      return (
+                        <div className="tl-stream-event">
+                          <span className="tl-stream-event-time">
+                            {new Date(ev.ts).toLocaleTimeString('en-GB', { hour12: false })}
+                          </span>
+                          <span className="tl-stream-event-icon" style={{ color: statusColor(ev.kind) }}>
+                            <Icon size={12} />
+                          </span>
+                          <span className="tl-stream-event-text">
+                            {ev.author || ev.text || ev.kind}
+                          </span>
+                        </div>
+                      );
+                    }}
+                  />
                 )}
               </div>
             </aside>
@@ -1102,7 +1109,9 @@ export function Activity({ snapshot, refreshSnapshot }: Props) {
                         </Button>
                       </div>
                       <div className="tl-form-row">
+                        <label htmlFor="bg-message-input" className="sr-only">Send a message to this bg session</label>
                         <input
+                          id="bg-message-input"
                           className="input"
                           placeholder="Send a message to this bg session…"
                           value={bgMessage}
@@ -1110,6 +1119,7 @@ export function Activity({ snapshot, refreshSnapshot }: Props) {
                           onKeyDown={(e) => {
                             if (e.key === 'Enter') onSendBgMessage();
                           }}
+                          aria-label="Send a message to this bg session"
                         />
                         <Button variant="primary" size="sm" disabled={!bgMessage.trim()} onClick={onSendBgMessage}>
                           <Send size={12} /> Send
@@ -1120,18 +1130,22 @@ export function Activity({ snapshot, refreshSnapshot }: Props) {
 
                   {selectedItem.kind !== 'bg' && (
                     <div className="tl-detail-create">
-                      <div className="field-label">Create follow-up task</div>
+                      <label className="field-label" htmlFor="followup-task-title">Create follow-up task</label>
                       <input
+                        id="followup-task-title"
                         className="input"
                         placeholder="Task title"
                         value={taskTitle}
                         onChange={(e) => setTaskTitle(e.target.value)}
                       />
                       <div className="tl-form-row">
+                        <label htmlFor="followup-task-priority" className="sr-only">Task priority</label>
                         <select
+                          id="followup-task-priority"
                           className="select"
                           value={taskPriority}
                           onChange={(e) => setTaskPriority(e.target.value)}
+                          aria-label="Task priority"
                         >
                           <option value="low">Low</option>
                           <option value="normal">Normal</option>
@@ -1173,7 +1187,9 @@ export function Activity({ snapshot, refreshSnapshot }: Props) {
                       ))}
                     </ul>
                     <div className="comment-input-row">
+                      <label htmlFor="comment-input" className="sr-only">Add a comment</label>
                       <input
+                        id="comment-input"
                         className="input"
                         placeholder="Add a comment…"
                         value={commentText}
@@ -1181,6 +1197,7 @@ export function Activity({ snapshot, refreshSnapshot }: Props) {
                         onKeyDown={(e) => {
                           if (e.key === 'Enter' && !e.shiftKey) onAddComment();
                         }}
+                        aria-label="Add a comment"
                       />
                       <Button
                         variant="secondary"

package/bizar-dash/src/web/views/Agents.tsx

@@ -144,16 +144,18 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
       width: 640,
       children: (
         <div className="agent-form">
-          <label className="field-label">Name (a-z, 0-9, dashes)</label>
+          <label className="field-label" htmlFor="agent-new-name">Name (a-z, 0-9, dashes)</label>
           <input
+            id="agent-new-name"
             ref={(el) => (nameEl = el)}
             className="input"
             type="text"
             placeholder="my-agent"
             autoFocus
           />
-          <label className="field-label">Description</label>
+          <label className="field-label" htmlFor="agent-new-desc">Description</label>
           <input
+            id="agent-new-desc"
             ref={(el) => { descEl = el; }}
             className="input"
             type="text"
@@ -161,8 +163,8 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
           />
           <div className="task-form-row">
             <div className="task-form-field">
-              <label className="field-label">Model</label>
-              <select ref={(el) => (modelEl = el)} className="select" defaultValue="">
+              <label className="field-label" htmlFor="agent-new-model">Model</label>
+              <select id="agent-new-model" ref={(el) => (modelEl = el)} className="select" defaultValue="">
                 <option value="">(provider default)</option>
                 {MODELS.map((m) => (
                   <option key={m} value={m}>{m}</option>
@@ -170,22 +172,22 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
               </select>
             </div>
             <div className="task-form-field">
-              <label className="field-label">Mode</label>
-              <select ref={(el) => (modeEl = el)} className="select" defaultValue="subagent">
+              <label className="field-label" htmlFor="agent-new-mode">Mode</label>
+              <select id="agent-new-mode" ref={(el) => (modeEl = el)} className="select" defaultValue="subagent">
                 <option value="primary">primary</option>
                 <option value="subagent">subagent</option>
                 <option value="all">all</option>
               </select>
             </div>
             <div className="task-form-field" style={{ flex: '0 0 80px' }}>
-              <label className="field-label">Color</label>
-              <input ref={(el) => (colorEl = el)} className="input" type="color" defaultValue="#8b5cf6" />
+              <label className="field-label" htmlFor="agent-new-color">Color</label>
+              <input id="agent-new-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue="#8b5cf6" />
             </div>
           </div>
           <div className="task-form-row">
             <div className="task-form-field" style={{ flex: 1 }}>
-              <label className="field-label">Category</label>
-              <select ref={(el) => (categoryEl = el)} className="select" defaultValue="">
+              <label className="field-label" htmlFor="agent-new-category">Category</label>
+              <select id="agent-new-category" ref={(el) => (categoryEl = el)} className="select" defaultValue="">
                 <option value="">(none)</option>
                 {CATEGORIES.map((c) => (
                   <option key={c.id} value={c.id}>{c.label}</option>
@@ -193,21 +195,24 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
               </select>
             </div>
             <div className="task-form-field" style={{ flex: 2 }}>
-              <label className="field-label">Tags (comma-separated)</label>
-              <input ref={(el) => (tagsEl = el)} className="input" type="text" placeholder="reasoning, code, planning" />
+              <label className="field-label" htmlFor="agent-new-tags">Tags (comma-separated)</label>
+              <input id="agent-new-tags" ref={(el) => (tagsEl = el)} className="input" type="text" placeholder="reasoning, code, planning" />
             </div>
           </div>
-          <label className="field-label">Tools</label>
-          <div ref={(el) => (toolsContainer = el)} className="agent-tools">
-            {TOOL_OPTIONS.map((t) => (
-              <label key={t} className="checkbox-row">
-                <input type="checkbox" value={t} />
-                <span>{t}</span>
-              </label>
-            ))}
-          </div>
-          <label className="field-label">System prompt</label>
+          <fieldset>
+            <legend className="field-label" style={{ padding: 0 }}>Tools</legend>
+            <div ref={(el) => (toolsContainer = el)} className="agent-tools">
+              {TOOL_OPTIONS.map((t) => (
+                <label key={t} className="checkbox-row">
+                  <input type="checkbox" value={t} aria-label={t} />
+                  <span>{t}</span>
+                </label>
+              ))}
+            </div>
+          </fieldset>
+          <label className="field-label" htmlFor="agent-new-prompt">System prompt</label>
           <textarea
+            id="agent-new-prompt"
             ref={(el) => (promptEl = el)}
             className="textarea"
             rows={6}
@@ -280,8 +285,9 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
             <div className="muted">
               File: <code>{full.path}</code>
             </div>
-            <label className="field-label">Description</label>
+            <label className="field-label" htmlFor="agent-edit-desc">Description</label>
             <input
+              id="agent-edit-desc"
               ref={(el) => { descEl = el; }}
               className="input"
               type="text"
@@ -289,8 +295,8 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
             />
             <div className="task-form-row">
               <div className="task-form-field">
-                <label className="field-label">Model</label>
-                <select ref={(el) => (modelEl = el)} className="select" defaultValue={full.model}>
+                <label className="field-label" htmlFor="agent-edit-model">Model</label>
+                <select id="agent-edit-model" ref={(el) => (modelEl = el)} className="select" defaultValue={full.model}>
                   <option value="">(provider default)</option>
                   {MODELS.map((m) => (
                     <option key={m} value={m}>{m}</option>
@@ -298,22 +304,22 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
                 </select>
               </div>
               <div className="task-form-field">
-                <label className="field-label">Mode</label>
-                <select ref={(el) => (modeEl = el)} className="select" defaultValue={full.mode || 'subagent'}>
+                <label className="field-label" htmlFor="agent-edit-mode">Mode</label>
+                <select id="agent-edit-mode" ref={(el) => (modeEl = el)} className="select" defaultValue={full.mode || 'subagent'}>
                   <option value="primary">primary</option>
                   <option value="subagent">subagent</option>
                   <option value="all">all</option>
                 </select>
               </div>
               <div className="task-form-field" style={{ flex: '0 0 80px' }}>
-                <label className="field-label">Color</label>
-                <input ref={(el) => (colorEl = el)} className="input" type="color" defaultValue={full.color || '#8b5cf6'} />
+                <label className="field-label" htmlFor="agent-edit-color">Color</label>
+                <input id="agent-edit-color" ref={(el) => (colorEl = el)} className="input" type="color" defaultValue={full.color || '#8b5cf6'} />
               </div>
             </div>
             <div className="task-form-row">
               <div className="task-form-field" style={{ flex: 1 }}>
-                <label className="field-label">Category</label>
-                <select ref={(el) => (categoryEl = el)} className="select" defaultValue={full.category || ''}>
+                <label className="field-label" htmlFor="agent-edit-category">Category</label>
+                <select id="agent-edit-category" ref={(el) => (categoryEl = el)} className="select" defaultValue={full.category || ''}>
                   <option value="">(none)</option>
                   {CATEGORIES.map((c) => (
                     <option key={c.id} value={c.id}>{c.label}</option>
@@ -321,8 +327,9 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
                 </select>
               </div>
               <div className="task-form-field" style={{ flex: 2 }}>
-                <label className="field-label">Tags (comma-separated)</label>
+                <label className="field-label" htmlFor="agent-edit-tags">Tags (comma-separated)</label>
                 <input
+                  id="agent-edit-tags"
                   ref={(el) => (tagsEl = el)}
                   className="input"
                   type="text"
@@ -330,17 +337,20 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
                 />
               </div>
             </div>
-            <label className="field-label">Tools</label>
-            <div ref={(el) => (toolsContainer = el)} className="agent-tools">
-              {TOOL_OPTIONS.map((t) => (
-                <label key={t} className="checkbox-row">
-                  <input type="checkbox" value={t} defaultChecked={full.tools?.includes(t)} />
-                  <span>{t}</span>
-                </label>
-              ))}
-            </div>
-            <label className="field-label">System prompt</label>
+            <fieldset>
+              <legend className="field-label" style={{ padding: 0 }}>Tools</legend>
+              <div ref={(el) => (toolsContainer = el)} className="agent-tools">
+                {TOOL_OPTIONS.map((t) => (
+                  <label key={t} className="checkbox-row">
+                    <input type="checkbox" value={t} aria-label={t} defaultChecked={full.tools?.includes(t)} />
+                    <span>{t}</span>
+                  </label>
+                ))}
+              </div>
+            </fieldset>
+            <label className="field-label" htmlFor="agent-edit-prompt">System prompt</label>
             <textarea
+              id="agent-edit-prompt"
               ref={(el) => (promptEl = el)}
               className="textarea"
               rows={8}
@@ -483,15 +493,20 @@ export function Agents({ snapshot, refreshSnapshot }: Props) {
         </div>
         <div className="view-actions">
           <div className="search-input">
+            <label htmlFor="agents-search" className="sr-only">Search agents</label>
             <input
+              id="agents-search"
               className="input"
               type="text"
               placeholder="Search…"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
+              aria-label="Search agents"
             />
           </div>
+          <label htmlFor="agents-category-filter" className="sr-only">Filter by category</label>
           <select
+            id="agents-category-filter"
             className="select select-sm"
             value={categoryFilter}
             onChange={(e) => setCategoryFilter(e.target.value)}