Admin Panel Redesign — Foundation

Goal

Land the shared CSS + assets + role-switch JS that every subsequent screen consumes. No screen-level UI yet — pure scaffolding.

Tasks

• [x] Phase 1 task 1 (amended H6 + H10): create design-system/admin/colors_and_type.css — use @import url('../bundle/project/colors_and_type.css'); then rename every consumed token to --color-* / --font-* / --tracking-* / --radius-* / --shadow-* / --ease-* / --duration-* (Tailwind v4 @theme inline convention). Record old→new mapping in REGISTER-NOTES.md.
• [x] NEW (H6): create design-system/admin/_admin-overrides.css — only unset / delete the gold + glass + Navy + Warn leftovers (--gold: unset; --gold-light: unset; --gold-dim: unset; --gold-border: unset; --skel-accent: unset; --navy: unset; --warn: unset; etc.). Brand workstream co-signs at Phase 1 close.
• [x] NEW (M14): create design-system/admin/admin.css single entry: @import url('colors_and_type.css'); @import url('_admin-overrides.css'); @import url('_shell.css'); @import url('_components.css');. Every HTML links this one file.
• [x] Phase 1 task 2 (amended H3 + H11 + M16 + M18 + M21): create design-system/admin/_shell.css — shell layout primitives scoped to [data-app="admin"]: .shell (CSS grid sidebar 280px + main 1fr, clamp() so degrades 1440→1024→768 without breakage), .shell__sidebar with Essentials group (Theme/Buildings/Galleries/Units) always expanded + Advanced group collapsed by default (Features/Labels/Levels/Amenity/Plans/Plates/Location), .shell__topbar (64px), .shell__trial-banner with data-banner-scope="owner-admin" attribute driving counter visibility (Owner/Admin → full counters; Manager/Editor/Agent → tier + days only; Free Guest → "Guest access" chip only), .shell__content (Warm Stone 32px padding max-width 1240px), .shell__section-header, .shell__footer with Privacy · Terms · Cookies row.
• [x] Phase 1 task 3 (amended M7 + M9 + M19 + M22): create design-system/admin/_components.css — reusable bits with motion tokens (var(--duration-*) + var(--ease-*) on every transition:) and decision-tree comment for hide-vs-lock pattern (destructive on others → hide; non-sensitive write → lock-icon). Components: .btn-primary/secondary/ghost/danger, .input, .textarea, .select, .table + .table--editable, .tabs, .chip + .chip--filter, .status-pill (consumes --color-status-* only, no hex), .panel (no glass), .modal-stub ships with generic post-trial copy "Your Trial ended. Contact [email protected] to reactivate or upgrade →" + Phosphor clock-counter-clockwise (H8), .banner + variants, .role-badge (5-stop role-badge token set from Stone + Moss scale per M7), .lock-icon.
• [x] Phase 1 task 4 (unchanged): assemble Phosphor SVG sprite at design-system/admin/assets/icons.svg. ~30 icons. Pull from Phosphor 2.x regular. Source URLs documented in scripts/build-phosphor-sprite.sh (L10).
• [x] Phase 1 task 5 (amended M8): copy three wordmark variants from design-system/sales/assets/brand/ (or assemble) into design-system/admin/assets/brand/: wordmark.svg, wordmark-mark.svg, wordmark-on-dark.svg.
• [x] NEW (H12 + H13): create design-system/admin/assets/role-switch.js (~20 lines). Reads location.search, sets body[data-role="<role>"] on the body element. Header comment MUST state: "MOCKUP-ONLY. React role-preview MUST be server-issued ephemeral token, Owner+Admin only (cf. View-as-Agent §4.6). Never URL-parse role client-side in production."
• [x] Phase 1 task 6 (unchanged): create design-system/admin/index.html — review menu page with thumb grid + name + screen number for each of the 16 screens (15 listed + new 02b-overview-guest.html).
• [x] NEW (L10): create scripts/build-phosphor-sprite.sh — tiny shell script documenting source URLs, idempotent re-run.
• [x] NEW (M5): every voice-bearing string in _components.css .modal-stub and _shell.css .shell__trial-banner placeholder copy carries <!-- [copy:provisional] --> HTML comment.
• [x] Verification (amended H4 + M17): drift grep grep -REn 'rgba\(\s*255\s*,\s*255\s*,\s*255\s*,\s*0?\.[0-9]+\)|backdrop-filter|-webkit-backdrop-filter|Cormorant|Garamond|--gold|--navy|--warn' design-system/admin/ returns 0. Token-only-via-var grep grep -REn '#[0-9A-Fa-f]{3,8}' design-system/admin/_shell.css design-system/admin/_components.css returns 0. AU English grep returns 0. All 3 mechanical gates passed CONV-37 (drift uses refined regex per REGISTER-NOTES verification-scope clarification).
• [ ] Phase 1 exit gate: index.html opens; all 16 thumb slots placeholder-render; no console errors. Brand workstream co-sign on _admin-overrides.css recorded in REGISTER-NOTES.md. Phase-gate handoff: Gate-passed: phase-1. Visual half PASSED CONV-37 (Playwright walk @ 1440×900; 16/16 thumbs; 0 console errors). Remaining: brand-language-and-identity co-sign on _admin-overrides.css.

What's Next

Build complete + visual gate passed (CONV-37). Only outstanding item is brand-language-and-identity workstream co-sign on _admin-overrides.css — once that lands in REGISTER-NOTES sign-off, flip status → done, emit Gate-passed: phase-1, unblock admin-panel-onboarding-overview.

Key Context

• Plan: plans/admin-panel-redesign.md (Phase 1)
• SPEC-AMEND v1.1 (CONV-36): 16 HIGH findings applied inline; this workstream absorbs H4 + H6 + H10 + H11 + H12 + H13 + M14 + M15 + M16 + M17 + M18 + M21 + M22 + L10
• Token source: design-system/bundle/project/colors_and_type.css
• Brandbook canon: design-system/bundle/project/reference/brandbook-v2.html
• ADR 0015 (canonical design inputs): atelier NOT canon; bundle + Nadezhda + audit only
• ADR 0002 (Phosphor iconset)
• Sibling workstream: brand-language-and-identity (token revisions may land mid-build)

Session Log

• CONV-36 (2026-05-11): Workstream created from ratified plans/admin-panel-redesign.md + SPEC-AMEND v1.1
• CONV-38 (2026-05-11): completed Phase 1 task 1 — colors_and_type.css (@import bundle + --color-* alias layer for 50+ tokens, NEW role-badge 5-stop scale per M7) + REGISTER-NOTES.md (mapping table + H4 verification-scope clarification)
• CONV-38 (2026-05-11): completed H6 — _admin-overrides.css defensive guard unset-ing gold/skel-accent/navy/warn/glass tokens (plus their --color-* aliases); brand co-sign pending Phase 1 close
• CONV-38 (2026-05-11): completed M14 — admin.css single-entry stylesheet (4 ordered @imports). Every HTML links this one file
• CONV-38 (2026-05-11): completed Phase 1 task 2 — _shell.css (~310 lines): shell grid w/ clamp() 1440→1024→768, Essentials/Advanced sidebar groups via <details>, 64px topbar, data-banner-scope trial-banner counter scoping (M21), data-role="free-guest" topbar chip, content+section-header, M18 footer Privacy/Terms/Cookies. All 6 transitions consume var(--duration-*) + var(--ease-*) (M9)
• CONV-38 (2026-05-11): completed Phase 1 task 3 — _components.css (~530 lines): full button library, inputs (focus rings via moss-bg), table + table--editable, tabs (aria-selected), chips (filter active state), .status-pill (status-* tokens only — M17 hex 0), .panel (no glass), .modal-stub (H8 canonical HTML template baked in as comment, M22 server-strip-vs-opacity doc), .banner (info/warning/success), .role-badge (M7 — 5 stops + guest), .lock-icon. HIDE-vs-LOCK decision-tree commented at file top (M19). Refined drift-grep regex with non-letter boundary so .banner--warning doesn't false-positive on --warn substring.
• CONV-38 (2026-05-11): completed Phase 1 task 4 + L10 — scripts/build-phosphor-sprite.sh fetches 37 icons from phosphor-icons/core@main/raw/regular, strips outer <svg>, rewraps as <symbol viewBox="0 0 256 256">, writes to design-system/admin/assets/icons.svg (21.9 KB). Idempotent. Covers navigation + actions + RBAC + billing + banner-status glyphs.
• CONV-38 (2026-05-11): completed Phase 1 task 5 (M8) — 3 wordmark variants in design-system/admin/assets/brand/: wordmark.svg (copied from sales — 56×38 Rib Fan, currentColor), wordmark-mark.svg (NEW — compact 32×32 mark for sidebar/favicon, currentColor), wordmark-on-dark.svg (NEW — 56×38 with explicit #F6F5F2 skel-bg stroke for dark surfaces).
• CONV-38 (2026-05-11): completed H12 + H13 — assets/role-switch.js (~37 lines), reads ?as= URL param, validates against ALLOWED list (owner/admin/manager/editor/agent/free-guest), sets <body data-role="…">. Header comment carries verbatim MOCKUP-ONLY production warning + references View-as-Agent §4.6. Node syntax check passes.
• CONV-38 (2026-05-11): completed Phase 1 task 6 + M5 — design-system/admin/index.html review menu, 16 thumb cards across 3 sections (Onboarding+Overview / Project editor / RBAC+Activity log). Cards link to target HTMLs (currently 404, render placeholder Phosphor icon + "Pending · Phase N" chip). Voice-bearing copy tagged <!-- [copy:provisional] -->. Hero wordmark inlined for currentColor recolouring. Final verification: 16/16 thumbs, 16/16 icon refs resolve in sprite, HTML well-formed, drift+AU+hex hard gates all 0 hits.
• CONV-38 (2026-05-11): closed mechanical-verification checklist — 7/7 gates pass (drift, hex, AU, sprite refs, motion tokens, JS syntax, shell syntax). Exit-gate status table recorded in REGISTER-NOTES.md. Outstanding: Sergei in-browser walk + brand-language co-sign.
• CONV-38 (2026-05-11): Playwright walk @ 1440×900 — 16/16 thumbs render, Phosphor icons resolve, Skeleton White / Warm Stone canon visually holds, 0 console errors/warnings. Visual exit-gate ✓ passed. Only outstanding gate item is brand-language workstream co-sign.