feat: background task dispatch system with live UI panel

- agent/task_registry.py: file-based JSONL event registry (cross-process)
- agent/task_worker.py: autonomous LLM loop with weather/time/memory/web tools
- agent/dispatch_mcp.py: MCP tool exposing dispatch_task to the main agent
- agent/agent.py: registers dispatch toolset, polls task events → room data
- web: slide-out task panel (FAB button + badge), live step streaming via
  data channel topic 'tasks', status dots (running/completed/failed)
- Dockerfile: copies new task_*.py and dispatch_mcp.py files

The dispatch MCP runs in its own process; events flow through
/tmp/tasks/events.jsonl which the main agent tails every second and
forwards to the browser. Tasks run up to 10 LLM iterations with tool calls.

web/app.js

@@ -36,6 +36,12 @@ let agentAudioLevel = 0;         // 0..1, smoothed
 let userSpeaking = false;        // local VAD-ish flag from mic level
 let wakeLock = null;
 
+function escapeHtml(s) {
+    const d = document.createElement("div");
+    d.textContent = s || "";
+    return d.innerHTML;
+}
+
 // ── DOM ─────────────────────────────────────────────────────────────────────
 const startBtn = document.getElementById("startBtn");
 const stopBtn = document.getElementById("stopBtn");
@@ -54,6 +60,72 @@ const sheetBackdrop = document.getElementById("sheetBackdrop");
 const closeSheetBtn = document.getElementById("closeSheetBtn");
 const voiceListEl = document.getElementById("voiceList");
 const clearBtn = document.getElementById("clearBtn");
+const tasksBtn = document.getElementById("tasksBtn");
+const tasksPanel = document.getElementById("tasksPanel");
+const tasksList = document.getElementById("tasksList");
+const tasksBadge = document.getElementById("tasksBadge");
+const closeTasksBtn = document.getElementById("closeTasksBtn");
+
+// ── Background tasks state ──────────────────────────────────────────────────
+const tasks = new Map(); // task_id -> {id, description, status, steps: [], result, error}
+
+function updateTasksBadge() {
+    const active = [...tasks.values()].filter(t => t.status === "running" || t.status === "pending").length;
+    if (active > 0) {
+        tasksBadge.hidden = false;
+        tasksBadge.textContent = String(active);
+    } else {
+        tasksBadge.hidden = true;
+    }
+}
+
+function renderTasks() {
+    const items = [...tasks.values()].sort((a, b) => (b.created_at || 0) - (a.created_at || 0));
+    if (items.length === 0) {
+        tasksList.innerHTML = '<p class="tasks-empty">No tasks yet. Ask Hope to research something.</p>';
+        return;
+    }
+    tasksList.innerHTML = "";
+    for (const t of items) {
+        const card = document.createElement("div");
+        card.className = "task-card";
+        const statusClass = t.status || "pending";
+        card.innerHTML = `
+            <div class="task-card-header">
+                <span class="task-status-dot ${statusClass}"></span>
+                <span class="task-desc">${escapeHtml(t.description)}</span>
+            </div>
+            <ul class="task-steps">${t.steps.map(s => `<li class="task-step ${s.role}">${escapeHtml(s.content)}</li>`).join("")}</ul>
+            ${t.result ? `<div class="task-result">${escapeHtml(t.result)}</div>` : ""}
+            ${t.error ? `<div class="task-error">${escapeHtml(t.error)}</div>` : ""}
+        `;
+        tasksList.appendChild(card);
+    }
+}
+
+function handleTaskEvent(data) {
+    const { task_id, event, role, content, result, error, task } = data;
+    if (event === "created" && task) {
+        tasks.set(task_id, { ...task, steps: [] });
+    } else if (event === "step") {
+        const t = tasks.get(task_id);
+        if (t) {
+            t.steps.push({ role, content });
+            t.status = "running";
+        }
+    } else if (event === "completed") {
+        const t = tasks.get(task_id);
+        if (t) { t.status = "completed"; t.result = result; }
+    } else if (event === "failed") {
+        const t = tasks.get(task_id);
+        if (t) { t.status = "failed"; t.error = error; }
+    }
+    updateTasksBadge();
+    renderTasks();
+}
+
+tasksBtn.addEventListener("click", () => tasksPanel.classList.toggle("open"));
+closeTasksBtn.addEventListener("click", () => tasksPanel.classList.remove("open"));
 
 // ── Audio analysers (mic + remote agent audio) ─────────────────────────────
 let micCtx = null;
@@ -352,6 +424,8 @@ function handleDataPacket(payload, participant, topic) {
         const msg = JSON.parse(new TextDecoder().decode(payload));
         if (msg.type === "transcript") {
             addMessage(msg.role || "agent", msg.text);
+        } else if (msg.type === "task_event") {
+            handleTaskEvent(msg);
         }
         // set_voice messages flow the other way; nothing to do client-side.
     } catch (e) {