taskchef 7.4.0 → 7.6.0

package/src/dashboard/app.js

@@ -8,6 +8,7 @@ import {
   taskWithinDateFilter,
 } from "./state.js";
 import { openTaskFromControl } from "./actions.js";
+import { RelativeTimeController, parsedTimestamp } from "./time.js";
 
 const state = {
   tasks: [],
@@ -17,6 +18,8 @@ const state = {
   selectedTask: null,
 };
 let dateRefreshTimer = null;
+let detailRequestGeneration = 0;
+const relativeTimes = new RelativeTimeController();
 
 const elements = {
   clearNotifications: document.querySelector("#clear-notifications"),
@@ -31,7 +34,7 @@ const elements = {
   dialogInstruction: document.querySelector("#dialog-instruction"),
   dialogMetadata: document.querySelector("#dialog-metadata"),
   dialogProject: document.querySelector("#dialog-project"),
-  dialogSummary: document.querySelector("#dialog-summary"),
+  dialogResults: document.querySelector("#dialog-results"),
   dialogTitle: document.querySelector("#dialog-title"),
   dismissDashboardMessage: document.querySelector("#dismiss-dashboard-message"),
   emptyState: document.querySelector("#empty-state"),
@@ -44,12 +47,42 @@ const elements = {
   toastList: document.querySelector("#toast-list"),
 };
 
-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) {
@@ -115,16 +148,55 @@ 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 openDialog(task) {
-  state.selectedTask = task;
+function resultHistory(taskId, results) {
+  if (results.length === 0) {
+    const empty = document.createElement("p");
+    empty.className = "result-history-empty";
+    empty.textContent = "No semantic result has been reported yet.";
+    return [empty];
+  }
+  return [...results].reverse().map((result, index) => {
+    const item = document.createElement("article");
+    item.className = `result-history-item${index === 0 ? " result-history-latest" : ""}`;
+    const header = document.createElement("div");
+    header.className = "result-history-header";
+    const status = document.createElement("span");
+    status.className = `status status-${result.status}`;
+    status.textContent = result.status.replaceAll("_", " ");
+    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";
+    summary.textContent = result.summary;
+    const turn = document.createElement("p");
+    turn.className = "result-history-turn";
+    turn.textContent = result.turnId ? `Turn ${result.turnId}` : "No turn ID (creation failure)";
+    item.append(header, summary, turn);
+    return item;
+  });
+}
+
+function renderDialog(task) {
+  const preservedResults = state.selectedTask?.id === task.id
+    ? state.selectedTask.results
+    : null;
+  const detailedTask = {
+    ...task,
+    results: task.results ?? preservedResults ?? [],
+  };
+  state.selectedTask = detailedTask;
   elements.dialogProject.textContent = task.project.name;
   elements.dialogTitle.textContent = task.title;
-  elements.dialogSummary.textContent = task.lastResult?.summary
-    ?? "No semantic result has been reported yet.";
+  elements.dialogResults.replaceChildren(...resultHistory(task.id, detailedTask.results));
   elements.dialogInstruction.textContent = task.instruction;
   elements.copyThreadId.disabled = !task.threadId;
   elements.dialogMetadata.replaceChildren(
@@ -132,17 +204,49 @@ function openDialog(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) {
+  const requestGeneration = ++detailRequestGeneration;
+  renderDialog(task);
   if (!elements.dialog.open) elements.dialog.showModal();
+  try {
+    const response = await fetch(`/api/tasks/${encodeURIComponent(task.id)}`);
+    if (!response.ok) throw new Error("Task details are unavailable.");
+    const detail = await response.json();
+    if (
+      requestGeneration === detailRequestGeneration
+      && state.selectedTask?.id === task.id
+      && elements.dialog.open
+    ) {
+      renderDialog(detail.task);
+    }
+  } catch {
+    if (state.selectedTask?.id === task.id) {
+      showMessage("Task result history is temporarily unavailable.");
+    }
+  }
 }
 
 function taskCard(task) {
@@ -165,16 +269,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,
   }));

package/src/dashboard/index.html

@@ -83,12 +83,15 @@
         <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>
-        <h3>Result</h3>
-        <p id="dialog-summary" class="preserve-lines"></p>
+        <h3>Result history</h3>
+        <div id="dialog-results" class="result-history"></div>
       </section>
       <section>
         <h3>Original instruction</h3>

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); }
@@ -117,6 +121,14 @@ dialog::backdrop { background: rgb(18 23 21 / 50%); backdrop-filter: blur(2px);
 .primary-button:disabled, .secondary-button:disabled { opacity: 0.5; cursor: not-allowed; }
 dialog section + section { margin-top: 24px; }
 .preserve-lines { white-space: pre-wrap; }
+.result-history { display: grid; gap: 10px; }
+.result-history-item { padding: 13px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
+.result-history-latest { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
+.result-history-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
+.result-history-item p { margin-bottom: 7px; }
+.result-history-item p:last-child { margin-bottom: 0; }
+.result-history-turn, .result-history-empty { color: var(--muted); font-size: 0.78rem; overflow-wrap: anywhere; }
+.result-history-empty { margin: 0; }
 pre { max-height: 280px; margin: 0; padding: 14px; overflow: auto; border-radius: 7px; background: var(--surface-muted); white-space: pre-wrap; overflow-wrap: anywhere; font: 0.86rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 .metadata { display: grid; grid-template-columns: minmax(100px, 150px) 1fr; margin: 0; font-size: 0.88rem; }
 .metadata dt, .metadata dd { padding: 7px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
@@ -134,8 +146,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) {
@@ -136,6 +138,14 @@ function assertDashboardTaskBounds(tasks, maximumTasks) {
     boundedText(task.turnId, 512, `${name} turn ID`);
     boundedText(task.lastResult?.summary, 2_000, `${name} last result summary`);
     boundedText(task.lastResult?.turnId, 512, `${name} last result turn ID`);
+    const results = task.results ?? [];
+    if (results.length > 10_000) {
+      throw new Error(`${name} has too many results for the dashboard`);
+    }
+    for (const [resultIndex, result] of results.entries()) {
+      boundedText(result.summary, 2_000, `${name} result ${resultIndex + 1} summary`);
+      boundedText(result.turnId, 512, `${name} result ${resultIndex + 1} turn ID`);
+    }
     boundedText(task.project.name, 1_000, `${name} project name`);
     boundedText(task.project.path, 8_192, `${name} project path`);
     boundedText(task.project.description, 4_000, `${name} project description`);
@@ -148,6 +158,11 @@ function assertDashboardTaskBounds(tasks, maximumTasks) {
   }
 }
 
+function taskListProjection(task) {
+  const { results: _results, ...projection } = task;
+  return projection;
+}
+
 export class DashboardMonitor extends EventEmitter {
   constructor(workspace, {
     debounceMs = 75,
@@ -197,7 +212,7 @@ export class DashboardMonitor extends EventEmitter {
       generatedAt: new Date().toISOString(),
       healthy: !this.unhealthy,
       tasks: this.tasks.map((task) => ({
-        ...task,
+        ...taskListProjection(task),
         meaningfulUpdatedAt: new Date(
           meaningfulUpdateTime(task, this.observedUpdateTimes),
         ).toISOString(),
@@ -510,6 +525,22 @@ export async function createDashboardServer({
       return;
     }
 
+    const detailMatch = url.pathname.match(/^\/api\/tasks\/([a-zA-Z0-9._-]+)$/);
+    if (detailMatch && (method === "GET" || method === "HEAD")) {
+      const task = monitor.tasks.find((candidate) => candidate.id === detailMatch[1]);
+      if (!task) {
+        sendJson(response, 404, { message: "Task not found." });
+        return;
+      }
+      if (method === "HEAD") {
+        response.writeHead(200, securityHeaders("application/json; charset=utf-8"));
+        response.end();
+      } else {
+        sendJson(response, 200, { schemaVersion: 1, task });
+      }
+      return;
+    }
+
     const taskMatch = url.pathname.match(/^\/api\/tasks\/([a-zA-Z0-9._-]+)\/open-codex$/);
     if (taskMatch && method === "POST") {
       if (request.headers.origin !== allowedOrigin) {

package/src/mcp.js

@@ -21,7 +21,7 @@ const projectSchema = z.object({
 });
 
 const taskSchema = z.object({
-  schemaVersion: z.union([z.literal(4), z.literal(5)]),
+  schemaVersion: z.union([z.literal(4), z.literal(5), z.literal(6)]),
   id: z.string(),
   project: projectSchema,
   title: z.string(),
@@ -33,6 +33,12 @@ const taskSchema = z.object({
   turnId: z.string().nullable(),
   updatedAt: z.string(),
   updatedBy: z.enum(["dispatcher", "mcp"]),
+  results: z.array(z.object({
+    status: z.enum(["needs_input", "completed", "failed"]),
+    summary: z.string(),
+    turnId: z.string().nullable(),
+    updatedAt: z.string(),
+  })),
   lastResult: z.object({
     status: z.enum(["needs_input", "completed", "failed"]),
     summary: z.string(),