shraga 0.1.112 → 0.1.113

package/dist/client/index.html

@@ -13,8 +13,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="/assets/index-Dc1ljSt3.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DIMte_k6.css">
+    <script type="module" crossorigin src="/assets/index-DJ0AgGIu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DIDtPQb-.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shraga",
-  "version": "0.1.112",
+  "version": "0.1.113",
   "description": "The teammate you delegate coding to — a self-hostable, multi-user AI coding agent web UI (Claude Code, with a pluggable engine seam).",
   "type": "module",
   "main": "./src/index.ts",
@@ -79,7 +79,8 @@
     "rehype-highlight": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^2.6.0",
-    "ws": "^8.18.0"
+    "ws": "^8.18.0",
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.14.0",

package/src/client/App.tsx

@@ -35,6 +35,11 @@ import {
 import { useDarkMode } from '@/hooks/useDarkMode';
 import { useUnread } from '@/hooks/useUnread';
 import { ToastStack } from '@/components/Toast';
+import { BackendStatusBanner } from '@/components/BackendStatusBanner';
+import { reportApiFailure, reportApiResponse } from '@/lib/backendHealth';
+import { logger } from '@/lib/debug';
+
+const log = logger.forComponent('App');
 
 function getSessionFromUrl(): string | undefined {
   return new URLSearchParams(window.location.search).get('session') || undefined;
@@ -115,6 +120,9 @@ function AppInner() {
       if (!t) return setAuthorized(false);
       try {
         const res = await fetch('/api/config', { headers: { Authorization: `Bearer ${t}` } });
+        // This raw probe is the FIRST request the app makes, and in the port-hijack incident it was the
+        // one that silently 404'd into an empty shell. Route it through the classifier like the helpers.
+        reportApiResponse('/api/config', res);
         if (res.ok) {
           wasAuthorized.current = true;
           localStorage.setItem('shraga:authorized', '1');
@@ -122,7 +130,7 @@ function AppInner() {
         }
         const body = await res.json().catch(() => ({}));
         if (res.status === 401 && (body.error?.includes('audience') || body.error?.includes('aud'))) {
-          console.warn('[auth] Token audience mismatch — signing out stale session');
+          log.warn('token audience mismatch — signing out stale session');
           logout();
           return;
         }
@@ -132,7 +140,9 @@ function AppInner() {
         }
         if (wasAuthorized.current) return;
         setAuthorized(res.status !== 401 && res.status !== 403);
-      } catch {
+      } catch (err) {
+        reportApiFailure('/api/config', err);
+        log.warn('auth probe could not reach /api/config', err);
         if (wasAuthorized.current) return;
         setAuthorized(true);
       }
@@ -145,7 +155,7 @@ function AppInner() {
     apiFetch('/api/workspace', getToken)
       .then((r) => r.json())
       .then((data: { entries: WorkspaceEntry[] }) => setWorkspaceEntries(data.entries ?? []))
-      .catch((err) => console.warn('[workspace] refresh failed', err));
+      .catch((err) => log.warn('workspace refresh failed', err));
   }, [token, getToken]);
 
   const handleScheduleEvent = useCallback((event: Extract<ServerEvent, { type: `schedule:${string}` }>) => {
@@ -257,15 +267,16 @@ function AppInner() {
   // Load config / skills / workspace / features
   useEffect(() => {
     if (!token) return;
-    apiFetch('/api/config', getToken).then((r) => r.json()).then(setAgentConfig).catch(() => {});
+    apiFetch('/api/config', getToken).then((r) => r.json()).then(setAgentConfig)
+      .catch((err) => log.warn('config load failed', err));
     apiFetch('/api/skills', getToken)
       .then((r) => r.json())
       .then((data: { skills: string[]; builtins: string[] }) => setSkills(data.skills))
-      .catch(() => {});
+      .catch((err) => log.warn('skills load failed', err));
     apiFetch('/api/features', getToken)
       .then((r) => r.json())
       .then((f: { push?: boolean }) => setPushEnabled(!!f.push))
-      .catch(() => {});
+      .catch((err) => log.warn('features load failed', err));
   }, [token, getToken]);
   useEffect(() => {
     refreshWorkspace();
@@ -306,7 +317,18 @@ function AppInner() {
     return <div className="flex h-full items-center justify-center text-muted-foreground text-sm">Loading…</div>;
   }
 
-  if (!user || !token) return <LoginPage mode={mode} needsSetup={needsSetup} onLoginLocal={loginLocal} onRegisterLocal={registerLocal} />;
+  // The banner sits ABOVE the login gate too: a hijacked backend also breaks the auth-mode probe, so
+  // the user would otherwise stare at a sign-in that can never succeed. It stays silent in the ORDINARY
+  // pre-login state, because a healthy /api/auth/mode carries the identity header and clears the store.
+  if (!user || !token)
+    return (
+      <div className="flex h-full flex-col">
+        <BackendStatusBanner />
+        <div className="flex-1 min-h-0">
+          <LoginPage mode={mode} needsSetup={needsSetup} onLoginLocal={loginLocal} onRegisterLocal={registerLocal} />
+        </div>
+      </div>
+    );
 
   if (authorized === null) {
     return <div className="flex h-full items-center justify-center text-muted-foreground text-sm">Verifying access…</div>;
@@ -339,7 +361,9 @@ function AppInner() {
   }
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-full flex-col">
+      <BackendStatusBanner />
+      <div className="flex flex-1 min-h-0">
       {/* Sidebar */}
       {sidebarOpen && (
         <div className="fixed inset-0 z-50 bg-background sm:relative sm:inset-auto sm:z-auto sm:w-64 sm:shrink-0 sm:border-r flex flex-col">
@@ -521,6 +545,7 @@ function AppInner() {
           markRead(sid);
         }}
       />
+      </div>
     </div>
   );
 }

package/src/client/components/BackendStatusBanner.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { AlertTriangle, PlugZap, RefreshCw, ServerCrash, WifiOff } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { type BackendFault, type BackendFaultKind, subscribeBackendHealth } from '@/lib/backendHealth';
+
+/**
+ * Persistent, always-visible banner naming a broken backend, so a user can diagnose a dead page FROM
+ * THE UI instead of opening devtools or asking an agent. Zero props on purpose: it reads the shared
+ * {@link subscribeBackendHealth} store, which the shared fetch helpers and the AgentSocket feed, so a
+ * shell only has to render it once. It clears itself the moment the store reports recovery.
+ *
+ * Mount it ABOVE the login gate as well as inside the authenticated shell. A hijacked backend breaks
+ * the unauthenticated `/api/auth/mode` probe too, so a pre-login user would otherwise face a sign-in
+ * that can never succeed with nothing on screen saying why. It stays silent in the ORDINARY pre-login
+ * state: a healthy probe carries the identity header, and the classifier ignores 401/403 outright.
+ */
+
+const STYLE: Record<BackendFaultKind, { icon: typeof AlertTriangle; classes: string }> = {
+  'wrong-backend': { icon: PlugZap, classes: 'bg-red-600 text-white border-red-700' },
+  offline: { icon: WifiOff, classes: 'bg-red-600 text-white border-red-700' },
+  'server-error': { icon: ServerCrash, classes: 'bg-amber-500 text-amber-950 border-amber-600' },
+  'ws-down': { icon: AlertTriangle, classes: 'bg-amber-500 text-amber-950 border-amber-600' },
+};
+
+export function BackendStatusBanner() {
+  const [fault, setFault] = useState<BackendFault | null>(null);
+  useEffect(() => subscribeBackendHealth(setFault), []);
+
+  if (!fault) return null;
+  const { icon: Icon, classes } = STYLE[fault.kind];
+
+  return (
+    <div
+      role="alert"
+      data-testid="backend-status-banner"
+      data-fault-kind={fault.kind}
+      className={cn('shrink-0 border-b px-3 py-2 text-xs', classes)}
+      style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
+    >
+      <div className="flex items-start gap-2">
+        <Icon className="w-4 h-4 mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <div className="font-semibold">{fault.title}</div>
+          <div className="opacity-90 mt-0.5">{fault.hint}</div>
+          {(fault.path || fault.status !== undefined) && (
+            <div className="opacity-75 mt-0.5 font-mono text-[11px] break-all">
+              {fault.path ?? 'websocket'}
+              {fault.status !== undefined ? ` → ${fault.status}` : ''}
+            </div>
+          )}
+        </div>
+        <button
+          onClick={() => window.location.reload()}
+          className="shrink-0 inline-flex items-center gap-1 rounded bg-white/20 hover:bg-white/30 px-2 py-1 font-semibold transition-colors"
+        >
+          <RefreshCw className="w-3 h-3" />
+          Retry
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/client/components/ConfigPanel.tsx

@@ -6,6 +6,7 @@ import { Textarea } from './ui/textarea';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogBody, DialogFooter } from './ui/dialog';
 import { useSlots } from '@/lib/slots';
 import { useEngines, type EngineModel } from '@/hooks/useEngines';
+import { DEFAULT_MODEL } from '../../shared/models';
 import { ClaudeAccountSection } from './ClaudeAccountSection';
 
 interface AgentConfig {
@@ -21,7 +22,7 @@ interface AgentConfig {
 }
 
 const FALLBACK_MODELS: EngineModel[] = [
-  { value: '', label: 'Default (claude-sonnet-5)' },
+  { value: '', label: `Default (${DEFAULT_MODEL})` },
   { value: 'claude-fable-5-1', label: 'Fable 5.1 — frontier, most capable' },
   { value: 'claude-fable-5', label: 'Fable 5' },
   { value: 'claude-opus-5', label: 'Opus 5 — most capable, best for complex/agentic tasks' },
@@ -41,6 +42,11 @@ const PERMISSION_MODES = [
 
 interface SessionDirectives { engine?: string; model?: string; turns?: number; thinking?: string }
 
+/** True if any field of `next` differs from `prev` (value-wise; key order irrelevant). */
+const changedFrom = (prev: AgentConfig, next: AgentConfig) =>
+  [...new Set([...Object.keys(prev), ...Object.keys(next)])]
+    .some((k) => JSON.stringify((prev as any)[k]) !== JSON.stringify((next as any)[k]));
+
 interface Props {
   getToken: () => Promise<string | null>;
   onSaved?: (config: AgentConfig) => void;
@@ -62,15 +68,22 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
   // Save scope for the runtime knobs (engine/model/turns/thinking): this conversation, or the
   // global default every channel without its own pin uses — Slack, email, scheduler included.
   const [applyGlobally, setApplyGlobally] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // Global config is owner-only (PUT /api/config 403s otherwise); a session's own runtime knobs are not.
+  const [isOwner, setIsOwner] = useState<boolean>();
+  const canGlobal = isOwner === true;
+  const canRuntime = canGlobal || !!sessionId;
 
   useEffect(() => {
     if (!open) return;
     setApplyGlobally(false); // scope is a per-open decision, never a sticky one
+    setError(null);
     getToken().then((token) => {
       if (!token) return;
       fetch('/api/config', { headers: { Authorization: `Bearer ${token}` } })
         .then((r) => r.json())
-        .then((global: AgentConfig) => {
+        .then(({ isOwner: owner, ...global }: AgentConfig & { isOwner?: boolean }) => {
+          setIsOwner(!!owner);
           globalRef.current = global;
           // For an active session, the runtime knobs reflect the session's own directives
           // (falling back to the global default when the session hasn't overridden them).
@@ -87,8 +100,17 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
     });
   }, [open, getToken, sessionId, sessionDirectives]);
 
+  /** Throws the server's error message on a non-2xx, so save() surfaces it instead of closing. */
+  const send = async (url: string, body: unknown, auth: Record<string, string>) => {
+    const res = await fetch(url, { method: 'PUT', headers: auth, body: JSON.stringify(body) });
+    const data = await res.json().catch((e) => { console.warn('[config] response not JSON', url, res.status, e); return {}; });
+    if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+    return data;
+  };
+
   const save = async () => {
     setSaving(true);
+    setError(null);
     const token = await getToken();
     const auth = { Authorization: `Bearer ${token ?? ''}`, 'Content-Type': 'application/json' };
     try {
@@ -99,21 +121,26 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
         const runtime: SessionDirectives = applyGlobally
           ? { engine: '', model: '', turns: null, thinking: '' } as any // '' / null = clear the pin
           : { engine: config.engine, model: config.model, turns: config.maxTurns, thinking: config.thinking };
-        const r = await fetch(`/api/sessions/${sessionId}/directives`, { method: 'PUT', headers: auth, body: JSON.stringify(runtime) })
-          .then((res) => res.json()).catch((e) => { console.warn('[config] directives save failed', e); return null; });
+        const r = await send(`/api/sessions/${sessionId}/directives`, runtime, auth);
         if (r?.directives) onDirectivesSaved?.(r.directives);
         const global: AgentConfig = applyGlobally ? config : {
           ...config,
           engine: globalRef.current.engine, model: globalRef.current.model,
           maxTurns: globalRef.current.maxTurns, thinking: globalRef.current.thinking,
         };
-        await fetch('/api/config', { method: 'PUT', headers: auth, body: JSON.stringify(global) });
-        onSaved?.(global);
+        // A session-only save with no global field changed has nothing to persist globally.
+        if (changedFrom(globalRef.current, global)) {
+          await send('/api/config', global, auth);
+          onSaved?.(global);
+        }
       } else {
-        await fetch('/api/config', { method: 'PUT', headers: auth, body: JSON.stringify(config) });
+        await send('/api/config', config, auth);
         onSaved?.(config);
       }
       setOpen(false);
+    } catch (e: any) {
+      console.warn('[config] save failed', e);
+      setError(e.message || 'Save failed');
     } finally {
       setSaving(false);
     }
@@ -171,16 +198,19 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
                 Engine, Model, Max Turns & Thinking apply to{' '}
                 <strong>{applyGlobally ? 'every conversation' : 'this conversation'}</strong>. Other settings are always global defaults.
               </p>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input type="checkbox" checked={applyGlobally} onChange={(e) => setApplyGlobally(e.target.checked)} />
-                <span>Apply globally — also the default for Slack, email &amp; scheduled runs</span>
-              </label>
+              {canGlobal && (
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input type="checkbox" checked={applyGlobally} onChange={(e) => setApplyGlobally(e.target.checked)} />
+                  <span>Apply globally — also the default for Slack, email &amp; scheduled runs</span>
+                </label>
+              )}
             </div>
           )}
           {multiEngine && (
             <div>
               <label className="text-sm font-medium mb-1.5 block">Engine</label>
               <select
+                disabled={!canRuntime}
                 value={config.engine ?? ''}
                 onChange={(e) => {
                   const engine = e.target.value || undefined;
@@ -200,6 +230,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
           <div>
             <label className="text-sm font-medium mb-1.5 block">Model</label>
             <select
+              disabled={!canRuntime}
               value={config.model ?? ''}
               onChange={(e) => setConfig((c) => ({ ...c, model: e.target.value || undefined }))}
               className={selectClass}
@@ -227,6 +258,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
           <div>
             <label className="text-sm font-medium mb-1.5 block">Permission Mode</label>
             <select
+              disabled={!canGlobal}
               value={config.permissionMode ?? 'acceptEdits'}
               onChange={(e) => setConfig((c) => ({ ...c, permissionMode: e.target.value }))}
               className={selectClass}
@@ -243,6 +275,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
               type="number"
               min={1}
               max={200}
+              disabled={!canRuntime}
               value={config.maxTurns ?? 50}
               onChange={(e) => setConfig((c) => ({ ...c, maxTurns: Number(e.target.value) || 50 }))}
             />
@@ -251,6 +284,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
           <div>
             <label className="text-sm font-medium mb-1.5 block">Thinking</label>
             <select
+              disabled={!canRuntime}
               value={config.thinking ?? ''}
               onChange={(e) => setConfig((c) => ({ ...c, thinking: (e.target.value || undefined) as AgentConfig['thinking'] }))}
               className={selectClass}
@@ -265,6 +299,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
           <div>
             <label className="text-sm font-medium mb-1.5 block">Effort</label>
             <select
+              disabled={!canGlobal}
               value={config.effort ?? ''}
               onChange={(e) => setConfig((c) => ({ ...c, effort: (e.target.value || undefined) as AgentConfig['effort'] }))}
               className={selectClass}
@@ -281,6 +316,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
             <label className="text-sm font-medium mb-1.5 block">Allowed Tools</label>
             <Input
               placeholder="Read, Edit, Bash, WebSearch, Glob, LS"
+              disabled={!canGlobal}
               value={(config.allowedTools ?? []).join(', ')}
               onChange={(e) => setConfig((c) => ({
                 ...c,
@@ -298,6 +334,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
             <button
               type="button"
               role="switch"
+              disabled={!canGlobal}
               aria-checked={config.skillDiscovery !== false}
               onClick={() => setConfig((c) => ({ ...c, skillDiscovery: c.skillDiscovery === false ? true : false }))}
               className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${config.skillDiscovery !== false ? 'bg-primary' : 'bg-muted'}`}
@@ -310,6 +347,7 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
             <label className="text-sm font-medium mb-1.5 block">System Prompt (optional)</label>
             <Textarea
               placeholder="Additional instructions appended to Claude's system prompt…"
+              disabled={!canGlobal}
               value={config.systemPrompt ?? ''}
               onChange={(e) => setConfig((c) => ({ ...c, systemPrompt: e.target.value || undefined }))}
               rows={4}
@@ -317,10 +355,18 @@ export function ConfigPanel({ getToken, onSaved, trigger, sessionId, sessionDire
           </div>
         </DialogBody>
 
-        <DialogFooter>
-          <Button onClick={save} disabled={saving}>
-            {saving ? 'Saving…' : 'Save Configuration'}
-          </Button>
+        <DialogFooter className="flex-col items-stretch gap-2">
+          {error && <p className="text-sm text-destructive">{error}</p>}
+          {isOwner === false && (
+            <p className="text-xs text-muted-foreground">
+              {sessionId ? 'Only an owner can change the global defaults — runtime knobs apply to this conversation.' : 'Read-only — only an owner can change the agent config.'}
+            </p>
+          )}
+          {canRuntime && (
+            <Button onClick={save} disabled={saving}>
+              {saving ? 'Saving…' : 'Save Configuration'}
+            </Button>
+          )}
         </DialogFooter>
       </DialogContent>
     </Dialog>

package/src/client/components/ConversationHeader.tsx

@@ -3,6 +3,10 @@ import { Copy, Check, Clock, GitFork, Layers } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ConfigPanel } from '@/components/ConfigPanel';
 import type { AgentConfig } from '@/lib/workspaceContext';
+// Same constants the server resolves a turn with — a client-local copy drifts and makes the
+// header name a model no turn would actually run (it still said `sonnet-4-6` after the default
+// moved to Sonnet 5).
+import { DEFAULT_MODEL, DEFAULT_CURSOR_MODEL } from '../../shared/models';
 
 interface SessionDirectives {
   model?: string;
@@ -45,7 +49,7 @@ export function deriveRuntimeBadges(input: {
   // anthropic models). So with no `lastEngine`, the engine stays unknown rather than guessed.
   const engine = provenance === 'ran' ? input.actualEngine! : provenance === 'pending' ? requestedEngine : undefined;
   const rawModel =
-    input.actualModel || input.requestedModel || (requestedEngine === 'cursor' ? 'cursor/composer-2.5' : 'sonnet-4-6');
+    input.actualModel || input.requestedModel || (requestedEngine === 'cursor' ? DEFAULT_CURSOR_MODEL : DEFAULT_MODEL);
 
   // A mismatch is a fact worth showing, not something to launder away: the last turn ran somewhere
   // other than where this session currently asks to run — which the ground-truth pill alone cannot

package/src/client/components/McpManager.tsx

@@ -3,6 +3,7 @@ import { Plus, Trash2, Settings, Lock } from 'lucide-react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogBody, DialogFooter } from './ui/dialog';
+import { useIsOwner } from '@/hooks/useIsOwner';
 
 export interface McpServerConfig {
   command: string;
@@ -23,6 +24,9 @@ export function McpManager({ getToken, trigger }: Props) {
   const [config, setConfig] = useState<McpConfig>({});
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const isOwner = useIsOwner(getToken, open);
+  const canEdit = isOwner === true;
   const [editingEnv, setEditingEnv] = useState<Set<string>>(new Set());
   const toggleEditing = (id: string) =>
     setEditingEnv((s) => { const next = new Set(s); next.has(id) ? next.delete(id) : next.add(id); return next; });
@@ -40,14 +44,19 @@ export function McpManager({ getToken, trigger }: Props) {
 
   const save = async () => {
     setSaving(true);
+    setError(null);
     const token = await getToken();
     try {
-      await fetch('/api/mcps', {
+      const res = await fetch('/api/mcps', {
         method: 'PUT',
         headers: { Authorization: `Bearer ${token ?? ''}`, 'Content-Type': 'application/json' },
         body: JSON.stringify(config),
       });
+      if (!res.ok) throw new Error((await res.json().catch((e) => { console.warn('[McpManager] error response not JSON', res.status, e); return {}; })).error || `HTTP ${res.status}`);
       setOpen(false);
+    } catch (e: any) {
+      console.error('[McpManager] save failed', e);
+      setError(e.message || 'Save failed');
     } finally {
       setSaving(false);
     }
@@ -119,6 +128,10 @@ export function McpManager({ getToken, trigger }: Props) {
         </DialogHeader>
 
         <DialogBody className="space-y-4">
+          {isOwner === false && (
+            <p className="text-xs text-muted-foreground rounded-md bg-muted/50 px-3 py-2">Read-only — only an owner can change MCP servers.</p>
+          )}
+          <fieldset disabled={!canEdit} className="space-y-4 min-w-0">
           {Object.entries(config).map(([name, server]) => {
             const isReadonly = !!server.readonly;
             return (
@@ -193,16 +206,20 @@ export function McpManager({ getToken, trigger }: Props) {
           {Object.keys(config).length === 0 && (
             <p className="text-sm text-muted-foreground text-center py-4">No MCP servers configured</p>
           )}
+          </fieldset>
+          {error && <p className="text-sm text-destructive">{error}</p>}
         </DialogBody>
 
-        <DialogFooter className="flex gap-2">
-          <Button variant="outline" onClick={addServer} className="gap-2">
-            <Plus className="w-4 h-4" /> Add Server
-          </Button>
-          <Button onClick={save} disabled={saving}>
-            {saving ? 'Saving…' : 'Save'}
-          </Button>
-        </DialogFooter>
+        {canEdit && (
+          <DialogFooter className="flex gap-2">
+            <Button variant="outline" onClick={addServer} className="gap-2">
+              <Plus className="w-4 h-4" /> Add Server
+            </Button>
+            <Button onClick={save} disabled={saving}>
+              {saving ? 'Saving…' : 'Save'}
+            </Button>
+          </DialogFooter>
+        )}
       </DialogContent>
     </Dialog>
   );