portal-mojo 0.2.2 → 0.2.3

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,24 +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, buildApiKeyPermissionChanges, customApiKeyPermissionNames,
+    GLOBAL_CREDENTIAL_PERMS,
+    GROUP_CREDENTIAL_PERMS,
+    GroupApiKeyModel,
+    buildApiKeyPermissionChanges,
+    customApiKeyPermissionNames,
     fetchApiKeyToken,
-    getGroupApiKeyPermissions, grantedPermissions,
-    groupApiKeyPermissionsVersion, subscribeGroupApiKeyPermissions,
-    normalizeApiKeyPermissionNames, readApiKeyRateLimits, useCreateGroupApiKey,
-    type ApiKeyPermissionDef, type CredentialGroup, type GroupApiKeyRow,
+    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 {
@@ -95,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) => {
@@ -244,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 }: {
@@ -299,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>
@@ -369,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: () => (
@@ -378,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>
-                            )}
+
                         </>
                     ),
                 },

package/src/admin/credentials/webhook-subscriptions.tsx

@@ -1,15 +1,29 @@
-import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
 import { useCan, 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 {
-    GLOBAL_CREDENTIAL_PERMS, GROUP_CREDENTIAL_PERMS,
-    WebhookSubscriptionModel, fetchWebhookSecret, normalizeWebhookEvents,
-    type CredentialGroup, type WebhookSecretInfo, type WebhookSubscriptionRow,
+    GLOBAL_CREDENTIAL_PERMS,
+    GROUP_CREDENTIAL_PERMS,
+    WebhookSubscriptionModel,
+    fetchWebhookSecret,
+    normalizeWebhookEvents,
+    type CredentialGroup,
+    type WebhookSecretInfo,
+    type WebhookSubscriptionRow,
 } from './models';
 import { showSecretDialog } from './secret-dialog';
 
@@ -123,7 +137,7 @@ const WEBHOOK_FIELDS: Field[] = [
 
 function useWebhookActions(permission: PermSpec) {
     const save = WebhookSubscriptionModel.useSave();
-    const destroy = WebhookSubscriptionModel.useDelete();
+
     const { can } = useCan(permission);
 
     const createSubscription = async (fixedGroup?: CredentialGroup) => {
@@ -209,19 +223,9 @@ function useWebhookActions(permission: PermSpec) {
         }
     };
 
-    const deleteSubscription = async (row: WebhookSubscriptionRow) => {
-        if (!can) return false;
-        try {
-            await destroy.mutateAsync({ id: row.id });
-            toast.success('Webhook subscription deleted');
-            return true;
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Failed to delete subscription');
-            return false;
-        }
-    };
 
-    return { canManage: can, createSubscription, editSubscription, toggleSubscription, deleteSubscription };
+
+    return { canManage: can, createSubscription, editSubscription, toggleSubscription, pending: save.isPending };
 }
 
 function WebhookCard({ row, actions }: {
@@ -271,13 +275,7 @@ function WebhookCard({ row, actions }: {
                             }}
                         />
                     </label>
-                    <ArmedButton
-                        className="btn-compact"
-                        label={<i className="bi bi-trash" aria-label="Delete this subscription" />}
-                        armedLabel="Click again — deliveries stop"
-                        title="Delete this subscription"
-                        onConfirm={async () => { await actions.deleteSubscription(row); }}
-                    />
+
                 </div>
             )}
         </div>
@@ -333,6 +331,8 @@ export function WebhookSubscriptionDetail({ id, onClose }: { id: number; onClose
             title={row.url}
             subtitle={`${groupLabel(row.group)} · webhook subscription`}
             chips={[{ text: row.is_active ? 'Active' : 'Inactive', tone: row.is_active ? 'success' : 'muted' }]}
+            active={actions.canManage ? { value: row.is_active, disabled: actions.pending, onChange: next => void actions.toggleSubscription(row, next) } : undefined}
+            contextMenu={actions.canManage ? [{ label: 'Edit subscription', onSelect: () => void actions.editSubscription(row) }, { label: row.is_active ? 'Deactivate' : 'Reactivate', disabled: actions.pending, onSelect: () => void actions.toggleSubscription(row, !row.is_active) }] : []}
             sections={[
                 {
                     key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => (
@@ -342,19 +342,7 @@ export function WebhookSubscriptionDetail({ id, onClose }: { id: number; onClose
                             <FlatRow label="URL"><code>{row.url}</code></FlatRow>
                             <FlatRow label="Created">{fmt.datetime(row.created)}</FlatRow>
                             <FlatRow label="Modified">{fmt.datetime(row.modified)}</FlatRow>
-                            <div className="ga-toolbar" style={{ marginTop: 16 }}>
-                                <button className="btn btn-compact" onClick={() => void actions.editSubscription(row)}>
-                                    <i className="bi bi-pencil" /> Edit URL, events, and status
-                                </button>
-                                <ArmedButton
-                                    className="btn-compact"
-                                    label="Delete"
-                                    armedLabel="Click again — delete now"
-                                    onConfirm={async () => {
-                                        if (await actions.deleteSubscription(row)) onClose();
-                                    }}
-                                />
-                            </div>
+
                         </>
                     ),
                 },

package/src/admin/dashboard/AdminDashboardPage.tsx

@@ -84,7 +84,7 @@ function LoginOverview() {
 
 export function AdminDashboardPage() {
     return <div className="admin-dashboard">
-        <header className="admin-dashboard-header"><div className="eyebrow">Overview</div><h1>Admin dashboard</h1><p className="dim">Authoritative operational signals for this django-mojo deployment.</p></header>
+        <header className="admin-dashboard-header"><h1>Dashboard</h1><p className="dim">Authoritative operational signals for this django-mojo deployment.</p></header>
         <MetricOverview />
         <AttentionOverview />
         <LoginOverview />

package/src/admin/dns/CertificateLifecyclePoller.tsx

@@ -49,9 +49,21 @@ export function CertificateLifecyclePoller({ domain, intervalMs = CERTIFICATE_PO
     const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
     const [version, setVersion] = useState(0);
 
-    useEffect(() => queryClient.getQueryCache().subscribe((event) => {
-        if (event.query.queryKey[0] === CertificateModel.endpoint) setVersion((value) => value + 1);
-    }), [queryClient]);
+    useEffect(() => {
+        let mounted = true;
+        let queued = false;
+        const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
+            if (event.query.queryKey[0] !== CertificateModel.endpoint || queued) return;
+            // Observer registration can notify while a detail is rendering.
+            // Coalesce cache notifications after that render, including StrictMode replay.
+            queued = true;
+            queueMicrotask(() => {
+                queued = false;
+                if (mounted) setVersion((value) => value + 1);
+            });
+        });
+        return () => { mounted = false; unsubscribe(); };
+    }, [queryClient]);
 
     useEffect(() => {
         const rowsById = new Map<number, CertificateRow>();

package/src/admin/dns/ProviderCredentialsPage.tsx

@@ -1,18 +1,34 @@
-import { useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useRef, useState } from 'react';
 import { useCan } from '../../client/runtime';
 import {
-    ArmedButton, Badge, CollectionSelect, FlatRow, ModelTable, fmt, modal, toast,
-    type Column, type FilterDef, type Tone,
+    Badge,
+    CollectionSelect,
+    DetailView,
+    FlatRow,
+    ModelTable,
+    fmt,
+    modal,
+    toast,
+    type Column,
+    type FilterDef,
+    type Tone,
 } from '../../ui';
 import {
-    DNS_GROUP_CHOICE_ENDPOINT, invalidateDnsCredentials, linkDnsCredential,
-    rotateDnsCredential, useDnsCapabilities,
+    DNS_GROUP_CHOICE_ENDPOINT,
+    invalidateDnsCredentials,
+    linkDnsCredential,
+    rotateDnsCredential,
+    useDnsCapabilities,
 } from './api';
 import { linkableProviders, providerLabel } from './data';
 import {
-    DNS_MANAGE_PERMISSIONS, DNS_VIEW_PERMISSIONS, DnsCredentialModel,
-    type DnsCapabilities, type DnsCredentialRow, type DnsGroupChoice,
+    DNS_MANAGE_PERMISSIONS,
+    DNS_VIEW_PERMISSIONS,
+    DnsCredentialModel,
+    type DnsCapabilities,
+    type DnsCredentialRow,
+    type DnsGroupChoice,
 } from './models';
 
 function groupId(group: DnsCredentialRow['group']): number | null {
@@ -154,7 +170,7 @@ function CredentialDetail({ id, caps, close }: { id: number; caps: DnsCapabiliti
     const { data: row, isPending, error } = DnsCredentialModel.useOne(id);
     const { can: canManage } = useCan(DNS_MANAGE_PERMISSIONS);
     const save = DnsCredentialModel.useSave();
-    const destroy = DnsCredentialModel.useDelete();
+
     if (isPending) return <div className="modal-pad dim">Loading credential…</div>;
     if (!row || error) return <div className="modal-pad text-bad">{error?.message ?? 'Credential not found'}</div>;
 
@@ -167,26 +183,13 @@ function CredentialDetail({ id, caps, close }: { id: number; caps: DnsCapabiliti
         }
     };
 
-    const remove = async () => {
-        try {
-            await destroy.mutateAsync({ id: row.id });
-            toast.success('Credential deleted');
-            close();
-        } catch (reason) {
-            toast.error(reason instanceof Error ? reason.message : 'Credential could not be deleted');
-        }
-    };
 
-    return (
-        <div className="modal-pad">
-            <div className="eyebrow">Provider credential</div>
-            <h2 className="modal-title">{row.name || `Credential #${row.id}`}</h2>
-            <div className="chip-row" style={{ marginBottom: 14 }}>
-                <Badge tone={verificationTone(row)}>{row.verified ? 'Verified' : 'Unverified'}</Badge>
-                <Badge tone={row.is_active ? 'success' : 'muted'}>{row.is_active ? 'Active' : 'Inactive'}</Badge>
-                <Badge tone="warning">{providerLabel(row.provider)}</Badge>
-            </div>
-            <FlatRow label="Group">{groupLabel(row.group)}</FlatRow>
+
+    return <DetailView title={row.name || `Credential #${row.id}`} subtitle={providerLabel(row.provider)} icon="bi-key" onClose={close}
+        chips={[{ text: row.verified ? 'Verified' : 'Unverified', tone: verificationTone(row) }, { text: row.is_active ? 'Active' : 'Retired', tone: row.is_active ? 'success' : 'muted' }]}
+        active={canManage ? { value: row.is_active, disabled: save.isPending, onChange: () => void toggle() } : undefined}
+        contextMenu={canManage ? [{ label: 'Rotate credentials…', onSelect: () => void showCredentialEditor(caps, row) }, { label: row.is_active ? 'Retire' : 'Reactivate', disabled: save.isPending, onSelect: () => void toggle() }] : []}
+        sections={[{ key: 'overview', label: 'Overview', icon: 'bi-info-circle', render: () => <div className="detail-section">            <FlatRow label="Group">{groupLabel(row.group)}</FlatRow>
             <FlatRow label="API key"><code>{row.api_key_masked || '—'}</code></FlatRow>
             <FlatRow label="API secret"><code>{row.api_secret_masked || '—'}</code></FlatRow>
             <FlatRow label="Domains at verification">{row.domain_count}</FlatRow>
@@ -196,26 +199,7 @@ function CredentialDetail({ id, caps, close }: { id: number; caps: DnsCapabiliti
             <p className="dim">
                 The linked-domain count is a health signal only. Provider account domains are never enumerated here.
             </p>
-            {canManage && (
-                <div className="modal-actions">
-                    <button type="button" className="btn" onClick={() => void showCredentialEditor(caps, row)}>
-                        <i className="bi bi-arrow-repeat" /> Rotate
-                    </button>
-                    <button type="button" className="btn" disabled={save.isPending} onClick={() => void toggle()}>
-                        <i className={`bi ${row.is_active ? 'bi-pause-circle' : 'bi-play-circle'}`} /> {row.is_active ? 'Retire' : 'Activate'}
-                    </button>
-                    <ArmedButton
-                        label="Delete"
-                        armedLabel="Click again — linked domains lose provider-backed DNS"
-                        disabled={destroy.isPending}
-                        onConfirm={remove}
-                    />
-                    <button type="button" className="btn" onClick={close}>Close</button>
-                </div>
-            )}
-            {!canManage && <div className="modal-actions"><button type="button" className="btn" onClick={close}>Close</button></div>}
-        </div>
-    );
+</div> }]} />;
 }
 
 const COLUMNS: Column<DnsCredentialRow>[] = [
@@ -248,9 +232,9 @@ function CredentialsTable({ caps }: { caps: DnsCapabilities }) {
     ];
     const openDetail = (row: DnsCredentialRow) => {
         void DnsCredentialModel.fetchOne(queryClient, row.id).catch(() => undefined);
-        void modal.open((done) => (
+        void modal.detail((done) => (
             <CredentialDetail id={row.id} caps={caps} close={() => done(null)} />
-        ), { size: 'md' });
+        ));
     };
     const canLink = canManage && linkableProviders(caps).length > 0;
     return (

package/src/admin/dns/setup.ts

@@ -10,7 +10,7 @@ registerDnsAdminIntegration({
         return resolveDnsDomainByName(normalizedName);
     },
     recordsHref: (domainId) => `dns/records?domain=${encodeURIComponent(domainId)}`,
-    ...(usingMockTransport() ? {
+    ...(import.meta.env.VITE_MOJO_PACKAGED_ADMIN !== '1' && usingMockTransport() ? {
         applyManagedDnsRecords: async (domainId: number, records: readonly ManagedDnsRecordInput[]) => {
             const { applyMockManagedDnsRecords } = await import('../../client/mock');
             applyMockManagedDnsRecords(domainId, records);