taskchef 7.19.1 → 7.21.0

package/src/dashboard/app.js

@@ -1,22 +1,34 @@
 import {
   canArchiveTask,
+  canManuallyTransitionTask,
   clearNotifications,
   dismissNotification,
   filterTasks,
   findCurrentTask,
   latestTurnPresentation,
+  manualTransitionExpectedState,
   mergeProjectedTurns,
   nextDateFilterRefreshDelay,
   notificationDismissLabel,
   notificationOpenLabel,
   notificationTitle,
   reconcileNotifications,
+  reconcileManualTransition,
+  reconcileManualTransitionResponse,
   statusFilterCounts,
   statusFilterText,
   taskStatusLabel,
+  taskMatchesManualTransitionExpected,
   turnPresentation,
 } from "./state.js";
-import { archiveTaskFromControl, openTaskFromControl } from "./actions.js";
+import {
+  archiveTaskFromControl,
+  focusManualTransitionStatus,
+  handleManualTransitionEscape,
+  manuallyTransitionTaskFromControl,
+  openTaskFromControl,
+  restoreTaskActionMenuFocus,
+} from "./actions.js";
 import {
   githubReferenceAccessibleLabel,
   githubReferenceDisplayLabels,
@@ -25,13 +37,18 @@ import {
 } from "./github-links.js";
 import { formatRelativeTime, RelativeTimeController, parsedTimestamp } from "./time.js";
 
+const USAGE_POLL_INTERVAL_MS = 1_500;
+const MAX_USAGE_POLL_ATTEMPTS = 40;
+
 const state = {
+  archivePendingThreadIds: new Set(),
   archivedThreadIds: new Set(),
   tasks: [],
   signatures: new Map(),
   notifications: [],
   seenNotificationIds: new Set(),
   initialized: false,
+  manualTransition: null,
   selectedTask: null,
 };
 let dateRefreshTimer = null;
@@ -57,10 +74,17 @@ const elements = {
   dialogRelatedLinks: document.querySelector("#dialog-related-links"),
   dialogResults: document.querySelector("#dialog-results"),
   dialogTitle: document.querySelector("#dialog-title"),
+  dialogUsage: document.querySelector("#dialog-usage"),
   dismissDashboardMessage: document.querySelector("#dismiss-dashboard-message"),
   emptyState: document.querySelector("#empty-state"),
   notifications: document.querySelector("#notifications"),
   notificationAnnouncer: document.querySelector("#notification-announcer"),
+  manualTransitionPanel: document.querySelector("#manual-transition-panel"),
+  manualTransitionError: document.querySelector("#manual-transition-error"),
+  manualTransitionStatus: document.querySelector("#manual-transition-status"),
+  markTaskCompleted: document.querySelector("#mark-task-completed"),
+  markTaskFailed: document.querySelector("#mark-task-failed"),
+  moreTaskActions: document.querySelector("#more-task-actions"),
   openProject: document.querySelector("#open-codex"),
   projectFilter: document.querySelector("#project-filter"),
   statusFilter: document.querySelector("#status-filter"),
@@ -347,6 +371,58 @@ function detailRow(term, value) {
   return [dt, dd];
 }
 
+const tokenFormatter = new Intl.NumberFormat();
+
+function formatEstimatedCost(value) {
+  if (typeof value !== "number") return "cost unavailable";
+  if (value === 0) return "estimated $0.00";
+  return `estimated $${value < 0.01 ? value.toFixed(4) : value.toFixed(2)}`;
+}
+
+function usageBreakdownText(usage) {
+  return [
+    `${tokenFormatter.format(usage.inputTokens)} input`,
+    `${tokenFormatter.format(usage.cachedInputTokens)} cached input`,
+    `${tokenFormatter.format(usage.outputTokens)} output`,
+    `${tokenFormatter.format(usage.reasoningOutputTokens)} reasoning`,
+  ].join(" · ");
+}
+
+function usagePresentation(usage, { wholeTask = false } = {}) {
+  const container = document.createElement("div");
+  container.className = `usage-summary usage-${usage?.status ?? "calculating"}`;
+  if (!usage || usage.status === "calculating") {
+    const indicator = document.createElement("span");
+    indicator.className = "usage-spinner";
+    indicator.setAttribute("aria-hidden", "true");
+    const text = document.createElement("span");
+    text.textContent = "Tokens: calculating…";
+    container.replaceChildren(indicator, text);
+    return container;
+  }
+  if (usage.status !== "available") {
+    container.textContent = `Tokens unavailable${usage.reason ? ` — ${usage.reason}` : "."}`;
+    return container;
+  }
+  const headline = document.createElement("strong");
+  headline.textContent = `${tokenFormatter.format(usage.totalTokens)} tokens · ${formatEstimatedCost(usage.estimatedCostUsd)}`;
+  const breakdown = document.createElement("span");
+  breakdown.textContent = usageBreakdownText(usage);
+  container.append(headline, breakdown);
+  const provenance = document.createElement("span");
+  const version = usage.provenance?.version ? ` ${usage.provenance.version}` : "";
+  const freshness = usage.sourceUpdatedAt ?? usage.sampledAt;
+  provenance.textContent = `Source: ccusage${version}${freshness ? ` · updated ${formatRelativeTime(freshness)}` : ""}. Dollar cost is an API-equivalent estimate${wholeTask ? " for the task" : " for this turn"}.`;
+  container.append(provenance);
+  return container;
+}
+
+function usageStillCalculating(task) {
+  return task.usage?.status === "calculating"
+    || (task.status !== "working" && Object.values(task.usage?.turns ?? {})
+      .some((turn) => turn.status === "calculating"));
+}
+
 function turnTimeline(task) {
   if (task.turns.length === 0) {
     const empty = document.createElement("p");
@@ -370,6 +446,12 @@ function turnTimeline(task) {
       key: `detail:${task.id}:turn:${turnKey}`,
     });
     header.append(status, timestamp);
+    if (presentation.sourceLabel) {
+      const source = document.createElement("span");
+      source.className = "result-history-source";
+      source.textContent = presentation.sourceLabel;
+      header.insertBefore(source, timestamp);
+    }
     const requestLabel = document.createElement("h4");
     requestLabel.textContent = "Request";
     const request = document.createElement("p");
@@ -387,11 +469,157 @@ function turnTimeline(task) {
     const turnMetadata = document.createElement("p");
     turnMetadata.className = "result-history-turn";
     turnMetadata.textContent = `Turn ref ${turn.turnRef ?? "not recorded"}; Codex turn ${turn.turnId ?? "unavailable"}`;
-    item.append(header, requestLabel, request, resultLabel, result, turnMetadata);
+    const turnUsage = task.usage?.turns?.[turn.turnRef ?? turn.turnId] ?? (
+      turn.result === null
+        ? { status: "calculating" }
+        : { status: "unavailable", reason: "No reliable turn boundary is available." }
+    );
+    item.append(
+      header,
+      requestLabel,
+      request,
+      resultLabel,
+      result,
+      usagePresentation(turnUsage),
+      turnMetadata,
+    );
     return item;
   });
 }
 
+function manualTransitionPending() {
+  return state.manualTransition?.stage === "pending";
+}
+
+function resetManualTransition({ focus = false } = {}) {
+  state.manualTransition = null;
+  elements.closeDialog.disabled = false;
+  if (state.selectedTask) renderManualTransition(state.selectedTask);
+  if (focus) elements.moreTaskActions.focus();
+}
+
+function replaceCurrentTask(task) {
+  state.tasks = state.tasks.map((candidate) => candidate.id === task.id ? task : candidate);
+  state.selectedTask = task;
+}
+
+function renderManualTransition(task) {
+  const activeElement = document.activeElement;
+  const focusWasInPanel = elements.manualTransitionPanel.contains?.(activeElement) ?? false;
+  const eligible = canManuallyTransitionTask(task);
+  state.manualTransition = reconcileManualTransition(state.manualTransition, task);
+  const pending = manualTransitionPending();
+  const expanded = Boolean(state.manualTransition);
+  elements.moreTaskActions.disabled = pending;
+  elements.moreTaskActions.textContent = expanded ? "←" : "…";
+  elements.moreTaskActions.setAttribute(
+    "aria-label",
+    expanded ? "Hide more task actions" : "More task actions",
+  );
+  elements.moreTaskActions.setAttribute("title", expanded ? "Hide more task actions" : "More task actions");
+  elements.moreTaskActions.setAttribute("aria-expanded", String(expanded));
+  elements.closeDialog.disabled = pending;
+  elements.manualTransitionPanel.hidden = state.manualTransition === null;
+  elements.manualTransitionPanel.setAttribute("aria-busy", String(pending));
+  elements.copyTaskId.disabled = pending || !task.id;
+  elements.markTaskCompleted.hidden = !eligible;
+  elements.markTaskFailed.hidden = !eligible;
+  elements.markTaskCompleted.disabled = pending;
+  elements.markTaskFailed.disabled = pending;
+  const archivePending = state.archivePendingThreadIds.has(task.threadId);
+  const archived = state.archivedThreadIds.has(task.threadId);
+  elements.archiveTask.disabled = pending || archivePending || archived;
+  elements.archiveTask.textContent = archived ? "Archived" : archivePending ? "Archiving…" : "Archive chat";
+  elements.archiveTask.setAttribute(
+    "aria-label",
+    archived
+      ? `${task.title} is archived in Codex`
+      : archivePending
+        ? `Archiving ${task.title} in Codex`
+        : `Archive ${task.title} in Codex`,
+  );
+  elements.manualTransitionStatus.hidden = !pending;
+  elements.manualTransitionStatus.textContent = pending ? "Saving task state…" : "";
+  const error = state.manualTransition?.error ?? "";
+  elements.manualTransitionError.hidden = !error;
+  elements.manualTransitionError.textContent = error;
+  if (!state.manualTransition) {
+    elements.closeDialog.disabled = false;
+    if (focusWasInPanel) elements.moreTaskActions.focus();
+    return;
+  }
+  if (pending) {
+    focusManualTransitionStatus(elements.manualTransitionPanel);
+  } else {
+    restoreTaskActionMenuFocus(
+      elements.manualTransitionPanel,
+      activeElement,
+      elements.moreTaskActions,
+    );
+  }
+}
+
+async function submitManualTransition(targetStatus, event) {
+  const task = state.selectedTask;
+  if (!task || !canManuallyTransitionTask(task) || manualTransitionPending()) return;
+  const previous = state.manualTransition;
+  const actionId = previous?.targetStatus === targetStatus && previous.actionId
+    ? previous.actionId
+    : crypto.randomUUID();
+  const attempt = {
+    ...previous,
+    taskId: task.id,
+    stage: "pending",
+    targetStatus,
+    actionId,
+    expected: previous?.expected ?? manualTransitionExpectedState(task),
+    error: null,
+  };
+  state.manualTransition = attempt;
+  renderManualTransition(task);
+  const result = await manuallyTransitionTaskFromControl(
+    event,
+    { ...task, ...attempt.expected },
+    targetStatus,
+    attempt.actionId,
+  );
+  const current = reconcileManualTransitionResponse({
+    requestTask: task,
+    expected: attempt.expected,
+    responseTask: result.task,
+    selectedTask: state.selectedTask,
+  });
+  if (result.ok) {
+    state.manualTransition = null;
+    if (current === result.task) replaceCurrentTask(result.task);
+    renderDialog(current);
+    render();
+    showMessage(result.task.summary);
+    elements.dialogTitle.focus?.();
+    return;
+  }
+  if (current === result.task) replaceCurrentTask(result.task);
+  if (
+    !canManuallyTransitionTask(current)
+    || !taskMatchesManualTransitionExpected(current, attempt.expected)
+  ) {
+    state.manualTransition = null;
+    renderDialog(current);
+    render();
+    showMessage("This task changed. Review its current state before trying again.");
+    elements.dialogTitle.focus?.();
+    return;
+  }
+  state.manualTransition = {
+    ...attempt,
+    stage: "choose",
+    error: result.message,
+    actionId: result.code === "stale_task" ? crypto.randomUUID() : attempt.actionId,
+  };
+  renderDialog(current);
+  elements.manualTransitionError.focus();
+}
+
 function renderDialog(task) {
   if (state.selectedTask?.id !== task.id) {
     copyTaskIdGeneration += 1;
@@ -418,6 +646,12 @@ function renderDialog(task) {
     (task.relatedGitHubLinks?.length ?? 0) === 0 && !task.relatedGitHubLinksTruncated
   );
   elements.dialogResults.replaceChildren(...turnTimeline(detailedTask));
+  elements.dialogUsage.replaceChildren(usagePresentation(
+    task.usage?.status === "available" && task.usage.task
+      ? { status: "available", ...task.usage.task }
+      : task.usage ?? { status: task.threadId ? "calculating" : "unavailable" },
+    { wholeTask: true },
+  ));
   elements.dialogInstruction.textContent = task.instruction;
   elements.copyTaskId.disabled = !task.id;
   setCopyTaskIdLabel("Copy Task ID");
@@ -451,35 +685,43 @@ function renderDialog(task) {
   configureOpenTaskControl(elements.openProject, `Open ${task.title} in Codex`);
   const canArchive = canArchiveTask(task);
   const archived = state.archivedThreadIds.has(task.threadId);
+  const archivePending = state.archivePendingThreadIds.has(task.threadId);
   elements.archiveTask.hidden = !canArchive;
-  elements.archiveTask.disabled = archived;
-  elements.archiveTask.textContent = archived ? "Archived" : "Archive chat";
+  elements.archiveTask.disabled = archived || archivePending;
+  elements.archiveTask.textContent = archived ? "Archived" : archivePending ? "Archiving…" : "Archive chat";
   elements.archiveTask.setAttribute(
     "aria-label",
     archived ? `${task.title} is archived in Codex` : `Archive ${task.title} in Codex`,
   );
+  renderManualTransition(detailedTask);
 }
 
 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 activity timeline is temporarily unavailable.");
+  const load = async (attempt = 0) => {
+    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);
+        if (usageStillCalculating(detail.task) && attempt < MAX_USAGE_POLL_ATTEMPTS) {
+          setTimeout(() => load(attempt + 1), USAGE_POLL_INTERVAL_MS);
+        }
+      }
+    } catch {
+      if (state.selectedTask?.id === task.id) {
+        showMessage("Task activity timeline is temporarily unavailable.");
+      }
     }
-  }
+  };
+  await load();
 }
 
 function taskCard(task) {
@@ -634,9 +876,47 @@ elements.clearNotifications.addEventListener("click", () => {
   state.notifications = clearNotifications();
   renderNotifications();
 });
-elements.closeDialog.addEventListener("click", () => elements.dialog.close());
+elements.closeDialog.addEventListener("click", () => {
+  if (!manualTransitionPending()) elements.dialog.close();
+});
 elements.dialog.addEventListener("click", (event) => {
-  if (event.target === elements.dialog) elements.dialog.close();
+  if (event.target === elements.dialog && !manualTransitionPending()) elements.dialog.close();
+});
+elements.dialog.addEventListener("keydown", (event) => {
+  handleManualTransitionEscape(event, {
+    active: Boolean(state.manualTransition),
+    pending: manualTransitionPending(),
+    cancel: () => resetManualTransition({ focus: true }),
+  });
+});
+elements.dialog.addEventListener("cancel", (event) => {
+  if (!state.manualTransition) return;
+  event.preventDefault();
+  if (!manualTransitionPending()) resetManualTransition({ focus: true });
+});
+elements.dialog.addEventListener("close", () => {
+  if (!manualTransitionPending()) state.manualTransition = null;
+});
+elements.moreTaskActions.addEventListener("click", () => {
+  const task = state.selectedTask;
+  if (!task || manualTransitionPending()) return;
+  if (state.manualTransition) {
+    resetManualTransition({ focus: true });
+    return;
+  }
+  state.manualTransition = {
+    taskId: task.id,
+    stage: "choose",
+    expected: manualTransitionExpectedState(task),
+  };
+  renderManualTransition(task);
+  elements.copyTaskId.focus();
+});
+elements.markTaskCompleted.addEventListener("click", (event) => {
+  return submitManualTransition("completed", event);
+});
+elements.markTaskFailed.addEventListener("click", (event) => {
+  return submitManualTransition("failed", event);
 });
 elements.copyTaskId.addEventListener("click", async () => {
   const taskId = state.selectedTask?.id;
@@ -666,12 +946,20 @@ elements.openProject.addEventListener("click", async (event) => {
 });
 elements.archiveTask.addEventListener("click", async (event) => {
   const task = state.selectedTask;
-  if (!task || !canArchiveTask(task)) return;
-  await archiveTaskFromControl(event, task, {
-    onArchived: (threadId) => {
-      state.archivedThreadIds.add(threadId);
-      if (state.selectedTask?.id === task.id) renderDialog(state.selectedTask);
-    },
-    showMessage,
-  });
+  if (
+    !task
+    || !canArchiveTask(task)
+    || state.archivePendingThreadIds.has(task.threadId)
+  ) return;
+  state.archivePendingThreadIds.add(task.threadId);
+  renderManualTransition(task);
+  try {
+    await archiveTaskFromControl(event, task, {
+      onArchived: (threadId) => state.archivedThreadIds.add(threadId),
+      showMessage,
+    });
+  } finally {
+    state.archivePendingThreadIds.delete(task.threadId);
+    if (state.selectedTask?.id === task.id) renderDialog(state.selectedTask);
+  }
 });

package/src/dashboard/index.html

@@ -100,11 +100,11 @@
       <div class="dialog-header">
         <div>
           <p id="dialog-project" class="eyebrow"></p>
-          <h2 id="dialog-title"></h2>
+          <h2 id="dialog-title" tabindex="-1"></h2>
         </div>
         <button id="close-dialog" class="icon-button" type="button" aria-label="Close task details">×</button>
       </div>
-      <div class="dialog-actions">
+      <div class="dialog-actions" role="group" aria-label="Task actions">
         <button id="open-codex" class="primary-button task-action" type="button" aria-label="Open this task in Codex">
           <picture class="codex-icon" aria-hidden="true">
             <source srcset="/assets/codex-app-dark.png" media="(prefers-color-scheme: dark)">
@@ -112,10 +112,23 @@
           </picture>
           <span>Open task</span>
         </button>
-        <button id="copy-task-id" class="secondary-button" type="button" aria-label="Copy Task ID">Copy Task ID</button>
-        <button id="archive-codex" class="danger-button" type="button" aria-label="Archive this chat in Codex" hidden>Archive chat</button>
+        <button id="more-task-actions" class="secondary-button more-task-actions" type="button" aria-label="More task actions" aria-expanded="false" aria-controls="manual-transition-panel">…</button>
+        <div id="manual-transition-panel" class="manual-transition-panel" aria-busy="false" hidden>
+          <div class="manual-transition-controls">
+            <button id="copy-task-id" class="secondary-button" type="button" aria-label="Copy Task ID" data-manual-focus="copy">Copy Task ID</button>
+            <button id="mark-task-completed" class="secondary-button" type="button" data-manual-focus="target-completed">Mark completed</button>
+            <button id="mark-task-failed" class="danger-button" type="button" data-manual-focus="target-failed">Mark failed</button>
+            <button id="archive-codex" class="danger-button" type="button" aria-label="Archive this chat in Codex" hidden>Archive chat</button>
+          </div>
+          <p id="manual-transition-status" class="manual-transition-pending" role="status" aria-live="polite" tabindex="-1" data-manual-focus="pending" hidden></p>
+          <p id="manual-transition-error" class="manual-transition-error" role="alert" tabindex="-1" data-manual-focus="error" hidden></p>
+        </div>
       </div>
       <nav id="dialog-related-links" class="github-links" aria-label="Related GitHub links" hidden></nav>
+      <section>
+        <h3>Usage</h3>
+        <div id="dialog-usage" class="usage-panel" aria-live="polite"></div>
+      </section>
       <section>
         <h3>Activity timeline</h3>
         <div id="dialog-results" class="result-history"></div>

package/src/dashboard/state.js

@@ -22,6 +22,8 @@ const NOTIFICATION_TITLES = new Map([
   ["completed", "Task completed"],
   ["needs_input", "Task needs input"],
   ["failed", "Task failed"],
+  ["manual_completed", "Task manually completed"],
+  ["manual_failed", "Task manually failed"],
   ["unresolved", "Task updated"],
 ]);
 
@@ -45,6 +47,50 @@ export function canArchiveTask(task) {
     && CODEX_THREAD_ID_PATTERN.test(task.threadId);
 }
 
+export function canManuallyTransitionTask(task) {
+  return ["working", "needs_input"].includes(task.status);
+}
+
+export function manualTransitionExpectedState(task) {
+  return {
+    status: task.status,
+    turnRef: task.turnRef,
+    threadId: task.threadId,
+    updatedAt: task.updatedAt,
+  };
+}
+
+export function taskMatchesManualTransitionExpected(task, expected) {
+  return Boolean(expected)
+    && task.status === expected.status
+    && task.turnRef === expected.turnRef
+    && task.threadId === expected.threadId
+    && task.updatedAt === expected.updatedAt;
+}
+
+export function reconcileManualTransition(transition, task) {
+  if (!transition || transition.taskId !== task.id) return null;
+  if (transition.stage === "pending") return transition;
+  if (taskMatchesManualTransitionExpected(task, transition.expected)) return transition;
+  return {
+    taskId: task.id,
+    stage: "choose",
+    expected: manualTransitionExpectedState(task),
+  };
+}
+
+export function reconcileManualTransitionResponse({
+  requestTask,
+  expected,
+  responseTask,
+  selectedTask,
+}) {
+  const current = selectedTask?.id === requestTask.id ? selectedTask : requestTask;
+  return taskMatchesManualTransitionExpected(current, expected)
+    ? (responseTask ?? current)
+    : current;
+}
+
 export function latestTurnPresentation(task) {
   const turn = task.latestTurn ?? null;
   const result = turn?.result ?? null;
@@ -70,6 +116,9 @@ export function turnPresentation(turn) {
     status: result?.status ?? "working",
     summary: result?.summary ?? "In progress",
     updatedAt: result?.updatedAt ?? turn.startedAt,
+    ...(turn.provenance?.kind === "dashboard_manual"
+      ? { sourceLabel: "Manual dashboard change" }
+      : {}),
   };
 }
 
@@ -200,6 +249,9 @@ function lifecycleEvent(task) {
   if (task.status === "working") {
     return task.lastResult ? "follow_up_started" : "task_started";
   }
+  if (task.latestTurn?.provenance?.kind === "dashboard_manual") {
+    return `manual_${task.status}`;
+  }
   return task.status ?? "unresolved";
 }
 
@@ -223,7 +275,9 @@ function eventTimestamp(task, event) {
 }
 
 function eventSummary(task, event) {
-  if (!["completed", "needs_input", "failed"].includes(event)) return null;
+  if (!["completed", "needs_input", "failed", "manual_completed", "manual_failed"].includes(event)) {
+    return null;
+  }
   if (
     task.lastResult?.status === task.status
     && (task.lastResult?.turnRef ?? task.lastResult?.turnId)
@@ -252,16 +306,19 @@ export function notificationSnapshot(task, event = lifecycleEvent(task)) {
 function resultNotificationSnapshot(task) {
   const result = task.lastResult;
   if (!result) return null;
+  const event = result.provenance?.kind === "dashboard_manual"
+    ? `manual_${result.status}`
+    : result.status;
   return Object.freeze({
     id: notificationIdentity({
       ...task,
       turnRef: result.turnRef ?? result.turnId,
       turnId: result.turnId,
-    }, result.status),
+    }, event),
     taskId: task.id,
     title: task.title,
     status: result.status,
-    event: result.status,
+    event,
     turnRef: result.turnRef ?? result.turnId ?? null,
     turnId: result.turnId ?? null,
     timestamp: result.updatedAt,