aimeat 1.2.0

package/dist/public/views/admin/chat-instances-tab.js

@@ -0,0 +1,207 @@
+import { h } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { dt, StatsGrid, Empty, useToast, Toast } from './shared.js';
+import { useConfirm } from '/components/Modal.js';
+import {
+  deleteChatInstance,
+  getBoards, getBoardPosts, createBoard, postToBoard,
+} from '/js/services/admin.js';
+
+/* ── Inline Chat View ── */
+function ChannelChat({ boardId }) {
+  const [posts, setPosts] = useState([]);
+  const [msg, setMsg] = useState('');
+  const [loading, setLoading] = useState(true);
+  const feedRef = useRef(null);
+  const [toast, showErr, showOk, clearToast] = useToast();
+
+  async function loadPosts() {
+    try {
+      const res = await getBoardPosts(boardId, 100);
+      setPosts((res.data?.posts || []).reverse());
+    } catch (e) { console.warn('Failed to load:', e.message); setPosts([]); }
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    loadPosts();
+    const iv = setInterval(loadPosts, 5000);
+    return () => clearInterval(iv);
+  }, [boardId]);
+
+  useEffect(() => {
+    if (feedRef.current) feedRef.current.scrollTop = feedRef.current.scrollHeight;
+  }, [posts]);
+
+  async function send() {
+    if (!msg.trim()) return;
+    try {
+      await postToBoard(boardId, msg.trim());
+      setMsg('');
+      loadPosts();
+    } catch (e) { showErr(e.message); }
+  }
+
+  return html`
+    <div style="margin-top:10px;padding:10px 12px 12px;border-radius:8px;background:rgba(0,0,0,0.15)">
+      ${toast && html`<${Toast} ...${toast} onDismiss=${clearToast} />`}
+      <div ref=${feedRef} style="
+        height:220px;min-height:100px;overflow-y:auto;resize:vertical;
+        border:1px solid var(--glass-border);border-radius:8px;
+        background:rgba(0,0,0,0.25);padding:10px;margin-bottom:10px;
+      ">
+        ${loading && html`<div class="adm-text-dim">${t('dashboard.loading')}...</div>`}
+        ${!loading && !posts.length && html`<div class="adm-text-dim adm-text-base" style="text-align:center;padding:24px;font-style:italic">${t('dashboard.chatNoMessages')}</div>`}
+        ${posts.map(p => {
+          const raw = p.author_gaii || p.authorGaii || 'operator';
+          const author = raw.includes('#') ? raw.split('#')[1].split('@')[0] : raw.split('@')[0];
+          return html`
+            <div style="margin-bottom:10px;padding:8px 10px;border-radius:6px;background:rgba(255,255,255,0.04);border-left:2px solid rgba(6,182,212,0.3)">
+              <div class="adm-flex-between" style="align-items:baseline;margin-bottom:3px">
+                <span class="adm-text-accent" style="font-size:.72rem;font-weight:700">${escHtml(author)}</span>
+                <span class="adm-text-dim" style="font-size:.62rem">${dt(p.created_at || p.createdAt)}</span>
+              </div>
+              <div class="adm-text-base adm-text-bright" style="line-height:1.5;white-space:pre-wrap">${escHtml(p.body || '')}</div>
+            </div>
+          `;
+        })}
+      </div>
+
+      <div class="adm-flex">
+        <input class="adm-input" value=${msg} onInput=${e => setMsg(e.target.value)}
+          placeholder=${t('dashboard.chatMessagePlaceholder')}
+          onKeyDown=${e => e.key === 'Enter' && send()}
+          style="flex:1;background:rgba(0,0,0,0.2)" />
+        <button class="adm-btn-action" onClick=${send}>${t('dashboard.chatSendMessage')}</button>
+      </div>
+    </div>
+  `;
+}
+
+/* ── Main Tab ── */
+export default function ChatInstancesTab({ data, reload }) {
+  const sessions = Array.isArray(data.chatInstances) ? data.chatInstances : (data.chatInstances?.sessions || []);
+
+  const [name, setName] = useState('');
+  const [channels, setChannels] = useState([]);
+  const [openChats, setOpenChats] = useState(new Set());
+  const nameRef = useRef(null);
+  const [toast, showErr, showOk, clearToast] = useToast();
+  const { confirm, ConfirmUI } = useConfirm();
+
+  async function loadChannels() {
+    try {
+      const res = await getBoards();
+      setChannels((res.data?.boards || []).filter(b => b.name?.startsWith('ops:')));
+    } catch (e) { console.warn('Failed to load:', e.message); setChannels([]); }
+  }
+
+  useEffect(() => { loadChannels(); }, []);
+
+  async function doCreateChannel() {
+    if (!name.trim()) { nameRef.current?.focus(); return; }
+    const channelName = name.trim().startsWith('ops:') ? name.trim() : 'ops:' + name.trim();
+    try {
+      await createBoard(channelName, 'shared', t('dashboard.chatOperatorChannelsExplain'));
+      setName('');
+      loadChannels();
+    } catch (e) { showErr(e.message); }
+  }
+
+  function toggleChat(id) {
+    setOpenChats(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+  }
+
+  async function doDeleteInstance(id) {
+    confirm(t('dashboard.chatDeleteConfirm').replace('{id}', id), async () => {
+      try { await deleteChatInstance(id); reload(); }
+      catch (e) { showErr(e.message); }
+    }, { danger: true });
+  }
+
+  return html`
+    ${toast && html`<${Toast} ...${toast} onDismiss=${clearToast} />`}
+    <p class="adm-text-dim adm-text-base adm-mb-md">${t('dashboard.chatExplain')}</p>
+
+    <!-- Operator Channels -->
+    <div class="adm-card">
+      <h3>${t('dashboard.chatOperatorChannels')}</h3>
+      <p class="adm-text-sm adm-text-dim" style="margin-bottom:10px">${t('dashboard.chatOperatorChannelsExplain')}</p>
+
+      <div class="adm-flex-wrap adm-mb-lg" style="align-items:flex-end">
+        <div style="flex:1;min-width:160px">
+          <label class="adm-text-xs adm-text-dim">${t('dashboard.chatChannelName')}</label>
+          <input ref=${nameRef} class="adm-input adm-input-full" value=${name} onInput=${e => setName(e.target.value)}
+            placeholder=${t('dashboard.chatChannelNamePlaceholder')}
+            onKeyDown=${e => e.key === 'Enter' && doCreateChannel()} />
+        </div>
+        <button class="adm-btn-action" onClick=${doCreateChannel} style="white-space:nowrap">+ ${t('dashboard.chatCreateChannel')}</button>
+      </div>
+
+      ${!channels.length
+        ? html`<div class="adm-text-dim" style="font-style:italic;padding:8px 0">${t('dashboard.chatNoChannels')}</div>`
+        : html`<div class="adm-flex-col" style="gap:12px">
+          ${channels.map(ch => {
+            const cid = ch.id || ch.name;
+            const isOpen = openChats.has(cid);
+            const displayName = (ch.name || ch.id).replace(/^ops:/, '');
+            return html`
+              <div style="border:1px solid ${isOpen ? '#06b6d4' : 'var(--glass-border)'};border-radius:10px;padding:12px 14px;background:${isOpen ? 'rgba(6,182,212,0.04)' : 'rgba(255,255,255,0.02)'};transition:all .2s ease">
+                <div class="adm-flex-between">
+                  <div class="adm-flex-center" style="gap:10px">
+                    <span style="font-size:1.1rem">\u{1F4AC}</span>
+                    <div>
+                      <div style="font-weight:700;font-size:.95rem"># ${escHtml(displayName)}</div>
+                      ${ch.post_count != null ? html`<div class="adm-text-xs adm-text-dim">${ch.post_count} messages</div>` : null}
+                    </div>
+                  </div>
+                  <button class="adm-btn-action" onClick=${() => toggleChat(cid)} style="font-size:.8rem"
+                  >${isOpen ? '\u25B2 Collapse' : '\u25BC Expand'}</button>
+                </div>
+                ${isOpen && html`<${ChannelChat} boardId=${cid} />`}
+              </div>
+            `;
+          })}
+        </div>`
+      }
+    </div>
+
+    <!-- AI Chat Instances -->
+    <${StatsGrid} items=${[
+      { label: t('dashboard.totalSessions'), value: sessions.length, color: '#06b6d4' },
+    ]} />
+
+    ${!sessions.length
+      ? html`<${Empty} text=${t('dashboard.noChatInstances')} />`
+      : html`<div class="adm-card"><div class="scrollable"><table>
+        <thead><tr>
+          <th>${t('dashboard.chatChannelName')}</th>
+          <th>${t('dashboard.chatChannelPlatform')}</th>
+          <th>GHII</th>
+          <th>${t('dashboard.created')}</th>
+          <th>${t('dashboard.statusLabel')}</th>
+          <th></th>
+        </tr></thead>
+        <tbody>
+          ${sessions.map(s => html`<tr>
+            <td>${escHtml(s.app_name || s.id || '')}</td>
+            <td>${escHtml(s.platform || '')}</td>
+            <td class="mono adm-text-sm">${escHtml(String(s.ghii || '').substring(0, 20))}</td>
+            <td class="adm-text-dim">${dt(s.created_at)}</td>
+            <td><span class="badge ${s.is_anonymous ? 'bg-dim' : 'bg-green'}">${s.is_anonymous ? 'anon' : t('dashboard.active')}</span></td>
+            <td><button class="adm-btn-sm" onClick=${() => doDeleteInstance(s.id)} title="Delete">\u274C</button></td>
+          </tr>`)}
+        </tbody>
+      </table></div></div>`
+    }
+    <${ConfirmUI} />
+  `;
+}

package/dist/public/views/admin/config-tab.js

@@ -0,0 +1,151 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { Badge, Empty, ExpandableHelp } from './shared.js';
+import { saveConfig, deleteConfig } from '/js/services/admin.js';
+
+// Map config source to Badge type for visual distinction
+const SOURCE_BADGE = {
+  database: 'healthy',
+  env: 'info',
+  file: 'private',
+  consul: 'watch',
+  default: 'idle',
+};
+
+export default function ConfigTab({ data, reload }) {
+  const s = data.configSchema;
+  if (!s || !s.schema) return html`<${Empty} text=${t('dashboard.configNotAvailable')} />`;
+
+  const [pending, setPending] = useState({});
+  const [result, setResult] = useState(null);
+
+  const schema = s.schema;
+  const editable = s.editable !== false;
+
+  // Group by first part of path
+  const groups = {};
+  for (const path in schema) {
+    const group = path.split('.')[0];
+    if (!groups[group]) groups[group] = [];
+    groups[group].push({ path, entry: schema[path] });
+  }
+
+  // Translate a config path — try dashboard.cfg_<dotpath> then fall back to raw path
+  function label(path) {
+    const key = 'dashboard.cfg_' + path.replace(/\./g, '_');
+    const val = t(key);
+    return val !== key ? val : path;
+  }
+  function groupLabel(g) {
+    const key = 'dashboard.cfgGroup_' + g;
+    const val = t(key);
+    return val !== key ? val : g.charAt(0).toUpperCase() + g.slice(1).replace(/_/g, ' ');
+  }
+
+  function onChange(path, value) {
+    setPending(prev => ({ ...prev, [path]: value }));
+  }
+
+  async function save() {
+    const changes = Object.entries(pending).map(([path, value]) => ({ path, value }));
+    if (!changes.length) return;
+    try {
+      const r = await saveConfig(changes);
+      setResult({ ok: true, msg: t('dashboard.savedChanges').replace('{count}', r.data.applied.length) });
+      setPending({});
+      reload();
+    } catch (err) {
+      setResult({ ok: false, msg: err.message });
+    }
+  }
+
+  async function resetConfig(path) {
+    try {
+      await deleteConfig(path);
+      setResult({ ok: true, msg: t('dashboard.cfgResetDone').replace('{path}', path) });
+      reload();
+    } catch (err) {
+      setResult({ ok: false, msg: err.message });
+    }
+  }
+
+  function cancel() {
+    setPending({});
+    setResult(null);
+  }
+
+  const pendingKeys = Object.keys(pending);
+
+  return html`
+    <!-- Read-only banner for in-memory storage -->
+    ${!editable && html`
+      <div class="adm-config-readonly-banner">
+        <p>${t('dashboard.cfgReadOnlyBanner')}</p>
+        <${ExpandableHelp} title=${t('dashboard.cfgReadOnlyHelpTitle')}>
+          <p>${t('dashboard.cfgReadOnlyHelpDetail')}</p>
+        </${ExpandableHelp}>
+      </div>
+    `}
+
+    ${result && html`<div class="adm-mb-md adm-text-base" style="padding:8px 12px;border-radius:6px;background:${result.ok ? '#16a34a22' : '#dc262622'};color:${result.ok ? '#22c55e' : '#ef4444'}">${escHtml(result.msg)}</div>`}
+
+    <!-- Pending changes banner -->
+    ${editable && pendingKeys.length > 0 && html`
+      <div class="adm-config-changes">
+        <h3 class="adm-mb-sm" style="color:#eab308">${t('dashboard.pendingChanges')}</h3>
+        ${pendingKeys.map(k => html`<div>${escHtml(k)} \u2192 <strong>${escHtml(String(pending[k]))}</strong></div>`)}
+        <div class="adm-mt-sm">
+          <button class="adm-btn-action" onClick=${save}>${t('dashboard.saveChanges')}</button>
+          ${' '}
+          <button class="adm-btn-action" onClick=${cancel}>${t('dashboard.cancelLabel')}</button>
+        </div>
+      </div>
+    `}
+
+    ${Object.entries(groups).map(([g, items]) => {
+      const helpKey = 'dashboard.cfgHelp_' + g;
+      const helpText = t(helpKey);
+      const hasHelp = helpText !== helpKey;
+      return html`
+      <details class="adm-card adm-mb-sm" open>
+        <summary style="cursor:pointer;font-weight:600;font-size:.95rem;padding:8px 0">
+          ${groupLabel(g)}
+        </summary>
+        ${hasHelp && html`<${ExpandableHelp} title=${t('dashboard.cfgHelpTitle')}><p>${helpText}</p></${ExpandableHelp}>`}
+        <div class=${!editable ? 'adm-config-readonly' : ''} style="padding:8px 0">
+          ${items.map(({ path: p, entry: e }) => html`
+            <div class="adm-hrow">
+              <span class="adm-hmetric" title=${e.description}>
+                ${label(p)}
+                ${e.source && html` <span class="adm-badge adm-badge-${SOURCE_BADGE[e.source] || 'idle'}" style="font-size:.6rem;vertical-align:middle">${e.source}</span>`}
+              </span>
+              <span>
+                ${!e.mutable
+                  ? (typeof e.value === 'boolean'
+                    ? html`${e.value ? html`<${Badge} type="healthy" /> ${t('dashboard.yesLabel')}` : html`<${Badge} type="critical" /> ${t('dashboard.noLabel')}`}`
+                    : html`<code>${escHtml(String(e.value))}</code> <span class="adm-text-dim adm-text-xs">${t('dashboard.readOnly')}</span>`)
+                  : e.type === 'boolean'
+                    ? html`<label style="cursor:pointer"><input type="checkbox" checked=${e.value} onChange=${ev => onChange(p, ev.target.checked)} disabled=${!editable} /> ${e.value ? t('dashboard.enabled') : t('dashboard.disabled')}</label>`
+                    : e.type === 'integer'
+                      ? html`<input type="number" value=${e.value} style="width:120px" onChange=${ev => onChange(p, parseInt(ev.target.value))} disabled=${!editable} />${e.range ? html` <span class="adm-text-dim adm-text-xs">${escHtml(e.range)}</span>` : null}`
+                      : e.type === 'float'
+                        ? html`<input type="number" step="0.01" value=${e.value} style="width:120px" onChange=${ev => onChange(p, parseFloat(ev.target.value))} disabled=${!editable} />${e.range ? html` <span class="adm-text-dim adm-text-xs">${escHtml(e.range)}</span>` : null}`
+                        : e.type === 'string'
+                          ? html`<input type="text" value=${e.value || ''} style="width:250px" onChange=${ev => onChange(p, ev.target.value)} disabled=${!editable} />`
+                          : e.type === 'object'
+                            ? html`<code style="font-size:.75rem">${escHtml(JSON.stringify(e.value)).substring(0, 100)}...</code>`
+                            : html`<code>${escHtml(String(e.value))}</code>`
+                }
+                ${e.canReset && editable && html` <button class="adm-btn-sm" onClick=${() => resetConfig(p)}>${t('dashboard.cfgReset')}</button>`}
+              </span>
+            </div>
+          `)}
+        </div>
+      </details>
+    `})}
+  `;
+}

package/dist/public/views/admin/consul-tab.js

@@ -0,0 +1,77 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { Badge, StatsGrid, ExpandableHelp, Empty, DataTable } from './shared.js';
+import { consulExport, consulImport } from '/js/services/admin.js';
+
+export default function ConsulTab({ data, reload }) {
+  const consul = data.consul;
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState(null);
+
+  if (!consul) return html`<${Empty} text=${t('dashboard.consulDisabled')} />`;
+
+  if (!consul.enabled) {
+    return html`
+      <p style="color:var(--text-dim);font-size:.85rem;margin-bottom:12px">${t('dashboard.consulExplain')}</p>
+      <div class="adm-card">
+        <p>${t('dashboard.consulDisabled')}</p>
+        <${ExpandableHelp} title=${t('dashboard.consulSetupGuide')}>
+          <p>${t('dashboard.consulSetupDetail')}</p>
+        </${ExpandableHelp}>
+      </div>
+    `;
+  }
+
+  const handleExport = async () => {
+    setLoading(true);
+    try {
+      const r = await consulExport();
+      setResult({ ok: true, msg: `Exported ${r.data.exported}/${r.data.total} keys to Consul` });
+      await reload();
+    } catch (err) { setResult({ ok: false, msg: err.message }); }
+    setLoading(false);
+  };
+
+  const handleImport = async () => {
+    setLoading(true);
+    try {
+      const r = await consulImport();
+      setResult({ ok: true, msg: `Imported ${r.data.imported}/${r.data.total} keys from Consul` });
+      await reload();
+    } catch (err) { setResult({ ok: false, msg: err.message }); }
+    setLoading(false);
+  };
+
+  return html`
+    <p style="color:var(--text-dim);font-size:.85rem;margin-bottom:12px">${t('dashboard.consulExplain')}</p>
+    <${ExpandableHelp} title=${t('dashboard.consulSetupGuide')}>
+      <p>${t('dashboard.consulSetupDetail')}</p>
+    </${ExpandableHelp}>
+
+    <${StatsGrid} items=${[
+      { label: t('dashboard.consulStatus'), value: consul.healthy ? '\u2713' : '\u2717', color: consul.healthy ? '#22c55e' : '#ef4444' },
+      { label: t('dashboard.consulKeysLoaded'), value: consul.key_count },
+    ]} />
+
+    ${result && html`<div style="margin:12px 0;padding:8px 12px;border-radius:6px;background:${result.ok ? '#16a34a22' : '#dc262622'};color:${result.ok ? '#22c55e' : '#ef4444'};font-size:.85rem">${escHtml(result.msg)}</div>`}
+
+    <div class="adm-card" style="margin-top:12px">
+      <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
+        <span style="color:var(--text-dim);font-size:.85rem">${escHtml(consul.url)} \u2014 ${escHtml(consul.prefix)}</span>
+        <span style="margin-left:auto"><${Badge} type=${consul.healthy ? 'healthy' : 'critical'} /></span>
+      </div>
+      <div style="display:flex;gap:8px;margin-bottom:12px">
+        <button class="adm-btn" onClick=${handleExport} disabled=${loading}>${t('dashboard.consulExport')}</button>
+        <button class="adm-btn-action" onClick=${handleImport} disabled=${loading}>${t('dashboard.consulImport')}</button>
+      </div>
+      ${consul.keys?.length > 0
+        ? html`<${DataTable} headers=${['Key']} rows=${consul.keys.map(k => [escHtml(k)])} />`
+        : html`<${Empty} text=${t('dashboard.consulNoKeys')} />`
+      }
+    </div>
+  `;
+}

package/dist/public/views/admin/cors-tab.js

@@ -0,0 +1,240 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { escHtml } from '/js/utils.js';
+import { Empty, useToast, Toast } from './shared.js';
+import { useConfirm } from '/components/Modal.js';
+import { clearGhiiCors, clearAgentCors, setGhiiCors, setAgentCors } from '/js/services/admin.js';
+
+const COMMON_ORIGINS = [
+  'http://localhost:3000',
+  'http://localhost:5173',
+  'http://localhost:8080',
+  'https://yourdomain.com',
+  '*',
+];
+
+/** Suggestion buttons that append an origin to an input value */
+function OriginSuggestions({ value, onChange }) {
+  function add(origin) {
+    const parts = value ? value.split(',').map(s => s.trim()).filter(Boolean) : [];
+    if (!parts.includes(origin)) { parts.push(origin); }
+    onChange(parts.join(', '));
+  }
+  return html`
+    <div class="adm-flex-wrap adm-mt-sm" style="gap:.35rem;align-items:center">
+      <span class="adm-text-sm adm-text-dim">${t('dashboard.corsCommonOrigins')}</span>
+      ${COMMON_ORIGINS.map(o => html`
+        <button type="button" class="adm-btn-sm" style="font-size:.75rem;padding:2px 8px"
+          onClick=${() => add(o)}>${o}</button>
+      `)}
+    </div>
+  `;
+}
+
+/** Inline editor row for existing CORS overrides */
+function InlineEditor({ origins, onSave, onCancel }) {
+  const [val, setVal] = useState(origins.join(', '));
+  function save() {
+    const arr = val.split(',').map(s => s.trim()).filter(Boolean);
+    if (arr.length === 0) return;
+    onSave(arr);
+  }
+  return html`
+    <div class="adm-flex-col" style="gap:.4rem;padding:.5rem 0">
+      <input class="adm-input adm-input-full" type="text" value=${val} onInput=${e => setVal(e.target.value)}
+        placeholder=${t('dashboard.corsOriginPlaceholder')}
+        style="font-family:monospace" />
+      <${OriginSuggestions} value=${val} onChange=${setVal} />
+      <div class="adm-flex" style="gap:.4rem;margin-top:.25rem">
+        <button class="adm-btn-action" onClick=${save}>${t('dashboard.corsSave')}</button>
+        <button class="adm-btn-sm" onClick=${onCancel}>${t('dashboard.corsCancel')}</button>
+      </div>
+    </div>
+  `;
+}
+
+/** Add-override form for GHII or Agent */
+function AddOverrideForm({ items, labelKey, idKey, nameKey, onSave }) {
+  const [selectedId, setSelectedId] = useState('');
+  const [origins, setOrigins] = useState('');
+
+  async function save() {
+    if (!selectedId || !origins.trim()) return;
+    const arr = origins.split(',').map(s => s.trim()).filter(Boolean);
+    if (arr.length === 0) return;
+    await onSave(selectedId, arr);
+    setSelectedId('');
+    setOrigins('');
+  }
+
+  return html`
+    <div style="margin-top:1rem;padding-top:1rem;border-top:1px solid var(--glass-border)">
+      <h3 style="font-size:.9rem;margin-bottom:.5rem">${t('dashboard.corsAddOverride')}</h3>
+      <div class="adm-flex-col" style="gap:.4rem">
+        <select class="adm-input" value=${selectedId} onChange=${e => setSelectedId(e.target.value)}>
+          <option value="">${t(labelKey)}</option>
+          ${items.map(it => html`
+            <option value=${it[idKey]}>${escHtml(it[nameKey] || it[idKey])}</option>
+          `)}
+        </select>
+        <input class="adm-input adm-input-full" type="text" value=${origins} onInput=${e => setOrigins(e.target.value)}
+          placeholder=${t('dashboard.corsOriginPlaceholder')}
+          style="font-family:monospace" />
+        <${OriginSuggestions} value=${origins} onChange=${setOrigins} />
+        <div style="margin-top:.25rem">
+          <button class="adm-btn-action" onClick=${save}>${t('dashboard.corsSave')}</button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export default function CorsTab({ data, reload }) {
+  const configSchema = data.configSchema;
+  const nodeOrigins = configSchema?.schema?.['cors.allowedOrigins']?.value
+    || data.dash?.cors_allowed_origins || null;
+
+  // GHII overrides
+  const ghiiRows = (data.ghiiUsers || []).filter(u => u.allowed_origins?.length > 0);
+  // Agent overrides
+  const agentRows = (data.agents?.agents || []).filter(a => a.allowed_origins?.length > 0);
+
+  // Track which row is being edited
+  const [editGhii, setEditGhii] = useState(null);
+  const [editAgent, setEditAgent] = useState(null);
+  const [toast, showErr, showOk, clearToast] = useToast();
+  const { confirm, ConfirmUI } = useConfirm();
+
+  async function doClearGhii(ghii) {
+    confirm(t('dashboard.corsClearConfirm'), async () => {
+      try {
+        await clearGhiiCors(ghii);
+        reload();
+      } catch (e) { showErr(e.message); }
+    }, { danger: true });
+  }
+
+  async function doClearAgent(gaii) {
+    confirm(t('dashboard.corsClearConfirm'), async () => {
+      try {
+        await clearAgentCors(gaii);
+        reload();
+      } catch (e) { showErr(e.message); }
+    }, { danger: true });
+  }
+
+  async function doSaveGhii(ghii, origins) {
+    try {
+      await setGhiiCors(ghii, origins);
+      setEditGhii(null);
+      reload();
+    } catch (e) { showErr(e.message); }
+  }
+
+  async function doSaveAgent(gaii, origins) {
+    try {
+      await setAgentCors(gaii, origins);
+      setEditAgent(null);
+      reload();
+    } catch (e) { showErr(e.message); }
+  }
+
+  // All GHII users (for add-override dropdown), excluding those already overridden
+  const ghiiOverriddenSet = new Set(ghiiRows.map(r => r.ghii));
+  const ghiiAvailable = (data.ghiiUsers || []).filter(u => !ghiiOverriddenSet.has(u.ghii));
+
+  // All agents (for add-override dropdown), excluding those already overridden
+  const agentOverriddenSet = new Set(agentRows.map(a => a.gaii));
+  const agentAvailable = (data.agents?.agents || []).filter(a => !agentOverriddenSet.has(a.gaii));
+
+  return html`
+    ${toast && html`<${Toast} ...${toast} onDismiss=${clearToast} />`}
+    <!-- Node default -->
+    <div class="adm-card">
+      <h2>${t('dashboard.corsNodeDefault')}</h2>
+      <p class="adm-text-dim adm-text-base" style="margin-bottom:.75rem">${t('dashboard.corsNodeDefaultDesc')}</p>
+      <code style="font-size:.85rem">${nodeOrigins ? escHtml(Array.isArray(nodeOrigins) ? nodeOrigins.join(', ') : String(nodeOrigins)) : '*'}</code>
+    </div>
+
+    <!-- GHII overrides -->
+    <div class="adm-card">
+      <h2>${t('dashboard.corsGhiiOverrides')}</h2>
+      <p class="adm-text-dim adm-text-base" style="margin-bottom:.75rem">${t('dashboard.corsGhiiOverridesDesc')}</p>
+      ${ghiiRows.length === 0
+        ? html`<div class="adm-text-dim adm-text-base">${t('dashboard.corsNoOverrides')}</div>`
+        : html`<table>
+          <thead><tr><th>${t('dashboard.owner')}</th><th>${t('dashboard.corsOrigins')}</th><th></th></tr></thead>
+          <tbody>
+            ${ghiiRows.map(r => html`<tr>
+              <td>${escHtml(r.owner_name || r.ghii)}</td>
+              <td style="width:100%">
+                ${editGhii === r.ghii
+                  ? html`<${InlineEditor}
+                      origins=${r.allowed_origins}
+                      onSave=${(arr) => doSaveGhii(r.ghii, arr)}
+                      onCancel=${() => setEditGhii(null)} />`
+                  : html`<span class="mono adm-text-sm">${escHtml(r.allowed_origins.join(', '))}</span>`
+                }
+              </td>
+              <td style="white-space:nowrap">
+                ${editGhii !== r.ghii && html`<span style="display:inline-flex;gap:.3rem">
+                  <button class="adm-btn-sm" onClick=${() => setEditGhii(r.ghii)}>${t('dashboard.corsEdit')}</button>
+                  <button class="adm-btn-sm" onClick=${() => doClearGhii(r.ghii)}>${t('dashboard.corsClear')}</button>
+                </span>`}
+              </td>
+            </tr>`)}
+          </tbody>
+        </table>`
+      }
+      <${AddOverrideForm}
+        items=${ghiiAvailable}
+        labelKey="dashboard.corsSelectUser"
+        idKey="ghii"
+        nameKey="owner_name"
+        onSave=${(ghii, origins) => doSaveGhii(ghii, origins)} />
+    </div>
+
+    <!-- Agent overrides -->
+    <div class="adm-card">
+      <h2>${t('dashboard.corsAgentOverrides')}</h2>
+      <p class="adm-text-dim adm-text-base" style="margin-bottom:.75rem">${t('dashboard.corsAgentOverridesDesc')}</p>
+      ${agentRows.length === 0
+        ? html`<div class="adm-text-dim adm-text-base">${t('dashboard.corsNoOverrides')}</div>`
+        : html`<table>
+          <thead><tr><th>GAII</th><th>${t('dashboard.owner')}</th><th>${t('dashboard.corsOrigins')}</th><th></th></tr></thead>
+          <tbody>
+            ${agentRows.map(a => html`<tr>
+              <td class="mono adm-text-sm">${escHtml(a.gaii)}</td>
+              <td>${escHtml(a.owner)}</td>
+              <td style="width:100%">
+                ${editAgent === a.gaii
+                  ? html`<${InlineEditor}
+                      origins=${a.allowed_origins}
+                      onSave=${(arr) => doSaveAgent(a.gaii, arr)}
+                      onCancel=${() => setEditAgent(null)} />`
+                  : html`<span class="mono adm-text-sm">${escHtml(a.allowed_origins.join(', '))}</span>`
+                }
+              </td>
+              <td style="white-space:nowrap">
+                ${editAgent !== a.gaii && html`<span style="display:inline-flex;gap:.3rem">
+                  <button class="adm-btn-sm" onClick=${() => setEditAgent(a.gaii)}>${t('dashboard.corsEdit')}</button>
+                  <button class="adm-btn-sm" onClick=${() => doClearAgent(a.gaii)}>${t('dashboard.corsClear')}</button>
+                </span>`}
+              </td>
+            </tr>`)}
+          </tbody>
+        </table>`
+      }
+      <${AddOverrideForm}
+        items=${agentAvailable}
+        labelKey="dashboard.corsSelectAgent"
+        idKey="gaii"
+        nameKey="name"
+        onSave=${(gaii, origins) => doSaveAgent(gaii, origins)} />
+    </div>
+    <${ConfirmUI} />
+  `;
+}