@robota-sdk/agent-ui-web 0.0.0-stage → 3.0.0-beta.100

package/src/components/SessionSurfaceChrome.tsx

@@ -0,0 +1,319 @@
+import { useProductIdentity } from '../product-identity.js';
+import { X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+import { ProductWordmark } from './Brand.js';
+
+import type { ISessionNotice } from '../hooks/session-client-types.js';
+import type { IWsSessionState } from '../hooks/useSessionClient.js';
+
+const STATUS: Record<string, { dot: string; label: string }> = {
+  connected: { dot: 'bg-accent status-glow', label: 'Connected' },
+  connecting: { dot: 'bg-warning animate-pulse', label: 'Connecting…' },
+  disconnected: { dot: 'bg-subtle', label: 'Disconnected' },
+  error: { dot: 'bg-destructive', label: 'Connection error' },
+};
+
+/** #3282 §4c: every view the primary nav can show — 'project' is always offered (desktop and
+ *  browser alike); 'usage' only where the host opted the surface into it. */
+export type TSessionView = 'chat' | 'usage' | 'project';
+
+const VIEW_LABEL: Readonly<Record<TSessionView, string>> = {
+  chat: 'Chat',
+  usage: 'Usage',
+  project: 'Project',
+};
+
+/**
+ * #3289 §1 — the folder this session works in, wherever `document.title` is settable: a page (the
+ * browser tab) and the desktop window that loads it (Electron follows the page's title unless told
+ * otherwise, and nothing in `apps/agent-app/electron/main.ts` overrides it — see its own SPEC note).
+ * Absent while the host has not said, so a not-yet-connected surface keeps whatever title it loaded
+ * with rather than announcing "undefined — the agent".
+ */
+function useWorkspaceDocumentTitle(workspace: { readonly name: string } | undefined): void {
+  const { identity } = useProductIdentity();
+  useEffect(() => {
+    if (typeof document === 'undefined' || workspace === undefined) return;
+    document.title = `${workspace.name} — ${identity.displayName}`;
+  }, [workspace, identity.displayName]);
+}
+
+/**
+ * The bar over the conversation: the app's name when no sidebar carries it, the workspace folder and
+ * the current session's title, the Chat / Usage / Project switch, and the connection state. The
+ * state is a dot while all is well and says itself in words once it is not.
+ */
+export function SessionTitleBar({
+  status,
+  surface,
+  title,
+  workspace,
+  showBrand,
+  view,
+  onView,
+  personalUsageEnabled,
+  connectionLost = false,
+}: {
+  status: string;
+  surface?: string;
+  title?: string | null;
+  /** The folder this session works in (#3289 §1); absent when the host has not said. */
+  workspace?: { readonly name: string; readonly path: string };
+  showBrand: boolean;
+  view: TSessionView;
+  onView: (view: TSessionView) => void;
+  personalUsageEnabled: boolean;
+  /**
+   * #3282 §2 (part 2): mirrors `ConnectionBanner`'s own "give-up" flag (`useWsSession`'s
+   * `connectionLost`) so this corner indicator can tell exactly when that banner is on screen, to
+   * never say the same thing twice.
+   */
+  connectionLost?: boolean;
+}): React.ReactElement {
+  const state = STATUS[status] ?? STATUS.disconnected;
+  useWorkspaceDocumentTitle(workspace);
+  // #3282 §2 (part 2): the same "has this surface ever connected" rule `ConnectionBanner` uses to
+  // decide whether it has anything to show — kept in step here so the corner text disappears exactly
+  // when, and only when, the banner takes over saying it (never both, never neither).
+  const everConnectedRef = useRef(false);
+  useEffect(() => {
+    if (status === 'connected') everConnectedRef.current = true;
+  }, [status]);
+  const bannerShown = status !== 'connected' && (connectionLost || everConnectedRef.current);
+  // #3282 §4c principle 4 (#3277): everything the agent implements is usable from the GUI through
+  // organized screens — the Project panel (git status/diff, project memory) is one, offered next to
+  // Chat on every surface, desktop and browser alike; Usage stays surface-gated.
+  const items: readonly TSessionView[] = personalUsageEnabled
+    ? ['chat', 'usage', 'project']
+    : ['chat', 'project'];
+  return (
+    <header
+      className="agent-gui-status flex h-12 flex-shrink-0 items-center gap-3 px-5"
+      data-status={status}
+    >
+      {showBrand ? <ProductWordmark surface={surface} /> : null}
+      {/* The usage/project views title themselves; the chat view is titled by its session and workspace. */}
+      {view === 'chat' && title ? (
+        <h1 className="min-w-0 truncate text-[14px] font-medium text-foreground/90">{title}</h1>
+      ) : null}
+      {view === 'chat' && workspace ? (
+        <span
+          title={workspace.path}
+          className="min-w-0 flex-shrink truncate text-[13px] text-muted-foreground"
+        >
+          {workspace.name}
+        </span>
+      ) : null}
+      <div className="ml-auto flex items-center gap-3">
+        <nav className="flex items-center rounded-lg bg-raised p-0.5" aria-label="Primary">
+          {items.map((item) => (
+            <button
+              key={item}
+              type="button"
+              aria-pressed={view === item}
+              onClick={() => onView(item)}
+              className={`rounded-md px-3 py-1 text-[13px] font-medium transition-colors ${
+                view === item
+                  ? 'bg-card text-foreground shadow-sm shadow-black/25'
+                  : 'text-muted-foreground hover:text-foreground'
+              }`}
+            >
+              {VIEW_LABEL[item]}
+            </button>
+          ))}
+        </nav>
+        {bannerShown ? null : (
+          <span className="flex items-center gap-2" title={state.label}>
+            <span className={`h-2 w-2 rounded-full ${state.dot}`} />
+            {status === 'connected' ? (
+              <span className="sr-only">{status}</span>
+            ) : (
+              <span className="text-[13px] text-muted-foreground">{state.label}</span>
+            )}
+          </span>
+        )}
+      </div>
+    </header>
+  );
+}
+
+/** The column every part of the conversation shares (matches `SessionSurface`'s `COLUMN`). */
+const BANNER_COLUMN = 'mx-auto w-full max-w-[760px] px-6';
+
+/**
+ * A connection that drops after a working session (issue #3280 §5): a banner directly above the
+ * conversation — never a full-screen replacement — so the conversation and its history stay visible
+ * and scrollable throughout. Shown as soon as the drop happens; says nothing on the very first
+ * connect, because nothing has been lost yet.
+ */
+export function ConnectionBanner({
+  status,
+  connectionLost,
+  onReconnect,
+}: {
+  status: string;
+  /** Retries ran out: the runtime is not coming back by itself (`useWsSession`'s `connectionLost`). */
+  connectionLost: boolean;
+  /** Present only when the host can restart the runtime (desktop); absent in the browser. */
+  onReconnect?: () => Promise<void>;
+}): React.ReactElement | null {
+  const everConnectedRef = useRef(false);
+  useEffect(() => {
+    if (status === 'connected') everConnectedRef.current = true;
+  }, [status]);
+  const { identity } = useProductIdentity();
+  const [reconnecting, setReconnecting] = useState(false);
+  const [failed, setFailed] = useState<string | null>(null);
+
+  if (status === 'connected') return null;
+  if (!connectionLost && !everConnectedRef.current) return null;
+
+  if (!connectionLost) {
+    return (
+      <div role="status" className={`${BANNER_COLUMN} flex-shrink-0 pt-3`}>
+        <div className="flex items-center gap-2.5 rounded-xl bg-warning/15 px-4 py-2.5 text-[13.5px] text-foreground">
+          <span className="h-2 w-2 flex-shrink-0 animate-pulse rounded-full bg-warning" aria-hidden="true" />
+          Connection lost. Reconnecting…
+        </div>
+      </div>
+    );
+  }
+
+  const reconnect = (): void => {
+    if (!onReconnect) return;
+    setReconnecting(true);
+    setFailed(null);
+    onReconnect().catch((error: unknown) => {
+      setReconnecting(false);
+      setFailed(error instanceof Error ? error.message : String(error));
+    });
+  };
+
+  return (
+    <div role="alert" className={`${BANNER_COLUMN} flex-shrink-0 pt-3`}>
+      <div className="flex flex-col gap-2 rounded-xl bg-destructive/15 px-4 py-3 text-[13.5px] text-foreground">
+        <div className="flex flex-wrap items-center gap-3">
+          <span className="h-2 w-2 flex-shrink-0 rounded-full bg-destructive" aria-hidden="true" />
+          <span className="min-w-0 flex-1">
+            {identity.displayName} stopped.
+            {!onReconnect && (
+              <>
+                {' '}
+                Run <code className="font-mono">{identity.cliName} --serve --open</code> again to reopen it.
+              </>
+            )}
+          </span>
+          {onReconnect ? (
+            <button
+              type="button"
+              onClick={reconnect}
+              disabled={reconnecting}
+              className="flex-shrink-0 rounded-lg bg-primary px-3 py-1.5 text-[13px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
+            >
+              {reconnecting ? 'Reconnecting…' : 'Reconnect'}
+            </button>
+          ) : null}
+        </div>
+        {failed ? <p className="text-destructive">{failed}</p> : null}
+      </div>
+    </div>
+  );
+}
+
+/** The built-in providers whose id does not just-capitalize into their real name (`openai` → `OpenAI`). */
+const PROVIDER_DISPLAY_NAMES: Readonly<Record<string, string>> = {
+  openai: 'OpenAI',
+  deepseek: 'DeepSeek',
+};
+
+/** `anthropic` → `Anthropic`; a name with its own casing (`openai` → `OpenAI`) uses that instead. */
+function displayProvider(provider: string | undefined): string {
+  if (provider === undefined || provider.length === 0) return 'The provider';
+  return PROVIDER_DISPLAY_NAMES[provider] ?? provider[0].toUpperCase() + provider.slice(1);
+}
+
+/**
+ * A provider/session error classified at the wire boundary (#3289 §3) as one plain sentence naming
+ * what happened and, where there is one, the next step — `null` for a notice this classification does
+ * not cover, which keeps showing its own `message` instead.
+ *
+ * `model_unavailable` names `notice.model` — captured on the notice when it was created — and never
+ * the session's current model: a still-open notice must keep blaming the model that actually failed
+ * even after the person switches to a different one (the very fix the notice suggests).
+ */
+function noticeSentence(notice: ISessionNotice): string | null {
+  const provider = displayProvider(notice.provider);
+  switch (notice.code) {
+    case 'auth':
+      return `${provider} rejected the API key. Check the key for this provider.`;
+    case 'rate_limit': {
+      const wait =
+        notice.retryAfterSeconds !== undefined
+          ? `${notice.retryAfterSeconds} second${notice.retryAfterSeconds === 1 ? '' : 's'}`
+          : 'a moment';
+      return `${provider} is limiting requests. Try again in ${wait}.`;
+    }
+    case 'model_unavailable':
+      return notice.model
+        ? `The model "${notice.model}" isn't available with this key.`
+        : "The model isn't available with this key.";
+    case 'network':
+      return `Can't reach ${provider}. Check your connection.`;
+    case 'provider':
+      return `${provider} returned an error.`;
+    default:
+      return null;
+  }
+}
+
+/**
+ * Session outcomes and protocol failures, as dismissible toasts over the top-right corner: they stay until
+ * dismissed, and never push the conversation or the composer out of view. Command output is not
+ * here — it belongs to the conversation. A provider error classified at the wire boundary shows one
+ * plain sentence with the next step; its raw text sits behind "Details" rather than as the headline.
+ */
+export function SessionNotices({ state }: { state: IWsSessionState }): React.ReactElement | null {
+  const notices = state.sessionNotices ?? [];
+  if (notices.length === 0) return null;
+  return (
+    <div className="pointer-events-none absolute right-4 top-16 z-40 flex w-[min(400px,calc(100%-32px))] flex-col gap-2">
+      {notices.slice(-3).map((notice) => {
+        const sentence = noticeSentence(notice);
+        const compacted = notice.kind === 'context-compacted';
+        return (
+          <div
+            key={notice.id}
+            role={compacted ? 'status' : 'alert'}
+            className="gui-rise pointer-events-auto flex items-start gap-3 rounded-xl bg-popover px-4 py-3 text-[14px] leading-snug text-popover-foreground shadow-xl shadow-black/30"
+          >
+            <span
+              className={`mt-[7px] h-2 w-2 flex-shrink-0 rounded-full ${compacted ? 'bg-primary' : 'bg-destructive'}`}
+            />
+            <span className="max-h-40 flex-1 overflow-y-auto whitespace-pre-wrap break-words">
+              {sentence ?? notice.message}
+              {sentence && (
+                <details className="mt-1.5">
+                  <summary className="cursor-pointer text-[12.5px] text-muted-foreground hover:text-foreground">
+                    Details
+                  </summary>
+                  <p className="mt-1 whitespace-pre-wrap break-words text-[12.5px] text-muted-foreground">
+                    {notice.message}
+                  </p>
+                </details>
+              )}
+            </span>
+            <button
+              type="button"
+              aria-label="Dismiss notice"
+              onClick={() => state.dismissSessionNotice?.(notice.id)}
+              className="-mr-1 rounded-md p-1 text-muted-foreground hover:bg-hover hover:text-foreground"
+            >
+              <X size={15} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/SettingsFields.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import React, { useEffect, useId, useState } from 'react';
+
+import type { ISettingsChoice } from '@robota-sdk/agent-interface-session';
+
+const SELECT_CLASS =
+  'min-w-[160px] flex-shrink-0 rounded-lg border border-border bg-raised px-2.5 py-1.5 text-[13.5px] text-foreground';
+
+/**
+ * One row of the settings form: a plain label, a pop-up menu of `{id, label, description}` choices
+ * (never a bare id) and, under it, the description of whichever choice is currently selected — HIG's
+ * "a short plain description sits under each control." Selecting a choice applies AT ONCE.
+ */
+export function SettingsPopupField({
+  label,
+  note,
+  value,
+  options,
+  onChange,
+  disabled = false,
+}: {
+  label: string;
+  /** A fixed note shown under the control instead of the selected choice's own description. */
+  note?: string;
+  value: string;
+  options: readonly ISettingsChoice[];
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}): React.ReactElement {
+  const id = useId();
+  const selected = options.find((option) => option.id === value);
+  const description = note ?? selected?.description;
+  return (
+    <div className="flex flex-col gap-1.5 border-b border-border/60 py-3.5 last:border-b-0">
+      <div className="flex items-center justify-between gap-4">
+        <label htmlFor={id} className="text-[14px] font-medium text-foreground">
+          {label}
+        </label>
+        <select
+          id={id}
+          value={options.some((option) => option.id === value) ? value : ''}
+          disabled={disabled}
+          onChange={(event) => onChange(event.target.value)}
+          className={SELECT_CLASS}
+        >
+          {!options.some((option) => option.id === value) ? (
+            <option value="" disabled>
+              {value || 'Unset'}
+            </option>
+          ) : null}
+          {options.map((option) => (
+            <option key={option.id} value={option.id}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      {description ? (
+        <p className="text-[12.5px] leading-snug text-muted-foreground">{description}</p>
+      ) : null}
+    </div>
+  );
+}
+
+const OTHER = '__other__';
+
+/**
+ * The language control: a pop-up of the runtime's recommended languages, plus "Other…" — the
+ * language is free text (any string the runtime accepts), so the recommended list is a shortcut,
+ * never a validated enum. Applies on Enter or on leaving the free-text field.
+ */
+export function SettingsLanguageField({
+  label,
+  current,
+  recommended,
+  note,
+  onChange,
+  disabled = false,
+}: {
+  label: string;
+  current: string;
+  recommended: readonly ISettingsChoice[];
+  note: string;
+  onChange: (language: string) => void;
+  disabled?: boolean;
+}): React.ReactElement {
+  const id = useId();
+  const isRecommended = recommended.some((choice) => choice.id === current);
+  const [showOther, setShowOther] = useState(!isRecommended && current.length > 0);
+  const [draft, setDraft] = useState(isRecommended ? '' : current);
+
+  // A fresh snapshot (e.g. after a switch away and back) re-derives whether "Other…" is showing.
+  useEffect(() => {
+    const stillRecommended = recommended.some((choice) => choice.id === current);
+    setShowOther(!stillRecommended && current.length > 0);
+    setDraft(stillRecommended ? '' : current);
+  }, [current, recommended]);
+
+  function commitDraft(): void {
+    const trimmed = draft.trim();
+    if (trimmed.length > 0 && trimmed !== current) onChange(trimmed);
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5 border-b border-border/60 py-3.5 last:border-b-0">
+      <div className="flex items-center justify-between gap-4">
+        <label htmlFor={id} className="text-[14px] font-medium text-foreground">
+          {label}
+        </label>
+        <select
+          id={id}
+          disabled={disabled}
+          value={showOther ? OTHER : isRecommended ? current : ''}
+          onChange={(event) => {
+            if (event.target.value === OTHER) {
+              setShowOther(true);
+              return;
+            }
+            setShowOther(false);
+            onChange(event.target.value);
+          }}
+          className={SELECT_CLASS}
+        >
+          {!isRecommended && !showOther ? (
+            <option value="" disabled>
+              {current || 'Unset'}
+            </option>
+          ) : null}
+          {recommended.map((choice) => (
+            <option key={choice.id} value={choice.id}>
+              {choice.label}
+            </option>
+          ))}
+          <option value={OTHER}>Other…</option>
+        </select>
+      </div>
+      {showOther ? (
+        <input
+          type="text"
+          aria-label={`${label} — other`}
+          placeholder="Language code, e.g. fr"
+          value={draft}
+          disabled={disabled}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={commitDraft}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              commitDraft();
+            }
+          }}
+          className="rounded-lg border border-border bg-raised px-2.5 py-1.5 text-[13.5px] text-foreground"
+        />
+      ) : null}
+      <p className="text-[12.5px] leading-snug text-muted-foreground">{note}</p>
+    </div>
+  );
+}

package/src/components/SettingsGeneralSection.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { SettingsLanguageField, SettingsPopupField } from './SettingsFields.js';
+
+import type { ISettingsSnapshot, TSettingsPatch } from '@robota-sdk/agent-interface-session';
+
+/**
+ * Language, output style and preset — reusing the exact choices and descriptions the runtime
+ * already builds for `/language`, `/output-style` and `/preset` (#3282 §4a). Never internal ids:
+ * every pop-up shows the runtime's human labels.
+ */
+export function SettingsGeneralSection({
+  snapshot,
+  onUpdate,
+  onRequestPresetChange,
+}: {
+  snapshot: ISettingsSnapshot;
+  onUpdate: (patch: TSettingsPatch) => void;
+  /** Routed through the parent so it can confirm a preset that would skip every check. */
+  onRequestPresetChange: (presetId: string) => void;
+}): React.ReactElement {
+  return (
+    <section aria-labelledby="settings-general-heading">
+      <h3 id="settings-general-heading" className="sr-only">
+        General
+      </h3>
+      <SettingsLanguageField
+        label="Language"
+        current={snapshot.language.current}
+        recommended={snapshot.language.recommended}
+        note={snapshot.language.appliesNote}
+        onChange={(language) => onUpdate({ field: 'language', language })}
+      />
+      <SettingsPopupField
+        label="Output style"
+        value={snapshot.outputStyle.current}
+        options={snapshot.outputStyle.choices}
+        onChange={(styleId) => onUpdate({ field: 'outputStyle', styleId })}
+      />
+      <SettingsPopupField
+        label="Preset"
+        note="Applies to this session — it is not saved for the next one."
+        value={snapshot.preset.current}
+        options={snapshot.preset.choices}
+        onChange={onRequestPresetChange}
+      />
+    </section>
+  );
+}

package/src/components/SettingsMcpSection.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { ChevronDown, ChevronRight, RefreshCw } from 'lucide-react';
+import React, { useId, useState } from 'react';
+
+import type { ISettingsMcpServer, ISettingsSnapshot } from '@robota-sdk/agent-interface-session';
+
+const STATUS_LABEL: Readonly<Record<ISettingsMcpServer['status'], string>> = {
+  connected: 'Connected',
+  failed: 'Failed',
+  disabled: 'Disabled',
+};
+
+const STATUS_CLASS: Readonly<Record<ISettingsMcpServer['status'], string>> = {
+  connected: 'text-success',
+  failed: 'text-destructive',
+  disabled: 'text-muted-foreground',
+};
+
+function ServerRow({
+  server,
+  expanded,
+  onToggleExpanded,
+  onToggleEnabled,
+}: {
+  server: ISettingsMcpServer;
+  expanded: boolean;
+  onToggleExpanded: () => void;
+  onToggleEnabled: (enabled: boolean) => void;
+}): React.ReactElement {
+  const labelId = useId();
+  const canExpand = server.toolNames.length > 0;
+  return (
+    <li className="border-b border-border/60 py-3 last:border-b-0">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <button
+            type="button"
+            onClick={canExpand ? onToggleExpanded : undefined}
+            disabled={!canExpand}
+            aria-expanded={canExpand ? expanded : undefined}
+            className="flex w-full items-center gap-1.5 text-left disabled:cursor-default"
+          >
+            {canExpand ? (
+              expanded ? (
+                <ChevronDown size={14} strokeWidth={1.75} className="flex-shrink-0 text-muted-foreground" />
+              ) : (
+                <ChevronRight size={14} strokeWidth={1.75} className="flex-shrink-0 text-muted-foreground" />
+              )
+            ) : (
+              <span className="w-[14px] flex-shrink-0" />
+            )}
+            <span id={labelId} className="truncate text-[14px] font-medium text-foreground">
+              {server.name}
+            </span>
+          </button>
+          <p className="mt-0.5 text-[12.5px] text-muted-foreground">
+            {server.scopeLabel} · <span className={STATUS_CLASS[server.status]}>{STATUS_LABEL[server.status]}</span>
+            {server.status === 'failed' && server.statusReason ? `: ${server.statusReason}` : ''}
+            {' · '}
+            {server.toolNames.length === 1 ? '1 tool' : `${server.toolNames.length} tools`}
+          </p>
+          {expanded && canExpand ? (
+            <ul className="mt-2 flex flex-col gap-0.5 pl-[20px]">
+              {server.toolNames.map((toolName) => (
+                <li key={toolName} className="truncate font-mono text-[12px] text-muted-foreground">
+                  {toolName}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={server.enabled}
+          aria-labelledby={labelId}
+          onClick={() => onToggleEnabled(!server.enabled)}
+          className={`relative h-6 w-11 flex-shrink-0 rounded-full transition-colors ${
+            server.enabled ? 'bg-primary' : 'bg-raised'
+          }`}
+        >
+          <span
+            className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${
+              server.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
+            }`}
+          />
+        </button>
+      </div>
+    </li>
+  );
+}
+
+/**
+ * The MCP Servers section (#3282 §4 part b-2): every configured server's name, where it is
+ * configured, its live connection status and tool count, an enable/disable switch (approve/reject),
+ * an expandable list of its tool names, and a section-level Reload. Adding or editing a server is
+ * left out — the runtime has no command path that writes MCP config (recorded in
+ * `packages/agent-gui-web/docs/SPEC.md`).
+ */
+export function SettingsMcpSection({
+  snapshot,
+  onToggleServer,
+  onReload,
+  reloading,
+}: {
+  snapshot: ISettingsSnapshot;
+  onToggleServer: (serverId: string, enabled: boolean) => void;
+  onReload: () => void;
+  reloading: boolean;
+}): React.ReactElement {
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(new Set());
+  const { servers } = snapshot.mcp;
+
+  function toggleExpanded(id: string): void {
+    setExpandedIds((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  return (
+    <section aria-labelledby="settings-mcp-heading" className="flex flex-col gap-3">
+      <div className="flex items-center justify-between gap-3">
+        <h3 id="settings-mcp-heading" className="text-[14px] font-medium text-foreground">
+          MCP Servers
+        </h3>
+        <button
+          type="button"
+          onClick={onReload}
+          disabled={reloading}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-raised px-2.5 py-1.5 text-[13px] text-foreground hover:bg-hover disabled:opacity-60"
+        >
+          <RefreshCw size={13} strokeWidth={1.75} className={reloading ? 'animate-spin' : ''} />
+          Reload servers
+        </button>
+      </div>
+      {servers.length === 0 ? (
+        <p className="text-[13px] leading-snug text-muted-foreground">No MCP servers are configured.</p>
+      ) : (
+        <ul>
+          {servers.map((server) => (
+            <ServerRow
+              key={server.id}
+              server={server}
+              expanded={expandedIds.has(server.id)}
+              onToggleExpanded={() => toggleExpanded(server.id)}
+              onToggleEnabled={(enabled) => onToggleServer(server.id, enabled)}
+            />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}