feat(studio): Visual design update - #625
Merged
Merged
Conversation
…sion list Implements the new workspace shell from Figma (node 4:2): the left rail is gone. A 64px top navigation bar sits on a fixed dark-green radial gradient — white Stacklok mark, the five surfaces as a pill nav (active route renders as a light-sage pill with icon + label; the rest are icon-only with tooltips), and the ⌘K global search styled as the design's search field. All five surfaces render inside one rounded 20px card that follows the theme; the gradient shell is identical in light and dark. The chat workspace flips: conversation on the left (title in a 64px card header, content and composer on the design's 768px measure), "Session List" on the right — recency-bucketed daemon sessions with the design's row treatment (3px brand accent + tint on the active row, muted relative times, a pulsing brand dot for running sessions) and an AGENTS section fed by the daemon's real GET /v1/agents roster (clicking one starts a new draft). The resize handle and collapse, keyboard shortcuts, capability-gated rename/delete, and the draft mint flow all carry over mirrored. Design content with no daemon backing is deliberately not fabricated: the mock PROJECTS folders render as recency groups per the base PR's decision, and the "New project" button, notification bell, and per-agent chat nesting are dropped. The old shell (console-shell, shell, navbar, nav-drawer, rail sidebar) and its orphaned hooks are deleted; ShortcutsProvider moved into the workspace layout; nav config consolidated into one nav-items module. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ist bound The conversation and composer keep the 768px measure but hug the pane's left edge instead of centering; the session list's resize clamp rises from 500px to 720px. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sending from a draft minted the daemon session and router.replace()d /workspace/chat to /workspace/chat/<id> — but moving the optional catch-all from zero segments to one changes the route shape, so Next remounts the page. The remount replaced the chat hook instance mid-stream: tokens rendered into unmounted state and the pane sat empty until a reload (the prototype's own comments warned about this remount; its mock module-stores existed to survive it). The URL now updates with native history.replaceState, which the App Router syncs without remounting, so the in-flight stream keeps its state and renders live. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- A brand-colored spinner sits left of the chat title while a response streams. - The session list and the thread/file side panels now share one persisted resize setting (usePanelWidth, localStorage-backed, 200-720px): resizing either carries to the other and survives reloads. The side panel previously reset to a hardcoded width every open. - Approval action badges key by position: parsed actions can repeat or parse without a verb, which produced duplicate React keys. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Dark mode deepens each stop of the green radial gradient so the shell
recedes behind the dark card instead of outglowing it; light mode keeps
the design's original stops.
A draft chat now renders the same 64px title bar as an open chat
("New chat" + the sidebar toggle) instead of a bare centered composer
with a floating button.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
task studio:dev re-runs the fingerprinted install task whenever package.json changes — with the system npm on PATH. An npm 11 there rewrites the lockfile in a shape npm 10 (what CI's Node 22 ships) rejects, which has now broken npm ci twice. The install command runs through npx npm@10.9.4, matching the packageManager pin. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A new browser-local preference (Settings → Appearance → Session list position) moves the session list to either side of the chat. The docked panel, the compact overlay, the resize handle's drag direction, and the panel-toggle icons all follow the chosen side; the thread and document panels stay on the right regardless. The Appearance page's theme picker is regrouped alongside the new control as labeled pill rows. Also aligns the resize handle's default max width (720px) with the shared panel-width store's clamp — dragging previously stopped at the handle's stale 500px cap. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
jtenniswood
changed the title
When the session list is on the left, its toggle renders leading in the chat header (before the generating spinner and title); when right, it stays in the trailing action cluster. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Author
|
Folded into #618 by fast-forwarding |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Stacked on #618. Implements the new workspace shell from Figma (node 4-2): the left rail is replaced by a top navigation bar on a dark-green radial gradient, all five surfaces render inside one rounded 20px card, and the chat workspace flips to conversation left / "Session List" right.
What changed
buildUserNav()config: the active route is a light-sage pill with icon + label, the rest icon-only with tooltips; the existing ⌘KGlobalSearchre-mounted and styled as the design's search field. The gradient shell uses fixed brand colors in both themes; the card interior follows the theme tokens.GET /v1/agentsroster (a slimuse-agent-rosterhook, recreated); clicking an agent starts a new draft.ShortcutsProvidermoved into the workspace layout; nav config consolidated to one module.Deliberately not fabricated
The design mocks content the daemon doesn't hold, per the base PR's daemon-only rule: PROJECTS folders render as the recency groups (Today / This week / Earlier) instead; the "New project" button, notification bell, and per-agent nested chat lists are dropped.
Verification
tsc --noEmit,biome check,knip— clean; vitest 70/70.npm run test:e2e— 5/5 Playwright smokes against a fresh production build through the real proxy + fixture daemon.mecated(OpenRouter): shell on all five surfaces in light and dark, chat transcript rehydration, active-row styling, agents section hidden while the roster is empty.🤖 Generated with Claude Code