Skip to content

Recover dashboard visual quality and add topology experience - #6

Draft
imzyrix wants to merge 9 commits into
mainfrom
feat/dashboard-visual-recovery
Draft

imzyrix wants to merge 9 commits into
mainfrom
feat/dashboard-visual-recovery

Conversation

@imzyrix

@imzyrix imzyrix commented Oct 25, 2026 •

Copy link
Copy Markdown
Member

Scope

Improve the existing dashboard shell and Home visual direction, and add the approved Z.Y.R.I.X topology experience to Mission Control. Preserve existing routes, data providers, local persistence, graph editors, theme behavior, and the alternate Mission Control views. No other dashboard pages are redesigned in this change.

What changed

  • Refine the floating navigation, responsive shell, visual tokens, Home composition, and adaptive particle hero.
  • Make Mission Control open on an interactive React Flow topology with the Z.Y.R.I.X root, five sample machines, connected workloads, and a dynamic inspector.
  • Add pan/zoom, node selection and dragging, position persistence, responsive inspector tabs, and a non-sending assistant prompt.
  • Render the local Z.Y.R.I.X core with Three.js particles; quality follows existing performance preferences and WebGL/reduced-motion fallbacks.
  • Keep all machine metrics, services, containers, VMs, and status values explicitly illustrative. No live operations, logs, AI service, or VM creation are implied.
  • Research Casberry’s public particle API/export interface. Its generated code and redistribution license were not exposed, so this implementation is independently authored; it does not copy or depend on Casberry.

Visual review

Rendered and inspected at 1920×1080, 1440×900, 1366×768, 768×1024, and 390×844. No horizontal document overflow or browser runtime errors appeared at these sizes.

Browser checks covered machine/core selection, inspector tabs and closing, persisted dragging after reload, theme changes without remounting the particle canvas, and runtime errors.

Validation

  • npm run typecheck — passed
  • npm test — passed (39 tests)
  • npm run lint — exit 0; 230 CSS specificity warnings remain
  • npm run build — passed; Vite still reports existing >500 kB chunks
  • python scripts/check_docs.py — passed
  • git diff --check — passed

Dependency

This visual recovery builds on the open dashboard foundation in PR #5, which is still open. The comparison against main includes that foundation until PR #5 lands.

Review boundary

This PR now includes the explicitly requested Mission Control topology and core. Other routes remain outside its redesign scope. Keep this PR in draft until the maintainer review is complete; do not merge before required review and checks.

@vercel

vercel Bot commented Oct 25, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
opencluster Ready Ready Preview Oct 25, 2026 5:30pm UTC

@imzyrix
imzyrix requested a review from aaryaavinash October 25, 2026 15:35
@imzyrix imzyrix changed the title Recover dashboard visual quality on Home and shell Recover dashboard visual quality and add topology experience Oct 25, 2026

imzyrix commented Oct 25, 2026

Copy link
Copy Markdown
Member Author

OpenCluster pre-merge implementation checklist (source audit)

The Vercel preview deployment is READY for 87fe758, but main/production still references the older dashboard commit. The protected preview and build logs have not been visually verified in this audit because the zyrix-dev team scope still returns 403; a READY deployment is not an end-to-end UI test.

Suggested work before approving this draft PR:

  • Selection consistency: In TopologyExperience.tsx, onPaneClick and inspector close clear the inspector selection but do not reset data.selected / active-edge styling on the graph. Keep visual selection and inspector state synchronized (ideally one source of truth), and add a regression test.
  • Reset layout verification: The reset handler calls setNodes(buildTopologyNodes()) then immediately fitView(). Verify the viewport fits the new positions after React Flow processes the node update; add a test covering a dragged node followed by reset.
  • Sample count semantics: topologySample.ts stores services, vmCount, containerCount separately from workloads, vms, and containers. Examples: PC-01 shows 6 services but four workload rows; PC-05 shows 3 services but four workload rows. Either derive totals consistently or clearly label totals as distinct from the displayed subset.
  • Data-provider boundary: TopologyExperience currently imports SAMPLE_MACHINES directly. For the production frontend, define a typed topology adapter/provider that can consume locally persisted OpenCluster cluster/node records now and the authorized node/backend provider later. Keep sample telemetry explicitly labeled.
  • Validation in CI: Add actual dashboard typecheck, lint, build, and relevant interaction tests as PR checks (existing passing documentation/Vercel checks alone do not cover these).
  • CSS/performance cleanup: Address the reported CSS specificity warnings and review the >500 kB chunk warnings with evidence rather than blindly removing visual features. Eliminate obsolete commented-out implementations once verified unnecessary.
  • Browser QA: After team authorization, verify the protected preview at desktop and mobile sizes, including drag, inspector, tabs, reset/persistence, theme change, reduced-motion fallback, console errors, and navigation; attach updated screenshots or a clear QA report.

The new React Flow topology and the Three.js Z.Y.R.I.X renderer are substantial work worth retaining. These are focused follow-up items, not a request to rebuild the dashboard. Leave PR #6 in draft until the dependent PR #5 is reviewed/merged, this branch is updated, and aaryaavinash has completed the intended review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant