taskchef 5.7.2 → 5.9.0

package/src/dashboard/app.js

@@ -0,0 +1,255 @@
+import {
+  findCurrentTask,
+  reconcileNotifications,
+} from "./state.js";
+
+const state = {
+  tasks: [],
+  signatures: new Map(),
+  notifications: [],
+  initialized: false,
+  selectedTask: null,
+};
+
+const elements = {
+  clearNotifications: document.querySelector("#clear-notifications"),
+  closeDialog: document.querySelector("#close-dialog"),
+  connectionDot: document.querySelector("#connection-dot"),
+  connectionLabel: document.querySelector("#connection-label"),
+  copyThreadId: document.querySelector("#copy-thread-id"),
+  dashboardMessage: document.querySelector("#dashboard-message"),
+  dialog: document.querySelector("#task-dialog"),
+  dialogInstruction: document.querySelector("#dialog-instruction"),
+  dialogMetadata: document.querySelector("#dialog-metadata"),
+  dialogProject: document.querySelector("#dialog-project"),
+  dialogSummary: document.querySelector("#dialog-summary"),
+  dialogTitle: document.querySelector("#dialog-title"),
+  emptyState: document.querySelector("#empty-state"),
+  notifications: document.querySelector("#notifications"),
+  openProject: document.querySelector("#open-project"),
+  projectFilter: document.querySelector("#project-filter"),
+  statusFilter: document.querySelector("#status-filter"),
+  taskCount: document.querySelector("#task-count"),
+  taskList: document.querySelector("#task-list"),
+  toastList: document.querySelector("#toast-list"),
+};
+
+function statusLabel(task) {
+  return task.status === null ? "unresolved" : task.status.replaceAll("_", " ");
+}
+
+function formatTime(value) {
+  if (!value) return "—";
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+function setConnection(connected) {
+  elements.connectionDot.classList.toggle("connected", connected);
+  elements.connectionLabel.textContent = connected ? "Live" : "Reconnecting…";
+}
+
+function replaceOptions(select, values, allLabel) {
+  const selected = select.value;
+  select.replaceChildren();
+  const all = document.createElement("option");
+  all.value = "";
+  all.textContent = allLabel;
+  select.append(all);
+  for (const value of values) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = value;
+    select.append(option);
+  }
+  if (values.includes(selected)) select.value = selected;
+}
+
+function notificationToast(notification) {
+  const task = findCurrentTask(state.tasks, notification.taskId);
+  if (!task) return null;
+  const toast = document.createElement("div");
+  toast.className = "toast";
+  const text = document.createElement("button");
+  text.type = "button";
+  text.className = "toast-content";
+  const title = document.createElement("strong");
+  title.textContent = notification.kind === "new" ? "New task" : "Task updated";
+  const description = document.createElement("span");
+  description.textContent = `${task.title} · ${statusLabel(task)}`;
+  text.append(title, description);
+  text.addEventListener("click", () => {
+    const current = findCurrentTask(state.tasks, notification.taskId);
+    if (current) openDialog(current);
+    else showMessage("This task is no longer present in the current snapshot.");
+  });
+  const dismiss = document.createElement("button");
+  dismiss.type = "button";
+  dismiss.className = "icon-button";
+  dismiss.setAttribute("aria-label", `Dismiss notification for ${task.title}`);
+  dismiss.textContent = "×";
+  dismiss.addEventListener("click", () => {
+    state.notifications = state.notifications.filter(({ id }) => id !== notification.id);
+    renderNotifications();
+  });
+  toast.append(text, dismiss);
+  return toast;
+}
+
+function renderNotifications() {
+  elements.toastList.replaceChildren(
+    ...state.notifications.map(notificationToast).filter(Boolean),
+  );
+  elements.notifications.hidden = state.notifications.length === 0;
+}
+
+function detailRow(term, value) {
+  const dt = document.createElement("dt");
+  dt.textContent = term;
+  const dd = document.createElement("dd");
+  dd.textContent = value ?? "—";
+  return [dt, dd];
+}
+
+function openDialog(task) {
+  state.selectedTask = task;
+  elements.dialogProject.textContent = task.project.name;
+  elements.dialogTitle.textContent = task.title;
+  elements.dialogSummary.textContent = task.summary ?? "No semantic result has been reported yet.";
+  elements.dialogInstruction.textContent = task.instruction;
+  elements.copyThreadId.disabled = !task.threadId;
+  elements.dialogMetadata.replaceChildren(
+    ...detailRow("Status", statusLabel(task)),
+    ...detailRow("Task ID", task.id),
+    ...detailRow("Thread ID", task.threadId),
+    ...detailRow("Turn ID", task.turnId),
+    ...detailRow("Project path", task.project.path),
+    ...detailRow("Created", formatTime(task.createdAt)),
+    ...detailRow("Updated", formatTime(task.updatedAt ?? task.createdAt)),
+    ...detailRow("Updated by", task.updatedBy),
+  );
+  if (!elements.dialog.open) elements.dialog.showModal();
+}
+
+function taskCard(task) {
+  const article = document.createElement("article");
+  article.className = "task-card";
+  const heading = document.createElement("div");
+  heading.className = "task-heading";
+  const title = document.createElement("button");
+  title.type = "button";
+  title.className = "task-title";
+  title.textContent = task.title;
+  title.addEventListener("click", () => openDialog(task));
+  const badge = document.createElement("span");
+  badge.className = `status status-${task.status ?? "unresolved"}`;
+  badge.textContent = statusLabel(task);
+  heading.append(title, badge);
+  const project = document.createElement("p");
+  project.className = "task-project";
+  project.textContent = task.project.name;
+  const summary = document.createElement("p");
+  summary.className = "task-summary";
+  summary.textContent = task.summary ?? "No semantic result reported yet.";
+  const time = document.createElement("time");
+  time.dateTime = task.updatedAt ?? task.createdAt;
+  time.textContent = `Updated ${formatTime(task.updatedAt ?? task.createdAt)}`;
+  article.append(heading, project, summary, time);
+  return article;
+}
+
+function render() {
+  const project = elements.projectFilter.value;
+  const status = elements.statusFilter.value;
+  const visible = state.tasks.filter((task) =>
+    (!project || task.project.name === project)
+    && (!status || statusLabel(task) === status));
+  elements.taskList.replaceChildren(...visible.map(taskCard));
+  elements.emptyState.hidden = visible.length > 0;
+  elements.taskCount.textContent = `${visible.length} of ${state.tasks.length} task${state.tasks.length === 1 ? "" : "s"}`;
+}
+
+function applySnapshot(snapshot) {
+  const reconciled = reconcileNotifications({
+    initialized: state.initialized,
+    notifications: state.notifications,
+    signatures: state.signatures,
+  }, snapshot.tasks, snapshot.revision);
+  state.tasks = snapshot.tasks;
+  state.signatures = reconciled.signatures;
+  state.notifications = reconciled.notifications;
+  state.initialized = true;
+  if (snapshot.healthy === false) {
+    showMessage("The task log is temporarily unavailable. Showing the last valid snapshot.");
+  } else {
+    elements.dashboardMessage.hidden = true;
+  }
+  replaceOptions(
+    elements.projectFilter,
+    [...new Set(state.tasks.map((task) => task.project.name))].sort(),
+    "All projects",
+  );
+  replaceOptions(
+    elements.statusFilter,
+    [...new Set(state.tasks.map(statusLabel))].sort(),
+    "All statuses",
+  );
+  if (state.selectedTask) {
+    const updated = state.tasks.find((task) => task.id === state.selectedTask.id);
+    if (updated && elements.dialog.open) openDialog(updated);
+  }
+  renderNotifications();
+  render();
+}
+
+function showMessage(message) {
+  elements.dashboardMessage.textContent = message;
+  elements.dashboardMessage.hidden = false;
+}
+
+const events = new EventSource("/api/events");
+events.addEventListener("open", () => setConnection(true));
+events.addEventListener("error", () => setConnection(false));
+events.addEventListener("snapshot", (event) => {
+  setConnection(true);
+  applySnapshot(JSON.parse(event.data));
+});
+events.addEventListener("dashboard-error", (event) => {
+  showMessage(JSON.parse(event.data).message);
+});
+
+elements.projectFilter.addEventListener("change", render);
+elements.statusFilter.addEventListener("change", render);
+elements.clearNotifications.addEventListener("click", () => {
+  state.notifications = [];
+  renderNotifications();
+});
+elements.closeDialog.addEventListener("click", () => elements.dialog.close());
+elements.dialog.addEventListener("click", (event) => {
+  if (event.target === elements.dialog) elements.dialog.close();
+});
+elements.copyThreadId.addEventListener("click", async () => {
+  if (!state.selectedTask?.threadId) return;
+  try {
+    await navigator.clipboard.writeText(state.selectedTask.threadId);
+    elements.copyThreadId.textContent = "Copied";
+    setTimeout(() => { elements.copyThreadId.textContent = "Copy thread ID"; }, 1_500);
+  } catch {
+    showMessage("Clipboard access is unavailable. Copy the thread ID from the metadata below.");
+  }
+});
+elements.openProject.addEventListener("click", async () => {
+  if (!state.selectedTask) return;
+  elements.openProject.disabled = true;
+  try {
+    const response = await fetch(`/api/tasks/${encodeURIComponent(state.selectedTask.id)}/open-project`, {
+      method: "POST",
+    });
+    const result = await response.json();
+    showMessage(result.message);
+  } finally {
+    elements.openProject.disabled = false;
+  }
+});

package/src/dashboard/index.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <title>TaskChef dashboard</title>
+    <link rel="stylesheet" href="/styles.css">
+    <script src="/app.js" type="module"></script>
+  </head>
+  <body>
+    <header class="site-header">
+      <div>
+        <p class="eyebrow">TaskChef</p>
+        <h1>Task dashboard</h1>
+        <p class="subtitle">Latest delegated work, updated as TaskChef reports change.</p>
+      </div>
+      <div class="connection" role="status" aria-live="polite">
+        <span id="connection-dot" class="connection-dot"></span>
+        <span id="connection-label">Connecting…</span>
+      </div>
+    </header>
+
+    <main>
+      <section class="toolbar" aria-label="Task filters">
+        <label>
+          Project
+          <select id="project-filter">
+            <option value="">All projects</option>
+          </select>
+        </label>
+        <label>
+          Status
+          <select id="status-filter">
+            <option value="">All statuses</option>
+          </select>
+        </label>
+        <p id="task-count" class="task-count" aria-live="polite"></p>
+      </section>
+
+      <div id="dashboard-message" class="dashboard-message" role="status" hidden></div>
+      <section aria-labelledby="tasks-heading">
+        <h2 id="tasks-heading" class="visually-hidden">Tasks</h2>
+        <div id="task-list" class="task-list"></div>
+        <div id="empty-state" class="empty-state" hidden>
+          <h2>No tasks match these filters</h2>
+          <p>Choose a different project or status to see more work.</p>
+        </div>
+      </section>
+    </main>
+
+    <aside id="notifications" class="notifications" aria-label="Task notifications" hidden>
+      <div class="notifications-heading">
+        <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>
+    </aside>
+
+    <dialog id="task-dialog" aria-labelledby="dialog-title">
+      <div class="dialog-header">
+        <div>
+          <p id="dialog-project" class="eyebrow"></p>
+          <h2 id="dialog-title"></h2>
+        </div>
+        <button id="close-dialog" class="icon-button" type="button" aria-label="Close task details">×</button>
+      </div>
+      <div class="dialog-actions">
+        <button id="open-project" class="primary-button" type="button">Open project in Codex</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>
+      </section>
+      <section>
+        <h3>Original instruction</h3>
+        <pre id="dialog-instruction"></pre>
+      </section>
+      <section>
+        <h3>Metadata</h3>
+        <dl id="dialog-metadata" class="metadata"></dl>
+      </section>
+    </dialog>
+  </body>
+</html>

package/src/dashboard/state.js

@@ -0,0 +1,40 @@
+export const MAX_NOTIFICATIONS = 50;
+
+export function taskSignature(task) {
+  return JSON.stringify([
+    task.threadId,
+    task.status,
+    task.summary,
+    task.turnId,
+    task.updatedAt,
+    task.updatedBy,
+  ]);
+}
+
+export function findCurrentTask(tasks, taskId) {
+  return tasks.find((task) => task.id === taskId) ?? null;
+}
+
+export function reconcileNotifications(
+  { initialized, notifications, signatures },
+  tasks,
+  revision,
+) {
+  const nextSignatures = new Map(tasks.map((task) => [task.id, taskSignature(task)]));
+  if (!initialized) return { notifications, 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,
+    });
+  }
+  return {
+    notifications: [...additions, ...notifications].slice(0, MAX_NOTIFICATIONS),
+    signatures: nextSignatures,
+  };
+}

package/src/dashboard/styles.css

@@ -0,0 +1,147 @@
+:root {
+  color-scheme: light;
+  --background: #f5f4f0;
+  --surface: #ffffff;
+  --surface-muted: #eeece6;
+  --text: #1d211f;
+  --muted: #626964;
+  --border: #d8d7d1;
+  --accent: #215f4a;
+  --accent-soft: #dcebe4;
+  --danger: #8b3a35;
+  --warning: #8a5c17;
+  --shadow: 0 12px 30px rgb(24 33 29 / 10%);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--text);
+  line-height: 1.5;
+}
+
+button, select { font: inherit; }
+button { color: inherit; }
+
+.site-header, main {
+  width: min(1080px, calc(100% - 40px));
+  margin-inline: auto;
+}
+
+.site-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding-block: 48px 28px;
+  border-bottom: 1px solid var(--border);
+}
+
+h1, h2, h3, p { margin-top: 0; }
+h1 { margin-bottom: 6px; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.04em; }
+h2 { line-height: 1.2; }
+h3 { margin-bottom: 8px; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
+
+.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 { margin-bottom: 0; }
+
+.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; }
+.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); }
+.connection-dot.connected { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
+
+main { padding-block: 28px 80px; }
+
+.toolbar {
+  display: flex;
+  align-items: flex-end;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+label { display: grid; gap: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
+select { min-width: 180px; padding: 9px 34px 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
+.task-count { margin: 0 0 9px auto; color: var(--muted); font-size: 0.9rem; }
+
+.task-list { display: grid; gap: 12px; }
+.task-card { padding: 20px 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 0 rgb(0 0 0 / 2%); }
+.task-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
+.task-title { padding: 0; border: 0; background: none; font-size: 1.08rem; font-weight: 720; text-align: left; cursor: pointer; }
+.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; }
+
+.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); }
+.status-failed { background: #f3dfdd; color: var(--danger); }
+.status-needs_input { background: #f4e9ce; color: var(--warning); }
+
+.empty-state { padding: 60px 20px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; color: var(--muted); }
+.empty-state h2 { margin-bottom: 6px; color: var(--text); }
+
+.dashboard-message { margin-bottom: 18px; padding: 11px 14px; border: 1px solid #d8c58e; border-radius: 7px; background: #fff7de; color: #604613; }
+
+.notifications { position: fixed; right: 20px; bottom: 20px; z-index: 3; width: min(380px, calc(100vw - 40px)); padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
+.notifications-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.toast-list { display: grid; gap: 7px; max-height: 50vh; overflow: auto; }
+.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; }
+
+.text-button, .icon-button { border: 0; background: none; cursor: pointer; }
+.text-button { color: var(--accent); font-size: 0.82rem; font-weight: 700; }
+.icon-button { padding: 0 4px; color: var(--muted); font-size: 1.4rem; line-height: 1; }
+
+dialog { width: min(760px, calc(100vw - 32px)); max-height: min(82vh, 900px); padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
+dialog::backdrop { background: rgb(18 23 21 / 50%); backdrop-filter: blur(2px); }
+.dialog-header { display: flex; justify-content: space-between; gap: 20px; }
+.dialog-header h2 { margin-bottom: 12px; font-size: 1.6rem; }
+.dialog-actions { display: flex; gap: 8px; margin-bottom: 26px; }
+.primary-button, .secondary-button { padding: 8px 12px; border-radius: 7px; font-weight: 700; cursor: pointer; }
+.primary-button { border: 1px solid var(--accent); background: var(--accent); color: white; }
+.secondary-button { border: 1px solid var(--border); background: var(--surface); }
+.primary-button:disabled, .secondary-button:disabled { opacity: 0.5; cursor: not-allowed; }
+dialog section + section { margin-top: 24px; }
+.preserve-lines { white-space: pre-wrap; }
+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; }
+.metadata dt { color: var(--muted); }
+.metadata dd { margin: 0; }
+
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+:focus-visible { outline: 3px solid rgb(33 95 74 / 35%); outline-offset: 3px; }
+
+@media (max-width: 650px) {
+  .site-header { align-items: flex-start; padding-top: 32px; }
+  .toolbar { align-items: stretch; flex-direction: column; }
+  .toolbar label, .toolbar select { width: 100%; }
+  .task-count { margin: 0; }
+  .task-heading { align-items: flex-start; }
+  .dialog-actions { align-items: stretch; flex-direction: column; }
+  .metadata { grid-template-columns: 1fr; }
+  .metadata dt { padding-bottom: 0; border-bottom: 0; }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --background: #181b19;
+    --surface: #222624;
+    --surface-muted: #2d322f;
+    --text: #edf1ee;
+    --muted: #aeb7b1;
+    --border: #3d4440;
+    --accent: #7dc1a4;
+    --accent-soft: #244436;
+    --danger: #ef9991;
+    --warning: #e4bd77;
+  }
+  .dashboard-message { border-color: #66592e; background: #38321d; color: #f1d98c; }
+  .status-failed { background: #4e2927; }
+  .status-needs_input { background: #4c3b20; }
+}