Frontend redesign: Claude-Code-web look, mobile revamp, and a side nav of active runs with quick switching #41

New issue

Closed

opened 2026-07-08 01:25:21 +02:00 by dominik.polakovics · 3 comments

dominik.polakovics commented

2026-07-08 01:25:21 +02:00

Owner

This was generated by AI during triage.

Summary

Reskin / restructure the web UI to feel more like the Claude Code web interface,
including a mobile revamp, and add a side navigation that lists active runs and
lets you switch between them quickly.

Motivation

Today the app uses a horizontal top bar (web/src/components/TopBar.tsx:
Repos · Credentials · Runs · Tokens · Settings) that collapses to a hamburger
dropdown on mobile (<640px). There is no persistent side navigation and no quick
switcher between live runs — to move between runs you go via the Runs list
(web/src/routes/Runs.tsx) and open each /runs/:id in turn.

Requested direction (to be refined in triage)

Overall look closer to the Claude Code web interface.
A side navigation showing active runs, with quick switching between them
(e.g. a persistent left rail — the example the reporter gave).
The mobile interface changes along with it.

Notes for triage

Current shell / nav: web/src/App.tsx (Shell) + web/src/components/TopBar.tsx
(top bar + mobile hamburger dropdown). Live run state is already available
client-side (SSE via web/src/events.tsx; per-run convo state via the messages
endpoint and web/src/lib/conversation.ts), which a side rail could drive.
Runs list today: web/src/routes/Runs.tsx; chat view: web/src/routes/RunChat.tsx.
Overlaps but is distinct from #35 (chat-view redesign: mobile header,
jump-to-latest pill, merged composer), which is scoped to the /runs/:id view
and already ready-for-agent. This request is broader (app shell, global side
nav, run switcher, overall Claude-Code-web look) — triage should decide how to
slice it and how it relates to #35.
Large / cross-cutting: likely wants a design pass and splitting into slices
(shell + side nav, run switcher, mobile, chat-view convergence with #35).

> *This was generated by AI during triage.* ## Summary Reskin / restructure the web UI to feel more like the Claude Code web interface, including a mobile revamp, and add a **side navigation that lists active runs and lets you switch between them quickly**. ## Motivation Today the app uses a horizontal top bar (`web/src/components/TopBar.tsx`: Repos · Credentials · Runs · Tokens · Settings) that collapses to a hamburger dropdown on mobile (<640px). There is no persistent side navigation and no quick switcher between live runs — to move between runs you go via the Runs list (`web/src/routes/Runs.tsx`) and open each `/runs/:id` in turn. ## Requested direction (to be refined in triage) - Overall look closer to the Claude Code web interface. - A side navigation showing **active runs**, with quick switching between them (e.g. a persistent left rail — the example the reporter gave). - The mobile interface changes along with it. ## Notes for triage - Current shell / nav: `web/src/App.tsx` (Shell) + `web/src/components/TopBar.tsx` (top bar + mobile hamburger dropdown). Live run state is already available client-side (SSE via `web/src/events.tsx`; per-run convo state via the messages endpoint and `web/src/lib/conversation.ts`), which a side rail could drive. - Runs list today: `web/src/routes/Runs.tsx`; chat view: `web/src/routes/RunChat.tsx`. - **Overlaps but is distinct from #35** (chat-view redesign: mobile header, jump-to-latest pill, merged composer), which is scoped to the `/runs/:id` view and already `ready-for-agent`. This request is broader (app shell, global side nav, run switcher, overall Claude-Code-web look) — triage should decide how to slice it and how it relates to #35. - Large / cross-cutting: likely wants a design pass and splitting into slices (shell + side nav, run switcher, mobile, chat-view convergence with #35).

dominik.polakovics added the

needs-triage

enhancement

labels

2026-07-08 01:25:21 +02:00

dominik.polakovics commented

2026-07-08 13:25:05 +02:00

Author

Owner

Resolved direction (design interview with the maintainer, 2026-07-08)

The reporter and the maintainer are the same person; the open questions in this issue were resolved one-by-one in a design interview. This comment is the binding spec. Remaining triage work is slicing (see the end), not direction.

Decisions

Full pivot to a chat-first shell. The runs sidebar becomes the app's spine on every authenticated page. The Dashboard dissolves; its pieces are re-homed (below). This is the Claude Code web IA, not a rail bolted onto the current app.
+ New run is composer-first. The New-run surface is a big centered composer (Claude-Code-web style): repo chip + model/effort chips + text box. Send = startInstance → navigate to the chat → the typed text is a client-side queued first message that auto-sends when the transcript becomes ready. Sending empty = plain spawn (today's semantics). No backend change.
Home (/) = the New-run composer. Predictable, never auto-navigates; anything urgent is one tap away in the rail. Same surface serves the zero-runs empty state.
Rail contents: live instances only, flat, attention-first. needs-input/question runs float to the top with an accent dot; working runs below by last activity; idle last. Ended runs drop out of the rail; history stays a footer link. Driven by the existing listInstances() + run.changed SSE refetch (same data as today's InstanceList).
AFK machinery lives on the New-run surface, as a compact per-repo strip under the composer, following the composer's repo chip: claimable count · Run one · Auto toggle · three-strikes paused banner with Reset inline. One surface for both ways of dispatching work.
Mobile (<640px): left drawer, same sidebar component. Hamburger top-left and edge-swipe-to-open (explicit maintainer requirement); swipe/scrim/Escape to close. Known caveat to document in code: iOS standalone PWA can still win the left-edge gesture for history-back on some versions — the hot-zone handler (non-passive, preventDefault on horizontal intent) is best-effort; the button is the reliable path. Android/desktop are clean.
Full warm reskin, both themes. Token-level swap in base.css: bone/ivory surfaces, warm near-black text, terracotta accent (~#d97757 family), warm-charcoal dark (not blue-black). One bundled open-license variable serif (Source Serif 4 or Lora, woff2, self-hosted static asset — not an npm dep) for headings + assistant prose; UI chrome stays system sans; code stays system mono.
Chat restyle, Claude-style: assistant messages lose the bubble — serif prose directly on the background, full column width. User messages become a soft warm-neutral bubble, right-aligned (accent is reserved for actions/attention, so no solid coral bubble). Tool chips flatten to quiet bordered mono rows, same expand behavior. All #35 behaviors are preserved (hide-on-scroll header, jump-to-latest pill, merged composer, in-stream needs-input note).
Theme stays OS-driven. The documented "no toggle, no persisted theme state" principle stands; a Light/Dark/System setting is an explicit non-goal for this redesign (clean later add-on).

Shell spec (defaults chosen by the designer — veto in comments)

Breakpoints: keep 640px; add ~1024px. <1024 = drawer pattern (tablet included); ≥1024 = persistent rail (~260px), user-collapsible (chevron + Ctrl/Cmd+B, collapsed state in localStorage). Content column stays a centered max-width (~760px) in the remaining space.
Rail anatomy: + New run pinned top → ACTIVE list (state dot · title · repo secondary text; title = label or AFK #N) → footer: Repos · History · Credentials · Tokens · Settings → user + logout + SSE live dot at the very bottom. No destructive actions in rail rows (Stop stays in the chat header ••• from #35).
Attention when the drawer is closed (mobile): a dot/count badge on the hamburger whenever any run is needs-input/question.
Queued first message mechanics: held in an in-memory per-run map (survives SPA route changes); rendered in the stream as a pending user bubble ("sends when Claude is ready"); spawn failure returns the text to the composer with an error; tab close loses it — accepted and documented.
Composer extras: optional label + provider spawn-options behind a … popover (interacts with #21 — resolve that checkbox's 3-state there); model/effort chips prefilled from the existing resolution chain; repo chip remembers the last-used repo (localStorage).
Dashboard re-homing: ClaudeAuthCard → Credentials page, plus a slim "Claude is logged out — reconnect" banner on the New-run surface (the spawn 409 path); parked strip, stop-all, clone status/progress → the Repos page (per-repo cards; the composer's repo chip shows not-ready repos disabled with progress); Runs page becomes History, restyled, otherwise unchanged; repo sub-pages keep their routes and gain the rail.
Login/Setup: same warm skin, centered card, no rail (unauthenticated).
PWA: manifest theme_color moves to the warm palette.
A11y: rail is a nav landmark; drawer closes on Escape/route-change (existing TopBar pattern carries over); prefers-reduced-motion respected for drawer/rail animation.
Constraints unchanged: SolidJS + plain global CSS, no new npm dependencies (fonts are static assets), SSE-driven — no polling.

Non-goals (this redesign)

Theme toggle · command-palette quick switcher (Cmd+K) · run-switch keyboard shortcuts · recently-ended runs in the rail · bottom-sheet menus. All are clean later add-ons.

#35 (landed): its chat behaviors are load-bearing inputs to §8 — preserve, don't regress.
#21: the spawn-options 3-state problem should be fixed in/with the composer's … popover.
#39: attention-first sorting inherits the tailer's state — the workflow-reads-as-idle bug makes the rail lie the same way the badge does today; worth fixing alongside or before.
#40: unrelated to the shell (dialog rendering), no interaction.

Remaining triage

Slice into tracer-bullet, independently-landable issues (suggested order: ① rail/shell + drawer skeleton with re-homed nav → ② New-run composer + queued first message + AFK strip → ③ warm reskin tokens + serif asset → ④ chat restyle → ⑤ Dashboard dissolution/re-homing + History rename). Keeping needs-triage until sliced; the slices become ready-for-agent, this umbrella then closes in favor of them.

## Resolved direction (design interview with the maintainer, 2026-07-08) The reporter and the maintainer are the same person; the open questions in this issue were resolved one-by-one in a design interview. This comment is the binding spec. Remaining triage work is **slicing** (see the end), not direction. ### Decisions 1. **Full pivot to a chat-first shell.** The runs sidebar becomes the app's spine on every authenticated page. The Dashboard dissolves; its pieces are re-homed (below). This is the Claude Code web IA, not a rail bolted onto the current app. 2. **`+ New run` is composer-first.** The New-run surface is a big centered composer (Claude-Code-web style): repo chip + model/effort chips + text box. Send = `startInstance` → navigate to the chat → the typed text is a **client-side queued first message** that auto-sends when the transcript becomes ready. Sending empty = plain spawn (today's semantics). No backend change. 3. **Home (`/`) = the New-run composer.** Predictable, never auto-navigates; anything urgent is one tap away in the rail. Same surface serves the zero-runs empty state. 4. **Rail contents: live instances only, flat, attention-first.** needs-input/question runs float to the top with an accent dot; working runs below by last activity; idle last. Ended runs drop out of the rail; history stays a footer link. Driven by the existing `listInstances()` + `run.changed` SSE refetch (same data as today's InstanceList). 5. **AFK machinery lives on the New-run surface**, as a compact per-repo strip under the composer, following the composer's repo chip: claimable count · Run one · Auto toggle · three-strikes paused banner with Reset inline. One surface for both ways of dispatching work. 6. **Mobile (<640px): left drawer, same sidebar component.** Hamburger top-left **and edge-swipe-to-open (explicit maintainer requirement)**; swipe/scrim/Escape to close. Known caveat to document in code: iOS standalone PWA can still win the left-edge gesture for history-back on some versions — the hot-zone handler (non-passive, `preventDefault` on horizontal intent) is best-effort; the button is the reliable path. Android/desktop are clean. 7. **Full warm reskin, both themes.** Token-level swap in `base.css`: bone/ivory surfaces, warm near-black text, terracotta accent (~#d97757 family), **warm-charcoal dark** (not blue-black). One bundled open-license variable serif (Source Serif 4 or Lora, woff2, self-hosted static asset — not an npm dep) for headings + assistant prose; UI chrome stays system sans; code stays system mono. 8. **Chat restyle, Claude-style:** assistant messages lose the bubble — serif prose directly on the background, full column width. User messages become a soft warm-neutral bubble, right-aligned (accent is reserved for actions/attention, so no solid coral bubble). Tool chips flatten to quiet bordered mono rows, same expand behavior. All #35 behaviors are preserved (hide-on-scroll header, jump-to-latest pill, merged composer, in-stream needs-input note). 9. **Theme stays OS-driven.** The documented "no toggle, no persisted theme state" principle stands; a Light/Dark/System setting is an explicit non-goal for this redesign (clean later add-on). ### Shell spec (defaults chosen by the designer — veto in comments) - **Breakpoints:** keep 640px; add ~1024px. `<1024` = drawer pattern (tablet included); `≥1024` = persistent rail (~260px), user-collapsible (chevron + Ctrl/Cmd+B, collapsed state in localStorage). Content column stays a centered max-width (~760px) in the remaining space. - **Rail anatomy:** `+ New run` pinned top → ACTIVE list (state dot · title · repo secondary text; title = label or `AFK #N`) → footer: Repos · History · Credentials · Tokens · Settings → user + logout + SSE live dot at the very bottom. No destructive actions in rail rows (Stop stays in the chat header `•••` from #35). - **Attention when the drawer is closed (mobile):** a dot/count badge on the hamburger whenever any run is needs-input/question. - **Queued first message mechanics:** held in an in-memory per-run map (survives SPA route changes); rendered in the stream as a pending user bubble ("sends when Claude is ready"); spawn failure returns the text to the composer with an error; tab close loses it — accepted and documented. - **Composer extras:** optional label + provider spawn-options behind a `…` popover (interacts with #21 — resolve that checkbox's 3-state there); model/effort chips prefilled from the existing resolution chain; repo chip remembers the last-used repo (localStorage). - **Dashboard re-homing:** ClaudeAuthCard → Credentials page, plus a slim "Claude is logged out — reconnect" banner on the New-run surface (the spawn 409 path); parked strip, stop-all, clone status/progress → the Repos page (per-repo cards; the composer's repo chip shows not-ready repos disabled with progress); Runs page becomes **History**, restyled, otherwise unchanged; repo sub-pages keep their routes and gain the rail. - **Login/Setup:** same warm skin, centered card, no rail (unauthenticated). - **PWA:** manifest `theme_color` moves to the warm palette. - **A11y:** rail is a `nav` landmark; drawer closes on Escape/route-change (existing TopBar pattern carries over); `prefers-reduced-motion` respected for drawer/rail animation. - **Constraints unchanged:** SolidJS + plain global CSS, no new npm dependencies (fonts are static assets), SSE-driven — no polling. ### Non-goals (this redesign) Theme toggle · command-palette quick switcher (Cmd+K) · run-switch keyboard shortcuts · recently-ended runs in the rail · bottom-sheet menus. All are clean later add-ons. ### Related issues - #35 (landed): its chat behaviors are load-bearing inputs to §8 — preserve, don't regress. - #21: the spawn-options 3-state problem should be fixed in/with the composer's `…` popover. - #39: attention-first sorting inherits the tailer's state — the workflow-reads-as-idle bug makes the rail lie the same way the badge does today; worth fixing alongside or before. - #40: unrelated to the shell (dialog rendering), no interaction. ### Remaining triage Slice into tracer-bullet, independently-landable issues (suggested order: ① rail/shell + drawer skeleton with re-homed nav → ② New-run composer + queued first message + AFK strip → ③ warm reskin tokens + serif asset → ④ chat restyle → ⑤ Dashboard dissolution/re-homing + History rename). Keeping `needs-triage` until sliced; the slices become `ready-for-agent`, this umbrella then closes in favor of them.