Give each task an assigned colour across the UI; lead links tasks

web/src/panes.ts

@@ -8,8 +8,7 @@ import { openSwitcher } from "./navbar.js";
 import { findTask, focusedProject, focusTab, on, onEach, state, tabs } from "./state.js";
 import { mountPreview } from "./preview.js";
 import { mountProject } from "./project.js";
-import { mountTranscript } from "./task.js";
-import { mountTerminal } from "./terminal.js";
+import { mountTranscript } from "./task.js";import { mountTerminal } from "./terminal.js";
 
 const views: Record<TaskTab, { label: string; mount: (root: HTMLElement) => () => void }> = {
   transcript: { label: "Transcript", mount: mountTranscript },
@@ -32,12 +31,18 @@ export function taskPane(): HTMLElement {
   const body = h("div", { class: "pane-body" });
   const picker = h("button", { class: "task-picker", title: "Switch task (⌘K)" });
   picker.onclick = openSwitcher;
+  const pane = h("section", { class: "pane task-pane", tabIndex: -1 }, strip, body);
   let shown: TaskTab | undefined;
   let dispose: () => void = () => {};
 
   const renderPicker = () => {
     const task = state.selectedTaskId ? findTask(state.selectedTaskId) : undefined;
     const project = focusedProject();
+    if (task) {
+      pane.style.setProperty("--task", `var(--task-${task.color})`);
+    } else {
+      pane.style.removeProperty("--task");
+    }
     replace(picker, task ? `${project?.name ?? ""} ▸ ${task.title}` : (project?.name ?? "No task"), " ▾");
   };
 
@@ -76,7 +81,6 @@ export function taskPane(): HTMLElement {
   onEach(["projects", "tasks", "selection", "focus"], renderPicker);
   render();
   renderPicker();
-  const pane = h("section", { class: "pane", tabIndex: -1 }, strip, body);
   trackPaneFocus(pane);
   return pane;
 }