feat(ui): restyle LLMTab with DeckyFleet/PersonaGeneration form vocabulary

decnet_web/src/components/Config/tabs/LLMTab.css

@@ -0,0 +1,84 @@
+/* LLMTab — layered on DeckyFleet.css + PersonaGeneration.css.
+   Scoped to .llm-tab-root. Same vocabulary as the old standalone page. */
+
+.llm-tab-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-tab-root .info-banner em { color: var(--matrix); font-style: normal; }
+
+.llm-tab-root .form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.llm-tab-root .form-grid.single-col {
+  grid-template-columns: 1fr;
+}
+
+.llm-tab-root .tweak-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.llm-tab-root .tweak-group label {
+  font-size: 0.62rem;
+  letter-spacing: 1.5px;
+  color: var(--dim);
+  text-transform: uppercase;
+}
+
+.llm-tab-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-tab-root .input:focus {
+  border-color: var(--violet);
+  box-shadow: 0 0 0 1px var(--violet);
+}
+
+.llm-tab-root select.input { cursor: pointer; }
+
+.llm-tab-root .key-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.7rem;
+  font-family: var(--font-mono);
+  color: var(--matrix);
+  letter-spacing: 0.5px;
+  margin-top: 2px;
+}
+
+.llm-tab-root .key-badge.unset { color: var(--dim); }
+
+.llm-tab-root .actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.llm-tab-root .field-hint {
+  font-size: 0.65rem;
+  opacity: 0.4;
+  letter-spacing: 0.4px;
+  margin-top: 2px;
+}

decnet_web/src/components/Config/tabs/LLMTab.test.tsx

@@ -40,7 +40,7 @@ describe('LLMTab', () => {
     apiGet.mockResolvedValueOnce({ data: { ...defaultPayload, api_key_set: true } });
     render();
     await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
-    expect(screen.getByText(/Key stored/)).toBeDefined();
+    expect(screen.getByText(/KEY SET/)).toBeDefined();
   });
 
   it('calls PUT on save and shows success', async () => {
@@ -71,7 +71,7 @@ describe('LLMTab', () => {
     await waitFor(() => expect(screen.queryByText('LOADING…')).toBeNull());
     await user.click(screen.getByRole('button', { name: /SAVE/ }));
 
-    await waitFor(() => expect(screen.getByText(/ADMIN ROLE REQUIRED/)).toBeDefined());
+    await waitFor(() => expect(screen.getByText(/Admin role required/)).toBeDefined());
   });
 
   it('hides save button for viewers', async () => {

decnet_web/src/components/Config/tabs/LLMTab.tsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Save, CheckCircle } from '../../../icons';
+import { Save, CheckCircle, AlertTriangle } from '../../../icons';
 import api from '../../../utils/api';
+import { useToast } from '../../Toasts/useToast';
+import '../../DeckyFleet.css';
+import '../../PersonaGeneration.css';
+import './LLMTab.css';
 
 interface LLMPayload {
   provider: string;
@@ -31,23 +35,24 @@ interface Props {
 }
 
 export const LLMTab: React.FC<Props> = ({ isAdmin }) => {
+  const { push } = useToast();
   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 [error, setError] = useState<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' }))
+      .catch(() => setError('Failed to load LLM config.'))
       .finally(() => setLoading(false));
   }, []);
 
   const handleSave = async () => {
     setSaving(true);
-    setMsg(null);
+    setError(null);
     const body: PutBody = {
       provider: cfg.provider,
       base_url: cfg.base_url || null,
@@ -62,161 +67,155 @@ export const LLMTab: React.FC<Props> = ({ isAdmin }) => {
       setCfg(r.data);
       setApiKeyInput('');
       setClearApiKey(false);
-      setMsg({ type: 'success', text: 'LLM CONFIG SAVED' });
+      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) setMsg({ type: 'error', text: 'ADMIN ROLE REQUIRED' });
+      if (status === 403) setError('Admin role required to save.');
-      else if (status === 400 && detail) setMsg({ type: 'error', text: `VALIDATION FAILED: ${detail}` });
+      else if (status === 400 && detail) setError(`Validation failed: ${detail}`);
-      else setMsg({ type: 'error', text: 'SAVE FAILED' });
+      else setError('Save failed.');
     } finally {
       setSaving(false);
     }
   };
 
   if (loading) {
-    return <div className="config-panel"><span className="config-label">LOADING…</span></div>;
+    return <div className="llm-tab-root"><div className="dim" style={{ padding: '16px 0' }}>Loading…</div></div>;
   }
 
   return (
-    <div className="config-panel">
+    <div className="llm-tab-root">
-      <div className="config-field">
+      <div className="info-banner">
-        <span className="config-label">PROVIDER</span>
+        <div>
-        {isAdmin ? (
+          <strong>Scope:</strong> configures the LLM backend used for{' '}
+          <em>email bodies, drafts, and notes</em> generated by the realism
+          subsystem. Changes are persisted and hot-reloaded immediately; the
+          orchestrator worker picks them up within one refresh tick (~5 min).
+        </div>
+        {error && (
+          <div className="info-line alert-text" style={{ marginTop: 8 }}>
+            <AlertTriangle size={12} /> {error}
+          </div>
+        )}
+      </div>
+
+      <div className="form-grid">
+        <div className="tweak-group">
+          <label>Provider</label>
           <select
-            className="role-select"
+            className="input"
-            style={{ width: 200 }}
             value={cfg.provider}
+            disabled={!isAdmin}
             onChange={(e) => setCfg({ ...cfg, provider: e.target.value })}
           >
             <option value="ollama">Ollama</option>
           </select>
-        ) : (
+        </div>
-          <span className="config-value">{cfg.provider}</span>
+
-        )}
+        <div className="tweak-group">
+          <label>Model</label>
+          <input
+            className="input"
+            type="text"
+            placeholder="llama3.1"
+            value={cfg.model}
+            disabled={!isAdmin}
+            onChange={(e) => setCfg({ ...cfg, model: e.target.value })}
+          />
+        </div>
       </div>
 
-      <div className="config-field">
+      <div className="form-grid single-col">
-        <span className="config-label">BASE URL</span>
+        <div className="tweak-group">
-        {isAdmin ? (
+          <label>Base URL</label>
-          <>
+          <input
-            <div className="config-input-row">
+            className="input"
-              <input
+            type="url"
-                type="url"
+            placeholder="http://127.0.0.1:11434 — leave blank for local subprocess"
-                style={{ width: 340 }}
+            value={cfg.base_url || ''}
-                placeholder="http://127.0.0.1:11434 — blank for local subprocess"
+            disabled={!isAdmin}
-                value={cfg.base_url || ''}
+            onChange={(e) => setCfg({ ...cfg, base_url: e.target.value || null })}
-                onChange={(e) => setCfg({ ...cfg, base_url: e.target.value || null })}
+          />
-              />
+          <span className="field-hint">
-            </div>
+            Blank = use local <span className="mono">ollama run</span> subprocess.
-            <span className="interval-hint">
+            Set to the daemon URL to target a remote host.
-              Leave blank to use local Ollama subprocess. Set to the daemon URL when targeting a remote host.
+          </span>
-            </span>
+        </div>
-          </>
-        ) : (
-          <span className="config-value">{cfg.base_url || '(subprocess)'}</span>
-        )}
       </div>
 
-      <div className="config-field">
+      <div className="form-grid">
-        <span className="config-label">MODEL</span>
+        <div className="tweak-group">
-        {isAdmin ? (
+          <label>Timeout (seconds)</label>
-          <div className="config-input-row">
+          <input
-            <input
+            className="input"
-              type="text"
+            type="number"
-              style={{ width: 200 }}
+            min={1}
-              placeholder="llama3.1"
+            step={1}
-              value={cfg.model}
+            value={cfg.timeout}
-              onChange={(e) => setCfg({ ...cfg, model: e.target.value })}
+            disabled={!isAdmin}
-            />
+            onChange={(e) => {
-          </div>
+              const v = parseFloat(e.target.value);
-        ) : (
+              if (v > 0) setCfg({ ...cfg, timeout: v });
-          <span className="config-value">{cfg.model}</span>
+            }}
-        )}
+          />
-      </div>
+        </div>
 
-      <div className="config-field">
+        <div className="tweak-group">
-        <span className="config-label">TIMEOUT (seconds)</span>
+          <label>API Key (write-only)</label>
-        {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 }}>
+              <div className="key-badge">
-                <CheckCircle size={12} /> Key stored
+                <CheckCircle size={11} /> KEY SET — enter a new value to rotate
-              </span>
+              </div>
-              <button
+              {isAdmin && (
-                className="action-btn"
+                <div className="actions">
-                onClick={() => { setClearApiKey(true); setApiKeyInput(''); }}
+                  <button
-              >
+                    className="btn ghost"
-                CLEAR
+                    style={{ padding: '3px 10px', fontSize: '0.65rem' }}
-              </button>
+                    onClick={() => { setClearApiKey(true); setApiKeyInput(''); }}
-            </div>
+                  >
+                    CLEAR
+                  </button>
+                </div>
+              )}
+            </>
           ) : (
-            <div className="config-input-row">
+            <>
               <input
+                className="input"
                 type="password"
-                style={{ width: 280 }}
                 placeholder={clearApiKey
                   ? '(will be cleared on save)'
                   : 'Enter key to set — blank keeps existing'}
                 value={apiKeyInput}
-                disabled={clearApiKey}
+                disabled={!isAdmin || clearApiKey}
                 onChange={(e) => setApiKeyInput(e.target.value)}
               />
-              {clearApiKey && (
+              {clearApiKey && isAdmin && (
-                <button className="action-btn" onClick={() => setClearApiKey(false)}>
+                <div className="actions">
-                  CANCEL
+                  <button
-                </button>
+                    className="btn ghost"
+                    style={{ padding: '3px 10px', fontSize: '0.65rem' }}
+                    onClick={() => setClearApiKey(false)}
+                  >
+                    CANCEL CLEAR
+                  </button>
+                </div>
               )}
-            </div>
+            </>
           )}
         </div>
-      )}
+      </div>
 
       {isAdmin && (
-        <div className="config-field" style={{ marginBottom: 0 }}>
+        <div className="actions">
-          <div className="config-input-row">
+          <button
-            <button
+            className="btn violet"
-              className="save-btn"
+            onClick={handleSave}
-              onClick={handleSave}
+            disabled={saving}
-              disabled={saving}
+          >
-            >
+            <Save size={12} /> {saving ? 'SAVING…' : 'SAVE'}
-              <Save size={14} />
+          </button>
-              {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>