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

web/src/status.ts

@@ -1,6 +1,7 @@
 import { get, type AgentProcess, type ByreEvent, type Status, type TurnRef, type Zombie } from "./api.js";
 import { ago, errorText, h, openPanel, replace } from "./dom.js";
 import { findTask, on, onEach, state } from "./state.js";
+import { taskStyle } from "./taskcolor.js";
 
 const refreshKinds = new Set(["session.created", "session.state", "task.created", "task.merged", "task.discarded", "project.created", "admin.health"]);
 
@@ -147,12 +148,12 @@ function turnList(turns: TurnRef[], kind: "running" | "queued", empty: string, p
       const project = task ? state.projects.find((p) => p.id === task.project_id) : undefined;
       return h(
         "li",
-        {},
+        { style: taskStyle(t.task_id) },
         h(
           "a",
           { href: `#/task/${t.task_id}` },
           kind === "queued" ? h("span", { class: "queue-pos" }, `${i + 1}.`) : h("span", { class: "dot running", title: "running" }),
-          h("span", { class: "task-title" }, project && h("span", { class: "project-name" }, `${project.name} ▸ `), task?.title ?? t.task_id),
+          h("span", { class: "task-title" }, project && h("span", { class: "project-name" }, `${project.name} ▸ `), h("span", { class: "task-name" }, task?.title ?? t.task_id)),
           liveness(procs.find((p) => p.session_id === t.session_id)),
           h("span", { class: "task-state" }, t.vendor),
         ),
@@ -168,7 +169,7 @@ function taskLink(taskId: string | undefined): HTMLElement | string {
   }
   const task = findTask(taskId);
   const project = task ? state.projects.find((p) => p.id === task.project_id) : undefined;
-  return h("a", { href: `#/task/${taskId}` }, project ? `${project.name} ▸ ` : "", task?.title ?? taskId);
+  return h("a", { href: `#/task/${taskId}`, class: "task-link", style: taskStyle(taskId) }, project ? `${project.name} ▸ ` : "", task?.title ?? taskId);
 }
 
 function since(iso: string): string {