@agent-native/dispatch 0.12.1 → 0.12.3

package/src/components/layout/Layout.tsx

@@ -19,6 +19,8 @@ import {
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
   useChatThreads,
+  useFormatters,
+  useT,
   type ChatThreadSummary,
 } from "@agent-native/core/client";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
@@ -222,12 +224,6 @@ const OPERATIONS_NAV_ITEMS = [
 
 const EMPTY_NAV_ITEMS: readonly DispatchNavItem[] = [];
 
-const SIDEBAR_SUGGESTIONS = [
-  "Build a workspace app for X",
-  "Route Slack mentions to my analytics app",
-  "Grant my OpenAI key to this app",
-];
-
 const CHROMELESS_PATHS = ["/approval"];
 
 // Routes whose page renders its own toolbar (with NotificationsBell + AgentToggleButton).
@@ -309,7 +305,10 @@ function threadIdFromPath(pathname: string): string | null {
   }
 }
 
-function formatThreadAge(updatedAt: number) {
+function formatThreadAge(
+  updatedAt: number,
+  formatDate: ReturnType<typeof useFormatters>["formatDate"],
+) {
   const diffMs = Math.max(0, Date.now() - updatedAt);
   const minutes = Math.floor(diffMs / 60_000);
   if (minutes < 1) return "now";
@@ -318,14 +317,14 @@ function formatThreadAge(updatedAt: number) {
   if (hours < 24) return `${hours}h`;
   const days = Math.floor(hours / 24);
   if (days < 7) return `${days}d`;
-  return new Date(updatedAt).toLocaleDateString([], {
+  return formatDate(updatedAt, {
     month: "short",
     day: "numeric",
   });
 }
 
-function threadTitle(thread: ChatThreadSummary) {
-  return thread.title || thread.preview || "New chat";
+function threadTitle(thread: ChatThreadSummary, fallback: string) {
+  return thread.title || thread.preview || fallback;
 }
 
 function threadUpdatedAt(thread: ChatThreadSummary) {
@@ -337,6 +336,8 @@ function threadUpdatedAt(thread: ChatThreadSummary) {
 }
 
 function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
+  const t = useT();
+  const { formatDate } = useFormatters();
   const navigate = useNavigate();
   const location = useLocation();
   const {
@@ -415,7 +416,7 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
 
   function startRenameThread(thread: ChatThreadSummary) {
     committingRenameRef.current = false;
-    setRenameDraft(threadTitle(thread));
+    setRenameDraft(threadTitle(thread, t("dispatch.sidebar.newChat")));
     setRenamingThreadId(thread.id);
   }
 
@@ -446,7 +447,7 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
     <div className="mt-2 border-s border-sidebar-border/70 ps-3">
       <div className="mb-1 flex h-7 items-center gap-2 pe-1">
         <div className="min-w-0 flex-1 text-xs font-medium text-sidebar-foreground/70">
-          Chats
+          {t("dispatch.sidebar.chats")}
         </div>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -454,12 +455,12 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
               type="button"
               onClick={handleNewChat}
               className="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground/65 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
-              aria-label="New Dispatch chat"
+              aria-label={t("dispatch.sidebar.newDispatchChat")}
             >
               <IconPlus className="size-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>New chat</TooltipContent>
+          <TooltipContent>{t("dispatch.sidebar.newChat")}</TooltipContent>
         </Tooltip>
       </div>
       <div className="grid gap-0.5">
@@ -498,7 +499,12 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
                         }
                       }}
                       maxLength={160}
-                      aria-label={`Rename ${threadTitle(thread)}`}
+                      aria-label={t("dispatch.sidebar.renameThread", {
+                        title: threadTitle(
+                          thread,
+                          t("dispatch.sidebar.newChat"),
+                        ),
+                      })}
                       className="h-6 min-w-0 rounded-sm border-sidebar-border bg-background px-1.5 text-xs"
                     />
                   </form>
@@ -510,20 +516,28 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
                       className="flex h-full min-w-0 flex-1 cursor-pointer items-center px-2 text-start outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     >
                       <span className="min-w-0 flex-1 truncate">
-                        {threadTitle(thread)}
+                        {threadTitle(thread, t("dispatch.sidebar.newChat"))}
                       </span>
                     </button>
                     <div className="relative flex size-7 shrink-0 items-center justify-end pe-1">
                       <span className="text-[11px] text-sidebar-foreground/50 transition-opacity group-hover:opacity-0 group-focus-within:opacity-0">
                         {isActive
                           ? ""
-                          : formatThreadAge(threadUpdatedAt(thread))}
+                          : formatThreadAge(
+                              threadUpdatedAt(thread),
+                              formatDate,
+                            )}
                       </span>
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                           <button
                             type="button"
-                            aria-label={`Chat options for ${threadTitle(thread)}`}
+                            aria-label={t("dispatch.sidebar.chatOptions", {
+                              title: threadTitle(
+                                thread,
+                                t("dispatch.sidebar.newChat"),
+                              ),
+                            })}
                             className="absolute end-1 flex size-6 cursor-pointer items-center justify-center rounded-md text-sidebar-foreground/65 opacity-0 transition-opacity hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover:opacity-100 group-focus-within:opacity-100 data-[state=open]:opacity-100"
                           >
                             <IconDots className="size-4" />
@@ -538,7 +552,7 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
                             onSelect={() => startRenameThread(thread)}
                           >
                             <IconEdit className="size-4" />
-                            Rename chat
+                            {t("dispatch.sidebar.renameChat")}
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
@@ -554,7 +568,7 @@ function DispatchChatsSection({ onNavigate }: { onNavigate?: () => void }) {
             onClick={handleNewChat}
             className="flex h-8 cursor-pointer items-center rounded-md px-2 text-start text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent/65 hover:text-sidebar-accent-foreground"
           >
-            <span className="truncate">New chat</span>
+            <span className="truncate">{t("dispatch.sidebar.newChat")}</span>
           </button>
         )}
       </div>
@@ -569,6 +583,7 @@ export function NavContent({
   onNavigate?: () => void;
   extensions?: DispatchExtensionConfig;
 }) {
+  const t = useT();
   const location = useLocation();
   const navigate = useNavigate();
   const { data: workspace } = useActionQuery(
@@ -591,10 +606,20 @@ export function NavContent({
   const operationsOpen = operationsNavItems.some((item) =>
     navItemMatchesPath(item, localPathname),
   );
+  const navLabel = (item: DispatchNavItem) => {
+    const key =
+      item.id === "thread-debug"
+        ? "threadDebug"
+        : item.id === "workspace"
+          ? "resources"
+          : item.id;
+    return t(`dispatch.nav.${key}`, { defaultValue: item.label });
+  };
 
   const renderNavItem = (item: DispatchNavItem) => {
     const Icon = item.icon;
     const itemMatchesLocalPath = navItemMatchesPath(item, localPathname);
+    const label = navLabel(item);
     return (
       <li key={item.id}>
         <NavLink
@@ -633,7 +658,7 @@ export function NavContent({
           ) : (
             <span className="h-4 w-4 shrink-0" aria-hidden="true" />
           )}
-          <span className="truncate">{item.label}</span>
+          <span className="truncate">{label}</span>
         </NavLink>
         {item.id === "chat" && itemMatchesLocalPath ? (
           <DispatchChatsSection onNavigate={onNavigate} />
@@ -666,8 +691,10 @@ export function NavContent({
             </div>
             <div className="truncate text-xs text-muted-foreground">
               {workspaceLabel
-                ? `Workspace · ${ws?.appCount ?? 0} app${ws?.appCount === 1 ? "" : "s"}`
-                : "Workspace control plane"}
+                ? t("dispatch.sidebar.workspaceSubtitle", {
+                    count: ws?.appCount ?? 0,
+                  })
+                : t("dispatch.sidebar.workspaceControlPlane")}
             </div>
           </div>
         </div>
@@ -682,7 +709,7 @@ export function NavContent({
           <div className="border-t px-2 py-2">
             <details className="group" open={operationsOpen}>
               <summary className="flex h-8 cursor-pointer list-none items-center justify-between rounded-md px-2 text-xs font-medium uppercase text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&::-webkit-details-marker]:hidden">
-                <span>Operations</span>
+                <span>{t("dispatch.nav.operations")}</span>
                 <IconChevronDown
                   size={14}
                   className="transition-transform group-open:rotate-180"
@@ -718,6 +745,7 @@ export function Layout({
   children: ReactNode;
   extensions?: DispatchExtensionConfig;
 }) {
+  const t = useT();
   const location = useLocation();
   const navigate = useNavigate();
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -748,6 +776,11 @@ export function Layout({
       dispatchNavLinkTarget("/chat"),
     );
   }
+  const sidebarSuggestions = [
+    t("dispatch.sidebar.suggestionBuildApp"),
+    t("dispatch.sidebar.suggestionRouteSlack"),
+    t("dispatch.sidebar.suggestionGrantKey"),
+  ];
   const appContent = (
     <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
       {showHeader ? <Header onOpenMobile={() => setMobileOpen(true)} /> : null}
@@ -778,8 +811,8 @@ export function Layout({
       storageKey="dispatch"
       openOnChatRunning={chatHomeHandoffActive}
       onFullscreenRequest={openAskAgentFullscreen}
-      emptyStateText="Create apps, manage vault keys, and route work across the workspace."
-      suggestions={SIDEBAR_SUGGESTIONS}
+      emptyStateText={t("dispatch.sidebar.emptyAgentText")}
+      suggestions={sidebarSuggestions}
     >
       {appContent}
     </AgentSidebar>
@@ -797,9 +830,11 @@ export function Layout({
             side="left"
             className="w-72 p-0 bg-sidebar text-sidebar-foreground [&>button]:hidden"
           >
-            <SheetTitle className="sr-only">Navigation</SheetTitle>
+            <SheetTitle className="sr-only">
+              {t("dispatch.nav.navigation")}
+            </SheetTitle>
             <SheetDescription className="sr-only">
-              Workspace navigation links
+              {t("dispatch.nav.navigationDescription")}
             </SheetDescription>
             <div className="flex h-full w-full flex-col">
               <NavContent

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

@@ -7,7 +7,7 @@ import {
   type ClientLoaderFunctionArgs,
   type LoaderFunctionArgs,
 } from "react-router";
-import { useActionQuery, appPath } from "@agent-native/core/client";
+import { useActionQuery, appPath, useT } from "@agent-native/core/client";
 import {
   IconArrowLeft,
   IconArrowUpRight,
@@ -93,6 +93,7 @@ export async function clientLoader({
 }
 
 export default function WorkspaceAppCatchAllRoute() {
+  const t = useT();
   const { appId } = useParams();
   const { data: apps = [], isLoading } = useActionQuery(
     "list-workspace-apps",
@@ -127,14 +128,14 @@ export default function WorkspaceAppCatchAllRoute() {
 
   return (
     <DispatchShell
-      title={app?.name || "Page not found"}
-      description="This route is not in the workspace app list yet."
+      title={app?.name || t("dispatch.pages.pageNotFound")}
+      description={t("dispatch.pages.pageNotFoundDescription")}
     >
       <div className="max-w-2xl rounded-lg border bg-card p-5">
         <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
           <Link to={appPath("/overview")}>
             <IconArrowLeft size={15} className="mr-1.5" />
-            Overview
+            {t("dispatch.nav.overview")}
           </Link>
         </Button>
 
@@ -149,23 +150,23 @@ export default function WorkspaceAppCatchAllRoute() {
                 className="gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
               >
                 <IconClockHour4 size={12} />
-                Building
+                {t("dispatch.pages.building")}
               </Badge>
             </div>
             <p className="text-sm text-muted-foreground">
-              This app is being created. It will be available at{" "}
+              {t("dispatch.pages.appBuildingPrefix")}{" "}
               <span className="font-mono text-foreground">{app.path}</span>{" "}
-              after its branch is merged and the workspace deploy finishes.
+              {t("dispatch.pages.appBuildingSuffix")}
             </p>
             {app.branchName ? (
               <p className="text-xs text-muted-foreground">
-                Branch: {app.branchName}
+                {t("dispatch.pages.branch", { branch: app.branchName })}
               </p>
             ) : null}
             {app.builderUrl ? (
               <Button asChild>
                 <a href={app.builderUrl} target="_blank" rel="noreferrer">
-                  Open Builder branch
+                  {t("dispatch.pages.openBuilderBranch")}
                   <IconArrowUpRight size={15} className="ml-1.5" />
                 </a>
               </Button>
@@ -174,14 +175,16 @@ export default function WorkspaceAppCatchAllRoute() {
         ) : (
           <div className="space-y-3">
             <h2 className="text-base font-semibold text-foreground">
-              Page not found
+              {t("dispatch.pages.pageNotFound")}
             </h2>
             <p className="text-sm text-muted-foreground">
               <span className="font-mono text-foreground">/{appId}</span> isn't
-              a Dispatch tab or a workspace app in this workspace.
+              {t("dispatch.pages.notDispatchOrWorkspaceApp")}
             </p>
             <Button asChild>
-              <Link to={appPath("/apps")}>Browse apps</Link>
+              <Link to={appPath("/apps")}>
+                {t("dispatch.pages.browseApps")}
+              </Link>
             </Button>
           </div>
         )}

package/src/routes/pages/agents.tsx

@@ -3,6 +3,7 @@ import {
   agentNativePath,
   useActionMutation,
   useActionQuery,
+  useT,
 } from "@agent-native/core/client";
 import { AgentsPanel, type ConnectedAgent } from "@/components/agents-panel";
 import { DispatchShell } from "@/components/dispatch-shell";
@@ -39,12 +40,13 @@ function dispatchMcpUrl(): string {
 }
 
 function DispatchMcpAccessPanel() {
+  const t = useT();
   const { data, isLoading } = useActionQuery("list-mcp-app-access", {});
   const [optimistic, setOptimistic] = useState<McpAccessState | null>(null);
   const saveAccess = useActionMutation("set-mcp-app-access", {
     onSuccess: () => {
       setOptimistic(null);
-      toast.success("MCP app access updated");
+      toast.success(t("dispatch.pages.mcpAccessUpdated"));
     },
     onError: (error) => {
       setOptimistic(null);
@@ -73,7 +75,7 @@ function DispatchMcpAccessPanel() {
 
   function persist(next: McpAccessState) {
     if (next.mode === "selected-apps" && next.selectedAppIds.length === 0) {
-      toast.error("Select at least one app, or expose all apps.");
+      toast.error(t("dispatch.pages.selectAppForMcp"));
       return;
     }
     setOptimistic(next);
@@ -90,9 +92,9 @@ function DispatchMcpAccessPanel() {
   async function copyUrl() {
     try {
       await navigator.clipboard.writeText(mcpUrl);
-      toast.success("MCP URL copied");
+      toast.success(t("dispatch.pages.mcpUrlCopied"));
     } catch {
-      toast.error("Could not copy MCP URL");
+      toast.error(t("dispatch.pages.mcpUrlCopyFailed"));
     }
   }
 
@@ -102,21 +104,25 @@ function DispatchMcpAccessPanel() {
         <div className="min-w-0">
           <div className="flex items-center gap-2 text-sm font-medium text-foreground">
             <IconPlugConnected size={16} />
-            Unified MCP gateway
+            {t("dispatch.pages.unifiedMcpGateway")}
           </div>
           <div className="mt-1 max-w-2xl text-sm text-muted-foreground">
-            Connect external agents to Dispatch once, then route to granted
-            workspace apps through <code>list_apps</code>, <code>ask_app</code>,
-            and <code>open_app</code>.
+            {t("dispatch.pages.unifiedMcpGatewayDescription")}{" "}
+            <code>list_apps</code>, <code>ask_app</code>, and{" "}
+            <code>open_app</code>.
           </div>
         </div>
         <div className="flex items-center gap-3 rounded-xl border px-3 py-2">
           <div>
             <div className="text-xs font-medium text-foreground">
-              {access.mode === "all-apps" ? "All apps" : "Selected apps"}
+              {access.mode === "all-apps"
+                ? t("dispatch.pages.allApps")
+                : t("dispatch.pages.selectedApps")}
             </div>
             <div className="text-xs text-muted-foreground">
-              {isLoading ? "Loading" : `${grantedCount} granted`}
+              {isLoading
+                ? t("dispatch.pages.loading")
+                : t("dispatch.pages.grantedCount", { count: grantedCount })}
             </div>
           </div>
           <Switch
@@ -130,7 +136,7 @@ function DispatchMcpAccessPanel() {
                   : apps.map((app) => app.id),
               })
             }
-            aria-label="Expose all apps through Dispatch MCP"
+            aria-label={t("dispatch.pages.exposeAllAppsMcp")}
           />
         </div>
       </div>
@@ -139,7 +145,7 @@ function DispatchMcpAccessPanel() {
         <Input readOnly value={mcpUrl} className="font-mono text-xs" />
         <Button type="button" variant="outline" onClick={copyUrl}>
           <IconCopy size={15} />
-          Copy URL
+          {t("dispatch.pages.copyUrl")}
         </Button>
       </div>
 
@@ -186,12 +192,13 @@ function DispatchMcpAccessPanel() {
 }
 
 export default function AgentsRoute() {
+  const t = useT();
   const { data, refetch } = useActionQuery("list-connected-agents", {});
 
   return (
     <DispatchShell
-      title="Agents"
-      description="Dispatch can delegate to the built-in app suite over A2A by default. Add extra agents here only if you want to route work to apps outside that built-in set."
+      title={t("dispatch.nav.agents")}
+      description={t("dispatch.pages.agentsDescription")}
     >
       <div className="space-y-4">
         <DispatchMcpAccessPanel />

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { Link, useParams } from "react-router";
-import { useActionQuery } from "@agent-native/core/client";
+import { useActionQuery, useT } from "@agent-native/core/client";
 import {
   IconArrowLeft,
   IconArrowUpRight,
@@ -20,6 +20,7 @@ export function meta() {
 }
 
 export default function WorkspaceAppRoute() {
+  const t = useT();
   const { appId } = useParams();
   const { data: apps = [], isLoading } = useActionQuery(
     "list-workspace-apps",
@@ -42,14 +43,14 @@ export default function WorkspaceAppRoute() {
 
   return (
     <DispatchShell
-      title={app?.name || "Workspace App"}
-      description="Open a deployed app or check the status of an app being created."
+      title={app?.name || t("dispatch.pages.workspaceAppFallback")}
+      description={t("dispatch.pages.workspaceAppDescription")}
     >
       <div className="max-w-2xl rounded-lg border bg-card p-5">
         <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
           <Link to="/apps">
             <IconArrowLeft size={15} className="mr-1.5" />
-            Apps
+            {t("dispatch.nav.apps")}
           </Link>
         </Button>
 
@@ -62,10 +63,10 @@ export default function WorkspaceAppRoute() {
         ) : !app ? (
           <div className="space-y-3">
             <h2 className="text-base font-semibold text-foreground">
-              App not found
+              {t("dispatch.pages.appNotFound")}
             </h2>
             <p className="text-sm text-muted-foreground">
-              This route is not in the workspace app list yet.
+              {t("dispatch.pages.pageNotFoundDescription")}
             </p>
           </div>
         ) : app.status === "pending" ? (
@@ -79,23 +80,23 @@ export default function WorkspaceAppRoute() {
                 className="gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
               >
                 <IconClockHour4 size={12} />
-                Building
+                {t("dispatch.pages.building")}
               </Badge>
             </div>
             <p className="text-sm text-muted-foreground">
-              This app is being created. It will be available at{" "}
+              {t("dispatch.pages.appBuildingPrefix")}{" "}
               <span className="font-mono text-foreground">{app.path}</span>{" "}
-              after its branch is merged and the workspace deploy finishes.
+              {t("dispatch.pages.appBuildingSuffix")}
             </p>
             {app.branchName ? (
               <p className="text-xs text-muted-foreground">
-                Branch: {app.branchName}
+                {t("dispatch.pages.branch", { branch: app.branchName })}
               </p>
             ) : null}
             {app.builderUrl ? (
               <Button asChild>
                 <a href={app.builderUrl} target="_blank" rel="noreferrer">
-                  Open Builder branch
+                  {t("dispatch.pages.openBuilderBranch")}
                   <IconArrowUpRight size={15} className="ml-1.5" />
                 </a>
               </Button>
@@ -104,16 +105,16 @@ export default function WorkspaceAppRoute() {
         ) : (
           <div className="space-y-3">
             <h2 className="text-base font-semibold text-foreground">
-              Opening {app.name}
+              {t("dispatch.pages.openingApp", { name: app.name })}
             </h2>
             <p className="text-sm text-muted-foreground">
-              Redirecting to{" "}
+              {t("dispatch.pages.redirectingTo")}{" "}
               <span className="font-mono text-foreground">{app.path}</span>.
             </p>
             {href ? (
               <Button asChild>
                 <a href={href}>
-                  Open app
+                  {t("dispatch.pages.openApp")}
                   <IconArrowUpRight size={15} className="ml-1.5" />
                 </a>
               </Button>