@hienlh/ppm 0.22.8 → 0.22.10

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. */

package/src/web/lib/api-mcp-auth.ts

@@ -0,0 +1,54 @@
+import { api } from "./api-client";
+
+export type McpAuthFlowStatus = "waiting" | "completing" | "done" | "failed" | "expired" | "cancelled";
+
+export interface McpAuthFlow {
+  id: string;
+  serverName: string;
+  status: McpAuthFlowStatus;
+  /** Open this to sign in. Absent once the flow has settled. */
+  authUrl?: string;
+  /** False for a claude.ai connector: nothing redirects back, the user confirms instead. */
+  callbackExpected: boolean;
+  /** "localhost": the browser returns to the host machine's loopback, which only works on that machine. */
+  redirectScheme?: "localhost" | "custom";
+  error?: string;
+}
+
+export interface McpServerState {
+  name: string;
+  status: string;
+  error?: string;
+  scope?: string;
+  source?: string;
+}
+
+export function getMcpAuthStatus(project?: string, fresh = false): Promise<McpServerState[]> {
+  const params = new URLSearchParams();
+  if (project) params.set("project", project);
+  if (fresh) params.set("fresh", "1");
+  const qs = params.toString();
+  return api.get<McpServerState[]>(`/api/mcp-auth/status${qs ? `?${qs}` : ""}`);
+}
+
+export function startMcpAuth(server: string, project?: string): Promise<McpAuthFlow> {
+  // The origin lets the server have the sign-in return to PPM itself, which is what makes
+  // it work from a phone; the server only uses it when it matches the request's host.
+  return api.post<McpAuthFlow>("/api/mcp-auth/start", { server, project, origin: window.location.origin });
+}
+
+export function getMcpAuthFlow(id: string): Promise<McpAuthFlow> {
+  return api.get<McpAuthFlow>(`/api/mcp-auth/flows/${encodeURIComponent(id)}`);
+}
+
+export function submitMcpAuthCallback(id: string, url: string): Promise<McpAuthFlow> {
+  return api.post<McpAuthFlow>(`/api/mcp-auth/flows/${encodeURIComponent(id)}/callback`, { url });
+}
+
+export function confirmMcpAuth(id: string): Promise<McpAuthFlow> {
+  return api.post<McpAuthFlow>(`/api/mcp-auth/flows/${encodeURIComponent(id)}/confirm`, {});
+}
+
+export function cancelMcpAuth(id: string): Promise<void> {
+  return api.del(`/api/mcp-auth/flows/${encodeURIComponent(id)}`);
+}

package/src/web/stores/settings-store.ts

@@ -65,6 +65,10 @@ interface SettingsState {
   /** User ticked "don't show again" on the remote-desktop warning that precedes every open
    *  (`remote-desktop-warning-gate.tsx`); once true the viewer connects straight away. */
   remoteDesktopWarningDismissed: boolean;
+  /** MCP servers hidden from the chat's sign-in bar. The bar comes back only for a server
+   *  outside this list; a successful sign-in takes the server off it, so a later expiry
+   *  is announced again. Synced like other UI prefs. */
+  mcpSignInDismissed: string[];
   /** Hold a screen wake lock while any chat turn is running, so a propped-up tablet does not
    *  dim mid-answer. Defaults on; see `hooks/use-wake-lock.ts`. */
   keepScreenAwake: boolean;
@@ -148,6 +152,8 @@ interface SettingsState {
   setExplorerSkin: (pref: ExplorerSkinPref) => void;
   toggleRemoteDesktopStatsVisible: () => void;
   setRemoteDesktopWarningDismissed: (dismissed: boolean) => void;
+  dismissMcpSignIn: (serverNames: string[]) => void;
+  undismissMcpSignIn: (serverName: string) => void;
   setKeepScreenAwake: (enabled: boolean) => void;
   fetchServerInfo: () => Promise<void>;
   /** Re-push the in-memory theme selection to the server (see the action for why). */
@@ -177,6 +183,7 @@ interface PersistedSettings {
   explorerSkin?: ExplorerSkinPref;
   remoteDesktopStatsVisible?: boolean;
   remoteDesktopWarningDismissed?: boolean;
+  mcpSignInDismissed?: string[];
   keepScreenAwake?: boolean;
   remoteDesktopQuality?: QualityChoice;
   remoteDesktopViewStyle?: ViewStyle;
@@ -242,6 +249,15 @@ const DEFAULT_DB_EXPANDED: DbSidebarExpanded = { conns: [], groups: ["__ungroupe
 const DB_EXPANDED_CAPS = { conns: 200, groups: 200, tables: 500 } as const;
 
 /** Coerce stored/server data into a valid expansion set; null when unusable. */
+/** Same bound as the server's validator for the pref. */
+const MAX_NAME_LIST = 200;
+
+/** A list of names read back from storage or the server, or null when it is not one. */
+function sanitizeNameList(value: unknown): string[] | null {
+  if (!Array.isArray(value)) return null;
+  return value.filter((s): s is string => typeof s === "string" && s.length > 0 && s.length <= 200).slice(-MAX_NAME_LIST);
+}
+
 function sanitizeDbExpanded(value: unknown): DbSidebarExpanded | null {
   if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
   const v = value as Record<string, unknown>;
@@ -356,6 +372,8 @@ function applyServerUiPrefs(data: Record<string, unknown>) {
   }
   if (typeof data.remoteDesktopStatsVisible === "boolean") patch.remoteDesktopStatsVisible = data.remoteDesktopStatsVisible;
   if (typeof data.remoteDesktopWarningDismissed === "boolean") patch.remoteDesktopWarningDismissed = data.remoteDesktopWarningDismissed;
+  const mcpDismissed = sanitizeNameList(data.mcpSignInDismissed);
+  if (mcpDismissed) patch.mcpSignInDismissed = mcpDismissed;
   if (typeof data.keepScreenAwake === "boolean") patch.keepScreenAwake = data.keepScreenAwake;
   const dbExpanded = sanitizeDbExpanded(data.dbSidebarExpanded);
   if (dbExpanded) patch.dbSidebarExpanded = dbExpanded;
@@ -402,6 +420,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   explorerSkin: (_initial.explorerSkin === "windows" || _initial.explorerSkin === "macos") ? _initial.explorerSkin : "auto",
   remoteDesktopStatsVisible: _initial.remoteDesktopStatsVisible ?? false,
   remoteDesktopWarningDismissed: _initial.remoteDesktopWarningDismissed ?? false,
+  mcpSignInDismissed: sanitizeNameList(_initial.mcpSignInDismissed) ?? [],
   keepScreenAwake: _initial.keepScreenAwake ?? true,
   deviceName: null,
   version: null,
@@ -592,6 +611,21 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     set({ remoteDesktopWarningDismissed: dismissed });
   },
 
+  dismissMcpSignIn: (serverNames) => {
+    const current = get().mcpSignInDismissed;
+    const next = [...current, ...serverNames.filter((n) => !current.includes(n))].slice(-MAX_NAME_LIST);
+    persistUiPref({ mcpSignInDismissed: next });
+    set({ mcpSignInDismissed: next });
+  },
+
+  undismissMcpSignIn: (serverName) => {
+    const current = get().mcpSignInDismissed;
+    if (!current.includes(serverName)) return;
+    const next = current.filter((n) => n !== serverName);
+    persistUiPref({ mcpSignInDismissed: next });
+    set({ mcpSignInDismissed: next });
+  },
+
   setKeepScreenAwake: (enabled) => {
     persistUiPref({ keepScreenAwake: enabled });
     set({ keepScreenAwake: enabled });