feat(assistant): host-injected in-place connect for proposal requirements (#172)

* feat(assistant): host-injected in-place connect for proposal requirements

* fix(assistant): make proposal connect resilient to null connectUrl and failing handlers

Author: Tjemmmic

src/assistant/AssistantDock.tsx

@@ -21,7 +21,11 @@ import type { ToolDetailRenderers } from "../web-react";
 import { AssistantPanel } from "./AssistantPanel";
 import { useAssistantLauncher } from "./launcher";
 import { ResizeHandle } from "./ResizeHandle";
-import type { AssistantTranscriptView } from "./types";
+import type {
+  AssistantTranscriptView,
+  ConnectionRequirement,
+  ConnectRequirementResult,
+} from "./types";
 import { useAssistantChat } from "./useAssistantChat";
 import { useIsDesktop, usePanelWidth } from "./usePanelPrefs";
 
@@ -36,6 +40,14 @@ export interface AssistantDockProps {
   renderGraph?: (yaml: string) => ReactNode;
   /** Called after a workflow-mutating tool is confirmed (host re-fetches its list). */
   onWorkflowMutation?: () => void;
+  /** In-place connect handler for a proposal's integration requirements. The host
+   *  runs its own connect flow (OAuth popup, api-key modal, app install) and
+   *  resolves whether the requirement is now satisfied; the proposal card then
+   *  flips it to connected. Host-agnostic — when omitted, the card falls back to
+   *  navigating the requirement's connect target via `navigate`. */
+  onConnectRequirement?: (
+    requirement: ConnectionRequirement,
+  ) => Promise<ConnectRequirementResult>;
   /** Markdown renderer for assistant message content (plain text when absent). */
   renderMarkdown?: (content: string) => ReactNode;
   /** Per-tool custom detail renderers for expanded tool cards in the transcript. */
@@ -64,12 +76,16 @@ export function AssistantDock({
   formatMoney,
   renderGraph,
   onWorkflowMutation,
+  onConnectRequirement,
   renderMarkdown,
   toolRenderers,
   renderTranscript,
 }: AssistantDockProps) {
   const { open, openAssistant, closeAssistant } = useAssistantLauncher();
-  const chat = useAssistantChat(userId, { onWorkflowMutation });
+  const chat = useAssistantChat(userId, {
+    onWorkflowMutation,
+    onConnectRequirement,
+  });
 
   const isDesktop = useIsDesktop();
   const { width, maxWidth, setWidth, previewWidth, nudgeWidth } =

src/assistant/AssistantPanel.test.tsx

@@ -46,6 +46,8 @@ function makeChat(over: Partial<AssistantState> = {}): AssistantChat {
     stop: vi.fn(),
     confirm: vi.fn(async () => {}),
     cancel: vi.fn(),
+    canConnectRequirement: false,
+    connectRequirement: vi.fn(async () => {}),
     reset: vi.fn(),
     switchThread: vi.fn(),
     restoring: false,
@@ -117,6 +119,83 @@ describe("AssistantPanel transcript seam", () => {
     expect(screen.getByRole("button", { name: "Cancel" })).toBeTruthy();
   });
 
+  it("wires a requirement's in-place connect to chat.connectRequirement when the host can connect", () => {
+    const requirement = {
+      provider: "slack",
+      kind: "integration" as const,
+      connected: false,
+    };
+    const proposalWithReq: PendingProposal = {
+      proposalId: "p1",
+      callId: "c1",
+      name: "create_workflow",
+      args: { yaml: "name: demo" },
+      requirements: [requirement],
+    };
+    const chat = makeChat({
+      status: "awaiting_confirm",
+      pendingProposals: [proposalWithReq],
+    });
+    chat.canConnectRequirement = true;
+
+    renderPanel(chat, (view) => (
+      <div>
+        {view.pendingProposals.map((p) => (
+          <div key={p.callId}>{view.renderProposal(p)}</div>
+        ))}
+      </div>
+    ));
+
+    fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
+    expect(chat.connectRequirement).toHaveBeenCalledWith(
+      proposalWithReq,
+      requirement,
+    );
+  });
+
+  it("does not offer in-place connect when the host cannot connect (navigate fallback)", () => {
+    const openSpy = vi.spyOn(window, "open").mockReturnValue(null);
+    // An absolute connect target so the fallback opens a new tab (spied) rather
+    // than assigning window.location (which jsdom can't navigate).
+    const proposalWithReq: PendingProposal = {
+      proposalId: "p1",
+      callId: "c1",
+      name: "create_workflow",
+      args: { yaml: "name: demo" },
+      requirements: [
+        {
+          provider: "slack",
+          connected: false,
+          connectUrl: "https://example.com/connect/slack",
+        },
+      ],
+    };
+    const chat = makeChat({
+      status: "awaiting_confirm",
+      pendingProposals: [proposalWithReq],
+    });
+    // canConnectRequirement stays false (the makeChat default).
+
+    renderPanel(chat, (view) => (
+      <div>
+        {view.pendingProposals.map((p) => (
+          <div key={p.callId}>{view.renderProposal(p)}</div>
+        ))}
+      </div>
+    ));
+
+    fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
+    // The panel passed no onConnect, so the card keeps its navigate/open fallback
+    // and never calls the host connect handler.
+    expect(chat.connectRequirement).not.toHaveBeenCalled();
+    expect(openSpy).toHaveBeenCalledWith(
+      "https://example.com/connect/slack",
+      "_blank",
+      "noopener,noreferrer",
+    );
+    openSpy.mockRestore();
+  });
+
   it("reflects a live streaming turn in the view's isStreaming/isThinking flags", () => {
     let captured: AssistantTranscriptView | null = null;
     // A turn that has started but emitted no answer text yet reads as thinking.

src/assistant/AssistantPanel.tsx

@@ -282,6 +282,13 @@ export function AssistantPanel({
       onConfirm={() => chat.confirm(proposal)}
       onCancel={() => chat.cancel(proposal)}
       navigate={navigate}
+      // Offer in-place connect only when the host wired a handler; otherwise the
+      // card keeps its navigate-to-connect-target fallback.
+      onConnect={
+        chat.canConnectRequirement
+          ? (requirement) => chat.connectRequirement(proposal, requirement)
+          : undefined
+      }
       renderGraph={renderGraph}
     />
   );

src/assistant/ProposalCard.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, type MockInstance, vi } from "vitest";
 import { ProposalCard } from "./ProposalCard";
 import type { ConnectionRequirement, PendingProposal } from "./types";
@@ -193,4 +193,140 @@ describe("ProposalCard", () => {
     expect(screen.getByText("GitHub App")).toBeTruthy();
     expect(screen.getByText("installed")).toBeTruthy();
   });
+
+  it("calls the in-place connect handler instead of navigating when onConnect is set", () => {
+    const navigate = vi.fn();
+    const onConnect = vi.fn(() => Promise.resolve());
+    const req: ConnectionRequirement = { provider: "slack", connected: false };
+    render(
+      <ProposalCard
+        proposal={withReq(req)}
+        confirming={false}
+        onConfirm={noop}
+        onCancel={noop}
+        navigate={navigate}
+        onConnect={onConnect}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
+    // In-place connect runs; the navigate/new-tab fallbacks stay untouched.
+    expect(onConnect).toHaveBeenCalledWith(req);
+    expect(navigate).not.toHaveBeenCalled();
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
+  it("shows a disabled busy state while the in-place connect is in flight", async () => {
+    let resolveConnect!: () => void;
+    const onConnect = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveConnect = resolve;
+        }),
+    );
+    render(
+      <ProposalCard
+        proposal={withReq({ provider: "slack", connected: false })}
+        confirming={false}
+        onConfirm={noop}
+        onCancel={noop}
+        onConnect={onConnect}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
+    const busy = screen.getByRole("button", { name: /Connecting/ });
+    expect((busy as HTMLButtonElement).disabled).toBe(true);
+    // Once the host resolves, the row leaves the busy state (the parent flips the
+    // requirement to connected in the real flow; here the isolated card just
+    // restores the actionable button).
+    await act(async () => {
+      resolveConnect();
+    });
+    expect(screen.queryByRole("button", { name: /Connecting/ })).toBeNull();
+    expect(
+      (screen.getByRole("button", { name: /Connect/ }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(false);
+  });
+
+  it("falls back to navigation when no onConnect handler is provided", () => {
+    const navigate = vi.fn();
+    render(
+      <ProposalCard
+        proposal={withReq({ provider: "slack", connected: false })}
+        confirming={false}
+        onConfirm={noop}
+        onCancel={noop}
+        navigate={navigate}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
+    expect(navigate).toHaveBeenCalledWith("/app/integrations");
+  });
+
+  it("offers in-place connect even when connectUrl is null (host owns the flow)", () => {
+    const onConnect = vi.fn(() => Promise.resolve());
+    render(
+      <ProposalCard
+        proposal={withReq({
+          provider: "github",
+          kind: "github_app",
+          connected: false,
+          connectUrl: null,
+        })}
+        confirming={false}
+        onConfirm={noop}
+        onCancel={noop}
+        onConnect={onConnect}
+      />,
+    );
+    // With a host handler the row is actionable even with no connect URL.
+    fireEvent.click(screen.getByRole("button", { name: /Install/ }));
+    expect(onConnect).toHaveBeenCalled();
+  });
+
+  it("clears the busy state when the in-place handler rejects (no unhandled rejection)", async () => {
+    const onConnect = vi.fn(() => Promise.reject(new Error("connect failed")));
+    render(
+      <ProposalCard
+        proposal={withReq({ provider: "slack", connected: false })}
+        confirming={false}
+        onConfirm={noop}
+        onCancel={noop}
+        onConnect={onConnect}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
+    // The rejection is contained; the row leaves the busy state and stays usable.
+    await waitFor(() =>
+      expect(screen.queryByRole("button", { name: /Connecting/ })).toBeNull(),
+    );
+    expect(
+      (screen.getByRole("button", { name: /Connect/ }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(false);
+  });
+
+  it("clears the busy state when the in-place handler throws synchronously", async () => {
+    const onConnect = vi.fn(() => {
+      throw new Error("sync boom");
+    });
+    render(
+      <ProposalCard
+        proposal={withReq({ provider: "slack", connected: false })}
+        confirming={false}
+        onConfirm={noop}
+        onCancel={noop}
+        onConnect={onConnect}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
+    await waitFor(() =>
+      expect(screen.queryByRole("button", { name: /Connecting/ })).toBeNull(),
+    );
+    expect(onConnect).toHaveBeenCalled();
+    expect(
+      (screen.getByRole("button", { name: /Connect/ }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(false);
+  });
 });