@12-apps/mcp 1.15.1 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/mcp",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "type": "module",
   "description": "App-agnostic MCP server core: generate one MCP tool per OpenAPI operation and proxy each call to the endpoint carrying the caller's bearer token (permission passthrough). Also ships the reusable AI-connect onboarding UI at @12-apps/mcp/react.",
   "exports": {
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@mui/icons-material": "^6.5.0",
-    "@12-apps/onboarding": "^1.15.1",
-    "@12-apps/ui": "^1.15.1",
+    "@12-apps/onboarding": "^1.16.0",
+    "@12-apps/ui": "^1.16.0",
     "react": "^19.2.0"
   },
   "peerDependencies": {
@@ -26,10 +26,13 @@
   },
   "devDependencies": {
     "@mui/material": "^6.5.0",
-    "@12-apps/typescript-config": "^1.16.2",
+    "@testing-library/react": "^16.1.0",
+    "@12-apps/typescript-config": "^1.17.0",
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",
     "eslint": "^9.39.1",
+    "jsdom": "^25.0.1",
+    "react-dom": "^19.2.0",
     "typescript": "^5.8.2",
     "vitest": "^3.2.4"
   },

package/src/react/ai-onboarding.tsx

@@ -17,6 +17,7 @@ import {
   type AiHostGuide,
 } from "../guide";
 import { AiLanding } from "./ai-landing";
+import type { DisconnectHandler } from "./ai-status-board";
 import {
   buildFlowSteps,
   connectedSummary,
@@ -57,6 +58,14 @@ export interface AiIntegrationOnboardingProps {
    * `window.location.reload()`.
    */
   onRetest?: () => void;
+  /**
+   * Revoke a connected assistant's access, from the completed status board. The
+   * host ID is the board's card, NOT the connection — `claude` and
+   * `claude-desktop` share one provider, so the app resolves which stored
+   * connection it owns (`providerForHostId`) and revokes that. Omitted → the
+   * board stays read-only, which is the pre-existing behavior.
+   */
+  onDisconnect?: DisconnectHandler;
 }
 
 /** Resolved (defaults-applied) props threaded to the in-provider flow body. */
@@ -68,6 +77,7 @@ interface FlowProps {
   permissionModel: string;
   connectPrompt: string;
   onRetest: () => void;
+  onDisconnect: DisconnectHandler | undefined;
   devReset: boolean;
 }
 
@@ -78,8 +88,17 @@ interface FlowProps {
  * Escolher → Copiar URL → Configurar → Conectar → Confirmar flow.
  */
 function AiOnboardingFlow(props: FlowProps): React.JSX.Element {
-  const { endpointUrl, connections, hosts, capabilities, permissionModel, connectPrompt, onRetest, devReset } =
-    props;
+  const {
+    endpointUrl,
+    connections,
+    hosts,
+    capabilities,
+    permissionModel,
+    connectPrompt,
+    onRetest,
+    onDisconnect,
+    devReset,
+  } = props;
   const { state } = useOnboarding();
   const selectedHost = hosts.find((h) => h.id === state.data.selectedHost) ?? hosts[0]!;
 
@@ -97,7 +116,9 @@ function AiOnboardingFlow(props: FlowProps): React.JSX.Element {
       configuredTitle={connectedTitle(connections, hosts, connectedHostId)}
       configuredSummary={connectedSummary(connections)}
       editLabel="Conectar IA"
-      completedContent={(nav) => <StatusBoard nav={nav} connections={connections} hosts={hosts} />}
+      completedContent={(nav) => (
+        <StatusBoard nav={nav} connections={connections} hosts={hosts} onDisconnect={onDisconnect} />
+      )}
       devReset={devReset}
       dataTestId="ai-onboarding"
     />
@@ -129,6 +150,7 @@ export function AiIntegrationOnboarding({
   onRetest = () => {
     if (typeof window !== "undefined") window.location.reload();
   },
+  onDisconnect,
 }: AiIntegrationOnboardingProps): React.JSX.Element {
   return (
     <OnboardingProvider featureKey={featureKey} store={store} initialState={initialState}>
@@ -140,6 +162,7 @@ export function AiIntegrationOnboarding({
         permissionModel={permissionModel}
         connectPrompt={connectPrompt}
         onRetest={onRetest}
+        onDisconnect={onDisconnect}
         devReset={devReset}
       />
     </OnboardingProvider>

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

@@ -2,7 +2,10 @@
 
 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 { Button } from "@12-apps/ui/form/Button";
 import { Box } from "@12-apps/ui/mui/Box";
 import { Stack } from "@12-apps/ui/mui/Stack";
@@ -11,6 +14,13 @@ import { Text } from "@12-apps/ui/typography/Text";
 import type { AiHostGuide } from "../guide";
 import { HostBrandAvatar } from "./ai-icons";
 
+/**
+ * Revoke a host's access. Returning a promise holds the confirmation popup in
+ * its pending state until the write settles, and a rejection keeps it open
+ * carrying the reason — so the owner sees the disconnect finish or fail.
+ */
+export type DisconnectHandler = (hostId: string) => void | Promise<unknown>;
+
 /** One assistant's connection state. */
 export interface HostStatus {
   host: AiHostGuide;
@@ -19,13 +29,92 @@ export interface HostStatus {
   detail?: string;
 }
 
+/**
+ * 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
+ * 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.
+ *
+ * "Desconectar" is only drawn when the app supplies a revoke path: a board with
+ * nowhere to send the revoke must not offer a button that does nothing.
+ */
+function ConnectedControls({
+  host,
+  onConnect,
+  onDisconnect,
+}: {
+  host: AiHostGuide;
+  onConnect: (hostId: string) => void;
+  onDisconnect?: DisconnectHandler;
+}): React.JSX.Element {
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      alignItems="center"
+      justifyContent="flex-end"
+      // Wraps rather than squeezing: three controls do not fit a half-width
+      // card at every breakpoint.
+      sx={{ flexShrink: 0, flexWrap: "wrap", rowGap: 0.5 }}
+    >
+      <Box
+        sx={{
+          px: 1,
+          py: 0.25,
+          borderRadius: 999,
+          bgcolor: "success.main",
+          color: "success.contrastText",
+        }}
+      >
+        <Text variant="caption" weight="bold" as="span">
+          Conectado
+        </Text>
+      </Box>
+      <Button
+        variant="text"
+        size="sm"
+        onClick={() => onConnect(host.id)}
+        data-testid={`ai-status-instructions-${host.id}`}
+      >
+        <MenuBookOutlinedIcon sx={{ fontSize: 16, mr: 0.5 }} />
+        Instruções
+      </Button>
+      {onDisconnect ? (
+        <ConfirmButton
+          variant="outline"
+          color="danger"
+          size="sm"
+          onClick={() => onDisconnect(host.id)}
+          confirm={{
+            title: "Desconectar o assistente?",
+            entityName: host.label,
+            description:
+              "Ele perde o acesso à sua loja na hora. Para voltar a usar, será preciso conectar de novo.",
+            confirmText: "Desconectar",
+            dataTestId: `ai-status-disconnect-confirm-${host.id}`,
+          }}
+          data-testid={`ai-status-disconnect-${host.id}`}
+        >
+          <LinkOffOutlinedIcon sx={{ fontSize: 16, mr: 0.5 }} />
+          Desconectar
+        </ConfirmButton>
+      ) : null}
+    </Stack>
+  );
+}
+
 /** A single green (connected) / red (to connect) status box for one assistant. */
 function StatusBox({
   status,
   onConnect,
+  onDisconnect,
 }: {
   status: HostStatus;
   onConnect: (hostId: string) => void;
+  onDisconnect?: DisconnectHandler;
 }): React.JSX.Element {
   const { host, connected, detail } = status;
   return (
@@ -56,19 +145,7 @@ function StatusBox({
         </Text>
       </Box>
       {connected ? (
-        <Box
-          sx={{
-            px: 1,
-            py: 0.25,
-            borderRadius: 999,
-            bgcolor: "success.main",
-            color: "success.contrastText",
-          }}
-        >
-          <Text variant="caption" weight="bold" as="span">
-            Conectado
-          </Text>
-        </Box>
+        <ConnectedControls host={host} onConnect={onConnect} onDisconnect={onDisconnect} />
       ) : (
         <Button
           variant="outline"
@@ -90,13 +167,22 @@ function StatusBox({
  * button that re-enters the guided flow for that host). Each connection is
  * attributed to its provider (derived from the OAuth client + confirmed by
  * `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
+ * 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.
  */
 export function AiStatusBoard({
   statuses,
   onConnect,
+  onDisconnect,
 }: {
   statuses: readonly HostStatus[];
   onConnect: (hostId: string) => void;
+  /** Revoke this host's access. Omit to render a read-only board. */
+  onDisconnect?: DisconnectHandler;
 }): React.JSX.Element {
   return (
     <Stack spacing={2} data-testid="ai-status-board">
@@ -116,7 +202,12 @@ export function AiStatusBoard({
         }}
       >
         {statuses.map((status) => (
-          <StatusBox key={status.host.id} status={status} onConnect={onConnect} />
+          <StatusBox
+            key={status.host.id}
+            status={status}
+            onConnect={onConnect}
+            onDisconnect={onDisconnect}
+          />
         ))}
       </Box>
     </Stack>

package/src/react/ai-steps.tsx

@@ -12,7 +12,7 @@ import {
   CopyUrlStep,
   InstallStep,
 } from "./ai-flow-steps";
-import { AiStatusBoard, type HostStatus } from "./ai-status-board";
+import { AiStatusBoard, type DisconnectHandler, type HostStatus } from "./ai-status-board";
 import { HostSelectStep } from "./host-select-step";
 
 export type { AiConnection } from "./ai-connection-utils";
@@ -23,10 +23,12 @@ export function StatusBoard({
   nav,
   connections,
   hosts,
+  onDisconnect,
 }: {
   nav: GuidedNav;
   connections: readonly AiConnection[];
   hosts: readonly AiHostGuide[];
+  onDisconnect?: DisconnectHandler;
 }): React.JSX.Element {
   const legacyHostId = (nav.data.connectedHost ?? nav.data.selectedHost) as string | undefined;
 
@@ -45,15 +47,38 @@ export function StatusBoard({
     };
   });
 
-  return (
-    <AiStatusBoard
-      statuses={statuses}
-      onConnect={(hostId) =>
-        nav.goTo(hosts.find((h) => h.id === hostId)?.pluginUrl ? "install" : "copy", {
-          selectedHost: hostId,
-        })
+  /** Re-enter this host's setup — the manual copy path, or its one-click install. */
+  const goToConnect = (hostId: string): void => {
+    nav.goTo(hosts.find((h) => h.id === hostId)?.pluginUrl ? "install" : "copy", {
+      selectedHost: hostId,
+    });
+  };
+
+  /**
+   * Disconnecting the LAST assistant leaves the section configured with nothing
+   * configured: a collapsed "IA conectada" summary hiding an all-red board, with
+   * the setup instructions two clicks away. So when the revoke empties the
+   * board, walk straight back into that host's instructions — the owner who just
+   * cut an assistant off is the likeliest person to reconnect one, and the steps
+   * are the only thing left worth showing.
+   *
+   * Cutting one of SEVERAL leaves the board meaningful, so it stays put.
+   * `statuses` is the pre-revoke picture, which is what makes "was that the last
+   * one?" answerable here without waiting for the app to re-read.
+   */
+  const disconnect: DisconnectHandler | undefined = onDisconnect
+    ? async (hostId) => {
+        await onDisconnect(hostId);
+        const revoked = providerForHostId(hostId);
+        const othersLive = statuses.some(
+          (status) => status.connected && providerForHostId(status.host.id) !== revoked,
+        );
+        if (!othersLive) goToConnect(hostId);
       }
-    />
+    : undefined;
+
+  return (
+    <AiStatusBoard statuses={statuses} onConnect={goToConnect} onDisconnect={disconnect} />
   );
 }
 

package/src/react/index.ts

@@ -16,7 +16,7 @@ export {
 // Building blocks + content, exported so apps can compose or override.
 export { AiLanding } from "./ai-landing";
 export { AiCapabilities } from "./ai-capabilities";
-export { AiStatusBoard, type HostStatus } from "./ai-status-board";
+export { AiStatusBoard, type DisconnectHandler, type HostStatus } from "./ai-status-board";
 export { HostSelectStep } from "./host-select-step";
 export {
   EndpointCopyBlock,