@agent-native/dispatch 0.14.3 → 0.14.4

package/src/components/dispatch-control-plane.tsx

@@ -1,76 +1,56 @@
 import {
   PromptComposer,
   isInBuilderFrame,
+  navigateWithAgentChatViewTransition,
   useActionQuery,
   useChatModels,
   useT,
 } from "@agent-native/core/client";
-import {
-  IconArrowUpRight,
-  IconBroadcast,
-  IconStack3,
-  type IconProps,
-} from "@tabler/icons-react";
+import { IconArrowUpRight } from "@tabler/icons-react";
 import type { ReactNode } from "react";
 import { Link, useNavigate } from "react-router";
 
 import { submitOverviewPrompt } from "../lib/overview-chat";
 import type { WorkspaceAppSummary } from "../lib/workspace-apps";
+import { ActionQueryError } from "./action-query-error";
 import { CreateAppPopover } from "./create-app-popover";
-import { DispatchShell } from "./dispatch-shell";
+import { useSetPageTitle } from "./layout/HeaderActions";
 import { Button } from "./ui/button";
 import { Skeleton } from "./ui/skeleton";
 import { WorkspaceAppCard } from "./workspace-app-card";
 
-const PROMPT_SUGGESTIONS = [
-  "Summarize the current workspace health",
-  "Create an app for onboarding requests",
-  "Check which agents can help with analytics",
-];
-
-const WORKSPACE_LINKS = [
-  { to: "/automations", labelKey: "dispatch.nav.automations" },
-  { to: "/approvals", labelKey: "dispatch.nav.approvals" },
-  { to: "/destinations", labelKey: "dispatch.nav.delivery" },
-  { to: "/agents", labelKey: "dispatch.nav.agents" },
-  { to: "/vault", labelKey: "dispatch.nav.vault" },
-  { to: "/audit", labelKey: "dispatch.nav.audit" },
-] as const;
-
 function SectionHeader({
-  icon: Icon,
   title,
-  detail,
   action,
 }: {
-  icon: React.ComponentType<IconProps>;
   title: string;
-  detail?: string;
   action?: ReactNode;
 }) {
   return (
     <div className="flex min-w-0 items-center justify-between gap-3">
-      <div className="flex min-w-0 items-center gap-2">
-        <Icon size={16} className="shrink-0 text-muted-foreground" />
-        <div className="min-w-0">
-          <h2 className="truncate text-sm font-semibold text-foreground">
-            {title}
-          </h2>
-          {detail ? (
-            <p className="mt-0.5 truncate text-xs text-muted-foreground">
-              {detail}
-            </p>
-          ) : null}
-        </div>
-      </div>
+      <h2 className="truncate text-sm font-semibold text-foreground">
+        {title}
+      </h2>
       {action ? <div className="shrink-0">{action}</div> : null}
     </div>
   );
 }
 
 function CommandPanel() {
+  const t = useT();
   const { selectedModel } = useChatModels();
   const navigate = useNavigate();
+  const promptSuggestions = [
+    t("dispatch.pages.suggestionWorkspaceHealth", {
+      defaultValue: "Summarize the current workspace health",
+    }),
+    t("dispatch.pages.suggestionOnboardingApp", {
+      defaultValue: "Create an app for onboarding requests",
+    }),
+    t("dispatch.pages.suggestionAnalyticsAgents", {
+      defaultValue: "Check which agents can help with analytics",
+    }),
+  ];
 
   function send(message: string) {
     const trimmed = message.trim();
@@ -81,7 +61,7 @@ function CommandPanel() {
       return;
     }
 
-    navigate("/chat", {
+    navigateWithAgentChatViewTransition(navigate, "/chat", {
       state: {
         dispatchPrompt: {
           id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
@@ -93,71 +73,44 @@ function CommandPanel() {
   }
 
   return (
-    <section className="rounded-lg border bg-card p-4">
-      <div className="mb-3 flex items-center justify-between gap-3">
-        <div className="flex items-center gap-2">
-          <IconBroadcast size={16} className="text-muted-foreground" />
-          <h2 className="text-sm font-semibold text-foreground">
-            Ask Dispatch
+    <section className="flex flex-col">
+      <div className="mx-auto flex w-full max-w-3xl flex-col pt-4 sm:pt-6">
+        <div className="mb-5 text-center">
+          <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
+            {t("dispatch.pages.chatAcrossApps", {
+              defaultValue: "Chat across your apps",
+            })}
           </h2>
+          <p className="mx-auto mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
+            {t("dispatch.pages.chatAcrossAppsDescription", {
+              defaultValue:
+                "Route work, inspect status, or create something new from one place.",
+            })}
+          </p>
+        </div>
+        <PromptComposer
+          placeholder={t("dispatch.pages.overviewPromptPlaceholder", {
+            defaultValue: "Ask Dispatch anything...",
+          })}
+          onSubmit={(text) => send(text)}
+        />
+        <div className="mt-3 flex flex-wrap justify-center gap-2">
+          {promptSuggestions.map((suggestion) => (
+            <button
+              key={suggestion}
+              type="button"
+              onClick={() => send(suggestion)}
+              className="cursor-pointer rounded-md border border-transparent bg-muted/60 px-2.5 py-1.5 text-xs text-muted-foreground transition-[background-color,color] hover:bg-muted hover:text-foreground"
+            >
+              {suggestion}
+            </button>
+          ))}
         </div>
-        <Button variant="outline" size="sm" asChild>
-          <Link to="/chat">
-            Open chat
-            <IconArrowUpRight size={14} />
-          </Link>
-        </Button>
-      </div>
-      <PromptComposer
-        placeholder="Route work, inspect status, or create an app..."
-        onSubmit={(text) => send(text)}
-      />
-      <div className="mt-3 flex flex-wrap gap-2">
-        {PROMPT_SUGGESTIONS.map((suggestion) => (
-          <button
-            key={suggestion}
-            type="button"
-            onClick={() => send(suggestion)}
-            className="cursor-pointer rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-muted-foreground transition hover:border-foreground/30 hover:text-foreground"
-          >
-            {suggestion}
-          </button>
-        ))}
       </div>
     </section>
   );
 }
 
-function WorkspaceLinks() {
-  const t = useT();
-
-  return (
-    <nav
-      aria-label={t("dispatch.pages.workspaceShortcutsAria")}
-      className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground"
-    >
-      <span className="font-medium text-foreground/70">
-        {t("dispatch.pages.also")}
-      </span>
-      {WORKSPACE_LINKS.map((item, index) => (
-        <span key={item.to} className="inline-flex items-center gap-x-3">
-          {index > 0 ? (
-            <span aria-hidden className="text-border">
-              ·
-            </span>
-          ) : null}
-          <Link
-            to={item.to}
-            className="transition hover:text-foreground hover:underline underline-offset-4"
-          >
-            {t(item.labelKey)}
-          </Link>
-        </span>
-      ))}
-    </nav>
-  );
-}
-
 function AppsPanel({
   apps,
   isLoading,
@@ -171,11 +124,7 @@ function AppsPanel({
   return (
     <section className="flex flex-col gap-3">
       <SectionHeader
-        icon={IconStack3}
         title="Apps"
-        detail={
-          visibleApps.length === 1 ? "1 active" : `${visibleApps.length} active`
-        }
         action={
           <Button variant="outline" size="sm" asChild>
             <Link to="/apps">
@@ -188,7 +137,10 @@ function AppsPanel({
       {showSkeletons ? (
         <div className="grid gap-3 md:grid-cols-2">
           {Array.from({ length: 4 }).map((_, index) => (
-            <div key={index} className="rounded-lg border bg-card p-4">
+            <div
+              key={index}
+              className="rounded-xl border border-border/60 bg-card/40 p-4"
+            >
               <Skeleton className="h-4 w-32" />
               <Skeleton className="mt-3 h-3 w-24" />
               <Skeleton className="mt-3 h-3 w-full" />
@@ -209,20 +161,24 @@ function AppsPanel({
 }
 
 export function DispatchControlPlane() {
-  const { data: workspaceApps = [], isLoading: appsLoading } = useActionQuery<
-    WorkspaceAppSummary[]
-  >("list-workspace-apps", { includeAgentCards: false, includeArchived: true });
+  useSetPageTitle(<span aria-hidden />);
+  const appsQuery = useActionQuery<WorkspaceAppSummary[]>(
+    "list-workspace-apps",
+    { includeAgentCards: false, includeArchived: true },
+  );
+  const { data: workspaceApps = [], isLoading: appsLoading } = appsQuery;
 
   return (
-    <DispatchShell
-      title="Overview"
-      description="Ask Dispatch or jump into a workspace app."
-    >
-      <div className="flex flex-col gap-6">
-        <CommandPanel />
-        <WorkspaceLinks />
+    <div className="flex flex-col gap-8">
+      <CommandPanel />
+      {appsQuery.isError ? (
+        <ActionQueryError
+          error={appsQuery.error}
+          onRetry={() => void appsQuery.refetch()}
+        />
+      ) : (
         <AppsPanel apps={workspaceApps ?? []} isLoading={appsLoading} />
-      </div>
-    </DispatchShell>
+      )}
+    </div>
   );
 }

package/src/components/index.ts

@@ -15,3 +15,4 @@ export type {
 } from "./layout/Layout.js";
 export { CreateAppPopover, CreateAppFlow } from "./create-app-popover.js";
 export { AppKeysPopover } from "./app-keys-popover.js";
+export { ActionQueryError } from "./action-query-error.js";

package/src/components/layout/Layout.spec.tsx

@@ -5,7 +5,7 @@ import { MemoryRouter } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { TooltipProvider } from "../ui/tooltip";
-import { NavContent } from "./Layout";
+import { formatThreadAge, NavContent } from "./Layout";
 
 const clientState = vi.hoisted(() => ({
   createThread: vi.fn<() => Promise<string | null>>(),
@@ -66,6 +66,20 @@ vi.mock("@agent-native/core/client/org", () => ({
   OrgSwitcher: () => <div>Organization</div>,
 }));
 
+describe("formatThreadAge", () => {
+  const now = 2_000_000_000_000;
+
+  it.each([
+    [0, "now"],
+    [2 * 60 * 60_000, "2h"],
+    [7 * 24 * 60 * 60_000, "7d"],
+    [21 * 24 * 60 * 60_000, "3w"],
+    [365 * 24 * 60 * 60_000, "1y"],
+  ])("formats %i milliseconds as %s", (elapsed, expected) => {
+    expect(formatThreadAge(now - elapsed, now)).toBe(expected);
+  });
+});
+
 describe("Dispatch NavContent", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -105,6 +119,25 @@ describe("Dispatch NavContent", () => {
     vi.unstubAllGlobals();
   });
 
+  it("puts Overview before Chat in the primary navigation", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/overview"]}>
+          <TooltipProvider>
+            <NavContent />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const primaryLabels = [...container.querySelectorAll("nav a")].map((link) =>
+      link.textContent?.trim(),
+    );
+    expect(primaryLabels.indexOf("Overview")).toBeLessThan(
+      primaryLabels.indexOf("Chat"),
+    );
+  });
+
   it("uses the quieter Analytics-style chat history and retains thread actions", async () => {
     await act(async () => {
       root.render(
@@ -121,6 +154,13 @@ describe("Dispatch NavContent", () => {
     expect(container.textContent).toContain("Earlier Dispatch work");
     expect(container.textContent).toContain("New chat");
     expect(container.textContent).toContain("5m");
+    const age = [...container.querySelectorAll("time")].find(
+      (element) => element.textContent === "5m",
+    );
+    expect(age?.className).toContain("w-8");
+    expect(age?.className).toContain("shrink-0");
+    expect(age?.className).toContain("whitespace-nowrap");
+    expect(age?.className).toContain("tabular-nums");
     expect(
       [...container.querySelectorAll("div")].some((element) =>
         element.className.includes("group/item"),
@@ -133,7 +173,7 @@ describe("Dispatch NavContent", () => {
     expect(container.textContent).not.toContain("Workspace control plane");
 
     const threadButton = [...container.querySelectorAll("button")].find(
-      (button) => button.textContent === "Earlier Dispatch work",
+      (button) => button.textContent?.includes("Earlier Dispatch work"),
     );
     expect(threadButton).toBeDefined();
     await act(async () => {

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");
+    }
+  });
+});