@12-apps/mcp 3.5.1 → 3.7.0

package/src/react/ai-status-board.tsx

@@ -1,11 +1,13 @@
 "use client";
 
+import { useMemo } from "react";
+import type { AiStatusBoardCopy } from "./copy";
 import AddLinkOutlinedIcon from "@mui/icons-material/AddLinkOutlined";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import LinkOffOutlinedIcon from "@mui/icons-material/LinkOffOutlined";
 import MenuBookOutlinedIcon from "@mui/icons-material/MenuBookOutlined";
 
-import { ConfirmButton } from "@12-apps/ui/feedback/ConfirmAction";
+import { createConfirmButton } from "@12-apps/ui/feedback/ConfirmAction";
 import { Button } from "@12-apps/ui/form/Button";
 import { Box } from "@12-apps/ui/mui/Box";
 import { Stack } from "@12-apps/ui/mui/Stack";
@@ -33,7 +35,7 @@ export interface HostStatus {
  * The right-hand side of a CONNECTED box: the green pill, then the two things
  * the pill alone left the owner unable to do.
  *
- * "Instruções" exists because the setup steps were reachable ONLY from a RED
+ * "{copy.instructions}" exists because the setup steps were reachable ONLY from a RED
  * card's "Conectar" — so on an all-green board there was no way to re-read how
  * any of them was connected, which is exactly when someone re-doing the setup on
  * a second machine needs them. It re-enters the same flow that button does.
@@ -45,11 +47,20 @@ function ConnectedControls({
   host,
   onConnect,
   onDisconnect,
+  copy,
 }: {
   host: AiHostGuide;
   onConnect: (hostId: string) => void;
   onDisconnect?: DisconnectHandler;
+  copy: AiStatusBoardCopy;
 }): React.JSX.Element {
+  // Built from the copy rather than at module scope: `createConfirmButton`
+  // takes the words, and they only arrive as a prop. Memoised so the wrapped
+  // component keeps its identity across renders and React does not remount it.
+  const DisconnectButton = useMemo(
+    () => createConfirmButton(copy.confirmAction, copy.disconnectError),
+    [copy.confirmAction, copy.disconnectError],
+  );
   return (
     <Stack
       direction="row"
@@ -70,7 +81,7 @@ function ConnectedControls({
         }}
       >
         <Text variant="caption" weight="bold" as="span">
-          Conectado
+          {copy.connected}
         </Text>
       </Box>
       <Button
@@ -80,27 +91,27 @@ function ConnectedControls({
         data-testid={`ai-status-instructions-${host.id}`}
       >
         <MenuBookOutlinedIcon sx={{ fontSize: 16, mr: 0.5 }} />
-        Instruções
+        {copy.instructions}
       </Button>
       {onDisconnect ? (
-        <ConfirmButton
+        <DisconnectButton
           variant="outline"
           color="danger"
           size="sm"
           onClick={() => onDisconnect(host.id)}
           confirm={{
-            title: "Desconectar o assistente?",
+            title: copy.disconnectTitle,
             entityName: host.label,
             description:
-              "Ele perde o acesso à sua loja na hora. Para voltar a usar, será preciso conectar de novo.",
-            confirmText: "Desconectar",
+              copy.disconnectBody,
+            confirmText: copy.disconnectConfirm,
             dataTestId: `ai-status-disconnect-confirm-${host.id}`,
           }}
           data-testid={`ai-status-disconnect-${host.id}`}
         >
           <LinkOffOutlinedIcon sx={{ fontSize: 16, mr: 0.5 }} />
-          Desconectar
-        </ConfirmButton>
+          {copy.disconnect}
+        </DisconnectButton>
       ) : null}
     </Stack>
   );
@@ -111,10 +122,12 @@ function StatusBox({
   status,
   onConnect,
   onDisconnect,
+  copy,
 }: {
   status: HostStatus;
   onConnect: (hostId: string) => void;
   onDisconnect?: DisconnectHandler;
+  copy: AiStatusBoardCopy;
 }): React.JSX.Element {
   const { host, connected, detail } = status;
   return (
@@ -141,11 +154,11 @@ function StatusBox({
           {connected ? <CheckCircleIcon sx={{ fontSize: 18, color: "success.main" }} /> : null}
         </Stack>
         <Text variant="caption" as="p" color="secondary">
-          {connected ? (detail ?? "Conectado") : "Ainda não conectado"}
+          {connected ? (detail ?? copy.connected) : copy.notConnected}
         </Text>
       </Box>
       {connected ? (
-        <ConnectedControls host={host} onConnect={onConnect} onDisconnect={onDisconnect} />
+        <ConnectedControls copy={copy} host={host} onConnect={onConnect} onDisconnect={onDisconnect} />
       ) : (
         <Button
           variant="outline"
@@ -169,7 +182,7 @@ function StatusBox({
  * `announceAiConnection`), so several assistants can show connected at once.
  *
  * A connected box carries two more controls, because the pill it used to show
- * alone was a dead end in both directions: "Instruções" re-enters the host's
+ * alone was a dead end in both directions: "{copy.instructions}" re-enters the host's
  * setup steps (previously reachable only from a RED card, so an all-green board
  * hid them entirely), and "Desconectar" — when the app passes `onDisconnect` —
  * revokes access, which nothing in the UI could do at all.
@@ -178,20 +191,22 @@ export function AiStatusBoard({
   statuses,
   onConnect,
   onDisconnect,
+  copy,
 }: {
   statuses: readonly HostStatus[];
   onConnect: (hostId: string) => void;
   /** Revoke this host's access. Omit to render a read-only board. */
   onDisconnect?: DisconnectHandler;
+  copy: AiStatusBoardCopy;
 }): React.JSX.Element {
   return (
     <Stack spacing={2} data-testid="ai-status-board">
       <Box>
         <Text variant="heading" size="sm" as="h2">
-          Assistentes conectados
+          {copy.boardTitle}
         </Text>
         <Text variant="caption" as="p" color="secondary">
-          Em verde os que já operam a sua loja; em vermelho os que faltam conectar.
+          {copy.boardCaption}
         </Text>
       </Box>
       <Box
@@ -202,7 +217,7 @@ export function AiStatusBoard({
         }}
       >
         {statuses.map((status) => (
-          <StatusBox
+          <StatusBox copy={copy}
             key={status.host.id}
             status={status}
             onConnect={onConnect}

package/src/react/ai-steps.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { McpAiCopy } from "./copy";
 import { type GuidedNav, type GuidedStep } from "@12-apps/onboarding";
 
 import { providerForHostId, type AiHostGuide } from "../guide";
@@ -24,11 +25,13 @@ export function StatusBoard({
   connections,
   hosts,
   onDisconnect,
+  copy,
 }: {
   nav: GuidedNav;
   connections: readonly AiConnection[];
   hosts: readonly AiHostGuide[];
   onDisconnect?: DisconnectHandler;
+  copy: McpAiCopy;
 }): React.JSX.Element {
   const legacyHostId = (nav.data.connectedHost ?? nav.data.selectedHost) as string | undefined;
 
@@ -43,7 +46,7 @@ export function StatusBoard({
     return {
       host,
       connected: connection !== null,
-      detail: connection ? activeAgo(connection.lastActiveAt) : undefined,
+      detail: connection ? activeAgo(connection.lastActiveAt, copy.summary) : undefined,
     };
   });
 
@@ -78,19 +81,20 @@ export function StatusBoard({
     : undefined;
 
   return (
-    <AiStatusBoard statuses={statuses} onConnect={goToConnect} onDisconnect={disconnect} />
+    <AiStatusBoard copy={copy.statusBoard} statuses={statuses} onConnect={goToConnect} onDisconnect={disconnect} />
   );
 }
 
 /** The first step (host picker) — picking a card advances to the right path. */
-function selectStep(hosts: readonly AiHostGuide[]): GuidedStep {
+function selectStep(hosts: readonly AiHostGuide[], copy: McpAiCopy): GuidedStep {
   return {
     id: "select",
-    label: "Escolher",
+    label: copy.flow.steps.select,
     render: (nav: GuidedNav) => (
       <HostSelectStep
         hosts={hosts}
         selectedId={(nav.data.selectedHost as string | undefined) ?? null}
+        copy={copy.hostSelect}
         onSelect={(hostId) =>
           nav.goTo(hosts.find((h) => h.id === hostId)?.pluginUrl ? "install" : "copy", {
             selectedHost: hostId,
@@ -102,11 +106,11 @@ function selectStep(hosts: readonly AiHostGuide[]): GuidedStep {
 }
 
 /** The Copiar-URL step, shared by every manual flow. */
-function copyStep(endpointUrl: string): GuidedStep {
+function copyStep(endpointUrl: string, copy: McpAiCopy): GuidedStep {
   return {
     id: "copy",
-    label: "Copiar URL",
-    render: (nav: GuidedNav) => <CopyUrlStep nav={nav} endpointUrl={endpointUrl} />,
+    label: copy.flow.steps.copyUrl,
+    render: (nav: GuidedNav) => <CopyUrlStep copy={copy} nav={nav} endpointUrl={endpointUrl} />,
   };
 }
 
@@ -120,44 +124,70 @@ function manualMiddle(
   hosts: readonly AiHostGuide[],
   endpointUrl: string,
   connectPrompt: string,
+  copy: McpAiCopy,
 ): GuidedStep[] {
   if (host.configureStages && host.configureStages.length > 0) {
     return [
-      copyStep(endpointUrl),
+      copyStep(endpointUrl, copy),
       ...host.configureStages.map((stage) => ({
         id: stage.id,
         label: stage.label,
         render: (nav: GuidedNav) => (
-          <ConfigureStageStep nav={nav} host={resolveHost(hosts, nav.data.selectedHost)} stage={stage} />
+          <ConfigureStageStep
+            nav={nav}
+            host={resolveHost(hosts, nav.data.selectedHost)}
+            stage={stage}
+            copy={copy}
+          />
         ),
       })),
     ];
   }
   return [
-    copyStep(endpointUrl),
+    copyStep(endpointUrl, copy),
     {
       id: "configure",
-      label: "Configurar",
-      render: (nav: GuidedNav) => <ConfigureStep nav={nav} host={resolveHost(hosts, nav.data.selectedHost)} />,
+      label: copy.flow.steps.configure,
+      render: (nav: GuidedNav) => (
+        <ConfigureStep
+          nav={nav}
+          host={resolveHost(hosts, nav.data.selectedHost)}
+          copy={copy}
+        />
+      ),
     },
     {
       id: "connect",
-      label: "Conectar",
+      label: copy.flow.steps.connect,
       render: (nav: GuidedNav) => (
-        <ConnectStep nav={nav} host={resolveHost(hosts, nav.data.selectedHost)} connectPrompt={connectPrompt} />
+        <ConnectStep
+          nav={nav}
+          host={resolveHost(hosts, nav.data.selectedHost)}
+          connectPrompt={connectPrompt}
+          copy={copy}
+        />
       ),
     },
   ];
 }
 
 /** The single middle step for the simplified plugin flow: install. */
-function simpleMiddle(hosts: readonly AiHostGuide[], connectPrompt: string): GuidedStep[] {
+function simpleMiddle(
+  hosts: readonly AiHostGuide[],
+  connectPrompt: string,
+  copy: McpAiCopy,
+): GuidedStep[] {
   return [
     {
       id: "install",
-      label: "Instalar",
+      label: copy.flow.steps.install,
       render: (nav: GuidedNav) => (
-        <InstallStep nav={nav} host={resolveHost(hosts, nav.data.selectedHost)} connectPrompt={connectPrompt} />
+        <InstallStep
+          nav={nav}
+          host={resolveHost(hosts, nav.data.selectedHost)}
+          connectPrompt={connectPrompt}
+          copy={copy}
+        />
       ),
     },
   ];
@@ -176,17 +206,24 @@ export function buildFlowSteps(opts: {
   connectPrompt: string;
   connections: readonly AiConnection[];
   onRetest: () => void;
+  copy: McpAiCopy;
 }): GuidedStep[] {
-  const { host, hosts, endpointUrl, connectPrompt, connections, onRetest } = opts;
+  const { host, hosts, endpointUrl, connectPrompt, connections, onRetest, copy } = opts;
   const middle = host.pluginUrl
-    ? simpleMiddle(hosts, connectPrompt)
-    : manualMiddle(host, hosts, endpointUrl, connectPrompt);
+    ? simpleMiddle(hosts, connectPrompt, copy)
+    : manualMiddle(host, hosts, endpointUrl, connectPrompt, copy);
   const confirm: GuidedStep = {
     id: "confirm",
-    label: "Confirmar",
+    label: copy.flow.steps.confirm,
     render: (nav: GuidedNav) => (
-      <ConfirmStep nav={nav} connections={connections} hosts={hosts} onRetest={onRetest} />
+      <ConfirmStep
+        nav={nav}
+        connections={connections}
+        hosts={hosts}
+        onRetest={onRetest}
+        copy={copy}
+      />
     ),
   };
-  return [selectStep(hosts), ...middle, confirm];
+  return [selectStep(hosts, copy), ...middle, confirm];
 }

package/src/react/copy.ts

@@ -0,0 +1,165 @@
+import type { ConfirmActionCopy } from "@12-apps/ui/copy";
+/**
+ * Every word the AI-integration screens render, as REQUIRED host config
+ * (FUT-760).
+ *
+ * These components used to take `capabilities` / `permissionModel` / `hosts` as
+ * OPTIONAL props defaulting to this package's own pt-BR, and to compile the rest
+ * of their sentences in outright. `guide.ts` even said so — "these are the
+ * shared defaults" — which is the anti-pattern named exactly: a host that
+ * configured nothing shipped one product's Portuguese, and nothing failed to
+ * say so.
+ *
+ * Split per screen rather than one flat map, because three of them
+ * (`AiLanding`, `AiCapabilities`, `AiStatusBoard`, `HostSelectStep`) are
+ * exported standalone and a host mounting only one should not have to supply
+ * words for screens it never renders.
+ */
+
+/** The marketing block's headline and its supporting line. */
+export interface AiCapabilitiesCopy {
+  heading: string;
+  subheading: string;
+}
+
+/** One reassurance chip on the landing: an icon's label and its caption. */
+export interface AiTrustPoint {
+  /** Stable id — maps to the icon in the component. */
+  id: string;
+  label: string;
+  caption: string;
+}
+
+export interface AiLandingCopy {
+  /** Small line above the headline. */
+  eyebrow: string;
+  /** The headline's second half, after the assistant names. */
+  titleTail: string;
+  /** The paragraph under the headline. */
+  lede: string;
+  /** The reassurance strip. Order is the order rendered. */
+  trust: readonly AiTrustPoint[];
+  /** The call to action that starts the guided flow. */
+  start: string;
+}
+
+/** The wizard's step labels, in the order the stepper shows them. */
+export interface AiFlowStepLabels {
+  select: string;
+  copyUrl: string;
+  configure: string;
+  connect: string;
+  install: string;
+  confirm: string;
+}
+
+/** The wizard's navigation words and each step's own sentences. */
+export interface AiFlowCopy {
+  /** The stepper's labels. Not sentences, but still the host's words. */
+  steps: AiFlowStepLabels;
+  back: string;
+  next: string;
+  advance: string;
+  finish: string;
+  copyUrl: string;
+  copied: string;
+  copyMessage: string;
+  /** The copy-the-URL step's heading. Names the host's own noun for a tenant. */
+  copyUrlTitle: string;
+  /** Under the MCP URL: what this value is and what happens on copy. */
+  urlCaption: string;
+  /** Under the paste-in prompt: what the assistant will do with it. */
+  promptCaption: string;
+  /** The "ask the assistant to connect" step heading. */
+  askTitle: string;
+  /** The one-click install step's body, for a host with a published plugin. */
+  installBody: string;
+  /** The install button on that step. */
+  installAction: string;
+  /** Heading over the paste-in message on the manual path. */
+  pasteTitle: string;
+  /** Caption under the paste-in message on the install path. */
+  pasteInstallCaption: string;
+  /** Confirmation once a host reports in. */
+  connectedTo(hostLabel: string): string;
+  waitingTitle: string;
+  waitingBody(hostLabel: string): string;
+  testNow: string;
+}
+
+export interface AiStatusBoardCopy {
+  instructions: string;
+  connected: string;
+  notConnected: string;
+  connect: string;
+  disconnect: string;
+  disconnectTitle: string;
+  disconnectBody: string;
+  disconnectConfirm: string;
+  /** Shown when the disconnect write fails without a reason of its own. */
+  disconnectError: string;
+  boardTitle: string;
+  boardCaption: string;
+  /**
+   * The confirmation popup's own furniture — its cancel button and fallbacks.
+   * `@12-apps/ui` stopped shipping defaults for these (FUT-760), so the words
+   * arrive here rather than from the design system's Portuguese.
+   */
+  confirmAction: ConfirmActionCopy;
+}
+
+/**
+ * The one-line summary of a connection's recency.
+ *
+ * Functions rather than strings because the number is interpolated and the
+ * plural rule is the host language's, not this package's.
+ */
+export interface AiConnectionSummaryCopy {
+  /** Active within the last minute — no number to interpolate. */
+  activeNow: string;
+  activeMinutes(minutes: number): string;
+  activeHours(hours: number): string;
+  activeDays(days: number): string;
+  /** Connected, but too long ago to state a recency for. */
+  configured: string;
+  /** Appended after a host's name: `Claude Conectado`. */
+  connectedSuffix: string;
+  /** Several assistants at once, from an already-joined list of names. */
+  connectedSeveral(names: string): string;
+  /** Connected, but the provider was never attributed to a known assistant. */
+  connectedGeneric: string;
+}
+
+export interface AiHostSelectCopy {
+  /** Why the owner is picking, under the host tiles. */
+  caption: string;
+}
+
+export interface AiConnectGuideCopy {
+  /** The label on the MCP URL field. Names the host's own noun for a tenant. */
+  urlLabel: string;
+  /** Above the MCP URL field. */
+  urlHint: string;
+  /** Lead-in to the vendor's official connector docs link. */
+  moreInfo: string;
+  connectOn(hostLabel: string): string;
+}
+
+export interface AiOnboardingCopy {
+  title: string;
+  /** The reveal toggle in the configured state, and its collapsed twin. */
+  editLabel: string;
+  collapseLabel: string;
+}
+
+/** Every screen's words, for a host mounting the whole flow. */
+export interface McpAiCopy {
+  capabilities: AiCapabilitiesCopy;
+  landing: AiLandingCopy;
+  flow: AiFlowCopy;
+  statusBoard: AiStatusBoardCopy;
+  summary: AiConnectionSummaryCopy;
+  hostSelect: AiHostSelectCopy;
+  connectGuide: AiConnectGuideCopy;
+  onboarding: AiOnboardingCopy;
+}

package/src/react/host-connect-guide.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { AiConnectGuideCopy, AiFlowCopy } from "./copy";
 import CheckIcon from "@mui/icons-material/Check";
 import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -24,10 +25,14 @@ export function EndpointCopyBlock({
   endpointUrl,
   copied,
   onCopy,
+  flowCopy,
+  copy,
 }: {
   endpointUrl: string;
   copied: boolean;
   onCopy: () => void;
+  flowCopy: AiFlowCopy;
+  copy: AiConnectGuideCopy;
 }): React.JSX.Element {
   const handleClick = (): void => {
     if (typeof navigator !== "undefined" && navigator.clipboard) {
@@ -47,10 +52,10 @@ export function EndpointCopyBlock({
       }}
     >
       <Text variant="caption" as="p" weight="bold">
-        URL do servidor da sua loja
+        {copy.urlLabel}
       </Text>
       <Text variant="caption" as="p" color="secondary">
-        Copie esta URL e cole no seu assistente para conectá-lo à loja.
+        {copy.urlHint}
       </Text>
       <Box sx={{ mt: 1 }}>
         <McpEndpointUrl url={endpointUrl} copyable={false} />
@@ -62,7 +67,7 @@ export function EndpointCopyBlock({
           ) : (
             <ContentCopyOutlinedIcon sx={{ fontSize: 18, mr: 0.5 }} />
           )}
-          {copied ? "Copiado" : "Copiar URL"}
+          {copied ? flowCopy.copied : flowCopy.copyUrl}
         </Button>
       </Box>
     </Box>
@@ -78,10 +83,12 @@ export function PromptCopyBlock({
   title,
   caption,
   message,
+  flowCopy,
 }: {
   title: string;
   caption: string;
   message: string;
+  flowCopy: AiFlowCopy;
 }): React.JSX.Element {
   const [copied, setCopied] = useState(false);
 
@@ -130,7 +137,7 @@ export function PromptCopyBlock({
           ) : (
             <ContentCopyOutlinedIcon sx={{ fontSize: 18, mr: 0.5 }} />
           )}
-          {copied ? "Copiado" : "Copiar mensagem"}
+          {copied ? flowCopy.copied : flowCopy.copyMessage}
         </Button>
       </Box>
     </Box>
@@ -138,12 +145,18 @@ export function PromptCopyBlock({
 }
 
 /** The brand mark + "Conectar no <host>" header shared by the connect sub-steps. */
-export function HostConnectHeader({ host }: { host: AiHostGuide }): React.JSX.Element {
+export function HostConnectHeader({
+  host,
+  copy,
+}: {
+  host: AiHostGuide;
+  copy: AiConnectGuideCopy;
+}): React.JSX.Element {
   return (
     <Stack direction="row" spacing={1.5} alignItems="center">
       <HostBrandAvatar brand={host.brand} size={36} />
       <Text variant="heading" size="sm" as="h3">
-        Conectar no {host.label}
+        {copy.connectOn(host.label)}
       </Text>
     </Stack>
   );
@@ -179,11 +192,14 @@ export function HostOpenButton({
 }
 
 /** A "Para mais informações" reference to the host's official connector docs. */
-export function HostDocsLink({ host }: { host: AiHostGuide }): React.JSX.Element | null {
+export function HostDocsLink({ host,
+  copy,
+}: { host: AiHostGuide;
+  copy: AiConnectGuideCopy;}): React.JSX.Element | null {
   if (!host.docs) return null;
   return (
     <Text variant="caption" as="p" color="secondary">
-      Para mais informações, consulte a{" "}
+      {copy.moreInfo}{" "}
       <Box
         component="a"
         href={host.docs.url}

package/src/react/host-select-step.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { AiHostSelectCopy } from "./copy";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 
 import { Box } from "@12-apps/ui/mui/Box";
@@ -72,10 +73,12 @@ export function HostSelectStep({
   hosts,
   selectedId,
   onSelect,
+  copy,
 }: {
   hosts: readonly AiHostGuide[];
   selectedId: string | null;
   onSelect: (hostId: string) => void;
+  copy: AiHostSelectCopy;
 }): React.JSX.Element {
   return (
     <Stack spacing={3} data-testid="ai-host-select">
@@ -84,7 +87,7 @@ export function HostSelectStep({
           Escolha o seu assistente
         </Text>
         <Text variant="caption" as="p" color="secondary">
-          Selecione onde você usa a IA — o passo a passo é feito sob medida para ele.
+          {copy.caption}
         </Text>
       </Box>
 

package/src/react/index.ts

@@ -29,9 +29,6 @@ export { McpEndpointUrl } from "./mcp-endpoint-url";
 export { HostBrandAvatar, CapabilityIcon } from "./ai-icons";
 export { FeatureBadge, type FeatureBadgeItem } from "./feature-badge";
 export {
-  aiHostGuides,
-  AI_CAPABILITIES,
-  AI_PERMISSION_MODEL,
   aiConnectPrompt,
   type AiConnectPromptSpec,
   providerForHostId,
@@ -42,3 +39,24 @@ export {
   type AiProvider,
   type AiCapability,
 } from "../guide";
+
+export {
+  PT_BR_AI_CAPABILITIES,
+  PT_BR_AI_CONNECT_PROMPT,
+  PT_BR_AI_HOST_GUIDES,
+  PT_BR_AI_PERMISSION_MODEL,
+} from "../pt-BR";
+
+export type {
+  AiCapabilitiesCopy,
+  AiConnectGuideCopy,
+  AiConnectionSummaryCopy,
+  AiFlowCopy,
+  AiHostSelectCopy,
+  AiLandingCopy,
+  AiOnboardingCopy,
+  AiStatusBoardCopy,
+  AiTrustPoint,
+  McpAiCopy,
+} from "./copy";
+export { PT_BR_MCP_AI_COPY } from "./pt-BR";