fix(trigger-chat-agent): component correctness and accessibility

Author: D-K-P

trigger-chat-agent/src/components/error-notice.tsx

@@ -51,7 +51,10 @@ export function ErrorNotice({
   const { title, detail } = explain(error);
 
   return (
-    <div className="flex items-start gap-3 rounded-xl border border-error/40 bg-error/5 px-4 py-3">
+    <div
+      role="alert"
+      className="flex items-start gap-3 rounded-xl border border-error/40 bg-error/5 px-4 py-3"
+    >
       <AlertTriangle className="mt-0.5 size-4 shrink-0 text-error" />
       <div className="min-w-0 flex-1">
         <div className="text-sm font-medium text-error">{title}</div>

trigger-chat-agent/src/components/flow-graph.tsx

@@ -416,6 +416,20 @@ const nodeTypes = { flow: FlowNodeCard };
 export function FlowGraph({ title, nodes, edges, sequence }: FlowGraphProps) {
   const reduceMotion = !!useReducedMotion();
 
+  // Stream re-renders hand us fresh array identities with identical content (the
+  // message part is re-cloned per streamed token). Key the expensive layout and
+  // the status timeline on the CONTENT, not the array reference, so dagre isn't
+  // re-run and an in-flight animation doesn't reset to t=0 on every token.
+  const nodesSig = nodes
+    .map((n) => `${n.id}|${n.label}|${n.sublabel ?? ""}|${n.kind}|${n.status ?? ""}`)
+    .join(";");
+  const edgesSig = edges
+    .map((e) => `${e.from}>${e.to}|${e.kind ?? ""}|${e.label ?? ""}`)
+    .join(";");
+  const sequenceSig = (sequence ?? [])
+    .map((s) => `${s.nodeId}|${s.status}|${s.atMs}`)
+    .join(";");
+
   // Robustness guard: a model can emit an edge whose `from`/`to` doesn't match
   // any node id (typo, stale reference, partial catalog data). React Flow
   // doesn't validate this itself — an edge pointing at a missing node id can
@@ -425,11 +439,13 @@ export function FlowGraph({ title, nodes, edges, sequence }: FlowGraphProps) {
   const safeEdges = useMemo(() => {
     const ids = new Set(nodes.map((n) => n.id));
     return edges.filter((e) => ids.has(e.from) && ids.has(e.to));
-  }, [nodes, edges]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodesSig, edgesSig]);
 
   const { positions, handles: edgeHandles } = useMemo(
     () => computeLayout(nodes, safeEdges),
-    [nodes, safeEdges]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [nodesSig, safeEdges]
   );
 
   const revealDelays = useMemo(() => {
@@ -439,7 +455,8 @@ export function FlowGraph({ title, nodes, edges, sequence }: FlowGraphProps) {
     const out: Record<string, number> = {};
     for (const [id, o] of order) out[id] = 0.1 + o * step;
     return out;
-  }, [nodes, safeEdges]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodesSig, safeEdges]);
 
   const [statuses, setStatuses] = useState<Record<string, FlowNodeStatus>>(() =>
     initialStatuses(nodes, sequence, reduceMotion)
@@ -456,7 +473,8 @@ export function FlowGraph({ title, nodes, edges, sequence }: FlowGraphProps) {
       }, Math.max(0, s.atMs))
     );
     return () => timers.forEach((t) => window.clearTimeout(t));
-  }, [nodes, sequence, reduceMotion]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodesSig, sequenceSig, reduceMotion]);
 
   // Edges fade in mid-cascade so they don't dangle off still-hidden nodes.
   const [edgesVisible, setEdgesVisible] = useState(reduceMotion);
@@ -467,7 +485,9 @@ export function FlowGraph({ title, nodes, edges, sequence }: FlowGraphProps) {
       return;
     }
     setEdgesVisible(false);
-    const t = window.setTimeout(() => setEdgesVisible(true), revealSpan * 500 + 150);
+    // revealDelays are in SECONDS; the last node starts at ~revealSpan*1000ms,
+    // so wait until it's begun animating in before the edges appear.
+    const t = window.setTimeout(() => setEdgesVisible(true), revealSpan * 1000 + 150);
     return () => window.clearTimeout(t);
   }, [reduceMotion, revealSpan]);
 
@@ -491,7 +511,8 @@ export function FlowGraph({ title, nodes, edges, sequence }: FlowGraphProps) {
         selectable: false,
         connectable: false,
       })),
-    [nodes, positions, statuses, revealDelays, reduceMotion]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [nodesSig, positions, statuses, revealDelays, reduceMotion]
   );
 
   const rfEdges: Edge[] = useMemo(
@@ -527,7 +548,8 @@ export function FlowGraph({ title, nodes, edges, sequence }: FlowGraphProps) {
     const bottoms = nodes.map((n) => (positions[n.id]?.y ?? 0) + (positions[n.id]?.height ?? 48));
     const maxY = Math.max(0, ...bottoms);
     return Math.min(480, Math.max(180, maxY + 24));
-  }, [nodes, positions]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodesSig, positions]);
 
   return (
     <motion.div

trigger-chat-agent/src/components/prompt-card.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { motion, useReducedMotion } from "motion/react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { reducedVariants, revealBlur, staggerContainer } from "@/lib/motion";
 
@@ -27,12 +27,20 @@ export function PromptCard({
   const item = reduceMotion ? reducedVariants : revealBlur;
   const container = reduceMotion ? staggerContainer(0, 0) : staggerContainer(0.05);
   const [copied, setCopied] = useState(false);
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Clear a pending reset on unmount so it can't fire setState afterwards.
+  useEffect(() => () => {
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+  }, []);
 
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(prompt);
       setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
+      // Restart the window on each click instead of stacking timers.
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = setTimeout(() => setCopied(false), 1500);
     } catch {
       // Clipboard unavailable (insecure context or denied permission) —
       // leave the button idle rather than showing a false "Copied".

trigger-chat-agent/src/components/quiz.tsx

@@ -33,19 +33,26 @@ export function Quiz({
     >
       <div className="mb-1 font-mono text-2xs uppercase tracking-widest text-dimmed/70">Quiz</div>
       <p className="mb-4 font-title text-lg font-medium text-bright">{question}</p>
-      <div className="space-y-2">
+      {/* aria-disabled (not the `disabled` attribute) keeps answered options in
+          the tab order, so a keyboard user can still move across and read the
+          revealed correct/incorrect states; a click guard blocks re-answering. */}
+      <div className="space-y-2" role="group" aria-label={question}>
         {options.map((o, i) => {
           const isCorrect = Boolean(o.correct);
           const reveal = answered && (i === picked || isCorrect);
           return (
             <button
               key={i}
               type="button"
-              disabled={answered}
-              onClick={() => setPicked(i)}
+              aria-disabled={answered}
+              onClick={() => {
+                if (!answered) setPicked(i);
+              }}
               className={cn(
                 "flex min-h-11 w-full items-center gap-3 rounded-xl border px-4 py-2.5 text-left text-sm leading-5 transition-colors duration-150",
-                !reveal && "border-charcoal-700 bg-charcoal-800 text-bright enabled:hover:bg-charcoal-700",
+                !reveal && "border-charcoal-700 bg-charcoal-800 text-bright",
+                !reveal && !answered && "cursor-pointer hover:bg-charcoal-700",
+                answered && "cursor-default",
                 reveal && isCorrect && "border-apple-500/60 bg-apple-500/10 text-apple-200",
                 reveal && !isCorrect && "border-error/60 bg-error/10 text-error"
               )}
@@ -57,9 +64,13 @@ export function Quiz({
           );
         })}
       </div>
-      {answered && explanation && (
-        <p className="mt-4 border-t border-grid-bright pt-3 text-sm leading-relaxed text-dimmed">{explanation}</p>
-      )}
+      {/* Live region present before the answer lands, so screen readers
+          announce the explanation when it appears. */}
+      <div aria-live="polite">
+        {answered && explanation && (
+          <p className="mt-4 border-t border-grid-bright pt-3 text-sm leading-relaxed text-dimmed">{explanation}</p>
+        )}
+      </div>
     </motion.div>
   );
 }

trigger-chat-agent/src/components/stat-card.tsx

@@ -82,11 +82,18 @@ function AnimatedValue({ value, active, reduceMotion }: { value: string; active:
     const [, prefix, numText, suffix] = match;
     const target = Number(numText.replace(/,/g, ""));
     const decimals = numText.includes(".") ? numText.split(".")[1].length : 0;
+    // Keep the authored digit grouping: "1,234" must animate to "1,234", not
+    // "1234". toFixed drops separators, so re-group when the source had them.
+    const grouped = numText.includes(",");
+    const format = (v: number) =>
+      grouped
+        ? v.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
+        : v.toFixed(decimals);
     const controls = animate(0, target, {
       duration: 1,
       delay: 0.25,
       ease: easings.outExpo,
-      onUpdate: (v) => setDisplay(`${prefix}${v.toFixed(decimals)}${suffix}`),
+      onUpdate: (v) => setDisplay(`${prefix}${format(v)}${suffix}`),
     });
     return () => controls.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps