@agent-native/dispatch 0.12.2 → 0.12.3

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>

package/src/routes/pages/apps.tsx

@@ -1,5 +1,9 @@
 import { useState } from "react";
-import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import {
   IconApps,
   IconBrain,
@@ -71,6 +75,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 +108,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 +128,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 +151,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 +182,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 +200,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 +242,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 +258,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 +313,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/destinations.tsx

@@ -1,5 +1,9 @@
 import { useState } from "react";
-import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  useActionMutation,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { toast } from "sonner";
 import { DispatchShell } from "@/components/dispatch-shell";
 import { Button } from "@/components/ui/button";
@@ -33,15 +37,18 @@ function QuickSendRow({
 }: {
   destination: { id: string; name: string };
 }) {
+  const t = useT();
   const [text, setText] = useState("");
   const send = useActionMutation("send-platform-message", {
     onSuccess: () => {
-      toast.success("Message sent");
+      toast.success(t("dispatch.pages.messageSent"));
       setText("");
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : "Unable to send message",
+        error instanceof Error
+          ? error.message
+          : t("dispatch.pages.unableToSendMessage"),
       );
     },
   });
@@ -50,7 +57,7 @@ function QuickSendRow({
       <Input
         value={text}
         onChange={(event) => setText(event.target.value)}
-        placeholder="Quick test message"
+        placeholder={t("dispatch.pages.quickTestMessage")}
       />
       <Button
         onClick={() =>
@@ -61,13 +68,14 @@ function QuickSendRow({
         }
         disabled={send.isPending}
       >
-        Send
+        {t("dispatch.pages.send")}
       </Button>
     </div>
   );
 }
 
 export default function DestinationsRoute() {
+  const t = useT();
   const { data } = useActionQuery("list-destinations", {});
   const [form, setForm] = useState({
     name: "",
@@ -79,7 +87,7 @@ export default function DestinationsRoute() {
 
   const upsert = useActionMutation("upsert-destination", {
     onSuccess: () => {
-      toast.success("Destination saved");
+      toast.success(t("dispatch.pages.destinationSaved"));
       setForm((current) => ({
         ...current,
         name: "",
@@ -90,18 +98,18 @@ export default function DestinationsRoute() {
     },
   });
   const remove = useActionMutation("delete-destination", {
-    onSuccess: () => toast.success("Destination removed"),
+    onSuccess: () => toast.success(t("dispatch.pages.destinationRemoved")),
   });
 
   return (
     <DispatchShell
-      title="Destinations"
-      description="Saved outbound Slack channels, Telegram chats, and thread targets."
+      title={t("dispatch.nav.destinations")}
+      description={t("dispatch.pages.destinationsDescription")}
     >
       <div className="grid gap-4 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
         <section className="rounded-2xl border bg-card p-5">
           <h2 className="text-lg font-semibold text-foreground">
-            Saved destinations
+            {t("dispatch.pages.savedDestinations")}
           </h2>
           <div className="mt-4 space-y-3">
             {(data || []).map((destination: any) => (
@@ -129,24 +137,28 @@ export default function DestinationsRoute() {
                   <AlertDialog>
                     <AlertDialogTrigger asChild>
                       <Button variant="outline" size="sm">
-                        Delete
+                        {t("dispatch.pages.delete")}
                       </Button>
                     </AlertDialogTrigger>
                     <AlertDialogContent>
                       <AlertDialogHeader>
-                        <AlertDialogTitle>Delete destination?</AlertDialogTitle>
+                        <AlertDialogTitle>
+                          {t("dispatch.pages.deleteDestinationTitle")}
+                        </AlertDialogTitle>
                         <AlertDialogDescription>
-                          “{destination.name}” will be removed. Any saved
-                          workflows or jobs that target this destination will
-                          start failing on the next send.
+                          {t("dispatch.pages.deleteDestinationDescription", {
+                            name: destination.name,
+                          })}
                         </AlertDialogDescription>
                       </AlertDialogHeader>
                       <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogCancel>
+                          {t("dispatch.pages.cancel")}
+                        </AlertDialogCancel>
                         <AlertDialogAction
                           onClick={() => remove.mutate({ id: destination.id })}
                         >
-                          Delete
+                          {t("dispatch.pages.delete")}
                         </AlertDialogAction>
                       </AlertDialogFooter>
                     </AlertDialogContent>
@@ -157,8 +169,7 @@ export default function DestinationsRoute() {
             ))}
             {(data?.length || 0) === 0 && (
               <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
-                No destinations saved yet. Add your first Slack channel or
-                Telegram chat on the right.
+                {t("dispatch.pages.noDestinations")}
               </div>
             )}
           </div>
@@ -166,7 +177,7 @@ export default function DestinationsRoute() {
 
         <section className="rounded-2xl border bg-card p-5">
           <h2 className="text-lg font-semibold text-foreground">
-            Add destination
+            {t("dispatch.pages.addDestination")}
           </h2>
           <div className="mt-4 space-y-3">
             <Input
@@ -174,7 +185,7 @@ export default function DestinationsRoute() {
               onChange={(event) =>
                 setForm((current) => ({ ...current, name: event.target.value }))
               }
-              placeholder="Daily digest channel"
+              placeholder={t("dispatch.pages.dailyDigestChannel")}
             />
             <Select
               value={form.platform}
@@ -218,7 +229,7 @@ export default function DestinationsRoute() {
                   threadRef: event.target.value,
                 }))
               }
-              placeholder="Optional thread or topic id"
+              placeholder={t("dispatch.pages.optionalThreadOrTopicId")}
             />
             <Textarea
               value={form.notes}
@@ -228,7 +239,7 @@ export default function DestinationsRoute() {
                   notes: event.target.value,
                 }))
               }
-              placeholder="What should use this destination?"
+              placeholder={t("dispatch.pages.destinationNotes")}
             />
             <Button
               className="w-full"
@@ -243,7 +254,7 @@ export default function DestinationsRoute() {
               }
               disabled={!form.name || !form.destination}
             >
-              Save destination
+              {t("dispatch.pages.saveDestination")}
             </Button>
           </div>
         </section>

package/src/routes/pages/metrics.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState, type ReactNode } from "react";
-import { useActionQuery } from "@agent-native/core/client";
+import { useActionQuery, useT } from "@agent-native/core/client";
 import {
   IconActivity,
   IconAlertTriangle,
@@ -637,6 +637,7 @@ function RecentTable({
 }
 
 export default function MetricsRoute() {
+  const t = useT();
   const [sinceDays, setSinceDays] = useState(30);
   const { data, isLoading, error } = useActionQuery(
     "list-dispatch-usage-metrics",
@@ -657,11 +658,11 @@ export default function MetricsRoute() {
 
   return (
     <DispatchShell
-      title="Metrics"
+      title={t("dispatch.nav.metrics")}
       description={
         billing.unit === "builder-credits"
-          ? "Workspace-wide Builder.io credit spend, chat volume, user activity, and app access."
-          : "Workspace-wide LLM spend, chat volume, user activity, and app access."
+          ? t("dispatch.pages.metricsDescriptionBuilder")
+          : t("dispatch.pages.metricsDescriptionLlm")
       }
     >
       <div className="space-y-4">
@@ -677,9 +678,11 @@ export default function MetricsRoute() {
         {error ? (
           <Alert variant="destructive">
             <IconAlertTriangle className="h-4 w-4" />
-            <AlertTitle>Metrics unavailable</AlertTitle>
+            <AlertTitle>{t("dispatch.pages.metricsUnavailable")}</AlertTitle>
             <AlertDescription>
-              {error instanceof Error ? error.message : "Unable to load usage."}
+              {error instanceof Error
+                ? error.message
+                : t("dispatch.pages.unableToLoadUsage")}
             </AlertDescription>
           </Alert>
         ) : null}
@@ -696,25 +699,25 @@ export default function MetricsRoute() {
                 icon={<IconCoin size={17} />}
               />
               <MetricCard
-                label="LLM calls"
+                label={t("dispatch.pages.llmCalls")}
                 value={formatNumber(metrics.totals.calls)}
                 detail={`${formatNumber(metrics.totals.chatCalls)} chat turns`}
                 icon={<IconActivity size={17} />}
               />
               <MetricCard
-                label="Active users"
+                label={t("dispatch.pages.activeUsers")}
                 value={formatNumber(metrics.totals.activeUsers)}
                 detail={`${formatNumber(metrics.access.totalUsers)} users with access`}
                 icon={<IconUsersGroup size={17} />}
               />
               <MetricCard
-                label="Workspace apps"
+                label={t("dispatch.pages.workspaceAppsStat")}
                 value={formatNumber(metrics.totals.workspaceApps)}
                 detail={`${formatNumber(metrics.byApp.length)} with usage`}
                 icon={<IconApps size={17} />}
               />
               <MetricCard
-                label="Chat threads"
+                label={t("dispatch.pages.chatThreads")}
                 value={formatNumber(metrics.totals.chatThreads)}
                 detail={`${formatNumber(metrics.totals.chatMessages)} messages`}
                 icon={<IconMessages size={17} />}

package/src/routes/pages/new-app.tsx

@@ -1,4 +1,4 @@
-import { NewWorkspaceAppFlow } from "@agent-native/core/client";
+import { NewWorkspaceAppFlow, useT } from "@agent-native/core/client";
 import { DispatchShell } from "@/components/dispatch-shell";
 
 export function meta() {
@@ -6,10 +6,11 @@ export function meta() {
 }
 
 export default function NewAppRoute() {
+  const t = useT();
   return (
     <DispatchShell
-      title="New App"
-      description="Create a workspace app from a prompt and apply the workspace vault policy."
+      title={t("dispatch.pages.newApp")}
+      description={t("dispatch.pages.newAppDescription")}
     >
       <NewWorkspaceAppFlow sourceApp="dispatch" className="px-0 py-0" />
     </DispatchShell>