taskchef 7.5.0 → 7.6.0

package/.codex-plugin/plugin.json

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

package/README.md

@@ -176,6 +176,10 @@ 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.
 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,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taskchef",
-  "version": "7.5.0",
+  "version": "7.6.0",
   "description": "A non-blocking interactive dispatcher for visible Codex tasks.",
   "license": "MIT",
   "author": "Favo Yang",

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: [],
@@ -18,6 +19,7 @@ const state = {
 };
 let dateRefreshTimer = null;
 let detailRequestGeneration = 0;
+const relativeTimes = new RelativeTimeController();
 
 const elements = {
   clearNotifications: document.querySelector("#clear-notifications"),
@@ -45,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) {
@@ -116,11 +148,12 @@ 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 +168,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 +196,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 +204,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 +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,7 +83,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/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); }
@@ -142,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) {