@hienlh/ppm 0.22.9 → 0.22.11

package/src/web/components/ai-resources/ai-resources-panel.tsx

@@ -18,6 +18,7 @@ import { openResourceTab } from "./open-resource-tab";
 import { useMcpServers } from "./use-mcp-servers";
 import { McpGroup, serverPreview } from "./mcp-group";
 import { NewResourceMenu } from "./new-resource-menu";
+import { McpSignInList } from "@/components/mcp-auth/mcp-sign-in-list";
 
 type TypeFilter = "all" | AiResourceType | "mcp";
 const FILTERS: { id: TypeFilter; label: string }[] = [
@@ -181,6 +182,9 @@ export function AiResourcesPanel() {
 
       {/* List */}
       <div className="flex-1 min-h-0 overflow-y-auto">
+        {/* First, and outside the states below: it is something to act on, it has its own
+            data source, and under "All" the MCP group sits below hundreds of skills. */}
+        {showMcp && <McpSignInList project={activeProject?.name} search={search} />}
         {error ? (
           <div className="p-4 text-center text-xs text-destructive">{error}</div>
         ) : loading && !result ? (

package/src/web/components/chat/chat-tab.tsx

@@ -16,6 +16,7 @@ import { getAISettings, pickAccountForTab } from "@/lib/api-settings";
 import { MessageList } from "./message-list";
 import { BackgroundCommandBar } from "./background-command-bar";
 import { TeamWorkingBar } from "./team-working-bar";
+import { McpSignInBar } from "@/components/mcp-auth/mcp-sign-in-bar";
 import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";
 import { MessageInput, type ChatAttachment, type MessagePriority } from "./message-input";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
@@ -283,6 +284,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
     pendingApproval,
     contextWindowPct,
     compactStatus,
+    mcpNeedsAuth,
     statusMessage,
     sessionTitle,
     liveAccount,
@@ -960,6 +962,9 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
       {/* Teammates still working — pinned here so it is the last thing under the conversation */}
       <TeamWorkingBar teamName={primaryTeam} members={teamMembers} projectName={projectName} />
 
+      {/* MCP servers this session cannot use until someone signs in */}
+      <McpSignInBar key={sessionId ?? "draft"} needsAuth={mcpNeedsAuth} projectName={projectName || undefined} />
+
       {/* Bottom toolbar */}
       <div className="border-t border-border bg-panel shrink-0">
         {/* Unified toolbar: History, Config, Usage, Bug report, Connection */}

package/src/web/components/chat/message-input.tsx

@@ -409,8 +409,10 @@ export const MessageInput = memo(function MessageInput({
         onFileItemsLoaded?.([]);
         return;
       }
-      const { fileIndex } = useFileStore.getState();
-      const nodes: FileNode[] = fileIndex.map((e) => ({ name: e.name, path: e.path, type: e.type }));
+      // Share the store's array rather than mapping it: every mounted chat tab runs this,
+      // and a project index can hold tens of thousands of entries, so a per-tab copy
+      // kept one full duplicate alive for each open chat. Consumers only read it.
+      const nodes: FileNode[] = useFileStore.getState().fileIndex;
       fileItemsRef.current = nodes;
       onFileItemsLoaded?.(nodes);
     };

package/src/web/components/mcp-auth/claude-ai-connector.ts

@@ -0,0 +1,11 @@
+/**
+ * claude.ai connectors (Slack, Gmail, Drive… added on claude.ai) reach Claude through the
+ * account, not through local config, and the CLI names them `claude.ai <display name>`.
+ * Its `mcp_authenticate` answers "Server not found" for them in SDK mode, so they are
+ * connected where they were added — on claude.ai — rather than through a local flow.
+ */
+export const CLAUDE_AI_CONNECTORS_URL = "https://claude.ai/settings/connectors";
+
+export function isClaudeAiConnector(name: string, scope?: string): boolean {
+  return scope === "claudeai" || name.startsWith("claude.ai ");
+}

package/src/web/components/mcp-auth/mcp-server-name.ts

@@ -0,0 +1,10 @@
+/**
+ * A plugin's MCP server is named `plugin:<plugin>:<server>` by the CLI. The prefix is what
+ * keeps names unique, but in a one-line bar it pushes every server after the first out of
+ * view, so the bar shows the last segment and keeps the full name as the tooltip.
+ */
+export function shortMcpServerName(name: string): string {
+  if (!name.startsWith("plugin:")) return name;
+  const last = name.slice(name.lastIndexOf(":") + 1);
+  return last || name;
+}

package/src/web/components/mcp-auth/mcp-sign-in-bar.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import { KeyRound, X } from "@/lib/icons";
+import { useSettingsStore } from "@/stores/settings-store";
+import { McpSignInDialog } from "./mcp-sign-in-dialog";
+import { shortMcpServerName } from "./mcp-server-name";
+
+interface McpSignInBarProps {
+  /** Servers this chat's Claude subprocess reported as needing a sign-in. */
+  needsAuth: string[];
+  projectName?: string;
+}
+
+/**
+ * A strip above the chat input naming the MCP servers that are configured but unusable
+ * until someone signs in, each with a button that does it. Without it the only sign of
+ * the problem is Claude saying it cannot reach a tool.
+ *
+ * Hiding it is remembered per server, not per chat: a plugin can ship a dozen connectors
+ * nobody means to use, and a bar that returns in every new chat is noise. It shows again
+ * only for a server outside the hidden list.
+ */
+export function McpSignInBar({ needsAuth, projectName }: McpSignInBarProps) {
+  const [signingIn, setSigningIn] = useState<string | null>(null);
+  const dismissed = useSettingsStore((s) => s.mcpSignInDismissed);
+  const dismissMcpSignIn = useSettingsStore((s) => s.dismissMcpSignIn);
+  const shown = needsAuth.filter((n) => !dismissed.includes(n));
+
+  const hide = () => {
+    dismissMcpSignIn(shown);
+    toast.info("Sign-in bar hidden", {
+      description: "You can still sign in to these MCP servers from AI Resources → MCP. The bar comes back only for a server that is not on this list.",
+    });
+  };
+
+  // The dialog stays at the same place in the tree whether or not the bar shows: a
+  // successful sign-in empties `needsAuth` while the dialog is still open, and remounting
+  // it there would start a second sign-in.
+  return (
+    <>
+      {shown.length > 0 && (
+        <div className="flex shrink-0 items-center gap-2 border-t border-border bg-surface-elevated/60 px-2 py-1.5 text-xs">
+          <KeyRound className="size-3.5 shrink-0 text-warning" />
+          <span className="shrink-0 text-text-secondary">
+            {shown.length === 1 ? "MCP server needs sign-in:" : "MCP servers need sign-in:"}
+          </span>
+          <div className="flex min-w-0 flex-1 gap-1.5 overflow-x-auto">
+            {shown.map((name) => (
+              <button
+                key={name}
+                type="button"
+                onClick={() => setSigningIn(name)}
+                className="shrink-0 rounded border border-border bg-background px-2.5 py-1.5 font-medium text-text-primary transition-colors hover:bg-surface max-md:min-h-9"
+                title={`Sign in to ${name}`}
+              >
+                {shortMcpServerName(name)}
+              </button>
+            ))}
+          </div>
+          <button
+            type="button"
+            onClick={hide}
+            className="flex size-8 shrink-0 items-center justify-center rounded text-text-secondary transition-colors hover:bg-surface hover:text-text-primary max-md:size-10"
+            aria-label="Hide these servers"
+            title="Hide these servers"
+          >
+            <X className="size-3.5" />
+          </button>
+        </div>
+      )}
+      <McpSignInDialog serverName={signingIn} project={projectName} onClose={() => setSigningIn(null)} />
+    </>
+  );
+}

package/src/web/components/mcp-auth/mcp-sign-in-dialog.tsx

@@ -0,0 +1,196 @@
+/**
+ * Sign in to one MCP server. Shared by the chat's sign-in bar and the AI Resources list.
+ * Dialog on desktop, bottom sheet on mobile.
+ */
+import { useState } from "react";
+import { CheckCircle2, ExternalLink, Loader2, TriangleAlert } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useMcpSignInFlow } from "./use-mcp-sign-in-flow";
+import { CLAUDE_AI_CONNECTORS_URL, isClaudeAiConnector } from "./claude-ai-connector";
+
+interface McpSignInDialogProps {
+  /** Server to sign in to; null keeps the dialog closed. */
+  serverName: string | null;
+  /** Project whose MCP configuration applies — matters for project-scoped servers. */
+  project?: string;
+  onClose: () => void;
+  onSignedIn?: (serverName: string) => void;
+}
+
+export function McpSignInDialog({ serverName, project, onClose, onSignedIn }: McpSignInDialogProps) {
+  const isMobile = useIsMobile();
+  const open = serverName !== null;
+  const title = serverName ? `Sign in to ${serverName}` : "Sign in";
+  const connector = serverName !== null && isClaudeAiConnector(serverName);
+  // The flow lives here, above the dialog/sheet switch: the two shells are different
+  // trees, and crossing the breakpoint mid sign-in (rotating a large phone) would
+  // otherwise remount the body, cancel the flow and kill the CLI's callback listener.
+  const flow = useMcpSignInFlow(connector ? null : serverName, project, onSignedIn);
+  const body = !serverName ? null : connector
+    ? <ClaudeAiConnectorBody onClose={onClose} />
+    : <SignInBody key={serverName} serverName={serverName} flowState={flow} onClose={onClose} />;
+
+  if (isMobile) {
+    return (
+      <BottomSheet open={open} onClose={onClose} className="popover-solid">
+        <div className="px-4 pb-4 pt-1">
+          <h2 className="mb-3 text-base font-semibold">{title}</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>Grant PPM's Claude sessions access to this MCP server.</DialogDescription>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SignInBody({ serverName, flowState, onClose }: {
+  serverName: string;
+  flowState: ReturnType<typeof useMcpSignInFlow>;
+  onClose: () => void;
+}) {
+  const { flow, starting, busy, error, retry, submitCallback, confirm } = flowState;
+  const [pasted, setPasted] = useState("");
+
+  if (starting || (!flow && !error)) {
+    return <StatusLine icon={<Loader2 className="size-4 animate-spin" />} text="Preparing the sign-in…" />;
+  }
+
+  if (!flow || flow.status === "failed" || flow.status === "expired" || flow.status === "cancelled") {
+    return (
+      <div className="space-y-3">
+        <ErrorLine text={flow?.error ?? error ?? "The sign-in did not finish."} />
+        <div className="flex gap-2">
+          <Button className="h-11 flex-1 md:h-9" onClick={() => void retry()}>Try again</Button>
+          <Button variant="outline" className="h-11 md:h-9" onClick={onClose}>Close</Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (flow.status === "done") {
+    return (
+      <div className="space-y-3">
+        <StatusLine
+          icon={<CheckCircle2 className="size-4 text-success" />}
+          text={`Signed in. ${serverName} is available to Claude — open chats reconnect it on their own.`}
+        />
+        <Button className="h-11 w-full md:h-9" onClick={onClose}>Done</Button>
+      </div>
+    );
+  }
+
+  const shownError = flow.error ?? error;
+  return (
+    <div className="space-y-4">
+      {flow.authUrl && (
+        <Button asChild className="h-11 w-full md:h-9">
+          {/* A real link, not window.open(): a popup opened after an await is blocked. */}
+          <a href={flow.authUrl} target="_blank" rel="noopener noreferrer">
+            <ExternalLink className="size-4" /> Open sign-in page
+          </a>
+        </Button>
+      )}
+
+      {flow.callbackExpected ? (
+        <StatusLine
+          icon={<Loader2 className="size-4 animate-spin" />}
+          text={flow.redirectScheme === "custom"
+            ? "Waiting for you to approve access. The page returns to PPM by itself."
+            : "Waiting for you to approve access in the browser…"}
+        />
+      ) : (
+        <div className="space-y-2">
+          <p className="text-sm text-text-secondary">Grant access on the page that opens, then come back here.</p>
+          <Button variant="outline" className="h-11 w-full md:h-9" disabled={busy} onClick={() => void confirm()}>
+            {busy ? <Loader2 className="size-4 animate-spin" /> : null} I've granted access
+          </Button>
+        </div>
+      )}
+
+      {flow.callbackExpected && (
+        <form
+          className="space-y-2 rounded-md border border-border p-3"
+          onSubmit={(e) => { e.preventDefault(); if (pasted.trim()) void submitCallback(pasted.trim()); }}
+        >
+          <p className="text-xs text-text-secondary">
+            {flow.redirectScheme === "custom" ? (
+              <>Did the page not come back to PPM? Copy the address the browser ended on after approving and paste it here.</>
+            ) : (
+              <>
+                Not on the machine running PPM? After approving, the browser lands on a <code>localhost</code> page
+                that does not load. Copy that page's address and paste it here.
+              </>
+            )}
+          </p>
+          <div className="flex gap-2">
+            <Input
+              value={pasted}
+              onChange={(e) => setPasted(e.target.value)}
+              placeholder={flow.redirectScheme === "custom" ? "https://…/callback?code=…" : "http://localhost:…/callback?code=…"}
+              className="h-11 flex-1 md:h-9"
+              autoComplete="off"
+              spellCheck={false}
+            />
+            <Button type="submit" variant="outline" className="h-11 md:h-9" disabled={busy || !pasted.trim()}>
+              {busy ? <Loader2 className="size-4 animate-spin" /> : "Submit"}
+            </Button>
+          </div>
+        </form>
+      )}
+
+      {shownError && <ErrorLine text={shownError} />}
+    </div>
+  );
+}
+
+function ClaudeAiConnectorBody({ onClose }: { onClose: () => void }) {
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-text-secondary">
+        This connector belongs to your claude.ai account. Connect it in claude.ai's connector settings,
+        then start a new chat to use it here.
+      </p>
+      <div className="flex gap-2">
+        <Button asChild className="h-11 flex-1 md:h-9">
+          <a href={CLAUDE_AI_CONNECTORS_URL} target="_blank" rel="noopener noreferrer">
+            <ExternalLink className="size-4" /> Open claude.ai connectors
+          </a>
+        </Button>
+        <Button variant="outline" className="h-11 md:h-9" onClick={onClose}>Close</Button>
+      </div>
+    </div>
+  );
+}
+
+function StatusLine({ icon, text }: { icon: React.ReactNode; text: string }) {
+  return (
+    <div className="flex items-start gap-2 text-sm text-text-secondary">
+      <span className="mt-0.5 shrink-0">{icon}</span>
+      <span>{text}</span>
+    </div>
+  );
+}
+
+function ErrorLine({ text }: { text: string }) {
+  return (
+    <div className="flex items-start gap-2 text-sm text-error">
+      <TriangleAlert className="mt-0.5 size-4 shrink-0" />
+      <span className="min-w-0 break-words">{text}</span>
+    </div>
+  );
+}

package/src/web/components/mcp-auth/mcp-sign-in-list.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { KeyRound, Loader2, RefreshCw } from "@/lib/icons";
+import { getMcpAuthStatus, type McpServerState } from "@/lib/api-mcp-auth";
+import { McpSignInDialog } from "./mcp-sign-in-dialog";
+import { isClaudeAiConnector } from "./claude-ai-connector";
+
+/**
+ * Where a server was configured, in words. "dynamic" — what the CLI calls every server
+ * PPM hands it — says nothing to the reader, so it is left out.
+ */
+function originLabel(s: McpServerState): string | null {
+  if (isClaudeAiConnector(s.name, s.scope)) return "claude.ai connector";
+  if (s.source === "plugin") return "Plugin";
+  if (s.scope && s.scope !== "dynamic") return s.scope;
+  return null;
+}
+
+interface McpSignInListProps {
+  /** Project whose MCP configuration applies; undefined = the home directory's. */
+  project?: string;
+  /** The panel's search box — the list filters with everything else. */
+  search?: string;
+  /** Keep the heading and say so when nothing needs a sign-in (Settings), instead of rendering nothing. */
+  showWhenEmpty?: boolean;
+}
+
+/**
+ * MCP servers that are configured but waiting for a sign-in, as a chat in `project` would
+ * see them. Covers every source Claude loads — PPM's own list, ~/.claude.json and plugins —
+ * which is why it asks the server instead of reading the PPM list next to it.
+ */
+export function McpSignInList({ project, search = "", showWhenEmpty = false }: McpSignInListProps) {
+  const [servers, setServers] = useState<McpServerState[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [signingIn, setSigningIn] = useState<string | null>(null);
+
+  // Only the latest request may write: switching projects quickly must not leave the
+  // previous project's answer on screen.
+  const seqRef = useRef(0);
+  const load = useCallback(async (fresh = false) => {
+    const seq = ++seqRef.current;
+    setLoading(true);
+    try {
+      const next = await getMcpAuthStatus(project, fresh);
+      if (seq === seqRef.current) setServers(next);
+    } catch {
+      // A failed probe hides the list rather than showing a stale one.
+      if (seq === seqRef.current) setServers([]);
+    } finally {
+      if (seq === seqRef.current) setLoading(false);
+    }
+  }, [project]);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const q = search.trim().toLowerCase();
+  const pending = servers.filter((s) => s.status === "needs-auth" && (!q || s.name.toLowerCase().includes(q)));
+
+  return (
+    <>
+      {(pending.length > 0 || showWhenEmpty) && (
+        <div className="pb-1">
+          <div className="flex items-center gap-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-text-subtle">
+            <span>Needs sign-in</span>
+            <span className="text-text-subtle/60">{pending.length}</span>
+            <button
+              type="button"
+              onClick={() => void load(true)}
+              disabled={loading}
+              className="ml-auto flex size-6 items-center justify-center rounded hover:bg-surface-elevated disabled:opacity-50 max-md:size-9"
+              aria-label="Check again"
+              title="Check again"
+            >
+              {loading ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />}
+            </button>
+          </div>
+          {pending.length === 0 && (
+            <p className="px-2 py-1.5 text-[11px] text-text-subtle">
+              {loading ? "Checking MCP servers…" : "No MCP server is waiting for a sign-in."}
+            </p>
+          )}
+          {pending.map((s) => (
+            <div key={s.name} className="flex items-center gap-2 px-2 py-1.5">
+              <KeyRound className="size-4 shrink-0 text-warning" />
+              <span className="min-w-0 flex-1">
+                <span className="block truncate text-[13px] font-medium">{s.name}</span>
+                {originLabel(s) && (
+                  <span className="block truncate text-[11px] text-text-subtle">{originLabel(s)}</span>
+                )}
+              </span>
+              <button
+                type="button"
+                onClick={() => setSigningIn(s.name)}
+                className="shrink-0 rounded-md bg-primary px-2.5 py-1 text-[11px] font-medium text-primary-foreground hover:bg-primary/90 max-md:min-h-9 max-md:px-3"
+              >
+                {isClaudeAiConnector(s.name, s.scope) ? "Connect" : "Sign in"}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      <McpSignInDialog
+        serverName={signingIn}
+        project={project}
+        onClose={() => setSigningIn(null)}
+        onSignedIn={() => void load(true)}
+      />
+    </>
+  );
+}

package/src/web/components/mcp-auth/use-mcp-sign-in-flow.ts

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  startMcpAuth, getMcpAuthFlow, submitMcpAuthCallback, confirmMcpAuth, cancelMcpAuth,
+  type McpAuthFlow,
+} from "@/lib/api-mcp-auth";
+import { useSettingsStore } from "@/stores/settings-store";
+
+const POLL_MS = 2_000;
+
+function isOpen(flow: McpAuthFlow | null): boolean {
+  return flow?.status === "waiting" || flow?.status === "completing";
+}
+
+/**
+ * Drives one MCP sign-in while `serverName` is set: starts the flow, polls it until it
+ * settles, and cancels it if the caller goes away first — an abandoned flow would otherwise
+ * hold a Claude subprocess open for its full ten minutes.
+ */
+export function useMcpSignInFlow(
+  serverName: string | null,
+  project: string | undefined,
+  onSignedIn?: (serverName: string) => void,
+) {
+  const [flow, setFlow] = useState<McpAuthFlow | null>(null);
+  const [starting, setStarting] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const flowRef = useRef<McpAuthFlow | null>(null);
+  const onSignedInRef = useRef(onSignedIn);
+  onSignedInRef.current = onSignedIn;
+  const reportedRef = useRef<string | null>(null);
+
+  const apply = useCallback((next: McpAuthFlow) => {
+    const current = flowRef.current;
+    // A poll that left before a submit settled the flow can land after it; an outcome
+    // never goes back to "waiting".
+    if (current?.id === next.id && !isOpen(current) && isOpen(next)) return;
+    flowRef.current = next;
+    setFlow(next);
+    if (next.status === "done" && reportedRef.current !== next.id) {
+      reportedRef.current = next.id;
+      // Signed in, so no longer a server the user chose to ignore: if it ever needs a
+      // sign-in again, the chat bar should say so.
+      useSettingsStore.getState().undismissMcpSignIn(next.serverName);
+      onSignedInRef.current?.(next.serverName);
+    }
+  }, []);
+
+  // Bumped by every start and every teardown, so a start that resolves late — StrictMode
+  // runs the opening effect twice, and the server cancels the first flow when the second
+  // begins — can neither overwrite the live flow nor outlive the dialog.
+  const genRef = useRef(0);
+
+  const start = useCallback(async () => {
+    if (!serverName) return;
+    const gen = ++genRef.current;
+    setStarting(true);
+    setError(null);
+    setFlow(null);
+    flowRef.current = null;
+    try {
+      const next = await startMcpAuth(serverName, project);
+      if (gen !== genRef.current) {
+        if (isOpen(next)) void cancelMcpAuth(next.id).catch(() => {});
+        return;
+      }
+      apply(next);
+    } catch (e) {
+      if (gen === genRef.current) setError((e as Error).message);
+    } finally {
+      if (gen === genRef.current) setStarting(false);
+    }
+  }, [serverName, project, apply]);
+
+  // Start when opened; cancel whatever is still open when closed or unmounted.
+  useEffect(() => {
+    if (!serverName) return;
+    void start();
+    return () => {
+      genRef.current++;
+      const open = flowRef.current;
+      if (open && isOpen(open)) void cancelMcpAuth(open.id).catch(() => {});
+      flowRef.current = null;
+    };
+  }, [serverName, start]);
+
+  const flowId = flow?.id;
+  const polling = isOpen(flow);
+  useEffect(() => {
+    if (!flowId || !polling) return;
+    const timer = setInterval(() => {
+      getMcpAuthFlow(flowId).then(apply).catch((e) => {
+        // The server no longer knows this flow (restarted, or it was cancelled elsewhere):
+        // end it here too, so the dialog offers "Try again" instead of spinning forever.
+        const current = flowRef.current;
+        if (current?.id === flowId) apply({ ...current, status: "failed", authUrl: undefined, error: (e as Error).message });
+      });
+    }, POLL_MS);
+    return () => clearInterval(timer);
+  }, [flowId, polling, apply]);
+
+  const run = useCallback(async (action: (id: string) => Promise<McpAuthFlow>) => {
+    const current = flowRef.current;
+    if (!current) return;
+    setBusy(true);
+    setError(null);
+    try {
+      apply(await action(current.id));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }, [apply]);
+
+  const submitCallback = useCallback((url: string) => run((id) => submitMcpAuthCallback(id, url)), [run]);
+  const confirm = useCallback(() => run(confirmMcpAuth), [run]);
+
+  return { flow, starting, busy, error, retry: start, submitCallback, confirm };
+}

package/src/web/components/settings/ai-settings-section.tsx

@@ -15,6 +15,7 @@ import { api } from "@/lib/api-client";
 import { ProviderBadge } from "@/components/chat/provider-selector";
 import { openSettings } from "./open-settings";
 import { CodexContextSettings } from "./codex-context-settings";
+import { McpSignInList } from "@/components/mcp-auth/mcp-sign-in-list";
 import type { ModelOption } from "../../../types/chat";
 
 const EFFORT_OPTIONS = [
@@ -394,6 +395,16 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
                 onCheckedChange={(v) => handleSave("inherit_claude_mcp", v)}
               />
             </div>
+
+            <div className={fieldGap}>
+              <Label className={compact ? labelSize : undefined}>MCP sign-in</Label>
+              <p className={`${compact ? "text-[9px]" : "text-[11px]"} text-muted-foreground`}>
+                Servers that use OAuth stay unavailable to Claude until someone signs in. Project-scoped servers are listed in the project's AI Resources panel.
+              </p>
+              <div className="-mx-2">
+                <McpSignInList showWhenEmpty />
+              </div>
+            </div>
           </>
         )}
 

package/src/web/hooks/use-chat.ts

@@ -65,6 +65,8 @@ interface UseChatReturn {
   pendingApproval: ApprovalRequest | null;
   contextWindowPct: number | null;
   compactStatus: "compacting" | null;
+  /** MCP servers this session's subprocess reported as needing a sign-in. */
+  mcpNeedsAuth: string[];
   statusMessage: string | null;
   sessionTitle: string | null;
   /**
@@ -150,6 +152,8 @@ export function useChat(
   const [pendingApproval, setPendingApproval] = useState<ApprovalRequest | null>(null);
   const [contextWindowPct, setContextWindowPct] = useState<number | null>(null);
   const [compactStatus, setCompactStatus] = useState<"compacting" | null>(null);
+  /** MCP servers this session's subprocess reported as needing a sign-in. */
+  const [mcpNeedsAuth, setMcpNeedsAuth] = useState<string[]>([]);
   const [backgroundShells, setBackgroundShells] = useState<BackgroundShell[]>([]);
   const backgroundShellsRef = useRef<BackgroundShell[]>([]);
   const [statusMessage, setStatusMessage] = useState<string | null>(null);
@@ -862,6 +866,12 @@ export function useChat(
       return;
     }
 
+    if ((data as any).type === "mcp_status") {
+      const list = (data as any).needsAuth;
+      setMcpNeedsAuth(Array.isArray(list) ? list : []);
+      return;
+    }
+
     // Handle compact status events
     if ((data as any).type === "compact_status") {
       const status = (data as any).status;
@@ -951,6 +961,7 @@ export function useChat(
       // Sync compact indicator from authoritative server state (covers reconnect).
       // state.compactStatus is "compacting" | null — treat undefined as null for back-compat.
       setCompactStatus(state.compactStatus === "compacting" ? "compacting" : null);
+      setMcpNeedsAuth(Array.isArray(state.mcpNeedsAuth) ? state.mcpNeedsAuth : []);
       // If idle, refetch history (completed turns) and hide overlay.
       // Skip when nothing could have changed: the phase was already idle locally
       // and the full transcript finished loading moments ago — on boot the WS
@@ -1109,6 +1120,8 @@ export function useChat(
     setPendingApproval(null);
     if (approvalToastRef.current != null) { toast.dismiss(approvalToastRef.current); approvalToastRef.current = null; }
     setCompactStatus(null);
+    // Another session's subprocess saw another MCP state; its session_state brings its own.
+    setMcpNeedsAuth([]);
     // Clear ephemeral pre-compact expansions on session change
     setExpansions(new Map());
     // Drop the previous session's version groups. Keeping them would let the
@@ -1516,6 +1529,7 @@ export function useChat(
     pendingApproval,
     contextWindowPct,
     compactStatus,
+    mcpNeedsAuth,
     statusMessage,
     sessionTitle,
     /** Account the server last reported for this session — beats the polled usage label. */