refactor(ui): move LLM provider config into Config tab, remove standalone route

2026-05-09 23:20:11 -04:00
parent c66749209f
commit 39eb1ce5db
9 changed files with 342 additions and 469 deletions
--- a/decnet_web/src/App.tsx
+++ b/decnet_web/src/App.tsx
@@ -28,7 +28,6 @@ const Orchestrator   = lazy(() => import('./components/Orchestrator'));
 const PersonaGeneration = lazy(() => import('./components/PersonaGeneration'));
 const SyntheticFiles = lazy(() => import('./components/SyntheticFiles/SyntheticFiles'));
 const RealismConfig = lazy(() => import('./components/RealismConfig/RealismConfig'));
-const LLMConfig     = lazy(() => import('./components/LLMConfig/LLMConfig'));
 const CanaryTokens   = lazy(() => import('./components/CanaryTokens'));
 const TopologyPersonaGeneration = lazy(() =>
  import('./components/PersonaGeneration').then((m) => ({ default: m.TopologyPersonaGeneration })),
@@ -139,7 +138,6 @@ const AuthedShell: React.FC<AuthedShellProps> = ({ onLogout, onSearch, searchQue
            <Route path="/persona-generation" element={<PersonaGeneration />} />
            <Route path="/synthetic-files" element={<SyntheticFiles />} />
            <Route path="/realism-config" element={<RealismConfig />} />
-            <Route path="/realism-llm" element={<LLMConfig />} />
            <Route path="/canary-tokens" element={<CanaryTokens />} />
            <Route path="/topologies/:id/personas" element={<TopologyPersonaGeneration />} />
            <Route path="/config" element={<Config />} />
--- a/decnet_web/src/components/Config.tsx
+++ b/decnet_web/src/components/Config.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Settings, Users, Sliders, Shield, Palette, Activity,
+  Settings, Users, Sliders, Shield, Palette, Activity, Cpu,
 } from '../icons';
 import { useToast } from './Toasts/useToast';
 import RuleStateControls from './RuleStateControls';
-import './Dashboard.css';
+import './DeckyFleet.css';
 import './Config.css';
 import type { ConfigTab } from './Config/types';
 import { useConfig } from './Config/useConfig';
@@ -13,6 +13,7 @@ import { LimitsTab } from './Config/tabs/LimitsTab';
 import { UsersTab } from './Config/tabs/UsersTab';
 import { GlobalsTab } from './Config/tabs/GlobalsTab';
 import { AppearanceTab } from './Config/tabs/AppearanceTab';
+import { LLMTab } from './Config/tabs/LLMTab';

 const Config: React.FC = () => {
  const {
@@ -63,14 +64,19 @@ const Config: React.FC = () => {
    ...(isAdmin
      ? [{ key: 'ttp' as const, label: 'TTP RULES', icon: <Shield size={14} /> }]
      : []),
+    ...(isAdmin
+      ? [{ key: 'llm' as const, label: 'LLM PROVIDER', icon: <Cpu size={14} /> }]
+      : []),
  ];

  return (
-    <div className="config-page">
-      <div className="logs-section">
-        <div className="section-header">
-          <Shield size={20} />
-          <h2>SYSTEM CONFIGURATION</h2>
+    <div className="fleet-root config-page">
+      <div className="page-header">
+        <div className="page-title-group">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Settings size={22} className="violet-accent" />
+            <h1>SYSTEM CONFIGURATION</h1>
+          </div>
        </div>
      </div>

@@ -124,6 +130,8 @@ const Config: React.FC = () => {
      {/* RuleStateControls also self-gates on /config?.role so a state
          leak can't render it. */}
      {activeTab === 'ttp' && isAdmin && <RuleStateControls />}
+
+      {activeTab === 'llm' && isAdmin && <LLMTab isAdmin={isAdmin} />}
    </div>
  );
 };
--- a/decnet_web/src/components/Config/tabs/LLMTab.test.tsx
+++ b/decnet_web/src/components/Config/tabs/LLMTab.test.tsx
@@ -0,0 +1,99 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LLMTab } from './LLMTab';
+import { renderWithRouter } from '../../../test/renderWithRouter';
+
+vi.mock('../../../utils/api', () => ({
+  default: { get: vi.fn(), put: vi.fn() },
+}));
+
+import api from '../../../utils/api';
+const apiGet = api.get as ReturnType<typeof vi.fn>;
+const apiPut = api.put as ReturnType<typeof vi.fn>;
+
+const defaultPayload = {
+  provider: 'ollama',
+  base_url: null,
+  model: 'llama3.1',
+  timeout: 60,
+  api_key_set: false,
+};
+
+const render = (isAdmin = true) =>
+  renderWithRouter(<LLMTab isAdmin={isAdmin} />);
+
+describe('LLMTab', () => {
+  beforeEach(() => {
+    apiGet.mockReset();
+    apiPut.mockReset();
+  });
+
+  it('renders current model after load', async () => {
+    apiGet.mockResolvedValueOnce({ data: defaultPayload });
+    render();
+    await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
+    expect(screen.getByDisplayValue('llama3.1')).toBeDefined();
+  });
+
+  it('shows key-stored indicator when api_key_set is true', async () => {
+    apiGet.mockResolvedValueOnce({ data: { ...defaultPayload, api_key_set: true } });
+    render();
+    await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
+    expect(screen.getByText(/Key stored/)).toBeDefined();
+  });
+
+  it('calls PUT on save and shows success', async () => {
+    apiGet.mockResolvedValueOnce({ data: defaultPayload });
+    apiPut.mockResolvedValueOnce({ data: { ...defaultPayload, model: 'phi3' } });
+
+    const user = userEvent.setup();
+    render();
+    await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
+
+    const modelInput = screen.getByDisplayValue('llama3.1');
+    await user.clear(modelInput);
+    await user.type(modelInput, 'phi3');
+    await user.click(screen.getByRole('button', { name: /SAVE/ }));
+
+    await waitFor(() => expect(screen.getByText('LLM CONFIG SAVED')).toBeDefined());
+    const [url, body] = apiPut.mock.calls[0];
+    expect(url).toBe('/realism/llm');
+    expect(body.model).toBe('phi3');
+  });
+
+  it('shows error on 403', async () => {
+    apiGet.mockResolvedValueOnce({ data: defaultPayload });
+    apiPut.mockRejectedValueOnce({ response: { status: 403 } });
+
+    const user = userEvent.setup();
+    render();
+    await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
+    await user.click(screen.getByRole('button', { name: /SAVE/ }));
+
+    await waitFor(() => expect(screen.getByText(/ADMIN ROLE REQUIRED/)).toBeDefined());
+  });
+
+  it('hides save button for viewers', async () => {
+    apiGet.mockResolvedValueOnce({ data: defaultPayload });
+    render(false);
+    await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
+    expect(screen.queryByRole('button', { name: /SAVE/ })).toBeNull();
+  });
+
+  it('sends empty api_key to clear when CLEAR button used', async () => {
+    apiGet.mockResolvedValueOnce({ data: { ...defaultPayload, api_key_set: true } });
+    apiPut.mockResolvedValueOnce({ data: { ...defaultPayload, api_key_set: false } });
+
+    const user = userEvent.setup();
+    render();
+    await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
+
+    await user.click(screen.getByRole('button', { name: /CLEAR/ }));
+    await user.click(screen.getByRole('button', { name: /SAVE/ }));
+
+    await waitFor(() => expect(apiPut).toHaveBeenCalledOnce());
+    const [, body] = apiPut.mock.calls[0];
+    expect(body.api_key).toBe('');
+  });
+});
--- a/decnet_web/src/components/Config/tabs/LLMTab.tsx
+++ b/decnet_web/src/components/Config/tabs/LLMTab.tsx
@@ -0,0 +1,226 @@
+import React, { useEffect, useState } from 'react';
+import { Save, CheckCircle } from '../../../icons';
+import api from '../../../utils/api';
+
+interface LLMPayload {
+  provider: string;
+  base_url: string | null;
+  model: string;
+  timeout: number;
+  api_key_set: boolean;
+}
+
+interface PutBody {
+  provider?: string;
+  base_url?: string | null;
+  model?: string;
+  timeout?: number;
+  api_key?: string;
+}
+
+const DEFAULTS: LLMPayload = {
+  provider: 'ollama',
+  base_url: null,
+  model: 'llama3.1',
+  timeout: 60,
+  api_key_set: false,
+};
+
+const _SENTINEL = Symbol();
+
+interface Props {
+  isAdmin: boolean;
+}
+
+export const LLMTab: React.FC<Props> = ({ isAdmin }) => {
+  const [cfg, setCfg] = useState<LLMPayload>(DEFAULTS);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [msg, setMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [apiKeyInput, setApiKeyInput] = useState('');
+  const [clearApiKey, setClearApiKey] = useState(false);
+
+  useEffect(() => {
+    api.get<LLMPayload>('/realism/llm')
+      .then((r) => setCfg(r.data))
+      .catch(() => setMsg({ type: 'error', text: 'FAILED TO LOAD LLM CONFIG' }))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMsg(null);
+    const body: PutBody = {
+      provider: cfg.provider,
+      base_url: cfg.base_url || null,
+      model: cfg.model,
+      timeout: cfg.timeout,
+    };
+    if (clearApiKey) body.api_key = '';
+    else if (apiKeyInput.trim()) body.api_key = apiKeyInput.trim();
+
+    try {
+      const r = await api.put<LLMPayload>('/realism/llm', body);
+      setCfg(r.data);
+      setApiKeyInput('');
+      setClearApiKey(false);
+      setMsg({ type: 'success', text: 'LLM CONFIG SAVED' });
+    } catch (err: any) {
+      const detail = err?.response?.data?.detail;
+      const status = err?.response?.status;
+      if (status === 403) setMsg({ type: 'error', text: 'ADMIN ROLE REQUIRED' });
+      else if (status === 400 && detail) setMsg({ type: 'error', text: `VALIDATION FAILED: ${detail}` });
+      else setMsg({ type: 'error', text: 'SAVE FAILED' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <div className="config-panel"><span className="config-label">LOADING…</span></div>;
+  }
+
+  return (
+    <div className="config-panel">
+      <div className="config-field">
+        <span className="config-label">PROVIDER</span>
+        {isAdmin ? (
+          <select
+            className="role-select"
+            style={{ width: 200 }}
+            value={cfg.provider}
+            onChange={(e) => setCfg({ ...cfg, provider: e.target.value })}
+          >
+            <option value="ollama">Ollama</option>
+          </select>
+        ) : (
+          <span className="config-value">{cfg.provider}</span>
+        )}
+      </div>
+
+      <div className="config-field">
+        <span className="config-label">BASE URL</span>
+        {isAdmin ? (
+          <>
+            <div className="config-input-row">
+              <input
+                type="url"
+                style={{ width: 340 }}
+                placeholder="http://127.0.0.1:11434 — blank for local subprocess"
+                value={cfg.base_url || ''}
+                onChange={(e) => setCfg({ ...cfg, base_url: e.target.value || null })}
+              />
+            </div>
+            <span className="interval-hint">
+              Leave blank to use local Ollama subprocess. Set to the daemon URL when targeting a remote host.
+            </span>
+          </>
+        ) : (
+          <span className="config-value">{cfg.base_url || '(subprocess)'}</span>
+        )}
+      </div>
+
+      <div className="config-field">
+        <span className="config-label">MODEL</span>
+        {isAdmin ? (
+          <div className="config-input-row">
+            <input
+              type="text"
+              style={{ width: 200 }}
+              placeholder="llama3.1"
+              value={cfg.model}
+              onChange={(e) => setCfg({ ...cfg, model: e.target.value })}
+            />
+          </div>
+        ) : (
+          <span className="config-value">{cfg.model}</span>
+        )}
+      </div>
+
+      <div className="config-field">
+        <span className="config-label">TIMEOUT (seconds)</span>
+        {isAdmin ? (
+          <div className="config-input-row">
+            <input
+              type="number"
+              min={1}
+              step={1}
+              style={{ width: 120 }}
+              value={cfg.timeout}
+              onChange={(e) => {
+                const v = parseFloat(e.target.value);
+                if (v > 0) setCfg({ ...cfg, timeout: v });
+              }}
+            />
+          </div>
+        ) : (
+          <span className="config-value">{cfg.timeout}s</span>
+        )}
+      </div>
+
+      {isAdmin && (
+        <div className="config-field">
+          <span className="config-label">API KEY (write-only)</span>
+          {cfg.api_key_set && !clearApiKey ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <span style={{ fontSize: '0.75rem', display: 'flex', alignItems: 'center', gap: 6 }}>
+                <CheckCircle size={12} /> Key stored
+              </span>
+              <button
+                className="action-btn"
+                onClick={() => { setClearApiKey(true); setApiKeyInput(''); }}
+              >
+                CLEAR
+              </button>
+            </div>
+          ) : (
+            <div className="config-input-row">
+              <input
+                type="password"
+                style={{ width: 280 }}
+                placeholder={clearApiKey
+                  ? '(will be cleared on save)'
+                  : 'Enter key to set — blank keeps existing'}
+                value={apiKeyInput}
+                disabled={clearApiKey}
+                onChange={(e) => setApiKeyInput(e.target.value)}
+              />
+              {clearApiKey && (
+                <button className="action-btn" onClick={() => setClearApiKey(false)}>
+                  CANCEL
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {isAdmin && (
+        <div className="config-field" style={{ marginBottom: 0 }}>
+          <div className="config-input-row">
+            <button
+              className="save-btn"
+              onClick={handleSave}
+              disabled={saving}
+            >
+              <Save size={14} />
+              {saving ? 'SAVING...' : 'SAVE'}
+            </button>
+          </div>
+          {msg && (
+            <span className={msg.type === 'success' ? 'config-success' : 'config-error'}>
+              {msg.text}
+            </span>
+          )}
+        </div>
+      )}
+
+      {!isAdmin && (
+        <div className="config-field" style={{ marginBottom: 0 }}>
+          <span className="config-label">API KEY</span>
+          <span className="config-value">{cfg.api_key_set ? '••••••••' : '(not set)'}</span>
+        </div>
+      )}
+    </div>
+  );
+};
--- a/decnet_web/src/components/Config/types.ts
+++ b/decnet_web/src/components/Config/types.ts
@@ -24,4 +24,5 @@ export type ConfigTab =
  | 'globals'
  | 'appearance'
  | 'workers'
-  | 'ttp';
+  | 'ttp'
+  | 'llm';
--- a/decnet_web/src/components/LLMConfig/LLMConfig.css
+++ b/decnet_web/src/components/LLMConfig/LLMConfig.css
@@ -1,85 +0,0 @@
-/* LLM Config — layered on DeckyFleet.css + PersonaGeneration.css.
-   Adds: form field grid, masked-key indicator, provider selector. */
-
-.llm-config-root .form-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 24px;
-}
-
-.llm-config-root .form-grid.single-col {
-  grid-template-columns: 1fr;
-}
-
-.llm-config-root .tweak-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.llm-config-root .tweak-group label {
-  font-size: 0.62rem;
-  letter-spacing: 1.5px;
-  color: var(--dim);
-  text-transform: uppercase;
-}
-
-.llm-config-root .input {
-  background: var(--bg-elev, rgba(0, 0, 0, 0.3));
-  border: 1px solid var(--border);
-  color: var(--text);
-  padding: 7px 10px;
-  font-family: inherit;
-  font-size: 0.8rem;
-  outline: none;
-  transition: border-color 0.15s;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.llm-config-root .input:focus {
-  border-color: var(--violet);
-  box-shadow: 0 0 0 1px var(--violet);
-}
-
-.llm-config-root select.input {
-  cursor: pointer;
-}
-
-.llm-config-root .key-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.65rem;
-  font-family: var(--font-mono);
-  color: var(--matrix);
-  letter-spacing: 0.5px;
-  margin-top: 4px;
-}
-
-.llm-config-root .key-badge.unset {
-  color: var(--dim);
-}
-
-.llm-config-root .info-banner {
-  background: var(--matrix-tint-5);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--violet);
-  padding: 10px 14px;
-  font-size: 0.78rem;
-  line-height: 1.5;
-  margin-bottom: 20px;
-}
-
-.llm-config-root .info-banner em { color: var(--matrix); font-style: normal; }
-
-.llm-config-root .section-head {
-  font-size: 0.7rem;
-  letter-spacing: 1.5px;
-  color: var(--dim);
-  text-transform: uppercase;
-  margin: 0 0 12px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid var(--border);
-}
--- a/decnet_web/src/components/LLMConfig/LLMConfig.test.tsx
+++ b/decnet_web/src/components/LLMConfig/LLMConfig.test.tsx
@@ -1,133 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import LLMConfig from './LLMConfig';
-import { renderWithRouter } from '../../test/renderWithRouter';
-
-vi.mock('../../utils/api', () => ({
-  default: { get: vi.fn(), put: vi.fn() },
-}));
-
-import api from '../../utils/api';
-const apiGet = api.get as ReturnType<typeof vi.fn>;
-const apiPut = api.put as ReturnType<typeof vi.fn>;
-
-const defaultPayload = {
-  provider: 'ollama',
-  base_url: null,
-  model: 'llama3.1',
-  timeout: 60,
-  api_key_set: false,
-};
-
-const renderPage = () => renderWithRouter(<LLMConfig />);
-
-describe('LLMConfig', () => {
-  beforeEach(() => {
-    apiGet.mockReset();
-    apiPut.mockReset();
-  });
-
-  it('renders provider and model from loaded config', async () => {
-    apiGet.mockResolvedValueOnce({ data: defaultPayload });
-    renderPage();
-    await waitFor(() => expect(screen.queryByText('Loading…')).toBeNull());
-    expect(screen.getByDisplayValue('Ollama')).toBeDefined();
-    expect(screen.getByDisplayValue('llama3.1')).toBeDefined();
-  });
-
-  it('shows api_key_set indicator when key is stored', async () => {
-    apiGet.mockResolvedValueOnce({
-      data: { ...defaultPayload, api_key_set: true },
-    });
-    renderPage();
-    await waitFor(() => expect(screen.queryByText('Loading…')).toBeNull());
-    expect(screen.getByText(/KEY SET/)).toBeDefined();
-  });
-
-  it('shows password input when no key is stored', async () => {
-    apiGet.mockResolvedValueOnce({ data: defaultPayload });
-    renderPage();
-    await waitFor(() => expect(screen.queryByText('Loading…')).toBeNull());
-    const input = screen.getByPlaceholderText(/Enter key to set/);
-    expect(input).toBeDefined();
-  });
-
-  it('calls PUT with correct body on save', async () => {
-    apiGet.mockResolvedValueOnce({ data: defaultPayload });
-    apiPut.mockResolvedValueOnce({
-      data: { ...defaultPayload, model: 'phi3' },
-    });
-
-    const user = userEvent.setup();
-    renderPage();
-    await waitFor(() => expect(screen.queryByText('Loading…')).toBeNull());
-
-    const modelInput = screen.getByDisplayValue('llama3.1');
-    await user.clear(modelInput);
-    await user.type(modelInput, 'phi3');
-
-    await user.click(screen.getByRole('button', { name: /SAVE/ }));
-
-    await waitFor(() => expect(apiPut).toHaveBeenCalledOnce());
-    const [url, body] = apiPut.mock.calls[0];
-    expect(url).toBe('/realism/llm');
-    expect(body.model).toBe('phi3');
-    expect(body.api_key).toBeUndefined();
-  });
-
-  it('includes api_key in PUT body when entered', async () => {
-    apiGet.mockResolvedValueOnce({ data: defaultPayload });
-    apiPut.mockResolvedValueOnce({
-      data: { ...defaultPayload, api_key_set: true },
-    });
-
-    const user = userEvent.setup();
-    renderPage();
-    await waitFor(() => expect(screen.queryByText('Loading…')).toBeNull());
-
-    const keyInput = screen.getByPlaceholderText(/Enter key to set/);
-    await user.type(keyInput, 'sk-secret');
-
-    await user.click(screen.getByRole('button', { name: /SAVE/ }));
-
-    await waitFor(() => expect(apiPut).toHaveBeenCalledOnce());
-    const [, body] = apiPut.mock.calls[0];
-    expect(body.api_key).toBe('sk-secret');
-  });
-
-  it('sends api_key="" when CLEAR is clicked', async () => {
-    apiGet.mockResolvedValueOnce({
-      data: { ...defaultPayload, api_key_set: true },
-    });
-    apiPut.mockResolvedValueOnce({
-      data: { ...defaultPayload, api_key_set: false },
-    });
-
-    const user = userEvent.setup();
-    renderPage();
-    await waitFor(() => expect(screen.queryByText('Loading…')).toBeNull());
-
-    await user.click(screen.getByRole('button', { name: /CLEAR/ }));
-    await user.click(screen.getByRole('button', { name: /SAVE/ }));
-
-    await waitFor(() => expect(apiPut).toHaveBeenCalledOnce());
-    const [, body] = apiPut.mock.calls[0];
-    expect(body.api_key).toBe('');
-  });
-
-  it('shows error when save returns 403', async () => {
-    apiGet.mockResolvedValueOnce({ data: defaultPayload });
-    apiPut.mockRejectedValueOnce({ response: { status: 403 } });
-
-    const user = userEvent.setup();
-    renderPage();
-    await waitFor(() => expect(screen.queryByText('Loading…')).toBeNull());
-
-    await user.click(screen.getByRole('button', { name: /SAVE/ }));
-
-    await waitFor(() =>
-      expect(screen.getByText(/Admin role required/)).toBeDefined(),
-    );
-  });
-});
--- a/decnet_web/src/components/LLMConfig/LLMConfig.tsx
+++ b/decnet_web/src/components/LLMConfig/LLMConfig.tsx
@@ -1,239 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import api from '../../utils/api';
-import { useToast } from '../Toasts/useToast';
-import { Save, Cpu, AlertTriangle, CheckCircle } from '../../icons';
-import '../DeckyFleet.css';
-import '../PersonaGeneration.css';
-import './LLMConfig.css';
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-interface LLMConfigPayload {
-  provider: string;
-  base_url: string | null;
-  model: string;
-  timeout: number;
-  api_key_set: boolean;
-}
-
-interface PutBody {
-  provider?: string;
-  base_url?: string | null;
-  model?: string;
-  timeout?: number;
-  api_key?: string;
-}
-
-const DEFAULTS: LLMConfigPayload = {
-  provider: 'ollama',
-  base_url: null,
-  model: 'llama3.1',
-  timeout: 60,
-  api_key_set: false,
-};
-
-// ─── Page ────────────────────────────────────────────────────────────────────
-
-const LLMConfig: React.FC = () => {
-  const { push } = useToast();
-  const [config, setConfig] = useState<LLMConfigPayload>(DEFAULTS);
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [apiKeyInput, setApiKeyInput] = useState('');
-  const [clearApiKey, setClearApiKey] = useState(false);
-
-  const fetchConfig = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await api.get<LLMConfigPayload>('/realism/llm');
-      setConfig(res.data);
-    } catch (err: any) {
-      setError(err?.response?.status === 401 ? 'Authentication required.' : 'Load failed.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => { fetchConfig(); }, []);
-
-  const handleSave = async () => {
-    setSaving(true);
-    setError(null);
-    try {
-      const body: PutBody = {
-        provider: config.provider,
-        base_url: config.base_url || null,
-        model: config.model,
-        timeout: config.timeout,
-      };
-      if (clearApiKey) {
-        body.api_key = '';
-      } else if (apiKeyInput.trim()) {
-        body.api_key = apiKeyInput.trim();
-      }
-
-      const res = await api.put<LLMConfigPayload>('/realism/llm', body);
-      setConfig(res.data);
-      setApiKeyInput('');
-      setClearApiKey(false);
-      push({ text: 'LLM CONFIG SAVED', tone: 'matrix', icon: 'terminal' });
-    } catch (err: any) {
-      const detail = err?.response?.data?.detail;
-      const status = err?.response?.status;
-      if (status === 403) setError('Admin role required to save.');
-      else if (status === 400 && detail) setError(`Validation failed: ${detail}`);
-      else setError('Save failed.');
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <div className="fleet-root llm-config-root">
-      <div className="page-header">
-        <div className="page-title-group">
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            <Cpu size={22} className="violet-accent" />
-            <h1>LLM PROVIDER CONFIG</h1>
-          </div>
-          <span className="page-sub">
-            {config.provider.toUpperCase()} · {config.model}
-            {config.base_url ? ` · ${config.base_url}` : ' · subprocess'}
-          </span>
-        </div>
-        <div className="actions">
-          <button
-            className="btn violet"
-            onClick={handleSave}
-            disabled={saving || loading}
-            title="Persist and hot-reload the LLM backend; orchestrator picks it up within one tick."
-          >
-            <Save size={12} /> {saving ? 'SAVING…' : 'SAVE'}
-          </button>
-        </div>
-      </div>
-
-      <div className="info-banner">
-        <div>
-          <strong>Scope:</strong> configures the LLM backend used for{' '}
-          <em>email bodies, drafts, and notes</em> generated by the realism
-          subsystem. Changes are persisted to{' '}
-          <span className="mono matrix-text">realism_config</span> and
-          hot-reloaded in this API process immediately; the orchestrator worker
-          picks them up within one refresh tick (~5 minutes).
-        </div>
-        {error && (
-          <div className="info-line alert-text" style={{ marginTop: 8 }}>
-            <AlertTriangle size={12} /> {error}
-          </div>
-        )}
-      </div>
-
-      {loading ? (
-        <div className="dim" style={{ padding: '24px 0' }}>Loading…</div>
-      ) : (
-        <>
-          <div className="section-head">Provider</div>
-
-          <div className="form-grid">
-            <div className="tweak-group">
-              <label>Provider</label>
-              <select
-                className="input"
-                value={config.provider}
-                onChange={(e) => setConfig({ ...config, provider: e.target.value })}
-              >
-                <option value="ollama">Ollama</option>
-              </select>
-            </div>
-
-            <div className="tweak-group">
-              <label>Model</label>
-              <input
-                className="input"
-                type="text"
-                placeholder="llama3.1"
-                value={config.model}
-                onChange={(e) => setConfig({ ...config, model: e.target.value })}
-              />
-            </div>
-          </div>
-
-          <div className="form-grid single-col" style={{ marginBottom: 16 }}>
-            <div className="tweak-group">
-              <label>Base URL</label>
-              <input
-                className="input"
-                type="url"
-                placeholder="http://127.0.0.1:11434 — leave blank for local subprocess"
-                value={config.base_url || ''}
-                onChange={(e) =>
-                  setConfig({ ...config, base_url: e.target.value || null })
-                }
-              />
-            </div>
-          </div>
-
-          <div className="form-grid">
-            <div className="tweak-group">
-              <label>Timeout (seconds)</label>
-              <input
-                className="input"
-                type="number"
-                min={1}
-                step={1}
-                value={config.timeout}
-                onChange={(e) => {
-                  const v = parseFloat(e.target.value);
-                  if (v > 0) setConfig({ ...config, timeout: v });
-                }}
-              />
-            </div>
-
-            <div className="tweak-group">
-              <label>API Key (write-only)</label>
-              {config.api_key_set && !clearApiKey ? (
-                <>
-                  <div className="key-badge">
-                    <CheckCircle size={11} /> KEY SET — enter a new value to rotate, or
-                    <button
-                      className="btn ghost"
-                      style={{ padding: '2px 8px', fontSize: '0.65rem', marginLeft: 6 }}
-                      onClick={() => { setClearApiKey(true); setApiKeyInput(''); }}
-                    >
-                      CLEAR
-                    </button>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <input
-                    className="input"
-                    type="password"
-                    placeholder={clearApiKey ? '(will be cleared on save)' : 'Enter key to set, leave blank to keep unchanged'}
-                    value={apiKeyInput}
-                    disabled={clearApiKey}
-                    onChange={(e) => setApiKeyInput(e.target.value)}
-                  />
-                  {clearApiKey && (
-                    <button
-                      className="btn ghost"
-                      style={{ padding: '2px 8px', fontSize: '0.65rem', marginTop: 4, alignSelf: 'flex-start' }}
-                      onClick={() => setClearApiKey(false)}
-                    >
-                      CANCEL CLEAR
-                    </button>
-                  )}
-                </>
-              )}
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default LLMConfig;
--- a/decnet_web/src/components/Layout.tsx
+++ b/decnet_web/src/components/Layout.tsx
@@ -39,7 +39,6 @@ const ROUTE_LABELS: Record<string, string> = {
  '/persona-generation': 'PERSONA GENERATION',
  '/synthetic-files': 'SYNTHETIC FILES',
  '/realism-config': 'REALISM CONFIG',
-  '/realism-llm': 'LLM PROVIDER',
  '/canary-tokens': 'CANARY TOKENS',
  '/config': 'CONFIG',
  '/swarm-updates': 'REMOTE UPDATES',
@@ -154,7 +153,6 @@ const Layout: React.FC<LayoutProps> = ({
            <NavItem to="/persona-generation" icon={<Mail size={18} />} label="Persona Generation" open={sidebarOpen} indent />
            <NavItem to="/synthetic-files" icon={<FileText size={18} />} label="Synthetic Files" open={sidebarOpen} indent />
            <NavItem to="/realism-config" icon={<Sliders size={18} />} label="Realism Config" open={sidebarOpen} indent />
-            <NavItem to="/realism-llm" icon={<Cpu size={18} />} label="LLM Provider" open={sidebarOpen} indent />
            <NavItem to="/canary-tokens" icon={<Target size={18} />} label="Canary Tokens" open={sidebarOpen} indent />
          </NavGroup>
          <NavGroup label="SWARM" icon={<Network size={20} />} open={sidebarOpen}>