[Task] Centralize shared WebUI layouts and migrate module page frames #48

New Issue

2026-08-18T00:48:16+02:00

zemion commented

2026-08-18 00:48:16 +02:00

Outcome

Most GovOPlaN surfaces compose domain-neutral Core components and structural layouts instead of copying page, toolbar, pane, form, dialog, and state markup in each module. Modules retain domain data, permissions, wording, consequences, and workflow composition.

First slice

add Core PageLayout and PageHeader contracts;
make AdminPageLayout compose the shared frame;
migrate the Core fallback dashboard, Dashboard module, and Ops module;
register existing raw page-frame debt and reject new copies;
document component ownership and the extension/exception model.

Remaining migration

remove the registered legacy page frames in bounded module batches;
add a shared workspace/split-pane layout for explorers and list-detail surfaces;
centralize responsive page toolbars, content grids, form sections, dialog anatomy, and empty/error states;
prevent module CSS from overriding Core layout internals;
add browser accessibility and narrow-layout journeys for every structural contract.

Acceptance

new pages cannot introduce the registered raw outer frame;
shared layouts preserve help identity, localization, theming, loading and alert behavior;
representative Core and optional-module permutations compile and pass bundle budgets;
the debt baseline only decreases until it can be removed.

## Outcome Most GovOPlaN surfaces compose domain-neutral Core components and structural layouts instead of copying page, toolbar, pane, form, dialog, and state markup in each module. Modules retain domain data, permissions, wording, consequences, and workflow composition. ## First slice - add Core `PageLayout` and `PageHeader` contracts; - make `AdminPageLayout` compose the shared frame; - migrate the Core fallback dashboard, Dashboard module, and Ops module; - register existing raw page-frame debt and reject new copies; - document component ownership and the extension/exception model. ## Remaining migration - remove the registered legacy page frames in bounded module batches; - add a shared workspace/split-pane layout for explorers and list-detail surfaces; - centralize responsive page toolbars, content grids, form sections, dialog anatomy, and empty/error states; - prevent module CSS from overriding Core layout internals; - add browser accessibility and narrow-layout journeys for every structural contract. ## Acceptance - new pages cannot introduce the registered raw outer frame; - shared layouts preserve help identity, localization, theming, loading and alert behavior; - representative Core and optional-module permutations compile and pass bundle budgets; - the debt baseline only decreases until it can be removed.

zemion commented

2026-08-18 01:07:36 +02:00

Codex State: progress

Summary

Defined the four-layer ownership model: Core foundations, Core primitives, Core structural layouts, and module-owned domain compositions.
Added the shared PageLayout and PageHeader contracts and changed AdminPageLayout to compose them.
Migrated the Core fallback dashboard, Dashboard module, and Ops module as representative consumers.
Added an enforced legacy baseline: new raw page-frame copies are rejected and the remaining 20 legacy files may only decrease.

Changed Files

govoplan-core@934db6d
govoplan-dashboard@dbf46da
govoplan-ops@1082a65
govoplan@b76581a

Verification

govoplan-core/webui: npm run test:page-layout (passed)
govoplan-core/webui: npm run test:core-interface-patterns (passed)
govoplan-core/webui: npm run build (passed)
govoplan-dashboard/webui: npm run test:dashboard-layout (passed)
python -m unittest tests.test_documentation_structure (passed)
tools/checks/check-shared-webui-layouts.py (passed: 4 central consumers, 20 registered legacy files)
tools/checks/check-focused.sh (passed, including all 56 WebUI permutations and full-product bundle budgets)

Next / Blocked

Migrate the campaign page scaffold and its related campaign surfaces as the next high-leverage batch.
Design the next Core structural contract for split-pane/full-canvas workspaces after observing those variants.
Run a focused browser accessibility and narrow-layout journey once the next migration batch is in place.

Suggested status label: status/in-progress

## Codex State: progress ### Summary - Defined the four-layer ownership model: Core foundations, Core primitives, Core structural layouts, and module-owned domain compositions. - Added the shared PageLayout and PageHeader contracts and changed AdminPageLayout to compose them. - Migrated the Core fallback dashboard, Dashboard module, and Ops module as representative consumers. - Added an enforced legacy baseline: new raw page-frame copies are rejected and the remaining 20 legacy files may only decrease. ### Changed Files - `govoplan-core@934db6d` - `govoplan-dashboard@dbf46da` - `govoplan-ops@1082a65` - `govoplan@b76581a` ### Verification - `govoplan-core/webui: npm run test:page-layout (passed)` - `govoplan-core/webui: npm run test:core-interface-patterns (passed)` - `govoplan-core/webui: npm run build (passed)` - `govoplan-dashboard/webui: npm run test:dashboard-layout (passed)` - `python -m unittest tests.test_documentation_structure (passed)` - `tools/checks/check-shared-webui-layouts.py (passed: 4 central consumers, 20 registered legacy files)` - `tools/checks/check-focused.sh (passed, including all 56 WebUI permutations and full-product bundle budgets)` ### Next / Blocked - Migrate the campaign page scaffold and its related campaign surfaces as the next high-leverage batch. - Design the next Core structural contract for split-pane/full-canvas workspaces after observing those variants. - Run a focused browser accessibility and narrow-layout journey once the next migration batch is in place. Suggested status label: `status/in-progress`

zemion commented

2026-08-18 02:21:28 +02:00

Codex State: progress

Summary

Core dd7ad4d adds WorkspaceLayout navigation and split variants, central pane sizing, scroll ownership, responsive stacking, ARIA labels, contextual-help identity, and PageLayout workspace support.
Campaign 68459fd migrates all 16 recorded raw page frames and three navigation workspaces to the shared layouts, reducing recorded page-frame debt from 20 files to 4.
Approvals 4cf870f is the representative split-pane adopter, with shared responsive geometry and module-owned request/detail content.
Workspace 5e9234d adds raw-workspace enforcement and a four-file legacy baseline while extending focused checks for Campaign and Approvals.

Changed Files

govoplan-core/webui/src/components/PageLayout.tsx
govoplan-core/webui/src/components/WorkspaceLayout.tsx
govoplan-campaign/webui/src/features/campaigns
govoplan-approvals/webui/src/features/approvals/ApprovalsPage.tsx
govoplan/tools/checks/check-shared-webui-layouts.py

Verification

./tools/checks/check-focused.sh — passed, including 56 WebUI module permutations and full-product bundle budgets
Core PageLayout/WorkspaceLayout component tests and structural interface checks — passed
Campaign UI/lifecycle suites and accessibility contract — passed
Approvals backend tests, template contract, workspace contract, and manifest-shape validation — passed

Next / Blocked

Migrate the remaining four raw page frames in Access, Core Settings, Docs, and Mail.
Migrate the remaining four raw workspaces in Access, Core Settings, Docs, and Organizations.
Extract the next high-drift primitives: responsive toolbar, content grid/form sections, and dialog anatomy.

Suggested status label: status/in-progress

## Codex State: progress ### Summary - Core dd7ad4d adds WorkspaceLayout navigation and split variants, central pane sizing, scroll ownership, responsive stacking, ARIA labels, contextual-help identity, and PageLayout workspace support. - Campaign 68459fd migrates all 16 recorded raw page frames and three navigation workspaces to the shared layouts, reducing recorded page-frame debt from 20 files to 4. - Approvals 4cf870f is the representative split-pane adopter, with shared responsive geometry and module-owned request/detail content. - Workspace 5e9234d adds raw-workspace enforcement and a four-file legacy baseline while extending focused checks for Campaign and Approvals. ### Changed Files - `govoplan-core/webui/src/components/PageLayout.tsx` - `govoplan-core/webui/src/components/WorkspaceLayout.tsx` - `govoplan-campaign/webui/src/features/campaigns` - `govoplan-approvals/webui/src/features/approvals/ApprovalsPage.tsx` - `govoplan/tools/checks/check-shared-webui-layouts.py` ### Verification - `./tools/checks/check-focused.sh — passed, including 56 WebUI module permutations and full-product bundle budgets` - `Core PageLayout/WorkspaceLayout component tests and structural interface checks — passed` - `Campaign UI/lifecycle suites and accessibility contract — passed` - `Approvals backend tests, template contract, workspace contract, and manifest-shape validation — passed` ### Next / Blocked - Migrate the remaining four raw page frames in Access, Core Settings, Docs, and Mail. - Migrate the remaining four raw workspaces in Access, Core Settings, Docs, and Organizations. - Extract the next high-drift primitives: responsive toolbar, content grid/form sections, and dialog anatomy. Suggested status label: `status/in-progress`

zemion commented

2026-08-18 10:57:42 +02:00

Codex State: progress

Summary

Implemented Core-owned ActionToolbar, ToolbarGroup, ToolbarSpacer, ContentGrid, FormGrid, FormLayout, GridItem, FormSection, DialogActions, DialogForm, and DialogSection contracts.
Migrated repeated toolbar, equal-column content/form grid, administration dialog sizing, dialog form/section, and form-section anatomy across 36 optional-module repositories plus Core.
Adoption now covers 39 ActionToolbar files, 15 ContentGrid files, 53 FormGrid files, 2 initial FormSection files, 6 DialogForm files, and 6 DialogSection files; every Dialog footer composes DialogActions.
Added a zero-baseline workspace check that rejects raw legacy anatomy and module-local copies.

Changed Files

govoplan-core@6814a41
govoplan@5efb0ee
docs/evidence/SHARED_WEBUI_PRIMITIVE_INVENTORY.md
tools/checks/check-shared-webui-primitives.py

Verification

tools/checks/check-focused.sh — passed, including 56 WebUI module permutations
npm run test:layout-primitives — passed
npm run test:dialog-focus — passed
npm run build — passed; initial JS 151.6 KiB gzip / 160.0 KiB budget
tools/checks/check-manifest-shapes.py --require-architecture — 67/67 passed

Next / Blocked

Next candidates, in order: MetricGrid/MetricGroup (29 uses in 25 files), DescriptionList (13 uses in 11 files), standard dialog-size migration/exception register, FilterBar composition, then unified collection empty/error states.

Suggested status label: status/in-progress

## Codex State: progress ### Summary - Implemented Core-owned ActionToolbar, ToolbarGroup, ToolbarSpacer, ContentGrid, FormGrid, FormLayout, GridItem, FormSection, DialogActions, DialogForm, and DialogSection contracts. - Migrated repeated toolbar, equal-column content/form grid, administration dialog sizing, dialog form/section, and form-section anatomy across 36 optional-module repositories plus Core. - Adoption now covers 39 ActionToolbar files, 15 ContentGrid files, 53 FormGrid files, 2 initial FormSection files, 6 DialogForm files, and 6 DialogSection files; every Dialog footer composes DialogActions. - Added a zero-baseline workspace check that rejects raw legacy anatomy and module-local copies. ### Changed Files - `govoplan-core@6814a41` - `govoplan@5efb0ee` - `docs/evidence/SHARED_WEBUI_PRIMITIVE_INVENTORY.md` - `tools/checks/check-shared-webui-primitives.py` ### Verification - `tools/checks/check-focused.sh — passed, including 56 WebUI module permutations` - `npm run test:layout-primitives — passed` - `npm run test:dialog-focus — passed` - `npm run build — passed; initial JS 151.6 KiB gzip / 160.0 KiB budget` - `tools/checks/check-manifest-shapes.py --require-architecture — 67/67 passed` ### Next / Blocked - Next candidates, in order: MetricGrid/MetricGroup (29 uses in 25 files), DescriptionList (13 uses in 11 files), standard dialog-size migration/exception register, FilterBar composition, then unified collection empty/error states. Suggested status label: `status/in-progress`

zemion commented

2026-08-18 11:36:24 +02:00

Codex State: progress

Summary

Promoted MetricGrid and DescriptionList/DescriptionItem into Core and migrated 29 metric groups in 25 source files plus 51 property lists in 28 source files across 23 module repositories.
Moved compatible dialogs onto the Core size scale, removed six duplicate width rules, and added a decrease-only baseline for 61 justified specialized dialog selectors across 22 stylesheets.
Added product-wide enforcement for Core ownership, retired layout classes, primitive exports and representative consumers, and dialog-width exceptions. Published all 25 affected repositories; workspace commit 5bb8028 and Core commit ee5c881.

Changed Files

govoplan-core/webui/src/components/MetricGrid.tsx
govoplan-core/webui/src/components/DescriptionList.tsx
tools/checks/check-shared-webui-primitives.py
tools/checks/shared-webui-dialog-width-exceptions.txt
docs/evidence/SHARED_WEBUI_PRIMITIVE_INVENTORY.md

Verification

npm run test:layout-primitives: passed
npm run build: passed, including full-product bundle budget
python3 tools/checks/check-shared-webui-primitives.py: passed; no raw legacy anatomy
tools/checks/check-manifest-shapes.py: passed for 67 manifests
tools/checks/check-focused.sh: passed, including 56 WebUI module permutations

Next / Blocked

Audit whole-surface empty, recoverable-error, permission, and partial-result states for a composable CollectionState/StatePanel contract while excluding compact row and optional-value placeholders.
Then compare live, submitted, faceted, overlay, result-summary, and bulk-selection filter semantics before promoting a FilterBar contract.

Suggested status label: status/in-progress

## Codex State: progress ### Summary - Promoted MetricGrid and DescriptionList/DescriptionItem into Core and migrated 29 metric groups in 25 source files plus 51 property lists in 28 source files across 23 module repositories. - Moved compatible dialogs onto the Core size scale, removed six duplicate width rules, and added a decrease-only baseline for 61 justified specialized dialog selectors across 22 stylesheets. - Added product-wide enforcement for Core ownership, retired layout classes, primitive exports and representative consumers, and dialog-width exceptions. Published all 25 affected repositories; workspace commit 5bb8028 and Core commit ee5c881. ### Changed Files - `govoplan-core/webui/src/components/MetricGrid.tsx` - `govoplan-core/webui/src/components/DescriptionList.tsx` - `tools/checks/check-shared-webui-primitives.py` - `tools/checks/shared-webui-dialog-width-exceptions.txt` - `docs/evidence/SHARED_WEBUI_PRIMITIVE_INVENTORY.md` ### Verification - `npm run test:layout-primitives: passed` - `npm run build: passed, including full-product bundle budget` - `python3 tools/checks/check-shared-webui-primitives.py: passed; no raw legacy anatomy` - `tools/checks/check-manifest-shapes.py: passed for 67 manifests` - `tools/checks/check-focused.sh: passed, including 56 WebUI module permutations` ### Next / Blocked - Audit whole-surface empty, recoverable-error, permission, and partial-result states for a composable CollectionState/StatePanel contract while excluding compact row and optional-value placeholders. - Then compare live, submitted, faceted, overlay, result-summary, and bulk-selection filter semantics before promoting a FilterBar contract. Suggested status label: `status/in-progress`

zemion commented

2026-08-18 13:35:51 +02:00

Codex State: done

Summary

Centralized repeated WebUI structure in Core and migrated 31 consuming modules to the shared component vocabulary.
Added StatePanel, FilterBar, CountBadge, WorkspaceFrame, DefinitionPalette, DefinitionNodeIcon, FloatingStatus, and ContentSection, while extending existing layout, toolbar, list, card, grid, and metric primitives.
Removed every recorded raw page-frame and workspace-layout exception; both enforcement baselines are now empty.
Audited remaining CSS/component matches and retained only domain-specific tracks, visualizations, timelines, and other non-equivalent UI rules.
Published and reconciled the coordinated commits across all 32 affected repositories.

Changed Files

docs/architecture/INTERFACE_PATTERN_LANGUAGE.md
docs/evidence/SHARED_WEBUI_PRIMITIVE_INVENTORY.md
tools/checks/check-shared-webui-layouts.py
tools/checks/check-shared-webui-primitives.py
tools/checks/shared-webui-layout-baseline.txt
tools/checks/shared-webui-workspace-baseline.txt
govoplan-core/webui/src/components/*
govoplan-core/webui/src/styles/*

Verification

tools/checks/check-focused.sh — passed across 67 manifests, backend checks, 56 WebUI permutations, focused module suites, and bundle budgets
tools/checks/check-shared-webui-layouts.py — 24 PageLayout consumers, 8 WorkspaceLayout consumers, 0 legacy page frames, 0 raw workspaces
tools/checks/check-shared-webui-primitives.py — passed; shared primitive adoption inventoried and raw legacy anatomy rejected
All 32 repositories clean and at 0/0 upstream parity

## Codex State: done ### Summary - Centralized repeated WebUI structure in Core and migrated 31 consuming modules to the shared component vocabulary. - Added StatePanel, FilterBar, CountBadge, WorkspaceFrame, DefinitionPalette, DefinitionNodeIcon, FloatingStatus, and ContentSection, while extending existing layout, toolbar, list, card, grid, and metric primitives. - Removed every recorded raw page-frame and workspace-layout exception; both enforcement baselines are now empty. - Audited remaining CSS/component matches and retained only domain-specific tracks, visualizations, timelines, and other non-equivalent UI rules. - Published and reconciled the coordinated commits across all 32 affected repositories. ### Changed Files - `docs/architecture/INTERFACE_PATTERN_LANGUAGE.md` - `docs/evidence/SHARED_WEBUI_PRIMITIVE_INVENTORY.md` - `tools/checks/check-shared-webui-layouts.py` - `tools/checks/check-shared-webui-primitives.py` - `tools/checks/shared-webui-layout-baseline.txt` - `tools/checks/shared-webui-workspace-baseline.txt` - `govoplan-core/webui/src/components/*` - `govoplan-core/webui/src/styles/*` ### Verification - `tools/checks/check-focused.sh — passed across 67 manifests, backend checks, 56 WebUI permutations, focused module suites, and bundle budgets` - `tools/checks/check-shared-webui-layouts.py — 24 PageLayout consumers, 8 WorkspaceLayout consumers, 0 legacy page frames, 0 raw workspaces` - `tools/checks/check-shared-webui-primitives.py — passed; shared primitive adoption inventoried and raw legacy anatomy rejected` - `All 32 repositories clean and at 0/0 upstream parity`

zemion closed this issue

2026-08-18 13:35:51 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GovOPlaN/govoplan#48