test(client): review pass on sync-engine test suite

Two parallel reviews (quality + tests-as-spec) over the engine tests,
treating them as first-class code. Accuracy fixes to catalog claims,
fixture honesty, and typecheck coverage:

- typecheck now covers the sync-engine tests and scripts via
  tsconfig.test.json (old test files with pre-existing errors excluded);
  fixes the type errors this surfaced (fixture stream signal param,
  readonly snapshot arrays, invalid assistant literal)
- FakeSessionServer: file header stating the real-fold modeling claim,
  honors the abort signal, heal() so the sim reset cannot drift from the
  faults record, seq() so tests stop leaning on events.length, threads
  the constructor time into the snapshot, fixes AsyncQueue falsy trap
- laws: file header, law 10 numbering for the refresh-race test, vacuous
  law 2 wait replaced with engine.ready(), law 1/2 story comments,
  robust comment stripping in law 3
- sim: header, chaos distribution + drain-phase comments, heal(),
  ses_-prefixed session IDs everywhere
- divergence catalog: corrected engine-side claims (live reordering is
  ruled out by the ordered log, not the cursor check; activity resync
  wording; law 10 citation), header notes the raw-protocol retry test,
  per-call delta event IDs
- engine-data: header linking it to the laws, SNAPSHOT_RECENT named
  constant, error-DTO source-of-truth comment

SYNC_ENGINE_ARCHITECTURE.md

@@ -0,0 +1,336 @@
+# Session Sync: Two Architectures
+
+How the legacy client data layer (`createData`) and the session sync engine
+(`createEngineData`) keep a client's view of a session in sync with the
+server — and why they feel so different to reason about.
+
+Both produce the same thing: a fine-grained reactive Solid store the TUI (and
+web app) render from. They differ in *where correctness lives*.
+
+- **legacy** — correctness = the union of ~36 event handlers each being right
+- **engine** — correctness = one pure fold + a handful of testable laws
+
+---
+
+## At a glance
+
+| | Legacy `createData` | Engine `createEngineData` |
+|---|---|---|
+| Source of truth | the store itself, patched per event | server's durable log, folded |
+| Ingestion | ambient `/api/event` SSE, all sessions | snapshot + per-session `/log` (durable + ephemeral, seq-cursored) |
+| State shape | one mutable store, edited in place | immutable `EngineState`, new value per event |
+| Writes | 20 mutation sites, 3 inline fetches interleaved | 2 mutation sites, zero interleaved I/O |
+| Recovery | 8 refetch heuristics, band-aid invalidations | one seq watermark; gaps are loud (`SeqUnavailable` → re-snapshot) |
+| Optimism | `evt_` → `msg_` ID rewriting, per-case | outbox of intents with client-minted IDs, acked by durable echo |
+| Testability | drive the store, assert the store | law-test the pure fold; chaos-sim the engine |
+
+```tree
+src/solid
+├── engine/
+│   ├── fold.ts        580 lines · pure fold — (state, durableEvent) → state
+│   └── engine.ts      498 lines · outbox · overlay · reconnect · render
+├── engine-data.ts     271 lines · Solid adapter — identity diff + clone boundary
+└── data.ts          1,527 lines · legacy layer (still serves the web app)
+```
+
+Size, honestly: the engine's 1,349 lines replace only `data.ts`'s *session
+sync* portion (~654 lines) — the rest of `data.ts` covers other domains
+(projects, locations, VCS, …) and still runs underneath as a shim. So the
+engine is ~2× the code it replaces; the extra lines are the behaviors legacy
+doesn't have at all (snapshot/cursor recovery, outbox, reconnect proofs).
+
+---
+
+## How a token delta flows
+
+The hottest path in the system: one streamed text token.
+
+### Legacy — a surgical poke
+
+The actual handler, one of 36 case arms:
+
+```typescript title="src/solid/data.ts" caption="In-place proxy mutation — done in one step"
+case "session.text.delta":
+  message.update(event.data.sessionID, (draft, index) => {
+    const match = message.latestText(
+      message.assistant(draft, index, event.data.assistantMessageID),
+    )
+    if (match) match.text += event.data.delta // ← mutates shared store state in place
+  })
+  return
+```
+
+Cost: **0.3µs**. Nothing else moves. It is also the whole design: every event
+type gets its own hand-written poke at shared mutable state.
+
+### Engine — a value transition
+
+The same token becomes a state transition through a pure pipeline:
+
+```ts
+// engine.ts — the sync loop receives the delta and replaces state
+publish({ ...state, overlay: applyOverlay(state.overlay, event) })
+
+const publish = (next: EngineState) => {
+  const previous = state
+  state = next
+  // identity guard: synced flips and stale replays render nothing
+  if (
+    next.folded === previous.folded &&
+    next.outbox === previous.outbox &&
+    next.overlay === previous.overlay
+  )
+    return
+  const view = render(state) // pure
+  listeners.forEach((listener) => listener(view)) // → adapter
+}
+
+function render(state: EngineState): SessionView {
+  const base = renderBase(state.folded, state.outbox) // ← WeakMap cache hit while streaming
+  return {
+    ...state.folded,
+    session: usageSession(state.folded, state.overlay.get("usage")), // ← cache hit
+    messages: applyOverlayToMessages(base.messages, state.overlay), // remaps only touched messages
+    pending: base.pending,
+  }
+}
+```
+
+```ts
+// engine-data.ts — the adapter diffs consecutive views by identity
+const update = (sessionID: string, view: SessionView) => {
+  const previous = rendered.get(sessionID)
+  rendered.set(sessionID, view)
+  // the fold is a persistent structure: unchanged parts keep their references,
+  // so reference inequality *is* the change detector
+  for (let index = 0; index < view.messages.length; index++)
+    if (view.messages[index] !== previous.messages[index])
+      setViews(sessionID, "messages", index, reconcile(clone(view.messages[index])))
+  // clone only what changed — the store never aliases engine state
+}
+```
+
+Cost: **3.5µs**. Ten times the legacy poke, 0.035% of a core at 100 tok/s —
+and the price buys the properties below.
+
+---
+
+## The legacy architecture
+
+```mermaid
+flowchart TD
+  SSE["/api/event — ambient SSE, every session"] --> HE["handleEvent(event)<br/>switch · 36 case arms in one function"]
+  HE --> M["setStore(produce)<br/>mutate in place · 20 sites"]
+  HE --> I["sync.invalidate()<br/>refetch on next read · 8 heuristics"]
+  HE --> F["api().fetch …<br/>fetch right now · 3 inline"]
+  M --> S[("one shared<br/>mutable store")]
+  I --> S
+  F --> S
+  S --> UI["TUI / web app"]
+```
+
+An outline of what it takes to be correct here:
+
+- every case arm must patch exactly the right path in the store
+- event-vs-fetch races must be reasoned about per case
+  (e.g. the `session.created` band-aid: skip racy initial reads so live
+  events can win over a stale fetch)
+- a missed or misordered event **silently desyncs** — there is no watermark
+  to notice a gap, so recovery is "invalidate and hope the next read heals it"
+- optimistic sends rewrite `evt_*` IDs into `msg_*` IDs inline
+
+None of this is dumb code — it's each problem solved locally, at the site
+where it hurt. The cost is that the invariants live in 36 places at once.
+
+## The engine architecture
+
+```mermaid
+flowchart TD
+  SNAP["GET /snapshot<br/>session · inbox · messages · seq"] --> ES
+  LOG["GET /log?after=seq&follow&ephemeral<br/>replay ▸ log.synced ▸ live tail"] --> ES
+  subgraph ES["EngineState — immutable, replaced per event"]
+    FOLD["folded = fold(folded, durableEvent)<br/>pure · seq-ordered"]
+    OV["overlay = applyOverlay(overlay, event)<br/>ephemeral deltas"]
+    OB["outbox = [...intents]<br/>optimistic, client-minted IDs"]
+  end
+  ES --> R["render(state) → SessionView<br/>persistent structure: unchanged parts<br/>keep their references across versions"]
+  R --> D["identity diff →<br/>clone changed subtrees only"]
+  D --> ST[("Solid store")]
+  ST --> UI["TUI / web app"]
+```
+
+Mini outline of the modules:
+
+- **`fold.ts`** — `(state, durableEvent) → state`. No I/O, no clock,
+  no randomness. Same events in, same state out, on any client.
+- **`engine.ts`** — the machine around the fold: snapshot hydration,
+  log tailing, reconnect, outbox, overlay, `render`. One serial sender.
+- **`engine-data.ts`** — the Solid adapter: identity diff, the clone
+  boundary (reconcile mutates in place, so engine state is never aliased
+  into the store), and the legacy-API shim.
+
+### The write path — optimistic prompt
+
+```mermaid
+sequenceDiagram
+  participant UI as TUI
+  participant E as Engine
+  participant S as Server
+  participant L as Durable Log
+
+  UI->>E: submit(text)
+  E->>E: outbox += intent { id: client-minted msg ID }
+  Note over UI,E: view renders the pending row immediately
+  E->>S: POST /session/:id/prompt { id }
+  S->>L: session.inbox.enqueued { inboxID: id }
+  L-->>E: durable echo on the log stream
+  E->>E: fold(echo) inserts the real row + acks the intent
+  Note over UI,E: same publish — no flicker, no duplicate, ever
+```
+
+Admission is exactly-once *by construction*: the ID is the dedupe key, so a
+retried POST after a lost response cannot double-admit.
+
+### Recovery
+
+```mermaid
+flowchart TD
+  DC["disconnect"] --> RC["reconnect"]
+  RC --> T["GET /log?after=lastSeq"]
+  T -->|"rows retained for (after, head]"| RP["replay ▸ log.synced ▸ live tail"]
+  T -->|"gap in retention"| SU["SeqUnavailable — loud, never silent"]
+  SU --> RS["re-snapshot"]
+  RS --> OBX["resend unacked outbox"]
+```
+
+The server *proves* the replay covers the cursor range or refuses. The
+client treats a `log.synced` marker past its folded seq the same way. There
+is no silent-desync state.
+
+---
+
+## What the laws pin down
+
+The fold's purity makes these mechanically testable
+(`sync-engine-laws.test.ts`, plus a seeded chaos simulation):
+
+1. idempotent admission under lost responses
+2. durable echo determinism
+3. fold purity (no I/O, replay-stable)
+4. submission-order admission
+5. multi-client convergence to the server fold
+6. failure atomicity (a rejected intent vanishes with its optimistic row)
+7. lossy-history recovery (pruned retention → re-snapshot, nothing lost)
+8. attach-gap recovery (marker past folded seq → re-snapshot)
+9. outage recovery (server down during recovery → retry until it returns)
+
+The legacy layer can't state most of these, because "the fold" is smeared
+across 36 case arms and the store itself.
+
+---
+
+## Performance
+
+Benchmark: `packages/client` → `bun run bench:sync`
+(200-message transcript, 2,000 streamed deltas, median of 7).
+
+| per token delta | |
+|---|---|
+| legacy | 0.3µs |
+| engine, first draft | 240µs — full-view `structuredClone` + reconcile per event |
+| engine, shipped | **3.5µs** (69×) |
+
+How the immutable path got cheap — each step exploits the same fact, that
+the fold is a *persistent structure* (unchanged parts keep identity):
+
+1. never clone the whole view; **diff consecutive views by reference** and
+   clone only changed subtrees, each clone at exactly one store path
+2. `render` preserves references for everything an event didn't touch
+   (memoized durable base, overlay-touched messages only)
+3. skip publish entirely when folded/outbox/overlay are identity-unchanged
+4. recursive plain-JSON clone instead of `structuredClone`'s serializer
+
+Remaining gap at scale: ~10ns per message per delta of identity walking
+(0.24% CPU at 2,000 messages, 100 tok/s). Memory is flat in both layers.
+
+---
+
+## Honest tradeoffs
+
+- **Outbox is in-memory** — process death loses unsent intents (admission
+  stays exactly-once; nothing duplicates).
+- **One log SSE per open session** — fine for the TUI, needs multiplexing
+  thought for HTTP/1.1 web contexts.
+- **State held twice** — the fold's state plus the store's cloned mirror.
+  Bounded, measured flat, and it *is* the aliasing safety boundary.
+- **Ambient event stream still unfiltered** while the legacy shim handles
+  non-session domains.
+- **~1.9× the raw lines touched** — but inverted concentration: the legacy
+  layer's complexity is *distributed* (36 arms × interleaved I/O × races);
+  the engine's is *concentrated* in one pure function you can hold in your
+  head, and law-test.
+
+The trade in one sentence: the legacy layer optimizes for the cheapest
+possible patch per event; the engine optimizes for the cheapest possible
+*proof* that the client shows what the server knows.
+
+---
+
+## Future directions (design notes)
+
+Each of these replaces a boundary around the engine, not the engine itself —
+its `snapshot`/`stream`/`submit` transport seam and pure fold stay put.
+
+### 1. One fold — tables as indexes, not truth
+
+Objection: the server saves into SQL *tables*, not one state value, so how
+can server and client share a fold? Answer: distinguish the aggregate's
+**client-visible state** (what snapshots and views show) from the server's
+**query indexes** (session lists, search). The shared fold defines only the
+former. Two server shapes make it work:
+
+- persist the event log as truth and compute snapshot responses by running
+  the shared fold (cached / checkpointed every N events), or
+- persist the fold *output* transactionally with each event append and serve
+  snapshots from it.
+
+Either way SQL tables become **derived indexes computed from fold output** —
+free to take any shape, unable to disagree with what clients render.
+Convergence stops being a law and becomes a construction. Near-term bridge:
+the fold/projector equivalence test against the real embedded server (replay
+recorded event streams, assert projected snapshot ≡ client fold).
+
+### 2. Quark as the reactive layer
+
+`~/code/open-source/quark` — explicit identity/equivalence reactivity:
+values are immutable snapshots by law, `Keyed` collections split structure
+from value publication, computeds cut off on reference equality and receive
+their previous value, `Layout` compiles per-field diff bitmasks. Solid
+adapter (`useValue`/`useSlot`/`KeyedFor`) plus an experimental direct
+OpenTUI JSX runtime (`quark-opentui-jsx`).
+
+The fit is exact: the engine's `SessionView` *is* Quark's input contract —
+immutable, keyed by message ID, unchanged parts reference-stable. With
+`Keyed.set(view.messages)` per publish, the entire adapter apparatus
+(clone boundary, identity diff, `StoreSessionView`) disappears, because
+nothing downstream mutates stored values — the one Solid behavior
+(`reconcile` mutating in place) that forced it all.
+
+Path: engine → Quark `Keyed` → Solid adapter inside the existing TUI
+(incremental), with the OpenTUI JSX runtime as the eventual Solid-free
+endgame. Caveats: month-old private prototype, flat keyed collections only
+(fine for transcripts), needs productionizing.
+
+### 3. Multiplexed transport
+
+One WebSocket / RPC stream carrying `subscribe { aggregate, after }` frames
+instead of one SSE per open session — per-aggregate cursors over a single
+connection, ambient events become just another subscription (subsumes S4).
+Only the transport implementation changes.
+
+### 4. Smaller notes
+
+- durable outbox (SQLite/IndexedDB spool) for offline-safe writes
+- typed overlay part addresses instead of string keys
+- windowed views: bounded recent fold window + paged history
+

SYNC_ENGINE_PLAN.md

@@ -0,0 +1,352 @@
+# Sync Engine Plan (draft)
+
+Redesign of client state management: consume the event-sourced server that
+already exists. Goal: **less code, more reliable** — optimism, reconnect, and
+retry become structural guarantees instead of defended special cases.
+
+Status: outline for discussion. Sections marked `TODO` get filled in as we talk.
+
+---
+
+## 0. Context ledger (receipts — do not lose these)
+
+Facts established by code audit and prototyping, with locations.
+
+### The server is already event-sourced
+
+- Durable per-session event log in SQLite: `event(aggregate_id, seq, type, data)`
+  + `event_sequence` counter, unique index `(aggregate_id, seq)`
+  (`packages/core/src/event/sql.ts`, migration `20260323234822_events`).
+- Event append, projections, and `commit` hooks all run in **one SQLite
+  transaction** (`packages/core/src/bus.ts:249-370`, `behavior: "immediate"`).
+- 40 of 46 session event types are durable; the 6 ephemeral are streaming
+  deltas/progress/usage ticks (`packages/schema/src/session-event.ts:626`).
+  Durable events carry complete facts (`text.ended` has full text).
+- All hydration tables are written **only** by projectors inside the append
+  transaction: `SessionMessageTable`, `SessionTable` → `session/projector.ts`;
+  `SessionInboxTable` → `inbox.ts` `project*` fns called only from
+  `projector.ts:521,555,571,577`. `SessionPendingTable` is dead (zero writers).
+- Message rows carry the aggregate seq of their creating event
+  (`projector.ts:386`), and `Session.messages` already paginates by it
+  (`session.ts:501`).
+- Replay+live log endpoint exists:
+  `GET /api/experimental/session/:id/log?after=seq&follow=true`
+  (`packages/protocol/src/groups/session.ts:631`). Only devtools consumes it.
+- Idempotent admission ~exists: `SessionInbox.admit` (`inbox.ts:137`) adopts an
+  existing client-supplied `SessionMessage.ID`, re-checks after conflict
+  defects. Gap: adopts without comparing payloads (no conflict on mismatch).
+- Reverts are committed server-side inside `Session.prompt`
+  (`core/src/session.ts:567` at audit time) — client-side revert.commit is
+  already redundant.
+
+### The client ignores all of it
+
+- The client data layer is `packages/client/src/solid/data.ts` (~1,530 lines;
+  `packages/tui/src/context/data.tsx` is now a 22-line wrapper) — shared by
+  TUI/desktop/web, so the engine lands once for all clients. Three racing
+  write paths into one Solid store: a ~60-case bus-event switch, fetch
+  handlers doing wholesale `reconcile()`, and (in PR #42807) an optimistic
+  ledger both must consult. `sync.complete(key)` markers dedupe fetches but
+  are not watermarks.
+- Opening a session today = four separate fetches: `session.get`,
+  `session.list({parentID})` (children), `session.inbox.list`, messages
+  (`data.ts:1084-1140`) — four sync keys, no shared consistent point.
+- Reconnect = `sync.reset()` + refetch everything; no gap proof.
+
+### Prior art
+
+- PRs #42807 (optimistic message send) and #42808 (optimistic session create):
+  the stopgap. They landed client-generated IDs (keep) and ~15 hand-placed
+  guard sites defending the optimistic ledger (delete when this plan ships).
+- Prototype: `~/code/open-source/sync-proto` — Effect v4 + Solid. Engine core
+  ~200 lines. Six laws as passing tests; seeded 2-client chaos sim (lost
+  requests, lost responses after durable write, rejections, connection cuts,
+  latency shifts) with convergence / ordering / uniqueness / no-flicker
+  invariants; sim caught a real protocol bug (validation-before-adoption) on
+  first run. Two-pane demo (await vs optimistic) with narrated scenarios.
+- Proposal doc: `~/code/open-source/opencode-sync-proposal/PROPOSAL.md`
+  ("Intents, Not Mutations").
+
+### Vocabulary
+
+- **fold** — pure reduction of durable events into state; same meaning on both
+  sides. **intent** — a user action not yet acknowledged, client ID, in the
+  **outbox**. **watermark** — the aggregate seq a snapshot reflects.
+  **echo determinism** — an intent renders byte-identical to the row its
+  admission event folds to, so acks are invisible.
+- The six laws: idempotency, echo determinism, sync opacity, ordering,
+  convergence, failure atomicity.
+
+### Ordering constraint (the one subtle thing)
+
+Watermark reads must share a transaction with row reads:
+`seq`-then-rows double-applies accumulators; rows-then-`seq` loses events.
+
+---
+
+## 1. Problem
+
+TODO — expand together. Sketch:
+
+- Optimism, reconnect, and retry are each defended point-by-point instead of
+  guaranteed structurally; every new sync path re-fights the same races.
+- The client maintains a hand-written mutable mirror of state the server can
+  already replay deterministically.
+
+## 2. The claim: less code, more reliable
+
+TODO — expand together. Sketch:
+
+- Fold cases ≈ today's event switch (that code stays, becomes pure).
+- Deleted: optimistic ledger + guards, echo replace-in-place, sync-survival
+  merges, `submitTails` throttling, `sync.complete` session keys,
+  refetch-everything reconnect.
+- Added: engine core (~200 lines proven in prototype) + watermark plumbing.
+- Reliability from structure: the six laws hold by construction, not vigilance.
+
+## 3. Design
+
+```
+state   = fold(snapshot, durable events)   server truth only
+outbox  = ordered pending intents          client IDs, idempotent, serial resend
+overlay = live ephemeral fragments         deltas/progress, superseded by durable facts
+view    = render(state ⊕ outbox ⊕ overlay) derived
+```
+
+The entire client surface for one session — two calls, one stream:
+
+```
+GET /session/:id/snapshot                  fetch → { session, children, inbox,
+                                                     messages: last(N), seq }
+GET /session/:id/log?after=seq&follow=true one ordered stream:
+    replay:  durable events seq+1..head    (deltas are live-only, absent here)
+    marker:  log.synced                    "caught up" — first-class engine signal
+    live:    durable + ephemeral session events interleaved, publish order
+```
+
+- **Decided:** the log endpoint's follow phase carries ephemeral session
+  events too (widen its union from `Durable | Synced`). One server-merged
+  stream per session; the client never merges two event feeds for one
+  aggregate, so a delta can never precede its own `Started`.
+- **Overlay semantics:** `Map<(messageID, ordinal), accumulated>` — never
+  enters the fold. The durable full-value boundary (`text.ended`, carries
+  complete text) supersedes and clears the overlay entry in the same atomic
+  update that folds it — same no-seam trick as an intent leaving the outbox
+  on ack. Dropped deltas are self-healing by construction. Same mechanism for
+  all 6 ephemeral types (`tool.progress`/`usage.updated` superseded by
+  `tool.success|failed`/`step.ended`).
+- **Decided (mid-stream reconnect):** accept today's behavior — after
+  re-hydrate, overlay accumulates from now, so in-flight text may render with
+  a missing prefix until its `Ended` supersedes. Simplest code, self-healing,
+  no protocol change. (Optional later polish: if `Started` wasn't observed
+  live, show a streaming indicator instead of partial text.)
+- Overlay entries render only once their base part exists in folded state
+  (covers the one degenerate case: a live delta arriving during the replay
+  window).
+- **Outbox ack contract: the echo is the only ack.** Intents carry a
+  client-minted message ID. The HTTP 2xx is a latency hint, never trusted;
+  the intent leaves the outbox only when the durable event carrying its ID
+  folds in (same atomic store update — no flicker), or on a typed rejection
+  (drop + surface). Timeout/disconnect = unknown fate = intent just stays.
+  On reconnect: tail first, wait for `log.synced` (replay acks anything that
+  landed), then resend unacked serially — adopt-on-same-ID (`inbox.ts:137`)
+  makes resend duplicate-free. Lost request and lost response collapse into
+  the same case ("no echo yet"), which is why no guard machinery survives.
+- **Contract: the snapshot is the only entry point.** The engine never replays
+  a session from genesis; fold's domain is "snapshot + events after its seq."
+  Forced by `session.forked` — the event carries only `{ parentID, boundary }`
+  and the projector copies parent rows, which no client fold could reproduce.
+  Bonus: licenses future log truncation (serve back to the oldest live
+  snapshot, not seq 0).
+- Compaction/revert/fork all fold cleanly under that contract: compaction only
+  adds (summary message + epoch marker); revert folds exactly what the
+  projector does (drop messages/inbox at-or-after boundary, clear marker —
+  `projector.ts:660-690`); fork needs no fold case at all (a forked session's
+  snapshot already contains the copied messages).
+- Reconnect: tail from last seq first; on typed seq-unavailable → snapshot →
+  resend unacknowledged → tail. Gapless by construction.
+- Scope boundary: session aggregate only. Ambient state (catalog, agents,
+  projects, vcs, worktrees) stays on the existing global bus as-is.
+- Render target: existing Solid store shape, so components don't change.
+
+## 4. Server changes (small)
+
+- S1: watermarked hydration — **decided (tentative, pending prior-art review):**
+  one new endpoint, `GET /api/session/:id/snapshot`, one read transaction:
+
+  ```
+  GET /api/session/:id/snapshot?recent=N
+  → { session, children, inbox, messages: last(N), seq }
+  ```
+
+  `recent` defaults to 200 — today's first page exactly (`data.ts:1136`,
+  `limit: 200`). Tuning it smaller later is a parameter change, not a design
+  change.
+
+  - Named `snapshot`, not `state`: point-in-time consistency is the contract,
+    and `state` collides with the engine's `state = fold(...)`.
+  - One transaction → one watermark. Rejected alternative: adding `seq` to
+    each existing read — three watermarks force per-slice replay guards in
+    the engine, and the session row's accumulators (usage sums) double-count
+    on overlap replay. Server savings reappear as engine complexity, worse.
+  - `children` are info rows only; child sessions are separate aggregates and
+    hydrate their own messages/inbox when opened.
+  - Older history stays on the existing seq-cursored `messages` endpoint,
+    folded in as inert backfill (IDs dedupe; revert/compaction arrive on the
+    log).
+  - Prior art for snapshot+watermark+tail: Discord (`seq`/RESUME), Telegram
+    (`pts`/`getDifference`), Linear (`lastSyncId`), Postgres logical
+    replication (exported snapshot + LSN), Kafka/EventStore catch-up
+    subscriptions, Replicache (cookie — whose launch checklist requires the
+    watermark "read in the same transaction as the client view data").
+    Slack's deprecated `rtm.start` is the cautionary tale for unbounded
+    snapshots (their edge cache cut boot payloads 7–44×; 42-message pages).
+    Details: `notes/hydration-prior-art.md`.
+  - Adopted from prior art:
+    - `log?after=seq` returns a typed **seq-unavailable error** when the seq
+      is not servable → client full-rehydrates. Never silently clamp to the
+      oldest retained event (Discord op 9 / Telegram `differenceTooLong` /
+      Postgres explicitly warns against clamping).
+    - **Cursor honesty (S1 follow-up, landed):** `events.persist` defaults to
+      off (only workerd enables it), so `event` payload rows usually don't
+      exist even though `event_sequence` always advances. Old behavior:
+      `after < head` "replayed" nothing from the empty table and marked
+      synced — silent desync. Now `openLog` proves retained rows cover
+      `(after, head]` (`Bus.retainedCount`) and returns seq-unavailable
+      otherwise; the engine re-snapshots. A cursor is a resumption claim and
+      gets the strict check; a cursorless read remains "what's retained".
+      Client side, the engine also treats a `log.synced` marker past its
+      folded seq as a gap → snapshot recovery, closing the residual
+      in-process race between the head check and the live subscription.
+      Persistence therefore stays optional: snapshot + live tail + honest
+      refusal is a complete contract. A short retention window (persist on +
+      pruning sweep) can drop in later behind the same check to make busy
+      reconnects replay instead of refetch.
+    - Resume-first discipline: reconnect tries the tail from the last seq
+      before re-snapshotting (Discord meters full rehydrates, not resumes).
+    - Keep the existing `log.synced` caught-up marker as a first-class engine
+      signal (EventStoreDB added `CaughtUp` after pain; suppress notifications
+      during replay).
+- ~~S2: adopt strictness~~ — dropped. The engine only needs adopt-on-same-ID,
+  which exists (`inbox.ts:137` + AGENTS.md reconciliation rules). Conflict on
+  same-ID/different-payload defends against a client bug we never create.
+- S3: widen `session.log` follow phase to interleave ephemeral session events,
+  **opt-in via `?ephemeral=true`** — default stays durable-only, so existing
+  log consumers (devtools) are untouched. The response union widens either way
+  (extra variants simply never appear unless requested); replay is durable-only
+  in both modes since ephemeral events aren't retained. Also add the typed
+  seq-unavailable error. Later: promote out of experimental.
+- S4: filter param on `event.subscribe` (`/api/event` today sends everything
+  to everyone and fails slow consumers by contract). The ambient stream slims
+  to: non-session events + session-lifecycle events needed by the session
+  list for unopened sessions (created/deleted/renamed/moved, usage, execution
+  status). Exact param shape TBD.
+
+## 5. Delivery: parallel build in this worktree, compare locally
+
+Not a staged production migration — this branch carries a complete alternate
+data layer next to the existing one, so both versions can be run and compared
+before any adoption decision.
+
+1. Server additions S1–S4 (additive; existing clients unaffected).
+2. Engine as a new module in `packages/client` (`solid/engine.ts` or similar)
+   beside `solid/data.ts` — same store shape and consumer-facing API, fed by
+   snapshot + session stream + outbox instead of fetch + bus + ledger.
+   `data.ts` is not modified.
+3. TUI in this worktree wired to the engine layer.
+4. Compare: run this worktree's full stack (`bun run dev`) against stock v2
+   side by side — submit latency, kill/reconnect behavior, streaming, revert,
+   forks. Port the six-laws + chaos tests as the regression net.
+5. If it wins: adoption (swap the wiring, delete `data.ts` + PR #42807/#42808
+   guards) is its own decision with two working implementations to diff.
+
+   Deletion inventory at adoption: `data.ts` (~1,530 lines — the 64-case bus
+   switch becomes the pure fold; 4-fetch session open → one snapshot; all
+   refetch-on-reconnect machinery → nothing), PRs #42807/#42808 never merge
+   (stopgap ledger avoided entirely), TUI `util/single-flight.ts` + call
+   sites (submit is idempotent by minted ID), per-callsite await-then-toast
+   action plumbing → one generic outbox-rejection path. Rendering components
+   unchanged by design (same store shape).
+
+### Commit-by-commit
+
+Status: Lane A done (`0af27771` snapshot core, `d611b39f` endpoint,
+`b21a3c7d` typed seq-unavailable, `74929dd7` ephemeral opt-in, `e6eac3a0`
+simplify — S4 pending shape decision). Lane B done through validation +
+simplify (`54a2ec54` fold, `0f8831b3` engine, `2c29a743` laws, `354ab6f9`
+chaos, `c9ec1385` simplify). Wiring done: `5d70561f` engine-backed data
+layer, `48e237d9` TUI wiring, `90760fc6`/`5f63f252` regression fixes (5 of 6
+initial TUI failures were real engine-layer gaps — reconnect refresh, queued
+lifecycle, pending refresh, synced-gated sync, family-index pollution — all
+fixed; 1 obsolete assertion updated with justification). Suites: TUI 729/0,
+client green except 3 pre-existing generated-client failures (repro on stock
+v2). Remaining: live comparison pass (B7), S4 shape decision.
+
+Two lanes, disjoint packages, parallelizable. Worker sessions execute; the
+coordinating session reviews each commit and keeps this doc current. Every
+commit typechecks and passes its package tests before landing.
+
+**Lane A — server** (`packages/core`, `packages/protocol`, generated client):
+
+- **Snapshot** (S1)
+  - `feat(core): Session.snapshot` — service method, one read transaction:
+    `{ session, children, inbox, messages: last(recent), seq }`. Core tests:
+    seq consistency under concurrent publish (a write landing between the
+    transaction's reads must be impossible), empty session, recent windowing.
+  - `feat(protocol): session.snapshot endpoint` — route + handler + `bun run
+    generate` from packages/client.
+- **Session stream** (S3)
+  - `feat(core): typed seq-unavailable on session.log` — `after > head` (or
+    below retention, future) fails typed instead of silently serving. Test
+    the `after == head` boundary explicitly (Zero's fence-post bug).
+  - `feat(core): session.log follow includes ephemeral events` — opt-in
+    `?ephemeral=true` (default durable-only, existing consumers untouched);
+    widen union (`Durable | Synced` → session events + `Synced`), interleave
+    live ephemeral session events in publish order + generate. Test: delta
+    never precedes its Started on one stream; replay phase stays durable-only
+    in both modes; default mode carries no ephemeral events.
+- **Ambient filter** (S4, can trail; nothing in Lane B blocks on it)
+  - `feat(protocol): event.subscribe filter` — ambient scope.
+
+**Lane B — engine** (`packages/client/src/solid`, `packages/client/test`):
+
+- **Fold**
+  - `feat(client): session fold` — pure module: durable session events →
+    session state (messages, inbox, markers). No transport, no store. The
+    ~60-case switch in `data.ts` is the reference for event semantics.
+- **Engine core**
+  - `feat(client): engine core` — outbox (intents, serial resend, ack-on-
+    fold-in-same-update), overlay (ephemeral fragments, superseded-and-
+    cleared by durable facts), view derivation, reconnect loop against a
+    transport interface.
+- **Validation**
+  - `test(client): six laws` — idempotency, echo determinism, sync opacity,
+    ordering, convergence, failure atomicity — fake in-process transport,
+    TestClock, no server.
+  - `test(client): seeded chaos sim` — two clients, lost requests/responses,
+    rejections, cuts, latency shifts; convergence + no-flicker invariants.
+- **Wiring** (waits on Snapshot's generated client)
+  - `feat(client): engine-backed data layer` — `data.ts`-compatible surface
+    over the engine, real transport.
+  - `feat(tui): wire TUI to engine layer` — this worktree only.
+  - Verification pass: termctrl live comparison vs stock v2; record demo.
+
+Order: Lane A (Snapshot → Session stream → Ambient filter) and Lane B
+(Fold → Engine core → Validation) run in parallel; Wiring waits on Snapshot,
+then the verification pass waits on Session stream + Wiring.
+
+## 6. Validation
+
+- Port sync-proto's six laws + seeded chaos sim to run against the real engine
+  with a faked transport. TODO: where these tests live, CI story.
+- Explicit boundary test at `seq == snapshot.seq` (empty tail vs purged log) —
+  Zero shipped a fence-post bug at exactly this boundary (rocicorp/mono#5589).
+
+## 7. Open questions (to resolve together)
+- Web app / desktop adoption order after TUI.
+- S4 filter shape: type list vs a named "ambient" scope.
+
+## 8. Non-goals
+
+- No server storage migration; no new event types; no runner changes.
+- No component/rendering changes; no changes to ambient (non-session) state.

packages/app/e2e/performance/timeline/session-tab-switch-probe.ts

@@ -25,7 +25,7 @@ async function installSessionSwitchProbe(
     let running = true
     const reviewLevels: Record<string, string> = {
       panel: "#review-panel",
-    tabs: '#review-panel [data-component="tabs"]',
+      tabs: '#review-panel [data-component="tabs"]',
       body: '#review-panel [data-slot="session-review-v2-body"]',
       review: '#review-panel [data-component="session-review-v2"]',
       preview: '#review-panel [data-slot="session-review-v2-preview"]',

packages/app/e2e/regression/session-request-docks.spec.ts

@@ -52,7 +52,7 @@ test("shows a pending question dock", async ({ page }) => {
       rejectRequests.push(request.url())
   })
 
-  await question.getByRole("button", { name: "Minimize question" }).click()
+  await question.locator('[data-component="icon-button"][data-icon="chevron-down"]').click()
   await expect(question).toBeVisible()
   await expect(question.getByText("Which implementation should be used?")).toBeVisible()
   await expect(question.getByText("Select one answer")).toBeHidden()
@@ -63,7 +63,7 @@ test("shows a pending question dock", async ({ page }) => {
   await expect(page.locator('[data-component="question-minimized-dock"]')).toHaveCount(0)
   expect(rejectRequests).toEqual([])
 
-  await question.getByRole("button", { name: "Restore question" }).click()
+  await question.locator('[data-component="icon-button"][data-icon="chevron-down"]').click()
   await expect(question).toBeVisible()
   await expect(question.getByText("Which implementation should be used?")).toBeVisible()
   await expect(question.getByRole("radio", { name: /Minimal/ })).toBeVisible()

packages/app/e2e/regression/session-timeline-tool-projection.spec.ts

@@ -131,14 +131,15 @@ test("labels V2 skill tools from IDs and result metadata", async ({ page }) => {
     "aria-label",
     "sample-skill",
   )
-  await expect(
-    page.locator(`[data-timeline-part-id="${completed}"] [data-component="text-shimmer"]`),
-  ).toHaveAttribute("aria-label", "OpenCode")
+  await expect(page.locator(`[data-timeline-part-id="${completed}"] [data-component="text-shimmer"]`)).toHaveAttribute(
+    "aria-label",
+    "OpenCode",
+  )
   for (const id of [pending, completed]) {
     const skill = page.locator(`[data-timeline-part-id="${id}"]`)
     await expect(skill.locator('[data-slot="skill-tool-label"]')).toHaveText("Skill")
     await expect(skill.locator('[data-slot="skill-tool-separator"]')).toHaveText("·")
-    await expect(skill.locator('use[href="#opencode-v2-icon-post-skill"]')).toBeVisible()
+    await expect(skill.locator('use[href="#opencode-icon-post-skill"]')).toBeVisible()
   }
 })
 

packages/app/e2e/smoke/session-timeline.spec.ts

@@ -477,7 +477,7 @@ async function configureSmokePage(page: Page, directory: string) {
     }
     let recordFrame: number | undefined
     const record = () => {
-      for (const toast of document.querySelectorAll<HTMLElement>(".toast-v2--error")) {
+      for (const toast of document.querySelectorAll<HTMLElement>('[data-component="toast"][data-variant="error"]')) {
         const text = toast.textContent?.trim()
         if (text && !smoke.__timelineSmokeErrorToasts!.includes(text)) smoke.__timelineSmokeErrorToasts!.push(text)
       }

packages/app/src/components/debug-bar.tsx

@@ -3,6 +3,7 @@ import { batch, createEffect, onCleanup, onMount, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 
@@ -101,8 +102,16 @@ function Cell(props: {
     </div>
   )
 
+  if (props.inline) {
+    return (
+      <TooltipV2 value={props.tip} placement="top">
+        {content()}
+      </TooltipV2>
+    )
+  }
+
   return (
-    <Tooltip appearance={props.inline ? "compact" : "standard"} value={props.tip} placement="top">
+    <Tooltip value={props.tip} placement="top">
       {content()}
     </Tooltip>
   )
@@ -142,8 +151,16 @@ function ToggleCell(props: {
     </button>
   )
 
+  if (props.inline) {
+    return (
+      <TooltipV2 value={props.tip} placement="top">
+        {content()}
+      </TooltipV2>
+    )
+  }
+
   return (
-    <Tooltip appearance={props.inline ? "compact" : "standard"} value={props.tip} placement="top">
+    <Tooltip value={props.tip} placement="top">
       {content()}
     </Tooltip>
   )

packages/app/src/components/dialog-command-palette-v2.tsx

@@ -1,10 +1,10 @@
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { Dialog, DialogBody } from "@opencode-ai/ui/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Keybind } from "@opencode-ai/ui/keybind"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { Dialog, DialogBody } from "@opencode-ai/ui/v2/dialog-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
 import { commandPaletteOptions, formatKeybindParts, useCommand } from "@/context/command"
@@ -191,7 +191,7 @@ function CommandPaletteView(props: {
     <Dialog class="command-palette-v2" size="large">
       <DialogBody class="command-palette-v2-body">
         <div class="command-palette-v2-search">
-          <TextInput
+          <TextInputV2
             value={query()}
             autofocus
             autocomplete="off"
@@ -295,7 +295,7 @@ function PaletteRow(props: {
             </div>
           </div>
           <Show when={props.item.keybind}>
-            <Keybind keys={formatKeybindParts(props.item.keybind ?? "", props.language.t)} variant="neutral" />
+            <KeybindV2 keys={formatKeybindParts(props.item.keybind ?? "", props.language.t)} variant="neutral" />
           </Show>
         </Match>
         <Match when={props.item.type === "session"}>

packages/app/src/components/dialog-connect-provider.stories.tsx

@@ -13,7 +13,7 @@ function ConnectProviderDialogStory() {
   onMount(open)
 
   return (
-    <Button variant="neutral" onClick={open}>
+    <Button variant="secondary" onClick={open}>
       Open connect provider dialog
     </Button>
   )
@@ -29,7 +29,7 @@ function ProviderConnectionDialogStory(props) {
   onMount(open)
 
   return (
-    <Button variant="neutral" onClick={open}>
+    <Button variant="secondary" onClick={open}>
       Open {props.provider} connection dialog
     </Button>
   )

packages/app/src/components/dialog-connect-provider.tsx

@@ -5,8 +5,9 @@ import { List } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { DialogBody, DialogHeader, DialogTitle, Dialog } from "@opencode-ai/ui/dialog"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
 import { type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -74,7 +75,7 @@ export const DialogConnectProvider: Component<{
   }
 
   return (
-    <Dialog
+    <DialogV2
       containerClass="!h-[min(calc(100vh_-_16px),512px)] !w-[min(calc(100vw_-_16px),640px)]"
       class="[font-family:var(--v2-font-family-sans)] [&_[data-slot=dialog-header]]:!px-5 [&_[data-slot=dialog-header-title]]:!text-[15px] [&_[data-slot=dialog-header-title]]:!tracking-[-0.13px]"
     >
@@ -98,7 +99,7 @@ export const DialogConnectProvider: Component<{
           <Content />
         </div>
       </DialogBody>
-    </Dialog>
+    </DialogV2>
   )
 }
 
@@ -167,7 +168,7 @@ function ProviderPicker(props: { directory?: string; onSelect: (provider: string
   return (
     <div ref={picker} class="flex min-h-0 flex-1 flex-col gap-4" onKeyDown={handleKeyDown}>
       <div class="shrink-0 px-1 pt-px">
-        <TextInput
+        <TextInputV2
           ref={search}
           type="search"
           class="!w-full [font-family:var(--v2-font-family-sans)]"
@@ -378,7 +379,7 @@ function ProviderConnection(props: {
                 setFormStore("value", field.key, value)
               }}
             />
-            <Button class="w-auto" type="submit" size="large" variant="contrast" disabled={!valid()}>
+            <Button class="w-auto" type="submit" size="large" variant="primary" disabled={!valid()}>
               {language.t("common.continue")}
             </Button>
           </Match>
@@ -515,7 +516,7 @@ function ProviderConnection(props: {
         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
           <label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
             {language.t("provider.connect.apiKey.label", { provider: provider().name })}
-            <TextInput
+            <TextInputV2
               ref={apiKey}
               class="!w-full"
               name="apiKey"
@@ -536,9 +537,9 @@ function ProviderConnection(props: {
               </div>
             )}
           </Show>
-          <Button type="submit" variant="contrast" data-action="provider-connect-submit">
+          <ButtonV2 type="submit" variant="contrast" data-action="provider-connect-submit">
             {language.t("common.continue")}
-          </Button>
+          </ButtonV2>
         </form>
       </div>
     )
@@ -584,7 +585,7 @@ function ProviderConnection(props: {
         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-5 self-stretch">
           <label class="flex w-full flex-col gap-1 font-[530] leading-4 text-v2-text-text-base">
             {language.t("provider.connect.oauth.code.label", { method: controller.currentMethod()?.label ?? "" })}
-            <TextInput
+            <TextInputV2
               ref={codeInput}
               class="!w-full"
               name="code"
@@ -604,9 +605,9 @@ function ProviderConnection(props: {
               </div>
             )}
           </Show>
-          <Button type="submit" variant="contrast">
+          <ButtonV2 type="submit" variant="contrast">
             {language.t("common.continue")}
-          </Button>
+          </ButtonV2>
         </form>
       </div>
     )

packages/app/src/components/dialog-custom-provider.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { useMutation } from "@tanstack/solid-query"
@@ -22,21 +21,20 @@ export function DialogCustomProvider(props: Props) {
   const language = useLanguage()
 
   return (
-    <Dialog class="h-full">
-      <DialogHeader>
-        <DialogTitle>
-          <IconButton
-            tabIndex={-1}
-            icon={<Icon name="arrow-left" />}
-            variant="ghost"
-            onClick={props.onBack}
-            aria-label={language.t("common.goBack")}
-          />
-        </DialogTitle>
-      </DialogHeader>
-      <DialogBody>
-        <CustomProviderForm />
-      </DialogBody>
+    <Dialog
+      class="h-full"
+      title={
+        <IconButton
+          tabIndex={-1}
+          icon="arrow-left"
+          variant="ghost"
+          onClick={props.onBack}
+          aria-label={language.t("common.goBack")}
+        />
+      }
+      transition
+    >
+      <CustomProviderForm />
     </Dialog>
   )
 }
@@ -240,7 +238,7 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
                 </div>
                 <IconButton
                   type="button"
-                  icon={<Icon name="trash" />}
+                  icon="trash"
                   variant="ghost"
                   class="mt-1.5"
                   onClick={() => removeModel(i())}
@@ -284,7 +282,7 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
                 </div>
                 <IconButton
                   type="button"
-                  icon={<Icon name="trash" />}
+                  icon="trash"
                   variant="ghost"
                   class="mt-1.5"
                   onClick={() => removeHeader(i())}
@@ -303,7 +301,7 @@ export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
           class="w-auto self-start"
           type="submit"
           size="large"
-          variant="contrast"
+          variant="primary"
           disabled={saveMutation.isPending}
         >
           {saveMutation.isPending ? language.t("common.saving") : language.t("common.submit")}

packages/app/src/components/dialog-edit-project-v2.tsx

@@ -1,11 +1,12 @@
-import { Button } from "@opencode-ai/ui/button"
-import { Dialog, DialogFooter } from "@opencode-ai/ui/dialog"
-import { Field } from "@opencode-ai/ui/field"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogFooter } from "@opencode-ai/ui/v2/dialog-v2"
+import { Field } from "@opencode-ai/ui/v2/field-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Icon } from "@opencode-ai/ui/icon"
-import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode-ai/ui/project-avatar"
-import { Tabs } from "@opencode-ai/ui/tabs"
-import { Textarea } from "@opencode-ai/ui/textarea"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { ProjectAvatar, PROJECT_AVATAR_VARIANTS } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { TextareaV2 } from "@opencode-ai/ui/v2/textarea-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { For, Show, createSignal, startTransition } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
@@ -36,46 +37,46 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
 
   const Footer = () => (
     <DialogFooter>
-      <Button type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
+      <ButtonV2 type="button" variant="neutral" disabled={model.save.isPending} onClick={model.close}>
         {language.t("common.cancel")}
-      </Button>
-      <Button type="submit" variant="contrast" disabled={!model.supported || model.save.isPending}>
+      </ButtonV2>
+      <ButtonV2 type="submit" variant="contrast" disabled={!model.supported || model.save.isPending}>
         {model.save.isPending ? language.t("common.saving") : language.t("common.save")}
-      </Button>
+      </ButtonV2>
     </DialogFooter>
   )
 
   return (
     <Dialog size="x-large" variant="settings" class="project-settings-v2-dialog">
-      <Tabs
+      <TabsV2
         orientation="vertical"
         variant="settings"
         value={tab()}
         onChange={(value) => void startTransition(() => setTab(value))}
         class="project-settings-v2"
       >
-        <Tabs.List>
+        <TabsV2.List>
           <div class="project-settings-v2-nav">
-            <Tabs.Trigger value="general">
+            <TabsV2.Trigger value="general">
               <ProjectAvatar
                 fallback={projectName()}
                 variant={getProjectAvatarVariant(props.project.icon?.color)}
                 class="!size-4 shrink-0"
               />
               <span class="truncate">{projectName()}</span>
-            </Tabs.Trigger>
-            <Tabs.Trigger value="scripts">
+            </TabsV2.Trigger>
+            <TabsV2.Trigger value="scripts">
               <Icon name="code" size="small" />
               {language.t("project.settings.scripts")}
-            </Tabs.Trigger>
-            <Tabs.Trigger value="extensions">
+            </TabsV2.Trigger>
+            <TabsV2.Trigger value="extensions">
               <Icon name="extensions" size="small" />
               {language.t("settings.tab.extensions")}
-            </Tabs.Trigger>
+            </TabsV2.Trigger>
           </div>
-        </Tabs.List>
+        </TabsV2.List>
 
-        <Tabs.Content value="general" class="project-settings-v2-panel">
+        <TabsV2.Content value="general" class="project-settings-v2-panel">
           <form onSubmit={model.submit} class="project-settings-v2-form">
             <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
@@ -85,7 +86,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
 
               <Field>
                 <Field.Label>{language.t("dialog.project.edit.name")}</Field.Label>
-                <TextInput
+                <TextInputV2
                   autofocus
                   appearance="large"
                   class="!w-full"
@@ -131,7 +132,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
                         "opacity-0": !model.store.iconHover,
                       }}
                     >
-                      <Icon name={model.store.iconOverride ? "close" : "share"} />
+                      <IconV2 name={model.store.iconOverride ? "close" : "share"} />
                     </span>
                   </button>
                   <input
@@ -187,9 +188,9 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
             </div>
             <Footer />
           </form>
-        </Tabs.Content>
+        </TabsV2.Content>
 
-        <Tabs.Content value="scripts" class="project-settings-v2-panel">
+        <TabsV2.Content value="scripts" class="project-settings-v2-panel">
           <form onSubmit={model.submit} class="project-settings-v2-form">
             <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
@@ -199,7 +200,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
               <Field>
                 <Field.Label>{language.t("dialog.project.edit.worktree.startup")}</Field.Label>
                 <Field.Prefix>{language.t("dialog.project.edit.worktree.startup.description")}</Field.Prefix>
-                <Textarea
+                <TextareaV2
                   class="!w-full [&_[data-slot=textarea-v2-textarea]]:font-mono"
                   rows={5}
                   value={model.store.startup}
@@ -211,12 +212,12 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
             </div>
             <Footer />
           </form>
-        </Tabs.Content>
+        </TabsV2.Content>
 
-        <Tabs.Content value="extensions" class="project-settings-v2-panel">
+        <TabsV2.Content value="extensions" class="project-settings-v2-panel">
           <ProjectSettingsExtensions />
-        </Tabs.Content>
-      </Tabs>
+        </TabsV2.Content>
+      </TabsV2>
     </Dialog>
   )
 }

packages/app/src/components/dialog-fork.tsx

@@ -3,7 +3,7 @@ import { useNavigate, useParams } from "@solidjs/router"
 import { useData } from "@/context/server"
 import { usePrompt } from "@/context/prompt"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { showToast } from "@/utils/toast"
 import { useLanguage } from "@/context/language"
@@ -94,28 +94,23 @@ export const DialogFork: Component = () => {
   }
 
   return (
-    <Dialog>
-      <DialogHeader>
-        <DialogTitle>{language.t("command.session.fork")}</DialogTitle>
-      </DialogHeader>
-      <DialogBody>
-        <List
-          class="flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0"
-          search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
-          emptyMessage={language.t("dialog.fork.empty")}
-          key={(x) => x.id}
-          items={messages}
-          filterKeys={["text"]}
-          onSelect={handleSelect}
-        >
-          {(item) => (
-            <div class="w-full flex items-center gap-2">
-              <span class="truncate flex-1 min-w-0 text-left font-normal">{item.text}</span>
-              <span class="text-text-weak shrink-0 font-normal">{item.time}</span>
-            </div>
-          )}
-        </List>
-      </DialogBody>
+    <Dialog title={language.t("command.session.fork")}>
+      <List
+        class="flex-1 px-3 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0"
+        search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.fork.empty")}
+        key={(x) => x.id}
+        items={messages}
+        filterKeys={["text"]}
+        onSelect={handleSelect}
+      >
+        {(item) => (
+          <div class="w-full flex items-center gap-2">
+            <span class="truncate flex-1 min-w-0 text-left font-normal">{item.text}</span>
+            <span class="text-text-weak shrink-0 font-normal">{item.time}</span>
+          </div>
+        )}
+      </List>
     </Dialog>
   )
 }

packages/app/src/components/dialog-manage-models.tsx

@@ -1,12 +1,15 @@
-import { Button } from "@opencode-ai/ui/button"
-import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Switch } from "@opencode-ai/ui/switch"
-import { TextInput } from "@opencode-ai/ui/text-input"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Button } from "@opencode-ai/ui/button"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog as DialogV2, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/v2/dialog-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { Switch as SwitchV2 } from "@opencode-ai/ui/v2/switch-v2"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { For, Show, type Component } from "solid-js"
 import { useLocal } from "@/context/local"
@@ -41,80 +44,74 @@ export const DialogManageModels: Component = () => {
   }
 
   return (
-    <Dialog>
-      <DialogHeader hideClose>
-        <DialogTitleGroup
-          title={language.t("dialog.model.manage")}
-          description={language.t("dialog.model.manage.description")}
-        />
+    <Dialog
+      title={language.t("dialog.model.manage")}
+      description={language.t("dialog.model.manage.description")}
+      action={
         <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={handleConnectProvider}>
           {language.t("command.provider.connect")}
         </Button>
-      </DialogHeader>
-      <DialogBody>
-        <List
-          class="px-3"
-          search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true }}
-          emptyMessage={language.t("dialog.model.empty")}
-          key={(x) => `${x?.provider?.id}:${x?.id}`}
-          items={local.model.list()}
-          filterKeys={["provider.name", "name", "id"]}
-          sortBy={(a, b) => a.name.localeCompare(b.name)}
-          groupBy={(x) => x.provider.id}
-          groupHeader={(group) => {
-            const provider = group.items[0].provider
-            return (
-              <>
-                <span>{provider.name}</span>
-                <Tooltip
-                  appearance="standard"
-                  placement="top"
-                  value={language.t("dialog.model.manage.provider.toggle", { provider: provider.name })}
-                >
-                  <Switch
-                    appearance="standard"
-                    class="-mr-1"
-                    checked={providerVisible(provider.id)}
-                    onChange={(checked) => setProviderVisibility(provider.id, checked)}
-                    hideLabel
-                  >
-                    {provider.name}
-                  </Switch>
-                </Tooltip>
-              </>
-            )
-          }}
-          sortGroupsBy={(a, b) => {
-            const aRank = providerRank(a.items[0].provider.id)
-            const bRank = providerRank(b.items[0].provider.id)
-            const aPopular = aRank >= 0
-            const bPopular = bRank >= 0
-            if (aPopular && !bPopular) return -1
-            if (!aPopular && bPopular) return 1
-            return aRank - bRank
-          }}
-          onSelect={(x) => {
-            if (!x) return
-            const key = { modelID: x.id, providerID: x.provider.id }
-            local.model.setVisibility(key, !local.model.visible(key))
-          }}
-        >
-          {(i) => (
-            <div class="w-full flex items-center justify-between gap-x-3">
-              <span>{i.name}</span>
-              <div onClick={(e) => e.stopPropagation()}>
+      }
+    >
+      <List
+        class="px-3"
+        search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.model.empty")}
+        key={(x) => `${x?.provider?.id}:${x?.id}`}
+        items={local.model.list()}
+        filterKeys={["provider.name", "name", "id"]}
+        sortBy={(a, b) => a.name.localeCompare(b.name)}
+        groupBy={(x) => x.provider.id}
+        groupHeader={(group) => {
+          const provider = group.items[0].provider
+          return (
+            <>
+              <span>{provider.name}</span>
+              <Tooltip
+                placement="top"
+                value={language.t("dialog.model.manage.provider.toggle", { provider: provider.name })}
+              >
                 <Switch
-                  appearance="standard"
-                  checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
-                  onChange={(checked) => {
-                    local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
-                  }}
-                />
-              </div>
+                  class="-mr-1"
+                  checked={providerVisible(provider.id)}
+                  onChange={(checked) => setProviderVisibility(provider.id, checked)}
+                  hideLabel
+                >
+                  {provider.name}
+                </Switch>
+              </Tooltip>
+            </>
+          )
+        }}
+        sortGroupsBy={(a, b) => {
+          const aRank = providerRank(a.items[0].provider.id)
+          const bRank = providerRank(b.items[0].provider.id)
+          const aPopular = aRank >= 0
+          const bPopular = bRank >= 0
+          if (aPopular && !bPopular) return -1
+          if (!aPopular && bPopular) return 1
+          return aRank - bRank
+        }}
+        onSelect={(x) => {
+          if (!x) return
+          const key = { modelID: x.id, providerID: x.provider.id }
+          local.model.setVisibility(key, !local.model.visible(key))
+        }}
+      >
+        {(i) => (
+          <div class="w-full flex items-center justify-between gap-x-3">
+            <span>{i.name}</span>
+            <div onClick={(e) => e.stopPropagation()}>
+              <Switch
+                checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
+                onChange={(checked) => {
+                  local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
+                }}
+              />
             </div>
-          )}
-        </List>
-      </DialogBody>
+          </div>
+        )}
+      </List>
     </Dialog>
   )
 }
@@ -157,20 +154,20 @@ export const DialogManageModelsV2: Component = () => {
   })
 
   return (
-    <Dialog size="large" variant="settings" class="settings-v2-manage-models-dialog">
+    <DialogV2 size="large" variant="settings" class="settings-v2-manage-models-dialog">
       <DialogHeader hideClose={true} closeLabel={language.t("common.close")}>
         <DialogTitleGroup
           title={language.t("dialog.model.manage")}
           description={language.t("dialog.model.manage.description")}
         />
-        <Button variant="neutral" icon="plus" onClick={handleConnectProvider}>
+        <ButtonV2 variant="neutral" icon="plus" onClick={handleConnectProvider}>
           {language.t("command.provider.connect")}
-        </Button>
+        </ButtonV2>
       </DialogHeader>
       <DialogBody class="flex min-h-0 flex-1 flex-col">
         <div class="px-4 pt-px pb-3">
           <div class="relative">
-            <TextInput
+            <TextInputV2
               type="search"
               appearance="base"
               class="!w-full self-stretch"
@@ -185,12 +182,12 @@ export const DialogManageModelsV2: Component = () => {
               aria-label={language.t("dialog.model.search.placeholder")}
             />
             <Show when={list.filter()}>
-              <IconButton
+              <IconButtonV2
                 type="button"
                 variant="ghost-muted"
                 size="small"
                 class="settings-v2-tab-search-clear"
-                icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
+                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
                 onClick={() => list.clear()}
                 aria-label={language.t("common.clear")}
               />
@@ -228,14 +225,14 @@ export const DialogManageModelsV2: Component = () => {
                           <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
                         </div>
                         <div>
-                          <Switch
+                          <SwitchV2
                             class="mr-6"
                             checked={providerVisible(group.category)}
                             onChange={(checked) => setProviderVisibility(group.category, checked)}
                             hideLabel
                           >
                             {group.items[0].provider.name}
-                          </Switch>
+                          </SwitchV2>
                         </div>
                       </div>
                       <SettingsListV2>
@@ -243,13 +240,13 @@ export const DialogManageModelsV2: Component = () => {
                           {(item) => (
                             <SettingsRowV2 title={item.name} description="">
                               <div>
-                                <Switch
+                                <SwitchV2
                                   checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
                                   onChange={(checked) => setModelVisibility(item, checked)}
                                   hideLabel
                                 >
                                   {item.name}
-                                </Switch>
+                                </SwitchV2>
                               </div>
                             </SettingsRowV2>
                           )}
@@ -263,6 +260,6 @@ export const DialogManageModelsV2: Component = () => {
           </div>
         </div>
       </DialogBody>
-    </Dialog>
+    </DialogV2>
   )
 }

packages/app/src/components/dialog-release-notes.tsx

@@ -86,12 +86,12 @@ export function DialogReleaseNotes(props: { highlights: Highlight[] }) {
               <Show
                 when={isLast()}
                 fallback={
-                  <Button variant="neutral" size="large" onClick={handleNext}>
+                  <Button variant="secondary" size="large" onClick={handleNext}>
                     {language.t("dialog.releaseNotes.action.next")}
                   </Button>
                 }
               >
-                <Button variant="contrast" size="large" onClick={handleClose}>
+                <Button variant="primary" size="large" onClick={handleClose}>
                   {language.t("dialog.releaseNotes.action.getStarted")}
                 </Button>
               </Show>

packages/app/src/components/dialog-select-directory-v2.tsx

@@ -1,8 +1,8 @@
 import "@pierre/trees/web-components"
 import { FileTree } from "@pierre/trees"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
-import { Button } from "@opencode-ai/ui/button"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createEffect, createMemo, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"
 import { useGlobal } from "@/context/global"
@@ -28,7 +28,7 @@ import {
   pickerRoot,
 } from "./directory-picker-domain"
 import "./dialog-select-directory-v2.css"
-import { Divider } from "@opencode-ai/ui/divider"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
 import { getFilename } from "@opencode-ai/util/path"
 
 interface DialogSelectDirectoryV2Props {
@@ -293,10 +293,10 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
       <DialogHeader>
         <DialogTitle>{props.title ?? language.t("command.project.open")}</DialogTitle>
       </DialogHeader>
-      <Divider />
+      <DividerV2 />
       <DialogBody class="directory-picker-v2-body pt-4!">
         <div class="directory-picker-v2-path" ref={pathArea}>
-          <TextInput
+          <TextInputV2
             value={input()}
             autofocus
             autocomplete="off"
@@ -318,15 +318,15 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
             onKeyDown={handleInputKey}
           />
           <div class="directory-picker-v2-actions">
-            <Button size="small" variant="ghost" onClick={() => void navigate(home())}>
+            <ButtonV2 size="small" variant="ghost" onClick={() => void navigate(home())}>
               ~
-            </Button>
-            <Button size="small" variant="ghost" onClick={() => void navigate(pickerRoot(root()) || root())}>
+            </ButtonV2>
+            <ButtonV2 size="small" variant="ghost" onClick={() => void navigate(pickerRoot(root()) || root())}>
               {language.t("dialog.directory.root")}
-            </Button>
-            <Button size="small" variant="ghost" onClick={() => void navigate(pickerParent(root()))}>
+            </ButtonV2>
+            <ButtonV2 size="small" variant="ghost" onClick={() => void navigate(pickerParent(root()))}>
               {language.t("dialog.directory.parent")}
-            </Button>
+            </ButtonV2>
           </div>
           <Show when={suggestionsOpen() && currentSuggestions().length > 0}>
             <div id="directory-picker-v2-suggestions" role="listbox" class="directory-picker-v2-suggestions">
@@ -379,12 +379,12 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
         <div class="directory-picker-v2-selection">{policy.result(root(), selected(), rootValid())}</div>
       </DialogBody>
       <DialogFooter>
-        <Button variant="neutral" onClick={() => dialog.close()}>
+        <ButtonV2 variant="neutral" onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </Button>
-        <Button variant="contrast" disabled={!policy.result(root(), selected(), rootValid())} onClick={resolve}>
+        </ButtonV2>
+        <ButtonV2 variant="contrast" disabled={!policy.result(root(), selected(), rootValid())} onClick={resolve}>
           {action[policy.action]}
-        </Button>
+        </ButtonV2>
       </DialogFooter>
     </Dialog>
   )

packages/app/src/components/dialog-select-file.tsx

@@ -0,0 +1,187 @@
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { List } from "@opencode-ai/ui/list"
+import { getDirectory, getFilename } from "@opencode-ai/util/path"
+import { createMemo, createSignal, lazy, Match, Show, Switch } from "solid-js"
+import { formatKeybind } from "@/context/command"
+import { useServerSDK } from "@/context/server-sdk"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { decode64 } from "@/utils/base64"
+import { getRelativeTime } from "@/utils/time"
+import {
+  createCommandPaletteFileEntry,
+  createCommandPaletteFileOpener,
+  createCommandPaletteModel,
+  uniqueCommandPaletteEntries,
+  type CommandPaletteEntry,
+} from "./command-palette"
+import { DialogCommandPaletteV2 } from "./dialog-command-palette-v2"
+
+const DialogSelectFileV2 = lazy(() =>
+  import("./dialog-select-directory-v2").then((module) => ({ default: module.DialogSelectDirectoryV2 })),
+)
+type DialogSelectFileMode = "all" | "files"
+
+export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFile?: (path: string) => void }) {
+  const platform = usePlatform()
+  const filesOnly = () => props.mode === "files"
+
+  if (!filesOnly()) {
+    return <DialogCommandPaletteV2 onOpenFile={props.onOpenFile} />
+  }
+
+  if (filesOnly() && platform.platform === "desktop") {
+    return <DialogSelectFileDesktopV2 onOpenFile={props.onOpenFile} />
+  }
+
+  return <DialogSelectFileLegacy filesOnly={filesOnly} onOpenFile={props.onOpenFile} />
+}
+
+function DialogSelectFileDesktopV2(props: { onOpenFile?: (path: string) => void }) {
+  const language = useLanguage()
+  const serverSDK = useServerSDK()
+  const { params } = useSessionLayout()
+  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
+  const openFile = createCommandPaletteFileOpener(props.onOpenFile)
+
+  return (
+    <DialogSelectFileV2
+      server={serverSDK.server}
+      mode="file"
+      start={projectDirectory()}
+      title={language.t("session.header.searchFiles")}
+      onSelect={(result) => {
+        if (typeof result !== "string") return
+        openFile(result)
+      }}
+    />
+  )
+}
+
+function DialogSelectFileLegacy(props: { filesOnly: () => boolean; onOpenFile?: (path: string) => void }) {
+  const palette = createCommandPaletteModel(props)
+  const [grouped, setGrouped] = createSignal(false)
+
+  const items = async (text: string) => {
+    const query = text.trim()
+    setGrouped(query.length > 0)
+
+    if (!query && props.filesOnly()) {
+      const loaded = palette.file.tree.state("")?.loaded
+      const pending = loaded ? Promise.resolve() : palette.file.tree.list("")
+      const next = uniqueCommandPaletteEntries([...palette.recentFileEntries(), ...palette.rootFileEntries()])
+
+      if (loaded || next.length > 0) {
+        void pending
+        return next
+      }
+
+      await pending
+      return uniqueCommandPaletteEntries([...palette.recentFileEntries(), ...palette.rootFileEntries()])
+    }
+
+    if (!query) return [...palette.preferredCommandEntries(), ...palette.recentFileEntries()]
+
+    if (props.filesOnly()) {
+      const files = await palette.file.searchFiles(query)
+      const category = palette.language.t("palette.group.files")
+      return files.map((path) => createCommandPaletteFileEntry(path, category))
+    }
+
+    const [files, nextSessions] = await Promise.all([
+      palette.file.searchFiles(query),
+      Promise.resolve(palette.sessions(query)),
+    ])
+    const category = palette.language.t("palette.group.files")
+    const entries = files.map((path) => createCommandPaletteFileEntry(path, category))
+    return [...palette.commandEntries(), ...nextSessions, ...entries]
+  }
+
+  return (
+    <Dialog class="pt-3 pb-0 !max-h-[480px]" transition>
+      <List
+        class="px-3"
+        search={{
+          placeholder: props.filesOnly()
+            ? palette.language.t("session.header.searchFiles")
+            : palette.language.t("palette.search.placeholder"),
+          autofocus: true,
+          hideIcon: true,
+        }}
+        emptyMessage={palette.language.t("palette.empty")}
+        loadingMessage={palette.language.t("common.loading")}
+        items={items}
+        key={(item) => item.id}
+        filterKeys={["title", "description", "category"]}
+        skipFilter={(item) => item.type === "file"}
+        groupBy={grouped() ? (item) => item.category : () => ""}
+        onMove={(item: CommandPaletteEntry | undefined) => palette.highlight(item)}
+        onSelect={(item: CommandPaletteEntry | undefined) => palette.select(item)}
+      >
+        {(item) => (
+          <Switch
+            fallback={
+              <div class="w-full flex items-center justify-between rounded-md pl-1">
+                <div class="flex items-center gap-x-3 grow min-w-0">
+                  <FileIcon node={{ path: item.path ?? "", type: "file" }} class="shrink-0 size-4" />
+                  <div class="flex items-center text-14-regular">
+                    <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                      {getDirectory(item.path ?? "")}
+                    </span>
+                    <span class="text-text-strong whitespace-nowrap">{getFilename(item.path ?? "")}</span>
+                  </div>
+                </div>
+              </div>
+            }
+          >
+            <Match when={item.type === "command"}>
+              <div class="w-full flex items-center justify-between gap-4">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span class="text-14-regular text-text-strong whitespace-nowrap">{item.title}</span>
+                  <Show when={item.description}>
+                    <span class="text-14-regular text-text-weak truncate">{item.description}</span>
+                  </Show>
+                </div>
+                <Show when={item.keybind}>
+                  <Keybind class="rounded-[4px]">{formatKeybind(item.keybind ?? "", palette.language.t)}</Keybind>
+                </Show>
+              </div>
+            </Match>
+            <Match when={item.type === "session"}>
+              <div class="w-full flex items-center justify-between rounded-md pl-1">
+                <div class="flex items-center gap-x-3 grow min-w-0">
+                  <Icon name="bubble-5" size="small" class="shrink-0 text-icon-weak" />
+                  <div class="flex items-center gap-2 min-w-0">
+                    <span
+                      class="text-14-regular text-text-strong truncate"
+                      classList={{ "opacity-70": !!item.archived }}
+                    >
+                      {item.title}
+                    </span>
+                    <Show when={item.description}>
+                      <span
+                        class="text-14-regular text-text-weak truncate"
+                        classList={{ "opacity-70": !!item.archived }}
+                      >
+                        {item.description}
+                      </span>
+                    </Show>
+                  </div>
+                </div>
+                <Show when={item.updated}>
+                  <span class="text-12-regular text-text-weak whitespace-nowrap ml-2">
+                    {getRelativeTime(new Date(item.updated!).toISOString(), palette.language.t)}
+                  </span>
+                </Show>
+              </div>
+            </Match>
+          </Switch>
+        )}
+      </List>
+    </Dialog>
+  )
+}

packages/app/src/components/dialog-select-mcp.tsx

@@ -1,7 +1,7 @@
 import { Component, createMemo, Show } from "solid-js"
 import { useData } from "@/context/server"
 import { useWorkspaceLocation } from "@/context/location"
-import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
@@ -31,71 +31,65 @@ export const DialogSelectMcp: Component = () => {
   const totalCount = createMemo(() => items().length)
 
   return (
-    <Dialog>
-      <DialogHeader>
-        <DialogTitleGroup
-          title={language.t("dialog.mcp.title")}
-          description={language.t("dialog.mcp.description", { enabled: enabledCount(), total: totalCount() })}
-        />
-      </DialogHeader>
-      <DialogBody>
-        <List
-          class="px-3"
-          search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
-          emptyMessage={language.t("dialog.mcp.empty")}
-          key={(x) => x?.name ?? ""}
-          items={items}
-          filterKeys={["name", "status"]}
-          sortBy={(a, b) => a.name.localeCompare(b.name)}
-          onSelect={(x) => {
-            if (!x || x.status === "pending" || toggle.isPending) return
-            toggle.mutate(x.name)
-          }}
-        >
-          {(i) => {
-            const mcpStatus = () =>
-              data.location.mcp.server.list({ directory: sdk().directory })?.find((server) => server.name === i.name)
-                ?.status
-            const status = () => mcpStatus()?.status
-            const statusLabel = () => {
-              const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
-              if (!key) return
-              return language.t(key)
-            }
-            const error = () => {
-              const s = mcpStatus()
-              if (s?.status === "failed") return s.error
-            }
-            const enabled = () => status() === "connected"
-            return (
-              <div class="w-full flex items-center justify-between gap-x-3">
-                <div class="flex flex-col gap-0.5 min-w-0">
-                  <div class="flex items-center gap-2">
-                    <span class="truncate">{i.name}</span>
-                    <Show when={statusLabel()}>
-                      <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
-                    </Show>
-                  </div>
-                  <Show when={error()}>
-                    <span class="text-11-regular text-text-weaker truncate">{error()}</span>
+    <Dialog
+      title={language.t("dialog.mcp.title")}
+      description={language.t("dialog.mcp.description", { enabled: enabledCount(), total: totalCount() })}
+    >
+      <List
+        class="px-3"
+        search={{ placeholder: language.t("common.search.placeholder"), autofocus: true }}
+        emptyMessage={language.t("dialog.mcp.empty")}
+        key={(x) => x?.name ?? ""}
+        items={items}
+        filterKeys={["name", "status"]}
+        sortBy={(a, b) => a.name.localeCompare(b.name)}
+        onSelect={(x) => {
+          if (!x || x.status === "pending" || toggle.isPending) return
+          toggle.mutate(x.name)
+        }}
+      >
+        {(i) => {
+          const mcpStatus = () =>
+            data.location.mcp.server.list({ directory: sdk().directory })?.find((server) => server.name === i.name)
+              ?.status
+          const status = () => mcpStatus()?.status
+          const statusLabel = () => {
+            const key = status() ? statusLabels[status() as keyof typeof statusLabels] : undefined
+            if (!key) return
+            return language.t(key)
+          }
+          const error = () => {
+            const s = mcpStatus()
+            if (s?.status === "failed") return s.error
+          }
+          const enabled = () => status() === "connected"
+          return (
+            <div class="w-full flex items-center justify-between gap-x-3">
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <div class="flex items-center gap-2">
+                  <span class="truncate">{i.name}</span>
+                  <Show when={statusLabel()}>
+                    <span class="text-11-regular text-text-weaker">{statusLabel()}</span>
                   </Show>
                 </div>
-                <div onClick={(e) => e.stopPropagation()}>
-                  <Switch
-                    appearance="standard"
-                    checked={enabled()}
-                    disabled={status() === "pending" || (toggle.isPending && toggle.variables === i.name)}
-                    onChange={() => {
-                      if (toggle.isPending) return
-                      toggle.mutate(i.name)
-                    }}
-                  />
-                </div>
+                <Show when={error()}>
+                  <span class="text-11-regular text-text-weaker truncate">{error()}</span>
+                </Show>
               </div>
-            )
-          }}
-        </List>
-      </DialogBody>
+              <div onClick={(e) => e.stopPropagation()}>
+                <Switch
+                  checked={enabled()}
+                  disabled={status() === "pending" || (toggle.isPending && toggle.variables === i.name)}
+                  onChange={() => {
+                    if (toggle.isPending) return
+                    toggle.mutate(i.name)
+                  }}
+                />
+              </div>
+            </div>
+          )
+        }}
+      </List>
     </Dialog>
   )
 }

packages/app/src/components/dialog-select-model-unpaid-v2.stories.tsx

@@ -39,7 +39,7 @@ function SelectModelWithoutProviders() {
   onMount(open)
 
   return (
-    <Button variant="neutral" onClick={open}>
+    <Button variant="secondary" onClick={open}>
       Open select model dialog
     </Button>
   )

packages/app/src/components/dialog-select-model-unpaid-v2.tsx

@@ -1,8 +1,8 @@
-import { DialogBody, DialogHeader, DialogTitle, Dialog } from "@opencode-ai/ui/dialog"
-import { Badge } from "@opencode-ai/ui/badge"
-import { Icon } from "@opencode-ai/ui/icon"
+import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme } from "@opencode-ai/ui/theme"
 import { createMemo, onCleanup, onMount, type Component, For, Show } from "solid-js"
@@ -66,7 +66,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
   })
 
   return (
-    <Dialog
+    <DialogV2
       fit
       containerClass="!h-auto max-h-[calc(100vh_-_16px)] !w-[min(calc(100vw_-_16px),640px)]"
       class="[font-family:var(--v2-font-family-sans)] [&_[data-slot=dialog-header]]:!px-5 [&_[data-slot=dialog-header-title]]:!text-[15px] [&_[data-slot=dialog-header-title]]:!tracking-[-0.13px]"
@@ -84,7 +84,7 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
             </div>
             <For each={freeModels()}>
               {(item) => (
-                <Tooltip
+                <TooltipV2
                   class="w-full"
                   placement="right-start"
                   gutter={6}
@@ -105,15 +105,15 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
                     onClick={() => selectModel(item)}
                   >
                     <span class="min-w-0 truncate">{displayModelName(item.name)}</span>
-                    <Badge class="shrink-0">{language.t("model.tag.free")}</Badge>
+                    <Tag class="shrink-0">{language.t("model.tag.free")}</Tag>
                     <Show when={item.latest}>
-                      <Badge class="shrink-0">{language.t("model.tag.latest")}</Badge>
+                      <Tag class="shrink-0">{language.t("model.tag.latest")}</Tag>
                     </Show>
                     <Show when={currentKey() === modelKey(item)}>
                       <Icon name="check" class="ml-auto size-4 shrink-0 text-v2-icon-icon-base" />
                     </Show>
                   </button>
-                </Tooltip>
+                </TooltipV2>
               )}
             </For>
           </div>
@@ -172,6 +172,6 @@ export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (pro
           </div>
         </div>
       </DialogBody>
-    </Dialog>
+    </DialogV2>
   )
 }

packages/app/src/components/dialog-select-model-unpaid.tsx

@@ -1,9 +1,9 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { List, type ListRef } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Badge } from "@opencode-ai/ui/badge"
+import { Tag } from "@opencode-ai/ui/tag"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { type Component, Show } from "solid-js"
 import { useLocal } from "@/context/local"
@@ -40,113 +40,108 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
   }
 
   return (
-    <Dialog class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none">
-      <DialogHeader>
-        <DialogTitle>{language.t("dialog.model.select.title")}</DialogTitle>
-      </DialogHeader>
-      <DialogBody>
-        <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
-          <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
-          <List
-            class="px-3 [&_[data-slot=list-scroll]]:overflow-visible"
-            ref={(ref) => (listRef = ref)}
-            items={model.list}
-            current={model.current()}
-            key={(x) => `${x.provider.id}:${x.id}`}
-            itemWrapper={(item, node) => (
-              <Tooltip
-                appearance="standard"
-                class="w-full"
-                placement="right-start"
-                gutter={12}
-                value={
-                  <ModelTooltip
-                    model={item}
-                    latest={item.latest}
-                    free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
-                  />
-                }
+    <Dialog
+      title={language.t("dialog.model.select.title")}
+      class="overflow-y-auto [&_[data-slot=dialog-body]]:overflow-visible [&_[data-slot=dialog-body]]:flex-none"
+    >
+      <div class="flex flex-col gap-3 px-2.5" onKeyDown={handleKeyDown}>
+        <div class="text-14-medium text-text-base px-2.5">{language.t("dialog.model.unpaid.freeModels.title")}</div>
+        <List
+          class="px-3 [&_[data-slot=list-scroll]]:overflow-visible"
+          ref={(ref) => (listRef = ref)}
+          items={model.list}
+          current={model.current()}
+          key={(x) => `${x.provider.id}:${x.id}`}
+          itemWrapper={(item, node) => (
+            <Tooltip
+              class="w-full"
+              placement="right-start"
+              gutter={12}
+              value={
+                <ModelTooltip
+                  model={item}
+                  latest={item.latest}
+                  free={item.provider.id === "opencode" && (!item.cost || item.cost.input === 0)}
+                />
+              }
+            >
+              {node}
+            </Tooltip>
+          )}
+          onSelect={(x) => {
+            model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+              recent: true,
+            })
+            dialog.close()
+          }}
+        >
+          {(i) => (
+            <div class="w-full flex items-center gap-x-2.5">
+              <span>{i.name}</span>
+              <Tag>{language.t("model.tag.free")}</Tag>
+              <Show when={i.latest}>
+                <Tag>{language.t("model.tag.latest")}</Tag>
+              </Show>
+            </div>
+          )}
+        </List>
+      </div>
+      <div class="px-1.5 pb-1.5">
+        <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
+          <div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
+            <div class="px-2 text-14-medium text-text-base">{language.t("dialog.model.unpaid.addMore.title")}</div>
+            <div class="w-full">
+              <List
+                class="w-full px-3"
+                key={(p) => p.id}
+                items={providers.popular}
+                activeIcon="plus-small"
+                sortBy={(a, b) => {
+                  if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
+                    return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
+                  return a.name.localeCompare(b.name)
+                }}
+                onSelect={(x) => {
+                  if (!x) return
+                  connect(x.id)
+                }}
               >
-                {node}
-              </Tooltip>
-            )}
-            onSelect={(x) => {
-              model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
-                recent: true,
-              })
-              dialog.close()
-            }}
-          >
-            {(i) => (
-              <div class="w-full flex items-center gap-x-2.5">
-                <span>{i.name}</span>
-                <Badge appearance="standard">{language.t("model.tag.free")}</Badge>
-                <Show when={i.latest}>
-                  <Badge appearance="standard">{language.t("model.tag.latest")}</Badge>
-                </Show>
-              </div>
-            )}
-          </List>
-        </div>
-        <div class="px-1.5 pb-1.5">
-          <div class="w-full rounded-sm border border-border-weak-base bg-surface-raised-base">
-            <div class="w-full flex flex-col items-start gap-4 px-1.5 pt-4 pb-4">
-              <div class="px-2 text-14-medium text-text-base">{language.t("dialog.model.unpaid.addMore.title")}</div>
-              <div class="w-full">
-                <List
-                  class="w-full px-3"
-                  key={(p) => p.id}
-                  items={providers.popular}
-                  activeIcon="plus-small"
-                  sortBy={(a, b) => {
-                    if (popularProviders.includes(a.id) && popularProviders.includes(b.id))
-                      return popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)
-                    return a.name.localeCompare(b.name)
-                  }}
-                  onSelect={(x) => {
-                    if (!x) return
-                    connect(x.id)
-                  }}
-                >
-                  {(i) => (
-                    <div class="w-full flex items-center gap-x-3">
-                      <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
-                      <span>{i.name}</span>
-                      <Show when={i.id === "opencode"}>
+                {(i) => (
+                  <div class="w-full flex items-center gap-x-3">
+                    <ProviderIcon data-slot="list-item-extra-icon" id={i.id} />
+                    <span>{i.name}</span>
+                    <Show when={i.id === "opencode"}>
+                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.opencode.tagline")}</div>
+                    </Show>
+                    <Show when={i.id === "opencode"}>
+                      <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                    </Show>
+                    <Show when={i.id === "opencode-go"}>
+                      <>
                         <div class="text-14-regular text-text-weak">
-                          {language.t("dialog.provider.opencode.tagline")}
+                          {language.t("dialog.provider.opencodeGo.tagline")}
                         </div>
-                      </Show>
-                      <Show when={i.id === "opencode"}>
-                        <Badge appearance="standard">{language.t("dialog.provider.tag.recommended")}</Badge>
-                      </Show>
-                      <Show when={i.id === "opencode-go"}>
-                        <>
-                          <div class="text-14-regular text-text-weak">
-                            {language.t("dialog.provider.opencodeGo.tagline")}
-                          </div>
-                          <Badge appearance="standard">{language.t("dialog.provider.tag.recommended")}</Badge>
-                        </>
-                      </Show>
-                      <Show when={i.id === "anthropic"}>
-                        <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
-                      </Show>
-                    </div>
-                  )}
-                </List>
-                <Button
-                  variant="ghost"
-                  class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
-                  icon="dot-grid"
-                  onClick={all}
-                >
-                  {language.t("dialog.provider.viewAll")}
-                </Button>
-              </div>
+                        <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
+                      </>
+                    </Show>
+                    <Show when={i.id === "anthropic"}>
+                      <div class="text-14-regular text-text-weak">{language.t("dialog.provider.anthropic.note")}</div>
+                    </Show>
+                  </div>
+                )}
+              </List>
+              <Button
+                variant="ghost"
+                class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
+                icon="dot-grid"
+                onClick={all}
+              >
+                {language.t("dialog.provider.viewAll")}
+              </Button>
             </div>
           </div>
         </div>
-      </DialogBody>
+      </div>
     </Dialog>
   )
 }

packages/app/src/components/dialog-select-model.tsx

@@ -5,14 +5,16 @@ import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { popularProviders } from "@/hooks/use-providers"
 import { Button } from "@opencode-ai/ui/button"
-import { Badge } from "@opencode-ai/ui/badge"
-import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { Tag } from "@opencode-ai/ui/tag"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Menu } from "@opencode-ai/ui/menu"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { Tag as TagV2 } from "@opencode-ai/ui/v2/badge-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { ModelTooltip } from "./model-tooltip"
 import { useLanguage } from "@/context/language"
 import { decode64 } from "@/utils/base64"
@@ -79,7 +81,6 @@ const ModelList: Component<{
       }}
       itemWrapper={(item, node) => (
         <Tooltip
-          appearance="standard"
           class="w-full"
           placement="right-start"
           gutter={12}
@@ -100,10 +101,10 @@ const ModelList: Component<{
         <div class="w-full flex items-center gap-x-2 text-13-regular">
           <span class="truncate">{i.name}</span>
           <Show when={isFree(i.provider.id, i.cost)}>
-            <Badge appearance="standard">{language.t("model.tag.free")}</Badge>
+            <Tag>{language.t("model.tag.free")}</Tag>
           </Show>
           <Show when={i.latest}>
-            <Badge appearance="standard">{language.t("model.tag.latest")}</Badge>
+            <Tag>{language.t("model.tag.latest")}</Tag>
           </Show>
         </div>
       )}
@@ -192,19 +193,21 @@ export function ModelSelectorPopover(props: {
             class="p-1"
             action={
               <div class="flex items-center gap-1">
-                <Tooltip appearance="standard" placement="top" value={language.t("command.provider.connect")}>
+                <Tooltip placement="top" value={language.t("command.provider.connect")}>
                   <IconButton
-                    icon={<Icon name="plus-small" />}
+                    icon="plus-small"
                     variant="ghost"
+                    iconSize="normal"
                     class="size-6"
                     aria-label={language.t("command.provider.connect")}
                     onClick={handleConnectProvider}
                   />
                 </Tooltip>
-                <Tooltip appearance="standard" placement="top" value={language.t("dialog.model.manage")}>
+                <Tooltip placement="top" value={language.t("dialog.model.manage")}>
                   <IconButton
-                    icon={<Icon name="sliders" />}
+                    icon="sliders"
                     variant="ghost"
+                    iconSize="normal"
                     class="size-6"
                     aria-label={language.t("dialog.model.manage")}
                     onClick={handleManage}
@@ -370,10 +373,10 @@ function ModelSelectorPopoverV2View(props: {
   })
 
   return (
-    <Menu open={store.open} modal={false} placement="top-start" gutter={6} onOpenChange={setOpen}>
-      <Menu.Trigger as={props.trigger} />
-      <Menu.Portal>
-        <Menu.Content
+    <MenuV2 open={store.open} modal={false} placement="top-start" gutter={6} onOpenChange={setOpen}>
+      <MenuV2.Trigger as={props.trigger} />
+      <MenuV2.Portal>
+        <MenuV2.Content
           ref={(element: HTMLDivElement) => (contentRef = element)}
           class="w-[284px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 !p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none"
           onPointerDownOutside={dismiss.preventTriggerRestore}
@@ -446,14 +449,14 @@ function ModelSelectorPopoverV2View(props: {
               >
                 <For each={groups()}>
                   {(group) => (
-                    <Menu.Group>
-                      <Menu.GroupLabel class="gap-2 px-3">
+                    <MenuV2.Group>
+                      <MenuV2.GroupLabel class="gap-2 px-3">
                         <span class="min-w-0 truncate">{group.items[0].provider.name}</span>
-                      </Menu.GroupLabel>
-                      <Menu.RadioGroup value={props.current}>
+                      </MenuV2.GroupLabel>
+                      <MenuV2.RadioGroup value={props.current}>
                         <For each={group.items}>
                           {(item) => (
-                            <Tooltip
+                            <TooltipV2
                               class="w-full"
                               placement="right-start"
                               gutter={6}
@@ -467,7 +470,7 @@ function ModelSelectorPopoverV2View(props: {
                                 />
                               }
                             >
-                              <Menu.RadioItem
+                              <MenuV2.RadioItem
                                 value={modelKey(item)}
                                 data-option-key={modelKey(item)}
                                 data-selected-model={props.current === modelKey(item) ? true : undefined}
@@ -481,17 +484,17 @@ function ModelSelectorPopoverV2View(props: {
                               >
                                 <span class="min-w-0 truncate leading-5">{item.name}</span>
                                 <Show when={isFree(item.provider.id, item.cost)}>
-                                  <Badge class="shrink-0">{language.t("model.tag.free")}</Badge>
+                                  <TagV2 class="shrink-0">{language.t("model.tag.free")}</TagV2>
                                 </Show>
                                 <Show when={item.latest}>
-                                  <Badge class="shrink-0">{language.t("model.tag.latest")}</Badge>
+                                  <TagV2 class="shrink-0">{language.t("model.tag.latest")}</TagV2>
                                 </Show>
-                              </Menu.RadioItem>
-                            </Tooltip>
+                              </MenuV2.RadioItem>
+                            </TooltipV2>
                           )}
                         </For>
-                      </Menu.RadioGroup>
-                    </Menu.Group>
+                      </MenuV2.RadioGroup>
+                    </MenuV2.Group>
                   )}
                 </For>
               </Show>
@@ -499,7 +502,7 @@ function ModelSelectorPopoverV2View(props: {
           </ScrollView>
           <div class="h-px bg-v2-border-border-muted" />
           <div class="flex flex-col p-0.5">
-            <Menu.Item
+            <MenuV2.Item
               data-option-key={manageKey}
               classList={{ "!bg-v2-overlay-simple-overlay-hover": store.active === manageKey }}
               onMouseEnter={() => {
@@ -510,11 +513,11 @@ function ModelSelectorPopoverV2View(props: {
             >
               <Icon name="outline-sliders" size="small" />
               <span class="min-w-0 flex-1 truncate leading-5">{language.t("dialog.model.manage")}</span>
-            </Menu.Item>
+            </MenuV2.Item>
           </div>
-        </Menu.Content>
-      </Menu.Portal>
-    </Menu>
+        </MenuV2.Content>
+      </MenuV2.Portal>
+    </MenuV2>
   )
 }
 
@@ -537,19 +540,18 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
   }
 
   return (
-    <Dialog>
-      <DialogHeader hideClose>
-        <DialogTitle>{language.t("dialog.model.select.title")}</DialogTitle>
+    <Dialog
+      title={language.t("dialog.model.select.title")}
+      action={
         <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={provider}>
           {language.t("command.provider.connect")}
         </Button>
-      </DialogHeader>
-      <DialogBody>
-        <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
-        <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
-          {language.t("dialog.model.manage")}
-        </Button>
-      </DialogBody>
+      }
+    >
+      <ModelList provider={props.provider} model={props.model} onSelect={() => dialog.close()} />
+      <Button variant="ghost" class="ml-3 mt-5 mb-6 text-text-base self-start" onClick={manage}>
+        {language.t("dialog.model.manage")}
+      </Button>
     </Dialog>
   )
 }

packages/app/src/components/dialog-select-server.tsx

@@ -1,6 +1,5 @@
 import { Button } from "@opencode-ai/ui/button"
-import { Menu } from "@opencode-ai/ui/menu"
-import { Icon } from "@opencode-ai/ui/icon"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
@@ -157,47 +156,49 @@ export function ServerConnectionList(props: {
               />
               <div class="flex items-center justify-center gap-4 pl-4">
                 <Show when={i.type === "http"}>
-                  <Menu appearance="standard">
-                    <Menu.Trigger
+                  <DropdownMenu>
+                    <DropdownMenu.Trigger
                       as={IconButton}
-                      icon={<Icon name="dot-grid" />}
+                      icon="dot-grid"
                       variant="ghost"
                       class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
                       onClick={(e: MouseEvent) => e.stopPropagation()}
                       onPointerDown={(e: PointerEvent) => e.stopPropagation()}
                     />
-                    <Menu.Portal>
-                      <Menu.Content class="mt-1">
-                        <Menu.Item
+                    <DropdownMenu.Portal>
+                      <DropdownMenu.Content class="mt-1">
+                        <DropdownMenu.Item
                           onSelect={() => {
                             if (i.type !== "http") return
                             props.onEdit(i)
                           }}
                         >
-                          {language.t("dialog.server.menu.edit")}
-                        </Menu.Item>
+                          <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
+                        </DropdownMenu.Item>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
-                          <Menu.Item onSelect={() => props.domain.defaults.set(key)}>
-                            {language.t("dialog.server.menu.default")}
-                          </Menu.Item>
+                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(key)}>
+                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.default")}</DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
                         </Show>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
-                          <Menu.Item onSelect={() => props.domain.defaults.set(null)}>
-                            {language.t("dialog.server.menu.defaultRemove")}
-                          </Menu.Item>
+                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(null)}>
+                            <DropdownMenu.ItemLabel>
+                              {language.t("dialog.server.menu.defaultRemove")}
+                            </DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
                         </Show>
                         <Show when={props.domain.connection.canRemove(key)}>
-                          <Menu.Separator />
-                          <Menu.Item
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Item
                             onSelect={() => props.domain.connection.remove(key)}
                             class="text-text-on-critical-base hover:bg-surface-critical-weak"
                           >
-                            {language.t("dialog.server.menu.delete")}
-                          </Menu.Item>
+                            <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
+                          </DropdownMenu.Item>
                         </Show>
-                      </Menu.Content>
-                    </Menu.Portal>
-                  </Menu>
+                      </DropdownMenu.Content>
+                    </DropdownMenu.Portal>
+                  </DropdownMenu>
                 </Show>
               </div>
             </div>
@@ -207,7 +208,7 @@ export function ServerConnectionList(props: {
 
       <div class="shrink-0 pb-5">
         <Button
-          variant="neutral"
+          variant="secondary"
           icon="plus-small"
           size="large"
           onClick={props.onAdd}
@@ -243,7 +244,7 @@ export function ServerConnectionForm(props: { form: ServerConnectionFormControll
       />
       <div class="shrink-0 pb-5">
         <Button
-          variant="contrast"
+          variant="primary"
           size="large"
           onClick={props.form.submit}
           disabled={props.form.state.busy()}

packages/app/src/components/dialog-usage-exceeded.tsx

@@ -2,7 +2,7 @@ import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
+import { Dialog } from "@opencode-ai/ui/dialog"
 import { JSX } from "solid-js"
 
 export type DialogGoUpsellProps = {
@@ -30,22 +30,17 @@ export function DialogUsageExceeded(props: DialogGoUpsellProps) {
   }
 
   return (
-    <Dialog fit>
-      <DialogHeader>
-        <DialogTitleGroup title={props.title} description={props.description} />
-      </DialogHeader>
-      <DialogBody>
-        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
-          <div class="flex justify-end gap-2">
-            <Button variant="ghost" size="large" onClick={dismiss}>
-              {language.t("dialog.usageExceeded.dontShowAgain")}
-            </Button>
-            <Button variant="contrast" size="large" onClick={runAction}>
-              {props.actionLabel}
-            </Button>
-          </div>
+    <Dialog title={props.title} description={props.description} fit>
+      <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+        <div class="flex justify-end gap-2">
+          <Button variant="ghost" size="large" onClick={dismiss}>
+            {language.t("dialog.usageExceeded.dontShowAgain")}
+          </Button>
+          <Button variant="primary" size="large" onClick={runAction}>
+            {props.actionLabel}
+          </Button>
         </div>
-      </DialogBody>
+      </div>
     </Dialog>
   )
 }

packages/app/src/components/file-tree-v2.tsx

@@ -1,6 +1,6 @@
 import { useFile } from "@/context/file"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
-import "@opencode-ai/ui/file-tree.css"
+import "@opencode-ai/ui/v2/file-tree-v2.css"
 import {
   createEffect,
   createMemo,
@@ -13,7 +13,7 @@ import {
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import type { FileNode } from "@/types"
-import { Icon } from "@opencode-ai/ui/icon"
+import { Icon } from "@opencode-ai/ui/v2/icon"
 import { pathToFileUrl, withFileDragImage, type Kind } from "@/components/file-tree"
 import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
 import {

packages/app/src/components/project-settings-extensions.tsx

@@ -1,13 +1,13 @@
 import { Icon } from "@opencode-ai/ui/icon"
-import { Switch } from "@opencode-ai/ui/switch"
-import { Tabs } from "@opencode-ai/ui/tabs"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
 import { type Component, For, Show, createEffect, createMemo, createResource, createSignal } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useMcpToggle } from "@/context/mcp"
 import { useWorkspaceLocation } from "@/context/location"
 import { useServerSDK } from "@/context/server-sdk"
 import { useData } from "@/context/server"
-import { pluginLabels } from "@/utils/plugin"
+import { pluginLabel } from "@/utils/plugin"
 import { ExternalLink } from "./external-link"
 
 type SkillItem = {
@@ -102,10 +102,10 @@ export const ProjectSettingsExtensions: Component = () => {
     () => (serverSDK.connection.status() === "connected" ? directorySDK().directory : undefined),
     (directory) => serverSDK.api.plugin.list({ location: { directory } }).then((result) => result.data),
   )
-  const globalPlugins = createMemo(() => pluginLabels(globalPluginList.latest ?? []))
+  const globalPlugins = createMemo(() => (globalPluginList.latest ?? []).map(pluginLabel))
   const projectPlugins = createMemo(() => {
     const shared = new Set(globalPlugins())
-    return pluginLabels(projectPluginList.latest ?? []).filter((name) => !shared.has(name))
+    return (projectPluginList.latest ?? []).map(pluginLabel).filter((name) => !shared.has(name))
   })
 
   const serverSkills = createMemo(() => data.location.skill.list() ?? [])
@@ -149,15 +149,15 @@ export const ProjectSettingsExtensions: Component = () => {
         <span>{language.t("project.settings.extensions.description")}</span>
       </div>
 
-      <Tabs variant="pill" defaultValue="mcps" class="project-settings-extension-tabs">
-        <Tabs.List>
-          <Tabs.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</Tabs.Trigger>
-          <Tabs.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</Tabs.Trigger>
-          <Tabs.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</Tabs.Trigger>
+      <TabsV2 variant="pill" defaultValue="mcps" class="project-settings-extension-tabs">
+        <TabsV2.List>
+          <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
+          <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
           {/* TODO: Restore LSP status when V2 exposes it. */}
-        </Tabs.List>
+        </TabsV2.List>
 
-        <Tabs.Content value="mcps">
+        <TabsV2.Content value="mcps">
           <div class="project-settings-extension-section">
             <div class="project-settings-extension-section-header">
               <span>{language.t("project.settings.extensions.added")}</span>
@@ -168,9 +168,9 @@ export const ProjectSettingsExtensions: Component = () => {
             </Show>
             <SharedSection count={globalMcpNames().length}>{mcpRows(globalMcpNames())}</SharedSection>
           </div>
-        </Tabs.Content>
+        </TabsV2.Content>
 
-        <Tabs.Content value="plugins">
+        <TabsV2.Content value="plugins">
           <div class="project-settings-extension-section">
             <div class="project-settings-extension-section-header">
               <span>{language.t("project.settings.extensions.added")}</span>
@@ -181,9 +181,9 @@ export const ProjectSettingsExtensions: Component = () => {
             </Show>
             <SharedSection count={globalPlugins().length}>{pluginRows(globalPlugins())}</SharedSection>
           </div>
-        </Tabs.Content>
+        </TabsV2.Content>
 
-        <Tabs.Content value="skills">
+        <TabsV2.Content value="skills">
           <div class="project-settings-extension-section">
             <div class="project-settings-extension-section-header">
               <span>{language.t("project.settings.extensions.added")}</span>
@@ -196,8 +196,8 @@ export const ProjectSettingsExtensions: Component = () => {
             </Show>
             <SharedSection count={serverSkills().length}>{skillRows(serverSkills())}</SharedSection>
           </div>
-        </Tabs.Content>
-      </Tabs>
+        </TabsV2.Content>
+      </TabsV2>
     </div>
   )
 }

packages/app/src/components/prompt-input-v2.tsx

@@ -1,10 +1,10 @@
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Keybind } from "@opencode-ai/ui/keybind"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import type { ReferenceInfo } from "@opencode-ai/client/promise"
 import { createEffect, createMemo, on, Show } from "solid-js"
 import { ModelSelectorPopoverV2 } from "@/components/dialog-select-model"
@@ -503,20 +503,20 @@ function PromptInputV2ModelControl(props: {
   )
   return (
     <Show when={!props.loading}>
-      <Tooltip
+      <TooltipV2
         placement="top"
         gutter={4}
         value={
           <>
             {props.title}
-            <Keybind keys={props.keybind} variant="neutral" />
+            <KeybindV2 keys={props.keybind} variant="neutral" />
           </>
         }
       >
         <Show
           when={props.paid}
           fallback={
-            <Button
+            <ButtonV2
               data-action="prompt-model"
               data-control-type="dialog"
               variant="ghost-muted"
@@ -527,13 +527,13 @@ function PromptInputV2ModelControl(props: {
               onClick={props.onUnpaidClick}
             >
               {content()}
-            </Button>
+            </ButtonV2>
           }
         >
           <ModelSelectorPopoverV2
             model={props.model}
             trigger={(triggerProps) => (
-              <Button
+              <ButtonV2
                 {...triggerProps}
                 variant="ghost-muted"
                 size="normal"
@@ -544,12 +544,12 @@ function PromptInputV2ModelControl(props: {
                 data-control-type="popover"
               >
                 {content()}
-              </Button>
+              </ButtonV2>
             )}
             onClose={props.onClose}
           />
         </Show>
-      </Tooltip>
+      </TooltipV2>
     </Show>
   )
 }

packages/app/src/components/prompt-project-selector.tsx

@@ -9,9 +9,10 @@ import {
   type ComponentProps,
 } from "solid-js"
 import { createStore } from "solid-js/store"
-import { Menu } from "@opencode-ai/ui/menu"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
-import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { getProjectAvatarVariant } from "@/context/layout"
 import { useLanguage } from "@/context/language"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
@@ -276,8 +277,7 @@ export function PromptProjectSelector(props: {
   })
 
   return (
-    <Menu
-      appearance="standard"
+    <DropdownMenu
       open={triggerReady() && props.controller.open()}
       placement={props.placement ?? "bottom"}
       gutter={4}
@@ -287,9 +287,9 @@ export function PromptProjectSelector(props: {
         props.controller.setOpen(open)
       }}
     >
-      <Menu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
-      <Menu.Portal>
-        <Menu.Content
+      <DropdownMenu.Trigger as={ProjectTrigger} ref={setTriggerRef} controller={props.controller} />
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
           ref={contentRef}
           id="prompt-project-menu"
           class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0 shadow-[var(--v2-elevation-floating)] focus:outline-none [&[data-closed]]:!animate-none"
@@ -360,13 +360,13 @@ export function PromptProjectSelector(props: {
               <Show
                 when={props.controller.servers().length > 1}
                 fallback={
-                  <Menu.RadioGroup value={selectedValue()}>
+                  <DropdownMenu.RadioGroup value={selectedValue()}>
                     <For each={props.controller.projects()}>
                       {(project) => (
                         <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
                       )}
                     </For>
-                  </Menu.RadioGroup>
+                  </DropdownMenu.RadioGroup>
                 }
               >
                 <For
@@ -381,7 +381,7 @@ export function PromptProjectSelector(props: {
                       <div class="flex h-7 select-none items-center pl-1.5 pr-3 text-[11px] font-[530] leading-none tracking-[0.05px] text-v2-text-text-faint">
                         {server!.name}
                       </div>
-                      <Menu.RadioGroup value={selectedValue()}>
+                      <DropdownMenu.RadioGroup value={selectedValue()}>
                         <For
                           each={props.controller.projects().filter((project) => project.server?.key === server!.key)}
                         >
@@ -389,7 +389,7 @@ export function PromptProjectSelector(props: {
                             <ProjectItem project={project} controller={props.controller} onSelect={selectProject} />
                           )}
                         </For>
-                      </Menu.RadioGroup>
+                      </DropdownMenu.RadioGroup>
                     </div>
                   )}
                 </For>
@@ -408,8 +408,8 @@ export function PromptProjectSelector(props: {
                 />
               }
             >
-              <Menu.Sub>
-                <Menu.SubTrigger
+              <DropdownMenu.Sub>
+                <DropdownMenu.SubTrigger
                   id={props.controller.actionKey()}
                   data-option-key={props.controller.actionKey()}
                   class={projectActionClass}
@@ -419,23 +419,24 @@ export function PromptProjectSelector(props: {
                   onMouseEnter={() => props.controller.setActive(props.controller.actionKey())}
                 >
                   <Icon name="plus" size="small" />
-                  <span class="min-w-0 flex-1 truncate leading-5">
+                  <span data-slot="dropdown-menu-item-label" class="min-w-0 flex-1 truncate leading-5">
                     {props.controller.labels.add()}
                   </span>
-                </Menu.SubTrigger>
-                <Menu.Portal>
-                  <Menu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
+                  <Icon name="chevron-right" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+                </DropdownMenu.SubTrigger>
+                <DropdownMenu.Portal>
+                  <DropdownMenu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
                     <For each={props.controller.servers()}>
                       {(server) => <ServerAction server={server!} onSelect={selectAction} />}
                     </For>
-                  </Menu.SubContent>
-                </Menu.Portal>
-              </Menu.Sub>
+                  </DropdownMenu.SubContent>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Sub>
             </Show>
           </div>
-        </Menu.Content>
-      </Menu.Portal>
-    </Menu>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
   )
 }
 
@@ -506,7 +507,7 @@ function ProjectItem(props: {
 }) {
   const key = () => props.controller.projectKey(props.project)
   return (
-    <Menu.RadioItem
+    <DropdownMenu.RadioItem
       id={key()}
       value={key()}
       data-option-key={key()}
@@ -533,8 +534,11 @@ function ProjectItem(props: {
         src={getProjectAvatarSource(props.project.id, props.project.icon)}
         variant={getProjectAvatarVariant(props.project.icon?.color)}
       />
-      <span class="min-w-0 truncate leading-5">{displayName(props.project)}</span>
-    </Menu.RadioItem>
+      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">{displayName(props.project)}</DropdownMenu.ItemLabel>
+      <DropdownMenu.ItemIndicator style={{ width: "14px", height: "14px", right: "12px" }}>
+        <IconV2 name="check" size="small" class="shrink-0 text-v2-icon-icon-base" />
+      </DropdownMenu.ItemIndicator>
+    </DropdownMenu.RadioItem>
   )
 }
 
@@ -548,7 +552,7 @@ function ProjectAction(props: {
 }) {
   const key = () => props.controller.actionKey(props.server)
   return (
-    <Menu.Item
+    <DropdownMenu.Item
       id={key()}
       data-option-key={key()}
       class="h-7 gap-2 rounded-sm px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base data-[highlighted]:!bg-v2-overlay-simple-overlay-hover"
@@ -569,17 +573,17 @@ function ProjectAction(props: {
       onSelect={() => props.onSelect(props.server)}
     >
       <Icon name="plus" size="small" />
-      <span class="min-w-0 truncate leading-5">
+      <DropdownMenu.ItemLabel class="min-w-0 truncate leading-5">
         {props.controller.labels.add()}
-      </span>
-    </Menu.Item>
+      </DropdownMenu.ItemLabel>
+    </DropdownMenu.Item>
   )
 }
 
 function ServerAction(props: { server: { key: string; name: string }; onSelect: (server: string) => void }) {
   return (
-    <Menu.Item class={projectActionClass} onSelect={() => props.onSelect(props.server.key)}>
-      <span class="min-w-0 flex-1 truncate leading-5">{props.server.name}</span>
-    </Menu.Item>
+    <DropdownMenu.Item class={projectActionClass} onSelect={() => props.onSelect(props.server.key)}>
+      <DropdownMenu.ItemLabel class="min-w-0 flex-1 truncate leading-5">{props.server.name}</DropdownMenu.ItemLabel>
+    </DropdownMenu.Item>
   )
 }

packages/app/src/components/prompt-workspace-selector.tsx

@@ -1,7 +1,7 @@
 import { createMemo, createSignal, For, Show } from "solid-js"
-import { Menu } from "@opencode-ai/ui/menu"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon } from "@opencode-ai/ui/icon"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
 import { getFilename } from "@opencode-ai/util/path"
 import { useLanguage } from "@/context/language"
 import { sameDirectory } from "@/utils/workspace"
@@ -58,7 +58,7 @@ export function PromptWorkspaceSelector(props: {
   return (
     <>
       <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
-      <Tooltip
+      <TooltipV2
         placement="top"
         openDelay={800}
         value={
@@ -77,8 +77,8 @@ export function PromptWorkspaceSelector(props: {
         contentClass={props.onboarding ? "max-w-[280px]" : undefined}
         class="min-w-0"
       >
-        <Menu placement="bottom" gutter={4} onOpenChange={onOpenChange}>
-          <Menu.Trigger
+        <MenuV2 placement="bottom" gutter={4} onOpenChange={onOpenChange}>
+          <MenuV2.Trigger
             aria-description={language.t("session.new.workspace.trigger.tooltip")}
             class="flex h-6 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed data-[expanded]:text-v2-text-text-muted"
           >
@@ -92,14 +92,14 @@ export function PromptWorkspaceSelector(props: {
               />
             </Show>
             <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-          </Menu.Trigger>
-          <Menu.Portal>
-            <Menu.Content class="w-[200px]">
-              <Menu.Group>
-                <Menu.GroupLabel>{language.t("session.new.workspace.runIn")}</Menu.GroupLabel>
-                <Menu.Item onSelect={() => select("main")}>
+          </MenuV2.Trigger>
+          <MenuV2.Portal>
+            <MenuV2.Content class="w-[200px]">
+              <MenuV2.Group>
+                <MenuV2.GroupLabel>{language.t("session.new.workspace.runIn")}</MenuV2.GroupLabel>
+                <MenuV2.Item onSelect={() => select("main")}>
                   <Icon name="monitor" />
-                  <Tooltip
+                  <TooltipV2
                     placement="right"
                     openDelay={800}
                     value={
@@ -113,14 +113,14 @@ export function PromptWorkspaceSelector(props: {
                     class="min-w-0 flex-1"
                   >
                     <span class="min-w-0 truncate">{language.t("session.new.workspace.local")}</span>
-                  </Tooltip>
+                  </TooltipV2>
                   <Show when={selected() === "main"}>
                     <Icon name="check" size="small" class="shrink-0" />
                   </Show>
-                </Menu.Item>
-                <Menu.Item onSelect={() => select("create")}>
+                </MenuV2.Item>
+                <MenuV2.Item onSelect={() => select("create")}>
                   <Icon name="workspace-new" />
-                  <Tooltip
+                  <TooltipV2
                     placement="right"
                     openDelay={800}
                     value={
@@ -134,25 +134,25 @@ export function PromptWorkspaceSelector(props: {
                     class="min-w-0 flex-1"
                   >
                     <span class="min-w-0 truncate">{language.t("workspace.new")}</span>
-                  </Tooltip>
+                  </TooltipV2>
                   <Show when={selected() === "create"}>
                     <Icon name="check" size="small" class="shrink-0" />
                   </Show>
-                </Menu.Item>
-              </Menu.Group>
+                </MenuV2.Item>
+              </MenuV2.Group>
               <Show
                 when={props.workspaces.length > 0}
                 fallback={
                   <>
-                    <Menu.Separator class="h-[0.5px]" />
-                    <Menu.Item onSelect={() => (pending = { type: "viewAll" })}>
+                    <MenuV2.Separator class="h-[0.5px]" />
+                    <MenuV2.Item onSelect={() => (pending = { type: "viewAll" })}>
                       <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
-                    </Menu.Item>
+                    </MenuV2.Item>
                   </>
                 }
               >
-                <Menu.Separator class="h-[0.5px]" />
-                <Menu.Sub
+                <MenuV2.Separator class="h-[0.5px]" />
+                <MenuV2.Sub
                   gutter={0}
                   overlap
                   overflowPadding={8}
@@ -166,7 +166,7 @@ export function PromptWorkspaceSelector(props: {
                     requestAnimationFrame(() => searchInput?.focus())
                   }}
                 >
-                  <Menu.SubTrigger
+                  <MenuV2.SubTrigger
                     onKeyDown={(event) => {
                       if (
                         event.key === "ArrowRight" ||
@@ -181,9 +181,9 @@ export function PromptWorkspaceSelector(props: {
                     <span class="min-w-0 flex-1 truncate">
                       {language.t("session.new.workspace.existing").replace(/(…|\.{3})$/, "")}
                     </span>
-                  </Menu.SubTrigger>
-                  <Menu.Portal>
-                    <Menu.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
+                  </MenuV2.SubTrigger>
+                  <MenuV2.Portal>
+                    <MenuV2.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
                       <Show when={props.workspaces.length >= 10}>
                         <div class="flex h-7 items-center gap-2 rounded-sm ps-3 pe-2 text-v2-icon-icon-muted">
                           <Icon name="magnifying-glass" size="small" class="shrink-0" />
@@ -211,27 +211,27 @@ export function PromptWorkspaceSelector(props: {
                       </Show>
                       <For each={workspaces()}>
                         {(workspace) => (
-                          <Menu.Item onSelect={() => select(workspace)}>
+                          <MenuV2.Item onSelect={() => select(workspace)}>
                             <Icon name="workspace-isolated" />
                             <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
                             <Show when={selected() === workspace}>
                               <Icon name="check" size="small" class="shrink-0" />
                             </Show>
-                          </Menu.Item>
+                          </MenuV2.Item>
                         )}
                       </For>
-                      <Menu.Separator class="h-[0.5px]" />
-                      <Menu.Item onSelect={() => (pending = { type: "viewAll" })}>
+                      <MenuV2.Separator class="h-[0.5px]" />
+                      <MenuV2.Item onSelect={() => (pending = { type: "viewAll" })}>
                         <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
-                      </Menu.Item>
-                    </Menu.SubContent>
-                  </Menu.Portal>
-                </Menu.Sub>
+                      </MenuV2.Item>
+                    </MenuV2.SubContent>
+                  </MenuV2.Portal>
+                </MenuV2.Sub>
               </Show>
-            </Menu.Content>
-          </Menu.Portal>
-        </Menu>
-      </Tooltip>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
+      </TooltipV2>
       <PromptGitStatus branch={props.branch} from={selected() === "create"} class="ms-1" />
     </>
   )
@@ -255,7 +255,7 @@ export function PromptGitStatus(props: { branch?: string; noGit?: boolean; from?
   return (
     <Show when={label()}>
       {(value) => (
-        <Tooltip
+        <TooltipV2
           placement="top"
           value={value()}
           class={`min-w-0 max-w-[220px] ${props.class ?? ""}`}
@@ -265,7 +265,7 @@ export function PromptGitStatus(props: { branch?: string; noGit?: boolean; from?
             <Icon name={icon()} size="small" class="shrink-0 text-v2-icon-icon-muted" />
             <span class="min-w-0 truncate">{value()}</span>
           </div>
-        </Tooltip>
+        </TooltipV2>
       )}
     </Show>
   )

packages/app/src/components/server/server-row-menu.tsx

@@ -1,6 +1,6 @@
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Menu } from "@opencode-ai/ui/menu"
+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 { type Component, Show } from "solid-js"
 import type { ServerActionsController } from "@/components/server/server-management-controller"
 import { useLanguage } from "@/context/language"
@@ -59,19 +59,19 @@ export const ServerRowMenuView: Component<{
   const builtin = () => ServerConnection.builtin(props.server)
   const httpServer = () => (props.server.type === "http" ? props.server : undefined)
   return (
-    <Menu gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
-      <Menu.Trigger
-        as={IconButton}
+    <MenuV2 gutter={6} modal={false} placement="bottom-end" open={props.open} onOpenChange={props.onOpenChange}>
+      <MenuV2.Trigger
+        as={IconButtonV2}
         variant="ghost-muted"
         size="small"
-        icon={<Icon name="outline-dots" />}
+        icon={<IconV2 name="outline-dots" />}
         aria-label={props.labels.more}
       />
-      <Menu.Portal>
-        <Menu.Content>
-          <Menu.Group>
-            <Menu.GroupLabel>{props.labels.server}</Menu.GroupLabel>
-            <Menu.Item
+      <MenuV2.Portal>
+        <MenuV2.Content>
+          <MenuV2.Group>
+            <MenuV2.GroupLabel>{props.labels.server}</MenuV2.GroupLabel>
+            <MenuV2.Item
               disabled={builtin() || !httpServer()}
               onSelect={() => {
                 const server = httpServer()
@@ -79,20 +79,20 @@ export const ServerRowMenuView: Component<{
               }}
             >
               {props.labels.edit}
-            </Menu.Item>
+            </MenuV2.Item>
             <Show when={props.canDefault && !props.isDefault}>
-              <Menu.Item onSelect={props.onSetDefault}>{props.labels.default}</Menu.Item>
+              <MenuV2.Item onSelect={props.onSetDefault}>{props.labels.default}</MenuV2.Item>
             </Show>
             <Show when={props.canDefault && props.isDefault}>
-              <Menu.Item onSelect={props.onRemoveDefault}>{props.labels.defaultRemove}</Menu.Item>
+              <MenuV2.Item onSelect={props.onRemoveDefault}>{props.labels.defaultRemove}</MenuV2.Item>
             </Show>
             <Show when={props.canRemove}>
-              <Menu.Separator />
-              <Menu.Item onSelect={props.onRemove}>{props.labels.delete}</Menu.Item>
+              <MenuV2.Separator />
+              <MenuV2.Item onSelect={props.onRemove}>{props.labels.delete}</MenuV2.Item>
             </Show>
-          </Menu.Group>
-        </Menu.Content>
-      </Menu.Portal>
-    </Menu>
+          </MenuV2.Group>
+        </MenuV2.Content>
+      </MenuV2.Portal>
+    </MenuV2>
   )
 }

packages/app/src/components/server/server-row.tsx

@@ -64,7 +64,6 @@ export function ServerRow(props: ServerRowProps) {
 
   return (
     <Tooltip
-      appearance="standard"
       class="flex-1 min-w-0"
       value={tooltipValue()}
       contentStyle={{ "max-width": "none", "white-space": "nowrap" }}

packages/app/src/components/session-context-usage.tsx

@@ -1,7 +1,8 @@
 import { Show, createMemo, type ComponentProps, type JSX } from "solid-js"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { ProgressCircleV2 } from "@opencode-ai/ui/v2/progress-circle-v2"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { createMediaQuery } from "@solid-primitives/media"
 
 import { useFile } from "@/context/file"
@@ -15,7 +16,7 @@ import { createSessionTabs } from "@/pages/session/helpers"
 
 interface SessionContextUsageProps {
   variant?: "button" | "indicator"
-  placement?: ComponentProps<typeof Tooltip>["placement"]
+  placement?: ComponentProps<typeof TooltipV2>["placement"]
 }
 
 function ContextTooltipRow(props: { name: JSX.Element; value: JSX.Element }) {
@@ -110,21 +111,24 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   const circle = () => (
     <div class="flex items-center justify-center">
       <ProgressCircle
-        appearance="indicator"
         size={16}
         strokeWidth={2}
         percentage={context()?.usage ?? 0}
-        style={{
-          "--progress-circle-background": "var(--v2-background-bg-layer-04, var(--border-weak-base))",
-          "--progress-circle-background-overlay": "var(--v2-overlay-simple-overlay-pressed, transparent)",
-          "--progress-circle-progress": "var(--v2-icon-icon-base, var(--icon-base))",
-        }}
+        style={
+          variant() === "indicator"
+            ? {
+                "--progress-circle-background": "var(--v2-background-bg-layer-04, var(--border-weak-base))",
+                "--progress-circle-background-overlay": "var(--v2-overlay-simple-overlay-pressed, transparent)",
+                "--progress-circle-progress": "var(--v2-icon-icon-base, var(--icon-base))",
+              }
+            : undefined
+        }
       />
     </div>
   )
   const circleV2 = () => (
     <div class="flex items-center justify-center">
-      <ProgressCircle appearance="compact" percentage={context()?.usage ?? 0} />
+      <ProgressCircleV2 percentage={context()?.usage ?? 0} />
     </div>
   )
 
@@ -141,11 +145,11 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   return (
     <Show when={params.id}>
-      <Tooltip value={tooltipValue()} placement={props.placement ?? "top"} shift={-8}>
+      <TooltipV2 value={tooltipValue()} placement={props.placement ?? "top"} shift={-8}>
         <Show
           when={variant() === "indicator"}
           fallback={
-            <IconButton
+            <IconButtonV2
               type="button"
               variant="ghost-muted"
               size="large"
@@ -157,7 +161,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
         >
           {circle()}
         </Show>
-      </Tooltip>
+      </TooltipV2>
     </Show>
   )
 }

packages/app/src/components/session-workspace-menu.tsx

@@ -1,5 +1,5 @@
-import { Menu } from "@opencode-ai/ui/menu"
-import { Icon } from "@opencode-ai/ui/icon"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { Icon } from "@opencode-ai/ui/v2/icon"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { createStore } from "solid-js/store"
 import { createSignal, For, Show, type ComponentProps, type JSX } from "solid-js"
@@ -17,7 +17,7 @@ export function SessionWorkspaceMenu(props: {
   sessionID: string
   project: Project
   directory: string
-  placement?: ComponentProps<typeof Menu>["placement"]
+  placement?: ComponentProps<typeof MenuV2>["placement"]
   gutter?: number
   class?: string
   contentClass?: string
@@ -71,57 +71,57 @@ export function SessionWorkspaceMenu(props: {
   }
 
   return (
-    <Menu
+    <MenuV2
       placement={props.placement ?? "bottom-end"}
       gutter={props.gutter ?? 4}
       modal={false}
       onOpenChange={onOpenChange}
     >
-      <Menu.Trigger class={props.class} disabled={blocked()}>
+      <MenuV2.Trigger class={props.class} disabled={blocked()}>
         {props.children}
-      </Menu.Trigger>
-      <Menu.Portal>
-        <Menu.Content class={`w-[200px] ${props.contentClass ?? ""}`}>
-          <Menu.Group>
-            <Menu.GroupLabel>{language.t("workspace.move.menu.title")}</Menu.GroupLabel>
+      </MenuV2.Trigger>
+      <MenuV2.Portal>
+        <MenuV2.Content class={`w-[200px] ${props.contentClass ?? ""}`}>
+          <MenuV2.Group>
+            <MenuV2.GroupLabel>{language.t("workspace.move.menu.title")}</MenuV2.GroupLabel>
             <Show when={pathKey(props.directory) !== pathKey(props.project.worktree)}>
-              <Menu.Item disabled={!!store.selected || blocked()} onSelect={() => void move(props.project.worktree)}>
+              <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move(props.project.worktree)}>
                 <Icon name="monitor" />
                 {language.t("session.new.workspace.local")}
-              </Menu.Item>
+              </MenuV2.Item>
             </Show>
-            <Menu.Item disabled={!!store.selected || blocked()} onSelect={() => void move("create")}>
+            <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move("create")}>
               <Icon name="workspace-new" />
               {language.t("workspace.new")}
-            </Menu.Item>
+            </MenuV2.Item>
             <Show when={workspaces().length > 0}>
-              <Menu.Sub gutter={0} overlap overflowPadding={8}>
-                <Menu.SubTrigger>
+              <MenuV2.Sub gutter={0} overlap overflowPadding={8}>
+                <MenuV2.SubTrigger>
                   <Icon name="workspace-isolated" />
                   {language.t("session.new.workspace.existing").replace(/(…|\.{3})$/, "")}
-                </Menu.SubTrigger>
-                <Menu.Portal>
-                  <Menu.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
+                </MenuV2.SubTrigger>
+                <MenuV2.Portal>
+                  <MenuV2.SubContent class="max-h-[calc(100dvh-16px)] w-[200px] overflow-y-auto">
                     <For each={workspaces()}>
                       {(workspace) => (
-                        <Menu.Item disabled={!!store.selected || blocked()} onSelect={() => void move(workspace)}>
+                        <MenuV2.Item disabled={!!store.selected || blocked()} onSelect={() => void move(workspace)}>
                           <Icon name="workspace-isolated" />
                           <span class="min-w-0 flex-1 truncate">{getFilename(workspace)}</span>
-                        </Menu.Item>
+                        </MenuV2.Item>
                       )}
                     </For>
-                  </Menu.SubContent>
-                </Menu.Portal>
-              </Menu.Sub>
+                  </MenuV2.SubContent>
+                </MenuV2.Portal>
+              </MenuV2.Sub>
             </Show>
-          </Menu.Group>
-          <Menu.Separator class="h-[0.5px] bg-v2-border-border-base" />
-          <Menu.Item onSelect={() => openWorkspaces()}>
+          </MenuV2.Group>
+          <MenuV2.Separator class="h-[0.5px] bg-v2-border-border-base" />
+          <MenuV2.Item onSelect={() => openWorkspaces()}>
             <span class="min-w-0 flex-1 truncate">{language.t("common.viewAll")}</span>
-          </Menu.Item>
-        </Menu.Content>
-      </Menu.Portal>
-    </Menu>
+          </MenuV2.Item>
+        </MenuV2.Content>
+      </MenuV2.Portal>
+    </MenuV2>
   )
 }
 

packages/app/src/components/session/open-in-app-v2.tsx

@@ -2,9 +2,10 @@ import { For, Show } from "solid-js"
 import { AppIcon } from "@opencode-ai/ui/app-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
-import { Menu } from "@opencode-ai/ui/menu"
-import { SplitButton, SplitButtonAction, SplitButtonMenuTrigger } from "@opencode-ai/ui/split-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { SplitButtonV2, SplitButtonV2Action, SplitButtonV2MenuTrigger } from "@opencode-ai/ui/v2/split-button-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { useLanguage } from "@/context/language"
 import { type OpenApp, useOpenInApp } from "@/components/session/open-in-app"
 
@@ -14,13 +15,13 @@ export function OpenInAppV2(props: { directory: () => string }) {
 
   return (
     <Show when={props.directory() && state.canOpen()}>
-      <SplitButton class="session-review-v2-open-in-app" onPointerDown={(event) => event.stopPropagation()}>
-        <Tooltip
+      <SplitButtonV2 class="session-review-v2-open-in-app" onPointerDown={(event) => event.stopPropagation()}>
+        <TooltipV2
           placement="bottom"
           value={language.t("session.header.open.ariaLabel", { app: state.current().label })}
           class="flex items-center"
         >
-          <SplitButtonAction
+          <SplitButtonV2Action
             onPointerDown={(event) => event.stopPropagation()}
             onClick={(event) => {
               event.stopPropagation()
@@ -33,28 +34,28 @@ export function OpenInAppV2(props: { directory: () => string }) {
             <Show when={state.opening()} fallback={<AppIcon id={state.current().icon} class="size-[18px]" />}>
               <Spinner class="size-3.5" />
             </Show>
-          </SplitButtonAction>
-        </Tooltip>
-        <Menu
+          </SplitButtonV2Action>
+        </TooltipV2>
+        <MenuV2
           gutter={4}
           modal={false}
           placement="bottom-end"
           open={state.menu.open}
           onOpenChange={(open) => state.setMenu("open", open)}
         >
-          <Menu.Trigger
-            as={SplitButtonMenuTrigger}
+          <MenuV2.Trigger
+            as={SplitButtonV2MenuTrigger}
             disabled={state.opening()}
             aria-label={language.t("session.header.open.menu")}
             onPointerDown={(event) => event.stopPropagation()}
           >
-            <Icon name="chevron-down" size="small" />
-          </Menu.Trigger>
-          <Menu.Portal>
-            <Menu.Content class="open-in-app-v2-menu">
-              <Menu.Group>
-                <Menu.GroupLabel>{language.t("session.header.openIn")}</Menu.GroupLabel>
-                <Menu.RadioGroup
+            <IconV2 name="chevron-down" size="small" />
+          </MenuV2.Trigger>
+          <MenuV2.Portal>
+            <MenuV2.Content class="open-in-app-v2-menu">
+              <MenuV2.Group>
+                <MenuV2.GroupLabel>{language.t("session.header.openIn")}</MenuV2.GroupLabel>
+                <MenuV2.RadioGroup
                   value={state.current().id}
                   onChange={(value) => {
                     state.selectApp(value as OpenApp)
@@ -62,7 +63,7 @@ export function OpenInAppV2(props: { directory: () => string }) {
                 >
                   <For each={state.options()}>
                     {(option) => (
-                      <Menu.RadioItem
+                      <MenuV2.RadioItem
                         value={option.id}
                         disabled={state.opening()}
                         onSelect={() => {
@@ -73,13 +74,13 @@ export function OpenInAppV2(props: { directory: () => string }) {
                       >
                         <AppIcon id={option.icon} />
                         {option.label}
-                      </Menu.RadioItem>
+                      </MenuV2.RadioItem>
                     )}
                   </For>
-                </Menu.RadioGroup>
-              </Menu.Group>
-              <Menu.Separator />
-              <Menu.Item
+                </MenuV2.RadioGroup>
+              </MenuV2.Group>
+              <MenuV2.Separator />
+              <MenuV2.Item
                 onSelect={() => {
                   state.setMenu("open", false)
                   state.copyPath()
@@ -87,11 +88,11 @@ export function OpenInAppV2(props: { directory: () => string }) {
               >
                 <Icon name="copy" size="small" class="text-icon-weak" />
                 {language.t("session.header.open.copyPath")}
-              </Menu.Item>
-            </Menu.Content>
-          </Menu.Portal>
-        </Menu>
-      </SplitButton>
+              </MenuV2.Item>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
+      </SplitButtonV2>
     </Show>
   )
 }

packages/app/src/components/session/session-header.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { createMemo, Show } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
 import { Portal } from "solid-js/web"
@@ -6,10 +7,10 @@ import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { StatusPopoverV2 } from "../status-popover"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Keybind } from "@opencode-ai/ui/keybind"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { reviewTooltipKeybind } from "../command-tooltip-keybind"
 import { useTitlebarRightMount } from "../titlebar"
 
@@ -59,24 +60,24 @@ function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
   return (
     <div class="flex items-center gap-2">
       <Show when={props.state.statusVisible}>
-        <Tooltip appearance="standard" placement="bottom" value={props.state.statusLabel}>
+        <Tooltip placement="bottom" value={props.state.statusLabel}>
           <StatusPopoverV2 />
         </Tooltip>
       </Show>
       <Show when={props.state.reviewVisible}>
-        <Tooltip
+        <TooltipV2
           class="shrink-0"
           placement="bottom"
           value={
             <>
               {props.state.reviewLabel}
               <Show when={props.state.reviewKeybind.length > 0}>
-                <Keybind keys={props.state.reviewKeybind} variant="neutral" />
+                <KeybindV2 keys={props.state.reviewKeybind} variant="neutral" />
               </Show>
             </>
           }
         >
-          <IconButton
+          <IconButtonV2
             type="button"
             variant="ghost-muted"
             size="large"
@@ -86,9 +87,9 @@ function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
             aria-label={props.state.reviewLabel}
             aria-expanded={props.state.reviewOpened}
             aria-controls="review-panel"
-            icon={<Icon name="sidebar-right" />}
+            icon={<IconV2 name="sidebar-right" />}
           />
-        </Tooltip>
+        </TooltipV2>
       </Show>
     </div>
   )

packages/app/src/components/session/session-sortable-tab-v2.tsx

@@ -1,8 +1,9 @@
 import { createMemo, Show } from "solid-js"
 import type { JSX } from "solid-js"
 import { useSortable } from "@dnd-kit/solid/sortable"
-import { Keybind } from "@opencode-ai/ui/keybind"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
@@ -39,29 +40,31 @@ export function SortableTabV2(props: {
       <div class="relative">
         <Tabs.Trigger
           value={props.tab}
-          onMiddleClick={() => props.onTabClose(props.tab)}
-          onDblClick={() => props.onTabDoubleClick?.(props.tab)}
           closeButton={
-            <Tooltip
+            <TooltipV2
               value={
                 <>
                   {language.t("common.closeTab")}
                   <Show when={closeTabKeybind().length > 0}>
-                    <Keybind keys={closeTabKeybind()} variant="neutral" />
+                    <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
                   </Show>
                 </>
               }
               placement="bottom"
               gutter={10}
             >
-              <Tabs.CloseButton
+              <IconButton
+                icon="close-small"
+                variant="ghost"
                 class="h-5 w-5"
                 onClick={() => props.onTabClose(props.tab)}
                 aria-label={language.t("common.closeTab")}
               />
-            </Tooltip>
+            </TooltipV2>
           }
           hideCloseButton
+          onMiddleClick={() => props.onTabClose(props.tab)}
+          onDblClick={() => props.onTabDoubleClick?.(props.tab)}
         >
           <Show when={content()}>{(value) => value()}</Show>
         </Tabs.Trigger>

packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx

@@ -2,8 +2,9 @@ import type { JSX } from "solid-js"
 import { Show, createEffect, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useSortable } from "@dnd-kit/solid/sortable"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { Menu } from "@opencode-ai/ui/menu"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
 import { useTerminal, type LocalPTY } from "@/context/terminal"
 import { useLanguage } from "@/context/language"
@@ -115,8 +116,8 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
 
   return (
     <div ref={sortable.ref} class="h-full flex items-center outline-none focus:outline-none focus-visible:outline-none">
-      <Menu.Context>
-        <Menu.Context.Trigger class="relative" as="div">
+      <MenuV2.Context>
+        <MenuV2.Context.Trigger class="relative" as="div">
           <Tabs.Trigger
             value={props.terminal.id}
             onMouseDown={(e) => {
@@ -130,11 +131,20 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
               if (e.detail > 0) return
               focus()
             }}
-            onMiddleClick={close}
             closeButton={
-              <Tabs.CloseButton class="h-5 w-5" onClick={close} aria-label={language.t("terminal.close")} />
+              <IconButton
+                icon="close-small"
+                variant="ghost"
+                class="h-5 w-5"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  close()
+                }}
+                aria-label={language.t("terminal.close")}
+              />
             }
             hideCloseButton
+            onMiddleClick={close}
           >
             <span
               class="truncate"
@@ -159,9 +169,9 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
               />
             </div>
           </Show>
-        </Menu.Context.Trigger>
-        <Menu.Context.Portal>
-          <Menu.Context.Content
+        </MenuV2.Context.Trigger>
+        <MenuV2.Context.Portal>
+          <MenuV2.Context.Content
             onCloseAutoFocus={(e) => {
               if (!editRequested) return
               e.preventDefault()
@@ -169,11 +179,11 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
               requestAnimationFrame(() => edit())
             }}
           >
-            <Menu.Item onSelect={() => (editRequested = true)}>{language.t("common.rename")}</Menu.Item>
-            <Menu.Item onSelect={close}>{language.t("common.close")}</Menu.Item>
-          </Menu.Context.Content>
-        </Menu.Context.Portal>
-      </Menu.Context>
+            <MenuV2.Item onSelect={() => (editRequested = true)}>{language.t("common.rename")}</MenuV2.Item>
+            <MenuV2.Item onSelect={close}>{language.t("common.close")}</MenuV2.Item>
+          </MenuV2.Context.Content>
+        </MenuV2.Context.Portal>
+      </MenuV2.Context>
     </div>
   )
 }

packages/app/src/components/settings-keybinds.tsx

@@ -1,9 +1,9 @@
 import { For, Show, createMemo, lazy, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { Button } from "@opencode-ai/ui/button"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
 import fuzzysort from "fuzzysort"
 import { DEFAULT_PALETTE_KEYBIND, formatKeybind, parseKeybind, useCommand } from "@/context/command"
@@ -11,7 +11,7 @@ import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { SettingsListV2 } from "./settings-v2/parts/list"
 
-const Icon = lazy(() => import("@opencode-ai/ui/icon").then((module) => ({ default: module.Icon })))
+const IconV2 = lazy(() => import("@opencode-ai/ui/v2/icon").then((module) => ({ default: module.Icon })))
 
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
@@ -387,12 +387,12 @@ function SettingsKeybindsV2View(props: {
             <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
             <span class="text-11-regular text-v2-text-text-muted">{language.t("settings.shortcuts.description")}</span>
           </div>
-          <Button variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides}>
+          <ButtonV2 variant="ghost" onClick={props.onReset} disabled={!props.hasOverrides}>
             {language.t("settings.shortcuts.reset.button")}
-          </Button>
+          </ButtonV2>
         </div>
         <div class="settings-v2-tab-search">
-          <TextInput
+          <TextInputV2
             type="search"
             appearance="base"
             value={store.filter}
@@ -405,12 +405,12 @@ function SettingsKeybindsV2View(props: {
             aria-label={language.t("settings.shortcuts.search.placeholder")}
           />
           <Show when={store.filter}>
-            <IconButton
+            <IconButtonV2
               type="button"
               variant="ghost-muted"
               size="small"
               class="settings-v2-tab-search-clear"
-              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
+              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
               onClick={() => setStore("filter", "")}
             />
           </Show>

packages/app/src/components/settings-v2/appearance.tsx

@@ -1,6 +1,6 @@
 import { Component, createMemo } from "solid-js"
-import { Select } from "@opencode-ai/ui/select"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useLanguage } from "@/context/language"
 import { ExternalLink } from "../external-link"
 import { SettingsListV2 } from "./parts/list"
@@ -42,7 +42,7 @@ const FontSetting: Component<{
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <div class="w-full sm:w-[220px]">
-        <TextInput
+        <TextInputV2
           data-action={config().action}
           type="text"
           appearance="base"
@@ -83,7 +83,8 @@ export const SettingsAppearanceV2: Component = () => {
               title={language.t("settings.general.row.colorScheme.title")}
               description={language.t("settings.general.row.colorScheme.description")}
             >
-              <Select
+              <SelectV2
+                appearance="inline"
                 data-action="settings-color-scheme"
                 options={schemeOptions}
                 current={schemeOptions.find((option) => option === appearance.scheme.current())}
@@ -109,7 +110,8 @@ export const SettingsAppearanceV2: Component = () => {
                 </>
               }
             >
-              <Select
+              <SelectV2
+                appearance="inline"
                 data-action="settings-theme"
                 options={appearance.theme.options()}
                 current={appearance.theme.current()}

packages/app/src/components/settings-v2/dialog-server-v2.tsx

@@ -1,7 +1,7 @@
-import { Button } from "@opencode-ai/ui/button"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
-import { Divider } from "@opencode-ai/ui/divider"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useMutation } from "@tanstack/solid-query"
 import { type Component, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
@@ -69,12 +69,12 @@ export const DialogServerV2: Component<{
       <DialogHeader hideClose={true}>
         <DialogTitle>{title()}</DialogTitle>
       </DialogHeader>
-      <Divider />
+      <DividerV2 />
       <DialogBody class="flex w-full min-w-0 flex-1 flex-col px-4 pt-4 pb-2">
         <div class="flex w-full min-w-0 flex-col gap-6">
           <div class="flex w-full min-w-0 flex-col gap-2">
             <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.url")}</label>
-            <TextInput
+            <TextInputV2
               type="text"
               appearance="large"
               class="!w-full self-stretch"
@@ -92,7 +92,7 @@ export const DialogServerV2: Component<{
           </div>
           <div class="flex w-full min-w-0 flex-col gap-2">
             <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.name")}</label>
-            <TextInput
+            <TextInputV2
               type="text"
               appearance="large"
               class="!w-full self-stretch"
@@ -106,7 +106,7 @@ export const DialogServerV2: Component<{
           <div class="grid w-full min-w-0 grid-cols-2 gap-4">
             <div class="flex min-w-0 flex-col gap-2">
               <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.username")}</label>
-              <TextInput
+              <TextInputV2
                 type="text"
                 appearance="large"
                 class="!w-full self-stretch"
@@ -119,7 +119,7 @@ export const DialogServerV2: Component<{
             </div>
             <div class="flex min-w-0 flex-col gap-2">
               <label class="settings-v2-server-dialog-label">{language.t("dialog.server.add.password")}</label>
-              <TextInput
+              <TextInputV2
                 type="password"
                 appearance="large"
                 class="!w-full self-stretch"
@@ -134,12 +134,12 @@ export const DialogServerV2: Component<{
         </div>
       </DialogBody>
       <DialogFooter>
-        <Button variant="neutral" disabled={form.state.busy()} onClick={() => dialog.close()}>
+        <ButtonV2 variant="neutral" disabled={form.state.busy()} onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </Button>
-        <Button variant="contrast" disabled={form.state.busy()} onClick={form.submit}>
+        </ButtonV2>
+        <ButtonV2 variant="contrast" disabled={form.state.busy()} onClick={form.submit}>
           {submitLabel()}
-        </Button>
+        </ButtonV2>
       </DialogFooter>
     </Dialog>
   )

packages/app/src/components/settings-v2/dialog-settings-v2.tsx

@@ -1,6 +1,6 @@
 import { Component, createEffect, createMemo, createSignal, startTransition } from "solid-js"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { Tabs } from "@opencode-ai/ui/tabs"
+import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
 import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
@@ -73,66 +73,66 @@ export const DialogSettings: Component<{
 
   return (
     <Dialog size="x-large" variant="settings" class="settings-v2-dialog">
-      <Tabs
+      <TabsV2
         orientation="vertical"
         variant="settings"
         value={tab()}
         onChange={(value) => void startTransition(() => setTab(value))}
         class="settings-v2"
       >
-        <Tabs.List>
+        <TabsV2.List>
           <div class="flex flex-col justify-between h-full w-full">
             <div class="flex flex-col gap-4 w-full">
               {/* Group 1: Preferences */}
               <div class="flex flex-col gap-1 w-full">
-                <Tabs.Trigger value="general">
+                <TabsV2.Trigger value="general">
                   <Icon name="sliders" />
                   {language.t("settings.tab.preferences")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="appearance">
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="appearance">
                   <Icon name="appearance" />
                   {language.t("settings.general.section.appearance")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="notifications">
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="notifications">
                   <Icon name="notifications" />
                   {language.t("settings.tab.notifications")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="shortcuts">
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="shortcuts">
                   <Icon name="keyboard" />
                   {language.t("settings.tab.shortcuts")}
-                </Tabs.Trigger>
+                </TabsV2.Trigger>
               </div>
 
               {/* Group 2: Environment & Workspaces */}
               <div class="flex flex-col gap-1 w-full">
-                <Tabs.Trigger value="servers">
+                <TabsV2.Trigger value="servers">
                   <Icon name="server" />
                   {language.t("status.popover.tab.servers")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="projects">
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="projects">
                   <Icon name="folder" />
                   {language.t("settings.tab.projects")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="workspaces">
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="workspaces">
                   <Icon name="workspace-isolated" />
                   {language.t("settings.tab.workspaces")}
-                </Tabs.Trigger>
+                </TabsV2.Trigger>
               </div>
 
               {/* Group 3: Capabilities & Extensions */}
               <div class="flex flex-col gap-1 w-full">
-                <Tabs.Trigger value="providers">
+                <TabsV2.Trigger value="providers">
                   <Icon name="providers" />
                   {language.t("settings.providers.title")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="models">
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="models">
                   <Icon name="models" />
                   {language.t("settings.models.title")}
-                </Tabs.Trigger>
-                <Tabs.Trigger value="extensions">
+                </TabsV2.Trigger>
+                <TabsV2.Trigger value="extensions">
                   <Icon name="extensions" />
                   {language.t("settings.tab.extensions")}
-                </Tabs.Trigger>
+                </TabsV2.Trigger>
               </div>
             </div>
 
@@ -141,41 +141,41 @@ export const DialogSettings: Component<{
               <span>v{platform.version}</span>
             </div>
           </div>
-        </Tabs.List>
+        </TabsV2.List>
 
-        <Tabs.Content value="general" class="settings-v2-panel">
+        <TabsV2.Content value="general" class="settings-v2-panel">
           <SettingsGeneral server={server()} sessionID={props.sessionID} />
-        </Tabs.Content>
-        <Tabs.Content value="appearance" class="settings-v2-panel">
+        </TabsV2.Content>
+        <TabsV2.Content value="appearance" class="settings-v2-panel">
           <SettingsAppearanceV2 />
-        </Tabs.Content>
-        <Tabs.Content value="notifications" class="settings-v2-panel">
+        </TabsV2.Content>
+        <TabsV2.Content value="notifications" class="settings-v2-panel">
           <SettingsNotificationsV2 />
-        </Tabs.Content>
-        <Tabs.Content value="shortcuts" class="settings-v2-panel">
+        </TabsV2.Content>
+        <TabsV2.Content value="shortcuts" class="settings-v2-panel">
           <SettingsKeybinds />
-        </Tabs.Content>
-        <Tabs.Content value="servers" class="settings-v2-panel">
+        </TabsV2.Content>
+        <TabsV2.Content value="servers" class="settings-v2-panel">
           <SettingsServersV2 />
-        </Tabs.Content>
-        <Tabs.Content value="projects" class="settings-v2-panel">
+        </TabsV2.Content>
+        <TabsV2.Content value="projects" class="settings-v2-panel">
           <SettingsProjectsV2 />
-        </Tabs.Content>
+        </TabsV2.Content>
         <SettingsServerScope directory={directory()}>
-          <Tabs.Content value="workspaces" class="settings-v2-panel">
+          <TabsV2.Content value="workspaces" class="settings-v2-panel">
             <SettingsWorkspacesV2 activeDirectory={directory()} />
-          </Tabs.Content>
-          <Tabs.Content value="providers" class="settings-v2-panel">
+          </TabsV2.Content>
+          <TabsV2.Content value="providers" class="settings-v2-panel">
             <SettingsProvidersV2 directory={directory()} onBack={showProviders} />
-          </Tabs.Content>
-          <Tabs.Content value="models" class="settings-v2-panel">
+          </TabsV2.Content>
+          <TabsV2.Content value="models" class="settings-v2-panel">
             <SettingsModelsV2 />
-          </Tabs.Content>
-          <Tabs.Content value="extensions" class="settings-v2-panel">
+          </TabsV2.Content>
+          <TabsV2.Content value="extensions" class="settings-v2-panel">
             <SettingsExtensionsV2 />
-          </Tabs.Content>
+          </TabsV2.Content>
         </SettingsServerScope>
-      </Tabs>
+      </TabsV2>
     </Dialog>
   )
 }

packages/app/src/components/settings-v2/extensions.tsx

@@ -1,12 +1,12 @@
 import { Component, For, createEffect, createMemo, createResource } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Switch } from "@opencode-ai/ui/switch"
-import { Tabs } from "@opencode-ai/ui/tabs"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
 import { useLanguage } from "@/context/language"
 import { useData } from "@/context/server"
 import { useServerSDK } from "@/context/server-sdk"
 import { useMcpToggle } from "@/context/mcp"
-import { pluginLabels } from "@/utils/plugin"
+import { pluginLabel } from "@/utils/plugin"
 import { ExternalLink } from "../external-link"
 import { InlineServerSelect } from "./parts/server-select"
 import "./settings-v2.css"
@@ -45,7 +45,9 @@ export const SettingsExtensionsV2: Component = () => {
     () => serverSdk.connection.status() === "connected",
     () => serverSdk.api.plugin.list().then((result) => result.data),
   )
-  const plugins = createMemo<PluginRowItem[]>(() => pluginLabels(pluginList.latest ?? []).map((name) => ({ name })))
+  const plugins = createMemo<PluginRowItem[]>(() =>
+    (pluginList.latest ?? []).map((item) => ({ name: pluginLabel(item) })),
+  )
 
   createEffect(() => {
     if (serverSdk.connection.status() !== "connected") return
@@ -66,14 +68,14 @@ export const SettingsExtensionsV2: Component = () => {
       </div>
 
       <div class="settings-v2-tab-body">
-        <Tabs variant="pill" defaultValue="mcps" class="settings-v2-extensions-tabs">
-          <Tabs.List>
-            <Tabs.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</Tabs.Trigger>
-            <Tabs.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</Tabs.Trigger>
-            <Tabs.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</Tabs.Trigger>
-          </Tabs.List>
+        <TabsV2 variant="pill" defaultValue="mcps" class="settings-v2-extensions-tabs">
+          <TabsV2.List>
+            <TabsV2.Trigger value="mcps">{language.t("settings.extensions.tab.mcps")}</TabsV2.Trigger>
+            <TabsV2.Trigger value="plugins">{language.t("status.popover.tab.plugins")}</TabsV2.Trigger>
+            <TabsV2.Trigger value="skills">{language.t("settings.extensions.tab.skills")}</TabsV2.Trigger>
+          </TabsV2.List>
 
-          <Tabs.Content value="mcps">
+          <TabsV2.Content value="mcps">
             <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
@@ -97,9 +99,9 @@ export const SettingsExtensionsV2: Component = () => {
                 </For>
               </div>
             </div>
-          </Tabs.Content>
+          </TabsV2.Content>
 
-          <Tabs.Content value="plugins">
+          <TabsV2.Content value="plugins">
             <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
@@ -120,9 +122,9 @@ export const SettingsExtensionsV2: Component = () => {
                 </For>
               </div>
             </div>
-          </Tabs.Content>
+          </TabsV2.Content>
 
-          <Tabs.Content value="skills">
+          <TabsV2.Content value="skills">
             <div class="settings-v2-section">
               <div class="flex items-center justify-between">
                 <span class="text-13-medium text-v2-text-text-base">
@@ -148,8 +150,8 @@ export const SettingsExtensionsV2: Component = () => {
                 </For>
               </div>
             </div>
-          </Tabs.Content>
-        </Tabs>
+          </TabsV2.Content>
+        </TabsV2>
       </div>
     </>
   )

packages/app/src/components/settings-v2/general.tsx

@@ -1,9 +1,9 @@
 import { Component, Show, createMemo, createResource } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
-import { Button } from "@opencode-ai/ui/button"
-import { Select } from "@opencode-ai/ui/select"
-import { Switch } from "@opencode-ai/ui/switch"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useUpdaterAction } from "../updater-action"
@@ -100,7 +100,8 @@ const WorkspaceDestinationSetting: Component = () => {
       title={language.t("settings.workspaces.default.title")}
       description={language.t("settings.workspaces.default.description")}
     >
-      <Select
+      <SelectV2
+        appearance="inline"
         options={options()}
         current={options().find((option) => option.value === settings.workspaces.defaultDestination())}
         value={(option) => option.value}
@@ -126,7 +127,8 @@ const ShellSetting: Component<{ controller: ShellSettingsController }> = (props)
       title={language.t("settings.general.row.shell.title")}
       description={language.t("settings.general.row.shell.description")}
     >
-      <Select
+      <SelectV2
+        appearance="inline"
         data-action="settings-shell"
         options={options()}
         current={options().find((option) => option.value === props.controller.current()) ?? options()[0]}
@@ -154,7 +156,8 @@ const AppearanceSection: Component<{ controller: AppearanceSettingsController }>
           title={language.t("settings.general.row.colorScheme.title")}
           description={language.t("settings.general.row.colorScheme.description")}
         >
-          <Select
+          <SelectV2
+            appearance="inline"
             data-action="settings-color-scheme"
             options={schemeOptions}
             current={schemeOptions.find((option) => option === props.controller.scheme.current())}
@@ -180,7 +183,8 @@ const AppearanceSection: Component<{ controller: AppearanceSettingsController }>
             </>
           }
         >
-          <Select
+          <SelectV2
+            appearance="inline"
             data-action="settings-theme"
             options={props.controller.theme.options()}
             current={props.controller.theme.current()}
@@ -209,7 +213,7 @@ const FontSetting: Component<{
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
       <div class="w-full sm:w-[220px]">
-        <TextInput
+        <TextInputV2
           data-action={config().action}
           type="text"
           appearance="base"
@@ -250,7 +254,8 @@ const SoundSetting: Component<{
   const config = () => soundSettings[props.kind]
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <Select
+      <SelectV2
+        appearance="inline"
         data-action={config().action}
         options={soundOptions}
         current={props.channel.current()}
@@ -278,7 +283,8 @@ const LanguageSetting = () => {
       title={language.t("settings.general.row.language.title")}
       description={language.t("settings.general.row.language.description")}
     >
-      <Select
+      <SelectV2
+        appearance="inline"
         data-action="settings-language"
         options={options()}
         placement="bottom-end"
@@ -494,9 +500,9 @@ export const SettingsGeneral: Component<{
           title={language.t("settings.updates.row.check.title")}
           description={language.t("settings.updates.row.check.description")}
         >
-          <Button size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
+          <ButtonV2 size="normal" variant="neutral" disabled={!updater.action().run} onClick={() => updater.run()}>
             {language.t(updater.action().label)}
-          </Button>
+          </ButtonV2>
         </SettingsRowV2>
       </SettingsListV2>
     </div>

packages/app/src/components/settings-v2/models.tsx

@@ -1,9 +1,9 @@
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Switch } from "@opencode-ai/ui/switch"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { type Component, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
@@ -62,7 +62,7 @@ export const SettingsModelsV2: Component = () => {
           <InlineServerSelect />
         </div>
         <div class="settings-v2-tab-search">
-          <TextInput
+          <TextInputV2
             type="search"
             appearance="base"
             value={list.filter()}
@@ -75,12 +75,12 @@ export const SettingsModelsV2: Component = () => {
             aria-label={language.t("dialog.model.search.placeholder")}
           />
           <Show when={list.filter()}>
-            <IconButton
+            <IconButtonV2
               type="button"
               variant="ghost-muted"
               size="small"
               class="settings-v2-tab-search-clear"
-              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
+              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
               onClick={() => list.clear()}
             />
           </Show>

packages/app/src/components/settings-v2/notifications.tsx

@@ -1,6 +1,6 @@
 import { Component } from "solid-js"
-import { Select } from "@opencode-ai/ui/select"
-import { Switch } from "@opencode-ai/ui/switch"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
+import { Switch } from "@opencode-ai/ui/v2/switch-v2"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { SettingsListV2 } from "./parts/list"
@@ -34,7 +34,8 @@ const SoundSetting: Component<{
   const config = () => soundSettings[props.kind]
   return (
     <SettingsRowV2 title={language.t(config().title)} description={language.t(config().description)}>
-      <Select
+      <SelectV2
+        appearance="inline"
         data-action={config().action}
         options={soundOptions}
         current={props.channel.current()}

packages/app/src/components/settings-v2/parts/server-select.tsx

@@ -1,5 +1,5 @@
 import { Show, createMemo, type Component } from "solid-js"
-import { Select } from "@opencode-ai/ui/select"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { useGlobal } from "@/context/global"
 import { ServerConnection, serverName } from "@/context/servers"
 
@@ -20,7 +20,8 @@ export const InlineServerSelect: Component<{
 
   return (
     <Show when={options().length > 1}>
-      <Select
+      <SelectV2
+        appearance="inline"
         data-action="settings-server-select"
         options={options()}
         current={current()}

packages/app/src/components/settings-v2/projects.tsx

@@ -1,7 +1,7 @@
 import { Component, For, Show, createMemo, createSignal } from "solid-js"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
 import { useGlobal } from "@/context/global"
@@ -51,11 +51,11 @@ export const SettingsProjectsV2: Component = () => {
           <span class="text-13-medium text-v2-text-text-base truncate">{name()}</span>
         </div>
         <div class="flex items-center gap-2 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
-          <IconButton
+          <IconButtonV2
             type="button"
             variant="ghost-muted"
             size="small"
-            icon={<Icon name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
+            icon={<IconV2 name="settings-gear" size="small" class="text-v2-icon-icon-muted" />}
             onClick={(event: MouseEvent) => {
               event.stopPropagation()
               openProjectSettings(props.project, props.server)

packages/app/src/components/settings-v2/providers.tsx

@@ -1,5 +1,5 @@
-import { Button } from "@opencode-ai/ui/button"
-import { Badge } from "@opencode-ai/ui/badge"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { showToast } from "@/utils/toast"
@@ -160,7 +160,7 @@ export const SettingsProvidersV2: Component<{
                       />
                       <div class="settings-v2-provider-main">
                         <span class="settings-v2-provider-name truncate">{item.name}</span>
-                        <Badge>{type(item)}</Badge>
+                        <Tag>{type(item)}</Tag>
                       </div>
                     </div>
                     <Show
@@ -171,9 +171,9 @@ export const SettingsProvidersV2: Component<{
                         </span>
                       }
                     >
-                      <Button size="normal" variant="ghost-muted" onClick={() => void disconnect(item.id, item.name)}>
+                      <ButtonV2 size="normal" variant="ghost-muted" onClick={() => void disconnect(item.id, item.name)}>
                         {language.t("common.disconnect")}
-                      </Button>
+                      </ButtonV2>
                     </Show>
                   </div>
                 )}
@@ -199,7 +199,7 @@ export const SettingsProvidersV2: Component<{
                       <div class="settings-v2-provider-main">
                         <span class="settings-v2-provider-name">{item.name}</span>
                         <Show when={item.id === "opencode" || item.id === "opencode-go"}>
-                          <Badge>{language.t("dialog.provider.tag.recommended")}</Badge>
+                          <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
                         </Show>
                       </div>
                       <Show when={note(item.id)}>
@@ -207,9 +207,9 @@ export const SettingsProvidersV2: Component<{
                       </Show>
                     </div>
                   </div>
-                  <Button size="normal" variant="neutral" icon="plus" onClick={() => connect(item.id)}>
+                  <ButtonV2 size="normal" variant="neutral" icon="plus" onClick={() => connect(item.id)}>
                     {language.t("common.connect")}
-                  </Button>
+                  </ButtonV2>
                 </div>
               )}
             </For>
@@ -226,14 +226,14 @@ export const SettingsProvidersV2: Component<{
                   <div class="settings-v2-provider-copy">
                     <div class="settings-v2-provider-main">
                       <span class="settings-v2-provider-name">{language.t("provider.custom.title")}</span>
-                      <Badge>{language.t("settings.providers.tag.custom")}</Badge>
+                      <Tag>{language.t("settings.providers.tag.custom")}</Tag>
                     </div>
                     <p class="settings-v2-provider-description">
                       {language.t("settings.providers.custom.description")}
                     </p>
                   </div>
                 </div>
-                <Button
+                <ButtonV2
                   size="normal"
                   variant="neutral"
                   icon="plus"
@@ -246,7 +246,7 @@ export const SettingsProvidersV2: Component<{
                   }}
                 >
                   {language.t("common.connect")}
-                </Button>
+                </ButtonV2>
               </div>
             </Show>
           </SettingsListV2>

packages/app/src/components/settings-v2/servers.tsx

@@ -1,7 +1,7 @@
-import { Badge } from "@opencode-ai/ui/badge"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import fuzzysort from "fuzzysort"
 import { type Component, For, Show, createMemo } from "solid-js"
@@ -61,7 +61,7 @@ export const SettingsServersV2: Component = () => {
         </div>
         <Show when={showSearch()}>
           <div class="settings-v2-tab-search">
-            <TextInput
+            <TextInputV2
               type="search"
               appearance="base"
               value={store.filter}
@@ -74,12 +74,12 @@ export const SettingsServersV2: Component = () => {
               aria-label={language.t("dialog.server.search.placeholder")}
             />
             <Show when={store.filter}>
-              <IconButton
+              <IconButtonV2
                 type="button"
                 variant="ghost-muted"
                 size="small"
                 class="settings-v2-tab-search-clear"
-                icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
+                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
                 onClick={() => setStore("filter", "")}
               />
             </Show>
@@ -126,7 +126,7 @@ export const SettingsServersV2: Component = () => {
                     </div>
                     <div class="settings-v2-servers-actions">
                       <Show when={controller.defaults.available() && isDefault()}>
-                        <Badge>{language.t("dialog.server.status.default")}</Badge>
+                        <Tag>{language.t("dialog.server.status.default")}</Tag>
                       </Show>
                       <ServerRowMenu server={item} domain={controller} onEdit={openEdit} />
                     </div>

packages/app/src/components/settings-v2/settings-v2.css

@@ -1,5 +1,5 @@
-@import "@opencode-ai/ui/text-input.css";
-@import "@opencode-ai/ui/button.css";
+@import "@opencode-ai/ui/v2/text-input-v2.css";
+@import "@opencode-ai/ui/v2/button-v2.css";
 
 [data-component="tabs-v2"][data-variant="settings"] {
   height: 100%;

packages/app/src/components/settings-v2/workspaces.tsx

@@ -3,12 +3,12 @@ import { For, Show, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import type { SessionInfo } from "@opencode-ai/client/promise"
 import { useQuery } from "@tanstack/solid-query"
-import { Button } from "@opencode-ai/ui/button"
-import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Menu } from "@opencode-ai/ui/menu"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/v2/dialog-v2"
+import { Icon } 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 { getFilename } from "@opencode-ai/util/path"
 import { useLanguage } from "@/context/language"
@@ -273,33 +273,33 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
           </span>
           <div class="settings-v2-workspaces-toolbar-actions">
             <Show when={projects().length > 1}>
-              <Menu placement="bottom-end" gutter={6}>
-                <Menu.Trigger class="flex h-6 max-w-48 items-center gap-1 rounded-sm px-2 text-13-medium hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed">
+              <MenuV2 placement="bottom-end" gutter={6}>
+                <MenuV2.Trigger class="flex h-6 max-w-48 items-center gap-1 rounded-sm px-2 text-13-medium hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed">
                   <span class="min-w-0 truncate">
                     {projectOptions().find((option) => option.id === selectedProject())?.label}
                   </span>
                   <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-                </Menu.Trigger>
-                <Menu.Portal>
-                  <Menu.Content>
+                </MenuV2.Trigger>
+                <MenuV2.Portal>
+                  <MenuV2.Content>
                     <For each={projectOptions()}>
                       {(option) => (
-                        <Menu.Item onSelect={() => setStore("project", option.id)}>
+                        <MenuV2.Item onSelect={() => setStore("project", option.id)}>
                           <span class="min-w-0 flex-1 truncate">{option.label}</span>
                           <Show when={selectedProject() === option.id}>
                             <Icon name="check" size="small" class="shrink-0" />
                           </Show>
-                        </Menu.Item>
+                        </MenuV2.Item>
                       )}
                     </For>
-                  </Menu.Content>
-                </Menu.Portal>
-              </Menu>
+                  </MenuV2.Content>
+                </MenuV2.Portal>
+              </MenuV2>
             </Show>
             <Show when={filtered().length > 0}>
-              <Menu placement="bottom-end" gutter={4}>
-                <Menu.Trigger
-                  as={IconButton}
+              <MenuV2 placement="bottom-end" gutter={4}>
+                <MenuV2.Trigger
+                  as={IconButtonV2}
                   type="button"
                   variant="ghost-muted"
                   size="small"
@@ -307,16 +307,16 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
                   disabled={!!store.transaction}
                   icon={<Icon name="outline-dots" size="small" />}
                 />
-                <Menu.Portal>
-                  <Menu.Content>
-                    <Menu.Item onSelect={confirmDeleteAll}>
+                <MenuV2.Portal>
+                  <MenuV2.Content>
+                    <MenuV2.Item onSelect={confirmDeleteAll}>
                       <span class="settings-v2-workspaces-delete-all">
                         {language.t("settings.workspaces.deleteAll")}
                       </span>
-                    </Menu.Item>
-                  </Menu.Content>
-                </Menu.Portal>
-              </Menu>
+                    </MenuV2.Item>
+                  </MenuV2.Content>
+                </MenuV2.Portal>
+              </MenuV2>
             </Show>
           </div>
         </div>
@@ -335,7 +335,7 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
                       <div class="settings-v2-workspaces-row-header">
                         <div class="settings-v2-workspaces-copy">
                           <div class="settings-v2-workspaces-main">
-                            <Tooltip
+                            <TooltipV2
                               value={workspace.directory}
                               placement="top-start"
                               contentClass="max-w-[calc(100vw-32px)] break-all"
@@ -348,21 +348,24 @@ export const SettingsWorkspacesV2: Component<{ activeDirectory?: string }> = (pr
                               >
                                 {workspace.directory}
                               </span>
-                            </Tooltip>
+                            </TooltipV2>
                           </div>
                           <span class="settings-v2-workspaces-meta">{sessionCount(workspace)}</span>
                         </div>
                         <div class="settings-v2-workspaces-row-actions">
                           <Show when={lastActive(workspace)}>
                             {(value) => (
-                              <Tooltip value={language.t("settings.workspaces.lastActiveSession")} placement="top-end">
+                              <TooltipV2
+                                value={language.t("settings.workspaces.lastActiveSession")}
+                                placement="top-end"
+                              >
                                 <span tabIndex={0} class="settings-v2-workspaces-active">
                                   {value()}
                                 </span>
-                              </Tooltip>
+                              </TooltipV2>
                             )}
                           </Show>
-                          <IconButton
+                          <IconButtonV2
                             type="button"
                             variant="ghost-muted"
                             size="small"
@@ -425,12 +428,12 @@ function DialogDeleteAllWorkspaces(props: { count: number; project: string; onDe
         />
       </DialogHeader>
       <DialogFooter>
-        <Button type="button" variant="neutral" onClick={() => dialog.close()}>
+        <ButtonV2 type="button" variant="neutral" onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </Button>
-        <Button type="button" variant="danger" onClick={remove}>
+        </ButtonV2>
+        <ButtonV2 type="button" variant="danger" onClick={remove}>
           {language.t("settings.workspaces.deleteAll")}
-        </Button>
+        </ButtonV2>
       </DialogFooter>
     </Dialog>
   )
@@ -483,17 +486,17 @@ function DialogDeleteWorkspace(props: {
         />
       </DialogHeader>
       <DialogFooter>
-        <Button type="button" variant="neutral" onClick={() => dialog.close()}>
+        <ButtonV2 type="button" variant="neutral" onClick={() => dialog.close()}>
           {language.t("common.cancel")}
-        </Button>
-        <Button
+        </ButtonV2>
+        <ButtonV2
           type="button"
           variant="danger"
           disabled={status.isPending || status.isError || status.data?.result.active}
           onClick={remove}
         >
           {language.t("workspace.delete.button")}
-        </Button>
+        </ButtonV2>
       </DialogFooter>
     </Dialog>
   )

packages/app/src/components/status-popover-body.tsx

@@ -6,7 +6,7 @@ import { useMcpToggle } from "@/context/mcp"
 import { useWorkspaceLocation } from "@/context/location"
 import { useData } from "@/context/server"
 import { useServerSDK } from "@/context/server-sdk"
-import { pluginLabels } from "@/utils/plugin"
+import { pluginLabel } from "@/utils/plugin"
 
 const pluginEmptyMessage = (value: string, file: string): JSXElement => {
   const parts = value.split(file)
@@ -39,7 +39,7 @@ export function StatusPopoverBody(props: { shown: boolean }) {
     () => (props.shown ? sdk().directory : undefined),
     (directory) => serverSDK.api.plugin.list({ location: { directory } }).then((result) => result.data),
   )
-  const plugins = createMemo(() => pluginLabels(pluginList.latest ?? []))
+  const plugins = createMemo(() => (pluginList.latest ?? []).map(pluginLabel))
   const pluginCount = createMemo(() => plugins().length)
   const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
 
@@ -48,9 +48,10 @@ export function StatusPopoverBody(props: { shown: boolean }) {
       <Tabs
         aria-label={language.t("status.popover.ariaLabel")}
         class="tabs bg-background-strong rounded-xl overflow-hidden"
+        data-component="tabs"
         data-active="mcp"
         defaultValue="mcp"
-        variant="underline"
+        variant="alt"
       >
         <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
           <Tabs.Trigger value="mcp" data-slot="tab" class="text-12-regular">
@@ -110,7 +111,6 @@ export function StatusPopoverBody(props: { shown: boolean }) {
                         </span>
                         <div onClick={(event) => event.stopPropagation()}>
                           <Switch
-                            appearance="standard"
                             checked={enabled()}
                             disabled={toggleMcp.isPending && toggleMcp.variables === name}
                             onChange={() => {

packages/app/src/components/status-popover.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Popover } from "@opencode-ai/ui/popover"
 import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
@@ -156,7 +157,7 @@ function StatusPopoverView(props: { state: StatusPopoverState }) {
     <Popover
       open={props.state.shown}
       onOpenChange={props.state.onOpenChange}
-      triggerAs={IconButton}
+      triggerAs={IconButtonV2}
       triggerProps={{
         variant: "ghost-muted",
         size: "large",
@@ -166,7 +167,7 @@ function StatusPopoverView(props: { state: StatusPopoverState }) {
       }}
       trigger={
         <div class="relative size-4">
-          <Icon name={props.state.shown ? "status-active" : "status"} />
+          <IconV2 name={props.state.shown ? "status-active" : "status"} />
           <div
             class={`absolute -top-1 -right-1 size-2 rounded-full border border-[var(--v2-background-bg-deep)] ${serverStatusDotClass(props.state)}`}
           />

packages/app/src/components/titlebar-tab-nav.tsx

@@ -2,8 +2,8 @@ import { createEffect, createMemo, createSignal, onCleanup, Show, type Ref } fro
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createMutation } from "@tanstack/solid-query"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { useGlobal, useServerCtx } from "@/context/global"
 import { useLanguage } from "@/context/language"
 import { ServerConnection, serverName, useServers } from "@/context/servers"
@@ -281,7 +281,7 @@ export function TabNavItem(props: {
       </a>
 
       <div data-slot="tab-close">
-        <IconButton
+        <IconButtonV2
           size="small"
           variant="ghost-muted"
           class="hover-reveal relative z-10 group-hover:opacity-100 group-data-[active=true]:opacity-100 group-data-[editing=true]:opacity-100"
@@ -290,7 +290,7 @@ export function TabNavItem(props: {
             event.stopPropagation()
           }}
           onClick={closeTab}
-          icon={<Icon name="xmark-small" />}
+          icon={<IconV2 name="xmark-small" />}
         />
       </div>
     </div>
@@ -377,7 +377,7 @@ export function DraftTabItem(props: {
         class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"
       >
         <span class="flex size-4 shrink-0 items-center justify-center">
-          <Icon name="edit" />
+          <IconV2 name="edit" />
         </span>
         <span
           data-titlebar-tab-title
@@ -387,7 +387,7 @@ export function DraftTabItem(props: {
         </span>
       </a>
       <div data-slot="tab-close">
-        <IconButton
+        <IconButtonV2
           size="small"
           variant="ghost-muted"
           onPointerDown={(event) => {
@@ -400,7 +400,7 @@ export function DraftTabItem(props: {
           }}
           class="hover-reveal relative z-10 group-hover:opacity-100 group-data-[active=true]:opacity-100 group-data-[editing=true]:opacity-100"
           onClick={closeTab}
-          icon={<Icon name="xmark-small" />}
+          icon={<IconV2 name="xmark-small" />}
           aria-label={language.t("common.closeTab")}
         />
       </div>

packages/app/src/components/titlebar.tsx

@@ -12,10 +12,10 @@ import {
 } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLocation, useNavigate } from "@solidjs/router"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Keybind } from "@opencode-ai/ui/keybind"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 
 import { LayoutRoute, useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
@@ -330,28 +330,28 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                 <Show when={windows() || linux()}>
                   <WindowsAppMenu command={command} platform={platform} />
                 </Show>
-                <Tooltip
+                <TooltipV2
                   placement="bottom"
                   value={
                     <>
                       {language.t("home.title")}
-                      <Keybind keys={command.keybindParts("home.toggle")} variant="neutral" />
+                      <KeybindV2 keys={command.keybindParts("home.toggle")} variant="neutral" />
                     </>
                   }
                   class="shrink-0"
                 >
-                  <IconButton
+                  <IconButtonV2
                     type="button"
                     variant="ghost-muted"
                     size="large"
                     class="!w-9 shrink-0"
-                    icon={<Icon name="grid-plus" />}
+                    icon={<IconV2 name="grid-plus" />}
                     state={layout.route().type === "home" ? "pressed" : undefined}
                     onClick={toggleHome}
                     aria-label={language.t("home.title")}
                     aria-pressed={layout.route().type === "home"}
                   />
-                </Tooltip>
+                </TooltipV2>
 
                 <TitlebarTabStrip
                   tabs={tabsStore}
@@ -368,25 +368,25 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
                   }}
                   onReorder={(keys) => tabsStoreActions.reorder(keys)}
                 />
-                <Tooltip
+                <TooltipV2
                   placement="bottom"
                   value={
                     <>
                       {language.t("command.session.new")}
-                      <Keybind keys={newTabTooltipKeybind(command)} variant="neutral" />
+                      <KeybindV2 keys={newTabTooltipKeybind(command)} variant="neutral" />
                     </>
                   }
                 >
-                  <IconButton
+                  <IconButtonV2
                     type="button"
                     variant="ghost-muted"
                     size="large"
                     class="shrink-0"
-                    icon={<Icon name="plus" />}
+                    icon={<IconV2 name="plus" />}
                     onClick={openNewTab}
                     aria-label={language.t("command.session.new")}
                   />
-                </Tooltip>
+                </TooltipV2>
                 <div class="flex-1" />
                 <TitlebarV2Right state={v2RightState()} />
               </div>

packages/app/src/components/windows-app-menu.tsx

@@ -1,7 +1,8 @@
-import { For, type JSX } from "solid-js"
-import { Menu } from "@opencode-ai/ui/menu"
+import { For, Show, type JSX } from "solid-js"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 
 import { useCommand } from "@/context/command"
 import { DESKTOP_MENU, desktopMenuVisible, type DesktopMenuAction, type DesktopMenuEntry } from "@/desktop-menu"
@@ -46,32 +47,32 @@ export function WindowsAppMenu(props: {
   }
 
   return (
-    <Menu appearance="standard" gutter={4} modal={false} placement="bottom-start">
+    <DropdownMenu gutter={4} modal={false} placement="bottom-start">
       <div
         data-component="desktop-icon-button"
         class="flex h-7 w-9 shrink-0 items-center justify-center rounded-[6px] px-1"
       >
-        <Menu.Trigger
-          as={IconButton}
+        <DropdownMenu.Trigger
+          as={IconButtonV2}
           variant="ghost-muted"
           size="large"
-          icon={<Icon name="menu" />}
+          icon={<IconV2 name="menu" />}
           aria-label={language.t("desktop.menu.ariaLabel")}
           onPointerDown={rememberFocus}
           onKeyDown={rememberFocus}
         />
       </div>
-      <Menu.Portal>
-        <Menu.Content class="desktop-app-menu">
-          <Menu.Group>
-            <Menu.GroupLabel class="desktop-app-menu-heading">OpenCode</Menu.GroupLabel>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content class="desktop-app-menu">
+          <DropdownMenu.Group>
+            <DropdownMenu.GroupLabel class="desktop-app-menu-heading">OpenCode</DropdownMenu.GroupLabel>
             <For each={DESKTOP_MENU.filter((menu) => desktopMenuVisible(menu, "windows"))}>
               {(menu) => (
                 <DesktopMenuSubmenu label={language.t(menu.labelKey)}>
                   <For each={menu.items?.filter((entry) => desktopMenuVisible(entry, "windows"))}>
                     {(entry) => {
                       // Static menu data: an early return keeps the union narrowing a Show fallback would lose.
-                      if (entry.type === "separator") return <Menu.Separator />
+                      if (entry.type === "separator") return <DropdownMenu.Separator />
                       return (
                         <DesktopMenuItem
                           label={entry.labelKey ? language.t(entry.labelKey) : ""}
@@ -85,28 +86,36 @@ export function WindowsAppMenu(props: {
                 </DesktopMenuSubmenu>
               )}
             </For>
-          </Menu.Group>
-        </Menu.Content>
-      </Menu.Portal>
-    </Menu>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
   )
 }
 
 function DesktopMenuSubmenu(props: { label: string; children: JSX.Element }) {
   return (
-    <Menu.Sub>
-      <Menu.SubTrigger>{props.label}</Menu.SubTrigger>
-      <Menu.Portal>
-        <Menu.SubContent class="desktop-app-menu desktop-app-menu-sub">{props.children}</Menu.SubContent>
-      </Menu.Portal>
-    </Menu.Sub>
+    <DropdownMenu.Sub>
+      <DropdownMenu.SubTrigger>
+        <span data-slot="dropdown-menu-item-label">{props.label}</span>
+        <span data-slot="desktop-app-menu-chevron">
+          <Icon name="chevron-right" size="small" />
+        </span>
+      </DropdownMenu.SubTrigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.SubContent class="desktop-app-menu">{props.children}</DropdownMenu.SubContent>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Sub>
   )
 }
 
 function DesktopMenuItem(props: { label: string; keybind?: string; disabled?: boolean; onSelect: () => void }) {
   return (
-    <Menu.Item disabled={props.disabled} onSelect={props.onSelect} shortcut={props.keybind}>
-      {props.label}
-    </Menu.Item>
+    <DropdownMenu.Item disabled={props.disabled} onSelect={props.onSelect}>
+      <DropdownMenu.ItemLabel>{props.label}</DropdownMenu.ItemLabel>
+      <Show when={props.keybind}>
+        <span data-slot="desktop-app-menu-keybind">{props.keybind}</span>
+      </Show>
+    </DropdownMenu.Item>
   )
 }

packages/app/src/context/layout.tsx

@@ -11,7 +11,7 @@ import { decode64 } from "@/utils/base64"
 import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 import { createPathHelpers } from "./file/path"
-import type { ProjectAvatarVariant } from "@opencode-ai/ui/project-avatar"
+import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { SessionStateKey } from "@/utils/server-scope"
 import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./layout-helpers"
 import { requireServerKey } from "@/utils/session-route"

packages/app/src/index.css

@@ -1,6 +1,6 @@
 @import "@opencode-ai/ui/styles/tailwind";
 @import "@opencode-ai/session-ui/styles";
-@import "@opencode-ai/ui/styles/tokens";
+@import "@opencode-ai/ui/v2/styles/tailwind.css";
 @import "tw-animate-css";
 
 @font-face {
@@ -30,22 +30,23 @@
     container-name: getting-started;
   }
 
-  [data-component="menu-v2-content"].desktop-app-menu {
+  [data-component="dropdown-menu-content"].desktop-app-menu,
+  [data-component="dropdown-menu-sub-content"].desktop-app-menu {
     min-width: 160px;
     padding: 2px;
   }
 
-  [data-component="menu-v2-content"].desktop-app-menu:not(.desktop-app-menu-sub) {
+  [data-component="dropdown-menu-content"].desktop-app-menu {
     width: 160px;
   }
 
-  [data-component="menu-v2-content"].desktop-app-menu-sub {
+  [data-component="dropdown-menu-sub-content"].desktop-app-menu {
     width: max-content;
     min-width: 240px;
     max-width: min(320px, calc(100vw - 24px));
   }
 
-  [data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-group-label"] {
+  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-group-label"] {
     display: flex;
     align-items: center;
     height: 28px;
@@ -56,7 +57,10 @@
     color: var(--text-weak);
   }
 
-  [data-component="menu-v2-content"].desktop-app-menu [data-component="menu-v2-item"] {
+  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-item"],
+  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-sub-trigger"],
+  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-item"],
+  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-sub-trigger"] {
     min-height: 28px;
     padding: 0 12px;
     gap: 8px;
@@ -64,11 +68,12 @@
     line-height: 1;
   }
 
-  [data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-item-content"] {
+  [data-component="dropdown-menu-content"].desktop-app-menu [data-slot="dropdown-menu-item-label"],
+  [data-component="dropdown-menu-sub-content"].desktop-app-menu [data-slot="dropdown-menu-item-label"] {
     white-space: nowrap;
   }
 
-  [data-component="menu-v2-content"].desktop-app-menu [data-slot="menu-v2-item-shortcut"] {
+  [data-slot="desktop-app-menu-keybind"] {
     margin-left: auto;
     color: var(--text-weak);
     font-size: var(--font-size-x-small);
@@ -76,13 +81,19 @@
     white-space: nowrap;
   }
 
+  [data-slot="desktop-app-menu-chevron"] {
+    display: flex;
+    margin-left: auto;
+    color: var(--icon-base);
+  }
+
   [data-component="getting-started-actions"] {
     display: flex;
     flex-direction: column;
     gap: 0.75rem; /* gap-3 */
   }
 
-  [data-component="getting-started-actions"] > [data-component="button-v2"] {
+  [data-component="getting-started-actions"] > [data-component="button"] {
     width: 100%;
   }
 
@@ -92,7 +103,7 @@
       align-items: center;
     }
 
-    [data-component="getting-started-actions"] > [data-component="button-v2"] {
+    [data-component="getting-started-actions"] > [data-component="button"] {
       width: auto;
     }
   }

packages/app/src/pages/home/home-projects-view.tsx

@@ -6,11 +6,11 @@ import { AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/d
 import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers"
 import { RestrictToElement } from "@dnd-kit/dom/modifiers"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Menu } from "@opencode-ai/ui/menu"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+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 { getProjectAvatarVariant, type HomeProjectSelection, type LocalProject } from "@/context/layout"
 import { ServerConnection } from "@/context/servers"
 import { useLanguage } from "@/context/language"
@@ -82,18 +82,18 @@ export function HomeProjectsView(props: HomeProjectsViewProps) {
       <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={props.servers.length === 1 && !(props.projects.length === 0 && props.recentlyClosed.length > 0)}>
-          <Tooltip placement="bottom" value={props.language.t("home.project.add")}>
-            <IconButton
+          <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={<Icon name="folder-add-left" />}
+              icon={<IconV2 name="folder-add-left" />}
               disabled={props.serverHealth(props.servers[0])?.healthy === false}
               onClick={() => props.onChooseProject(props.servers[0])}
               aria-label={props.language.t("home.project.add")}
             />
-          </Tooltip>
+          </TooltipV2>
         </Show>
       </div>
       <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
@@ -161,7 +161,7 @@ export function HomeUtilityNav(props: {
         class="text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted"
         onClick={props.onOpenSettings}
       >
-        <Icon name="settings-gear" size="small" />
+        <IconV2 name="settings-gear" size="small" />
         <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
       </HomeProjectNavButton>
       <HomeProjectNavButton
@@ -169,7 +169,7 @@ export function HomeUtilityNav(props: {
         class="text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted"
         onClick={props.onOpenHelp}
       >
-        <Icon name="help" size="small" />
+        <IconV2 name="help" size="small" />
         <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
       </HomeProjectNavButton>
     </div>
@@ -234,7 +234,7 @@ function HomeServerRow(props: {
           }}
           onPointerDown={(event) => event.preventDefault()}
         >
-          <Icon
+          <IconV2
             name="chevron-down"
             size="small"
             class="transition-transform duration-150 ease-in-out"
@@ -280,17 +280,17 @@ function HomeServerRow(props: {
           open={props.contextMenuOpen(contextMenuID())}
           onOpenChange={(open) => props.onSetContextMenuOpen(contextMenuID(), open)}
         />
-        <Tooltip class="flex shrink-0 items-center" placement="bottom" value={props.language.t("home.project.add")}>
-          <IconButton
+        <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={<Icon name="folder-add-left" />}
+            icon={<IconV2 name="folder-add-left" />}
             aria-label={props.language.t("home.project.add")}
             disabled={props.health?.healthy === false}
             onClick={() => props.onChooseProject(props.server)}
           />
-        </Tooltip>
+        </TooltipV2>
       </div>
     </div>
   )
@@ -394,7 +394,7 @@ function HomeProjectEmpty(
         disabled={unreachable()}
         onClick={() => props.onChooseProject(props.server)}
       >
-        <Icon name="folder-add-left" size="small" />
+        <IconV2 name="folder-add-left" size="small" />
         <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("home.project.add")}</span>
       </HomeProjectNavButton>
       <Show when={props.items.length > 0}>
@@ -423,7 +423,7 @@ function HomeRecentlyClosedRow(
     return worktree
   }
   return (
-    <Tooltip placement="right" value={path()}>
+    <TooltipV2 placement="right" value={path()}>
       <HomeProjectNavButton
         type="button"
         data-component="home-recently-closed-row"
@@ -434,7 +434,7 @@ function HomeRecentlyClosedRow(
         <HomeProjectAvatar project={props.project} outline />
         <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
       </HomeProjectNavButton>
-    </Tooltip>
+    </TooltipV2>
   )
 }
 
@@ -523,55 +523,55 @@ function HomeProjectRow(
         `}
         data-menu={props.contextMenuOpen(contextMenuID())}
       >
-        <Menu
+        <MenuV2
           gutter={6}
           modal={false}
           placement="bottom-end"
           open={props.contextMenuOpen(contextMenuID())}
           onOpenChange={(open) => props.onSetContextMenuOpen(contextMenuID(), open)}
         >
-          <Menu.Trigger
-            as={IconButton}
+          <MenuV2.Trigger
+            as={IconButtonV2}
             data-action="home-project-menu"
             variant="ghost-muted"
             size="small"
-            icon={<Icon name="outline-dots" />}
+            icon={<IconV2 name="outline-dots" />}
             aria-label={props.language.t("common.moreOptions")}
           />
-          <Menu.Portal>
-            <Menu.Content>
-              <Menu.Item onSelect={() => props.onOpenProjectNewSession(props.server, props.project.worktree)}>
+          <MenuV2.Portal>
+            <MenuV2.Content>
+              <MenuV2.Item onSelect={() => props.onOpenProjectNewSession(props.server, props.project.worktree)}>
                 {props.language.t("command.session.new")}
-              </Menu.Item>
-              <Menu.Item onSelect={() => props.onEditProject(props.server, props.project)}>
+              </MenuV2.Item>
+              <MenuV2.Item onSelect={() => props.onEditProject(props.server, props.project)}>
                 {props.language.t("dialog.project.edit.title")}
-              </Menu.Item>
+              </MenuV2.Item>
               <Show when={props.canRevealProject(props.server)}>
-                <Menu.Item onSelect={() => props.onRevealProject(props.server, props.project)}>
+                <MenuV2.Item onSelect={() => props.onRevealProject(props.server, props.project)}>
                   {props.language.t(
                     fileManagerApp(platform.platform === "desktop" ? (platform.os ?? "unknown") : "unknown")
                       .actionLabel,
                   )}
-                </Menu.Item>
+                </MenuV2.Item>
               </Show>
-              <Menu.Item
+              <MenuV2.Item
                 disabled={props.unseen === 0}
                 onSelect={() => props.onClearNotifications(props.server, props.project)}
               >
                 {props.language.t("sidebar.project.clearNotifications")}
-              </Menu.Item>
-              <Menu.Separator />
-              <Menu.Item onSelect={() => props.onCloseProject(props.server, props.project.worktree)}>
+              </MenuV2.Item>
+              <MenuV2.Separator />
+              <MenuV2.Item onSelect={() => props.onCloseProject(props.server, props.project.worktree)}>
                 {props.language.t("common.close")}
-              </Menu.Item>
-            </Menu.Content>
-          </Menu.Portal>
-        </Menu>
-        <IconButton
+              </MenuV2.Item>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
+        <IconButtonV2
           data-action="home-project-new-session"
           variant="ghost-muted"
           size="small"
-          icon={<Icon name="edit" />}
+          icon={<IconV2 name="edit" />}
           aria-label={props.language.t("command.session.new")}
           onClick={() => props.onOpenProjectNewSession(props.server, props.project.worktree)}
         />

packages/app/src/pages/home/home-sessions-view.tsx

@@ -2,10 +2,10 @@ import type { SessionInfo } from "@opencode-ai/client/promise"
 import { createMemo, For, Show, Suspense } from "solid-js"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+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 { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { useLanguage } from "@/context/language"
 import { ServerConnection } from "@/context/servers"
 import { SessionTabAvatarView } from "@/pages/layout/session-tab-avatar"
@@ -83,7 +83,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
         <Suspense>
           <Show when={props.groups.length > 0 && props.canCreateSession}>
             <div class="pointer-events-none absolute right-0 top-[84px] z-20 flex lg:top-[108px]">
-              <Button
+              <ButtonV2
                 data-action="home-new-session"
                 variant="ghost-muted"
                 size="normal"
@@ -92,7 +92,7 @@ export function HomeSessionsView(props: HomeSessionsViewProps) {
                 onClick={props.onCreateSession}
               >
                 {props.language.t("command.session.new")}
-              </Button>
+              </ButtonV2>
             </div>
           </Show>
         </Suspense>
@@ -273,7 +273,7 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
             duration-[120ms] ease-in-out hover:bg-v2-background-bg-layer-02 focus-within:bg-v2-background-bg-layer-02
           `}
         >
-          <Icon name="magnifying-glass" />
+          <IconV2 name="magnifying-glass" />
           <input
             ref={props.onSetSearchInput}
             class={`
@@ -317,12 +317,12 @@ function HomeSessionSearch(props: HomeSessionsViewProps) {
             }}
           />
           <Show when={props.searchValue}>
-            <IconButton
+            <IconButtonV2
               type="button"
               variant="ghost-muted"
               size="small"
               class="relative z-20 shrink-0"
-              icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
+              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
               aria-label={props.searchPlaceholder}
               onClick={() => {
                 props.onSearchClose()
@@ -458,12 +458,12 @@ function HomeSessionRow(props: HomeSessionsViewProps & { record: HomeSessionReco
             group-hover/session:opacity-100 focus-within:opacity-100
           `}
         >
-          <Tooltip class="flex shrink-0 items-center" placement="bottom" value={props.language.t("common.archive")}>
-            <IconButton
+          <TooltipV2 class="flex shrink-0 items-center" placement="bottom" value={props.language.t("common.archive")}>
+            <IconButtonV2
               data-action="home-session-archive"
               variant="ghost-muted"
               size="large"
-              icon={<Icon name="archive" />}
+              icon={<IconV2 name="archive" />}
               aria-label={props.language.t("common.archive")}
               onClick={(event) => {
                 event.preventDefault()
@@ -471,7 +471,7 @@ function HomeSessionRow(props: HomeSessionsViewProps & { record: HomeSessionReco
                 void props.onArchiveSession(props.record.session)
               }}
             />
-          </Tooltip>
+          </TooltipV2>
         </div>
       </Show>
     </div>
@@ -525,9 +525,9 @@ function HomeSessionsEmpty(props: { onNewSession?: () => void; language: ReturnT
       </p>
       <Show when={props.onNewSession}>
         {(onNewSession) => (
-          <Button data-action="home-new-session" variant="neutral" size="normal" icon="edit" onClick={onNewSession()}>
+          <ButtonV2 data-action="home-new-session" variant="neutral" size="normal" icon="edit" onClick={onNewSession()}>
             {props.language.t("command.session.new")}
-          </Button>
+          </ButtonV2>
         )}
       </Show>
     </div>

packages/app/src/pages/layout/session-tab-avatar.tsx

@@ -1,8 +1,9 @@
-import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
+import type { LocalProject } from "@/context/layout"
+import { getProjectAvatarVariant } from "@/context/layout"
 import type { ServerConnection } from "@/context/servers"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
-import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
+import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { SessionProgressIndicatorV2 } from "@opencode-ai/session-ui/v2/session-progress-indicator-v2"
 import { Show } from "solid-js"
 

packages/app/src/pages/new-session/new-session-view.tsx

@@ -1,7 +1,8 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Wordmark } from "@opencode-ai/ui/wordmark"
+import { Icon } from "@opencode-ai/ui/v2/icon"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
 import { Show, createMemo, createSignal } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Portal } from "solid-js/web"
@@ -46,7 +47,7 @@ export function NewSessionView(props: {
       >
         <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
           <div class={NEW_SESSION_CONTENT_WIDTH}>
-            <Wordmark class="h-auto w-full text-v2-background-bg-inverse" />
+            <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
             <div class="mt-8 flex flex-col gap-8">
               <PromptInputV2Composer controller={props.input} accentSubmit={props.workspace.selection.workspace()} />
               <Show when={props.project.empty()}>
@@ -95,7 +96,7 @@ export function NewSessionStatus(props: { mount: HTMLElement | null; visible: bo
       {(mount) => (
         <Portal mount={mount}>
           <Show when={props.visible}>
-            <Tooltip appearance="standard" placement="bottom" value={language.t("status.popover.trigger")}>
+            <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
               <StatusPopoverV2 />
             </Tooltip>
           </Show>
@@ -152,7 +153,7 @@ function ProviderTip() {
               <Icon name="chevron-down" size="small" class="-rotate-90" />
             </span>
           </button>
-          <Tooltip
+          <TooltipV2
             class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
             placement="top"
             openDelay={1000}
@@ -166,7 +167,7 @@ function ProviderTip() {
             >
               <Icon name="xmark-small" />
             </button>
-          </Tooltip>
+          </TooltipV2>
         </div>
       </div>
     </Show>

packages/app/src/pages/new-session/use-new-session-commands.tsx

@@ -21,8 +21,8 @@ export function useNewSessionCommands(input: {
       title: language.t("command.palette"),
       hidden: true,
       onSelect: async () => {
-        const { DialogCommandPaletteV2 } = await import("@/components/dialog-command-palette-v2")
-        void dialog.show(() => <DialogCommandPaletteV2 />)
+        const { DialogSelectFile } = await import("@/components/dialog-select-file")
+        void dialog.show(() => <DialogSelectFile />)
       },
     },
     {

packages/app/src/pages/session.tsx

@@ -30,9 +30,10 @@ import { createStore } from "solid-js/store"
 import type { SessionReviewLineComment } from "@opencode-ai/session-ui/session-review"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Select } from "@opencode-ai/ui/select"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner } from "@opencode-ai/ui/scroll-view"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { Button } from "@opencode-ai/ui/button"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
 import { showToast } from "@/utils/toast"
@@ -194,9 +195,9 @@ function SessionErrorFallback(props: { error: unknown; sessionID?: string; serve
               </div>
             )}
           </Show>
-          <Button variant="neutral" size="normal" icon="xmark-small" onClick={closeTab}>
+          <ButtonV2 variant="neutral" size="normal" icon="xmark-small" onClick={closeTab}>
             {language.t("session.error.notFound.closeTab")}
-          </Button>
+          </ButtonV2>
         </div>
       </div>
     )
@@ -1038,6 +1039,25 @@ export default function Page() {
 
     return (
       <Select
+        options={changesOptions()}
+        current={reviewMode()}
+        label={changesLabel}
+        onSelect={(option) => option && controller.layout.view().review.setMode(option)}
+        variant="ghost"
+        size="small"
+        valueClass="text-14-medium"
+      />
+    )
+  }
+
+  const changesTitleV2 = () => {
+    if (!canReview()) {
+      return null
+    }
+
+    return (
+      <SelectV2
+        appearance="inline"
         options={changesOptions()}
         current={reviewMode()}
         label={changesLabel}
@@ -1141,7 +1161,7 @@ export default function Page() {
   // updates such as session switches.
   const reviewPanelV2Props = () => ({
     get title() {
-      return changesTitle()
+      return changesTitleV2()
     },
     get empty() {
       return reviewEmptyV2()
@@ -1732,22 +1752,22 @@ export default function Page() {
       >
         <Tabs.Trigger
           value="session"
-          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           classList={{
             "!w-1/2 !max-w-none": true,
             "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
           }}
+          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           onClick={() => setStore("mobileTab", "session")}
         >
           {language.t("session.tab.session")}
         </Tabs.Trigger>
         <Tabs.Trigger
           value="changes"
-          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           classList={{
             "!w-1/2 !max-w-none !border-r-0": true,
             "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
           }}
+          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
           onClick={() => setStore("mobileTab", "changes")}
         >
           {hasReview()

packages/app/src/pages/session/composer/session-background-dock.tsx

@@ -1,6 +1,6 @@
 import { useLanguage } from "@/context/language"
 import { useCommand } from "@/context/command"
-import { Keybind } from "@opencode-ai/ui/keybind"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
 import { For, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { SessionComposerPullout } from "./session-composer-pullout"
@@ -52,7 +52,7 @@ export function SessionBackgroundDock(props: {
             <span>
               <span class="text-v2-text-text-muted">{moving()}</span>
               <span class="pl-2">
-                <Keybind keys={command.keybindParts("session.background")} variant="neutral" />
+                <KeybindV2 keys={command.keybindParts("session.background")} variant="neutral" />
               </span>
             </span>
           )}

packages/app/src/pages/session/composer/session-composer-pullout.tsx

@@ -1,5 +1,4 @@
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
@@ -108,7 +107,7 @@ export function SessionComposerPullout(props: {
               <IconButton
                 data-action={`session-${props.name}-toggle-button`}
                 data-collapsed={props.collapsed ? "true" : "false"}
-                icon={<Icon name="chevron-down" />}
+                icon="chevron-down"
                 size="normal"
                 variant="ghost"
                 style={{ transform: `rotate(${value() * 180}deg)` }}

packages/app/src/pages/session/composer/session-followup-dock.tsx

@@ -3,7 +3,6 @@ import { createStore } from "solid-js/store"
 import { Button } from "@opencode-ai/ui/button"
 import { DockTray } from "@opencode-ai/ui/dock-surface"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
 
 export function SessionFollowupDock(props: {
@@ -49,7 +48,7 @@ export function SessionFollowupDock(props: {
         <div class="ml-auto shrink-0">
           <IconButton
             data-collapsed={store.collapsed ? "true" : "false"}
-            icon={<Icon name="chevron-down" />}
+            icon="chevron-down"
             size="normal"
             variant="ghost"
             style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
@@ -80,7 +79,7 @@ export function SessionFollowupDock(props: {
                 <span class="min-w-0 flex-1 truncate text-13-regular text-text-strong">{item.text}</span>
                 <Button
                   size="small"
-                  variant="neutral"
+                  variant="secondary"
                   class="shrink-0"
                   disabled={!!props.sending}
                   onClick={() => props.onSend(item.id)}

packages/app/src/pages/session/composer/session-permission-dock.tsx

@@ -38,14 +38,14 @@ export function SessionPermissionDock(props: {
               {language.t("ui.permission.deny")}
             </Button>
             <Button
-              variant="neutral"
+              variant="secondary"
               size="normal"
               onClick={() => props.onDecide("always")}
               disabled={props.responding}
             >
               {language.t("ui.permission.allowAlways")}
             </Button>
-            <Button variant="contrast" size="normal" onClick={() => props.onDecide("once")} disabled={props.responding}>
+            <Button variant="primary" size="normal" onClick={() => props.onDecide("once")} disabled={props.responding}>
               {language.t("ui.permission.allowOnce")}
             </Button>
           </div>

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -2,7 +2,6 @@ import { For, Show, createEffect, createMemo, onCleanup, onMount, type Component
 import { createStore } from "solid-js/store"
 import { useMutation } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
-import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DockPrompt } from "@opencode-ai/session-ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
@@ -500,14 +499,19 @@ export const SessionQuestionDock: Component<{ request: FormInfo; onSubmit: () =>
                   </For>
                 </div>
               </Show>
-              <IconButton
-                icon={<Icon name="chevron-down" size="small" />}
-                variant="ghost"
+              <button
+                type="button"
+                data-component="icon-button"
+                data-icon="chevron-down"
+                data-size="normal"
+                data-variant="ghost"
                 disabled={sending()}
                 style={{ transform: `rotate(${hidden() * 180}deg)` }}
                 onClick={store.minimized ? restore : minimize}
                 aria-label={language.t(store.minimized ? "session.question.restore" : "session.question.minimize")}
-              />
+              >
+                <Icon name="chevron-down" size="small" />
+              </button>
             </div>
           </>
         }
@@ -518,12 +522,12 @@ export const SessionQuestionDock: Component<{ request: FormInfo; onSubmit: () =>
             </Button>
             <div data-slot="question-footer-actions">
               <Show when={store.tab > 0}>
-                <Button variant="neutral" size="large" disabled={sending()} onClick={back}>
+                <Button variant="secondary" size="large" disabled={sending()} onClick={back}>
                   {language.t("ui.common.back")}
                 </Button>
               </Show>
               <Button
-                variant={last() ? "contrast" : "neutral"}
+                variant={last() ? "primary" : "secondary"}
                 size="large"
                 disabled={sending()}
                 onClick={next}

packages/app/src/pages/session/composer/session-revert-dock.tsx

@@ -1,8 +1,8 @@
 import { For, Show, createEffect, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
+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 { useLanguage } from "@/context/language"
 
 export function SessionRevertDock(props: {
@@ -45,7 +45,7 @@ export function SessionRevertDock(props: {
         onClick={toggle}
         onKeyDown={onHeaderKeyDown}
       >
-        <Icon name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
+        <IconV2 name="outline-reset" size="normal" class="text-v2-icon-icon-muted" />
         <span
           classList={{
             "font-[440] shrink-0 cursor-default text-[13px] leading-5 tracking-[-0.04px]": true,
@@ -61,8 +61,8 @@ export function SessionRevertDock(props: {
           </span>
         </Show>
         <div class="ml-auto shrink-0">
-          <IconButton
-            icon={<Icon name="outline-chevron-down" size="small" />}
+          <IconButtonV2
+            icon={<IconV2 name="outline-chevron-down" size="small" />}
             size="large"
             variant="ghost-muted"
             style={{ transform: `rotate(${store.collapsed ? 180 : 0}deg)` }}
@@ -95,7 +95,7 @@ export function SessionRevertDock(props: {
                 <span class="min-w-0 flex-1 truncate text-[13px] font-[400] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
                   {item.text}
                 </span>
-                <Button
+                <ButtonV2
                   size="small"
                   variant="neutral"
                   class="shrink-0"
@@ -103,7 +103,7 @@ export function SessionRevertDock(props: {
                   onClick={() => props.onRestore(item.id)}
                 >
                   {language.t("session.revertDock.restore")}
-                </Button>
+                </ButtonV2>
               </div>
             )}
           </For>

packages/app/src/pages/session/file-tabs.tsx

@@ -7,8 +7,8 @@ import { useFileComponent } from "@opencode-ai/ui/context/file"
 import { cloneSelectedLineRange, previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
 import { createLineCommentControllerV2 } from "@opencode-ai/session-ui/v2/line-comment-annotations-v2"
 import { sampledChecksum } from "@opencode-ai/util/encode"
-import { LineCommentOverflowIcon } from "@opencode-ai/ui/line-comment"
-import { Menu } from "@opencode-ai/ui/menu"
+import { LineCommentV2OverflowIcon } from "@opencode-ai/ui/v2/line-comment-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { showToast } from "@/utils/toast"
@@ -26,7 +26,7 @@ type SessionFileViewProps = {
 
 const selectionSide = (range: SelectedLineRange) => range.endSide ?? range.side ?? "additions"
 
-function FileCommentMenu(props: {
+function FileCommentMenuV2(props: {
   moreLabel: string
   editLabel: string
   deleteLabel: string
@@ -35,17 +35,17 @@ function FileCommentMenu(props: {
 }) {
   return (
     <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
-      <Menu gutter={4}>
-        <Menu.Trigger as="button" type="button" data-slot="line-comment-v2-overflow" aria-label={props.moreLabel}>
-          <LineCommentOverflowIcon />
-        </Menu.Trigger>
-        <Menu.Portal>
-          <Menu.Content>
-            <Menu.Item onSelect={props.onEdit}>{props.editLabel}</Menu.Item>
-            <Menu.Item onSelect={props.onDelete}>{props.deleteLabel}</Menu.Item>
-          </Menu.Content>
-        </Menu.Portal>
-      </Menu>
+      <MenuV2 gutter={4}>
+        <MenuV2.Trigger as="button" type="button" data-slot="line-comment-v2-overflow" aria-label={props.moreLabel}>
+          <LineCommentV2OverflowIcon />
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content>
+            <MenuV2.Item onSelect={props.onEdit}>{props.editLabel}</MenuV2.Item>
+            <MenuV2.Item onSelect={props.onDelete}>{props.deleteLabel}</MenuV2.Item>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
     </div>
   )
 }
@@ -331,7 +331,7 @@ export function SessionFileView(props: SessionFileViewProps) {
     },
     editSubmitLabel: language.t("common.save"),
     renderCommentActions: (_, controls) => (
-      <FileCommentMenu
+      <FileCommentMenuV2
         moreLabel={language.t("common.moreOptions")}
         editLabel={language.t("common.edit")}
         deleteLabel={language.t("common.delete")}

packages/app/src/pages/session/session-side-panel.tsx

@@ -10,8 +10,9 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Mark } from "@opencode-ai/ui/logo"
-import { Keybind } from "@opencode-ai/ui/keybind"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import type { FileDiffInfo } from "@opencode-ai/client/promise"
 
 import FileTree from "@/components/file-tree"
@@ -312,27 +313,30 @@ export function SessionSidePanel(props: {
                           <Show when={contextOpen()}>
                             <Tabs.Trigger
                               value="context"
-                              onMiddleClick={() => tabs().close("context")}
                               closeButton={
-                                <Tooltip
+                                <TooltipV2
                                   value={
                                     <>
                                       {language.t("common.closeTab")}
                                       <Show when={closeTabKeybind().length > 0}>
-                                        <Keybind keys={closeTabKeybind()} variant="neutral" />
+                                        <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
                                       </Show>
                                     </>
                                   }
                                   placement="bottom"
                                   gutter={10}
                                 >
-                                  <Tabs.CloseButton
+                                  <IconButton
+                                    icon="close-small"
+                                    variant="ghost"
+                                    class="h-5 w-5"
                                     onClick={() => tabs().close("context")}
                                     aria-label={language.t("common.closeTab")}
                                   />
-                                </Tooltip>
+                                </TooltipV2>
                               }
                               hideCloseButton
+                              onMiddleClick={() => tabs().close("context")}
                             >
                               <div class="flex items-center gap-2">
                                 <SessionContextUsage variant="indicator" />
@@ -356,27 +360,30 @@ export function SessionSidePanel(props: {
                               >
                                 <Tabs.Trigger
                                   value={SESSION_OPEN_FILE_TAB}
-                                  onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
                                   closeButton={
-                                    <Tooltip
+                                    <TooltipV2
                                       value={
                                         <>
                                           {language.t("common.closeTab")}
                                           <Show when={closeTabKeybind().length > 0}>
-                                            <Keybind keys={closeTabKeybind()} variant="neutral" />
+                                            <KeybindV2 keys={closeTabKeybind()} variant="neutral" />
                                           </Show>
                                         </>
                                       }
                                       placement="bottom"
                                       gutter={10}
                                     >
-                                      <Tabs.CloseButton
+                                      <IconButton
+                                        icon="close-small"
+                                        variant="ghost"
+                                        class="h-5 w-5"
                                         onClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
                                         aria-label={language.t("common.closeTab")}
                                       />
-                                    </Tooltip>
+                                    </TooltipV2>
                                   }
                                   hideCloseButton
+                                  onMiddleClick={() => tabs().close(SESSION_OPEN_FILE_TAB)}
                                 >
                                   <div class="flex items-center gap-1.5 italic">
                                     <Icon name="open-file" size="small" />
@@ -387,26 +394,26 @@ export function SessionSidePanel(props: {
                             )}
                           </For>
                           <div class="h-full shrink-0 sticky right-0 z-10 flex items-center justify-center bg-v2-background-bg-base">
-                            <Tooltip
+                            <TooltipV2
                               value={
                                 <>
                                   {language.t("command.file.open")}
                                   <Show when={openFileKeybind().length > 0}>
-                                    <Keybind keys={openFileKeybind()} variant="neutral" />
+                                    <KeybindV2 keys={openFileKeybind()} variant="neutral" />
                                   </Show>
                                 </>
                               }
                               placement="bottom"
                               class="flex items-center"
                             >
-                              <IconButton
+                              <IconButtonV2
                                 icon={<Icon name="plus-small" />}
                                 variant="ghost-muted"
                                 size="large"
                                 onClick={() => openFileBrowser()}
                                 aria-label={language.t("command.file.open")}
                               />
-                            </Tooltip>
+                            </TooltipV2>
                           </div>
                         </Tabs.List>
                         <div
@@ -496,7 +503,7 @@ export function SessionSidePanel(props: {
                   classList={{ "border-l border-border-weaker-base": reviewOpen() }}
                 >
                   <Tabs
-                    variant="surface"
+                    variant="pill"
                     value={fileTreeTab()}
                     onChange={setFileTreeTabValue}
                     class="h-full"

packages/app/src/pages/session/terminal-panel-v2.tsx

@@ -10,9 +10,8 @@ import { RestrictToElement } from "@dnd-kit/dom/modifiers"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Keybind } from "@opencode-ai/ui/keybind"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
 
 import { SortableTerminalTabV2 } from "@/components/session/session-sortable-terminal-tab-v2"
 import { Terminal } from "@/components/terminal"
@@ -250,7 +249,7 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
           >
             <div class="flex flex-col h-full">
               <Tabs
-                variant="panel"
+                variant="normal"
                 value={terminal.active()}
                 onChange={(id) => terminal.open(id)}
                 class="!h-[52px] !flex-none"
@@ -267,12 +266,12 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
                     {(pty, index) => <SortableTerminalTabV2 terminal={pty} index={index()} onClose={close} />}
                   </For>
                   <div class="h-full flex items-center justify-center">
-                    <Tooltip
+                    <TooltipV2
                       value={
                         <>
                           {language.t("command.terminal.new")}
                           <Show when={newTerminalKeybind().length > 0}>
-                            <Keybind keys={newTerminalKeybind()} variant="neutral" />
+                            <KeybindV2 keys={newTerminalKeybind()} variant="neutral" />
                           </Show>
                         </>
                       }
@@ -280,12 +279,13 @@ export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
                       class="flex items-center"
                     >
                       <IconButton
-                        icon={<Icon name="plus-small" size="large" />}
+                        icon="plus-small"
                         variant="ghost"
+                        iconSize="large"
                         onClick={() => terminal.new({ focus: true })}
                         aria-label={language.t("command.terminal.new")}
                       />
-                    </Tooltip>
+                    </TooltipV2>
                   </div>
                 </Tabs.List>
               </Tabs>

packages/app/src/pages/session/timeline/controller.tsx

@@ -1,6 +1,6 @@
 import type { SessionMessageInfo } from "@opencode-ai/client/promise"
-import { DialogFooter, DialogHeader, DialogTitleGroup, Dialog } from "@opencode-ai/ui/dialog"
-import { Button } from "@opencode-ai/ui/button"
+import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { useNavigate } from "@solidjs/router"
 import { createEffect, createMemo, on } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -186,7 +186,7 @@ export function createTimelineController(input: { session: TimelineSessionSource
       dialog.close()
     }
     return (
-      <Dialog fit>
+      <DialogV2 fit>
         <DialogHeader hideClose>
           <DialogTitleGroup
             title={language.t("session.delete.title")}
@@ -194,14 +194,14 @@ export function createTimelineController(input: { session: TimelineSessionSource
           />
         </DialogHeader>
         <DialogFooter>
-          <Button variant="ghost" onClick={() => dialog.close()}>
+          <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
             {language.t("common.cancel")}
-          </Button>
-          <Button variant="danger" onClick={confirm}>
+          </ButtonV2>
+          <ButtonV2 variant="danger" onClick={confirm}>
             {language.t("session.delete.button")}
-          </Button>
+          </ButtonV2>
         </DialogFooter>
-      </Dialog>
+      </DialogV2>
     )
   }
 

packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -15,13 +15,13 @@ import { createVirtualizer, defaultRangeExtractor, elementScroll, type VirtualIt
 import { Card } from "@opencode-ai/ui/card"
 import { MessageDivider, SessionShellMessage, type UserActions } from "@opencode-ai/session-ui/message-part"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
+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 { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
-import { Menu } from "@opencode-ai/ui/menu"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
-import { Button } from "@opencode-ai/ui/button"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SessionRetry } from "@opencode-ai/session-ui/session-retry"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner, ScrollView } from "@opencode-ai/ui/scroll-view"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
@@ -138,7 +138,7 @@ function WorkspaceMoveAction(props: {
             : "flex h-[46px] w-full items-center gap-2 rounded-b-[6px] px-3 pe-9 pt-2.5 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted focus-visible:outline-none"
         }
       >
-        <Icon name="workspace-new" class="shrink-0 text-v2-icon-icon-muted" />
+        <IconV2 name="workspace-new" class="shrink-0 text-v2-icon-icon-muted" />
         <span class="min-w-0 truncate">{language.t("workspace.move.title")}</span>
       </SessionWorkspaceMenu>
       <button
@@ -154,7 +154,7 @@ function WorkspaceMoveAction(props: {
           props.onDismiss()
         }}
       >
-        <Icon name="xmark-small" />
+        <IconV2 name="xmark-small" />
       </button>
     </div>
   )
@@ -203,12 +203,12 @@ function SessionSummaryPanel(props: {
           gutter={-22}
           class={`${row} hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-pressed`}
         >
-          <Icon name={props.local ? "monitor" : "workspace-isolated"} class="shrink-0 text-v2-icon-icon-muted" />
+          <IconV2 name={props.local ? "monitor" : "workspace-isolated"} class="shrink-0 text-v2-icon-icon-muted" />
           <span class="min-w-0 flex-1 truncate text-start">{location()}</span>
-          <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+          <IconV2 name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
         </SessionWorkspaceMenu>
         <div class={row}>
-          <Icon name="branch" class="shrink-0 text-v2-icon-icon-muted" />
+          <IconV2 name="branch" class="shrink-0 text-v2-icon-icon-muted" />
           <Show
             when={props.branch}
             fallback={
@@ -235,13 +235,13 @@ function SessionSummaryPanel(props: {
           class={`${row} hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none`}
           onClick={props.onReview}
         >
-          <Icon name="review" class="shrink-0 text-v2-icon-icon-muted" />
+          <IconV2 name="review" class="shrink-0 text-v2-icon-icon-muted" />
           <Show when={props.diffs} fallback={<span>{language.t("session.review.loadingChanges")}</span>}>
             {(diffs) => (
               <Show when={diffs().length > 0} fallback={<span>{language.t("session.review.noChanges")}</span>}>
                 <span>{language.plural("ui.sessionTurn.diffs.changed", diffs().length)}</span>
                 <span class="text-v2-text-text-muted">·</span>
-                <DiffChanges appearance="standard" changes={diffs()} />
+                <DiffChanges changes={diffs()} />
               </Show>
             )}
           </Show>
@@ -1175,11 +1175,11 @@ function MessageTimelineView(
                     when={workspaceSession()}
                     fallback={
                       <span class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-muted">
-                        <Icon name="monitor" />
+                        <IconV2 name="monitor" />
                       </span>
                     }
                   >
-                    <Tooltip
+                    <TooltipV2
                       placement="bottom-start"
                       value={sessionDirectory()}
                       contentClass="max-w-[calc(100vw-32px)] break-all"
@@ -1189,9 +1189,9 @@ function MessageTimelineView(
                         aria-label={sessionDirectory()}
                         class="flex size-6 shrink-0 items-center justify-center text-v2-icon-icon-accent"
                       >
-                        <Icon name="workspace-isolated" />
+                        <IconV2 name="workspace-isolated" />
                       </span>
-                    </Tooltip>
+                    </TooltipV2>
                   </Show>
                   <Show when={parentID()}>
                     <button
@@ -1268,8 +1268,8 @@ function MessageTimelineView(
                           onOpenChange={setSummary}
                         >
                           <KobaltePopover.Trigger
-                            as={IconButton}
-                            icon={<Icon name="window-analytics" />}
+                            as={IconButtonV2}
+                            icon={<IconV2 name="window-analytics" />}
                             variant="ghost-muted"
                             size="large"
                             state={summaryOpen() ? "pressed" : undefined}
@@ -1300,7 +1300,7 @@ function MessageTimelineView(
                       )}
                     </Show>
                     <Show when={!parentID()}>
-                      <Menu
+                      <MenuV2
                         gutter={6}
                         placement="bottom-end"
                         open={title.menuOpen}
@@ -1309,9 +1309,9 @@ function MessageTimelineView(
                           if (open) return
                         }}
                       >
-                        <Menu.Trigger
-                          as={IconButton}
-                          icon={<Icon name="outline-dots" />}
+                        <MenuV2.Trigger
+                          as={IconButtonV2}
+                          icon={<IconV2 name="outline-dots" />}
                           variant="ghost-muted"
                           size="large"
                           state={share.open || title.pendingShare ? "pressed" : undefined}
@@ -1321,8 +1321,8 @@ function MessageTimelineView(
                             more = el
                           }}
                         />
-                        <Menu.Portal>
-                          <Menu.Content
+                        <MenuV2.Portal>
+                          <MenuV2.Content
                             style={{ width: "120px", "min-width": "120px" }}
                             onCloseAutoFocus={(event) => {
                               if (title.pendingRename) {
@@ -1340,34 +1340,34 @@ function MessageTimelineView(
                               }
                             }}
                           >
-                            <Menu.Item
+                            <MenuV2.Item
                               onSelect={() => {
                                 setTitle("pendingRename", true)
                                 setTitle("menuOpen", false)
                               }}
                             >
                               {language.t("common.rename")}
-                            </Menu.Item>
+                            </MenuV2.Item>
                             <Show when={shareEnabled()}>
-                              <Menu.Item
+                              <MenuV2.Item
                                 onSelect={() => {
                                   setTitle({ pendingShare: true, menuOpen: false })
                                 }}
                               >
                                 {language.t("session.share.action.share")}...
-                              </Menu.Item>
+                              </MenuV2.Item>
                             </Show>
-                            <Menu.Item onSelect={() => void props.action.export(id)}>
+                            <MenuV2.Item onSelect={() => void props.action.export(id)}>
                               {language.t("common.export")}...
-                            </Menu.Item>
+                            </MenuV2.Item>
                             {/* TODO: Need a V2 session archive API. */}
-                            <Menu.Separator />
-                            <Menu.Item onSelect={() => props.action.showDelete(id)}>
+                            <MenuV2.Separator />
+                            <MenuV2.Item onSelect={() => props.action.showDelete(id)}>
                               {language.t("common.delete")}...
-                            </Menu.Item>
-                          </Menu.Content>
-                        </Menu.Portal>
-                      </Menu>
+                            </MenuV2.Item>
+                          </MenuV2.Content>
+                        </MenuV2.Portal>
+                      </MenuV2>
 
                       <KobaltePopover
                         open={share.open}
@@ -1415,7 +1415,7 @@ function MessageTimelineView(
                               <Show
                                 when={shareUrl()}
                                 fallback={
-                                  <Button
+                                  <ButtonV2
                                     variant="contrast"
                                     class="w-full"
                                     onClick={() => void props.action.share()}
@@ -1424,7 +1424,7 @@ function MessageTimelineView(
                                     {props.pending.share()
                                       ? language.t("session.share.action.publishing")
                                       : language.t("session.share.action.publish")}
-                                  </Button>
+                                  </ButtonV2>
                                 }
                               >
                                 <div class="flex flex-col gap-2">
@@ -1441,26 +1441,26 @@ function MessageTimelineView(
                                     >
                                       {shareUrl()}
                                     </div>
-                                    <IconButton
+                                    <IconButtonV2
                                       type="button"
                                       size="small"
                                       variant="ghost-muted"
-                                      icon={<Icon name="outline-copy" />}
+                                      icon={<IconV2 name="outline-copy" />}
                                       aria-label={language.t("session.share.copy.copyLink")}
                                       onClick={() => void props.action.copyShareUrl()}
                                     />
-                                    <IconButton
+                                    <IconButtonV2
                                       type="button"
                                       size="small"
                                       variant="ghost-muted"
-                                      icon={<Icon name="outline-square-arrow" />}
+                                      icon={<IconV2 name="outline-square-arrow" />}
                                       aria-label={language.t("session.share.action.view")}
                                       onClick={props.action.viewShare}
                                       disabled={props.pending.unshare()}
                                     />
                                   </div>
                                   <div class="flex w-full">
-                                    <Button
+                                    <ButtonV2
                                       variant="outline"
                                       class="w-full"
                                       onClick={() => void props.action.unshare()}
@@ -1469,7 +1469,7 @@ function MessageTimelineView(
                                       {props.pending.unshare()
                                         ? language.t("session.share.action.unpublishing")
                                         : language.t("session.share.action.unpublish")}
-                                    </Button>
+                                    </ButtonV2>
                                   </div>
                                 </div>
                               </Show>

packages/app/src/pages/session/usage-exceeded-dialogs.tsx

@@ -4,8 +4,9 @@ import type { SessionStatus } from "@opencode-ai/client/promise"
 import { onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useSessionLayout } from "./session-layout"
-import { useDialog, useI18n } from "@opencode-ai/ui/context"
+import { useDialog } from "@opencode-ai/ui/context"
 import { DialogUsageExceeded } from "@/components/dialog-usage-exceeded"
+import { useI18n } from "@opencode-ai/ui/context"
 
 const GO_UPSELL_FREE_TIER_LAST_SEEN_AT = "go_upsell_last_seen_at"
 const GO_UPSELL_FREE_TIER_DONT_SHOW = "go_upsell_dont_show"

packages/app/src/pages/session/use-session-commands.tsx

@@ -219,8 +219,8 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
 
   const openFile = () => {
     void openDialog(
-      () => import("@/components/dialog-command-palette-v2"),
-      (x) => dialog.show(() => <x.DialogCommandPaletteV2 onOpenFile={showAllFiles} />),
+      () => import("@/components/dialog-select-file"),
+      (x) => dialog.show(() => <x.DialogSelectFile onOpenFile={showAllFiles} />),
     )
   }
 

packages/app/src/pages/session/v2/review-panel-v2.tsx

@@ -7,7 +7,7 @@ import {
   SessionReviewV2Sidebar,
 } from "@opencode-ai/session-ui/v2/session-review-v2"
 import { SessionReviewFilePreviewV2 } from "@opencode-ai/session-ui/v2/session-review-file-preview-v2"
-import { DiffChanges } from "@opencode-ai/ui/diff-changes"
+import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
 import type {
   SessionReviewComment,
   SessionReviewCommentActions,

packages/app/src/pages/session/v2/session-file-list-v2.tsx

@@ -1,5 +1,5 @@
 import { FileIcon } from "@opencode-ai/ui/file-icon"
-import "@opencode-ai/ui/file-tree.css"
+import "@opencode-ai/ui/v2/file-tree-v2.css"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
 import { kindChange, kindLabel, type Kind } from "@/components/file-tree-v2"

packages/app/src/utils/plugin.test.ts

@@ -1,16 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import type { PluginInfo } from "@opencode-ai/client"
-import { pluginLabels } from "./plugin"
-
-describe("pluginLabels", () => {
-  test("omits built-in plugins", () => {
-    const plugins: PluginInfo[] = [
-      { id: "opencode.internal", source: { type: "builtin" }, status: "active", tui: false },
-      { id: "package-plugin", source: { type: "package", package: "example" }, status: "active", tui: false },
-      { id: "local-plugin", source: { type: "local", path: "/tmp/plugin.ts" }, status: "active", tui: false },
-      { id: "sdk-plugin", source: { type: "sdk" }, status: "active", tui: false },
-    ]
-
-    expect(pluginLabels(plugins)).toEqual(["package-plugin", "local-plugin", "sdk-plugin"])
-  })
-})

packages/app/src/utils/plugin.ts

@@ -6,7 +6,3 @@ export function pluginLabel(plugin: PluginInfo) {
   if (plugin.source.type === "local") return plugin.source.path
   return plugin.source.type
 }
-
-export function pluginLabels(plugins: readonly PluginInfo[]) {
-  return plugins.filter((plugin) => plugin.source.type !== "builtin").map(pluginLabel)
-}

packages/app/src/utils/toast.tsx

@@ -1,18 +1,15 @@
 import { Icon, type IconProps } from "@opencode-ai/ui/icon"
-import { Toast, showToast, toaster, type ToastOptions } from "@opencode-ai/ui/toast"
-
-type AppToastOptions = Omit<ToastOptions, "icon"> & {
-  icon?: IconProps["name"]
-}
+import type { ToastOptions, ToastVariant } from "@opencode-ai/ui/toast"
+import { ToastV2, showToastV2, toasterV2 } from "@opencode-ai/ui/v2/toast-v2"
 
 export function ToastRegion() {
-  return <Toast.Region />
+  return <ToastV2.Region />
 }
 
-function showAppToast(options: AppToastOptions | string) {
-  if (typeof options === "string") return showToast(options)
+export function showToast(options: ToastOptions | string) {
+  if (typeof options === "string") return showToastV2(options)
 
-  return showToast({
+  return showToastV2({
     ...options,
     icon: resolveIcon(options.icon, options.variant),
     actions: options.actions?.map((action) => ({
@@ -22,13 +19,11 @@ function showAppToast(options: AppToastOptions | string) {
   })
 }
 
-export { showAppToast as showToast }
-
 export function dismissToast(toastId: number) {
-  return toaster.dismiss(toastId)
+  return toasterV2.dismiss(toastId)
 }
 
-function resolveIcon(icon: IconProps["name"] | undefined, variant: ToastOptions["variant"]) {
+function resolveIcon(icon: IconProps["name"] | undefined, variant: ToastVariant | undefined) {
   const name = icon ?? (variant === "success" ? "check" : undefined)
   if (!name) return
   return <Icon name={name} />

packages/app/src/wsl/dialog-add-server.tsx

@@ -1,15 +1,15 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Button } from "@opencode-ai/ui/button"
-import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
-import { Divider } from "@opencode-ai/ui/divider"
-import { Loader } from "@opencode-ai/ui/loader"
-import { RadioGroup, RadioItem } from "@opencode-ai/ui/radio"
-import { TextInput } from "@opencode-ai/ui/text-input"
+import { showToast } from "@opencode-ai/ui/toast"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "@opencode-ai/ui/v2/dialog-v2"
+import { DividerV2 } from "@opencode-ai/ui/v2/divider-v2"
+import { LoaderV2 } from "@opencode-ai/ui/v2/loader-v2"
+import { RadioGroupV2, RadioItemV2 } from "@opencode-ai/ui/v2/radio-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { showToast } from "@/utils/toast"
 import { useWslAddServerProbes } from "./add-server-probes"
 import { useWslServers } from "./context"
 import { addServerViewModel, type AddServerText } from "./settings-model"
@@ -50,7 +50,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
             fallback={<div class="settings-v2-wsl-loading">{controller.loadError()}</div>}
           >
             <div class="settings-v2-wsl-loading">
-              <Loader />
+              <LoaderV2 />
             </div>
           </Show>
         </Dialog>
@@ -73,7 +73,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
           >
             <Dialog fit class="settings-v2-wsl-dialog">
               <div class="settings-v2-wsl-loading">
-                <Loader />
+                <LoaderV2 />
               </div>
             </Dialog>
           </Show>
@@ -85,13 +85,13 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
               {controller.view() === "main" ? language.t("wsl.server.add") : language.t("wsl.onboarding.installDistro")}
             </DialogTitle>
           </DialogHeader>
-          <Divider />
+          <DividerV2 />
           <Show
             when={controller.view() === "main"}
             fallback={
               <>
                 <DialogBody class="settings-v2-wsl-dialog-body settings-v2-wsl-catalog-picker">
-                  <TextInput
+                  <TextInputV2
                     class="settings-v2-wsl-catalog-search"
                     appearance="large"
                     placeholder={language.t("wsl.onboarding.searchDistros")}
@@ -100,7 +100,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                     onInput={(event) => controller.setCatalogSearch(event.currentTarget.value)}
                   />
                   <div class="settings-v2-wsl-catalog-list">
-                    <RadioGroup
+                    <RadioGroupV2
                       hideLabel
                       class="settings-v2-wsl-distro-group"
                       label={language.t("wsl.onboarding.installDistro")}
@@ -110,7 +110,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                     >
                       <For each={model().filteredInstallableDistros}>
                         {(item) => (
-                          <RadioItem
+                          <RadioItemV2
                             class="settings-v2-wsl-distro-row settings-v2-wsl-catalog-row"
                             value={item.name}
                             disabled={model().busy}
@@ -118,23 +118,23 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                           />
                         )}
                       </For>
-                    </RadioGroup>
+                    </RadioGroupV2>
                   </div>
                 </DialogBody>
                 <DialogFooter>
-                  <Button variant="neutral" disabled={model().busy} onClick={controller.closeCatalog}>
+                  <ButtonV2 variant="neutral" disabled={model().busy} onClick={controller.closeCatalog}>
                     {language.t("common.cancel")}
-                  </Button>
-                  <Button
+                  </ButtonV2>
+                  <ButtonV2
                     variant={model().installingCatalogDistro ? "loading" : "contrast"}
                     disabled={!model().installingCatalogDistro && (model().busy || !model().catalogTarget)}
                     style={{ width: "99px" }}
                     onClick={controller.installCatalogDistro}
                   >
                     <Show when={model().installingCatalogDistro} fallback={language.t("wsl.onboarding.installDistro")}>
-                      <Loader />
+                      <LoaderV2 />
                     </Show>
-                  </Button>
+                  </ButtonV2>
                 </DialogFooter>
               </>
             }
@@ -142,9 +142,14 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
             <DialogBody class="settings-v2-wsl-dialog-body">
               <div class="settings-v2-wsl-section-header">
                 <span class="settings-v2-wsl-section-title">{language.t("wsl.onboarding.installedDistros")}</span>
-                <Button variant="ghost-muted" size="small" disabled={model().busy} onClick={controller.refreshDistros}>
+                <ButtonV2
+                  variant="ghost-muted"
+                  size="small"
+                  disabled={model().busy}
+                  onClick={controller.refreshDistros}
+                >
                   {language.t("wsl.onboarding.checkAgain")}
-                </Button>
+                </ButtonV2>
               </div>
 
               <Show
@@ -160,7 +165,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                 }
               >
                 <div class="settings-v2-wsl-distro-list">
-                  <RadioGroup
+                  <RadioGroupV2
                     hideLabel
                     class="settings-v2-wsl-distro-group"
                     label={language.t("wsl.onboarding.installedDistros")}
@@ -172,7 +177,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                       {(item) => {
                         const status = () => model().distroStatuses[item.name] ?? null
                         return (
-                          <RadioItem
+                          <RadioItemV2
                             class={`settings-v2-wsl-distro-row${item.version === 1 ? " settings-v2-wsl-distro-row--unsupported" : ""}`}
                             value={item.name}
                             disabled={item.version === 1 || model().busy}
@@ -190,7 +195,7 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
                         )
                       }}
                     </For>
-                  </RadioGroup>
+                  </RadioGroupV2>
                 </div>
               </Show>
 
@@ -225,19 +230,19 @@ export function DialogAddWslServer(props: DialogWslServerProps = {}) {
             </DialogBody>
 
             <DialogFooter>
-              <Button variant="neutral" disabled={controller.adding()} onClick={controller.close}>
+              <ButtonV2 variant="neutral" disabled={controller.adding()} onClick={controller.close}>
                 {language.t("common.cancel")}
-              </Button>
-              <Button
+              </ButtonV2>
+              <ButtonV2
                 variant={primaryButton().loading ? "loading" : primaryButton().variant}
                 disabled={!primaryButton().loading && primaryButton().disabled}
                 style={primaryButtonStyle()}
                 onClick={controller.runPrimary}
               >
                 <Show when={primaryButton().loading} fallback={translate(language, primaryButton().label)}>
-                  <Loader />
+                  <LoaderV2 />
                 </Show>
-              </Button>
+              </ButtonV2>
             </DialogFooter>
           </Show>
         </Dialog>
@@ -434,14 +439,14 @@ function DialogWslSetup(props: {
           </Show>
         </div>
         <Show when={props.state === "unavailable" && props.installable}>
-          <Button variant="neutral" disabled={props.busy} onClick={props.onInstall}>
+          <ButtonV2 variant="neutral" disabled={props.busy} onClick={props.onInstall}>
             {language.t("wsl.onboarding.installWsl")}
-          </Button>
+          </ButtonV2>
         </Show>
         <Show when={props.state !== "unavailable"}>
-          <Button variant="neutral" onClick={() => dialog.close()}>
+          <ButtonV2 variant="neutral" onClick={() => dialog.close()}>
             {language.t("common.close")}
-          </Button>
+          </ButtonV2>
         </Show>
       </div>
     </Dialog>

packages/app/src/wsl/settings.tsx

@@ -1,9 +1,9 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Badge } from "@opencode-ai/ui/badge"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Menu } from "@opencode-ai/ui/menu"
+import { Tag } from "@opencode-ai/ui/v2/badge-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 { useMutation } from "@tanstack/solid-query"
 import fuzzysort from "fuzzysort"
 import { type Accessor, For, Show, createMemo } from "solid-js"
@@ -32,22 +32,22 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
     <Show
       when={platform.wslServers}
       fallback={
-        <Button variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
+        <ButtonV2 variant="ghost-muted" icon="plus" onClick={props.onAddServer}>
           {language.t("dialog.server.add.button")}
-        </Button>
+        </ButtonV2>
       }
     >
-      <Menu gutter={4} modal={false} placement="bottom-end">
-        <Menu.Trigger as={Button} variant="ghost-muted" icon="plus">
+      <MenuV2 gutter={4} modal={false} placement="bottom-end">
+        <MenuV2.Trigger as={ButtonV2} variant="ghost-muted" icon="plus">
           {language.t("dialog.server.add.button")}
-        </Menu.Trigger>
-        <Menu.Portal>
-          <Menu.Content>
-            <Menu.Item onSelect={props.onAddServer}>{language.t("dialog.server.add.button")}</Menu.Item>
-            <Menu.Item onSelect={openAddWsl}>{language.t("wsl.server.add")}</Menu.Item>
-          </Menu.Content>
-        </Menu.Portal>
-      </Menu>
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content>
+            <MenuV2.Item onSelect={props.onAddServer}>{language.t("dialog.server.add.button")}</MenuV2.Item>
+            <MenuV2.Item onSelect={openAddWsl}>{language.t("wsl.server.add")}</MenuV2.Item>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
     </Show>
   )
 }
@@ -113,52 +113,54 @@ export function WslServerSettings(props: {
               </div>
               <div class="settings-v2-servers-actions">
                 <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
-                  <Badge>{language.t("dialog.server.status.default")}</Badge>
+                  <Tag>{language.t("dialog.server.status.default")}</Tag>
                 </Show>
                 <Show when={opencodeAction()}>
                   {(label) => (
-                    <Button
+                    <ButtonV2
                       size="small"
                       disabled={busy() || request.isPending}
                       onClick={() => api && request.mutate(() => api.installOpencode(item.config.distro))}
                     >
                       {busy() ? language.t("wsl.server.updating") : language.t(label())}
-                    </Button>
+                    </ButtonV2>
                   )}
                 </Show>
-                <Menu gutter={4} modal={false} placement="bottom-end">
-                  <Menu.Trigger
-                    as={IconButton}
+                <MenuV2 gutter={4} modal={false} placement="bottom-end">
+                  <MenuV2.Trigger
+                    as={IconButtonV2}
                     variant="ghost-muted"
                     size="small"
-                    icon={<Icon name="outline-dots" />}
+                    icon={<IconV2 name="outline-dots" />}
                     aria-label={language.t("common.moreOptions")}
                   />
-                  <Menu.Portal>
-                    <Menu.Content>
-                      <Menu.Group>
-                        <Menu.GroupLabel>{language.t("wsl.server.menu.label")}</Menu.GroupLabel>
+                  <MenuV2.Portal>
+                    <MenuV2.Content>
+                      <MenuV2.Group>
+                        <MenuV2.GroupLabel>{language.t("wsl.server.menu.label")}</MenuV2.GroupLabel>
                         <Show when={wslRuntimeRetryable(item.runtime)}>
-                          <Menu.Item onSelect={() => api && request.mutate(() => api.startServer(key))}>
+                          <MenuV2.Item onSelect={() => api && request.mutate(() => api.startServer(key))}>
                             {language.t("wsl.server.retryStart")}
-                          </Menu.Item>
+                          </MenuV2.Item>
                         </Show>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
-                          <Menu.Item onSelect={() => props.domain.defaults.set(key)}>
+                          <MenuV2.Item onSelect={() => props.domain.defaults.set(key)}>
                             {language.t("dialog.server.menu.default")}
-                          </Menu.Item>
+                          </MenuV2.Item>
                         </Show>
                         <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
-                          <Menu.Item onSelect={() => props.domain.defaults.set(null)}>
+                          <MenuV2.Item onSelect={() => props.domain.defaults.set(null)}>
                             {language.t("dialog.server.menu.defaultRemove")}
-                          </Menu.Item>
+                          </MenuV2.Item>
                         </Show>
-                        <Menu.Separator />
-                        <Menu.Item onSelect={() => remove(key)}>{language.t("dialog.server.menu.delete")}</Menu.Item>
-                      </Menu.Group>
-                    </Menu.Content>
-                  </Menu.Portal>
-                </Menu>
+                        <MenuV2.Separator />
+                        <MenuV2.Item onSelect={() => remove(key)}>
+                          {language.t("dialog.server.menu.delete")}
+                        </MenuV2.Item>
+                      </MenuV2.Group>
+                    </MenuV2.Content>
+                  </MenuV2.Portal>
+                </MenuV2>
               </div>
             </div>
           )

packages/app/test-browser/toast-owner.test.ts

@@ -1,44 +1,44 @@
 import { beforeEach, describe, expect, test } from "bun:test"
 import { createSignal, type JSX } from "solid-js"
-import { showToast, toaster } from "@opencode-ai/ui/toast"
+import { showToastV2, toasterV2 } from "@opencode-ai/ui/v2/toast-v2"
 
-describe("showToast", () => {
+describe("showToastV2", () => {
   // The toast registry is module state, so each test starts from an empty stack.
   beforeEach(() => {
-    toaster.dismiss()
+    toasterV2.dismiss()
   })
 
   test("coalesces exact active content", () => {
-    const first = showToast({ title: "Repeated error", description: "Try again" })
-    const second = showToast({ title: "Repeated error", description: "Try again" })
-    const different = showToast({ title: "Repeated error", description: "A different error" })
+    const first = showToastV2({ title: "Repeated error", description: "Try again" })
+    const second = showToastV2({ title: "Repeated error", description: "Try again" })
+    const different = showToastV2({ title: "Repeated error", description: "A different error" })
 
     expect(second).toBe(first)
     expect(different).not.toBe(first)
 
-    toaster.dismiss(first)
-    toaster.dismiss(different)
+    toasterV2.dismiss(first)
+    toasterV2.dismiss(different)
   })
 
   test("allows dismissed content to appear again", () => {
-    const first = showToast("Dismiss and retry")
-    toaster.dismiss(first)
+    const first = showToastV2("Dismiss and retry")
+    toasterV2.dismiss(first)
 
-    const second = showToast("Dismiss and retry")
+    const second = showToastV2("Dismiss and retry")
     expect(second).not.toBe(first)
 
-    toaster.dismiss(second)
+    toasterV2.dismiss(second)
   })
 
   test("recreates matching content when it is not the topmost toast", () => {
-    const first = showToast("First toast")
-    const topmost = showToast("Topmost toast")
-    const repeated = showToast("First toast")
+    const first = showToastV2("First toast")
+    const topmost = showToastV2("Topmost toast")
+    const repeated = showToastV2("First toast")
 
     expect(repeated).not.toBe(first)
 
-    toaster.dismiss(topmost)
-    toaster.dismiss(repeated)
+    toasterV2.dismiss(topmost)
+    toasterV2.dismiss(repeated)
   })
 
   test("creates no reactive computations at call time", () => {
@@ -50,7 +50,7 @@ describe("showToast", () => {
       return undefined
     }) as unknown as JSX.Element
 
-    const id = showToast({ description: "test", icon })
+    const id = showToastV2({ description: "test", icon })
 
     // Resolving the icon at call time creates an ownerless computation that is
     // never disposed and tracks its dependencies forever; it must only resolve
@@ -59,6 +59,6 @@ describe("showToast", () => {
     setTick(1)
     expect(reads).toBe(0)
 
-    toaster.dismiss(id)
+    toasterV2.dismiss(id)
   })
 })

packages/client/package.json

@@ -30,7 +30,8 @@
     "generate": "bun run script/build.ts",
     "check:generated": "bun run generate && git diff --exit-code -- src/promise/generated src/effect/generated src/effect/api",
     "test": "bun test --timeout 5000",
-    "typecheck": "tsgo --noEmit"
+    "bench:sync": "bun script/bench-session-sync.ts",
+    "typecheck": "tsgo --noEmit && tsgo --noEmit -p tsconfig.test.json"
   },
   "dependencies": {
     "@opencode-ai/schema": "workspace:*",

packages/client/perf/session-sync.md

@@ -0,0 +1,69 @@
+# Session sync streaming performance
+
+## Goal
+
+Keep the engine data layer's per-token-delta cost negligible next to the
+legacy `createData` path, so the sync engine's immutable fold/render
+architecture is not a streaming CPU regression.
+
+## Benchmark
+
+```
+cd packages/client
+bun run bench:sync
+```
+
+Env knobs: `BENCH_TRANSCRIPT` (messages, default 200), `BENCH_DELTAS`
+(default 2000), `BENCH_RUNS` (default 7, median after 1 warmup).
+
+## Metrics
+
+- `engine_deltas_ms` (primary) — wall clock to stream `BENCH_DELTAS` text
+  deltas into the active assistant message.
+- `legacy_deltas_ms` — same scenario through legacy `createData`.
+- `*_hydrate_ms`, `*_retained_mb` — secondary.
+
+## Files in scope
+
+- `src/solid/engine-data.ts` — store adapter (`update`, clone boundary)
+- `src/solid/engine/engine.ts` — `render`, `applyOverlayToMessages`
+
+## Experiment log (200 messages, 2000 deltas)
+
+Baseline: engine 240µs/delta vs legacy 0.3µs/delta.
+
+1. KEEP — drop full-view `structuredClone` per publish → 41ms (11.6×).
+   Follow-up: raw pass-through was unsound (reconcile mutates the store's
+   backing tree in place, corrupting engine state / aliased clones).
+2. KEEP — identity-diff consecutive views (the fold is a persistent
+   structure) and clone only changed subtrees, each clone used at exactly
+   one store path → 67ms sound (7.1× vs baseline).
+3. KEEP — reference-preserving `render`: identity-stable `pending` when the
+   outbox is empty, skip pending-derived message work when nothing pending,
+   remap only overlay-touched messages → 16.3µs/delta.
+4. KEEP — skip `legacy.session.remember` clone when `view.session` is
+   identity-unchanged → 9.4µs/delta.
+5. KEEP — hand-rolled recursive clone instead of `structuredClone` for the
+   small per-event subtrees → 3.5µs/delta.
+
+Final: 240 → 3.5µs/delta (69×) at 200 messages; 23.6µs/delta at 2000
+messages (remaining cost is the O(n) identity walk, ~10ns/message/delta).
+
+Simplify pass (no benchmark movement, closes paths the scenario misses):
+`render` memoizes its durable base on fold/outbox identity and the
+usage-adjusted session on the usage entry, so identity preservation holds
+even with a live usage overlay or pending steers/outbox items; `publish`
+skips render and notify when folded/outbox/overlay are identity-unchanged
+(synced flips, stale replays). The bench scenario streams with an empty
+outbox and no usage entry, so those paths need the memo caches for cover.
+
+## Dead ends
+
+- WeakMap-memoized structural-sharing clone: unsound. `reconcile` merges
+  nodes in place, so a memoized clone reachable from two store paths (or a
+  later view) gets corrupted; caught by the TUI `updates session location
+  when moved` test via fold state that aliases `previous.location`.
+- Microtask coalescing of publishes: each stream item already arrives on
+  its own microtask, so `queueMicrotask` batching collapses nothing; real
+  frame coalescing (~16ms timer) left unexplored as unnecessary at current
+  numbers.

packages/client/script/bench-session-sync.ts

@@ -0,0 +1,225 @@
+// Benchmark: legacy createData vs engine createEngineData session sync.
+//
+// Scenarios per layer:
+//   hydrate  — populate a session with TRANSCRIPT messages
+//   deltas   — stream DELTAS text deltas into the active assistant message
+//   retained — heap retained by the populated layer (post-GC)
+//
+// Run from packages/client: bun run bench:sync
+// Emits METRIC lines (median of RUNS after 1 warmup).
+
+import { heapStats } from "bun:jsc"
+import { createRoot } from "solid-js"
+import { createData } from "../src/solid/data"
+import type { CreateDataInput } from "../src/solid/data"
+import { createEngineData } from "../src/solid/engine-data"
+import type { OpenCodeEvent, SessionMessageInfo } from "../src/promise"
+
+const TRANSCRIPT = Number(process.env.BENCH_TRANSCRIPT ?? 200)
+const DELTAS = Number(process.env.BENCH_DELTAS ?? 2000)
+const RUNS = Number(process.env.BENCH_RUNS ?? 7)
+
+const sessionID = "ses_bench"
+const assistantID = `msg_a${TRANSCRIPT - 1}`
+
+function transcript(): SessionMessageInfo[] {
+  return Array.from({ length: TRANSCRIPT }, (_, index): SessionMessageInfo => {
+    const created = 1_700_000_000_000 + index
+    if (index % 2 === 0)
+      return { id: `msg_u${index}`, type: "user", text: `user message ${index} ${"lorem ".repeat(40)}`, time: { created } }
+    return {
+      id: `msg_a${index}`,
+      type: "assistant",
+      time: index === TRANSCRIPT - 1 ? { created } : { created, completed: created + 1 },
+      agent: "build",
+      content: [{ type: "text", text: `assistant reply ${index} ${"ipsum ".repeat(40)}` }],
+    } as SessionMessageInfo
+  })
+}
+
+function sessionInfo() {
+  return {
+    id: sessionID,
+    projectID: "proj_bench",
+    cost: 0,
+    tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+    time: { created: 1, updated: 2 },
+    title: "bench",
+    location: { directory: "/bench" },
+  }
+}
+
+const textStarted = (seq: number) => ({
+  id: "evt_start",
+  created: 3,
+  type: "session.text.started" as const,
+  durable: { aggregateID: sessionID, seq, version: 1 },
+  data: { sessionID, assistantMessageID: assistantID, ordinal: 0 },
+})
+const textDelta = (index: number) => ({
+  id: `evt_d${index}`,
+  created: 4,
+  type: "session.text.delta" as const,
+  data: { sessionID, assistantMessageID: assistantID, ordinal: 0, delta: "x" },
+})
+const textEnded = (seq: number) => ({
+  id: "evt_end",
+  created: 5,
+  type: "session.text.ended" as const,
+  durable: { aggregateID: sessionID, seq, version: 1 },
+  data: { sessionID, assistantMessageID: assistantID, ordinal: 0, text: "END" },
+})
+
+type Layer = {
+  hydrate: () => Promise<void>
+  dispatch: (event: Record<string, unknown>) => void
+  finalText: () => string | undefined
+  dispose: () => void
+}
+
+type MessageReader = {
+  session: { message: { get: (sessionID: string, messageID: string) => SessionMessageInfo | undefined } }
+}
+
+function lastText(data: MessageReader) {
+  const message = data.session.message.get(sessionID, assistantID)
+  const part = message?.type === "assistant" ? message.content.findLast((item) => item.type === "text") : undefined
+  return part?.type === "text" ? part.text : undefined
+}
+
+function legacyLayer(): Layer {
+  let handler: ((event: { name: OpenCodeEvent["type"]; details: OpenCodeEvent }) => void) | undefined
+  const messages = transcript()
+  const api = {
+    session: { get: async () => sessionInfo() },
+    message: { list: async () => ({ data: messages.toReversed(), cursor: {} }) },
+  } as unknown as ReturnType<CreateDataInput["api"]>
+  return createRoot((dispose) => {
+    const data = createData({
+      api: () => api,
+      directory: "/bench",
+      event: {
+        on: () => () => {},
+        listen(next) {
+          handler = next
+          return () => {}
+        },
+      },
+      connection: { status: () => "connected" },
+    })
+    return {
+      async hydrate() {
+        await data.session.sync(sessionID)
+        await data.session.message.sync(sessionID)
+      },
+      dispatch(event) {
+        handler?.({ name: event.type as OpenCodeEvent["type"], details: event as unknown as OpenCodeEvent })
+      },
+      finalText: () => lastText(data),
+      dispose,
+    }
+  })
+}
+
+function engineLayer(): Layer {
+  const queue: Array<Record<string, unknown>> = []
+  let wake: (() => void) | undefined
+  const api = {
+    session: {
+      snapshot: async () => ({
+        session: sessionInfo(),
+        children: [],
+        inbox: [],
+        messages: transcript(),
+        seq: 10,
+      }),
+      async *log() {
+        yield { type: "log.synced", aggregateID: sessionID, seq: 10 }
+        while (true) {
+          const item = queue.shift()
+          if (item) {
+            yield item
+            continue
+          }
+          await new Promise<void>((resolve) => {
+            wake = resolve
+          })
+        }
+      },
+      prompt: async () => ({}),
+    },
+  } as unknown as ReturnType<CreateDataInput["api"]>
+  return createRoot((dispose) => {
+    const data = createEngineData({
+      api: () => api,
+      directory: "/bench",
+      event: { on: () => () => {}, listen: () => () => {} },
+      connection: { status: () => "connected" },
+    })
+    return {
+      async hydrate() {
+        await data.session.sync(sessionID)
+      },
+      dispatch(event) {
+        queue.push(event)
+        wake?.()
+        wake = undefined
+      },
+      finalText: () => lastText(data),
+      dispose,
+    }
+  })
+}
+
+async function settle(check: () => boolean) {
+  for (let attempt = 0; attempt < 10_000; attempt++) {
+    if (check()) return
+    await new Promise((resolve) => setTimeout(resolve, 0))
+  }
+  throw new Error("scenario did not settle")
+}
+
+async function scenario(make: () => Layer) {
+  const layer = make()
+  const hydrateStart = performance.now()
+  await layer.hydrate()
+  const hydrate = performance.now() - hydrateStart
+
+  const deltaStart = performance.now()
+  layer.dispatch(textStarted(11))
+  for (let index = 0; index < DELTAS; index++) layer.dispatch(textDelta(index))
+  layer.dispatch(textEnded(12))
+  await settle(() => layer.finalText() === "END")
+  const deltas = performance.now() - deltaStart
+
+  Bun.gc(true)
+  const retained = heapStats().heapSize
+  layer.dispose()
+  return { hydrate, deltas, retained }
+}
+
+function median(values: number[]) {
+  const sorted = [...values].sort((a, b) => a - b)
+  return sorted[Math.floor(sorted.length / 2)]
+}
+
+async function measure(name: string, make: () => Layer) {
+  await scenario(make) // warmup
+  Bun.gc(true)
+  const baseline = heapStats().heapSize
+  const runs: Awaited<ReturnType<typeof scenario>>[] = []
+  for (let run = 0; run < RUNS; run++) runs.push(await scenario(make))
+  const hydrate = median(runs.map((run) => run.hydrate))
+  const deltas = median(runs.map((run) => run.deltas))
+  const retained = median(runs.map((run) => run.retained)) - baseline
+  console.log(
+    `${name}: hydrate ${hydrate.toFixed(2)}ms  deltas ${deltas.toFixed(2)}ms (${((deltas * 1000) / DELTAS).toFixed(1)}µs/delta)  retained ${(retained / 1024 / 1024).toFixed(2)}MB`,
+  )
+  console.log(`METRIC ${name}_hydrate_ms=${hydrate.toFixed(3)}`)
+  console.log(`METRIC ${name}_deltas_ms=${deltas.toFixed(3)}`)
+  console.log(`METRIC ${name}_retained_mb=${(retained / 1024 / 1024).toFixed(3)}`)
+}
+
+console.log(`transcript=${TRANSCRIPT} deltas=${DELTAS} runs=${RUNS}`)
+await measure("legacy", legacyLayer)
+await measure("engine", engineLayer)

packages/client/src/effect/api/api.ts

@@ -12,10 +12,10 @@ import type { Brand } from "effect"
 import type { Model } from "@opencode-ai/schema/model"
 import type { SessionMessage } from "@opencode-ai/schema/session-message"
 import type { SessionInbox } from "@opencode-ai/schema/session-inbox"
+import type { Event } from "@opencode-ai/schema/event"
 import type { PromptInput } from "@opencode-ai/schema/prompt-input"
 import type { AgentAttachment } from "@opencode-ai/schema/prompt"
 import type { Skill } from "@opencode-ai/schema/skill"
-import type { Event } from "@opencode-ai/schema/event"
 import type { InstructionEntry } from "@opencode-ai/schema/instruction-entry"
 import type { Schema } from "effect"
 import type { EventLog } from "@opencode-ai/schema/event-log"
@@ -139,36 +139,46 @@ export type Endpoint5_5Input = { readonly sessionID: Session.ID }
 export type Endpoint5_5Output = Session.Info
 export type SessionGetOperation<E = never> = (input: Endpoint5_5Input) => Effect.Effect<Endpoint5_5Output, E>
 
-export type Endpoint5_6Input = { readonly sessionID: Session.ID }
-export type Endpoint5_6Output = void
-export type SessionRemoveOperation<E = never> = (input: Endpoint5_6Input) => Effect.Effect<Endpoint5_6Output, E>
+export type Endpoint5_6Input = { readonly sessionID: Session.ID; readonly recent?: number | undefined }
+export type Endpoint5_6Output = {
+  readonly session: Session.Info
+  readonly children: ReadonlyArray<Session.Info>
+  readonly inbox: ReadonlyArray<SessionInbox.Info>
+  readonly messages: ReadonlyArray<SessionMessage.Info>
+  readonly seq: Event.Seq
+}
+export type SessionSnapshotOperation<E = never> = (input: Endpoint5_6Input) => Effect.Effect<Endpoint5_6Output, E>
 
-export type Endpoint5_7Input = { readonly sessionID: Session.ID; readonly boundary: Session.ForkRequestBoundary }
-export type Endpoint5_7Output = Session.Info
-export type SessionForkOperation<E = never> = (input: Endpoint5_7Input) => Effect.Effect<Endpoint5_7Output, E>
+export type Endpoint5_7Input = { readonly sessionID: Session.ID }
+export type Endpoint5_7Output = void
+export type SessionRemoveOperation<E = never> = (input: Endpoint5_7Input) => Effect.Effect<Endpoint5_7Output, E>
 
-export type Endpoint5_8Input = { readonly sessionID: Session.ID; readonly agent: Agent.ID }
-export type Endpoint5_8Output = void
-export type SessionSwitchAgentOperation<E = never> = (input: Endpoint5_8Input) => Effect.Effect<Endpoint5_8Output, E>
+export type Endpoint5_8Input = { readonly sessionID: Session.ID; readonly boundary: Session.ForkRequestBoundary }
+export type Endpoint5_8Output = Session.Info
+export type SessionForkOperation<E = never> = (input: Endpoint5_8Input) => Effect.Effect<Endpoint5_8Output, E>
 
-export type Endpoint5_9Input = { readonly sessionID: Session.ID; readonly model: Model.Ref }
+export type Endpoint5_9Input = { readonly sessionID: Session.ID; readonly agent: Agent.ID }
 export type Endpoint5_9Output = void
-export type SessionSwitchModelOperation<E = never> = (input: Endpoint5_9Input) => Effect.Effect<Endpoint5_9Output, E>
+export type SessionSwitchAgentOperation<E = never> = (input: Endpoint5_9Input) => Effect.Effect<Endpoint5_9Output, E>
 
-export type Endpoint5_10Input = { readonly sessionID: Session.ID; readonly title: string }
+export type Endpoint5_10Input = { readonly sessionID: Session.ID; readonly model: Model.Ref }
 export type Endpoint5_10Output = void
-export type SessionRenameOperation<E = never> = (input: Endpoint5_10Input) => Effect.Effect<Endpoint5_10Output, E>
+export type SessionSwitchModelOperation<E = never> = (input: Endpoint5_10Input) => Effect.Effect<Endpoint5_10Output, E>
 
-export type Endpoint5_11Input = {
+export type Endpoint5_11Input = { readonly sessionID: Session.ID; readonly title: string }
+export type Endpoint5_11Output = void
+export type SessionRenameOperation<E = never> = (input: Endpoint5_11Input) => Effect.Effect<Endpoint5_11Output, E>
+
+export type Endpoint5_12Input = {
   readonly sessionID: Session.ID
   readonly directory: AbsolutePath
   readonly workspaceID?: Workspace.ID | undefined
   readonly delivery?: SessionInbox.Delivery | undefined
 }
-export type Endpoint5_11Output = void
-export type SessionMoveOperation<E = never> = (input: Endpoint5_11Input) => Effect.Effect<Endpoint5_11Output, E>
+export type Endpoint5_12Output = void
+export type SessionMoveOperation<E = never> = (input: Endpoint5_12Input) => Effect.Effect<Endpoint5_12Output, E>
 
-export type Endpoint5_12Input = {
+export type Endpoint5_13Input = {
   readonly sessionID: Session.ID
   readonly id?: SessionMessage.ID | undefined
   readonly text: string
@@ -179,10 +189,10 @@ export type Endpoint5_12Input = {
   readonly delivery?: SessionInbox.Delivery | undefined
   readonly resume?: boolean | undefined
 }
-export type Endpoint5_12Output = SessionInbox.User
-export type SessionPromptOperation<E = never> = (input: Endpoint5_12Input) => Effect.Effect<Endpoint5_12Output, E>
+export type Endpoint5_13Output = SessionInbox.User
+export type SessionPromptOperation<E = never> = (input: Endpoint5_13Input) => Effect.Effect<Endpoint5_13Output, E>
 
-export type Endpoint5_13Input = {
+export type Endpoint5_14Input = {
   readonly sessionID: Session.ID
   readonly id?: SessionMessage.ID | undefined
   readonly command: string
@@ -195,19 +205,19 @@ export type Endpoint5_13Input = {
   readonly delivery?: SessionInbox.Delivery | undefined
   readonly resume?: boolean | undefined
 }
-export type Endpoint5_13Output = SessionInbox.User
-export type SessionCommandOperation<E = never> = (input: Endpoint5_13Input) => Effect.Effect<Endpoint5_13Output, E>
+export type Endpoint5_14Output = SessionInbox.User
+export type SessionCommandOperation<E = never> = (input: Endpoint5_14Input) => Effect.Effect<Endpoint5_14Output, E>
 
-export type Endpoint5_14Input = {
+export type Endpoint5_15Input = {
   readonly sessionID: Session.ID
   readonly id?: SessionMessage.ID | undefined
   readonly skill: Skill.ID
   readonly resume?: boolean | undefined
 }
-export type Endpoint5_14Output = void
-export type SessionSkillOperation<E = never> = (input: Endpoint5_14Input) => Effect.Effect<Endpoint5_14Output, E>
+export type Endpoint5_15Output = void
+export type SessionSkillOperation<E = never> = (input: Endpoint5_15Input) => Effect.Effect<Endpoint5_15Output, E>
 
-export type Endpoint5_15Input = {
+export type Endpoint5_16Input = {
   readonly sessionID: Session.ID
   readonly id?: SessionMessage.ID | undefined
   readonly text: string
@@ -216,97 +226,98 @@ export type Endpoint5_15Input = {
   readonly delivery?: SessionInbox.Delivery | undefined
   readonly resume?: boolean | undefined
 }
-export type Endpoint5_15Output = SessionInbox.Synthetic
-export type SessionSyntheticOperation<E = never> = (input: Endpoint5_15Input) => Effect.Effect<Endpoint5_15Output, E>
+export type Endpoint5_16Output = SessionInbox.Synthetic
+export type SessionSyntheticOperation<E = never> = (input: Endpoint5_16Input) => Effect.Effect<Endpoint5_16Output, E>
 
-export type Endpoint5_16Input = {
+export type Endpoint5_17Input = {
   readonly sessionID: Session.ID
   readonly id?: Event.ID | undefined
   readonly command: string
 }
-export type Endpoint5_16Output = void
-export type SessionShellOperation<E = never> = (input: Endpoint5_16Input) => Effect.Effect<Endpoint5_16Output, E>
+export type Endpoint5_17Output = void
+export type SessionShellOperation<E = never> = (input: Endpoint5_17Input) => Effect.Effect<Endpoint5_17Output, E>
 
-export type Endpoint5_17Input = {
+export type Endpoint5_18Input = {
   readonly sessionID: Session.ID
   readonly id?: SessionMessage.ID | undefined
   readonly delivery?: SessionInbox.Delivery | undefined
 }
-export type Endpoint5_17Output = SessionInbox.Compaction
-export type SessionCompactOperation<E = never> = (input: Endpoint5_17Input) => Effect.Effect<Endpoint5_17Output, E>
+export type Endpoint5_18Output = SessionInbox.Compaction
+export type SessionCompactOperation<E = never> = (input: Endpoint5_18Input) => Effect.Effect<Endpoint5_18Output, E>
 
-export type Endpoint5_18Input = { readonly sessionID: Session.ID }
-export type Endpoint5_18Output = void
-export type SessionWaitOperation<E = never> = (input: Endpoint5_18Input) => Effect.Effect<Endpoint5_18Output, E>
+export type Endpoint5_19Input = { readonly sessionID: Session.ID }
+export type Endpoint5_19Output = void
+export type SessionWaitOperation<E = never> = (input: Endpoint5_19Input) => Effect.Effect<Endpoint5_19Output, E>
 
-export type Endpoint5_19Input = {
+export type Endpoint5_20Input = {
   readonly sessionID: Session.ID
   readonly messageID: SessionMessage.ID
   readonly files?: boolean | undefined
 }
-export type Endpoint5_19Output = Session.Revert
-export type SessionRevertStageOperation<E = never> = (input: Endpoint5_19Input) => Effect.Effect<Endpoint5_19Output, E>
-
-export type Endpoint5_20Input = { readonly sessionID: Session.ID }
-export type Endpoint5_20Output = void
-export type SessionRevertClearOperation<E = never> = (input: Endpoint5_20Input) => Effect.Effect<Endpoint5_20Output, E>
+export type Endpoint5_20Output = Session.Revert
+export type SessionRevertStageOperation<E = never> = (input: Endpoint5_20Input) => Effect.Effect<Endpoint5_20Output, E>
 
 export type Endpoint5_21Input = { readonly sessionID: Session.ID }
 export type Endpoint5_21Output = void
-export type SessionRevertCommitOperation<E = never> = (input: Endpoint5_21Input) => Effect.Effect<Endpoint5_21Output, E>
+export type SessionRevertClearOperation<E = never> = (input: Endpoint5_21Input) => Effect.Effect<Endpoint5_21Output, E>
 
 export type Endpoint5_22Input = { readonly sessionID: Session.ID }
-export type Endpoint5_22Output = ReadonlyArray<SessionMessage.Info>
-export type SessionContextOperation<E = never> = (input: Endpoint5_22Input) => Effect.Effect<Endpoint5_22Output, E>
+export type Endpoint5_22Output = void
+export type SessionRevertCommitOperation<E = never> = (input: Endpoint5_22Input) => Effect.Effect<Endpoint5_22Output, E>
 
 export type Endpoint5_23Input = { readonly sessionID: Session.ID }
-export type Endpoint5_23Output = ReadonlyArray<SessionInbox.Info>
-export type SessionInboxListOperation<E = never> = (input: Endpoint5_23Input) => Effect.Effect<Endpoint5_23Output, E>
+export type Endpoint5_23Output = ReadonlyArray<SessionMessage.Info>
+export type SessionContextOperation<E = never> = (input: Endpoint5_23Input) => Effect.Effect<Endpoint5_23Output, E>
 
-export type Endpoint5_24Input = { readonly sessionID: Session.ID; readonly inboxID: SessionMessage.ID }
-export type Endpoint5_24Output = void
-export type SessionInboxCancelOperation<E = never> = (input: Endpoint5_24Input) => Effect.Effect<Endpoint5_24Output, E>
+export type Endpoint5_24Input = { readonly sessionID: Session.ID }
+export type Endpoint5_24Output = ReadonlyArray<SessionInbox.Info>
+export type SessionInboxListOperation<E = never> = (input: Endpoint5_24Input) => Effect.Effect<Endpoint5_24Output, E>
 
 export type Endpoint5_25Input = { readonly sessionID: Session.ID; readonly inboxID: SessionMessage.ID }
 export type Endpoint5_25Output = void
-export type SessionInboxSteerOperation<E = never> = (input: Endpoint5_25Input) => Effect.Effect<Endpoint5_25Output, E>
+export type SessionInboxCancelOperation<E = never> = (input: Endpoint5_25Input) => Effect.Effect<Endpoint5_25Output, E>
 
 export type Endpoint5_26Input = { readonly sessionID: Session.ID; readonly inboxID: SessionMessage.ID }
 export type Endpoint5_26Output = void
-export type SessionInboxQueueOperation<E = never> = (input: Endpoint5_26Input) => Effect.Effect<Endpoint5_26Output, E>
+export type SessionInboxSteerOperation<E = never> = (input: Endpoint5_26Input) => Effect.Effect<Endpoint5_26Output, E>
 
-export type Endpoint5_27Input = { readonly sessionID: Session.ID }
-export type Endpoint5_27Output = ReadonlyArray<InstructionEntry.Info>
+export type Endpoint5_27Input = { readonly sessionID: Session.ID; readonly inboxID: SessionMessage.ID }
+export type Endpoint5_27Output = void
+export type SessionInboxQueueOperation<E = never> = (input: Endpoint5_27Input) => Effect.Effect<Endpoint5_27Output, E>
+
+export type Endpoint5_28Input = { readonly sessionID: Session.ID }
+export type Endpoint5_28Output = ReadonlyArray<InstructionEntry.Info>
 export type SessionInstructionsEntryListOperation<E = never> = (
-  input: Endpoint5_27Input,
-) => Effect.Effect<Endpoint5_27Output, E>
+  input: Endpoint5_28Input,
+) => Effect.Effect<Endpoint5_28Output, E>
 
-export type Endpoint5_28Input = {
+export type Endpoint5_29Input = {
   readonly sessionID: Session.ID
   readonly key: InstructionEntry.Key
   readonly value: Schema.Json
 }
-export type Endpoint5_28Output = void
-export type SessionInstructionsEntryPutOperation<E = never> = (
-  input: Endpoint5_28Input,
-) => Effect.Effect<Endpoint5_28Output, E>
-
-export type Endpoint5_29Input = { readonly sessionID: Session.ID; readonly key: InstructionEntry.Key }
 export type Endpoint5_29Output = void
-export type SessionInstructionsEntryRemoveOperation<E = never> = (
+export type SessionInstructionsEntryPutOperation<E = never> = (
   input: Endpoint5_29Input,
 ) => Effect.Effect<Endpoint5_29Output, E>
 
-export type Endpoint5_30Input = { readonly sessionID: Session.ID; readonly prompt: string }
-export type Endpoint5_30Output = { readonly text: string }
-export type SessionGenerateOperation<E = never> = (input: Endpoint5_30Input) => Effect.Effect<Endpoint5_30Output, E>
+export type Endpoint5_30Input = { readonly sessionID: Session.ID; readonly key: InstructionEntry.Key }
+export type Endpoint5_30Output = void
+export type SessionInstructionsEntryRemoveOperation<E = never> = (
+  input: Endpoint5_30Input,
+) => Effect.Effect<Endpoint5_30Output, E>
 
-export type Endpoint5_31Input = {
+export type Endpoint5_31Input = { readonly sessionID: Session.ID; readonly prompt: string }
+export type Endpoint5_31Output = { readonly text: string }
+export type SessionGenerateOperation<E = never> = (input: Endpoint5_31Input) => Effect.Effect<Endpoint5_31Output, E>
+
+export type Endpoint5_32Input = {
   readonly sessionID: Session.ID
   readonly after?: Event.Seq | undefined
   readonly follow?: boolean | undefined
+  readonly ephemeral?: boolean | undefined
 }
-export type Endpoint5_31Output =
+export type Endpoint5_32Output =
   | (
       | {
           readonly id: Event.ID
@@ -894,24 +905,101 @@ export type Endpoint5_31Output =
           }
         }
     )
+  | {
+      readonly id: Event.ID
+      readonly created: number
+      readonly metadata?: { readonly [x: string]: unknown } | undefined
+      readonly type: "session.usage.updated"
+      readonly location?: Location.Ref | undefined
+      readonly data: {
+        readonly sessionID: Session.ID
+        readonly cost: number & Brand.Brand<"Money.USD">
+        readonly tokens: {
+          readonly input: number
+          readonly output: number
+          readonly reasoning: number
+          readonly cache: { readonly read: number; readonly write: number }
+        }
+      }
+    }
+  | {
+      readonly id: Event.ID
+      readonly created: number
+      readonly metadata?: { readonly [x: string]: unknown } | undefined
+      readonly type: "session.text.delta"
+      readonly location?: Location.Ref | undefined
+      readonly data: {
+        readonly sessionID: Session.ID
+        readonly assistantMessageID: SessionMessage.ID
+        readonly ordinal: number
+        readonly delta: string
+      }
+    }
+  | {
+      readonly id: Event.ID
+      readonly created: number
+      readonly metadata?: { readonly [x: string]: unknown } | undefined
+      readonly type: "session.reasoning.delta"
+      readonly location?: Location.Ref | undefined
+      readonly data: {
+        readonly sessionID: Session.ID
+        readonly assistantMessageID: SessionMessage.ID
+        readonly ordinal: number
+        readonly delta: string
+      }
+    }
+  | {
+      readonly id: Event.ID
+      readonly created: number
+      readonly metadata?: { readonly [x: string]: unknown } | undefined
+      readonly type: "session.tool.input.delta"
+      readonly location?: Location.Ref | undefined
+      readonly data: {
+        readonly sessionID: Session.ID
+        readonly assistantMessageID: SessionMessage.ID
+        readonly id: string
+        readonly delta: string
+      }
+    }
+  | {
+      readonly id: Event.ID
+      readonly created: number
+      readonly metadata?: { readonly [x: string]: unknown } | undefined
+      readonly type: "session.tool.progress"
+      readonly location?: Location.Ref | undefined
+      readonly data: {
+        readonly sessionID: Session.ID
+        readonly assistantMessageID: SessionMessage.ID
+        readonly id: string
+        readonly metadata: { readonly [x: string]: Schema.Json }
+      }
+    }
+  | {
+      readonly id: Event.ID
+      readonly created: number
+      readonly metadata?: { readonly [x: string]: unknown } | undefined
+      readonly type: "session.compaction.delta"
+      readonly location?: Location.Ref | undefined
+      readonly data: { readonly sessionID: Session.ID; readonly text: string }
+    }
   | EventLog.Synced
-export type SessionLogOperation<E = never> = (input: Endpoint5_31Input) => Stream.Stream<Endpoint5_31Output, E>
+export type SessionLogOperation<E = never> = (input: Endpoint5_32Input) => Stream.Stream<Endpoint5_32Output, E>
 
-export type Endpoint5_32Input = { readonly sessionID: Session.ID; readonly continue?: boolean | undefined }
-export type Endpoint5_32Output = void
-export type SessionInterruptOperation<E = never> = (input: Endpoint5_32Input) => Effect.Effect<Endpoint5_32Output, E>
-
-export type Endpoint5_33Input = { readonly sessionID: Session.ID }
+export type Endpoint5_33Input = { readonly sessionID: Session.ID; readonly continue?: boolean | undefined }
 export type Endpoint5_33Output = void
-export type SessionBackgroundOperation<E = never> = (input: Endpoint5_33Input) => Effect.Effect<Endpoint5_33Output, E>
+export type SessionInterruptOperation<E = never> = (input: Endpoint5_33Input) => Effect.Effect<Endpoint5_33Output, E>
 
-export type Endpoint5_34Input = { readonly sessionID: Session.ID; readonly messageID: SessionMessage.ID }
-export type Endpoint5_34Output = SessionMessage.Info
-export type SessionMessageOperation<E = never> = (input: Endpoint5_34Input) => Effect.Effect<Endpoint5_34Output, E>
+export type Endpoint5_34Input = { readonly sessionID: Session.ID }
+export type Endpoint5_34Output = void
+export type SessionBackgroundOperation<E = never> = (input: Endpoint5_34Input) => Effect.Effect<Endpoint5_34Output, E>
 
-export type Endpoint5_35Input = { readonly sessionID: Session.ID; readonly variables: { readonly [x: string]: string } }
-export type Endpoint5_35Output = void
-export type SessionEnvironmentOperation<E = never> = (input: Endpoint5_35Input) => Effect.Effect<Endpoint5_35Output, E>
+export type Endpoint5_35Input = { readonly sessionID: Session.ID; readonly messageID: SessionMessage.ID }
+export type Endpoint5_35Output = SessionMessage.Info
+export type SessionMessageOperation<E = never> = (input: Endpoint5_35Input) => Effect.Effect<Endpoint5_35Output, E>
+
+export type Endpoint5_36Input = { readonly sessionID: Session.ID; readonly variables: { readonly [x: string]: string } }
+export type Endpoint5_36Output = void
+export type SessionEnvironmentOperation<E = never> = (input: Endpoint5_36Input) => Effect.Effect<Endpoint5_36Output, E>
 
 export interface SessionApi<E = never> {
   readonly list: SessionListOperation<E>
@@ -920,6 +1008,7 @@ export interface SessionApi<E = never> {
   readonly export: SessionExportOperation<E>
   readonly active: SessionActiveOperation<E>
   readonly get: SessionGetOperation<E>
+  readonly snapshot: SessionSnapshotOperation<E>
   readonly remove: SessionRemoveOperation<E>
   readonly fork: SessionForkOperation<E>
   readonly switchAgent: SessionSwitchAgentOperation<E>

packages/client/src/effect/generated/client.ts

@@ -86,6 +86,8 @@ import type {
   Endpoint5_34Output,
   Endpoint5_35Input,
   Endpoint5_35Output,
+  Endpoint5_36Input,
+  Endpoint5_36Output,
   Endpoint6_0Input,
   Endpoint6_0Output,
   Endpoint7_0Input,
@@ -350,48 +352,56 @@ const Endpoint5_5 = (raw: RawClient["server.session"]) => (input: Endpoint5_5Inp
 
 const Endpoint5_6 = (raw: RawClient["server.session"]) => (input: Endpoint5_6Input) =>
   preserveEffect<Endpoint5_6Output>()(
-    raw["session.remove"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
+    raw["session.snapshot"]({ params: { sessionID: input["sessionID"] }, query: { recent: input["recent"] } }).pipe(
+      Effect.mapError(mapClientError),
+      Effect.map((value) => value.data),
+    ),
   )
 
 const Endpoint5_7 = (raw: RawClient["server.session"]) => (input: Endpoint5_7Input) =>
   preserveEffect<Endpoint5_7Output>()(
+    raw["session.remove"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
+  )
+
+const Endpoint5_8 = (raw: RawClient["server.session"]) => (input: Endpoint5_8Input) =>
+  preserveEffect<Endpoint5_8Output>()(
     raw["session.fork"]({ params: { sessionID: input["sessionID"] }, payload: { boundary: input["boundary"] } }).pipe(
       Effect.mapError(mapClientError),
       Effect.map((value) => value.data),
     ),
   )
 
-const Endpoint5_8 = (raw: RawClient["server.session"]) => (input: Endpoint5_8Input) =>
-  preserveEffect<Endpoint5_8Output>()(
-    raw["session.switchAgent"]({ params: { sessionID: input["sessionID"] }, payload: { agent: input["agent"] } }).pipe(
-      Effect.mapError(mapClientError),
-    ),
-  )
-
 const Endpoint5_9 = (raw: RawClient["server.session"]) => (input: Endpoint5_9Input) =>
   preserveEffect<Endpoint5_9Output>()(
-    raw["session.switchModel"]({ params: { sessionID: input["sessionID"] }, payload: { model: input["model"] } }).pipe(
+    raw["session.switchAgent"]({ params: { sessionID: input["sessionID"] }, payload: { agent: input["agent"] } }).pipe(
       Effect.mapError(mapClientError),
     ),
   )
 
 const Endpoint5_10 = (raw: RawClient["server.session"]) => (input: Endpoint5_10Input) =>
   preserveEffect<Endpoint5_10Output>()(
-    raw["session.rename"]({ params: { sessionID: input["sessionID"] }, payload: { title: input["title"] } }).pipe(
+    raw["session.switchModel"]({ params: { sessionID: input["sessionID"] }, payload: { model: input["model"] } }).pipe(
       Effect.mapError(mapClientError),
     ),
   )
 
 const Endpoint5_11 = (raw: RawClient["server.session"]) => (input: Endpoint5_11Input) =>
   preserveEffect<Endpoint5_11Output>()(
+    raw["session.rename"]({ params: { sessionID: input["sessionID"] }, payload: { title: input["title"] } }).pipe(
+      Effect.mapError(mapClientError),
+    ),
+  )
+
+const Endpoint5_12 = (raw: RawClient["server.session"]) => (input: Endpoint5_12Input) =>
+  preserveEffect<Endpoint5_12Output>()(
     raw["session.move"]({
       params: { sessionID: input["sessionID"] },
       payload: { directory: input["directory"], workspaceID: input["workspaceID"], delivery: input["delivery"] },
     }).pipe(Effect.mapError(mapClientError)),
   )
 
-const Endpoint5_12 = (raw: RawClient["server.session"]) => (input: Endpoint5_12Input) =>
-  preserveEffect<Endpoint5_12Output>()(
+const Endpoint5_13 = (raw: RawClient["server.session"]) => (input: Endpoint5_13Input) =>
+  preserveEffect<Endpoint5_13Output>()(
     raw["session.prompt"]({
       params: { sessionID: input["sessionID"] },
       payload: {
@@ -410,8 +420,8 @@ const Endpoint5_12 = (raw: RawClient["server.session"]) => (input: Endpoint5_12I
     ),
   )
 
-const Endpoint5_13 = (raw: RawClient["server.session"]) => (input: Endpoint5_13Input) =>
-  preserveEffect<Endpoint5_13Output>()(
+const Endpoint5_14 = (raw: RawClient["server.session"]) => (input: Endpoint5_14Input) =>
+  preserveEffect<Endpoint5_14Output>()(
     raw["session.command"]({
       params: { sessionID: input["sessionID"] },
       payload: {
@@ -432,16 +442,16 @@ const Endpoint5_13 = (raw: RawClient["server.session"]) => (input: Endpoint5_13I
     ),
   )
 
-const Endpoint5_14 = (raw: RawClient["server.session"]) => (input: Endpoint5_14Input) =>
-  preserveEffect<Endpoint5_14Output>()(
+const Endpoint5_15 = (raw: RawClient["server.session"]) => (input: Endpoint5_15Input) =>
+  preserveEffect<Endpoint5_15Output>()(
     raw["session.skill"]({
       params: { sessionID: input["sessionID"] },
       payload: { id: input["id"], skill: input["skill"], resume: input["resume"] },
     }).pipe(Effect.mapError(mapClientError)),
   )
 
-const Endpoint5_15 = (raw: RawClient["server.session"]) => (input: Endpoint5_15Input) =>
-  preserveEffect<Endpoint5_15Output>()(
+const Endpoint5_16 = (raw: RawClient["server.session"]) => (input: Endpoint5_16Input) =>
+  preserveEffect<Endpoint5_16Output>()(
     raw["session.synthetic"]({
       params: { sessionID: input["sessionID"] },
       payload: {
@@ -458,16 +468,16 @@ const Endpoint5_15 = (raw: RawClient["server.session"]) => (input: Endpoint5_15I
     ),
   )
 
-const Endpoint5_16 = (raw: RawClient["server.session"]) => (input: Endpoint5_16Input) =>
-  preserveEffect<Endpoint5_16Output>()(
+const Endpoint5_17 = (raw: RawClient["server.session"]) => (input: Endpoint5_17Input) =>
+  preserveEffect<Endpoint5_17Output>()(
     raw["session.shell"]({
       params: { sessionID: input["sessionID"] },
       payload: { id: input["id"], command: input["command"] },
     }).pipe(Effect.mapError(mapClientError)),
   )
 
-const Endpoint5_17 = (raw: RawClient["server.session"]) => (input: Endpoint5_17Input) =>
-  preserveEffect<Endpoint5_17Output>()(
+const Endpoint5_18 = (raw: RawClient["server.session"]) => (input: Endpoint5_18Input) =>
+  preserveEffect<Endpoint5_18Output>()(
     raw["session.compact"]({
       params: { sessionID: input["sessionID"] },
       payload: { id: input["id"], delivery: input["delivery"] },
@@ -477,13 +487,13 @@ const Endpoint5_17 = (raw: RawClient["server.session"]) => (input: Endpoint5_17I
     ),
   )
 
-const Endpoint5_18 = (raw: RawClient["server.session"]) => (input: Endpoint5_18Input) =>
-  preserveEffect<Endpoint5_18Output>()(
+const Endpoint5_19 = (raw: RawClient["server.session"]) => (input: Endpoint5_19Input) =>
+  preserveEffect<Endpoint5_19Output>()(
     raw["session.wait"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
   )
 
-const Endpoint5_19 = (raw: RawClient["server.session"]) => (input: Endpoint5_19Input) =>
-  preserveEffect<Endpoint5_19Output>()(
+const Endpoint5_20 = (raw: RawClient["server.session"]) => (input: Endpoint5_20Input) =>
+  preserveEffect<Endpoint5_20Output>()(
     raw["session.revert.stage"]({
       params: { sessionID: input["sessionID"] },
       payload: { messageID: input["messageID"], files: input["files"] },
@@ -493,27 +503,19 @@ const Endpoint5_19 = (raw: RawClient["server.session"]) => (input: Endpoint5_19I
     ),
   )
 
-const Endpoint5_20 = (raw: RawClient["server.session"]) => (input: Endpoint5_20Input) =>
-  preserveEffect<Endpoint5_20Output>()(
-    raw["session.revert.clear"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
-  )
-
 const Endpoint5_21 = (raw: RawClient["server.session"]) => (input: Endpoint5_21Input) =>
   preserveEffect<Endpoint5_21Output>()(
-    raw["session.revert.commit"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
+    raw["session.revert.clear"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
   )
 
 const Endpoint5_22 = (raw: RawClient["server.session"]) => (input: Endpoint5_22Input) =>
   preserveEffect<Endpoint5_22Output>()(
-    raw["session.context"]({ params: { sessionID: input["sessionID"] } }).pipe(
-      Effect.mapError(mapClientError),
-      Effect.map((value) => value.data),
-    ),
+    raw["session.revert.commit"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
   )
 
 const Endpoint5_23 = (raw: RawClient["server.session"]) => (input: Endpoint5_23Input) =>
   preserveEffect<Endpoint5_23Output>()(
-    raw["session.inbox.list"]({ params: { sessionID: input["sessionID"] } }).pipe(
+    raw["session.context"]({ params: { sessionID: input["sessionID"] } }).pipe(
       Effect.mapError(mapClientError),
       Effect.map((value) => value.data),
     ),
@@ -521,62 +523,70 @@ const Endpoint5_23 = (raw: RawClient["server.session"]) => (input: Endpoint5_23I
 
 const Endpoint5_24 = (raw: RawClient["server.session"]) => (input: Endpoint5_24Input) =>
   preserveEffect<Endpoint5_24Output>()(
-    raw["session.inbox.cancel"]({ params: { sessionID: input["sessionID"], inboxID: input["inboxID"] } }).pipe(
+    raw["session.inbox.list"]({ params: { sessionID: input["sessionID"] } }).pipe(
       Effect.mapError(mapClientError),
+      Effect.map((value) => value.data),
     ),
   )
 
 const Endpoint5_25 = (raw: RawClient["server.session"]) => (input: Endpoint5_25Input) =>
   preserveEffect<Endpoint5_25Output>()(
-    raw["session.inbox.steer"]({ params: { sessionID: input["sessionID"], inboxID: input["inboxID"] } }).pipe(
+    raw["session.inbox.cancel"]({ params: { sessionID: input["sessionID"], inboxID: input["inboxID"] } }).pipe(
       Effect.mapError(mapClientError),
     ),
   )
 
 const Endpoint5_26 = (raw: RawClient["server.session"]) => (input: Endpoint5_26Input) =>
   preserveEffect<Endpoint5_26Output>()(
-    raw["session.inbox.queue"]({ params: { sessionID: input["sessionID"], inboxID: input["inboxID"] } }).pipe(
+    raw["session.inbox.steer"]({ params: { sessionID: input["sessionID"], inboxID: input["inboxID"] } }).pipe(
       Effect.mapError(mapClientError),
     ),
   )
 
 const Endpoint5_27 = (raw: RawClient["server.session"]) => (input: Endpoint5_27Input) =>
   preserveEffect<Endpoint5_27Output>()(
+    raw["session.inbox.queue"]({ params: { sessionID: input["sessionID"], inboxID: input["inboxID"] } }).pipe(
+      Effect.mapError(mapClientError),
+    ),
+  )
+
+const Endpoint5_28 = (raw: RawClient["server.session"]) => (input: Endpoint5_28Input) =>
+  preserveEffect<Endpoint5_28Output>()(
     raw["session.instructions.entry.list"]({ params: { sessionID: input["sessionID"] } }).pipe(
       Effect.mapError(mapClientError),
       Effect.map((value) => value.data),
     ),
   )
 
-const Endpoint5_28 = (raw: RawClient["server.session"]) => (input: Endpoint5_28Input) =>
-  preserveEffect<Endpoint5_28Output>()(
+const Endpoint5_29 = (raw: RawClient["server.session"]) => (input: Endpoint5_29Input) =>
+  preserveEffect<Endpoint5_29Output>()(
     raw["session.instructions.entry.put"]({
       params: { sessionID: input["sessionID"], key: input["key"] },
       payload: { value: input["value"] },
     }).pipe(Effect.mapError(mapClientError)),
   )
 
-const Endpoint5_29 = (raw: RawClient["server.session"]) => (input: Endpoint5_29Input) =>
-  preserveEffect<Endpoint5_29Output>()(
+const Endpoint5_30 = (raw: RawClient["server.session"]) => (input: Endpoint5_30Input) =>
+  preserveEffect<Endpoint5_30Output>()(
     raw["session.instructions.entry.remove"]({ params: { sessionID: input["sessionID"], key: input["key"] } }).pipe(
       Effect.mapError(mapClientError),
     ),
   )
 
-const Endpoint5_30 = (raw: RawClient["server.session"]) => (input: Endpoint5_30Input) =>
-  preserveEffect<Endpoint5_30Output>()(
+const Endpoint5_31 = (raw: RawClient["server.session"]) => (input: Endpoint5_31Input) =>
+  preserveEffect<Endpoint5_31Output>()(
     raw["session.generate"]({ params: { sessionID: input["sessionID"] }, payload: { prompt: input["prompt"] } }).pipe(
       Effect.mapError(mapClientError),
       Effect.map((value) => value.data),
     ),
   )
 
-const Endpoint5_31 = (raw: RawClient["server.session"]) => (input: Endpoint5_31Input) =>
-  preserveStream<Endpoint5_31Output>()(
+const Endpoint5_32 = (raw: RawClient["server.session"]) => (input: Endpoint5_32Input) =>
+  preserveStream<Endpoint5_32Output>()(
     Stream.unwrap(
       raw["session.log"]({
         params: { sessionID: input["sessionID"] },
-        query: { after: input["after"], follow: input["follow"] },
+        query: { after: input["after"], follow: input["follow"], ephemeral: input["ephemeral"] },
       }).pipe(
         Effect.mapError(mapClientError),
         Effect.map((stream) => stream.pipe(Stream.mapError(mapClientError))),
@@ -584,29 +594,29 @@ const Endpoint5_31 = (raw: RawClient["server.session"]) => (input: Endpoint5_31I
     ),
   )
 
-const Endpoint5_32 = (raw: RawClient["server.session"]) => (input: Endpoint5_32Input) =>
-  preserveEffect<Endpoint5_32Output>()(
+const Endpoint5_33 = (raw: RawClient["server.session"]) => (input: Endpoint5_33Input) =>
+  preserveEffect<Endpoint5_33Output>()(
     raw["session.interrupt"]({
       params: { sessionID: input["sessionID"] },
       query: { continue: input["continue"] },
     }).pipe(Effect.mapError(mapClientError)),
   )
 
-const Endpoint5_33 = (raw: RawClient["server.session"]) => (input: Endpoint5_33Input) =>
-  preserveEffect<Endpoint5_33Output>()(
+const Endpoint5_34 = (raw: RawClient["server.session"]) => (input: Endpoint5_34Input) =>
+  preserveEffect<Endpoint5_34Output>()(
     raw["session.background"]({ params: { sessionID: input["sessionID"] } }).pipe(Effect.mapError(mapClientError)),
   )
 
-const Endpoint5_34 = (raw: RawClient["server.session"]) => (input: Endpoint5_34Input) =>
-  preserveEffect<Endpoint5_34Output>()(
+const Endpoint5_35 = (raw: RawClient["server.session"]) => (input: Endpoint5_35Input) =>
+  preserveEffect<Endpoint5_35Output>()(
     raw["session.message"]({ params: { sessionID: input["sessionID"], messageID: input["messageID"] } }).pipe(
       Effect.mapError(mapClientError),
       Effect.map((value) => value.data),
     ),
   )
 
-const Endpoint5_35 = (raw: RawClient["server.session"]) => (input: Endpoint5_35Input) =>
-  preserveEffect<Endpoint5_35Output>()(
+const Endpoint5_36 = (raw: RawClient["server.session"]) => (input: Endpoint5_36Input) =>
+  preserveEffect<Endpoint5_36Output>()(
     raw["session.environment"]({
       params: { sessionID: input["sessionID"] },
       payload: { variables: input["variables"] },
@@ -620,29 +630,30 @@ const adaptGroup5 = (raw: RawClient["server.session"]) => ({
   export: Endpoint5_3(raw),
   active: Endpoint5_4(raw),
   get: Endpoint5_5(raw),
-  remove: Endpoint5_6(raw),
-  fork: Endpoint5_7(raw),
-  switchAgent: Endpoint5_8(raw),
-  switchModel: Endpoint5_9(raw),
-  rename: Endpoint5_10(raw),
-  move: Endpoint5_11(raw),
-  prompt: Endpoint5_12(raw),
-  command: Endpoint5_13(raw),
-  skill: Endpoint5_14(raw),
-  synthetic: Endpoint5_15(raw),
-  shell: Endpoint5_16(raw),
-  compact: Endpoint5_17(raw),
-  wait: Endpoint5_18(raw),
-  revert: { stage: Endpoint5_19(raw), clear: Endpoint5_20(raw), commit: Endpoint5_21(raw) },
-  context: Endpoint5_22(raw),
-  inbox: { list: Endpoint5_23(raw), cancel: Endpoint5_24(raw), steer: Endpoint5_25(raw), queue: Endpoint5_26(raw) },
-  instructions: { entry: { list: Endpoint5_27(raw), put: Endpoint5_28(raw), remove: Endpoint5_29(raw) } },
-  generate: Endpoint5_30(raw),
-  log: Endpoint5_31(raw),
-  interrupt: Endpoint5_32(raw),
-  background: Endpoint5_33(raw),
-  message: Endpoint5_34(raw),
-  environment: Endpoint5_35(raw),
+  snapshot: Endpoint5_6(raw),
+  remove: Endpoint5_7(raw),
+  fork: Endpoint5_8(raw),
+  switchAgent: Endpoint5_9(raw),
+  switchModel: Endpoint5_10(raw),
+  rename: Endpoint5_11(raw),
+  move: Endpoint5_12(raw),
+  prompt: Endpoint5_13(raw),
+  command: Endpoint5_14(raw),
+  skill: Endpoint5_15(raw),
+  synthetic: Endpoint5_16(raw),
+  shell: Endpoint5_17(raw),
+  compact: Endpoint5_18(raw),
+  wait: Endpoint5_19(raw),
+  revert: { stage: Endpoint5_20(raw), clear: Endpoint5_21(raw), commit: Endpoint5_22(raw) },
+  context: Endpoint5_23(raw),
+  inbox: { list: Endpoint5_24(raw), cancel: Endpoint5_25(raw), steer: Endpoint5_26(raw), queue: Endpoint5_27(raw) },
+  instructions: { entry: { list: Endpoint5_28(raw), put: Endpoint5_29(raw), remove: Endpoint5_30(raw) } },
+  generate: Endpoint5_31(raw),
+  log: Endpoint5_32(raw),
+  interrupt: Endpoint5_33(raw),
+  background: Endpoint5_34(raw),
+  message: Endpoint5_35(raw),
+  environment: Endpoint5_36(raw),
 })
 
 const Endpoint6_0 = (raw: RawClient["server.message"]) => (input: Endpoint6_0Input) =>

packages/client/src/promise/generated/client.ts

@@ -20,6 +20,8 @@ import type {
   SessionActiveOutput,
   SessionGetInput,
   SessionGetOutput,
+  SessionSnapshotInput,
+  SessionSnapshotOutput,
   SessionRemoveInput,
   SessionRemoveOutput,
   SessionForkInput,
@@ -514,6 +516,18 @@ export function make(options: ClientOptions) {
           },
           requestOptions,
         ).then((value) => value.data),
+      snapshot: (input: SessionSnapshotInput, requestOptions?: RequestOptions) =>
+        request<{ readonly data: SessionSnapshotOutput }>(
+          {
+            method: "GET",
+            path: `/api/session/${encodeURIComponent(input.sessionID)}/snapshot`,
+            query: { recent: input["recent"] },
+            successStatus: 200,
+            declaredStatuses: [404, 500, 401, 400],
+            empty: false,
+          },
+          requestOptions,
+        ).then((value) => value.data),
       remove: (input: SessionRemoveInput, requestOptions?: RequestOptions) =>
         request<SessionRemoveOutput>(
           {
@@ -843,9 +857,9 @@ export function make(options: ClientOptions) {
           {
             method: "GET",
             path: `/api/experimental/session/${encodeURIComponent(input.sessionID)}/log`,
-            query: { after: input["after"], follow: input["follow"] },
+            query: { after: input["after"], follow: input["follow"], ephemeral: input["ephemeral"] },
             successStatus: 200,
-            declaredStatuses: [404, 401, 400],
+            declaredStatuses: [404, 409, 401, 400],
             empty: false,
           },
           requestOptions,

packages/client/src/promise/generated/types.ts

@@ -512,51 +512,6 @@ export type SessionRevertCommitted = {
   data: { sessionID: string; to: string }
 }
 
-export type ModelsDevRefreshed = {
-  id: string
-  created: number
-  metadata?: { [x: string]: any }
-  type: "models-dev.refreshed"
-  location?: LocationRef
-  data: {}
-}
-
-export type IntegrationUpdated = {
-  id: string
-  created: number
-  metadata?: { [x: string]: any }
-  type: "integration.updated"
-  location?: LocationRef
-  data: {}
-}
-
-export type IntegrationConnectionUpdated = {
-  id: string
-  created: number
-  metadata?: { [x: string]: any }
-  type: "integration.connection.updated"
-  location?: LocationRef
-  data: { integrationID: string }
-}
-
-export type CatalogUpdated = {
-  id: string
-  created: number
-  metadata?: { [x: string]: any }
-  type: "catalog.updated"
-  location?: LocationRef
-  data: {}
-}
-
-export type AgentUpdated = {
-  id: string
-  created: number
-  metadata?: { [x: string]: any }
-  type: "agent.updated"
-  location?: LocationRef
-  data: {}
-}
-
 export type SessionTextDelta = {
   id: string
   created: number
@@ -602,6 +557,51 @@ export type SessionCompactionDelta = {
   data: { sessionID: string; text: string }
 }
 
+export type ModelsDevRefreshed = {
+  id: string
+  created: number
+  metadata?: { [x: string]: any }
+  type: "models-dev.refreshed"
+  location?: LocationRef
+  data: {}
+}
+
+export type IntegrationUpdated = {
+  id: string
+  created: number
+  metadata?: { [x: string]: any }
+  type: "integration.updated"
+  location?: LocationRef
+  data: {}
+}
+
+export type IntegrationConnectionUpdated = {
+  id: string
+  created: number
+  metadata?: { [x: string]: any }
+  type: "integration.connection.updated"
+  location?: LocationRef
+  data: { integrationID: string }
+}
+
+export type CatalogUpdated = {
+  id: string
+  created: number
+  metadata?: { [x: string]: any }
+  type: "catalog.updated"
+  location?: LocationRef
+  data: {}
+}
+
+export type AgentUpdated = {
+  id: string
+  created: number
+  metadata?: { [x: string]: any }
+  type: "agent.updated"
+  location?: LocationRef
+  data: {}
+}
+
 export type FilesystemChanged = {
   id: string
   created: number
@@ -1994,7 +1994,15 @@ export type FormCreated = {
   data: { form: FormInfo1 }
 }
 
-export type SessionLogItem = SessionEventDurable | EventLogSynced
+export type SessionLogItem =
+  | SessionEventDurable
+  | SessionUsageUpdated
+  | SessionTextDelta
+  | SessionReasoningDelta
+  | SessionToolInputDelta
+  | SessionToolProgress
+  | SessionCompactionDelta
+  | EventLogSynced
 
 export type IntegrationOAuthMethod = { id: string; type: "oauth"; label: string; form?: FormFields }
 
@@ -2004,6 +2012,16 @@ export type FormInfo = { id: string; sessionID: string; title: string; metadata?
 
 export type SessionTransferData = { info: SessionInfo; messages: Array<SessionMessageInfo> }
 
+export type SessionSnapshotResponse = {
+  data: {
+    session: SessionInfo
+    children: Array<SessionInfo>
+    inbox: Array<SessionInboxInfo>
+    messages: Array<SessionMessageInfo>
+    seq: number
+  }
+}
+
 export type SessionMessagesResponse = {
   data: Array<SessionMessageInfo>
   cursor: { previous?: string | null; next?: string | null }
@@ -2218,6 +2236,16 @@ export const isInstructionEntryValueTooLargeError = (value: unknown): value is I
   "_tag" in value &&
   value["_tag"] === "InstructionEntryValueTooLargeError"
 
+export type SeqUnavailableError = {
+  readonly _tag: "SeqUnavailableError"
+  readonly sessionID: string
+  readonly after: number
+  readonly head?: number | undefined
+  readonly message: string
+}
+export const isSeqUnavailableError = (value: unknown): value is SeqUnavailableError =>
+  typeof value === "object" && value !== null && "_tag" in value && value["_tag"] === "SeqUnavailableError"
+
 export type ProviderNotFoundError = {
   readonly _tag: "ProviderNotFoundError"
   readonly providerID: string
@@ -3290,6 +3318,13 @@ export type SessionGetInput = { readonly sessionID: { readonly sessionID: string
 
 export type SessionGetOutput = { data: SessionInfo }["data"]
 
+export type SessionSnapshotInput = {
+  readonly sessionID: { readonly sessionID: string }["sessionID"]
+  readonly recent?: { readonly recent?: number | undefined }["recent"]
+}
+
+export type SessionSnapshotOutput = SessionSnapshotResponse["data"]
+
 export type SessionRemoveInput = { readonly sessionID: { readonly sessionID: string }["sessionID"] }
 
 export type SessionRemoveOutput = void
@@ -3928,8 +3963,21 @@ export type SessionGenerateOutput = SessionGenerateResponse["data"]
 
 export type SessionLogInput = {
   readonly sessionID: { readonly sessionID: string }["sessionID"]
-  readonly after?: { readonly after?: number | undefined; readonly follow?: boolean | undefined }["after"]
-  readonly follow?: { readonly after?: number | undefined; readonly follow?: boolean | undefined }["follow"]
+  readonly after?: {
+    readonly after?: number | undefined
+    readonly follow?: boolean | undefined
+    readonly ephemeral?: boolean | undefined
+  }["after"]
+  readonly follow?: {
+    readonly after?: number | undefined
+    readonly follow?: boolean | undefined
+    readonly ephemeral?: boolean | undefined
+  }["follow"]
+  readonly ephemeral?: {
+    readonly after?: number | undefined
+    readonly follow?: boolean | undefined
+    readonly ephemeral?: boolean | undefined
+  }["ephemeral"]
 }
 
 export type SessionLogOutput = SessionLogItem

packages/client/src/solid/engine-data.ts

@@ -0,0 +1,274 @@
+import { batch, onCleanup } from "solid-js"
+import { createStore, reconcile, unwrap } from "solid-js/store"
+import type { OpenCodeClient, OpenCodeEvent, SessionPromptInput } from "../promise"
+import { isSeqUnavailableError } from "../promise"
+import { createData } from "./data"
+import type { CreateDataInput } from "./data"
+import { Engine } from "./engine/engine"
+
+type SessionApi = Pick<OpenCodeClient["session"], "snapshot" | "log" | "prompt">
+
+// Solid's setStore path types reject readonly arrays. The store only ever
+// holds deep clones it owns, so a mutable mirror of the engine view is safe.
+// Shallow on purpose: a recursive mutable type either flattens tuples or
+// exceeds TS instantiation depth on the recursive metadata JSON types.
+type StoreSessionView = {
+  -readonly [Key in keyof Engine.SessionView]: Engine.SessionView[Key] extends ReadonlyArray<infer Item>
+    ? Item[]
+    : Engine.SessionView[Key]
+}
+
+// Engine data is plain JSON, so a recursive copy beats structuredClone's
+// serialization overhead on the small per-event subtrees the adapter clones.
+function clone<T>(value: T): T {
+  if (value === null || typeof value !== "object") return value
+  if (Array.isArray(value)) return value.map(clone) as T
+  const copy: Record<string, unknown> = {}
+  for (const key in value) copy[key] = clone(value[key as keyof T])
+  return copy as T
+}
+
+const ambientSessionEvents = new Set<OpenCodeEvent["type"]>([
+  "session.created",
+  "session.deleted",
+  "session.renamed",
+  "session.execution.started",
+  "session.execution.succeeded",
+  "session.execution.failed",
+  "session.execution.interrupted",
+])
+
+/** How many recent messages a session snapshot fetch requests. */
+export const SNAPSHOT_RECENT = 200
+
+export function createEngineTransport(api: () => SessionApi): Engine.SessionTransport {
+  return {
+    snapshot(sessionID) {
+      return api().snapshot({ sessionID, recent: SNAPSHOT_RECENT })
+    },
+    async *stream(sessionID, after, signal) {
+      try {
+        for await (const item of api().log(
+          { sessionID, after, follow: true, ephemeral: true },
+          signal ? { signal } : undefined,
+        )) {
+          if (item.type !== "session.forked") yield item
+        }
+      } catch (error) {
+        if (isSeqUnavailableError(error)) throw new Engine.SeqUnavailable()
+        throw error
+      }
+    },
+    async submit(input) {
+      try {
+        await api().prompt({ ...input.request, sessionID: input.sessionID, id: input.id })
+      } catch (error) {
+        if (isTypedError(error)) throw new Engine.SubmitRejected(error.message)
+        throw error
+      }
+    },
+  }
+}
+
+export function createEngineData(config: CreateDataInput) {
+  const legacy = createData({
+    ...config,
+    event: {
+      on: config.event.on,
+      listen(handler) {
+        return config.event.listen((event) => {
+          if (event.name.startsWith("session.") && !ambientSessionEvents.has(event.name)) return
+          handler(event)
+        })
+      },
+    },
+  })
+  const [views, setViews] = createStore<Record<string, StoreSessionView>>({})
+  const engines = new Map<string, Promise<Engine.SessionEngine>>()
+  const families = new Set<string>()
+  const invalidated = new Set<string>()
+  const failures = new Set<(failure: Engine.IntentFailure) => void>()
+  const cleanups = new Set<() => void>()
+  const transport = createEngineTransport(() => config.api().session)
+  let connected = false
+
+  // Reconcile mutates the store's backing tree in place, so engine state must
+  // never be aliased into it and every clone must appear at exactly one store
+  // path. The fold is a persistent structure — successive views share
+  // references for everything unchanged — so diff the previous view by
+  // identity and deep-clone only the changed subtrees. (A full-view
+  // structuredClone per publish dominated the streaming hot path.) New
+  // SessionView fields must be diffed here or they never propagate past the
+  // first publish.
+  const rendered = new Map<string, Engine.SessionView>()
+  const update = (sessionID: string, view: Engine.SessionView) => {
+    const previous = rendered.get(sessionID)
+    rendered.set(sessionID, view)
+    const sessionChanged = view.session !== previous?.session
+    batch(() => {
+      if (!previous) setViews(sessionID, clone(view) as StoreSessionView)
+      else {
+        if (sessionChanged) setViews(sessionID, "session", reconcile(clone(view.session)))
+        if (view.children !== previous.children)
+          setViews(sessionID, "children", reconcile(clone(view.children) as StoreSessionView["children"]))
+        if (view.inbox !== previous.inbox)
+          setViews(sessionID, "inbox", reconcile(clone(view.inbox) as StoreSessionView["inbox"]))
+        if (view.pending !== previous.pending)
+          setViews(sessionID, "pending", reconcile(clone(view.pending) as StoreSessionView["pending"]))
+        if (view.seq !== previous.seq) setViews(sessionID, "seq", view.seq)
+        if (view.active !== previous.active) setViews(sessionID, "active", view.active)
+        if (view.deleted !== previous.deleted) setViews(sessionID, "deleted", view.deleted)
+        if (view.messages !== previous.messages) {
+          // Per-index writes can grow the store array but never shrink it, so
+          // a shorter messages list falls back to a whole-array reconcile.
+          if (view.messages.length < previous.messages.length)
+            setViews(sessionID, "messages", reconcile(clone(view.messages) as StoreSessionView["messages"]))
+          else
+            for (let index = 0; index < view.messages.length; index++)
+              if (view.messages[index] !== previous.messages[index])
+                setViews(sessionID, "messages", index, reconcile(clone(view.messages[index])))
+        }
+      }
+      if (sessionChanged) {
+        const current = legacy.session.get(sessionID)
+        if (!current || current.time.updated <= view.session.time.updated) {
+          legacy.session.remember(clone(view.session))
+        }
+      }
+      if (families.has(sessionID) && view.children !== previous?.children) {
+        view.children.forEach((child) => legacy.session.remember(clone(child)))
+      }
+    })
+  }
+
+  const ensure = (sessionID: string) => {
+    const existing = engines.get(sessionID)
+    if (existing) return existing
+    const created = Engine.createSessionEngine(sessionID, transport).then((engine) => {
+      update(sessionID, engine.view())
+      cleanups.add(engine.subscribe((view) => update(sessionID, view)))
+      cleanups.add(engine.subscribeFailures((failure) => failures.forEach((listener) => listener(failure))))
+      return engine
+    })
+    engines.set(sessionID, created)
+    void created.catch(() => engines.delete(sessionID))
+    return created
+  }
+
+  const sync = async (sessionID: string) => {
+    const engine = await ensure(sessionID)
+    if (invalidated.delete(sessionID)) await engine.refresh()
+    await engine.ready()
+  }
+
+  cleanups.add(
+    config.event.on("server.connected", () => {
+      if (!connected) {
+        connected = true
+        return
+      }
+      engines.forEach((engine) => void engine.then((handle) => handle.refresh()).catch(() => undefined))
+    }),
+  )
+
+  onCleanup(() => {
+    cleanups.forEach((cleanup) => cleanup())
+    engines.forEach((engine) => void engine.then((handle) => handle.stop()))
+  })
+
+  return {
+    ...legacy,
+    on: config.event.on,
+    listen: config.event.listen,
+    session: {
+      ...legacy.session,
+      async sync(sessionID: string, options?: { readonly children?: boolean }) {
+        if (options?.children) families.add(sessionID)
+        await sync(sessionID)
+        if (!options?.children) return
+        const view = views[sessionID]
+        view?.children.forEach((child) => legacy.session.remember(clone(unwrap(child))))
+      },
+      invalidate(sessionID: string) {
+        invalidated.add(sessionID)
+      },
+      status(sessionID: string) {
+        if (views[sessionID]?.active === "running") return "running"
+        return legacy.session.status(sessionID)
+      },
+      input: {
+        list(sessionID: string) {
+          return (
+            views[sessionID]?.pending.filter((item) => item.type !== "compaction").map((item) => item.id) ??
+            legacy.session.input.list(sessionID)
+          )
+        },
+        has(sessionID: string, inboxID: string) {
+          return (
+            views[sessionID]?.pending.some((item) => item.type !== "compaction" && item.id === inboxID) ??
+            legacy.session.input.has(sessionID, inboxID)
+          )
+        },
+      },
+      pending: {
+        list(sessionID: string) {
+          void ensure(sessionID)
+          return [...(views[sessionID]?.pending ?? [])]
+        },
+        sync(sessionID: string) {
+          return sync(sessionID)
+        },
+        invalidate(sessionID: string) {
+          invalidated.add(sessionID)
+        },
+      },
+      message: {
+        list(sessionID: string) {
+          void ensure(sessionID)
+          return [...(views[sessionID]?.messages ?? [])]
+        },
+        get(sessionID: string, messageID: string) {
+          void ensure(sessionID)
+          return views[sessionID]?.messages.find((message) => message.id === messageID)
+        },
+        sync(sessionID: string) {
+          return sync(sessionID)
+        },
+        invalidate(sessionID: string) {
+          invalidated.add(sessionID)
+        },
+      },
+      async prompt(input: SessionPromptInput) {
+        return (await ensure(input.sessionID)).submit({
+          id: input.id ?? undefined,
+          text: input.text,
+          files: input.files,
+          agents: input.agents,
+          skills: input.skills,
+          metadata: input.metadata,
+          delivery: input.delivery,
+          resume: input.resume,
+        })
+      },
+      failures: {
+        listen(listener: (failure: Engine.IntentFailure) => void) {
+          failures.add(listener)
+          return () => failures.delete(listener)
+        },
+      },
+    },
+  }
+}
+
+function isTypedError(error: unknown): error is { readonly _tag: string; readonly message: string } {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "_tag" in error &&
+    typeof error._tag === "string" &&
+    "message" in error &&
+    typeof error.message === "string"
+  )
+}
+
+export type EngineData = ReturnType<typeof createEngineData>

packages/client/src/solid/engine/engine.ts

@@ -0,0 +1,498 @@
+import type {
+  EventLogSynced,
+  SessionCompactionDelta,
+  SessionInboxInfo,
+  SessionInboxItem,
+  SessionMessageInfo,
+  SessionPromptInput,
+  SessionReasoningDelta,
+  SessionTextDelta,
+  SessionToolInputDelta,
+  SessionToolProgress,
+  SessionUsageUpdated,
+} from "../../promise"
+import { SessionFold } from "./fold"
+import type { DurableSessionEvent, SessionFoldState, SessionSnapshot } from "./fold"
+
+export type EphemeralSessionEvent =
+  | SessionTextDelta
+  | SessionReasoningDelta
+  | SessionToolInputDelta
+  | SessionToolProgress
+  | SessionCompactionDelta
+  | SessionUsageUpdated
+
+export type SessionStreamItem = DurableSessionEvent | EphemeralSessionEvent | EventLogSynced
+
+export type Intent = {
+  readonly id: string
+  readonly item: Extract<SessionInboxItem, { readonly type: "user" | "synthetic" }>
+  readonly request: Omit<SessionPromptInput, "sessionID" | "id">
+  readonly created: number
+}
+
+export type SubmitInput = {
+  readonly id: string
+  readonly sessionID: string
+  readonly request: Intent["request"]
+}
+
+export type IntentFailure = {
+  readonly intent: Intent
+  readonly reason: string
+}
+
+export class SubmitRejected extends Error {
+  readonly _tag = "SubmitRejected"
+
+  constructor(readonly reason: string) {
+    super(reason)
+  }
+}
+
+export class SeqUnavailable extends Error {
+  readonly _tag = "SeqUnavailable"
+}
+
+export interface SessionTransport {
+  readonly snapshot: (sessionID: string) => Promise<SessionSnapshot>
+  readonly stream: (sessionID: string, after: number, signal?: AbortSignal) => AsyncIterable<SessionStreamItem>
+  readonly submit: (input: SubmitInput) => Promise<void>
+}
+
+export type SessionView = SessionFoldState & {
+  readonly pending: ReadonlyArray<SessionInboxInfo>
+}
+
+export interface SessionEngine {
+  readonly sessionID: string
+  readonly view: () => SessionView
+  readonly submit: (input: Intent["request"] & { readonly id?: string }) => Intent
+  readonly subscribe: (listener: (view: SessionView) => void) => () => void
+  readonly subscribeFailures: (listener: (failure: IntentFailure) => void) => () => void
+  readonly ready: () => Promise<void>
+  readonly refresh: () => Promise<void>
+  readonly settled: () => Promise<void>
+  readonly stop: () => void
+}
+
+export type SessionEngineOptions = {
+  readonly makeID?: () => string
+  readonly now?: () => number
+  readonly reconnect?: () => Promise<void>
+}
+
+type Overlay = ReadonlyMap<string, OverlayEntry>
+
+type OverlayEntry =
+  | { readonly type: "text"; readonly value: string }
+  | { readonly type: "reasoning"; readonly value: string }
+  | { readonly type: "tool-input"; readonly value: string }
+  | { readonly type: "tool-progress"; readonly metadata: SessionToolProgress["data"]["metadata"] }
+  | { readonly type: "compaction"; readonly value: string }
+  | { readonly type: "usage"; readonly value: SessionUsageUpdated["data"] }
+
+type EngineState = {
+  readonly folded: SessionFoldState
+  readonly outbox: ReadonlyArray<Intent>
+  readonly overlay: Overlay
+  readonly synced: boolean
+}
+
+export async function createSessionEngine(
+  sessionID: string,
+  transport: SessionTransport,
+  options: SessionEngineOptions = {},
+): Promise<SessionEngine> {
+  let counter = 0
+  const makeID = options.makeID ?? (() => `msg_${Date.now().toString(36)}_${++counter}`)
+  const now = options.now ?? Date.now
+  const reconnect = options.reconnect ?? (() => new Promise<void>((resolve) => setTimeout(resolve, 100)))
+  let state: EngineState = {
+    folded: SessionFold.fromSnapshot(await transport.snapshot(sessionID)),
+    outbox: [],
+    overlay: new Map(),
+    synced: false,
+  }
+  const listeners = new Set<(view: SessionView) => void>()
+  const failureListeners = new Set<(failure: IntentFailure) => void>()
+  const settled = new Set<() => void>()
+  const ready = Promise.withResolvers<void>()
+  let sent: string | undefined
+  let stopped = false
+  let sending = false
+  let refreshing: Promise<void> | undefined
+  const abort = new AbortController()
+
+  const publish = (next: EngineState) => {
+    const previous = state
+    state = next
+    // Views derive from folded/outbox/overlay only, so synced flips and stale
+    // replays (where the fold returns its input) need no render or notify.
+    if (next.folded !== previous.folded || next.outbox !== previous.outbox || next.overlay !== previous.overlay) {
+      const view = render(state)
+      listeners.forEach((listener) => listener(view))
+    }
+    if (state.outbox.length > 0) return
+    settled.forEach((resolve) => resolve())
+    settled.clear()
+  }
+
+  const applySnapshot = (snapshot: SessionSnapshot, synced = false) => {
+    const folded = SessionFold.fromSnapshot(snapshot)
+    const acknowledged = new Set([
+      ...folded.messages.map((message) => message.id),
+      ...folded.inbox.map((item) => item.id),
+    ])
+    publish({
+      folded,
+      outbox: state.outbox.filter((intent) => !acknowledged.has(intent.id)),
+      overlay: new Map(),
+      synced,
+    })
+  }
+
+  const applyDurable = (event: DurableSessionEvent) => {
+    if (event.type === "session.inbox.enqueued" && sent === event.data.inboxID) sent = undefined
+    publish({
+      folded: SessionFold.apply(state.folded, event),
+      outbox:
+        event.type === "session.inbox.enqueued"
+          ? state.outbox.filter((intent) => intent.id !== event.data.inboxID)
+          : state.outbox,
+      overlay: clearOverlay(state.overlay, event),
+      synced: state.synced,
+    })
+    send()
+  }
+
+  const reject = (intent: Intent, reason: string) => {
+    publish({ ...state, outbox: state.outbox.filter((item) => item.id !== intent.id) })
+    failureListeners.forEach((listener) => listener({ intent, reason }))
+  }
+
+  const send = () => {
+    if (!state.synced || sending || stopped) return
+    const intent = state.outbox[0]
+    if (!intent || sent === intent.id) return
+    sending = true
+    sent = intent.id
+    void (async () => {
+      try {
+        await transport.submit({ id: intent.id, sessionID, request: intent.request })
+      } catch (error) {
+        if (!(error instanceof SubmitRejected)) return
+        sent = undefined
+        reject(intent, error.reason)
+      }
+    })().finally(() => {
+      sending = false
+      send()
+    })
+  }
+
+  const sync = async () => {
+    while (!stopped) {
+      try {
+        for await (const item of transport.stream(sessionID, state.folded.seq, abort.signal)) {
+          if (stopped) return
+          if (item.type === "log.synced") {
+            // A marker past the fold means the server skipped events it could not
+            // replay for this cursor; recover through a fresh snapshot.
+            if (item.seq !== undefined && item.seq > state.folded.seq) throw new SeqUnavailable()
+            sent = undefined
+            publish({ ...state, synced: true })
+            ready.resolve()
+            send()
+            continue
+          }
+          if ("durable" in item) {
+            applyDurable(item)
+            continue
+          }
+          publish({ ...state, overlay: applyOverlay(state.overlay, item) })
+        }
+      } catch (error) {
+        if (error instanceof SeqUnavailable) {
+          try {
+            applySnapshot(await transport.snapshot(sessionID))
+          } catch {
+            await reconnect()
+          }
+          continue
+        }
+      }
+      if (stopped) return
+      publish({ ...state, synced: false })
+      await reconnect()
+    }
+  }
+
+  void sync()
+
+  return {
+    sessionID,
+    view: () => render(state),
+    submit(input) {
+      const intent: Intent = {
+        id: input.id ?? makeID(),
+        created: now(),
+        request: input,
+        item: {
+          type: "user",
+          delivery: input.delivery ?? "steer",
+          payload: {
+            text: input.text,
+            agents: input.agents?.map((agent) => ({ ...agent })),
+            metadata: input.metadata,
+          },
+        },
+      }
+      publish({ ...state, outbox: [...state.outbox, intent] })
+      send()
+      return intent
+    },
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    subscribeFailures(listener) {
+      failureListeners.add(listener)
+      return () => failureListeners.delete(listener)
+    },
+    ready: () => ready.promise,
+    refresh() {
+      if (refreshing) return refreshing
+      refreshing = transport
+        .snapshot(sessionID)
+        .then((snapshot) => {
+          if (snapshot.seq < state.folded.seq) return
+          applySnapshot(snapshot, state.synced)
+          send()
+        })
+        .finally(() => {
+          refreshing = undefined
+        })
+      return refreshing
+    },
+    settled() {
+      if (state.outbox.length === 0) return Promise.resolve()
+      return new Promise<void>((resolve) => settled.add(resolve))
+    },
+    stop() {
+      stopped = true
+      abort.abort()
+      publish({ ...state, synced: false })
+    },
+  }
+}
+
+// Render runs per ephemeral event, so everything an event did not touch must
+// keep its reference: the adapter diffs consecutive views by identity to
+// decide what to write into the reactive store. Both caches key on persistent
+// inputs (a fold, outbox, or usage entry keeps its identity until it actually
+// changes), so per-delta renders only reapply the overlay.
+export function render(state: Pick<EngineState, "folded" | "outbox" | "overlay">): SessionView {
+  const base = renderBase(state.folded, state.outbox)
+  return {
+    ...state.folded,
+    session: usageSession(state.folded, state.overlay.get("usage")),
+    messages: applyOverlayToMessages(base.messages, state.overlay),
+    pending: base.pending,
+  }
+}
+
+const bases = new WeakMap<SessionFoldState, ReturnType<typeof buildBase>>()
+
+function renderBase(folded: SessionFoldState, outbox: EngineState["outbox"]) {
+  const hit = bases.get(folded)
+  if (hit && hit.outbox === outbox) return hit
+  const base = buildBase(folded, outbox)
+  bases.set(folded, base)
+  return base
+}
+
+function buildBase(folded: SessionFoldState, outbox: EngineState["outbox"]) {
+  const pending =
+    outbox.length === 0
+      ? folded.inbox
+      : [
+          ...folded.inbox,
+          ...outbox.map(
+            (intent): SessionInboxInfo => ({
+              id: intent.id,
+              sessionID: folded.session.id,
+              timeCreated: intent.created,
+              ...intent.item,
+            }),
+          ),
+        ]
+  const appended = pendingMessages(folded, pending)
+  return {
+    outbox,
+    pending,
+    messages: appended.length === 0 ? folded.messages : [...folded.messages, ...appended],
+  }
+}
+
+function pendingMessages(folded: SessionFoldState, pending: ReadonlyArray<SessionInboxInfo>) {
+  if (pending.length === 0) return []
+  const messageIDs = new Set(folded.messages.map((message) => message.id))
+  return pending.flatMap((item): ReadonlyArray<SessionMessageInfo> => {
+    if (item.type !== "compaction" && item.delivery === "queue") return []
+    if (messageIDs.has(item.id)) return []
+    const message = SessionFold.messageFromInbox(item)
+    return message ? [message] : []
+  })
+}
+
+const usageSessions = new WeakMap<
+  Extract<OverlayEntry, { type: "usage" }>,
+  { base: SessionFoldState["session"]; session: SessionFoldState["session"] }
+>()
+
+function usageSession(folded: SessionFoldState, entry: OverlayEntry | undefined) {
+  if (entry?.type !== "usage") return folded.session
+  const hit = usageSessions.get(entry)
+  if (hit && hit.base === folded.session) return hit.session
+  const session = { ...folded.session, cost: entry.value.cost, tokens: entry.value.tokens }
+  usageSessions.set(entry, { base: folded.session, session })
+  return session
+}
+
+function applyOverlay(overlay: Overlay, event: EphemeralSessionEvent): Overlay {
+  const next = new Map(overlay)
+  switch (event.type) {
+    case "session.text.delta": {
+      const key = partKey("text", event.data.assistantMessageID, event.data.ordinal)
+      const current = next.get(key)
+      next.set(key, {
+        type: "text",
+        value: (current?.type === "text" ? current.value : "") + event.data.delta,
+      })
+      return next
+    }
+    case "session.reasoning.delta": {
+      const key = partKey("reasoning", event.data.assistantMessageID, event.data.ordinal)
+      const current = next.get(key)
+      next.set(key, {
+        type: "reasoning",
+        value: (current?.type === "reasoning" ? current.value : "") + event.data.delta,
+      })
+      return next
+    }
+    case "session.tool.input.delta": {
+      const key = toolKey("tool-input", event.data.assistantMessageID, event.data.id)
+      const current = next.get(key)
+      next.set(key, {
+        type: "tool-input",
+        value: (current?.type === "tool-input" ? current.value : "") + event.data.delta,
+      })
+      return next
+    }
+    case "session.tool.progress":
+      next.set(toolKey("tool-progress", event.data.assistantMessageID, event.data.id), {
+        type: "tool-progress",
+        metadata: event.data.metadata,
+      })
+      return next
+    case "session.compaction.delta": {
+      const current = next.get("compaction")
+      next.set("compaction", {
+        type: "compaction",
+        value: (current?.type === "compaction" ? current.value : "") + event.data.text,
+      })
+      return next
+    }
+    case "session.usage.updated":
+      next.set("usage", { type: "usage", value: event.data })
+      return next
+  }
+}
+
+function clearOverlay(overlay: Overlay, event: DurableSessionEvent): Overlay {
+  switch (event.type) {
+    case "session.text.ended":
+      return removeOverlay(overlay, partKey("text", event.data.assistantMessageID, event.data.ordinal))
+    case "session.reasoning.ended":
+      return removeOverlay(overlay, partKey("reasoning", event.data.assistantMessageID, event.data.ordinal))
+    case "session.tool.input.ended":
+    case "session.tool.called":
+      return removeOverlay(overlay, toolKey("tool-input", event.data.assistantMessageID, event.data.id))
+    case "session.tool.success":
+    case "session.tool.failed":
+      return removeOverlay(overlay, toolKey("tool-progress", event.data.assistantMessageID, event.data.id))
+    case "session.compaction.ended":
+    case "session.compaction.failed":
+      return removeOverlay(overlay, "compaction")
+    case "session.step.ended":
+    case "session.step.failed":
+    case "session.usage.recorded":
+      return removeOverlay(overlay, "usage")
+    default:
+      return overlay
+  }
+}
+
+function removeOverlay(overlay: Overlay, key: string): Overlay {
+  if (!overlay.has(key)) return overlay
+  const next = new Map(overlay)
+  next.delete(key)
+  return next
+}
+
+function applyOverlayToMessages(messages: ReadonlyArray<SessionMessageInfo>, overlay: Overlay) {
+  if (overlay.size === 0) return messages
+  // Remap only the messages the overlay actually touches so everything else
+  // keeps its identity.
+  const compacting = overlay.has("compaction")
+  const touched = new Set<string>()
+  overlay.forEach((_, key) => {
+    const id = keyMessageID(key)
+    if (id) touched.add(id)
+  })
+  if (touched.size === 0 && !compacting) return messages
+  return messages.map((message): SessionMessageInfo => {
+    if (message.type === "compaction" && message.status === "running") {
+      if (!compacting) return message
+      const entry = overlay.get("compaction")
+      return entry?.type === "compaction" ? { ...message, summary: message.summary + entry.value } : message
+    }
+    if (message.type !== "assistant" || !touched.has(message.id)) return message
+    const ordinals = { text: 0, reasoning: 0 }
+    const content = message.content.map((part) => {
+      if (part.type === "text") {
+        const entry = overlay.get(partKey("text", message.id, ordinals.text++))
+        return entry?.type === "text" ? { ...part, text: part.text + entry.value } : part
+      }
+      if (part.type === "reasoning") {
+        const entry = overlay.get(partKey("reasoning", message.id, ordinals.reasoning++))
+        return entry?.type === "reasoning" ? { ...part, text: part.text + entry.value } : part
+      }
+      const input = overlay.get(toolKey("tool-input", message.id, part.id))
+      if (input?.type === "tool-input" && part.state.status === "streaming")
+        return { ...part, state: { ...part.state, input: part.state.input + input.value } }
+      const progress = overlay.get(toolKey("tool-progress", message.id, part.id))
+      if (progress?.type === "tool-progress" && part.state.status === "running")
+        return { ...part, state: { ...part.state, metadata: progress.metadata } }
+      return part
+    })
+    return content.some((part, index) => part !== message.content[index]) ? { ...message, content } : message
+  })
+}
+
+function partKey(type: "text" | "reasoning", messageID: string, ordinal: number) {
+  return `${type}:${messageID}:${ordinal}`
+}
+
+function toolKey(type: "tool-input" | "tool-progress", messageID: string, toolID: string) {
+  return `${type}:${messageID}:${toolID}`
+}
+
+// Second segment of a part or tool key; undefined for the segmentless
+// "compaction" and "usage" keys.
+function keyMessageID(key: string) {
+  return key.split(":")[1]
+}
+
+export * as Engine from "./engine"

packages/client/src/solid/engine/fold.ts

@@ -0,0 +1,580 @@
+import type {
+  SessionEventDurable,
+  SessionInboxInfo,
+  SessionInfo,
+  SessionMessageAssistant,
+  SessionMessageAssistantTool,
+  SessionMessageInfo,
+  TokenUsageInfo,
+} from "../../promise"
+
+export type SessionFoldState = {
+  readonly session: SessionInfo
+  readonly children: ReadonlyArray<SessionInfo>
+  readonly inbox: ReadonlyArray<SessionInboxInfo>
+  readonly messages: ReadonlyArray<SessionMessageInfo>
+  readonly active: "idle" | "running"
+  readonly deleted: boolean
+  readonly seq: number
+}
+
+export type SessionSnapshot = Omit<SessionFoldState, "active" | "deleted"> & {
+  readonly active?: SessionFoldState["active"]
+}
+
+export type DurableSessionEvent = Exclude<SessionEventDurable, { readonly type: "session.forked" }>
+
+export function fromSnapshot(snapshot: SessionSnapshot): SessionFoldState {
+  return { ...snapshot, active: snapshot.active ?? "idle", deleted: false }
+}
+
+export function apply(state: SessionFoldState, event: DurableSessionEvent): SessionFoldState {
+  if (event.durable.seq <= state.seq) return state
+  const current = { ...state, seq: event.durable.seq }
+  switch (event.type) {
+    case "session.created":
+      return current
+    case "session.deleted":
+      return { ...current, deleted: true }
+    case "session.usage.recorded":
+      return { ...current, session: addUsage(state.session, event.data.cost, event.data.tokens, event.created) }
+    case "session.agent.selected":
+      return append(
+        {
+          ...current,
+          session: {
+            ...state.session,
+            agent: event.data.agent,
+            time: { ...state.session.time, updated: event.created },
+          },
+        },
+        {
+          id: messageID(event.id),
+          type: "agent-switched",
+          agent: event.data.agent,
+          previous: event.data.previous ?? state.session.agent,
+          metadata: event.metadata,
+          time: { created: event.created },
+        },
+      )
+    case "session.model.selected":
+      return append(
+        {
+          ...current,
+          session: {
+            ...state.session,
+            model: event.data.model,
+            time: { ...state.session.time, updated: event.created },
+          },
+        },
+        {
+          id: messageID(event.id),
+          type: "model-switched",
+          model: event.data.model,
+          previous: event.data.previous ?? state.session.model,
+          metadata: event.metadata,
+          time: { created: event.created },
+        },
+      )
+    case "session.moved":
+      return append(
+        {
+          ...current,
+          session: {
+            ...state.session,
+            location: event.data.location,
+            projectID: event.data.projectID,
+            subpath: event.data.subpath,
+            time: { ...state.session.time, updated: event.created },
+          },
+        },
+        {
+          id: messageID(event.id),
+          type: "location-switched",
+          location: event.data.location,
+          projectID: event.data.projectID,
+          subpath: event.data.subpath,
+          previous: {
+            location: state.session.location,
+            projectID: state.session.projectID,
+            subpath: state.session.subpath,
+          },
+          metadata: event.metadata,
+          time: { created: event.created },
+        },
+      )
+    case "session.renamed":
+      return {
+        ...current,
+        session: { ...state.session, title: event.data.title, time: { ...state.session.time, updated: event.created } },
+      }
+    case "session.inbox.enqueued":
+      return {
+        ...current,
+        session: { ...state.session, time: { ...state.session.time, updated: event.created } },
+        inbox: state.inbox.some((item) => item.id === event.data.inboxID)
+          ? state.inbox
+          : [
+              ...state.inbox,
+              {
+                id: event.data.inboxID,
+                sessionID: event.data.sessionID,
+                timeCreated: event.created,
+                ...event.data.item,
+              },
+            ],
+      }
+    case "session.inbox.delivered": {
+      const item = state.inbox.find((item) => item.id === event.data.inboxID)
+      const next = { ...current, inbox: state.inbox.filter((item) => item.id !== event.data.inboxID) }
+      if (!item) return next
+      const delivered = messageFromInbox(item, event.created)
+      return delivered ? append(next, delivered) : next
+    }
+    case "session.inbox.cancelled":
+      return { ...current, inbox: state.inbox.filter((item) => item.id !== event.data.inboxID) }
+    case "session.inbox.delivery.changed":
+      return {
+        ...current,
+        inbox: state.inbox.map((item) =>
+          item.id === event.data.inboxID ? { ...item, delivery: event.data.delivery } : item,
+        ),
+      }
+    case "session.execution.started":
+      return { ...current, active: "running" }
+    case "session.execution.succeeded":
+    case "session.execution.failed":
+    case "session.execution.interrupted":
+      return { ...updateActiveAssistant(current, (message) => ({ ...message, retry: undefined })), active: "idle" }
+    case "session.instructions.updated":
+      if (event.data.text === undefined) return current
+      return append(current, {
+        id: messageID(event.id),
+        type: "system",
+        text: event.data.text,
+        description: `Instructions updated: ${Object.keys(event.data.delta).join(", ")}`,
+        metadata: event.metadata,
+        time: { created: event.created },
+      })
+    case "session.synthetic":
+      return append(current, {
+        id: messageID(event.id),
+        type: "synthetic",
+        text: event.data.text,
+        description: event.data.description,
+        metadata: event.data.metadata,
+        time: { created: event.created },
+      })
+    case "session.skill.activated":
+      return append(current, {
+        id: messageID(event.id),
+        type: "skill",
+        skill: event.data.id,
+        name: event.data.name,
+        text: event.data.text,
+        metadata: event.metadata,
+        time: { created: event.created },
+      })
+    case "session.shell.started":
+      return append(current, {
+        id: messageID(event.id),
+        type: "shell",
+        shellID: event.data.shell.id,
+        command: event.data.shell.command,
+        status: event.data.shell.status,
+        metadata: event.metadata,
+        time: { created: event.created },
+      })
+    case "session.shell.ended":
+      return updateMessage(
+        current,
+        (message) => message.type === "shell" && message.shellID === event.data.shell.id,
+        (message) => {
+          if (message.type !== "shell") return message
+          return {
+            ...message,
+            status: event.data.shell.status,
+            exit: event.data.shell.exit,
+            output: event.data.output,
+            time: { ...message.time, completed: event.created },
+          }
+        },
+        true,
+      )
+    case "session.step.started": {
+      const existing = state.messages.some((message) => message.id === event.data.assistantMessageID)
+      if (existing)
+        return updateAssistant(current, event.data.assistantMessageID, (message) => ({
+          ...message,
+          agent: event.data.agent,
+          model: event.data.model,
+          retry: undefined,
+          error: undefined,
+          finish: undefined,
+          time: { ...message.time, completed: undefined },
+          snapshot: event.data.snapshot ? { ...message.snapshot, start: event.data.snapshot } : message.snapshot,
+        }))
+      return append(
+        updateActiveAssistant(current, (message) => ({
+          ...message,
+          retry: undefined,
+          time: { ...message.time, completed: event.created },
+        })),
+        {
+          id: event.data.assistantMessageID,
+          type: "assistant",
+          agent: event.data.agent,
+          model: event.data.model,
+          metadata: event.metadata,
+          content: [],
+          snapshot: event.data.snapshot ? { start: event.data.snapshot } : undefined,
+          time: { created: event.created },
+        },
+      )
+    }
+    case "session.step.ended":
+      return withUsage(
+        updateAssistant(current, event.data.assistantMessageID, (message) => ({
+          ...message,
+          finish: event.data.finish,
+          cost: event.data.cost,
+          tokens: event.data.tokens,
+          time: { ...message.time, completed: event.created },
+          snapshot:
+            event.data.snapshot || event.data.files
+              ? { ...message.snapshot, end: event.data.snapshot, files: event.data.files }
+              : message.snapshot,
+        })),
+        event.data.cost,
+        event.data.tokens,
+        event.created,
+      )
+    case "session.step.failed": {
+      const failed = updateAssistant(current, event.data.assistantMessageID, (message) => ({
+        ...message,
+        finish: "error",
+        error: event.data.error,
+        retry: undefined,
+        cost: event.data.cost ?? message.cost,
+        tokens: event.data.tokens ?? message.tokens,
+        time: { ...message.time, completed: event.created },
+        snapshot:
+          event.data.snapshot || event.data.files
+            ? { ...message.snapshot, end: event.data.snapshot, files: event.data.files }
+            : message.snapshot,
+      }))
+      if (event.data.cost === undefined || event.data.tokens === undefined) return failed
+      return withUsage(failed, event.data.cost, event.data.tokens, event.created)
+    }
+    case "session.text.started":
+      return updateAssistant(current, event.data.assistantMessageID, (message) => ({
+        ...message,
+        content: insertOrdinal(message.content, "text", event.data.ordinal, { type: "text", text: "" }),
+      }))
+    case "session.text.ended":
+      return updateContent(current, event.data.assistantMessageID, "text", event.data.ordinal, (part) => ({
+        ...part,
+        text: event.data.text,
+        state: event.data.state,
+      }))
+    case "session.reasoning.started":
+      return updateAssistant(current, event.data.assistantMessageID, (message) => ({
+        ...message,
+        content: insertOrdinal(message.content, "reasoning", event.data.ordinal, {
+          type: "reasoning",
+          text: "",
+          state: event.data.state,
+          time: { created: event.created },
+        }),
+      }))
+    case "session.reasoning.ended":
+      return updateContent(current, event.data.assistantMessageID, "reasoning", event.data.ordinal, (part) => ({
+        ...part,
+        text: event.data.text,
+        state: event.data.state ?? part.state,
+        time: { created: part.time?.created ?? event.created, completed: event.created },
+      }))
+    case "session.tool.input.started":
+      return updateAssistant(current, event.data.assistantMessageID, (message) => ({
+        ...message,
+        content: [
+          ...message.content,
+          {
+            type: "tool",
+            id: event.data.id,
+            name: event.data.name,
+            state: { status: "streaming", input: "" },
+            time: { created: event.created },
+          },
+        ],
+      }))
+    case "session.tool.input.ended":
+      return updateTool(current, event.data.assistantMessageID, event.data.id, (part) =>
+        part.state.status === "streaming" ? { ...part, state: { ...part.state, input: event.data.text } } : part,
+      )
+    case "session.tool.called":
+      return updateTool(current, event.data.assistantMessageID, event.data.id, (part) => ({
+        ...part,
+        executed: event.data.executed,
+        providerState: event.data.state,
+        state: { status: "running", input: event.data.input, metadata: {} },
+        time: { ...part.time, ran: event.created },
+      }))
+    case "session.tool.success":
+      return updateTool(current, event.data.assistantMessageID, event.data.id, (part) => {
+        if (part.state.status !== "running") return part
+        return {
+          ...part,
+          executed: event.data.executed || part.executed === true,
+          providerResultState: event.data.resultState,
+          state: {
+            status: "completed",
+            input: part.state.input,
+            content: event.data.content,
+            metadata: event.data.metadata,
+          },
+          time: { ...part.time, completed: event.created },
+        }
+      })
+    case "session.tool.failed":
+      return updateTool(current, event.data.assistantMessageID, event.data.id, (part) => {
+        if (part.state.status !== "streaming" && part.state.status !== "running") return part
+        return {
+          ...part,
+          executed: event.data.executed || part.executed === true,
+          providerResultState: event.data.resultState,
+          state: {
+            status: "error",
+            error: event.data.error,
+            input: typeof part.state.input === "string" ? {} : part.state.input,
+            content: event.data.content,
+            metadata: event.data.metadata,
+          },
+          time: { ...part.time, completed: event.created },
+        }
+      })
+    case "session.retry.scheduled":
+      return updateAssistant(current, event.data.assistantMessageID, (message) => ({
+        ...message,
+        retry: { attempt: event.data.attempt, at: event.data.at, error: event.data.error },
+      }))
+    case "session.compaction.started":
+      return append(
+        {
+          ...current,
+          inbox: event.data.inputID ? state.inbox.filter((item) => item.id !== event.data.inputID) : state.inbox,
+        },
+        {
+          id: event.data.inputID ?? messageID(event.id),
+          type: "compaction",
+          status: "running",
+          reason: event.data.reason,
+          summary: "",
+          recent: event.data.recent,
+          metadata: event.metadata,
+          time: { created: event.created },
+        },
+      )
+    case "session.compaction.ended": {
+      const running = state.messages.findLast(
+        (message) => message.type === "compaction" && message.status === "running",
+      )
+      if (!running)
+        return append(current, {
+          id: messageID(event.id),
+          type: "compaction",
+          status: "completed",
+          reason: event.data.reason,
+          summary: event.data.text,
+          recent: event.data.recent,
+          metadata: event.metadata,
+          time: { created: event.created },
+        })
+      return updateMessage(
+        current,
+        (message) => message.id === running.id,
+        (message) => ({
+          ...message,
+          type: "compaction",
+          status: "completed",
+          reason: event.data.reason,
+          summary: event.data.text,
+          recent: event.data.recent,
+        }),
+      )
+    }
+    case "session.compaction.failed": {
+      const running = state.messages.findLast(
+        (message) => message.type === "compaction" && message.status === "running",
+      )
+      const failed = {
+        id: running?.id ?? event.data.inputID ?? messageID(event.id),
+        type: "compaction" as const,
+        status: "failed" as const,
+        reason: event.data.reason,
+        error: event.data.error,
+        metadata: running?.metadata ?? event.metadata,
+        time: running?.time ?? { created: event.created },
+      }
+      const next = {
+        ...current,
+        inbox: event.data.inputID ? state.inbox.filter((item) => item.id !== event.data.inputID) : state.inbox,
+      }
+      return running
+        ? updateMessage(
+            next,
+            (message) => message.id === running.id,
+            () => failed,
+          )
+        : append(next, failed)
+    }
+    case "session.revert.staged":
+      return {
+        ...current,
+        session: {
+          ...state.session,
+          revert: event.data.revert,
+          time: { ...state.session.time, updated: event.created },
+        },
+      }
+    case "session.revert.cleared":
+      return {
+        ...current,
+        session: { ...state.session, revert: undefined, time: { ...state.session.time, updated: event.created } },
+      }
+    case "session.revert.committed":
+      return {
+        ...current,
+        session: { ...state.session, revert: undefined, time: { ...state.session.time, updated: event.created } },
+        messages: state.messages.filter((message) => message.id < event.data.to),
+        inbox: state.inbox.filter((item) => item.id < event.data.to),
+      }
+  }
+}
+
+function messageID(eventID: string) {
+  return eventID.replace(/^evt_/, "msg_")
+}
+
+export function messageFromInbox(item: SessionInboxInfo, created = item.timeCreated): SessionMessageInfo | undefined {
+  if (item.type === "user") return { id: item.id, type: "user", ...item.payload, time: { created } }
+  if (item.type === "synthetic") return { id: item.id, type: "synthetic", ...item.payload, time: { created } }
+}
+
+function append(state: SessionFoldState, item: SessionMessageInfo) {
+  if (state.messages.some((message) => message.id === item.id)) return state
+  return { ...state, messages: [...state.messages, item] }
+}
+
+function updateMessage(
+  state: SessionFoldState,
+  predicate: (message: SessionMessageInfo) => boolean,
+  update: (message: SessionMessageInfo) => SessionMessageInfo,
+  last = false,
+) {
+  const index = last ? state.messages.findLastIndex(predicate) : state.messages.findIndex(predicate)
+  if (index < 0) return state
+  return {
+    ...state,
+    messages: state.messages.map((message, position) => (position === index ? update(message) : message)),
+  }
+}
+
+function updateAssistant(
+  state: SessionFoldState,
+  messageID: string,
+  update: (message: SessionMessageAssistant) => SessionMessageAssistant,
+) {
+  return updateMessage(
+    state,
+    (message) => message.id === messageID && message.type === "assistant",
+    (message) => (message.type === "assistant" ? update(message) : message),
+  )
+}
+
+function updateActiveAssistant(
+  state: SessionFoldState,
+  update: (message: SessionMessageAssistant) => SessionMessageAssistant,
+) {
+  return updateMessage(
+    state,
+    (message) => message.type === "assistant" && message.time.completed === undefined,
+    (message) => (message.type === "assistant" ? update(message) : message),
+    true,
+  )
+}
+
+function updateContent<Type extends "text" | "reasoning">(
+  state: SessionFoldState,
+  messageID: string,
+  type: Type,
+  ordinal: number,
+  update: (
+    part: Extract<SessionMessageAssistant["content"][number], { readonly type: Type }>,
+  ) => Extract<SessionMessageAssistant["content"][number], { readonly type: Type }>,
+) {
+  return updateAssistant(state, messageID, (message) => {
+    const position = message.content.flatMap((part, index) => (part.type === type ? [index] : []))[ordinal]
+    const part = position === undefined ? undefined : message.content[position]
+    if (!part || part.type !== type) return message
+    return {
+      ...message,
+      content: message.content.map((item, index) =>
+        index === position
+          ? update(part as Extract<SessionMessageAssistant["content"][number], { readonly type: Type }>)
+          : item,
+      ),
+    }
+  })
+}
+
+function updateTool(
+  state: SessionFoldState,
+  messageID: string,
+  toolID: string,
+  update: (part: SessionMessageAssistantTool) => SessionMessageAssistantTool,
+) {
+  return updateAssistant(state, messageID, (message) => {
+    const index = message.content.findLastIndex((part) => part.type === "tool" && part.id === toolID)
+    if (index < 0) return message
+    return {
+      ...message,
+      content: message.content.map((part, position) =>
+        position === index && part.type === "tool" ? update(part) : part,
+      ),
+    }
+  })
+}
+
+function insertOrdinal<Type extends SessionMessageAssistant["content"][number]["type"]>(
+  content: SessionMessageAssistant["content"],
+  type: Type,
+  ordinal: number,
+  part: Extract<SessionMessageAssistant["content"][number], { readonly type: Type }>,
+) {
+  if (content.filter((item) => item.type === type)[ordinal]) return content
+  return [...content, part]
+}
+
+function addUsage(session: SessionInfo, cost: number, tokens: TokenUsageInfo, updated: number): SessionInfo {
+  return {
+    ...session,
+    cost: session.cost + cost,
+    tokens: {
+      input: session.tokens.input + tokens.input,
+      output: session.tokens.output + tokens.output,
+      reasoning: session.tokens.reasoning + tokens.reasoning,
+      cache: {
+        read: session.tokens.cache.read + tokens.cache.read,
+        write: session.tokens.cache.write + tokens.cache.write,
+      },
+    },
+    time: { ...session.time, updated },
+  }
+}
+
+function withUsage(state: SessionFoldState, cost: number, tokens: TokenUsageInfo, updated: number) {
+  return { ...state, session: addUsage(state.session, cost, tokens, updated) }
+}
+
+export * as SessionFold from "./fold"

packages/client/src/solid/index.ts

@@ -1,2 +1,3 @@
 export * from "./data"
 export * from "./connection"
+export * from "./engine-data"

packages/client/test/engine-data.test.ts

@@ -0,0 +1,145 @@
+// Proves the generated-client wiring the engine laws take for granted: the
+// adapter in src/solid/engine-data.ts must speak the real snapshot/log/prompt
+// API shapes and translate the generated typed errors into the engine's own
+// (the SeqUnavailable path is what laws 7-9 in test/sync-engine-laws.test.ts
+// rely on in production).
+import { describe, expect, test } from "bun:test"
+import { createRoot } from "solid-js"
+import { Engine } from "../src/solid/engine/engine"
+import { SNAPSHOT_RECENT, createEngineData, createEngineTransport } from "../src/solid/engine-data"
+import { FakeSessionServer } from "./fixture/sync-engine"
+
+describe("engine data transport", () => {
+  test("uses snapshot and ephemeral follow log contracts", async () => {
+    const server = new FakeSessionServer("ses_transport")
+    const calls: Array<unknown> = []
+    const transport = createEngineTransport(() => ({
+      async snapshot(input) {
+        calls.push(input)
+        // The generated client returns mutable arrays; the fixture's snapshot
+        // is readonly, so mirror the wire shape here.
+        const value = server.snapshotValue()
+        return { ...value, children: [...value.children], inbox: [...value.inbox], messages: [...value.messages] }
+      },
+      async *log(input) {
+        calls.push(input)
+        yield { type: "log.synced" as const, aggregateID: input.sessionID, seq: 0 }
+      },
+      async prompt() {
+        throw new Error("unused")
+      },
+    }))
+
+    expect(await transport.snapshot(server.sessionID)).toEqual(server.snapshotValue())
+    const items: Array<Engine.SessionStreamItem> = []
+    for await (const item of transport.stream(server.sessionID, 0)) items.push(item)
+
+    expect(items).toEqual([{ type: "log.synced", aggregateID: server.sessionID, seq: 0 }])
+    expect(calls).toEqual([
+      { sessionID: server.sessionID, recent: SNAPSHOT_RECENT },
+      { sessionID: server.sessionID, after: 0, follow: true, ephemeral: true },
+    ])
+  })
+
+  test("preserves the prompt request and client-minted ID", async () => {
+    const requests: Array<unknown> = []
+    const transport = createEngineTransport(() => ({
+      async snapshot() {
+        throw new Error("unused")
+      },
+      async *log() {
+        throw new Error("unused")
+      },
+      async prompt(input) {
+        requests.push(input)
+        return {
+          id: input.id!,
+          sessionID: input.sessionID,
+          timeCreated: 1,
+          type: "user",
+          payload: { text: input.text },
+          delivery: input.delivery ?? "steer",
+        }
+      },
+    }))
+
+    await transport.submit({
+      id: "msg_client",
+      sessionID: "ses_submit",
+      request: {
+        text: "hello",
+        files: [{ uri: "file:///tmp/example.txt", name: "example.txt" }],
+        delivery: "queue",
+      },
+    })
+
+    expect(requests).toEqual([
+      {
+        id: "msg_client",
+        sessionID: "ses_submit",
+        text: "hello",
+        files: [{ uri: "file:///tmp/example.txt", name: "example.txt" }],
+        delivery: "queue",
+      },
+    ])
+  })
+
+  test("a failed initial attach does not poison the session cache", async () => {
+    const server = new FakeSessionServer("ses_attach_retry")
+    server.faults.loseSnapshots = 1
+    const api = {
+      session: {
+        snapshot: (input: { sessionID: string }) => server.snapshot(input.sessionID),
+        log: (input: { sessionID: string; after: number }) => server.stream(input.sessionID, input.after),
+        prompt: () => Promise.reject(new Error("unused")),
+      },
+    }
+    await createRoot(async (dispose) => {
+      const data = createEngineData({
+        api: () => api as never,
+        directory: "/workspace",
+        event: { on: () => () => {}, listen: () => () => {} },
+      })
+
+      // The server is down when the session first opens…
+      await expect(data.session.sync(server.sessionID)).rejects.toThrow("snapshot lost")
+      // …and the next sync attaches with a fresh engine instead of a cached rejection.
+      await data.session.sync(server.sessionID)
+
+      expect(data.session.get(server.sessionID)?.id).toBe(server.sessionID)
+      dispose()
+    })
+  })
+
+  test("translates generated typed failures", async () => {
+    // These literals mirror the generated client's error DTO shapes
+    // (SeqUnavailableError / InvalidRequestError in src/promise/generated);
+    // they must change if the generated error schema does.
+    const transport = createEngineTransport(() => ({
+      async snapshot() {
+        throw new Error("unused")
+      },
+      async *log() {
+        throw { _tag: "SeqUnavailableError", sessionID: "ses_errors", after: 2, head: 1, message: "gone" }
+      },
+      async prompt() {
+        throw { _tag: "InvalidRequestError", message: "invalid" }
+      },
+    }))
+
+    const streamError = await collectError(transport.stream("ses_errors", 2))
+    expect(streamError).toBeInstanceOf(Engine.SeqUnavailable)
+    await expect(
+      transport.submit({ id: "msg_client", sessionID: "ses_errors", request: { text: "invalid" } }),
+    ).rejects.toEqual(new Engine.SubmitRejected("invalid"))
+  })
+})
+
+async function collectError(iterable: AsyncIterable<unknown>) {
+  try {
+    for await (const item of iterable) void item
+  } catch (error) {
+    return error
+  }
+  throw new Error("stream did not fail")
+}

packages/client/test/fixture/sync-engine.ts

@@ -0,0 +1,231 @@
+// In-memory model of the server's session log, used by the engine laws
+// (sync-engine-laws.test.ts), the chaos simulation (sync-engine-sim.test.ts),
+// and the legacy bug catalog (legacy-divergence.test.ts). It folds with the
+// REAL SessionFold, so `truth()` is the same interpretation of events a
+// converged client must reach, and its admission dedupes by inbox ID exactly
+// like the server's inbox projector. Faults are injected per call through the
+// `faults` record; `cutConnections` and `prune` model disconnects and lost
+// retention.
+import type { SessionInfo, SessionMessageInfo } from "../../src/promise"
+import { Engine } from "../../src/solid/engine/engine"
+import type { DurableSessionEvent, SessionFoldState, SessionSnapshot } from "../../src/solid/engine/fold"
+import { SessionFold } from "../../src/solid/engine/fold"
+
+export class FakeSessionServer implements Engine.SessionTransport {
+  readonly events: Array<DurableSessionEvent> = []
+  readonly admitted: Array<string> = []
+  readonly faults = {
+    loseRequests: 0,
+    loseResponses: 0,
+    loseSnapshots: 0,
+    reject: 0,
+    latency: 0,
+  }
+
+  private folded: SessionFoldState
+  private readonly tails = new Set<AsyncQueue<Engine.SessionStreamItem>>()
+  private eventCounter = 0
+
+  constructor(
+    readonly sessionID: string,
+    readonly time = 1_717_171_717_000,
+  ) {
+    this.folded = SessionFold.fromSnapshot(emptySnapshot(sessionID, time))
+  }
+
+  async snapshot(sessionID: string) {
+    await this.pause()
+    this.assertSession(sessionID)
+    if (this.faults.loseSnapshots > 0) {
+      this.faults.loseSnapshots--
+      throw new Error("snapshot lost")
+    }
+    return this.snapshotValue()
+  }
+
+  async *stream(sessionID: string, after: number, signal?: AbortSignal): AsyncIterable<Engine.SessionStreamItem> {
+    await this.pause()
+    this.assertSession(sessionID)
+    if (after > this.folded.seq) throw new Engine.SeqUnavailable()
+    const replay = this.events.filter((event) => event.durable.seq > after)
+    // Honest replay contract: a cursor is only admitted when retained events fully cover (after, seq].
+    if (replay.length < this.folded.seq - after) throw new Engine.SeqUnavailable()
+    const queue = new AsyncQueue<Engine.SessionStreamItem>()
+    const abort = () => queue.fail(new Error("stream aborted"))
+    signal?.addEventListener("abort", abort, { once: true })
+    this.tails.add(queue)
+    try {
+      for (const event of replay) yield event
+      yield { type: "log.synced", aggregateID: sessionID, seq: this.folded.seq }
+      while (true) yield await queue.take()
+    } finally {
+      signal?.removeEventListener("abort", abort)
+      this.tails.delete(queue)
+    }
+  }
+
+  async submit(input: Engine.SubmitInput) {
+    await this.pause()
+    this.assertSession(input.sessionID)
+    const existing = this.events.find(
+      (event) => event.type === "session.inbox.enqueued" && event.data.inboxID === input.id,
+    )
+    if (existing) return
+    if (this.faults.loseRequests > 0) {
+      this.faults.loseRequests--
+      throw new Error("request lost")
+    }
+    if (this.faults.reject > 0) {
+      this.faults.reject--
+      throw new Engine.SubmitRejected("rejected")
+    }
+    this.admitted.push(input.id)
+    this.publish({
+      id: `evt_${String(++this.eventCounter).padStart(8, "0")}`,
+      created: this.time,
+      type: "session.inbox.enqueued",
+      durable: { aggregateID: this.sessionID, seq: this.folded.seq + 1, version: 1 },
+      data: {
+        sessionID: this.sessionID,
+        inboxID: input.id,
+        item: {
+          type: "user",
+          delivery: input.request.delivery ?? "steer",
+          payload: {
+            text: input.request.text,
+            agents: input.request.agents?.map((agent) => ({ ...agent })),
+            metadata: input.request.metadata,
+          },
+        },
+      },
+    })
+    if (this.faults.loseResponses > 0) {
+      this.faults.loseResponses--
+      throw new Error("response lost")
+    }
+  }
+
+  cutConnections() {
+    this.tails.forEach((tail) => tail.fail(new Error("connection cut")))
+  }
+
+  /** Drop retained event history, simulating `events.persist` off or pruned retention. */
+  prune() {
+    this.events.length = 0
+  }
+
+  /** Clear every injected fault. */
+  heal() {
+    for (const fault of Object.keys(this.faults) as Array<keyof FakeSessionServer["faults"]>) this.faults[fault] = 0
+  }
+
+  seq() {
+    return this.folded.seq
+  }
+
+  truth() {
+    return Engine.render({ folded: this.folded, outbox: [], overlay: new Map() })
+  }
+
+  snapshotValue(): SessionSnapshot {
+    return {
+      session: this.folded.session,
+      children: this.folded.children,
+      inbox: this.folded.inbox,
+      messages: this.folded.messages,
+      seq: this.folded.seq,
+      active: this.folded.active,
+    }
+  }
+
+  private publish(event: DurableSessionEvent) {
+    this.events.push(event)
+    this.folded = SessionFold.apply(this.folded, event)
+    this.tails.forEach((tail) => tail.offer(event))
+  }
+
+  private assertSession(sessionID: string) {
+    if (sessionID !== this.sessionID) throw new Error(`unknown session: ${sessionID}`)
+  }
+
+  private async pause() {
+    for (let step = 0; step < this.faults.latency; step++) await Promise.resolve()
+  }
+}
+
+/**
+ * Reconnect option that holds the engine's first reconnect until released,
+ * so a test can advance the server "while disconnected". Later reconnects
+ * pass through instantly.
+ */
+export function reconnectGate() {
+  let open = false
+  let release: (() => void) | undefined
+  return {
+    reconnect: () =>
+      new Promise<void>((resolve) => {
+        if (open) return resolve()
+        release = () => {
+          open = true
+          resolve()
+        }
+      }),
+    holding: () => release !== undefined,
+    release: () => release!(),
+  }
+}
+
+export async function until(check: () => boolean, message = "condition did not become true") {
+  for (let attempt = 0; attempt < 500; attempt++) {
+    if (check()) return
+    await Bun.sleep(1)
+  }
+  throw new Error(message)
+}
+
+export function userMessages(messages: ReadonlyArray<SessionMessageInfo>) {
+  return messages.filter(
+    (message): message is Extract<SessionMessageInfo, { readonly type: "user" }> => message.type === "user",
+  )
+}
+
+function emptySnapshot(sessionID: string, time: number): SessionSnapshot {
+  const session: SessionInfo = {
+    id: sessionID,
+    projectID: "project",
+    cost: 0,
+    tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+    time: { created: time, updated: time },
+    location: { directory: "/workspace" },
+  }
+  return { session, children: [], inbox: [], messages: [], seq: 0 }
+}
+
+class AsyncQueue<Value> {
+  private readonly values: Array<Value> = []
+  private readonly waiting: Array<{
+    readonly resolve: (value: Value) => void
+    readonly reject: (error: Error) => void
+  }> = []
+  private error?: Error
+
+  offer(value: Value) {
+    const waiter = this.waiting.shift()
+    if (waiter) {
+      waiter.resolve(value)
+      return
+    }
+    this.values.push(value)
+  }
+
+  fail(error: Error) {
+    this.error = error
+    this.waiting.splice(0).forEach((waiter) => waiter.reject(error))
+  }
+
+  take() {
+    if (this.values.length) return Promise.resolve(this.values.shift()!)
+    if (this.error) return Promise.reject(this.error)
+    return new Promise<Value>((resolve, reject) => this.waiting.push({ resolve, reject }))
+  }
+}

packages/client/test/legacy-divergence.test.ts

@@ -0,0 +1,258 @@
+// Divergence catalog: weird states the legacy data layer (createData) can get
+// into that the sync engine cannot. Each test drives the REAL legacy layer —
+// or, for the retry test, its raw ID-less prompt protocol — and PASSES by
+// demonstrating the bug, with a pointer to the engine law or mechanism that
+// rules the same state out. If a test here starts failing, the legacy layer
+// got fixed — celebrate and delete the test.
+//
+// Companion clean-behavior proofs: test/sync-engine-laws.test.ts.
+
+import { describe, expect, test } from "bun:test"
+import { createRoot } from "solid-js"
+import { createData } from "../src/solid/data"
+import type { CreateDataInput } from "../src/solid/data"
+import type { OpenCodeEvent, SessionMessageInfo } from "../src/promise"
+import { FakeSessionServer } from "./fixture/sync-engine"
+
+const sessionID = "ses_legacy"
+const assistantID = "msg_assistant"
+
+describe("legacy data layer divergence catalog", () => {
+  test("a dropped durable event desyncs the transcript silently and forever", async () => {
+    // Server truth: the assistant message finished with text "FINAL".
+    // The client misses only the `session.text.ended` event (blip mid-stream).
+    const legacy = await hydrated()
+    legacy.dispatch(textStarted())
+    for (let index = 0; index < 5; index++) legacy.dispatch(textDelta("x"))
+    // ...the `ended` event with the durable final text never arrives.
+
+    // The transcript is stuck on accumulated deltas, disagreeing with the
+    // server, and nothing in the layer can ever notice: there is no sequence
+    // cursor, no gap check, no recovery path. Only a manual refetch heals it.
+    expect(legacy.text()).toBe("xxxxx")
+    legacy.dispose()
+    // Engine: durable events carry seqs; a gap surfaces as SeqUnavailable or a
+    // marker past the fold, forcing snapshot recovery (laws 7 and 8).
+  })
+
+  test("a late delta corrupts a completed message", async () => {
+    // Events delivered slightly out of order: the final text lands, then a
+    // straggling delta from the finished stream arrives.
+    const legacy = await hydrated()
+    legacy.dispatch(textStarted())
+    legacy.dispatch(textDelta("Hel"))
+    legacy.dispatch(textEnded("Hello"))
+    legacy.dispatch(textDelta("lo"))
+
+    // The handler appends onto whatever text part it finds — including a
+    // completed one. The final message is permanently corrupted.
+    expect(legacy.text()).toBe("Hellolo")
+    legacy.dispose()
+    // Engine: deltas are ephemeral overlay entries cleared by the durable
+    // lifecycle events, and the ordered log cannot deliver a delta after its
+    // own `ended` — there is no durable state for a straggler to corrupt.
+  })
+
+  test("a slow fetch rewinds the store past already-rendered live events", async () => {
+    // The initial message fetch is in flight when a live prompt admission
+    // arrives. The user's message renders... then the stale fetch resolves.
+    let resolveFetch: ((messages: SessionMessageInfo[]) => void) | undefined
+    const legacy = makeLegacy({
+      list: () => new Promise<SessionMessageInfo[]>((resolve) => (resolveFetch = resolve)),
+    })
+    const syncing = legacy.data.session.message.sync(sessionID)
+    legacy.dispatch(inboxEnqueued("msg_user"))
+    expect(legacy.data.session.message.get(sessionID, "msg_user")).toBeDefined()
+
+    resolveFetch!([]) // the fetch was served before the admission — stale
+    await syncing
+
+    // The message the user just watched appear is gone. It returns only if
+    // some later event or refetch happens to bring it back.
+    expect(legacy.data.session.message.get(sessionID, "msg_user")).toBeUndefined()
+    legacy.dispose()
+    // Engine: hydration is a seq-stamped snapshot, and a stale refresh cannot
+    // move the fold behind the live log (law 10, refresh monotonicity).
+  })
+
+  test("delivered-before-enqueued leaves a phantom pending row forever", async () => {
+    // Reordered delivery: the `delivered` event arrives before its `enqueued`.
+    const legacy = await hydrated()
+    legacy.dispatch(inboxDelivered("msg_user")) // no-op: nothing to deliver yet
+    legacy.dispatch(inboxEnqueued("msg_user")) // adds the pending row
+
+    // The delivered event was already consumed, so the row the server has
+    // long since promoted sits in "pending" until a manual refetch.
+    expect(legacy.data.session.pending.list(sessionID).map((item) => item.id)).toEqual(["msg_user"])
+    legacy.dispose()
+    // Engine: the transport is a single ordered log, so this ordering cannot
+    // be observed live; a reconnect replays from the seq cursor, and any gap
+    // fails the cursor check and recovers via snapshot (laws 7 and 8).
+  })
+
+  test("a retry after a lost response admits the prompt twice", async () => {
+    // Both protocols drive the same server admission logic (FakeSessionServer
+    // dedupes by inbox ID exactly like the real projector). The only
+    // difference is who mints the ID.
+
+    // Legacy protocol: the request carries no ID, so the server mints a fresh
+    // one per attempt and cannot recognize a retry. The response to the first
+    // send is lost, the user presses enter again — the transcript now has the
+    // prompt twice.
+    const legacyServer = new FakeSessionServer(sessionID)
+    legacyServer.faults.loseResponses = 1
+    let minted = 0
+    const legacySend = (text: string) =>
+      legacyServer.submit({ id: `msg_minted_${++minted}`, sessionID, request: { text } })
+    await legacySend("hello").catch(() => {})
+    await legacySend("hello")
+    expect(legacyServer.admitted).toHaveLength(2)
+
+    // Engine protocol: the retry reuses the client-minted ID and the same
+    // server admits exactly once. (Law 1 proves this end-to-end through the
+    // real engine retry loop; this is the raw protocol contrast.)
+    const engineServer = new FakeSessionServer(sessionID)
+    engineServer.faults.loseResponses = 1
+    const engineSend = () => engineServer.submit({ id: "msg_client", sessionID, request: { text: "hello" } })
+    await engineSend().catch(() => {})
+    await engineSend()
+    expect(engineServer.admitted).toEqual(["msg_client"])
+  })
+
+  test("a dropped execution event leaves an interrupted session spinning forever", async () => {
+    // The user hits interrupt; the server stops the run; the terminal
+    // `session.execution.interrupted` event is lost in a reconnect blip.
+    const legacy = await hydrated()
+    legacy.dispatch(executionStarted())
+
+    // Status only ever changes on the terminal event (lost) or a full
+    // reconnect's active-session refetch — until one of those happens the
+    // spinner spins over a session the server already stopped.
+    expect(legacy.data.session.status(sessionID)).toBe("running")
+    legacy.dispose()
+    // Engine: activity is folded durable state behind the seq cursor, so the
+    // gap itself is detected and snapshot recovery resyncs activity with the
+    // server (laws 7 and 8 pin the mechanism).
+  })
+})
+
+// Also part of the catalog, straight from the legacy source: the layer
+// documents its own event-vs-fetch race — see the session.created "band-aid"
+// comment in src/solid/data.ts (skipping racy initial reads so live events
+// are not overwritten by stale fetches).
+
+function makeLegacy(overrides: { list?: () => Promise<SessionMessageInfo[]> } = {}) {
+  let handler: ((event: { name: OpenCodeEvent["type"]; details: OpenCodeEvent }) => void) | undefined
+  const api = {
+    session: {
+      get: async () => ({
+        id: sessionID,
+        projectID: "project",
+        cost: 0,
+        tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+        time: { created: 1, updated: 2 },
+        location: { directory: "/workspace" },
+      }),
+    },
+    message: {
+      list: async () => ({
+        data: overrides.list ? await overrides.list() : transcript().toReversed(),
+        cursor: {},
+      }),
+    },
+  } as unknown as ReturnType<CreateDataInput["api"]>
+  return createRoot((dispose) => {
+    const data = createData({
+      api: () => api,
+      directory: "/workspace",
+      event: {
+        on: () => () => {},
+        listen(next) {
+          handler = next
+          return () => {}
+        },
+      },
+    })
+    return {
+      data,
+      dispose,
+      dispatch(event: { type: OpenCodeEvent["type"] } & Record<string, unknown>) {
+        handler?.({ name: event.type, details: event as unknown as OpenCodeEvent })
+      },
+      text() {
+        const message = data.session.message.get(sessionID, assistantID)
+        const part =
+          message?.type === "assistant" ? message.content.findLast((item) => item.type === "text") : undefined
+        return part?.type === "text" ? part.text : undefined
+      },
+    }
+  })
+}
+
+async function hydrated() {
+  const legacy = makeLegacy()
+  await legacy.data.session.sync(sessionID)
+  await legacy.data.session.message.sync(sessionID)
+  return legacy
+}
+
+function transcript(): SessionMessageInfo[] {
+  return [
+    { id: "msg_earlier", type: "user", text: "earlier", time: { created: 1 } },
+    {
+      id: assistantID,
+      type: "assistant",
+      time: { created: 2 },
+      agent: "build",
+      model: { id: "model", providerID: "provider" },
+      content: [],
+    },
+  ]
+}
+
+const textStarted = () => ({
+  id: "evt_start",
+  created: 3,
+  type: "session.text.started" as const,
+  data: { sessionID, assistantMessageID: assistantID, ordinal: 0 },
+})
+
+let deltaCount = 0
+const textDelta = (delta: string) => ({
+  id: `evt_delta_${++deltaCount}`,
+  created: 4,
+  type: "session.text.delta" as const,
+  data: { sessionID, assistantMessageID: assistantID, ordinal: 0, delta },
+})
+
+const textEnded = (text: string) => ({
+  id: "evt_end",
+  created: 5,
+  type: "session.text.ended" as const,
+  data: { sessionID, assistantMessageID: assistantID, ordinal: 0, text },
+})
+
+const inboxEnqueued = (inboxID: string) => ({
+  id: "evt_enqueued",
+  created: 6,
+  type: "session.inbox.enqueued" as const,
+  data: {
+    sessionID,
+    inboxID,
+    item: { type: "user", delivery: "steer", payload: { text: "hello" } },
+  },
+})
+
+const inboxDelivered = (inboxID: string) => ({
+  id: "evt_delivered",
+  created: 7,
+  type: "session.inbox.delivered" as const,
+  data: { sessionID, inboxID },
+})
+
+const executionStarted = () => ({
+  id: "evt_execution",
+  created: 8,
+  type: "session.execution.started" as const,
+  data: { sessionID },
+})

packages/client/test/sync-engine-laws.test.ts

@@ -0,0 +1,201 @@
+// Laws of the session sync engine: each test pins one property the engine
+// must hold under transport faults. Cited by number from
+// test/legacy-divergence.test.ts (the legacy bug catalog these laws rule out)
+// and stress-tested together by test/sync-engine-sim.test.ts. The server
+// model lives in test/fixture/sync-engine.ts and folds with the real
+// SessionFold, so `server.truth()` is the state a converged client must show.
+import { describe, expect, test } from "bun:test"
+import { readFileSync } from "node:fs"
+import { Engine } from "../src/solid/engine/engine"
+import { FakeSessionServer, reconnectGate, until, userMessages } from "./fixture/sync-engine"
+
+describe("session sync engine laws", () => {
+  test("1. idempotency: lost responses converge to one admitted message", async () => {
+    const server = new FakeSessionServer("ses_idempotency")
+    server.faults.loseResponses = 1
+    const engine = await Engine.createSessionEngine(server.sessionID, server, {
+      now: () => server.time,
+      reconnect: async () => {},
+    })
+
+    engine.submit({ id: "msg_1", text: "hello" })
+    await until(() => engine.view().seq === 1)
+    // The admit landed but the response was lost; the reconnect makes the
+    // engine resend the same client-minted ID — that resend is what
+    // idempotency must absorb.
+    server.cutConnections()
+    await engine.settled()
+
+    expect(server.admitted).toEqual(["msg_1"])
+    expect(userMessages(engine.view().messages)).toHaveLength(1)
+    engine.stop()
+  })
+
+  test("2. echo determinism: folding the echo does not change rendered messages", async () => {
+    const server = new FakeSessionServer("ses_echo")
+    const engine = await Engine.createSessionEngine(server.sessionID, server, { now: () => server.time })
+    await engine.ready()
+
+    // The "echo" is the server's inbox.enqueued event for our own submit:
+    // folding it over the optimistic render must be invisible — no flicker.
+    engine.submit({ id: "msg_1", text: "instant" })
+    const before = engine.view().messages
+    await engine.settled()
+
+    expect(engine.view().messages).toEqual(before)
+    engine.stop()
+  })
+
+  test("3. sync opacity: the fold cannot see intents or the engine", () => {
+    const source = readFileSync(new URL("../src/solid/engine/fold.ts", import.meta.url), "utf8")
+    const code = source.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "")
+
+    expect(code).not.toMatch(/\boutbox\b/)
+    expect(code).not.toContain("./engine")
+    expect(code).not.toMatch(/\bintents?\b/i)
+  })
+
+  test("4. ordering: a burst admits in submission order", async () => {
+    const server = new FakeSessionServer("ses_ordering")
+    const engine = await Engine.createSessionEngine(server.sessionID, server)
+
+    for (const value of [1, 2, 3, 4, 5]) engine.submit({ id: `msg_${value}`, text: `m${value}` })
+    await engine.settled()
+
+    expect(server.admitted).toEqual(["msg_1", "msg_2", "msg_3", "msg_4", "msg_5"])
+    engine.stop()
+  })
+
+  test("5. convergence: drained clients equal the server fold", async () => {
+    const server = new FakeSessionServer("ses_convergence")
+    const a = await Engine.createSessionEngine(server.sessionID, server, { makeID: () => "msg_a" })
+    const b = await Engine.createSessionEngine(server.sessionID, server, { makeID: () => "msg_b" })
+
+    a.submit({ text: "from a" })
+    b.submit({ text: "from b" })
+    await Promise.all([a.settled(), b.settled()])
+    await until(() => a.view().seq === server.seq() && b.view().seq === server.seq())
+
+    expect(a.view()).toEqual(server.truth())
+    expect(b.view()).toEqual(server.truth())
+    a.stop()
+    b.stop()
+  })
+
+  test("6. failure atomicity: typed rejection removes and surfaces the intent", async () => {
+    const server = new FakeSessionServer("ses_failure")
+    server.faults.reject = 1
+    const engine = await Engine.createSessionEngine(server.sessionID, server)
+    const failures: Array<Engine.IntentFailure> = []
+    engine.subscribeFailures((failure) => failures.push(failure))
+    const before = engine.view()
+
+    const intent = engine.submit({ id: "msg_1", text: "doomed" })
+    expect(userMessages(engine.view().messages)).toHaveLength(1)
+    await until(() => failures.length === 1)
+
+    expect(engine.view()).toEqual(before)
+    expect(failures).toEqual([{ intent, reason: "rejected" }])
+    engine.stop()
+  })
+
+  test("7. lossy history: reconnect without retained events recovers via snapshot", async () => {
+    const server = new FakeSessionServer("ses_lossy")
+    const gate = reconnectGate()
+    const engine = await Engine.createSessionEngine(server.sessionID, server, {
+      now: () => server.time,
+      reconnect: gate.reconnect,
+    })
+    engine.submit({ id: "msg_1", text: "first" })
+    await engine.settled()
+
+    server.cutConnections()
+    await until(gate.holding)
+    // While disconnected the session advances, then history is dropped: the
+    // reconnect cursor cannot be replayed and must recover via snapshot.
+    await server.submit({ id: "msg_2", sessionID: server.sessionID, request: { text: "second" } })
+    server.prune()
+    gate.release()
+
+    await until(() => engine.view().seq === 2)
+    expect(engine.view()).toEqual(server.truth())
+    engine.stop()
+  })
+
+  test("8. attach gaps: a synced marker past the fold forces snapshot recovery", async () => {
+    const server = new FakeSessionServer("ses_marker_gap")
+    await server.submit({ id: "msg_1", sessionID: server.sessionID, request: { text: "hello" } })
+    const stale = { ...server.snapshotValue(), messages: [], inbox: [], seq: 0 }
+    let attempts = 0
+    const engine = await Engine.createSessionEngine(
+      server.sessionID,
+      {
+        snapshot: (sessionID) => (attempts === 0 ? Promise.resolve(stale) : server.snapshot(sessionID)),
+        async *stream(sessionID, after, signal) {
+          attempts++
+          if (attempts === 1) {
+            // Dishonest attach: the marker admits the cursor but skips the replay range.
+            yield { type: "log.synced" as const, aggregateID: sessionID, seq: server.snapshotValue().seq }
+            return
+          }
+          yield* server.stream(sessionID, after, signal)
+        },
+        submit: (input) => server.submit(input),
+      },
+      { reconnect: async () => {} },
+    )
+    await engine.ready()
+
+    expect(attempts).toBe(2)
+    expect(engine.view()).toEqual(server.truth())
+    engine.stop()
+  })
+
+  test("9. outage recovery: failed recovery snapshots retry until the server returns", async () => {
+    const server = new FakeSessionServer("ses_outage")
+    const gate = reconnectGate()
+    const engine = await Engine.createSessionEngine(server.sessionID, server, {
+      now: () => server.time,
+      reconnect: gate.reconnect,
+    })
+    engine.submit({ id: "msg_1", text: "first" })
+    await engine.settled()
+
+    server.cutConnections()
+    await until(gate.holding)
+    // A server restart while disconnected: history is gone, and the server
+    // stays unreachable for the first snapshot attempts of the recovery.
+    await server.submit({ id: "msg_2", sessionID: server.sessionID, request: { text: "second" } })
+    server.prune()
+    server.faults.loseSnapshots = 3
+    gate.release()
+
+    await until(() => engine.view().seq === 2)
+    expect(server.faults.loseSnapshots).toBe(0)
+    expect(engine.view()).toEqual(server.truth())
+    engine.stop()
+  })
+
+  test("10. refresh monotonicity: a stale snapshot refresh cannot move the fold behind the live log", async () => {
+    const server = new FakeSessionServer("ses_refresh_race")
+    const stale = server.snapshotValue()
+    let refresh = false
+    const transport: Engine.SessionTransport = {
+      snapshot: (sessionID) => (refresh ? Promise.resolve(stale) : server.snapshot(sessionID)),
+      stream: (sessionID, after) => server.stream(sessionID, after),
+      submit: (input) => server.submit(input),
+    }
+    const engine = await Engine.createSessionEngine(server.sessionID, transport)
+    await engine.ready()
+
+    engine.submit({ id: "msg_1", text: "newer than snapshot" })
+    await until(() => engine.view().seq === 1)
+    refresh = true
+    await engine.refresh()
+
+    expect(engine.view().seq).toBe(1)
+    // ...and the un-echoed intent survives the rejected refresh.
+    expect(engine.view().pending.map((item) => item.id)).toEqual(["msg_1"])
+    engine.stop()
+  })
+})