state-hub/workplans/STATE-WP-0043-dashboard-ui-experience.md

id, type, title, domain, repo, status, owner, topic_slug, created, updated, state_hub_workstream_id

id	type	title	domain	repo	status	owner	topic_slug	created	updated	state_hub_workstream_id
STATE-WP-0043	workplan	Dashboard UI Experience Improvements	custodian	state-hub	finished	codex	custodian	2026-05-19	2026-05-22	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

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

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

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

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

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

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

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

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.