@acms-subir/core 0.2.0 → 0.3.1

package/src/components/AiSettings.tsx

@@ -0,0 +1,575 @@
+import { useEffect, useId, useRef, useState } from 'react';
+
+// AI & agent settings: two self-contained cards.
+//
+// 1. AI provider — OpenAI or a custom OpenAI-compatible API. The API
+//    key is write-only: the server never returns it, the field starts empty,
+//    and nothing is kept in browser storage. A blank key keeps the stored one
+//    only while provider + URL stay the same — a new destination needs the key
+//    typed again so a secret is never silently sent somewhere new.
+// 2. Agent access — a separate hashed bearer key for /api/agent. The plain
+//    token comes back exactly once (after generating) and lives only in state
+//    until dismissed.
+//
+// Styles are scoped under .ais so settings.astro's own cards are untouched.
+
+type Provider = 'openai' | 'custom';
+
+interface PublicSettings {
+  ai: { enabled: boolean; provider: Provider; baseUrl: string; model: string; hasApiKey: boolean };
+  agent: { enabled: boolean; hasKey: boolean; keyPrefix: string; allowPublish: boolean };
+  agentUrl: string;
+  docsUrl: string;
+}
+
+const OPENAI_URL = 'https://api.openai.com/v1';
+
+const PROVIDERS: { id: Provider; name: string }[] = [
+  { id: 'openai', name: 'OpenAI' },
+  { id: 'custom', name: 'Custom' },
+];
+
+const URL_PLACEHOLDER: Record<Provider, string> = {
+  openai: OPENAI_URL,
+  custom: 'https://api.example.com/v1',
+};
+
+async function api<T>(url: string, body?: unknown): Promise<T> {
+  const res = await fetch(url, {
+    method: body === undefined ? 'GET' : 'POST',
+    credentials: 'same-origin',
+    headers: body === undefined || body === null ? undefined : { 'content-type': 'application/json' },
+    body: body === undefined || body === null ? undefined : JSON.stringify(body),
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.error || data?.message || `${res.status} ${res.statusText || 'Request failed'}`);
+  if (!data) throw new Error('The server sent an empty response.');
+  return data as T;
+}
+
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+// Match server normalization: trim trailing slashes, preserve the API path.
+const sameUrl = (a: string, b: string) => {
+  const n = (s: string) => { try { const u = new URL(s.trim()); return u.origin + u.pathname.replace(/\/+$/, '') + u.search + u.hash; } catch { return s.trim(); } };
+  return n(a) === n(b);
+};
+
+// only link to same-site paths or http(s) URLs from the server response
+const safeHref = (u: string) => (u.startsWith('/') && !u.startsWith('//')) || /^https?:\/\//i.test(u) ? u : '';
+
+type Busy = 'save' | 'test' | 'generate' | 'revoke' | 'saveAgent';
+
+export default function AiSettings() {
+  const uid = useId();
+  const [data, setData] = useState<PublicSettings | null>(null);
+  const [loadError, setLoadError] = useState('');
+
+  // provider form
+  const [enabled, setEnabled] = useState(false);
+  const [provider, setProvider] = useState<Provider>('openai');
+  const [baseUrl, setBaseUrl] = useState('');
+  const [model, setModel] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [clearApiKey, setClearApiKey] = useState(false);
+  const [models, setModels] = useState<string[]>([]);
+
+  // agent form
+  const [agentEnabled, setAgentEnabled] = useState(false);
+  const [allowPublish, setAllowPublish] = useState(false);
+  const [token, setToken] = useState('');
+  const [copied, setCopied] = useState('');
+
+  // one pending action at a time per card; the ref blocks double-clicks that
+  // land before React re-renders the disabled button
+  const [busy, setBusy] = useState<Busy | null>(null);
+  const busyRef = useRef<Busy | null>(null);
+  const [saveMsg, setSaveMsg] = useState({ ok: '', err: '' });
+  const [testMsg, setTestMsg] = useState({ ok: '', err: '' });
+  const [agentMsg, setAgentMsg] = useState({ ok: '', err: '' });
+  const tokenRef = useRef<HTMLInputElement>(null);
+
+  function adopt(s: PublicSettings, part: 'all' | 'ai' | 'agent' = 'all') {
+    setData(s);
+    if (part !== 'agent') {
+      setEnabled(s.ai.enabled);
+      setProvider(s.ai.provider);
+      setBaseUrl(s.ai.provider === 'openai' ? OPENAI_URL : s.ai.baseUrl);
+      setModel(s.ai.model);
+      setApiKey('');
+      setClearApiKey(false);
+    }
+    if (part !== 'ai') {
+      setAgentEnabled(s.agent.enabled);
+      setAllowPublish(s.agent.allowPublish);
+    }
+  }
+
+  async function load() {
+    setLoadError('');
+    try {
+      adopt(await api<PublicSettings>('/api/ai/settings'));
+    } catch (e) {
+      setLoadError(errText(e));
+    }
+  }
+
+  useEffect(() => { void load(); }, []);
+
+  async function run<T>(kind: Busy, fn: () => Promise<T>): Promise<T | undefined> {
+    if (busyRef.current) return undefined;
+    busyRef.current = kind;
+    setBusy(kind);
+    try {
+      return await fn();
+    } finally {
+      busyRef.current = null;
+      setBusy(null);
+    }
+  }
+
+  if (!data) {
+    return (
+      <div className="ais">
+        <style>{CSS}</style>
+        {loadError ? (
+          <div className="flash error" role="alert">
+            Couldn’t load AI settings: {loadError}{' '}
+            <button type="button" className="btn sm" onClick={() => void load()}>Retry</button>
+          </div>
+        ) : (
+          <p className="hint" role="status">Loading AI settings…</p>
+        )}
+      </div>
+    );
+  }
+
+  const effectiveUrl = provider === 'openai' ? OPENAI_URL : baseUrl.trim();
+  const savedUrl = data.ai.provider === 'openai' ? OPENAI_URL : data.ai.baseUrl;
+  const destinationChanged = provider !== data.ai.provider || !sameUrl(effectiveUrl, savedUrl);
+  const keyWillDrop = data.ai.hasApiKey && destinationChanged && !apiKey.trim() && !clearApiKey;
+  const formDirty =
+    enabled !== data.ai.enabled || destinationChanged || model.trim() !== data.ai.model || !!apiKey || clearApiKey;
+  const agentDirty = agentEnabled !== data.agent.enabled || allowPublish !== data.agent.allowPublish;
+  const isCustom = provider !== 'openai';
+
+  async function save() {
+    setSaveMsg({ ok: '', err: '' });
+    if (isCustom && !effectiveUrl) return setSaveMsg({ ok: '', err: 'Enter the API base URL first.' });
+    if (isCustom && !/^https?:\/\//i.test(effectiveUrl)) {
+      return setSaveMsg({ ok: '', err: 'The API URL must start with http:// or https://' });
+    }
+    if (enabled && !model.trim()) return setSaveMsg({ ok: '', err: 'Choose a model before turning AI on.' });
+    await run('save', async () => {
+      try {
+        const next = await api<PublicSettings>('/api/ai/settings', {
+          action: 'save',
+          enabled,
+          provider,
+          baseUrl: effectiveUrl,
+          model: model.trim(),
+          apiKey: clearApiKey ? '' : apiKey.trim(),
+          clearApiKey,
+        });
+        adopt(next, 'ai');
+        setSaveMsg({
+          ok: next.ai.hasApiKey ? 'AI settings saved.' : 'AI settings saved — no API key is stored for this destination.',
+          err: '',
+        });
+      } catch (e) {
+        setSaveMsg({ ok: '', err: errText(e) });
+      }
+    });
+  }
+
+  async function test() {
+    setTestMsg({ ok: '', err: '' });
+    await run('test', async () => {
+      try {
+        const r = await api<{ models: string[]; baseUrl: string }>('/api/ai/test', null);
+        const list = Array.isArray(r.models) ? r.models.filter((m) => typeof m === 'string') : [];
+        setModels(list);
+        setTestMsg({
+          ok: list.length
+            ? `Reached ${r.baseUrl} — ${list.length} model${list.length === 1 ? '' : 's'} available. Pick one from the Model field.`
+            : `Reached ${r.baseUrl}, but it listed no models. You can still type a model ID.`,
+          err: '',
+        });
+      } catch (e) {
+        setModels([]);
+        setTestMsg({ ok: '', err: errText(e) });
+      }
+    });
+  }
+
+  async function generateKey() {
+    if (data!.agent.hasKey && !confirm('Generate a new agent key? The current key stops working immediately.')) return;
+    setAgentMsg({ ok: '', err: '' });
+    setCopied('');
+    await run('generate', async () => {
+      try {
+        const r = await api<PublicSettings & { token: string }>('/api/ai/settings', { action: 'generateAgentKey' });
+        const { token: t, ...rest } = r;
+        adopt(rest, 'agent');
+        setToken(t);
+        setAgentMsg({ ok: 'New agent key created. Copy it now — it won’t be shown again.', err: '' });
+        requestAnimationFrame(() => tokenRef.current?.select());
+      } catch (e) {
+        setAgentMsg({ ok: '', err: errText(e) });
+      }
+    });
+  }
+
+  async function revokeKey() {
+    if (!confirm('Revoke the agent key? Anything using it gets 401 errors straight away.')) return;
+    setAgentMsg({ ok: '', err: '' });
+    await run('revoke', async () => {
+      try {
+        adopt(await api<PublicSettings>('/api/ai/settings', { action: 'revokeAgentKey' }), 'agent');
+        setToken('');
+        setAgentMsg({ ok: 'Agent key revoked. Agent access is off.', err: '' });
+      } catch (e) {
+        setAgentMsg({ ok: '', err: errText(e) });
+      }
+    });
+  }
+
+  async function saveAgent() {
+    setAgentMsg({ ok: '', err: '' });
+    await run('saveAgent', async () => {
+      try {
+        adopt(await api<PublicSettings>('/api/ai/settings', { action: 'saveAgent', enabled: agentEnabled, allowPublish }), 'agent');
+        setAgentMsg({ ok: 'Agent access saved.', err: '' });
+      } catch (e) {
+        setAgentMsg({ ok: '', err: errText(e) });
+      }
+    });
+  }
+
+  async function copy(text: string, what: string) {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(`${what} copied.`);
+    } catch {
+      setCopied('Copy failed. Select the text and copy it by hand.');
+    }
+    setTimeout(() => setCopied(''), 2500);
+  }
+
+  const agentUrl = data.agentUrl;
+  const docsHref = safeHref(data.docsUrl);
+  const curlDiscover = `curl "${agentUrl}" \\\n  -H "Authorization: Bearer $AGENT_KEY"`;
+  const curlCall =
+    `curl -X POST "${agentUrl}" \\\n  -H "Authorization: Bearer $AGENT_KEY" \\\n  -H "Content-Type: application/json" \\\n` +
+    `  -d '{"tool":"list_content","arguments":{"kind":"posts"}}'`;
+  const id = (s: string) => `${uid}-${s}`;
+
+  return (
+    <div className="ais">
+      <style>{CSS}</style>
+
+      {/* ---- provider ---- */}
+      <section className="ais-card" aria-labelledby={id('ai-h')}>
+        <header className="ais-head">
+          <div className="ais-grow">
+            <h2 id={id('ai-h')}>Document cleanup</h2>
+            <p>Clean uploaded documents into posts or pages. Preserve the original language unless translation is explicitly requested. Review before creating a draft.</p>
+          </div>
+          <span className={`pill ${data.ai.enabled ? 'published' : 'archived'}`}>{data.ai.enabled ? 'On' : 'Off'}</span>
+        </header>
+
+        <label className="check-row">
+          <input type="checkbox" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
+          <span>Turn on the document cleaner</span>
+        </label>
+
+        <fieldset className="ais-providers">
+          <legend>Provider</legend>
+          {PROVIDERS.map((p) => (
+            <label key={p.id} className={`ais-provider ${provider === p.id ? 'on' : ''}`}>
+              <input
+                type="radio"
+                name={id('provider')}
+                value={p.id}
+                checked={provider === p.id}
+                onChange={() => {
+                  setProvider(p.id);
+                  setApiKey('');
+                  setClearApiKey(false);
+                  setModel(p.id === data.ai.provider ? data.ai.model : '');
+                  setBaseUrl(p.id === 'openai' ? OPENAI_URL : p.id === data.ai.provider ? data.ai.baseUrl : '');
+                  setModels([]);
+                  setTestMsg({ ok: '', err: '' });
+                }}
+              />
+              <span>
+                <b>{p.name}</b>
+              </span>
+            </label>
+          ))}
+        </fieldset>
+
+        <div className="field-row">
+          <label className="field">
+            <span>API base URL</span>
+            <input
+              type="url"
+              className="mono"
+              inputMode="url"
+              value={effectiveUrl === OPENAI_URL && !isCustom ? OPENAI_URL : baseUrl}
+              readOnly={!isCustom}
+              aria-readonly={!isCustom}
+              placeholder={URL_PLACEHOLDER[provider]}
+              onChange={(e) => setBaseUrl(e.target.value)}
+              aria-describedby={id('url-hint')}
+            />
+            <small className="hint" id={id('url-hint')}>
+              {isCustom ? <>Use your provider’s OpenAI-compatible base URL. Include <code>/v1</code> if your provider requires it.</> : 'Fixed for OpenAI.'}
+            </small>
+          </label>
+          <label className="field">
+            <span>Model</span>
+            <input
+              type="text"
+              className="mono"
+              list={id('models')}
+              value={model}
+              placeholder="Select a discovered model or enter its ID"
+              autoComplete="off"
+              spellCheck={false}
+              onChange={(e) => setModel(e.target.value)}
+              aria-describedby={id('model-hint')}
+            />
+            <datalist id={id('models')}>
+              {models.map((m) => <option key={m} value={m} />)}
+            </datalist>
+            <small className="hint" id={id('model-hint')}>
+              {models.length ? `${models.length} suggestions from the last test. Use a model your provider supports.` : 'Type any model ID, or test the connection to get suggestions.'}
+            </small>
+          </label>
+        </div>
+
+        <label className="field">
+          <span>{isCustom ? 'API key' : 'OpenAI API key'}</span>
+          <input
+            type="password"
+            className="mono"
+            value={apiKey}
+            disabled={clearApiKey}
+            autoComplete="off"
+            spellCheck={false}
+            data-1p-ignore
+            data-lpignore="true"
+            placeholder={data.ai.hasApiKey && !destinationChanged ? 'Saved key kept — type to replace' : isCustom ? 'API key from your provider' : 'sk-…'}
+            onChange={(e) => setApiKey(e.target.value)}
+            aria-describedby={id('key-hint')}
+          />
+          <small className="hint" id={id('key-hint')}>
+            {isCustom ? (
+              <>Use your provider’s API key. Leave empty if your endpoint does not require one. </>
+            ) : (
+              <>Create one at platform.openai.com. </>
+            )}
+            The key is stored on the server and never shown again. Leave blank to keep the saved key.
+          </small>
+        </label>
+
+        {keyWillDrop && (
+          <div className="notice warn ais-notice" role="note">
+            You changed the provider or URL. The saved key is only kept for the address it was entered for — type the key again, or save without one.
+          </div>
+        )}
+
+        {data.ai.hasApiKey && (
+          <label className="check-row">
+            <input
+              type="checkbox"
+              checked={clearApiKey}
+              onChange={(e) => { setClearApiKey(e.target.checked); if (e.target.checked) setApiKey(''); }}
+            />
+            <span>Remove the saved API key</span>
+          </label>
+        )}
+
+        <div className="ais-actions">
+          <button type="button" className="btn primary" onClick={() => void save()} disabled={busy !== null || !formDirty}>
+            {busy === 'save' ? 'Saving…' : 'Save'}
+          </button>
+          <button type="button" className="btn" onClick={() => void test()} disabled={busy !== null} aria-describedby={id('test-hint')}>
+            {busy === 'test' ? 'Testing…' : 'Test saved connection'}
+          </button>
+          <span className="hint" id={id('test-hint')}>
+            {formDirty ? 'Test uses the saved settings. Save first to test your changes.' : 'Works even while AI is off.'}
+          </span>
+        </div>
+        <div className="ais-status" aria-live="polite">
+          {saveMsg.ok && <p className="flash">{saveMsg.ok}</p>}
+          {testMsg.ok && <p className="flash">{testMsg.ok}</p>}
+        </div>
+        <div className="ais-status" role="alert">
+          {saveMsg.err && <p className="flash error">Save failed: {saveMsg.err}</p>}
+          {testMsg.err && <p className="flash error">Connection test failed: {testMsg.err}</p>}
+        </div>
+      </section>
+
+      {/* ---- agent ---- */}
+      <section className="ais-card" aria-labelledby={id('ag-h')}>
+        <header className="ais-head">
+          <div className="ais-grow">
+            <h2 id={id('ag-h')}>Agent access</h2>
+            <p>Let an AI agent (Claude, Codex, a script) work with your content through <code>/api/agent</code>, using its own key.</p>
+          </div>
+          <span className={`pill ${data.agent.enabled && data.agent.hasKey ? 'published' : 'archived'}`}>
+            {data.agent.enabled && data.agent.hasKey ? 'On' : 'Off'}
+          </span>
+        </header>
+
+        <ul className="ais-perms" aria-label="What the agent key can do">
+          <li className="yes">Read all posts and pages, including unpublished drafts</li>
+          <li className="yes">Create drafts and edit drafts of posts and pages</li>
+          <li className={allowPublish ? 'yes' : 'no'}>Publish — {allowPublish ? 'allowed' : 'off unless you turn it on below'}</li>
+          <li className="no">Never delete anything or change settings</li>
+        </ul>
+
+        {token && (
+          <div className="ais-token" role="group" aria-labelledby={id('tok-l')}>
+            <label className="field" htmlFor={id('tok')}>
+              <span id={id('tok-l')}>Your new agent key. It’s shown only once.</span>
+            </label>
+            <div className="ais-row">
+              <input
+                ref={tokenRef}
+                id={id('tok')}
+                type="text"
+                className="mono"
+                readOnly
+                value={token}
+                autoComplete="off"
+                spellCheck={false}
+                onFocus={(e) => e.target.select()}
+              />
+              <button type="button" className="btn primary" onClick={() => void copy(token, 'Key')}>Copy</button>
+              <button type="button" className="btn ghost" onClick={() => { setToken(''); setCopied(''); }}>I’ve saved it</button>
+            </div>
+            <p className="hint">Only a hash is stored. If you lose this key, generate a new one.</p>
+          </div>
+        )}
+
+        <div className="ais-keyrow">
+          {data.agent.hasKey ? (
+            <code className="ais-key" aria-label="Current agent key (masked)">{data.agent.keyPrefix}{'•'.repeat(12)}</code>
+          ) : (
+            <span className="hint">No agent key yet, so agents can’t connect.</span>
+          )}
+          <button type="button" className={`btn ${data.agent.hasKey ? '' : 'primary'}`} onClick={() => void generateKey()} disabled={busy !== null}>
+            {busy === 'generate' ? 'Generating…' : data.agent.hasKey ? 'Rotate key' : 'Generate key'}
+          </button>
+          {data.agent.hasKey && (
+            <button type="button" className="btn danger" onClick={() => void revokeKey()} disabled={busy !== null}>
+              {busy === 'revoke' ? 'Revoking…' : 'Revoke'}
+            </button>
+          )}
+        </div>
+        <p className="hint">Generating a key turns agent access on. Rotating revokes the old key immediately.</p>
+
+        <div className="ais-sub">
+          <label className="check-row">
+            <input
+              type="checkbox"
+              checked={agentEnabled}
+              disabled={!data.agent.hasKey}
+              onChange={(e) => setAgentEnabled(e.target.checked)}
+            />
+            <span>Agent access on{!data.agent.hasKey && <span className="hint"> (generate a key first)</span>}</span>
+          </label>
+          <label className="check-row">
+            <input type="checkbox" checked={allowPublish} onChange={(e) => setAllowPublish(e.target.checked)} />
+            <span>Let the agent publish <span className="hint">(off by default, so drafts wait for you to review)</span></span>
+          </label>
+          <div className="ais-actions">
+            <button type="button" className="btn primary" onClick={() => void saveAgent()} disabled={busy !== null || !agentDirty}>
+              {busy === 'saveAgent' ? 'Saving…' : 'Save agent access'}
+            </button>
+          </div>
+        </div>
+        <div className="ais-status" aria-live="polite">
+          {agentMsg.ok && <p className="flash">{agentMsg.ok}</p>}
+          {copied && <p className="hint">{copied}</p>}
+        </div>
+        <div className="ais-status" role="alert">
+          {agentMsg.err && <p className="flash error">{agentMsg.err}</p>}
+        </div>
+
+        <div className="ais-sub">
+          <h3>Connect an agent</h3>
+          <p className="hint">For MCP clients, use <code>{new URL('/api/mcp', agentUrl).href}</code> with Streamable HTTP transport and the same bearer key. <button type="button" className="btn sm" onClick={() => void copy(new URL('/api/mcp', agentUrl).href, 'MCP URL')}>Copy MCP URL</button></p>
+          <div className="ais-row">
+            <code className="ais-key" aria-label="Agent API URL">{agentUrl}</code>
+            <button type="button" className="btn" onClick={() => void copy(agentUrl, 'URL')}>Copy URL</button>
+            {docsHref && <a className="btn ghost" href={docsHref} target="_blank" rel="noopener">API docs ↗</a>}
+          </div>
+          <p className="hint">
+            Send the key as <code>Authorization: Bearer …</code>. <code>GET</code> lists the tools and their schemas; <code>POST</code> calls one.
+            The examples read the key from an <code>AGENT_KEY</code> environment variable. Paste your key there, never into shared scripts.
+          </p>
+          <pre className="ais-code" aria-label="Discover tools with curl"><code>{curlDiscover}</code></pre>
+          <pre className="ais-code" aria-label="Call a tool with curl"><code>{curlCall}</code></pre>
+          <button type="button" className="btn sm" onClick={() => void copy(curlCall, 'Example')}>Copy example</button>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+const CSS = `
+.ais { display: flex; flex-direction: column; gap: 12px; }
+.ais code { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; }
+.ais-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
+.ais-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
+.ais-grow { flex: 1; min-width: 0; }
+.ais-head h2 { font-size: 14.5px; margin: 0; letter-spacing: -0.01em; }
+.ais-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
+.ais .hint { margin: 0; }
+.ais .flash { margin: 10px 0 0; }
+.ais-providers { border: 0; padding: 0; margin: 4px 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.ais-providers legend { font-size: 12px; color: var(--muted); font-weight: 500; padding: 0; margin-bottom: 5px; }
+.ais-provider { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; background: var(--panel); }
+.ais-provider:hover { background: var(--hover); }
+.ais-provider.on { background: var(--sel); border-color: var(--line-strong); }
+.ais-provider:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
+.ais-provider input { accent-color: var(--accent); margin: 3px 0 0; flex: 0 0 auto; }
+.ais-provider b { display: block; font-size: 13px; }
+.ais input[readonly] { background: var(--panel-2); color: var(--muted); }
+.ais input:disabled { opacity: 0.55; }
+.ais-notice { margin: 0 0 12px; font-size: 13px; }
+.ais-note { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 13px; margin: 0 0 12px; font-size: 13px; }
+.ais-note p { margin: 3px 0 0; color: var(--text-2); }
+.ais-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
+.ais-status:empty { display: none; }
+.ais-perms { list-style: none; margin: 0 0 14px; padding: 10px 13px; background: var(--panel-2); border-radius: var(--r-md); display: grid; gap: 4px; }
+.ais-perms li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--text-2); }
+.ais-perms li::before { flex: 0 0 auto; font-weight: 700; width: 12px; }
+.ais-perms li.yes::before { content: '✓'; color: var(--green); }
+.ais-perms li.no::before { content: '✕'; color: var(--muted); }
+.ais-token { background: var(--accent-soft); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px; }
+.ais-token .field { margin-bottom: 6px; }
+.ais-token .field > span { color: var(--accent-deep); font-weight: 600; }
+.ais-token .hint { margin-top: 6px; }
+.ais-row, .ais-keyrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.ais-row input { flex: 1; min-width: 200px; }
+.ais-keyrow { margin-bottom: 6px; }
+.ais-keyrow .hint { flex: 1; }
+.ais-key { flex: 1; min-width: 200px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; color: var(--muted); overflow-wrap: anywhere; }
+.ais-sub { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
+.ais-sub h3 { font-size: 13px; margin: 0 0 8px; }
+.ais-sub > .hint { margin: 8px 0; }
+.ais-code { background: var(--code-bg); color: var(--code-text); border-radius: var(--r-md); padding: 10px 12px; margin: 0 0 8px; overflow-x: auto; font-size: 12px; line-height: 1.55; }
+.ais-code code { background: none; color: inherit; }
+@media (max-width: 900px) {
+  .ais-providers { grid-template-columns: 1fr; }
+}
+@media (max-width: 767px) {
+  .ais-card { padding: 14px; }
+  .ais-actions .btn { flex: 1; justify-content: center; }
+}
+`;