taskchef 7.5.0 → 7.7.0

package/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "taskchef",
-  "version": "7.5.0",
+  "version": "7.7.0",
   "description": "Dispatch work from a data-only workspace to visible Codex project tasks.",
   "author": {
     "name": "Favo Yang",

package/README.md

@@ -176,6 +176,16 @@ taskchef dashboard --port 3211
 The loopback dashboard watches `tasks.jsonl`, groups current states, and opens
 linked Codex tasks. List snapshots and SSE events carry only the latest-result
 projection; opening task details fetches the full newest-first result history.
+Task and result times are relative through 29 days (with minute detail for the
+first six hours), then use a locale-aware calendar date. Each time is a keyboard-
+accessible toggle for its full locale-aware date and time, and one shared
+30-second timer keeps relative labels current without reloading the page.
+The Updates panel captures immutable event-time lifecycle notices. It identifies
+them by task, turn when available, and lifecycle event rather than dashboard
+revision, so reconnects and non-semantic rewrites do not replay a notice and a
+later task state cannot rewrite an older notice. A notice remains readable if
+its task disappears; selecting it then explains that current details are no
+longer available.
 It does not mutate TaskChef data and prints its local URL.
 When a compatible foreground dashboard already owns port 3210,
 `ensure_dashboard` reuses it but does not take ownership. If an unknown,
@@ -187,6 +197,8 @@ The health endpoint contains only a fixed service marker, health schema,
 TaskChef version, dashboard-server version, and canonical workspace. It exposes
 no task data, credentials, environment variables, process control, or secrets.
 
+![Immutable event-time dashboard notifications](docs/images/notification-event-snapshots.jpg)
+
 ![Task detail result history](docs/images/result-history-dashboard.jpg)
 
 ## Common recovery

package/assets/codex.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="currentColor" d="M3 1.5h10A1.5 1.5 0 0 1 14.5 3v10a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5Zm0 1a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5H3Zm1.15 3.1.7-.7L7.95 8l-3.1 3.1-.7-.7L6.55 8l-2.4-2.4ZM8 10h4v1H8v-1Z"/>
+</svg>

package/docs/spec.md

@@ -327,6 +327,34 @@ current configuration before use.
 Snapshot and SSE list payloads MUST omit full `results` history and include the
 derived latest-result projection. The bounded per-task detail endpoint MAY
 return the full validated task so the dialog can render history newest first.
+Dashboard notifications MUST capture an immutable event-time projection of the
+task title, lifecycle state and event, turn ID when present, event timestamp,
+and relevant concise summary. Rendering MUST NOT resolve historical notice text
+from the task's later current state. Notice identity and deduplication MUST use
+task ID, turn ID, and lifecycle event; a creation notice without a turn ID MUST
+fall back to task ID plus the immutable creation timestamp. Dashboard revision
+MUST NOT be the sole identity. Identical snapshots, SSE reconnects, idempotent
+reports, schema normalization, and non-semantic rewrites MUST NOT add notices.
+Distinct working and semantic-result events for one turn MAY each be retained.
+When one compact snapshot first exposes both a latest semantic result and a
+newer working turn, the browser MUST reconcile both events. Temporary task
+absence MUST NOT discard the prior semantic signature or turn a later
+reappearance into another creation event. The first page snapshot MUST establish
+a quiet baseline rather than replay existing history. After that baseline, a
+new task first observed with a turn or semantic result MUST retain its creation
+event and each lifecycle event observable in that compact projection.
+
+Working with no prior result SHOULD be labeled as a task start. Working on a
+newer turn while a prior result remains projected SHOULD be labeled as a
+follow-up start. Creation, completion, input-needed, and failure labels MUST be
+distinct. The Updates panel MUST remain bounded and support individual dismiss
+and clear-all without resetting replay protection. A retained notice whose task
+is absent from the current list MUST remain readable; selecting it MUST NOT
+navigate or mutate data and SHOULD explain that current details are unavailable.
+The retained notice list MUST NOT be a live region that re-announces old notices
+when it rerenders. A separate polite status region MUST announce only newly
+reconciled events. Each notice control's accessible description MUST include
+its displayed summary when present, event time, and missing-task state.
 
 ## Task-log migration
 

package/docs/workflows.md

@@ -284,6 +284,28 @@ unnecessary history. A read-only per-task endpoint returns full history only
 when the dialog opens. Historical project paths are untrusted until matched
 against current configuration.
 
+The browser derives one immutable Updates-panel snapshot when it first observes
+a semantic lifecycle transition. The snapshot keeps its event-time title,
+state/event, turn ID, timestamp, and relevant summary. Its identity combines
+task ID, turn ID, and event, with creation time as the fallback when creation
+has no turn. A separate seen-identity set outlives the bounded visible notices,
+individual dismissals, and Clear all, preventing replay after reconnect,
+normalization, or disappearance and reappearance. Per-task semantic signatures
+also remain as tombstones while a task is absent. When one compact snapshot
+first reveals a latest semantic result plus a newer working turn, the browser
+captures both. The first page snapshot is a quiet baseline so opening or
+refreshing the dashboard does not replay existing history. If a task is first
+observed in a progressed state after that baseline, creation is retained
+alongside the observable result and working events. The current task list is
+used only as the navigation target: if the task is gone, the notice stays
+readable and selection reports that current details are unavailable.
+
+The retained toast list is not live. Reconciliation passes only its newly added
+snapshots to a separate polite status region, so reconnect, dismissal, Clear
+all, and ordinary rerendering do not re-announce retained history. Toast action
+labels remain concise while `aria-describedby` connects the visible summary,
+event time, and missing-task explanation for assistive technology.
+
 ## Schema 4/5 migration
 
 `taskchef workspace migrate` acquires the same workspace lock as lifecycle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskchef",
-  "version": "7.5.0",
+  "version": "7.7.0",
   "description": "A non-blocking interactive dispatcher for visible Codex tasks.",
   "license": "MIT",
   "author": "Favo Yang",
@@ -26,6 +26,7 @@
     "docs/spec.md",
     "docs/workflows.md",
     "docs/firstmate-taskchef-comparison.md",
+    "docs/images/notification-event-snapshots.jpg",
     "docs/images/result-history-dashboard.jpg",
     "index.js",
     "mcp",

package/src/dashboard/app.js

@@ -1,23 +1,30 @@
 import {
+  clearNotifications,
+  dismissNotification,
   findCurrentTask,
   KNOWN_TASK_STATUSES,
   nextDateFilterRefreshDelay,
+  notificationDismissLabel,
+  notificationOpenLabel,
   notificationTitle,
   reconcileNotifications,
   taskStatusLabel,
   taskWithinDateFilter,
 } from "./state.js";
 import { openTaskFromControl } from "./actions.js";
+import { formatRelativeTime, RelativeTimeController, parsedTimestamp } from "./time.js";
 
 const state = {
   tasks: [],
   signatures: new Map(),
   notifications: [],
+  seenNotificationIds: new Set(),
   initialized: false,
   selectedTask: null,
 };
 let dateRefreshTimer = null;
 let detailRequestGeneration = 0;
+const relativeTimes = new RelativeTimeController();
 
 const elements = {
   clearNotifications: document.querySelector("#clear-notifications"),
@@ -37,6 +44,7 @@ const elements = {
   dismissDashboardMessage: document.querySelector("#dismiss-dashboard-message"),
   emptyState: document.querySelector("#empty-state"),
   notifications: document.querySelector("#notifications"),
+  notificationAnnouncer: document.querySelector("#notification-announcer"),
   openProject: document.querySelector("#open-codex"),
   projectFilter: document.querySelector("#project-filter"),
   statusFilter: document.querySelector("#status-filter"),
@@ -44,13 +52,44 @@ const elements = {
   taskList: document.querySelector("#task-list"),
   toastList: document.querySelector("#toast-list"),
 };
+let notificationDescriptionSerial = 0;
 
-function formatTime(value) {
-  if (!value) return "—";
-  return new Intl.DateTimeFormat(undefined, {
-    dateStyle: "medium",
-    timeStyle: "short",
-  }).format(new Date(value));
+function timestampControl(value, { accessibleName, key, prefix = "" }) {
+  if (!parsedTimestamp(value)) {
+    const missing = document.createElement("span");
+    missing.className = "timestamp-missing";
+    missing.textContent = `${prefix}—`;
+    return missing;
+  }
+  const control = document.createElement("button");
+  control.type = "button";
+  control.className = "timestamp-toggle";
+  const time = document.createElement("time");
+  control.append(time);
+  relativeTimes.register(key, value, ({ exact, iso, label }) => {
+    time.dateTime = iso;
+    time.textContent = `${prefix}${label}`;
+    const action = exact ? "Show relative time" : "Show exact date and time";
+    control.title = action;
+    control.setAttribute("aria-label", `${accessibleName}: ${label}. ${action}.`);
+  }, { isActive: () => control.isConnected });
+  control.addEventListener("click", () => relativeTimes.toggle(key));
+  return control;
+}
+
+function codexIcon() {
+  const icon = document.createElement("span");
+  icon.className = "codex-icon";
+  icon.setAttribute("aria-hidden", "true");
+  return icon;
+}
+
+function configureOpenTaskControl(control, ariaLabel) {
+  control.classList.add("task-action");
+  control.setAttribute("aria-label", ariaLabel);
+  const label = document.createElement("span");
+  label.textContent = "Open task";
+  control.replaceChildren(codexIcon(), label);
 }
 
 function setConnection(connected) {
@@ -76,17 +115,37 @@ function replaceOptions(select, values, allLabel) {
 
 function notificationToast(notification) {
   const task = findCurrentTask(state.tasks, notification.taskId);
-  if (!task) return null;
   const toast = document.createElement("div");
-  toast.className = "toast";
+  toast.className = `toast${task ? "" : " toast-missing"}`;
   const text = document.createElement("button");
   text.type = "button";
   text.className = "toast-content";
+  text.setAttribute("aria-label", notificationOpenLabel(notification, Boolean(task)));
+  const describedBy = [];
   const title = document.createElement("strong");
-  title.textContent = notificationTitle(task, notification.kind);
+  title.textContent = notificationTitle(notification);
   const description = document.createElement("span");
-  description.textContent = `${task.title} · ${taskStatusLabel(task)}`;
+  description.textContent = notification.title;
   text.append(title, description);
+  if (notification.summary) {
+    const summary = document.createElement("span");
+    summary.className = "toast-summary preserve-lines";
+    summary.id = `notification-description-${notificationDescriptionSerial += 1}`;
+    summary.textContent = notification.summary;
+    text.append(summary);
+    describedBy.push(summary.id);
+  }
+  const metadata = document.createElement("span");
+  metadata.className = "toast-metadata";
+  metadata.id = `notification-description-${notificationDescriptionSerial += 1}`;
+  const timestamp = document.createElement("time");
+  timestamp.dateTime = notification.timestamp ?? "";
+  timestamp.textContent = formatRelativeTime(notification.timestamp);
+  metadata.append(timestamp);
+  if (!task) metadata.append(" · Task no longer available");
+  text.append(metadata);
+  describedBy.push(metadata.id);
+  text.setAttribute("aria-describedby", describedBy.join(" "));
   text.addEventListener("click", () => {
     const current = findCurrentTask(state.tasks, notification.taskId);
     if (current) openDialog(current);
@@ -95,32 +154,49 @@ function notificationToast(notification) {
   const dismiss = document.createElement("button");
   dismiss.type = "button";
   dismiss.className = "icon-button";
-  dismiss.setAttribute("aria-label", `Dismiss notification for ${task.title}`);
+  dismiss.setAttribute("aria-label", notificationDismissLabel(notification));
+  dismiss.setAttribute("aria-describedby", describedBy.join(" "));
   dismiss.textContent = "×";
   dismiss.addEventListener("click", () => {
-    state.notifications = state.notifications.filter(({ id }) => id !== notification.id);
+    state.notifications = dismissNotification(state.notifications, notification.id);
     renderNotifications();
   });
   toast.append(text, dismiss);
   return toast;
 }
 
-function renderNotifications() {
+function notificationAnnouncement(notification) {
+  return [
+    notificationTitle(notification),
+    notification.title,
+    notification.summary,
+    notification.turnId ? `Turn ${notification.turnId}` : null,
+    formatRelativeTime(notification.timestamp),
+  ].filter(Boolean).join(". ");
+}
+
+function renderNotifications(additions = []) {
   elements.toastList.replaceChildren(
-    ...state.notifications.map(notificationToast).filter(Boolean),
+    ...state.notifications.map(notificationToast),
   );
   elements.notifications.hidden = state.notifications.length === 0;
+  if (additions.length > 0) {
+    elements.notificationAnnouncer.textContent = additions
+      .map(notificationAnnouncement)
+      .join(". ");
+  }
 }
 
 function detailRow(term, value) {
   const dt = document.createElement("dt");
   dt.textContent = term;
   const dd = document.createElement("dd");
-  dd.textContent = value ?? "—";
+  if (value instanceof Node) dd.append(value);
+  else dd.textContent = value ?? "—";
   return [dt, dd];
 }
 
-function resultHistory(results) {
+function resultHistory(taskId, results) {
   if (results.length === 0) {
     const empty = document.createElement("p");
     empty.className = "result-history-empty";
@@ -135,9 +211,11 @@ function resultHistory(results) {
     const status = document.createElement("span");
     status.className = `status status-${result.status}`;
     status.textContent = result.status.replaceAll("_", " ");
-    const timestamp = document.createElement("time");
-    timestamp.dateTime = result.updatedAt;
-    timestamp.textContent = formatTime(result.updatedAt);
+    const resultKey = result.turnId ?? `${result.status}:${index}`;
+    const timestamp = timestampControl(result.updatedAt, {
+      accessibleName: `Result updated time for ${result.status.replaceAll("_", " ")}`,
+      key: `detail:${taskId}:result:${resultKey}`,
+    });
     header.append(status, timestamp);
     const summary = document.createElement("p");
     summary.className = "preserve-lines";
@@ -161,7 +239,7 @@ function renderDialog(task) {
   state.selectedTask = detailedTask;
   elements.dialogProject.textContent = task.project.name;
   elements.dialogTitle.textContent = task.title;
-  elements.dialogResults.replaceChildren(...resultHistory(detailedTask.results));
+  elements.dialogResults.replaceChildren(...resultHistory(task.id, detailedTask.results));
   elements.dialogInstruction.textContent = task.instruction;
   elements.copyThreadId.disabled = !task.threadId;
   elements.dialogMetadata.replaceChildren(
@@ -169,16 +247,27 @@ function renderDialog(task) {
     ...detailRow("Current turn ID", task.turnId),
     ...detailRow("Last result status", task.lastResult?.status?.replaceAll("_", " ")),
     ...detailRow("Last result turn ID", task.lastResult?.turnId),
-    ...detailRow("Last result updated", formatTime(task.lastResult?.updatedAt)),
+    ...detailRow("Last result updated", timestampControl(task.lastResult?.updatedAt, {
+      accessibleName: `Last result updated time for ${task.title}`,
+      key: `detail:${task.id}:last-result-updated`,
+    })),
     ...detailRow("Task ID", task.id),
     ...detailRow("Thread ID", task.threadId),
     ...detailRow("Project path", task.project.path),
-    ...detailRow("Created", formatTime(task.createdAt)),
-    ...detailRow("Updated", formatTime(
+    ...detailRow("Created", timestampControl(task.createdAt, {
+      accessibleName: `Created time for ${task.title}`,
+      key: `detail:${task.id}:created`,
+    })),
+    ...detailRow("Updated", timestampControl(
       task.meaningfulUpdatedAt ?? task.updatedAt ?? task.createdAt,
+      {
+        accessibleName: `Updated time for ${task.title}`,
+        key: `detail:${task.id}:updated`,
+      },
     )),
     ...detailRow("Updated by", task.updatedBy),
   );
+  configureOpenTaskControl(elements.openProject, `Open ${task.title} in Codex`);
 }
 
 async function openDialog(task) {
@@ -223,16 +312,20 @@ function taskCard(task) {
   const summary = document.createElement("p");
   summary.className = "task-summary";
   summary.textContent = task.lastResult?.summary ?? "No semantic result reported yet.";
-  const time = document.createElement("time");
-  time.dateTime = task.meaningfulUpdatedAt ?? task.updatedAt ?? task.createdAt;
-  time.textContent = `Updated ${formatTime(time.dateTime)}`;
+  const time = timestampControl(
+    task.meaningfulUpdatedAt ?? task.updatedAt ?? task.createdAt,
+    {
+      accessibleName: `Updated time for ${task.title}`,
+      key: `list:${task.id}:updated`,
+      prefix: "Updated ",
+    },
+  );
   const footer = document.createElement("div");
   footer.className = "task-footer";
   const openTask = document.createElement("button");
   openTask.type = "button";
   openTask.className = "secondary-button task-open";
-  openTask.textContent = "Open task";
-  openTask.setAttribute("aria-label", `Open ${task.title} in Codex`);
+  configureOpenTaskControl(openTask, `Open ${task.title} in Codex`);
   openTask.addEventListener("click", (event) => openTaskFromControl(event, task.id, {
     showMessage,
   }));
@@ -261,11 +354,13 @@ function applySnapshot(snapshot) {
   const reconciled = reconcileNotifications({
     initialized: state.initialized,
     notifications: state.notifications,
+    seenIds: state.seenNotificationIds,
     signatures: state.signatures,
-  }, snapshot.tasks, snapshot.revision);
+  }, snapshot.tasks);
   state.tasks = snapshot.tasks;
   state.signatures = reconciled.signatures;
   state.notifications = reconciled.notifications;
+  state.seenNotificationIds = reconciled.seenIds;
   state.initialized = true;
   if (snapshot.healthy === false) {
     showMessage("The task log is temporarily unavailable. Showing the last valid snapshot.");
@@ -286,7 +381,7 @@ function applySnapshot(snapshot) {
     const updated = state.tasks.find((task) => task.id === state.selectedTask.id);
     if (updated && elements.dialog.open) openDialog(updated);
   }
-  renderNotifications();
+  renderNotifications(reconciled.additions);
   render();
 }
 
@@ -313,7 +408,7 @@ elements.dismissDashboardMessage.addEventListener("click", () => {
   elements.dashboardMessage.hidden = true;
 });
 elements.clearNotifications.addEventListener("click", () => {
-  state.notifications = [];
+  state.notifications = clearNotifications();
   renderNotifications();
 });
 elements.closeDialog.addEventListener("click", () => elements.dialog.close());

package/src/dashboard/index.html

@@ -71,7 +71,8 @@
         <strong>Updates</strong>
         <button id="clear-notifications" class="text-button" type="button">Clear all</button>
       </div>
-      <div id="toast-list" class="toast-list" aria-live="polite"></div>
+      <p id="notification-announcer" class="visually-hidden" role="status" aria-live="polite"></p>
+      <div id="toast-list" class="toast-list"></div>
     </aside>
 
     <dialog id="task-dialog" aria-labelledby="dialog-title">
@@ -83,7 +84,10 @@
         <button id="close-dialog" class="icon-button" type="button" aria-label="Close task details">×</button>
       </div>
       <div class="dialog-actions">
-        <button id="open-codex" class="primary-button" type="button">Open task in Codex</button>
+        <button id="open-codex" class="primary-button task-action" type="button" aria-label="Open this task in Codex">
+          <span class="codex-icon" aria-hidden="true"></span>
+          <span>Open task</span>
+        </button>
         <button id="copy-thread-id" class="secondary-button" type="button">Copy thread ID</button>
       </div>
       <section>

package/src/dashboard/state.js

@@ -7,6 +7,16 @@ export const KNOWN_TASK_STATUSES = [
   "unresolved",
 ];
 
+const NOTIFICATION_TITLES = new Map([
+  ["created", "Task created"],
+  ["task_started", "Task started"],
+  ["follow_up_started", "Follow-up started"],
+  ["completed", "Task completed"],
+  ["needs_input", "Task needs input"],
+  ["failed", "Task failed"],
+  ["unresolved", "Task updated"],
+]);
+
 const DATE_WINDOWS_MS = new Map([
   ["24h", 24 * 60 * 60 * 1_000],
   ["7d", 7 * 24 * 60 * 60 * 1_000],
@@ -21,8 +31,8 @@ export function taskStatusLabel(task) {
   return task.status === null ? "unresolved" : task.status.replaceAll("_", " ");
 }
 
-export function notificationTitle(task, kind) {
-  return kind === "new" ? "New task" : `Task ${taskStatusLabel(task)}`;
+export function notificationTitle(notification) {
+  return NOTIFICATION_TITLES.get(notification.event) ?? "Task updated";
 }
 
 export function taskWithinDateFilter(task, filter, now = Date.now()) {
@@ -44,41 +54,143 @@ export function nextDateFilterRefreshDelay(tasks, filter, now = Date.now()) {
 }
 
 export function taskSignature(task) {
-  return JSON.stringify([
-    task.threadId,
-    task.status,
-    task.summary,
-    task.turnId,
-    task.updatedAt,
-    task.updatedBy,
-    task.lastResult,
-  ]);
+  return JSON.stringify([task.id, task.turnId ?? null, task.status ?? "unresolved"]);
 }
 
 export function findCurrentTask(tasks, taskId) {
   return tasks.find((task) => task.id === taskId) ?? null;
 }
 
+function lifecycleEvent(task) {
+  if (task.status === "working") {
+    return task.lastResult ? "follow_up_started" : "task_started";
+  }
+  return task.status ?? "unresolved";
+}
+
+function notificationIdentity(task, event) {
+  if (event === "created") {
+    return JSON.stringify([task.id, null, event, task.createdAt ?? null]);
+  }
+  return JSON.stringify([task.id, task.turnId ?? null, event]);
+}
+
+function eventTimestamp(task, event) {
+  if (event === "created") return task.createdAt ?? task.updatedAt ?? null;
+  if (
+    task.lastResult?.status === task.status
+    && task.lastResult?.turnId === task.turnId
+  ) {
+    return task.lastResult.updatedAt;
+  }
+  return task.updatedAt ?? task.createdAt ?? null;
+}
+
+function eventSummary(task, event) {
+  if (!["completed", "needs_input", "failed"].includes(event)) return null;
+  if (
+    task.lastResult?.status === task.status
+    && task.lastResult?.turnId === task.turnId
+  ) {
+    return task.lastResult.summary;
+  }
+  return task.summary ?? null;
+}
+
+export function notificationSnapshot(task, event = lifecycleEvent(task)) {
+  const created = event === "created";
+  return Object.freeze({
+    id: notificationIdentity(task, event),
+    taskId: task.id,
+    title: task.title,
+    status: created ? "working" : task.status,
+    event,
+    turnId: created ? null : task.turnId ?? null,
+    timestamp: eventTimestamp(task, event),
+    summary: eventSummary(task, event),
+  });
+}
+
+function resultNotificationSnapshot(task) {
+  const result = task.lastResult;
+  if (!result) return null;
+  return Object.freeze({
+    id: notificationIdentity({ ...task, turnId: result.turnId }, result.status),
+    taskId: task.id,
+    title: task.title,
+    status: result.status,
+    event: result.status,
+    turnId: result.turnId ?? null,
+    timestamp: result.updatedAt,
+    summary: result.summary,
+  });
+}
+
+export function notificationOpenLabel(notification, available) {
+  const action = available ? "Open current task details" : "Show task availability";
+  return `${action} for ${notification.title}: ${notificationTitle(notification)}`;
+}
+
+export function notificationDismissLabel(notification) {
+  return `Dismiss ${notificationTitle(notification)} notification for ${notification.title}`;
+}
+
+export function dismissNotification(notifications, notificationId) {
+  return notifications.filter(({ id }) => id !== notificationId);
+}
+
+export function clearNotifications() {
+  return [];
+}
+
 export function reconcileNotifications(
-  { initialized, notifications, signatures },
+  { initialized, notifications, seenIds = new Set(), signatures },
   tasks,
-  revision,
 ) {
-  const nextSignatures = new Map(tasks.map((task) => [task.id, taskSignature(task)]));
-  if (!initialized) return { notifications, signatures: nextSignatures };
+  const nextSignatures = new Map(signatures);
+  for (const task of tasks) nextSignatures.set(task.id, taskSignature(task));
+  const nextSeenIds = new Set(seenIds);
+  if (!initialized) {
+    for (const task of tasks) {
+      nextSeenIds.add(notificationSnapshot(task, "created").id);
+      const resultNotification = resultNotificationSnapshot(task);
+      if (resultNotification) nextSeenIds.add(resultNotification.id);
+      nextSeenIds.add(notificationSnapshot(task).id);
+    }
+    return {
+      additions: [],
+      notifications,
+      seenIds: nextSeenIds,
+      signatures: nextSignatures,
+    };
+  }
   const additions = [];
   for (const task of tasks) {
-    let kind = null;
-    if (!signatures.has(task.id)) kind = "new";
-    else if (signatures.get(task.id) !== nextSignatures.get(task.id)) kind = "changed";
-    if (kind) additions.push({
-      id: `${revision}:${task.id}`,
-      kind,
-      taskId: task.id,
-    });
+    const candidates = [];
+    if (!signatures.has(task.id)) {
+      const resultNotification = resultNotificationSnapshot(task);
+      if (task.turnId || task.status !== "working" || resultNotification) {
+        candidates.push(notificationSnapshot(task));
+        if (resultNotification) candidates.push(resultNotification);
+      }
+      candidates.push(notificationSnapshot(task, "created"));
+    } else if (signatures.get(task.id) !== nextSignatures.get(task.id)) {
+      candidates.push(notificationSnapshot(task));
+      const resultNotification = resultNotificationSnapshot(task);
+      if (resultNotification) candidates.push(resultNotification);
+    }
+    for (const notification of candidates) {
+      if (!nextSeenIds.has(notification.id)) additions.push(notification);
+      nextSeenIds.add(notification.id);
+    }
+    const resultNotification = resultNotificationSnapshot(task);
+    if (resultNotification) nextSeenIds.add(resultNotification.id);
+    nextSeenIds.add(notificationSnapshot(task).id);
   }
   return {
+    additions,
     notifications: [...additions, ...notifications].slice(0, MAX_NOTIFICATIONS),
+    seenIds: nextSeenIds,
     signatures: nextSignatures,
   };
 }

package/src/dashboard/styles.css

@@ -51,7 +51,7 @@ h3 { margin-bottom: 8px; font-size: 0.84rem; letter-spacing: 0.08em; text-transf
 .dashboard-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
 
 .eyebrow { margin-bottom: 10px; color: var(--accent); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase; }
-.subtitle, .task-project, time { color: var(--muted); }
+.subtitle, .task-project, time, .timestamp-missing { color: var(--muted); }
 .subtitle { margin-bottom: 0; }
 
 .connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; }
@@ -78,9 +78,13 @@ select { min-width: 180px; padding: 9px 34px 9px 11px; border: 1px solid var(--b
 .task-title:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
 .task-project { margin: 3px 0 12px; font-size: 0.86rem; }
 .task-summary { max-width: 78ch; margin-bottom: 14px; }
-time { font-size: 0.78rem; }
+time, .timestamp-missing { font-size: 0.78rem; }
+.timestamp-toggle { padding: 2px 0; border: 0; background: none; cursor: pointer; text-align: left; }
+.timestamp-toggle:hover time { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
 .task-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
 .task-open { flex: none; }
+.task-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 9px; font-size: 0.82rem; line-height: 1.2; white-space: nowrap; }
+.codex-icon { display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; mask: url("/assets/codex.svg") center / contain no-repeat; }
 
 .status { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 0.72rem; font-weight: 750; text-transform: capitalize; }
 .status-completed { background: var(--accent-soft); color: var(--accent); }
@@ -101,6 +105,9 @@ time { font-size: 0.78rem; }
 .toast { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 7px; background: var(--surface-muted); }
 .toast-content { display: grid; flex: 1; gap: 2px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
 .toast-content span { color: var(--muted); font-size: 0.85rem; }
+.toast-content .toast-summary { color: var(--text); }
+.toast-content .toast-metadata { font-size: 0.75rem; }
+.toast-missing { border: 1px dashed var(--border); }
 
 .text-button, .icon-button { border: 0; background: none; cursor: pointer; }
 .text-button { color: var(--accent); font-size: 0.82rem; font-weight: 700; }
@@ -142,8 +149,8 @@ pre { max-height: 280px; margin: 0; padding: 14px; overflow: auto; border-radius
   .task-count { margin: 0; }
   .task-heading { align-items: flex-start; }
   .task-footer { align-items: flex-start; flex-direction: column; }
-  .task-open { width: 100%; }
-  .dialog-actions { align-items: stretch; flex-direction: column; }
+  .task-open { align-self: flex-start; }
+  .dialog-actions { align-items: center; flex-flow: row wrap; }
   .metadata { grid-template-columns: 1fr; }
   .metadata dt { padding-bottom: 0; border-bottom: 0; }
 }

package/src/dashboard/time.js

@@ -0,0 +1,146 @@
+export const RELATIVE_TIME_REFRESH_MS = 30_000;
+export const RELATIVE_DATE_LIMIT_DAYS = 30;
+
+const MINUTE_MS = 60_000;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+
+export function parsedTimestamp(value) {
+  if (typeof value !== "string" || value.trim() === "") return null;
+  const milliseconds = Date.parse(value);
+  if (!Number.isFinite(milliseconds)) return null;
+  return {
+    date: new Date(milliseconds),
+    iso: new Date(milliseconds).toISOString(),
+    milliseconds,
+  };
+}
+
+export function formatExactTime(value, { locale, timeZone } = {}) {
+  const parsed = parsedTimestamp(value);
+  if (!parsed) return "—";
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone,
+  }).format(parsed.date);
+}
+
+function hourPhrase(milliseconds, direction) {
+  const hours = Math.floor(milliseconds / HOUR_MS);
+  const minutes = Math.floor((milliseconds % HOUR_MS) / MINUTE_MS);
+  const hourText = hours === 1 ? "1 hour" : `${hours} hours`;
+  const detail = hours < 6 && minutes > 0 ? ` ${minutes} minutes` : "";
+  return direction === "future"
+    ? `in ${hourText}${detail}`
+    : `${hourText}${detail} ago`;
+}
+
+export function formatRelativeTime(value, {
+  now = Date.now(),
+  locale,
+  timeZone,
+} = {}) {
+  const parsed = parsedTimestamp(value);
+  if (!parsed) return "—";
+  const difference = now - parsed.milliseconds;
+  const future = difference < 0;
+  const elapsed = Math.abs(difference);
+  if (elapsed < MINUTE_MS) return "just now";
+  if (elapsed < 2 * MINUTE_MS) return future ? "in 1 minute" : "1 minute ago";
+  if (elapsed < HOUR_MS) {
+    const minutes = future
+      ? Math.ceil(elapsed / MINUTE_MS)
+      : Math.floor(elapsed / MINUTE_MS);
+    return future ? `in ${minutes} minutes` : `${minutes} minutes ago`;
+  }
+  if (elapsed < 2 * HOUR_MS) return future ? "in 1 hour" : "1 hour ago";
+  if (elapsed < DAY_MS) return hourPhrase(elapsed, future ? "future" : "past");
+  if (elapsed < 2 * DAY_MS) return future ? "in 1 day" : "1 day ago";
+  if (elapsed < RELATIVE_DATE_LIMIT_DAYS * DAY_MS) {
+    const days = future
+      ? Math.ceil(elapsed / DAY_MS)
+      : Math.floor(elapsed / DAY_MS);
+    return future ? `in ${days} days` : `${days} days ago`;
+  }
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: "medium",
+    timeZone,
+  }).format(parsed.date);
+}
+
+export function timestampPresentation(value, {
+  exact = false,
+  now = Date.now(),
+  locale,
+  timeZone,
+} = {}) {
+  const parsed = parsedTimestamp(value);
+  if (!parsed) return { valid: false, label: "—", iso: null };
+  return {
+    exact,
+    iso: parsed.iso,
+    label: exact
+      ? formatExactTime(value, { locale, timeZone })
+      : formatRelativeTime(value, { now, locale, timeZone }),
+    valid: true,
+  };
+}
+
+export class RelativeTimeController {
+  constructor({
+    now = () => Date.now(),
+    setIntervalFn = (...args) => globalThis.setInterval(...args),
+    clearIntervalFn = (...args) => globalThis.clearInterval(...args),
+    refreshEveryMs = RELATIVE_TIME_REFRESH_MS,
+  } = {}) {
+    this.now = now;
+    this.setIntervalFn = setIntervalFn;
+    this.clearIntervalFn = clearIntervalFn;
+    this.refreshEveryMs = refreshEveryMs;
+    this.entries = new Map();
+    this.exactKeys = new Set();
+    this.timer = null;
+  }
+
+  register(key, value, render, { isActive = () => true } = {}) {
+    const token = Symbol(key);
+    this.entries.set(token, { isActive, key, render, value });
+    this.renderEntry(this.entries.get(token));
+    if (this.timer === null) {
+      this.timer = this.setIntervalFn(() => this.refresh(), this.refreshEveryMs);
+    }
+    return () => this.entries.delete(token);
+  }
+
+  renderEntry(entry) {
+    entry.render(timestampPresentation(entry.value, {
+      exact: this.exactKeys.has(entry.key),
+      now: this.now(),
+    }));
+  }
+
+  toggle(key) {
+    if (this.exactKeys.has(key)) this.exactKeys.delete(key);
+    else this.exactKeys.add(key);
+    for (const entry of this.entries.values()) {
+      if (entry.key === key) this.renderEntry(entry);
+    }
+  }
+
+  refresh() {
+    for (const [token, entry] of this.entries) {
+      if (!entry.isActive()) {
+        this.entries.delete(token);
+        continue;
+      }
+      if (!this.exactKeys.has(entry.key)) this.renderEntry(entry);
+    }
+  }
+
+  stop() {
+    if (this.timer !== null) this.clearIntervalFn(this.timer);
+    this.timer = null;
+    this.entries.clear();
+  }
+}

package/src/dashboard.js

@@ -43,10 +43,12 @@ const STATIC_FILES = new Map([
   ["/", [path.join(STATIC_ROOT, "index.html"), "text/html; charset=utf-8"]],
   ["/actions.js", [path.join(STATIC_ROOT, "actions.js"), "text/javascript; charset=utf-8"]],
   ["/app.js", [path.join(STATIC_ROOT, "app.js"), "text/javascript; charset=utf-8"]],
+  ["/time.js", [path.join(STATIC_ROOT, "time.js"), "text/javascript; charset=utf-8"]],
   ["/state.js", [path.join(STATIC_ROOT, "state.js"), "text/javascript; charset=utf-8"]],
   ["/styles.css", [path.join(STATIC_ROOT, "styles.css"), "text/css; charset=utf-8"]],
   ["/assets/taskchef-dark.svg", [path.join(ASSET_ROOT, "taskchef-dark.svg"), "image/svg+xml"]],
   ["/assets/taskchef.svg", [path.join(ASSET_ROOT, "taskchef.svg"), "image/svg+xml"]],
+  ["/assets/codex.svg", [path.join(ASSET_ROOT, "codex.svg"), "image/svg+xml"]],
 ]);
 
 export function dashboardAuthority(host, port) {