From 008805b37c209ae4aa88b52af70ab955bb6ad99a Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Mon, 10 Aug 2026 10:16:24 +0700
Subject: [PATCH 1/6] feat(app): make the sidebar persistent and give it a
 Recents section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The project column with Settings and Help was an <aside> owned by the home
page, so opening a session left the tab bar as the only navigation. It moves
into the new-layout shell and now stays on screen everywhere.

Settings and Help anchor to the bottom of the column. A Recents section sits
between them and Projects: a New session row (the same openNewSession the home
screen's button calls), a list sized to the free height by measuring its
container, and a View all row pinned outside the flexible area so it is always
reachable without scrolling. View all opens the existing recent-sessions
screen, unchanged apart from losing the column beside it.

The moved components and the state both screens need are extracted verbatim
into fork-only modules rather than threaded as props, so home.tsx's diff is
almost entirely deletions. Both callers instantiate the model: the selection
lives in shared context, the session index is one TanStack query deduped by
key, and the server-normalizing effect is idempotent.

On desktop the app now boots into a new session. The redirect pins its decision
to the pathname the window came up on and disarms as soon as anything
navigates, so it cannot hijack a later visit to "/" — an earlier revision did
exactly that and bounced View all straight back to the composer. Browser-side
there is no launch event distinct from navigating to "/", so it stays off
there.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  21 +
 DIVERGENCES.md                                |   2 +
 packages/app/src/components/app-sidebar.tsx   | 643 ++++++++++++++
 packages/app/src/i18n/en.ts                   |   3 +
 packages/app/src/i18n/es.ts                   |   3 +
 packages/app/src/pages/home-model.tsx         | 323 +++++++
 packages/app/src/pages/home-styles.ts         |  17 +
 packages/app/src/pages/home.tsx               | 820 +-----------------
 packages/app/src/pages/launch-new-session.tsx |  52 ++
 packages/app/src/pages/layout-new.tsx         |  15 +-
 10 files changed, 1108 insertions(+), 791 deletions(-)
 create mode 100644 packages/app/src/components/app-sidebar.tsx
 create mode 100644 packages/app/src/pages/home-model.tsx
 create mode 100644 packages/app/src/pages/home-styles.ts
 create mode 100644 packages/app/src/pages/launch-new-session.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4cda3e3f7..836e87d99a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,27 @@ file is the human-readable summary of what changed and why.
 
 ## Unreleased
 
+### Desktop / Web UI
+
+- **The sidebar is always on screen, and it carries your recent sessions** —
+  the Projects list plus Settings and Help used to be a column belonging to the
+  home screen, so opening a session left you with no navigation but the tab bar.
+  That column is now app chrome: it stays put on every screen. Settings and Help
+  are anchored to the bottom of it instead of trailing the last project, and a
+  new **Recents** section sits between the two, listing your latest sessions with
+  a **New session** row above them. Recents grows and shrinks with the window,
+  always leaving room for a **View all** row at the bottom of the section — you
+  never have to scroll to find it. **View all** opens the full recent-sessions
+  screen, unchanged from today, now framed by the sidebar. Below a narrow window
+  width the sidebar hides and the home screen keeps its previous stacked layout.
+
+- **The desktop app opens on a new session** — launching used to drop you on a
+  list of past work. It now opens a fresh composer, reusing an existing empty
+  draft rather than accumulating one per launch. This replaces reopening the
+  screen the window was last on; that session is one click away in Recents, and
+  the tab bar still restores it. The browser UI is unaffected — there, `/` is a
+  URL you asked for, so it keeps showing the recents screen.
+
 ## 1.18.4-8
 
 ### Agent
diff --git a/DIVERGENCES.md b/DIVERGENCES.md
index 7a18fb8f12..a5deecfba6 100644
--- a/DIVERGENCES.md
+++ b/DIVERGENCES.md
@@ -96,6 +96,8 @@ from the squash message first, or use a plain merge.
 | `packages/ui/src/v2/components/wordmark-v2.tsx` (+ fork-only `wordmark-v2.css`) | `WordmarkV2` — the watermark behind the v2 new-session composer (`packages/app/src/components/session/session-new-design-view.tsx`) — draws the codev wordmark from the same 24x6 pixel grid as `Logo` instead of upstream's 720x129 "opencode", as two `<path>`s (`data-slot="wordmark-v2-co"` / `…-dev`). Upstream's watermark treatment is kept verbatim: the `0.6` outer opacity and the alpha mask whose gradient fades the mark out over its bottom half (converted to the new viewBox: gradient `y1` 68/129 → 3.163/6). "co" keeps `fill="currentColor"` so it still follows the caller's `text-*` class; "dev" takes brand red `#ee0033`. Per-half opacities live in the new `wordmark-v2.css`, following the one-CSS-file-per-v2-component convention: `co` is `0.112` (upstream's own `0.16 × 0.7` nesting, flattened), `dev` is boosted to `0.224` on light and `0.336` on dark via `--wordmark-v2-dev-opacity`, declared under `prefers-color-scheme` and both `[data-color-scheme]` values like components/logo.css. The boost is deliberate and measured: at upstream's weight a saturated red composites to within a few levels of the grey "co" half against the dark background and the two-tone disappears entirely, while the same value already reads pink against the light one. | The component is currently **not rendered** — the new-session view drops it (see the row below) — but it stays rebranded and exported so reinstating the watermark does not bring the upstream mark back with it. | Keep our version wholesale, including the per-theme `dev` opacity. If upstream retunes the watermark opacities, re-derive the `dev` boost from the new base rather than adopting a single flat value. |
 | `packages/app/src/components/session/session-new-design-view.tsx` | Drops the `WordmarkV2` watermark from the v2 new-session screen and centres the composer. Upstream absolutely positions the content block at `top-[25.375%]` to leave room for the wordmark above it; with the mark gone that offset just parks the composer high in an empty pane, so the outer element becomes `flex items-center justify-center` over `size-full` (carrying the `px-6` inset across) and the `mt-8` spacer under the wordmark goes away. | The wordmark reads as clutter on the desktop new-session screen; without it the pane should be balanced, not top-weighted. | Keep our centred layout. If upstream restyles this view, re-apply the drop + centring rather than restoring `top-[25.375%]`. Reinstating the watermark means restoring the offset too, or it will sit centred with the composer. |
 | `packages/app/src/pages/home.tsx`, `packages/app/src/pages/error.tsx`, `packages/enterprise/src/routes/share/[shareID].tsx` | `Logo` width utilities retuned for the codev wordmark's 4:1 box (upstream's is 5.57:1): home `md:w-xl` → `md:w-104`, error `w-58.5` → `w-42`, share (both call sites) `w-58.5` → `w-42` | Each value is the width at which the new wordmark renders at exactly the height the upstream one did, so no surrounding layout shifts. | Keep our widths; take upstream's surrounding changes. Recompute rather than restore if upstream changes the size. |
+| `packages/app/src/pages/layout-new.tsx` (again) | Mounts the fork-only `<LaunchNewSession />`, which on desktop redirects one time per boot to a new-session draft (reusing an existing empty draft rather than stacking one up per launch). It pins its decision to the pathname the window came up on and disarms as soon as anything navigates, so it can never hijack a later visit to `/` — the sidebar's "View all" links there. Desktop-only: in the browser there is no "launch" distinct from "navigate to /", so redirecting would make the recents screen unreachable by URL and would break two `packages/app/e2e` specs that `goto("/")`. | Launching should put you in front of a prompt, the way Claude Desktop does, rather than on a list. This supersedes the desktop's restore-last-screen behaviour (`getLastActiveUrl`, `packages/desktop/src/renderer/index.tsx`); the previous session stays one click away in Recents and its tab is still restored. | Keep the mount. If upstream restructures this layout, re-add it. Do not "simplify" the boot-window guard into a plain `location.pathname === "/"` check — that is the bug it exists to prevent. |
+| `packages/app/src/pages/layout-new.tsx`, `packages/app/src/pages/home.tsx`, `packages/app/src/i18n/{en,es}.ts` | **Persistent app sidebar.** Upstream's project column is an `<aside>` owned by `NewHome`, so it exists only on `/`. It moves into the new-layout shell: `layout-new.tsx` wraps its `<main>` in a row flex and renders the fork-only `<AppSidebar class="hidden lg:flex">` beside it (plus `<LaunchNewSession />`), so the sidebar survives every navigation. `home.tsx` loses `HomeProjectColumn`, `HomeUtilityNav`, `HomeServerRow`, `HomeProjectList`, `HomeProjectEmpty`, `HomeRecentlyClosedRow`, `HomeProjectRow`, `HomeProjectAvatar` and the selection/action block that fed them (~470 lines) — all moved verbatim into fork-only `src/components/app-sidebar.tsx` — and its grid collapses from `lg:grid-cols-[280px_minmax(0,720px)]` to one `max-w-[760px]` column; the sub-`lg` `HomeUtilityNav` mount becomes the sidebar module's `HomeMobileNav`, preserving the stacked mobile layout. The state both screens need (`focusedServer`, `projects`, `selectedProject`, `newSessionProject`, `projectDirectories`, the session-index query, `openNewSession`, `openProjectNewSession`, `openSession`, `selectProject`, `addProjects`, `editProject`, `closeProject`, `unseenCount`, `clearNotifications`, `chooseProject`, `isBackgroundOpen`) moves to fork-only `src/pages/home-model.tsx`; the shared row/label classes move to fork-only `src/pages/home-styles.ts`. Both callers instantiate the model — safe because the selection lives in `useLayout().home`, the index is one TanStack query deduped by key, and the server-normalizing effect is idempotent. New i18n keys `sidebar.recents`, `sidebar.recents.new`, `sidebar.recents.viewAll` in `en` + `es`. Every `data-component`/`data-action` hook is preserved byte-identical (`home-project-row`, `home-add-project`, `home-session-row`, `home-session-search`, …) because `packages/app/e2e` selects on them. | The desktop app should navigate like Claude Desktop — one always-visible sidebar with Projects, Recents and pinned Settings/Help — instead of losing all navigation the moment a session opens. Extraction rather than prop-threading keeps `home.tsx`'s diff almost entirely deletions, which is the cheaper side of an upstream conflict. | Keep our structure. On conflict take upstream's changes to the session-list half of `home.tsx` and re-apply the column removal; if upstream edits any of the moved components, port the change into `app-sidebar.tsx` rather than restoring it in `home.tsx`. Never let a `data-component`/`data-action` hook drift — the e2e suite has no other handle on these rows. |
 | `packages/desktop/icons/{dev,beta,prod}/` (all PNGs, `icon.icns`, `icon.ico`, `dock.png`), `packages/desktop/icons/README.md` | Regenerated from the fork-only `packages/desktop/icons/icon.svg` by the fork-only `packages/desktop/scripts/generate-icons.ts`: the brand-red `#ee0033` CoDev "C" — the `--mini` splash badge glyph, at the VS Code extension icon's proportions (unit = 120/1024, mark 480x600 centered) — on a white tile, replacing upstream's black/blueprint "o" mark. All three channels are byte-identical for now (chosen deliberately over upstream's per-channel treatments); the generator still writes them separately so a channel can diverge later. `icon.icns` members and `dock.png` use the macOS Big Sur grid (824/1024 inset + drop shadow); Windows, Linux and Store assets stay full-bleed. README rewritten from the Tauri-CLI + Image2Icon recipe to the generator. The stale Tauri-era `android/` and `ios/` subfolders are left untouched — nothing in the Electron build reads them. | Closes the "desktop app icons need design assets" rebrand gap: the Dock/taskbar icon was still upstream's mark. | Keep our assets and README (binary: take ours wholesale). Regenerate via the script rather than hand-editing; if upstream adds an icon size, add it to `FLAT_PNGS`/`ICONSET` and rerun. |
 | `packages/tui/src/theme/assets/codev.json` (new file), `packages/tui/src/theme/index.ts`, `packages/tui/src/context/theme.tsx` | Added the `codev` theme — upstream's `opencode.json` palette with `darkSecondary` → `#0891b2` (brand teal) — registered it in the theme index, and made it the default/fallback theme (`"opencode"` → `"codev"` in the store default, kv fallback, and load-failure fallbacks). `theme/assets/opencode.json` itself matches upstream again. | Brand accent lives in a fork-owned theme instead of edits to upstream's palette; the default theme carries the brand. | Keep our theme file, its index registration, and the fallback strings; when upstream changes the opencode palette, mirror it into `codev.json` (keeping our `darkSecondary`). |
 | `packages/opencode/src/cli/ui.ts` | `wordmark`/`logo()` render the lowercase codev wordmark via `ansiWordmark` (bold, no shadow, "dev" in brand red on TTY) | Help banner matches the TUI home banner. | Keep our wordmark + logo(); take upstream's surrounding changes. |
diff --git a/packages/app/src/components/app-sidebar.tsx b/packages/app/src/components/app-sidebar.tsx
new file mode 100644
index 0000000000..61c70e960e
--- /dev/null
+++ b/packages/app/src/components/app-sidebar.tsx
@@ -0,0 +1,643 @@
+import type { Session } from "@opencode-ai/sdk/v2/client"
+import { createMemo, createResource, createSignal, For, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { A } from "@solidjs/router"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { DOCS_URL } from "@codev/brand"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useServerManagementController } from "@/components/dialog-select-server"
+import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
+import { ServerHealthIndicator } from "@/components/server/server-row"
+import { ServerRowMenu } from "@/components/server/server-row-menu"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarVariant, type HomeProjectSelection, type LocalProject } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { ServerConnection } from "@/context/server"
+import { sessionHasOpenTab, useTabs } from "@/context/tabs"
+import { createHomeModel, isBackgroundOpen, type HomeSessionRecord } from "@/pages/home-model"
+import {
+  HOME_NAV_ROW_GAP,
+  HOME_NAV_ROW_PITCH,
+  HOME_PROJECT_NAV_LABEL,
+  HOME_PROJECT_NAV_ROW,
+  HOME_SECTION_LABEL,
+} from "@/pages/home-styles"
+import { displayName, errorMessage, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
+import { type ServerHealth } from "@/utils/server-health"
+import { fileManagerApp } from "@/utils/file-manager"
+import { Persist, persisted } from "@/utils/persist"
+import { sessionTitle } from "@/utils/session-title"
+import { showToast } from "@/utils/toast"
+
+// The persistent left sidebar. It used to be an <aside> inside the home page,
+// so it disappeared as soon as a session was opened; it now lives in the new
+// layout shell (packages/app/src/pages/layout-new.tsx) and stays on screen for
+// every route. Sections top to bottom: Projects, Recents (New row, a list sized
+// to the free height, and a pinned View all), then Settings/Help anchored to the
+// bottom.
+export function AppSidebar(props: { class?: string }) {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const global = useGlobal()
+  const dialog = useDialog()
+  const model = createHomeModel()
+  const openSettings = useSettingsCommand()
+  const controller = useServerManagementController({ navigateOnAdd: false })
+  const [_state, setState, _, ready] = persisted(
+    Persist.global("home.servers", ["home.servers.v1"]),
+    createStore({ collapsed: {} as Record<string, boolean> }),
+  )
+  const [state] = createResource(
+    () => ready.promise ?? Promise.resolve(),
+    (p) => p.then(() => _state),
+    { initialValue: _state },
+  )
+
+  return (
+    <aside
+      data-component="app-sidebar"
+      class={`${props.class ?? ""} w-[280px] min-h-0 min-w-0 shrink-0 flex-col gap-4 overflow-hidden px-3 pb-4 pt-6`}
+      aria-label={language.t("home.projects")}
+    >
+      <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5">
+        <div class="text-v2-text-text-muted [font-weight:530]">{language.t("home.projects")}</div>
+        <Show
+          when={
+            global.servers.list().length === 1 &&
+            !(model.projects().length === 0 && model.recentlyClosed().length > 0)
+          }
+        >
+          <TooltipV2 placement="bottom" value={language.t("home.project.add")}>
+            <IconButtonV2
+              data-action="home-add-project"
+              variant="ghost-muted"
+              size="large"
+              class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
+              icon={<IconV2 name="folder-add-left" />}
+              disabled={global.servers.health[ServerConnection.key(global.servers.list()[0]!)]?.healthy === false}
+              onClick={() => model.chooseProject(global.servers.list()[0]!)}
+              aria-label={language.t("home.project.add")}
+            />
+          </TooltipV2>
+        </Show>
+      </div>
+      <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
+        <Show
+          when={global.servers.list().length > 1}
+          fallback={
+            <Show
+              when={model.projects().length > 0}
+              fallback={
+                <HomeProjectEmpty
+                  server={global.servers.list()[0]!}
+                  recentlyClosed={model.recentlyClosed()}
+                  homedir={model.homedir()}
+                  chooseProject={model.chooseProject}
+                  openRecentProject={(conn, directory) => model.addProjects(conn, [directory])}
+                  language={language}
+                />
+              }
+            >
+              <HomeProjectList
+                server={global.servers.list()[0]!}
+                projects={model.projects()}
+                selected={model.selection()}
+                selectProject={model.selectProject}
+                openNewSession={model.openProjectNewSession}
+                editProject={model.editProject}
+                closeProject={model.closeProject}
+                clearNotifications={model.clearNotifications}
+                unseenCount={model.unseenCount}
+                language={language}
+              />
+            </Show>
+          }
+        >
+          <div class="flex min-w-0 flex-col gap-4">
+            <For each={global.servers.list()}>
+              {(item) => {
+                const key = ServerConnection.key(item)
+                const healthy = () => !!global.servers.health[key]?.healthy
+                const serverCtx = global.ensureServerCtx(item)
+                const projects = () => serverCtx.projects.list()
+                const hasProjects = () => projects().length > 0
+                const collapsed = () => !!state().collapsed[key]
+                return (
+                  <div class="flex min-w-0 flex-col gap-1">
+                    <HomeServerRow
+                      server={item}
+                      selected={model.selection().server === key && !model.selection().directory}
+                      collapsed={collapsed()}
+                      health={global.servers.health[key]}
+                      controller={controller}
+                      focusServer={model.focusServer}
+                      chooseProject={model.chooseProject}
+                      openEdit={(server) => dialog.show(() => <DialogServerV2 mode="edit" server={server} />)}
+                      toggleCollapsed={() => setState("collapsed", key, !state().collapsed[key])}
+                      language={language}
+                    />
+                    <Show when={healthy() && hasProjects() && !collapsed()}>
+                      <div class="mx-3 h-px bg-v2-border-border-base" />
+                      <HomeProjectList
+                        server={item}
+                        projects={projects()}
+                        selected={model.selection()}
+                        selectProject={model.selectProject}
+                        openNewSession={model.openProjectNewSession}
+                        editProject={model.editProject}
+                        closeProject={model.closeProject}
+                        clearNotifications={model.clearNotifications}
+                        unseenCount={model.unseenCount}
+                        language={language}
+                      />
+                    </Show>
+                  </div>
+                )
+              }}
+            </For>
+          </div>
+        </Show>
+      </ScrollView>
+
+      <SidebarRecents
+        records={model.records()}
+        server={model.selection().server}
+        loading={model.sessionLoad.isLoading}
+        canCreate={!!model.newSessionProject()}
+        openNewSession={model.openNewSession}
+        openSession={model.openSession}
+      />
+
+      <HomeUtilityNav
+        class="flex shrink-0"
+        openSettings={openSettings}
+        openHelp={() => platform.openLink(DOCS_URL)}
+        language={language}
+      />
+    </aside>
+  )
+}
+
+// Fills the space between Projects and the pinned Settings/Help. The row list
+// renders only as many sessions as measure into the free height so "View all"
+// — which sits outside the flexible area — is always reachable without
+// scrolling, at any window height.
+function SidebarRecents(props: {
+  records: HomeSessionRecord[]
+  server: ServerConnection.Key
+  loading: boolean
+  canCreate: boolean
+  openNewSession: () => void
+  openSession: (session: Session, options?: { background?: boolean }) => void
+}) {
+  const language = useLanguage()
+  const [listHeight, setListHeight] = createSignal(0)
+  const [list, setList] = createSignal<HTMLDivElement>()
+  createResizeObserver(
+    () => list() ?? [],
+    (rect) => setListHeight(rect.height),
+  )
+  const visible = createMemo(() =>
+    props.records.slice(0, Math.max(0, Math.floor((listHeight() + HOME_NAV_ROW_GAP) / HOME_NAV_ROW_PITCH))),
+  )
+
+  return (
+    <section class="flex min-h-0 min-w-0 flex-1 flex-col gap-1" aria-label={language.t("sidebar.recents")}>
+      <div class="flex h-7 min-w-0 shrink-0 items-center pl-1.5">
+        <div class={HOME_SECTION_LABEL}>{language.t("sidebar.recents")}</div>
+      </div>
+      <Show when={props.canCreate}>
+        <button
+          type="button"
+          data-action="sidebar-new-session"
+          class={`${HOME_PROJECT_NAV_ROW} shrink-0 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+          onClick={() => props.openNewSession()}
+        >
+          <IconV2 name="edit" size="small" />
+          <span class={HOME_PROJECT_NAV_LABEL}>{language.t("sidebar.recents.new")}</span>
+        </button>
+      </Show>
+      <div ref={setList} class="flex min-h-0 min-w-0 flex-1 flex-col gap-1 overflow-hidden">
+        <For each={visible()}>
+          {(record) => <SidebarSessionRow record={record} server={props.server} openSession={props.openSession} />}
+        </For>
+      </div>
+      <Show when={!props.loading && props.records.length > 0}>
+        <A
+          href="/"
+          data-action="sidebar-view-all"
+          class={`${HOME_PROJECT_NAV_ROW} shrink-0 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        >
+          {/* No chevron-right in the sprite; the existing rotation trick points it right. */}
+          <IconV2 name="chevron-down" size="small" style={{ transform: "rotate(-90deg)" }} />
+          <span class={HOME_PROJECT_NAV_LABEL}>{language.t("sidebar.recents.viewAll")}</span>
+        </A>
+      </Show>
+    </section>
+  )
+}
+
+function SidebarSessionRow(props: {
+  record: HomeSessionRecord
+  server: ServerConnection.Key
+  openSession: (session: Session, options?: { background?: boolean }) => void
+}) {
+  const tabs = useTabs()
+  const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
+  const open = createMemo(() => sessionHasOpenTab(tabs.store, props.server, props.record.session))
+  return (
+    <button
+      type="button"
+      data-component="sidebar-session-row"
+      class={HOME_PROJECT_NAV_ROW}
+      data-selected={open() ? "" : undefined}
+      title={title()}
+      onMouseDown={(event) => {
+        if (event.button === 1) event.preventDefault()
+      }}
+      onClick={(event) => props.openSession(props.record.session, { background: isBackgroundOpen(event) })}
+      onAuxClick={(event) => {
+        if (!isBackgroundOpen(event)) return
+        event.preventDefault()
+        props.openSession(props.record.session, { background: true })
+      }}
+    >
+      <SessionTabAvatar
+        project={props.record.project}
+        directory={props.record.session.directory}
+        sessionId={props.record.session.id}
+        server={props.server}
+        revealProjectOnHover={false}
+      />
+      <span class={HOME_PROJECT_NAV_LABEL}>{title()}</span>
+    </button>
+  )
+}
+
+export function HomeUtilityNav(props: {
+  class?: string
+  openSettings: () => void
+  openHelp: () => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  return (
+    <div class={`${props.class ?? ""} min-w-0 flex-col gap-1`}>
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        onClick={props.openSettings}
+      >
+        <IconV2 name="settings-gear" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
+      </button>
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        onClick={props.openHelp}
+      >
+        <IconV2 name="help" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
+      </button>
+    </div>
+  )
+}
+
+// Below the lg breakpoint the sidebar is hidden and the home screen stacks this
+// under its session list, preserving the pre-sidebar mobile arrangement.
+export function HomeMobileNav(props: { class?: string }) {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const openSettings = useSettingsCommand()
+  return (
+    <HomeUtilityNav
+      class={props.class}
+      openSettings={openSettings}
+      openHelp={() => platform.openLink(DOCS_URL)}
+      language={language}
+    />
+  )
+}
+
+function HomeServerRow(props: {
+  server: ServerConnection.Any
+  selected: boolean
+  collapsed: boolean
+  health: ServerHealth | undefined
+  controller: ReturnType<typeof useServerManagementController>
+  focusServer: (server: ServerConnection.Any) => void
+  chooseProject: (server: ServerConnection.Any) => void
+  openEdit: (server: ServerConnection.Http) => void
+  toggleCollapsed: () => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const [state, setState] = createStore({ menuOpen: false })
+  const healthy = () => !!props.health?.healthy
+  const canToggle = () => healthy() && global.ensureServerCtx(props.server).projects.list().length > 0
+  return (
+    <div class="group/server relative flex h-7 min-w-0 items-center rounded-[6px]">
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
+        data-selected={props.selected ? "" : undefined}
+        disabled={!healthy()}
+        onClick={() => props.focusServer(props.server)}
+      >
+        <span
+          data-action="home-server-collapse"
+          class="inline-flex -ml-0.5 -mr-1.5 size-5 shrink-0 items-center justify-center rounded-[4px] text-v2-icon-icon-muted"
+          classList={{
+            "hover:bg-v2-overlay-simple-overlay-hover": canToggle(),
+            "cursor-default opacity-40": !canToggle(),
+          }}
+          aria-label={
+            props.collapsed ? props.language.t("home.server.expand") : props.language.t("home.server.collapse")
+          }
+          aria-disabled={!canToggle()}
+          aria-expanded={canToggle() ? !props.collapsed : undefined}
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            if (!canToggle()) return
+            props.toggleCollapsed()
+          }}
+          onPointerDown={(event) => event.preventDefault()}
+        >
+          <IconV2
+            name="chevron-down"
+            size="small"
+            class="transition-transform duration-150 ease-in-out"
+            style={{ transform: `rotate(${props.collapsed ? -90 : 0}deg)` }}
+          />
+        </span>
+        <div class="flex size-4 shrink-0 items-center justify-center -mr-0.5">
+          <ServerHealthIndicator health={props.health} />
+        </div>
+        <span class="flex min-w-0 items-center gap-1">
+          <span class={HOME_PROJECT_NAV_LABEL}>{props.server.displayName ?? new URL(props.server.http.url).host}</span>
+          <Show when={props.server.label}>
+            {(label) => (
+              <span class="shrink-0 rounded-[3px] border border-v2-border-border-base px-1 py-0.5 text-[9px] leading-none text-v2-text-text-muted">
+                {label()}
+              </span>
+            )}
+          </Show>
+        </span>
+      </button>
+      <div
+        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/server:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
+        data-menu={state.menuOpen}
+      >
+        <ServerRowMenu
+          server={props.server}
+          controller={props.controller}
+          onEdit={props.openEdit}
+          open={state.menuOpen}
+          onOpenChange={(open) => setState("menuOpen", open)}
+        />
+        <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
+          <IconButtonV2
+            data-action="home-add-project"
+            variant="ghost-muted"
+            size="small"
+            icon={<IconV2 name="folder-add-left" />}
+            aria-label={props.language.t("home.project.add")}
+            disabled={props.health?.healthy === false}
+            onClick={() => props.chooseProject(props.server)}
+          />
+        </TooltipV2>
+      </div>
+    </div>
+  )
+}
+
+function HomeProjectList(props: {
+  server: ServerConnection.Any
+  projects: LocalProject[]
+  selected: HomeProjectSelection
+  selectProject: (server: ServerConnection.Any, directory: string) => void
+  openNewSession: (server: ServerConnection.Any, directory: string) => void
+  editProject: (server: ServerConnection.Any, project: LocalProject) => void
+  closeProject: (server: ServerConnection.Any, directory: string) => void
+  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
+  unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
+  language: ReturnType<typeof useLanguage>
+}) {
+  return (
+    <div class="flex min-w-0 flex-col gap-1">
+      <For each={props.projects}>
+        {(project) => (
+          <HomeProjectRow
+            project={project}
+            server={props.server}
+            selected={
+              props.selected.server === ServerConnection.key(props.server) &&
+              props.selected.directory === project.worktree
+            }
+            unseenCount={props.unseenCount(props.server, project)}
+            selectProject={props.selectProject}
+            openNewSession={props.openNewSession}
+            editProject={props.editProject}
+            closeProject={props.closeProject}
+            clearNotifications={props.clearNotifications}
+            language={props.language}
+          />
+        )}
+      </For>
+    </div>
+  )
+}
+
+function HomeProjectEmpty(props: {
+  server: ServerConnection.Any
+  recentlyClosed: LocalProject[]
+  homedir: string
+  chooseProject: (server: ServerConnection.Any) => void
+  openRecentProject: (server: ServerConnection.Any, directory: string) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  return (
+    <div class="flex min-w-0 flex-col gap-1">
+      <button
+        type="button"
+        data-action="home-add-project-row"
+        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        disabled={unreachable()}
+        onClick={() => props.chooseProject(props.server)}
+      >
+        <IconV2 name="folder-add-left" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
+      </button>
+      <Show when={props.recentlyClosed.length > 0}>
+        <div class="mt-3 flex h-7 min-w-0 shrink-0 items-center pl-1.5 pr-3">
+          <div class="text-v2-text-text-faint [font-weight:530]">{props.language.t("home.recentlyClosed")}</div>
+        </div>
+        <For each={props.recentlyClosed}>
+          {(project) => (
+            <HomeRecentlyClosedRow
+              project={project}
+              server={props.server}
+              homedir={props.homedir}
+              openRecentProject={props.openRecentProject}
+              language={props.language}
+            />
+          )}
+        </For>
+      </Show>
+    </div>
+  )
+}
+
+function HomeRecentlyClosedRow(props: {
+  project: LocalProject
+  server: ServerConnection.Any
+  homedir: string
+  openRecentProject: (server: ServerConnection.Any, directory: string) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  const path = () => {
+    const home = props.homedir
+    const worktree = props.project.worktree
+    if (home && (worktree === home || worktree.startsWith(`${home}/`))) return `~${worktree.slice(home.length)}`
+    return worktree
+  }
+  return (
+    <TooltipV2 placement="right" value={path()}>
+      <button
+        type="button"
+        data-component="home-recently-closed-row"
+        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60`}
+        disabled={unreachable()}
+        onClick={() => props.openRecentProject(props.server, props.project.worktree)}
+      >
+        <HomeProjectAvatar project={props.project} outline />
+        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
+      </button>
+    </TooltipV2>
+  )
+}
+
+function HomeProjectRow(props: {
+  project: LocalProject
+  server: ServerConnection.Any
+  selected: boolean
+  unseenCount: number
+  selectProject: (server: ServerConnection.Any, directory: string) => void
+  openNewSession: (server: ServerConnection.Any, directory: string) => void
+  editProject: (server: ServerConnection.Any, project: LocalProject) => void
+  closeProject: (server: ServerConnection.Any, directory: string) => void
+  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const platform = usePlatform()
+  const serverUnreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  const [state, setState] = createStore({ menuOpen: false })
+  const canRevealInFileManager = () =>
+    platform.platform === "desktop" && !!platform.openPath && ServerConnection.local(props.server)
+  const fileManagerActionLabel = () =>
+    props.language.t(
+      fileManagerApp(platform.platform === "desktop" ? (platform.os ?? "unknown") : "unknown").actionLabel,
+    )
+  const revealInFileManager = () => {
+    if (!platform.openPath) return
+    platform.openPath(props.project.worktree).catch((err: unknown) =>
+      showToast({
+        title: props.language.t("common.requestFailed"),
+        description: errorMessage(err, props.language.t("common.requestFailed")),
+      }),
+    )
+  }
+  return (
+    <div class="group/project relative flex h-7 min-w-0 items-center rounded-[6px]">
+      <button
+        type="button"
+        data-component="home-project-row"
+        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
+        data-selected={props.selected ? "" : undefined}
+        aria-current={props.selected ? "page" : undefined}
+        disabled={serverUnreachable()}
+        onClick={() => props.selectProject(props.server, props.project.worktree)}
+      >
+        <HomeProjectAvatar project={props.project} />
+        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
+      </button>
+      <div
+        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
+        data-menu={state.menuOpen}
+      >
+        <MenuV2
+          gutter={6}
+          modal={false}
+          placement="bottom-end"
+          open={state.menuOpen}
+          onOpenChange={(open) => setState("menuOpen", open)}
+        >
+          <MenuV2.Trigger
+            as={IconButtonV2}
+            data-action="home-project-menu"
+            variant="ghost-muted"
+            size="small"
+            icon={<IconV2 name="outline-dots" />}
+            aria-label={props.language.t("common.moreOptions")}
+          />
+          <MenuV2.Portal>
+            <MenuV2.Content>
+              <MenuV2.Item onSelect={() => props.openNewSession(props.server, props.project.worktree)}>
+                {props.language.t("command.session.new")}
+              </MenuV2.Item>
+              <MenuV2.Item onSelect={() => props.editProject(props.server, props.project)}>
+                {props.language.t("dialog.project.edit.title")}
+              </MenuV2.Item>
+              <Show when={canRevealInFileManager()}>
+                <MenuV2.Item onSelect={revealInFileManager}>{fileManagerActionLabel()}</MenuV2.Item>
+              </Show>
+              <MenuV2.Item
+                disabled={props.unseenCount === 0}
+                onSelect={() => props.clearNotifications(props.server, props.project)}
+              >
+                {props.language.t("sidebar.project.clearNotifications")}
+              </MenuV2.Item>
+              <MenuV2.Separator />
+              <MenuV2.Item onSelect={() => props.closeProject(props.server, props.project.worktree)}>
+                {props.language.t("common.close")}
+              </MenuV2.Item>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
+        <IconButtonV2
+          data-action="home-project-new-session"
+          variant="ghost-muted"
+          size="small"
+          icon={<IconV2 name="edit" />}
+          aria-label={props.language.t("command.session.new")}
+          onClick={() => props.openNewSession(props.server, props.project.worktree)}
+        />
+      </div>
+    </div>
+  )
+}
+
+function HomeProjectAvatar(props: { project: LocalProject; outline?: boolean }) {
+  const name = createMemo(() => displayName(props.project))
+  return (
+    <ProjectAvatar
+      fallback={name()}
+      src={props.outline ? undefined : getProjectAvatarSource(props.project.id, props.project.icon)}
+      variant={props.outline ? "outline" : getProjectAvatarVariant(props.project.icon?.color)}
+    />
+  )
+}
diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index 8cebeaebdf..6c41dd7346 100644
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -804,6 +804,9 @@ export const dict = {
   "sidebar.nav.projectsAndSessions": "Projects and sessions",
   "sidebar.settings": "Settings",
   "sidebar.help": "Help",
+  "sidebar.recents": "Recents",
+  "sidebar.recents.new": "New session",
+  "sidebar.recents.viewAll": "View all",
   "sidebar.workspaces.enable": "Enable workspaces",
   "sidebar.workspaces.disable": "Disable workspaces",
   "sidebar.gettingStarted.title": "Getting started",
diff --git a/packages/app/src/i18n/es.ts b/packages/app/src/i18n/es.ts
index 93ffc4bcd0..8221e76282 100644
--- a/packages/app/src/i18n/es.ts
+++ b/packages/app/src/i18n/es.ts
@@ -739,6 +739,9 @@ export const dict = {
   "sidebar.nav.projectsAndSessions": "Proyectos y sesiones",
   "sidebar.settings": "Ajustes",
   "sidebar.help": "Ayuda",
+  "sidebar.recents": "Recientes",
+  "sidebar.recents.new": "Sesión nueva",
+  "sidebar.recents.viewAll": "Ver todo",
   "sidebar.workspaces.enable": "Habilitar espacios de trabajo",
   "sidebar.workspaces.disable": "Deshabilitar espacios de trabajo",
   "sidebar.gettingStarted.title": "Empezando",
diff --git a/packages/app/src/pages/home-model.tsx b/packages/app/src/pages/home-model.tsx
new file mode 100644
index 0000000000..b22b38aa1c
--- /dev/null
+++ b/packages/app/src/pages/home-model.tsx
@@ -0,0 +1,323 @@
+import type { Session } from "@opencode-ai/sdk/v2/client"
+import { createEffect, createMemo, startTransition } from "solid-js"
+import { useQuery } from "@tanstack/solid-query"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useDirectoryPicker } from "@/components/directory-picker"
+import { useGlobal } from "@/context/global"
+import {
+  loadHomeSessionIndex,
+  retainHomeSessions,
+  type HomeSessionEvents,
+} from "@/context/global-sync/home-session-index"
+import { useLanguage } from "@/context/language"
+import { useLayout, type HomeProjectSelection, type LocalProject } from "@/context/layout"
+import { useNotification } from "@/context/notification"
+import { ServerConnection, useServer } from "@/context/server"
+import { useServerSync } from "@/context/server-sync"
+import { useTabs } from "@/context/tabs"
+import {
+  closeHomeProject,
+  displayName,
+  homeProjectDirectories,
+  projectForSession,
+  toggleHomeProjectSelection,
+} from "@/pages/layout/helpers"
+import { pathKey } from "@/utils/path-key"
+import { shouldOpenSessionInBackground } from "./home-session-open"
+
+export const HOME_SESSION_LIMIT = 64
+
+export type HomeSessionRecord = {
+  session: Session
+  project: LocalProject
+  projectName: string
+}
+
+export type OpenSessionOptions = { background?: boolean }
+
+// Middle-click or Cmd+click on macOS (Ctrl+click elsewhere) opens a session
+// tab in the background without navigating, matching browser conventions.
+export function isBackgroundOpen(event: MouseEvent) {
+  return shouldOpenSessionInBackground({
+    button: event.button,
+    mac: typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform),
+    meta: event.metaKey,
+    ctrl: event.ctrlKey,
+    shift: event.shiftKey,
+    alt: event.altKey,
+  })
+}
+
+export function buildHomeSessionRecords(input: {
+  sessions: () => Session[]
+  projectDirectories: () => string[]
+  projects: () => LocalProject[]
+  projectByID: () => Map<string, LocalProject>
+}) {
+  const directories = new Set(input.projectDirectories().map(pathKey))
+  const sessions = input.sessions().filter((session) => directories.has(pathKey(session.directory)))
+  return [...new Map(sessions.map((session) => [session.id, session] as const)).values()]
+    .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
+    .flatMap((session) => {
+      const directory = pathKey(session.directory)
+      const project =
+        input
+          .projects()
+          .find(
+            (item) =>
+              pathKey(item.worktree) === directory || item.sandboxes?.some((sandbox) => pathKey(sandbox) === directory),
+          ) ?? projectForSession(session, input.projects(), input.projectByID())
+      if (!project) return []
+      return {
+        session,
+        project,
+        projectName: displayName(project),
+      }
+    })
+}
+
+// The project selection, the recent-session index, and the actions the home
+// screen used to own privately. The persistent sidebar
+// (packages/app/src/components/app-sidebar.tsx) and NewHome both call this, so
+// the sidebar's "New" row and the home screen's "New session" button run the
+// same code. Two callers means two sets of memos, which stay consistent because
+// the selection lives in shared context and the session index is one TanStack
+// query deduped by key.
+//
+// Anything that must run exactly once — command registration, the prefetch
+// effect, search state — stays in NewHome.
+export function createHomeModel() {
+  const sync = useServerSync()
+  const layout = useLayout()
+  const global = useGlobal()
+  const server = useServer()
+  const tabs = useTabs()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const notification = useNotification()
+  const pickDirectory = useDirectoryPicker()
+
+  const selection = layout.home.selection
+
+  const focusedServer = createMemo(
+    () => global.servers.list().find((conn) => ServerConnection.key(conn) === selection().server) ?? server.current,
+  )
+  const focusedServerCtx = createMemo(() => {
+    const conn = focusedServer()
+    if (!conn) return
+    return global.ensureServerCtx(conn)
+  })
+  const focusedSync = () => focusedServerCtx()?.sync ?? sync()
+  const homeSessions = () => focusedSync().homeSessions
+  const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? layout.projects.list())
+  const recentlyClosed = createMemo(
+    () => focusedServerCtx()?.projects.recentlyClosed() ?? layout.projects.recentlyClosed(),
+  )
+  const homedir = createMemo(() => focusedSync().data.path.home ?? "")
+  const selectedProject = createMemo(() => projects().find((project) => project.worktree === selection().directory))
+  const newSessionProject = createMemo(
+    () =>
+      selectedProject() ??
+      projects().find((project) => project.worktree === focusedServerCtx()?.projects.last()) ??
+      projects()[0],
+  )
+  const directories = (project: LocalProject) => [project.worktree, ...(project.sandboxes ?? [])]
+  const projectDirectories = createMemo(() => {
+    const project = selectedProject()
+    if (!project) return projects().flatMap(directories)
+    return directories(project)
+  })
+
+  const sessionEventLoad = useQuery(() => ({
+    queryKey: homeSessions().eventsKey,
+    queryFn: async (): Promise<HomeSessionEvents> => ({ sequence: 0, entries: [] }),
+    initialData: { sequence: 0, entries: [] } satisfies HomeSessionEvents,
+    enabled: false,
+  }))
+  const sessionLoad = useQuery(() => ({
+    queryKey: homeSessions().indexKey,
+    enabled: !!focusedServerCtx(),
+    queryFn: async ({ signal }) => {
+      const ctx = focusedServerCtx()
+      if (!ctx) return { sessions: [], eventSequence: 0 }
+      const cache = homeSessions()
+      const eventSequence = cache.eventSequence()
+      const index = await loadHomeSessionIndex(
+        (input, options) => ctx.sdk.client.v2.session.list(input, options),
+        eventSequence,
+        signal,
+      )
+      cache.complete(eventSequence)
+      return index
+    },
+    retry: false,
+    staleTime: 30_000,
+    refetchOnMount: true,
+    refetchOnReconnect: true,
+  }))
+
+  const projectByID = createMemo(
+    () => new Map(projects().flatMap((project) => (project.id ? [[project.id, project] as const] : []))),
+  )
+  const indexedSessions = createMemo(() =>
+    retainHomeSessions(
+      homeSessions().sessions(sessionLoad.data, sessionEventLoad.data),
+      HOME_SESSION_LIMIT,
+      Date.now(),
+    ),
+  )
+  const allRecords = createMemo(() =>
+    buildHomeSessionRecords({
+      sessions: indexedSessions,
+      projectDirectories,
+      projects,
+      projectByID,
+    }),
+  )
+  const records = createMemo(() => allRecords().slice(0, HOME_SESSION_LIMIT))
+
+  function setSelection(next: HomeProjectSelection) {
+    layout.home.setSelection(next)
+  }
+
+  // Keeps the selection pointing at a server that still exists. Idempotent, so
+  // it is safe with both the sidebar and the home screen holding a model.
+  createEffect(() => {
+    const list = global.servers.list()
+    if (list.some((conn) => ServerConnection.key(conn) === selection().server)) return
+    const conn = list.find((conn) => ServerConnection.key(conn) === server.key) ?? list[0]
+    if (conn) setSelection({ server: ServerConnection.key(conn) })
+  })
+
+  function focusServer(conn: ServerConnection.Any) {
+    setSelection({ server: ServerConnection.key(conn) })
+  }
+
+  function selectProject(conn: ServerConnection.Any, directory: string) {
+    const key = ServerConnection.key(conn)
+    if (global.servers.health[key]?.healthy === false) return
+    if (
+      !global
+        .ensureServerCtx(conn)
+        .projects.list()
+        .some((project) => project.worktree === directory)
+    )
+      return
+    setSelection(toggleHomeProjectSelection(selection(), key, directory))
+  }
+
+  function addProjects(conn: ServerConnection.Any, directories: string[]) {
+    const directory = directories[0]
+    if (!directory) return
+    const ctx = global.ensureServerCtx(conn)
+    directories.forEach(ctx.projects.open)
+    ctx.projects.touch(directory)
+    setSelection({ server: ServerConnection.key(conn), directory })
+  }
+
+  function openNewSession() {
+    const conn = focusedServer()
+    const project = newSessionProject()
+    if (!conn || !project) return
+    openProjectNewSession(conn, project.worktree)
+  }
+
+  function openProjectNewSession(conn: ServerConnection.Any, directory: string) {
+    const ctx = global.ensureServerCtx(conn)
+    ctx.projects.open(directory)
+    ctx.projects.touch(directory)
+    tabs.newDraft({ server: ServerConnection.key(conn), directory })
+  }
+
+  function editProject(conn: ServerConnection.Any, project: LocalProject) {
+    void import("@/components/dialog-edit-project-v2").then((x) => {
+      void dialog.show(() => <x.DialogEditProjectV2 server={conn} project={project} />)
+    })
+  }
+
+  function closeProject(conn: ServerConnection.Any, directory: string) {
+    const next = closeHomeProject(
+      selection(),
+      ServerConnection.key(conn),
+      global.ensureServerCtx(conn).projects,
+      directory,
+    )
+    if (next) setSelection(next)
+  }
+
+  function unseenCount(conn: ServerConnection.Any, project: LocalProject) {
+    const state = notification.ensureServerState(ServerConnection.key(conn))
+    return directories(project).reduce((total, directory) => total + state.project.unseenCount(directory), 0)
+  }
+
+  function clearNotifications(conn: ServerConnection.Any, project: LocalProject) {
+    const state = notification.ensureServerState(ServerConnection.key(conn))
+    directories(project)
+      .filter((directory) => state.project.unseenCount(directory) > 0)
+      .forEach((directory) => state.project.markViewed(directory))
+  }
+
+  function openSession(session: Session, options?: OpenSessionOptions) {
+    const directoryKey = pathKey(session.directory)
+    const project =
+      projects().find(
+        (item) =>
+          pathKey(item.worktree) === directoryKey ||
+          item.sandboxes?.some((sandbox) => pathKey(sandbox) === directoryKey),
+      ) ?? projectForSession(session, projects(), projectByID())
+    const conn = focusedServer()
+    if (!conn) return
+    const directory = project?.worktree ?? session.directory
+    const ctx = global.ensureServerCtx(conn)
+    ctx.projects.open(directory)
+    if (options?.background) {
+      tabs.addSessionTab({ server: ServerConnection.key(conn), sessionId: session.id })
+      return
+    }
+    ctx.projects.touch(directory)
+    startTransition(() => {
+      const tab = tabs.addSessionTab({ server: ServerConnection.key(conn), sessionId: session.id })
+      tabs.select(tab)
+    })
+  }
+
+  function chooseProject(conn: ServerConnection.Any) {
+    if (global.servers.health[ServerConnection.key(conn)]?.healthy === false) return
+
+    pickDirectory({
+      server: conn,
+      title: language.t("command.project.open"),
+      multiple: true,
+      onSelect: (result) => addProjects(conn, homeProjectDirectories(result)),
+    })
+  }
+
+  return {
+    selection,
+    focusedServer,
+    focusedServerCtx,
+    homeSessions,
+    projects,
+    recentlyClosed,
+    homedir,
+    selectedProject,
+    newSessionProject,
+    projectDirectories,
+    sessionLoad,
+    projectByID,
+    allRecords,
+    records,
+    setSelection,
+    focusServer,
+    selectProject,
+    addProjects,
+    openNewSession,
+    openProjectNewSession,
+    editProject,
+    closeProject,
+    unseenCount,
+    clearNotifications,
+    openSession,
+    chooseProject,
+  }
+}
diff --git a/packages/app/src/pages/home-styles.ts b/packages/app/src/pages/home-styles.ts
new file mode 100644
index 0000000000..02b20d21be
--- /dev/null
+++ b/packages/app/src/pages/home-styles.ts
@@ -0,0 +1,17 @@
+// Row and label classes shared by the home screen and the persistent sidebar
+// (packages/app/src/components/app-sidebar.tsx), which renders the project and
+// recent-session rows that used to live inside home.tsx.
+export const HOME_ROW_LAYOUT =
+  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
+export const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
+export const HOME_ROW = `${HOME_ROW_BASE} [font-weight:530] text-v2-text-text-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover`
+export const HOME_PROJECT_NAV_LABEL = "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
+export const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:bg-v2-background-bg-layer-03 data-[selected]:text-v2-text-text-base data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-03 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
+export const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"
+
+// HOME_PROJECT_NAV_ROW rows are h-7 (28px) in a flex column with gap-1 (4px).
+// n rows occupy 32n - 4, since the last one carries no trailing gap, so the
+// sidebar fits floor((height + 4) / 32) recent sessions above its pinned
+// "View all" row.
+export const HOME_NAV_ROW_PITCH = 32
+export const HOME_NAV_ROW_GAP = 4
diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx
index 65819b65a0..5cc985e87b 100644
--- a/packages/app/src/pages/home.tsx
+++ b/packages/app/src/pages/home.tsx
@@ -3,7 +3,6 @@ import {
   type ComponentProps,
   createEffect,
   createMemo,
-  createResource,
   createRoot,
   createSignal,
   For,
@@ -16,20 +15,16 @@ import {
   Switch,
 } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { DOCS_URL } from "@codev/brand"
 import { createStore, produce } from "solid-js/store"
-import { useQuery } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
 import { Logo } from "@opencode-ai/ui/logo"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { getProjectAvatarVariant, useLayout, type HomeProjectSelection, type LocalProject } from "@/context/layout"
+import { type LocalProject } from "@/context/layout"
 import { useNavigate } from "@solidjs/router"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -37,46 +32,31 @@ import { usePlatform } from "@/context/platform"
 import { DateTime } from "luxon"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useDirectoryPicker } from "@/components/directory-picker"
-import { useSettingsCommand } from "@/components/settings-dialog"
-import { DialogSelectServer, useServerManagementController } from "@/components/dialog-select-server"
-import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
+import { DialogSelectServer } from "@/components/dialog-select-server"
 import { ServerConnection, serverName, useServer } from "@/context/server"
 import { sessionHasOpenTab, useTabs } from "@/context/tabs"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
-import { useNotification } from "@/context/notification"
+import { displayName, errorMessage } from "@/pages/layout/helpers"
+import { HomeMobileNav } from "@/components/app-sidebar"
 import {
-  closeHomeProject,
-  displayName,
-  errorMessage,
-  getProjectAvatarSource,
-  homeProjectDirectories,
-  projectForSession,
-  toggleHomeProjectSelection,
-} from "@/pages/layout/helpers"
+  createHomeModel,
+  isBackgroundOpen,
+  type HomeSessionRecord,
+  type OpenSessionOptions,
+} from "@/pages/home-model"
+import { HOME_ROW, HOME_SECTION_LABEL } from "@/pages/home-styles"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
 import { sessionTitle } from "@/utils/session-title"
 import { pathKey } from "@/utils/path-key"
 import { useGlobal } from "@/context/global"
 import { useCommand } from "@/context/command"
 import { Binary } from "@opencode-ai/core/util/binary"
-import { ServerRowMenu } from "@/components/server/server-row-menu"
-import { ServerHealthIndicator } from "@/components/server/server-row"
-import { type ServerHealth } from "@/utils/server-health"
-import { Persist, persisted } from "@/utils/persist"
 import { useMarked } from "@opencode-ai/ui/context/marked"
 import { preloadMarkdown } from "@opencode-ai/session-ui/markdown-cache"
 import { archiveHomeSession } from "./home-session-archive"
-import { shouldOpenSessionInBackground } from "./home-session-open"
 import { showToast } from "@/utils/toast"
-import { fileManagerApp } from "@/utils/file-manager"
-import {
-  loadHomeSessionIndex,
-  retainHomeSessions,
-  type HomeSessionEvents,
-} from "@/context/global-sync/home-session-index"
 
-const HOME_SESSION_LIMIT = 64
 const HOME_SESSION_HEADER_STICKY_TOP = 12
 const HOME_SESSION_HEADER_TEXT_HEIGHT = 16
 const HOME_SESSION_HEADER_FADE_DISTANCE = 16
@@ -98,19 +78,6 @@ function containHomeWheel(event: WheelEvent, viewport: HTMLElement) {
   event.preventDefault()
 }
 const SHOW_HOME_SESSION_ARCHIVE = false
-const HOME_ROW_LAYOUT =
-  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
-const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
-const HOME_ROW = `${HOME_ROW_BASE} [font-weight:530] text-v2-text-text-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover`
-const HOME_PROJECT_NAV_LABEL = "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
-const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:bg-v2-background-bg-layer-03 data-[selected]:text-v2-text-text-base data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-03 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
-const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"
-
-type HomeSessionRecord = {
-  session: Session
-  project: LocalProject
-  projectName: string
-}
 
 type HomeSessionGroup = {
   id: "today" | "yesterday" | "older"
@@ -128,34 +95,6 @@ const HOME_SEARCH_RESULT_META =
 
 let pendingHomeNavigation: { server: ServerConnection.Key; href: string } | undefined
 
-function buildHomeSessionRecords(input: {
-  sessions: () => Session[]
-  projectDirectories: () => string[]
-  projects: () => LocalProject[]
-  projectByID: () => Map<string, LocalProject>
-}) {
-  const directories = new Set(input.projectDirectories().map(pathKey))
-  const sessions = input.sessions().filter((session) => directories.has(pathKey(session.directory)))
-  return [...new Map(sessions.map((session) => [session.id, session] as const)).values()]
-    .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
-    .flatMap((session) => {
-      const directory = pathKey(session.directory)
-      const project =
-        input
-          .projects()
-          .find(
-            (item) =>
-              pathKey(item.worktree) === directory || item.sandboxes?.some((sandbox) => pathKey(sandbox) === directory),
-          ) ?? projectForSession(session, input.projects(), input.projectByID())
-      if (!project) return []
-      return {
-        session,
-        project,
-        projectName: displayName(project),
-      }
-    })
-}
-
 function matchesHomeSessionSearch(record: HomeSessionRecord, query: string) {
   return `${record.session.title} ${record.projectName}`.toLowerCase().includes(query)
 }
@@ -273,26 +212,7 @@ function useHomeSessionHeaderOpacity(groups: () => HomeSessionGroup[]) {
   return { setViewport, setContentRef, setHeaderRef, update, titleOpacity }
 }
 
-// Middle-click or Cmd+click on macOS (Ctrl+click elsewhere) opens a session
-// tab in the background without navigating, matching browser conventions.
-function isBackgroundOpen(event: MouseEvent) {
-  return shouldOpenSessionInBackground({
-    button: event.button,
-    mac: typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform),
-    meta: event.metaKey,
-    ctrl: event.ctrlKey,
-    shift: event.shiftKey,
-    alt: event.altKey,
-  })
-}
-
-type OpenSessionOptions = { background?: boolean }
-
 export function NewHome() {
-  const sync = useServerSync()
-  const layout = useLayout()
-  const platform = usePlatform()
-  const pickDirectory = useDirectoryPicker()
   const dialog = useDialog()
   const navigate = useNavigate()
   const server = useServer()
@@ -300,9 +220,12 @@ export function NewHome() {
   const global = useGlobal()
   const tabs = useTabs()
   const command = useCommand()
-  const notification = useNotification()
   const marked = useMarked()
-  const openSettings = useSettingsCommand()
+  // The project column that used to sit beside this list now lives in the
+  // persistent sidebar (components/app-sidebar.tsx). Both call createHomeModel,
+  // so the two screens share one selection, one session index, and one set of
+  // actions.
+  const model = createHomeModel()
   let focusSessionSearch: (() => void) | undefined
   let sessionViewport: HTMLDivElement | undefined
   const [sessionThumbTrack, setSessionThumbTrack] = createSignal<HTMLDivElement>()
@@ -311,36 +234,14 @@ export function NewHome() {
     search: "",
     searchFocused: false,
   })
-  const selection = layout.home.selection
+  const selection = model.selection
+  const focusedServer = model.focusedServer
+  const focusedServerCtx = model.focusedServerCtx
+  const selectedProject = model.selectedProject
+  const newSessionProject = model.newSessionProject
+  const records = model.records
+  const sessionLoad = model.sessionLoad
 
-  const focusedServer = createMemo(
-    () => global.servers.list().find((conn) => ServerConnection.key(conn) === selection().server) ?? server.current,
-  )
-  const focusedServerCtx = createMemo(() => {
-    const conn = focusedServer()
-    if (!conn) return
-    return global.ensureServerCtx(conn)
-  })
-  const focusedSync = () => focusedServerCtx()?.sync ?? sync()
-  const homeSessions = () => focusedSync().homeSessions
-  const projects = createMemo(() => focusedServerCtx()?.projects.list() ?? layout.projects.list())
-  const recentlyClosed = createMemo(
-    () => focusedServerCtx()?.projects.recentlyClosed() ?? layout.projects.recentlyClosed(),
-  )
-  const homedir = createMemo(() => focusedSync().data.path.home ?? "")
-  const selectedProject = createMemo(() => projects().find((project) => project.worktree === selection().directory))
-  const newSessionProject = createMemo(
-    () =>
-      selectedProject() ??
-      projects().find((project) => project.worktree === focusedServerCtx()?.projects.last()) ??
-      projects()[0],
-  )
-  const directories = (project: LocalProject) => [project.worktree, ...(project.sandboxes ?? [])]
-  const projectDirectories = createMemo(() => {
-    const project = selectedProject()
-    if (!project) return projects().flatMap(directories)
-    return directories(project)
-  })
   const search = createMemo(() => state.search.trim())
   const searchPlaceholder = createMemo(() => {
     const project = selectedProject()
@@ -355,57 +256,10 @@ export function NewHome() {
     }
     return language.t("home.sessions.search.placeholder")
   })
-  const sessionEventLoad = useQuery(() => ({
-    queryKey: homeSessions().eventsKey,
-    queryFn: async (): Promise<HomeSessionEvents> => ({ sequence: 0, entries: [] }),
-    initialData: { sequence: 0, entries: [] } satisfies HomeSessionEvents,
-    enabled: false,
-  }))
-  const sessionLoad = useQuery(() => ({
-    queryKey: homeSessions().indexKey,
-    enabled: !!focusedServerCtx(),
-    queryFn: async ({ signal }) => {
-      const ctx = focusedServerCtx()
-      if (!ctx) return { sessions: [], eventSequence: 0 }
-      const cache = homeSessions()
-      const eventSequence = cache.eventSequence()
-      const index = await loadHomeSessionIndex(
-        (input, options) => ctx.sdk.client.v2.session.list(input, options),
-        eventSequence,
-        signal,
-      )
-      cache.complete(eventSequence)
-      return index
-    },
-    retry: false,
-    staleTime: 30_000,
-    refetchOnMount: true,
-    refetchOnReconnect: true,
-  }))
-
-  const projectByID = createMemo(
-    () => new Map(projects().flatMap((project) => (project.id ? [[project.id, project] as const] : []))),
-  )
-  const indexedSessions = createMemo(() =>
-    retainHomeSessions(
-      homeSessions().sessions(sessionLoad.data, sessionEventLoad.data),
-      HOME_SESSION_LIMIT,
-      Date.now(),
-    ),
-  )
-  const allRecords = createMemo(() =>
-    buildHomeSessionRecords({
-      sessions: indexedSessions,
-      projectDirectories,
-      projects,
-      projectByID,
-    }),
-  )
-  const records = createMemo(() => allRecords().slice(0, HOME_SESSION_LIMIT))
   const searchResults = createMemo(() => {
     const query = search().toLowerCase()
     if (!query) return []
-    return allRecords().filter((record) => matchesHomeSessionSearch(record, query))
+    return model.allRecords().filter((record) => matchesHomeSessionSearch(record, query))
   })
   const searchOpen = createMemo(() => state.searchFocused && search().length > 0)
   const groups = createMemo(() => groupSessions(records(), language))
@@ -444,17 +298,13 @@ export function NewHome() {
       })
   })
 
-  function setSelection(next: HomeProjectSelection) {
-    layout.home.setSelection(next)
-  }
-
   function closeSearch() {
     setState("search", "")
     setState("searchFocused", false)
   }
 
   function selectSearchSession(session: Session, options?: OpenSessionOptions) {
-    openSession(session, options)
+    model.openSession(session, options)
     // Background opens keep the search visible so several results can be
     // opened in a row.
     if (!options?.background) closeSearch()
@@ -498,13 +348,6 @@ export function NewHome() {
     },
   ])
 
-  createEffect(() => {
-    const list = global.servers.list()
-    if (list.some((conn) => ServerConnection.key(conn) === selection().server)) return
-    const conn = list.find((conn) => ServerConnection.key(conn) === server.key) ?? list[0]
-    if (conn) setSelection({ server: ServerConnection.key(conn) })
-  })
-
   createEffect(() => {
     const pending = pendingHomeNavigation
     if (!pending || pending.server !== server.key) return
@@ -512,88 +355,6 @@ export function NewHome() {
     navigate(pending.href)
   })
 
-  function focusServer(conn: ServerConnection.Any) {
-    setSelection({ server: ServerConnection.key(conn) })
-  }
-
-  function selectProject(conn: ServerConnection.Any, directory: string) {
-    const key = ServerConnection.key(conn)
-    if (global.servers.health[key]?.healthy === false) return
-    if (
-      !global
-        .ensureServerCtx(conn)
-        .projects.list()
-        .some((project) => project.worktree === directory)
-    )
-      return
-    setSelection(toggleHomeProjectSelection(selection(), key, directory))
-  }
-
-  function addProjects(conn: ServerConnection.Any, directories: string[]) {
-    const directory = directories[0]
-    if (!directory) return
-    const ctx = global.ensureServerCtx(conn)
-    directories.forEach(ctx.projects.open)
-    ctx.projects.touch(directory)
-    setSelection({ server: ServerConnection.key(conn), directory })
-  }
-
-  function openNewSession() {
-    const conn = focusedServer()
-    const project = newSessionProject()
-    if (!conn || !project) return
-    openProjectNewSession(conn, project.worktree)
-  }
-
-  function openProjectNewSession(conn: ServerConnection.Any, directory: string) {
-    const ctx = global.ensureServerCtx(conn)
-    ctx.projects.open(directory)
-    ctx.projects.touch(directory)
-    tabs.newDraft({ server: ServerConnection.key(conn), directory })
-  }
-
-  function editProject(conn: ServerConnection.Any, project: LocalProject) {
-    void import("@/components/dialog-edit-project-v2").then((x) => {
-      void dialog.show(() => <x.DialogEditProjectV2 server={conn} project={project} />)
-    })
-  }
-
-  function unseenCount(conn: ServerConnection.Any, project: LocalProject) {
-    const state = notification.ensureServerState(ServerConnection.key(conn))
-    return directories(project).reduce((total, directory) => total + state.project.unseenCount(directory), 0)
-  }
-
-  function clearNotifications(conn: ServerConnection.Any, project: LocalProject) {
-    const state = notification.ensureServerState(ServerConnection.key(conn))
-    directories(project)
-      .filter((directory) => state.project.unseenCount(directory) > 0)
-      .forEach((directory) => state.project.markViewed(directory))
-  }
-
-  function openSession(session: Session, options?: OpenSessionOptions) {
-    const directoryKey = pathKey(session.directory)
-    const project =
-      projects().find(
-        (item) =>
-          pathKey(item.worktree) === directoryKey ||
-          item.sandboxes?.some((sandbox) => pathKey(sandbox) === directoryKey),
-      ) ?? projectForSession(session, projects(), projectByID())
-    const conn = focusedServer()
-    if (!conn) return
-    const directory = project?.worktree ?? session.directory
-    const ctx = global.ensureServerCtx(conn)
-    ctx.projects.open(directory)
-    if (options?.background) {
-      tabs.addSessionTab({ server: ServerConnection.key(conn), sessionId: session.id })
-      return
-    }
-    ctx.projects.touch(directory)
-    startTransition(() => {
-      const tab = tabs.addSessionTab({ server: ServerConnection.key(conn), sessionId: session.id })
-      tabs.select(tab)
-    })
-  }
-
   async function archiveSession(session: Session) {
     const conn = focusedServer()
     const ctx = focusedServerCtx()
@@ -618,21 +379,6 @@ export function NewHome() {
     })
   }
 
-  function chooseProject(conn: ServerConnection.Any) {
-    if (global.servers.health[ServerConnection.key(conn)]?.healthy === false) return
-
-    function resolve(result: string | string[] | null) {
-      addProjects(conn, homeProjectDirectories(result))
-    }
-
-    pickDirectory({
-      server: conn,
-      title: language.t("command.project.open"),
-      multiple: true,
-      onSelect: resolve,
-    })
-  }
-
   return (
     <div class="rounded-[10px] shadow-[var(--v2-elevation-raised)] m-2 min-h-0 overflow-hidden bg-v2-background-bg-base self-stretch flex-1">
       <ScrollView
@@ -650,37 +396,10 @@ export function NewHome() {
           containHomeWheel(event, sessionViewport)
         }}
       >
-        <div class="mx-auto grid min-h-full w-full max-w-[1080px] grid-rows-[auto_minmax(0,1fr)_auto] gap-4 px-3 lg:grid-cols-[280px_minmax(0,720px)] lg:grid-rows-1 lg:gap-8 lg:px-6">
-          <HomeProjectColumn
-            projects={projects()}
-            recentlyClosed={recentlyClosed()}
-            homedir={homedir()}
-            selected={selection()}
-            focusServer={focusServer}
-            selectProject={selectProject}
-            openNewSession={openProjectNewSession}
-            openRecentProject={(conn, directory) => addProjects(conn, [directory])}
-            chooseProject={(conn) => void chooseProject(conn)}
-            editProject={editProject}
-            closeProject={(conn, directory) => {
-              const next = closeHomeProject(
-                selection(),
-                ServerConnection.key(conn),
-                global.ensureServerCtx(conn).projects,
-                directory,
-              )
-              if (next) setSelection(next)
-            }}
-            clearNotifications={clearNotifications}
-            unseenCount={unseenCount}
-            openSettings={openSettings}
-            openHelp={() => platform.openLink(DOCS_URL)}
-            language={language}
-            onWheel={(event) => {
-              if (sessionViewport) containHomeWheel(event, sessionViewport)
-            }}
-          />
-
+        {/* The project column moved to the persistent sidebar, so this grid is a
+            single centred column. HomeMobileNav keeps Settings/Help reachable
+            below lg, where that sidebar is hidden. */}
+        <div class="mx-auto grid min-h-full w-full max-w-[760px] grid-rows-[minmax(0,1fr)_auto] gap-4 px-3 lg:grid-rows-1 lg:px-6">
           <section
             ref={setSessionHoverTarget}
             class="min-h-0 min-w-0 flex-1 flex flex-col"
@@ -717,7 +436,7 @@ export function NewHome() {
                     size="normal"
                     icon="edit"
                     class="pointer-events-auto h-7 px-2 [font-weight:530]"
-                    onClick={openNewSession}
+                    onClick={model.openNewSession}
                   >
                     {language.t("command.session.new")}
                   </ButtonV2>
@@ -743,7 +462,7 @@ export function NewHome() {
               >
                 <Show
                   when={groups().length > 0}
-                  fallback={<HomeSessionsEmpty onNewSession={newSessionProject() ? openNewSession : undefined} />}
+                  fallback={<HomeSessionsEmpty onNewSession={newSessionProject() ? model.openNewSession : undefined} />}
                 >
                   <div ref={sessionHeaderOpacity.setContentRef} class="flex flex-col pt-3 pr-3 pb-16">
                     <For each={groups()}>
@@ -764,7 +483,7 @@ export function NewHome() {
                                   record={record}
                                   showProjectName={!selectedProject()}
                                   server={selection().server}
-                                  openSession={openSession}
+                                  openSession={model.openSession}
                                   archiveSession={archiveSession}
                                 />
                               )}
@@ -778,488 +497,13 @@ export function NewHome() {
               </Show>
             </div>
           </section>
-          <HomeUtilityNav
-            class="flex lg:hidden"
-            openSettings={openSettings}
-            openHelp={() => platform.openLink(DOCS_URL)}
-            language={language}
-          />
+          <HomeMobileNav class="flex pb-4 lg:hidden" />
         </div>
       </ScrollView>
     </div>
   )
 }
 
-function HomeProjectColumn(props: {
-  projects: LocalProject[]
-  recentlyClosed: LocalProject[]
-  homedir: string
-  selected: HomeProjectSelection
-  focusServer: (server: ServerConnection.Any) => void
-  selectProject: (server: ServerConnection.Any, directory: string) => void
-  openNewSession: (server: ServerConnection.Any, directory: string) => void
-  openRecentProject: (server: ServerConnection.Any, directory: string) => void
-  chooseProject: (server: ServerConnection.Any) => void
-  editProject: (server: ServerConnection.Any, project: LocalProject) => void
-  closeProject: (server: ServerConnection.Any, directory: string) => void
-  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
-  unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
-  openSettings: () => void
-  openHelp: () => void
-  language: ReturnType<typeof useLanguage>
-  onWheel: (event: WheelEvent) => void
-}) {
-  const global = useGlobal()
-  const dialog = useDialog()
-  const controller = useServerManagementController({ navigateOnAdd: false })
-  const [_state, setState, _, ready] = persisted(
-    Persist.global("home.servers", ["home.servers.v1"]),
-    createStore({ collapsed: {} as Record<string, boolean> }),
-  )
-  const [state] = createResource(
-    () => ready.promise ?? Promise.resolve(),
-    (p) => p.then(() => _state),
-    { initialValue: _state },
-  )
-
-  return (
-    <aside
-      class="mt-6 flex min-h-0 min-w-0 flex-col gap-4 overflow-hidden lg:sticky lg:top-14 lg:mt-14 lg:h-[calc(100cqh-56px)] lg:self-start lg:pt-[52px]"
-      aria-label={props.language.t("home.projects")}
-      onWheel={(event) => {
-        if (event.target === event.currentTarget) return
-        props.onWheel(event)
-      }}
-    >
-      <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5 pr-3">
-        <div class="text-v2-text-text-muted [font-weight:530]">{props.language.t("home.projects")}</div>
-        <Show
-          when={global.servers.list().length === 1 && !(props.projects.length === 0 && props.recentlyClosed.length > 0)}
-        >
-          <TooltipV2 placement="bottom" value={props.language.t("home.project.add")}>
-            <IconButtonV2
-              data-action="home-add-project"
-              variant="ghost-muted"
-              size="large"
-              class="titlebar-icon [&_[data-slot=icon-svg]]:text-v2-icon-icon-muted"
-              icon={<IconV2 name="folder-add-left" />}
-              disabled={global.servers.health[ServerConnection.key(global.servers.list()[0]!)]?.healthy === false}
-              onClick={() => props.chooseProject(global.servers.list()[0]!)}
-              aria-label={props.language.t("home.project.add")}
-            />
-          </TooltipV2>
-        </Show>
-      </div>
-      <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
-        <Show
-          when={global.servers.list().length > 1}
-          fallback={
-            <div class="pr-3">
-              <Show
-                when={props.projects.length > 0}
-                fallback={
-                  <HomeProjectEmpty
-                    server={global.servers.list()[0]!}
-                    recentlyClosed={props.recentlyClosed}
-                    homedir={props.homedir}
-                    chooseProject={props.chooseProject}
-                    openRecentProject={props.openRecentProject}
-                    language={props.language}
-                  />
-                }
-              >
-                <HomeProjectList {...props} server={global.servers.list()[0]!} />
-              </Show>
-            </div>
-          }
-        >
-          <div class="flex min-w-0 flex-col gap-4 pr-3">
-            <For each={global.servers.list()}>
-              {(item) => {
-                const key = ServerConnection.key(item)
-                const healthy = () => !!global.servers.health[key]?.healthy
-                const serverCtx = global.ensureServerCtx(item)
-                const projects = () => serverCtx.projects.list()
-                const hasProjects = () => projects().length > 0
-                const collapsed = () => !!state().collapsed[key]
-                return (
-                  <div class="flex min-w-0 flex-col gap-1">
-                    <HomeServerRow
-                      server={item}
-                      selected={props.selected.server === key && !props.selected.directory}
-                      collapsed={collapsed()}
-                      health={global.servers.health[key]}
-                      controller={controller}
-                      focusServer={props.focusServer}
-                      chooseProject={props.chooseProject}
-                      openEdit={(server) => dialog.show(() => <DialogServerV2 mode="edit" server={server} />)}
-                      toggleCollapsed={() => setState("collapsed", key, !state().collapsed[key])}
-                      language={props.language}
-                    />
-                    <Show when={healthy() && hasProjects() && !collapsed()}>
-                      <div class="mx-3 h-px bg-v2-border-border-base" />
-                      <HomeProjectList {...props} server={item} projects={projects()} />
-                    </Show>
-                  </div>
-                )
-              }}
-            </For>
-          </div>
-        </Show>
-      </ScrollView>
-      <HomeUtilityNav
-        class="mb-8 mt-4 hidden shrink-0 lg:flex"
-        openSettings={props.openSettings}
-        openHelp={props.openHelp}
-        language={props.language}
-      />
-    </aside>
-  )
-}
-
-function HomeUtilityNav(props: {
-  class?: string
-  openSettings: () => void
-  openHelp: () => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  return (
-    <div class={`${props.class ?? ""} min-w-0 flex-col gap-1 pr-3`}>
-      <button
-        type="button"
-        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-        onClick={props.openSettings}
-      >
-        <IconV2 name="settings-gear" size="small" />
-        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
-      </button>
-      <button
-        type="button"
-        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-        onClick={props.openHelp}
-      >
-        <IconV2 name="help" size="small" />
-        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
-      </button>
-    </div>
-  )
-}
-
-function HomeServerRow(props: {
-  server: ServerConnection.Any
-  selected: boolean
-  collapsed: boolean
-  health: ServerHealth | undefined
-  controller: ReturnType<typeof useServerManagementController>
-  focusServer: (server: ServerConnection.Any) => void
-  chooseProject: (server: ServerConnection.Any) => void
-  openEdit: (server: ServerConnection.Http) => void
-  toggleCollapsed: () => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const [state, setState] = createStore({ menuOpen: false })
-  const healthy = () => !!props.health?.healthy
-  const canToggle = () => healthy() && global.ensureServerCtx(props.server).projects.list().length > 0
-  return (
-    <div class="group/server relative flex h-7 min-w-0 items-center rounded-[6px]">
-      <button
-        type="button"
-        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
-        data-selected={props.selected ? "" : undefined}
-        disabled={!healthy()}
-        onClick={() => props.focusServer(props.server)}
-      >
-        <span
-          data-action="home-server-collapse"
-          class="inline-flex -ml-0.5 -mr-1.5 size-5 shrink-0 items-center justify-center rounded-[4px] text-v2-icon-icon-muted"
-          classList={{
-            "hover:bg-v2-overlay-simple-overlay-hover": canToggle(),
-            "cursor-default opacity-40": !canToggle(),
-          }}
-          aria-label={
-            props.collapsed ? props.language.t("home.server.expand") : props.language.t("home.server.collapse")
-          }
-          aria-disabled={!canToggle()}
-          aria-expanded={canToggle() ? !props.collapsed : undefined}
-          onClick={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            if (!canToggle()) return
-            props.toggleCollapsed()
-          }}
-          onPointerDown={(event) => event.preventDefault()}
-        >
-          <IconV2
-            name="chevron-down"
-            size="small"
-            class="transition-transform duration-150 ease-in-out"
-            style={{ transform: `rotate(${props.collapsed ? -90 : 0}deg)` }}
-          />
-        </span>
-        <div class="flex size-4 shrink-0 items-center justify-center -mr-0.5">
-          <ServerHealthIndicator health={props.health} />
-        </div>
-        <span class="flex min-w-0 items-center gap-1">
-          <span class={HOME_PROJECT_NAV_LABEL}>{props.server.displayName ?? new URL(props.server.http.url).host}</span>
-          <Show when={props.server.label}>
-            {(label) => (
-              <span class="shrink-0 rounded-[3px] border border-v2-border-border-base px-1 py-0.5 text-[9px] leading-none text-v2-text-text-muted">
-                {label()}
-              </span>
-            )}
-          </Show>
-        </span>
-      </button>
-      <div
-        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/server:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
-        data-menu={state.menuOpen}
-      >
-        <ServerRowMenu
-          server={props.server}
-          controller={props.controller}
-          onEdit={props.openEdit}
-          open={state.menuOpen}
-          onOpenChange={(open) => setState("menuOpen", open)}
-        />
-        <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
-          <IconButtonV2
-            data-action="home-add-project"
-            variant="ghost-muted"
-            size="small"
-            icon={<IconV2 name="folder-add-left" />}
-            aria-label={props.language.t("home.project.add")}
-            disabled={props.health?.healthy === false}
-            onClick={() => props.chooseProject(props.server)}
-          />
-        </TooltipV2>
-      </div>
-    </div>
-  )
-}
-
-function HomeProjectList(props: {
-  server: ServerConnection.Any
-  projects: LocalProject[]
-  selected: HomeProjectSelection
-  selectProject: (server: ServerConnection.Any, directory: string) => void
-  openNewSession: (server: ServerConnection.Any, directory: string) => void
-  editProject: (server: ServerConnection.Any, project: LocalProject) => void
-  closeProject: (server: ServerConnection.Any, directory: string) => void
-  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
-  unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
-  language: ReturnType<typeof useLanguage>
-}) {
-  return (
-    <div class="flex min-w-0 flex-col gap-1">
-      <For each={props.projects}>
-        {(project) => (
-          <HomeProjectRow
-            project={project}
-            server={props.server}
-            selected={
-              props.selected.server === ServerConnection.key(props.server) &&
-              props.selected.directory === project.worktree
-            }
-            unseenCount={props.unseenCount(props.server, project)}
-            selectProject={props.selectProject}
-            openNewSession={props.openNewSession}
-            editProject={props.editProject}
-            closeProject={props.closeProject}
-            clearNotifications={props.clearNotifications}
-            language={props.language}
-          />
-        )}
-      </For>
-    </div>
-  )
-}
-
-function HomeProjectEmpty(props: {
-  server: ServerConnection.Any
-  recentlyClosed: LocalProject[]
-  homedir: string
-  chooseProject: (server: ServerConnection.Any) => void
-  openRecentProject: (server: ServerConnection.Any, directory: string) => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
-  return (
-    <div class="flex min-w-0 flex-col gap-1">
-      <button
-        type="button"
-        data-action="home-add-project-row"
-        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-        disabled={unreachable()}
-        onClick={() => props.chooseProject(props.server)}
-      >
-        <IconV2 name="folder-add-left" size="small" />
-        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
-      </button>
-      <Show when={props.recentlyClosed.length > 0}>
-        <div class="mt-3 flex h-7 min-w-0 shrink-0 items-center pl-1.5 pr-3">
-          <div class="text-v2-text-text-faint [font-weight:530]">{props.language.t("home.recentlyClosed")}</div>
-        </div>
-        <For each={props.recentlyClosed}>
-          {(project) => (
-            <HomeRecentlyClosedRow
-              project={project}
-              server={props.server}
-              homedir={props.homedir}
-              openRecentProject={props.openRecentProject}
-              language={props.language}
-            />
-          )}
-        </For>
-      </Show>
-    </div>
-  )
-}
-
-function HomeRecentlyClosedRow(props: {
-  project: LocalProject
-  server: ServerConnection.Any
-  homedir: string
-  openRecentProject: (server: ServerConnection.Any, directory: string) => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
-  const path = () => {
-    const home = props.homedir
-    const worktree = props.project.worktree
-    if (home && (worktree === home || worktree.startsWith(`${home}/`))) return `~${worktree.slice(home.length)}`
-    return worktree
-  }
-  return (
-    <TooltipV2 placement="right" value={path()}>
-      <button
-        type="button"
-        data-component="home-recently-closed-row"
-        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60`}
-        disabled={unreachable()}
-        onClick={() => props.openRecentProject(props.server, props.project.worktree)}
-      >
-        <HomeProjectAvatar project={props.project} outline />
-        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
-      </button>
-    </TooltipV2>
-  )
-}
-
-function HomeProjectRow(props: {
-  project: LocalProject
-  server: ServerConnection.Any
-  selected: boolean
-  unseenCount: number
-  selectProject: (server: ServerConnection.Any, directory: string) => void
-  openNewSession: (server: ServerConnection.Any, directory: string) => void
-  editProject: (server: ServerConnection.Any, project: LocalProject) => void
-  closeProject: (server: ServerConnection.Any, directory: string) => void
-  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const platform = usePlatform()
-  const serverUnreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
-  const [state, setState] = createStore({ menuOpen: false })
-  const canRevealInFileManager = () =>
-    platform.platform === "desktop" && !!platform.openPath && ServerConnection.local(props.server)
-  const fileManagerActionLabel = () =>
-    props.language.t(
-      fileManagerApp(platform.platform === "desktop" ? (platform.os ?? "unknown") : "unknown").actionLabel,
-    )
-  const revealInFileManager = () => {
-    if (!platform.openPath) return
-    platform.openPath(props.project.worktree).catch((err: unknown) =>
-      showToast({
-        title: props.language.t("common.requestFailed"),
-        description: errorMessage(err, props.language.t("common.requestFailed")),
-      }),
-    )
-  }
-  return (
-    <div class="group/project relative flex h-7 min-w-0 items-center rounded-[6px]">
-      <button
-        type="button"
-        data-component="home-project-row"
-        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
-        data-selected={props.selected ? "" : undefined}
-        aria-current={props.selected ? "page" : undefined}
-        disabled={serverUnreachable()}
-        onClick={() => props.selectProject(props.server, props.project.worktree)}
-      >
-        <HomeProjectAvatar project={props.project} />
-        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
-      </button>
-      <div
-        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
-        data-menu={state.menuOpen}
-      >
-        <MenuV2
-          gutter={6}
-          modal={false}
-          placement="bottom-end"
-          open={state.menuOpen}
-          onOpenChange={(open) => setState("menuOpen", open)}
-        >
-          <MenuV2.Trigger
-            as={IconButtonV2}
-            data-action="home-project-menu"
-            variant="ghost-muted"
-            size="small"
-            icon={<IconV2 name="outline-dots" />}
-            aria-label={props.language.t("common.moreOptions")}
-          />
-          <MenuV2.Portal>
-            <MenuV2.Content>
-              <MenuV2.Item onSelect={() => props.openNewSession(props.server, props.project.worktree)}>
-                {props.language.t("command.session.new")}
-              </MenuV2.Item>
-              <MenuV2.Item onSelect={() => props.editProject(props.server, props.project)}>
-                {props.language.t("dialog.project.edit.title")}
-              </MenuV2.Item>
-              <Show when={canRevealInFileManager()}>
-                <MenuV2.Item onSelect={revealInFileManager}>{fileManagerActionLabel()}</MenuV2.Item>
-              </Show>
-              <MenuV2.Item
-                disabled={props.unseenCount === 0}
-                onSelect={() => props.clearNotifications(props.server, props.project)}
-              >
-                {props.language.t("sidebar.project.clearNotifications")}
-              </MenuV2.Item>
-              <MenuV2.Separator />
-              <MenuV2.Item onSelect={() => props.closeProject(props.server, props.project.worktree)}>
-                {props.language.t("common.close")}
-              </MenuV2.Item>
-            </MenuV2.Content>
-          </MenuV2.Portal>
-        </MenuV2>
-        <IconButtonV2
-          data-action="home-project-new-session"
-          variant="ghost-muted"
-          size="small"
-          icon={<IconV2 name="edit" />}
-          aria-label={props.language.t("command.session.new")}
-          onClick={() => props.openNewSession(props.server, props.project.worktree)}
-        />
-      </div>
-    </div>
-  )
-}
-
-function HomeProjectAvatar(props: { project: LocalProject; outline?: boolean }) {
-  const name = createMemo(() => displayName(props.project))
-  return (
-    <ProjectAvatar
-      fallback={name()}
-      src={props.outline ? undefined : getProjectAvatarSource(props.project.id, props.project.icon)}
-      variant={props.outline ? "outline" : getProjectAvatarVariant(props.project.icon?.color)}
-    />
-  )
-}
-
 function HomeSessionLeading(props: {
   project: LocalProject
   session: Session
diff --git a/packages/app/src/pages/launch-new-session.tsx b/packages/app/src/pages/launch-new-session.tsx
new file mode 100644
index 0000000000..587003fc56
--- /dev/null
+++ b/packages/app/src/pages/launch-new-session.tsx
@@ -0,0 +1,52 @@
+import { createEffect } from "solid-js"
+import { useLocation } from "@solidjs/router"
+import { usePlatform } from "@/context/platform"
+import { useTabs } from "@/context/tabs"
+import { createHomeModel } from "@/pages/home-model"
+
+// Once per app boot, land on a new session instead of a list — the sidebar is
+// where you go back to earlier work.
+//
+// Desktop only, on purpose. In the browser there is no event that means
+// "launch" as distinct from "navigate to /", so redirecting would make the
+// recents screen unreachable by URL and would fight the sidebar's "View all"
+// link, which points at "/". Dropping the platform check below turns it on for
+// the browser too, at that cost.
+let launched = false
+
+export function LaunchNewSession() {
+  const platform = usePlatform()
+  const tabs = useTabs()
+  const location = useLocation()
+  const model = createHomeModel()
+  // Where the window came up. Tabs and projects both load asynchronously, so
+  // the redirect cannot happen synchronously at boot; this pins the decision to
+  // the screen the app started on.
+  const initial = location.pathname
+
+  createEffect(() => {
+    if (launched) return
+    if (platform.platform !== "desktop") return
+    // The moment navigation happens under us the boot window is over. Without
+    // this the redirect would still be armed and would fire on the next visit
+    // to "/", hijacking the sidebar's "View all".
+    if (location.pathname !== initial) {
+      launched = true
+      return
+    }
+    if (!tabs.ready()) return
+    if (!model.newSessionProject()) return
+
+    launched = true
+    // Draft tabs persist and are only cleared on promote/close, so reuse one
+    // rather than stacking up an empty draft on every launch.
+    const draft = tabs.store.find((tab) => tab.type === "draft")
+    if (draft) {
+      tabs.select(draft)
+      return
+    }
+    model.openNewSession()
+  })
+
+  return null
+}
diff --git a/packages/app/src/pages/layout-new.tsx b/packages/app/src/pages/layout-new.tsx
index 5f0c7fdf27..c373a07464 100644
--- a/packages/app/src/pages/layout-new.tsx
+++ b/packages/app/src/pages/layout-new.tsx
@@ -1,9 +1,11 @@
 import { createEffect, Suspense, type ParentProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useNavigate } from "@solidjs/router"
+import { AppSidebar } from "@/components/app-sidebar"
 import { DebugBar } from "@/components/debug-bar"
 import { Titlebar, type TitlebarUpdate } from "@/components/titlebar"
 import { usePlatform } from "@/context/platform"
+import { LaunchNewSession } from "@/pages/launch-new-session"
 import { setNavigate } from "@/utils/notification-click"
 import { setV2Toast, ToastRegion } from "@/utils/toast"
 
@@ -41,9 +43,16 @@ export default function NewLayout(props: ParentProps) {
             : undefined
         }
       />
-      <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-strict">
-        <Suspense>{props.children}</Suspense>
-      </main>
+      {/* The sidebar is app chrome, not part of any route, so it stays mounted
+          across navigations. It is hidden below lg, where the home screen keeps
+          its stacked arrangement instead. */}
+      <LaunchNewSession />
+      <div class="flex-1 min-h-0 min-w-0 flex flex-row">
+        <AppSidebar class="hidden lg:flex" />
+        <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-strict">
+          <Suspense>{props.children}</Suspense>
+        </main>
+      </div>
       {import.meta.env.DEV && state.debugTools && <DebugBar inline />}
       <ToastRegion v2 />
     </div>

From 253d2c40f5ecbe6a0a6f1b2cdf45b524c8c5b928 Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Mon, 10 Aug 2026 10:24:01 +0700
Subject: [PATCH 2/6] fix(app): keep View all next to the last recent session
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Recents list is flex-1 so it can measure how many rows fit, which meant its
leftover slack sat between the last session and the View all row below it. View
all now renders inside that container, directly after the rows, and the row
budget reserves one slot for it — so the spacing is the same 4px as between
sessions and the slack falls below it instead. Measured at 4px across 520px,
800px and 1000px window heights, with View all and Settings still inside the
viewport at each.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/app/src/components/app-sidebar.tsx | 27 ++++++++++++---------
 packages/app/src/pages/home-styles.ts       |  6 ++---
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/app/src/components/app-sidebar.tsx b/packages/app/src/components/app-sidebar.tsx
index 61c70e960e..f0bd480dae 100644
--- a/packages/app/src/components/app-sidebar.tsx
+++ b/packages/app/src/components/app-sidebar.tsx
@@ -206,8 +206,11 @@ function SidebarRecents(props: {
     () => list() ?? [],
     (rect) => setListHeight(rect.height),
   )
+  // One row of the budget belongs to "View all", which renders inside the same
+  // container so it hugs the last session instead of being pushed to the bottom
+  // of the flexible area.
   const visible = createMemo(() =>
-    props.records.slice(0, Math.max(0, Math.floor((listHeight() + HOME_NAV_ROW_GAP) / HOME_NAV_ROW_PITCH))),
+    props.records.slice(0, Math.max(0, Math.floor((listHeight() + HOME_NAV_ROW_GAP) / HOME_NAV_ROW_PITCH) - 1)),
   )
 
   return (
@@ -230,18 +233,18 @@ function SidebarRecents(props: {
         <For each={visible()}>
           {(record) => <SidebarSessionRow record={record} server={props.server} openSession={props.openSession} />}
         </For>
+        <Show when={!props.loading && props.records.length > 0}>
+          <A
+            href="/"
+            data-action="sidebar-view-all"
+            class={`${HOME_PROJECT_NAV_ROW} shrink-0 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+          >
+            {/* No chevron-right in the sprite; the existing rotation trick points it right. */}
+            <IconV2 name="chevron-down" size="small" style={{ transform: "rotate(-90deg)" }} />
+            <span class={HOME_PROJECT_NAV_LABEL}>{language.t("sidebar.recents.viewAll")}</span>
+          </A>
+        </Show>
       </div>
-      <Show when={!props.loading && props.records.length > 0}>
-        <A
-          href="/"
-          data-action="sidebar-view-all"
-          class={`${HOME_PROJECT_NAV_ROW} shrink-0 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-        >
-          {/* No chevron-right in the sprite; the existing rotation trick points it right. */}
-          <IconV2 name="chevron-down" size="small" style={{ transform: "rotate(-90deg)" }} />
-          <span class={HOME_PROJECT_NAV_LABEL}>{language.t("sidebar.recents.viewAll")}</span>
-        </A>
-      </Show>
     </section>
   )
 }
diff --git a/packages/app/src/pages/home-styles.ts b/packages/app/src/pages/home-styles.ts
index 02b20d21be..c6b8d067a1 100644
--- a/packages/app/src/pages/home-styles.ts
+++ b/packages/app/src/pages/home-styles.ts
@@ -10,8 +10,8 @@ export const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-w
 export const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"
 
 // HOME_PROJECT_NAV_ROW rows are h-7 (28px) in a flex column with gap-1 (4px).
-// n rows occupy 32n - 4, since the last one carries no trailing gap, so the
-// sidebar fits floor((height + 4) / 32) recent sessions above its pinned
-// "View all" row.
+// n rows occupy 32n - 4, since the last one carries no trailing gap, so
+// floor((height + 4) / 32) rows fit in the sidebar's Recents area — one of
+// which is spent on the "View all" row that trails the sessions.
 export const HOME_NAV_ROW_PITCH = 32
 export const HOME_NAV_ROW_GAP = 4

From 9ba3edb9331a5f030871d8ca8f010cd86968fe64 Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Mon, 10 Aug 2026 10:43:53 +0700
Subject: [PATCH 3/6] refactor(app): export the sidebar rows in place instead
 of relocating them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first cut moved seven components out of home.tsx into the new sidebar
module, which made an upstream file's diff 820 lines and guaranteed a conflict
— plus a manual re-port — every time upstream touches one of those rows.

They go back where upstream keeps them and simply gain an `export`:
HomeUtilityNav, HomeServerRow, HomeProjectList, HomeProjectEmpty,
HomeRecentlyClosedRow, and the three row/label classes. app-sidebar.tsx imports
and composes them, and now holds only what is genuinely new — the column shell,
the Recents section and its row. home-styles.ts is gone; its two measuring
constants sit next to the only code that reads them.

home.tsx is down to 36 insertions / 409 deletions, and the deletions are just
HomeProjectColumn (dead once the sidebar owns that composition) and the NewHome
state block that moved to the model. Upstream edits to any exported row now
merge with no conflict. The sub-lg mobile nav is upstream's code again rather
than a fork wrapper.

Re-verified on a cold desktop start: boot lands on the composer, the sidebar
shows 13 recents with a 4px gap before View all, View all renders the 28-row
recents screen, and the count reflows to 5 at 520px height.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 DIVERGENCES.md                              |   2 +-
 packages/app/src/components/app-sidebar.tsx | 384 +------------------
 packages/app/src/pages/home-styles.ts       |  17 -
 packages/app/src/pages/home.tsx             | 403 +++++++++++++++++++-
 4 files changed, 398 insertions(+), 408 deletions(-)
 delete mode 100644 packages/app/src/pages/home-styles.ts

diff --git a/DIVERGENCES.md b/DIVERGENCES.md
index a5deecfba6..3cffedf3e0 100644
--- a/DIVERGENCES.md
+++ b/DIVERGENCES.md
@@ -97,7 +97,7 @@ from the squash message first, or use a plain merge.
 | `packages/app/src/components/session/session-new-design-view.tsx` | Drops the `WordmarkV2` watermark from the v2 new-session screen and centres the composer. Upstream absolutely positions the content block at `top-[25.375%]` to leave room for the wordmark above it; with the mark gone that offset just parks the composer high in an empty pane, so the outer element becomes `flex items-center justify-center` over `size-full` (carrying the `px-6` inset across) and the `mt-8` spacer under the wordmark goes away. | The wordmark reads as clutter on the desktop new-session screen; without it the pane should be balanced, not top-weighted. | Keep our centred layout. If upstream restyles this view, re-apply the drop + centring rather than restoring `top-[25.375%]`. Reinstating the watermark means restoring the offset too, or it will sit centred with the composer. |
 | `packages/app/src/pages/home.tsx`, `packages/app/src/pages/error.tsx`, `packages/enterprise/src/routes/share/[shareID].tsx` | `Logo` width utilities retuned for the codev wordmark's 4:1 box (upstream's is 5.57:1): home `md:w-xl` → `md:w-104`, error `w-58.5` → `w-42`, share (both call sites) `w-58.5` → `w-42` | Each value is the width at which the new wordmark renders at exactly the height the upstream one did, so no surrounding layout shifts. | Keep our widths; take upstream's surrounding changes. Recompute rather than restore if upstream changes the size. |
 | `packages/app/src/pages/layout-new.tsx` (again) | Mounts the fork-only `<LaunchNewSession />`, which on desktop redirects one time per boot to a new-session draft (reusing an existing empty draft rather than stacking one up per launch). It pins its decision to the pathname the window came up on and disarms as soon as anything navigates, so it can never hijack a later visit to `/` — the sidebar's "View all" links there. Desktop-only: in the browser there is no "launch" distinct from "navigate to /", so redirecting would make the recents screen unreachable by URL and would break two `packages/app/e2e` specs that `goto("/")`. | Launching should put you in front of a prompt, the way Claude Desktop does, rather than on a list. This supersedes the desktop's restore-last-screen behaviour (`getLastActiveUrl`, `packages/desktop/src/renderer/index.tsx`); the previous session stays one click away in Recents and its tab is still restored. | Keep the mount. If upstream restructures this layout, re-add it. Do not "simplify" the boot-window guard into a plain `location.pathname === "/"` check — that is the bug it exists to prevent. |
-| `packages/app/src/pages/layout-new.tsx`, `packages/app/src/pages/home.tsx`, `packages/app/src/i18n/{en,es}.ts` | **Persistent app sidebar.** Upstream's project column is an `<aside>` owned by `NewHome`, so it exists only on `/`. It moves into the new-layout shell: `layout-new.tsx` wraps its `<main>` in a row flex and renders the fork-only `<AppSidebar class="hidden lg:flex">` beside it (plus `<LaunchNewSession />`), so the sidebar survives every navigation. `home.tsx` loses `HomeProjectColumn`, `HomeUtilityNav`, `HomeServerRow`, `HomeProjectList`, `HomeProjectEmpty`, `HomeRecentlyClosedRow`, `HomeProjectRow`, `HomeProjectAvatar` and the selection/action block that fed them (~470 lines) — all moved verbatim into fork-only `src/components/app-sidebar.tsx` — and its grid collapses from `lg:grid-cols-[280px_minmax(0,720px)]` to one `max-w-[760px]` column; the sub-`lg` `HomeUtilityNav` mount becomes the sidebar module's `HomeMobileNav`, preserving the stacked mobile layout. The state both screens need (`focusedServer`, `projects`, `selectedProject`, `newSessionProject`, `projectDirectories`, the session-index query, `openNewSession`, `openProjectNewSession`, `openSession`, `selectProject`, `addProjects`, `editProject`, `closeProject`, `unseenCount`, `clearNotifications`, `chooseProject`, `isBackgroundOpen`) moves to fork-only `src/pages/home-model.tsx`; the shared row/label classes move to fork-only `src/pages/home-styles.ts`. Both callers instantiate the model — safe because the selection lives in `useLayout().home`, the index is one TanStack query deduped by key, and the server-normalizing effect is idempotent. New i18n keys `sidebar.recents`, `sidebar.recents.new`, `sidebar.recents.viewAll` in `en` + `es`. Every `data-component`/`data-action` hook is preserved byte-identical (`home-project-row`, `home-add-project`, `home-session-row`, `home-session-search`, …) because `packages/app/e2e` selects on them. | The desktop app should navigate like Claude Desktop — one always-visible sidebar with Projects, Recents and pinned Settings/Help — instead of losing all navigation the moment a session opens. Extraction rather than prop-threading keeps `home.tsx`'s diff almost entirely deletions, which is the cheaper side of an upstream conflict. | Keep our structure. On conflict take upstream's changes to the session-list half of `home.tsx` and re-apply the column removal; if upstream edits any of the moved components, port the change into `app-sidebar.tsx` rather than restoring it in `home.tsx`. Never let a `data-component`/`data-action` hook drift — the e2e suite has no other handle on these rows. |
+| `packages/app/src/pages/layout-new.tsx`, `packages/app/src/pages/home.tsx`, `packages/app/src/i18n/{en,es}.ts` | **Persistent app sidebar.** Upstream's project column is an `<aside>` owned by `NewHome`, so it exists only on `/`. It becomes app chrome: `layout-new.tsx` wraps its `<main>` in a row flex and renders the fork-only `<AppSidebar class="hidden lg:flex">` beside it, so the sidebar survives every navigation. **The row components stay in `home.tsx`** — `HomeUtilityNav`, `HomeServerRow`, `HomeProjectList`, `HomeProjectEmpty`, `HomeRecentlyClosedRow` and the classes `HOME_PROJECT_NAV_ROW` / `HOME_PROJECT_NAV_LABEL` / `HOME_SECTION_LABEL` gain an `export` and nothing else, so upstream edits to them still apply cleanly; the fork-only `src/components/app-sidebar.tsx` imports and composes them, adding only the column shell and the Recents section. `home.tsx` otherwise loses just `HomeProjectColumn` (dead once the sidebar owns that composition) and the `NewHome` selection/action block, and its grid collapses from `lg:grid-cols-[280px_minmax(0,720px)]` to one `max-w-[760px]` column. The sub-`lg` `HomeUtilityNav` mount is untouched, so the stacked mobile layout is upstream's. The state both screens need (`focusedServer`, `projects`, `selectedProject`, `newSessionProject`, `projectDirectories`, the session-index query, `openNewSession`, `openProjectNewSession`, `openSession`, `selectProject`, `addProjects`, `editProject`, `closeProject`, `unseenCount`, `clearNotifications`, `chooseProject`, `isBackgroundOpen`, `buildHomeSessionRecords`, `HomeSessionRecord`) moves to fork-only `src/pages/home-model.tsx`, which both callers instantiate — safe because the selection lives in `useLayout().home`, the index is one TanStack query deduped by key, and the server-normalizing effect is idempotent. New i18n keys `sidebar.recents`, `sidebar.recents.new`, `sidebar.recents.viewAll` in `en` + `es`. Every `data-component`/`data-action` hook is untouched (`home-project-row`, `home-add-project`, `home-session-row`, `home-session-search`, …) because `packages/app/e2e` selects on them. | The desktop app should navigate like Claude Desktop — one always-visible sidebar with Projects, Recents and pinned Settings/Help — instead of losing all navigation the moment a session opens. Exporting the row components in place rather than relocating them keeps `home.tsx` down to ~36 added lines: upstream changes to those components merge without a conflict, which relocating them would have forfeited. | Keep our structure. On conflict take upstream's `home.tsx` wholesale and re-apply the four edits: the `export` keywords, the `HomeProjectColumn` deletion, the `createHomeModel()` swap in `NewHome`, and the single-column grid. If upstream edits an exported row component, just take it. Never let a `data-component`/`data-action` hook drift — the e2e suite has no other handle on these rows. |
 | `packages/desktop/icons/{dev,beta,prod}/` (all PNGs, `icon.icns`, `icon.ico`, `dock.png`), `packages/desktop/icons/README.md` | Regenerated from the fork-only `packages/desktop/icons/icon.svg` by the fork-only `packages/desktop/scripts/generate-icons.ts`: the brand-red `#ee0033` CoDev "C" — the `--mini` splash badge glyph, at the VS Code extension icon's proportions (unit = 120/1024, mark 480x600 centered) — on a white tile, replacing upstream's black/blueprint "o" mark. All three channels are byte-identical for now (chosen deliberately over upstream's per-channel treatments); the generator still writes them separately so a channel can diverge later. `icon.icns` members and `dock.png` use the macOS Big Sur grid (824/1024 inset + drop shadow); Windows, Linux and Store assets stay full-bleed. README rewritten from the Tauri-CLI + Image2Icon recipe to the generator. The stale Tauri-era `android/` and `ios/` subfolders are left untouched — nothing in the Electron build reads them. | Closes the "desktop app icons need design assets" rebrand gap: the Dock/taskbar icon was still upstream's mark. | Keep our assets and README (binary: take ours wholesale). Regenerate via the script rather than hand-editing; if upstream adds an icon size, add it to `FLAT_PNGS`/`ICONSET` and rerun. |
 | `packages/tui/src/theme/assets/codev.json` (new file), `packages/tui/src/theme/index.ts`, `packages/tui/src/context/theme.tsx` | Added the `codev` theme — upstream's `opencode.json` palette with `darkSecondary` → `#0891b2` (brand teal) — registered it in the theme index, and made it the default/fallback theme (`"opencode"` → `"codev"` in the store default, kv fallback, and load-failure fallbacks). `theme/assets/opencode.json` itself matches upstream again. | Brand accent lives in a fork-owned theme instead of edits to upstream's palette; the default theme carries the brand. | Keep our theme file, its index registration, and the fallback strings; when upstream changes the opencode palette, mirror it into `codev.json` (keeping our `darkSecondary`). |
 | `packages/opencode/src/cli/ui.ts` | `wordmark`/`logo()` render the lowercase codev wordmark via `ansiWordmark` (bold, no shadow, "dev" in brand red on TTY) | Help banner matches the TUI home banner. | Keep our wordmark + logo(); take upstream's surrounding changes. |
diff --git a/packages/app/src/components/app-sidebar.tsx b/packages/app/src/components/app-sidebar.tsx
index f0bd480dae..114ae86efe 100644
--- a/packages/app/src/components/app-sidebar.tsx
+++ b/packages/app/src/components/app-sidebar.tsx
@@ -5,38 +5,34 @@ import { A } from "@solidjs/router"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { DOCS_URL } from "@codev/brand"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useServerManagementController } from "@/components/dialog-select-server"
 import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
-import { ServerHealthIndicator } from "@/components/server/server-row"
-import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { useSettingsCommand } from "@/components/settings-dialog"
 import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
-import { getProjectAvatarVariant, type HomeProjectSelection, type LocalProject } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { ServerConnection } from "@/context/server"
 import { sessionHasOpenTab, useTabs } from "@/context/tabs"
 import { createHomeModel, isBackgroundOpen, type HomeSessionRecord } from "@/pages/home-model"
+// The project rows, server rows and utility nav still live in home.tsx, where
+// upstream keeps them — this file composes them into a persistent column and
+// adds the Recents section. Only the `export` keywords there are ours.
 import {
-  HOME_NAV_ROW_GAP,
-  HOME_NAV_ROW_PITCH,
   HOME_PROJECT_NAV_LABEL,
   HOME_PROJECT_NAV_ROW,
   HOME_SECTION_LABEL,
-} from "@/pages/home-styles"
-import { displayName, errorMessage, getProjectAvatarSource } from "@/pages/layout/helpers"
+  HomeProjectEmpty,
+  HomeProjectList,
+  HomeServerRow,
+  HomeUtilityNav,
+} from "@/pages/home"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
-import { type ServerHealth } from "@/utils/server-health"
-import { fileManagerApp } from "@/utils/file-manager"
 import { Persist, persisted } from "@/utils/persist"
 import { sessionTitle } from "@/utils/session-title"
-import { showToast } from "@/utils/toast"
 
 // The persistent left sidebar. It used to be an <aside> inside the home page,
 // so it disappeared as soon as a session was opened; it now lives in the new
@@ -44,6 +40,11 @@ import { showToast } from "@/utils/toast"
 // every route. Sections top to bottom: Projects, Recents (New row, a list sized
 // to the free height, and a pinned View all), then Settings/Help anchored to the
 // bottom.
+// HOME_PROJECT_NAV_ROW rows are h-7 (28px) in a flex column with gap-1 (4px),
+// so n rows occupy 32n - 4 — the last one carries no trailing gap.
+const HOME_NAV_ROW_PITCH = 32
+const HOME_NAV_ROW_GAP = 4
+
 export function AppSidebar(props: { class?: string }) {
   const language = useLanguage()
   const platform = usePlatform()
@@ -285,362 +286,3 @@ function SidebarSessionRow(props: {
     </button>
   )
 }
-
-export function HomeUtilityNav(props: {
-  class?: string
-  openSettings: () => void
-  openHelp: () => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  return (
-    <div class={`${props.class ?? ""} min-w-0 flex-col gap-1`}>
-      <button
-        type="button"
-        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-        onClick={props.openSettings}
-      >
-        <IconV2 name="settings-gear" size="small" />
-        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
-      </button>
-      <button
-        type="button"
-        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-        onClick={props.openHelp}
-      >
-        <IconV2 name="help" size="small" />
-        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
-      </button>
-    </div>
-  )
-}
-
-// Below the lg breakpoint the sidebar is hidden and the home screen stacks this
-// under its session list, preserving the pre-sidebar mobile arrangement.
-export function HomeMobileNav(props: { class?: string }) {
-  const language = useLanguage()
-  const platform = usePlatform()
-  const openSettings = useSettingsCommand()
-  return (
-    <HomeUtilityNav
-      class={props.class}
-      openSettings={openSettings}
-      openHelp={() => platform.openLink(DOCS_URL)}
-      language={language}
-    />
-  )
-}
-
-function HomeServerRow(props: {
-  server: ServerConnection.Any
-  selected: boolean
-  collapsed: boolean
-  health: ServerHealth | undefined
-  controller: ReturnType<typeof useServerManagementController>
-  focusServer: (server: ServerConnection.Any) => void
-  chooseProject: (server: ServerConnection.Any) => void
-  openEdit: (server: ServerConnection.Http) => void
-  toggleCollapsed: () => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const [state, setState] = createStore({ menuOpen: false })
-  const healthy = () => !!props.health?.healthy
-  const canToggle = () => healthy() && global.ensureServerCtx(props.server).projects.list().length > 0
-  return (
-    <div class="group/server relative flex h-7 min-w-0 items-center rounded-[6px]">
-      <button
-        type="button"
-        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
-        data-selected={props.selected ? "" : undefined}
-        disabled={!healthy()}
-        onClick={() => props.focusServer(props.server)}
-      >
-        <span
-          data-action="home-server-collapse"
-          class="inline-flex -ml-0.5 -mr-1.5 size-5 shrink-0 items-center justify-center rounded-[4px] text-v2-icon-icon-muted"
-          classList={{
-            "hover:bg-v2-overlay-simple-overlay-hover": canToggle(),
-            "cursor-default opacity-40": !canToggle(),
-          }}
-          aria-label={
-            props.collapsed ? props.language.t("home.server.expand") : props.language.t("home.server.collapse")
-          }
-          aria-disabled={!canToggle()}
-          aria-expanded={canToggle() ? !props.collapsed : undefined}
-          onClick={(event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            if (!canToggle()) return
-            props.toggleCollapsed()
-          }}
-          onPointerDown={(event) => event.preventDefault()}
-        >
-          <IconV2
-            name="chevron-down"
-            size="small"
-            class="transition-transform duration-150 ease-in-out"
-            style={{ transform: `rotate(${props.collapsed ? -90 : 0}deg)` }}
-          />
-        </span>
-        <div class="flex size-4 shrink-0 items-center justify-center -mr-0.5">
-          <ServerHealthIndicator health={props.health} />
-        </div>
-        <span class="flex min-w-0 items-center gap-1">
-          <span class={HOME_PROJECT_NAV_LABEL}>{props.server.displayName ?? new URL(props.server.http.url).host}</span>
-          <Show when={props.server.label}>
-            {(label) => (
-              <span class="shrink-0 rounded-[3px] border border-v2-border-border-base px-1 py-0.5 text-[9px] leading-none text-v2-text-text-muted">
-                {label()}
-              </span>
-            )}
-          </Show>
-        </span>
-      </button>
-      <div
-        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/server:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
-        data-menu={state.menuOpen}
-      >
-        <ServerRowMenu
-          server={props.server}
-          controller={props.controller}
-          onEdit={props.openEdit}
-          open={state.menuOpen}
-          onOpenChange={(open) => setState("menuOpen", open)}
-        />
-        <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
-          <IconButtonV2
-            data-action="home-add-project"
-            variant="ghost-muted"
-            size="small"
-            icon={<IconV2 name="folder-add-left" />}
-            aria-label={props.language.t("home.project.add")}
-            disabled={props.health?.healthy === false}
-            onClick={() => props.chooseProject(props.server)}
-          />
-        </TooltipV2>
-      </div>
-    </div>
-  )
-}
-
-function HomeProjectList(props: {
-  server: ServerConnection.Any
-  projects: LocalProject[]
-  selected: HomeProjectSelection
-  selectProject: (server: ServerConnection.Any, directory: string) => void
-  openNewSession: (server: ServerConnection.Any, directory: string) => void
-  editProject: (server: ServerConnection.Any, project: LocalProject) => void
-  closeProject: (server: ServerConnection.Any, directory: string) => void
-  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
-  unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
-  language: ReturnType<typeof useLanguage>
-}) {
-  return (
-    <div class="flex min-w-0 flex-col gap-1">
-      <For each={props.projects}>
-        {(project) => (
-          <HomeProjectRow
-            project={project}
-            server={props.server}
-            selected={
-              props.selected.server === ServerConnection.key(props.server) &&
-              props.selected.directory === project.worktree
-            }
-            unseenCount={props.unseenCount(props.server, project)}
-            selectProject={props.selectProject}
-            openNewSession={props.openNewSession}
-            editProject={props.editProject}
-            closeProject={props.closeProject}
-            clearNotifications={props.clearNotifications}
-            language={props.language}
-          />
-        )}
-      </For>
-    </div>
-  )
-}
-
-function HomeProjectEmpty(props: {
-  server: ServerConnection.Any
-  recentlyClosed: LocalProject[]
-  homedir: string
-  chooseProject: (server: ServerConnection.Any) => void
-  openRecentProject: (server: ServerConnection.Any, directory: string) => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
-  return (
-    <div class="flex min-w-0 flex-col gap-1">
-      <button
-        type="button"
-        data-action="home-add-project-row"
-        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-        disabled={unreachable()}
-        onClick={() => props.chooseProject(props.server)}
-      >
-        <IconV2 name="folder-add-left" size="small" />
-        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
-      </button>
-      <Show when={props.recentlyClosed.length > 0}>
-        <div class="mt-3 flex h-7 min-w-0 shrink-0 items-center pl-1.5 pr-3">
-          <div class="text-v2-text-text-faint [font-weight:530]">{props.language.t("home.recentlyClosed")}</div>
-        </div>
-        <For each={props.recentlyClosed}>
-          {(project) => (
-            <HomeRecentlyClosedRow
-              project={project}
-              server={props.server}
-              homedir={props.homedir}
-              openRecentProject={props.openRecentProject}
-              language={props.language}
-            />
-          )}
-        </For>
-      </Show>
-    </div>
-  )
-}
-
-function HomeRecentlyClosedRow(props: {
-  project: LocalProject
-  server: ServerConnection.Any
-  homedir: string
-  openRecentProject: (server: ServerConnection.Any, directory: string) => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
-  const path = () => {
-    const home = props.homedir
-    const worktree = props.project.worktree
-    if (home && (worktree === home || worktree.startsWith(`${home}/`))) return `~${worktree.slice(home.length)}`
-    return worktree
-  }
-  return (
-    <TooltipV2 placement="right" value={path()}>
-      <button
-        type="button"
-        data-component="home-recently-closed-row"
-        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60`}
-        disabled={unreachable()}
-        onClick={() => props.openRecentProject(props.server, props.project.worktree)}
-      >
-        <HomeProjectAvatar project={props.project} outline />
-        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
-      </button>
-    </TooltipV2>
-  )
-}
-
-function HomeProjectRow(props: {
-  project: LocalProject
-  server: ServerConnection.Any
-  selected: boolean
-  unseenCount: number
-  selectProject: (server: ServerConnection.Any, directory: string) => void
-  openNewSession: (server: ServerConnection.Any, directory: string) => void
-  editProject: (server: ServerConnection.Any, project: LocalProject) => void
-  closeProject: (server: ServerConnection.Any, directory: string) => void
-  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const global = useGlobal()
-  const platform = usePlatform()
-  const serverUnreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
-  const [state, setState] = createStore({ menuOpen: false })
-  const canRevealInFileManager = () =>
-    platform.platform === "desktop" && !!platform.openPath && ServerConnection.local(props.server)
-  const fileManagerActionLabel = () =>
-    props.language.t(
-      fileManagerApp(platform.platform === "desktop" ? (platform.os ?? "unknown") : "unknown").actionLabel,
-    )
-  const revealInFileManager = () => {
-    if (!platform.openPath) return
-    platform.openPath(props.project.worktree).catch((err: unknown) =>
-      showToast({
-        title: props.language.t("common.requestFailed"),
-        description: errorMessage(err, props.language.t("common.requestFailed")),
-      }),
-    )
-  }
-  return (
-    <div class="group/project relative flex h-7 min-w-0 items-center rounded-[6px]">
-      <button
-        type="button"
-        data-component="home-project-row"
-        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
-        data-selected={props.selected ? "" : undefined}
-        aria-current={props.selected ? "page" : undefined}
-        disabled={serverUnreachable()}
-        onClick={() => props.selectProject(props.server, props.project.worktree)}
-      >
-        <HomeProjectAvatar project={props.project} />
-        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
-      </button>
-      <div
-        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
-        data-menu={state.menuOpen}
-      >
-        <MenuV2
-          gutter={6}
-          modal={false}
-          placement="bottom-end"
-          open={state.menuOpen}
-          onOpenChange={(open) => setState("menuOpen", open)}
-        >
-          <MenuV2.Trigger
-            as={IconButtonV2}
-            data-action="home-project-menu"
-            variant="ghost-muted"
-            size="small"
-            icon={<IconV2 name="outline-dots" />}
-            aria-label={props.language.t("common.moreOptions")}
-          />
-          <MenuV2.Portal>
-            <MenuV2.Content>
-              <MenuV2.Item onSelect={() => props.openNewSession(props.server, props.project.worktree)}>
-                {props.language.t("command.session.new")}
-              </MenuV2.Item>
-              <MenuV2.Item onSelect={() => props.editProject(props.server, props.project)}>
-                {props.language.t("dialog.project.edit.title")}
-              </MenuV2.Item>
-              <Show when={canRevealInFileManager()}>
-                <MenuV2.Item onSelect={revealInFileManager}>{fileManagerActionLabel()}</MenuV2.Item>
-              </Show>
-              <MenuV2.Item
-                disabled={props.unseenCount === 0}
-                onSelect={() => props.clearNotifications(props.server, props.project)}
-              >
-                {props.language.t("sidebar.project.clearNotifications")}
-              </MenuV2.Item>
-              <MenuV2.Separator />
-              <MenuV2.Item onSelect={() => props.closeProject(props.server, props.project.worktree)}>
-                {props.language.t("common.close")}
-              </MenuV2.Item>
-            </MenuV2.Content>
-          </MenuV2.Portal>
-        </MenuV2>
-        <IconButtonV2
-          data-action="home-project-new-session"
-          variant="ghost-muted"
-          size="small"
-          icon={<IconV2 name="edit" />}
-          aria-label={props.language.t("command.session.new")}
-          onClick={() => props.openNewSession(props.server, props.project.worktree)}
-        />
-      </div>
-    </div>
-  )
-}
-
-function HomeProjectAvatar(props: { project: LocalProject; outline?: boolean }) {
-  const name = createMemo(() => displayName(props.project))
-  return (
-    <ProjectAvatar
-      fallback={name()}
-      src={props.outline ? undefined : getProjectAvatarSource(props.project.id, props.project.icon)}
-      variant={props.outline ? "outline" : getProjectAvatarVariant(props.project.icon?.color)}
-    />
-  )
-}
diff --git a/packages/app/src/pages/home-styles.ts b/packages/app/src/pages/home-styles.ts
deleted file mode 100644
index c6b8d067a1..0000000000
--- a/packages/app/src/pages/home-styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Row and label classes shared by the home screen and the persistent sidebar
-// (packages/app/src/components/app-sidebar.tsx), which renders the project and
-// recent-session rows that used to live inside home.tsx.
-export const HOME_ROW_LAYOUT =
-  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
-export const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
-export const HOME_ROW = `${HOME_ROW_BASE} [font-weight:530] text-v2-text-text-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover`
-export const HOME_PROJECT_NAV_LABEL = "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
-export const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:bg-v2-background-bg-layer-03 data-[selected]:text-v2-text-text-base data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-03 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
-export const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"
-
-// HOME_PROJECT_NAV_ROW rows are h-7 (28px) in a flex column with gap-1 (4px).
-// n rows occupy 32n - 4, since the last one carries no trailing gap, so
-// floor((height + 4) / 32) rows fit in the sidebar's Recents area — one of
-// which is spent on the "View all" row that trails the sessions.
-export const HOME_NAV_ROW_PITCH = 32
-export const HOME_NAV_ROW_GAP = 4
diff --git a/packages/app/src/pages/home.tsx b/packages/app/src/pages/home.tsx
index 5cc985e87b..d93ad1e082 100644
--- a/packages/app/src/pages/home.tsx
+++ b/packages/app/src/pages/home.tsx
@@ -15,16 +15,19 @@ import {
   Switch,
 } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
+import { DOCS_URL } from "@codev/brand"
 import { createStore, produce } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { Logo } from "@opencode-ai/ui/logo"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { type LocalProject } from "@/context/layout"
+import { getProjectAvatarVariant, type HomeProjectSelection, type LocalProject } from "@/context/layout"
 import { useNavigate } from "@solidjs/router"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -32,30 +35,33 @@ import { usePlatform } from "@/context/platform"
 import { DateTime } from "luxon"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useDirectoryPicker } from "@/components/directory-picker"
-import { DialogSelectServer } from "@/components/dialog-select-server"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { DialogSelectServer, useServerManagementController } from "@/components/dialog-select-server"
 import { ServerConnection, serverName, useServer } from "@/context/server"
 import { sessionHasOpenTab, useTabs } from "@/context/tabs"
 import { useServerSync } from "@/context/server-sync"
 import { useLanguage } from "@/context/language"
-import { displayName, errorMessage } from "@/pages/layout/helpers"
-import { HomeMobileNav } from "@/components/app-sidebar"
-import {
-  createHomeModel,
-  isBackgroundOpen,
-  type HomeSessionRecord,
-  type OpenSessionOptions,
-} from "@/pages/home-model"
-import { HOME_ROW, HOME_SECTION_LABEL } from "@/pages/home-styles"
+import { displayName, errorMessage, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
 import { sessionTitle } from "@/utils/session-title"
 import { pathKey } from "@/utils/path-key"
 import { useGlobal } from "@/context/global"
 import { useCommand } from "@/context/command"
 import { Binary } from "@opencode-ai/core/util/binary"
+import { ServerRowMenu } from "@/components/server/server-row-menu"
+import { ServerHealthIndicator } from "@/components/server/server-row"
+import { type ServerHealth } from "@/utils/server-health"
 import { useMarked } from "@opencode-ai/ui/context/marked"
 import { preloadMarkdown } from "@opencode-ai/session-ui/markdown-cache"
 import { archiveHomeSession } from "./home-session-archive"
+import {
+  createHomeModel,
+  isBackgroundOpen,
+  type HomeSessionRecord,
+  type OpenSessionOptions,
+} from "./home-model"
 import { showToast } from "@/utils/toast"
+import { fileManagerApp } from "@/utils/file-manager"
 
 const HOME_SESSION_HEADER_STICKY_TOP = 12
 const HOME_SESSION_HEADER_TEXT_HEIGHT = 16
@@ -78,6 +84,13 @@ function containHomeWheel(event: WheelEvent, viewport: HTMLElement) {
   event.preventDefault()
 }
 const SHOW_HOME_SESSION_ARCHIVE = false
+const HOME_ROW_LAYOUT =
+  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
+const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
+const HOME_ROW = `${HOME_ROW_BASE} [font-weight:530] text-v2-text-text-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover`
+export const HOME_PROJECT_NAV_LABEL = "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
+export const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:bg-v2-background-bg-layer-03 data-[selected]:text-v2-text-text-base data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-03 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
+export const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"
 
 type HomeSessionGroup = {
   id: "today" | "yesterday" | "older"
@@ -213,6 +226,7 @@ function useHomeSessionHeaderOpacity(groups: () => HomeSessionGroup[]) {
 }
 
 export function NewHome() {
+  const platform = usePlatform()
   const dialog = useDialog()
   const navigate = useNavigate()
   const server = useServer()
@@ -221,10 +235,10 @@ export function NewHome() {
   const tabs = useTabs()
   const command = useCommand()
   const marked = useMarked()
-  // The project column that used to sit beside this list now lives in the
-  // persistent sidebar (components/app-sidebar.tsx). Both call createHomeModel,
-  // so the two screens share one selection, one session index, and one set of
-  // actions.
+  const openSettings = useSettingsCommand()
+  // The project column beside this list moved into the persistent sidebar
+  // (components/app-sidebar.tsx). Both call createHomeModel, so the two screens
+  // share one selection, one session index, and one set of actions.
   const model = createHomeModel()
   let focusSessionSearch: (() => void) | undefined
   let sessionViewport: HTMLDivElement | undefined
@@ -348,6 +362,9 @@ export function NewHome() {
     },
   ])
 
+  // The selection-normalizing effect lives in createHomeModel, so it also runs
+  // for the sidebar on routes where this page is not mounted.
+
   createEffect(() => {
     const pending = pendingHomeNavigation
     if (!pending || pending.server !== server.key) return
@@ -396,9 +413,9 @@ export function NewHome() {
           containHomeWheel(event, sessionViewport)
         }}
       >
-        {/* The project column moved to the persistent sidebar, so this grid is a
-            single centred column. HomeMobileNav keeps Settings/Help reachable
-            below lg, where that sidebar is hidden. */}
+        {/* The project column moved to the persistent sidebar, leaving a single
+            centred column. HomeUtilityNav still stacks below lg, where that
+            sidebar is hidden. */}
         <div class="mx-auto grid min-h-full w-full max-w-[760px] grid-rows-[minmax(0,1fr)_auto] gap-4 px-3 lg:grid-rows-1 lg:px-6">
           <section
             ref={setSessionHoverTarget}
@@ -497,13 +514,361 @@ export function NewHome() {
               </Show>
             </div>
           </section>
-          <HomeMobileNav class="flex pb-4 lg:hidden" />
+          <HomeUtilityNav
+            class="flex lg:hidden"
+            openSettings={openSettings}
+            openHelp={() => platform.openLink(DOCS_URL)}
+            language={language}
+          />
         </div>
       </ScrollView>
     </div>
   )
 }
 
+export function HomeUtilityNav(props: {
+  class?: string
+  openSettings: () => void
+  openHelp: () => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  return (
+    <div class={`${props.class ?? ""} min-w-0 flex-col gap-1 pr-3`}>
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        onClick={props.openSettings}
+      >
+        <IconV2 name="settings-gear" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
+      </button>
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        onClick={props.openHelp}
+      >
+        <IconV2 name="help" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
+      </button>
+    </div>
+  )
+}
+
+export function HomeServerRow(props: {
+  server: ServerConnection.Any
+  selected: boolean
+  collapsed: boolean
+  health: ServerHealth | undefined
+  controller: ReturnType<typeof useServerManagementController>
+  focusServer: (server: ServerConnection.Any) => void
+  chooseProject: (server: ServerConnection.Any) => void
+  openEdit: (server: ServerConnection.Http) => void
+  toggleCollapsed: () => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const [state, setState] = createStore({ menuOpen: false })
+  const healthy = () => !!props.health?.healthy
+  const canToggle = () => healthy() && global.ensureServerCtx(props.server).projects.list().length > 0
+  return (
+    <div class="group/server relative flex h-7 min-w-0 items-center rounded-[6px]">
+      <button
+        type="button"
+        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
+        data-selected={props.selected ? "" : undefined}
+        disabled={!healthy()}
+        onClick={() => props.focusServer(props.server)}
+      >
+        <span
+          data-action="home-server-collapse"
+          class="inline-flex -ml-0.5 -mr-1.5 size-5 shrink-0 items-center justify-center rounded-[4px] text-v2-icon-icon-muted"
+          classList={{
+            "hover:bg-v2-overlay-simple-overlay-hover": canToggle(),
+            "cursor-default opacity-40": !canToggle(),
+          }}
+          aria-label={
+            props.collapsed ? props.language.t("home.server.expand") : props.language.t("home.server.collapse")
+          }
+          aria-disabled={!canToggle()}
+          aria-expanded={canToggle() ? !props.collapsed : undefined}
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            if (!canToggle()) return
+            props.toggleCollapsed()
+          }}
+          onPointerDown={(event) => event.preventDefault()}
+        >
+          <IconV2
+            name="chevron-down"
+            size="small"
+            class="transition-transform duration-150 ease-in-out"
+            style={{ transform: `rotate(${props.collapsed ? -90 : 0}deg)` }}
+          />
+        </span>
+        <div class="flex size-4 shrink-0 items-center justify-center -mr-0.5">
+          <ServerHealthIndicator health={props.health} />
+        </div>
+        <span class="flex min-w-0 items-center gap-1">
+          <span class={HOME_PROJECT_NAV_LABEL}>{props.server.displayName ?? new URL(props.server.http.url).host}</span>
+          <Show when={props.server.label}>
+            {(label) => (
+              <span class="shrink-0 rounded-[3px] border border-v2-border-border-base px-1 py-0.5 text-[9px] leading-none text-v2-text-text-muted">
+                {label()}
+              </span>
+            )}
+          </Show>
+        </span>
+      </button>
+      <div
+        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/server:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
+        data-menu={state.menuOpen}
+      >
+        <ServerRowMenu
+          server={props.server}
+          controller={props.controller}
+          onEdit={props.openEdit}
+          open={state.menuOpen}
+          onOpenChange={(open) => setState("menuOpen", open)}
+        />
+        <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
+          <IconButtonV2
+            data-action="home-add-project"
+            variant="ghost-muted"
+            size="small"
+            icon={<IconV2 name="folder-add-left" />}
+            aria-label={props.language.t("home.project.add")}
+            disabled={props.health?.healthy === false}
+            onClick={() => props.chooseProject(props.server)}
+          />
+        </TooltipV2>
+      </div>
+    </div>
+  )
+}
+
+export function HomeProjectList(props: {
+  server: ServerConnection.Any
+  projects: LocalProject[]
+  selected: HomeProjectSelection
+  selectProject: (server: ServerConnection.Any, directory: string) => void
+  openNewSession: (server: ServerConnection.Any, directory: string) => void
+  editProject: (server: ServerConnection.Any, project: LocalProject) => void
+  closeProject: (server: ServerConnection.Any, directory: string) => void
+  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
+  unseenCount: (server: ServerConnection.Any, project: LocalProject) => number
+  language: ReturnType<typeof useLanguage>
+}) {
+  return (
+    <div class="flex min-w-0 flex-col gap-1">
+      <For each={props.projects}>
+        {(project) => (
+          <HomeProjectRow
+            project={project}
+            server={props.server}
+            selected={
+              props.selected.server === ServerConnection.key(props.server) &&
+              props.selected.directory === project.worktree
+            }
+            unseenCount={props.unseenCount(props.server, project)}
+            selectProject={props.selectProject}
+            openNewSession={props.openNewSession}
+            editProject={props.editProject}
+            closeProject={props.closeProject}
+            clearNotifications={props.clearNotifications}
+            language={props.language}
+          />
+        )}
+      </For>
+    </div>
+  )
+}
+
+export function HomeProjectEmpty(props: {
+  server: ServerConnection.Any
+  recentlyClosed: LocalProject[]
+  homedir: string
+  chooseProject: (server: ServerConnection.Any) => void
+  openRecentProject: (server: ServerConnection.Any, directory: string) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  return (
+    <div class="flex min-w-0 flex-col gap-1">
+      <button
+        type="button"
+        data-action="home-add-project-row"
+        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60 [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+        disabled={unreachable()}
+        onClick={() => props.chooseProject(props.server)}
+      >
+        <IconV2 name="folder-add-left" size="small" />
+        <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
+      </button>
+      <Show when={props.recentlyClosed.length > 0}>
+        <div class="mt-3 flex h-7 min-w-0 shrink-0 items-center pl-1.5 pr-3">
+          <div class="text-v2-text-text-faint [font-weight:530]">{props.language.t("home.recentlyClosed")}</div>
+        </div>
+        <For each={props.recentlyClosed}>
+          {(project) => (
+            <HomeRecentlyClosedRow
+              project={project}
+              server={props.server}
+              homedir={props.homedir}
+              openRecentProject={props.openRecentProject}
+              language={props.language}
+            />
+          )}
+        </For>
+      </Show>
+    </div>
+  )
+}
+
+export function HomeRecentlyClosedRow(props: {
+  project: LocalProject
+  server: ServerConnection.Any
+  homedir: string
+  openRecentProject: (server: ServerConnection.Any, directory: string) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const unreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  const path = () => {
+    const home = props.homedir
+    const worktree = props.project.worktree
+    if (home && (worktree === home || worktree.startsWith(`${home}/`))) return `~${worktree.slice(home.length)}`
+    return worktree
+  }
+  return (
+    <TooltipV2 placement="right" value={path()}>
+      <button
+        type="button"
+        data-component="home-recently-closed-row"
+        class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60`}
+        disabled={unreachable()}
+        onClick={() => props.openRecentProject(props.server, props.project.worktree)}
+      >
+        <HomeProjectAvatar project={props.project} outline />
+        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
+      </button>
+    </TooltipV2>
+  )
+}
+
+function HomeProjectRow(props: {
+  project: LocalProject
+  server: ServerConnection.Any
+  selected: boolean
+  unseenCount: number
+  selectProject: (server: ServerConnection.Any, directory: string) => void
+  openNewSession: (server: ServerConnection.Any, directory: string) => void
+  editProject: (server: ServerConnection.Any, project: LocalProject) => void
+  closeProject: (server: ServerConnection.Any, directory: string) => void
+  clearNotifications: (server: ServerConnection.Any, project: LocalProject) => void
+  language: ReturnType<typeof useLanguage>
+}) {
+  const global = useGlobal()
+  const platform = usePlatform()
+  const serverUnreachable = () => global.servers.health[ServerConnection.key(props.server)]?.healthy === false
+  const [state, setState] = createStore({ menuOpen: false })
+  const canRevealInFileManager = () =>
+    platform.platform === "desktop" && !!platform.openPath && ServerConnection.local(props.server)
+  const fileManagerActionLabel = () =>
+    props.language.t(
+      fileManagerApp(platform.platform === "desktop" ? (platform.os ?? "unknown") : "unknown").actionLabel,
+    )
+  const revealInFileManager = () => {
+    if (!platform.openPath) return
+    platform.openPath(props.project.worktree).catch((err: unknown) =>
+      showToast({
+        title: props.language.t("common.requestFailed"),
+        description: errorMessage(err, props.language.t("common.requestFailed")),
+      }),
+    )
+  }
+  return (
+    <div class="group/project relative flex h-7 min-w-0 items-center rounded-[6px]">
+      <button
+        type="button"
+        data-component="home-project-row"
+        class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
+        data-selected={props.selected ? "" : undefined}
+        aria-current={props.selected ? "page" : undefined}
+        disabled={serverUnreachable()}
+        onClick={() => props.selectProject(props.server, props.project.worktree)}
+      >
+        <HomeProjectAvatar project={props.project} />
+        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
+      </button>
+      <div
+        class="hover-reveal absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-1 group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
+        data-menu={state.menuOpen}
+      >
+        <MenuV2
+          gutter={6}
+          modal={false}
+          placement="bottom-end"
+          open={state.menuOpen}
+          onOpenChange={(open) => setState("menuOpen", open)}
+        >
+          <MenuV2.Trigger
+            as={IconButtonV2}
+            data-action="home-project-menu"
+            variant="ghost-muted"
+            size="small"
+            icon={<IconV2 name="outline-dots" />}
+            aria-label={props.language.t("common.moreOptions")}
+          />
+          <MenuV2.Portal>
+            <MenuV2.Content>
+              <MenuV2.Item onSelect={() => props.openNewSession(props.server, props.project.worktree)}>
+                {props.language.t("command.session.new")}
+              </MenuV2.Item>
+              <MenuV2.Item onSelect={() => props.editProject(props.server, props.project)}>
+                {props.language.t("dialog.project.edit.title")}
+              </MenuV2.Item>
+              <Show when={canRevealInFileManager()}>
+                <MenuV2.Item onSelect={revealInFileManager}>{fileManagerActionLabel()}</MenuV2.Item>
+              </Show>
+              <MenuV2.Item
+                disabled={props.unseenCount === 0}
+                onSelect={() => props.clearNotifications(props.server, props.project)}
+              >
+                {props.language.t("sidebar.project.clearNotifications")}
+              </MenuV2.Item>
+              <MenuV2.Separator />
+              <MenuV2.Item onSelect={() => props.closeProject(props.server, props.project.worktree)}>
+                {props.language.t("common.close")}
+              </MenuV2.Item>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
+        <IconButtonV2
+          data-action="home-project-new-session"
+          variant="ghost-muted"
+          size="small"
+          icon={<IconV2 name="edit" />}
+          aria-label={props.language.t("command.session.new")}
+          onClick={() => props.openNewSession(props.server, props.project.worktree)}
+        />
+      </div>
+    </div>
+  )
+}
+
+function HomeProjectAvatar(props: { project: LocalProject; outline?: boolean }) {
+  const name = createMemo(() => displayName(props.project))
+  return (
+    <ProjectAvatar
+      fallback={name()}
+      src={props.outline ? undefined : getProjectAvatarSource(props.project.id, props.project.icon)}
+      variant={props.outline ? "outline" : getProjectAvatarVariant(props.project.icon?.color)}
+    />
+  )
+}
+
 function HomeSessionLeading(props: {
   project: LocalProject
   session: Session

From 1505b42a0d510c3a81cb245984598a4f3477225e Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Mon, 10 Aug 2026 10:52:18 +0700
Subject: [PATCH 4/6] fix(app): make the Home button open a new session
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Home toggled between "/" — the recent-sessions list — and the last active tab.
Now that the home screen is a new session, that contradicted itself: pressing
Home took you to a list.

goHome selects an already-open draft if there is one and otherwise falls
through to the existing openNewTab() project-resolution chain, so repeated
presses do not stack up draft tabs. The New session button still always makes a
new one; only Home reuses. The pressed state keys on the draft route instead of
"home". The icon, label and mod+b keybind are unchanged, and tabs.toggleHome is
left in place, just uncalled.

Verified on a running app: boot shows the composer with Home pressed, View all
switches to the 28-row recents list with Home unpressed, and pressing Home
returns to the composer and keeps returning there — draft-tab count unchanged
across three presses.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                             |  7 +++++++
 DIVERGENCES.md                           |  1 +
 packages/app/src/components/titlebar.tsx | 22 +++++++++++++++++-----
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 836e87d99a..5993094cfa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,13 @@ file is the human-readable summary of what changed and why.
   the tab bar still restores it. The browser UI is unaffected — there, `/` is a
   URL you asked for, so it keeps showing the recents screen.
 
+- **The Home button goes to a new session** — it used to toggle between the
+  recent-sessions list and whichever tab you came from, which no longer matches
+  what the home screen is. It (and `mod+b`) now takes you to a new session,
+  selecting an already-open empty draft rather than opening another, and it
+  lights up while you are on one. The full list is still a click away under
+  **View all**.
+
 ## 1.18.4-8
 
 ### Agent
diff --git a/DIVERGENCES.md b/DIVERGENCES.md
index 3cffedf3e0..ec5b27b60e 100644
--- a/DIVERGENCES.md
+++ b/DIVERGENCES.md
@@ -96,6 +96,7 @@ from the squash message first, or use a plain merge.
 | `packages/ui/src/v2/components/wordmark-v2.tsx` (+ fork-only `wordmark-v2.css`) | `WordmarkV2` — the watermark behind the v2 new-session composer (`packages/app/src/components/session/session-new-design-view.tsx`) — draws the codev wordmark from the same 24x6 pixel grid as `Logo` instead of upstream's 720x129 "opencode", as two `<path>`s (`data-slot="wordmark-v2-co"` / `…-dev`). Upstream's watermark treatment is kept verbatim: the `0.6` outer opacity and the alpha mask whose gradient fades the mark out over its bottom half (converted to the new viewBox: gradient `y1` 68/129 → 3.163/6). "co" keeps `fill="currentColor"` so it still follows the caller's `text-*` class; "dev" takes brand red `#ee0033`. Per-half opacities live in the new `wordmark-v2.css`, following the one-CSS-file-per-v2-component convention: `co` is `0.112` (upstream's own `0.16 × 0.7` nesting, flattened), `dev` is boosted to `0.224` on light and `0.336` on dark via `--wordmark-v2-dev-opacity`, declared under `prefers-color-scheme` and both `[data-color-scheme]` values like components/logo.css. The boost is deliberate and measured: at upstream's weight a saturated red composites to within a few levels of the grey "co" half against the dark background and the two-tone disappears entirely, while the same value already reads pink against the light one. | The component is currently **not rendered** — the new-session view drops it (see the row below) — but it stays rebranded and exported so reinstating the watermark does not bring the upstream mark back with it. | Keep our version wholesale, including the per-theme `dev` opacity. If upstream retunes the watermark opacities, re-derive the `dev` boost from the new base rather than adopting a single flat value. |
 | `packages/app/src/components/session/session-new-design-view.tsx` | Drops the `WordmarkV2` watermark from the v2 new-session screen and centres the composer. Upstream absolutely positions the content block at `top-[25.375%]` to leave room for the wordmark above it; with the mark gone that offset just parks the composer high in an empty pane, so the outer element becomes `flex items-center justify-center` over `size-full` (carrying the `px-6` inset across) and the `mt-8` spacer under the wordmark goes away. | The wordmark reads as clutter on the desktop new-session screen; without it the pane should be balanced, not top-weighted. | Keep our centred layout. If upstream restyles this view, re-apply the drop + centring rather than restoring `top-[25.375%]`. Reinstating the watermark means restoring the offset too, or it will sit centred with the composer. |
 | `packages/app/src/pages/home.tsx`, `packages/app/src/pages/error.tsx`, `packages/enterprise/src/routes/share/[shareID].tsx` | `Logo` width utilities retuned for the codev wordmark's 4:1 box (upstream's is 5.57:1): home `md:w-xl` → `md:w-104`, error `w-58.5` → `w-42`, share (both call sites) `w-58.5` → `w-42` | Each value is the width at which the new wordmark renders at exactly the height the upstream one did, so no surrounding layout shifts. | Keep our widths; take upstream's surrounding changes. Recompute rather than restore if upstream changes the size. |
+| `packages/app/src/components/titlebar.tsx` | The titlebar Home button (and its `home.toggle` command, `mod+b`) opens a new session instead of toggling between `/` and the last active tab: `tabs.toggleHome(...)` becomes a `goHome` that selects an already-open draft if there is one and otherwise falls through to the existing `openNewTab()` project-resolution chain. Its pressed / `aria-pressed` state keys on `layout.route().type === "draft"` rather than `"home"`. The icon, label (`home.title`) and keybind are unchanged, as is `tabs.toggleHome` itself, which is simply no longer called. | The home screen is a new session in this fork, so Home has to go there; toggling into the recent-sessions list contradicted that. Reuse-before-create keeps repeated presses from stacking up draft tabs — unlike the New session button, which is expected to always make a new one. | Keep our `goHome`. If upstream reworks the titlebar, re-apply it rather than restoring `toggleHome`. If upstream deletes `tabs.toggleHome`, nothing here breaks. |
 | `packages/app/src/pages/layout-new.tsx` (again) | Mounts the fork-only `<LaunchNewSession />`, which on desktop redirects one time per boot to a new-session draft (reusing an existing empty draft rather than stacking one up per launch). It pins its decision to the pathname the window came up on and disarms as soon as anything navigates, so it can never hijack a later visit to `/` — the sidebar's "View all" links there. Desktop-only: in the browser there is no "launch" distinct from "navigate to /", so redirecting would make the recents screen unreachable by URL and would break two `packages/app/e2e` specs that `goto("/")`. | Launching should put you in front of a prompt, the way Claude Desktop does, rather than on a list. This supersedes the desktop's restore-last-screen behaviour (`getLastActiveUrl`, `packages/desktop/src/renderer/index.tsx`); the previous session stays one click away in Recents and its tab is still restored. | Keep the mount. If upstream restructures this layout, re-add it. Do not "simplify" the boot-window guard into a plain `location.pathname === "/"` check — that is the bug it exists to prevent. |
 | `packages/app/src/pages/layout-new.tsx`, `packages/app/src/pages/home.tsx`, `packages/app/src/i18n/{en,es}.ts` | **Persistent app sidebar.** Upstream's project column is an `<aside>` owned by `NewHome`, so it exists only on `/`. It becomes app chrome: `layout-new.tsx` wraps its `<main>` in a row flex and renders the fork-only `<AppSidebar class="hidden lg:flex">` beside it, so the sidebar survives every navigation. **The row components stay in `home.tsx`** — `HomeUtilityNav`, `HomeServerRow`, `HomeProjectList`, `HomeProjectEmpty`, `HomeRecentlyClosedRow` and the classes `HOME_PROJECT_NAV_ROW` / `HOME_PROJECT_NAV_LABEL` / `HOME_SECTION_LABEL` gain an `export` and nothing else, so upstream edits to them still apply cleanly; the fork-only `src/components/app-sidebar.tsx` imports and composes them, adding only the column shell and the Recents section. `home.tsx` otherwise loses just `HomeProjectColumn` (dead once the sidebar owns that composition) and the `NewHome` selection/action block, and its grid collapses from `lg:grid-cols-[280px_minmax(0,720px)]` to one `max-w-[760px]` column. The sub-`lg` `HomeUtilityNav` mount is untouched, so the stacked mobile layout is upstream's. The state both screens need (`focusedServer`, `projects`, `selectedProject`, `newSessionProject`, `projectDirectories`, the session-index query, `openNewSession`, `openProjectNewSession`, `openSession`, `selectProject`, `addProjects`, `editProject`, `closeProject`, `unseenCount`, `clearNotifications`, `chooseProject`, `isBackgroundOpen`, `buildHomeSessionRecords`, `HomeSessionRecord`) moves to fork-only `src/pages/home-model.tsx`, which both callers instantiate — safe because the selection lives in `useLayout().home`, the index is one TanStack query deduped by key, and the server-normalizing effect is idempotent. New i18n keys `sidebar.recents`, `sidebar.recents.new`, `sidebar.recents.viewAll` in `en` + `es`. Every `data-component`/`data-action` hook is untouched (`home-project-row`, `home-add-project`, `home-session-row`, `home-session-search`, …) because `packages/app/e2e` selects on them. | The desktop app should navigate like Claude Desktop — one always-visible sidebar with Projects, Recents and pinned Settings/Help — instead of losing all navigation the moment a session opens. Exporting the row components in place rather than relocating them keeps `home.tsx` down to ~36 added lines: upstream changes to those components merge without a conflict, which relocating them would have forfeited. | Keep our structure. On conflict take upstream's `home.tsx` wholesale and re-apply the four edits: the `export` keywords, the `HomeProjectColumn` deletion, the `createHomeModel()` swap in `NewHome`, and the single-column grid. If upstream edits an exported row component, just take it. Never let a `data-component`/`data-action` hook drift — the e2e suite has no other handle on these rows. |
 | `packages/desktop/icons/{dev,beta,prod}/` (all PNGs, `icon.icns`, `icon.ico`, `dock.png`), `packages/desktop/icons/README.md` | Regenerated from the fork-only `packages/desktop/icons/icon.svg` by the fork-only `packages/desktop/scripts/generate-icons.ts`: the brand-red `#ee0033` CoDev "C" — the `--mini` splash badge glyph, at the VS Code extension icon's proportions (unit = 120/1024, mark 480x600 centered) — on a white tile, replacing upstream's black/blueprint "o" mark. All three channels are byte-identical for now (chosen deliberately over upstream's per-channel treatments); the generator still writes them separately so a channel can diverge later. `icon.icns` members and `dock.png` use the macOS Big Sur grid (824/1024 inset + drop shadow); Windows, Linux and Store assets stay full-bleed. README rewritten from the Tauri-CLI + Image2Icon recipe to the generator. The stale Tauri-era `android/` and `ios/` subfolders are left untouched — nothing in the Electron build reads them. | Closes the "desktop app icons need design assets" rebrand gap: the Dock/taskbar icon was still upstream's mark. | Keep our assets and README (binary: take ours wholesale). Regenerate via the script rather than hand-editing; if upstream adds an icon size, add it to `FLAT_PNGS`/`ICONSET` and rerun. |
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index f7da43665a..d1a63bfcd2 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -371,7 +371,19 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
 
               tabs.newDraft({ server: fallback.server, directory: fallback.project.worktree }, "")
             }
-            const toggleHome = () => tabs.toggleHome({ home: layout.route().type === "home", current: currentTab() })
+            // The home screen is a new session, not the recent-sessions list, so
+            // this goes there rather than toggling between "/" and the last tab.
+            // An already-open empty draft is reused so repeated presses do not
+            // stack up tabs; the recents list lives behind the sidebar's
+            // "View all".
+            const goHome = () => {
+              const draft = tabsStore.find((tab) => tab.type === "draft")
+              if (draft) {
+                tabs.select(draft)
+                return
+              }
+              openNewTab()
+            }
 
             command.register("titlebar-home", () => [
               {
@@ -380,7 +392,7 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                 category: language.t("command.category.view"),
                 keybind: "mod+b",
                 hidden: true,
-                onSelect: toggleHome,
+                onSelect: goHome,
               },
             ])
 
@@ -482,10 +494,10 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                     size="large"
                     class="!w-9 shrink-0"
                     icon={<IconV2 name="grid-plus" />}
-                    state={layout.route().type === "home" ? "pressed" : undefined}
-                    onClick={toggleHome}
+                    state={layout.route().type === "draft" ? "pressed" : undefined}
+                    onClick={goHome}
                     aria-label={language.t("home.title")}
-                    aria-pressed={layout.route().type === "home"}
+                    aria-pressed={layout.route().type === "draft"}
                   />
                 </TooltipV2>
 

From d431b690c07a38ca6482aff08e90ca4a54429edb Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Mon, 10 Aug 2026 11:00:32 +0700
Subject: [PATCH 5/6] fix(app): put the new-session screen on the same card as
 a session
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The draft screen painted bg-deep — the window-chrome tone — while sessions and
the recents list sit on a raised bg-base card. Full width that was merely flat;
next to the always-visible sidebar it read as empty space rather than as the
screen you are on.

NewSessionDesignView switches to bg-base and its wrapper in new-session.tsx
takes the bg-base + elevation-raised pair SessionPanelFrame applies with
`newLayout raised`. Confirmed identical at runtime rather than by eye: both
cards compute to rgb(255,255,255), the same eight-layer shadow, and a 10px
radius.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                                | 5 +++++
 DIVERGENCES.md                                              | 2 +-
 .../app/src/components/session/session-new-design-view.tsx  | 6 +++++-
 packages/app/src/pages/new-session.tsx                      | 5 ++++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5993094cfa..2bad8f8a66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,11 @@ file is the human-readable summary of what changed and why.
   the tab bar still restores it. The browser UI is unaffected — there, `/` is a
   URL you asked for, so it keeps showing the recents screen.
 
+- **The new-session screen sits on a card, like every other screen** — it was
+  painted in the same tone as the window chrome, so next to the sidebar it read
+  as empty space rather than as the screen you are on, while sessions and the
+  recents list floated on a raised white card. It now uses that same card.
+
 - **The Home button goes to a new session** — it used to toggle between the
   recent-sessions list and whichever tab you came from, which no longer matches
   what the home screen is. It (and `mod+b`) now takes you to a new session,
diff --git a/DIVERGENCES.md b/DIVERGENCES.md
index ec5b27b60e..b8d34fbb61 100644
--- a/DIVERGENCES.md
+++ b/DIVERGENCES.md
@@ -94,7 +94,7 @@ from the squash message first, or use a plain merge.
 | `packages/tui/src/component/logo.tsx` | Renders the lowercase codev wordmark from `wordmarkHalves` — one bold `<text>` per half, no per-char shadow cells — with "co" in `brand.navy` on light / `theme.text` on dark and "dev" in `brand.red`, instead of upstream's two-tone "open"+"code" | Banner is pixel-identical to the landing page wordmark (`codev-landing-page` `app/components/PixelWordmark.tsx`: `text-brand-navy dark:text-foreground` + `text-brand-red`), so the marketing site and the TUI read as one brand. Deliberately fixed brand colors rather than the theme's `secondary`, and no drop shadow — the landing wordmark has neither. | Keep our version wholesale. If upstream restructures the component, re-apply the two-half brand coloring rather than reverting to a theme color. |
 | `packages/ui/src/components/logo.tsx`, `packages/ui/src/components/logo.css` | `Logo` renders the lowercase "codev" wordmark instead of upstream's "opencode": the `wordmarkHalves` pixel glyphs of `packages/tui/src/logo.ts` resolved to a 24x6 grid at one unit per pixel (viewBox `0 0 24 6`, was `0 0 234 42`), as two `<path>`s — `data-slot="logo-wordmark-co"` and `…-dev` — with no drop-shadow paths. Colors come from two custom properties defined in logo.css on `[data-component="logo-wordmark"]`: `--logo-wordmark-dev` is always brand red `#ee0033`, `--logo-wordmark-co` is brand navy `#19224c` on light and `var(--icon-strong-base)` on dark. The dark swap is declared three times — under `prefers-color-scheme: dark` for surfaces that never stamp a theme, then under both `[data-color-scheme="light"]` and `[data-color-scheme="dark"]` so the app's explicit choice (`packages/ui/src/theme/context.tsx` sets it on `<html>`) beats the OS preference in both directions. Brand hexes are literals, not theme tokens — same reasoning as the TUI component row. `Mark` and `Splash` (the square "o") are untouched. | The web/desktop banner is the same art the TUI home banner and the landing page wordmark draw, so every surface reads as one brand. | Keep our version wholesale. If upstream restructures the component, re-apply the two-half brand coloring rather than reverting to `--icon-*` tokens. |
 | `packages/ui/src/v2/components/wordmark-v2.tsx` (+ fork-only `wordmark-v2.css`) | `WordmarkV2` — the watermark behind the v2 new-session composer (`packages/app/src/components/session/session-new-design-view.tsx`) — draws the codev wordmark from the same 24x6 pixel grid as `Logo` instead of upstream's 720x129 "opencode", as two `<path>`s (`data-slot="wordmark-v2-co"` / `…-dev`). Upstream's watermark treatment is kept verbatim: the `0.6` outer opacity and the alpha mask whose gradient fades the mark out over its bottom half (converted to the new viewBox: gradient `y1` 68/129 → 3.163/6). "co" keeps `fill="currentColor"` so it still follows the caller's `text-*` class; "dev" takes brand red `#ee0033`. Per-half opacities live in the new `wordmark-v2.css`, following the one-CSS-file-per-v2-component convention: `co` is `0.112` (upstream's own `0.16 × 0.7` nesting, flattened), `dev` is boosted to `0.224` on light and `0.336` on dark via `--wordmark-v2-dev-opacity`, declared under `prefers-color-scheme` and both `[data-color-scheme]` values like components/logo.css. The boost is deliberate and measured: at upstream's weight a saturated red composites to within a few levels of the grey "co" half against the dark background and the two-tone disappears entirely, while the same value already reads pink against the light one. | The component is currently **not rendered** — the new-session view drops it (see the row below) — but it stays rebranded and exported so reinstating the watermark does not bring the upstream mark back with it. | Keep our version wholesale, including the per-theme `dev` opacity. If upstream retunes the watermark opacities, re-derive the `dev` boost from the new base rather than adopting a single flat value. |
-| `packages/app/src/components/session/session-new-design-view.tsx` | Drops the `WordmarkV2` watermark from the v2 new-session screen and centres the composer. Upstream absolutely positions the content block at `top-[25.375%]` to leave room for the wordmark above it; with the mark gone that offset just parks the composer high in an empty pane, so the outer element becomes `flex items-center justify-center` over `size-full` (carrying the `px-6` inset across) and the `mt-8` spacer under the wordmark goes away. | The wordmark reads as clutter on the desktop new-session screen; without it the pane should be balanced, not top-weighted. | Keep our centred layout. If upstream restyles this view, re-apply the drop + centring rather than restoring `top-[25.375%]`. Reinstating the watermark means restoring the offset too, or it will sit centred with the composer. |
+| `packages/app/src/components/session/session-new-design-view.tsx`, `packages/app/src/pages/new-session.tsx` | Drops the `WordmarkV2` watermark from the v2 new-session screen and centres the composer. Upstream absolutely positions the content block at `top-[25.375%]` to leave room for the wordmark above it; with the mark gone that offset just parks the composer high in an empty pane, so the outer element becomes `flex items-center justify-center` over `size-full` (carrying the `px-6` inset across) and the `mt-8` spacer under the wordmark goes away. The pane also takes the same raised card every session sits on: `bg-v2-background-bg-deep` → `bg-v2-background-bg-base` in the view, and `new-session.tsx`'s `rounded-[10px]` wrapper gains `bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]` — the exact pair `SessionPanelFrame` (`pages/session.tsx`) applies with `newLayout raised`. Verified equal at runtime: same background, same eight-layer shadow, same 10px radius. | The wordmark reads as clutter on the desktop new-session screen; without it the pane should be balanced, not top-weighted. And with the sidebar always on screen, upstream's `bg-deep` made the draft screen read as an extension of the window chrome while every session floated on a card — the two screens have to match. | Keep our centred layout and the card. If upstream restyles this view, re-apply the drop + centring rather than restoring `top-[25.375%]`, and re-check the background against whatever `SessionPanelFrame` then uses rather than hardcoding `bg-base`. Reinstating the watermark means restoring the offset too, or it will sit centred with the composer. |
 | `packages/app/src/pages/home.tsx`, `packages/app/src/pages/error.tsx`, `packages/enterprise/src/routes/share/[shareID].tsx` | `Logo` width utilities retuned for the codev wordmark's 4:1 box (upstream's is 5.57:1): home `md:w-xl` → `md:w-104`, error `w-58.5` → `w-42`, share (both call sites) `w-58.5` → `w-42` | Each value is the width at which the new wordmark renders at exactly the height the upstream one did, so no surrounding layout shifts. | Keep our widths; take upstream's surrounding changes. Recompute rather than restore if upstream changes the size. |
 | `packages/app/src/components/titlebar.tsx` | The titlebar Home button (and its `home.toggle` command, `mod+b`) opens a new session instead of toggling between `/` and the last active tab: `tabs.toggleHome(...)` becomes a `goHome` that selects an already-open draft if there is one and otherwise falls through to the existing `openNewTab()` project-resolution chain. Its pressed / `aria-pressed` state keys on `layout.route().type === "draft"` rather than `"home"`. The icon, label (`home.title`) and keybind are unchanged, as is `tabs.toggleHome` itself, which is simply no longer called. | The home screen is a new session in this fork, so Home has to go there; toggling into the recent-sessions list contradicted that. Reuse-before-create keeps repeated presses from stacking up draft tabs — unlike the New session button, which is expected to always make a new one. | Keep our `goHome`. If upstream reworks the titlebar, re-apply it rather than restoring `toggleHome`. If upstream deletes `tabs.toggleHome`, nothing here breaks. |
 | `packages/app/src/pages/layout-new.tsx` (again) | Mounts the fork-only `<LaunchNewSession />`, which on desktop redirects one time per boot to a new-session draft (reusing an existing empty draft rather than stacking one up per launch). It pins its decision to the pathname the window came up on and disarms as soon as anything navigates, so it can never hijack a later visit to `/` — the sidebar's "View all" links there. Desktop-only: in the browser there is no "launch" distinct from "navigate to /", so redirecting would make the recents screen unreachable by URL and would break two `packages/app/e2e` specs that `goto("/")`. | Launching should put you in front of a prompt, the way Claude Desktop does, rather than on a list. This supersedes the desktop's restore-last-screen behaviour (`getLastActiveUrl`, `packages/desktop/src/renderer/index.tsx`); the previous session stays one click away in Recents and its tab is still restored. | Keep the mount. If upstream restructures this layout, re-add it. Do not "simplify" the boot-window guard into a plain `location.pathname === "/"` check — that is the bug it exists to prevent. |
diff --git a/packages/app/src/components/session/session-new-design-view.tsx b/packages/app/src/components/session/session-new-design-view.tsx
index 669820febd..9dbfe4f136 100644
--- a/packages/app/src/components/session/session-new-design-view.tsx
+++ b/packages/app/src/components/session/session-new-design-view.tsx
@@ -5,11 +5,15 @@ import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
 // top to leave room for a `WordmarkV2` above it; with the mark gone that offset
 // just parks the composer high in an empty pane, so the content centers instead.
 // `WordmarkV2` itself is still exported (and rebranded) if it is reinstated.
+//
+// Fork: `bg-base`, not upstream's `bg-deep`. With the sidebar always on screen,
+// bg-deep made this pane read as an extension of the window chrome while every
+// session sits on a raised bg-base card (SessionPanelFrame in pages/session.tsx).
 export function NewSessionDesignView(props: { children: JSX.Element }) {
   return (
     <div
       data-component="session-new-design"
-      class="relative flex size-full items-center justify-center overflow-hidden bg-v2-background-bg-deep px-6"
+      class="relative flex size-full items-center justify-center overflow-hidden bg-v2-background-bg-base px-6"
     >
       <div class={NEW_SESSION_CONTENT_WIDTH}>{props.children}</div>
     </div>
diff --git a/packages/app/src/pages/new-session.tsx b/packages/app/src/pages/new-session.tsx
index 1e9ab99ea0..a33ee3bdc8 100644
--- a/packages/app/src/pages/new-session.tsx
+++ b/packages/app/src/pages/new-session.tsx
@@ -165,7 +165,10 @@ export default function NewSessionPage() {
       </Show>
       <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
         <div class="@container relative flex flex-col min-h-0 h-full flex-1">
-          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
+          {/* Fork: same raised card a session gets from SessionPanelFrame
+              (pages/session.tsx), so the draft screen is not a flat panel
+              beside the sidebar. */}
+          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px] bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]">
             <NewSessionDesignView>
               <div class={NEW_SESSION_CONTENT_WIDTH}>
                 <div class="flex flex-col gap-8">

From 111c74dcba8f88e3ed6f88d943c303ae0720c94c Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Mon, 10 Aug 2026 11:15:25 +0700
Subject: [PATCH 6/6] feat(app): move the channel badge into the sidebar and
 let Home lead the titlebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The DEV/BETA tag sat at the far left of the v2 titlebar, pushing the Home
button 45px to the right of where the row starts. It moves to the foot of the
sidebar, under Help.

ChannelIndicator gains an export and is rendered by AppSidebar rather than
relocated, so the badge markup stays where upstream keeps it; layout-new passes
debugTools to the sidebar as well, which keeps the dev badge's debug-bar toggle
working. Titlebar keeps the prop because the legacy titlebar still renders the
badge inline — only the v2 branch changed.

The sidebar guards on the channel rather than wrapping unconditionally, so on
prod, where the indicator renders nothing, the column's gap-4 does not leave a
hole behind.

Verified on three real builds (the channel is a build-time define, so each
needed its own run):

  dev   DEV badge at the sidebar foot, still toggles the debug bar, Home x=92
  beta  BETA badge in the same place, Home x=92
  prod  no badge; Help's bottom lands exactly where the badge's was (762px),
        Recents reclaims the row, Home x=92

x=92 is the leftmost content position on macOS: 84px of traffic-light inset
plus the row's 8px padding.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                |  7 +++++++
 DIVERGENCES.md                              |  2 +-
 packages/app/src/components/app-sidebar.tsx | 15 ++++++++++++++-
 packages/app/src/components/titlebar.tsx    |  6 ++++--
 packages/app/src/pages/layout-new.tsx       |  9 ++++++++-
 5 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2bad8f8a66..b44fe78cea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,13 @@ file is the human-readable summary of what changed and why.
   the tab bar still restores it. The browser UI is unaffected — there, `/` is a
   URL you asked for, so it keeps showing the recents screen.
 
+- **The channel badge moved to the bottom of the sidebar** — the blue **DEV**
+  (or **BETA**) tag used to sit at the far left of the titlebar, pushing the
+  Home button along with it. It now sits under Help at the foot of the sidebar,
+  and Home leads the titlebar. On a dev build the badge still toggles the debug
+  bar. Release builds show no badge, as before, and the sidebar closes the gap
+  rather than leaving a hole where it would have been.
+
 - **The new-session screen sits on a card, like every other screen** — it was
   painted in the same tone as the window chrome, so next to the sidebar it read
   as empty space rather than as the screen you are on, while sessions and the
diff --git a/DIVERGENCES.md b/DIVERGENCES.md
index b8d34fbb61..8d2a8c68af 100644
--- a/DIVERGENCES.md
+++ b/DIVERGENCES.md
@@ -96,7 +96,7 @@ from the squash message first, or use a plain merge.
 | `packages/ui/src/v2/components/wordmark-v2.tsx` (+ fork-only `wordmark-v2.css`) | `WordmarkV2` — the watermark behind the v2 new-session composer (`packages/app/src/components/session/session-new-design-view.tsx`) — draws the codev wordmark from the same 24x6 pixel grid as `Logo` instead of upstream's 720x129 "opencode", as two `<path>`s (`data-slot="wordmark-v2-co"` / `…-dev`). Upstream's watermark treatment is kept verbatim: the `0.6` outer opacity and the alpha mask whose gradient fades the mark out over its bottom half (converted to the new viewBox: gradient `y1` 68/129 → 3.163/6). "co" keeps `fill="currentColor"` so it still follows the caller's `text-*` class; "dev" takes brand red `#ee0033`. Per-half opacities live in the new `wordmark-v2.css`, following the one-CSS-file-per-v2-component convention: `co` is `0.112` (upstream's own `0.16 × 0.7` nesting, flattened), `dev` is boosted to `0.224` on light and `0.336` on dark via `--wordmark-v2-dev-opacity`, declared under `prefers-color-scheme` and both `[data-color-scheme]` values like components/logo.css. The boost is deliberate and measured: at upstream's weight a saturated red composites to within a few levels of the grey "co" half against the dark background and the two-tone disappears entirely, while the same value already reads pink against the light one. | The component is currently **not rendered** — the new-session view drops it (see the row below) — but it stays rebranded and exported so reinstating the watermark does not bring the upstream mark back with it. | Keep our version wholesale, including the per-theme `dev` opacity. If upstream retunes the watermark opacities, re-derive the `dev` boost from the new base rather than adopting a single flat value. |
 | `packages/app/src/components/session/session-new-design-view.tsx`, `packages/app/src/pages/new-session.tsx` | Drops the `WordmarkV2` watermark from the v2 new-session screen and centres the composer. Upstream absolutely positions the content block at `top-[25.375%]` to leave room for the wordmark above it; with the mark gone that offset just parks the composer high in an empty pane, so the outer element becomes `flex items-center justify-center` over `size-full` (carrying the `px-6` inset across) and the `mt-8` spacer under the wordmark goes away. The pane also takes the same raised card every session sits on: `bg-v2-background-bg-deep` → `bg-v2-background-bg-base` in the view, and `new-session.tsx`'s `rounded-[10px]` wrapper gains `bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]` — the exact pair `SessionPanelFrame` (`pages/session.tsx`) applies with `newLayout raised`. Verified equal at runtime: same background, same eight-layer shadow, same 10px radius. | The wordmark reads as clutter on the desktop new-session screen; without it the pane should be balanced, not top-weighted. And with the sidebar always on screen, upstream's `bg-deep` made the draft screen read as an extension of the window chrome while every session floated on a card — the two screens have to match. | Keep our centred layout and the card. If upstream restyles this view, re-apply the drop + centring rather than restoring `top-[25.375%]`, and re-check the background against whatever `SessionPanelFrame` then uses rather than hardcoding `bg-base`. Reinstating the watermark means restoring the offset too, or it will sit centred with the composer. |
 | `packages/app/src/pages/home.tsx`, `packages/app/src/pages/error.tsx`, `packages/enterprise/src/routes/share/[shareID].tsx` | `Logo` width utilities retuned for the codev wordmark's 4:1 box (upstream's is 5.57:1): home `md:w-xl` → `md:w-104`, error `w-58.5` → `w-42`, share (both call sites) `w-58.5` → `w-42` | Each value is the width at which the new wordmark renders at exactly the height the upstream one did, so no surrounding layout shifts. | Keep our widths; take upstream's surrounding changes. Recompute rather than restore if upstream changes the size. |
-| `packages/app/src/components/titlebar.tsx` | The titlebar Home button (and its `home.toggle` command, `mod+b`) opens a new session instead of toggling between `/` and the last active tab: `tabs.toggleHome(...)` becomes a `goHome` that selects an already-open draft if there is one and otherwise falls through to the existing `openNewTab()` project-resolution chain. Its pressed / `aria-pressed` state keys on `layout.route().type === "draft"` rather than `"home"`. The icon, label (`home.title`) and keybind are unchanged, as is `tabs.toggleHome` itself, which is simply no longer called. | The home screen is a new session in this fork, so Home has to go there; toggling into the recent-sessions list contradicted that. Reuse-before-create keeps repeated presses from stacking up draft tabs — unlike the New session button, which is expected to always make a new one. | Keep our `goHome`. If upstream reworks the titlebar, re-apply it rather than restoring `toggleHome`. If upstream deletes `tabs.toggleHome`, nothing here breaks. |
+| `packages/app/src/components/titlebar.tsx` | Two changes, both to the **v2 titlebar branch only** (`useV2Titlebar()`); the legacy branch below it is untouched. (1) The Home button (and its `home.toggle` command, `mod+b`) opens a new session instead of toggling between `/` and the last active tab: `tabs.toggleHome(...)` becomes a `goHome` that selects an already-open draft if there is one and otherwise falls through to the existing `openNewTab()` project-resolution chain. Its pressed / `aria-pressed` state keys on `layout.route().type === "draft"` rather than `"home"`. The icon, label (`home.title`) and keybind are unchanged, as is `tabs.toggleHome` itself, which is simply no longer called. (2) `<ChannelIndicator>` is dropped from that row and the component gains an `export`, so the sidebar can render the DEV/BETA badge at its bottom instead; `Titlebar` keeps its `debugTools` prop because the legacy branch still renders the badge inline. | The home screen is a new session in this fork, so Home has to go there; toggling into the recent-sessions list contradicted that. Reuse-before-create keeps repeated presses from stacking up draft tabs — unlike the New session button, which is expected to always make a new one. Moving the badge lets Home lead the titlebar (measured: x 137 → 92 on macOS, the traffic-light inset). | Keep our `goHome` and the removed indicator. If upstream reworks the titlebar, re-apply both rather than restoring `toggleHome` or the inline badge. If upstream deletes `tabs.toggleHome`, nothing here breaks. Do not remove `Titlebar`'s `debugTools` prop — the legacy titlebar still needs it. |
 | `packages/app/src/pages/layout-new.tsx` (again) | Mounts the fork-only `<LaunchNewSession />`, which on desktop redirects one time per boot to a new-session draft (reusing an existing empty draft rather than stacking one up per launch). It pins its decision to the pathname the window came up on and disarms as soon as anything navigates, so it can never hijack a later visit to `/` — the sidebar's "View all" links there. Desktop-only: in the browser there is no "launch" distinct from "navigate to /", so redirecting would make the recents screen unreachable by URL and would break two `packages/app/e2e` specs that `goto("/")`. | Launching should put you in front of a prompt, the way Claude Desktop does, rather than on a list. This supersedes the desktop's restore-last-screen behaviour (`getLastActiveUrl`, `packages/desktop/src/renderer/index.tsx`); the previous session stays one click away in Recents and its tab is still restored. | Keep the mount. If upstream restructures this layout, re-add it. Do not "simplify" the boot-window guard into a plain `location.pathname === "/"` check — that is the bug it exists to prevent. |
 | `packages/app/src/pages/layout-new.tsx`, `packages/app/src/pages/home.tsx`, `packages/app/src/i18n/{en,es}.ts` | **Persistent app sidebar.** Upstream's project column is an `<aside>` owned by `NewHome`, so it exists only on `/`. It becomes app chrome: `layout-new.tsx` wraps its `<main>` in a row flex and renders the fork-only `<AppSidebar class="hidden lg:flex">` beside it, so the sidebar survives every navigation. **The row components stay in `home.tsx`** — `HomeUtilityNav`, `HomeServerRow`, `HomeProjectList`, `HomeProjectEmpty`, `HomeRecentlyClosedRow` and the classes `HOME_PROJECT_NAV_ROW` / `HOME_PROJECT_NAV_LABEL` / `HOME_SECTION_LABEL` gain an `export` and nothing else, so upstream edits to them still apply cleanly; the fork-only `src/components/app-sidebar.tsx` imports and composes them, adding only the column shell and the Recents section. `home.tsx` otherwise loses just `HomeProjectColumn` (dead once the sidebar owns that composition) and the `NewHome` selection/action block, and its grid collapses from `lg:grid-cols-[280px_minmax(0,720px)]` to one `max-w-[760px]` column. The sub-`lg` `HomeUtilityNav` mount is untouched, so the stacked mobile layout is upstream's. The state both screens need (`focusedServer`, `projects`, `selectedProject`, `newSessionProject`, `projectDirectories`, the session-index query, `openNewSession`, `openProjectNewSession`, `openSession`, `selectProject`, `addProjects`, `editProject`, `closeProject`, `unseenCount`, `clearNotifications`, `chooseProject`, `isBackgroundOpen`, `buildHomeSessionRecords`, `HomeSessionRecord`) moves to fork-only `src/pages/home-model.tsx`, which both callers instantiate — safe because the selection lives in `useLayout().home`, the index is one TanStack query deduped by key, and the server-normalizing effect is idempotent. New i18n keys `sidebar.recents`, `sidebar.recents.new`, `sidebar.recents.viewAll` in `en` + `es`. Every `data-component`/`data-action` hook is untouched (`home-project-row`, `home-add-project`, `home-session-row`, `home-session-search`, …) because `packages/app/e2e` selects on them. | The desktop app should navigate like Claude Desktop — one always-visible sidebar with Projects, Recents and pinned Settings/Help — instead of losing all navigation the moment a session opens. Exporting the row components in place rather than relocating them keeps `home.tsx` down to ~36 added lines: upstream changes to those components merge without a conflict, which relocating them would have forfeited. | Keep our structure. On conflict take upstream's `home.tsx` wholesale and re-apply the four edits: the `export` keywords, the `HomeProjectColumn` deletion, the `createHomeModel()` swap in `NewHome`, and the single-column grid. If upstream edits an exported row component, just take it. Never let a `data-component`/`data-action` hook drift — the e2e suite has no other handle on these rows. |
 | `packages/desktop/icons/{dev,beta,prod}/` (all PNGs, `icon.icns`, `icon.ico`, `dock.png`), `packages/desktop/icons/README.md` | Regenerated from the fork-only `packages/desktop/icons/icon.svg` by the fork-only `packages/desktop/scripts/generate-icons.ts`: the brand-red `#ee0033` CoDev "C" — the `--mini` splash badge glyph, at the VS Code extension icon's proportions (unit = 120/1024, mark 480x600 centered) — on a white tile, replacing upstream's black/blueprint "o" mark. All three channels are byte-identical for now (chosen deliberately over upstream's per-channel treatments); the generator still writes them separately so a channel can diverge later. `icon.icns` members and `dock.png` use the macOS Big Sur grid (824/1024 inset + drop shadow); Windows, Linux and Store assets stay full-bleed. README rewritten from the Tauri-CLI + Image2Icon recipe to the generator. The stale Tauri-era `android/` and `ios/` subfolders are left untouched — nothing in the Electron build reads them. | Closes the "desktop app icons need design assets" rebrand gap: the Dock/taskbar icon was still upstream's mark. | Keep our assets and README (binary: take ours wholesale). Regenerate via the script rather than hand-editing; if upstream adds an icon size, add it to `FLAT_PNGS`/`ICONSET` and rerun. |
diff --git a/packages/app/src/components/app-sidebar.tsx b/packages/app/src/components/app-sidebar.tsx
index 114ae86efe..8d26851fba 100644
--- a/packages/app/src/components/app-sidebar.tsx
+++ b/packages/app/src/components/app-sidebar.tsx
@@ -12,6 +12,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useServerManagementController } from "@/components/dialog-select-server"
 import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
 import { useSettingsCommand } from "@/components/settings-dialog"
+import { ChannelIndicator } from "@/components/titlebar"
 import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
@@ -45,7 +46,9 @@ import { sessionTitle } from "@/utils/session-title"
 const HOME_NAV_ROW_PITCH = 32
 const HOME_NAV_ROW_GAP = 4
 
-export function AppSidebar(props: { class?: string }) {
+const CHANNEL = import.meta.env.VITE_CODEV_CHANNEL
+
+export function AppSidebar(props: { class?: string; debugTools?: { visible: boolean; toggle: () => void } }) {
   const language = useLanguage()
   const platform = usePlatform()
   const global = useGlobal()
@@ -184,6 +187,16 @@ export function AppSidebar(props: { class?: string }) {
         openHelp={() => platform.openLink(DOCS_URL)}
         language={language}
       />
+
+      {/* The DEV / BETA badge, moved out of the titlebar so Home can lead it.
+          The condition mirrors ChannelIndicator's own — kept here rather than
+          wrapping unconditionally so prod, where it renders nothing, does not
+          leave the column's gap-4 behind as dead space. */}
+      <Show when={CHANNEL === "dev" || CHANNEL === "beta"}>
+        <div class="flex shrink-0 pl-1.5">
+          <ChannelIndicator debugTools={props.debugTools} />
+        </div>
+      </Show>
     </aside>
   )
 }
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index d1a63bfcd2..6ba382af59 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -474,7 +474,9 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   "md:pl-4": !mac(),
                 }}
               >
-                <ChannelIndicator debugTools={props.debugTools} />
+                {/* Fork: the channel badge moved to the bottom of the sidebar
+                    (components/app-sidebar.tsx) so Home leads the titlebar. The
+                    legacy titlebar below still renders it inline. */}
                 <Show when={windows() || linux()}>
                   <WindowsAppMenu command={command} platform={platform} variant="v2" />
                 </Show>
@@ -759,7 +761,7 @@ function TitlebarUpdateIconButton(props: { state: TitlebarUpdatePillState }) {
   )
 }
 
-function ChannelIndicator(props: { debugTools?: { visible: boolean; toggle: () => void } }) {
+export function ChannelIndicator(props: { debugTools?: { visible: boolean; toggle: () => void } }) {
   const channel = import.meta.env.VITE_CODEV_CHANNEL
   if (channel === "dev" && props.debugTools) {
     return (
diff --git a/packages/app/src/pages/layout-new.tsx b/packages/app/src/pages/layout-new.tsx
index c373a07464..97a4955e3c 100644
--- a/packages/app/src/pages/layout-new.tsx
+++ b/packages/app/src/pages/layout-new.tsx
@@ -48,7 +48,14 @@ export default function NewLayout(props: ParentProps) {
           its stacked arrangement instead. */}
       <LaunchNewSession />
       <div class="flex-1 min-h-0 min-w-0 flex flex-row">
-        <AppSidebar class="hidden lg:flex" />
+        <AppSidebar
+          class="hidden lg:flex"
+          debugTools={
+            import.meta.env.DEV
+              ? { visible: state.debugTools, toggle: () => setState("debugTools", (value) => !value) }
+              : undefined
+          }
+        />
         <main class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-strict">
           <Suspense>{props.children}</Suspense>
         </main>