anentrypoint-design 0.0.164 → 0.0.166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.164",
+  "version": "0.0.166",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/community-app.js

@@ -0,0 +1,233 @@
+// community-app — the full chat/community application GUI, owned by the design
+// system. A consumer (e.g. zellous over Nostr) supplies an `adapter` that maps
+// its own data + actions to the contract below; this module composes every
+// surface (rail, chat, members, voice, user panel, overlays) and wires it to
+// the adapter. The consumer never touches component internals — it only feeds
+// data and receives action callbacks.
+//
+// Adapter contract (all fields optional; the app degrades when one is absent):
+//   adapter.get() -> snapshot {
+//     channels, categories, servers, currentChannel, currentServerId, homeMode,
+//     messages, chatInputValue, currentUser, userId,
+//     isConnected, voiceConnected, voiceChannelName, voiceConnectionState,
+//     voiceParticipants, micMuted, voiceDeafened,
+//     audioQueueItems, audioQueueCurrentId, audioQueuePaused,
+//     showAuthModal, settingsOpen, voiceSettingsOpen, replyTarget
+//   }
+//   adapter.subscribe(cb) -> unsubscribe   // cb fires when any snapshot field changes
+//   adapter.actions = {
+//     switchChannel(ch), send(text, opts), toggleMic(), toggleDeafen(),
+//     leaveVoice(), toggleMembers(), openMobileMenu(), openSettings(),
+//     channelContext(id, x, y), serverContext(id, x, y), switchServer(id),
+//     goHome(), openServers(), memberMenu(id, name, x, y),
+//     replaySegment(id), skipSegment(), pauseQueue(), resumeQueue(),
+//     setInput(v), cancelReply()
+//   }
+//   adapter.helpers = { avatarColor(id), initial(name), formatTime(ts) }
+//
+// Returns { render, destroy }.
+
+import * as webjsx from '../vendor/webjsx/index.js';
+import { Icon } from './components/shell.js';
+import { Chat, ChatComposer } from './components/chat.js';
+import {
+    ServerRail, ChannelItem, MemberList, MobileHeader,
+    UserPanel, VoiceStrip, VoiceUser, ThreadPanel, ForumView, PageView, Banner,
+} from './components/community.js';
+import { VoiceControls, VoiceSettingsModal, AudioQueue, PttButton, VadMeter, WebcamPreview } from './components/voice.js';
+import { ContextMenu } from './components/editor-primitives.js';
+import { EmojiPicker, CommandPalette, AuthModal, BootOverlay, SettingsPopover, VideoLightbox } from './components/overlay-primitives.js';
+
+const h = webjsx.createElement;
+
+const CHANNEL_ICON = { voice: 'speaker', forum: 'forum', threaded: 'thread', announcement: 'megaphone', page: 'page', text: 'hash' };
+
+export function mountCommunityApp(root, adapter = {}) {
+    if (!root) throw new Error('mountCommunityApp: root required');
+    const get = typeof adapter.get === 'function' ? adapter.get : () => ({});
+    const A = adapter.actions || {};
+    const H = adapter.helpers || {};
+    const avatarColor = H.avatarColor || (() => 'var(--accent)');
+    const initial = H.initial || ((n) => String(n || '?').slice(0, 1).toUpperCase());
+    const formatTime = H.formatTime || ((t) => new Date(t || Date.now()).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }));
+
+    // overlay state owned by the app module (imperative surfaces the consumer triggers)
+    let ctx = { open: false, x: 0, y: 0, items: [] };
+    let emoji = { open: false, x: 0, y: 0, onSelect: null };
+    let palette = { open: false, items: [], onSelect: null };
+
+    const railView = (s) => {
+        const out = [];
+        const channels = [...(s.channels || [])].sort((a, b) => (a.position || 0) - (b.position || 0));
+        const text = channels.filter(c => c.type !== 'voice' && c.type !== 'threaded');
+        const voice = channels.filter(c => c.type === 'voice' || c.type === 'threaded');
+        const cur = s.currentChannel || {};
+        const servers = s.servers || [];
+        if (text.length) {
+            out.push(h('div', { class: 'group' }, 'rooms'));
+            for (const c of text) out.push(railPill(c, cur, false, s));
+        } else if (!servers.length) {
+            out.push(h('div', { class: 'group' }, 'rooms'));
+            out.push(h('div', { class: 'rail-empty' }, 'no channels yet'));
+        }
+        if (voice.length) {
+            out.push(h('div', { class: 'group' }, 'voice'));
+            for (const c of voice) out.push(railPill(c, cur, true, s));
+        }
+        if (servers.length) {
+            out.push(h('div', { class: 'group' }, 'servers'));
+            out.push(railServerPill({ name: 'home', _home: true }, s));
+            for (const sv of servers) out.push(railServerPill(sv, s));
+        }
+        return h('div', {}, ...out);
+    };
+
+    const railPill = (c, cur, isVoice, s) => {
+        const active = cur.id === c.id;
+        const inVoice = isVoice && s.voiceConnected && s.voiceChannelName === c.name;
+        const glyph = inVoice ? h('span', { class: 'glyph' }, '●')
+            : (c.type === 'threaded' ? h('span', { class: 'glyph' }, '◉')
+                : h('span', { class: 'glyph' }, Icon(CHANNEL_ICON[c.type] || 'hash', { size: 15 })));
+        return h('a', {
+            href: '#', class: active ? 'active' : '',
+            onclick: (e) => { e.preventDefault(); A.switchChannel && A.switchChannel(c); },
+            oncontextmenu: (e) => { e.preventDefault(); A.channelContext && A.channelContext(c.id, e.clientX, e.clientY); },
+        }, glyph, h('span', {}, c.name || c.id),
+            c.unreadCount ? h('span', { class: 'count' }, c.unreadCount > 99 ? '99+' : String(c.unreadCount)) : null);
+    };
+
+    const railServerPill = (sv, s) => {
+        const active = sv._home ? s.homeMode : (!s.homeMode && s.currentServerId === sv.id);
+        return h('a', {
+            href: '#', class: active ? 'active' : '',
+            onclick: (e) => { e.preventDefault(); sv._home ? (A.goHome && A.goHome()) : (A.switchServer && A.switchServer(sv.id)); },
+            oncontextmenu: sv._home ? null : (e) => { e.preventDefault(); A.serverContext && A.serverContext(sv.id, e.clientX, e.clientY); },
+        }, h('span', { class: 'glyph' }, sv._home ? '◆' : (sv.name || '?').slice(0, 1).toUpperCase()),
+            h('span', {}, sv.name || sv.id),
+            sv.unreadCount ? h('span', { class: 'count' }, sv.unreadCount > 99 ? '99+' : String(sv.unreadCount)) : null);
+    };
+
+    const CODE_FENCE_RE = /^```([a-zA-Z0-9_+-]*)\n([\s\S]*?)\n?```\s*$/;
+    const partsFromMessage = (m) => {
+        const parts = [];
+        if (m.replyTo) {
+            const who = m.replyTo.username || 'User';
+            const quoted = (m.replyTo.content || '').replace(/\n/g, ' ').slice(0, 120);
+            parts.push({ kind: 'md', text: '> **@' + who + ':** ' + quoted });
+        }
+        const content = m.content || '';
+        const fence = content.match(CODE_FENCE_RE);
+        if (m.type === 'code' || fence) parts.push({ kind: 'code', code: fence ? fence[2] : content, lang: fence ? fence[1] : (m.lang || '') });
+        else if (m.type === 'image') { const src = m.url || m.imageUrl || m.src; if (src) parts.push({ kind: 'image', src, alt: m.alt || '', caption: m.caption }); else if (content) parts.push({ kind: 'md', text: content }); }
+        else if (m.type === 'file') parts.push({ kind: 'file', src: m.url || m.fileUrl || m.src, name: m.name || m.filename || 'attachment', size: m.size });
+        else if (content) parts.push({ kind: 'md', text: content });
+        if (Array.isArray(m.attachments)) for (const a of m.attachments) {
+            if (!a) continue;
+            if (a.type === 'image' && (a.src || a.url)) parts.push({ kind: 'image', src: a.src || a.url, alt: a.alt || '', caption: a.caption });
+            else if ((a.src || a.url) && (a.name || a.filename)) parts.push({ kind: 'file', src: a.src || a.url, name: a.name || a.filename, size: a.size });
+        }
+        return parts;
+    };
+
+    const mapMessages = (s) => {
+        const chatMsgs = s.messages || [];
+        const selfId = s.userId;
+        return chatMsgs.map((m, i) => {
+            if (m.type === 'system') return { key: m.id || ('sys' + i), who: 'them', name: '', parts: [{ kind: 'md', text: '_' + (m.text || '') + '_' }] };
+            const username = (A.resolveProfile && A.resolveProfile(m.userId)) || m.username || 'User';
+            const isYou = selfId && String(m.userId) === String(selfId);
+            const reactions = Array.isArray(m.reactions) ? m.reactions.map(r => ({ emoji: r.emoji, count: r.count != null ? r.count : (r.users ? r.users.length : 1), you: !!(r.you || (r.users && selfId && r.users.includes(selfId))) })) : null;
+            return { key: m.id || ('m' + i), who: isYou ? 'you' : 'them', name: isYou ? null : username, avatar: initial(username), time: formatTime(m.timestamp), parts: partsFromMessage(m), reactions, receipt: isYou && m.read ? 'read' : (isYou && m.delivered ? 'delivered' : null) };
+        });
+    };
+
+    const chatView = (s) => {
+        const ch = s.currentChannel || {};
+        const sub = ch.type === 'voice' ? 'voice' : ch.type === 'forum' ? 'forum' : ch.type === 'page' ? 'page' : ch.type === 'announcement' ? 'announcement' : 'public';
+        return Chat({
+            title: ch.name || 'general', sub, messages: mapMessages(s), header: null,
+            composer: ChatComposer({
+                value: s.chatInputValue || '',
+                placeholder: 'message #' + (ch.name || 'general') + '…',
+                onInput: (v) => A.setInput && A.setInput(v),
+                onSend: (v) => { const t = (v || '').trim(); if (t) A.send && A.send(t); },
+            }),
+        });
+    };
+
+    const voiceView = (s) => h('div', { class: 'vx-view' },
+        h('div', { class: 'vx-grid' }, ...(s.voiceParticipants || []).map((p, i) => VoiceUser({ ...p, key: p.identity || p.id || i }))),
+        s.webcamEnabled ? WebcamPreview({ videoStream: s.webcamStream, resolution: s.webcamResolution, fps: s.webcamFps, enabled: true }) : null,
+        s.pttUiMode === 'vad' ? VadMeter({ level: s.micRawLevel || 0, threshold: s.vadThreshold, onThresholdChange: (t) => A.setVadThreshold && A.setVadThreshold(t) }) : null,
+        s.pttUiMode === 'ptt' || s.pttUiMode == null ? PttButton({ state: s.isSpeaking ? 'live' : 'idle', mode: 'ptt', onHoldStart: () => A.pttStart && A.pttStart(), onHoldEnd: () => A.pttStop && A.pttStop() }) : null,
+        VoiceControls({
+            muted: !!s.micMuted, deafened: !!s.voiceDeafened,
+            onMic: () => A.toggleMic && A.toggleMic(),
+            onDeafen: () => A.toggleDeafen && A.toggleDeafen(),
+            onSettings: () => A.openVoiceSettings && A.openVoiceSettings(),
+            onLeave: () => A.leaveVoice && A.leaveVoice(),
+        }),
+    );
+
+    const view = () => {
+        const s = get();
+        const ch = s.currentChannel || {};
+        const inVoiceChannel = ch.type === 'voice';
+        const bodyMain = inVoiceChannel ? voiceView(s)
+            : ch.type === 'forum' ? ForumView({ posts: s.forumPosts || [], onSelect: (id) => A.openThread && A.openThread(id), onNewPost: () => A.newForumPost && A.newForumPost() })
+            : ch.type === 'page' ? PageView({ title: ch.name, html: s.pageHtml || '', isAdmin: !!s.canManage, onEdit: () => A.editPage && A.editPage() })
+            : chatView(s);
+        const showVoiceBanner = s.voiceConnected && s.voiceChannelName && !(inVoiceChannel && s.voiceChannelName === ch.name);
+        return h('div', { class: 'ca-app' },
+            // top bar (sole app chrome above the chat-head)
+            h('header', { class: 'app-topbar' },
+                h('span', { class: 'brand' }, 'zellous', h('span', { class: 'slash' }, ' / '), h('span', {}, ch.name || 'general')),
+                h('span', {}),
+                h('nav', {},
+                    h('a', { href: '../', title: 'Home', onclick: (e) => { if (A.goHome) { e.preventDefault(); A.goHome(); } } }, 'home'),
+                    h('a', { href: '#', title: 'Servers', onclick: (e) => { e.preventDefault(); A.openServers && A.openServers(); } }, 'servers'),
+                    h('a', { href: 'https://github.com/AnEntrypoint/zellous', target: '_blank', rel: 'noopener' }, 'source ↗'),
+                ),
+            ),
+            MobileHeader({ channelType: ch.type || 'text', channelName: ch.name || '', onMenu: () => A.openMobileMenu && A.openMobileMenu(), onMembers: () => A.toggleMembers && A.toggleMembers() }),
+            Banner({ tone: 'warning', message: 'No relay connected. Reconnecting…', visible: s.isConnected === false }),
+            Banner({ tone: 'success', visible: !!showVoiceBanner, message: showVoiceBanner ? ('In voice: ' + (s.voiceChannelName || '') + ' — click to return') : '', actionLabel: 'Leave', onAction: (e) => { if (e && e.stopPropagation) e.stopPropagation(); A.leaveVoice && A.leaveVoice(); }, onClick: () => A.returnToVoice && A.returnToVoice() }),
+            h('div', { class: 'app-body' },
+                h('aside', { class: 'app-side ca-rail' }, railView(s)),
+                h('main', { class: 'app-main' },
+                    !inVoiceChannel && s.voiceConnected ? VoiceStrip({ channelName: s.voiceChannelName, status: s.voiceConnectionState || 'connected', muted: !!s.micMuted, deafened: !!s.voiceDeafened, onMute: () => A.toggleMic && A.toggleMic(), onDeafen: () => A.toggleDeafen && A.toggleDeafen(), onLeave: () => A.leaveVoice && A.leaveVoice(), open: true }) : null,
+                    UserPanel({ name: (s.currentUser && (s.currentUser.displayName || s.currentUser.username || s.currentUser.name)) || 'You', tag: s.currentUser && s.currentUser.tag, color: avatarColor(s.userId), muted: !!s.micMuted, deafened: !!s.voiceDeafened, onMute: () => A.toggleMic && A.toggleMic(), onDeafen: () => A.toggleDeafen && A.toggleDeafen(), onSettings: () => A.openSettings && A.openSettings() }),
+                    bodyMain,
+                ),
+                MemberList({ categories: s.memberCategories || [], open: !!s.memberListOpen }),
+            ),
+            // overlays
+            ctx.open ? ContextMenu({ items: ctx.items, anchor: { x: ctx.x, y: ctx.y }, onClose: () => { ctx = { ...ctx, open: false }; render(); } }) : null,
+            emoji.open ? EmojiPicker({ open: true, anchorX: emoji.x, anchorY: emoji.y, onSelect: (em) => { try { emoji.onSelect && emoji.onSelect(em); } catch (_) {} emoji = { ...emoji, open: false }; render(); }, onClose: () => { emoji = { ...emoji, open: false }; render(); } }) : null,
+            palette.open ? CommandPalette({ open: true, items: palette.items, onSelect: (it) => { try { palette.onSelect && palette.onSelect(it); } catch (_) {} palette = { ...palette, open: false }; render(); }, onClose: () => { palette = { ...palette, open: false }; render(); } }) : null,
+            // global overlays (visibility driven by adapter snapshot)
+            s.showAuthModal ? AuthModal({ open: true, mode: s.authMode || 'extension', error: s.authError || '', busy: !!s.authBusy, onModeChange: (m) => A.setAuthMode && A.setAuthMode(m), onConnectExtension: () => A.authExtension && A.authExtension(), onGenerate: () => A.authGenerate && A.authGenerate(), onImport: (k) => A.authImport && A.authImport(k), onClose: () => A.closeAuth && A.closeAuth() }) : null,
+            BootOverlay({ progress: s.bootProgress || 0, phase: s.bootPhase || '', errored: !!s.bootErrored, visible: !!s.bootVisible }),
+            s.settingsOpen ? SettingsPopover({ open: true, anchorX: (s.settingsAnchor && s.settingsAnchor.x) || 0, anchorY: (s.settingsAnchor && s.settingsAnchor.y) || 0, sections: s.settingsSections || [], onClose: () => A.openSettings && A.openSettings() }) : null,
+            s.voiceSettingsOpen ? VoiceSettingsModal({ open: true, mode: s.voiceMode || 'ptt', inputId: s.inputDeviceId, outputId: s.outputDeviceId, inputDevices: s.inputDevices || [], outputDevices: s.outputDevices || [], vadThreshold: s.vadThreshold, rnnoise: !!s.rnnoiseEnabled, autoGain: !!s.autoGainEnabled, forceTurn: !!s.forceTurnEnabled, bitrate: s.voiceBitrate, volume: s.masterVolume, onChange: (p) => A.voiceSettingsChange && A.voiceSettingsChange(p), onSave: () => A.voiceSettingsSave && A.voiceSettingsSave(), onCancel: () => A.voiceSettingsClose && A.voiceSettingsClose(), onClose: () => A.voiceSettingsClose && A.voiceSettingsClose() }) : null,
+            s.videoLightbox && s.videoLightbox.open ? VideoLightbox({ open: true, src: s.videoLightbox.src, label: s.videoLightbox.label, onClose: () => A.closeVideoLightbox && A.closeVideoLightbox() }) : null,
+            (s.audioQueueItems && s.audioQueueItems.length) ? AudioQueue({ segments: s.audioQueueItems, currentSegmentId: s.audioQueueCurrentId, paused: !!s.audioQueuePaused, onReplay: (id) => A.replaySegment && A.replaySegment(id), onSkip: () => A.skipSegment && A.skipSegment(), onResume: () => A.resumeQueue && A.resumeQueue(), onPause: () => A.pauseQueue && A.pauseQueue() }) : null,
+            s.threadPanelOpen ? ThreadPanel({ threads: s.threads || [], activeId: s.activeThreadId, onSelect: (id) => A.selectThread && A.selectThread(id), onCreate: () => A.createThread && A.createThread(), onClose: () => A.closeThreadPanel && A.closeThreadPanel() }) : null,
+        );
+    };
+
+    const render = () => { webjsx.applyDiff(root, view()); };
+
+    // imperative overlay API the consumer (and its modules) can call
+    const api = {
+        contextMenu: { show: (items, x, y) => { ctx = { open: true, x: x | 0, y: y | 0, items: Array.isArray(items) ? items : [] }; render(); }, close: () => { ctx = { ...ctx, open: false }; render(); } },
+        emojiPicker: { show: (x, y, onSelect) => { emoji = { open: true, x: x || 200, y: y || 200, onSelect }; render(); }, close: () => { emoji = { ...emoji, open: false }; render(); } },
+        commandPalette: { show: (items, onSelect) => { palette = { open: true, items: items || [], onSelect }; render(); }, close: () => { palette = { ...palette, open: false }; render(); } },
+        render,
+    };
+
+    let unsub = null;
+    if (typeof adapter.subscribe === 'function') unsub = adapter.subscribe(render);
+    render();
+    return { render, api, destroy: () => { if (unsub) try { unsub(); } catch (_) {} } };
+}

package/src/components/agent-chat.js

@@ -0,0 +1,156 @@
+// AgentChat — a reusable multi-agent orchestration chat surface.
+//
+// This kit takes the best of two surfaces: agentgui's orchestration chat
+// (agent-then-model picker, streamed tool_use/tool_result parts, resume + cwd
+// controls, error alerts) and the AICat chat thread (IntersectionObserver
+// auto-scroll, a thinking indicator, polished head). It is a PURE component:
+// props in, vnode out. It holds NO transport — every server interaction is a
+// callback the host wires (WebSocket, fetch, SSE, whatever). That keeps the kit
+// reusable by any app, not just agentgui.
+//
+// The host owns state; AgentChat renders it and calls back on intent.
+
+import * as webjsx from '../../vendor/webjsx/index.js';
+import { ChatComposer, ChatMessage } from './chat.js';
+import { Select } from './content.js';
+import { Btn } from './shell.js';
+
+const h = webjsx.createElement;
+
+// Auto-scroll a thread to the bottom while the user is already near the bottom,
+// via an IntersectionObserver on a sentinel — the AICat scroll behaviour, lifted
+// so it works for any message list without a per-frame scrollTop write.
+function threadRef(msgCount) {
+  return (el) => {
+    if (!el) return;
+    let sentinel = el.querySelector('[data-scroll-sentinel]');
+    if (!sentinel) {
+      sentinel = document.createElement('div');
+      sentinel.setAttribute('data-scroll-sentinel', '');
+      sentinel.style.height = '1px';
+      el.appendChild(sentinel);
+    }
+    const obs = new IntersectionObserver((entries) => {
+      if (entries[0]?.isIntersecting && el.dataset.msgCount !== String(msgCount)) {
+        el.scrollTop = el.scrollHeight - el.clientHeight;
+        el.dataset.msgCount = String(msgCount);
+      }
+    }, { root: el, threshold: 0 });
+    obs.observe(sentinel);
+    el.dataset.msgCount = String(msgCount);
+    return () => obs.disconnect();
+  };
+}
+
+// The agent picker: agent-then-model, not a flat model list. Unavailable agents
+// are disabled (unless installable via npx). Ordering is the host's concern.
+function AgentControls({ agents, selectedAgent, models, selectedModel, busy, status,
+                         onSelectAgent, onSelectModel, onNewChat, onStop }) {
+  const agentOptions = (agents || []).map((a) => ({
+    value: a.id,
+    label: a.name + (a.available === false ? (a.npxInstallable ? ' (via npx)' : ' (not installed)') : ''),
+    disabled: a.available === false && !a.npxInstallable,
+  }));
+  const showModels = (models || []).length > 0;
+  return h('div', { class: 'agentchat-controls' },
+    Select({
+      key: 'agentsel', value: selectedAgent, placeholder: '— agent —',
+      title: 'Select agent', options: agentOptions,
+      onChange: (v) => onSelectAgent && onSelectAgent(v),
+    }),
+    showModels
+      ? Select({
+          key: 'modelsel', value: selectedModel, placeholder: '— model —',
+          title: 'Select model', options: (models || []).map((m) => ({ value: m.id, label: m.name || m.id })),
+          onChange: (v) => onSelectModel && onSelectModel(v),
+        })
+      : null,
+    busy
+      ? Btn({ key: 'stop', onClick: () => onStop && onStop(), children: 'stop', title: 'Stop streaming' })
+      : Btn({ key: 'new', onClick: () => onNewChat && onNewChat(), children: 'new', title: 'New chat' }),
+    h('span', { key: 'st', class: 'agentchat-status', role: 'status', 'aria-live': 'polite' },
+      h('span', { class: 'status-dot-disc ' + (busy ? 'status-dot-live' : ''), 'aria-hidden': 'true' }),
+      h('span', {}, status || (busy ? 'streaming…' : 'ready'))),
+  );
+}
+
+// A working-directory bar: shows where the agent will run, editable + clearable.
+function CwdBar({ cwd, editing, draft, onEdit, onSave, onCancel, onClear, onDraft }) {
+  if (editing) {
+    return h('div', { class: 'agentchat-cwd agentchat-cwd-editing', role: 'group', 'aria-label': 'Set working directory' },
+      h('input', { class: 'agentchat-cwd-input', type: 'text', value: draft ?? cwd ?? '',
+        placeholder: 'absolute path (blank = server default)',
+        oninput: (e) => onDraft && onDraft(e.target.value) }),
+      Btn({ key: 'save', primary: true, onClick: () => onSave && onSave(), children: 'save' }),
+      Btn({ key: 'cancel', onClick: () => onCancel && onCancel(), children: 'cancel' }));
+  }
+  return h('div', { class: 'agentchat-cwd', role: 'group', 'aria-label': 'Working directory' },
+    h('span', { class: 'agentchat-cwd-text', title: cwd || 'server default working directory' },
+      'cwd: ' + (cwd || 'server default')),
+    h('button', { type: 'button', class: 'agentchat-cwd-btn', onclick: () => onEdit && onEdit() }, cwd ? 'change' : 'set'),
+    cwd ? h('button', { type: 'button', class: 'agentchat-cwd-btn', onclick: () => onClear && onClear() }, 'use default') : null);
+}
+
+// AgentChat — the composed surface.
+//   agents, selectedAgent, models, selectedModel : picker state
+//   messages : [{ id, role:'user'|'assistant', content, time, parts:[string] }]
+//   busy, draft, status                          : stream + composer state
+//   cwd, cwdEditing, cwdDraft                    : working-directory bar
+//   banners                                      : array of pre-built Alert vnodes (errors, resume, unavailable)
+//   onSelectAgent/onSelectModel/onSend/onStop/onNewChat/onInput
+//   onCwdEdit/onCwdSave/onCwdCancel/onCwdClear/onCwdDraft
+export function AgentChat(props = {}) {
+  const {
+    agents = [], selectedAgent = '', models = [], selectedModel = '',
+    messages = [], busy = false, draft = '', status, banners = [],
+    cwd = '', cwdEditing = false, cwdDraft,
+    agentName, placeholder,
+    onSelectAgent, onSelectModel, onSend, onStop, onNewChat, onInput,
+    onCwdEdit, onCwdSave, onCwdCancel, onCwdClear, onCwdDraft,
+    canSend = true,
+  } = props;
+
+  const name = agentName || (agents.find((a) => a.id === selectedAgent)?.name) || selectedAgent || 'agent';
+  const lastIdx = messages.length - 1;
+  const rows = messages.map((m, i) => {
+    const isAssistant = m.role === 'assistant';
+    const isStreaming = busy && i === lastIdx && isAssistant;
+    const hasParts = Array.isArray(m.parts) && m.parts.length > 0;
+    const emptyStreaming = isStreaming && !m.content && !hasParts;
+    const parts = [];
+    if (m.content) parts.push({ kind: isAssistant ? 'md' : 'text', text: m.content });
+    if (hasParts) for (const p of m.parts) parts.push({ kind: 'text', text: p });
+    return ChatMessage({
+      key: m.id || String(i),
+      who: isAssistant ? 'them' : 'you',
+      aicat: isAssistant,
+      name: isAssistant ? name : 'you',
+      time: m.time || '',
+      typing: emptyStreaming,
+      parts: emptyStreaming ? undefined : (parts.length ? parts : [{ kind: 'text', text: '' }]),
+    });
+  });
+
+  const composer = ChatComposer({
+    value: draft,
+    disabled: !canSend,
+    placeholder: placeholder || (selectedAgent ? 'message…' : 'choose an agent first'),
+    onInput: (v) => onInput && onInput(v),
+    onSend: (v) => onSend && onSend(v),
+  });
+
+  return h('div', { class: 'agentchat' },
+    AgentControls({ agents, selectedAgent, models, selectedModel, busy, status,
+                    onSelectAgent, onSelectModel, onNewChat, onStop }),
+    CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft,
+             onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft }),
+    ...(banners || []).filter(Boolean),
+    h('div', { class: 'agentchat-head', role: 'banner' },
+      h('h2', { class: 'agentchat-title' }, name + (selectedModel ? ' · ' + selectedModel : '')),
+      h('span', { class: 'agentchat-sub', 'aria-live': 'polite' },
+        busy ? 'streaming…' : (messages.length ? messages.length + (messages.length === 1 ? ' message' : ' messages') : ''))),
+    h('div', { class: 'agentchat-thread', ref: threadRef(messages.length), role: 'log', 'aria-label': 'conversation' },
+      ...rows),
+    composer,
+  );
+}

package/src/components.js

@@ -24,6 +24,8 @@ export {
     AICAT_FACE, AICatPortrait, AICat
 } from './components/chat.js';
 
+export { AgentChat } from './components/agent-chat.js';
+
 export {
     fileGlyph, fmtFileSize,
     FileIcon, FileRow, FileGrid, FileToolbar,
@@ -86,3 +88,5 @@ export {
     models, cron, skills, config, env, tools, batch, gateway, chains,
     skillLabel, getRecentPaths, saveRecentPath, renderChatMessages
 } from './components/freddie.js';
+
+export { mountCommunityApp } from './community-app.js';