portal-mojo 0.2.2 → 0.2.4

package/docs/detail-primitives.md

@@ -109,6 +109,7 @@ value. They coexist happily — `<DataView data={record} />` for the record,
 <MetadataSection
     endpoint="/api/user" id={user.id} metadata={user.metadata}
     onSaved={(next) => qc.setQueryData<User>(['/api/user', 'one', user.id], (p) => p && { ...p, metadata: next })}
+    beforeSave={async (next, prev) => …}   // optional owner gate — see below
 />
 ```
 
@@ -133,7 +134,17 @@ Invariants:
    Object values then display **read-only** — a string editor round-trips
    them lossily; remove and re-add to change one.
 
-Deletion confirms through `modal.confirm`; success toasts.
+**Removing a top-level key stops on a guardrail** (`confirmGuardrail`), not a
+plain confirm: the POST carries the whole blob, so one write can wipe
+`auth_config` / `geofence` / `redemption_policy`. The stop names every key
+about to leave and how many remain; removing more than one key at once asks
+the operator to type the count. `commit()` computes the removed set from
+`metadata` vs `next` — every write path, not just the trash button, hits it.
+
+`beforeSave(next, prev)` runs after that built-in stop and before the POST.
+Resolve `false` to cancel — nothing posts, no error, the editor keeps its
+draft. Owners diff their own protected keys here (a `changedKeys`-style
+compare on the values of `auth_config`, say). Success toasts.
 
 ## StackTraceView — JS **and** Python tracebacks
 

package/docs/feedback.md

@@ -1,7 +1,7 @@
 # feedback — awaitable modals + toasts
 
 ```ts
-import { modal, formModal, toast, ModalHost, ToastHost } from 'portal-mojo/ui';
+import { modal, formModal, toast, confirmGuardrail, ModalHost, ToastHost } from 'portal-mojo/ui';
 ```
 
 Mount `<ModalHost />` and `<ToastHost />` once in the app shell. Modals are
@@ -24,6 +24,51 @@ Patterns:
   input; resolve null to cancel the whole thing.
 - Stacked dialogs are fine (disable-reason form over a detail modal).
 
+## confirmGuardrail — the "are you sure, and here is why" stop
+
+```tsx
+if (!(await confirmGuardrail({
+    title: 'Disable webhook to hooks.example.com?',        // question form, names the target
+    effect: <>Deliveries of <b>order.paid</b> stop the moment this saves.</>,
+    why: [                                                  // one concrete consequence per bullet
+        <>Nothing re-registers them — it stays off until someone turns it back on.</>,
+        <>Consumers see silence, not an error.</>,
+    ],
+    undo: 'Re-enable it here to resume deliveries.',        // or say that you can't
+    confirmText: 'Disable webhook',
+    typeToConfirm: 'DISABLE',                               // optional: button disabled until typed
+    danger: true,                                           // default; false = primary button + warn tint
+}))) return;
+```
+
+Resolves `true` only on the armed confirm button — `false` on Escape,
+backdrop and Cancel. Opens on `modal.open(…, { size: 'sm' })`, so it stacks
+over a `formModal` that is still open. `typeToConfirm` compares trimmed and
+case-insensitively; Enter in that input confirms once it matches.
+
+**Which stop.** Three idioms, one rule each:
+
+| Idiom | When |
+|---|---|
+| `modal.confirm` | Reversible / low blast radius: a yes-no is enough. |
+| `ArmedButton` | Irreversible, needs no input, inline (row actions) — see idioms.md. |
+| `confirmGuardrail` | Anything that **takes a tenant dark, moves money, or can't be undone** — the operator must read *why* before the button arms. |
+
+Copy is written from what the backend does, not adjectives: "every
+integration holding this key gets 401 on its next call", not "this is
+dangerous". Where it is wired in the package: API-key deactivate, webhook
+disable, member `manage_group` / `manage_members` grants (through
+`FormView.beforeSave`), and MetadataSection's removed-key stop.
+
+`changedKeys(initial, next, watch)` is the diff helper for config-form saves:
+which of the watched keys changed (null/'' normalised), so a save confirms
+ONLY the fields that break things and passes silently otherwise.
+
+Styles: `apps/portal/src/theme/guardrail.css` (`.guardrail`,
+`.guardrail-effect/-why/-why-head/-undo/-type`, `.guardrail-icon`) over
+`--bad/--bad-soft` (danger) and `--warn/--warn-soft` (`danger: false`). The
+package ships no CSS — a consuming app carries that block (README).
+
 ## modal.drawer
 
 ```ts
@@ -79,7 +124,31 @@ bottom-right cards, max 5, 3.5s. Conventions:
 - `response: 'payload'` actions toast the SERVER's payload message
   (`outcome.body.message`), not client copy.
 
+`ToastHost` uses a manual native popover above dialog backdrops. Its stable
+portal target follows the most recently opened modal (including nested dialogs
+and drawers), then returns to the page when the last modal closes. Modal-local
+ancestry keeps Undo and progress Cancel usable despite native dialog inertness.
+Moving the host preserves card state and timers and does not focus the toast.
+Mount it once; do not add per-dialog toast hosts or solve this with `z-index`.
+Custom app themes must include the updated toast CSS from
+`apps/portal/src/theme.css`: reset the popover's UA inset/margin/border/padding
+and background, hide closed popovers, and keep only the cards pointer-active.
+Updating the TypeScript package alone does not update a consumer's own theme.
+The showcase's **Toasts inside modal** demo covers errors, Undo, progress,
+and nested opening/closing. `node scripts/verify-toast-modal.mjs` checks the
+mounted lifecycle; native visibility and interaction require browser checks.
+
 ## Pitfall
 
 An open `<dialog>` pauses ModelTable's autoRefresh by design — don't build
 alternative modal systems that bypass `<dialog>` or that interlock breaks.
+
+## Admin focused dialogs
+
+Use `modal-pad`, `modal-title`, `modal-message` and `modal-actions`; Cancel
+precedes the primary action. Keep long form bodies scrollable and actions
+reachable in short/narrow viewports. A pending mutation needs both disabled
+buttons and a live `canDismiss` gate for Escape/backdrop. Content records use
+DetailView header actions; never teach routine record deletion in a danger rail.
+See [Admin modal policy](admin-modals.md) for supported lifecycle semantics,
+permission checks and the complete retained-removal contract.

package/docs/forms.md

@@ -105,10 +105,51 @@ if (!data) return;   // cancelled → null
     savedFlashMs={1500}        // saved-check duration (default 1500)
     onSaved={({ changes, fields, row }) => …}
     onSaveError={({ changes, fields, error }) => …}
+    beforeSave={({ changes, names, row }) => …}   // once per batch, BEFORE the POST (below)
     onPendingChange={(uploading) => setDetailDismissLocked(uploading)}
 />
 ```
 
+### `beforeSave` — the pre-save gate
+
+```tsx
+beforeSave={({ changes, names, row }) => {
+    // changes: the wire body (dotted names expanded: {permissions: {manage_group: true}})
+    // names:   the flat field names in the batch ('permissions.manage_group')
+    const perms = changes.permissions as Record<string, unknown> | undefined;
+    if (perms?.manage_group !== true) return true;            // proceed
+    return confirmGuardrail({ title: `Grant Manage Group to ${row.email}?`, … }); // false → drop
+}}
+```
+
+Runs once per batch with the body about to POST. Three results:
+
+| Return | Effect |
+|---|---|
+| `false` | **Drop the batch.** Its fields revert to the server snapshot and go idle — no error, no toast. A guardrail the operator declined is not a failure. |
+| an object | **Replace the body.** The object POSTs instead of `changes` (`onSaved.changes` reports what was sent). |
+| `true` / `undefined` | Proceed unchanged. |
+
+While it awaits, the batch is **in flight**: the 300ms window cannot re-fire
+and a commit made meanwhile joins the **next** batch (which gets its own
+`beforeSave`). A `false` reverts only the names this batch carried — a field
+re-committed during the await keeps its new value for the next batch. A hook
+that throws or rejects is a bug, not a veto: it surfaces exactly like a
+failed save (revert + pinned error + `onSaveError` toast). Without the prop
+the path is the pre-existing one, unchanged.
+
+Each batch captures its save target and result callbacks before confirmation.
+Rerendering with another record while the gate awaits cannot redirect that
+approved write or its callbacks to the new record.
+FormView also isolates its mutation observer and draft state by model and row
+ID. Switching either starts a fresh form; a refetch of the same row preserves
+pending edits. Pass a stable model definition, as returned by `defineModel`.
+
+Use it for the fields where a typo takes a tenant dark and there is no save
+button to hesitate over: identity fields (`uuid`, `auth_domain`), escalating
+grants (MemberDetail guards `manage_group` / `manage_members` this way). The
+contract is pinned by `npm run verify:form-autosave`.
+
 ### The autosave lifecycle (the machine: `useFormAutosave`)
 
 1. **Commit, never keystroke.** Text/textarea update the draft per keystroke
@@ -433,3 +474,13 @@ orchestrator files follow-ups.
 | `combo` / `combobox` / `autocomplete` | — | ComboBox | OK (ComboInput feature spec, commit-only) |
 | `address` | — | AddressField | OK (private session token, details → atomic declared-field patch) |
 | `tabset` | FormView `tabs` prop | — | OK — tabsets are FORM STRUCTURE here (registry-of-tabs + permissions), not a field type |
+
+## Admin focused dialogs
+
+Use `modal-pad`, `modal-title`, `modal-message` and `modal-actions`; Cancel
+precedes the primary action. Keep long form bodies scrollable and actions
+reachable in short/narrow viewports. A pending mutation needs both disabled
+buttons and a live `canDismiss` gate for Escape/backdrop. Content records use
+DetailView header actions; never teach routine record deletion in a danger rail.
+See [Admin modal policy](admin-modals.md) for supported lifecycle semantics,
+permission checks and the complete retained-removal contract.

package/docs/loading.md

@@ -238,5 +238,6 @@ clicked away mid-save, they keep where they went.
 - **The overlay is `dialog[open]`.** ModelTable's `autoRefresh` skips ticks
   while any `dialog[open]` exists, so auto-refresh politely pauses during a
   busy operation. That is intended; don't "fix" it.
-- **Toasts render under the overlay** (`.toast-host` is z-index 60, the
-  overlay is in the top layer). Toast *after* closing the handle, not during.
+- **Toasts remain above the overlay.** The single [ToastHost](feedback.md#toast)
+  follows the active native dialog, keeping notifications and their actions
+  available during a blocking operation.

package/docs/popover.md

@@ -117,9 +117,9 @@ baked in 20px padding + 260px min-width for its one tenant, the calendar
 - **Don't wrap the shell in `overflow: hidden` styling assumptions** —
   it's in the top layer; nothing ancestral clips or covers it. Anything
   that must paint ABOVE an open popover has to join the top layer later.
-- **Toasts render under open modals** (`.toast-host` is z-index 60, not
-  top layer). Don't signal from popover content inside a modal via toast;
-  show it in the modal body.
+- **Use the single ToastHost for modal notifications.** It follows the active
+  dialog into the native top layer; see [feedback](feedback.md#toast). Keep
+  actionable errors in the modal body too when they need to outlast a toast.
 - **One value pipeline:** the popover is presentation only. Commit
   semantics (`change` on select/Enter/blur, never per keystroke) belong
   to the consuming control.
@@ -128,3 +128,18 @@ baked in 20px padding + 260px min-width for its one tenant, the calendar
   document state, remember listeners attach a tick later.
 - Placement flips only bottom→top (per source). If content can be taller
   than the viewport, cap and scroll it in YOUR content styles.
+
+## Modal ownership
+
+A popover anchored inside a native modal portals into that dialog in both
+native-Popover and fallback paths. Promoting a body-owned popover to the top
+layer affects painting but does not escape the document's modal inertness; it
+can appear visible while pointer/focus input lands underneath. Keeping the
+portal in the owning dialog preserves menu and picker interaction. The first
+Escape closes the popover; the next may dismiss the parent dialog.
+
+Vertical placement clamps to the viewport when neither side fits. DetailView
+menu content owns its height limit and scrolling; the general popover host
+keeps overflow available for nested calendar/picker content. Dialog layout
+cleanup restores focus while the native dialog is still connected. Header
+menu selections focus their stable trigger before launching nested dialogs.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.2",
+    "version": "0.2.4",
     "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,24 +1,46 @@
-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,
+    confirmGuardrail,
+    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 {
@@ -91,11 +113,25 @@ function TokenFooter({ permissions }: { permissions: string[] }) {
     );
 }
 
+/** The stop in front of `is_active: false` — copy states what the backend does. */
+function confirmDeactivateKey(row: GroupApiKeyRow): Promise<boolean> {
+    return confirmGuardrail({
+        title: `Deactivate API key "${row.name}"?`,
+        effect: <>The key stops authenticating the moment this saves.</>,
+        why: [
+            <>Every integration holding this key gets <b>401</b> on its next call — the caller sees an auth failure, not a notice.</>,
+            <>The key is <b>not rotated</b>: the same secret stays on file, so anyone who holds it regains access the instant it is re-enabled.</>,
+        ],
+        undo: 'Re-enabling restores the same key; no integration needs a new secret.',
+        confirmText: 'Deactivate key',
+    });
+}
+
 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) => {
@@ -220,6 +256,11 @@ function useGroupApiKeyActions(permission: PermSpec) {
         if (Object.keys(permissionChanges).length) changes.permissions = permissionChanges;
         if (!Object.keys(changes).length) return;
 
+        // Flipping a key inactive is the one edit here with a blast radius
+        // outside this portal — every caller holding the key. Guardrail it;
+        // the other edits in the same form ride along only if it is confirmed.
+        if (changes.is_active === false && !(await confirmDeactivateKey(row))) return;
+
         try {
             await save.mutateAsync({ id: row.id, changes });
             toast.success('API key updated');
@@ -244,19 +285,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 +340,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 +404,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 +419,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>
-                            )}
+
                         </>
                     ),
                 },