Merge branch 'main' into metrics-card

Author: creilly11235

apps/apollo-vertex/app/auth_callback/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { STORAGE_KEYS } from "@/lib/auth";
+
+const FALLBACK_PATH = "/";
+
+export default function AuthCallback() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const returnTo =
+      sessionStorage.getItem(STORAGE_KEYS.AUTH_RETURN_TO) ?? FALLBACK_PATH;
+    sessionStorage.removeItem(STORAGE_KEYS.AUTH_RETURN_TO);
+
+    const search = window.location.search;
+    router.replace(`${returnTo}${search}`);
+  }, [router]);
+
+  return null;
+}

apps/apollo-vertex/app/patterns/notifications/in-product/notification-examples.tsx

@@ -5,9 +5,8 @@ import {
   InfoIcon,
   OctagonXIcon,
   TriangleAlertIcon,
-  XIcon,
 } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { Alert, AlertDescription, AlertTitle } from "@/registry/alert/alert";
@@ -106,65 +105,37 @@ export function AlertExamples() {
   );
 }
 
-function DismissibleAlert({
-  children,
-  status,
-  visual = "outline",
-}: {
-  children: ReactNode;
-  status: "default" | "warning" | "error";
-  visual?: "outline" | "tinted";
-}) {
-  const [visible, setVisible] = useState(true);
-  if (!visible) return null;
-  return (
-    <div className="relative">
-      <Alert status={status} visual={visual}>
-        {children}
-      </Alert>
-      <button
-        type="button"
-        onClick={() => setVisible(false)}
-        className="absolute top-3 right-3 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
-        aria-label="Dismiss"
-      >
-        <XIcon className="h-4 w-4" />
-      </button>
-    </div>
-  );
-}
-
 export function AlertOutlineExamples() {
   const [resetKey, setResetKey] = useState(0);
 
   return (
     <div className="space-y-3" key={resetKey}>
-      <DismissibleAlert status="default">
+      <Alert status="default" visual="outline" dismissible>
         <InfoIcon className="h-4 w-4" />
         <AlertTitle>New version available</AlertTitle>
         <AlertDescription>
           A new version of the platform is ready. Review the changelog for
           details.
         </AlertDescription>
-      </DismissibleAlert>
+      </Alert>
 
-      <DismissibleAlert status="warning">
+      <Alert status="warning" visual="outline" dismissible>
         <TriangleAlertIcon className="h-4 w-4" />
         <AlertTitle>API rate limit approaching</AlertTitle>
         <AlertDescription>
           You have used 90% of your monthly API quota. Consider upgrading your
           plan.
         </AlertDescription>
-      </DismissibleAlert>
+      </Alert>
 
-      <DismissibleAlert status="error">
+      <Alert status="error" visual="outline" dismissible>
         <OctagonXIcon className="h-4 w-4" />
         <AlertTitle>Connection failed</AlertTitle>
         <AlertDescription>
           Unable to reach the server. Check your network connection and try
           again.
         </AlertDescription>
-      </DismissibleAlert>
+      </Alert>
 
       <button
         type="button"

apps/apollo-vertex/app/shadcn-components/alert/page.mdx

@@ -61,13 +61,27 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 </Alert>
 ```
 
+### Dismissible
+
+```tsx
+<Alert status="warning" visual="outline" dismissible onDismiss={() => console.log("dismissed")}>
+  <TriangleAlertIcon className="h-4 w-4" />
+  <AlertTitle>API rate limit approaching</AlertTitle>
+  <AlertDescription>
+    You have used 90% of your monthly API quota. Consider upgrading your plan.
+  </AlertDescription>
+</Alert>
+```
+
 ### Props
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `status` | `"default" \| "warning" \| "error"` | — | Sets the semantic status color |
 | `visual` | `"outline" \| "tinted"` | — | Sets the visual treatment |
 | `variant` | `"default" \| "destructive"` | `"default"` | Legacy shadcn variant (use `status` + `visual` instead) |
+| `dismissible` | `boolean` | `false` | Renders a close button and manages internal visibility |
+| `onDismiss` | `() => void` | — | Callback fired when the alert is dismissed |
 
 ## Complex alert patterns (edge cases)
 

apps/apollo-vertex/app/shadcn-components/button/page.mdx

@@ -8,9 +8,10 @@ Displays a button or a component that looks like a button.
 <div className="p-4 border rounded-lg mt-4 flex flex-wrap gap-2">
   <Button>Default</Button>
   <Button variant="secondary">Secondary</Button>
-  <Button variant="destructive">Destructive</Button>
   <Button variant="outline">Outline</Button>
   <Button variant="ghost">Ghost</Button>
+  <Button variant="destructive">Destructive</Button>
+  <Button variant="destructive-outline">Destructive outline</Button>
   <Button variant="link">Link</Button>
 </div>
 

apps/apollo-vertex/app/vertex-components/ai-chat/page.mdx

@@ -158,6 +158,8 @@ The `model.vendor` field controls wire-format differences:
 
 Return a choices object as a tool result content to render interactive suggestion buttons. Buttons disappear after the user sends another message.
 
+> **Try it out** — type *"give me some choices"* in the demo above to see suggestion buttons in action. The demo uses the `presentChoices` example tool defined in `examples/choices-tool.ts`.
+
 The choices format:
 ```json
 {

apps/apollo-vertex/package.json

@@ -15,7 +15,8 @@
     "format:check": "biome format",
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
-    "lint:deps": "depcruise registry --config .dependency-cruiser.js"
+    "lint:deps": "depcruise registry --config .dependency-cruiser.js",
+    "typecheck": "tsc --noEmit"
   },
   "keywords": [],
   "author": "",

apps/apollo-vertex/registry/ai-chat/components/ai-chat-message.tsx

@@ -29,6 +29,11 @@ export function AiChatMessage({
   const displayName = assistantName ?? t("ai_assistant");
   const displayContent = getDisplayText(message);
 
+  // Don't render assistant messages if they have no text content and no children (e.g. calling tools)
+  if (!isUser && !displayContent && !children) {
+    return null;
+  }
+
   if (isUser) {
     return (
       <div className="flex w-full justify-end">

apps/apollo-vertex/registry/ai-chat/components/ai-chat.tsx

@@ -56,8 +56,11 @@ export function AiChat({
 
   const latestChoices = findLatestChoices(messages);
 
-  const lastMessageIsAssistant = messages.at(-1)?.role === "assistant";
-  const showLoadingIndicator = isLoading && !lastMessageIsAssistant;
+  const lastMessage = messages.at(-1);
+  const lastAssistantHasText =
+    lastMessage?.role === "assistant" &&
+    lastMessage.parts.some((p) => p.type === "text" && p.content);
+  const showLoadingIndicator = isLoading && !lastAssistantHasText;
 
   const defaultEmptyState = (
     <div className="flex flex-col items-center justify-center h-full text-center text-muted-foreground">
@@ -89,7 +92,7 @@ export function AiChat({
         <div
           role="alert"
           aria-live="assertive"
-          className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
+          className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive max-h-16 overflow-y-auto"
         >
           <AlertCircle
             className="h-4 w-4 flex-shrink-0 mt-0.5"

apps/apollo-vertex/registry/ai-chat/examples/choices-tool.ts

@@ -0,0 +1,48 @@
+import { toolDefinition } from "@tanstack/ai";
+import { clientTools } from "@tanstack/ai-client";
+import { z } from "zod";
+
+const choiceOptionSchema = z.object({
+  id: z.string().describe("Unique identifier for this option"),
+  label: z.string().describe("Button text shown to the user"),
+  value: z.string().optional().describe("Optional payload sent when selected"),
+  recommended: z
+    .boolean()
+    .optional()
+    .describe("Highlight this option as the recommended choice"),
+});
+
+const presentChoicesInput = z.object({
+  prompt: z.string().describe("Short label shown above the choice buttons"),
+  options: z
+    .array(choiceOptionSchema)
+    .min(2)
+    .max(4)
+    .describe("2 to 4 options for the user to pick from"),
+});
+
+const presentChoicesOutput = presentChoicesInput.extend({
+  type: z.literal("choices"),
+});
+
+const presentChoicesDef = toolDefinition({
+  name: "presentChoices",
+  description: `Present the user with 2–4 clickable choices.
+                Call this tool whenever the user asks for choices, options, or wants to pick between alternatives.
+                Mark one option as recommended when there is a clear best pick.`,
+  inputSchema: presentChoicesInput,
+  outputSchema: presentChoicesOutput,
+});
+
+const presentChoices = presentChoicesDef.client((input) =>
+  Object.assign({ type: "choices" as const }, input),
+);
+
+export const choicesTools = clientTools(presentChoices);
+
+export const CHOICES_TOOL_PROMPT = `
+You have a "presentChoices" tool.
+When the user asks for choices, options, or says things like "give me some choices", call this tool with 2–4 creative options.
+Always mark exactly one option as recommended.
+After calling the tool keep your text reply short — the UI renders the options as buttons so do NOT repeat them in prose.
+`.trim();

apps/apollo-vertex/registry/alert/alert.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import { cva, type VariantProps } from "class-variance-authority";
+import { XIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
@@ -69,24 +72,51 @@ const alertVariants = cva(
 
 interface AlertProps
   extends React.ComponentProps<"div">,
-    VariantProps<typeof alertVariants> {}
+    VariantProps<typeof alertVariants> {
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
 
 function Alert({
   className,
   variant,
   status,
   visual,
+  dismissible,
+  onDismiss,
   children,
   ...props
 }: AlertProps) {
+  const [visible, setVisible] = React.useState(true);
+
+  if (!visible) return null;
+
   return (
     <div
       data-slot="alert"
       role="alert"
-      className={cn(alertVariants({ variant, status, visual }), className)}
+      className={cn(
+        alertVariants({ variant, status, visual }),
+        dismissible && "pr-10",
+        className,
+      )}
       {...props}
     >
       {children}
+      {dismissible && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            setVisible(false);
+            onDismiss?.();
+          }}
+          className="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100"
+          aria-label="Dismiss"
+        >
+          <XIcon className="size-4" />
+        </button>
+      )}
     </div>
   );
 }