taskchef 7.23.3 → 7.24.0

package/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "taskchef",
-  "version": "7.23.3",
+  "version": "7.24.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.23.3",
+  "version": "7.24.0",
   "description": "A non-blocking interactive dispatcher for visible Codex tasks.",
   "license": "MIT",
   "author": "Favo Yang",
@@ -48,18 +48,40 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "6.8.0",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "24.3.0",
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9",
+    "@vitejs/plugin-react": "4.7.0",
     "conventional-changelog-conventionalcommits": "^10.3.0",
+    "jsdom": "26.1.0",
     "mermaid": "^11.17.0",
+    "typescript": "5.9.2",
+    "vite": "6.4.3",
+    "vitest": "3.2.7",
     "yaml": "^2.9.0"
   },
   "scripts": {
     "benchmark:dispatch": "node scripts/benchmark-dispatch-prepare.js",
     "benchmark:e2e": "node scripts/e2e-benchmark.js",
-    "test": "node --test tests/*.test.js"
+    "build:dashboard": "vite build --config vite.config.ts",
+    "check:dashboard": "tsc --noEmit -p tsconfig.dashboard.json",
+    "preview:dashboard": "node scripts/preview-dashboard.js",
+    "test": "npm run test:node && npm run test:dashboard",
+    "test:node": "node --test tests/*.test.js",
+    "test:dashboard": "vitest run --config vitest.config.ts"
   },
   "dependencies": {
+    "@mantine/core": "9.5.2",
+    "@mantine/hooks": "9.5.2",
+    "@mantine/notifications": "9.5.2",
     "@modelcontextprotocol/sdk": "^1.30.0",
+    "@tabler/icons-react": "3.35.0",
     "proper-lockfile": "^4.1.2",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "zod": "^4.4.3"
   },
   "bundleDependencies": [

package/src/dashboard/app.js

@@ -440,82 +440,8 @@ function usageBreakdownText(usage) {
   ].join(" · ");
 }
 
-const SHIMMER_STEP_MS = 420;
-const SHIMMER_PAUSE_MS = 1_800;
-const SHIMMER_PULSE_MS = 420;
-const SHIMMER_ANIMATION_ID = "taskchef-text-shimmer";
-const shimmerMotionQuery = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)") ?? null;
-const shimmerRecords = new Set();
-
-function animateShimmerRecord(record, reducedMotion) {
-  for (const animation of record.animations) animation.cancel();
-  record.animations = [];
-  if (reducedMotion) return;
-  for (const [shimmerIndex, glyph] of record.glyphs.entries()) {
-    if (typeof glyph.animate !== "function") continue;
-    const pulseEnd = SHIMMER_PULSE_MS / record.cycleMs;
-    const animation = glyph.animate([
-      { color: "var(--muted)", textShadow: "none", offset: 0 },
-      {
-        color: "var(--text)",
-        textShadow: "0 0 0.28em color-mix(in srgb, var(--text) 22%, transparent)",
-        offset: pulseEnd / 2,
-      },
-      { color: "var(--muted)", textShadow: "none", offset: pulseEnd },
-      { color: "var(--muted)", textShadow: "none", offset: 1 },
-    ], {
-      delay: shimmerIndex * SHIMMER_STEP_MS,
-      duration: record.cycleMs,
-      easing: "linear",
-      iterations: Infinity,
-    });
-    animation.id = SHIMMER_ANIMATION_ID;
-    record.animations.push(animation);
-  }
-}
-
-shimmerMotionQuery?.addEventListener?.("change", ({ matches }) => {
-  for (const record of shimmerRecords) animateShimmerRecord(record, matches);
-});
-
-export function cancelTextShimmers(root) {
-  for (const record of shimmerRecords) {
-    if (root !== record.element && !root?.contains?.(record.element)) continue;
-    for (const animation of record.animations) animation.cancel();
-    shimmerRecords.delete(record);
-  }
-}
-
 export function renderTextShimmer(element, value) {
-  const text = String(value ?? "");
-  const characters = Array.from(text);
-  const highlightedCharacters = characters.filter((character) => !/\s/u.test(character));
-  const cycleMs = Math.max(
-    SHIMMER_PULSE_MS + SHIMMER_PAUSE_MS,
-    (highlightedCharacters.length - 1) * SHIMMER_STEP_MS
-      + SHIMMER_PULSE_MS
-      + SHIMMER_PAUSE_MS,
-  );
-  const glyphs = [];
-  const nodes = characters.map((character) => {
-    if (/\s/u.test(character)) return document.createTextNode(character);
-    const glyph = document.createElement("span");
-    glyph.className = "text-shimmer-glyph";
-    glyph.textContent = character;
-    glyphs.push(glyph);
-    return glyph;
-  });
-  const accessibleText = document.createElement("span");
-  accessibleText.className = "visually-hidden";
-  accessibleText.textContent = text;
-  const animatedText = document.createElement("span");
-  animatedText.className = "text-shimmer-visual";
-  animatedText.setAttribute("aria-hidden", "true");
-  animatedText.append(...nodes);
-  element.replaceChildren(accessibleText, animatedText);
-  const record = { animations: [], cycleMs, element, glyphs };
-  shimmerRecords.add(record);
-  animateShimmerRecord(record, shimmerMotionQuery?.matches ?? false);
+  element.textContent = String(value ?? "");
   return element;
 }
 
@@ -851,7 +777,6 @@ function renderDialog(task, { highlightTurnRef = null } = {}) {
     (task.relatedGitHubLinks?.length ?? 0) === 0 && !task.relatedGitHubLinksTruncated
   );
   const timeline = turnTimeline(detailedTask, { highlightTurnRef });
-  cancelTextShimmers(elements.dialogResults);
   elements.dialogResults.replaceChildren(...timeline);
   const highlightedTurn = timeline.find((item) => item.dataset.turnRef === highlightTurnRef) ?? null;
   const replacedFocusedTurn = timeline.find((item) => item.dataset.turnRef === focusedTurnRef) ?? null;
@@ -891,7 +816,6 @@ function renderDialog(task, { highlightTurnRef = null } = {}) {
             ? "calculating"
             : "unavailable",
       };
-  cancelTextShimmers(elements.dialogUsage);
   elements.dialogUsage.replaceChildren(usagePresentation(
     taskUsage,
     { wholeTask: true },
@@ -1074,9 +998,7 @@ function render() {
     const value = label.dataset.statusLabel;
     label.textContent = statusFilterText(value, counts[value]);
   }
-  const cards = visible.map(taskCard);
-  cancelTextShimmers(elements.taskList);
-  elements.taskList.replaceChildren(...cards);
+  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);
@@ -1181,8 +1103,6 @@ elements.dialog.addEventListener("cancel", (event) => {
   if (!manualTransitionPending()) resetManualTransition({ focus: true });
 });
 elements.dialog.addEventListener("close", () => {
-  cancelTextShimmers(elements.dialogResults);
-  cancelTextShimmers(elements.dialogUsage);
   if (!manualTransitionPending()) state.manualTransition = null;
   state.detailNavigation = null;
   renderNotifications();