@agent-native/core 0.76.5 → 0.76.6

package/corpus/core/src/client/extensions/ExtensionsListPage.tsx

@@ -16,6 +16,7 @@ import { AgentToggleButton } from "../AgentPanel.js";
 import { NotificationsBell } from "../notifications/NotificationsBell.js";
 import { sendToAgentChat } from "../agent-chat.js";
 import { PromptComposer } from "../composer/PromptComposer.js";
+import { useT } from "../i18n.js";
 import {
   Popover,
   PopoverContent,
@@ -47,7 +48,10 @@ interface Extension {
 
 let lastCreateSubmission: { prompt: string; at: number } | null = null;
 
-function submitCreateTool(prompt: string) {
+function submitCreateTool(
+  prompt: string,
+  messageForPrompt: (prompt: string) => string,
+) {
   const trimmed = prompt.trim();
   if (!trimmed) return;
   const now = Date.now();
@@ -60,7 +64,7 @@ function submitCreateTool(prompt: string) {
   }
   lastCreateSubmission = { prompt: trimmed, at: now };
   sendToAgentChat({
-    message: `Create an extension: ${trimmed}`,
+    message: messageForPrompt(trimmed),
     submit: true,
     openSidebar: true,
     newTab: true,
@@ -68,23 +72,29 @@ function submitCreateTool(prompt: string) {
 }
 
 function CreateToolInput({ className }: { className?: string }) {
+  const t = useT();
   return (
     <div className={cn("flex flex-col gap-2 text-left", className)}>
       <p className="px-1 text-sm font-medium text-foreground">
-        What should it do?
+        {t("extensions.whatShouldItDo")}
       </p>
       <PromptComposer
         autoFocus
         className="text-left"
-        placeholder="A todo list, API dashboard, calculator..."
+        placeholder={t("extensions.createPlaceholder")}
         draftScope="extensions:create"
-        onSubmit={(text) => submitCreateTool(text)}
+        onSubmit={(text) =>
+          submitCreateTool(text, (prompt) =>
+            t("extensions.createPrompt", { prompt }),
+          )
+        }
       />
     </div>
   );
 }
 
 export function ExtensionsListPage() {
+  const t = useT();
   const [showCreate, setShowCreate] = useState(false);
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
   const [deletingId, setDeletingId] = useState<string | null>(null);
@@ -134,7 +144,9 @@ export function ExtensionsListPage() {
       : (extensions ?? []);
 
   const handleCreate = (text: string) => {
-    submitCreateTool(text);
+    submitCreateTool(text, (prompt) =>
+      t("extensions.createPrompt", { prompt }),
+    );
     setShowCreate(false);
   };
 
@@ -176,11 +188,11 @@ export function ExtensionsListPage() {
           <Link
             to="/"
             className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
-            aria-label="Back to app"
+            aria-label={t("extensions.backToApp")}
           >
             <IconArrowLeft className="h-4 w-4" />
           </Link>
-          <h1 className="text-sm font-semibold">Extensions</h1>
+          <h1 className="text-sm font-semibold">{t("extensions.title")}</h1>
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -199,7 +211,9 @@ export function ExtensionsListPage() {
             ) : (
               <IconEyeOff className="h-4 w-4" />
             )}
-            {showGloballyHidden ? "Hiding shown" : "Show hidden"}
+            {showGloballyHidden
+              ? t("extensions.hiddenShown")
+              : t("extensions.showHidden")}
           </button>
           <Popover open={showCreate} onOpenChange={setShowCreate}>
             <PopoverTrigger asChild>
@@ -208,7 +222,7 @@ export function ExtensionsListPage() {
                 className="inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
               >
                 <IconPlus className="h-4 w-4" />
-                New Extension
+                {t("extensions.newExtension")}
               </button>
             </PopoverTrigger>
             <PopoverContent
@@ -217,11 +231,11 @@ export function ExtensionsListPage() {
               className="w-[420px] p-3"
             >
               <p className="px-1 pb-2 text-sm font-semibold text-foreground">
-                New extension
+                {t("extensions.newExtensionTitle")}
               </p>
               <PromptComposer
                 autoFocus
-                placeholder="Describe what you'd like to build..."
+                placeholder={t("extensions.buildPlaceholder")}
                 draftScope="extensions:create-popover"
                 onSubmit={handleCreate}
               />
@@ -253,10 +267,10 @@ export function ExtensionsListPage() {
                 <IconTool className="h-10 w-10 text-muted-foreground/40" />
                 <div className="space-y-1.5">
                   <p className="text-base font-semibold text-foreground">
-                    Create your first extension
+                    {t("extensions.emptyTitle")}
                   </p>
                   <p className="mx-auto max-w-sm text-sm text-muted-foreground">
-                    Describe a small app and the agent will build it.
+                    {t("extensions.emptyDescription")}
                   </p>
                 </div>
               </div>
@@ -287,7 +301,7 @@ export function ExtensionsListPage() {
                       {extension.globallyHidden && (
                         <IconEyeOff
                           className="h-3.5 w-3.5 shrink-0 text-muted-foreground"
-                          aria-label="Hidden from everyone"
+                          aria-label={t("extensions.hiddenFromEveryone")}
                         />
                       )}
                       <span className="truncate">{extension.name}</span>
@@ -299,7 +313,7 @@ export function ExtensionsListPage() {
                     )}
                     {isLocalExtension && (
                       <p className="mt-3 inline-flex rounded-md border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                        Local file
+                        {t("extensions.localFile")}
                       </p>
                     )}
                   </Link>
@@ -313,7 +327,9 @@ export function ExtensionsListPage() {
                       <button
                         type="button"
                         className="absolute right-3 top-3 inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground opacity-0 hover:bg-accent hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring group-hover:opacity-100"
-                        aria-label={`Options for ${extension.name}`}
+                        aria-label={t("extensions.optionsFor", {
+                          name: extension.name,
+                        })}
                       >
                         <IconDotsVertical className="h-4 w-4" />
                       </button>
@@ -333,12 +349,12 @@ export function ExtensionsListPage() {
                             {extension.globallyHidden ? (
                               <>
                                 <IconEye className="h-3.5 w-3.5" />
-                                Unhide for everyone
+                                {t("extensions.unhideEveryone")}
                               </>
                             ) : (
                               <>
                                 <IconEyeOff className="h-3.5 w-3.5" />
-                                Hide from everyone
+                                {t("extensions.hideEveryone")}
                               </>
                             )}
                           </button>
@@ -346,25 +362,24 @@ export function ExtensionsListPage() {
                       )}
                       {isLocalExtension ? (
                         <div className="p-3 text-[12px] text-muted-foreground">
-                          This extension is backed by{" "}
-                          <span className="font-mono text-foreground">
-                            {extension.source?.entryPath ?? "local files"}
-                          </span>
-                          . Edit or remove it from the workspace.
+                          {t("extensions.localFileDescription", {
+                            entryPath:
+                              extension.source?.entryPath ?? "local files",
+                          })}
                         </div>
                       ) : (
                         <div className="p-3">
                           <p className="text-[12px]">
                             {extension.canDelete === false
-                              ? "Remove "
-                              : "Delete "}
-                            <span className="font-medium">
-                              {extension.name}
-                            </span>
-                            ?
+                              ? t("extensions.removeQuestion", {
+                                  name: extension.name,
+                                })
+                              : t("extensions.deleteQuestion", {
+                                  name: extension.name,
+                                })}{" "}
                             {extension.canDelete === false
-                              ? " This hides it from your Extensions list without deleting it for anyone else."
-                              : " This removes it everywhere it is shared."}
+                              ? t("extensions.hideForYouDescription")
+                              : t("extensions.removeEverywhereDescription")}
                           </p>
                           <div className="mt-3 flex justify-end gap-1">
                             <button
@@ -372,7 +387,7 @@ export function ExtensionsListPage() {
                               onClick={() => setConfirmDeleteId(null)}
                               className="rounded-md px-2 py-1 text-[12px] hover:bg-accent"
                             >
-                              Cancel
+                              {t("extensions.cancel")}
                             </button>
                             <button
                               type="button"
@@ -386,11 +401,11 @@ export function ExtensionsListPage() {
                               <IconTrash className="h-3.5 w-3.5" />
                               {deletingId === extension.id
                                 ? extension.canDelete === false
-                                  ? "Removing..."
-                                  : "Deleting..."
+                                  ? t("extensions.removing")
+                                  : t("extensions.deleting")
                                 : extension.canDelete === false
-                                  ? "Remove"
-                                  : "Delete"}
+                                  ? t("extensions.remove")
+                                  : t("extensions.delete")}
                             </button>
                           </div>
                         </div>

package/corpus/core/src/client/i18n.tsx

@@ -461,12 +461,97 @@ export function useLocale(): LocaleContextValue {
   return value;
 }
 
+const CORE_FALLBACK_MESSAGES: Record<string, string> = {
+  "runsTray.runs": "Runs",
+  "runsTray.agentRuns": "Agent runs",
+  "runsTray.activeRun_one": "{{count}} active run",
+  "runsTray.activeRun_other": "{{count}} active runs",
+  "runsTray.failedRun_one": "{{count}} failed run",
+  "runsTray.failedRun_other": "{{count}} failed runs",
+  "runsTray.recentRuns": "Recent runs",
+  "runsTray.noRecentRuns": "No recent runs",
+  "runsTray.ariaAgentRuns": "Agent runs, {{label}}",
+  "runsTray.summaryRunning": "{{activeCount}} running",
+  "runsTray.summaryRunningRecent":
+    "{{activeCount}} running · {{terminalCount}} recent",
+  "runsTray.summaryRecent_one": "{{count}} recent run",
+  "runsTray.summaryRecent_other": "{{count}} recent runs",
+  "runsTray.noTrackedWorkYet": "No tracked work yet",
+  "runsTray.emptyDescription":
+    "Background agent work will appear here while it runs and after it finishes.",
+  "runsTray.open": "Open",
+  "runsTray.stopRun": "Stop {{title}}",
+  "runsTray.hideRun": "Hide {{title}}",
+  "runsTray.statusRunning": "Running",
+  "runsTray.statusDone": "Done",
+  "runsTray.statusFailed": "Failed",
+  "runsTray.statusStopped": "Stopped",
+  "runsTray.updatedJustNow": "Updated just now",
+  "runsTray.finishedJustNow": "Finished just now",
+  "runsTray.updatedMinutes": "Updated {{count}}m ago",
+  "runsTray.finishedMinutes": "Finished {{count}}m ago",
+  "runsTray.updatedHours": "Updated {{count}}h ago",
+  "runsTray.finishedHours": "Finished {{count}}h ago",
+  "runsTray.updatedDate": "Updated {{date}}",
+  "runsTray.finishedDate": "Finished {{date}}",
+  "codeRequired.fallbackDetail":
+    "Edit locally or use Builder.io to edit this code in the cloud and continue customizing the app any way you like.",
+  "codeRequired.defaultFeature": "Make the requested code changes to this app",
+  "codeRequired.branchError": "Failed to create branch",
+  "codeRequired.title": "Code changes required",
+  "codeRequired.subtitleWithFeature":
+    '"{{feature}}" creates or modifies source code, which needs Desktop or Builder from this surface.',
+  "codeRequired.subtitle":
+    "This action creates or modifies source code, which needs Desktop or Builder from this surface.",
+  "codeRequired.desktopTitle": "Use Agent Native Desktop",
+  "codeRequired.desktopDescription":
+    "Open the project in the desktop app to enable source edits and CLI access.",
+  "codeRequired.builderAgentTitle": "Use Builder.io Agent",
+  "codeRequired.builderAgentDescription":
+    "Let our cloud agent make the changes for you. You'll get a link to preview and deploy.",
+  "codeRequired.codeChangeTitle": "This requires a code change",
+  "codeRequired.codeChangeBadge": "Code change",
+  "codeRequired.connectBuilderTitle": "Connect Builder.io",
+  "codeRequired.connectBuilderDescription":
+    "Connect Builder to enable cloud-based code changes from this app.",
+  "codeRequired.setupRequired": "Setup required",
+  "codeRequired.branchCreated": "Branch created",
+  "codeRequired.close": "Close",
+};
+
+function interpolateFallbackMessage(
+  template: string,
+  options?: Record<string, unknown>,
+) {
+  return template.replace(/\{\{(\w+)\}\}/g, (_, name: string) => {
+    const value = options?.[name];
+    return value == null ? "" : String(value);
+  });
+}
+
+function fallbackMessage(key: string, options?: Record<string, unknown>) {
+  const count = Number(options?.count);
+  const pluralKey =
+    Number.isFinite(count) && count === 1 ? `${key}_one` : `${key}_other`;
+  const template =
+    CORE_FALLBACK_MESSAGES[pluralKey] ?? CORE_FALLBACK_MESSAGES[key];
+  return template ? interpolateFallbackMessage(template, options) : key;
+}
+
 export function useT() {
-  return useTranslation().t;
+  const { t } = useTranslation();
+  return useCallback(
+    (key: string, options?: Record<string, unknown>) => {
+      const translated = t(key, options);
+      return translated === key ? fallbackMessage(key, options) : translated;
+    },
+    [t],
+  );
 }
 
 export function useFormatters() {
-  const { locale } = useLocale();
+  const context = useContext(LocaleContext);
+  const locale = context?.locale ?? DEFAULT_LOCALE;
   return useMemo(
     () => ({
       formatDate(

package/corpus/core/src/client/integrations/IntegrationCard.tsx

@@ -16,6 +16,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
+import { useT } from "../i18n.js";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const platformIcons: Record<string, React.ComponentType<any>> = {
@@ -47,6 +48,7 @@ export function IntegrationCard({
   status: IntegrationStatus;
   onRefresh: () => void;
 }) {
+  const t = useT();
   const [expanded, setExpanded] = useState(false);
   const [toggling, setToggling] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -79,9 +81,7 @@ export function IntegrationCard({
       );
     } catch (err) {
       setToggleError(
-        err instanceof Error
-          ? err.message
-          : "Network error reaching the server",
+        err instanceof Error ? err.message : t("integrations.networkError"),
       );
     } finally {
       setToggling(false);
@@ -124,7 +124,7 @@ export function IntegrationCard({
           {status.webhookUrl && (
             <div>
               <div className="text-[10px] font-medium text-muted-foreground mb-1">
-                Webhook URL
+                {t("integrations.webhookUrl")}
               </div>
               <div className="flex items-center gap-1">
                 <code className="flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground">
@@ -143,7 +143,9 @@ export function IntegrationCard({
                       )}
                     </button>
                   </TooltipTrigger>
-                  <TooltipContent>Copy webhook URL</TooltipContent>
+                  <TooltipContent>
+                    {t("integrations.copyWebhookUrl")}
+                  </TooltipContent>
                 </Tooltip>
               </div>
             </div>
@@ -159,8 +161,7 @@ export function IntegrationCard({
 
           {!status.configured && !status.error && (
             <p className="text-[10px] text-muted-foreground">
-              Not configured. Set the required secrets to enable this
-              integration.
+              {t("integrations.notConfigured")}
             </p>
           )}
 
@@ -170,7 +171,11 @@ export function IntegrationCard({
               disabled={toggling}
               className="w-full rounded-md border border-border px-2 py-1 text-[11px] font-medium text-foreground hover:bg-accent/50 disabled:opacity-50"
             >
-              {toggling ? "..." : status.enabled ? "Disable" : "Enable"}
+              {toggling
+                ? t("integrations.toggling")
+                : status.enabled
+                  ? t("integrations.disable")
+                  : t("integrations.enable")}
             </button>
           )}
         </div>

package/corpus/core/src/client/integrations/IntegrationsPanel.tsx

@@ -23,6 +23,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip.js";
+import { useT } from "../i18n.js";
 
 // ─── Platform config ─────────────────────────────────────────────────────────
 
@@ -174,6 +175,7 @@ function IntegrationDetail({
   onBack: () => void;
   onRefresh: () => void;
 }) {
+  const t = useT();
   const [toggling, setToggling] = useState(false);
   const [copied, setCopied] = useState(false);
   const [toggleError, setToggleError] = useState<string | null>(null);
@@ -205,9 +207,7 @@ function IntegrationDetail({
       );
     } catch (err) {
       setToggleError(
-        err instanceof Error
-          ? err.message
-          : "Network error reaching the server",
+        err instanceof Error ? err.message : t("integrations.networkError"),
       );
     } finally {
       setToggling(false);
@@ -244,7 +244,7 @@ function IntegrationDetail({
         className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2"
       >
         <IconChevronLeft size={12} className="rtl:-scale-x-100" />
-        Back
+        {t("integrations.back")}
       </button>
 
       <div className="flex items-center gap-2 mb-2">
@@ -264,11 +264,12 @@ function IntegrationDetail({
           <div className="flex items-center justify-between gap-2">
             <div className="min-w-0">
               <div className="text-[10px] font-medium text-foreground">
-                Agent engine required
+                {t("integrations.agentEngineRequired")}
               </div>
               <p className="mt-0.5 text-[10px] leading-relaxed text-muted-foreground">
-                Connect Builder.io or an LLM key before {platform.label} can
-                answer.
+                {t("integrations.agentEngineDescription", {
+                  platform: platform.label,
+                })}
               </p>
             </div>
             <button
@@ -276,7 +277,7 @@ function IntegrationDetail({
               onClick={handleOpenLlmSettings}
               className="shrink-0 rounded border border-border bg-background px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground"
             >
-              Open LLM
+              {t("integrations.openLlm")}
             </button>
           </div>
         </div>
@@ -285,7 +286,7 @@ function IntegrationDetail({
       {/* Setup steps */}
       <div className="mb-3">
         <div className="text-[10px] font-medium text-muted-foreground mb-1.5">
-          Setup
+          {t("integrations.setup")}
         </div>
         <ol className="space-y-1">
           {platform.setupSteps.map((step, i) => (
@@ -305,7 +306,7 @@ function IntegrationDetail({
       {serviceAccountEmail && (
         <div className="mb-3">
           <div className="text-[10px] font-medium text-muted-foreground mb-1">
-            Share documents with
+            {t("integrations.shareDocumentsWith")}
           </div>
           <div className="flex items-center gap-1">
             <code className="flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground">
@@ -320,7 +321,9 @@ function IntegrationDetail({
                   {copied ? <IconCheck size={12} /> : <IconCopy size={12} />}
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Copy service account email</TooltipContent>
+              <TooltipContent>
+                {t("integrations.copyServiceAccountEmail")}
+              </TooltipContent>
             </Tooltip>
           </div>
         </div>
@@ -330,7 +333,7 @@ function IntegrationDetail({
       {platform.envVars.length > 0 && (
         <div className="mb-3">
           <div className="text-[10px] font-medium text-muted-foreground mb-1">
-            Required secrets
+            {t("integrations.requiredSecrets")}
           </div>
           <div className="space-y-0.5">
             {platform.envVars.map((v) => (
@@ -349,7 +352,7 @@ function IntegrationDetail({
           </div>
           {!isConfigured && (
             <p className="text-[10px] text-amber-500 mt-1">
-              Set these in your .env file or environment to connect.
+              {t("integrations.envHelp")}
             </p>
           )}
         </div>
@@ -359,7 +362,7 @@ function IntegrationDetail({
       {serverStatus?.webhookUrl && !platform.isClient && (
         <div className="mb-3">
           <div className="text-[10px] font-medium text-muted-foreground mb-1">
-            Webhook URL
+            {t("integrations.webhookUrl")}
           </div>
           <div className="flex items-center gap-1">
             <code className="flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground">
@@ -374,7 +377,7 @@ function IntegrationDetail({
                   {copied ? <IconCheck size={12} /> : <IconCopy size={12} />}
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Copy</TooltipContent>
+              <TooltipContent>{t("integrations.copy")}</TooltipContent>
             </Tooltip>
           </div>
         </div>
@@ -388,7 +391,7 @@ function IntegrationDetail({
           rel="noopener noreferrer"
           className="flex items-center gap-1 text-[10px] text-blue-400 hover:text-blue-300 mb-3"
         >
-          Documentation
+          {t("integrations.documentation")}
           <IconExternalLink size={10} />
         </a>
       )}
@@ -404,15 +407,18 @@ function IntegrationDetail({
               : "border-green-600/50 text-green-400 hover:bg-green-900/20"
           }`}
         >
-          {toggling ? "..." : isEnabled ? "Disable" : "Enable"}
+          {toggling
+            ? t("integrations.toggling")
+            : isEnabled
+              ? t("integrations.disable")
+              : t("integrations.enable")}
         </button>
       )}
 
       {/* Status for client integrations */}
       {platform.isClient && (
         <div className="rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground">
-          This agent's A2A endpoint is automatically available. No configuration
-          needed.
+          {t("integrations.clientAvailable")}
         </div>
       )}
 
@@ -464,6 +470,7 @@ function AddIntegrationPicker({
 // ─── Main panel ──────────────────────────────────────────────────────────────
 
 export function IntegrationsPanel() {
+  const t = useT();
   const { statuses, loading, refetch } = useIntegrationStatus();
   const [selectedPlatform, setSelectedPlatform] = useState<PlatformInfo | null>(
     null,
@@ -499,10 +506,10 @@ export function IntegrationsPanel() {
           className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2"
         >
           <IconChevronLeft size={12} className="rtl:-scale-x-100" />
-          Back
+          {t("integrations.back")}
         </button>
         <div className="text-[10px] font-medium text-muted-foreground mb-1.5">
-          Add a chat integration
+          {t("integrations.addChatIntegration")}
         </div>
         <AddIntegrationPicker
           connectedIds={connectedIds}
@@ -520,10 +527,10 @@ export function IntegrationsPanel() {
       <div className="flex items-center justify-between mb-1.5">
         <div>
           <div className="text-xs font-medium text-foreground">
-            Chat Integrations
+            {t("integrations.chatIntegrations")}
           </div>
           <div className="text-[10px] text-muted-foreground">
-            Talk to this agent from other platforms
+            {t("integrations.chatIntegrationsDescription")}
           </div>
         </div>
         <Tooltip>
@@ -535,7 +542,7 @@ export function IntegrationsPanel() {
               <IconPlus size={12} />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Add integration</TooltipContent>
+          <TooltipContent>{t("integrations.addIntegration")}</TooltipContent>
         </Tooltip>
       </div>
 
@@ -551,11 +558,10 @@ export function IntegrationsPanel() {
             className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent/30"
           >
             <IconPlus size={12} className="shrink-0" />
-            Add integration
+            {t("integrations.addIntegration")}
           </button>
           <div className="rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground">
-            For a central Slack or Telegram entrypoint that can route work
-            across multiple apps, use the{" "}
+            {t("integrations.dispatchEntrypoint")}{" "}
             <a
               href="https://dispatch.agent-native.com"
               target="_blank"
@@ -599,9 +605,7 @@ export function IntegrationsPanel() {
             );
           })}
           <div className="rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground">
-            Need one shared messaging surface for your workspace? Connect Slack
-            or Telegram to a dispatch app and let it delegate to other agents
-            over A2A.
+            {t("integrations.sharedMessaging")}
           </div>
         </div>
       )}