anentrypoint-design 0.0.68 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.68",
+  "version": "0.0.71",
   "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",
@@ -24,16 +24,22 @@
     "./desktop/shell.js": "./src/desktop/shell.js",
     "./desktop/freddie-dashboard.js": "./src/desktop/freddie-dashboard.js",
     "./desktop/freddie-dashboard.css": "./src/desktop/freddie-dashboard.css",
+    "./colors_and_type.css": "./colors_and_type.css",
+    "./app-shell.css": "./app-shell.css",
     "./page-html": {
       "import": "./src/page-html.js",
       "default": "./src/page-html.js"
     },
     "./src/page-html.js": "./src/page-html.js",
+    "./web-components/ds-chat.js": "./src/web-components/ds-chat.js",
+    "./web-components/freddie-chat.js": "./src/web-components/freddie-chat.js",
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
     "src",
+    "colors_and_type.css",
+    "app-shell.css",
     "README.md"
   ],
   "scripts": {

package/src/components/community.js

@@ -0,0 +1,165 @@
+import * as webjsx from '../../vendor/webjsx/index.js';
+const h = webjsx.createElement;
+
+export function ServerIcon({ id, name, icon, active, badge, onClick } = {}) {
+    const initials = (name || '?').slice(0, 2).toUpperCase();
+    return h('div', { class: 'cm-server-icon' + (active ? ' active' : ''), onclick: onClick, title: name, 'data-id': id },
+        h('span', { class: 'cm-server-pill' }),
+        icon ? h('img', { src: icon, alt: name }) : h('span', {}, initials),
+        badge ? h('span', { class: 'cm-server-badge' }, badge > 99 ? '99+' : String(badge)) : null
+    );
+}
+
+export function ServerRail({ servers = [], activeId, onSelect, onAdd } = {}) {
+    return h('div', { class: 'cm-server-rail' },
+        h('a', { class: 'cm-server-back', href: '../', title: 'Back' }, '◰'),
+        h('div', { class: 'cm-server-sep' }),
+        ...servers.map(s => ServerIcon({ ...s, active: s.id === activeId, onClick: () => onSelect?.(s.id) })),
+        onAdd ? h('button', { class: 'cm-server-add', onclick: onAdd, title: 'Add server' }, '+') : null
+    );
+}
+
+export function ChannelItem({ id, name, type = 'text', active, voiceActive, onClick, onContext } = {}) {
+    const icon = type === 'voice' ? '🔊' : type === 'forum' ? '◻' : '#';
+    return h('div', {
+        class: 'cm-channel-item' + (active ? ' active' : '') + (voiceActive ? ' voice-active' : ''),
+        'data-id': id,
+        onclick: onClick,
+        oncontextmenu: (e) => { e.preventDefault(); onContext?.(id, e.clientX, e.clientY); }
+    },
+        h('span', { class: 'cm-ch-icon' }, icon),
+        h('span', { class: 'cm-ch-name' }, name)
+    );
+}
+
+export function ChannelCategory({ id, name, channels = [], collapsed, activeId, onToggle, onAddChannel, onChannelClick, onChannelContext } = {}) {
+    return h('div', { class: 'cm-channel-category' },
+        h('div', {
+            class: 'cm-category-header' + (collapsed ? ' collapsed' : ''),
+            onclick: () => onToggle?.(id)
+        },
+            h('svg', { class: 'cm-cat-arrow', viewBox: '0 0 24 24' }, h('path', { d: 'M7 10l5 5 5-5z' })),
+            h('span', { class: 'cm-cat-name' }, name),
+            onAddChannel ? h('button', { class: 'cm-cat-add', onclick: (e) => { e.stopPropagation(); onAddChannel(id); }, title: 'Add channel' }, '+') : null
+        ),
+        collapsed ? null : h('div', { class: 'cm-cat-channels' },
+            ...channels.map(c => ChannelItem({
+                ...c,
+                active: c.id === activeId,
+                onClick: () => onChannelClick?.(c),
+                onContext: onChannelContext
+            }))
+        )
+    );
+}
+
+export function VoiceUser({ identity, speaking, color } = {}) {
+    const initial = (identity || '?').slice(0, 1).toUpperCase();
+    return h('div', { class: 'cm-voice-user' + (speaking ? ' speaking' : '') },
+        h('div', { class: 'cm-voice-user-avatar', style: color ? `background:${color}` : '' }, initial),
+        h('span', { class: 'cm-voice-user-name' }, identity)
+    );
+}
+
+export function UserPanel({ name, tag, color, muted, deafened, onMute, onDeafen, onSettings } = {}) {
+    const initial = (name || '?').slice(0, 1).toUpperCase();
+    return h('div', { class: 'cm-user-panel' },
+        h('div', { class: 'cm-user-avatar', style: color ? `background:${color}` : '' },
+            h('span', { class: 'cm-user-status-dot' }),
+            initial
+        ),
+        h('div', { class: 'cm-user-info' },
+            h('div', { class: 'cm-user-name' }, name || 'You'),
+            tag ? h('div', { class: 'cm-user-tag' }, tag) : null
+        ),
+        h('div', { class: 'cm-user-controls' },
+            h('button', { class: 'cm-user-btn' + (muted ? ' muted' : ''), onclick: onMute, title: muted ? 'Unmute' : 'Mute' }, muted ? '🔇' : '🎤'),
+            h('button', { class: 'cm-user-btn' + (deafened ? ' deafened' : ''), onclick: onDeafen, title: deafened ? 'Undeafen' : 'Deafen' }, deafened ? '🔕' : '🎧'),
+            h('button', { class: 'cm-user-btn', onclick: onSettings, title: 'Settings' }, '⚙')
+        )
+    );
+}
+
+export function ChannelSidebar({ serverName, channels = [], categories = [], activeId, collapsedCats = new Set(), onChannelClick, onCategoryToggle, onAddChannel, onChannelContext, userPanelProps } = {}) {
+    const uncategorized = channels.filter(c => !c.categoryId || !categories.find(cat => cat.id === c.categoryId));
+    const sorted = [...categories].sort((a, b) => (a.position || 0) - (b.position || 0));
+
+    return h('div', { class: 'cm-channel-sidebar' },
+        h('div', { class: 'cm-server-header' },
+            h('span', { class: 'cm-server-header-name' }, serverName || 'Server'),
+        ),
+        h('div', { class: 'cm-channel-list' },
+            ...sorted.map(cat => ChannelCategory({
+                id: cat.id,
+                name: cat.name,
+                channels: channels.filter(c => c.categoryId === cat.id).sort((a, b) => (a.position || 0) - (b.position || 0)),
+                collapsed: collapsedCats.has(cat.id),
+                activeId,
+                onToggle: onCategoryToggle,
+                onAddChannel,
+                onChannelClick,
+                onChannelContext
+            })),
+            uncategorized.length ? ChannelCategory({
+                id: 'uncategorized',
+                name: 'CHANNELS',
+                channels: uncategorized,
+                activeId,
+                onChannelClick,
+                onChannelContext
+            }) : null
+        ),
+        userPanelProps ? UserPanel(userPanelProps) : null
+    );
+}
+
+export function MemberItem({ identity, name, color, status = 'online' } = {}) {
+    const initial = (name || identity || '?').slice(0, 1).toUpperCase();
+    return h('div', { class: 'cm-member-item' },
+        h('div', { class: 'cm-member-avatar', style: color ? `background:${color}` : '' },
+            h('span', { class: 'cm-member-status' + (status === 'online' ? ' online' : '') }),
+            initial
+        ),
+        h('span', { class: 'cm-member-name' }, name || identity)
+    );
+}
+
+export function MemberList({ categories = [], open } = {}) {
+    return h('div', { class: 'cm-member-list' + (open ? ' open' : '') },
+        ...categories.flatMap(cat => [
+            h('div', { class: 'cm-member-category', key: cat.label }, `${cat.label} — ${cat.members.length}`),
+            ...cat.members.map((m, i) => MemberItem({ ...m, key: m.identity || i }))
+        ])
+    );
+}
+
+export function ChatHeader({ icon = '#', name, topic, toolbar = [] } = {}) {
+    return h('div', { class: 'cm-chat-header' },
+        h('span', { class: 'cm-chat-header-icon' }, icon),
+        h('span', { class: 'cm-chat-header-name' }, name),
+        topic ? h('span', { class: 'cm-chat-header-topic' }, topic) : null,
+        h('div', { class: 'cm-chat-header-toolbar' }, ...toolbar)
+    );
+}
+
+export function VoiceStrip({ channelName, status, muted, deafened, onMute, onDeafen, onLeave, open } = {}) {
+    return h('div', { class: 'cm-voice-strip' + (open ? ' open' : '') },
+        h('div', { class: 'cm-vs-label' },
+            h('span', { class: 'cm-vs-channel' }, '🔊 ' + (channelName || 'voice')),
+            h('span', { class: 'cm-vs-status' }, status || 'connected')
+        ),
+        h('button', { class: 'cm-vs-btn', onclick: onMute, title: 'Mute' }, muted ? '🔇' : '🎤'),
+        h('button', { class: 'cm-vs-btn', onclick: onDeafen, title: 'Deafen' }, deafened ? '🔕' : '🎧'),
+        h('button', { class: 'cm-vs-btn danger', onclick: onLeave, title: 'Leave' }, '✕')
+    );
+}
+
+export function CommunityShell({ serverRailProps, sidebarProps, children, memberListProps, voiceStripProps } = {}) {
+    return h('div', { class: 'cm-shell' },
+        serverRailProps ? ServerRail(serverRailProps) : null,
+        sidebarProps ? ChannelSidebar(sidebarProps) : null,
+        h('div', { class: 'cm-main' }, ...(Array.isArray(children) ? children : [children])),
+        memberListProps ? MemberList(memberListProps) : null,
+        voiceStripProps ? VoiceStrip(voiceStripProps) : null
+    );
+}

package/src/components/freddie.js

@@ -0,0 +1,112 @@
+import * as webjsx from '../../vendor/webjsx/index.js';
+export const h = webjsx.createElement;
+import { Panel, Row, Hero, Receipt, Kpi, Table, Form } from './content.js';
+import { Chip } from './shell.js';
+import { EmptyState } from './files.js';
+
+export const skillLabel = s => (s.name||'').replace(/^gm:/,'').replace(/-/g,' ');
+export const getRecentPaths = () => { try { return JSON.parse(localStorage.getItem('fd_recent_cwds')||'[]'); } catch { return []; } };
+export const saveRecentPath = p => { if (!p) return; const a = getRecentPaths().filter(x=>x!==p); a.unshift(p); localStorage.setItem('fd_recent_cwds', JSON.stringify(a.slice(0,5))); };
+export function renderChatMessages(el, msgs) {
+    if (!el) return; el.innerHTML = '';
+    for (const m of msgs) {
+        const div = document.createElement('div');
+        div.className = 'fd-msg'+(m.role==='assistant'?' fd-msg-assistant':'');
+        if (m.role==='tool') { const det=document.createElement('details'); det.className='fd-tool-call'; const sum=document.createElement('summary'); sum.textContent=(m.name||'tool')+(m.argsSummary?': '+m.argsSummary:''); const pre=document.createElement('pre'); pre.className='fd-tool-body'; pre.textContent=m.content||''; det.appendChild(sum); det.appendChild(pre); div.appendChild(det); }
+        else { const pre=document.createElement('pre'); pre.className='fd-pre'; pre.textContent=m.content||''; div.appendChild(pre); }
+        el.appendChild(div);
+    }
+    el.scrollTop = el.scrollHeight;
+}
+export async function home(h0) {
+    const sessions=await h0.pi.sessions.list(); const health=h0.pi.health();
+    return [Hero({title:'freddie',body:'open js agent harness.',accent:h0.version||'web'}),Kpi({items:[[sessions.length,'sessions'],[h0.pi.tools.size,'tools'],[h0.pi.skills.size,'skills']]}),Panel({title:'quick start',children:Receipt({rows:[['open chat',"click 'chat' — set a working directory"],['pick skill','software dev, research, planning'],['set api key','keys tab → click chip'],['add cron','cron tab → form']]})}),Panel({title:'host',children:Receipt({rows:Object.entries(health).map(([k,v])=>[k,String(v)])})})];
+}
+export async function chat(h0) {
+    const skills=[...h0.pi.skills.values()]; const providers=await fetch('/api/providers').then(r=>r.json()).catch(()=>[]); const configured=providers.filter(p=>p.configured);
+    const cs=window.__fd_chatState=window.__fd_chatState||{cwd:'',skill:'',provider:'',model:'',messages:[],busy:false,sessionId:null};
+    if (!cs.cwd) cs.cwd=(getRecentPaths()[0]||'');
+    const root=document.getElementById('app'); const getMsgs=()=>root.querySelector('#fd-chat-msgs');
+    const newSession=()=>{ if(cs.busy)return; cs.messages=[]; cs.sessionId=null; renderChatMessages(getMsgs(),cs.messages); };
+    const parseSse=text=>{ const evs=[]; let ev=null,data=''; for(const line of text.split('\n')){ if(line.startsWith('event: '))ev=line.slice(7).trim(); else if(line.startsWith('data: '))data=line.slice(6).trim(); else if(line===''&&ev){try{evs.push({event:ev,data:JSON.parse(data)});}catch{}ev=null;data='';} } return evs; };
+    const sendChat=async ev=>{ ev.preventDefault(); if(cs.busy)return; const promptEl=ev.target.elements.prompt; const prompt=promptEl.value.trim(); if(!prompt)return;
+        cs.messages.push({role:'user',content:prompt}); promptEl.value=''; promptEl.style.height='auto'; cs.busy=true; saveRecentPath(cs.cwd); renderChatMessages(getMsgs(),cs.messages);
+        try { const body={prompt,cwd:cs.cwd||undefined,skill:cs.skill||undefined,provider:cs.provider||undefined,model:cs.model||undefined,sessionId:cs.sessionId||undefined};
+            const resp=await fetch('/api/chat',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(body)}); const text=await resp.text(); const events=parseSse(text); let ac='';
+            for(const{event,data}of events){ if(event==='start'&&data.sessionId)cs.sessionId=data.sessionId; if(event==='done'&&data.sessionId)cs.sessionId=data.sessionId;
+                if(event==='message'){ if(data.role==='assistant'){ const content=Array.isArray(data.content)?data.content:[{type:'text',text:String(data.content||'')}]; for(const block of content){ if(block.type==='text')ac+=block.text; if(block.type==='tool_use'){if(ac){cs.messages.push({role:'assistant',content:ac});ac='';}cs.messages.push({role:'tool',name:block.name,argsSummary:JSON.stringify(block.input||{}).slice(0,60),content:JSON.stringify(block.input||{},null,2)});} } }
+                    else if(data.role==='tool'){const tc=Array.isArray(data.content)?data.content[0]:data;cs.messages.push({role:'tool',name:'result',argsSummary:'',content:String(tc?.content||tc?.text||JSON.stringify(tc))});} }
+                if(event==='done'&&data.result&&!ac)ac=data.result; if(event==='error')ac='error: '+(data.error||'unknown'); }
+            if(ac)cs.messages.push({role:'assistant',content:ac}); if(!events.length)cs.messages.push({role:'assistant',content:'(no response)'});
+        } catch(e){cs.messages.push({role:'assistant',content:'error: '+e.message});}
+        cs.busy=false; renderChatMessages(getMsgs(),cs.messages); };
+    const byCat=skills.reduce((a,s)=>{const c=s.category||'other';(a[c]=a[c]||[]).push(s);return a;},{});
+    setTimeout(()=>renderChatMessages(getMsgs(),cs.messages),50);
+    return [Panel({title:'chat',right:h('button',{class:'btn-primary',onclick:ev=>{ev.preventDefault();newSession();}},'+ new'),children:[
+        h('form',{class:'fd-chat-form',onsubmit:sendChat},h('label',{class:'fd-label'},'WORKING DIRECTORY'),h('input',{name:'cwd',type:'text',placeholder:'e.g. C:/dev/myproject',value:cs.cwd,oninput:ev=>{cs.cwd=ev.target.value;}}),
+        h('div',{class:'fd-row'},h('div',{class:'fd-col'},h('label',{class:'fd-label'},'SKILL'),h('select',{name:'skill',onchange:ev=>{cs.skill=ev.target.value;}},h('option',{value:''},'— no skill —'),...Object.entries(byCat).map(([cat,ss])=>h('optgroup',{label:cat},...ss.map(s=>h('option',{value:s.name,selected:cs.skill===s.name?'true':null},skillLabel(s))))))),
+        h('div',{class:'fd-col'},h('label',{class:'fd-label'},'PROVIDER'),h('select',{name:'provider',onchange:ev=>{cs.provider=ev.target.value;}},h('option',{value:''},configured.length?'— auto —':'— none configured —'),...configured.map(p=>h('option',{value:p.name,selected:cs.provider===p.name?'true':null},(p.available?'● ':'○ ')+p.name)))),
+        h('div',{class:'fd-col'},h('label',{class:'fd-label'},'MODEL'),h('input',{name:'model',type:'text',placeholder:'default',value:cs.model,oninput:ev=>{cs.model=ev.target.value;}}))),
+        h('div',{class:'fd-chat-send-row'},h('textarea',{name:'prompt',placeholder:'describe what you want…',rows:4,oninput:ev=>{ev.target.style.height='auto';ev.target.style.height=Math.min(ev.target.scrollHeight,240)+'px';}}),h('button',{type:'submit',class:'btn-primary',disabled:cs.busy?'true':null},cs.busy?'…':'send'))),
+        h('div',{id:'fd-chat-msgs',class:'fd-chat-thread'})]}),
+        configured.length===0?Panel({title:'no providers configured',children:Receipt({rows:[['set API key','keys tab → click chip'],['or use acptoapi','run acptoapi server on localhost:4800']]})}):Panel({title:'providers',children:h('div',{class:'fd-chips'},...providers.map(p=>Chip({tone:p.configured?(p.available?'ok':'warn'):'miss',children:p.name+(p.configured?(p.available?' ●':' ○'):'')})))})];
+}
+export async function sessions(h0) {
+    const list=await h0.pi.sessions.list();
+    const rows=list.map(s=>{const cont=h('button',{class:'btn-primary',onclick:async()=>{const msgs=await h0.pi.sessions.getMessages(s.id);const cs=window.__fd_chatState=window.__fd_chatState||{messages:[],busy:false,sessionId:null,cwd:'',skill:'',provider:'',model:''};cs.sessionId=s.id;cs.messages=msgs.map(m=>({role:m.role,content:String(m.content||'')}));if(s.cwd)cs.cwd=s.cwd;if(s.skill)cs.skill=s.skill;if(typeof window.__fd_nav==='function')window.__fd_nav('chat');}},'continue');return[(s.id||'').slice(0,8),s.title||'—',s.platform||'—',s.model||'—',s.cwd?s.cwd.slice(-30):'—',s.skill?skillLabel({name:s.skill}):'—',cont];});
+    return [Kpi({items:[[list.length,'sessions']]}),Panel({title:'sessions',count:list.length,children:list.length===0?EmptyState({text:'no sessions yet',glyph:'✉'}):Table({headers:['id','title','platform','model','cwd','skill',''],rows})})];
+}
+export async function projects(h0) {
+    const list=h0.pi.projects.list(); const active=h0.pi.projects.active();
+    const rows=list.map(p=>Row({key:p.name,code:p.name===active?.name?'●':'○',title:p.name+(p.name===active?.name?'  (active)':''),meta:p.path,onClick:()=>{if(p.name!==active?.name)h0.pi.projects.setActive(p.name);}}));
+    return [Hero({title:'projects',body:'each project is its own ~/.freddie home.',accent:active?'active · '+active.name:'no active project'}),Kpi({items:[[list.length,'projects'],[active?.name||'—','active']]}),Panel({title:'add project',children:Form({fields:[{name:'name',placeholder:'name',required:true},{name:'path',placeholder:'/abs/path'}],submit:'add',onSubmit:ev=>{h0.pi.projects.create({name:ev.target.elements.name.value,path:ev.target.elements.path.value});}})}),Panel({title:'all projects',count:list.length,children:rows.length?rows:EmptyState({text:'no projects',glyph:'◆'})})];
+}
+export async function agents(h0) {
+    const a=typeof h0.pi.agents==='function'?await h0.pi.agents():{count:0,turns:0,active:null};
+    return [Kpi({items:[[a.count||0,'active'],[a.turns||0,'turns']]}),Panel({title:'agents',children:Receipt({rows:[['active session',a.active||'(none)'],['total turns',String(a.turns||0)]]})})];
+}
+export async function analytics(h0) {
+    const list=await h0.pi.sessions.list(); const tools=[...h0.pi.tools.values()];
+    const byPlat=list.reduce((a,s)=>{const k=s.platform||'?';a[k]=(a[k]||0)+1;return a;},{}); const byModel=list.reduce((a,s)=>{const k=s.model||'?';a[k]=(a[k]||0)+1;return a;},{});
+    return [Kpi({items:[[list.length,'sessions'],[tools.length,'tools']]}),Panel({title:'by platform',children:Object.keys(byPlat).length===0?EmptyState({text:'no data',glyph:'◉'}):Table({headers:['platform','count'],rows:Object.entries(byPlat).sort((a,b)=>b[1]-a[1])})}),Panel({title:'by model',children:Object.keys(byModel).length===0?EmptyState({text:'no data',glyph:'◎'}):Table({headers:['model','count'],rows:Object.entries(byModel).sort((a,b)=>b[1]-a[1])})})];
+}
+export async function models(h0) {
+    const cfg=typeof h0.pi.config?.load==='function'?await h0.pi.config.load():{};
+    const providers=await fetch('/api/providers').then(r=>r.json()).catch(()=>[]); const configured=providers.filter(p=>p.configured);
+    const probeState=window.__fd_probeState=window.__fd_probeState||{};
+    async function probeAll(){await Promise.allSettled(configured.map(async p=>{probeState[p.name]='loading';try{const r=await fetch('/api/providers/'+p.name+'/probe',{method:'POST'}).then(x=>x.json());probeState[p.name]=r.models||r.error||'?';}catch(e){probeState[p.name]='error: '+e.message;}}));if(typeof window.__fd_nav==='function')window.__fd_nav('models');}
+    const modelPanels=configured.map(p=>{const models=Array.isArray(probeState[p.name])?probeState[p.name]:p.models;const loading=probeState[p.name]==='loading';const children=loading?h('span',{},'probing…'):models&&models.length>0?Table({headers:['model id'],rows:models.map(m=>[m])}):h('span',{class:'fd-muted'},p.modelsError?'error: '+p.modelsError:'not probed — click "probe all"');return Panel({title:p.name+(p.available?' ●':' ○'),children});});
+    return [Kpi({items:[[configured.length,'configured'],[providers.filter(p=>p.available).length,'available']]}),Panel({title:'change active model',children:Form({fields:[{name:'provider',placeholder:'provider',value:cfg.agent?.provider||''},{name:'model',placeholder:'model id',value:cfg.agent?.model||''}],submit:'update',onSubmit:async ev=>{await h0.pi.config.saveValue('agent.provider',ev.target.elements.provider.value);await h0.pi.config.saveValue('agent.model',ev.target.elements.model.value);}})}),Panel({title:'providers',right:h('button',{class:'btn-primary',onclick:ev=>{ev.preventDefault();probeAll();}},'probe all'),children:h('div',{class:'fd-chips'},...providers.map(p=>Chip({tone:p.configured?(p.available?'ok':'warn'):'miss',children:p.name+(p.configured?(p.available?' ●':' ○'):' ·')})))}),...modelPanels];
+}
+export async function cron(h0) {
+    const list=await h0.pi.cron.list();
+    return [Kpi({items:[[list.length,'jobs']]}),Panel({title:'add job',children:Form({fields:[{name:'cron',placeholder:'* * * * *',required:true},{name:'prompt',placeholder:'prompt',required:true}],submit:'create',onSubmit:async ev=>{await h0.pi.cron.create({cron:ev.target.elements.cron.value,prompt:ev.target.elements.prompt.value});}})}),Panel({title:'jobs',count:list.length,children:list.length===0?EmptyState({text:'no cron jobs',glyph:'◷'}):Table({headers:['id','cron','prompt','enabled'],rows:list.map(j=>[j.id,j.cron,(j.prompt||'').slice(0,40),j.enabled?'yes':'no'])})})];
+}
+export async function skills(h0) {
+    const list=[...h0.pi.skills.values()]; const byCat=list.reduce((a,s)=>{(a[s.category||'other']=a[s.category||'other']||[]).push(s);return a;},{});
+    return [Kpi({items:[[list.length,'skills'],[Object.keys(byCat).length,'categories']]}),list.length===0?EmptyState({text:'no skills — add SKILL.md files to ~/.freddie/skills/',glyph:'◈'}):null,...Object.entries(byCat).map(([cat,ss])=>Panel({title:cat,count:ss.length,children:Table({headers:['name','description'],rows:ss.map(s=>[skillLabel(s),(s.description||'').slice(0,120)])})}))].filter(Boolean);
+}
+export async function config(h0) {
+    const cfg=typeof h0.pi.config?.load==='function'?await h0.pi.config.load():{};
+    const commands=typeof h0.pi.cli?.values==='function'?[...h0.pi.cli.values()]:[];
+    return [Kpi({items:[[commands.length,'commands'],[cfg._config_version||0,'config version']]}),Panel({title:'set config value',children:Form({fields:[{name:'key',placeholder:'dotted.key',required:true},{name:'value',placeholder:'value (json or string)',required:true}],submit:'save',onSubmit:async ev=>{let v=ev.target.elements.value.value;try{v=JSON.parse(v);}catch{}await h0.pi.config.saveValue(ev.target.elements.key.value,v);}})}),Panel({title:'commands',count:commands.length,children:Table({headers:['name','description'],rows:commands.map(c=>[c.name,c.description||''])})}),Panel({title:'active config',children:Receipt({rows:Object.entries(cfg).map(([k,v])=>[k,typeof v==='object'&&v!==null?JSON.stringify(v):String(v??'')])})})];
+}
+export async function env(h0) {
+    const list=typeof h0.pi.env?.list==='function'?h0.pi.env.list():[];
+    const setCount=list.filter(k=>k.set).length;
+    return [Kpi({items:[[setCount,'set'],[list.length-setCount,'missing'],[list.length,'total']]}),Panel({title:'environment variables',children:h('div',{class:'fd-chips'},...list.map(k=>h('span',{key:k.key,onclick:()=>{const v=prompt('set '+k.key+' (empty to unset):');if(v==null)return;if(typeof h0.pi.env.set==='function'){h0.pi.env.set(k.key,v);}},class:'fd-chip-wrap'},Chip({tone:k.set?'ok':'miss',children:k.key+(k.set?' ✓':' ·')}))))})];
+}
+export async function tools(h0) {
+    const list=[...h0.pi.tools.values()]; const bySet=list.reduce((a,t)=>{(a[t.toolset||'core']=a[t.toolset||'core']||[]).push(t);return a;},{});
+    return [Kpi({items:[[list.length,'tools'],[Object.keys(bySet).length,'toolsets']]}), ...Object.entries(bySet).map(([ts,items])=>Panel({title:'toolset · '+ts,count:items.length,children:items.map(t=>Row({key:t.name,code:'⚒',title:t.name,sub:(t.description||(t.schema&&t.schema.description)||'').slice(0,80)}))}))];
+}
+export async function batch(h0) {
+    const out=h('div',{id:'fd-batch-out'});
+    return [Panel({title:'run batch',children:Form({fields:[{name:'prompts',kind:'textarea',placeholder:'one prompt per line',rows:6},{name:'concurrency',type:'number',value:'4'}],submit:'run',onSubmit:async ev=>{const prompts=ev.target.elements.prompts.value.split('\n').map(s=>s.trim()).filter(Boolean);if(!prompts.length)return;const root=document.getElementById('app');const node=root.querySelector('#fd-batch-out');if(node)node.textContent='running…';try{const r=await h0.pi.batch.run({prompts,concurrency:Number(ev.target.elements.concurrency.value)||4});if(node){const results=Array.isArray(r)?r:(r&&typeof r==='object'?Object.entries(r).map(([k,v])=>({prompt:k,result:v})):[]);const tbl=document.createElement('table');const thead=tbl.createTHead();const hr=thead.insertRow();['#','prompt','result','status'].forEach(ht=>{const th=document.createElement('th');th.textContent=ht;hr.appendChild(th);});const tbody=tbl.createTBody();results.forEach((item,i)=>{const row=tbody.insertRow();[i+1,(item.prompt||'').slice(0,60),(item.result||item.error||'').slice(0,120),item.error?'error':'ok'].forEach(v=>{const td=row.insertCell();td.textContent=String(v);});});node.innerHTML='';node.appendChild(tbl);}}catch(e){if(node)node.textContent='error: '+(e.message||e);}}})}),Panel({title:'results',children:out})];
+}
+export async function gateway(h0) {
+    const platforms=typeof h0.pi.gateway?.platforms==='function'?h0.pi.gateway.platforms():[];
+    const active=platforms.filter(p=>p.enabled);
+    return [Kpi({items:[[platforms.length,'platforms'],[active.length,'active']]}),Panel({title:'platforms',count:platforms.length,right:active.length>0?Chip({tone:'ok',children:active.length+' active'}):Chip({tone:'miss',children:'none active'}),children:platforms.length===0?EmptyState({text:'no platforms registered',glyph:'⇌'}):platforms.map(p=>Row({key:p.name,code:p.enabled?'●':'○',title:p.name,sub:p.note||'',meta:p.enabled?'enabled':''}))})];
+}
+export const FREDDIE_PAGES = { home, chat, sessions, projects, agents, analytics, models, cron, skills, config, env, tools, batch, gateway };

package/src/components.js

@@ -31,3 +31,16 @@ export {
     ConfirmDialog, PromptDialog,
     FilePreviewMedia, FilePreviewCode, FilePreviewText, FileViewer
 } from './components/files-modals.js';
+
+export {
+    ServerIcon, ServerRail,
+    ChannelItem, ChannelCategory,
+    VoiceUser, UserPanel, ChannelSidebar,
+    MemberItem, MemberList,
+    ChatHeader, VoiceStrip, CommunityShell
+} from './components/community.js';
+
+export {
+    home, chat, sessions, projects, agents, analytics, models, cron, skills, config, env, tools, batch, gateway,
+    skillLabel, getRecentPaths, saveRecentPath, renderChatMessages, FREDDIE_PAGES
+} from './components/freddie.js';

package/src/index.js

@@ -49,6 +49,7 @@ export {
 };
 export const h = webjsx.createElement;
 export const applyDiff = webjsx.applyDiff;
+export { FREDDIE_PAGES, home, chat, sessions, projects, agents, analytics, models, cron, skills, config, env, tools, batch, gateway, skillLabel, getRecentPaths, saveRecentPath, renderChatMessages } from './components.js';
 export default {
     webjsx, loadCss, scope, installStyles, mount, h, applyDiff,
     registerDeckStage, getDeckStage, components, motion, debug, mountKit,

package/src/web-components/freddie-chat.js

@@ -0,0 +1,34 @@
+import { DsChat, registerChatElement } from './ds-chat.js';
+import { register } from '../debug.js';
+
+let _stats = { mounts: 0, sends: 0 };
+
+class FreddieChat extends DsChat {
+    constructor() {
+        super();
+        this._title = 'freddie';
+        this._sub = '';
+        this._placeholder = 'message freddie · /tools · /tool name {json} · /run …';
+    }
+
+    connectedCallback() {
+        _stats.mounts += 1;
+        super.connectedCallback();
+    }
+}
+
+let _registered = false;
+export function registerFreddieChatElement() {
+    registerChatElement();
+    if (_registered) return;
+    if (!customElements.get('freddie-chat')) customElements.define('freddie-chat', FreddieChat);
+    _registered = true;
+}
+
+if (typeof window !== 'undefined' && typeof customElements !== 'undefined') {
+    registerFreddieChatElement();
+}
+
+register('freddie-chat', () => ({ registered: _registered, ..._stats, instances: document.querySelectorAll('freddie-chat').length }));
+
+export { FreddieChat };