From d132b04de00499664699ad0ae30c4ee115792252 Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Tue, 11 Aug 2026 10:36:13 +0700
Subject: [PATCH 1/2] feat(app): make the session menu's Delete item red and
 drop its ellipsis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both surfaces the item renders on — the sidebar/home session rows and the
menu beside a session title — go through SessionActionsMenu, so this is
one edit.

The colour rides on the item's own `--menu-v2-fg` hook rather than a text
utility, because menu-v2.css colours the label span directly and a class
on the item would not reach it. Only the v2 branch is touched: the legacy
DropdownMenu fallback is unreachable now that
settings.general.newLayoutDesigns() is hardcoded true.

Adds an e2e guard, since the colour depends on a shared component's
internal variable. It resolves the danger token at runtime instead of
pinning a hex, and checks that a sibling item is not also red.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  5 ++
 DIVERGENCES.md                                |  2 +-
 .../session-menu-delete-item.spec.ts          | 81 +++++++++++++++++++
 packages/app/src/components/app-sidebar.tsx   |  1 +
 .../src/components/session-actions-menu.tsx   | 12 ++-
 5 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 packages/app/e2e/regression/session-menu-delete-item.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 311ca9d8cd..8ba6e74541 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,11 @@ file is the human-readable summary of what changed and why.
 
 ### Desktop / Web UI
 
+- **Delete reads as destructive** — the **Delete** item in a session's ⋮ / ⋯
+  menu is now red, in both the sidebar rows and the menu beside a session
+  title, and it has lost its trailing ellipsis. It still asks for confirmation
+  before deleting. **Share…** keeps its ellipsis.
+
 - **Recents folds away** — the **Recents** header in the sidebar is now a
   toggle. Clicking it collapses the section to just its title, hiding the
   **New session** row, the session list and **View all**. The title stays where
diff --git a/DIVERGENCES.md b/DIVERGENCES.md
index 0b1321ce5b..4019e0c3bd 100644
--- a/DIVERGENCES.md
+++ b/DIVERGENCES.md
@@ -122,7 +122,7 @@ from the squash message first, or use a plain merge.
 | `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_SECTION_LABEL` is consumed one level down, by the fork-only `src/components/sidebar-section.tsx`). `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`. `layout-new.tsx` additionally wraps its shell in the fork-only `<AppSidebarProvider>` (so the titlebar toggle and the sidebar share one collapse state), `AppSidebar` renders nothing while collapsed, and `NewHome` consumes a `?focus=search` param — clearing it after use, the way `pages/new-session.tsx` handles `?prompt` — to focus the search field for the titlebar's Search button. That focus ref changed from a `let` to a signal because `HomeSessionSearch` binds it from `onMount`, which runs after `NewHome`'s effects, so a plain ref is still undefined when the param arrives. `AppSidebarProvider` also registers the `sidebar.toggle` command (no keybind — `mod+b` is Home's here, unlike in the legacy layout), which is what the app menu's View → Toggle Sidebar dispatches; only `LegacyLayout` registered it before, so that item did nothing on this layout. It lives on the provider, not on `AppSidebar`, so collapsing does not unregister the command that undoes it. Both shells can be mounted at once on `/:dir` routes, so the id may be registered twice there; the command registry keeps the first entry, which is the outer (new-layout) one. 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/app/src/context/settings.tsx`, `packages/app/src/components/settings-general.tsx`, `packages/app/src/components/settings-v2/general.tsx`, `packages/app/src/context/settings.test.ts`, `packages/app/src/pages/session/composer/session-revert-dock.stories.tsx`, deleted `packages/app/src/components/settings-v2/interface-transition.tsx` + `interface-transition.stories.tsx`, deleted `packages/app/e2e/regression/legacy-new-session.spec.ts`, `packages/app/e2e/regression/session-timeline-projection.spec.ts`, `packages/app/e2e/performance/timeline-stability/fixture.ts` | **The legacy layout is retired: the fork ships one layout and no way back.** Upstream runs a timed migration — `oldInterfaceSunset` (a hardcoded date), a per-profile `layoutTransitionEligible` flag, a `newLayoutDesigns` preference and a Settings → General **New layout** switch — so existing users can flip between layouts until the sunset passes. All of it goes. `newLayoutDesigns` becomes `createMemo(() => true)`: reading a constant rather than the persisted value is what makes a profile carrying `newLayoutDesigns: false` (older build, another device via sync, hand-edited store) still come up on the new layout, which suppressing the toggle alone would not. `setNewLayoutDesigns`, `layoutTransitionAvailable`, `newInterfaceNoticeVisible` and `dismissNewInterfaceNotice` are **removed from the context rather than stubbed** — a no-op setter would let a caller look like it was switching layouts, so re-introducing the toggle has to be a compile error. Both Settings screens (v1 `settings-general.tsx` and v2 `settings-v2/general.tsx`) lose their `InterfaceSection` + `InterfaceNoticeSection` and the `<Show>` blocks that mounted them; `interface-transition.tsx` and its story are deleted with their last caller. The sunset machinery in `settings.tsx` goes with it — `oldInterfaceSunset`, `legacyNewLayoutDesignsDefault`, `newLayoutDesignsDefault`, `newLayoutDesignsUpgradeCutoff`, `shouldEnableNewLayout`, `layoutTransitionState`, `maximumSunsetTimeout`, `nextSunsetCheckDelay`, `resolveNewLayoutDesigns`, the retirement `setTimeout` and the two `createEffect`s that wrote `newLayoutDesigns` back to the store — along with their tests; `settings.test.ts` keeps only the `isAppUpgrade` / `shouldDisplayTabsToast` block. **Deliberately kept**: `layoutTransitionEligible`, `layoutTransitionClassified` and `setOldLayoutEligible` (with the desktop `isOldLayoutEligible` IPC that feeds them), because the tabs toast still uses eligibility to tell a fresh profile from an existing install — they no longer gate any layout. Also kept: every `newLayoutDesigns()` **read** in `app.tsx` and the `LegacyServerLayout` / `LegacyHome` code behind them. That shell is still mounted on `/:dir` routes, and leaving the branches in place keeps upstream's edits to them applying cleanly; deleting the legacy layout outright is a far larger diff for no user-visible gain. On the test side `legacy-new-session.spec.ts` is deleted (it asserted a redirect to a route that no longer resolves), `session-timeline-projection.spec.ts` drops its one `settings: { newLayoutDesigns: false }` pin, and the timeline-stability fixture drops the `newLayoutDesigns === false` branch that back-dated `app-version.v1`. The many specs that set `newLayoutDesigns: true` are untouched — the value is simply ignored now. The fork-only `packages/app/e2e/regression/layout-theme-lock.spec.ts` covers both locks from a seeded profile; each of its four cases was checked to fail when the matching source file is reverted to upstream's. | The fork ships one layout. Leaving a switch that drops users into a layout the fork does not design for, style-test or screenshot means two UIs to maintain and support, and the upstream sunset date would have retired it anyway. | Keep ours. On conflict take upstream's file and re-apply: the constant `newLayoutDesigns`, the four removed context members, the two deleted Settings sections. If upstream adds a new layout-preference surface, remove it too rather than wiring it up. Do **not** "restore" `setNewLayoutDesigns` to make a new upstream caller compile — delete the caller. Do not delete the `LegacyServerLayout` branches in `app.tsx`; they are load-bearing on `/:dir` and deliberately left as upstream's. |
 | `packages/ui/src/theme/context.tsx`, `packages/app/public/oc-theme-preload.js`, `packages/app/src/theme-preload.test.ts`, `packages/app/src/pages/layout.tsx`, `packages/app/src/components/settings-general.tsx`, `packages/app/src/components/settings-v2/general.tsx` | **One theme in the web/desktop UI; light and dark are the only axis.** Upstream ships 36 selectable palettes with a Settings → Appearance **Theme** picker and command-palette entries. The fork exposes none of them: OC-2 is the theme, `colorScheme` (system/light/dark) is the only appearance choice. The lock lives at `normalize()` in `theme/context.tsx`, renamed to the exported `normalizeThemeID()` and returning the exported `SHIPPED_THEME_ID` unconditionally — that one function is already on every path (provider init, the `onMount` migration, `load`, the cross-tab `storage` listener, `setTheme`, `previewTheme`), so a stored id from before the picker was removed, or one written by another tab, resolves to OC-2 without a second guard. It is exported (and the six call sites renamed) so `theme/context.test.ts` can cover the invariant directly instead of only through its call sites — the module imports cleanly under `bun test` because `import.meta.glob` is called lazily inside `getFiles()`. It also gives the migration for free: `onMount` already rewrites `opencode-theme-id` and calls `clear()` when the raw value differs from the normalized one, which now drops the stale `opencode-theme-css-{light,dark}` cache. `ids()` returns `["oc-2"]` and `loadThemes()` loads only OC-2 instead of all 36 (it was `Promise.all(themeIDs().map(load))`). The bundled theme JSON, the `names` map and `registerTheme` are **left alone** — unreferenced data costs nothing and keeps upstream's theme edits applying cleanly. `oc-theme-preload.js` does the same rewrite *before* mount, so the first launch after upgrading does not paint the user's old palette for a frame; with no other theme reachable its cached-CSS `<style>` injection is gone and it only sets the mode attributes. Removed surfaces: the **Theme** `SettingsRow`/`SettingsRowV2` in both Settings screens (with the `…/themes` docs "Learn more" link, `themeOptions`, the `ThemeOption` type and the `onMount(loadThemes)` that fed them), and in `pages/layout.tsx` the `theme.cycle` command with its `mod+shift+t` keybind, the `cycleTheme` helper and the `theme.set.<id>` command loop (with `availableThemeEntries`). The **colour-scheme** commands stay: `theme.scheme.cycle` (`mod+shift+s`), the three `theme.scheme.<scheme>` entries and their preview/commit wiring. i18n keys (`settings.general.row.theme.*`, `command.theme.cycle`, `command.theme.set`, `toast.theme.title`) are left in the dicts — unused keys are harmless and removing them only creates conflicts. | Every fork surface — the brand, the icons, the screenshots, the docs — is drawn against OC-2. A palette picker means 36 combinations nobody verifies, and a user on Synthwave '84 files bug reports about a UI the fork never shipped. Light/dark still covers the real need. | Keep ours. Take upstream's surrounding changes; re-apply the `normalize()` constant, the `ids()`/`loadThemes()` narrowing, the preload rewrite, and the removed rows/commands. If upstream adds a new theme-selection surface, remove it rather than wiring it up. Do not "fix" `normalize()` back to the `oc-1 → oc-2` mapping — that mapping is a subset of what it does now. Leave the bundled theme files and `names` map in place; deleting them is a much bigger conflict surface for no gain. |
-| `packages/app/src/pages/session/timeline/message-timeline.tsx` | **Session actions menu extracted.** The ⋯ menu beside the session title — both renderings, the legacy `DropdownMenu` and the v2 `MenuV2`, ~145 lines — and the `DialogDeleteSession` closure move verbatim to the fork-only `packages/app/src/components/session-actions-menu.tsx`, and this file renders `<SessionActionsMenu>` instead, passing its existing `openTitleEditor` / share / `archiveSession` / `deleteSession` as callbacks and its trigger element out through `triggerRef` (the share popover still anchors to it). The extracted dialog takes a resolved `title` and an `onConfirm` rather than a `sessionID`, so the caller supplies `sessionTitle(sync().session.get(id)?.title)`. The `title` store loses `pendingRename`/`pendingShare`: deferring Rename and Share until the menu's `onCloseAutoFocus` is now the component's job, since every caller needs it (a list row's inline editor is blurred by the returning focus exactly as the header's was). Also gains one fork-only `createEffect` that consumes `consumeSessionShareRequest(sessionID())` and opens the share popover — the session rows' Share routes through it. | The sidebar's Recents rows and the home session list open the same menu; three copies of four items would drift. Only this file rendered the menu, so extraction is the smallest way to share it. | Keep the extraction. On conflict, take upstream's `message-timeline.tsx` wholesale and re-apply: delete both inline menu blocks and the local `DialogDeleteSession`, mount `<SessionActionsMenu>` with the same callbacks, drop the two `pending*` store fields, and re-add the share-request effect. If upstream adds a menu item, add it to `session-actions-menu.tsx` (both variants) rather than back here. Do not "simplify" the component's deferred rename/share into a plain `onSelect` — focus return is what it exists to survive. |
+| `packages/app/src/pages/session/timeline/message-timeline.tsx` | **Session actions menu extracted.** The ⋯ menu beside the session title — both renderings, the legacy `DropdownMenu` and the v2 `MenuV2`, ~145 lines — and the `DialogDeleteSession` closure move to the fork-only `packages/app/src/components/session-actions-menu.tsx` (verbatim at extraction; the v2 Delete item has since dropped its ellipsis and taken the danger colour, so do not diff the two expecting a match), and this file renders `<SessionActionsMenu>` instead, passing its existing `openTitleEditor` / share / `archiveSession` / `deleteSession` as callbacks and its trigger element out through `triggerRef` (the share popover still anchors to it). The extracted dialog takes a resolved `title` and an `onConfirm` rather than a `sessionID`, so the caller supplies `sessionTitle(sync().session.get(id)?.title)`. The `title` store loses `pendingRename`/`pendingShare`: deferring Rename and Share until the menu's `onCloseAutoFocus` is now the component's job, since every caller needs it (a list row's inline editor is blurred by the returning focus exactly as the header's was). Also gains one fork-only `createEffect` that consumes `consumeSessionShareRequest(sessionID())` and opens the share popover — the session rows' Share routes through it. | The sidebar's Recents rows and the home session list open the same menu; three copies of four items would drift. Only this file rendered the menu, so extraction is the smallest way to share it. | Keep the extraction. On conflict, take upstream's `message-timeline.tsx` wholesale and re-apply: delete both inline menu blocks and the local `DialogDeleteSession`, mount `<SessionActionsMenu>` with the same callbacks, drop the two `pending*` store fields, and re-add the share-request effect. If upstream adds a menu item, add it to `session-actions-menu.tsx` (both variants) rather than back here. Do not "simplify" the component's deferred rename/share into a plain `onSelect` — focus return is what it exists to survive. |
 | `packages/app/src/pages/home.tsx` | `HomeSessionRow` gains the same `<SessionActionsMenu>` (hover/focus/menu-open revealed, vertical dots) and inline rename: while renaming, the row renders a `div` with `InlineEditor` instead of the `button`, because an input inside a button is invalid markup and swallows keystrokes into the open-session handler. `NewHome` holds one `createInlineEditorController()` for the list and passes it plus the model down. Its local `archiveSession` is deleted — `createHomeModel()` owns `archiveSession`/`renameSession`/`deleteSession` now, so the sidebar and this screen run one implementation (extends the "state both screens need moves to home-model.tsx" split in the persistent-sidebar row above); the call site becomes `model.archiveSession`. Upstream's `SHOW_HOME_SESSION_ARCHIVE` block is left exactly as-is — the flag is `false`, so it renders nothing, and touching it would widen the diff for no gain. `data-component="home-session-row"` and every other selector are untouched (`packages/app/e2e` binds to them); the menu adds `data-action="session-menu"`. | The Recents rows and "View all" are the same list at two sizes; a menu on one and not the other makes "View all" a dead end. | Keep our row structure. On conflict take upstream's row and re-apply the menu, the editing branch, and the `model.*` action wiring. Never let a `data-component`/`data-action` hook drift. If upstream re-enables `SHOW_HOME_SESSION_ARCHIVE`, drop that block instead — its absolutely-positioned archive button would sit on top of the menu. |
 | `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`). |
diff --git a/packages/app/e2e/regression/session-menu-delete-item.spec.ts b/packages/app/e2e/regression/session-menu-delete-item.spec.ts
new file mode 100644
index 0000000000..463d446239
--- /dev/null
+++ b/packages/app/e2e/regression/session-menu-delete-item.spec.ts
@@ -0,0 +1,81 @@
+import { expect, test, type Page } from "@playwright/test"
+import { fixture, pageMessages } from "../smoke/session-timeline.fixture"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible } from "../utils/waits"
+
+const content = (page: Page) => page.locator('[data-component="menu-v2-content"]')
+const items = (page: Page) => content(page).locator('[data-component="menu-v2-item"]')
+const label = (page: Page, name: string) =>
+  items(page).filter({ hasText: name }).locator('[data-slot="menu-v2-item-content"]')
+
+async function openSessionMenu(page: Page) {
+  await mockOpenCodeServer(page, {
+    sessions: fixture.sessions,
+    provider: fixture.provider,
+    directory: fixture.directory,
+    project: fixture.project,
+    pageMessages,
+  })
+  await page.addInitScript((directory) => {
+    localStorage.setItem(
+      "opencode.global.dat:server",
+      JSON.stringify({
+        projects: { local: [{ worktree: directory, expanded: true }] },
+        lastProject: { local: directory },
+      }),
+    )
+  }, fixture.directory)
+  await page.goto("/")
+
+  const sidebar = page.locator('[data-component="app-sidebar"]')
+  const row = sidebar.locator('[data-component="sidebar-session-row"]').first()
+  await expectAppVisible(row)
+  // Wait for the hover-reveal wrapper to finish fading before clicking — the
+  // button itself is "visible" to Playwright at opacity 0, so it is no signal.
+  await row.hover()
+  await expect(sidebar.locator('[data-slot="session-row-actions"]').first()).toHaveCSS("opacity", "1")
+
+  // Retried, because the row trigger swallows its first click and opens on the
+  // second. That reproduces on a clean main with the wrapper fully faded in and
+  // the app settled, so it is a pre-existing defect in the trigger and not
+  // something this spec should assert into place — retry past it here and fix it
+  // on its own.
+  const trigger = sidebar.locator('[data-action="session-menu"]').first()
+  await expect(async () => {
+    await trigger.click()
+    await expect(content(page)).toHaveCount(1, { timeout: 1000 })
+  }).toPass({ timeout: 15_000 })
+}
+
+// Reads the colour the danger token resolves to right now, rather than pinning a
+// hex, so a theme change moves the expectation with it.
+async function dangerColor(page: Page) {
+  return page.evaluate(() => {
+    const probe = document.createElement("span")
+    probe.style.color = "var(--v2-state-fg-danger)"
+    document.body.append(probe)
+    const value = getComputedStyle(probe).color
+    probe.remove()
+    return value
+  })
+}
+
+test("Delete reads as destructive and carries no ellipsis", async ({ page }) => {
+  await openSessionMenu(page)
+
+  // Ellipsis dropped deliberately — Share keeps its own, so this is not a blanket
+  // strip of the convention.
+  await expect(label(page, "Delete")).toHaveText("Delete")
+  await expect(label(page, "Share")).toHaveText("Share...")
+
+  // Red comes from `--menu-v2-fg`, the item's own colour hook in menu-v2.css. A
+  // text utility on the item would not reach the label span, which sets its own
+  // colour — so this asserts the label, not the row.
+  const danger = await dangerColor(page)
+  await expect(label(page, "Delete")).toHaveCSS("color", danger)
+  await expect(label(page, "Archive")).not.toHaveCSS("color", danger)
+
+  // Highlighting only swaps the background, so the colour has to survive hover.
+  await items(page).filter({ hasText: "Delete" }).hover()
+  await expect(label(page, "Delete")).toHaveCSS("color", danger)
+})
diff --git a/packages/app/src/components/app-sidebar.tsx b/packages/app/src/components/app-sidebar.tsx
index ad994a1ea2..baac220557 100644
--- a/packages/app/src/components/app-sidebar.tsx
+++ b/packages/app/src/components/app-sidebar.tsx
@@ -369,6 +369,7 @@ function SidebarSessionRow(props: {
       </Show>
 
       <div
+        data-slot="session-row-actions"
         class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center transition-opacity"
         classList={{
           "opacity-100": menuOpen(),
diff --git a/packages/app/src/components/session-actions-menu.tsx b/packages/app/src/components/session-actions-menu.tsx
index 66937e89e3..3198ecaa26 100644
--- a/packages/app/src/components/session-actions-menu.tsx
+++ b/packages/app/src/components/session-actions-menu.tsx
@@ -74,8 +74,7 @@ export function SessionActionsMenu(props: SessionActionsMenuProps) {
   // trick components/app-sidebar.tsx uses to point a chevron right. Applied to
   // the svg through the button class because IconButton builds its own Icon and
   // forwards no style; both sprites tag it data-slot="icon-svg".
-  const triggerClass = () =>
-    `${props.vertical ? "[&_[data-slot=icon-svg]]:rotate-90" : ""} ${props.class ?? ""}`.trim()
+  const triggerClass = () => `${props.vertical ? "[&_[data-slot=icon-svg]]:rotate-90" : ""} ${props.class ?? ""}`.trim()
 
   return (
     <Show
@@ -136,7 +135,14 @@ export function SessionActionsMenu(props: SessionActionsMenuProps) {
             </Show>
             <MenuV2.Item onSelect={() => props.onArchive()}>{language.t("common.archive")}</MenuV2.Item>
             <MenuV2.Separator />
-            <MenuV2.Item onSelect={() => props.onDelete()}>{language.t("common.delete")}...</MenuV2.Item>
+            {/* Danger colour comes from the item's own `--menu-v2-fg` hook rather
+                than a text utility: menu-v2.css colours the label span directly,
+                so a class on the item would not reach it. Setting the variable
+                recolours both, and the highlighted state only swaps the
+                background, so it survives hover. */}
+            <MenuV2.Item onSelect={() => props.onDelete()} style={{ "--menu-v2-fg": "var(--v2-state-fg-danger)" }}>
+              {language.t("common.delete")}
+            </MenuV2.Item>
           </MenuV2.Content>
         </MenuV2.Portal>
       </MenuV2>

From 7bd7b5fb7e6036caf36bdedc37801604cb52dc4e Mon Sep 17 00:00:00 2001
From: minhn4 <nguyenm.cuny@gmail.com>
Date: Tue, 11 Aug 2026 10:53:25 +0700
Subject: [PATCH 2/2] test(app): cover the sidebar section and the session
 menu's Delete item
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Unit: the Recents row budget moves to app-sidebar-rows.ts as
`recentsRowCapacity` and gets a table of heights. It was the one real
logic seam in this work — off-by-one arithmetic over the row pitch and
gap that decides whether "View all" stays reachable — and it was
untested. Extraction is behaviour-identical.

E2E: the Delete item is now asserted on both surfaces the user sees it
on, the sidebar row menu and the in-session header menu, sharing one set
of assertions. The header trigger opens on the first click, so only the
sidebar helper retries past the known first-click defect.

E2E: the section header is checked for keyboard operability, and a
height sweep pins that "View all" is never clipped out of the list.

That sweep stops at a 400px window. Below it the flexible area drops
under one row and View all is drawn with nowhere to go — pre-existing,
unrelated to the collapse work, and left for its own fix.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../session-menu-delete-item.spec.ts          | 60 +++++++++++++------
 .../sidebar-section-collapse.spec.ts          | 55 +++++++++++++++++
 .../src/components/app-sidebar-rows.test.ts   | 35 +++++++++++
 .../app/src/components/app-sidebar-rows.ts    | 13 ++++
 packages/app/src/components/app-sidebar.tsx   | 18 +++---
 5 files changed, 151 insertions(+), 30 deletions(-)
 create mode 100644 packages/app/src/components/app-sidebar-rows.test.ts
 create mode 100644 packages/app/src/components/app-sidebar-rows.ts

diff --git a/packages/app/e2e/regression/session-menu-delete-item.spec.ts b/packages/app/e2e/regression/session-menu-delete-item.spec.ts
index 463d446239..d31bb337bc 100644
--- a/packages/app/e2e/regression/session-menu-delete-item.spec.ts
+++ b/packages/app/e2e/regression/session-menu-delete-item.spec.ts
@@ -1,4 +1,5 @@
 import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
 import { fixture, pageMessages } from "../smoke/session-timeline.fixture"
 import { mockOpenCodeServer } from "../utils/mock-server"
 import { expectAppVisible } from "../utils/waits"
@@ -8,7 +9,7 @@ const items = (page: Page) => content(page).locator('[data-component="menu-v2-it
 const label = (page: Page, name: string) =>
   items(page).filter({ hasText: name }).locator('[data-slot="menu-v2-item-content"]')
 
-async function openSessionMenu(page: Page) {
+async function boot(page: Page) {
   await mockOpenCodeServer(page, {
     sessions: fixture.sessions,
     provider: fixture.provider,
@@ -25,22 +26,15 @@ async function openSessionMenu(page: Page) {
       }),
     )
   }, fixture.directory)
-  await page.goto("/")
-
-  const sidebar = page.locator('[data-component="app-sidebar"]')
-  const row = sidebar.locator('[data-component="sidebar-session-row"]').first()
-  await expectAppVisible(row)
-  // Wait for the hover-reveal wrapper to finish fading before clicking — the
-  // button itself is "visible" to Playwright at opacity 0, so it is no signal.
-  await row.hover()
-  await expect(sidebar.locator('[data-slot="session-row-actions"]').first()).toHaveCSS("opacity", "1")
+}
 
-  // Retried, because the row trigger swallows its first click and opens on the
-  // second. That reproduces on a clean main with the wrapper fully faded in and
-  // the app settled, so it is a pre-existing defect in the trigger and not
-  // something this spec should assert into place — retry past it here and fix it
-  // on its own.
-  const trigger = sidebar.locator('[data-action="session-menu"]').first()
+// Retried, because the sidebar row trigger swallows its first click and opens on
+// the second. That reproduces on a clean main with the hover wrapper fully faded
+// in and the app settled, so it is a pre-existing defect in the trigger and not
+// something these specs should assert into place — retry past it here and fix it
+// on its own. The in-session header trigger has no such wrapper and opens first
+// time, which is why only this helper retries.
+async function clickUntilOpen(page: Page, trigger: ReturnType<Page["locator"]>) {
   await expect(async () => {
     await trigger.click()
     await expect(content(page)).toHaveCount(1, { timeout: 1000 })
@@ -60,9 +54,7 @@ async function dangerColor(page: Page) {
   })
 }
 
-test("Delete reads as destructive and carries no ellipsis", async ({ page }) => {
-  await openSessionMenu(page)
-
+async function expectDeleteReadsAsDestructive(page: Page) {
   // Ellipsis dropped deliberately — Share keeps its own, so this is not a blanket
   // strip of the convention.
   await expect(label(page, "Delete")).toHaveText("Delete")
@@ -78,4 +70,34 @@ test("Delete reads as destructive and carries no ellipsis", async ({ page }) =>
   // Highlighting only swaps the background, so the colour has to survive hover.
   await items(page).filter({ hasText: "Delete" }).hover()
   await expect(label(page, "Delete")).toHaveCSS("color", danger)
+}
+
+test("Delete reads as destructive in the sidebar row menu", async ({ page }) => {
+  await boot(page)
+  await page.goto("/")
+
+  const sidebar = page.locator('[data-component="app-sidebar"]')
+  const row = sidebar.locator('[data-component="sidebar-session-row"]').first()
+  await expectAppVisible(row)
+  // Wait for the hover-reveal wrapper to finish fading before clicking — the
+  // button itself is "visible" to Playwright at opacity 0, so it is no signal.
+  await row.hover()
+  await expect(sidebar.locator('[data-slot="session-row-actions"]').first()).toHaveCSS("opacity", "1")
+
+  await clickUntilOpen(page, sidebar.locator('[data-action="session-menu"]').first())
+  await expectDeleteReadsAsDestructive(page)
+})
+
+test("Delete reads as destructive in the in-session header menu", async ({ page }) => {
+  await boot(page)
+  await page.goto(`/${base64Encode(fixture.directory)}/session/${fixture.targetID}`)
+
+  // The header menu carries no data-action hook, only its aria-label, and it is
+  // scoped to main so the sidebar row triggers cannot match.
+  const trigger = page.locator("main").getByRole("button", { name: "More options" }).first()
+  await expectAppVisible(trigger)
+  await trigger.click()
+  await expectAppVisible(content(page))
+
+  await expectDeleteReadsAsDestructive(page)
 })
diff --git a/packages/app/e2e/regression/sidebar-section-collapse.spec.ts b/packages/app/e2e/regression/sidebar-section-collapse.spec.ts
index b7b05085b0..aaaf01600b 100644
--- a/packages/app/e2e/regression/sidebar-section-collapse.spec.ts
+++ b/packages/app/e2e/regression/sidebar-section-collapse.spec.ts
@@ -7,6 +7,7 @@ const sidebar = (page: Page) => page.locator('[data-component="app-sidebar"]')
 const recents = (page: Page) => sidebar(page).locator('[data-section="recents"]')
 const toggle = (page: Page) => recents(page).locator('[data-action="sidebar-section-toggle"]')
 const viewAll = (page: Page) => recents(page).locator('[data-action="sidebar-view-all"]')
+const sessionRows = (page: Page) => recents(page).locator('[data-component="sidebar-session-row"]')
 const settings = (page: Page) => sidebar(page).getByRole("button", { name: "Settings" })
 
 async function boot(page: Page) {
@@ -69,3 +70,57 @@ test("collapsing Recents moves neither its own header nor the bottom nav", async
   expect(Math.abs(after.recents!.y - before.recents!.y)).toBeLessThan(2)
   expect(Math.abs(after.settings!.y - before.settings!.y)).toBeLessThan(2)
 })
+
+test("the header toggles from the keyboard", async ({ page }) => {
+  await boot(page)
+
+  // The header is a real button carrying the label, so it has to be reachable
+  // and operable without a pointer — that is what lets `aria-expanded` alone
+  // name the control instead of a translated aria-label.
+  await toggle(page).focus()
+  await expect(toggle(page)).toBeFocused()
+
+  await page.keyboard.press("Enter")
+  await expect(toggle(page)).toHaveAttribute("aria-expanded", "false")
+  await expect(viewAll(page)).toHaveCount(0)
+
+  await page.keyboard.press("Space")
+  await expect(toggle(page)).toHaveAttribute("aria-expanded", "true")
+  await expectAppVisible(viewAll(page))
+})
+
+test("View all is never pushed out of the list as the window shortens", async ({ page }) => {
+  await boot(page)
+  await expectAppVisible(viewAll(page))
+  expect(await sessionRows(page).count()).toBe(fixture.sessions.length)
+
+  // Recents draws only as many rows as fit and reserves the last slot for View
+  // all (see recentsRowCapacity). The list clips with overflow-hidden, so
+  // over-filling it does not push anything into the viewport's way — it just
+  // silently cuts View all off. Compare against the list box rather than the
+  // viewport, and sweep heights so the assertion does not depend on landing in
+  // a lucky band.
+  // Stops at 400. Below that the flexible area itself drops under one row
+  // (12px at a 380px window, 0 at 360) and View all is drawn anyway, so it is
+  // clipped — capacity clamps the session rows to zero but nothing withholds
+  // View all when there is no room for it either. That is pre-existing, not
+  // something the collapse work introduced, and it wants its own fix; this
+  // sweep guards the range where the reservation is supposed to hold.
+  for (const height of [900, 700, 560, 480, 420, 400]) {
+    await page.setViewportSize({ width: 1280, height })
+    // The row count is driven by a ResizeObserver, so the list is briefly still
+    // filled for the old box after a resize. Poll rather than measure the frame
+    // straight after: a genuine clip never resolves, so this waits out the
+    // reflow without waiting away the failure.
+    await expect(async () => {
+      const list = await recents(page).locator('[data-slot="sidebar-recents-list"]').boundingBox()
+      const all = await viewAll(page).boundingBox()
+      if (!all) return // too short to draw the section at all
+      expect(list).not.toBeNull()
+      expect(
+        { height, bottomOverflow: Math.max(0, Math.round(all.y + all.height - (list!.y + list!.height))) },
+        `View all is clipped at viewport height ${height}`,
+      ).toEqual({ height, bottomOverflow: 0 })
+    }).toPass({ timeout: 5000 })
+  }
+})
diff --git a/packages/app/src/components/app-sidebar-rows.test.ts b/packages/app/src/components/app-sidebar-rows.test.ts
new file mode 100644
index 0000000000..04c07da1ae
--- /dev/null
+++ b/packages/app/src/components/app-sidebar-rows.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from "bun:test"
+import { HOME_NAV_ROW_GAP, HOME_NAV_ROW_PITCH, recentsRowCapacity } from "./app-sidebar-rows"
+
+// n rows laid out at this pitch occupy 32n - 4: the last row carries no
+// trailing gap. Deriving the fixtures rather than hardcoding pixel counts keeps
+// the test honest if the row height or the gap ever moves.
+const exactly = (rows: number) => rows * HOME_NAV_ROW_PITCH - HOME_NAV_ROW_GAP
+
+describe("recentsRowCapacity", () => {
+  test("reserves the last fitting row for View all", () => {
+    expect(recentsRowCapacity(exactly(1))).toBe(0)
+    expect(recentsRowCapacity(exactly(2))).toBe(1)
+    expect(recentsRowCapacity(exactly(5))).toBe(4)
+  })
+
+  test("never reports a row it cannot draw whole", () => {
+    // One pixel short of fitting a third row is still a two-row box, so the
+    // budget stays at one session plus View all.
+    expect(recentsRowCapacity(exactly(3) - 1)).toBe(1)
+    expect(recentsRowCapacity(exactly(3))).toBe(2)
+  })
+
+  test("clamps instead of going negative when nothing fits", () => {
+    expect(recentsRowCapacity(0)).toBe(0)
+    expect(recentsRowCapacity(exactly(1) - 1)).toBe(0)
+    // The observer reports 0 while the section is collapsed and the list is
+    // unmounted; a negative slice length would throw off Array.slice.
+    expect(recentsRowCapacity(-40)).toBe(0)
+  })
+
+  test("grows one session at a time with the box", () => {
+    const heights = Array.from({ length: 8 }, (_, index) => exactly(index + 1))
+    expect(heights.map(recentsRowCapacity)).toEqual([0, 1, 2, 3, 4, 5, 6, 7])
+  })
+})
diff --git a/packages/app/src/components/app-sidebar-rows.ts b/packages/app/src/components/app-sidebar-rows.ts
new file mode 100644
index 0000000000..4a83f0513b
--- /dev/null
+++ b/packages/app/src/components/app-sidebar-rows.ts
@@ -0,0 +1,13 @@
+// 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.
+export const HOME_NAV_ROW_PITCH = 32
+export const HOME_NAV_ROW_GAP = 4
+
+// How many session rows the sidebar's Recents list may draw into `height` px of
+// the flexible area. 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 — reserving it here is what keeps "View all" reachable without
+// scrolling at any window height.
+export function recentsRowCapacity(height: number) {
+  return Math.max(0, Math.floor((height + HOME_NAV_ROW_GAP) / HOME_NAV_ROW_PITCH) - 1)
+}
diff --git a/packages/app/src/components/app-sidebar.tsx b/packages/app/src/components/app-sidebar.tsx
index baac220557..7f054ffba3 100644
--- a/packages/app/src/components/app-sidebar.tsx
+++ b/packages/app/src/components/app-sidebar.tsx
@@ -9,6 +9,7 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { recentsRowCapacity } from "@/components/app-sidebar-rows"
 import { useServerManagementController } from "@/components/dialog-select-server"
 import { DialogDeleteSession, SessionActionsMenu } from "@/components/session-actions-menu"
 import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
@@ -45,10 +46,6 @@ import { sessionTitle } from "@/utils/session-title"
 // 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
 
 const CHANNEL = import.meta.env.VITE_CODEV_CHANNEL
 
@@ -249,12 +246,7 @@ 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) - 1)),
-  )
+  const visible = createMemo(() => props.records.slice(0, recentsRowCapacity(listHeight())))
 
   return (
     <SidebarSection
@@ -274,7 +266,11 @@ function SidebarRecents(props: {
           <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">
+      <div
+        ref={setList}
+        data-slot="sidebar-recents-list"
+        class="flex min-h-0 min-w-0 flex-1 flex-col gap-1 overflow-hidden"
+      >
         <For each={visible()}>
           {(record) => (
             <SidebarSessionRow