taskchef 5.8.0 → 5.10.0

package/src/dashboard/state.js

@@ -0,0 +1,79 @@
+export const MAX_NOTIFICATIONS = 50;
+export const KNOWN_TASK_STATUSES = [
+  "working",
+  "needs input",
+  "completed",
+  "failed",
+  "unresolved",
+];
+
+const DATE_WINDOWS_MS = new Map([
+  ["24h", 24 * 60 * 60 * 1_000],
+  ["7d", 7 * 24 * 60 * 60 * 1_000],
+  ["all", null],
+]);
+
+function taskMeaningfulTime(task) {
+  return Date.parse(task.meaningfulUpdatedAt ?? task.updatedAt ?? task.createdAt);
+}
+
+export function taskStatusLabel(task) {
+  return task.status === null ? "unresolved" : task.status.replaceAll("_", " ");
+}
+
+export function taskWithinDateFilter(task, filter, now = Date.now()) {
+  const windowMs = DATE_WINDOWS_MS.get(filter);
+  if (windowMs === null) return true;
+  if (windowMs === undefined) return false;
+  const meaningfulTime = taskMeaningfulTime(task);
+  return Number.isFinite(meaningfulTime) && meaningfulTime >= now - windowMs;
+}
+
+export function nextDateFilterRefreshDelay(tasks, filter, now = Date.now()) {
+  const windowMs = DATE_WINDOWS_MS.get(filter);
+  if (windowMs === null || windowMs === undefined) return null;
+  const nextCutoff = tasks
+    .map((task) => taskMeaningfulTime(task) + windowMs - now)
+    .filter((delay) => Number.isFinite(delay) && delay >= 0)
+    .reduce((minimum, delay) => Math.min(minimum, delay), Number.POSITIVE_INFINITY);
+  return Number.isFinite(nextCutoff) ? nextCutoff + 1 : null;
+}
+
+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; }
+}