apps/dashboard/src/components/commands/ask-ai.tsx (1)

11-23: Clear copy timeout on unmount to avoid stale state updates

setTimeout in CopyButton isn’t cleared if the component unmounts before it fires, which can cause setCopied to run on an unmounted component. This was already flagged in a previous review and is still present.

You can store the timeout id in a ref and clear it on unmount:

 const CopyButton = memo(function CopyButton({ text, className, size = "sm" }: {
   text: string,
   className?: string,
   size?: "sm" | "xs",
 }) {
   const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, []);

   const handleCopy = useCallback(async () => {
     await navigator.clipboard.writeText(text);
     setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  }, [text]);
+    timeoutRef.current = setTimeout(() => setCopied(false), 1500);
+  }, [text]);

apps/dashboard/src/components/commands/ask-ai.tsx (3)

65-223: Markdown / code / link renderers look solid; minor reuse opportunity

The inline code, code block, smart link, and markdown component setup is clean, consistent, and uses the recommended transition pattern (transition-colors hover:transition-none). This follows the UI guidelines and integrates nicely with the local CopyButton. As per coding guidelines, the transitions and lack of toasts for errors are appropriate.

If you want stricter consistency and less duplication, consider reusing the shared CopyButton from packages/stack-ui/src/components/copy-button.tsx and styling it via props/classes instead of maintaining a separate variant here, but the current approach is acceptable.

---

280-313: Reset word-streaming when a new assistant reply starts

useWordStreaming works well for the first assistant response, but it never resets displayedWordCount when a new assistant message becomes the lastAssistantMessage. That can cause follow-up answers to appear partially or fully revealed immediately instead of re-streaming from the start.

A light refactor is to key the hook off the assistant message id (or index) and reset when it changes:

-function useWordStreaming(content: string) {
+function useWordStreaming(content: string, messageKey: string | number | null) {
   const [displayedWordCount, setDisplayedWordCount] = useState(0);
@@
-  const hasContent = Boolean(content);
-  useEffect(() => {
-    if (!hasContent) {
+  useEffect(() => {
+    if (!content) {
       setDisplayedWordCount(0);
       return;
     }
@@
-  }, [hasContent]);
+  }, [content, messageKey]);

And when calling it:

-const { displayedWordCount, targetWordCount, getDisplayContent, isRevealing } = useWordStreaming(lastAssistantContent);
+const { displayedWordCount, targetWordCount, getDisplayContent, isRevealing } =
+  useWordStreaming(lastAssistantContent, lastAssistantMessage?.id ?? null);

This keeps the nice streaming effect per assistant turn.

Also applies to: 366-405, 490-499

---

341-369: Clarify useChat session identity and avoid findLast if older browsers are targeted

Two small, optional polish items here:

1. useChat is currently called without an explicit id, so it uses the default session key. If there are (or might be) other useChat instances elsewhere, consider setting a stable id (e.g. id: "cmdk-ai-chat") to avoid state collisions between surfaces.

2. messages.slice(1).findLast(...) is concise, but Array.prototype.findLast is relatively new. If you support older browsers without a polyfill, you may want to replace this with a manual reverse scan to avoid relying on that built-in.

As part of verification, please confirm your browser support matrix (and whether a polyfill for findLast is present) and check the ai/react docs for recommended id usage with multiple chat instances.

Also applies to: 456-473

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

apps/dashboard/src/components/cmdk-search.tsx (6)

258-258: Remove unused variable.

The hasResults variable is computed but never used in the component body.

Apply this diff:

  const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
- const hasResults = commands.length > 0;

---

727-728: Remove unused variables.

Both hasResults and hasQuery are computed but never used in the component.

Apply this diff:

  if (!open) return null;

- const hasResults = filteredCommands.length > 0;
- const hasQuery = query.trim().length > 0;

  return (

---

829-829: Remove unused variable.

The isActive variable is computed but never used in the rendering logic.

Apply this diff:

                  const columnDepth = depth + 1;
-                 const isActive = columnDepth === activeDepth;
                  const columnSelectedIndex = selectedIndices[columnDepth] ?? 0;

---

85-95: Clean up timeout to avoid setState after unmount.

The cleanup function clears the interval but not the inner setTimeout, allowing it to fire after unmount and trigger a setState warning.

Apply this diff to capture and clear the timeout:

  useEffect(() => {
+   let timeoutId: ReturnType<typeof setTimeout> | undefined;
    const interval = setInterval(() => {
      setIsVisible(false);
-     setTimeout(() => {
+     timeoutId = setTimeout(() => {
        setCurrentIndex((prev) => (prev + 1) % EXAMPLE_QUERIES.length);
        setIsVisible(true);
      }, 300);
    }, 7000);

-   return () => clearInterval(interval);
+   return () => {
+     clearInterval(interval);
+     if (timeoutId) clearTimeout(timeoutId);
+   };
  }, []);

---

772-772: Fix invalid Tailwind class: use flex-1 instead of grow-1.

grow-1 is not a standard Tailwind utility class, so this container won't flex to fill the remaining vertical space.

Apply this diff:

-             <div className="border-t border-foreground/[0.06] grow-1 h-full flex flex-col">
+             <div className="border-t border-foreground/[0.06] flex-1 h-full flex flex-col">

---

802-802: Fix invalid Tailwind class: use flex-1 instead of grow-1.

grow-1 is not a standard Tailwind utility class, so this container won't flex correctly.

Apply this diff:

                className={cn(
-                 "border-t border-foreground/[0.06] grow-1 h-full flex overflow-x-auto",
+                 "border-t border-foreground/[0.06] flex-1 h-full flex overflow-x-auto",
                  "md:flex-row flex-col"
                )}

apps/dashboard/src/components/cmdk-search.tsx (5)

315-315: Consider accessibility: tabIndex={-1} removes keyboard navigation.

While arrow-key navigation is implemented, removing these buttons from the tab order may hinder users who rely on standard keyboard navigation patterns.

Consider adding ARIA attributes and potentially allowing tab navigation to reach the command list, or document why this pattern is acceptable for a command palette:

tabIndex={-1}
role="option"
aria-selected={isSelected}

---

570-572: Fix indentation.

Line 571 is not indented properly.

Apply this diff:

      if (command.onAction.type === "navigate") {
-     setOpen(false);
+       setOpen(false);
        router.push(command.onAction.href);

---

688-690: Fix indentation.

Line 690 is not indented properly.

Apply this diff:

        // Navigate back from nested preview
        if (activeDepth > 0) {
-       e.preventDefault();
+         e.preventDefault();
        const blurHandlerIndex = activeDepth - 1;

---

963-974: Consider performance impact of global mousemove listener.

The trigger button tracks mouse position globally to create a cursor-following effect. This adds a mousemove listener to the document that fires on every mouse movement, even when not hovering the button.

Consider adding the mousemove listener only when hovering the button:

useEffect(() => {
  let isHovering = false;
  const parent = mouseCursorParentRef.current;
  
  const handleMouseMove = (e: MouseEvent) => {
    if (isHovering && mouseCursorRef.current && parent) {
      const rect = parent.getBoundingClientRect();
      mouseCursorRef.current.style.left = `${e.clientX - rect.left}px`;
      mouseCursorRef.current.style.top = `${e.clientY - rect.top}px`;
      mouseCursorRef.current.style.display = "block";
    }
  };
  
  const handleMouseEnter = () => {
    isHovering = true;
    document.addEventListener("mousemove", handleMouseMove);
  };
  
  const handleMouseLeave = () => {
    isHovering = false;
    document.removeEventListener("mousemove", handleMouseMove);
  };
  
  parent?.addEventListener("mouseenter", handleMouseEnter);
  parent?.addEventListener("mouseleave", handleMouseLeave);
  
  return () => {
    document.removeEventListener("mousemove", handleMouseMove);
    parent?.removeEventListener("mouseenter", handleMouseEnter);
    parent?.removeEventListener("mouseleave", handleMouseLeave);
  };
}, []);

---

386-956: Consider accessibility enhancements for the modal.

The command palette lacks ARIA attributes that would improve screen reader support, such as role="dialog", aria-modal="true", aria-label for the search input, and role="listbox"/role="option" for the results list.

Consider adding ARIA attributes:

// On the spotlight container (line 740-744)
<div
  role="dialog"
  aria-modal="true"
  aria-label="Command palette"
  className="fixed inset-0 flex items-center justify-center z-50 px-4 pointer-events-none"
  // ...
>

// On the search input (line 755-767)
<input
  ref={inputRef}
  type="text"
  role="combobox"
  aria-expanded={hasResults}
  aria-controls="cmdk-results"
  aria-label="Search commands or ask AI"
  // ...
/>

// On the results container
<div role="listbox" id="cmdk-results">
  {/* results */}
</div>

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

apps/dashboard/src/app/api/ai-search/route.ts (2)

21-30: Add authentication and development-only guard.

This endpoint lacks authentication and can be publicly accessed if GROQ_API_KEY is configured, potentially allowing abuse and cost incurrence. Additionally, the UI components using this route are conditionally rendered only in development mode, but the endpoint itself has no such restriction.

---

32-38: Handle message content type safely.

The Message type from the ai SDK allows content to be either a string or an array of content parts. Line 37 assumes it's always a string, which could cause issues with multi-modal messages.

apps/dashboard/src/components/cmdk-search.tsx (1)

759-759: Fix invalid Tailwind class grow-1.

grow-1 is not a standard Tailwind utility class. Use flex-1 instead to properly allow these containers to flex and fill available space.

Apply this diff:

-              <div className="border-t border-foreground/[0.06] grow-1 h-full flex flex-col">
+              <div className="border-t border-foreground/[0.06] flex-1 h-full flex flex-col">

And:

                 className={cn(
-                  "border-t border-foreground/[0.06] grow-1 h-full flex overflow-x-auto",
+                  "border-t border-foreground/[0.06] flex-1 h-full flex overflow-x-auto",
                   "md:flex-row flex-col"
                 )}

Also applies to: 789-789

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to packages/stack-shared/src/config/schema.ts : Whenever making backwards-incompatible changes to the config schema, update the migration functions in `packages/stack-shared/src/config/schema.ts`

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to **/*.{ts,tsx} : NEVER try-catch-all, NEVER void a promise, and NEVER .catch(console.error). Use `runAsynchronously` or `runAsynchronouslyWithAlert` instead for asynchronous error handling

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to apps/{backend,dashboard}/src/**/*.{ts,tsx} : NEVER use Next.js dynamic functions if you can avoid them. Instead, prefer using a client component and prefer `usePathname` instead of `await params`

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to **/*.{ts,tsx} : Use ES6 maps instead of records wherever possible

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to {packages/stack/**,packages/js/**} : NEVER UPDATE packages/stack OR packages/js. Instead, update packages/template, as the others are simply copies of that package

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to **/*.{ts,tsx} : When creating hover transitions, avoid hover-enter transitions and just use hover-exit transitions (e.g., `transition-colors hover:transition-none`)

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to **/*.{ts,tsx} : Keep hover/click transitions snappy and fast. Don't delay the action with a pre-transition; apply transitions after the action instead

Learnt from: N2D4
Repo: stack-auth/stack-auth PR: 943
File: examples/convex/app/action/page.tsx:23-28
Timestamp: 2025-10-11T04:13:19.308Z
Learning: In the stack-auth codebase, use `runAsynchronouslyWithAlert` from `stackframe/stack-shared/dist/utils/promises` for async button click handlers and form submissions instead of manual try/catch blocks. This utility automatically handles errors and shows alerts to users.

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to **/*.{ts,tsx} : For blocking alerts and errors, never use `toast`, as they are easily missed by the user. Instead, use alerts

Learnt from: CR
Repo: stack-auth/stack-auth PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-28T21:21:39.142Z
Learning: Applies to apps/backend/src/app/api/**/*.{ts,tsx} : The project uses a custom route handler system in the backend for consistent API responses

apps/dashboard/src/components/cmdk-search.tsx (3)

517-523: Remove unused registerNestedBlur plumbing (dead code)

registerNestedBlur is never passed to previews or called, so nestedBlurHandlers are only ever reset to [] and ArrowLeft’s blur-handling branch never actually finds a handler. This also matches the prior “unused variable registerNestedBlur” warning. Given that behavior today doesn’t depend on per-depth blur hooks, the simplest fix is to drop the unused callback.

-  // Register onBlur handler for a depth level
-  const registerNestedBlur = useCallback((onBlur: () => void, depth: number) => {
-    setNestedBlurHandlers((prev) => {
-      const next = [...prev];
-      next[depth] = onBlur;
-      return next;
-    });
-  }, []);
-

(You can keep nestedBlurHandlers and its resets as-is; they’re still harmless and used in the ArrowLeft logic. If you later need per-depth blur, you can reintroduce a wired-up registration function.)

Also applies to: 687-697

---

818-823: Remove unused isActive in nested columns

isActive is computed for each nested column but never used, which aligns with the earlier “unused variable isActive” comment. It’s safe to drop and will quiet linters.

-                {nestedColumns.map((commands, depth) => {
-                  const columnDepth = depth + 1;
-                  const isActive = columnDepth === activeDepth;
-                  const columnSelectedIndex = selectedIndices[columnDepth] ?? 0;
+                {nestedColumns.map((commands, depth) => {
+                  const columnDepth = depth + 1;
+                  const columnSelectedIndex = selectedIndices[columnDepth] ?? 0;

---

764-797: Fix invalid Tailwind flex class: use flex-1 instead of grow-1

grow-1 isn’t a standard Tailwind utility, so these containers won’t actually flex to fill the remaining vertical space. Swapping to flex-1 matches Tailwind’s flex-grow shorthand and aligns with earlier automated review feedback.

-              <div className="border-t border-foreground/[0.06] grow-1 h-full flex flex-col">
+              <div className="border-t border-foreground/[0.06] flex-1 h-full flex flex-col">
@@
-                className={cn(
-                  "border-t border-foreground/[0.06] grow-1 h-full flex overflow-x-auto",
+                className={cn(
+                  "border-t border-foreground/[0.06] flex-1 h-full flex overflow-x-auto",
                   "md:flex-row flex-col"
                 )}

Please double-check against your Tailwind setup, but unless you’ve added a custom grow-1 alias, flex-1 is the correct utility.

apps/dashboard/src/components/cmdk-search.tsx (3)

74-112: Simplify cycling timer and hide inactive examples from interaction

The cycling behavior works, but the effect recreates the interval on every tick and invisible examples remain focusable/clickable (they’re just opacity-0). You can simplify the timer and tighten accessibility by using a stable interval plus functional updates, and fully disabling inactive buttons.

   const [currentIndex, setCurrentIndex] = useState(() =>
     Math.floor(Math.random() * EXAMPLE_QUERIES.length)
   );
 
   useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentIndex((currentIndex + 1) % EXAMPLE_QUERIES.length);
-    }, 3000);
-    return () => clearInterval(interval);
-  }, [currentIndex]);
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % EXAMPLE_QUERIES.length);
+    }, 3000);
+    return () => clearInterval(interval);
+  }, []);
 
   return <>
     {EXAMPLE_QUERIES.map((example, index) => {
       return <button
         key={index}
         type="button"
         onClick={() => onSelectQuery?.(example.query)}
+        aria-hidden={index !== currentIndex}
+        tabIndex={index === currentIndex ? 0 : -1}
         className={cn(
           "flex flex-col items-center gap-1 cursor-pointer group",
-          index === currentIndex ? "opacity-100" : "opacity-0",
+          index === currentIndex ? "opacity-100" : "opacity-0 pointer-events-none",
           "transition-opacity duration-300"
         )}
       >

---

443-458: Make keyword filtering case-insensitive

cmd.keywords are checked with includes(searchLower) but without lowercasing the keyword itself, so mixed/upper-case keywords won’t match lowercase queries. Normalizing both sides will give more predictable search behavior.

-      if (cmd.description.toLowerCase().includes(searchLower)) return true;
-      if (cmd.keywords?.some((k) => k.includes(searchLower))) return true;
+      if (cmd.description.toLowerCase().includes(searchLower)) return true;
+      if (cmd.keywords?.some((k) => k.toLowerCase().includes(searchLower))) return true;

---

563-595: Avoid wrapping actions in Promise.resolve before runAsynchronously

runAsynchronously already accepts a function or a promise, so you don’t need to eagerly call command.onAction.action() inside Promise.resolve. Passing the function directly keeps intent clearer and avoids an unnecessary wrap.

-      } else if (command.onAction.type === "action") {
-        runAsynchronously(Promise.resolve(command.onAction.action()));
+      } else if (command.onAction.type === "action") {
+        runAsynchronously(command.onAction.action);
         // Don't close for highlighted commands (like AI)
         if (!command.highlightColor) {
           setOpen(false);
         }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro