Skip to content

feat(ui): Dashboard Simple/Advanced/Custom modes (Wave 6 W6-3) - #190

Merged
Ghenghis merged 3 commits into
feat/hermes3d-7-complete-gui-repo-wiringfrom
claude/w6-3-gui-dashboard-3-modes
May 10, 2026
Merged

feat(ui): Dashboard Simple/Advanced/Custom modes (Wave 6 W6-3)#190
Ghenghis merged 3 commits into
feat/hermes3d-7-complete-gui-repo-wiringfrom
claude/w6-3-gui-dashboard-3-modes

Conversation

@Ghenghis

@Ghenghis Ghenghis commented May 10, 2026

Copy link
Copy Markdown
Owner

Summary

Wave 6 W6-3 implements three Dashboard modes (Simple/Advanced/Custom) with a mode switcher and Zustand-backed persistence store.

Hermes evidence chain: PASS

  • Task ID: W6-3-DASHBOARD-MODES-2026-05-09
  • hermes_run_gate: 32/32 unit Vitest, npm build clean (1055 kB / 269 kB gzip)
  • Stacked-on: feat/hermes3d-7-complete-gui-repo-wiring

Files

  • 3 dashboard mode components (Simple, Advanced, Custom)
  • DashboardModeSwitcher
  • dashboardModeStore (Zustand persistence)
  • 5 supporting/wiring files
  • Vitest harness setup

Tests

Evidence

3 production-build screenshots saved to 03_implementation/docs/evidence/w6-3/.

Notes

Vite Fast-Refresh $RefreshReg$ blocker fixed in W8-12 PR #188 — Playwright runtime proof unblocked downstream.

Test plan

@gemini-code-assist

gemini-code-assist Bot commented May 10, 2026

Copy link
Copy Markdown

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

@coderabbitai

coderabbitai Bot commented May 10, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3b64779c-338c-46b5-9d92-73168126f438

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/w6-3-gui-dashboard-3-modes

Comment @coderabbitai help to get the list of available commands and usage tips.

@Ghenghis Ghenghis mentioned this pull request May 10, 2026
Merged
2 of 4 tasks
Ghenghis added a commit that referenced this pull request May 10, 2026
@Ghenghis @claude
fix(W6-4): Move vitest tests out of src/ to fix Gate 1 build (W9-2b)
512d15f 
PR #183 Gate 1 (UI-Final / npm run build) was failing because the W6-4
PR placed *.test.tsx files under src/ConfigComponents/{ActionWindow,TaskMonitor}/
without adding vitest, @testing-library/react, or jsdom to package.json.
tsc -b reads tsconfig.json's "include": ["src"] so it tried to type-check
those tests at build time, producing TS2307 errors for the missing modules.

This commit applies Option A from the W9-2b brief:

  - Move src/components/ActionWindow/ActionWindow.test.tsx ->
    tests/unit/ActionWindow.test.tsx
  - Move src/components/TaskMonitor/TaskMonitorDrawer.test.tsx ->
    tests/unit/TaskMonitorDrawer.test.tsx
  - Move src/test-setup-w6-4.ts -> tests/unit/setup.ts
  - Update import paths in moved tests to point at ../../src/...
  - Split vitest config out of vite.config.ts into a dedicated
    vitest.config.ts (production builds no longer need vitest types)
  - Add @types/node + vitest + @testing-library/react +
    @testing-library/jest-dom + jsdom to devDependencies
  - Scope @types/node to tsconfig.node.json so the DOM build doesn't
    pick up Node's NodeJS.Timeout (which would break setInterval typing
    across src/)
  - Replace __dirname in vite.config.ts with import.meta.url-derived
    fileURLToPath, keeping the rollupOptions multi-entry build for
    index.html + action-window.html

This matches the convention used by the still-open dashboard-modes
(PR #190) and breadth-pages (PR #192) lanes: tests/unit/ + a separate
vitest.config.ts.

Gate verification (all 4 PASS, no --admin / --no-verify):
  Gate 1: npm run build              -> dist/ built (1.04s)
  Gate 2: npm run lint (tsc --noEmit) -> clean
  Gate 3: dev server smoke at :5180   -> 200 with <title>Hermes3D-OS</title>
  Gate 4: Playwright e2e/action-window-task-monitor.spec.ts -> 5/5 passed
          + 5 screenshots produced
  Bonus:  npm run test:unit           -> 34/34 vitest tests pass

No-fake scan: src/ + tests/unit/ contain no mockData/fakeData/lorem;
the only hit is the FORBIDDEN_VISIBLE_TERMS allow-list in tests/e2e/_helpers.ts
which is the *enforcement* mechanism for the no-mock policy.

Sources:
  - Vitest config docs (vitest.config.ts vs vite.config.ts merge):
    https://vitest.dev/config/
  - tsconfig include/exclude semantics + types isolation (TS handbook):
    https://www.typescriptlang.org/tsconfig#include

Hermes evidence chain: PASS
Task ID: W9-2B-PR183-FIX-2026-05-10
hermes_run_gate: gate_w6_4_pr183_post_fix
hermes_lock_files: claude-w9-2b-pr183-fix (12 files)
hermes_release_files: at end of session

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ghenghis added a commit that referenced this pull request May 10, 2026
@Ghenghis @claude
feat(gui): W6-4 resizable Action Window + Task Monitor drawer (#183)
548dff1 
* feat(gui): W6-4 resizable Action Window + Task Monitor drawer

Lane 3 of the user's 5-lane GUI finish order. Ships two reusable, mountable
surfaces for the Hermes3D Proof-Gated Agentic Workbench:

1. Action Window — resizable workbench panel (Code/Output/Diff tabs)
   - Right + bottom + corner pointer-event resize handles
   - Min 600x400, viewport-aware max, localStorage size persistence
   - Pop-out into a dedicated browser tab via /action-window?detached=1
   - Detached mode (full-viewport) entry served via Vite multi-page input

2. Task Monitor drawer — slide-out from the right edge
   - Polls GET /api/code-operator/recovery/runs every 5s with abort + 5xx
     exponential backoff (matches TanStack Query semantics, no dep)
   - State badges for all 10 RecoveryState values; click row to expand the
     proof-event timeline (history sorted ascending by ts_utc)
   - UI-only Clear-completed filter (RC v2 read-only endpoint, BLK-026)

Coordination notes:
- App.tsx + package.json + vitest.config.ts locked by W6-3 (dashboard
  modes lane). W6-4 ships standalone mounts (ActionWindowMount,
  TaskMonitorMount) + a dedicated pop-out HTML entry so AppShell wiring
  can land alongside W6-3 without a handoff.
- Vitest config lives inside the W6-4-owned vite.config.ts via
  /// <reference types=vitest />, scoped via include[] to the lane's
  test files only.

Tests:
- 34/34 vitest pass (20 ActionWindow, 14 TaskMonitorDrawer)
- 5/5 Playwright pass with 5 screenshots saved under
  test-results/e2e/action-window-task-monitor/
- tsc -p tsconfig.json and vite build both clean

Refs:
- HTML5 Pointer Events: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
- TanStack Query polling: https://tanstack.com/query/latest

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(W6-4): Move vitest tests out of src/ to fix Gate 1 build (W9-2b)

PR #183 Gate 1 (UI-Final / npm run build) was failing because the W6-4
PR placed *.test.tsx files under src/ConfigComponents/{ActionWindow,TaskMonitor}/
without adding vitest, @testing-library/react, or jsdom to package.json.
tsc -b reads tsconfig.json's "include": ["src"] so it tried to type-check
those tests at build time, producing TS2307 errors for the missing modules.

This commit applies Option A from the W9-2b brief:

  - Move src/components/ActionWindow/ActionWindow.test.tsx ->
    tests/unit/ActionWindow.test.tsx
  - Move src/components/TaskMonitor/TaskMonitorDrawer.test.tsx ->
    tests/unit/TaskMonitorDrawer.test.tsx
  - Move src/test-setup-w6-4.ts -> tests/unit/setup.ts
  - Update import paths in moved tests to point at ../../src/...
  - Split vitest config out of vite.config.ts into a dedicated
    vitest.config.ts (production builds no longer need vitest types)
  - Add @types/node + vitest + @testing-library/react +
    @testing-library/jest-dom + jsdom to devDependencies
  - Scope @types/node to tsconfig.node.json so the DOM build doesn't
    pick up Node's NodeJS.Timeout (which would break setInterval typing
    across src/)
  - Replace __dirname in vite.config.ts with import.meta.url-derived
    fileURLToPath, keeping the rollupOptions multi-entry build for
    index.html + action-window.html

This matches the convention used by the still-open dashboard-modes
(PR #190) and breadth-pages (PR #192) lanes: tests/unit/ + a separate
vitest.config.ts.

Gate verification (all 4 PASS, no --admin / --no-verify):
  Gate 1: npm run build              -> dist/ built (1.04s)
  Gate 2: npm run lint (tsc --noEmit) -> clean
  Gate 3: dev server smoke at :5180   -> 200 with <title>Hermes3D-OS</title>
  Gate 4: Playwright e2e/action-window-task-monitor.spec.ts -> 5/5 passed
          + 5 screenshots produced
  Bonus:  npm run test:unit           -> 34/34 vitest tests pass

No-fake scan: src/ + tests/unit/ contain no mockData/fakeData/lorem;
the only hit is the FORBIDDEN_VISIBLE_TERMS allow-list in tests/e2e/_helpers.ts
which is the *enforcement* mechanism for the no-mock policy.

Sources:
  - Vitest config docs (vitest.config.ts vs vite.config.ts merge):
    https://vitest.dev/config/
  - tsconfig include/exclude semantics + types isolation (TS handbook):
    https://www.typescriptlang.org/tsconfig#include

Hermes evidence chain: PASS
Task ID: W9-2B-PR183-FIX-2026-05-10
hermes_run_gate: gate_w6_4_pr183_post_fix
hermes_lock_files: claude-w9-2b-pr183-fix (12 files)
hermes_release_files: at end of session

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ghenghis added a commit that referenced this pull request May 10, 2026
@Ghenghis @claude
fix(ci): gate webServer on API /health to remove ERR_CONNECTION_REFUS…
2c55c9f 
…ED race (W9-2a) (#197)

start-e2e-stack.mjs spawned uvicorn (port 8765 + 8642) and Vite (5173)
concurrently. Playwright's webServer.url probe targets only :5173, so
when Vite finished binding before uvicorn, the page-load fetch fan-out
hit ERR_CONNECTION_REFUSED. Those errors accumulated in
attachErrorCapture() and tripped assertNoErrors(), causing the
"live-gui.spec.ts:35" flake (and the same root cause in
agents.spec.ts:20 — see W9-2_GUI_STABILIZATION_LOG).

Fix: spawn API servers first, await /health 200 (60s deadline,
250ms backoff), then spawn Vite. When Playwright's :5173 probe
succeeds the API listener is already bound. Deterministic, no
test-side timeouts, no skips.

Re-run on this branch: live-gui.spec.ts:35 = 5/5 PASS;
agents.spec.ts = 1/1 PASS (was failing on same race).

Unblocks: #181, #189, #190, #191, #192 (5 GUI PRs blocked on this
base flake per W9-2 lane handoff).

Sources:
- https://playwright.dev/docs/api/class-testconfig#test-config-web-server
  (webServer.url polls a single URL — multi-process stacks need their
  own readiness gate)
- https://playwright.dev/docs/best-practices#testing-philosophy
  (avoid waitForTimeout; wait for explicit conditions)

Files
  03_implementation/ui/scripts/start-e2e-stack.mjs (+22 net LoC)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@Ghenghis @claude
feat(W6-3): Dashboard Simple/Advanced/Custom modes + switcher + tests
899e0fe 
- Add three Dashboard mode components matching Images-GUI/01-dashboard-modes/:
  * DashboardSimple   — 5 KPI tiles + System Status hero + summary
  * DashboardAdvanced — wraps the existing live Dashboard + Action Window chip
  * DashboardCustom   — drag/drop widget grid + palette drawer + persisted layout
- Add DashboardModeSwitcher (top-right radio group, persists to localStorage)
- Add dashboardModeStore (Zustand + pure parsers for hash/?mode=/storage)
- Wire App.tsx to dispatch dashboard-tab to the right mode component;
  hash sync now understands #dashboard:simple, #dashboard/custom, etc.
- Add Vitest + jsdom + @testing-library; 32/32 unit tests pass
- Add tests/e2e/dashboard-modes.spec.ts (5 specs)
- npm run lint and npm run build clean
- Production-build screenshots committed under docs/evidence/w6-3/

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@Ghenghis
Ghenghis force-pushed the claude/w6-3-gui-dashboard-3-modes branch from 2da7a3e to 899e0fe Compare May 10, 2026 06:09
@Ghenghis
fix(ui): add @types/node devDep for vite 8 TS2688 (W9-2f)
bf9849c 
vite 8.0.10's `dist/node/index.d.ts` uses `/// <reference types="node" />`,
so when vite.config.ts pulls vite types, tsc -b needs @types/node to
satisfy that triple-slash reference. Without it, CI build fails with
TS2688: Cannot find type definition file for 'node'.

The base branch (and PR #181) already declare this dep + matching
tsconfig.node.json `"types": ["node"]` shape. PR #190 already had the
tsconfig pieces but was missing the npm dep itself, so npm ci on a
clean CI runner did not install @types/node and tsc -b failed.
Ghenghis added a commit that referenced this pull request May 10, 2026
@Ghenghis
fix(ui): add @types/node devDep for vite 8 TS2688 (W9-2f)
fc75e8a 
Same root cause as PR #190: vite 8.0.10's dist/node/index.d.ts uses
/// <reference types="node" />, so when vite.config.ts pulls vite types,
tsc -b needs @types/node to satisfy that reference. Without the npm dep,
clean CI runners (npm ci) lack @types/node and tsc -b fails with
TS2688: Cannot find type definition file for 'node'.

tsconfig.json and tsconfig.node.json on this branch already have the
correct "types" shape; only the npm dep was missing.
@Ghenghis @claude
test(e2e): accept #dashboard:<mode> hash for W6-3 mode-aware sync
f0f149e 
PR #190 (W9-2g): live-gui.spec.ts:590 'hash route sync' expected the
hash to equal `#dashboard` exactly, but W6-3's dashboard 3-modes feature
emits `#dashboard:advanced` (or another mode suffix) when a saved mode
is present, breaking the strict equality.

Fix: relax the hash assertion to a regex that matches either
`#dashboard` or `#dashboard:<mode>`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Ghenghis added a commit that referenced this pull request May 10, 2026
@Ghenghis
fix(ui): add @types/node devDep for vite 8 TS2688 (W9-2f)
5509e1d 
Same root cause as PR #190: vite 8.0.10's dist/node/index.d.ts uses
/// <reference types="node" />, so when vite.config.ts pulls vite types,
tsc -b needs @types/node to satisfy that reference. Without the npm dep,
clean CI runners (npm ci) lack @types/node and tsc -b fails with
TS2688: Cannot find type definition file for 'node'.

tsconfig.json and tsconfig.node.json on this branch already have the
correct "types" shape; only the npm dep was missing.
@Ghenghis
Ghenghis merged commit 336355e into feat/hermes3d-7-complete-gui-repo-wiring May 10, 2026
3 checks passed
@Ghenghis
Ghenghis deleted the claude/w6-3-gui-dashboard-3-modes branch May 10, 2026 07:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Ghenghis