fix: unify workspace identity and sidebar panels

[benjaminshafii]

Summary

• replace workspace marble gradients with a deterministic solid-color identity system using the approved 14-color palette across sessions and settings
• replace extension/plugin mesh gradients with consistent flat neutral puzzle tiles in cards and detail dialogs
• make the sidebar and main workspace matching opaque rounded panels with identical radius, ring, shadow, 8px gutters, and clipped contents
• reserve readable session-row space for selected, loading, timestamp, and unread states at minimum width
• remove macOS vibrancy and synchronize offcanvas panel/gap motion with focusable reopen and reduced-motion behavior
• preserve sidebar selection, groups, scroll position, and preferred width across hide/show

Validation

• pnpm --filter @openwork/app exec bun test tests/workspace-identity.test.ts src/react-app/shell/workspace-shell-layout.test.ts src/react-app/domains/session/sidebar/session-management-store.test.ts (10 passed)
• pnpm --filter @openwork/app typecheck
• pnpm --filter @openwork/app build
• pnpm --filter @openwork/desktop check:electron
• pnpm --filter @openwork/desktop typecheck:electron
• pnpm --filter @openwork/desktop test (52 passed, 1 skipped)
• pnpm fraimz --flow session-sidebar-states --cdp-url http://127.0.0.1:9826 (9 frames passed)

Latest local fraimz: evals/results/2026-07-12T20-25-17-555Z/fraimz.html.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
openwork-app	Ready	Preview, Comment	Jul 12, 2026 8:30pm
openwork-den	Ready	Preview, Comment	Jul 12, 2026 8:30pm
openwork-den-worker-proxy	Ready	Preview, Comment	Jul 12, 2026 8:30pm
openwork-landing	Ready	Preview, Comment, Open in v0	Jul 12, 2026 8:30pm

[benjaminshafii]

fraimz — ✅ PASSED

1 passed · 0 failed · 0 skipped — run 2026-07-12T18-33-23-875Z

Full frame proof with validated screenshots: evals/results/2026-07-12T18-33-23-875Z/fraimz.html (re-run: pnpm fraimz --flow session-sidebar-states)

✅ session-sidebar-states — Session sidebar keeps selected, loading, and unread states distinct

User-facing flow demo

1. The sessions sidebar is visually separated from the workspace

   🎙 The sessions sidebar is visually distinct again, with a contained panel and clear separation from the main workspace.

   • 📸 session-sidebar-states-01-distinct-sidebar-panel.png — 5 validations passed
   

2. The selected session has a stable title and timestamp layout

   🎙 The selected session has its own subtle background, while every title and timestamp stays aligned and easy to scan.

   • 📸 session-sidebar-states-02-selected-session-row.png — 4 validations passed
   

3. A background task spinner never overlaps its session title

   🎙 When a session is loading, a compact spinner uses reserved space beside the title, so it never overlaps or pushes text outside the row.

   • 📸 session-sidebar-states-03-non-overlapping-loading-state.png — 5 validations passed
   

4. A completed background session gains a clear unread state

   🎙 A newly updated unread session stands out with stronger text and a small unread indicator without competing with the selected state.

   • 📸 session-sidebar-states-04-unread-session-state.png — 5 validations passed
   

5. Opening the unread session marks it read and selects it

   🎙 After I open the unread session, its unread indicator clears and the normal session styling returns.

   • 📸 session-sidebar-states-05-opened-session-clears-unread.png — 5 validations passed
   
   • ✅ Script frame 1 narrated: "The sessions sidebar is visually distinct again, with a contained panel and clear separa"
   • ✅ Script frame 2 narrated: "The selected session has its own subtle background, while every title and timestamp stay"
   • ✅ Script frame 3 narrated: "When a session is loading, a compact spinner uses reserved space beside the title, so it"
   • ✅ Script frame 4 narrated: "A newly updated unread session stands out with stronger text and a small unread indicato"
   • ✅ Script frame 5 narrated: "After I open the unread session, its unread indicator clears and the normal session styl"

[benjaminshafii]

fraimz — ✅ PASSED

1 passed · 0 failed · 0 skipped — run 2026-07-12T19-53-40-749Z

Full frame proof with validated screenshots: evals/results/2026-07-12T19-53-40-749Z/fraimz.html (re-run: pnpm fraimz --flow session-sidebar-states)

✅ session-sidebar-states — Contained session sidebar hides smoothly without losing context

User-facing flow demo

1. The sidebar is an opaque contained panel on every platform

   🎙 The sessions sidebar is a solid, contained panel on every platform, with no macOS translucency or platform-specific visual treatment.

   • 📸 session-sidebar-states-01-opaque-contained-sidebar.png — 5 validations passed
   

2. Selected, loading, and unread rows remain readable at minimum width

   🎙 The selected, loading, and unread session states remain aligned and readable, even when the sidebar is resized to its narrowest supported width.

   • 📸 session-sidebar-states-02-minimum-width-session-states.png — 5 validations passed
   

3. The fixed-width panel glides away while the main surface expands in sync

   🎙 When I hide the sidebar, the entire panel glides offscreen without squeezing or rewrapping its contents, while the conversation expands using the same timing and easing.

   • 📸 session-sidebar-states-03-sidebar-hidden-main-expanded.png — 4 validations passed
   

4. Header, tabs, and conversation remain one aligned surface

   🎙 The header, tabs, and conversation move together as one surface, with no traffic-light padding jump or mismatched animation.

   • 📸 session-sidebar-states-04-aligned-expanded-shell.png — 5 validations passed
   

5. Reopening restores sidebar selection, scroll, groups, and width

   🎙 A subtle edge affordance and the existing sidebar control let me reopen it, restoring the same selected session, scroll position, groups, and sidebar width.

   • 📸 session-sidebar-states-05-reopened-context-preserved.png — 4 validations passed
   

6. Resizing is immediate and collapse leaves no stale gap

   🎙 Dragging the sidebar width stays immediate rather than animated, and hiding it during or after resize never leaves a stale gap.

   • 📸 session-sidebar-states-06-resized-sidebar-restored.png — 5 validations passed
   

7. Reduced motion hides and restores the sidebar instantly

   🎙 With reduced motion enabled, the same hide and reopen behavior happens instantly without losing state.

   • 📸 session-sidebar-states-07-reduced-motion-context-restored.png — 5 validations passed
   
   • ✅ Script frame 1 narrated: "The sessions sidebar is a solid, contained panel on every platform, with no macOS transl"
   • ✅ Script frame 2 narrated: "The selected, loading, and unread session states remain aligned and readable, even when "
   • ✅ Script frame 3 narrated: "When I hide the sidebar, the entire panel glides offscreen without squeezing or rewrappi"
   • ✅ Script frame 4 narrated: "The header, tabs, and conversation move together as one surface, with no traffic-light p"
   • ✅ Script frame 5 narrated: "A subtle edge affordance and the existing sidebar control let me reopen it, restoring th"
   • ✅ Script frame 6 narrated: "Dragging the sidebar width stays immediate rather than animated, and hiding it during or"
   • ✅ Script frame 7 narrated: "With reduced motion enabled, the same hide and reopen behavior happens instantly without"

[benjaminshafii]

fraimz — ✅ PASSED

1 passed · 0 failed · 0 skipped — run 2026-07-12T20-30-40-693Z

Full frame proof with validated screenshots: evals/results/2026-07-12T20-30-40-693Z/fraimz.html (re-run: pnpm fraimz --flow session-sidebar-states)

✅ session-sidebar-states — Consistent workspace identity and adaptable contained panels

User-facing flow demo

1. Workspaces use deterministic solid colors instead of gradients

   🎙 Every workspace now has one deterministic solid color from a balanced identity palette, replacing the noisy marble gradients.

   • 📸 session-sidebar-states-01-solid-workspace-palette.png — 5 validations passed
   

2. Settings uses the same workspace identity as the session sidebar

   🎙 The same workspace color appears consistently in the session sidebar, workspace switchers, and settings.

   • 📸 session-sidebar-states-02-settings-workspace-identity.png — 5 validations passed
   

3. Extension cards and details use the same neutral puzzle tile

   🎙 Extensions use a restrained flat identity tile, so the puzzle icon no longer floats over a large decorative gradient.

   • 📸 session-sidebar-states-03-flat-extension-identity.png — 5 validations passed
   

4. Sidebar and workspace share one contained panel language

   🎙 The sidebar and main workspace now use the same opaque, rounded container language, spacing, border weight, and corner radius.

   • 📸 session-sidebar-states-04-matching-contained-panels.png — 5 validations passed
   

5. Header, tabs, conversation, composer, and tools stay inside the main panel

   🎙 The header, tabs, conversation, composer, and tools are clipped inside one coherent main workspace panel rather than mixing rounded and square surfaces.

   • 📸 session-sidebar-states-05-coherent-main-workspace.png — 4 validations passed
   

6. Session states remain readable at the narrowest sidebar width

   🎙 At minimum width, selected, loading, unread, and timestamp states remain readable and aligned.

   • 📸 session-sidebar-states-06-minimum-width-session-states.png — 5 validations passed
   

7. The sidebar leaves cleanly while the rounded main panel expands

   🎙 Hiding the sidebar moves the complete panel offscreen while the rounded main workspace expands using synchronized motion.

   • 📸 session-sidebar-states-07-rounded-main-panel-expanded.png — 4 validations passed
   

8. Reopening restores sidebar state, scroll, selection, and preferred width

   🎙 Reopening restores the selected session, groups, scroll position, and preferred width.

   • 📸 session-sidebar-states-08-reopened-context-preserved.png — 4 validations passed
   

9. Reduced motion performs the same transition instantly

   🎙 Reduced motion performs the same transition instantly without losing context.

   • 📸 session-sidebar-states-09-reduced-motion-context-restored.png — 5 validations passed
   
   • ✅ Script frame 1 narrated: "Every workspace now has one deterministic solid color from a balanced identity palette, "
   • ✅ Script frame 2 narrated: "The same workspace color appears consistently in the session sidebar, workspace switcher"
   • ✅ Script frame 3 narrated: "Extensions use a restrained flat identity tile, so the puzzle icon no longer floats over"
   • ✅ Script frame 4 narrated: "The sidebar and main workspace now use the same opaque, rounded container language, spac"
   • ✅ Script frame 5 narrated: "The header, tabs, conversation, composer, and tools are clipped inside one coherent main"
   • ✅ Script frame 6 narrated: "At minimum width, selected, loading, unread, and timestamp states remain readable and al"
   • ✅ Script frame 7 narrated: "Hiding the sidebar moves the complete panel offscreen while the rounded main workspace e"
   • ✅ Script frame 8 narrated: "Reopening restores the selected session, groups, scroll position, and preferred width."
   • ✅ Script frame 9 narrated: "Reduced motion performs the same transition instantly without losing context."