@bhooai/nexus-cli 2.0.6 → 2.0.7

package/templates/base/apps/admin/src/pages/Users.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { getUsers, getRoles, putUserRoles, type UserRecord, type RoleDefinition } from '../api.js';
+import { useAdminAlert } from '../alertCenter.js';
+import { PageHead } from '../components/ui/PageHead.js';
+import { PageHero } from '../components/ui/PageHero.js';
+
+export function Users({ currentUserEmail }: { currentUserEmail?: string }) {
+  const [data, setData] = useState<{ users: UserRecord[] } | null>(null);
+  const [roles, setRoles] = useState<RoleDefinition[]>([]);
+  const [msg, setMsg] = useAdminAlert('users');
+  const [editing, setEditing] = useState<UserRecord | null>(null);
+  const [draft, setDraft] = useState<string[]>([]);
+  const [busy, setBusy] = useState(false);
+
+  const reload = useCallback(async () => {
+    try {
+      const [u, r] = await Promise.all([getUsers(), getRoles()]);
+      setData(u);
+      setRoles(r?.roles ?? []);
+    } catch (e: any) {
+      setMsg({ kind: 'err', text: `Could not load users or roles: ${e?.message ?? 'unknown error'}` });
+    }
+  }, []);
+
+  useEffect(() => { void reload(); }, [reload]);
+
+  const openEditor = (u: UserRecord) => { setEditing(u); setDraft([...(u.roles ?? [])]); setMsg(null); };
+  const toggleRole = (id: string) => setDraft((d) => (d.includes(id) ? d.filter((r) => r !== id) : [...d, id]));
+
+  const saveRoles = async () => {
+    if (!editing) return;
+    if (!draft.length) { setMsg({ kind: 'err', text: 'A user must keep at least one role.' }); return; }
+    setBusy(true);
+    try {
+      await putUserRoles(editing._id, draft);
+      setMsg({ kind: 'ok', text: `Saved roles for ${editing.email}.` });
+      setEditing(null);
+      await reload();
+    } catch (e: any) {
+      const raw = String(e?.message ?? 'Update failed');
+      const clean = raw.replace(/^.*\/admin\/users[^\s]*\s*\d+\s*/i, '').trim();
+      setMsg({ kind: 'err', text: clean || 'Update failed.' });
+    } finally { setBusy(false); }
+  };
+
+  const roleDef = (id: string) => roles.find((r) => r.id === id);
+  const roleChip = (id: string) => {
+    const def = roleDef(id);
+    const accent = def?.accent ?? '#8ba0bd';
+    return <span key={id} className="role-chip" style={{ color: accent, borderColor: `${accent}66`, background: `${accent}1a` }}>{def?.icon ?? '◌'} {def?.label ?? id}</span>;
+  };
+
+  if (!data) return <p className="text-slate-400">Loading…</p>;
+
+  return (
+    <div className="space-y-6">
+      <PageHead title="Users & Roles" />
+      <PageHero kicker="ACCESS & PERMISSIONS" title={<>Your team, <em>in control.</em></>} desc="Every account that can reach this Nexus surface — with role grants and restrictions applied in one built-in permission catalog." glyph="users" art="people" />
+
+      <div className="glass-panel overflow-hidden p-2">
+        <table className="glass-table">
+          <thead><tr><th>Email</th><th className="text-center">Name</th><th>Roles</th><th className="text-center">Verified</th><th className="text-right">Actions</th></tr></thead>
+          <tbody>
+            {data.users.map((u) => (
+              <tr key={String(u._id)}>
+                <td className="text-slate-200">{u.email}{u.email === currentUserEmail && <span className="you-tag">you</span>}</td>
+                <td className="text-slate-300">{u.name ?? '—'}</td>
+                <td>
+                  {(u.roles ?? []).map(roleChip)}
+                  {!(u.roles ?? []).length && '—'}
+                </td>
+                <td className="text-center text-emerald-400">{u.emailVerified ? '✓' : <span className="text-slate-500">—</span>}</td>
+                <td className="text-right"><button className="glass-chip-btn" onClick={() => openEditor(u)}>â—ˆ Edit roles</button></td>
+              </tr>
+            ))}
+            {!data.users.length && <tr><td colSpan={5} className="py-8 text-center text-slate-500">No users registered.</td></tr>}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="role-catalog">
+        {roles.map((r) => (
+          <div className="role-box" key={r.id} style={{ ['--role-accent' as string]: r.accent }}>
+            <div className="role-box-head">
+              <span className="role-box-icon" style={{ color: r.accent }}>{r.icon}</span>
+              <div>
+                <strong style={{ color: r.accent }}>{r.label}</strong>
+                <code className="role-box-id">{r.id}</code>
+              </div>
+            </div>
+            <p className="role-box-desc">{r.description}</p>
+            <div className="role-section">
+              <span className="role-section-title is-can">✓ Can do</span>
+              <ul className="role-list">
+                {r.grants.map((g) => <li key={g.label}><b>{g.label}</b><span>{g.detail}</span></li>)}
+              </ul>
+            </div>
+            <div className="role-section">
+              <span className="role-section-title is-no">✕ Restricted from</span>
+              <ul className="role-list">
+                {r.restricts.map((g) => <li key={g.label}><b>{g.label}</b><span>{g.detail}</span></li>)}
+              </ul>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {editing && (
+        <div className="confirm-overlay" onClick={() => !busy && setEditing(null)}>
+          <div className="confirm-dialog role-dialog" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
+            <div className="confirm-dialog-head">
+              <span className="confirm-dialog-mark">â—Ž</span>
+              <strong>Edit roles · {editing.email}</strong>
+              <button className="confirm-dialog-close" onClick={() => !busy && setEditing(null)} aria-label="Close">×</button>
+            </div>
+            <p className="confirm-dialog-message">Choose which roles this account holds — every selected role applies.</p>
+            <div className="role-options">
+              {roles.map((r) => {
+                const on = draft.includes(r.id);
+                return (
+                  <button key={r.id} type="button" className={`role-option${on ? ' is-on' : ''}`} style={{ ['--role-accent' as string]: r.accent }} onClick={() => toggleRole(r.id)}>
+                    <span className="role-option-icon" style={{ color: r.accent }}>{on ? '✓' : r.icon}</span>
+                    <span className="role-option-text">
+                      <b>{r.label}</b>
+                      <small>{r.description}</small>
+                    </span>
+                    <span className="role-option-check">{on ? '✓' : ''}</span>
+                  </button>
+                );
+              })}
+            </div>
+            {editing.email === currentUserEmail && (
+              <p className="role-hint">Editing your own account — removing <b>Administrator</b> from yourself is blocked server-side.</p>
+            )}
+            <div className="confirm-dialog-actions">
+              <button className="glass-chip-btn" onClick={() => setEditing(null)} disabled={busy}>Cancel</button>
+              <button className="glass-chip-btn-danger confirm-dialog-primary" onClick={saveRoles} disabled={busy}>{busy ? 'Saving…' : 'Save roles'}</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/base/apps/admin/src/pages/ai/AddProviderDialog.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { POPULAR_PROVIDERS, PRESET_BY_ID } from '../../lib/constants.js';
+import type { ProviderPreset } from '../../lib/types.js';
+
+export function AddProviderDialog({ value, onChange, onSubmit, onCancel, busy }: {
+  value: { id: string; label: string; baseUrl: string; apiKey: string; defaultModel: string };
+  onChange: (v: { id: string; label: string; baseUrl: string; apiKey: string; defaultModel: string }) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  busy: boolean;
+}) {
+  const [presetId, setPresetId] = useState('');
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onCancel(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onCancel]);
+
+  // Track which field the user is actively editing so we don't clobber their
+  // manual input when the preset changes the model list.
+  const preset = presetId ? PRESET_BY_ID[presetId] : undefined;
+
+  const applyPreset = (id: string) => {
+    setPresetId(id);
+    if (!id) return; // "— select —"
+    if (id === 'other') {
+      // Clear fields for a fully custom provider; user fills everything.
+      onChange({ id: '', label: '', baseUrl: '', apiKey: value.apiKey, defaultModel: '' });
+      return;
+    }
+    const p = PRESET_BY_ID[id];
+    if (p) {
+      onChange({ ...value, id: p.id, label: p.label, baseUrl: p.baseUrl, defaultModel: p.defaultModel });
+    }
+  };
+
+  const missing = {
+    id: !value.id.trim(),
+    label: !value.label.trim(),
+    baseUrl: !value.baseUrl.trim(),
+  };
+
+  return (
+    <div className="provider-modal-backdrop" onClick={onCancel}>
+      <div className="provider-modal space-y-4" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between">
+          <h3 className="glass-h3">Add custom provider</h3>
+          <button onClick={onCancel} className="glass-chip-btn text-xs">✕</button>
+        </div>
+
+        <div className="space-y-3">
+          {/* Preset selector — pick a popular provider or "Other" */}
+          <label className="block">
+            <span className="admin-overline">Choose a provider</span>
+            <select
+              className="glass-input mt-1 text-sm"
+              value={presetId}
+              onChange={(e) => applyPreset(e.target.value)}
+            >
+              <option value="" className="bg-slate-900">— select —</option>
+              {POPULAR_PROVIDERS.map((p) => (
+                <option key={p.id} value={p.id} className="bg-slate-900">{p.label}</option>
+              ))}
+              <option value="other" className="bg-slate-900">Other (custom)</option>
+            </select>
+            <span className="text-[10px] text-slate-500">Selecting a provider autofills the fields below — all editable.</span>
+          </label>
+
+          <label className="block">
+            <span className="admin-overline">Provider ID <span className="text-rose-400">*</span></span>
+            <input
+              className={`glass-input mt-1 text-sm font-mono ${missing.id ? '!border-amber-500/50' : ''}`}
+              placeholder="e.g. myai"
+              value={value.id}
+              onChange={(e) => onChange({ ...value, id: e.target.value })}
+            />
+            {missing.id && <span className="text-[10px] text-amber-400">required — lowercase, no spaces</span>}
+          </label>
+
+          <label className="block">
+            <span className="admin-overline">Label <span className="text-rose-400">*</span></span>
+            <input
+              className={`glass-input mt-1 text-sm ${missing.label ? '!border-amber-500/50' : ''}`}
+              placeholder="e.g. My AI Service"
+              value={value.label}
+              onChange={(e) => onChange({ ...value, label: e.target.value })}
+            />
+            {missing.label && <span className="text-[10px] text-amber-400">required</span>}
+          </label>
+
+          <label className="block">
+            <span className="admin-overline">Base URL <span className="text-rose-400">*</span></span>
+            <input
+              className={`glass-input mt-1 text-sm font-mono ${missing.baseUrl ? '!border-amber-500/50' : ''}`}
+              placeholder="https://api.example.com/v1"
+              value={value.baseUrl}
+              onChange={(e) => onChange({ ...value, baseUrl: e.target.value })}
+            />
+            {missing.baseUrl && <span className="text-[10px] text-amber-400">required</span>}
+          </label>
+
+          <label className="block">
+            <span className="admin-overline">API key <span className="text-slate-500">(optional)</span></span>
+            <input
+              className="glass-input mt-1 text-sm"
+              type="password"
+              placeholder="paste API key"
+              value={value.apiKey}
+              onChange={(e) => onChange({ ...value, apiKey: e.target.value })}
+            />
+          </label>
+
+          {/* Default model — text input + a "pick from popular" select */}
+          <label className="block">
+            <span className="admin-overline">Default model <span className="text-slate-500">(optional)</span></span>
+            <input
+              className="glass-input mt-1 text-sm font-mono"
+              placeholder="e.g. gpt-4o-mini"
+              value={value.defaultModel}
+              onChange={(e) => onChange({ ...value, defaultModel: e.target.value })}
+            />
+          </label>
+          {preset && preset.models.length > 0 && (
+            <label className="block">
+              <span className="admin-overline">…or pick a model</span>
+              <select
+                className="glass-input mt-1 text-sm font-mono"
+                value=""
+                onChange={(e) => { if (e.target.value) onChange({ ...value, defaultModel: e.target.value }); }}
+              >
+                <option value="" className="bg-slate-900">{preset.models.length} popular model{preset.models.length === 1 ? '' : 's'} — click to use</option>
+                {preset.models.map((m) => (
+                  <option key={m} value={m} className="bg-slate-900">{m}</option>
+                ))}
+              </select>
+            </label>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-2 pt-2 border-t border-sky-400/20">
+          <button onClick={onCancel} disabled={busy} className="glass-chip-btn">Cancel</button>
+          <button onClick={onSubmit} disabled={busy || missing.id || missing.label || missing.baseUrl} className="glass-btn-primary !py-1.5 text-sm">
+            {busy ? 'Adding…' : '+ Add provider'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/base/apps/admin/src/pages/ai/AiAgents.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Icon } from '../../icons.js';
+import type { ToggleStyle } from '../../lib/types.js';
+import { PageHead } from '../../components/ui/PageHead.js';
+import { PageHero } from '../../components/ui/PageHero.js';
+import { AiSettings } from './AiSettings.js';
+import { AiProviders } from './AiProviders.js';
+import { AiChatPlayground } from './AiChatPlayground.js';
+
+export function AiAgents({ toggle }: { toggle: ToggleStyle }) {
+  const [aiTab, setAiTab] = useState<'settings' | 'providers' | 'chat'>('settings');
+  return (
+    <div className="space-y-6">
+      <PageHead title="AI Agents" />
+      <PageHero kicker="AI WORKSPACE" title={<>Agents, <em>at your command.</em></>} desc="Manage AI settings, configure providers with API keys, and test agents with a live chat playground." glyph="sparkles" art="spark" />
+
+      {/* Sub-tab nav */}
+      <div className="workspace-tabs">
+        {([['settings', 'AI Settings', 'settings'], ['providers', 'AI Providers', 'grid'], ['chat', 'Chat Playground', 'message']] as const).map(([id, label, icon]) => (
+          <button key={id} onClick={() => setAiTab(id)} className={aiTab === id ? 'is-active' : ''}>
+            <span className="mr-1.5"><Icon name={icon} size={13} /></span>{label}
+          </button>
+        ))}
+      </div>
+
+      {aiTab === 'settings' && <AiSettings />}
+      {aiTab === 'providers' && <AiProviders toggle={toggle} />}
+      {aiTab === 'chat' && <AiChatPlayground />}
+    </div>
+  );
+}

package/templates/base/apps/admin/src/pages/ai/AiChatPlayground.tsx

@@ -0,0 +1,208 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Icon } from '../../icons.js';
+import {
+  getAdminConfig, getAiStatus, getAiModels, aiChatStream, getAiProviders,
+  type AdminConfig, type AiStatus, type AiModelInfo, type AiChatMessage, type AiProviderView,
+} from '../../api.js';
+import { useAdminAlert } from '../../alertCenter.js';
+
+export function AiChatPlayground() {
+  const [config, setConfig] = useState<AdminConfig | null>(null);
+  const [providers, setProviders] = useState<AiProviderView[]>([]);
+  const [aiStatus, setAiStatus] = useState<AiStatus | null>(null);
+  const [models, setModels] = useState<AiModelInfo[]>([]);
+  const [model, setModel] = useState('');
+  const [provider, setProvider] = useState('');
+  const [systemPrompt, setSystemPrompt] = useState('You are a helpful assistant.');
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<AiChatMessage[]>([]);
+  const [streaming, setStreaming] = useState(false);
+  const [streamText, setStreamText] = useState('');
+  const [msg, setMsg] = useAdminAlert('ai-playground');
+  const [modelsLoaded, setModelsLoaded] = useState(false);
+  const [loadedFor, setLoadedFor] = useState('');
+  const loadModelsRef = useRef<(p: string) => Promise<void>>(async () => {});
+  const checkAiRef = useRef<() => Promise<void>>(async () => {});
+
+  useEffect(() => {
+    getAdminConfig().then((c) => { setConfig(c); const a = c?.config?.ai as { schemaModel?: string; defaultProvider?: string } | undefined; setModel((x) => x || (a?.schemaModel ?? 'llama3:latest')); }).catch(() => {});
+    getAiProviders().then((r) => {
+      setProviders(r.providers ?? []);
+      // Auto-select the first enabled provider, then load its models.
+      const firstEnabled = (r.providers ?? []).find((p) => p.enabled);
+      if (firstEnabled) {
+        setProvider(firstEnabled.id);
+        setModel(firstEnabled.defaultModel ?? 'llama3:latest');
+        // Load its models once the provider state lands.
+        setTimeout(() => { void loadModelsRef.current(firstEnabled.id); }, 0);
+      } else {
+        // No enabled provider — fall back to the AI server's own detection.
+        void checkAiRef.current();
+      }
+    }).catch(() => { void checkAiRef.current(); });
+  }, []);
+
+  const checkAi = async () => {
+    try {
+      const s = await getAiStatus();
+      setAiStatus(s);
+      // Auto-select ollama if it's the only provider available on the AI server
+      if (s.ollama?.ok && s.ollama.detail?.models?.length && !provider) {
+        setProvider('ollama');
+        setModel(s.ollama.detail.models[0] ?? 'llama3:latest');
+      }
+      // Load models for the current (or resolved) provider.
+      const prov = provider || (s.autoResolvesTo ?? 'ollama');
+      await loadModels(prov);
+    } catch { /* non-fatal */ }
+  };
+
+  const loadModels = async (p: string) => {
+    setProvider(p);
+    // Find the provider's default model
+    const pv = providers.find((x) => x.id === p);
+    if (pv?.defaultModel || modelsLoaded) setModel((cur) => pv?.defaultModel ?? cur);
+    try {
+      const m = await getAiModels(p);
+      setModels(m?.data ?? []);
+      setModelsLoaded(true);
+      setLoadedFor(p);
+      const err = m?.error;
+      if (err) setMsg(`Models unavailable for "${p}": ${err}`);
+      else setMsg('');
+    } catch (e: any) {
+      setModels([]);
+      setModelsLoaded(false);
+      setLoadedFor('');
+      setMsg(`Could not load models for "${p}": ${e?.message ?? e}`);
+    }
+  };
+  loadModelsRef.current = loadModels;
+  checkAiRef.current = () => checkAi();
+
+  const send = async () => {
+    if (!input.trim() || streaming) return;
+    // Resolve the actual provider to send to the AI server
+    const effectiveProvider = provider || aiStatus?.autoResolvesTo || 'ollama';
+    const effectiveModel = model || models[0]?.id || 'llama3:latest';
+
+    const userMsg: AiChatMessage = { role: 'user', content: input.trim() };
+    const chatMsgs: AiChatMessage[] = [];
+    if (systemPrompt.trim()) chatMsgs.push({ role: 'system', content: systemPrompt.trim() });
+    chatMsgs.push(...messages, userMsg);
+    setMessages((m) => [...m, userMsg]);
+    setInput('');
+    setStreaming(true);
+    setStreamText('');
+    setMsg('');
+    let acc = '';
+    try {
+      await aiChatStream(effectiveModel, chatMsgs, effectiveProvider, (chunk) => {
+        acc += chunk;
+        setStreamText(acc);
+      });
+      if (!acc) { setMsg('AI returned an empty response. Check that the model is available and the AI server is running.'); }
+      else { setMessages((m) => [...m, { role: 'assistant', content: acc }]); }
+      setStreamText('');
+    } catch (e: any) {
+      const errMsg = String(e?.message ?? e);
+      setMsg(`Chat failed: ${errMsg}`);
+      if (acc) setMessages((m) => [...m, { role: 'assistant', content: acc }]);
+      setStreamText('');
+    } finally {
+      setStreaming(false);
+    }
+  };
+
+  const clearChat = () => { setMessages([]); setStreamText(''); setMsg(''); };
+  const sendOnEnter = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } };
+
+  const modelOptions = models.map((m) => m.id);
+  const enabledProviders = providers.filter((p) => p.enabled);
+  const ai = config?.config?.ai as { serverUrl: string; timeoutMs: number; defaultProvider: string; schemaModel: string } | undefined;
+
+  // Build provider options: enabled config providers + any from AI server status
+  const providerOptions: { id: string; label: string }[] = [];
+  if (enabledProviders.length) {
+    enabledProviders.forEach((p) => providerOptions.push({ id: p.id, label: p.label }));
+  } else {
+    // Fall back to AI server's known providers
+    if (aiStatus?.aiServer?.ok) providerOptions.push({ id: 'ollama', label: 'Ollama' });
+    if (aiStatus?.openai?.ok) providerOptions.push({ id: 'openai', label: 'OpenAI' });
+  }
+
+  return (
+    <div className="space-y-4">
+
+      <section className="glass-card space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="glass-h3">Chat playground</h3>
+          <div className="flex gap-2">
+            <button onClick={checkAi} disabled={streaming} className="glass-chip-btn"><Icon name="refresh" size={12} /> refresh models</button>
+            <button onClick={clearChat} disabled={streaming} className="glass-chip-btn">clear</button>
+          </div>
+        </div>
+
+        {/* Controls */}
+        <div className="flex flex-wrap items-center gap-3">
+          <label className="text-xs text-slate-400">Provider
+            <select className="glass-input w-44 !py-1.5 text-sm" value={provider} onChange={(e) => loadModels(e.target.value)}>
+              {!provider && <option value="" className="bg-slate-900">— select —</option>}
+              {providerOptions.map((p) => <option key={p.id} value={p.id} className="bg-slate-900">{p.label}</option>)}
+            </select>
+          </label>
+          <label className="text-xs text-slate-400">Model
+            <input className="glass-input w-52 !py-1.5 font-mono text-sm" value={model} onChange={(e) => setModel(e.target.value)} placeholder="e.g. llama3:latest" />
+          </label>
+          <select
+            className="glass-input w-48 !py-1.5 text-sm"
+            value=""
+            onChange={(e) => { const v = e.target.value; if (v) setModel(v); }}
+            disabled={!modelOptions.length}
+            title={modelOptions.length ? `Available models for "${loadedFor || provider}"` : 'No models — click refresh models'}
+          >
+            <option value="" className="bg-slate-900">{modelOptions.length ? `${modelOptions.length} available for "${loadedFor || provider}"` : 'no models loaded'}</option>
+            {modelOptions.map((m) => <option key={m} value={m} className="bg-slate-900">{m}</option>)}
+          </select>
+        </div>
+
+        {!provider && (
+          <p className="text-xs text-amber-400"><Icon name="warning" size={12} className="mb-0.5 mr-1 inline" /> Select a provider above. If no providers are listed, go to the AI Providers tab and enable one, or click "refresh models" to detect the AI server's available providers.</p>
+        )}
+
+        {/* System prompt */}
+        <div>
+          <label className="text-xs text-slate-400">System prompt</label>
+          <textarea className="glass-code mt-1 h-16 w-full p-2 text-sm" value={systemPrompt} onChange={(e) => setSystemPrompt(e.target.value)} placeholder="Set the assistant's behaviour…" />
+        </div>
+
+        {/* Chat messages */}
+        <div className="glass-code max-h-96 min-h-[200px] space-y-3 overflow-y-auto p-3 text-sm">
+          {messages.length === 0 && !streamText && <p className="text-slate-500">Start a conversation by typing below.</p>}
+          {messages.map((m, i) => (
+            <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+              <div className={`max-w-[80%] rounded-xl px-3 py-2 ${m.role === 'user' ? 'bg-indigo-500/20 text-slate-100' : m.role === 'assistant' ? 'bg-emerald-500/15 text-slate-100' : 'bg-slate-700/30 text-slate-400'}`}>
+                <span className="mb-1 block text-[10px] uppercase tracking-wider opacity-60">{m.role}</span>
+                <span className="whitespace-pre-wrap">{m.content}</span>
+              </div>
+            </div>
+          ))}
+          {streaming && (
+            <div className="flex justify-start">
+              <div className="max-w-[80%] rounded-xl bg-emerald-500/15 px-3 py-2 text-slate-100">
+                <span className="mb-1 block text-[10px] uppercase tracking-wider opacity-60">assistant <span className="animate-pulse">…</span></span>
+                <span className="whitespace-pre-wrap">{streamText}<span className="animate-pulse">â–‹</span></span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Input */}
+        <div className="flex gap-2">
+          <textarea className="glass-code flex-1 h-12 p-2 text-sm" value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={sendOnEnter} placeholder="Type a message…  (Enter to send, Shift+Enter for newline)" disabled={streaming} />
+          <button onClick={send} disabled={streaming || !input.trim()} className="glass-btn-primary shrink-0">{streaming ? '…' : 'Send'}</button>
+        </div>
+      </section>
+    </div>
+  );
+}