--- id: STATE-WP-0043 type: workplan title: "Dashboard UI Experience Improvements" domain: custodian repo: state-hub status: finished owner: codex topic_slug: custodian created: "2026-05-19" updated: "2026-05-22" state_hub_workstream_id: "028f60d0-8f72-4426-9267-3e6ed69a5223" --- # Dashboard UI Experience Improvements ## Summary Address the active dashboard-improvement suggestions and fold them into a coherent UI pass that makes State Hub easier to operate day to day. The focus is not a visual redesign; it is better operational affordances: clearer repository identity in TPSC views, safe status-editing controls for tasks and workstreams, cleaner feedback workflow states, and more consistent reusable dashboard patterns. ## Current Findings Existing active UI feedback records: - `07ee477f-a800-4687-8ae9-c82a9bed095b` — TPSC GDPR Warnings / Per-Repo Breakdown should show the repository name instead of an id, and link to the repository in Gitea in a new tab. - `de2d14b7-c85e-4ac1-8a12-7c69af9942fa` — Workstream / Tasks should allow changing workstream and task statuses from the dashboard. Inspection notes: - `dashboard/src/tpsc.md` builds the Per-Repo Breakdown from snapshots and uses `snap.repo_id` directly. It does not enrich rows from `/repos/`, so the table cannot show names, slugs, domains, or remote URLs. - `dashboard/src/tasks.md`, `dashboard/src/tasks/[id].md`, and `dashboard/src/workstreams/[id].md` display status as read-only even though `PATCH /tasks/{id}` and `PATCH /workstreams/{id}` already exist. - Marking a task `done` through the current task PATCH endpoint can create a heuristic token event when no token fields are supplied. UI status changes need to make that side effect deliberate. - `dashboard/src/ui-feedback.md` only treats `finished` and `wont_fix` as closed, so legacy `resolved` feedback can still appear as active. - `CUST-WP-0003` already owns the WHI KPI-card work. This workplan should not duplicate that implementation; it should only align shared UI patterns around it. ## Out of Scope - Reworking the overall dashboard information architecture. - Replacing Observable Framework or adding a frontend framework. - Implementing the WHI KPI card already tracked by `CUST-WP-0003`. - Adding authentication or authorization around dashboard mutations. ## T01 — Triage Feedback Workflow States ```task id: STATE-WP-0043-T01 status: done priority: high state_hub_task_id: "2aaeb57e-26aa-438d-bfd8-4943c8b0b136" ``` Normalize the UI-feedback workflow so actionable and closed suggestions are shown in the correct sections. Implementation notes: - Treat `finished`, `wont_fix`, `resolved`, and `addressed` as closed in `dashboard/src/ui-feedback.md`, or migrate legacy records to `finished` if the API data model prefers canonical workflow statuses. - Keep `submitted`, `analyse`, `plan`, `implement`, `test`, and `review` as the active workflow. - Add notes or status transitions to the two active feedback records once this workplan is synced into State Hub. - Confirm the UI Feedback KPI counts match the visible Active and Closed lists. Done when the UI Feedback page no longer mixes resolved legacy records into the active queue and the two live suggestions are clearly visible as planned work. ## T02 — Improve TPSC Per-Repo Breakdown ```task id: STATE-WP-0043-T02 status: done priority: high state_hub_task_id: "b6fe5e8e-80f6-439f-8ddc-47e65218f041" ``` Make the TPSC Per-Repo Breakdown identify repositories by useful human labels and link to the source repo when a web-safe remote URL is available. Implementation notes: - Fetch `/repos/` in `dashboard/src/tpsc.md` and build lookup maps by `id` and `slug`. - Resolve each snapshot row to a repo object before rendering. - Show the repo name and slug, not the raw UUID. - Link to `remote_url` in a new tab when it is already an HTTP(S) URL. For non-web remotes such as `gitea-remote:coulomb/state-hub.git`, show a clear non-linked slug unless a reliable Gitea URL transform already exists locally. - Use `target="_blank"` with `rel="noopener noreferrer"`. - Preserve the existing service maturity chips and latest-snapshot behavior. Done when the active suggestion `07ee477f-a800-4687-8ae9-c82a9bed095b` is satisfied and unknown/missing repos degrade gracefully. ## T03 — Design Safe Status Editing Controls ```task id: STATE-WP-0043-T03 status: done priority: high state_hub_task_id: "11166491-2c7a-4007-9820-e0707e71556c" ``` Define and implement a shared status-editing control that can be reused by task and workstream pages without surprising side effects. Implementation notes: - Add a small dashboard component, for example `dashboard/src/components/status-control.js`, that renders a compact status select or segmented action control. - Support task statuses: `todo`, `in_progress`, `blocked`, `done`, and `cancelled`. - Support workstream statuses from `WORKSTREAM_STATUSES`. - Use `apiFetch` for PATCH requests, with disabled, saving, success, and error states. - Prevent parent row/modal click handlers from firing when the control is used. - For task transitions to `done`, handle the current token-event behavior explicitly: either collect optional token metadata, show a confirmation that a heuristic token event will be created, or add a backend-safe status-only path before enabling one-click completion. Done when status editing has one reusable implementation and destructive or side-effectful transitions are guarded. ## T04 — Add Detail-Page Status Editing ```task id: STATE-WP-0043-T04 status: done priority: high state_hub_task_id: "34b29724-bd4b-416e-ab55-1d37132490dd" ``` Add status controls to the places where operators naturally inspect a single task or workstream. Implementation notes: - Add a task status control to `dashboard/src/tasks/[id].md`. - Add a workstream status control to `dashboard/src/workstreams/[id].md`. - Add task status controls to the Tasks table inside `dashboard/src/workstreams/[id].md`. - Refresh or locally update displayed rows after a successful PATCH. - Keep the raw field table for audit/debug context, but make the primary status affordance visible in the summary area. Done when the active suggestion `de2d14b7-c85e-4ac1-8a12-7c69af9942fa` works from detail pages. ## T05 — Add List-Page Status Editing ```task id: STATE-WP-0043-T05 status: done priority: medium state_hub_task_id: "0562bd05-d67c-4fe2-b501-166650d7129a" ``` Extend safe status editing to the high-volume list views after the detail-page path is solid. Implementation notes: - Add task status controls to `dashboard/src/tasks.md` table rows. - Add workstream status controls to `dashboard/src/workstreams.md` table rows if the table structure can accommodate them without crowding. - Keep filters stable after edits. - Do not allow row-click modal behavior to conflict with status controls. - Show a compact error state near the edited row if a PATCH fails. Done when common status changes can be made from list views without navigating away and without breaking table scanning. ## T06 — Consolidate Reusable UI Patterns ```task id: STATE-WP-0043-T06 status: done priority: medium state_hub_task_id: "7b055f11-25e2-45cb-80ac-d2d175fb5a1f" ``` Reduce one-off inline UI code in the touched surfaces so future dashboard work stays consistent. Implementation notes: - Reuse or extend `entity-modal.js`, `workplan-status.js`, `field-help.js`, and `config.js` rather than adding page-local copies of status maps and API behavior. - Prefer shared status badges and compact action controls over repeated inline color styles. - Align empty, loading, offline, and save-error states across the touched pages. - Keep the dashboard dense and operational rather than turning it into a marketing-style layout. - Preserve existing help overlays and the shift-click suggestion workflow. Done when the changed pages share status/control primitives and have visibly consistent spacing, labels, and failure states. ## T07 — Close the Feedback Loop ```task id: STATE-WP-0043-T07 status: done priority: medium state_hub_task_id: "0b182fff-c100-468c-afed-91918483638f" ``` Make the UI feedback workflow reflect the work after implementation. Implementation notes: - Add implementation notes to the two relevant technical-debt records. - Move each suggestion through the workflow to `review` when the code is ready for the original suggester. - Move to `finished` only after verification or operator confirmation. - Update relevant docs under `dashboard/src/docs/` if controls or behavior changed in a way operators need to understand. Done when the dashboard suggestions page tells the same story as the shipped UI. ## T08 — Verification ```task id: STATE-WP-0043-T08 status: done priority: high state_hub_task_id: "9d59cae4-c2a8-43e1-8a28-6344e22653b0" ``` Verify the UI changes against both code and running dashboard behavior. Implementation notes: - Run the dashboard build from `dashboard/`. - Run the relevant backend tests if any API behavior changes. - Use the local dashboard preview with the local API and exercise: - TPSC Per-Repo Breakdown with linked and unlinked repos. - Task status transitions, including a guarded `done` transition. - Workstream status transitions. - Offline/error behavior for failed PATCH requests. - UI Feedback active/closed counts. - Check desktop and mobile widths for table overflow, clipped text, and overlapping controls. Done when the implementation is build-clean, manually verified in the browser, and any intentional residual risks are documented. ## Verification Notes - 2026-05-22: `make dashboard-check` passed; Observable built 58 pages and validated 47 links. - Source inspection confirmed the shipped 0043 surfaces: UI feedback closed states, TPSC repo enrichment/linking, shared status controls, list/detail integrations, and guarded task transitions to `blocked` and `done`. - The Codex in-app browser bridge could not start in this local session because the Windows sandbox setup refresh failed before the browser runtime loaded, so no live click-through screenshot was captured during this closeout check.