@agent-native/toolkit 0.226.0 → 0.226.1-nightly-20261107004051

package/src/app/integrations/IntegrationDetailPage.tsx

@@ -75,6 +75,7 @@ import {
 } from "../settings/shell/context.js";
 import type { SettingsPageContext } from "../settings/shell/registry.js";
 import { submitToAgent } from "../shared/index.js";
+import { connectedServerIntegrationId } from "./connected-server-id.js";
 import {
   BrandMark,
   BreadcrumbTitle,
@@ -88,7 +89,10 @@ import {
   catalogWithoutBuilderPublish,
   RemoveServerDialog,
 } from "./IntegrationsPage.js";
-import { useMcpIntegrationsController } from "./IntegrationsPanel.js";
+import {
+  startMcpOAuthReconnect,
+  useMcpIntegrationsController,
+} from "./IntegrationsPanel.js";
 
 const K = "agentChat.settingsShell.integrationDetail";
 const CH = "agentChat.settingsShell.channels";
@@ -402,6 +406,17 @@ export function IntegrationDetailPage({
 }: IntegrationDetailPageProps) {
   const catalog = useMemo(catalogWithoutBuilderPublish, []);
   const integration = catalog.find((entry) => entry.id === id);
+  // A connected server that has no catalog entry (a custom integration added by URL) is
+  // still openable: the tile links to its slug, and this resolves the same slug back to
+  // the server, so every connected tile has a detail page rather than only the built-ins.
+  const mcp = useMcpIntegrationsController({ integrations: catalog });
+  const customServer = integration
+    ? undefined
+    : // Every server, not only the connected ones: an ERRORED connection still needs a
+      // page — that is exactly when a person goes looking for Reconnect.
+      mcp.servers.find(
+        (server) => connectedServerIntegrationId(server, catalog) === id,
+      );
   const { navigate } = useSettingsShell();
   const channelId = CHANNEL_ALIASES[id] ?? id;
   const isChannel =
@@ -413,6 +428,15 @@ export function IntegrationDetailPage({
   }, [channelId, isChannel, navigate]);
 
   if (isChannel) return null;
+  if (!integration && customServer) {
+    return (
+      <CustomServerDetail
+        server={customServer}
+        catalog={catalog}
+        integrationId={id}
+      />
+    );
+  }
   if (!integration) return <NotFound />;
   return (
     <IntegrationDetail
@@ -426,6 +450,66 @@ export function IntegrationDetailPage({
   );
 }
 
+/**
+ * The detail page for a CONNECTED server that has no catalog entry — a custom
+ * integration added by URL. It shows the same facts as a built-in's page (status, scope,
+ * tools, error reason) and the same actions (Reconnect when the connection errored,
+ * Remove), so every connected tile in the grid opens a page worth opening.
+ */
+function CustomServerDetail({
+  server,
+  catalog,
+  integrationId,
+}: {
+  server: McpServer;
+  catalog: DefaultMcpIntegration[];
+  integrationId: string;
+}) {
+  const t = useT();
+  const { navigate } = useSettingsShell();
+  const mcp = useMcpIntegrationsController({ integrations: catalog });
+  const [removing, setRemoving] = useState(false);
+  const canRemove =
+    server.scope === "user" ||
+    mcp.serversQuery.data?.role === "owner" ||
+    mcp.serversQuery.data?.role === "admin";
+  const reconnect = () => {
+    if (server.authMode === "oauth" && server.status.state === "error") {
+      startMcpOAuthReconnect(server);
+      return;
+    }
+    void mcp.reconnect(server);
+  };
+  return (
+    <div className="space-y-6" data-connected-server-detail={integrationId}>
+      <header className="space-y-1">
+        <h2 className="text-base font-medium text-foreground">{server.name}</h2>
+        <p className="truncate text-xs text-muted-foreground">{server.url}</p>
+      </header>
+      <ConnectedRow
+        server={server}
+        canRemove={canRemove}
+        onRemove={() => setRemoving(true)}
+      />
+      {server.status.state === "error" ? (
+        <Button type="button" variant="outline" size="sm" onClick={reconnect}>
+          {t("mcpIntegrations.reconnect")}
+        </Button>
+      ) : null}
+      <RemoveServerDialog
+        server={removing ? server : null}
+        onOpenChange={(open) => {
+          if (!open) setRemoving(false);
+        }}
+        onRemove={async (target) => {
+          await mcp.removeServer(target);
+          navigate("integrations");
+        }}
+      />
+    </div>
+  );
+}
+
 function IntegrationDetail({
   integration,
   catalog,

package/src/app/integrations/IntegrationsPage.spec.tsx

@@ -276,6 +276,80 @@ describe("IntegrationsPage", () => {
     expect(container.textContent).toContain("Internal docs");
   });
 
+  it("opens a connected remote MCP server's detail page from its tile", async () => {
+    // Steve, 11/6: the connected "notion" tile had no way in — only a "…" menu — so a
+    // connected remote MCP server could not be viewed, edited or reconnected. A catalog
+    // integration that is connected must open the same page its catalog tile would.
+    mcpMocks.useMcpServers.mockReturnValue({
+      data: {
+        user: [
+          {
+            id: "notion-personal",
+            scope: "user",
+            name: "notion",
+            url: "https://mcp.notion.com/mcp",
+            authMode: "oauth",
+            createdAt: 1,
+            status: { state: "connected", toolCount: 77 },
+          },
+        ],
+        org: [],
+        orgId: "acme",
+        role: "member",
+      },
+      isError: false,
+      isLoading: false,
+    });
+    await render();
+
+    const link = container.querySelector<HTMLAnchorElement>(
+      '[data-connected-server-link="notion"]',
+    );
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute("href")).toContain("/integrations/notion");
+    await act(async () => {
+      link?.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      );
+    });
+    expect(navigate).toHaveBeenCalledWith("integrations", "notion");
+  });
+
+  it("opens a custom connected server from its tile too, under its own slug", async () => {
+    mcpMocks.useMcpServers.mockReturnValue({
+      data: {
+        user: [
+          {
+            id: "custom-1",
+            scope: "user",
+            name: "Internal Docs",
+            url: "https://mcp.example.com/mcp",
+            authMode: "headers",
+            createdAt: 1,
+            status: { state: "connected", toolCount: 3 },
+          },
+        ],
+        org: [],
+        orgId: "acme",
+        role: "member",
+      },
+      isError: false,
+      isLoading: false,
+    });
+    await render();
+
+    const link = container.querySelector<HTMLAnchorElement>(
+      '[data-connected-server-link="Internal Docs"]',
+    );
+    expect(link?.getAttribute("href")).toContain("/integrations/internal-docs");
+    await act(async () => {
+      link?.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true }),
+      );
+    });
+    expect(navigate).toHaveBeenCalledWith("integrations", "internal-docs");
+  });
+
   it("starts Connected from an empty state when nothing is connected", async () => {
     await render();
 

package/src/app/integrations/IntegrationsPage.tsx

@@ -79,6 +79,7 @@ import {
 } from "../settings/shell/context.js";
 import { settingsPageHref } from "../settings/shell/routing.js";
 import { useBuilderStatus } from "../settings/useBuilderStatus.js";
+import { connectedServerIntegrationId } from "./connected-server-id.js";
 import {
   startMcpOAuthReconnect,
   useMcpIntegrationsController,
@@ -256,6 +257,8 @@ function ConnectedServerTile({
   canRemove,
   reconnecting,
   reconnectError,
+  detailHref,
+  onOpen,
   onReconnect,
   onRemove,
 }: {
@@ -264,6 +267,8 @@ function ConnectedServerTile({
   canRemove: boolean;
   reconnecting: boolean;
   reconnectError: string | null;
+  detailHref: string;
+  onOpen: () => void;
   onReconnect: () => void;
   onRemove: () => void;
 }) {
@@ -286,27 +291,46 @@ function ConnectedServerTile({
       className="flex min-w-0 items-center gap-3 rounded-lg p-2.5"
       data-connected-server={server.name}
     >
-      {logo}
-      <span className="min-w-0 flex-1">
-        <span className="block truncate text-sm font-medium text-foreground">
-          {server.name}
-        </span>
-        <span className="block truncate text-xs leading-5 text-muted-foreground">
-          {detail}
-        </span>
-        {server.status.state !== "unknown" && server.status.error ? (
-          <span
-            className="block truncate text-xs leading-5 text-destructive"
-            title={server.status.error}
-          >
-            {reconnectError
-              ? t("mcpIntegrations.reconnectFailed", { error: reconnectError })
-              : t("mcpIntegrations.connectionErrorReason", {
-                  reason: server.status.error,
-                })}
+      {/*
+        A connected tile opens the same detail page a catalog tile does: status, scope,
+        tools, Reconnect and Remove. It used to be an inert div with only a "…" menu, so
+        a connected remote MCP server (Steve's "notion", 11/6) could not be opened at all.
+        The menu stays outside the anchor so its clicks never navigate.
+      */}
+      <a
+        href={detailHref}
+        onClick={(event) => {
+          if (isModifiedClick(event)) return;
+          event.preventDefault();
+          onOpen();
+        }}
+        data-connected-server-link={server.name}
+        className="flex min-w-0 flex-1 items-center gap-3 rounded-md text-start transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {logo}
+        <span className="min-w-0 flex-1">
+          <span className="block truncate text-sm font-medium text-foreground">
+            {server.name}
           </span>
-        ) : null}
-      </span>
+          <span className="block truncate text-xs leading-5 text-muted-foreground">
+            {detail}
+          </span>
+          {server.status.state !== "unknown" && server.status.error ? (
+            <span
+              className="block truncate text-xs leading-5 text-destructive"
+              title={server.status.error}
+            >
+              {reconnectError
+                ? t("mcpIntegrations.reconnectFailed", {
+                    error: reconnectError,
+                  })
+                : t("mcpIntegrations.connectionErrorReason", {
+                    reason: server.status.error,
+                  })}
+            </span>
+          ) : null}
+        </span>
+      </a>
       {hasError || canRemove ? (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -553,10 +577,13 @@ export function IntegrationsPage({ appName }: IntegrationsPageProps) {
       isMcpIntegrationUrl(item, server.url),
     );
     const key = serverKey(server);
+    const integrationId = connectedServerIntegrationId(server, catalog);
     return (
       <ConnectedServerTile
         key={key}
         server={server}
+        detailHref={settingsPageHref("integrations", integrationId)}
+        onOpen={() => navigate("integrations", integrationId)}
         logo={
           integration ? (
             catalogLogo(integration)

package/src/app/integrations/connected-server-id.ts

@@ -0,0 +1,34 @@
+import {
+  isMcpIntegrationUrl,
+  type DefaultMcpIntegration,
+} from "@agent-native/core/client/resources/mcp-integration-catalog";
+import type { McpServer } from "@agent-native/core/client/resources/use-mcp-servers";
+
+/**
+ * The settings-page id a CONNECTED server opens under.
+ *
+ * A server that came from the catalog opens its catalog entry, matched by URL, so the
+ * detail page is the same one the catalog tile would have opened before connecting
+ * (for example `integrations/notion`). A custom integration — one added by URL, with no
+ * catalog entry — opens under a slug of its own name, which is the same slug whose logo
+ * it already renders.
+ *
+ * This lives in one place because two surfaces must agree on it: the tile that links to
+ * the page, and the page that resolves which server it is showing. A remote MCP tile
+ * that cannot be clicked was the bug this exists to prevent (Steve, 11/6).
+ */
+export function connectedServerIntegrationId(
+  server: Pick<McpServer, "name" | "url">,
+  catalog: readonly DefaultMcpIntegration[],
+): string {
+  const match = catalog.find((integration) =>
+    isMcpIntegrationUrl(integration, server.url),
+  );
+  if (match) return match.id;
+  const slug = server.name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return slug || "mcp-server";
+}

package/src/composer/TiptapComposer.spec.ts

@@ -2456,7 +2456,7 @@ describe("createTiptapComposerExtensions", () => {
     ).toBe(false);
   });
 
-  it("puts Stop in Send's place until a draft exists, then beside Send", async () => {
+  it("shows one primary control: Stop while empty, Send once a draft exists", async () => {
     const stop = vi.fn();
     const focusRef: React.MutableRefObject<TiptapComposerHandle | null> = {
       current: null,
@@ -2515,15 +2515,15 @@ describe("createTiptapComposerExtensions", () => {
     expect(stopButton()).not.toBeNull();
     expect(send()).toBeNull();
 
+    // oracle-change: a draft now swaps Stop for Send, so there is no Stop-before-Send order to check.
     act(() => focusRef.current?.setText("Follow-up while it runs"));
-    expect(stopButton()).not.toBeNull();
+    expect(
+      container.querySelector<HTMLElement>(
+        '[data-agent-composer-slot="stop-slot"]',
+      )?.hidden,
+    ).toBe(true);
     expect(send()?.disabled).toBe(false);
     expect(send()?.getAttribute("aria-label")).toBe("Queue message");
-    // Stop precedes Send, so Send keeps the trailing position.
-    expect(
-      stopButton()!.compareDocumentPosition(send()!) &
-        Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy();
 
     await pressEscape();
     expect(stop).toHaveBeenCalledOnce();

package/src/composer/TiptapComposer.tsx

@@ -1278,9 +1278,11 @@ export interface TiptapComposerProps {
   /** Extra button to render alongside the primary action. */
   extraActionButton?: React.ReactNode;
   /**
-   * Stop control rendered beside send while a run is active, whatever the
-   * draft holds. Pass it only while there is something to stop; Escape in the
-   * editor clicks it when it is enabled.
+   * Stop control for an active run. It takes the primary slot while the
+   * composer is empty and gives it to Send once a draft exists; it stays
+   * mounted, so Escape in the editor still clicks it when it is enabled.
+   * During voice chat it sits beside End voice chat, which does not stop the
+   * run. Pass it only while there is something to stop.
    */
   stopButton?: React.ReactNode;
   /** Custom attachment button to render instead of ComposerPrimitive.AddAttachment. */
@@ -6964,20 +6966,17 @@ function TiptapComposerSurface({
               />
             )}
             {stopButton ? (
-              // Stop takes Send's place while the composer is empty, and Send
-              // joins it once a draft exists so a draft never hides Stop. The
-              // slot grows from zero width, gap included, so the controls to
-              // its left slide rather than jump.
+              // Stop and Send are one control: Stop while the composer is
+              // empty, Send once a draft exists. The hidden Stop stays mounted
+              // so Escape can still stop the run mid-draft. Voice chat keeps it
+              // visible: End voice chat does not stop the run.
               <div
                 ref={stopSlotRef}
                 data-agent-composer-slot="stop-slot"
-                className={`grid shrink-0 grid-cols-[1fr] justify-items-end transition-[grid-template-columns,margin-inline-start,margin-inline-end] duration-150 ease-out starting:-ms-[var(--agentkit-composer-toolbar-control-gap,0.25rem)] starting:me-0 starting:grid-cols-[0fr] motion-reduce:transition-none ${
-                  hasDraft ? "me-1" : ""
-                }`}
+                hidden={hasDraft && voiceChat === null}
+                className="flex shrink-0"
               >
-                <div className="flex min-w-0 transition-[opacity,scale] duration-150 ease-out starting:scale-75 starting:opacity-0 motion-reduce:transition-none">
-                  {stopButton}
-                </div>
+                {stopButton}
               </div>
             ) : null}
             {stopButton && !hasDraft && !voiceChat ? null : sendButton}

package/src/composer/TiptapComposer.voice-toolbar.spec.tsx

@@ -414,7 +414,7 @@ describe("TiptapComposer primary slot", () => {
     expect(container.textContent).toContain("Stop run");
   });
 
-  it("keeps Send last, after Stop, once a draft exists during a run", async () => {
+  it("swaps Stop for Send once a draft exists during a run", async () => {
     await act(async () =>
       root.render(
         <Harness
@@ -426,6 +426,11 @@ describe("TiptapComposer primary slot", () => {
     );
 
     expect(trailing()).toEqual(["voice-button", "stop-slot", "send-button"]);
+    expect(
+      container.querySelector<HTMLElement>(
+        '[data-agent-composer-slot="stop-slot"]',
+      )?.hidden,
+    ).toBe(true);
     expect(send()?.dataset.composerPrimary).toBe("send");
   });
 
@@ -496,6 +501,24 @@ describe("TiptapComposer voice chat", () => {
     expect(realtime.end).toHaveBeenCalledTimes(1);
   });
 
+  it("keeps Stop beside End voice chat while a run is active", async () => {
+    activate("listening");
+    await act(async () =>
+      root.render(
+        <Harness
+          adapters={realtimeReady}
+          stopButton={<button type="button">Stop run</button>}
+        />,
+      ),
+    );
+
+    // End voice chat does not cancel the run, so Stop stays reachable.
+    expect(slot<HTMLElement>("stop-slot")?.hidden).toBe(false);
+    expect(
+      slot<HTMLButtonElement>("send-button")?.dataset.composerPrimary,
+    ).toBe("end-voice-chat");
+  });
+
   it("renders no floating dock", async () => {
     activate("speaking");
     await act(async () => root.render(<Harness adapters={realtimeReady} />));