portal-mojo 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.1",
+    "version": "0.2.3",
     "description": "React portal toolkit for django-mojo — typed client + params store, mission-control UI, dependency-free SVG charts, admin section bundles.",
     "type": "module",
     "license": "Apache-2.0",

package/src/admin/assistant/api.ts

@@ -1,7 +1,7 @@
+import type { FileReference } from '../../client/record-feed';
 import { mojoCall, mojoDelete, mojoList, type Params } from '../../client/runtime';
 import { projectConversation, projectConversationSummary, projectReply, projectSkill } from './data';
 import type { AssistantConversation, AssistantConversationSummary, AssistantReply, AssistantSkill } from './types';
-import type { FileReference } from '../../client/record-feed';
 
 const malformed = (label: string): never => { throw new Error(`${label} returned an invalid response`); };
 export async function sendAssistantMessage(message: string, conversationId?: number, attachments: readonly FileReference[] = []): Promise<AssistantReply> { const ids = attachments.map((file) => file.id); if (ids.length > 5 || new Set(ids).size !== ids.length || ids.some((id) => !Number.isSafeInteger(id) || id <= 0)) throw new Error('Assistant attachments must be 1–5 unique completed File references'); const body = await mojoCall('/api/assistant', { method: 'POST', body: { message, ...(conversationId != null ? { conversation_id: conversationId } : {}), ...(ids.length ? { attachments: ids } : {}) } }); return projectReply(body.data) ?? malformed('Assistant'); }

package/src/admin/assistant/pages.tsx

@@ -1,12 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import type { MemberLike } from '../../client/me';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { mojoList, useCan, useMe, useRealtime, useRealtimeStatus } from '../../client/runtime';
-import { Badge, fmt, modal, toast } from '../../ui';
-import { AssistantFeed } from './AssistantFeed';
-import { deleteAssistantConversation, deleteAssistantMemory, deleteAssistantSkill, getAssistantConversation, getAssistantMemory, getAssistantSkill, listAssistantConversations, listAssistantSkills, saveAssistantMemory, sendAssistantMessage } from './api';
-import type { AssistantConversation, AssistantConversationSummary, AssistantSkill } from './types';
 import type { FileReference } from '../../client/record-feed';
+import { memberHasPermission, mojoCall, mojoList, useCan, useMe, useRealtime, useRealtimeStatus } from '../../client/runtime';
+import { Badge, DetailView, FlatRow, fmt, modal } from '../../ui';
+import { AssistantFeed } from './AssistantFeed';
 import { ASSISTANT_PERMISSIONS } from './AssistantPanel';
+import { deleteAssistantMemory, getAssistantConversation, getAssistantMemory, getAssistantSkill, listAssistantConversations, listAssistantSkills, saveAssistantMemory, sendAssistantMessage } from './api';
+import { setAssistantSkillActive } from './skill-lifecycle';
 import { AssistantOutcomeUnknownError, chooseAssistantTransport, startAssistantRealtimeTurn, type AssistantRealtimeTurn } from './streaming';
+import type { AssistantConversation, AssistantConversationSummary, AssistantSkill } from './types';
 
 function PageState({ loading, error, retry }: { loading: boolean; error: string; retry(): void }) { if (loading) return <div className="panel panel-pad dim">Loading…</div>; if (error) return <div className="panel panel-pad"><div className="form-alert" role="alert">{error}</div><button type="button" className="btn" onClick={retry}>Retry</button></div>; return null; }
 function Heading({ eyebrow, title, description }: { eyebrow: string; title: string; description: string }) { return <header className="admin-page-heading"><div><div className="eyebrow">{eyebrow}</div><h1>{title}</h1><p>{description}</p></div></header>; }
@@ -49,30 +52,81 @@ function ConversationInspect({ id, close }: { id: number; close(): void }) {
             throw cause;
         } finally { stream.current = null; setResponding(false); }
     };
-    return <div className="modal-pad assistant-inspect"><header><div><div className="eyebrow">Conversation #{data.id}</div><h2>{data.title}</h2><p className="dim">Owner: {data.user.display_name} · updated {fmt.datetime(data.modified)}</p></div><button className="btn-icon" type="button" onClick={close} aria-label="Close"><i className="bi bi-x-lg" /></button></header><AssistantFeed messages={data.messages} user={{ id: me.id, display_name: me.display_name ?? 'You' }} onSend={send} responding={responding} disabled={!owner} attachmentKey={data.id} /></div>;
+    return <DetailView title={data.title} subtitle={`Conversation #${data.id} · ${data.user.display_name} · updated ${fmt.datetime(data.modified)}`} icon="bi-chat-dots" onClose={close} sections={[{ key: 'conversation', label: 'Conversation', icon: 'bi-chat-text', render: () => <AssistantFeed messages={data.messages} user={{ id: me.id, display_name: me.display_name ?? 'You' }} onSend={send} responding={responding} disabled={!owner} attachmentKey={data.id} /> }]} />;
 }
 
 export function ConversationsPage() {
-    const { data: me } = useMe(); const { can: isAdmin } = useCan('sys.view_admin'); const [rows, setRows] = useState<AssistantConversationSummary[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState('');
+    const { data: me } = useMe(); const [rows, setRows] = useState<AssistantConversationSummary[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState('');
     const load = useCallback(async () => { setLoading(true); setError(''); try { setRows((await listAssistantConversations()).rows); } catch (cause) { setError(cause instanceof Error ? cause.message : 'Conversations unavailable'); } finally { setLoading(false); } }, []);
     useEffect(() => { void load(); }, [load]);
     useEffect(() => { const refresh = () => { void load(); }; window.addEventListener('portal-mojo:assistant-list-refresh', refresh); return () => window.removeEventListener('portal-mojo:assistant-list-refresh', refresh); }, [load]);
-    const remove = async (row: AssistantConversationSummary) => { const confirmed = await modal.confirm({ title: 'Delete conversation?', message: `Delete “${row.title}”? This cannot be undone.`, confirmText: 'Delete', danger: true }); if (!confirmed) return; try { await deleteAssistantConversation(row.id); setRows((current) => current.filter((item) => item.id !== row.id)); toast.success('Conversation deleted'); } catch (cause) { toast.error(cause instanceof Error ? cause.message : 'Delete failed'); } };
-    return <div><Heading eyebrow="Assistant" title="Conversations" description="Inspect Assistant history. Only the owner may continue a conversation." /><PageState loading={loading} error={error} retry={() => void load()} />{!loading && !error && <div className="panel assistant-list"><table><thead><tr><th>Conversation</th><th>Owner</th><th>Updated</th><th /></tr></thead><tbody>{rows.map((row) => <tr key={row.id}><td><button className="link-button" type="button" onClick={() => void modal.detail((close) => <ConversationInspect id={row.id} close={() => close(null)} />)}>{row.title}</button><small>#{row.id}</small></td><td>{row.user.display_name}{row.user.id === me?.id && <Badge tone="info">You</Badge>}</td><td>{fmt.datetime(row.modified)}</td><td><button className="btn-icon" type="button" aria-label={`Delete ${row.title}`} disabled={!isAdmin && row.user.id !== me?.id} onClick={() => void remove(row)}><i className="bi bi-trash" /></button></td></tr>)}</tbody></table>{rows.length === 0 && <p className="empty">No conversations.</p>}</div>}</div>;
+
+    return <div><Heading eyebrow="Assistant" title="Conversations" description="Inspect Assistant history. Only the owner may continue a conversation." /><PageState loading={loading} error={error} retry={() => void load()} />{!loading && !error && <div className="panel assistant-list"><table><thead><tr><th>Conversation</th><th>Owner</th><th>Updated</th><th /></tr></thead><tbody>{rows.map((row) => <tr key={row.id}><td><button className="link-button" type="button" onClick={() => void modal.detail((close) => <ConversationInspect id={row.id} close={() => close(null)} />)}>{row.title}</button><small>#{row.id}</small></td><td>{row.user.display_name}{row.user.id === me?.id && <Badge tone="info">You</Badge>}</td><td>{fmt.datetime(row.modified)}</td></tr>)}</tbody></table>{rows.length === 0 && <p className="empty">No conversations.</p>}</div>}</div>;
 }
 
-function SkillInspect({ id, close }: { id: number; close(): void }) { const [skill, setSkill] = useState<AssistantSkill | null>(null); const [error, setError] = useState(''); useEffect(() => { void getAssistantSkill(id).then(setSkill, (cause) => setError(cause instanceof Error ? cause.message : 'Skill unavailable')); }, [id]); return <div className="modal-pad assistant-skill-detail"><header><h2>{skill?.name ?? 'Skill'}</h2><button className="btn-icon" onClick={close} aria-label="Close"><i className="bi bi-x-lg" /></button></header>{error ? <div className="form-alert">{error}</div> : !skill ? <p className="dim">Loading…</p> : <><p>{skill.description || 'No description.'}</p><dl><div><dt>Tier</dt><dd>{skill.tier}</dd></div><div><dt>Active</dt><dd>{skill.is_active ? 'Yes' : 'No'}</dd></div><div><dt>Auto execute</dt><dd>{skill.auto_execute ? 'Yes' : 'No'}</dd></div></dl><h3>Triggers</h3>{skill.triggers.length ? <ul>{skill.triggers.map((trigger) => <li key={trigger}>{trigger}</li>)}</ul> : <p className="dim">No triggers.</p>}<h3>Steps</h3>{skill.steps.length ? <ol>{skill.steps.map((step, index) => <li key={index}><code>{JSON.stringify(step)}</code></li>)}</ol> : <p className="dim">No steps.</p>}</>}</div>; }
+function SkillInspect({ id, close }: { id: number; close(): void }) {
+    const [skill, setSkill] = useState<AssistantSkill | null>(null);
+    const [error, setError] = useState(''); const [busy, setBusy] = useState(false);
+    const canManage = useCan('sys.view_admin').can;
+    useEffect(() => { void getAssistantSkill(id).then(setSkill, cause => setError(cause instanceof Error ? cause.message : 'Skill unavailable')); }, [id]);
+    const toggle = async (next: boolean) => { if (!canManage || busy) return; setBusy(true); setError(''); try { setSkill(await setAssistantSkillActive(id, next)); } catch (cause) { setError(cause instanceof Error ? cause.message : 'State change failed'); } finally { setBusy(false); } };
+    return <DetailView title={skill?.name ?? 'Skill'} subtitle={skill?.description || `Skill #${id}`} icon="bi-stars" onClose={close}
+        active={canManage && skill ? { value: skill.is_active, disabled: busy, onChange: next => void toggle(next) } : undefined}
+        contextMenu={canManage && skill ? [{ label: skill.is_active ? 'Deactivate' : 'Reactivate', disabled: busy, onSelect: () => void toggle(!skill.is_active) }] : []}
+        sections={[{ key: 'overview', label: 'Overview', icon: 'bi-info-circle', render: () => <div className="detail-section">{error && <div className="form-alert">{error}</div>}{skill ? <><FlatRow label="Tier">{skill.tier}</FlatRow><FlatRow label="Active">{skill.is_active ? 'Yes' : 'No'}</FlatRow><FlatRow label="Auto execute">{skill.auto_execute ? 'Yes' : 'No'}</FlatRow><h3>Triggers</h3><ul>{skill.triggers.map(trigger => <li key={trigger}>{trigger}</li>)}</ul><h3>Steps</h3><ol>{skill.steps.map((step, index) => <li key={index}><code>{JSON.stringify(step)}</code></li>)}</ol></> : <p>Loading…</p>}</div> }]} />;
+}
 
-export function SkillsPage() { const [rows, setRows] = useState<AssistantSkill[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(''); const load = useCallback(async () => { setLoading(true); setError(''); try { setRows((await listAssistantSkills()).rows); } catch (cause) { setError(cause instanceof Error ? cause.message : 'Skills unavailable'); } finally { setLoading(false); } }, []); useEffect(() => { void load(); }, [load]); const remove = async (row: AssistantSkill) => { const confirmed = await modal.confirm({ title: 'Delete skill?', message: `Delete “${row.name}”?`, confirmText: 'Delete', danger: true }); if (!confirmed) return; try { await deleteAssistantSkill(row.id); setRows((current) => current.filter((item) => item.id !== row.id)); toast.success('Skill deleted'); } catch (cause) { toast.error(cause instanceof Error ? cause.message : 'Delete failed'); } }; return <div><Heading eyebrow="Assistant" title="Skills" description="Inspect the bounded skill catalog exposed by django-mojo." /><PageState loading={loading} error={error} retry={() => void load()} />{!loading && !error && <div className="panel assistant-list"><table><thead><tr><th>Skill</th><th>Tier</th><th>Status</th><th /></tr></thead><tbody>{rows.map((row) => <tr key={row.id}><td><button className="link-button" onClick={() => void modal.detail((close) => <SkillInspect id={row.id} close={() => close(null)} />)}>{row.name}</button><small>{row.description}</small></td><td>{row.tier}</td><td><Badge tone={row.is_active ? 'success' : 'muted'}>{row.is_active ? 'Active' : 'Inactive'}</Badge></td><td><button className="btn-icon" aria-label={`Delete ${row.name}`} onClick={() => void remove(row)}><i className="bi bi-trash" /></button></td></tr>)}</tbody></table>{rows.length === 0 && <p className="empty">No skills.</p>}</div>}</div>; }
+export function SkillsPage() {
+    const [rows, setRows] = useState<AssistantSkill[]>([]); const [loading, setLoading] = useState(true); const [error, setError] = useState('');
+    const load = useCallback(async () => { setLoading(true); setError(''); try { setRows((await listAssistantSkills()).rows); } catch (cause) { setError(cause instanceof Error ? cause.message : 'Skills unavailable'); } finally { setLoading(false); } }, []);
+    useEffect(() => { void load(); }, [load]);
+    return <div><Heading eyebrow="Assistant" title="Skills" description="Inspect and manage the skill catalog without removing its history." /><PageState loading={loading} error={error} retry={() => void load()} />{!loading && !error && <div className="panel assistant-list"><table><thead><tr><th>Skill</th><th>Tier</th><th>Status</th></tr></thead><tbody>{rows.map(row => <tr key={row.id}><td><button className="link-button" onClick={() => void modal.detail(close => <SkillInspect id={row.id} close={() => { close(null); void load(); }} />)}>{row.name}</button><small>{row.description}</small></td><td>{row.tier}</td><td><Badge tone={row.is_active ? 'success' : 'muted'}>{row.is_active ? 'Active' : 'Inactive'}</Badge></td></tr>)}</tbody></table>{rows.length === 0 && <p className="empty">No skills.</p>}</div>}</div>;
+}
 
 interface GroupChoice { id: number; name: string }
 type MemoryTier = 'global' | 'user' | 'group';
 export function MemoriesPage() {
-    const [tier, setTier] = useState<MemoryTier>('user'); const [groups, setGroups] = useState<GroupChoice[]>([]); const [group, setGroup] = useState<number | null>(null); const [entries, setEntries] = useState<Record<string, unknown>>({}); const [key, setKey] = useState(''); const [value, setValue] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState('');
-    useEffect(() => { void mojoList<GroupChoice>('/api/group', { start: 0, size: 50, sort: 'name' }).then((page) => { setGroups(page.rows.map((row) => ({ id: Number(row.id), name: String(row.name) }))); setGroup((current) => current ?? page.rows[0]?.id ?? null); }, () => setGroups([])); }, []);
-    const load = useCallback(async () => { if (tier === 'group' && group == null) { setEntries({}); return; } setLoading(true); setError(''); try { setEntries(await getAssistantMemory(tier, tier === 'group' ? group! : undefined)); } catch (cause) { setError(cause instanceof Error ? cause.message : 'Memory unavailable'); } finally { setLoading(false); } }, [tier, group]); useEffect(() => { void load(); }, [load]);
+    const { can: systemAllowed, me } = useCan('sys.assistant');
+    const [tier, setTier] = useState<MemoryTier>('user');
+    const [groups, setGroups] = useState<GroupChoice[]>([]); const [group, setGroup] = useState<number | null>(null);
+    const [entries, setEntries] = useState<Record<string, unknown>>({}); const [key, setKey] = useState(''); const [value, setValue] = useState('');
+    const [loading, setLoading] = useState(false); const [busy, setBusy] = useState(false); const [error, setError] = useState('');
+    const member = useQuery({ queryKey: ['assistant-memory-member', me?.id, group], enabled: systemAllowed && tier === 'group' && group != null && !me?.is_superuser, queryFn: async () => (await mojoCall(`/api/group/${group}/member`)).data as MemberLike });
+    const canManage = systemAllowed && (tier !== 'group' || group != null && (Boolean(me?.is_superuser) || memberHasPermission(member.data ?? null, 'assistant')));
+    const scopeKey = `${me?.id}:${tier}:${group ?? ''}`;
+    const scope = useRef({ key: scopeKey, allowed: canManage, mounted: true }); scope.current.key = scopeKey; scope.current.allowed = canManage;
+    const generation = useRef(0); const lock = useRef(false);
+    useEffect(() => { scope.current.mounted = true; return () => { scope.current.mounted = false; generation.current++; }; }, []);
+    useEffect(() => { if (!systemAllowed) { setGroups([]); return; } let cancelled = false; void mojoList<GroupChoice>('/api/group', { start: 0, size: 50, sort: 'name' }).then(page => { if (!cancelled) setGroups(page.rows.map(row => ({ id: Number(row.id), name: String(row.name) }))); }, () => { if (!cancelled) setGroups([]); }); return () => { cancelled = true; }; }, [systemAllowed]);
+    const load = useCallback(async () => {
+        const request = ++generation.current; const captured = scopeKey;
+        setEntries({}); setError('');
+        if (!systemAllowed || tier === 'group' && group == null) { setLoading(false); return; }
+        setLoading(true);
+        try { const next = await getAssistantMemory(tier, tier === 'group' ? group! : undefined); if (scope.current.mounted && request === generation.current && scope.current.key === captured) setEntries(next); }
+        catch (cause) { if (scope.current.mounted && request === generation.current && scope.current.key === captured) setError(cause instanceof Error ? cause.message : 'Memory unavailable'); }
+        finally { if (scope.current.mounted && request === generation.current && scope.current.key === captured) setLoading(false); }
+    }, [scopeKey, systemAllowed, tier, group]);
+    useEffect(() => { void load(); }, [load]);
     const validKey = /^[a-z0-9:_-]{1,64}$/.test(key); const validValue = value.length > 0 && value.length <= 500;
-    const save = async () => { if (!validKey || !validValue || (tier === 'group' && group == null)) return; try { await saveAssistantMemory(tier, key, value, tier === 'group' ? group! : undefined); setKey(''); setValue(''); await load(); toast.success('Memory saved'); } catch (cause) { setError(cause instanceof Error ? cause.message : 'Save failed'); } };
-    const remove = async (entryKey: string) => { const confirmed = await modal.confirm({ title: 'Delete memory?', message: `Delete “${entryKey}” from ${tier} memory?`, confirmText: 'Delete', danger: true }); if (!confirmed) return; try { await deleteAssistantMemory(tier, entryKey, tier === 'group' ? group! : undefined); await load(); } catch (cause) { setError(cause instanceof Error ? cause.message : 'Delete failed'); } };
-    return <div><Heading eyebrow="Assistant" title="Memory" description="Manage global, personal, or explicitly selected group memory without ambient group state." /><div className="panel panel-pad assistant-memory-controls"><div className="seg">{(['global', 'user', 'group'] as MemoryTier[]).map((item) => <button key={item} className={`seg-btn${tier === item ? ' seg-active' : ''}`} onClick={() => setTier(item)}>{item}</button>)}</div>{tier === 'group' && <label className="field"><span className="field-label">Group (bounded first 50)</span><select className="input" value={group ?? ''} onChange={(event) => setGroup(event.target.value ? Number(event.target.value) : null)}><option value="">Choose a group</option>{groups.map((item) => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}<div className="assistant-memory-form"><label className="field"><span className="field-label">Key</span><input className="input" maxLength={64} value={key} onChange={(event) => setKey(event.target.value)} placeholder="lowercase:key" /></label><label className="field"><span className="field-label">Value</span><textarea className="input" maxLength={500} rows={2} value={value} onChange={(event) => setValue(event.target.value)} /></label><button className="btn btn-primary" disabled={!validKey || !validValue || loading || (tier === 'group' && group == null)} onClick={() => void save()}>Save</button></div>{key && !validKey && <p className="field-error">Use 1–64 lowercase letters, numbers, colon, underscore, or hyphen.</p>}{error && <div className="form-alert" role="alert">{error}</div>}</div><div className="panel assistant-list">{loading ? <p className="empty">Loading…</p> : Object.entries(entries).length ? <table><thead><tr><th>Key</th><th>Value</th><th /></tr></thead><tbody>{Object.entries(entries).slice(0, 100).map(([entryKey, entryValue]) => <tr key={entryKey}><td><code>{entryKey}</code></td><td>{String(entryValue).slice(0, 500)}</td><td><button className="btn-icon" aria-label={`Delete ${entryKey}`} onClick={() => void remove(entryKey)}><i className="bi bi-trash" /></button></td></tr>)}</tbody></table> : <p className="empty">No {tier} memory.</p>}</div></div>;
+    const mutate = async (operation: () => Promise<void>, captured: string) => {
+        if (lock.current || !scope.current.mounted || !scope.current.allowed || scope.current.key !== captured) return;
+        lock.current = true; setBusy(true); setError('');
+        try { await operation(); if (scope.current.mounted && scope.current.key === captured) await load(); }
+        catch (cause) { if (scope.current.mounted && scope.current.key === captured) setError(cause instanceof Error ? cause.message : 'Memory change failed'); }
+        finally { lock.current = false; if (scope.current.mounted) setBusy(false); }
+    };
+    const save = async () => { if (!validKey || !validValue) return; await mutate(() => saveAssistantMemory(tier, key, value, tier === 'group' ? group! : undefined), scopeKey); };
+    const remove = async (entryKey: string) => {
+        const frozen = { tier, group: tier === 'group' ? group! : undefined, key: scopeKey };
+        if (!canManage) return;
+        const confirmed = await modal.confirm({ title: 'Remove memory key?', message: `Remove “${entryKey}” from ${frozen.tier} memory${frozen.group == null ? '' : ` for group #${frozen.group} (${groups.find(item => item.id === frozen.group)?.name ?? 'Unknown'})`}? The previous value cannot be restored by this action.`, confirmText: 'Remove key', danger: true });
+        if (confirmed) await mutate(() => deleteAssistantMemory(frozen.tier, entryKey, frozen.group), frozen.key);
+    };
+    return <div><Heading eyebrow="Assistant" title="Memory" description="Manage global, personal, or explicitly selected group memory without ambient group state." />
+        <div className="panel panel-pad assistant-memory-controls"><div className="seg">{(['global', 'user', 'group'] as MemoryTier[]).map(item => <button key={item} disabled={busy} className={`seg-btn${tier === item ? ' seg-active' : ''}`} onClick={() => setTier(item)}>{item}</button>)}</div>
+        {tier === 'group' && <label className="field"><span className="field-label">Group (bounded first 50)</span><select className="input" value={group ?? ''} disabled={busy} onChange={event => setGroup(event.target.value ? Number(event.target.value) : null)}><option value="">Choose a group</option>{groups.map(item => <option key={item.id} value={item.id}>{item.name}</option>)}</select></label>}
+        {!canManage && <p className="dim">Memory editing requires system Assistant permission and, for a selected group, inherited member Assistant authority or superuser access.</p>}
+        <div className="assistant-memory-form"><label className="field"><span className="field-label">Key</span><input className="input" disabled={!canManage || busy} maxLength={64} value={key} onChange={event => setKey(event.target.value)} placeholder="lowercase:key" /></label><label className="field"><span className="field-label">Value</span><textarea className="input" disabled={!canManage || busy} maxLength={500} rows={2} value={value} onChange={event => setValue(event.target.value)} /></label><button className="btn btn-primary" disabled={!canManage || busy || !validKey || !validValue || loading} onClick={() => void save()}>Save</button></div>{error && <div className="form-alert" role="alert">{error}</div>}</div>
+        <div className="panel assistant-list">{loading ? <p className="empty">Loading…</p> : Object.entries(entries).length ? <table><thead><tr><th>Key</th><th>Value</th><th /></tr></thead><tbody>{Object.entries(entries).slice(0, 100).map(([entryKey, entryValue]) => <tr key={entryKey}><td><code>{entryKey}</code></td><td>{String(entryValue).slice(0, 500)}</td><td>{canManage && <button className="btn-icon" disabled={busy} aria-label={`Remove ${entryKey}`} onClick={() => void remove(entryKey)}><i className="bi bi-trash" /></button>}</td></tr>)}</tbody></table> : <p className="empty">No {tier} memory.</p>}</div></div>;
 }

package/src/admin/assistant/skill-lifecycle.ts

@@ -0,0 +1,9 @@
+import { mojoCall } from '../../client/runtime';
+import { getAssistantSkill } from './api';
+import type { AssistantSkill } from './types';
+
+/** Lifecycle writes use existing REST save; conversation history is never removed. */
+export async function setAssistantSkillActive(id: number, isActive: boolean): Promise<AssistantSkill> {
+    await mojoCall(`/api/assistant/skill/${id}`, { method: 'POST', body: { is_active: isActive } });
+    return getAssistantSkill(id);
+}

package/src/admin/core/index.ts

@@ -55,7 +55,8 @@ export interface AdminSection {
     icon: string;
     permissions: string[];
     capability?: string;
-    navigationGroup?: AdminNavigationGroup;
+    /** Set to null to keep this section's routes at the top level of a grouped menu. */
+    navigationGroup?: AdminNavigationGroup | null;
     routes: AdminRoute[];
 }
 
@@ -202,13 +203,17 @@ export function adminSectionsMenu(sections: readonly AdminSection[], opts: {
     if (opts.grouped) {
         const groups = new Map<AdminNavigationGroup, MenuItem[]>();
         for (const section of sections) {
-            const group = section.navigationGroup ?? 'other';
             const base = relativePath(mount, section.basePath ?? section.id);
             const labeled = section.routes.filter((route) => route.label);
             const destinations: MenuItem[] = labeled.length > 0 ? labeled.map((route) => ({
                 id: `admin:${section.id}:${route.path || 'index'}`, label: route.label!, keywords: [section.title],
                 route: absolutePath(base, route.path), permissionClauses: [section.permissions, ...(route.permissions ? [route.permissions] : [])],
             })) : [{ id: `admin:${section.id}`, label: section.title, keywords: [section.title], route: absolutePath(base), permissionClauses: [section.permissions] }];
+            if (section.navigationGroup === null) {
+                items.push(...destinations.map((destination) => ({ ...destination, icon: section.icon })));
+                continue;
+            }
+            const group = section.navigationGroup ?? 'other';
             groups.set(group, [...(groups.get(group) ?? []), ...destinations]);
         }
         for (const [group, children] of [...groups.entries()].sort((a, b) => ADMIN_NAVIGATION_GROUPS[a[0]].order - ADMIN_NAVIGATION_GROUPS[b[0]].order)) {

package/src/admin/credentials/group-api-keys.tsx

@@ -1,23 +1,45 @@
-import { useContext, useSyncExternalStore } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useContext, useSyncExternalStore } from 'react';
 import {
-    GroupContext, hasPermission, useCan, useMe,
+    GroupContext,
+    hasPermission,
+    useCan,
+    useMe,
     type PermSpec,
 } from '../../client/runtime';
 import {
-    ArmedButton, Badge, DetailView, Eyebrow, FlatRow, ModelTable,
-    SchemaForm, fmt, modal, toast,
-    type Column, type Field, type FilterDef,
+    Badge,
+    DetailView,
+    Eyebrow,
+    FlatRow,
+    ModelTable,
+    SchemaForm,
+    fmt,
+    modal,
+    toast,
+    type Column,
+    type Field,
+    type FilterDef,
 } from '../../ui';
+import { ApiKeyLimitsSummary, ApiKeyRateLimitsEditor } from './api-key-rate-limits';
 import {
-    GLOBAL_CREDENTIAL_PERMS, GROUP_CREDENTIAL_PERMS,
-    GroupApiKeyModel, fetchApiKeyToken,
-    getGroupApiKeyPermissions, grantedPermissions,
-    groupApiKeyPermissionsVersion, subscribeGroupApiKeyPermissions,
-    readApiKeyRateLimits, useCreateGroupApiKey,
-    type ApiKeyPermissionDef, type CredentialGroup, type GroupApiKeyRow,
+    GLOBAL_CREDENTIAL_PERMS,
+    GROUP_CREDENTIAL_PERMS,
+    GroupApiKeyModel,
+    buildApiKeyPermissionChanges,
+    customApiKeyPermissionNames,
+    fetchApiKeyToken,
+    getGroupApiKeyPermissions,
+    grantedPermissions,
+    groupApiKeyPermissionsVersion,
+    normalizeApiKeyPermissionNames,
+    readApiKeyRateLimits,
+    subscribeGroupApiKeyPermissions,
+    useCreateGroupApiKey,
+    type ApiKeyPermissionDef,
+    type CredentialGroup,
+    type GroupApiKeyRow,
 } from './models';
-import { ApiKeyLimitsSummary, ApiKeyRateLimitsEditor } from './api-key-rate-limits';
 import { showSecretDialog } from './secret-dialog';
 
 function groupLabel(group: GroupApiKeyRow['group']): string {
@@ -60,6 +82,14 @@ function permissionSeed(
     ]));
 }
 
+const CUSTOM_PERMISSION_FIELD: Field = {
+    name: 'custom_permissions',
+    type: 'tags',
+    label: 'Additional permission names',
+    placeholder: 'Type a permission and press Enter',
+    help: 'Add permission strings that are not listed above. Remove a tag to revoke it when editing; the server authorizes every change.',
+};
+
 function TokenFooter({ permissions }: { permissions: string[] }) {
     return (
         <div className="ga-secret-footnote">
@@ -86,7 +116,7 @@ function useGroupApiKeyActions(permission: PermSpec) {
     const renderedPermissions = useRenderedPermissions();
     const create = useCreateGroupApiKey();
     const save = GroupApiKeyModel.useSave();
-    const destroy = GroupApiKeyModel.useDelete();
+
     const { can } = useCan(permission);
 
     const createKey = async (fixedGroup?: CredentialGroup) => {
@@ -106,6 +136,7 @@ function useGroupApiKeyActions(permission: PermSpec) {
                             placeholder: 'Search groups…',
                         } satisfies Field] : []),
                         ...permissionFields(renderedPermissions),
+                        CUSTOM_PERMISSION_FIELD,
                     ]}
                     submitText="Create key"
                     onCancel={() => close(null)}
@@ -116,8 +147,16 @@ function useGroupApiKeyActions(permission: PermSpec) {
         if (!result) return;
 
         const permissions: Record<string, true> = {};
-        for (const def of renderedPermissions) {
-            if (result[`permissions.${def.name}`] === true) permissions[def.name] = true;
+        try {
+            for (const def of renderedPermissions) {
+                if (result[`permissions.${def.name}`] === true) permissions[def.name] = true;
+            }
+            for (const name of normalizeApiKeyPermissionNames(result.custom_permissions)) {
+                permissions[name] = true;
+            }
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Invalid permission name');
+            return;
         }
         const group = fixedGroup?.id ?? Number(result.group);
         if (!Number.isFinite(group) || group <= 0) {
@@ -162,8 +201,14 @@ function useGroupApiKeyActions(permission: PermSpec) {
                         { name: 'name', type: 'text', label: 'Name', required: true, columns: 6 },
                         { name: 'is_active', type: 'switch', label: 'Active', columns: 6 },
                         ...renderedFields,
+                        CUSTOM_PERMISSION_FIELD,
                     ]}
-                    initial={{ name: row.name, is_active: row.is_active, ...before }}
+                    initial={{
+                        name: row.name,
+                        is_active: row.is_active,
+                        ...before,
+                        custom_permissions: customApiKeyPermissionNames(row.permissions).join(','),
+                    }}
                     submitText="Save changes"
                     onCancel={() => close(null)}
                     onSubmit={(form) => close(form)}
@@ -178,14 +223,20 @@ function useGroupApiKeyActions(permission: PermSpec) {
         const nextActive = result.is_active === true;
         if (nextActive !== row.is_active) changes.is_active = nextActive;
 
-        // Diff only controls that were actually rendered. Unknown and
-        // protected grants remain absent from the partial JSONField update.
-        const permissionChanges: Record<string, boolean> = {};
-        for (const def of renderedPermissions) {
-            const key = `permissions.${def.name}`;
-            const was = before[key] === true;
-            const now = result[key] === true;
-            if (was !== now) permissionChanges[def.name] = now;
+        // Diff only guided controls that were actually rendered, plus the
+        // explicit freeform set. Protected hidden grants remain absent unless
+        // the operator deliberately types one (the server is authoritative).
+        let permissionChanges: Record<string, boolean>;
+        try {
+            permissionChanges = buildApiKeyPermissionChanges(
+                row.permissions,
+                renderedPermissions,
+                result,
+                result.custom_permissions,
+            );
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Invalid permission name');
+            return;
         }
         if (Object.keys(permissionChanges).length) changes.permissions = permissionChanges;
         if (!Object.keys(changes).length) return;
@@ -214,19 +265,19 @@ function useGroupApiKeyActions(permission: PermSpec) {
         }
     };
 
-    const deleteKey = async (row: GroupApiKeyRow) => {
+    const toggleKey = async (row: GroupApiKeyRow) => {
         if (!can) return false;
         try {
-            await destroy.mutateAsync({ id: row.id });
-            toast.success('API key deleted');
+            await save.mutateAsync({ id: row.id, changes: { is_active: !row.is_active } });
+            toast.success(row.is_active ? 'API key deactivated' : 'API key reactivated');
             return true;
         } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Failed to delete API key');
+            toast.error(error instanceof Error ? error.message : 'Failed to update API key');
             return false;
         }
     };
 
-    return { canManage: can, createKey, editKey, revealToken, deleteKey };
+    return { canManage: can, createKey, editKey, revealToken, toggleKey, pending: save.isPending };
 }
 
 function ApiKeyCard({ row, actions }: {
@@ -269,13 +320,7 @@ function ApiKeyCard({ row, actions }: {
                     <button className="btn btn-compact" title="Reveal the current token" onClick={() => void actions.revealToken(row)}>
                         <i className="bi bi-eye" /> Token
                     </button>
-                    <ArmedButton
-                        className="btn-compact"
-                        label={<i className="bi bi-trash" aria-label="Delete this key" />}
-                        armedLabel="Click again — services using this key lose access"
-                        title="Delete this key"
-                        onConfirm={async () => { await actions.deleteKey(row); }}
-                    />
+                    <button className="btn btn-compact" disabled={actions.pending} onClick={() => void actions.toggleKey(row)}>{row.is_active ? 'Deactivate' : 'Reactivate'}</button>
                 </div>
             )}
         </div>
@@ -339,6 +384,12 @@ function AuthorizedGroupApiKeyDetail({ id, onClose }: { id: number; onClose: ()
                 { text: `${permissions.length} grants`, tone: 'info' },
                 limitsChip,
             ]}
+            active={actions.canManage ? { value: row.is_active, disabled: actions.pending, onChange: () => void actions.toggleKey(row) } : undefined}
+            contextMenu={actions.canManage ? [
+                { label: 'Edit key', onSelect: () => void actions.editKey(row) },
+                { label: 'Reveal audited token', onSelect: () => void actions.revealToken(row) },
+                { label: row.is_active ? 'Deactivate' : 'Reactivate', disabled: actions.pending, onSelect: () => void actions.toggleKey(row) },
+            ] : []}
             sections={[
                 {
                     key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
@@ -348,24 +399,7 @@ function AuthorizedGroupApiKeyDetail({ id, onClose }: { id: number; onClose: ()
                             <FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow>
                             <FlatRow label="Last used">{fmt.relative(row.last_used, 'never')}</FlatRow>
                             <FlatRow label="Expires">{row.expires_at ? fmt.datetime(row.expires_at) : 'Never'}</FlatRow>
-                            {actions.canManage && (
-                                <div className="ga-toolbar" style={{ marginTop: 16 }}>
-                                    <button className="btn btn-compact" onClick={() => void actions.editKey(row)}>
-                                        <i className="bi bi-pencil" /> Edit
-                                    </button>
-                                    <button className="btn btn-compact" onClick={() => void actions.revealToken(row)}>
-                                        <i className="bi bi-eye" /> Reveal audited token
-                                    </button>
-                                    <ArmedButton
-                                        className="btn-compact"
-                                        label="Delete"
-                                        armedLabel="Click again — delete now"
-                                        onConfirm={async () => {
-                                            if (await actions.deleteKey(row)) onClose();
-                                        }}
-                                    />
-                                </div>
-                            )}
+
                         </>
                     ),
                 },
@@ -378,7 +412,9 @@ function AuthorizedGroupApiKeyDetail({ id, onClose }: { id: number; onClose: ()
                                     ? permissions.map((permission) => <Badge key={permission} tone="info">{permission}</Badge>)
                                     : <span className="dim-italic">No permissions granted</span>}
                             </div>
-                            <p className="dim">Only controls visible to the operator are diffed when editing; unknown grants are preserved.</p>
+                            <p className="dim">
+                                Use Edit to add or remove arbitrary permission names. Hidden protected controls are never changed implicitly.
+                            </p>
                         </>
                     ),
                 },

package/src/admin/credentials/models.ts

@@ -329,6 +329,16 @@ registerGroupApiKeyPermissions([
     { name: 'view_members', label: 'View Members' },
     { name: 'manage_members', label: 'Manage Members' },
     { name: 'view_billing', label: 'View Billing' },
+    {
+        name: 'send_sms',
+        label: 'Send SMS',
+        tooltip: 'Send outbound SMS messages for this key\'s group.',
+    },
+    {
+        name: 'comms',
+        label: 'Communications',
+        tooltip: 'Broad communications access, including SMS. Prefer Send SMS when that is all the integration needs.',
+    },
     {
         name: 'geoip_sync',
         label: 'GeoIP Federation Sync',
@@ -344,6 +354,60 @@ export function grantedPermissions(dict: Record<string, unknown> | null | undefi
         .map(([name]) => name);
 }
 
+/** TagInput CSV or array to unique permission names. */
+export function normalizeApiKeyPermissionNames(raw: unknown): string[] {
+    const values = Array.isArray(raw) ? raw : typeof raw === 'string' ? raw.split(',') : [];
+    const names: string[] = [];
+    for (const value of values) {
+        let name = String(value ?? '').trim();
+        if (name.startsWith('permissions.')) name = name.slice('permissions.'.length).trim();
+        if (!name) continue;
+        if (name === '__replace') {
+            throw new Error('Permission "__replace" is reserved and cannot be granted.');
+        }
+        if (!names.includes(name)) names.push(name);
+    }
+    return names;
+}
+
+/** Truthy stored grants that have no registered guided control. */
+export function customApiKeyPermissionNames(
+    dict: Record<string, unknown> | null | undefined,
+): string[] {
+    const registered = new Set(getGroupApiKeyPermissions().map((permission) => permission.name));
+    return grantedPermissions(dict).filter((name) => !registered.has(name)).sort();
+}
+
+/**
+ * Build a merge-safe permissions patch from rendered switches and freeform
+ * tags. Only rendered switches are diffed, so protected controls hidden from
+ * this operator remain untouched. Missing previously-custom tags are revoked.
+ */
+export function buildApiKeyPermissionChanges(
+    current: Record<string, unknown> | null | undefined,
+    rendered: ApiKeyPermissionDef[],
+    form: Record<string, unknown>,
+    customRaw: unknown,
+): Record<string, boolean> {
+    const currentGranted = new Set(grantedPermissions(current));
+    const changes: Record<string, boolean> = {};
+
+    for (const permission of rendered) {
+        const next = form[`permissions.${permission.name}`] === true;
+        if (currentGranted.has(permission.name) !== next) changes[permission.name] = next;
+    }
+
+    const beforeCustom = new Set(customApiKeyPermissionNames(current));
+    const afterCustom = normalizeApiKeyPermissionNames(customRaw);
+    for (const name of afterCustom) {
+        if (!currentGranted.has(name)) changes[name] = true;
+    }
+    for (const name of beforeCustom) {
+        if (!afterCustom.includes(name)) changes[name] = false;
+    }
+    return changes;
+}
+
 export interface WebhookSubscriptionRow {
     id: number;
     created: number;