apps/dashboard/src/components/stack-companion.tsx (1)

432-436: Consider updating the Playground page to showcase the new AI chat widget.

The conditional layout change for ask-ai (no padding, flex column, overflow hidden) makes sense for a chat interface that manages its own scrolling. As per coding guidelines, any design components added to the dashboard should have corresponding updates in the Playground page.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dashboard/src/components/stack-companion.tsx` around lines 432 - 436,
Playground page is missing the updated layout and AIChatWidget rendering when
activeItem === 'ask-ai'; update the Playground component to apply the same
conditional className logic used here (using cn with "flex-1 overflow-x-hidden
no-drag cursor-auto" and the branch that sets "overflow-hidden p-0 flex
flex-col" for activeItem === 'ask-ai' vs "overflow-y-auto p-5") and render
<AIChatWidget isActive={true} /> when activeItem === 'ask-ai'; ensure
AIChatWidget is imported and that the Playground's activeItem state/value uses
the same 'ask-ai' key so the widget receives the correct isActive prop and the
container handles its scrolling.

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

407-411: Type cast through unknown bypasses type safety.

The as unknown as ToolInvocationPart cast assumes the filtered parts match the ToolInvocationPart structure. While the startsWith("tool-") check provides some validation, this doesn't guarantee the full structure. Consider using a type guard or runtime validation for safer typing.

♻️ Suggested type guard approach

+function isToolInvocationPart(part: unknown): part is ToolInvocationPart {
+  if (typeof part !== 'object' || part === null) return false;
+  const p = part as Record<string, unknown>;
+  return (
+    typeof p.type === 'string' &&
+    p.type.startsWith('tool-') &&
+    typeof p.toolCallId === 'string' &&
+    typeof p.state === 'string'
+  );
+}
+
 // Helper to extract tool invocations from UIMessage parts
 export function getToolInvocations(message: UIMessage): ToolInvocationPart[] {
   return message.parts
-    .filter((part) => part.type.startsWith("tool-"))
-    .map((part) => part as unknown as ToolInvocationPart);
+    .filter(isToolInvocationPart);
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dashboard/src/components/commands/ai-chat-shared.tsx` around lines 407 -
411, The cast in getToolInvocations blindly forces parts to ToolInvocationPart
via "as unknown as ToolInvocationPart"; replace that with a proper type guard or
runtime validation (e.g., implement isToolInvocationPart(part: any): part is
ToolInvocationPart that checks required fields like type, name, args/result
shapes) and use it in the filter (message.parts.filter(isToolInvocationPart)).
Ensure the guard references the ToolInvocationPart shape and return the typed
array without double-casting.

• pnpm-lock.yaml: Language not supported

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

214-216: Add comment explaining the type assertions for SDK types.

Per coding guidelines, when using as casts, leave a comment explaining why and how errors would still be flagged. The input/output shapes depend on the tool definition on the backend.

Proposed documentation

-  // Extract query from input
-  const input = invocation.input as { query?: string } | undefined;
-  const queryArg = input?.query;
-  const result = invocation.output as { success?: boolean, result?: unknown[], error?: string, rowCount?: number } | undefined;
+  // Extract query from input
+  // Type assertion: invocation.input/output are typed as `unknown` by the AI SDK.
+  // The actual shape depends on the tool definition (sql-query tool) on the backend.
+  // Using optional chaining ensures safe access even if the shape differs.
+  const input = invocation.input as { query?: string } | undefined;
+  const queryArg = input?.query;
+  const result = invocation.output as { success?: boolean, result?: unknown[], error?: string, rowCount?: number } | undefined;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dashboard/src/components/commands/ai-chat-shared.tsx` around lines 214 -
216, Add an inline comment explaining the use of `as` casts on
`invocation.input` and `invocation.output` near the `input`, `queryArg`, and
`result` declarations: state that these casts are narrowing the SDK-generic
types to the expected shapes produced by the backend tool definition, note that
runtime shape mismatches will still surface as errors, and mention where the
true canonical shape is defined (the backend tool/schema). Keep the comment
succinct and colocated with the `const input = invocation.input as { query?:
string } | undefined;` and `const result = invocation.output as { success?:
boolean, result?: unknown[], error?: string, rowCount?: number } | undefined;`
lines.

---

52-56: Clean up timeout on unmount to avoid state update on unmounted component.

If CopyButton unmounts before the 1500ms timeout fires, React will warn about setting state on an unmounted component.

Proposed fix using useEffect cleanup

 export 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);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);

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

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dashboard/src/components/commands/ai-chat-shared.tsx` around lines 52 -
56, handleCopy sets a timeout that calls setCopied after 1500ms but never clears
it, causing a potential state update on an unmounted component; add a ref (e.g.,
copiedTimeoutRef) to store the timeout id, clear any existing timeout before
creating a new one inside handleCopy, and add a useEffect with a cleanup that
clears copiedTimeoutRef.current on unmount to avoid setState on unmounted
component; reference the handleCopy function, setCopied state updater, and
useCallback so reviewers can find and update the logic.

---

516-526: Interval continues running after all words are revealed.

The interval keeps firing every 15ms even after displayedWordCount equals targetWordCount. Consider clearing the interval when reveal completes to reduce unnecessary state updates.

Proposed fix

     const intervalId = setInterval(() => {
       setDisplayedWordCount(prev => {
         if (prev < targetWordCountRef.current) {
           return prev + 1;
         }
+        clearInterval(intervalId);
         return prev;
       });
     }, 15);

     return () => clearInterval(intervalId);
-  }, [hasContent]);
+  }, [hasContent]);

Alternatively, use a ref to track the interval ID and clear it from within the state updater callback.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dashboard/src/components/commands/ai-chat-shared.tsx` around lines 516 -
526, The interval created in the effect keeps running even after
displayedWordCount reaches targetWordCountRef.current; update the logic so the
interval is cleared when the reveal completes: store the interval ID
(intervalId) in a ref or accessible variable, and inside the
setDisplayedWordCount updater check if prev < targetWordCountRef.current and if
the next value will reach or exceed the target, call clearInterval(intervalId)
before returning the final value; ensure the effect cleanup still clears the
interval to cover unmounts (references: setDisplayedWordCount,
targetWordCountRef, intervalId).

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

69-69: Consider using findLast instead of reverse().find().

findLast is more idiomatic and avoids creating an intermediate reversed array. It's supported in ES2023+ (TypeScript 5+, Node 18+, modern browsers).

Proposed refactor

-  const lastAssistantMessage = messages.slice(1).reverse().find((m: UIMessage) => m.role === "assistant");
+  const lastAssistantMessage = messages.slice(1).findLast((m: UIMessage) => m.role === "assistant");

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dashboard/src/components/commands/ask-ai.tsx` at line 69, The current
computation of lastAssistantMessage uses messages.slice(1).reverse().find(...)
which allocates an intermediate reversed array; replace it with the ES2023
String.prototype-like array method by calling findLast on the sliced array
(e.g., messages.slice(1).findLast(m => m.role === "assistant")) to avoid
reversing and reduce allocation; ensure the runtime/TS target supports
Array.prototype.findLast or add a polyfill if needed and update the reference to
the const lastAssistantMessage accordingly in ask-ai.tsx.

apps/dashboard/src/components/stack-companion/ai-chat-widget.tsx (1)

77-77: Same as ask-ai.tsx: prefer findLast over reverse().find().

For consistency with the suggested refactor in ask-ai.tsx:

Proposed refactor

-  const lastAssistantMessage = messages.slice().reverse().find((m: UIMessage) => m.role === "assistant");
+  const lastAssistantMessage = messages.findLast((m: UIMessage) => m.role === "assistant");

Note: Unlike ask-ai.tsx, this doesn't skip the first message, so no .slice(1) needed.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dashboard/src/components/stack-companion/ai-chat-widget.tsx` at line 77,
Replace the messages.slice().reverse().find(...) pattern used to compute
lastAssistantMessage with Array.prototype.findLast for consistency and clarity:
locate the expression assigning lastAssistantMessage in ai-chat-widget.tsx (the
variable computed from messages and UIMessage) and change it to use
messages.findLast((m: UIMessage) => m.role === "assistant") so it directly
returns the last assistant message without creating a reversed copy.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes