@agent-native/dispatch 0.12.2 → 0.13.0

package/src/routes/pages/agents.tsx

@@ -1,16 +1,18 @@
-import { useMemo, useState } from "react";
 import {
   agentNativePath,
   useActionMutation,
   useActionQuery,
+  useT,
 } from "@agent-native/core/client";
+import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+
 import { AgentsPanel, type ConnectedAgent } from "@/components/agents-panel";
 import { DispatchShell } from "@/components/dispatch-shell";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
-import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
-import { toast } from "sonner";
 
 export function meta() {
   return [{ title: "Agents — Dispatch" }];
@@ -39,12 +41,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 +76,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 +93,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 +105,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 +137,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 +146,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 +193,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/approval.tsx

@@ -1,4 +1,3 @@
-import { useSearchParams } from "react-router";
 import {
   useActionMutation,
   useActionQuery,
@@ -6,14 +5,6 @@ import {
   postNavigate,
   appPath,
 } from "@agent-native/core/client";
-import { toast } from "sonner";
-import {
-  ApprovalValueBlock,
-  parseApprovalValue,
-} from "@/components/approval-value-block";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Skeleton } from "@/components/ui/skeleton";
 import {
   IconCheck,
   IconX,
@@ -22,6 +13,16 @@ import {
   IconClock,
   IconAlertCircle,
 } from "@tabler/icons-react";
+import { useSearchParams } from "react-router";
+import { toast } from "sonner";
+
+import {
+  ApprovalValueBlock,
+  parseApprovalValue,
+} from "@/components/approval-value-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export function meta() {
   return [{ title: "Approval — Dispatch" }];

package/src/routes/pages/approvals.tsx

@@ -1,7 +1,8 @@
-import { useMemo, useState } from "react";
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
 import { useOrg } from "@agent-native/core/client/org";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
+
 import { DispatchShell } from "@/components/dispatch-shell";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";

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

@@ -1,11 +1,12 @@
-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,
   IconClockHour4,
 } from "@tabler/icons-react";
+import { useEffect, useMemo } from "react";
+import { Link, useParams } from "react-router";
+
 import { DispatchShell } from "@/components/dispatch-shell";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -20,6 +21,7 @@ export function meta() {
 }
 
 export default function WorkspaceAppRoute() {
+  const t = useT();
   const { appId } = useParams();
   const { data: apps = [], isLoading } = useActionQuery(
     "list-workspace-apps",
@@ -42,14 +44,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 +64,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 +81,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 +106,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>

package/src/routes/pages/apps.tsx

@@ -1,5 +1,8 @@
-import { useState } from "react";
-import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import {
   IconApps,
   IconBrain,
@@ -21,10 +24,11 @@ import {
   IconStack3,
   IconVideo,
 } from "@tabler/icons-react";
+import { useState } from "react";
 import { toast } from "sonner";
+
 import { CreateAppPopover } from "@/components/create-app-popover";
 import { DispatchShell } from "@/components/dispatch-shell";
-import { WorkspaceAppCard } from "@/components/workspace-app-card";
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -32,6 +36,7 @@ import {
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { Skeleton } from "@/components/ui/skeleton";
+import { WorkspaceAppCard } from "@/components/workspace-app-card";
 import { cn } from "@/lib/utils";
 import type { WorkspaceAppSummary } from "@/lib/workspace-apps";
 
@@ -71,6 +76,7 @@ const TEMPLATE_ICONS: Record<string, typeof IconMail> = {
 };
 
 export default function AppsRoute() {
+  const t = useT();
   const [showHidden, setShowHidden] = useState(false);
   const [templatesOpen, setTemplatesOpen] = useState(false);
   const { data: apps = [], isLoading: appsLoading } = useActionQuery(
@@ -103,11 +109,13 @@ export default function AppsRoute() {
 
   return (
     <DispatchShell
-      title="Apps"
+      title={t("dispatch.nav.apps")}
       description={
         workspaceLabel
-          ? `Apps in the "${workspaceLabel}" workspace. Each app gets its own route under this workspace and shares its database, auth, and agent chat.`
-          : "Open workspace apps and start new app creation from Dispatch."
+          ? t("dispatch.pages.appsDescriptionWithWorkspace", {
+              workspace: workspaceLabel,
+            })
+          : t("dispatch.pages.appsDescription")
       }
     >
       <div className="space-y-8">
@@ -121,13 +129,19 @@ export default function AppsRoute() {
               <div className="min-w-0">
                 <h2 className="truncate text-sm font-semibold text-foreground">
                   {workspaceLabel
-                    ? `Apps in ${workspaceLabel}`
-                    : "Workspace apps"}
+                    ? t("dispatch.pages.appsInWorkspace", {
+                        workspace: workspaceLabel,
+                      })
+                    : t("dispatch.pages.workspaceApps")}
                 </h2>
                 <p className="mt-0.5 text-xs text-muted-foreground">
-                  {visibleApps.length} active
+                  {t("dispatch.pages.activeCount", {
+                    count: visibleApps.length,
+                  })}
                   {archivedApps.length > 0
-                    ? ` · ${archivedApps.length} hidden`
+                    ? ` · ${t("dispatch.pages.hiddenCount", {
+                        count: archivedApps.length,
+                      })}`
                     : ""}
                 </p>
               </div>
@@ -138,7 +152,7 @@ export default function AppsRoute() {
                 trigger={
                   <Button size="sm">
                     <IconPlus size={15} className="mr-1.5" />
-                    Create app
+                    {t("dispatch.pages.createApp")}
                   </Button>
                 }
               />
@@ -169,12 +183,14 @@ export default function AppsRoute() {
                   />
                   <div className="min-w-0">
                     <h2 className="text-sm font-semibold text-foreground">
-                      Templates
+                      {t("dispatch.pages.templates")}
                     </h2>
                     <p className="text-xs text-muted-foreground">
                       {templatesLoading
-                        ? "Checking available templates"
-                        : `${typedTemplates.length} available to scaffold`}
+                        ? t("dispatch.pages.checkingTemplates")
+                        : t("dispatch.pages.templatesAvailable", {
+                            count: typedTemplates.length,
+                          })}
                     </p>
                   </div>
                 </div>
@@ -185,7 +201,9 @@ export default function AppsRoute() {
                     size="sm"
                     className="gap-1.5"
                   >
-                    {templatesOpen ? "Hide" : "Show"}
+                    {templatesOpen
+                      ? t("dispatch.pages.hide")
+                      : t("dispatch.pages.show")}
                     <IconChevronDown
                       size={14}
                       className={cn(
@@ -225,11 +243,12 @@ export default function AppsRoute() {
                   />
                   <div className="min-w-0">
                     <h2 className="text-sm font-semibold text-foreground">
-                      Hidden apps
+                      {t("dispatch.pages.hiddenApps")}
                     </h2>
                     <p className="text-xs text-muted-foreground">
-                      {archivedApps.length} hidden{" "}
-                      {archivedApps.length === 1 ? "app" : "apps"}
+                      {t("dispatch.pages.hiddenAppCount", {
+                        count: archivedApps.length,
+                      })}
                     </p>
                   </div>
                 </div>
@@ -240,7 +259,9 @@ export default function AppsRoute() {
                     size="sm"
                     className="gap-1.5"
                   >
-                    {showHidden ? "Hide" : "Show"}
+                    {showHidden
+                      ? t("dispatch.pages.hide")
+                      : t("dispatch.pages.show")}
                     <IconChevronDown
                       size={14}
                       className={cn(
@@ -293,23 +314,24 @@ function AppsSkeletonGrid() {
 }
 
 function EmptyAppsState() {
+  const t = useT();
   return (
     <div className="rounded-lg border border-dashed bg-card px-4 py-10 text-center">
       <div className="mx-auto flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
         <IconApps size={18} />
       </div>
       <h3 className="mt-3 text-sm font-semibold text-foreground">
-        No workspace apps yet
+        {t("dispatch.pages.noWorkspaceApps")}
       </h3>
       <p className="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
-        Create an app when a workflow needs its own focused place to live.
+        {t("dispatch.pages.noWorkspaceAppsDescription")}
       </p>
       <div className="mt-4">
         <CreateAppPopover
           trigger={
             <Button size="sm">
               <IconPlus size={15} className="mr-1.5" />
-              Create app
+              {t("dispatch.pages.createApp")}
             </Button>
           }
         />

package/src/routes/pages/audit.tsx

@@ -1,4 +1,5 @@
 import { useActionQuery } from "@agent-native/core/client";
+
 import { DispatchShell } from "@/components/dispatch-shell";
 
 export function meta() {

package/src/routes/pages/chat.tsx

@@ -1,3 +1,9 @@
+import {
+  AgentChatSurface,
+  appBasePath,
+  appPath,
+  markAgentChatHomeHandoff,
+} from "@agent-native/core/client";
 import {
   useCallback,
   useEffect,
@@ -6,12 +12,7 @@ import {
   type ComponentProps,
 } from "react";
 import { useLocation, useNavigate } from "react-router";
-import {
-  AgentChatSurface,
-  appBasePath,
-  appPath,
-  markAgentChatHomeHandoff,
-} from "@agent-native/core/client";
+
 import { submitOverviewPrompt } from "@/lib/overview-chat";
 
 function chatThreadPath(threadId: string | null): string {