taskchef 7.23.3 → 7.23.4

package/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "taskchef",
-  "version": "7.23.3",
+  "version": "7.23.4",
   "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.23.4",
   "description": "A non-blocking interactive dispatcher for visible Codex tasks.",
   "license": "MIT",
   "author": "Favo Yang",

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();

package/src/dashboard/styles.css

@@ -185,12 +185,25 @@ dialog section + section { margin-top: 24px; }
 .usage-pending, .usage-calculating { display: flex; align-items: center; }
 .text-shimmer {
   color: var(--muted);
+  display: inline-block;
+  width: fit-content;
+  max-width: 100%;
+  justify-self: start;
+  vertical-align: top;
+  background: linear-gradient(100deg, var(--muted) 48%, var(--text) 50%, var(--muted) 52%);
+  background-size: 250% 100%;
+  background-position: 100% 0;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: text-shimmer-sweep 6.4s linear infinite;
 }
-.text-shimmer-glyph {
-  color: var(--muted);
+@keyframes text-shimmer-sweep {
+  0% { background-position: 100% 0; }
+  72%, 100% { background-position: -100% 0; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .text-shimmer-glyph { color: currentcolor; text-shadow: none; }
+  .text-shimmer { background: none; animation: none; -webkit-text-fill-color: currentcolor; }
 }
 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; }