feat(web): make the rails flush boxes and move the canvas gradient

[hzub]

Related issue

Closes OMNI-2357, closes OMNI-2349

Summary

The sidebar and workspace rails were floating cards (outer margin, rounded corners, border, drop shadow) on a gradient canvas. The design has them flush to the window edges, reading as part of the canvas — so the card treatment comes off and the gradient moves onto the sidebar.

• Rails are boxes, not cards: both the left sidebar and right workspace rail sit flush — no outer margin, no rounding, no drop shadow. The workspace rail keeps a left divider.
• Light canvas is flat white; the brand gradient moves onto the left sidebar, joined by the mock's dot-grid and pink corner glow.
• Dark canvas carries the mock's purple gradient; the dark sidebar gets the same dot-grid plus a purple bottom wash and the diagonal sheen.
• Dark surfaces move off their purple tint onto neutral slate (--card, --card-solid, --tray, --muted, --background).
• Glass rule: both rails are now excluded from the dark glass rule rather than overriding it, so they no longer pick up its blur, sheen, fill, or border. The workspace rail's panel contents are transparent too, so the whole rail reads as canvas.

Also consolidates the canvas/rail CSS: each surface owns its full background in one rule, and the redundant ::before dot overlay is gone.

Stacked on #4019 (Zinc tokens) — review that one first.

Test Plan

• npm run test for the touched suites — index.css.test.ts (glass-rule minification + selector DOM guards), Sidebar, AppShell, WorkspacePanel, Sidebar.subagentHighlight: 201 passing. Layout assertions updated to the flush design.
• npm run type-check, oxlint, prettier --check clean.
• Manually compared light and dark against the design prototype: canvas, both rails, sidebar dot-grid and glow, dark surfaces.

Demo

Theme	Before	After
Light
Dark

Type of change

• Bug fix
• Feature
• UI / frontend change
• Refactor / chore
• Docs
• Test / CI
• Breaking change

Test coverage

• Unit tests added / updated
• Integration tests added / updated
• E2E tests added / updated
• Manual verification completed
• Existing tests cover this change
• Not applicable

Coverage notes

The change is visual, so the unit tests cover the structural contracts that can regress silently — the dark glass-rule minification and selector guards in index.css.test.ts, plus the sidebar and workspace-panel layout classes. Colours and gradients were verified manually in both themes against the prototype (flat canvas, flush rails, sidebar dot-grid and glow, neutral dark surfaces, de-glassed rails).

Changelog

The sidebar and side panel now sit flush against the window edges, with the background gradient moved onto the sidebar.

[github-actions]

❌ UI Snapshot doesn't match the committed baseline.

If this UI change is intentional, update the baseline — each path renders in the same pinned image, so the result matches this gate:

• Label the PR (recommended): add the update-ui-snapshot label — the bot regenerates the baseline in the pinned image, pushes it back here, and re-runs the checks.
• Locally with Docker: run tests/e2e_ui/visual/regen_baseline_docker.sh, review the PNG, then commit + push.

Diff PNGs (expected_=baseline, actual_=your render, diff_) are in the run artifact. Full guide: tests/e2e_ui/visual/README.md.

[omnigent-ci]

Polly AI Review

Review: feat(web): make the rails flush boxes and move the canvas gradient

1. Blocking issues

None. The layout/token changes are internally consistent: the glass rule now excludes both rails via :not([aria-label="Workspace"]):not([aria-label="Conversations"]), the new .dark aside[aria-label="Workspace"] transparent rule clears the fills the exclusion leaves behind, and the four updated test files (AppShell, Sidebar.subagentHighlight, WorkspacePanel) assert the new flush/border-l contract rather than the old m-2/rounded card. The #0d1218 → #0e1013 background-token rename is propagated to all its call sites (ChatPage, SettingsPage DARK_MODE_PREVIEW, codeViewerHelpers 0x0e1013, and the comment in JumpToTopButton), so no stale reference is left.

2. Security vulnerabilities

None. This is a pure CSS/JSX presentation change — no data flow, auth, deserialization, or dependency/lockfile changes.

3. Non-blocking notes

• Sidebar gradient rules are theme-agnostic and will override every custom theme's sidebar. The new html:not(.dark) .conversations-sidebar and .dark .conversations-sidebar rules paint the omnigent brand gradient / pink corner glow / purple bottom wash + dot-grid with no [data-theme] qualifier, at specificity (0,1,1)/(0,2,0) — enough to beat the bg-card utility (0,1,0) the aside carries. Previously each theme controlled its canvas via its own .app-shell override (e.g. .dark[data-theme="github"] .app-shell) and the sidebar was a neutral bg-card floating on it. Now, under github/catppuccin/gruvbox/dracula/nord, the sidebar will show the omnigent purple wash and white sheen instead of the theme's palette. Worth confirming this is intended, or scoping the new rules to the default theme (:root:not([data-theme]) …). The custom translucent-sidebar rule only sets background-color, so it will still inherit the new brand background-image layers on top of the theme color.
• The light rule uses html:not(.dark) while the rest of the file uses :root:not(.dark); the dark rule uses .dark. Functionally equivalent here, just an inconsistency that slightly lowers the light rule's specificity relative to sibling theme rules.
• The Demo section still has the TODO: attach light + dark before/after screenshots placeholder. For a UI-only PR closing two visual tickets, before/after images are the primary reviewable artifact — please attach them before merge.

4. Summary

A well-scoped, well-tested visual refactor: the rails go flush, the gradient moves onto the sidebar, and dark surfaces shift to neutral slate, with the glass-rule exclusion and transparent-rail rules coherently handled and layout tests updated to match. No correctness or security concerns. The one thing worth verifying before merge is whether the new, unqualified .conversations-sidebar gradient rules should apply to all data-theme variants or only the default theme — as written they will repaint every custom theme's sidebar with the omnigent brand gradient.

---

_{Automated review by Polly · workflow run}

[github-actions]

UI Preview for this PR has been removed.

[github-actions]

✅ Regenerated the visual baseline(s) in the pinned Playwright image and pushed to this PR. CI will re-run on the new commit.

[github-actions]

🏷️ Doc impact: no-doc-update

Purely cosmetic CSS/theme retuning of dark-mode colors and sidebar/workspace panel styling with matching test/snapshot updates — no user-facing behavior, integration, or documented default changed.

_{Auto-classified on merge. Set the label manually before merging to override. · run}