Admin Panel Redesign — RBAC + Activity Log + Settings

Goal

Three workspace-level surfaces (independent from project-editor sections): Team management (RBAC affordances + View-as-Agent entry-point + Free Guest explainer), Activity log (audit surface per ADR 0004 v2 + role-scoped filtering + pseudonymisation sample), and Settings hub (Organisation / Billing / Integrations / Notifications / Security / Domains — single home for admin power-user, infrequent-but-cumulative scope).

Method — per-module design loop

All three screens are density modules (table/form-heavy). Per workstream-method amendment in admin-panel-project-editor.md § Method, each runs the 4-step loop: Brief → /wireframe 2-3 lo-fi variants → Implement → Live iterate (/inspect + /make-tweakable). PAUSE checkbox between screens.

Module-type classification

Tasks

14-team.html — Team management

• [ ] Phase 4 task 1 (amended H1 + H14 + M10 + M19 + M20): create 14-team.html.
  • Topbar: breadcrumb (Workspace › Team) + Add member CTA.
  • Member table: avatar + name + email + role chip + last-active + actions. 5 sample rows covering each role.
  • Role-tooltip with studio-native examples (H1) per role: e.g. "Content Editor = your 3D artist updating renders; Sales Manager = your account manager handling developer-clients". Tooltip text captured in REGISTER-NOTES.md.
  • Role legend below table — 5 roles + one-line permission summary, per ratified permission-and-tenancy-model.md Block B.
  • Empty seat indicator scoped by trial status (3 of 3 free seats / X of N paid seats / upgrade CTA at cap).
  • Pending invitations panel role-gated (M20): Owner/Admin → full view; Sales Manager → own-team invites only; Content Editor / Sales Agent → hidden.
  • Free Guest section (M10): inline help-popover next to header with one-line definition + link to (future) docs page. Shows tenants with guest membership.
  • View-as-Agent entry-point (H14): Owner-only action on Sales Agent rows, opens a stub modal/route.
  • Destructive actions outside role scope HIDDEN, not locked (M19): comment in _components.css documents hide-vs-lock decision tree. Lock-icon reserved for non-sensitive write actions where upgrade-path discoverability is valuable.

15-activity.html — Activity (audit) log

• [ ] Phase 4 task 2 (amended H9 + H15 + H16 + M12): create 15-activity.html.
  • Topbar: breadcrumb (Workspace › Activity) + filter chips.
  • Filter chips (H9): date range, actor, target user / Org, action type, billing-event subgroup (subscription / dispute / deletion_journal stage).
  • Filter scoping legend (H15): rendered on screen for React-build conformance — Sales Agents see only own actions; Sales Manager sees own team's; Content Editor sees own + content-section actions; Owner / Admin see all.
  • Timeline: reverse-chrono. Each entry: timestamp (JetBrains Mono) + actor avatar + role chip + verb + target + diff summary.
  • Sample entries (10–15) MUST include: ≥1 chargeback freeze event + ≥1 deletion_journal stage transition + ≥1 customer.subscription.deleted webhook entry + ≥1 pseudonymised entry (H16) with canonical treatment (empty avatar → Phosphor user-circle outline + "Archived actor · {role retained} · hash truncated" + retention-policy tooltip) + ≥1 View-as-Agent invocation (H14) with pii_class=personal_content badge + read-only-mode indicator + auto-revoke timestamp.
  • Retention tag info-icon (M12): topbar tag "12 months retained, then archived (pseudonymised) · 7-year horizon" + info-icon → stub /docs/audit-retention URL.
  • Export CSV button (visual only).

16-settings.html — Settings hub (NEW, SK-260511-02 amendment)

• [ ] Phase 4 task 3 — 16-settings.html [density / wireframe first]: workspace-level settings hub.
  • Topbar: breadcrumb (Workspace › Settings).
  • Left section nav (6 sections, vertical list): Organisation / Billing & Plans / Integrations / Notifications / Security / Domains.
  • Right pane: Stone card per section with editable fields.
  • Organisation: workspace name + logo upload + billing address + subdomain (M1 «change later in Settings» promise lands here — read-only display + Contact-Support CTA Stage 1, full change-flow Phase 1.7+).
  • Billing & Plans: current tier badge (Trial / Pro / Studio) + next invoice date + payment method (last-4 placeholder) + invoice history table (3 sample rows) + "Manage in Stripe portal" CTA (ADR 0017). Trial banner: «N days remaining · Upgrade now».
  • Integrations: webhook endpoints table (URL + event types + last-delivery) + Add webhook CTA + MCP tokens panel (ADR 0014) — generate token + revoke + scope display (read-only Iter 1). External SA external_actor: true audit-marker note.
  • Notifications: email digest cadence (daily / weekly / off) + alert preferences checklist (new buyer captured / unit reserved / trial ending / payment failed). Sender domain noted ADR 0011 (offplan.online primary).
  • Security: SSO connection status (Google connected · last login N hr ago, ADR 0005) + active sessions list + sign-out-all CTA + audit-log link to 15-activity.html.
  • Domains: custom-domain mapping placeholder ({org}.offplan.online default · custom domain coming Phase 1.7+) — info card, no input.
  • Role-gating: Owner/Admin → all sections visible + editable; Sales Manager → Organisation read + Notifications own + Security own sessions; Content Editor / Sales Agent → Notifications own + Security own sessions ONLY (other sections HIDDEN per M19 hide-not-lock).
  • Sidebar entry added to _shell.css footer (between Activity log and Sign out): Phosphor gear icon + label "Settings".
  • Topbar gear button in all screens (02-overview.html line 206 already exists; currently dead) → wire href="16-settings.html".

Verification

• [ ] Drift grep + AU grep + Phosphor + hex-literal greps on all three files.
• [ ] Role-switch JS exercised: ?as=owner shows all (Team + Activity + Settings all sections); ?as=ce hides destructive actions on Team + restricts Activity filter to content-section actions + restricts Settings to Notifications+Security own; ?as=sa restricts further.
• [ ] Role-chip palette consistent across 14-team.html (legend), member rows, 15-activity.html actor rows, and Settings billing-tier badge.
• [ ] Sidebar entry "Settings" added to all admin screens (02-overview.html + 02b-overview-guest.html Free Guest excluded + project-editor screens 03–13 after Phase 3). Topbar gear button wires to 16-settings.html.
• [ ] Phase-gate handoff: Gate-passed: phase-4.

PAUSE checkboxes

• [ ] PAUSE: Sergei walks 14-team.html → confirms before next.
• [ ] PAUSE: Sergei walks 15-activity.html → confirms before next.
• [ ] PAUSE: Sergei walks 16-settings.html → confirms before Phase-gate handoff.

What's Next

Out-of-order build (SK-260511-02): Sergei requested Team + Settings ahead of Phase 3 (project-editor). Acknowledged — Phase 4 surfaces are functionally independent of project-editor sections (no shell/component dependencies beyond what admin-panel-foundation already delivers). Phase 3 resumes after Phase 4.

Start 14-team.html via 4-step loop:

1. Brief — walk plan spec (line 343-356) + 3 amendments (H1 role-tooltip / H14 View-as-Agent / M10 Free Guest explainer) + 2 added amendments (M19 hide-not-lock destructive / M20 role-gated pending invites). List what's on screen, what's NOT, what's ambiguous. Sergei reacts.
2. /wireframe — 2-3 lo-fi IA variants:
   • (a) table-first (member table dominates, legend/seats/invites/free-guest as right rail or below)
   • (b) role-grouped cards (5 cards by role with members listed inside, no table)
   • (c) hybrid (compact table + collapsible role legend + tabs for Pending/Free Guest)
3. Implement chosen direction in design-system/admin/14-team.html.
4. Live iterate via /inspect for specific elements; /make-tweakable for role-chip palette + table density sliders.

Key Context

• Plan: plans/admin-panel-redesign.md (Phase 4)
• SPEC-AMEND v1.1 (CONV-36): absorbs H1 + H9 + H14 + H15 + H16 + M10 + M12 + M19 + M20
• Source plans: plans/permission-and-tenancy-model.md (ratified, role matrix + View-as-Agent §4.6), docs/decisions/0004-audit-log-retention.md v2 (logged events + pii_class + pseudonymisation)
• ADR 0004 v2 retention: 12mo active + 7yr archive + pseudonymisation + append-only + monthly hash-chain seal

Session Log

• CONV-36 (2026-05-11): Workstream created from ratified plans/admin-panel-redesign.md + SPEC-AMEND v1.1
• SK-260511-02 (2026-05-11): Settings hub added as 3rd Phase 4 deliverable (16-settings.html). Rationale: plan line 245-246 mentioned sidebar gear Settings entry and 02-overview.html line 206 had dead aria-label="Settings" button — Settings was implicit but undelivered. Settings hub absorbs Organisation / Billing (ADR 0017 + 0013) / Integrations (ADR 0014) / Notifications (ADR 0011) / Security (ADR 0005) / Domains. Workstream renamed admin-panel-rbac-audit-settings-flavoured (keeping slug admin-panel-rbac-audit for stability). 4-step design loop adopted per admin-panel-project-editor.md § Method. Out-of-order build flag: Sergei requested Team build ahead of Phase 3 project-editor — acknowledged; Phase 3 resumes after Phase 4. Plan plans/admin-panel-redesign.md Phase 4 deliverables technically expanded (2→3 screens) — minor amendment, no re-ratification (workstream-scoped scope addition).
• SK-260511-03 (2026-05-11): 14-team.html IMPLEMENTED in brandbook v2 canon — Variant A "Table-first" IA picked from 3-variant /wireframe sweep (docs/rendered/wireframes/14-team-ia-wireframes.html). 1250-line standalone HTML at design-system/admin/14-team.html consuming admin.css + Phosphor sprite (+2 icons: dots-three-vertical + envelope-simple) + role-switch.js. All amendments materialised: H1 studio-language tooltips, H14 View-as-Agent Owner-only kebab + stub modal w/ ADR 0004 v2 audit-entry shape, M10 Free Guest inline-help (Mered + H&deM Riviera narrative), M19 hide-not-lock destructive (CSS guards on body[data-role]), M20 role-gated pending invites. Bundled to preview via NEW scripts/build-rendered-admin.py self-contained bundler → live at preview.offplan.online/admin/14-team.html. Single-entry pattern adopted after initial 7-card deploy was rejected — sub-screens moved to /admin/ subfolder, dashboard top-level (1 card on preview index). Brandbook v2 also copied to docs/rendered/brandbook-v2.html. PAUSE checkbox for 14-team still [ ] — Sergei walk-through pending. Programmatic verification clean (drift greps + AU + hex-literals + HTML tag-balance + HTTP 200); visual not verified (no chrome-devtools MCP this session).