taskchef 7.10.0 → 7.11.0

package/.codex-plugin/plugin.json

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

package/package.json

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

package/src/dashboard/app.js

@@ -1,8 +1,8 @@
 import {
   clearNotifications,
   dismissNotification,
+  filterTasks,
   findCurrentTask,
-  KNOWN_TASK_STATUSES,
   latestTurnPresentation,
   mergeProjectedTurns,
   nextDateFilterRefreshDelay,
@@ -10,8 +10,9 @@ import {
   notificationOpenLabel,
   notificationTitle,
   reconcileNotifications,
+  statusFilterCounts,
+  statusFilterText,
   taskStatusLabel,
-  taskWithinDateFilter,
   turnPresentation,
 } from "./state.js";
 import { openTaskFromControl } from "./actions.js";
@@ -388,20 +389,43 @@ function taskCard(task) {
 
 function render() {
   const project = elements.projectFilter.value;
-  const status = elements.statusFilter.value;
+  const status = elements.statusFilter.querySelector("input:checked")?.value ?? "";
   const date = elements.dateFilter.value;
-  const visible = state.tasks.filter((task) =>
-    (!project || task.project.name === project)
-    && (!status || taskStatusLabel(task) === status)
-    && taskWithinDateFilter(task, date));
+  const now = Date.now();
+  const contextualTasks = filterTasks(state.tasks, { project, date, now });
+  const visible = filterTasks(contextualTasks, { status, now });
+  const counts = statusFilterCounts(state.tasks, { project, date, now });
+  for (const label of elements.statusFilter.querySelectorAll("[data-status-label]")) {
+    const value = label.dataset.statusLabel;
+    label.textContent = statusFilterText(value, counts[value]);
+  }
   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"}`;
   clearTimeout(dateRefreshTimer);
-  const refreshDelay = nextDateFilterRefreshDelay(visible, date);
+  const refreshDelay = nextDateFilterRefreshDelay(contextualTasks, date, now);
   dateRefreshTimer = refreshDelay === null ? null : setTimeout(render, refreshDelay);
 }
 
+function selectStatusFromKeyboard(event) {
+  if (event.target?.name !== "status-filter") return;
+  const inputs = [...elements.statusFilter.querySelectorAll('input[name="status-filter"]')];
+  const currentIndex = inputs.indexOf(event.target);
+  if (currentIndex < 0) return;
+  let nextIndex = currentIndex;
+  if (["ArrowRight", "ArrowDown"].includes(event.key)) nextIndex = (currentIndex + 1) % inputs.length;
+  else if (["ArrowLeft", "ArrowUp"].includes(event.key)) {
+    nextIndex = (currentIndex - 1 + inputs.length) % inputs.length;
+  } else if (event.key === "Home") nextIndex = 0;
+  else if (event.key === "End") nextIndex = inputs.length - 1;
+  else if (![" ", "Enter"].includes(event.key)) return;
+  event.preventDefault();
+  for (const input of inputs) input.checked = false;
+  inputs[nextIndex].checked = true;
+  inputs[nextIndex].focus();
+  render();
+}
+
 function applySnapshot(snapshot) {
   const reconciled = reconcileNotifications({
     initialized: state.initialized,
@@ -424,11 +448,6 @@ function applySnapshot(snapshot) {
     [...new Set(state.tasks.map((task) => task.project.name))].sort(),
     "All projects",
   );
-  replaceOptions(
-    elements.statusFilter,
-    [...new Set([...KNOWN_TASK_STATUSES, ...state.tasks.map(taskStatusLabel)])],
-    "All statuses",
-  );
   if (state.selectedTask) {
     const updated = state.tasks.find((task) => task.id === state.selectedTask.id);
     if (updated && elements.dialog.open) openDialog(updated);
@@ -457,6 +476,7 @@ events.addEventListener("dashboard-error", (event) => {
 
 elements.projectFilter.addEventListener("change", render);
 elements.statusFilter.addEventListener("change", render);
+elements.statusFilter.addEventListener("keydown", selectStatusFromKeyboard);
 elements.dateFilter.addEventListener("change", render);
 elements.dismissDashboardMessage.addEventListener("click", () => {
   elements.dashboardMessage.hidden = true;

package/src/dashboard/index.html

@@ -35,12 +35,31 @@
             <option value="">All projects</option>
           </select>
         </label>
-        <label>
-          Status
-          <select id="status-filter">
-            <option value="">All statuses</option>
-          </select>
-        </label>
+        <fieldset class="status-filter-fieldset">
+          <legend>Status</legend>
+          <div id="status-filter" class="status-filter-options">
+            <label class="status-filter-option">
+              <input type="radio" name="status-filter" value="" checked>
+              <span data-status-label="">All</span>
+            </label>
+            <label class="status-filter-option">
+              <input type="radio" name="status-filter" value="working">
+              <span data-status-label="working">Working</span>
+            </label>
+            <label class="status-filter-option">
+              <input type="radio" name="status-filter" value="needs input">
+              <span data-status-label="needs input">Needs input</span>
+            </label>
+            <label class="status-filter-option">
+              <input type="radio" name="status-filter" value="completed">
+              <span data-status-label="completed">Completed</span>
+            </label>
+            <label class="status-filter-option">
+              <input type="radio" name="status-filter" value="failed">
+              <span data-status-label="failed">Failed</span>
+            </label>
+          </div>
+        </fieldset>
         <label>
           Updated
           <select id="date-filter">

package/src/dashboard/state.js

@@ -5,7 +5,13 @@ export const KNOWN_TASK_STATUSES = [
   "needs input",
   "completed",
   "failed",
-  "unresolved",
+];
+export const STATUS_FILTERS = [
+  { value: "", label: "All" },
+  { value: "working", label: "Working" },
+  { value: "needs input", label: "Needs input" },
+  { value: "completed", label: "Completed" },
+  { value: "failed", label: "Failed" },
 ];
 
 const NOTIFICATION_TITLES = new Map([
@@ -98,6 +104,35 @@ export function taskWithinDateFilter(task, filter, now = Date.now()) {
   return Number.isFinite(meaningfulTime) && meaningfulTime >= now - windowMs;
 }
 
+export function filterTasks(
+  tasks,
+  { project = "", status = "", date = "all", now = Date.now() } = {},
+) {
+  return tasks.filter((task) =>
+    (!project || task.project.name === project)
+    && (!status || taskStatusLabel(task) === status)
+    && taskWithinDateFilter(task, date, now));
+}
+
+export function statusFilterCounts(
+  tasks,
+  { project = "", date = "all", now = Date.now() } = {},
+) {
+  const contextualTasks = filterTasks(tasks, { project, date, now });
+  return Object.fromEntries(STATUS_FILTERS.map(({ value }) => [
+    value,
+    value
+      ? contextualTasks.filter((task) => taskStatusLabel(task) === value).length
+      : contextualTasks.length,
+  ]));
+}
+
+export function statusFilterText(value, count) {
+  const option = STATUS_FILTERS.find((filter) => filter.value === value);
+  if (!option) return "";
+  return count > 0 ? `${option.label} (${count})` : option.label;
+}
+
 export function nextDateFilterRefreshDelay(tasks, filter, now = Date.now()) {
   const windowMs = DATE_WINDOWS_MS.get(filter);
   if (windowMs === null || windowMs === undefined) return null;

package/src/dashboard/styles.css

@@ -70,6 +70,15 @@ main { padding-block: 28px 80px; }
 
 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); }
+.status-filter-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
+.status-filter-fieldset legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
+.status-filter-options { display: flex; flex-wrap: wrap; gap: 6px; }
+.status-filter-option { position: relative; display: block; color: var(--text); font-size: 0.82rem; letter-spacing: 0; text-transform: none; cursor: pointer; }
+.status-filter-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.status-filter-option span { display: block; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); white-space: nowrap; }
+.status-filter-option:hover span { border-color: var(--accent); }
+.status-filter-option:has(input:checked) span { border-color: var(--accent); background: var(--accent); color: white; box-shadow: 0 1px 2px rgb(24 33 29 / 16%); }
+.status-filter-option:has(input:focus-visible) span { outline: 3px solid var(--accent); outline-offset: 3px; }
 .task-count { margin: 0 0 9px auto; color: var(--muted); font-size: 0.9rem; }
 
 .task-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@@ -152,6 +161,7 @@ pre { max-height: 280px; margin: 0; padding: 14px; overflow: auto; border-radius
   .title-row { align-items: flex-start; }
   .toolbar { align-items: stretch; flex-direction: column; }
   .toolbar label, .toolbar select { width: 100%; }
+  .toolbar .status-filter-option { width: auto; }
   .task-count { margin: 0; }
   .task-heading { align-items: flex-start; }
   .task-footer { align-items: flex-start; flex-direction: column; }
@@ -176,6 +186,7 @@ pre { max-height: 280px; margin: 0; padding: 14px; overflow: auto; border-radius
     --warning: #e4bd77;
   }
   .dashboard-message { border-color: #66592e; background: #38321d; color: #f1d98c; }
+  .status-filter-option:has(input:checked) span { color: var(--background); }
   .status-failed { background: #4e2927; }
   .status-needs_input { background: #4c3b20; }
   .status-interrupted { background: #37332f; color: #d6d0c7; }