@agent-native/dispatch 0.12.1 → 0.12.3

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>