@agent-native/core 0.92.9 → 0.92.11

package/corpus/templates/design/app/components/design/QuestionFlow.tsx

@@ -10,7 +10,7 @@ import {
 } from "@agent-native/core/client";
 import type { QuestionFlowQuestion } from "@shared/api";
 import { IconCheck, IconPalette, IconUpload, IconX } from "@tabler/icons-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
@@ -39,6 +39,15 @@ export function QuestionFlow({
   const t = useT();
   const guidedQuestions = questions as GuidedQuestion[];
   const [answers, setAnswers] = useState<Record<string, unknown>>({});
+  // Guards against a rapid double-click (or two events firing within the
+  // same React batch) triggering onSubmit/onSkip twice before the parent
+  // hook clears the persisted question payload and this component unmounts.
+  // Both handlers post a message to the agent chat, so firing twice would
+  // duplicate the turn. A ref is required (not just state) because the gate
+  // must be visible synchronously to a second click handled in the same
+  // task, before React has flushed the re-render that disables the button.
+  const respondedRef = useRef(false);
+  const [responded, setResponded] = useState(false);
   const questionsFingerprint = useMemo(
     () => questionFlowFingerprint(guidedQuestions),
     [guidedQuestions],
@@ -46,6 +55,8 @@ export function QuestionFlow({
 
   useEffect(() => {
     setAnswers({});
+    respondedRef.current = false;
+    setResponded(false);
   }, [questionsFingerprint]);
 
   const setAnswer = useCallback((id: string, value: unknown) => {
@@ -98,8 +109,13 @@ export function QuestionFlow({
           <Button
             type="button"
             size="sm"
-            onClick={() => onSubmit(normalizeGuidedAnswers(answers))}
-            disabled={!allRequiredAnswered}
+            onClick={() => {
+              if (respondedRef.current) return;
+              respondedRef.current = true;
+              setResponded(true);
+              onSubmit(normalizeGuidedAnswers(answers));
+            }}
+            disabled={responded || !allRequiredAnswered}
             className="h-8 cursor-pointer rounded-md bg-[var(--design-editor-accent-color)] px-3 text-[12px] text-[var(--design-editor-accent-contrast-color)] shadow-none hover:bg-[var(--design-editor-accent-hover-color)] hover:text-[var(--design-editor-accent-contrast-color)] focus-visible:ring-[var(--design-editor-accent-color)]"
           >
             {submitLabel ?? t("questionFlow.continue")}
@@ -108,8 +124,14 @@ export function QuestionFlow({
             type="button"
             variant="ghost"
             size="sm"
-            onClick={onSkip}
-            className="h-8 cursor-pointer rounded-md px-3 text-[12px] text-muted-foreground hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground"
+            onClick={() => {
+              if (respondedRef.current) return;
+              respondedRef.current = true;
+              setResponded(true);
+              onSkip();
+            }}
+            disabled={responded}
+            className="h-8 cursor-pointer rounded-md px-3 text-[12px] text-muted-foreground hover:bg-[var(--design-editor-layer-hover-color)] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
           >
             {skipLabel ?? t("questionFlow.skip")}
           </Button>

package/corpus/templates/design/app/components/design/ReviewPanel.tsx

@@ -31,7 +31,7 @@ import {
   IconShieldCheck,
   IconTool,
 } from "@tabler/icons-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -194,6 +194,21 @@ function FindingRow({
   const applyFix = useActionMutation("apply-a11y-fix");
   const [fixStatus, setFixStatus] = useState<FixStatus>("idle");
 
+  // `finding.id` is stable across audit runs (`"category:node-id"`), so a
+  // parent refetch that still includes the same id — e.g. the fix didn't
+  // fully resolve the issue and a fresh audit re-detected it — reuses this
+  // same row instance. Without this, a stale "Fixed" checkmark would keep
+  // showing even though the finding is live again. Only reset when a
+  // genuinely new `finding` object arrives (a fresh audit pass), not on our
+  // own optimistic `setFixStatus` calls, which don't touch the prop.
+  const lastFindingRef = useRef(finding);
+  useEffect(() => {
+    if (lastFindingRef.current !== finding) {
+      lastFindingRef.current = finding;
+      setFixStatus("idle");
+    }
+  }, [finding]);
+
   // A Fix affordance is shown only when (a) the finding maps to a deterministic
   // inline edit and (b) a design source is available to write to.  Everything
   // else stays informational.
@@ -248,7 +263,13 @@ function FindingRow({
       tabIndex={onClick ? 0 : undefined}
       onClick={() => onClick?.(finding)}
       onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === " ") onClick?.(finding);
+        if (e.key === "Enter" || e.key === " ") {
+          // This is a `role="button"` div, not a native <button>, so the
+          // browser's default Space behavior (page scroll) isn't suppressed
+          // automatically — prevent it before activating.
+          e.preventDefault();
+          onClick?.(finding);
+        }
       }}
       aria-label={finding.message}
     >

package/corpus/templates/design/app/components/design/TokensPanel.tsx

@@ -108,10 +108,14 @@ export interface TokensPanelProps {
 // ---------------------------------------------------------------------------
 
 /** True when the value looks like an opaque colour we can render as a swatch. */
-function isColorValue(value: string): boolean {
+export function isColorValue(value: string): boolean {
   const v = value.trim();
   return (
-    /^#[0-9a-fA-F]{3,8}$/.test(v) ||
+    // Valid CSS hex-color lengths are exactly 3, 4, 6, or 8 digits (#rgb,
+    // #rgba, #rrggbb, #rrggbbaa) — a bare `{3,8}` range also matched
+    // malformed 5- and 7-digit strings, which render as a blank swatch
+    // instead of falling back to the neutral type icon.
+    /^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(v) ||
     /^rgba?\(/.test(v) ||
     /^hsla?\(/.test(v) ||
     /^oklch\(/.test(v) ||
@@ -119,6 +123,18 @@ function isColorValue(value: string): boolean {
   );
 }
 
+/**
+ * Normalizes user-typed CSS custom-property input for the manual "Add one
+ * token" flow: trims surrounding whitespace first, then ensures a `--`
+ * prefix. Trimming before the prefix check matters — a leading space (e.g.
+ * pasted input) would otherwise fail `startsWith("--")` and produce a
+ * doubled-up, server-rejected name like `-- --foo`.
+ */
+export function normalizeCssVarName(raw: string): string {
+  const trimmed = raw.trim();
+  return trimmed.startsWith("--") ? trimmed : `--${trimmed}`;
+}
+
 /** Type label + icon for a section header. */
 function typeLabel(type: DesignToken["type"]): {
   label: string;
@@ -146,7 +162,6 @@ function typeLabel(type: DesignToken["type"]): {
 
 interface TokenRowProps {
   token: DesignToken;
-  onEdit: (cssVar: string, value: string) => void;
   editing: boolean;
   editDraft: string;
   onDraftChange: (v: string) => void;
@@ -272,7 +287,6 @@ interface TokenGroupSectionProps {
   onDraftChange: (v: string) => void;
   onCommit: () => void;
   onCancelEdit: () => void;
-  onEdit: (cssVar: string, value: string) => void;
 }
 
 function TokenGroupSection({
@@ -283,7 +297,6 @@ function TokenGroupSection({
   onDraftChange,
   onCommit,
   onCancelEdit,
-  onEdit,
 }: TokenGroupSectionProps) {
   const [collapsed, setCollapsed] = useState(false);
   const { label, Icon } = typeLabel(group.type);
@@ -321,7 +334,6 @@ function TokenGroupSection({
               onCommit={onCommit}
               onStartEdit={() => onStartEdit(token.cssVar, token.value)}
               onCancelEdit={onCancelEdit}
-              onEdit={onEdit}
             />
           ))}
         </div>
@@ -364,12 +376,12 @@ function NewTokenPopover({
   const t = useT();
 
   const handleAdd = () => {
-    const cleanVar = cssVar.startsWith("--") ? cssVar : `--${cssVar}`;
-    onAdd(cleanVar, value);
+    onAdd(normalizeCssVarName(cssVar), value.trim());
     setOpen(false);
     setMode("menu");
     setCssVar("--my-token");
     setValue("#000000");
+    setText("");
   };
 
   const runImport = async (
@@ -394,8 +406,14 @@ function NewTokenPopover({
   const closeOrReset = (nextOpen: boolean) => {
     setOpen(nextOpen);
     if (!nextOpen) {
+      // Reset every draft field, not just mode/status, so reopening the
+      // popover after a dismissed (uncommitted) edit always starts fresh
+      // instead of silently resurrecting a stale cssVar/value/text draft.
       setMode("menu");
       setStatus(null);
+      setCssVar("--my-token");
+      setValue("#000000");
+      setText("");
     }
   };
 
@@ -487,7 +505,7 @@ function NewTokenPopover({
               type="button"
               className="h-7 w-full cursor-pointer !text-[11px]"
               onClick={handleAdd}
-              disabled={!cssVar || !value}
+              disabled={!cssVar.trim() || !value.trim()}
             >
               {t("designEditor.tokens.add")}
             </Button>
@@ -650,6 +668,15 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
   const applyMutation = useActionMutation("apply-design-token-edit");
   const importMutation = useActionMutation("import-design-tokens");
 
+  // This panel is reused across designs (the editor route swaps `designId`
+  // in place rather than remounting), so an apply/import mutation kicked off
+  // for one design can resolve after the user has already switched to
+  // another. Track the latest `designId` in a ref so a stale response can
+  // detect that and skip pushing its (now wrong-design) resolved CSS vars
+  // into the currently active design via `onTokensApplied`.
+  const designIdRef = useRef(designId);
+  designIdRef.current = designId;
+
   // ------------------------------------------------------------------
   // Local edit state
   // ------------------------------------------------------------------
@@ -666,18 +693,14 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
     setEditDraft("");
   };
 
-  const commitEdit = () => {
-    if (!editingKey || !editDraft.trim()) {
-      cancelEdit();
-      return;
-    }
-    const cssVar = editingKey;
-    const value = editDraft.trim();
-    cancelEdit();
+  /** Shared apply path for both inline row edits and "Add one token". */
+  const applyTokenEdit = (cssVar: string, value: string) => {
+    const requestDesignId = designId;
     applyMutation.mutate(
       { designId, edits: [{ cssVar, value }] },
       {
         onSuccess: (result) => {
+          if (designIdRef.current !== requestDesignId) return;
           void refetch();
           const r = result as { resolvedCssVars?: Record<string, string> };
           if (r?.resolvedCssVars && onTokensApplied) {
@@ -688,22 +711,26 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
     );
   };
 
+  const commitEdit = () => {
+    if (!editingKey || !editDraft.trim()) {
+      cancelEdit();
+      return;
+    }
+    const cssVar = editingKey;
+    const value = editDraft.trim();
+    cancelEdit();
+    applyTokenEdit(cssVar, value);
+  };
+
   const handleNewToken = (cssVar: string, value: string) => {
-    applyMutation.mutate(
-      { designId, edits: [{ cssVar, value }] },
-      {
-        onSuccess: (result) => {
-          void refetch();
-          const r = result as { resolvedCssVars?: Record<string, string> };
-          if (r?.resolvedCssVars && onTokensApplied) {
-            onTokensApplied(r.resolvedCssVars);
-          }
-        },
-      },
-    );
+    applyTokenEdit(cssVar, value);
   };
 
-  const handleImportSuccess = (result: ImportDesignTokensResult) => {
+  const handleImportSuccess = (
+    result: ImportDesignTokensResult,
+    requestDesignId: string,
+  ) => {
+    if (designIdRef.current !== requestDesignId) return result;
     void refetch();
     if (result.resolvedCssVars && onTokensApplied) {
       onTokensApplied(result.resolvedCssVars);
@@ -712,29 +739,32 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
   };
 
   const importFiles = async (files: TokenImportFile[]) => {
+    const requestDesignId = designId;
     const result = (await importMutation.mutateAsync({
       designId,
       source: "files",
       files,
     })) as ImportDesignTokensResult;
-    return handleImportSuccess(result);
+    return handleImportSuccess(result, requestDesignId);
   };
 
   const importText = async (text: string) => {
+    const requestDesignId = designId;
     const result = (await importMutation.mutateAsync({
       designId,
       source: "paste",
       text,
     })) as ImportDesignTokensResult;
-    return handleImportSuccess(result);
+    return handleImportSuccess(result, requestDesignId);
   };
 
   const importCurrentDesign = async () => {
+    const requestDesignId = designId;
     const result = (await importMutation.mutateAsync({
       designId,
       source: "current-design",
     })) as ImportDesignTokensResult;
-    return handleImportSuccess(result);
+    return handleImportSuccess(result, requestDesignId);
   };
 
   // ------------------------------------------------------------------
@@ -821,22 +851,6 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
                 onDraftChange={setEditDraft}
                 onCommit={commitEdit}
                 onCancelEdit={cancelEdit}
-                onEdit={(cssVar, value) =>
-                  applyMutation.mutate(
-                    { designId, edits: [{ cssVar, value }] },
-                    {
-                      onSuccess: (result) => {
-                        void refetch();
-                        const r = result as {
-                          resolvedCssVars?: Record<string, string>;
-                        };
-                        if (r?.resolvedCssVars && onTokensApplied) {
-                          onTokensApplied(r.resolvedCssVars);
-                        }
-                      },
-                    },
-                  )
-                }
               />
             ))}
           </div>