portal-mojo 0.2.5 → 0.2.7

package/src/admin/identity/groups/group-sections/EventsSection.tsx

@@ -0,0 +1,53 @@
+// group-sections/EventsSection.tsx — the incident Events table port
+// (GroupView.js:1271-1282): events recorded ABOUT this group
+// (model_name=account.Group, model_id=<id>) with the source's columns —
+// Date / Category badge / Title.
+import { Badge, Eyebrow, fmt } from 'portal-mojo/ui';
+import type { GroupRow } from '../models';
+import { IncidentEventModel } from './models';
+
+export function EventsSection({ group }: { group: GroupRow }) {
+    const { data, isPending, isError, error } = IncidentEventModel.useList({
+        model_name: 'account.Group',
+        model_id: group.id,
+        size: 25,
+        sort: '-created',
+    });
+    const rows = data?.rows ?? [];
+
+    return (
+        <>
+            <Eyebrow>Events</Eyebrow>
+            {isError && (
+                <p className="dim-italic">
+                    Events unavailable — {error instanceof Error ? error.message : 'the incident API rejected the request'}.
+                </p>
+            )}
+            {!isPending && !isError && rows.length === 0 && (
+                <p className="dim-italic">No incident events recorded for this group.</p>
+            )}
+            {rows.length > 0 && (
+                <div className="tbl-scroll">
+                    <table className="tbl">
+                        <thead>
+                            <tr>
+                                <th style={{ width: 170 }}>Date</th>
+                                <th>Category</th>
+                                <th>Title</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {rows.map((ev) => (
+                                <tr key={ev.id}>
+                                    <td className="dim">{fmt.datetime(ev.created)}</td>
+                                    <td><Badge tone="info">{ev.category}</Badge></td>
+                                    <td>{ev.title ?? <span className="dim">—</span>}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+        </>
+    );
+}

package/src/admin/identity/groups/group-sections/GeofenceSection.tsx

@@ -0,0 +1,198 @@
+// group-sections/GeofenceSection.tsx — GroupGeofenceSection port
+// (admin/account/groups/GroupGeofenceSection.js, read in full 2026-08-05):
+// the GROUP-scoped geofence panel, three layers so an operator always sees
+// the effective policy, never just the fragment they can edit:
+//   1. the platform floor (read-only, GET /api/geo/rules?group_uuid=),
+//   2. this group's additional rules (editable — they can only tighten),
+//   3. the effective policy (floor + group, each clause tagged by source).
+//
+// FAIL-CLOSED floor: portal_test measures a 403 on /api/geo/rules — correct
+// gating (the endpoint honors only GLOBAL geofence grants). The floor card
+// then reads "Platform rules unavailable (requires the global geofence
+// permission)" and the group's own rule (from group.metadata.geofence) still
+// renders + edits — exactly the source's degradation.
+//
+// Saves go through the standard group REST: django deep-merges the metadata
+// JSONField (null deletes a key; nested __replace is NOT supported), so the
+// payload comes from buildGroupRulePayload — the new rule plus explicit
+// nulls for anything removed. The server validates the merged rule and 400s
+// with a human-readable message, surfaced inline + toast.
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Eyebrow, toast } from 'portal-mojo/ui';
+import { mojoCall, useCan } from 'portal-mojo/client/runtime';
+// ONE editor, ONE projection, two scopes (#1287): the platform page and this
+// group panel now render the same `GeofenceRuleEditor` — including its
+// guided↔JSON toggle, which this file's private FriendlyEditor never had.
+import {
+    GeofenceRuleEditor, makeRuleEditorValue, ruleFromEditorValue,
+    type RuleEditorValue,
+} from 'portal-mojo/admin/security';
+import { GroupModel, type GroupRow } from '../models';
+import {
+    GROUP_GEOFENCE_EDIT_PERMS, buildGroupRulePayload, describeRule, isAdvancedRule,
+    type GeoRulesConfig, type GeofenceRule, type RuleClause,
+} from './geofence-data';
+
+const CLAUSE_ICONS: Record<RuleClause['tone'], string> = {
+    block: 'bi-slash-circle',
+    warn: 'bi-exclamation-triangle',
+    ok: 'bi-check-circle',
+};
+
+function ClauseRow({ clause, source }: { clause: RuleClause; source?: 'platform' | 'group' }) {
+    return (
+        <div className={`ga-clause ga-clause-${clause.tone}`}>
+            <i className={`bi ${CLAUSE_ICONS[clause.tone]}`} />
+            <span>{clause.text}</span>
+            {source && (
+                <span className={`chip ${source === 'platform' ? 'chip-muted' : 'chip-primary'}`}>
+                    {source === 'platform' ? 'Platform' : 'This group'}
+                </span>
+            )}
+        </div>
+    );
+}
+
+export function GeofenceSection({ group }: { group: GroupRow }) {
+    const { can: canEdit } = useCan(GROUP_GEOFENCE_EDIT_PERMS);
+    const save = GroupModel.useSave();
+
+    // The platform floor + the server's view of this group's rule. 4xx
+    // (MojoError) never retries under mojoQueryDefaults; a 403 lands in
+    // `error` and the card degrades — fail-closed, never a spinner forever.
+    const floorQuery = useQuery({
+        queryKey: ['geo-rules', group.uuid ?? group.id],
+        queryFn: async (): Promise<GeoRulesConfig> => {
+            const body = await mojoCall('/api/geo/rules', {
+                params: group.uuid ? { group_uuid: group.uuid } : {},
+            });
+            return (body.data ?? {}) as GeoRulesConfig;
+        },
+    });
+
+    const floorRule: GeofenceRule = floorQuery.data?.system?.rule ?? {};
+    // The group rule: prefer the server's view (the /api/geo/rules payload
+    // echoes it), else the metadata blob on the row.
+    const groupRuleStored: GeofenceRule = useMemo(() => {
+        const fromServer = floorQuery.data?.group?.rule;
+        if (fromServer !== undefined && fromServer !== null) return fromServer;
+        const meta = group.metadata?.geofence;
+        return meta && typeof meta === 'object' && !Array.isArray(meta) ? meta as GeofenceRule : {};
+    }, [floorQuery.data, group.metadata]);
+
+    const advancedForced = isAdvancedRule(groupRuleStored);
+
+    // Editor state, re-baselined whenever the STORED rule changes identity
+    // (post-save refetch). A live form must not be rebuilt under the user —
+    // the baseline key ties state to the stored snapshot (source
+    // _onModelChange no-op semantics).
+    const baselineKey = JSON.stringify(groupRuleStored);
+    const [editorState, setEditorState] = useState<{ key: string; value: RuleEditorValue }>(() => ({
+        key: baselineKey,
+        value: makeRuleEditorValue(groupRuleStored),
+    }));
+    if (editorState.key !== baselineKey) {
+        setEditorState({ key: baselineKey, value: makeRuleEditorValue(groupRuleStored) });
+    }
+    const [status, setStatus] = useState<{ text: string; tone: 'muted' | 'ok' | 'bad' }>({ text: '', tone: 'muted' });
+
+    const floorClauses = describeRule(floorRule);
+    const groupClauses = describeRule(groupRuleStored);
+    const floorEmptyText = floorQuery.isPending
+        ? 'Loading platform rules…'
+        : floorQuery.isError
+            ? 'Platform rules unavailable (requires the global geofence permission).'
+            : 'No platform rules — the floor allows all locations.';
+
+    const saveRules = async () => {
+        const newRule: GeofenceRule | null = ruleFromEditorValue(editorState.value);
+        if (newRule === null) {
+            setStatus({ text: 'Not saved — the rule must be a valid JSON object.', tone: 'bad' });
+            toast.error('Not saved — the rule must be a valid JSON object.');
+            return;
+        }
+
+        const payload = buildGroupRulePayload(groupRuleStored, newRule);
+        if (payload === null) {
+            setStatus({ text: 'No changes to save.', tone: 'muted' });
+            return;
+        }
+
+        setStatus({ text: 'Saving…', tone: 'muted' });
+        try {
+            await save.mutateAsync({ id: group.id, changes: { metadata: { geofence: payload } } });
+            await floorQuery.refetch();
+            setStatus({ text: 'All changes saved.', tone: 'ok' });
+            toast.success('Group geofence rules saved');
+        } catch (err) {
+            const msg = err instanceof Error ? err.message : 'Failed to save the group rules';
+            setStatus({ text: msg, tone: 'bad' });
+            toast.error(msg);
+        }
+    };
+
+    return (
+        <>
+            <Eyebrow>Geofencing</Eyebrow>
+            <p className="dim" style={{ margin: '0 0 12px' }}>
+                Rules here apply only to this group and can only <b>tighten</b> the
+                platform rules — they can't loosen the platform floor.
+            </p>
+
+            <div className="ga-geo-card">
+                <div className="ga-geo-card-head"><i className="bi bi-lock" /> Platform floor — read only</div>
+                <div className="ga-geo-card-body">
+                    {floorClauses.length > 0
+                        ? floorClauses.map((c, i) => <ClauseRow key={i} clause={c} />)
+                        : <div className="dim">{floorEmptyText}</div>}
+                </div>
+            </div>
+
+            {canEdit ? (
+                <div className="ga-geo-card">
+                    <div className="ga-geo-card-head">This group's additional rules</div>
+                    <div className="ga-geo-card-body">
+                        <GeofenceRuleEditor
+                            value={editorState.value}
+                            onChange={(value) => setEditorState({ key: baselineKey, value })}
+                            advancedForced={advancedForced}
+                            disabled={save.isPending}
+                        />
+                        <div className="ga-geo-save-row">
+                            <span className={`ga-geo-status ${status.tone === 'bad' ? 'ga-status-bad' : status.tone === 'ok' ? 'ga-status-ok' : 'dim'}`}>
+                                {status.text}
+                            </span>
+                            <button className="btn btn-primary btn-compact" disabled={save.isPending} onClick={() => void saveRules()}>
+                                <i className="bi bi-check-lg" /> Save group rules
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <div className="ga-geo-card">
+                    <div className="ga-geo-card-body dim">
+                        <i className="bi bi-eye" /> You have read-only access to this group's geofence rules.
+                    </div>
+                </div>
+            )}
+
+            <div className="ga-geo-card">
+                <div className="ga-geo-card-head">
+                    Effective policy for this group
+                    <span className="ga-geo-eyebrow">what a visitor experiences</span>
+                </div>
+                <div className="ga-geo-card-body">
+                    {floorClauses.length === 0 && groupClauses.length === 0 ? (
+                        <div className="dim">No rules apply — all locations are allowed.</div>
+                    ) : (
+                        <>
+                            {floorClauses.map((c, i) => <ClauseRow key={`f${i}`} clause={c} source="platform" />)}
+                            {groupClauses.map((c, i) => <ClauseRow key={`g${i}`} clause={c} source="group" />)}
+                        </>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}

package/src/admin/identity/groups/group-sections/IdentitySection.tsx

@@ -0,0 +1,211 @@
+// group-sections/IdentitySection.tsx — GroupIdentitySection port
+// (GroupView.js:354-731) at source fidelity, in the house autosave idiom:
+// web-mojo's pencil-prompt-per-row grid collapses into ONE FormView autosave
+// surface carrying the safely editable fields — name, kind (combo over
+// the full known-kind catalog + free entry), uuid, and the metadata.*
+// settings (timezone / short_name / domain /
+// auth_domain / portal / email_template). Dotted names → partial dicts →
+// the backend's JSONField dict-merge, so editing one key never clobbers the
+// rest of metadata.
+//
+// Parent assignment stays read-only until the backend can reject hierarchy
+// cycles. Existing parents may only be cleared to the top level. EOD hour
+// lives outside FormView because the source saved a NUMBER (0–23, or null
+// to clear) and
+//     select values ride the form pipeline as strings.
+//
+// UUID extras (source onActionGenerateUuid): when unset, a Generate button
+// mints backend-shaped `uuid4().hex` (32 lowercase hex chars, no hyphens)
+// after a confirm.
+import {
+    Badge, Eyebrow, FlatRow, FormView,
+    fmt, modal, toast, type Field,
+} from 'portal-mojo/ui';
+import { GroupModel, type GroupRow } from '../models';
+import { EOD_HOUR_OPTIONS, GROUP_KIND_COMBO_OPTIONS, kindLabel } from './models';
+
+const IDENTITY_FIELDS: Field[] = [
+    { name: 'name', type: 'text', label: 'Name', columns: 6 },
+    {
+        name: 'kind', type: 'combo', label: 'Kind', columns: 6,
+        options: GROUP_KIND_COMBO_OPTIONS, placeholder: 'Type or pick a kind…',
+        help: 'Drives sidebar context; free-typed kinds are allowed.',
+    },
+    {
+        name: 'uuid', type: 'text', label: 'UUID', columns: 6,
+        placeholder: '32-character hex string',
+    },
+];
+
+const SETTINGS_FIELDS: Field[] = [
+    { name: 'metadata.timezone', type: 'timezone', label: 'Timezone', columns: 6 },
+    { name: 'metadata.short_name', type: 'text', label: 'Short name', columns: 6 },
+    { name: 'metadata.domain', type: 'text', label: 'Domain', columns: 6, placeholder: 'example.com' },
+    {
+        name: 'metadata.auth_domain', type: 'text', label: 'Auth domain', columns: 6,
+        placeholder: 'auth.example.com', help: 'Used for white-label login pages.',
+    },
+    { name: 'metadata.portal', type: 'text', label: 'Portal URL', columns: 6, placeholder: 'https://…' },
+    {
+        name: 'metadata.email_template', type: 'text', label: 'Email template', columns: 6,
+        placeholder: 'Template prefix',
+    },
+];
+
+/** Backend-shaped uuid4().hex: 32 lowercase hex chars, no hyphens. */
+function generateUuidHex(): string | null {
+    try {
+        if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+            return crypto.randomUUID().replace(/-/g, '');
+        }
+        if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+            const bytes = new Uint8Array(16);
+            crypto.getRandomValues(bytes);
+            return Array.from(bytes).map((b) => b.toString(16).padStart(2, '0')).join('');
+        }
+    } catch {
+        // fall through
+    }
+    return null;
+}
+
+function shown(value: unknown): string {
+    return value == null || value === '' ? 'Not set' : String(value);
+}
+
+export function IdentitySection({ group, editable }: { group: GroupRow; editable: boolean }) {
+    const save = GroupModel.useSave();
+
+    const eodRaw = group.metadata?.eod_hour;
+    const eodHour = typeof eodRaw === 'number' ? eodRaw
+        : typeof eodRaw === 'string' && eodRaw !== '' ? Number(eodRaw)
+        : null;
+    const eodValid = eodHour !== null && Number.isFinite(eodHour) && eodHour >= 0 && eodHour <= 23;
+    if (eodHour !== null && !eodValid) {
+        console.warn(`IdentitySection: metadata.eod_hour ${JSON.stringify(eodRaw)} is not 0–23 — showing "Not set"`);
+    }
+
+    const saveEod = async (raw: string) => {
+        // '' clears (null deletes the key under the JSONField merge); numbers
+        // ride the wire as real numbers (source parity — never "17" strings).
+        const next = raw === '' ? null : Math.max(0, Math.min(23, Number(raw)));
+        try {
+            await save.mutateAsync({ id: group.id, changes: { metadata: { eod_hour: next } } });
+            toast.success('EOD hour updated');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to update EOD hour');
+        }
+    };
+
+    const clearParent = async () => {
+        try {
+            await save.mutateAsync({ id: group.id, changes: { parent: null } });
+            toast.success('Parent cleared — now a top-level group');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to update parent');
+        }
+    };
+
+    const generateUuid = async () => {
+        const generated = generateUuidHex();
+        if (!generated) {
+            toast.error('UUID generation not supported in this browser');
+            return;
+        }
+        const ok = await modal.confirm({
+            title: 'Generate UUID',
+            message: <>Generate a new UUID for this group?<br /><code>{generated}</code></>,
+            confirmText: 'Generate',
+        });
+        if (!ok) return;
+        try {
+            await save.mutateAsync({ id: group.id, changes: { uuid: generated } });
+            toast.success('UUID updated');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to update UUID');
+        }
+    };
+
+    return (
+        <>
+            <Eyebrow>Profile</Eyebrow>
+            {editable ? (
+                <>
+                    <p className="dim" style={{ margin: '0 0 12px' }}>Edits save on commit — no save button.</p>
+                    <FormView model={GroupModel} row={group} fields={IDENTITY_FIELDS} />
+                </>
+            ) : (
+                <>
+                    <FlatRow label="Name">{group.name}</FlatRow>
+                    <FlatRow label="Kind">{shown(group.kind)}</FlatRow>
+                    <FlatRow label="UUID"><code>{shown(group.uuid)}</code></FlatRow>
+                </>
+            )}
+            {editable && !group.uuid && (
+                <button className="btn btn-compact" style={{ marginTop: 4 }} onClick={() => void generateUuid()}>
+                    <i className="bi bi-shuffle" /> Generate UUID
+                </button>
+            )}
+            <div className="ga-parent-row">
+                <FlatRow label="Parent group">
+                    <span>{group.parent?.name ?? 'None — top-level group'}</span>
+                    {editable && group.parent?.id && (
+                        <button className="btn btn-compact" style={{ marginLeft: 10 }} onClick={() => void clearParent()}>
+                            <i className="bi bi-x-circle" /> Clear to top-level
+                        </button>
+                    )}
+                </FlatRow>
+                {editable && group.parent?.id && (
+                    <p className="field-help">Assigning or changing a parent is unavailable until the server validates hierarchy cycles.</p>
+                )}
+            </div>
+
+            <Eyebrow>Settings</Eyebrow>
+            {editable ? (
+                <FormView model={GroupModel} row={group} fields={SETTINGS_FIELDS} />
+            ) : (
+                <>
+                    <FlatRow label="Timezone">{shown(group.metadata?.timezone)}</FlatRow>
+                    <FlatRow label="Short name">{shown(group.metadata?.short_name)}</FlatRow>
+                    <FlatRow label="Domain">{shown(group.metadata?.domain)}</FlatRow>
+                    <FlatRow label="Auth domain">{shown(group.metadata?.auth_domain)}</FlatRow>
+                    <FlatRow label="Portal URL">{shown(group.metadata?.portal)}</FlatRow>
+                    <FlatRow label="Email template">{shown(group.metadata?.email_template)}</FlatRow>
+                </>
+            )}
+            <div className="ga-eod-row">
+                {editable ? (
+                    <label className="field">
+                        <span className="field-label">EOD hour</span>
+                        <select
+                            className="input"
+                            value={eodValid ? String(eodHour) : ''}
+                            onChange={(e) => void saveEod(e.target.value)}
+                        >
+                            <option value="">Not set</option>
+                            {EOD_HOUR_OPTIONS.map((o) => (
+                                <option key={o.value} value={String(o.value)}>
+                                    {String(o.value).padStart(2, '0')}:00 — {o.label}
+                                </option>
+                            ))}
+                        </select>
+                        <span className="field-help">Hour of the day (24h) when this group rolls over.</span>
+                    </label>
+                ) : (
+                    <FlatRow label="EOD hour">{eodValid ? `${String(eodHour).padStart(2, '0')}:00` : 'Not set'}</FlatRow>
+                )}
+            </div>
+
+            <Eyebrow>Record</Eyebrow>
+            <FlatRow label="ID"><code>{group.id}</code></FlatRow>
+            <FlatRow label="Status">
+                <Badge tone={group.is_active ? 'success' : 'muted'}>{group.is_active ? 'Active' : 'Inactive'}</Badge>
+            </FlatRow>
+            <FlatRow label="Kind">
+                {group.kind ? <Badge tone="primary">{kindLabel(group.kind)}</Badge> : <span className="dim-italic">Not set</span>}
+            </FlatRow>
+            <FlatRow label="Created"><code>{fmt.datetime(group.created)}</code></FlatRow>
+            <FlatRow label="Modified"><code>{fmt.datetime(group.modified)}</code></FlatRow>
+        </>
+    );
+}

package/src/admin/identity/groups/group-sections/MembersSection.tsx

@@ -0,0 +1,25 @@
+// Thin app adapter: the package owns member listing, admission, and detail.
+// Cross-domain navigation stays in the app so the package never imports the
+// app-owned GroupDetail implementation.
+import { GroupMembersPanel } from '../../members';
+import { UserDetail } from '../../users/UserDetail';
+import type { GroupRow } from '../models';
+import { modal } from 'portal-mojo/ui';
+
+export function MembersSection({ group, openGroup }: { group: GroupRow; openGroup: (id: number) => void }) {
+    return (
+        <GroupMembersPanel
+            group={group}
+            onNavigateGroup={openGroup}
+            onNavigateUser={(id) => {
+                void modal.detail((close) => (
+                    <UserDetail
+                        id={id}
+                        onClose={() => close(null)}
+                        onOpenGroup={openGroup}
+                    />
+                ));
+            }}
+        />
+    );
+}

package/src/admin/identity/groups/group-sections/OverviewSection.tsx

@@ -0,0 +1,112 @@
+// group-sections/OverviewSection.tsx — GroupOverviewSection port
+// (GroupView.js:98-349): four KPI cards (Members / Sub-Groups / API Keys /
+// Last activity), the "This group" flat rows, the monospace hierarchy
+// mini-tree with cross-record navigation, and the recent-activity timeline
+// fed by the group's OBJECT logs (model_name=account.Group — the source's
+// shared audit collection, not the gid context feed).
+import {
+    Badge, Eyebrow, FlatRow, MetricCard, Timeline,
+    fmt, type TimelineItem,
+} from 'portal-mojo/ui';
+import { GroupApiKeyModel, type GroupApiKeyRow } from '../../../credentials';
+import { LogModel, type LogRow } from 'portal-mojo/admin/observability';
+import { useModelList } from 'portal-mojo/client/runtime';
+import { GroupModel, MemberModel, type GroupRow } from '../models';
+import { kindLabel } from './models';
+import { LOG_TONE, groupAuditParams } from './shared';
+
+export function OverviewSection({ group, openGroup, canViewCredentials, canViewAudit }: {
+    group: GroupRow;
+    openGroup: (id: number) => void;
+    canViewCredentials: boolean;
+    canViewAudit: boolean;
+}) {
+    const { data: subs } = GroupModel.useList({ parent: group.id, size: 25, sort: 'name' });
+    const { data: memberPeek } = MemberModel.useList({ group: group.id, size: 1, is_active: true });
+    const { data: keyPeek } = useModelList<GroupApiKeyRow>(
+        GroupApiKeyModel.endpoint,
+        { group: group.id, size: 1, graph: 'default' },
+        { enabled: canViewCredentials },
+    );
+    const { data: logs } = useModelList<LogRow>(
+        LogModel.endpoint,
+        { ...groupAuditParams(group.id), size: 5 },
+        { enabled: canViewAudit },
+    );
+
+    const subGroups = subs?.rows ?? [];
+    const subCount = subs?.count ?? subGroups.length;
+    const memberCount = memberPeek?.count ?? group.member_count;
+    const items: TimelineItem[] = (logs?.rows ?? []).map((l) => ({
+        tone: LOG_TONE[l.level] ?? 'muted',
+        title: l.kind ?? l.level,
+        body: l.log ? <span className="dim">{fmt.truncate(l.log, 90)}</span> : undefined,
+        meta: fmt.relative(l.created),
+    }));
+
+    const parentLink = group.parent?.id ? (
+        <a href="#" onClick={(e) => { e.preventDefault(); openGroup(group.parent!.id); }}>
+            {group.parent.name ?? `#${group.parent.id}`}
+        </a>
+    ) : null;
+
+    return (
+        <>
+            <div className="grid gap-3 grid-cols-2 xl:grid-cols-4" style={{ marginBottom: 14 }}>
+                <MetricCard label="Members" value={memberCount} />
+                <MetricCard label="Sub-groups" value={subs ? subCount : '—'} />
+                <MetricCard label="API keys" value={canViewCredentials ? (keyPeek?.count ?? '—') : 'Unavailable'} />
+                <MetricCard label="Last activity" value={fmt.relative(group.last_activity, '—')} />
+            </div>
+
+            <Eyebrow>This group</Eyebrow>
+            <FlatRow label="Name">{group.name}</FlatRow>
+            <FlatRow label="Kind">
+                {group.kind ? <Badge tone="primary">{kindLabel(group.kind)}</Badge> : <span className="dim-italic">Not set</span>}
+            </FlatRow>
+            <FlatRow label="Status">
+                <Badge tone={group.is_active ? 'success' : 'muted'}>{group.is_active ? 'Active' : 'Inactive'}</Badge>
+            </FlatRow>
+            <FlatRow label="Parent">
+                {parentLink ?? <span className="dim-italic">None — top-level group</span>}
+            </FlatRow>
+
+            <Eyebrow>Hierarchy</Eyebrow>
+            {/* GroupHierarchyTree port — the └─/├─ rules are decorative; the
+                links are the cross-record nav (parent + sub-group open a
+                STACKED GroupDetail via native <dialog> stacking). */}
+            <div className="ga-tree">
+                {group.parent?.id ? (
+                    <a href="#" className="dim" onClick={(e) => { e.preventDefault(); openGroup(group.parent!.id); }}>
+                        {group.parent.name ?? `#${group.parent.id}`}
+                    </a>
+                ) : (
+                    <span className="dim">Top-level group</span>
+                )}
+                <div>
+                    └─ <b>{group.name}</b>
+                    <span className="dim">
+                        {' '}· {memberCount} member{memberCount === 1 ? '' : 's'} · {subCount} sub-group{subCount === 1 ? '' : 's'}
+                    </span>
+                </div>
+                {subGroups.length > 0 && (
+                    <div className="ga-tree-children">
+                        {subGroups.map((sg, i) => (
+                            <div key={sg.id}>
+                                {i === subGroups.length - 1 ? '└─' : '├─'}{' '}
+                                <a href="#" onClick={(e) => { e.preventDefault(); openGroup(sg.id); }}>{sg.name}</a>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            <Eyebrow>Recent activity</Eyebrow>
+            {canViewAudit ? (
+                <Timeline items={items} emptyText="No recorded activity for this group yet." />
+            ) : (
+                <p className="dim-italic">Recent activity requires global log or security access.</p>
+            )}
+        </>
+    );
+}