@agent-native/dispatch 0.14.2 → 0.14.4

package/src/components/layout/Layout.tsx

@@ -9,7 +9,6 @@ import {
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
   useChatThreads,
-  useFormatters,
   useT,
   type ChatThreadSummary,
 } from "@agent-native/core/client";
@@ -94,13 +93,6 @@ export interface DispatchExtensionConfig {
 }
 
 const PRIMARY_NAV_ITEMS = [
-  {
-    id: "chat",
-    to: "/chat",
-    label: "Chat",
-    icon: IconMessageQuestion,
-    section: "primary",
-  },
   {
     id: "overview",
     to: "/overview",
@@ -108,6 +100,13 @@ const PRIMARY_NAV_ITEMS = [
     icon: IconBroadcast,
     section: "primary",
   },
+  {
+    id: "chat",
+    to: "/chat",
+    label: "Chat",
+    icon: IconMessageQuestion,
+    section: "primary",
+  },
   {
     id: "apps",
     to: "/apps",
@@ -312,22 +311,17 @@ function threadIdFromPath(pathname: string): string | null {
   }
 }
 
-function formatThreadAge(
-  updatedAt: number,
-  formatDate: ReturnType<typeof useFormatters>["formatDate"],
-) {
-  const diffMs = Math.max(0, Date.now() - updatedAt);
+export function formatThreadAge(updatedAt: number, now = Date.now()) {
+  const diffMs = Math.max(0, now - updatedAt);
   const minutes = Math.floor(diffMs / 60_000);
   if (minutes < 1) return "now";
   if (minutes < 60) return `${minutes}m`;
   const hours = Math.floor(minutes / 60);
   if (hours < 24) return `${hours}h`;
   const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d`;
-  return formatDate(updatedAt, {
-    month: "short",
-    day: "numeric",
-  });
+  if (days < 14) return `${days}d`;
+  if (days < 365) return `${Math.floor(days / 7)}w`;
+  return `${Math.floor(days / 365)}y`;
 }
 
 function threadTitle(thread: ChatThreadSummary, fallback: string) {
@@ -344,7 +338,6 @@ function threadUpdatedAt(thread: ChatThreadSummary) {
 
 function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
   const t = useT();
-  const { formatDate } = useFormatters();
   const navigate = useNavigate();
   const location = useLocation();
   const {
@@ -510,19 +503,21 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
                     <button
                       type="button"
                       onClick={() => openThread(thread.id)}
-                      className="min-w-0 flex-1 cursor-pointer px-2 py-1.5 pe-12 text-start text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-2 py-1.5 pe-1 text-start text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     >
-                      <span className="block min-w-0 truncate">{title}</span>
+                      <span className="block min-w-0 flex-1 truncate">
+                        {title}
+                      </span>
+                      <time className="w-8 shrink-0 whitespace-nowrap text-end text-[11px] tabular-nums text-muted-foreground/60 transition-opacity group-hover/item:opacity-0 group-focus-within/item:opacity-0">
+                        {isActive
+                          ? ""
+                          : formatThreadAge(threadUpdatedAt(thread))}
+                      </time>
                     </button>
                   </TooltipTrigger>
                   <TooltipContent side="right">{title}</TooltipContent>
                 </Tooltip>
                 <div className="pointer-events-none absolute end-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5">
-                  <span className="pointer-events-none pe-1 text-[11px] text-muted-foreground/60 transition-opacity group-hover/item:opacity-0 group-focus-within/item:opacity-0">
-                    {isActive
-                      ? ""
-                      : formatThreadAge(threadUpdatedAt(thread), formatDate)}
-                  </span>
                   <DropdownMenu>
                     <Tooltip>
                       <TooltipTrigger asChild>
@@ -532,7 +527,7 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
                             aria-label={t("dispatch.sidebar.chatOptions", {
                               title,
                             })}
-                            className="pointer-events-auto rounded p-0.5 text-muted-foreground/50 opacity-0 transition-all hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/item:opacity-100 group-focus-within/item:opacity-100 data-[state=open]:opacity-100 data-[state=open]:text-foreground"
+                            className="pointer-events-auto rounded p-0.5 text-muted-foreground/50 opacity-0 transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/item:opacity-100 group-focus-within/item:opacity-100 data-[state=open]:opacity-100 data-[state=open]:text-foreground"
                           >
                             <IconDots className="size-3" />
                           </button>

package/src/components/ui/sheet.tsx

@@ -29,7 +29,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-200",
   {
     variants: {
       side: {

package/src/components/ui/toast.tsx

@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-transform motion-reduce:animate-none motion-reduce:transition-none data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {

package/src/components/workspace-app-card.spec.tsx

@@ -0,0 +1,80 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { TooltipProvider } from "./ui/tooltip";
+import { WorkspaceAppCard } from "./workspace-app-card";
+
+vi.mock("@agent-native/core/client", () => ({
+  useActionMutation: () => ({ mutate: vi.fn(), isPending: false }),
+  useActionQuery: () => ({
+    data: { resources: [], counts: {} },
+    isLoading: false,
+    isError: false,
+    error: null,
+    refetch: vi.fn(),
+  }),
+}));
+
+describe("WorkspaceAppCard", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("uses one visible, consistent action treatment for context, keys, and more", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <WorkspaceAppCard
+            app={{
+              id: "analytics",
+              name: "Analytics",
+              path: "/analytics",
+              description: "Explore product and growth performance.",
+              status: "ready",
+            }}
+          />
+        </TooltipProvider>,
+      );
+    });
+
+    expect(
+      container.querySelector('a[aria-label="Open Analytics"]')?.className,
+    ).toContain("focus-visible:ring-2");
+
+    const actions = [
+      container.querySelector<HTMLButtonElement>(
+        'button[aria-label="View context resources for Analytics"]',
+      ),
+      container.querySelector<HTMLButtonElement>(
+        'button[aria-label="Manage keys for Analytics"]',
+      ),
+      container.querySelector<HTMLButtonElement>(
+        'button[aria-label="More actions for Analytics"]',
+      ),
+    ];
+
+    for (const action of actions) {
+      expect(action).not.toBeNull();
+      expect(action?.className).toContain("size-7");
+      expect(action?.className).toContain("text-muted-foreground");
+      expect(action?.className).toContain(
+        "transition-[background-color,color]",
+      );
+      expect(action?.className).not.toContain("opacity-0");
+    }
+  });
+});

package/src/components/workspace-app-card.tsx

@@ -1,6 +1,5 @@
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
 import {
-  IconArrowUpRight,
   IconChevronDown,
   IconChevronRight,
   IconClockHour4,
@@ -21,6 +20,7 @@ import {
   workspaceAppHref,
   type WorkspaceAppSummary,
 } from "../lib/workspace-apps";
+import { ActionQueryError } from "./action-query-error";
 import { AppKeysPopover } from "./app-keys-popover";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
@@ -45,6 +45,9 @@ import { Textarea } from "./ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { AppResourceEffectiveStack } from "./workspace-resource-effective-stack";
 
+const APP_CARD_ACTION_CLASS =
+  "size-7 rounded-md p-0 text-muted-foreground transition-[background-color,color] hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground";
+
 export function WorkspaceAppCard({
   app,
   className,
@@ -121,7 +124,7 @@ export function WorkspaceAppCard({
     <div
       aria-disabled={!href}
       className={cn(
-        "group relative rounded-lg border bg-card p-4 transition hover:border-foreground/30 aria-disabled:opacity-60",
+        "group relative rounded-xl border border-border/60 bg-card/40 p-4 transition-[background-color,border-color] hover:border-foreground/20 hover:bg-accent/15 focus-within:border-foreground/20 focus-within:bg-accent/15 aria-disabled:opacity-60",
         isArchived && "opacity-70",
         className,
       )}
@@ -132,7 +135,7 @@ export function WorkspaceAppCard({
           target={openInNewTab ? "_blank" : undefined}
           rel={openInNewTab ? "noreferrer" : undefined}
           aria-label={`Open ${app.name}`}
-          className="absolute inset-0 z-0 rounded-lg"
+          className="absolute inset-0 z-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
         />
       ) : null}
 
@@ -164,7 +167,7 @@ export function WorkspaceAppCard({
               </Badge>
             ) : null}
           </div>
-          <p className="mt-1 truncate font-mono text-xs text-muted-foreground">
+          <p className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
             {app.path}
           </p>
           {isPending && app.branchName ? (
@@ -173,7 +176,7 @@ export function WorkspaceAppCard({
             </p>
           ) : null}
           {app.description ? (
-            <p className="mt-2 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+            <p className="mt-2 min-h-10 line-clamp-2 text-[13px] leading-5 text-muted-foreground">
               {app.description}
             </p>
           ) : null}
@@ -191,16 +194,24 @@ export function WorkspaceAppCard({
           ) : null}
           <div className="pointer-events-auto">
             <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  type="button"
-                  aria-label={`More actions for ${app.name}`}
-                  className="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <IconDots size={15} />
-                </button>
-              </DropdownMenuTrigger>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={`More actions for ${app.name}`}
+                      className={cn(
+                        APP_CARD_ACTION_CLASS,
+                        "inline-flex cursor-pointer items-center justify-center",
+                      )}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <IconDots size={15} />
+                    </button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent>More actions</TooltipContent>
+              </Tooltip>
               <DropdownMenuContent align="end" className="w-44">
                 <DropdownMenuItem
                   onSelect={(event) => {
@@ -233,12 +244,6 @@ export function WorkspaceAppCard({
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-          {href && !isArchived ? (
-            <IconArrowUpRight
-              size={16}
-              className="text-muted-foreground transition group-hover:text-foreground"
-            />
-          ) : null}
         </div>
       </div>
       <Dialog open={editOpen} onOpenChange={setEditOpen}>
@@ -290,11 +295,12 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
   const [inspectedResourceId, setInspectedResourceId] = useState<string | null>(
     null,
   );
-  const { data, isLoading } = useActionQuery(
+  const query = useActionQuery(
     "list-workspace-resources-for-app",
     { appId: app.id },
     { enabled: open },
   );
+  const { data, isLoading } = query;
 
   const resources = ((data as any)?.resources ?? []) as any[];
   const counts = (data as any)?.counts;
@@ -315,14 +321,14 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
               variant="ghost"
               size="sm"
               aria-label={`View context resources for ${app.name}`}
-              className="h-7 w-7 p-0"
+              className={APP_CARD_ACTION_CLASS}
               onClick={(e) => e.stopPropagation()}
             >
               <IconFileText size={14} />
             </Button>
           </DialogTrigger>
         </TooltipTrigger>
-        <TooltipContent>Context</TooltipContent>
+        <TooltipContent>View context</TooltipContent>
       </Tooltip>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
@@ -349,7 +355,12 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
             </Badge>
           </div>
 
-          {isLoading ? (
+          {query.isError ? (
+            <ActionQueryError
+              error={query.error}
+              onRetry={() => void query.refetch()}
+            />
+          ) : isLoading ? (
             <div className="space-y-2">
               <div className="h-14 rounded-lg border bg-muted/30" />
               <div className="h-14 rounded-lg border bg-muted/30" />

package/src/components/workspace-resource-effective-stack.tsx

@@ -1,6 +1,7 @@
 import { useActionQuery } from "@agent-native/core/client";
 
 import { cn } from "../lib/utils";
+import { ActionQueryError } from "./action-query-error";
 import { Badge } from "./ui/badge";
 
 export function appAvailabilityLabel(value?: string) {
@@ -54,11 +55,12 @@ export function AppResourceEffectiveStack({
   appId: string;
   resource: any;
 }) {
-  const { data: context, isLoading } = useActionQuery(
+  const query = useActionQuery(
     "get-workspace-resource-effective-context",
     { resourceId: resource.id, appId },
     { enabled: !!resource.id },
   );
+  const { data: context, isLoading } = query;
   const layers = ((context as any)?.layers ?? []) as any[];
   const active = (context as any)?.effectiveResource;
   const availability = (context as any)?.availability;
@@ -76,6 +78,16 @@ export function AppResourceEffectiveStack({
     );
   }
 
+  if (query.isError) {
+    return (
+      <ActionQueryError
+        className="mt-3"
+        error={query.error}
+        onRetry={() => void query.refetch()}
+      />
+    );
+  }
+
   return (
     <div className="mt-3 rounded-lg border bg-muted/20 p-3">
       <div className="flex flex-wrap items-start justify-between gap-2">

package/src/components/workspace-resource-impact-preview.tsx

@@ -1,5 +1,6 @@
 import { useActionQuery } from "@agent-native/core/client";
 
+import { ActionQueryError } from "./action-query-error";
 import { Badge } from "./ui/badge";
 import { Skeleton } from "./ui/skeleton";
 import { formatResourceTimestamp } from "./workspace-resource-effective-stack";
@@ -32,7 +33,7 @@ export function ImpactPreview({
   scope?: "all" | "selected";
   enabled?: boolean;
 }) {
-  const { data: impact, isLoading } = useActionQuery(
+  const query = useActionQuery(
     "preview-workspace-resource-change",
     {
       operation,
@@ -42,6 +43,7 @@ export function ImpactPreview({
     },
     { enabled: enabled && Boolean(resourceId || path) },
   );
+  const { data: impact, isLoading } = query;
 
   if (!enabled || (!resourceId && !path)) return null;
 
@@ -54,6 +56,15 @@ export function ImpactPreview({
     );
   }
 
+  if (query.isError) {
+    return (
+      <ActionQueryError
+        error={query.error}
+        onRetry={() => void query.refetch()}
+      />
+    );
+  }
+
   const data = impact as any;
   if (!data) return null;
   const affectsAllApps = data.affectsAllApps === true;

package/src/routes/pages/$appId.tsx

@@ -14,6 +14,7 @@ import {
   type LoaderFunctionArgs,
 } from "react-router";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -96,9 +97,10 @@ export async function clientLoader({
 export default function WorkspaceAppCatchAllRoute() {
   const t = useT();
   const { appId } = useParams();
-  const { data: apps = [], isLoading } = useActionQuery("list-workspace-apps", {
+  const appsQuery = useActionQuery("list-workspace-apps", {
     includeAgentCards: false,
   });
+  const { data: apps = [], isLoading } = appsQuery;
   const app = useMemo(
     () =>
       (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
@@ -117,6 +119,20 @@ export default function WorkspaceAppCatchAllRoute() {
     return <Navigate to={appPath("/overview")} replace />;
   }
 
+  if (appsQuery.isError) {
+    return (
+      <DispatchShell
+        title={t("dispatch.pages.dataLoadFailed")}
+        description={t("dispatch.pages.pageNotFoundDescription")}
+      >
+        <ActionQueryError
+          error={appsQuery.error}
+          onRetry={() => void appsQuery.refetch()}
+        />
+      </DispatchShell>
+    );
+  }
+
   if ((isLoading && !app) || (app && app.status !== "pending" && href)) {
     return (
       <div className="flex h-screen w-full items-center justify-center">

package/src/routes/pages/agents.tsx

@@ -8,6 +8,7 @@ import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import {
   AgentsPanel,
   type ConnectedAgent,
@@ -45,7 +46,10 @@ function dispatchMcpUrl(): string {
 
 function DispatchMcpAccessPanel() {
   const t = useT();
-  const { data, isLoading } = useActionQuery("list-mcp-app-access", {});
+  const { data, isLoading, isError, error, refetch } = useActionQuery(
+    "list-mcp-app-access",
+    {},
+  );
   const [optimistic, setOptimistic] = useState<McpAccessState | null>(null);
   const saveAccess = useActionMutation("set-mcp-app-access", {
     onSuccess: () => {
@@ -78,10 +82,6 @@ function DispatchMcpAccessPanel() {
   const mcpUrl = dispatchMcpUrl();
 
   function persist(next: McpAccessState) {
-    if (next.mode === "selected-apps" && next.selectedAppIds.length === 0) {
-      toast.error(t("dispatch.pages.selectAppForMcp"));
-      return;
-    }
     setOptimistic(next);
     saveAccess.mutate(next);
   }
@@ -153,7 +153,13 @@ function DispatchMcpAccessPanel() {
         </Button>
       </div>
 
-      {access.mode === "selected-apps" ? (
+      {isError ? (
+        <ActionQueryError
+          className="mt-4"
+          error={error}
+          onRetry={() => void refetch()}
+        />
+      ) : access.mode === "selected-apps" ? (
         <div className="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
           {apps.map((app) => {
             const isSelected = selected.has(app.id);
@@ -197,7 +203,7 @@ function DispatchMcpAccessPanel() {
 
 export default function AgentsRoute() {
   const t = useT();
-  const { data, refetch } = useActionQuery("list-connected-agents", {});
+  const agentsQuery = useActionQuery("list-connected-agents", {});
 
   return (
     <DispatchShell
@@ -206,10 +212,17 @@ export default function AgentsRoute() {
     >
       <div className="space-y-4">
         <DispatchMcpAccessPanel />
-        <AgentsPanel
-          agents={(data || []) as ConnectedAgent[]}
-          onRefresh={refetch}
-        />
+        {agentsQuery.isError ? (
+          <ActionQueryError
+            error={agentsQuery.error}
+            onRetry={() => void agentsQuery.refetch()}
+          />
+        ) : (
+          <AgentsPanel
+            agents={(agentsQuery.data || []) as ConnectedAgent[]}
+            onRefresh={agentsQuery.refetch}
+          />
+        )}
       </div>
     </DispatchShell>
   );

package/src/routes/pages/approval.tsx

@@ -16,6 +16,7 @@ import {
 import { useSearchParams } from "react-router";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import {
   ApprovalValueBlock,
   parseApprovalValue,
@@ -66,10 +67,8 @@ export default function ApprovalPreviewRoute() {
   const [searchParams] = useSearchParams();
   const id = searchParams.get("id") ?? "";
 
-  const { data: approvals, isLoading } = useActionQuery(
-    "list-dispatch-approvals",
-    {},
-  );
+  const approvalsQuery = useActionQuery("list-dispatch-approvals", {});
+  const { data: approvals, isLoading } = approvalsQuery;
 
   const approve = useActionMutation("approve-dispatch-change", {
     onSuccess: () => toast.success("Change approved"),
@@ -141,6 +140,19 @@ export default function ApprovalPreviewRoute() {
     );
   }
 
+  if (approvalsQuery.isError) {
+    return (
+      <div className="flex min-h-screen items-start justify-center bg-background p-6">
+        <div className="w-full max-w-md">
+          <ActionQueryError
+            error={approvalsQuery.error}
+            onRetry={() => void approvalsQuery.refetch()}
+          />
+        </div>
+      </div>
+    );
+  }
+
   if (!approval) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background p-6">