portal-mojo 0.1.0

package/src/ui/detail/FlowStrip.tsx

@@ -0,0 +1,80 @@
+// FlowStrip — the horizontal "STEP 1 → STEP 2 → STEP 3" strip for records
+// that describe a process (RuleSet triggering: Match → Bundle → Threshold →
+// Re-trigger; incident triage; job lifecycle).
+// Port of web-mojo src/core/views/data/FlowStrip.js.
+//
+//   ┌──────────┬──────────┬───────────┬────────────┐
+//   │ STEP 1   │ STEP 2   │ STEP 3    │ STEP 4     │
+//   │ Match  ✎ │ Bundle   │ Threshold │ Re-trigger │
+//   │ value    │ value    │ value     │ value      │
+//   │ hint     │ hint     │ hint      │ hint       │
+//   └──────────┴──────────┴───────────┴────────────┘
+//
+// Deviations from source: `value`/`hint` were TRUSTED-HTML strings — they are
+// ReactNode slots here (architecture rule 6); the per-step `action`/`actionData`
+// pair that dispatched through the global action pipeline becomes one
+// `onEditStep(step, index)` callback.
+import type { CSSProperties, ReactNode } from 'react';
+import type { Tone } from '../format';
+import { normalizeTone } from './StatusPanel';
+
+export interface FlowStep {
+    /** Small uppercase eyebrow. Defaults to `STEP <n>`. */
+    num?: string;
+    title: string;
+    /** Primary value line — a slot, so `<code>`/`<strong>` compose safely. */
+    value?: ReactNode;
+    /** Small descriptor under the value. */
+    hint?: ReactNode;
+    /** Renders the value in the muted-italic "not configured" style. */
+    empty?: boolean;
+    /** Colors the step's eyebrow + rail (per-step signal: which stage failed). */
+    tone?: Tone;
+    /** Opt a step OUT of the edit affordance when `onEditStep` is wired. */
+    editable?: boolean;
+    /** Tooltip on the edit button; defaults to `Edit <title>`. */
+    editTitle?: string;
+}
+
+export function FlowStrip({ steps, onEditStep, editIcon = 'bi-pencil' }: {
+    steps: FlowStep[];
+    /** Wiring this renders a pencil on every step except `editable: false` ones. */
+    onEditStep?: (step: FlowStep, index: number) => void;
+    editIcon?: string;
+}) {
+    if (!steps.length) return null;
+    // Column count rides a custom property so the container queries in CSS can
+    // reflow it (4 → 2 → 1) off the strip's OWN width, not the viewport — it is
+    // routinely nested inside an `lg` modal.
+    const style = { '--flow-strip-cols': steps.length } as CSSProperties;
+
+    return (
+        <div className="detail-flow-strip" style={style}>
+            {steps.map((step, i) => {
+                const tone = normalizeTone(step.tone, 'FlowStrip');
+                const canEdit = !!onEditStep && step.editable !== false;
+                return (
+                    <div key={`${step.title}-${i}`} className={`flow-strip-step tone-${tone}`}>
+                        <div className="flow-strip-num">{step.num ?? `STEP ${i + 1}`}</div>
+                        <div className="flow-strip-title">
+                            {step.title}
+                            {canEdit && (
+                                <button
+                                    type="button"
+                                    className="btn-icon btn-icon-sm flow-strip-action"
+                                    title={step.editTitle ?? `Edit ${step.title.toLowerCase()}`}
+                                    aria-label={step.editTitle ?? `Edit ${step.title.toLowerCase()}`}
+                                    onClick={() => onEditStep!(step, i)}
+                                >
+                                    <i className={`bi ${editIcon}`} />
+                                </button>
+                            )}
+                        </div>
+                        <div className={`flow-strip-value${step.empty ? ' flow-strip-empty' : ''}`}>{step.value}</div>
+                        {step.hint != null && step.hint !== '' && <div className="flow-strip-hint">{step.hint}</div>}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/src/ui/detail/KnownFieldsCard.tsx

@@ -0,0 +1,121 @@
+// KnownFieldsCard — the "known JSON keys promoted, raw blob below" pattern.
+// Blob-shaped fields (`metadata`, `ip_info`, `device_info`, `payload`) carry a
+// few keys the framework knows about plus an open-ended bag of extras; detail
+// sections want the known ones in a clean label/value grid and the raw JSON
+// accessible but subordinated.
+// Port of web-mojo src/core/views/data/KnownFieldsCard.js.
+//
+//   Created by      ian@example.com
+//   Reasoning       brute-force from same /24
+//   Last resolved   2026-04-21 11:42
+//   ▶ Raw metadata
+//
+// Deviation from source: `formatter` returned TRUSTED HTML — `format` returns
+// ReactNode here (architecture rule 6). The string form still works and now
+// names an `fmt.*` formatter; an unknown name warns and falls back to the plain
+// value rather than rendering nothing (architecture rule 4).
+import type { ReactNode } from 'react';
+import * as fmt from '../format';
+
+/** The `fmt.*` formatters a spec may name as a string. */
+const NAMED_FORMATTERS = {
+    date: (v: unknown) => fmt.date(v as string | number | null),
+    datetime: (v: unknown) => fmt.datetime(v as string | number | null),
+    relative: (v: unknown) => fmt.relative(v as string | number | null),
+} satisfies Record<string, (value: unknown) => ReactNode>;
+
+export type NamedFormatter = keyof typeof NAMED_FORMATTERS;
+
+export interface KnownField {
+    /** Key in the blob. Dotted paths traverse nested objects (`os.family`). */
+    key: string;
+    /** Row label; defaults to the key itself. */
+    label?: string;
+    /** An `fmt.*` name, or a function returning any node. */
+    format?: NamedFormatter | ((value: unknown, key: string, data: Record<string, unknown>) => ReactNode);
+    /** Drop the row entirely when the value is missing (default: show "—"). */
+    hideEmpty?: boolean;
+}
+
+/**
+ * Dotted-path lookup. An own property wins over traversal, so a blob that
+ * literally holds the key `"os.family"` still resolves (source behavior).
+ */
+function lookup(data: Record<string, unknown>, key: string): unknown {
+    if (!key) return undefined;
+    if (Object.prototype.hasOwnProperty.call(data, key)) return data[key];
+    if (!key.includes('.')) return undefined;
+    let cursor: unknown = data;
+    for (const part of key.split('.')) {
+        if (cursor == null || typeof cursor !== 'object') return undefined;
+        cursor = (cursor as Record<string, unknown>)[part];
+    }
+    return cursor;
+}
+
+function formatValue(value: unknown, spec: KnownField, data: Record<string, unknown>): ReactNode {
+    const { format } = spec;
+    if (typeof format === 'function') return format(value, spec.key, data);
+    if (typeof format === 'string') {
+        const named = NAMED_FORMATTERS[format];
+        if (named) return named(value);
+        console.warn(`[KnownFieldsCard] unknown format ${JSON.stringify(format)} for key "${spec.key}" — rendering the raw value. Valid: ${Object.keys(NAMED_FORMATTERS).join(', ')}`);
+    }
+    // Default: scalars as text, objects as compact JSON in a code span.
+    if (value !== null && typeof value === 'object') {
+        return <code className="dim">{JSON.stringify(value)}</code>;
+    }
+    return String(value);
+}
+
+export function KnownFieldsCard({ data, known = [], showRaw = true, rawLabel = 'Raw JSON', rawCollapsed = true, emptyText = 'No data.' }: {
+    data: Record<string, unknown>;
+    known?: KnownField[];
+    showRaw?: boolean;
+    rawLabel?: string;
+    /** `<details>` starts closed (default) or open. */
+    rawCollapsed?: boolean;
+    emptyText?: string;
+}) {
+    if (!known.length && Object.keys(data).length === 0) {
+        return <div className="dim detail-known-fields-empty">{emptyText}</div>;
+    }
+
+    const rows = known
+        .map((spec) => ({ spec, value: lookup(data, spec.key) }))
+        .filter(({ spec, value }) => !(spec.hideEmpty && (value == null || value === '')));
+
+    let json: string;
+    try {
+        json = JSON.stringify(data, null, 2);
+    } catch {
+        // Circular blobs reach here — the grid above is still worth rendering.
+        json = String(data);
+    }
+
+    return (
+        <div className="detail-known-fields-card">
+            {rows.length > 0 && (
+                <div className="detail-known-fields-grid">
+                    {rows.map(({ spec, value }) => {
+                        const missing = value == null || value === '';
+                        return (
+                            <div key={spec.key} className="flat-row detail-known-field-row">
+                                <div className="flat-label">{spec.label ?? spec.key}</div>
+                                <div className="flat-value">
+                                    {missing ? <span className="dim-italic">—</span> : formatValue(value, spec, data)}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+            {showRaw && Object.keys(data).length > 0 && (
+                <details className="detail-known-fields-raw" open={!rawCollapsed}>
+                    <summary className="detail-known-fields-raw-summary">{rawLabel}</summary>
+                    <pre className="detail-known-fields-raw-body">{json}</pre>
+                </details>
+            )}
+        </div>
+    );
+}

package/src/ui/detail/MetadataSection.tsx

@@ -0,0 +1,219 @@
+// MetadataSection — view/edit the `metadata` blob on any django-mojo record.
+// Port of web-mojo src/extensions/admin/shared/AdminMetadataSection.js.
+//
+//   Metadata                                              [+ Add]
+//   ┌──────────────────────────────────────────────────────────┐
+//   │ timezone       America/New_York                    ✎  🗑 │
+//   │ signup_source  {"campaign":"q3"}       (object, read-only)│
+//   └──────────────────────────────────────────────────────────┘
+//
+// Deviations from source:
+//   · Editing is INLINE, not a modal round-trip. A rejected save must keep the
+//     editor state so the operator can retry without retyping — there is no
+//     editor state to keep once a modal has closed.
+//   · Source read `resp.status === 200` off a never-rejecting `model.save()`
+//     and toasted "Failed to save metadata" — the trap architecture rule 3
+//     retires. `mojoCall` REJECTS; the rejection surfaces the server's own
+//     message in a persistent inline banner (a toast alone is missable).
+//   · Controlled on `metadata` (architecture rule 5): the component never
+//     mirrors server state. `onSaved` is REQUIRED — it is how the owner
+//     (TanStack cache, parent state) learns about the write.
+import { useState } from 'react';
+import { mojoCall } from '../../client/client';
+import { modal } from '../modal';
+import { toast } from '../toast';
+
+type Draft =
+    | { mode: 'add'; key: string; value: string }
+    | { mode: 'edit'; key: string; value: string }
+    | null;
+
+/** Objects/arrays render read-only — a string editor round-trips them lossily. */
+function isBlob(value: unknown): boolean {
+    return value !== null && typeof value === 'object';
+}
+
+function display(value: unknown): string {
+    return isBlob(value) ? JSON.stringify(value) : String(value);
+}
+
+/**
+ * Source semantics: a typed value is JSON-parsed when it can be, so `42`,
+ * `true` and `{"a":1}` land as their real types and only the rest stay strings.
+ */
+function parseValue(raw: string): unknown {
+    try {
+        return JSON.parse(raw);
+    } catch {
+        return raw;
+    }
+}
+
+export function MetadataSection({ endpoint, id, metadata, onSaved, title = 'Metadata' }: {
+    /** Collection endpoint — the save posts to `<endpoint>/<id>`. */
+    endpoint: string;
+    id: number | string;
+    metadata: Record<string, unknown>;
+    /** Called with the new blob after the server accepted it. */
+    onSaved: (next: Record<string, unknown>) => void;
+    title?: string;
+}) {
+    const [draft, setDraft] = useState<Draft>(null);
+    const [pending, setPending] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    const keys = Object.keys(metadata).sort();
+    const busy = pending !== null;
+
+    /** The one write path. Resolves true only when the server accepted it. */
+    async function commit(next: Record<string, unknown>, token: string, message: string): Promise<boolean> {
+        setPending(token);
+        setError(null);
+        try {
+            await mojoCall(`${endpoint}/${id}`, { method: 'POST', body: { metadata: next } });
+            onSaved(next);
+            toast.success(message);
+            return true;
+        } catch (err) {
+            // Unmissable failure: the banner persists (a toast would not) and
+            // the caller's draft below is deliberately left untouched.
+            setError(err instanceof Error ? err.message : String(err));
+            return false;
+        } finally {
+            setPending(null);
+        }
+    }
+
+    async function saveDraft() {
+        if (!draft) return;
+        const key = draft.key.trim();
+        if (!key) {
+            setError('Key is required.');
+            return;
+        }
+        if (draft.mode === 'add' && Object.prototype.hasOwnProperty.call(metadata, key)) {
+            setError(`Key "${key}" already exists — edit it instead.`);
+            return;
+        }
+        const next = { ...metadata, [key]: parseValue(draft.value) };
+        const ok = await commit(next, draft.mode === 'add' ? 'add' : `edit:${key}`, draft.mode === 'add' ? 'Metadata entry added' : 'Metadata updated');
+        if (ok) setDraft(null);   // a failed save keeps the editor open, populated
+    }
+
+    async function removeKey(key: string) {
+        const confirmed = await modal.confirm({
+            title: 'Remove entry',
+            message: <>Remove metadata key <b>{key}</b>?</>,
+            confirmText: 'Remove',
+            danger: true,
+        });
+        if (!confirmed) return;
+        const next = { ...metadata };
+        delete next[key];
+        await commit(next, `delete:${key}`, 'Metadata entry removed');
+    }
+
+    const renderEditor = (rowKey: string) => (
+        <div className="amd-item amd-editor" key={rowKey}>
+            {draft?.mode === 'add' ? (
+                <input
+                    className="input input-compact amd-key-input"
+                    placeholder="key"
+                    autoFocus
+                    value={draft.key}
+                    onChange={(e) => setDraft({ ...draft, key: e.target.value })}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') void saveDraft();
+                        if (e.key === 'Escape') setDraft(null);
+                    }}
+                />
+            ) : (
+                <div className="amd-key">{draft?.key}</div>
+            )}
+            <input
+                className="input input-compact amd-value-input"
+                placeholder='value (JSON parsed when it can be: 42, true, {"a":1})'
+                autoFocus={draft?.mode === 'edit'}
+                value={draft?.value ?? ''}
+                onChange={(e) => draft && setDraft({ ...draft, value: e.target.value })}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter') void saveDraft();
+                    if (e.key === 'Escape') setDraft(null);
+                }}
+            />
+            <div className="amd-actions">
+                <button type="button" className="btn btn-primary btn-compact" disabled={busy} onClick={() => void saveDraft()}>
+                    {busy ? <i className="bi bi-arrow-repeat spin" /> : <i className="bi bi-check-lg" />} Save
+                </button>
+                <button type="button" className="btn btn-compact" disabled={busy} onClick={() => setDraft(null)}>Cancel</button>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="admin-metadata-section">
+            <div className="amd-header">
+                <h6 className="amd-title">{title}</h6>
+                <button
+                    type="button"
+                    className="btn btn-primary btn-compact"
+                    disabled={busy || draft?.mode === 'add'}
+                    onClick={() => { setError(null); setDraft({ mode: 'add', key: '', value: '' }); }}
+                >
+                    <i className="bi bi-plus-lg" /> Add
+                </button>
+            </div>
+
+            {error && (
+                <div className="amd-error" role="alert">
+                    <i className="bi bi-exclamation-triangle-fill" /> {error}
+                </div>
+            )}
+
+            <div className="amd-list">
+                {keys.length === 0 && draft?.mode !== 'add' ? (
+                    <div className="amd-empty">
+                        <i className="bi bi-braces" />
+                        No metadata entries
+                    </div>
+                ) : keys.map((key) => (
+                    draft?.mode === 'edit' && draft.key === key ? (
+                        renderEditor(key)
+                    ) : (
+                        <div key={key} className="amd-item">
+                            <div className="amd-key">{key}</div>
+                            <div className="amd-value">
+                                {isBlob(metadata[key])
+                                    ? <code className="amd-blob" title="Object values are read-only here — remove and re-add to change them">{display(metadata[key])}</code>
+                                    : display(metadata[key])}
+                            </div>
+                            <div className="amd-actions">
+                                <button
+                                    type="button"
+                                    className="btn-icon btn-icon-sm"
+                                    title={isBlob(metadata[key]) ? 'Object values are read-only' : `Edit ${key}`}
+                                    aria-label={`Edit ${key}`}
+                                    disabled={busy || isBlob(metadata[key])}
+                                    onClick={() => { setError(null); setDraft({ mode: 'edit', key, value: display(metadata[key]) }); }}
+                                >
+                                    <i className="bi bi-pencil" />
+                                </button>
+                                <button
+                                    type="button"
+                                    className="btn-icon btn-icon-sm amd-remove"
+                                    title={`Remove ${key}`}
+                                    aria-label={`Remove ${key}`}
+                                    disabled={busy}
+                                    onClick={() => void removeKey(key)}
+                                >
+                                    {pending === `delete:${key}` ? <i className="bi bi-arrow-repeat spin" /> : <i className="bi bi-trash" />}
+                                </button>
+                            </div>
+                        </div>
+                    )
+                ))}
+                {draft?.mode === 'add' && renderEditor('__add__')}
+            </div>
+        </div>
+    );
+}

package/src/ui/detail/StackTraceView.tsx

@@ -0,0 +1,150 @@
+// StackTraceView — colorized stack traces, JavaScript AND Python.
+// Port of web-mojo src/core/views/data/StackTraceView.js.
+//
+//   TypeError: Cannot read properties of undefined      ← error line
+//     at handleSubmit (app/views/JobDetails.js:214:19)  ← function + location
+//     File "mojo/jobs/runner.py", line 412, in _execute ← python frame
+//
+// Deviations from source:
+//   · RE-THEMED. The source shipped a hardcoded light-only <style> block
+//     (#f8f9fa surface, #dc3545/#0d6efd/#6610f2 text) that was unreadable in
+//     dark mode. This renders semantic classes over theme tokens, correct in
+//     BOTH themes.
+//   · Long traces COLLAPSE to `collapseAfter` lines behind a toggle instead of
+//     only being capped by a scroll box.
+//   · The source only colored an exception on line 0, so every Python
+//     traceback — which opens with "Traceback (most recent call last):" and
+//     puts the exception LAST — rendered its most important line as plain
+//     context. An anchored exception-line pattern now catches it anywhere.
+import { useMemo, useState } from 'react';
+
+// Ported verbatim from the source, in the source's match order.
+const JS_CALL = /(.+?)\s*\(([^:]+):(\d+):(\d+)\)/;      // at fn (file.js:123:45)
+const JS_AT = /^\s*at\s+([^:]+):(\d+):(\d+)/;           // at file.js:123:45
+const PY_FRAME = /File\s+"([^"]+)",\s+line\s+(\d+),\s+in\s+(.+)/;
+// Extension: `ValueError: …`, `django.db.utils.IntegrityError: …`, bare
+// `KeyboardInterrupt`. The trailing `(?::|$)` is what keeps ordinary prose
+// ("Error handling request") out of the error style.
+const EXCEPTION = /^[A-Za-z_][\w.]*(?:Error|Exception|Warning|Interrupt|Exit)(?::|$)/;
+
+type Line =
+    | { kind: 'blank' }
+    | { kind: 'error'; text: string }
+    | { kind: 'js-call'; indent: string; lead: string; fn: string; file: string; line: string; col: string }
+    | { kind: 'js-at'; indent: string; file: string; line: string; col: string }
+    | { kind: 'py'; indent: string; file: string; line: string; fn: string }
+    | { kind: 'frame'; text: string }
+    | { kind: 'context'; text: string };
+
+function parseLine(raw: string, index: number): Line {
+    if (!raw.trim()) return { kind: 'blank' };
+
+    // Error message: the source's first-line rule, plus any anchored
+    // exception line (where Python puts it).
+    const trimmed = raw.trim();
+    if ((index === 0 && (raw.includes('Error:') || raw.includes('Exception:'))) || EXCEPTION.test(trimmed)) {
+        return { kind: 'error', text: raw };
+    }
+    // Matched frames are re-composed from their captures, so the original
+    // indentation is carried explicitly — it is what keeps a Python frame
+    // aligned with the source line under it, terminal-style.
+    const indent = raw.match(/^\s*/)![0];
+
+    const call = raw.match(JS_CALL);
+    if (call) {
+        // The capture greedily includes the frame keyword ("at handleSubmit").
+        // Split it off so only the identifier reads as an identifier.
+        const captured = call[1]!.trim();
+        const lead = captured.startsWith('at ') ? 'at ' : '';
+        return { kind: 'js-call', indent, lead, fn: captured.slice(lead.length), file: call[2]!, line: call[3]!, col: call[4]! };
+    }
+
+    const at = raw.match(JS_AT);
+    if (at) return { kind: 'js-at', indent, file: at[1]!, line: at[2]!, col: at[3]! };
+
+    const py = raw.match(PY_FRAME);
+    if (py) return { kind: 'py', indent, file: py[1]!, line: py[2]!, fn: py[3]! };
+
+    if (trimmed.startsWith('at ')) return { kind: 'frame', text: raw };
+    return { kind: 'context', text: raw };
+}
+
+/** Non-string traces (an error payload object) are pretty-printed first. */
+function toText(trace: unknown): string {
+    if (typeof trace === 'string') return trace;
+    if (trace == null) return '';
+    try {
+        return JSON.stringify(trace, null, 2);
+    } catch {
+        return String(trace);
+    }
+}
+
+export function StackTraceView({ trace, collapseAfter = 24, emptyText = 'No stack trace available' }: {
+    /** The raw trace; objects are JSON-pretty-printed. */
+    trace: unknown;
+    /** Lines shown before the "show all" toggle. 0 disables collapsing. */
+    collapseAfter?: number;
+    emptyText?: string;
+}) {
+    const [expanded, setExpanded] = useState(false);
+    const text = toText(trace);
+    const lines = useMemo(() => text.split('\n').map(parseLine), [text]);
+
+    if (!text) return <div className="stack-trace-empty dim">{emptyText}</div>;
+
+    const collapsible = collapseAfter > 0 && lines.length > collapseAfter;
+    const shown = collapsible && !expanded ? lines.slice(0, collapseAfter) : lines;
+
+    return (
+        <div className="stack-trace-view">
+            <div className="stack-trace-body">
+                {shown.map((line, i) => {
+                    switch (line.kind) {
+                        case 'blank':
+                            return <div key={i} className="stack-trace-line">&nbsp;</div>;
+                        case 'error':
+                            return <div key={i} className="stack-trace-line stack-trace-error">{line.text}</div>;
+                        case 'js-call':
+                            return (
+                                <div key={i} className="stack-trace-line stack-trace-frame">
+                                    <span className="stack-trace-loc">{line.indent}{line.lead}</span>
+                                    <span className="stack-trace-fn">{line.fn}</span>
+                                    <span className="stack-trace-loc">
+                                        {' ('}{line.file}:<span className="stack-trace-lineno">{line.line}</span>:{line.col}{')'}
+                                    </span>
+                                </div>
+                            );
+                        case 'js-at':
+                            return (
+                                <div key={i} className="stack-trace-line stack-trace-frame">
+                                    <span className="stack-trace-loc">
+                                        {line.indent}at {line.file}:<span className="stack-trace-lineno">{line.line}</span>:{line.col}
+                                    </span>
+                                </div>
+                            );
+                        case 'py':
+                            return (
+                                <div key={i} className="stack-trace-line stack-trace-frame">
+                                    <span className="stack-trace-loc">
+                                        {line.indent}File "{line.file}", line <span className="stack-trace-lineno">{line.line}</span>, in{' '}
+                                    </span>
+                                    <span className="stack-trace-fn">{line.fn}</span>
+                                </div>
+                            );
+                        case 'frame':
+                            return <div key={i} className="stack-trace-line stack-trace-frame">{line.text}</div>;
+                        default:
+                            return <div key={i} className="stack-trace-line stack-trace-context">{line.text}</div>;
+                    }
+                })}
+            </div>
+            {collapsible && (
+                <button type="button" className="stack-trace-toggle" onClick={() => setExpanded((v) => !v)}>
+                    <i className={`bi ${expanded ? 'bi-chevron-up' : 'bi-chevron-down'}`} />
+                    {expanded ? `Show first ${collapseAfter} lines` : `Show all ${lines.length} lines`}
+                </button>
+            )}
+        </div>
+    );
+}

package/src/ui/detail/StatusPanel.tsx

@@ -0,0 +1,73 @@
+// StatusPanel — the hero "current state" banner that opens a record's
+// Overview section (incident triage, job lifecycle, runner alive/dead).
+// Port of web-mojo src/core/views/data/StatusPanel.js.
+//
+//   ┌───────────────────────────────────────────────────────────┐
+//   │  ● STATE                             [ primary ] [ alt ]  │
+//   │  Headline line                                            │
+//   │  Optional supporting meta line · with <code>fragments</code>
+//   └───────────────────────────────────────────────────────────┘
+//
+// Deviation from source (architecture rule 6): `meta` was a TRUSTED-HTML
+// string with a "caller must escape" contract, and `actions` was a
+// {label, icon, variant, action} array dispatched through the global action
+// pipeline. Both are ReactNode slots here — the caller composes `<code>` /
+// `<button onClick>` directly, so the escaping contract cannot be broken.
+import type { ReactNode } from 'react';
+import type { Tone } from '../format';
+
+/**
+ * The tone vocabulary shared by the detail primitives. web-mojo's set was
+ * {default, primary, success, info, warning, danger, secondary}; portal-mojo's
+ * `Tone` folds default/secondary into `muted`, so Badge, StatusPanel, FlowStrip
+ * and Timeline all speak one vocabulary.
+ */
+export const DETAIL_TONES = new Set<string>(['success', 'warning', 'danger', 'info', 'muted', 'primary']);
+
+/**
+ * Runtime guard for tones that arrive as wire data (`tone: row.status_tone`)
+ * rather than literals. Unknown values fall back to `muted` WITH a warn —
+ * never to rendering nothing (architecture rule 4).
+ */
+export function normalizeTone(tone: Tone | string | null | undefined, where: string): Tone {
+    if (tone == null || tone === '') return 'muted';
+    if (DETAIL_TONES.has(tone)) return tone as Tone;
+    console.warn(`[${where}] unknown tone ${JSON.stringify(tone)} — falling back to "muted". Valid: ${[...DETAIL_TONES].join(', ')}`);
+    return 'muted';
+}
+
+export interface StatusPanelProps {
+    /** Tints the panel surface and colors the state eyebrow + dot. */
+    tone?: Tone;
+    /** Small uppercase eyebrow beside the dot ("RUNNING", "ACKNOWLEDGED"). */
+    state?: string;
+    /** The dominant line — what the operator reads first. */
+    headline?: ReactNode;
+    /** Supporting line; a slot, so `<code>`/`<strong>` compose safely. */
+    meta?: ReactNode;
+    /** bootstrap-icons name; replaces the tone dot when given. */
+    icon?: string;
+    /** Buttons row. A slot — the caller owns the handlers. */
+    actions?: ReactNode;
+}
+
+export function StatusPanel({ tone, state, headline, meta, icon, actions }: StatusPanelProps) {
+    const t = normalizeTone(tone, 'StatusPanel');
+    return (
+        <div className={`detail-status-panel tone-${t}`}>
+            <div className="detail-status-headline">
+                {state && (
+                    <div className="detail-status-state">
+                        {icon
+                            ? <i className={`bi ${icon} detail-status-icon`} />
+                            : <span className="detail-status-dot" />}
+                        {state}
+                    </div>
+                )}
+                {headline != null && headline !== '' && <div className="detail-status-line">{headline}</div>}
+                {meta != null && meta !== '' && <div className="detail-status-meta">{meta}</div>}
+            </div>
+            {actions && <div className="detail-status-actions">{actions}</div>}
+        </div>
+    );
+}