fix(app): move compaction status below summary (#48262)

Co-authored-by: Hona <10430890+Hona@users.noreply.github.com>

packages/ai/src/protocols/open-responses-continuation.ts

@@ -153,6 +153,15 @@ export const driver = (input: DriverInput): WebSocketChannelDriver => {
           const rejection = code(event)
           if (rejection === "previous_response_not_found") return rejected(observation, "retry-full")
           if (rejection === "websocket_connection_limit_reached") return rejected(observation, "rotate-and-retry-full")
+          // Only the continuation distinguishes an incremental send from a full one, so an unclassified
+          // invalid request there is retried full; Codex reports a stale previous_response_id that way, with
+          // no code. Classified failures such as context overflow keep their runner-owned recovery.
+          if (
+            create.mode === "incremental" &&
+            observation.error.reason._tag === "InvalidRequest" &&
+            observation.error.reason.classification === undefined
+          )
+            return rejected(observation, "retry-full")
         }
         if (observation.type !== "completed") return observation
         // A trigger installs a different context window. Clear the append baseline, retaining the socket.
@@ -172,7 +181,7 @@ export const driver = (input: DriverInput): WebSocketChannelDriver => {
               responseID,
               request,
               // Completion can re-encrypt reasoning. Callers replay the item already emitted by output_item.done.
-              output: event.response?.output
+              output: event.response?.output?.length
                 ? event.response.output.map((item) =>
                     item.type === "reasoning" && item.id !== undefined
                       ? (output.find((done) => done.type === item.type && done.id === item.id) ?? item)

packages/ai/src/protocols/open-responses.ts

@@ -655,7 +655,8 @@ const lowerMessages = Effect.fn("OpenResponses.lowerMessages")(function* (
             type: "message" as const,
             ...(group.id === undefined ? {} : { id: group.id }),
             role: "assistant" as const,
-            status: metadata?.status,
+            // Replayed text is a finished input item, even if generation was cut short.
+            status: "completed",
             content: group.parts.map((part) => ({ type: "output_text" as const, text: part.text })),
             ...(group.phase === undefined ? {} : { phase: group.phase }),
           })),

packages/ai/src/providers/amazon-bedrock-mantle.ts

@@ -1,7 +1,8 @@
 import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
 import type { ProviderPackage } from "../provider-package.js"
 import { OpenAIChat } from "../protocols/openai-chat.js"
-import { OpenAIResponses } from "../protocols/openai-responses.js"
+import { OpenResponses } from "../protocols/open-responses.js"
 import { BedrockAuth, type Credentials } from "../protocols/utils/bedrock-auth.js"
 import { ProviderID, type ModelID } from "../schema/index.js"
 import { withOpenAIOptions, type OpenAIProviderOptionsInput } from "./openai-options.js"
@@ -37,11 +38,10 @@ const responsesRoute = Route.make({
   id: "bedrock-mantle-responses",
   provider: id,
   providerMetadataKey: "mantle",
-  protocol: OpenAIResponses.protocol,
-  endpoint: OpenAIResponses.route.endpoint,
-  auth: OpenAIResponses.route.auth,
-  transport: OpenAIResponses.httpTransport,
-  defaults: OpenAIResponses.route.defaults,
+  protocol: OpenResponses.protocol,
+  endpoint: Endpoint.path(OpenResponses.PATH),
+  transport: OpenResponses.httpTransport,
+  defaults: { providerOptions: { store: false, include: ["reasoning.encrypted_content"] } },
 })
 
 const chatRoute = OpenAIChat.route.with({

packages/ai/src/route/transport/websocket.ts

@@ -115,8 +115,11 @@ const waitOpen = (ws: globalThis.WebSocket, input: WebSocketRequest) => {
     }
     const onAbort = () => {
       cleanup()
-      if (ws.readyState !== globalThis.WebSocket.CLOSED && ws.readyState !== globalThis.WebSocket.CLOSING)
-        ws.close(1000)
+      if (ws.readyState === globalThis.WebSocket.CLOSED || ws.readyState === globalThis.WebSocket.CLOSING) return
+      // Node's ws reports an aborted handshake as an error event on the next tick; with no listener left
+      // after cleanup, EventEmitter would throw it as an uncaught exception.
+      ws.addEventListener("error", () => {}, { once: true })
+      ws.close(1000)
     }
     const onOpen = () => {
       cleanup()

packages/ai/test/fixtures/recordings/openai-responses-websocket/reconstructs-full-context-after-reconnect.json

@@ -81,7 +81,7 @@
         {
           "direction": "client",
           "kind": "text",
-          "body": "{\"type\":\"response.create\",\"model\":\"gpt-5.5\",\"input\":[{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Alpha.\"}]},{\"type\":\"message\",\"id\":\"msg_ws_reconnect_1\",\"role\":\"assistant\",\"content\":[{\"type\":\"output_text\",\"text\":\"Alpha.\"}]},{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Beta.\"}]}],\"store\":false,\"max_output_tokens\":30,\"include\":[\"reasoning.encrypted_content\"],\"reasoning\":{\"effort\":\"medium\",\"summary\":\"auto\"},\"text\":{\"verbosity\":\"low\"},\"instructions\":\"Follow the user's exact reply instruction.\"}"
+          "body": "{\"type\":\"response.create\",\"model\":\"gpt-5.5\",\"input\":[{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Alpha.\"}]},{\"type\":\"message\",\"id\":\"msg_ws_reconnect_1\",\"role\":\"assistant\",\"status\":\"completed\",\"content\":[{\"type\":\"output_text\",\"text\":\"Alpha.\"}]},{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Beta.\"}]}],\"store\":false,\"max_output_tokens\":30,\"include\":[\"reasoning.encrypted_content\"],\"reasoning\":{\"effort\":\"medium\",\"summary\":\"auto\"},\"text\":{\"verbosity\":\"low\"},\"instructions\":\"Follow the user's exact reply instruction.\"}"
         },
         {
           "direction": "server",

packages/ai/test/fixtures/recordings/openai-responses-websocket/recovers-from-explicit-continuation-rejection.json

@@ -91,7 +91,7 @@
         {
           "direction": "client",
           "kind": "text",
-          "body": "{\"type\":\"response.create\",\"model\":\"gpt-5.5\",\"input\":[{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Ready.\"}]},{\"type\":\"message\",\"id\":\"msg_ws_rejection_1\",\"role\":\"assistant\",\"content\":[{\"type\":\"output_text\",\"text\":\"Ready.\"}]},{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Recovered.\"}]}],\"store\":false,\"max_output_tokens\":30,\"include\":[\"reasoning.encrypted_content\"],\"reasoning\":{\"effort\":\"medium\",\"summary\":\"auto\"},\"text\":{\"verbosity\":\"low\"},\"instructions\":\"Follow the user's exact reply instruction.\"}"
+          "body": "{\"type\":\"response.create\",\"model\":\"gpt-5.5\",\"input\":[{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Ready.\"}]},{\"type\":\"message\",\"id\":\"msg_ws_rejection_1\",\"role\":\"assistant\",\"status\":\"completed\",\"content\":[{\"type\":\"output_text\",\"text\":\"Ready.\"}]},{\"role\":\"user\",\"content\":[{\"type\":\"input_text\",\"text\":\"Reply exactly: Recovered.\"}]}],\"store\":false,\"max_output_tokens\":30,\"include\":[\"reasoning.encrypted_content\"],\"reasoning\":{\"effort\":\"medium\",\"summary\":\"auto\"},\"text\":{\"verbosity\":\"low\"},\"instructions\":\"Follow the user's exact reply instruction.\"}"
         },
         {
           "direction": "server",

packages/ai/test/provider/bedrock-mantle.test.ts

@@ -4,7 +4,7 @@ import { HttpClientRequest } from "effect/unstable/http"
 import { LLM, Message } from "../../src/index.js"
 import { AmazonBedrockMantle } from "../../src/providers.js"
 import { model } from "../../src/providers/amazon-bedrock/mantle.js"
-import { OpenAIResponses } from "../../src/protocols/openai-responses.js"
+import { OpenResponses } from "../../src/protocols/open-responses.js"
 import { compileRequest, LLMClient } from "../../src/route/client.js"
 import { it } from "../lib/effect.js"
 import { withProcessEnv } from "../lib/env.js"
@@ -25,7 +25,7 @@ describe("Amazon Bedrock Mantle provider", () => {
       expect(provider.model).toBe(provider.responses)
       expect(AmazonBedrockMantle.model).toBe(AmazonBedrockMantle.responsesModel)
       expect(model).toBe(AmazonBedrockMantle.responsesModel)
-      expect(provider.model("openai.gpt-oss-120b").route.transport).toBe(OpenAIResponses.httpTransport)
+      expect(provider.model("openai.gpt-oss-120b").route.transport).toBe(OpenResponses.httpTransport)
       const chat = yield* compileRequest(LLM.request({ model: provider.chat("openai.gpt-oss-120b"), prompt: "Hi" }))
       const responses = yield* compileRequest(
         LLM.request({ model: provider.model("openai.gpt-oss-120b"), prompt: "Hi" }),
@@ -38,7 +38,7 @@ describe("Amazon Bedrock Mantle provider", () => {
       })
       expect(responses).toMatchObject({
         route: "bedrock-mantle-responses",
-        protocol: "openai-responses",
+        protocol: "open-responses",
         body: { model: "openai.gpt-oss-120b", store: false },
       })
       expect(provider.model("openai.gpt-oss-120b").route.providerMetadataKey).toBe("mantle")
@@ -178,7 +178,7 @@ describe("Amazon Bedrock Mantle provider", () => {
 const recorded = recordedTests({
   prefix: "bedrock-mantle",
   provider: "amazon-bedrock",
-  protocol: "openai-responses",
+  protocol: "open-responses",
   requires: ["AWS_BEARER_TOKEN_BEDROCK"],
   metadata: { model: "openai.gpt-oss-120b" },
 })

packages/ai/test/provider/conversation-lowering.test.ts

@@ -23,7 +23,7 @@ it.effect("conversation lowering excludes generation settings and tool definitio
       instructions: "Keep the context",
       input: [
         { role: "user", content: [{ type: "input_text", text: "hello" }] },
-        { type: "message", role: "assistant", content: [{ type: "output_text", text: "hi" }] },
+        { type: "message", role: "assistant", status: "completed", content: [{ type: "output_text", text: "hi" }] },
       ],
     })
   }),

packages/ai/test/provider/open-responses-replay.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect } from "bun:test"
+import { Effect } from "effect"
+import { LLM, LLMEvent, Message } from "../../src/index.js"
+import { OpenAI } from "../../src/providers.js"
+import { configure } from "../../src/providers/openai-compatible-responses.js"
+import { compileRequest, LLMClient } from "../../src/route/client.js"
+import { it } from "../lib/effect.js"
+import { fixedResponse } from "../lib/http.js"
+import { sseEvents } from "../lib/sse.js"
+
+for (const model of [
+  OpenAI.configure({ apiKey: "test-key" }).responses("example-model"),
+  configure({ apiKey: "test-key", baseURL: "https://responses.example.test/v1" }).model("example-model"),
+]) {
+  describe(`${model.route.protocol} message replay`, () => {
+    const key = model.route.providerMetadataKey ?? "openresponses"
+
+    it.effect("marks assistant text completed regardless of stored status", () =>
+      Effect.gen(function* () {
+        const prepared = yield* compileRequest(
+          LLM.request({
+            model,
+            messages: [
+              ...[undefined, "in_progress", "incomplete", "completed"].map((status, index) =>
+                Message.make({
+                  role: "assistant",
+                  providerMetadata: { [key]: { status } },
+                  content: [
+                    {
+                      type: "text",
+                      text: `Saved ${index}`,
+                      providerMetadata: { [key]: { itemId: `msg_${index}`, phase: "commentary", status } },
+                    },
+                    {
+                      type: "text",
+                      text: `Final ${index}`,
+                      providerMetadata: { [key]: { itemId: `msg_final_${index}`, phase: "final_answer", status } },
+                    },
+                  ],
+                }),
+              ),
+              Message.make({
+                role: "user",
+                content: [{ type: "text", text: "Continue" }],
+                providerMetadata: { [key]: { status: "incomplete" } },
+              }),
+            ],
+          }),
+        )
+        expect(prepared.body.input).toEqual([
+          ...[0, 1, 2, 3].flatMap((index) => [
+            {
+              type: "message",
+              role: "assistant",
+              id: `msg_${index}`,
+              phase: "commentary",
+              status: "completed",
+              content: [{ type: "output_text", text: `Saved ${index}` }],
+            },
+            {
+              type: "message",
+              role: "assistant",
+              id: `msg_final_${index}`,
+              phase: "final_answer",
+              status: "completed",
+              content: [{ type: "output_text", text: `Final ${index}` }],
+            },
+          ]),
+          { role: "user", status: "incomplete", content: [{ type: "input_text", text: "Continue" }] },
+        ])
+      }),
+    )
+
+    it.effect("replays truncated text as completed while retaining the response finish reason", () =>
+      Effect.gen(function* () {
+        const response = yield* LLMClient.generate(LLM.request({ model, prompt: "Respond" })).pipe(
+          Effect.provide(
+            fixedResponse(
+              sseEvents(
+                {
+                  type: "response.output_item.added",
+                  item: { type: "message", id: "msg_partial", status: "in_progress" },
+                },
+                { type: "response.output_text.delta", item_id: "msg_partial", delta: "The next step is" },
+                {
+                  type: "response.output_item.done",
+                  item: {
+                    type: "message",
+                    id: "msg_partial",
+                    status: "incomplete",
+                    content: [{ type: "output_text", text: "The next step is" }],
+                  },
+                },
+                {
+                  type: "response.incomplete",
+                  response: { status: "incomplete", incomplete_details: { reason: "max_output_tokens" } },
+                },
+              ),
+            ),
+          ),
+        )
+        expect(response.finishReason.normalized).toBe("length")
+        expect(response.events.filter(LLMEvent.is.textEnd)).toHaveLength(1)
+        const prepared = yield* compileRequest(
+          LLM.request({ model, messages: [response.message, Message.user("Continue")] }),
+        )
+        expect(prepared.body.input).toEqual([
+          {
+            type: "message",
+            role: "assistant",
+            id: "msg_partial",
+            status: "completed",
+            content: [{ type: "output_text", text: "The next step is" }],
+          },
+          { role: "user", content: [{ type: "input_text", text: "Continue" }] },
+        ])
+      }),
+    )
+  })
+}

packages/ai/test/provider/openai-compatible-responses.test.ts

@@ -91,7 +91,7 @@ describe("Open Responses-compatible route", () => {
       expect(prepared.body.input).toEqual([
         { role: "user", content: [{ type: "input_text", text: "Before." }] },
         { role: "developer", content: "Operator update." },
-        { type: "message", role: "assistant", content: [{ type: "output_text", text: "After." }] },
+        { type: "message", role: "assistant", status: "completed", content: [{ type: "output_text", text: "After." }] },
       ])
     }),
   )
@@ -299,23 +299,27 @@ describe("Open Responses-compatible route", () => {
           type: "message",
           id: "history_1",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "Kept." }],
         },
         {
           type: "message",
           id: `history_${"a".repeat(64)}`,
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "Long." }],
         },
         {
           type: "message",
           id: "provider_value/with+symbols",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "Opaque." }],
         },
         {
           type: "message",
           role: "assistant",
+          status: "completed",
           content: [
             { type: "output_text", text: "No suffix." },
             { type: "output_text", text: "No prefix." },
@@ -856,6 +860,7 @@ describe("Open Responses-compatible route", () => {
           type: "message",
           id: "msg_refusal",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "I can't help with that." }],
         },
       ])

packages/ai/test/provider/openai-responses-websocket.recorded.test.ts

@@ -171,7 +171,7 @@ describe("OpenAI Responses WebSocket recorded", () => {
         instructions: "Follow the user's exact reply instruction.",
         input: [
           { role: "user", content: [{ type: "input_text", text: "Reply exactly: Alpha." }] },
-          { role: "assistant", content: [{ type: "output_text", text: "Alpha." }] },
+          { role: "assistant", status: "completed", content: [{ type: "output_text", text: "Alpha." }] },
           { role: "user", content: [{ type: "input_text", text: "Reply exactly: Beta." }] },
         ],
       })
@@ -208,7 +208,7 @@ describe("OpenAI Responses WebSocket recorded", () => {
         instructions: "Follow the user's exact reply instruction.",
         input: [
           { role: "user", content: [{ type: "input_text", text: "Reply exactly: Ready." }] },
-          { role: "assistant", content: [{ type: "output_text", text: "Ready." }] },
+          { role: "assistant", status: "completed", content: [{ type: "output_text", text: "Ready." }] },
           { role: "user", content: [{ type: "input_text", text: "Reply exactly: Recovered." }] },
         ],
       })

packages/ai/test/provider/openai-responses.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect } from "bun:test"
-import { ConfigProvider, Effect, Layer, Ref, Stream } from "effect"
+import { ConfigProvider, Effect, Layer, Ref, Schema, Stream } from "effect"
 import { Headers, HttpClientRequest } from "effect/unstable/http"
 import {
   LLM,
@@ -30,6 +30,7 @@ import * as Azure from "../../src/providers/azure.js"
 import * as OpenAI from "../../src/providers/openai.js"
 import * as XAI from "../../src/providers/xai.js"
 import * as OpenAIResponses from "../../src/protocols/openai-responses.js"
+import { OpenResponses } from "../../src/protocols/open-responses.js"
 import { OpenResponsesContinuation } from "../../src/protocols/open-responses-continuation.js"
 import * as ProviderShared from "../../src/protocols/shared.js"
 import { continuationRequest, nativeOpenAIResponsesContinuation } from "../continuation-scenarios.js"
@@ -69,14 +70,34 @@ const baseChannelDriver = (message: string): WebSocketChannelDriver => ({
   },
 })
 
-const continuationDriver = (request: Readonly<Record<string, unknown>>) => {
+/** Classifies error frames the way the production channel does, so recovery can read the canonical reason. */
+const classifyingChannelDriver = (message: string): WebSocketChannelDriver => {
+  const base = baseChannelDriver(message)
+  const decodeEvent = Schema.decodeUnknownSync(OpenResponses.protocol.stream.event)
+  return {
+    ...base,
+    observe: (create, frame) =>
+      base.observe(create, frame).pipe(
+        Effect.map((observation) =>
+          observation.type === "provider-failure"
+            ? {
+                ...observation,
+                error: OpenResponses.providerFailure(decodeEvent(frame), "stream error", frame),
+              }
+            : observation,
+        ),
+      ),
+  }
+}
+
+const continuationDriver = (request: Readonly<Record<string, unknown>>, base = baseChannelDriver) => {
   const message = ProviderShared.encodeJson(request)
   return OpenResponsesContinuation.driver({
     id: "openai-responses",
     name: "OpenAI Responses",
     request,
     message,
-    base: baseChannelDriver(message),
+    base: base(message),
   })
 }
 
@@ -385,7 +406,7 @@ describe("OpenAI Responses route", () => {
       expect(prepared.body.input).toEqual([
         { role: "user", content: [{ type: "input_text", text: "Before." }] },
         { role: "developer", content: "Operator update." },
-        { type: "message", role: "assistant", content: [{ type: "output_text", text: "After." }] },
+        { type: "message", role: "assistant", status: "completed", content: [{ type: "output_text", text: "After." }] },
       ])
     }),
   )
@@ -560,52 +581,54 @@ describe("OpenAI Responses route", () => {
   )
 
   it.effect("continues a streamed tool call with only the new tool output", () =>
-    Effect.gen(function* () {
-      const firstRequest = {
-        type: "response.create",
-        model: "gpt-5.2",
-        store: false,
-        input: [{ role: "user", content: [{ type: "input_text", text: "Weather?" }] }],
-      }
-      const first = continuationDriver(firstRequest)
-      const firstCreate = yield* first.create(undefined)
-      yield* first.observe(
-        firstCreate,
-        ProviderShared.encodeJson({
-          type: "response.output_item.done",
-          item: {
-            type: "function_call",
-            id: "fc_1",
-            status: "completed",
-            call_id: "call_1",
-            name: "weather",
-            arguments: '{ "city": "Paris" }',
-          },
-        }),
-      )
-      const saved = checkpoint(
+    Effect.forEach([undefined, []], (output) =>
+      Effect.gen(function* () {
+        const firstRequest = {
+          type: "response.create",
+          model: "gpt-5.2",
+          store: false,
+          input: [{ role: "user", content: [{ type: "input_text", text: "Weather?" }] }],
+        }
+        const first = continuationDriver(firstRequest)
+        const firstCreate = yield* first.create(undefined)
         yield* first.observe(
           firstCreate,
-          ProviderShared.encodeJson({ type: "response.completed", response: { id: "resp_1" } }),
-        ),
-      )
-      const second = continuationDriver({
-        ...firstRequest,
-        input: [
-          ...firstRequest.input,
-          { type: "function_call", call_id: "call_1", name: "weather", arguments: '{"city":"Paris"}' },
-          { type: "function_call_output", call_id: "call_1", output: '{"temperature":22}' },
-        ],
-      })
+          ProviderShared.encodeJson({
+            type: "response.output_item.done",
+            item: {
+              type: "function_call",
+              id: "fc_1",
+              status: "completed",
+              call_id: "call_1",
+              name: "weather",
+              arguments: '{ "city": "Paris" }',
+            },
+          }),
+        )
+        const saved = checkpoint(
+          yield* first.observe(
+            firstCreate,
+            ProviderShared.encodeJson({ type: "response.completed", response: { id: "resp_1", output } }),
+          ),
+        )
+        const second = continuationDriver({
+          ...firstRequest,
+          input: [
+            ...firstRequest.input,
+            { type: "function_call", call_id: "call_1", name: "weather", arguments: '{"city":"Paris"}' },
+            { type: "function_call_output", call_id: "call_1", output: '{"temperature":22}' },
+          ],
+        })
 
-      const create = yield* second.create(saved)
+        const create = yield* second.create(saved)
 
-      expect(create.mode).toBe("incremental")
-      expect(ProviderShared.decodeJson(create.message)).toMatchObject({
-        previous_response_id: "resp_1",
-        input: [{ type: "function_call_output", call_id: "call_1", output: '{"temperature":22}' }],
-      })
-    }),
+        expect(create.mode).toBe("incremental")
+        expect(ProviderShared.decodeJson(create.message)).toMatchObject({
+          previous_response_id: "resp_1",
+          input: [{ type: "function_call_output", call_id: "call_1", output: '{"temperature":22}' }],
+        })
+      }),
+    ),
   )
 
   it.effect("continues a tool call from authoritative completed response output", () =>
@@ -659,45 +682,47 @@ describe("OpenAI Responses route", () => {
   )
 
   it.effect("continues a promoted steer after assistant output with response-only text metadata", () =>
-    Effect.gen(function* () {
-      const firstInput = [{ role: "user", content: [{ type: "input_text", text: "First" }] }]
-      const first = continuationDriver({ type: "response.create", model: "gpt-5.2", store: false, input: firstInput })
-      const create = yield* first.create(undefined)
-      yield* first.observe(
-        create,
-        ProviderShared.encodeJson({
-          type: "response.output_item.done",
-          item: {
-            type: "message",
-            id: "msg_1",
-            status: "completed",
-            role: "assistant",
-            content: [{ type: "output_text", text: "Hello", annotations: [], logprobs: [] }],
-          },
-        }),
-      )
-      const saved = checkpoint(
+    Effect.forEach([undefined, []], (output) =>
+      Effect.gen(function* () {
+        const firstInput = [{ role: "user", content: [{ type: "input_text", text: "First" }] }]
+        const first = continuationDriver({ type: "response.create", model: "gpt-5.2", store: false, input: firstInput })
+        const create = yield* first.create(undefined)
         yield* first.observe(
           create,
-          ProviderShared.encodeJson({ type: "response.completed", response: { id: "resp_1" } }),
-        ),
-      )
-      const steer = { role: "user", content: [{ type: "input_text", text: "Actually, be brief" }] }
-      const next = continuationDriver({
-        type: "response.create",
-        model: "gpt-5.2",
-        store: false,
-        input: [...firstInput, { role: "assistant", content: [{ type: "output_text", text: "Hello" }] }, steer],
-      })
+          ProviderShared.encodeJson({
+            type: "response.output_item.done",
+            item: {
+              type: "message",
+              id: "msg_1",
+              status: "completed",
+              role: "assistant",
+              content: [{ type: "output_text", text: "Hello", annotations: [], logprobs: [] }],
+            },
+          }),
+        )
+        const saved = checkpoint(
+          yield* first.observe(
+            create,
+            ProviderShared.encodeJson({ type: "response.completed", response: { id: "resp_1", output } }),
+          ),
+        )
+        const steer = { role: "user", content: [{ type: "input_text", text: "Actually, be brief" }] }
+        const next = continuationDriver({
+          type: "response.create",
+          model: "gpt-5.2",
+          store: false,
+          input: [...firstInput, { role: "assistant", content: [{ type: "output_text", text: "Hello" }] }, steer],
+        })
 
-      const continued = yield* next.create(saved)
+        const continued = yield* next.create(saved)
 
-      expect(continued.mode).toBe("incremental")
-      expect(ProviderShared.decodeJson(continued.message)).toMatchObject({
-        previous_response_id: "resp_1",
-        input: [steer],
-      })
-    }),
+        expect(continued.mode).toBe("incremental")
+        expect(ProviderShared.decodeJson(continued.message)).toMatchObject({
+          previous_response_id: "resp_1",
+          input: [steer],
+        })
+      }),
+    ),
   )
 
   it.effect("continues streamed reasoning when completion re-encrypts the same item", () =>
@@ -852,6 +877,53 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
+  it.effect("retries an incremental send in full when the provider rejects it without a code", () =>
+    Effect.gen(function* () {
+      const firstRequest = {
+        type: "response.create",
+        model: "gpt-5.2",
+        store: false,
+        input: [{ role: "user", content: [{ type: "input_text", text: "First" }] }],
+      }
+      const first = continuationDriver(firstRequest, classifyingChannelDriver)
+      const saved = checkpoint(
+        yield* first.observe(
+          yield* first.create(undefined),
+          ProviderShared.encodeJson({ type: "response.completed", response: { id: "resp_1" } }),
+        ),
+      )
+      const second = continuationDriver(
+        {
+          ...firstRequest,
+          input: [...firstRequest.input, { role: "user", content: [{ type: "input_text", text: "Second" }] }],
+        },
+        classifyingChannelDriver,
+      )
+      // Codex reports a stale previous_response_id as a plain invalid_request_error.
+      const stale = ProviderShared.encodeJson({
+        type: "error",
+        error: { type: "invalid_request_error", message: "Invalid `previous_response_id`." },
+      })
+      const incremental = yield* second.create(saved)
+      expect(incremental.mode).toBe("incremental")
+      expect(yield* second.observe(incremental, stale)).toMatchObject({ type: "rejected", recovery: "retry-full" })
+
+      // A full send has no continuation to blame, so the same error stays a provider failure.
+      const full = yield* second.create(undefined)
+      expect(yield* second.observe(full, stale)).toMatchObject({ type: "provider-failure" })
+
+      // A classified failure keeps its runner-owned recovery instead of resending the whole context.
+      const overflow = ProviderShared.encodeJson({
+        type: "error",
+        error: { type: "invalid_request_error", code: "context_length_exceeded", message: "Too long" },
+      })
+      expect(yield* second.observe(yield* second.create(saved), overflow)).toMatchObject({
+        type: "provider-failure",
+        error: { reason: { _tag: "InvalidRequest", classification: "context-overflow" } },
+      })
+    }),
+  )
+
   it.effect("builds WebSocket and HTTP fallback from the same final request", () =>
     Effect.gen(function* () {
       const attempts = yield* Ref.make(0)
@@ -2050,6 +2122,7 @@ describe("OpenAI Responses route", () => {
           type: "message",
           id: "msg_refusal",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "I can't help with that." }],
           phase: "final_answer",
         },
@@ -2132,6 +2205,7 @@ describe("OpenAI Responses route", () => {
           type: "message",
           id: "msg_commentary",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "Checking." }],
           phase: "commentary",
         },
@@ -2139,6 +2213,7 @@ describe("OpenAI Responses route", () => {
           type: "message",
           id: "msg_final",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "Finished." }],
           phase: "final_answer",
         },
@@ -2146,6 +2221,7 @@ describe("OpenAI Responses route", () => {
           type: "message",
           id: "msg_null",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "Unclassified." }],
           phase: null,
         },
@@ -3276,14 +3352,19 @@ describe("OpenAI Responses route", () => {
       )
 
       expect(prepared.body.input).toEqual([
-        { type: "message", role: "assistant", content: [{ type: "output_text", text: "Before." }] },
+        {
+          type: "message",
+          role: "assistant",
+          status: "completed",
+          content: [{ type: "output_text", text: "Before." }],
+        },
         {
           type: "reasoning",
           id: "rs_1",
           encrypted_content: "encrypted-state",
           summary: [{ type: "summary_text", text: "Checked order." }],
         },
-        { type: "message", role: "assistant", content: [{ type: "output_text", text: "After." }] },
+        { type: "message", role: "assistant", status: "completed", content: [{ type: "output_text", text: "After." }] },
       ])
     }),
   )
@@ -3547,12 +3628,14 @@ describe("OpenAI Responses route", () => {
           type: "message",
           id: "history_1",
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "Hello" }],
         },
         {
           type: "message",
           id: `message_${"a".repeat(64)}`,
           role: "assistant",
+          status: "completed",
           content: [{ type: "output_text", text: "World" }],
         },
         {

packages/app/component-tests/browser-pane.fixture.tsx

@@ -0,0 +1,103 @@
+import { DialogProvider } from "@opencode/ui/context/dialog"
+import { Browser } from "@opencode/plugin-browser/rpc"
+import { For, Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { render } from "solid-js/web"
+import { LanguageProvider, UiI18nBridge } from "../src/runtime/i18n/language"
+import type { BrowserPaneLayout, BrowserPaneRegistration } from "../src/runtime/platform/browser-pane"
+import type { createSessionBrowser } from "../src/session/browser/model"
+import { SessionBrowserPane } from "../src/session/browser/pane"
+
+export function mountBrowserPane() {
+  const host = document.createElement("main")
+  host.dataset.testid = "browser-pane-fixture"
+  host.style.cssText = "position:fixed;inset:0;z-index:1000;background:#181818;color:#eee;padding:24px"
+  document.body.appendChild(host)
+
+  function Fixture() {
+    const [store, setStore] = createStore({
+      session: "Alpha",
+      mounted: true,
+      visible: true,
+      layouts: {} as Record<string, BrowserPaneLayout | undefined>,
+    })
+    const tabs = ["Alpha", "Beta"].map((name) => ({
+      id: Browser.TabID.make(`tab_${name === "Alpha" ? "11111111" : "22222222"}-1111-1111-1111-111111111111`),
+      title: name,
+      url: `https://${name.toLowerCase()}.example/`,
+      loading: false,
+      canGoBack: false,
+      canGoForward: false,
+      generation: 0,
+    }))
+    // Record the native boundary per registration: hiding Beta cannot hide Alpha's view.
+    const registrations = new Map<string, BrowserPaneRegistration>(
+      tabs.map((tab) => [
+        tab.title,
+        {
+          setLayout: (layout) => setStore("layouts", tab.title, layout),
+          command: async () => undefined,
+          close: () => undefined,
+        },
+      ]),
+    )
+    const browser: ReturnType<typeof createSessionBrowser> = {
+      available: () => true,
+      attached: () => !!registrations.get(store.session),
+      opened: () => !!registrations.get(store.session),
+      state: () => ({ tabs: tabs.filter((tab) => tab.title === store.session), focusedTabID: null }),
+      tabs: () => tabs.filter((tab) => tab.title === store.session),
+      active: () => tabs.find((tab) => tab.title === store.session) ?? tabs[0],
+      registration: () => registrations.get(store.session),
+      error: () => undefined,
+      suspended: () => false,
+      close: () => undefined,
+      open: () => undefined,
+      command: () => undefined,
+    }
+    return (
+      <>
+        <h1 style={{ "font-size": "24px", "margin-bottom": "16px" }}>Browser pane lifecycle</h1>
+        <p>Selected session: {store.session}</p>
+        <nav style={{ display: "flex", gap: "20px", margin: "16px 0" }}>
+          <For each={["Alpha", "Beta", "Empty"]}>
+            {(name) => <button onClick={() => setStore({ session: name, mounted: name !== "Empty" })}>{name}</button>}
+          </For>
+          <button onClick={() => setStore("mounted", false)}>Unmount pane</button>
+          <button onClick={() => setStore("visible", (visible) => !visible)}>Toggle Review tab</button>
+        </nav>
+        <div style={{ width: "640px", height: "360px", border: "1px solid #555" }}>
+          <Show when={store.mounted}>
+            <SessionBrowserPane browser={browser} visible={store.visible} />
+          </Show>
+        </div>
+        <h2 style={{ "font-size": "18px", margin: "20px 0 12px" }}>Native layout recorder</h2>
+        <p>The desktop boundary keeps each session's page visible until its registration is hidden.</p>
+        <For each={tabs}>
+          {(tab) => (
+            <div
+              data-testid={`native-${tab.title}`}
+              data-visible={!!store.layouts[tab.title]?.visible}
+              style={{ padding: "12px", margin: "8px 0", border: "1px solid #555" }}
+            >
+              {tab.title}: {store.layouts[tab.title]?.visible ? "visible" : "hidden"}
+            </div>
+          )}
+        </For>
+      </>
+    )
+  }
+
+  return render(
+    () => (
+      <LanguageProvider locale="en">
+        <UiI18nBridge>
+          <DialogProvider>
+            <Fixture />
+          </DialogProvider>
+        </UiI18nBridge>
+      </LanguageProvider>
+    ),
+    host,
+  )
+}

packages/app/component-tests/browser-pane.spec.ts

@@ -0,0 +1,44 @@
+import { fileURLToPath } from "node:url"
+import { expect, story } from "../../storybook/playwright/story"
+
+const fixture = `/@fs/${fileURLToPath(new URL("./browser-pane.fixture.tsx", import.meta.url)).replaceAll("\\", "/")}`
+
+story.beforeEach(async ({ mount, page }) => {
+  const component = await mount("opencode-composer-flow--mixed-attachments")
+  await expect(component.getByRole("textbox", { name: "Prompt", exact: true })).toBeVisible()
+  await page.evaluate(async (fixture) => {
+    const { mountBrowserPane } = await import(fixture)
+    mountBrowserPane()
+  }, fixture)
+  await expect(page.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "true")
+})
+
+story("hides the previous registration when the mounted pane switches sessions", async ({ page }, testInfo) => {
+  const root = page.getByTestId("browser-pane-fixture")
+  await root.getByRole("button", { name: "Beta", exact: true }).click()
+  await expect(root.getByTestId("native-Beta")).toHaveAttribute("data-visible", "true")
+  await expect(root.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "false")
+  await page.screenshot({ path: testInfo.outputPath("session-switch.png") })
+  await root.getByRole("button", { name: "Alpha", exact: true }).click()
+  await expect(root.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "true")
+  await expect(root.getByTestId("native-Beta")).toHaveAttribute("data-visible", "false")
+})
+
+story("hides the outgoing browser when the destination has no browser pane", async ({ page }) => {
+  const root = page.getByTestId("browser-pane-fixture")
+  await root.getByRole("button", { name: "Empty", exact: true }).click()
+  await expect(root.locator("#browser-panel")).toHaveCount(0)
+  await expect(root.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "false")
+  await root.getByRole("button", { name: "Alpha", exact: true }).click()
+  await expect(root.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "true")
+})
+
+story("hides and restores the same registration for Review tabs and unmount", async ({ page }) => {
+  const root = page.getByTestId("browser-pane-fixture")
+  await root.getByRole("button", { name: "Toggle Review tab", exact: true }).click()
+  await expect(root.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "false")
+  await root.getByRole("button", { name: "Toggle Review tab", exact: true }).click()
+  await expect(root.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "true")
+  await root.getByRole("button", { name: "Unmount pane", exact: true }).click()
+  await expect(root.getByTestId("native-Alpha")).toHaveAttribute("data-visible", "false")
+})

packages/app/e2e/performance/timeline/laggy-session-benchmark.md

@@ -0,0 +1,27 @@
+# Session-export load benchmark
+
+Replay an exported session against a production app build. The two cases compare the default Compact preset with every category ungrouped and details still collapsed.
+
+From `packages/app` in PowerShell:
+
+```powershell
+$env:PLAYWRIGHT_BUILD = '1'
+$env:PLAYWRIGHT_BASE_URL = 'http://127.0.0.1:4398' # Existing production preview
+$env:LAGGY_SESSION_FILE = 'C:\path\session.json'
+$env:LAGGY_SESSION_OUTPUT = 'C:\tmp\opencode\session-load'
+$env:LAGGY_SESSION_HISTORY = 'paged' # Or 'full' to supply all exported history
+bun x playwright test --config e2e/performance/playwright.config.ts timeline/laggy-session-benchmark.spec.ts --repeat-each=20 --workers=1 --retries=0
+bun e2e/performance/timeline/laggy-session-report.ts $env:LAGGY_SESSION_OUTPUT
+```
+
+Each test uses a fresh browser context and measures one cold load, switches back to the source session, then measures one warm load. Repetitions therefore interleave `cold → warm` pairs rather than collecting separate cold and warm batches. There are no discarded warm-up switches. The warm member of every pair must issue zero message requests. Each pair is saved in a separate JSON file; compare paired differences as well as the cold and warm distributions when system load varies.
+
+The report writes `summary.json` and prints the median, p95, maximum, and median paired cold-minus-warm difference. It rejects incomplete or cold-only records instead of mixing them into paired results.
+
+`--repeat-each=20` collects 20 pairs per grouping mode. `LAGGY_SESSION_COLD_ONLY=1` remains available for focused cold profiling. Screenshots are taken after a pair finishes, not between its measurements.
+
+The app shell, source session, model control, and fonts are ready before the timed action. These measurements cover session entry, not application startup. `firstCorrectObservedMs` begins at mousedown and ends when the destination is visible at its expected bottom position, including Compact's automatic history fill. `stableObservedMs` includes three-observation confirmation and must not be treated as additional rendering time.
+
+Set `OPENCODE_PERFORMANCE_TRACE_DIR` for Chrome traces. `LAGGY_TRACE_ITERATION=0` traces the cold load; the default (`1`) traces the warm member of the pair. Profile separately from timing runs.
+
+`LAGGY_HTTP=1` disables route interception for an external HTTP replay server containing the same export and source fixture. Keep direct HTTP and Playwright-routed cold series separate: routing adds transport overhead. Raw samples, mode settings, viewport, browser version, and screenshots are retained in the output directory. The export itself is not copied into the repository.

packages/app/e2e/performance/timeline/laggy-session-benchmark.spec.ts

@@ -0,0 +1,227 @@
+import { readFileSync, mkdirSync, writeFileSync } from "node:fs"
+import type { SessionMessageInfo } from "@opencode/client/promise"
+import { base64Encode } from "@opencode/util/encode"
+import { timelineCategories, timelinePresets } from "@opencode/session-ui/timeline/detail"
+import { mockOpenCodeServer } from "../../utils/mock-server"
+import { expectSessionTitle } from "../../utils/waits"
+import { benchmark, expect } from "../benchmark"
+import { measureSessionSwitch, waitForStableTimeline } from "./session-tab-switch-probe"
+import { stressSessionHref } from "./timeline-test-helpers"
+import { startChromeTrace } from "../chrome-trace"
+
+const file = process.env.LAGGY_SESSION_FILE
+const session = file
+  ? (JSON.parse(readFileSync(file, "utf8")) as {
+      info: {
+        id: string
+        projectID: string
+        title: string
+        model?: { id: string; providerID: string }
+        location: { directory: string }
+        time: { created: number; updated: number }
+      }
+      messages: SessionMessageInfo[]
+    })
+  : undefined
+const sourceID = "ses_laggy_benchmark_source"
+const sourceMessageID = "msg_laggy_benchmark_source"
+const history = process.env.LAGGY_SESSION_HISTORY ?? "full"
+const viewport = { width: 1440, height: 900 }
+
+benchmark.use({ viewport, video: "off", trace: "off", serviceWorkers: "block", traceScope: "interaction" })
+
+for (const mode of ["compact", "ungrouped"] as const) {
+  benchmark(`laggy session: ${mode}`, async ({ page, report }, testInfo) => {
+    benchmark.skip(!session, "Set LAGGY_SESSION_FILE to a session export")
+    if (!session) return
+    const output = process.env.LAGGY_SESSION_OUTPUT ?? testInfo.outputPath("session-load")
+    const model = session.info.model ?? { id: "benchmark-model", providerID: "benchmark" }
+    const lastID = session.messages.findLast((message) => message.type === "user")!.id
+    const lastText = session.messages.findLast(
+      (message) =>
+        message.type === "assistant" && message.content.some((part) => part.type === "text" && part.text.trim()),
+    )!
+    benchmark.setTimeout(Number(process.env.LAGGY_SESSION_TIMEOUT ?? 180_000))
+    const requests: string[] = []
+    const errors: string[] = []
+    page.on("pageerror", (error) => errors.push(error.message))
+    if (process.env.LAGGY_HTTP === "1")
+      page.on("request", (request) => {
+        const match = new URL(request.url()).pathname.match(/^\/api\/session\/([^/]+)\/message$/)
+        if (request.method() === "GET" && match) requests.push(decodeURIComponent(match[1]))
+      })
+    const detail = Object.fromEntries(
+      timelineCategories.map((category) => [
+        category,
+        {
+          ...timelinePresets[2].value[category],
+          placement: mode === "compact" ? "grouped" : "separate",
+        },
+      ]),
+    )
+    const directory = session.info.location.directory
+    if (process.env.LAGGY_HTTP !== "1")
+      await mockOpenCodeServer(page, {
+        directory,
+        project: {
+          id: session.info.projectID,
+          worktree: directory,
+          vcs: "git",
+          name: "session-benchmark",
+          time: session.info.time,
+          sandboxes: [],
+        },
+        provider: {
+          all: [
+            {
+              id: model.providerID,
+              name: model.providerID,
+              models: { [model.id]: { id: model.id, name: model.id, limit: { context: 1_000_000 } } },
+            },
+          ],
+          connected: [model.providerID],
+          default: { providerID: model.providerID, modelID: model.id },
+        },
+        sessions: [session.info, { ...session.info, id: sourceID, title: "Benchmark source" }],
+        pageMessages: (id, limit, before) => {
+          if (id !== session.info.id)
+            return {
+              items: [
+                {
+                  id: sourceMessageID,
+                  type: "user",
+                  text: "Benchmark source",
+                  time: { created: session.info.time.created },
+                },
+              ],
+            }
+          if (history === "full") return { items: session.messages }
+          const end = before ? session.messages.findIndex((message) => message.id === before) : session.messages.length
+          const start = Math.max(0, end - limit)
+          return {
+            items: session.messages.slice(start, end),
+            cursor: start > 0 ? session.messages[start].id : undefined,
+          }
+        },
+        onMessages: (request) => {
+          if (request.phase === "start") requests.push(request.sessionID)
+        },
+      })
+    await page.addInitScript(
+      ({ detail, directory, server, sessionIDs, dirBase64 }) => {
+        localStorage.setItem("settings.v3", JSON.stringify({ general: { timelineDetail: detail } }))
+        localStorage.setItem(
+          "opencode.global.dat:server",
+          JSON.stringify({
+            projects: { local: [{ worktree: directory, expanded: true }] },
+            lastProject: { local: directory },
+          }),
+        )
+        localStorage.setItem(
+          "opencode.window.browser.dat:tabs",
+          JSON.stringify(sessionIDs.map((sessionId) => ({ type: "session", server, dirBase64, sessionId }))),
+        )
+      },
+      {
+        detail,
+        directory,
+        server: process.env.PLAYWRIGHT_BASE_URL!,
+        sessionIDs: [sourceID, session.info.id],
+        dirBase64: base64Encode(directory),
+      },
+    )
+    await page.goto(stressSessionHref(sourceID))
+    await expectSessionTitle(page, "Benchmark source")
+    await expect(page.locator('[data-slot="user-message-text"]')).toHaveText("Benchmark source")
+    await expect(page.getByRole("textbox", { name: "Prompt", exact: true })).toBeEditable()
+    await expect(page.getByRole("button", { name: model.id, exact: true })).toBeVisible()
+    await page.evaluate(() => document.fonts.ready.then(() => undefined))
+    expect(requests).toEqual([sourceID])
+    const startedAt = new Date().toISOString()
+    const samples = []
+    const phases = process.env.LAGGY_SESSION_COLD_ONLY === "1" ? (["cold"] as const) : (["cold", "warm"] as const)
+    for (const [iteration, phase] of phases.entries()) {
+      const before = requests.length
+      const stopTrace =
+        iteration === Number(process.env.LAGGY_TRACE_ITERATION ?? 1)
+          ? await startChromeTrace(page, `laggy-${history}-${mode}`)
+          : undefined
+      const result = await measureSessionSwitch(page, {
+        destinationIDs: session.messages.map((message) => message.id),
+        sourceIDs: [sourceMessageID],
+        lastID,
+        requiredPartID: history === "paged" && mode === "compact" ? `${lastText.id}:text:0` : undefined,
+        requireBottomAnchor: true,
+        href: stressSessionHref(session.info.id),
+        switch: async () => {
+          await page.locator(`[data-slot="titlebar-tabs"] a[href="${stressSessionHref(session.info.id)}"]`).click()
+        },
+      })
+      await stopTrace?.()
+      await expectSessionTitle(page, session.info.title)
+      if (history === "full" || mode === "ungrouped") await waitForStableTimeline(page, lastID)
+      await expect(
+        page.locator('[data-timeline-key] [data-component="markdown"]:not([data-markdown-ready])'),
+      ).toHaveCount(0)
+      expect(result.firstCorrectObservedMs).not.toBeNull()
+      expect(result.stableObservedMs).not.toBeNull()
+      if (phase === "warm") expect(requests.length - before).toBe(0)
+      samples.push({
+        iteration,
+        phase,
+        messageRequests: requests.length - before,
+        messageResources: await page.evaluate((sessionID) => {
+          const start = performance.getEntriesByName("session-switch:start").at(-1)!.startTime
+          return (performance.getEntriesByType("resource") as PerformanceResourceTiming[])
+            .filter(
+              (entry) =>
+                entry.startTime >= start && new URL(entry.name).pathname === `/api/session/${sessionID}/message`,
+            )
+            .map((entry) => ({
+              limit: Number(new URL(entry.name).searchParams.get("limit")),
+              startMs: entry.startTime - start,
+              durationMs: entry.duration,
+              transferBytes: entry.transferSize,
+            }))
+        }, session.info.id),
+        ...result,
+      })
+      if (iteration === phases.length - 1) {
+        mkdirSync(output, { recursive: true })
+        if (testInfo.repeatEachIndex === 0) await page.screenshot({ path: `${output}/${mode}.png` })
+        break
+      }
+      await page.locator(`[data-slot="titlebar-tabs"] a[href="${stressSessionHref(sourceID)}"]`).click()
+      await expectSessionTitle(page, "Benchmark source")
+      await expect(page.locator('[data-slot="user-message-text"]')).toHaveText("Benchmark source")
+      await expect(page.getByRole("textbox", { name: "Prompt", exact: true })).toBeEditable()
+    }
+    expect(errors).toEqual([])
+    const result = {
+      pair: testInfo.repeatEachIndex,
+      startedAt,
+      mode,
+      history,
+      file,
+      messages: session.messages.length,
+      viewport,
+      browser: page.context().browser()!.version(),
+      detail,
+      samples,
+    }
+    writeFileSync(`${output}/${mode}-${testInfo.repeatEachIndex}.json`, JSON.stringify(result, null, 2))
+    report(
+      { samples },
+      {
+        mode,
+        sampling: "cold/warm pair in one browser context",
+        pair: testInfo.repeatEachIndex,
+        messages: session.messages.length,
+        viewport,
+        data: history === "full" ? "full exported history" : "paginated exported history",
+        transport: process.env.LAGGY_HTTP === "1" ? "http" : "playwright-route",
+        inputEvent: "mousedown",
+      },
+    )
+  })
+}

packages/app/e2e/performance/timeline/laggy-session-report.ts

@@ -0,0 +1,63 @@
+export {}
+
+type Pair = {
+  mode: "compact" | "ungrouped"
+  samples: { phase: string; firstCorrectObservedMs: number | null; messageRequests: number }[]
+}
+
+const directory = Bun.argv[2]
+if (!directory) throw new Error("Pass the directory containing session-load pairs")
+const pairs = await Promise.all(
+  [...new Bun.Glob("{compact,ungrouped}-*.json").scanSync(directory)].map(async (file) => {
+    const pair = (await Bun.file(`${directory}/${file}`).json()) as Pair
+    const cold = pair.samples.find((sample) => sample.phase === "cold")
+    const warm = pair.samples.find((sample) => sample.phase === "warm")
+    if (cold?.firstCorrectObservedMs == null || warm?.firstCorrectObservedMs == null)
+      throw new Error(`Expected a completed cold/warm pair in ${file}`)
+    return {
+      mode: pair.mode,
+      cold: cold.firstCorrectObservedMs,
+      warm: warm.firstCorrectObservedMs,
+      requests: warm.messageRequests,
+    }
+  }),
+)
+if (!pairs.length) throw new Error(`No session-load pairs found in ${directory}`)
+
+const result = ["compact", "ungrouped"].flatMap((mode) => {
+  const selected = pairs.filter((pair) => pair.mode === mode)
+  if (!selected.length) return []
+  return [
+    {
+      mode,
+      cold: { ...stats(selected.map((pair) => pair.cold)), over50ms: selected.filter((pair) => pair.cold > 50).length },
+      warm: { ...stats(selected.map((pair) => pair.warm)), over50ms: selected.filter((pair) => pair.warm > 50).length },
+      pairedColdMinusWarm: stats(selected.map((pair) => pair.cold - pair.warm)),
+      messageRequestsDuringWarm: selected.reduce((total, pair) => total + pair.requests, 0),
+    },
+  ]
+})
+await Bun.write(`${directory}/summary.json`, JSON.stringify(result, null, 2))
+console.table(
+  result.map((row) => ({
+    mode: row.mode,
+    pairs: row.cold.n,
+    coldMedianMs: Math.round(row.cold.median * 10) / 10,
+    coldP95Ms: Math.round(row.cold.p95 * 10) / 10,
+    warmMedianMs: Math.round(row.warm.median * 10) / 10,
+    warmP95Ms: Math.round(row.warm.p95 * 10) / 10,
+    warmMaxMs: Math.round(row.warm.max * 10) / 10,
+    pairedDifferenceMs: Math.round(row.pairedColdMinusWarm.median * 10) / 10,
+  })),
+)
+
+function stats(values: number[]) {
+  const sorted = values.toSorted((left, right) => left - right)
+  return {
+    n: sorted.length,
+    median: (sorted[Math.floor((sorted.length - 1) / 2)] + sorted[Math.floor(sorted.length / 2)]) / 2,
+    p95: sorted[Math.ceil(sorted.length * 0.95) - 1],
+    min: sorted[0],
+    max: sorted.at(-1)!,
+  }
+}

packages/app/e2e/regression/mcp-workspace-toggle.spec.ts

@@ -59,9 +59,8 @@ for (const shared of [true, false]) {
     await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
     await expectSessionTitle(page, title)
     await expect(page.getByRole("textbox", { name: "Prompt", exact: true })).toBeEditable()
-    await page.getByRole("button", { name: "Session details", exact: true }).click()
-    await page.getByRole("button", { name: "MCP", exact: true }).click()
-    const dialog = page.getByRole("dialog", { name: "MCP", exact: true })
+    await page.keyboard.press("ControlOrMeta+;")
+    const dialog = page.getByRole("dialog", { name: "MCPs", exact: true })
     await expect(dialog.getByText("figma-desktop", { exact: true })).toBeVisible()
     const toggle = dialog.getByRole("switch")
     await expect(toggle).not.toBeChecked()
@@ -93,7 +92,7 @@ for (const surface of ["popover", "dialog"] as const) {
     const state = { fail: true, status: surface === "popover" ? "failed" : "disabled" }
     const requests: { path: string; directory: string }[] = []
     await page.addInitScript(() => {
-      localStorage.setItem("settings.v3", JSON.stringify({ keybinds: { "mcp.toggle": "ctrl+;" } }))
+      localStorage.setItem("settings.v3", JSON.stringify({ general: { showStatus: true } }))
     })
     await mockOpenCodeServer(page, {
       directory,
@@ -114,10 +113,6 @@ for (const surface of ["popover", "dialog"] as const) {
       const url = new URL(route.request().url())
       const target = url.searchParams.get("location[directory]") ?? directory
       requests.push({ path: url.pathname, directory: target })
-      if (url.pathname === "/api/mcp/figma-desktop/disconnect") {
-        state.status = "disabled"
-        return route.fulfill({ status: 204 })
-      }
       if (url.pathname === "/api/mcp/figma-desktop/connect") {
         state.status = state.fail ? "failed" : "connected"
         // Connection failures are reported by the refreshed status, not the HTTP response.
@@ -142,19 +137,12 @@ for (const surface of ["popover", "dialog"] as const) {
     await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
     await expectSessionTitle(page, title)
     await expect(page.getByRole("textbox", { name: "Prompt", exact: true })).toBeEditable()
-    if (surface === "popover") {
-      await page.getByRole("button", { name: "Session details", exact: true }).click()
-      await page.getByRole("button", { name: "MCP", exact: true }).click()
-    }
-    if (surface === "dialog") await page.keyboard.press("Control+;")
-    const panel = page.getByRole("dialog", { name: surface === "popover" ? "MCP" : "MCPs", exact: true })
+    if (surface === "popover") await page.getByRole("button", { name: "Status", exact: true }).click()
+    if (surface === "dialog") await page.keyboard.press("ControlOrMeta+;")
+    const panel =
+      surface === "popover" ? page.getByRole("tabpanel") : page.getByRole("dialog", { name: "MCPs", exact: true })
     const toggle = panel.getByRole("switch")
     await expect(panel.getByText("figma-desktop", { exact: true })).toBeVisible()
-    await expect(toggle).toBeEnabled()
-    if (surface === "popover") {
-      await expect(toggle).toBeChecked()
-      await panel.getByText("figma-desktop", { exact: true }).click()
-    }
     await expect(toggle).not.toBeChecked()
     await expect(toggle).toBeEnabled()
     requests.length = 0
@@ -164,7 +152,7 @@ for (const surface of ["popover", "dialog"] as const) {
       .getByRole("listitem", { includeHidden: true })
       .filter({ has: page.getByText("Request failed", { exact: true }) })
     await expect(toast.getByText(`figma-desktop: ${error}`, { exact: true })).toBeVisible()
-    await expect(toggle).toBeChecked({ checked: surface === "popover" })
+    await expect(toggle).not.toBeChecked()
     await expect(toggle).toBeEnabled()
     expect(requests.filter((request) => request.path.endsWith("/connect"))).toEqual([
       { path: "/api/mcp/figma-desktop/connect", directory: workspace },
@@ -179,18 +167,9 @@ for (const surface of ["popover", "dialog"] as const) {
     await toast.getByRole("button", { name: "Dismiss", exact: true }).click()
     await expect(toast).toBeHidden()
     state.fail = false
-    if (surface === "popover") {
-      await expect(page.getByRole("dialog", { name: "Session details", exact: true })).toBeHidden()
-      await page.getByRole("button", { name: "Session details", exact: true }).click()
-      await page.getByRole("button", { name: "MCP", exact: true }).click()
-    }
-    if (surface === "dialog") await page.keyboard.press("Control+;")
+    if (surface === "popover") await page.getByRole("button", { name: "Status", exact: true }).click()
+    if (surface === "dialog") await page.keyboard.press("ControlOrMeta+;")
     await expect(toggle).toBeEnabled()
-    if (surface === "popover") {
-      await panel.getByText("figma-desktop", { exact: true }).click()
-      await expect(toggle).not.toBeChecked()
-      await expect(toggle).toBeEnabled()
-    }
     await panel.locator('[data-slot="switch-control"]').click()
     await expect(toggle).toBeChecked()
     await expect(toggle).toBeEnabled()

packages/app/e2e/regression/mobile-session-views.spec.ts

@@ -104,12 +104,18 @@ for (const position of ["top", "bottom"] as const) {
     await expect(composer).toBeHidden()
 
     await more.click()
-    await expect(page.getByRole("menuitem", { name: "Status", exact: true })).toHaveCount(0)
+    await page.getByRole("menuitem", { name: "Status", exact: true }).click()
+    const status = page.getByRole("dialog", { name: "Status", exact: true })
+    await expect(status.getByRole("tab", { name: "MCP", exact: true })).toBeVisible()
+    await status.getByRole("button", { name: "Close", exact: true }).click()
+    await expect(status).toBeHidden()
+    await expect(more).toBeFocused()
+
+    await more.click()
     await page.getByRole("menuitem", { name: "Session details", exact: true }).click()
     const details = page.getByRole("dialog", { name: "Session details", exact: true })
     await expect(details.getByText(fixture.project.name, { exact: true })).toBeVisible()
     await expect(details.getByRole("button", { name: "No changes", exact: true })).toBeVisible()
-    await expect(details.getByRole("button", { name: "MCP", exact: true })).toBeVisible()
     await details.getByRole("button", { name: "Close", exact: true }).click()
     await expect(details).toBeHidden()
     await expect(more).toBeFocused()

packages/app/e2e/regression/mobile-status-drawer.spec.ts

@@ -2,21 +2,25 @@ import { expect, test } from "@playwright/test"
 import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
 import { mockStressTimeline, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
 
-test("summary drawer dismisses and reopens after button, backdrop, Escape, and drag", async ({ page }) => {
+test("status drawer dismisses and reopens after button, backdrop, Escape, and drag", async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 844 })
   await mockStressTimeline(page)
   await page.goto(stressSessionHref(fixture.targetID))
   const more = page
     .locator('[data-slot="session-mobile-view-navigation"]')
     .getByRole("button", { name: "More options", exact: true })
-  const drawer = page.getByRole("dialog", { name: "Session details", exact: true })
+  const drawer = page.getByRole("dialog", { name: "Status", exact: true })
   const overlay = page.locator('[data-slot="mobile-drawer-overlay"]')
 
   for (const dismissal of ["button", "backdrop", "escape", "drag", "button"] as const) {
     await more.click()
-    await expect(page.getByRole("menuitem", { name: "Status", exact: true })).toHaveCount(0)
-    await page.getByRole("menuitem", { name: "Session details", exact: true }).click()
-    await expect(drawer.getByRole("button", { name: "MCP", exact: true })).toBeVisible()
+    await page.getByRole("menuitem", { name: "Status", exact: true }).click()
+    await expect(drawer.getByRole("tab", { name: "MCP", exact: true })).toBeVisible()
+    // Corvu starts opening after paint; the transition flag is also absent
+    // before that callback. Wait for the open position before dismissing.
+    await expect
+      .poll(() => drawer.evaluate((element) => new DOMMatrixReadOnly(getComputedStyle(element).transform).m42))
+      .toBe(0)
     await expect(drawer).not.toHaveAttribute("data-transitioning")
     if (dismissal === "button") await drawer.getByRole("button", { name: "Close", exact: true }).click()
     if (dismissal === "backdrop") await overlay.click({ position: { x: 10, y: 10 } })

packages/app/e2e/regression/new-session-summary.spec.ts

@@ -1,452 +0,0 @@
-import { expect, test, type Page } from "@playwright/test"
-import { mockOpenCodeServer, currentSession } from "../utils/mock-server"
-
-const directory = "/workspace/summary-project"
-const workspace = "/workspace/existing-worktree"
-const createdWorkspace = "/workspace/created-worktree"
-const draftID = "draft_summary"
-const secondDraftID = "draft_summary_other"
-const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
-const draftPath = `/new-session?draftId=${draftID}`
-
-for (const rtl of [false, true]) {
-  test(`new session summary shows project extensions and follows workspace selection in ${rtl ? "rtl" : "ltr"}`, async ({
-    page,
-  }, testInfo) => {
-    const mock = await openDraft(page)
-    if (rtl) {
-      await page.getByRole("button", { name: "Toggle debug tools", exact: true }).click()
-      await page.getByRole("button", { name: "DIR: LTR", exact: true }).click()
-      await page.getByRole("button", { name: "Toggle debug tools", exact: true }).click()
-    }
-    const trigger = page.getByRole("button", { name: "Session details", exact: true })
-    await expect
-      .poll(async () => {
-        const button = await trigger.boundingBox()
-        const view = await page.locator('[data-component="new-session"]').boundingBox()
-        if (!button || !view) return false
-        const gap = rtl ? button.x - view.x : view.x + view.width - button.x - button.width
-        return Math.abs(gap - 12) <= 1 && Math.abs(button.y + button.height / 2 - view.y - 24) <= 1
-      })
-      .toBe(true)
-    await trigger.click()
-    const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-    await expect(summary.getByRole("button", { name: "summary-project", exact: true })).toHaveAttribute(
-      "aria-expanded",
-      "true",
-    )
-    await expect(summary.getByRole("button", { name: "Server", exact: true })).toHaveAttribute("aria-expanded", "true")
-    await expect
-      .poll(async () => {
-        const view = await page.locator('[data-component="new-session"]').boundingBox()
-        const project = await summary.locator('[data-section="project"]').boundingBox()
-        const server = await summary.locator('[data-section="server"]').boundingBox()
-        if (!view || !project || !server) return
-        return {
-          top: project.y - view.y - 48,
-          cards: server.y - project.y - project.height,
-        }
-      })
-      .toEqual({ top: 6, cards: 8 })
-    await testInfo.attach(`new-session-summary-${rtl ? "rtl" : "ltr"}`, {
-      body: await page.screenshot(),
-      contentType: "image/png",
-    })
-    for (const [name, item] of [
-      ["MCP", "summary-mcp"],
-      ["Plugins", "project-plugin"],
-      ["Skills", "summary-skill"],
-      ["LSP", "typescript"],
-    ]) {
-      await summary.getByRole("button", { name, exact: true }).click()
-      await expect(page.getByRole("dialog", { name, exact: true }).getByText(item, { exact: true })).toBeVisible()
-    }
-    await page.keyboard.press("Escape")
-    await summary.getByRole("button", { name: "Local repository", exact: true }).click()
-    const worktreeMenu = page.getByRole("menu", { name: "Local repository", exact: true })
-    await expect
-      .poll(async () => {
-        const menu = await worktreeMenu.boundingBox()
-        const panel = await summary.locator('[data-component="session-summary-panel"]').boundingBox()
-        if (!menu || !panel) return false
-        return rtl ? menu.x >= panel.x + panel.width : menu.x + menu.width <= panel.x
-      })
-      .toBe(true)
-    await expect(page.getByRole("menuitem", { name: "existing-worktree", exact: true })).toBeHidden()
-    await worktreeMenu.getByRole("menuitem", { name: "Worktree", exact: true }).press(rtl ? "ArrowLeft" : "ArrowRight")
-    await expect(page.getByRole("menu", { name: "Worktree", exact: true })).toBeVisible()
-    await page.keyboard.press("Enter")
-    await expect(summary.getByRole("button", { name: "existing-worktree", exact: true })).toBeVisible()
-    await summary.getByRole("button", { name: "MCP", exact: true }).click()
-    const mcp = page.getByRole("dialog", { name: "MCP", exact: true })
-    const toggle = mcp.getByRole("switch", { name: "summary-mcp", exact: true })
-    await expect(toggle).not.toBeChecked()
-    await expect(toggle).toBeEnabled()
-    await mcp.getByText("summary-mcp", { exact: true }).click()
-    await expect(toggle).toBeChecked()
-    await expect(toggle).toBeEnabled()
-    expect(mock.calls).toEqual([{ type: "mcp", directory: workspace, enabled: true }])
-    expect(mock.status.get(directory)).toBe("connected")
-    await summary.getByRole("button", { name: "Plugins", exact: true }).click()
-    await expect(
-      page.getByRole("dialog", { name: "Plugins", exact: true }).getByText("workspace-plugin", { exact: true }),
-    ).toBeVisible()
-  })
-}
-
-test("new worktree MCP choices persist per draft and apply before the first prompt", async ({ page }, testInfo) => {
-  const mock = await openDraft(page, "create")
-  await page.locator('[data-component="composer-editor"]').fill("Use my selected MCPs")
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  const menu = page.getByRole("dialog", { name: "MCP", exact: true })
-  await expect(menu.locator('[data-slot="mcp-preview-hint"]')).toHaveText("Applies when the worktree is created")
-  await expect(menu).toHaveCSS("opacity", "1")
-  await testInfo.attach("new-worktree-mcp-preview", { body: await page.screenshot(), contentType: "image/png" })
-  const toggle = menu.getByRole("switch", { name: "summary-mcp", exact: true })
-  await expect(toggle).toBeChecked()
-  await menu.getByText("summary-mcp", { exact: true }).click()
-  await expect(toggle).not.toBeChecked()
-  expect(mock.calls).toEqual([])
-  await expect
-    .poll(() =>
-      page.evaluate(
-        () =>
-          JSON.parse(localStorage.getItem("opencode.window.browser.dat:tabs") ?? "[]").find(
-            (tab: { draftID?: string }) => tab.draftID === "draft_summary",
-          )?.mcp?.states,
-      ),
-    )
-    .toEqual({ "summary-mcp": false })
-
-  await page.goto(`/new-session?draftId=${secondDraftID}`)
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  await expect(toggle).toBeChecked()
-  await page.goto(draftPath)
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  await expect(toggle).not.toBeChecked()
-  expect(mock.calls).toEqual([])
-  await page.keyboard.press("Escape")
-  await page.keyboard.press("Escape")
-  await expect(page.locator('[data-component="composer-editor"]')).toHaveText("Use my selected MCPs")
-  await page.locator('[data-action="composer-submit"]').click()
-  await expect.poll(() => mock.prompts.length).toBe(1)
-  expect(mock.calls).toEqual([
-    { type: "worktree", directory },
-    { type: "mcp", directory: createdWorkspace, enabled: false },
-    { type: "session", directory: createdWorkspace },
-    { type: "prompt", directory: createdWorkspace },
-  ])
-  expect(mock.prompts[0].body.text).toBe("Use my selected MCPs")
-  expect(mock.status.get(directory)).toBe("connected")
-})
-
-test("the first prompt waits for a live MCP toggle", async ({ page }) => {
-  const mock = await openDraft(page)
-  const release = Promise.withResolvers<void>()
-  mock.state.hold = release.promise
-  await page.locator('[data-component="composer-editor"]').fill("Wait for the MCP update")
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  const menu = page.getByRole("dialog", { name: "MCP", exact: true })
-  await expect(menu.getByRole("switch", { name: "summary-mcp", exact: true })).toBeEnabled()
-  try {
-    await menu.getByText("summary-mcp", { exact: true }).click()
-    await expect.poll(() => mock.calls.length).toBe(1)
-    await page.keyboard.press("Escape")
-    await page.keyboard.press("Escape")
-    await page.locator('[data-action="composer-submit"]').click()
-    await expect(page).toHaveURL(draftPath)
-    expect(mock.calls).toEqual([{ type: "mcp", directory, enabled: false }])
-    expect(mock.prompts).toEqual([])
-  } finally {
-    release.resolve()
-  }
-  await expect.poll(() => mock.prompts.length).toBe(1)
-  expect(mock.calls).toEqual([
-    { type: "mcp", directory, enabled: false },
-    { type: "session", directory },
-    { type: "prompt", directory },
-  ])
-})
-
-test("changing worktrees does not wait for another directory's pending MCP update", async ({ page }) => {
-  const mock = await openDraft(page)
-  const release = Promise.withResolvers<void>()
-  mock.state.hold = release.promise
-  mock.state.holdDirectory = directory
-  await page.locator('[data-component="composer-editor"]').fill("Run in the selected worktree")
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-  await summary.getByRole("button", { name: "MCP", exact: true }).click()
-  const menu = page.getByRole("dialog", { name: "MCP", exact: true })
-  try {
-    await expect(menu.getByRole("switch", { name: "summary-mcp", exact: true })).toBeEnabled()
-    await menu.getByText("summary-mcp", { exact: true }).click()
-    await expect.poll(() => mock.calls.length).toBe(1)
-    await page.keyboard.press("Escape")
-    await summary.getByRole("button", { name: "Local repository", exact: true }).click()
-    await page.getByRole("menuitem", { name: "Worktree", exact: true }).click()
-    await page.getByRole("menuitem", { name: "existing-worktree", exact: true }).click()
-    await summary.getByRole("button", { name: "MCP", exact: true }).click()
-    const toggle = menu.getByRole("switch", { name: "summary-mcp", exact: true })
-    await expect(toggle).toBeEnabled()
-    await expect(toggle).not.toBeChecked()
-    await menu.getByText("summary-mcp", { exact: true }).click()
-    await expect(toggle).toBeChecked()
-    await expect(toggle).toBeEnabled()
-    await page.keyboard.press("Escape")
-    await page.keyboard.press("Escape")
-    await page.locator('[data-action="composer-submit"]').click()
-    await expect.poll(() => mock.prompts.length).toBe(1)
-    expect(mock.calls.find((call) => call.type === "session")?.directory).toBe(workspace)
-    expect(mock.status.get(directory)).toBe("connected")
-  } finally {
-    release.resolve()
-  }
-})
-
-test("failed MCP preparation restores the draft and reuses the created worktree", async ({ page }) => {
-  const mock = await openDraft(page, "create")
-  mock.state.fail = true
-  await page.locator('[data-component="composer-editor"]').fill("Keep this prompt on failure")
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  await page.getByRole("dialog", { name: "MCP", exact: true }).getByText("summary-mcp", { exact: true }).click()
-  await page.keyboard.press("Escape")
-  await page.keyboard.press("Escape")
-  await page.locator('[data-action="composer-submit"]').click()
-  await expect(page.getByText("Request failed", { exact: true })).toBeVisible()
-  await expect(page).toHaveURL(draftPath)
-  await expect(page.locator('[data-component="composer-editor"]')).toHaveText("Keep this prompt on failure")
-  await expect(page.getByRole("button", { name: "created-worktree", exact: true })).toBeVisible()
-  expect(mock.prompts).toEqual([])
-  expect(mock.calls.map((call) => call.type)).toEqual(["worktree", "mcp"])
-  mock.state.fail = false
-  await expect(page.locator('[data-action="composer-submit"]')).toBeEnabled()
-  await page.locator('[data-action="composer-submit"]').click()
-  await expect.poll(() => mock.prompts.length).toBe(1)
-  expect(mock.calls.filter((call) => call.type === "worktree")).toHaveLength(1)
-  expect(mock.status.get(createdWorkspace)).toBe("disabled")
-  expect(mock.prompts[0].body.text).toBe("Keep this prompt on failure")
-})
-
-test("new worktree sign-in completes before the draft can send", async ({ page, context }) => {
-  const mock = await openDraft(page, "create")
-  mock.status.set(createdWorkspace, "needs_auth")
-  const attempts: string[] = []
-  await context.route("https://auth.example.test/**", (route) => route.fulfill({ body: "Sign in" }))
-  await page.route("**/api/integration/**", (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    if (route.request().method() === "POST") {
-      attempts.push(new URL(route.request().url()).searchParams.get("location[directory]") ?? "")
-      return route.fulfill({
-        json: { location: { directory: createdWorkspace }, data: { url: "https://auth.example.test/authorize" } },
-      })
-    }
-    return route.fulfill({
-      json: {
-        location: { directory: createdWorkspace },
-        data: {
-          id: "summary-oauth",
-          methods: [{ id: "oauth", type: "oauth" }],
-        },
-      },
-    })
-  })
-  await page.locator('[data-component="composer-editor"]').fill("Wait for my sign-in")
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  const menu = page.getByRole("dialog", { name: "MCP", exact: true })
-  const toggle = menu.getByRole("switch", { name: "summary-mcp", exact: true })
-  await expect(toggle).toBeChecked()
-  await menu.getByText("summary-mcp", { exact: true }).click()
-  await expect(toggle).not.toBeChecked()
-  await menu.getByText("summary-mcp", { exact: true }).click()
-  await expect(toggle).toBeChecked()
-  await page.keyboard.press("Escape")
-  await page.keyboard.press("Escape")
-  const popup = page.waitForEvent("popup")
-  await page.locator('[data-action="composer-submit"]').click()
-  await expect(await popup).toHaveURL("https://auth.example.test/authorize")
-  await expect(page).toHaveURL(draftPath)
-  await expect(page.locator('[data-component="composer-editor"]')).toHaveText("Wait for my sign-in")
-  expect(attempts).toEqual([createdWorkspace])
-  expect(mock.prompts).toEqual([])
-  mock.status.set(createdWorkspace, "connected")
-  await page.locator('[data-action="composer-submit"]').click()
-  await expect.poll(() => mock.prompts.length).toBe(1)
-  expect(mock.calls.filter((call) => call.type === "worktree")).toHaveLength(1)
-  expect(attempts).toHaveLength(1)
-})
-
-async function openDraft(page: Page, worktree = "main") {
-  const project = {
-    id: "proj_new_summary",
-    worktree: directory,
-    name: "summary-project",
-    vcs: "git",
-    time: { created: 1, updated: 1 },
-    sandboxes: [workspace],
-  }
-  const sessions: ReturnType<typeof currentSession>[] = []
-  const status = new Map<string, string>([
-    [directory, "connected"],
-    [workspace, "disabled"],
-    [createdWorkspace, "connected"],
-  ])
-  const calls: { type: string; directory: string; enabled?: boolean }[] = []
-  const prompts: { sessionID: string; body: Record<string, unknown> }[] = []
-  const state: { fail: boolean; hold?: Promise<void>; holdDirectory?: string } = { fail: false }
-  await mockOpenCodeServer(page, {
-    directory,
-    project,
-    sessions,
-    provider: {
-      all: [
-        {
-          id: "opencode",
-          name: "OpenCode",
-          models: { "summary-model": { id: "summary-model", name: "Summary Model", limit: { context: 200_000 } } },
-        },
-      ],
-      connected: ["opencode"],
-      default: { providerID: "opencode", modelID: "summary-model" },
-    },
-    pageMessages: () => ({ items: [] }),
-    onPrompt(input) {
-      const session = sessions.find((session) => session.id === input.sessionID)
-      if (!session?.location.directory) throw new Error("Prompt arrived before session creation")
-      calls.push({ type: "prompt", directory: session.location.directory })
-      prompts.push(input)
-    },
-  })
-  await page.route("**/api/mcp**", async (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    const url = new URL(route.request().url())
-    const target = url.searchParams.get("location[directory]") ?? directory
-    if (route.request().method() === "POST") {
-      const enabled = url.pathname.endsWith("/connect")
-      calls.push({ type: "mcp", directory: target, enabled })
-      if (!state.holdDirectory || state.holdDirectory === target) await state.hold
-      if (state.fail) return route.fulfill({ status: 500, json: { message: "MCP fixture failed" } })
-      status.set(target, enabled ? "connected" : "disabled")
-      return route.fulfill({ status: 204 })
-    }
-    return route.fulfill({
-      json: {
-        location: { directory: target },
-        data:
-          url.pathname === "/api/mcp/resource"
-            ? { resources: [], templates: [] }
-            : [
-                {
-                  name: "summary-mcp",
-                  integrationID: "summary-oauth",
-                  status: { status: status.get(target) ?? "connected" },
-                },
-              ],
-      },
-    })
-  })
-  await page.route(
-    (url) => url.pathname === "/api/location",
-    (route) =>
-      route.fulfill({
-        json: {
-          directory: new URL(route.request().url()).searchParams.get("location[directory]") ?? directory,
-          project: { id: project.id, directory, canonical: directory },
-        },
-      }),
-  )
-  await page.route(
-    (url) => url.pathname === "/api/plugin",
-    (route) => {
-      const target = new URL(route.request().url()).searchParams.get("location[directory]") ?? directory
-      const id = target === directory ? "project-plugin" : "workspace-plugin"
-      return route.fulfill({
-        json: {
-          location: { directory: target },
-          data: [{ id, source: { type: "package", target: id }, features: {}, state: { status: "active" } }],
-        },
-      })
-    },
-  )
-  await page.route(
-    (url) => url.pathname === "/api/skill",
-    (route) =>
-      route.fulfill({
-        json: {
-          location: { directory: new URL(route.request().url()).searchParams.get("location[directory]") ?? directory },
-          data: [
-            {
-              id: "summary-skill",
-              name: "summary-skill",
-              location: "/skills/summary/SKILL.md",
-              content: "Summary skill",
-            },
-          ],
-        },
-      }),
-  )
-  await page.route(
-    (url) => url.pathname === "/api/config",
-    (route) =>
-      route.fulfill({
-        json: [{ type: "document", info: { lsp: { typescript: { command: ["typescript-language-server"] } } } }],
-      }),
-  )
-  await page.route(
-    (url) => url.pathname === "/api/worktree",
-    (route) => {
-      if (route.request().method() !== "POST") return route.fallback()
-      calls.push({ type: "worktree", directory })
-      project.sandboxes.push(createdWorkspace)
-      return route.fulfill({ json: { directory: createdWorkspace } })
-    },
-  )
-  await page.route(
-    (url) => url.pathname === "/api/session",
-    (route) => {
-      if (route.request().method() !== "POST") return route.fallback()
-      const body: { id: string; location: { directory: string } } = route.request().postDataJSON()
-      calls.push({ type: "session", directory: body.location.directory })
-      const session = currentSession(
-        { ...body, projectID: project.id, title: "Created summary session" },
-        body.location.directory,
-      )
-      sessions.push(session)
-      return route.fulfill({ json: { data: session } })
-    },
-  )
-  await page.addInitScript(
-    ({ directory, server, draftID, secondDraftID, worktree }) => {
-      if (!localStorage.getItem("opencode.global.dat:server"))
-        localStorage.setItem(
-          "opencode.global.dat:server",
-          JSON.stringify({
-            projects: { local: [{ worktree: directory, expanded: true }] },
-            lastProject: { local: directory },
-          }),
-        )
-      if (!localStorage.getItem("opencode.window.browser.dat:tabs"))
-        localStorage.setItem(
-          "opencode.window.browser.dat:tabs",
-          JSON.stringify([
-            { type: "draft", draftID, server, directory, worktree },
-            { type: "draft", draftID: secondDraftID, server, directory, worktree },
-          ]),
-        )
-    },
-    { directory, server, draftID, secondDraftID, worktree },
-  )
-  await page.goto(draftPath)
-  await expect(page.locator('[data-component="composer-editor"]')).toBeEditable()
-  await expect(page.locator('[data-action="composer-model"]')).toContainText("Summary Model")
-  await expect(
-    page.getByRole("button", { name: worktree === "create" ? "New worktree" : "Local", exact: true }),
-  ).toBeVisible()
-  return { calls, prompts, status, state }
-}

packages/app/e2e/regression/new-session-workspace-branch.spec.ts

@@ -22,6 +22,10 @@ test("selects a base branch for a new workspace", async ({ page }) => {
     pageMessages: () => ({ items: [] }),
     vcsBranches: ["feature/api", "main", "origin/release"],
   })
+  await page.route("**/api/vcs/branches?*", (route) => {
+    if (new URL(route.request().url()).searchParams.get("search") !== "feature") return route.fallback()
+    return route.fulfill({ json: { location: { directory }, data: ["feature/api"] } })
+  })
   await page.addInitScript(
     ({ directory, draftID, server }) => {
       localStorage.setItem(
@@ -44,10 +48,28 @@ test("selects a base branch for a new workspace", async ({ page }) => {
   await page.getByRole("button", { name: "Local", exact: true }).click()
   await page.getByRole("menuitem", { name: "New worktree", exact: true }).click()
   await page.getByRole("button", { name: "from main", exact: true }).click()
+  const search = page.getByRole("textbox", { name: "Search branches", exact: true })
+  await expect(search).toBeFocused()
+  await page.keyboard.type("feature")
+  await expect(search).toHaveValue("feature")
+  await expect(page.getByRole("menuitemradio")).toHaveText(["feature/api"])
+  await expect(search).toBeFocused()
   await page.getByRole("menuitemradio", { name: "feature/api", exact: true }).click()
 
   const selected = page.getByRole("button", { name: "from feature/api", exact: true })
   await expect(selected).toBeVisible()
   await selected.click()
+  await expect(search).toBeFocused()
+  await expect(search).toHaveValue("")
   await expect(page.getByRole("menuitemradio", { name: "feature/api", exact: true })).toBeChecked()
+  await page.keyboard.press("Escape")
+  await expect(selected).toBeFocused()
+  await page.keyboard.press("Enter")
+  await expect(search).toBeFocused()
+  await page.keyboard.type("feature")
+  await expect(search).toHaveValue("feature")
+  await expect(page.getByRole("menuitemradio")).toHaveText(["feature/api"])
+  await page.getByRole("button", { name: "Clear", exact: true }).click()
+  await expect(search).toHaveValue("")
+  await expect(page.getByRole("menuitemradio")).toHaveText(["feature/api", "main", "origin/release"])
 })

packages/app/e2e/regression/review-toggle-position.spec.ts

@@ -238,16 +238,9 @@ async function expectHeaderClearOfToggle(page: Page, toggle: Locator, progress:
     })
     const chatBounds = chat.getBoundingClientRect()
     const panelBounds = document.querySelector("#review-panel")!.getBoundingClientRect()
-    const summaryBounds = document
-      .querySelector('[data-session-title] button[aria-label="Session details"]')!
-      .getBoundingClientRect()
     return {
       row: row.getBoundingClientRect().width,
       panelWidth: panelBounds.width,
-      timelineControlInset:
-        getComputedStyle(row).direction === "rtl"
-          ? summaryBounds.left - chatBounds.left
-          : chatBounds.right - summaryBounds.right,
       gap:
         getComputedStyle(row).direction === "rtl"
           ? chatBounds.left - panelBounds.right
@@ -257,8 +250,6 @@ async function expectHeaderClearOfToggle(page: Page, toggle: Locator, progress:
     }
   }, progress)
   expect(geometry.gap).toBeCloseTo(8, 1)
-  // Reserve the fixed toggle's 28px width, the 8px control gap, and the 12px header inset.
-  expect(geometry.timelineControlInset).toBeCloseTo(48, 1)
   if (geometry.panelWidth > 0) expect(Math.abs(geometry.row - geometry.panels)).toBeLessThanOrEqual(1)
   if (progress === 0.25) {
     expect(geometry.contentOpacity).toBeGreaterThan(0)

packages/app/e2e/regression/session-header-controls.spec.ts

@@ -4,7 +4,7 @@ import { installStressSessionTabs, stressSessionHref } from "../performance/time
 import { mockOpenCodeServer } from "../utils/mock-server"
 
 for (const direction of ["ltr", "rtl"] as const) {
-  test(`session header groups controls and exposes session details in ${direction}`, async ({ page }) => {
+  test(`session header groups controls and exposes server status in ${direction}`, async ({ page }) => {
     await mockOpenCodeServer(page, {
       directory: fixture.directory,
       project: fixture.project,
@@ -31,7 +31,7 @@ for (const direction of ["ltr", "rtl"] as const) {
     await expect(review).toBeVisible()
     await expect(details).toBeVisible()
     const status = page.locator('[data-slot="titlebar-v2"]').getByRole("button", { name: "Status" })
-    await expect(status).toHaveCount(0)
+    await expect(status).toBeVisible()
     const titleBounds = await header.getByRole("heading").boundingBox()
     expect(titleBounds).not.toBeNull()
     for (const editing of [false, true]) {
@@ -122,11 +122,12 @@ for (const direction of ["ltr", "rtl"] as const) {
       .toBe(true)
     await expect(page.getByRole("menuitem", { name: "Server status", exact: true })).toHaveCount(0)
     await page.keyboard.press("Escape")
-    await details.click()
-    const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-    const mcp = summary.getByRole("button", { name: "MCP", exact: true })
-    await expect(mcp).toBeVisible()
-    await expect(summary.getByRole("button", { name: "Plugins", exact: true })).toBeVisible()
+    await status.click()
+    const mcp = page.getByRole("tab", { name: "MCP", exact: true })
+    const plugins = page.getByRole("tab", { name: "Plugins", exact: true })
+    await expect(mcp).toHaveAttribute("aria-selected", "true")
+    await plugins.click()
+    await expect(plugins).toHaveAttribute("aria-selected", "true")
     await page.keyboard.press("Escape")
     await expect(mcp).toBeHidden()
   })

packages/app/e2e/regression/session-prompt-spacing.spec.ts

@@ -0,0 +1,74 @@
+import { expect, test } from "@playwright/test"
+import { sessionID, setupTimeline, userMessage } from "../performance/timeline-stability/fixture"
+
+test("keeps a submitted prompt in place while its optimistic rows are measured", async ({ page }) => {
+  await setupTimeline(page, { messages: [userMessage()], seedHistory: true })
+  const release = Promise.withResolvers<void>()
+  await page.route(`**/api/session/${sessionID}/prompt`, async (route) => {
+    if (route.request().method() !== "POST") return route.fallback()
+    await release.promise
+    return route.fallback()
+  })
+
+  const editor = page.locator('[data-component="composer"]').getByRole("textbox")
+  await expect(editor).toBeEditable()
+  await editor.fill("Observe optimistic prompt spacing.")
+  await expect
+    .poll(() =>
+      page.locator("[data-timeline-virtual-content]").evaluate((element) => {
+        const root = element.parentElement!
+        return root.scrollHeight - root.clientHeight - root.scrollTop
+      }),
+    )
+    .toBe(0)
+
+  const observation = await page.evaluateHandle(() => {
+    const frames: { prompt?: number; working: boolean }[] = []
+    let frame = 0
+    const sample = () => {
+      const prompt = [...document.querySelectorAll<HTMLElement>('[data-timeline-row="UserMessage"]')].find((row) =>
+        row.textContent?.includes("Observe optimistic prompt spacing."),
+      )
+      frames.push({
+        ...(prompt ? { prompt: prompt.getBoundingClientRect().y } : {}),
+        working: !!document.querySelector('[data-component="session-working"]'),
+      })
+      frame = requestAnimationFrame(sample)
+    }
+    frame = requestAnimationFrame(sample)
+    return {
+      stop: () => {
+        cancelAnimationFrame(frame)
+        return frames
+      },
+    }
+  })
+  const requested = page.waitForRequest(
+    (request) => request.method() === "POST" && new URL(request.url()).pathname === `/api/session/${sessionID}/prompt`,
+  )
+  try {
+    await editor.press("Enter")
+    await requested
+    const prompt = page
+      .locator('[data-timeline-row="UserMessage"]')
+      .filter({ hasText: "Observe optimistic prompt spacing." })
+    await expect(prompt).toBeInViewport()
+    await expect(page.locator('[data-component="session-working"]')).toBeVisible()
+    await expect
+      .poll(() =>
+        page.locator("[data-timeline-virtual-content]").evaluate((element) => {
+          const root = element.parentElement!
+          return root.scrollHeight - root.clientHeight - root.scrollTop
+        }),
+      )
+      .toBe(0)
+    const frames = await observation.evaluate((value) => value.stop())
+    expect(frames.some((frame) => frame.working && frame.prompt === undefined)).toBe(false)
+    const positions = frames.flatMap((frame) => (frame.prompt === undefined ? [] : [frame.prompt]))
+    expect(positions.length).toBeGreaterThan(0)
+    expect(new Set(positions).size).toBe(1)
+  } finally {
+    release.resolve()
+    await observation.dispose()
+  }
+})

packages/app/e2e/regression/session-summary-layout.spec.ts

@@ -1,56 +0,0 @@
-import { expect, test } from "@playwright/test"
-import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
-import { mockStressTimeline, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
-
-for (const theme of ["light", "dark"] as const) {
-  test(`summary bounds long service lists in ${theme}`, async ({ page }, testInfo) => {
-    await page.setViewportSize({ width: 800, height: 600 })
-    await mockStressTimeline(page)
-    await page.addInitScript((theme) => {
-      localStorage.setItem("opencode-theme-id", "oc-2")
-      localStorage.setItem("opencode-color-scheme", theme)
-      localStorage.setItem("opencode.global.dat:language", JSON.stringify({ locale: theme === "dark" ? "he" : "en" }))
-    }, theme)
-    await page.route("**/api/mcp**", (route) => {
-      if (route.request().method() === "OPTIONS") return route.fallback()
-      return route.fulfill({
-        json: {
-          location: { directory: fixture.directory },
-          data:
-            new URL(route.request().url()).pathname === "/api/mcp/resource"
-              ? { resources: [], templates: [] }
-              : Array.from({ length: 30 }, (_, index) => ({
-                  name: `server-${String(index).padStart(2, "0")}-בדיקה-${"long-name-".repeat(6)}`,
-                  status: { status: "connected" },
-                })),
-        },
-      })
-    })
-    await page.goto(stressSessionHref(fixture.targetID))
-    await expect(page.locator("html")).toHaveAttribute("data-color-scheme", theme)
-    await page.getByRole("button", { name: theme === "dark" ? "פרטי ההפעלה" : "Session details", exact: true }).click()
-    const summary = page.locator('[data-component="session-summary-panel"]')
-    await summary.getByRole("button", { name: "MCP", exact: true }).click()
-    const menu = page.getByRole("dialog", { name: "MCP", exact: true })
-    await expect(menu.getByRole("switch")).toHaveCount(30)
-    await expect.poll(() => menu.evaluate((element) => element.scrollHeight > element.clientHeight)).toBe(true)
-    await expect
-      .poll(async () => {
-        const bounds = await menu.boundingBox()
-        return (
-          !!bounds &&
-          bounds.x >= 15 &&
-          bounds.y >= 15 &&
-          bounds.x + bounds.width <= 785 &&
-          bounds.y + bounds.height <= 585
-        )
-      })
-      .toBe(true)
-    await testInfo.attach(`summary-${theme}-long-list`, { body: await page.screenshot(), contentType: "image/png" })
-    await menu.getByRole("switch", { name: /^server-29-/ }).focus()
-    await expect(menu.getByRole("switch", { name: /^server-29-/ })).toBeFocused()
-    await page.keyboard.press("Escape")
-    await expect(menu).toBeHidden()
-    await expect(summary.getByRole("button", { name: "MCP", exact: true })).toBeFocused()
-  })
-}

packages/app/e2e/regression/session-summary-mcp.spec.ts

@@ -1,168 +0,0 @@
-import { expect, test } from "@playwright/test"
-import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
-import { mockStressTimeline, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
-
-test("every MCP row hit area toggles exactly once and keeps the submenu open", async ({ page }, testInfo) => {
-  await mockStressTimeline(page)
-  const state = { enabled: true }
-  const writes: string[] = []
-  await page.route("**/api/mcp**", (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    const url = new URL(route.request().url())
-    const directory = url.searchParams.get("location[directory]")
-    if (route.request().method() === "POST") {
-      expect(directory).toBe(fixture.directory)
-      writes.push(url.pathname)
-      state.enabled = url.pathname.endsWith("/connect")
-      return route.fulfill({ status: 204 })
-    }
-    return route.fulfill({
-      json: {
-        location: { directory: fixture.directory },
-        data:
-          url.pathname === "/api/mcp/resource"
-            ? { resources: [], templates: [] }
-            : [
-                { name: "figma", status: { status: state.enabled ? "connected" : "disabled" } },
-                { name: "linear", status: { status: "needs_auth" }, integrationID: "linear-oauth" },
-                { name: "playwright", status: { status: "failed", error: "Connection refused" } },
-                { name: "waiting", status: { status: "pending" } },
-              ],
-      },
-    })
-  })
-  await page.goto(stressSessionHref(fixture.targetID))
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  const submenu = page.getByRole("dialog", { name: "MCP", exact: true })
-  const toggle = submenu.getByRole("switch", { name: "figma", exact: true })
-  const row = submenu
-    .locator('[data-component="switch"]')
-    .filter({ has: page.getByRole("switch", { name: "figma", exact: true }) })
-  await expect(toggle).toBeChecked()
-  await expect(submenu.getByRole("switch", { name: "playwright", exact: true })).toBeChecked()
-  await expect(submenu.getByRole("switch", { name: "playwright", exact: true })).toHaveAccessibleDescription("Failed")
-  await expect(submenu.getByRole("switch", { name: "waiting", exact: true })).toBeDisabled()
-  await expect(submenu.getByRole("switch", { name: "waiting", exact: true })).toHaveAccessibleDescription("Connecting…")
-  await expect(submenu.getByRole("switch", { name: "linear", exact: true })).toHaveAccessibleDescription(
-    "Sign in required",
-  )
-  await testInfo.attach("summary-mcp-states", { body: await page.screenshot(), contentType: "image/png" })
-
-  for (const [index, target] of ["label", "dot", "padding", "control", "keyboard"].entries()) {
-    const enabled = index % 2 !== 0
-    await expect(toggle).toBeEnabled()
-    if (target === "label") await row.getByText("figma", { exact: true }).click()
-    if (target === "dot") await row.locator(".session-service-dot").click()
-    if (target === "padding") await row.click({ position: { x: 3, y: 3 } })
-    if (target === "control") await row.locator('[data-slot="switch-control"]').click()
-    if (target === "keyboard") await toggle.press("Space")
-    await expect(toggle).toBeChecked({ checked: enabled })
-    await expect(toggle).toBeEnabled()
-    await expect(submenu).toBeVisible()
-    if (target === "keyboard") await expect(toggle).toBeFocused()
-    expect(writes).toHaveLength(index + 1)
-    expect(writes[index]).toBe(`/api/mcp/figma/${enabled ? "connect" : "disconnect"}`)
-  }
-})
-
-test("MCP authentication starts before a slow resource catalog finishes", async ({ page, context }) => {
-  await mockStressTimeline(page)
-  const state = { status: "disabled" }
-  const attempts: string[] = []
-  const resources = Promise.withResolvers<void>()
-  await context.route("https://auth.example.test/**", (route) => route.fulfill({ body: "Sign in" }))
-  await page.route("**/api/mcp**", async (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    const url = new URL(route.request().url())
-    if (url.pathname.endsWith("/connect")) {
-      state.status = "needs_auth"
-      return route.fulfill({ status: 204 })
-    }
-    if (url.pathname === "/api/mcp/resource" && state.status === "needs_auth") await resources.promise
-    return route.fulfill({
-      json: {
-        location: { directory: fixture.directory },
-        data:
-          url.pathname === "/api/mcp/resource"
-            ? { resources: [], templates: [] }
-            : [{ name: "linear", integrationID: "linear-oauth", status: { status: state.status } }],
-      },
-    })
-  })
-  await page.route("**/api/integration/**", (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    if (route.request().method() === "POST") {
-      attempts.push(route.request().url())
-      return route.fulfill({
-        json: { location: { directory: fixture.directory }, data: { url: "https://auth.example.test/authorize" } },
-      })
-    }
-    return route.fulfill({
-      json: {
-        location: { directory: fixture.directory },
-        data: {
-          id: "linear-oauth",
-          methods: [{ id: "oauth", type: "oauth" }],
-        },
-      },
-    })
-  })
-  await page.goto(stressSessionHref(fixture.targetID))
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  await page.getByRole("button", { name: "MCP", exact: true }).click()
-  const submenu = page.getByRole("dialog", { name: "MCP", exact: true })
-  const toggle = submenu.getByRole("switch", { name: "linear", exact: true })
-  await expect(toggle).toBeEnabled()
-  const refresh = page.waitForRequest(
-    (request) =>
-      state.status === "needs_auth" &&
-      new URL(request.url()).pathname === "/api/mcp/resource" &&
-      request.method() === "GET",
-  )
-  try {
-    const popup = page.waitForEvent("popup")
-    await submenu.getByText("linear", { exact: true }).click()
-    await expect(await popup).toHaveURL("https://auth.example.test/authorize")
-    await refresh
-    await expect(toggle).toBeChecked()
-    await expect(toggle).toHaveAccessibleDescription("Sign in required")
-  } finally {
-    resources.resolve()
-  }
-  await expect(toggle).toBeEnabled()
-  expect(attempts).toHaveLength(1)
-  expect(new URL(attempts[0]).searchParams.get("location[directory]")).toBe(fixture.directory)
-})
-
-test("multiple desktop connections show the session's server name", async ({ page }) => {
-  await mockStressTimeline(page)
-  await page.route("http://secondary.test/**", (route) => route.fulfill({ json: { healthy: true, version: "2.0.0" } }))
-  await page.addInitScript(
-    ({ directory, server }) => {
-      const current = { type: "http", http: { url: server }, displayName: "Design server" }
-      localStorage.setItem(
-        "opencode.global.dat:server",
-        JSON.stringify({
-          list: [current, { type: "http", http: { url: "http://secondary.test" }, displayName: "Other server" }],
-          projects: { local: [{ worktree: directory, expanded: true }] },
-          hidden: {},
-          lastProject: {},
-          recentlyClosed: {},
-        }),
-      )
-    },
-    {
-      directory: fixture.directory,
-      server: `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`,
-    },
-  )
-  await page.goto(stressSessionHref(fixture.targetID))
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-  await expect(summary.getByRole("button", { name: "Design server", exact: true })).toHaveAttribute(
-    "aria-expanded",
-    "true",
-  )
-  await expect(summary.getByRole("button", { name: "Server", exact: true })).toHaveCount(0)
-})

packages/app/e2e/regression/session-summary-refresh.spec.ts

@@ -1,125 +0,0 @@
-import { expect, test } from "@playwright/test"
-import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
-import { mockStressTimeline, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
-
-const services = [
-  { name: "MCP", path: "/api/mcp", empty: "No MCP servers configured yet", item: "summary-mcp" },
-  { name: "Plugins", path: "/api/plugin", empty: "No plugins configured yet", item: "summary-plugin" },
-  { name: "Skills", path: "/api/skill", empty: "No skills configured yet", item: "summary-skill" },
-  { name: "LSP", path: "/api/config", empty: "No LSP servers explicitly configured", item: "summary-lsp" },
-] as const
-
-for (const service of services) {
-  for (const empty of [false, true]) {
-    test(`${service.name} keeps ${empty ? "its empty state" : "cached items"} visible while reopening and refreshing`, async ({
-      page,
-    }, testInfo) => {
-      await mockStressTimeline(page)
-      const warnings: string[] = []
-      page.on("console", (event) => {
-        if (event.text().includes("computations created outside")) warnings.push(event.text())
-      })
-      const state = { hold: false }
-      const response = Promise.withResolvers<void>()
-      await page.route(
-        (url) => url.pathname === service.path,
-        async (route) => {
-          if (route.request().method() === "OPTIONS") return route.fallback()
-          if (state.hold) await response.promise
-          if (service.name === "LSP")
-            return route.fulfill({
-              json: empty ? [] : [{ type: "document", info: { lsp: { "summary-lsp": { command: ["summary-lsp"] } } } }],
-            })
-          const items =
-            service.name === "MCP"
-              ? [{ name: service.item, status: { status: "connected" } }]
-              : service.name === "Plugins"
-                ? [
-                    {
-                      id: service.item,
-                      source: { type: "package", target: service.item },
-                      features: {},
-                      state: { status: "active" },
-                    },
-                  ]
-                : [{ id: service.item, name: service.item, location: "/skills/summary/SKILL.md", content: "Summary" }]
-          return route.fulfill({ json: { location: { directory: fixture.directory }, data: empty ? [] : items } })
-        },
-      )
-
-      await page.goto(stressSessionHref(fixture.targetID))
-      await page.getByRole("button", { name: "Session details", exact: true }).click()
-      const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-      const trigger = summary.getByRole("button", { name: service.name, exact: true })
-      await trigger.click()
-      const menu = page.getByRole("dialog", { name: service.name, exact: true })
-      const content = menu.getByText(empty ? service.empty : service.item, { exact: true })
-      await expect(content).toBeVisible()
-      await expect(menu).toHaveAttribute("aria-busy", "false")
-      await expect(menu).toHaveCSS("width", empty ? "200px" : "280px")
-      if (empty) {
-        const message = menu.locator(".session-service-empty")
-        await expect(message).toHaveCSS("padding", "8px 12px")
-        await expect(message).toHaveCSS("gap", "8px")
-        await expect(message).toHaveCSS("font-size", "11px")
-        await expect(message).toHaveCSS("line-height", "16px")
-        await expect(message.locator("strong")).toHaveCSS("font-weight", "530")
-        await expect(message.locator("p")).toHaveCSS("font-weight", "440")
-        await testInfo.attach(`${service.name}-empty`, { body: await menu.screenshot(), contentType: "image/png" })
-      }
-      await page.keyboard.press("Escape")
-      await expect(menu).toBeHidden()
-      state.hold = true
-      const refresh = page.waitForRequest(
-        (request) => request.method() === "GET" && new URL(request.url()).pathname === service.path,
-      )
-      try {
-        await trigger.click()
-        await refresh
-        await expect(menu).toHaveAttribute("aria-busy", "true")
-        await expect(content).toBeVisible()
-        await expect(menu.getByRole("status")).toHaveCount(0)
-        await expect(menu).toHaveCSS("width", empty ? "200px" : "280px")
-        await expect(summary).toBeVisible()
-      } finally {
-        response.resolve()
-      }
-      await expect(menu).toHaveAttribute("aria-busy", "false")
-      await expect(content).toBeVisible()
-      expect(warnings).toEqual([])
-    })
-  }
-}
-
-test("prefetching plugins does not suspend the summary or report an empty catalog", async ({ page }) => {
-  await mockStressTimeline(page)
-  const response = Promise.withResolvers<void>()
-  const state = { requested: false }
-  await page.route(
-    (url) => url.pathname === "/api/plugin",
-    async (route) => {
-      if (route.request().method() === "OPTIONS") return route.fallback()
-      state.requested = true
-      await response.promise
-      return route.fulfill({ json: { location: { directory: fixture.directory }, data: [] } })
-    },
-  )
-  await page.goto(stressSessionHref(fixture.targetID))
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-  try {
-    await expect.poll(() => state.requested).toBe(true)
-    await expect(summary.getByRole("button", { name: fixture.project.name, exact: true })).toBeVisible()
-    await expect(summary.getByRole("button", { name: "Server", exact: true })).toBeVisible()
-    await summary.getByRole("button", { name: "Plugins", exact: true }).click()
-    const menu = page.getByRole("dialog", { name: "Plugins", exact: true })
-    await expect(menu.getByRole("status")).toContainText("Loading")
-    await expect(menu.getByText("No plugins configured yet", { exact: true })).toHaveCount(0)
-    await expect(summary).toBeVisible()
-  } finally {
-    response.resolve()
-  }
-  await expect(
-    page.getByRole("dialog", { name: "Plugins", exact: true }).getByText("No plugins configured yet", { exact: true }),
-  ).toBeVisible()
-})

packages/app/e2e/regression/session-summary.spec.ts

@@ -1,249 +0,0 @@
-import { expect, test } from "@playwright/test"
-import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
-import { mockStressTimeline, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
-
-for (const layout of ["horizontal", "vertical"] as const) {
-  test(`summary persists both disclosures across sessions with ${layout} tabs`, async ({ page }, testInfo) => {
-    await mockStressTimeline(page)
-    await page.addInitScript((layout) => {
-      const settings = JSON.parse(localStorage.getItem("settings.v3") ?? "{}")
-      localStorage.setItem(
-        "settings.v3",
-        JSON.stringify({
-          ...settings,
-          appearance: { ...settings.appearance, tabLayout: layout },
-          general: { ...settings.general, showStatus: true },
-        }),
-      )
-    }, layout)
-    await page.goto(stressSessionHref(fixture.targetID))
-    const trigger = page.getByRole("button", { name: "Session details", exact: true })
-    await expect(trigger).toBeEnabled()
-    await expect(page.getByRole("button", { name: "Status", exact: true })).toHaveCount(0)
-    await trigger.click()
-    const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-    const project = summary.getByRole("button", { name: fixture.project.name, exact: true })
-    const server = summary.getByRole("button", { name: "Server", exact: true })
-    await expect(project).toHaveAttribute("aria-expanded", "true")
-    await expect(server).toHaveAttribute("aria-expanded", "true")
-    for (const heading of [project, server]) {
-      await expect(heading).toHaveCSS("column-gap", "8px")
-      await expect(heading.locator(".session-summary-heading-label")).toHaveCSS("column-gap", "4px")
-      await expect(heading.locator(".session-summary-disclosure")).toHaveAttribute("width", "16")
-      await expect(heading.locator(".session-summary-disclosure")).toHaveAttribute("height", "16")
-    }
-    await expect(summary.getByRole("button", { name: "MCP", exact: true })).toBeVisible()
-    await testInfo.attach(`summary-${layout}`, { body: await page.screenshot(), contentType: "image/png" })
-    await project.click()
-    await expect(project).toHaveAttribute("aria-expanded", "false")
-    await expect(summary.getByRole("button", { name: "No changes", exact: true })).toHaveCount(0)
-    await expect(server).toHaveAttribute("aria-expanded", "true")
-    await server.click()
-    await expect(summary.getByRole("button", { name: "MCP", exact: true })).toHaveCount(0)
-    await page.keyboard.press("Escape")
-    await expect(summary).toBeHidden()
-    await expect(trigger).toBeFocused()
-    await trigger.click()
-    await expect(project).toHaveAttribute("aria-expanded", "false")
-    await expect(server).toHaveAttribute("aria-expanded", "false")
-    await expect
-      .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem("settings.v3") ?? "{}").sessionSummary))
-      .toEqual({ projectExpanded: false, serverExpanded: false })
-
-    await page.goto(stressSessionHref(fixture.sourceID))
-    await trigger.click()
-    await expect(project).toHaveAttribute("aria-expanded", "false")
-    await expect(server).toHaveAttribute("aria-expanded", "false")
-    await server.click()
-    await expect(summary.getByRole("button", { name: "MCP", exact: true })).toBeVisible()
-    await expect(project).toHaveAttribute("aria-expanded", "false")
-    await page.keyboard.press("Escape")
-    await page.keyboard.press("Control+,")
-    const settings = page.getByTestId("settings-screen")
-    await expect(settings).toBeVisible()
-    await expect(settings.getByText("Server status", { exact: true })).toHaveCount(0)
-  })
-}
-
-for (const direction of ["ltr", "rtl"] as const) {
-  test(`service submenus open on click and stay aligned with the view in ${direction}`, async ({ page }, testInfo) => {
-    await mockStressTimeline(page)
-    await page.goto(stressSessionHref(fixture.targetID))
-    await expect(page.getByRole("button", { name: "Session details", exact: true })).toBeEnabled()
-    if (direction === "rtl") {
-      await page.getByRole("button", { name: "Toggle debug tools", exact: true }).click()
-      await page.getByRole("button", { name: "DIR: LTR", exact: true }).click()
-      await expect(page.locator("html")).toHaveAttribute("dir", "rtl")
-      await page.getByRole("button", { name: "Toggle debug tools", exact: true }).click()
-    }
-    const warnings: string[] = []
-    page.on("console", (event) => {
-      if (event.text().includes("computations created outside")) warnings.push(event.text())
-    })
-    await page.getByRole("button", { name: "Session details", exact: true }).click()
-    const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-    const mcp = summary.getByRole("button", { name: "MCP", exact: true })
-    const submenu = page.getByRole("dialog", { name: "MCP", exact: true })
-    await mcp.hover()
-    await expect(submenu).toHaveCount(0)
-    await mcp.click()
-    await expect(submenu.getByText("No MCP servers configured yet", { exact: true })).toBeVisible()
-    await expect(summary).toBeVisible()
-    await expect
-      .poll(async () => {
-        const row = await mcp.boundingBox()
-        const menu = await submenu.boundingBox()
-        if (!row || !menu) return false
-        return direction === "ltr" ? menu.x + menu.width <= row.x : menu.x >= row.x + row.width
-      })
-      .toBe(true)
-    await testInfo.attach(`summary-submenu-${direction}`, { body: await page.screenshot(), contentType: "image/png" })
-    await page.keyboard.press("Escape")
-    await expect(submenu).toBeHidden()
-    await expect(summary).toBeVisible()
-    await expect(mcp).toBeFocused()
-    await mcp.press("Enter")
-    await expect(submenu.getByText("Add servers in opencode.json")).toBeVisible()
-    await mcp.click()
-    await expect(submenu).toBeHidden()
-
-    for (const [name, text] of [
-      ["Plugins", "No plugins configured yet"],
-      ["Skills", "No skills configured yet"],
-      ["LSP", "No LSP servers explicitly configured"],
-    ]) {
-      await summary.getByRole("button", { name, exact: true }).click()
-      await expect(page.getByRole("dialog", { name, exact: true }).getByText(text, { exact: true })).toBeVisible()
-      await expect(submenu).toBeHidden()
-    }
-    await summary.getByRole("button", { name: "Server", exact: true }).click()
-    await expect(page.getByRole("dialog", { name: "LSP", exact: true })).toBeHidden()
-    await page.keyboard.press("Escape")
-    await expect(summary).toBeHidden()
-
-    for (const reviewOpen of [false, true]) {
-      if (reviewOpen) await page.getByRole("button", { name: "Toggle review", exact: true }).click()
-      await page.getByRole("button", { name: "Session details", exact: true }).click()
-      await expect(summary).toBeVisible()
-      await expect
-        .poll(async () => {
-          const header = await page.locator("[data-session-title]").boundingBox()
-          const panel = await summary.boundingBox()
-          if (!header || !panel) return Infinity
-          return direction === "ltr"
-            ? Math.abs(header.x + header.width - panel.x - panel.width - 12)
-            : Math.abs(panel.x - header.x - 12)
-        })
-        .toBeLessThanOrEqual(1)
-      await page.keyboard.press("Escape")
-    }
-    expect(warnings).toEqual([])
-  })
-}
-
-test("catalog submenus show project plugins and skills, refresh on reopen, and distinguish errors from empty", async ({
-  page,
-}, testInfo) => {
-  await mockStressTimeline(page)
-  const state = { fail: true, extra: false }
-  const requests: string[] = []
-  await page.route("**/api/plugin**", (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    requests.push(new URL(route.request().url()).searchParams.get("location[directory]") ?? "")
-    if (state.fail) return route.fulfill({ status: 500, json: { message: "Unavailable" } })
-    return route.fulfill({
-      json: {
-        location: { directory: fixture.directory },
-        data: [
-          { id: "builtin", source: { type: "builtin" }, features: {}, state: { status: "active" } },
-          {
-            id: "supermemory",
-            source: { type: "package", target: "opencode-supermemory" },
-            features: { server: true },
-            state: { status: "active" },
-          },
-          {
-            id: "broken-plugin",
-            source: { type: "local", path: "/broken.ts" },
-            features: { server: true },
-            state: { status: "failed", error: "Plugin failed to activate" },
-          },
-          ...(state.extra
-            ? [
-                {
-                  id: "daytona",
-                  source: { type: "package", target: "opencode-daytona" },
-                  features: {},
-                  state: { status: "active" },
-                },
-              ]
-            : []),
-        ],
-      },
-    })
-  })
-  await page.route("**/api/skill**", (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    return route.fulfill({
-      json: {
-        location: { directory: fixture.directory },
-        data: [
-          { id: "find-skills", name: "find-skills", location: "/skills/find/SKILL.md", content: "Find skills" },
-          {
-            id: "review-animations",
-            name: "review-animations",
-            location: "/skills/review/SKILL.md",
-            content: "Review animations",
-          },
-        ],
-      },
-    })
-  })
-  await page.route("**/api/config**", (route) => {
-    if (route.request().method() === "OPTIONS") return route.fallback()
-    return route.fulfill({
-      json: [
-        {
-          type: "document",
-          info: {
-            lsp: {
-              typescript: { command: ["typescript-language-server", "--stdio"] },
-              rust: { command: ["rust-analyzer"] },
-            },
-          },
-        },
-        { type: "document", info: { lsp: { rust: { disabled: true } } } },
-      ],
-    })
-  })
-  await page.goto(stressSessionHref(fixture.targetID))
-  await page.getByRole("button", { name: "Session details", exact: true }).click()
-  const summary = page.getByRole("dialog", { name: "Session details", exact: true })
-  await summary.getByRole("button", { name: "Plugins", exact: true }).click()
-  const plugins = page.getByRole("dialog", { name: "Plugins", exact: true })
-  await expect(plugins.getByRole("alert")).toContainText("Request failed")
-  await expect(plugins.getByText("No plugins configured yet", { exact: true })).toHaveCount(0)
-  state.fail = false
-  await plugins.getByRole("button", { name: "Retry", exact: true }).click()
-  await expect(plugins.getByText("supermemory", { exact: true })).toBeVisible()
-  await expect(plugins.getByText("builtin", { exact: true })).toHaveCount(0)
-  await expect(plugins.getByTitle("Plugin failed to activate")).toContainText("Failed")
-  expect(requests.every((directory) => directory === fixture.directory)).toBe(true)
-  await testInfo.attach("summary-plugins", { body: await page.screenshot(), contentType: "image/png" })
-  await page.keyboard.press("Escape")
-  state.extra = true
-  await summary.getByRole("button", { name: "Plugins", exact: true }).click()
-  await expect(plugins.getByText("daytona", { exact: true })).toBeVisible()
-  await summary.getByRole("button", { name: "Skills", exact: true }).click()
-  const skills = page.getByRole("dialog", { name: "Skills", exact: true })
-  await expect(skills.getByText("find-skills", { exact: true })).toBeVisible()
-  await expect(skills.getByText("review-animations", { exact: true })).toBeVisible()
-  await expect(plugins).toBeHidden()
-  await summary.getByRole("button", { name: "LSP", exact: true }).click()
-  const lsp = page.getByRole("dialog", { name: "LSP", exact: true })
-  await expect(lsp.getByText("Configured LSPs", { exact: true })).toBeVisible()
-  await expect(lsp.getByText("typescript", { exact: true })).toBeVisible()
-  await expect(lsp.getByText("rust", { exact: true })).toHaveCount(0)
-  await expect(lsp.locator(".session-service-dot")).toHaveCount(0)
-  await testInfo.attach("summary-configured-lsp", { body: await page.screenshot(), contentType: "image/png" })
-})

packages/app/e2e/regression/session-timeline-cache.spec.ts

@@ -0,0 +1,315 @@
+import { expect, test } from "@playwright/test"
+import type { OpenCodeEvent, SessionMessageInfo } from "@opencode/client/promise"
+import { timelinePresets } from "@opencode/session-ui/timeline/detail"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
+import { installStressSessionTabs, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+import { waitForStableTimeline } from "../performance/timeline/session-tab-switch-probe"
+
+test.use({ viewport: { width: 1440, height: 900 }, serviceWorkers: "block" })
+
+test("recovers from a failed cold history load when another session is selected", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    ...fixture,
+    pageMessages: (id) => ({
+      items: [{ id: `msg_${id}`, type: "user", text: `History for ${id}`, time: { created: 1 } }],
+    }),
+  })
+  await page.route(`**/api/session/${fixture.targetID}/message?*`, (route) =>
+    route.fulfill({ status: 500, json: { message: "History unavailable" } }),
+  )
+  await installStressSessionTabs(page)
+  await page.goto(stressSessionHref(fixture.sourceID))
+  await expect(page.getByText(`History for ${fixture.sourceID}`, { exact: true })).toBeVisible()
+  await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.targetID)}"]`).click()
+  await expect(page.getByRole("heading", { name: "Something went wrong", exact: true })).toBeVisible()
+  await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.sourceID)}"]`).click()
+  await expect(page.getByText(`History for ${fixture.sourceID}`, { exact: true })).toBeVisible()
+  await expect(page.getByRole("heading", { name: "Something went wrong", exact: true })).toHaveCount(0)
+})
+
+test("focuses Find in the selected cached timeline", async ({ page }) => {
+  await mockOpenCodeServer(page, {
+    ...fixture,
+    pageMessages: (id) => ({
+      items: [{ id: `msg_${id}`, type: "user", text: `History for ${id}`, time: { created: 1 } }],
+    }),
+  })
+  await installStressSessionTabs(page)
+  await page.goto(stressSessionHref(fixture.sourceID))
+  await expect(page.getByText(`History for ${fixture.sourceID}`, { exact: true })).toBeVisible()
+  await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.targetID)}"]`).click()
+  await expect(page.getByText(`History for ${fixture.targetID}`, { exact: true })).toBeVisible()
+  await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.sourceID)}"]`).click()
+  await expect(page.getByText(`History for ${fixture.sourceID}`, { exact: true })).toBeVisible()
+  await page.keyboard.press("ControlOrMeta+f")
+  const search = page.locator('[data-component="timeline-search-bar"] input')
+  await expect(search).toBeFocused()
+  await page.keyboard.type("History")
+  await expect(search).toHaveValue("History")
+  await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.targetID)}"]`).click()
+  await expect(page.getByText(`History for ${fixture.targetID}`, { exact: true })).toBeVisible()
+  await page.keyboard.press("ControlOrMeta+f")
+  await expect(search).toBeFocused()
+  await search.press("Escape")
+  await expect(search).toHaveCount(0)
+})
+
+test("disposes the old workspace's shell while destination history is loading", async ({ page }) => {
+  const destination = "C:/OpenCode/OtherProject"
+  const requested = Promise.withResolvers<void>()
+  const release = Promise.withResolvers<void>()
+  const reads: string[] = []
+  const output = { text: "Initial shell output\n" }
+  await mockOpenCodeServer(page, {
+    ...fixture,
+    sessions: fixture.sessions.map((session) =>
+      session.id === fixture.targetID ? { ...session, directory: destination } : session,
+    ),
+    pageMessages: (id) => ({
+      items:
+        id === fixture.sourceID
+          ? ([
+              { id: "msg_workspace_source", type: "user", text: "Follow the shell", time: { created: 1 } },
+              {
+                id: "msg_workspace_shell",
+                type: "assistant",
+                agent: "build",
+                model: { id: "claude-opus-4-6", providerID: "opencode" },
+                time: { created: 2 },
+                content: [
+                  {
+                    type: "tool",
+                    id: "call_workspace_shell",
+                    name: "shell",
+                    time: { created: 2 },
+                    state: {
+                      status: "running",
+                      input: { command: "run checks" },
+                      metadata: { shellID: "sh_workspace_source" },
+                    },
+                  },
+                ],
+              },
+            ] satisfies SessionMessageInfo[])
+          : [],
+    }),
+    beforeMessagesResponse: async ({ sessionID }) => {
+      if (sessionID !== fixture.targetID) return
+      requested.resolve()
+      await release.promise
+    },
+  })
+  await page.route("**/api/shell/sh_workspace_source/output?*", (route) => {
+    const url = new URL(route.request().url())
+    const directory = url.searchParams.get("location[directory]")!
+    reads.push(directory)
+    if (directory !== fixture.directory)
+      return route.fulfill({ status: 404, json: { _tag: "ShellNotFoundError", id: "sh_workspace_source" } })
+    return route.fulfill({
+      json: {
+        location: { directory },
+        data: {
+          output: output.text.slice(Number(url.searchParams.get("cursor") ?? 0)),
+          cursor: output.text.length,
+          size: output.text.length,
+          truncated: false,
+        },
+      },
+    })
+  })
+  await installStressSessionTabs(page)
+  await page.addInitScript(
+    (detail) =>
+      localStorage.setItem(
+        "settings.v3",
+        JSON.stringify({
+          general: {
+            timelineDetail: { ...detail, shell: { placement: "separate", details: "expanded" } },
+          },
+        }),
+      ),
+    timelinePresets[2].value,
+  )
+  await page.goto(stressSessionHref(fixture.sourceID))
+  const shell = page.locator('[data-timeline-part-id="call_workspace_shell"]')
+  await expect(shell.locator('[data-slot="bash-result"]')).toContainText("Initial shell output")
+  const original = await page.locator("[data-timeline-virtual-content]").elementHandle()
+  try {
+    await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.targetID)}"]`).click()
+    await requested.promise
+    await expect(page.locator("[data-session-title]")).toHaveText(fixture.expected.targetTitle)
+    output.text += "Output after returning\n"
+    await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.sourceID)}"]`).click()
+    await expect(shell.locator('[data-slot="bash-result"]')).toContainText("Output after returning")
+    expect(await original!.evaluate((element) => element.isConnected)).toBe(false)
+    expect(reads.length).toBeGreaterThan(1)
+    expect(reads.every((directory) => directory === fixture.directory)).toBe(true)
+  } finally {
+    release.resolve()
+  }
+})
+
+test("loads the transcript code font before opening rich history", async ({ page }) => {
+  const font = page.waitForResponse((response) => /IBMPlexMono-Text[^/]*\.woff2/.test(response.url()))
+  await mockOpenCodeServer(page, {
+    directory: fixture.directory,
+    project: fixture.project,
+    provider: fixture.provider,
+    sessions: fixture.sessions,
+    pageMessages: () => ({
+      items: [{ id: "msg_font_source", type: "user", text: "A transcript with no code", time: { created: 1 } }],
+    }),
+  })
+  await installStressSessionTabs(page)
+  await page.goto(stressSessionHref(fixture.sourceID))
+  await expect(page.getByText("A transcript with no code", { exact: true })).toBeVisible()
+  expect((await font).ok()).toBe(true)
+  await expect.poll(() => page.evaluate(() => document.fonts.check('440 13px "IBM Plex Mono"'))).toBe(true)
+})
+
+test("waits for the requested session's history before constructing its cold timeline", async ({ page }) => {
+  const requested = Promise.withResolvers<void>()
+  const release = Promise.withResolvers<void>()
+  await mockOpenCodeServer(page, {
+    directory: fixture.directory,
+    project: fixture.project,
+    provider: fixture.provider,
+    sessions: fixture.sessions,
+    pageMessages: (id) => ({ items: fixture.messages[id] ?? [] }),
+    beforeMessagesResponse: async ({ sessionID }) => {
+      if (sessionID !== fixture.targetID) return
+      requested.resolve()
+      await release.promise
+    },
+  })
+  await installStressSessionTabs(page)
+  await page.goto(stressSessionHref(fixture.sourceID))
+  await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+  try {
+    await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.targetID)}"]`).click()
+    await requested.promise
+    await expect(page.locator("[data-timeline-virtual-content]")).toHaveCount(0)
+    release.resolve()
+    await waitForStableTimeline(page, fixture.expected.targetMessageIDs.at(-1)!)
+    await expect(page.locator("[data-timeline-virtual-content]")).toHaveCount(1)
+  } finally {
+    release.resolve()
+  }
+})
+
+for (const grouped of [true, false]) {
+  test(`restores a ${grouped ? "grouped" : "separate"} timeline after inactive updates and a resize`, async ({
+    page,
+  }) => {
+    const events: OpenCodeEvent[] = []
+    const messages: Record<string, SessionMessageInfo[]> = Object.fromEntries(
+      [fixture.sourceID, fixture.targetID].map((id) => [
+        id,
+        [
+          { id: `msg_user_${id}`, type: "user", text: `Prompt for ${id}`, time: { created: 1 } },
+          {
+            id: `msg_assistant_${id}`,
+            type: "assistant",
+            agent: "build",
+            model: { id: "claude-opus-4-6", providerID: "opencode" },
+            time: { created: 2, completed: 3 },
+            content: [
+              {
+                type: "tool",
+                id: `tool_${id}`,
+                name: "shell",
+                time: { created: 2, completed: 3 },
+                state: {
+                  status: "completed",
+                  input: { command: `echo ${id}` },
+                  metadata: {},
+                  content: [{ type: "text", text: `Output for ${id}` }],
+                },
+              },
+              { type: "text", text: `Answer for ${id}` },
+            ],
+          },
+        ] satisfies SessionMessageInfo[],
+      ]),
+    )
+    await mockOpenCodeServer(page, {
+      directory: fixture.directory,
+      project: fixture.project,
+      provider: fixture.provider,
+      sessions: fixture.sessions,
+      pageMessages: (id) => ({ items: messages[id] ?? [] }),
+      events: () => events.splice(0),
+    })
+    await installStressSessionTabs(page)
+    await page.addInitScript(
+      ({ grouped, detail }) => {
+        localStorage.setItem(
+          "settings.v3",
+          JSON.stringify({
+            general: {
+              timelineDetail: {
+                ...detail,
+                shell: { placement: grouped ? "grouped" : "separate", details: "collapsed" },
+              },
+            },
+          }),
+        )
+      },
+      { grouped, detail: timelinePresets[2].value },
+    )
+    await page.goto(stressSessionHref(fixture.sourceID))
+    await expect(page.getByText(`Answer for ${fixture.sourceID}`, { exact: true })).toBeVisible()
+    if (grouped)
+      await page
+        .locator(
+          '[data-component="collapsed-tool-group"] > [data-component="collapsible"] > [data-slot="collapsible-trigger"]',
+        )
+        .click()
+    const shell = page.locator(`[data-timeline-part-id="tool_${fixture.sourceID}"]`)
+    const trigger = shell.locator('[data-slot="collapsible-trigger"]')
+    await trigger.click()
+    await expect(shell.locator('[data-slot="bash-result"]')).toHaveText(`Output for ${fixture.sourceID}`)
+    const original = await page.locator("[data-timeline-virtual-content]").elementHandle()
+
+    await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.targetID)}"]`).click()
+    await expect(page.getByText(`Answer for ${fixture.targetID}`, { exact: true })).toBeVisible()
+    await expect(shell).toHaveCount(0)
+    expect(await original!.evaluate((element) => element.isConnected)).toBe(false)
+    await expect(page.locator("[data-timeline-virtual-content]")).toHaveCount(1)
+    events.push({
+      id: "evt_cached_text",
+      created: 4,
+      type: "session.text.ended",
+      location: { directory: fixture.directory },
+      durable: { aggregateID: fixture.sourceID, seq: 0, version: 1 },
+      data: {
+        sessionID: fixture.sourceID,
+        assistantMessageID: `msg_assistant_${fixture.sourceID}`,
+        ordinal: 0,
+        text: "Updated while inactive",
+      },
+    })
+    await page.setViewportSize({ width: 900, height: 650 })
+    await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(fixture.sourceID)}"]`).click()
+    await expect(page.getByText("Updated while inactive", { exact: true })).toBeVisible()
+    await expect(trigger).toHaveAttribute("aria-expanded", "true")
+    await expect(shell.locator('[data-slot="bash-result"]')).toHaveText(`Output for ${fixture.sourceID}`)
+    expect(await original!.evaluate((element) => element.isConnected)).toBe(true)
+    await expect(page.locator("[data-timeline-virtual-content]")).toHaveCount(1)
+    await expect
+      .poll(() =>
+        page
+          .locator("[data-timeline-key]")
+          .evaluateAll((rows) =>
+            rows.every(
+              (row) =>
+                (row.firstElementChild?.getBoundingClientRect().height ?? 0) <= row.getBoundingClientRect().height + 1,
+            ),
+          ),
+      )
+      .toBe(true)
+    await trigger.click()
+    await expect(trigger).toHaveAttribute("aria-expanded", "false")
+  })
+}

packages/app/e2e/regression/session-timeline-history-root.spec.ts

@@ -17,7 +17,7 @@ import { mockOpenCodeServer } from "../utils/mock-server"
 import { installSseTransport } from "../utils/sse-transport"
 import { expectSessionTitle } from "../utils/waits"
 
-const messagePageSize = 20
+const messagePageSize = 40
 const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 const messages = Array.from({ length: messagePageSize / 2 + 1 }, (_, index) => {
   const id = `msg_${String(index + 1001).padStart(4, "0")}_history_root_user`
@@ -188,7 +188,7 @@ for (const scenario of scenarios) {
     await waitForProbeSamples(page, beforeHistory)
     expect(pages).toEqual([
       { before: undefined, limit: messagePageSize },
-      { before: messages.at(-messagePageSize)!.id, limit: messagePageSize },
+      { before: messages.at(-messagePageSize)!.id, limit: 20 },
     ])
     expect(roots).toEqual([])
 

packages/app/e2e/regression/session-timeline-hydration.spec.ts

@@ -9,11 +9,11 @@ test.use({ viewport: { width: 1440, height: 900 }, serviceWorkers: "block" })
 for (const window of ["assistant-only", "mixed"] as const) {
   test(`renders the ${window} latest page before parent hydration and preserves it afterward`, async ({ page }) => {
     const session = { ...fixture.sessions[0]!, id: `ses_hydration_${window}` }
-    // Both 20-message pages begin with an assistant; only page three supplies its parent.
-    const messages = Array.from({ length: 41 }, (_, index): SessionMessageInfo => {
+    // Compact's initial 40 and the next 20 begin with an assistant; page three supplies its parent.
+    const messages = Array.from({ length: 61 }, (_, index): SessionMessageInfo => {
       const id = `msg_hydration_${index}`
       const time = { created: 1700000000000 + index * 1_000 }
-      if (index === 0 || (window === "mixed" && index === 39))
+      if (index === 0 || (window === "mixed" && index === 59))
         return { id, type: "user", time, text: `Prompt ${index}` }
       return {
         id,
@@ -21,7 +21,7 @@ for (const window of ["assistant-only", "mixed"] as const) {
         time: { ...time, completed: time.created + 500 },
         model: { id: "claude-opus-4-6", providerID: "opencode" },
         agent: "build",
-        content: [{ type: "text", text: index === 40 ? "## Hydrated tail\n\n**Ready.**" : `Answer ${index}` }],
+        content: [{ type: "text", text: index === 60 ? "## Hydrated tail\n\n**Ready.**" : `Answer ${index}` }],
       }
     })
     const gates = [21, 1].map((index) => ({
@@ -43,18 +43,18 @@ for (const window of ["assistant-only", "mixed"] as const) {
         await gate.release.promise
       },
       pageMessages: (_, limit, before) => {
-        expect(limit).toBe(20)
+        expect(limit).toBe(before ? 20 : 40)
         const end = before ? messages.findIndex((message) => message.id === before) : messages.length
         const start = Math.max(0, end - limit)
         return { items: messages.slice(start, end), cursor: start > 0 ? messages[start]!.id : undefined }
       },
     })
-    const tail = page.locator('[data-timeline-part-id="msg_hydration_40:text:0"]')
+    const tail = page.locator('[data-timeline-part-id="msg_hydration_60:text:0"]')
     const markdown = tail.locator('[data-component="markdown"]')
     const content = page.locator("[data-timeline-virtual-content]", { has: tail })
     const viewport = page.locator(".scroll-view__viewport", { has: tail })
     const orphan = page.locator('[data-timeline-row="AssistantPart"]', {
-      has: page.locator('[data-timeline-part-id="msg_hydration_38:text:0"]'),
+      has: page.locator('[data-timeline-part-id="msg_hydration_58:text:0"]'),
     })
     const expectReadyTail = async () => {
       await expect(content).toHaveCSS("visibility", "visible")
@@ -75,7 +75,7 @@ for (const window of ["assistant-only", "mixed"] as const) {
       await expect(orphan).toHaveAttribute("data-message-id", "msg_hydration_21")
       if (window === "mixed")
         await expect(
-          page.locator('[data-timeline-row="UserMessage"][data-message-id="msg_hydration_39"]'),
+          page.locator('[data-timeline-row="UserMessage"][data-message-id="msg_hydration_59"]'),
         ).toBeInViewport()
       const original = await markdown.elementHandle()
 

packages/app/e2e/regression/session-timeline-notices.spec.ts

@@ -7,7 +7,6 @@ import {
   compactionFailed,
   compactionStarted,
   directory,
-  event,
   session,
   sessionID,
   setupTimeline,
@@ -87,12 +86,13 @@ test("renders current protocol notices in CLI order", async ({ page }) => {
   expect(ownerWarnings).toEqual([])
 })
 
-test("renders a compaction summary while it streams and after completion", async ({ page }) => {
+test("renders compaction progress, summary, and outcome in order", async ({ page }) => {
   const timeline = await setupTimeline(page, {
     settings: {
       timelineDetail: { ...timelinePresets[2].value, notices: { placement: "separate" } },
     },
     sessionMessages: [user, assistant(true)],
+    sessionStatus: { [sessionID]: { type: "busy" } },
   })
 
   await timeline.send(
@@ -104,7 +104,15 @@ test("renders a compaction summary while it streams and after completion", async
   )
 
   const compaction = page.locator('[data-component="session-compaction-message"]')
-  await expect(compaction.getByText("Session compacted", { exact: true })).toBeVisible()
+  await expect(compaction.getByText("Session compaction started", { exact: true })).toBeVisible()
+  await expect(compaction.getByRole("status").getByLabel("Compacting", { exact: true })).toBeVisible()
+  await expect(compaction.locator('[data-component="text-shimmer"]')).toHaveAttribute("data-active", "true")
+  await expect(compaction.getByText("Session compacted", { exact: true })).toHaveCount(0)
+  await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible()
+  await expect(page.locator('[data-component="session-working"]')).toHaveCount(0)
+
+  await page.setViewportSize({ width: 480, height: 900 })
+  await expect(compaction.getByText("Session compaction started", { exact: true })).toBeInViewport()
 
   await timeline.send(
     compactionDelta({
@@ -114,6 +122,16 @@ test("renders a compaction summary while it streams and after completion", async
   )
   await expect(compaction.getByRole("heading", { name: "Checkpoint" })).toBeVisible()
   await expect(compaction).toContainText("Streamed implementation details.")
+  const running = compaction.getByRole("status").getByLabel("Compacting", { exact: true })
+  await expect(running).toBeVisible()
+  await expect
+    .poll(async () => {
+      const summary = await compaction.locator('[data-component="text-part"]').boundingBox()
+      const status = await running.boundingBox()
+      return !!summary && !!status && status.y >= summary.y + summary.height
+    })
+    .toBe(true)
+  await expect(compaction.getByText("Session compacted", { exact: true })).toHaveCount(0)
 
   await timeline.send(
     compactionEnded({
@@ -125,6 +143,18 @@ test("renders a compaction summary while it streams and after completion", async
   )
   await expect(compaction).toContainText("Final implementation details.")
   await expect(compaction).not.toContainText("Streamed implementation details.")
+  await expect(compaction.getByText("Session compaction started", { exact: true })).toBeVisible()
+  await expect(compaction.getByText("Session compacted", { exact: true })).toBeVisible()
+  await expect
+    .poll(async () => {
+      const summary = await compaction.locator('[data-component="text-part"]').boundingBox()
+      const completed = await compaction.getByText("Session compacted", { exact: true }).boundingBox()
+      return !!summary && !!completed && completed.y >= summary.y + summary.height
+    })
+    .toBe(true)
+  await expect(compaction.getByRole("status")).toHaveCount(0)
+  await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeVisible()
+  await expect(page.locator('[data-component="session-working"]')).toBeVisible()
 })
 
 test("updates running compactions to failed and cancelled boundaries", async ({ page }) => {
@@ -146,7 +176,10 @@ test("updates running compactions to failed and cancelled boundaries", async ({
 
   const compactions = page.locator('[data-component="session-compaction-message"]')
   const failed = compactions.filter({ hasText: "The provider rejected the summary." })
-  await expect(failed.getByText("Session compacted", { exact: true })).toBeVisible()
+  await expect(failed.getByText("Session compaction started", { exact: true })).toBeVisible()
+  await expect(failed.getByText("Session compaction failed", { exact: true })).toBeVisible()
+  await expect(failed.getByText("Session compacted", { exact: true })).toHaveCount(0)
+  await expect(failed.getByRole("status")).toHaveCount(0)
   await expect(failed.getByText("ProviderError: The provider rejected the summary.", { exact: true })).toBeVisible()
   await expect(failed).not.toContainText("Partial summary that should be discarded.")
 
@@ -164,11 +197,48 @@ test("updates running compactions to failed and cancelled boundaries", async ({
 
   await expect(compactions).toHaveCount(2)
   const cancelled = compactions.filter({ hasNotText: "The provider rejected the summary." })
-  await expect(cancelled.getByText("Session compacted", { exact: true })).toBeVisible()
+  await expect(cancelled.getByText("Session compaction started", { exact: true })).toBeVisible()
+  await expect(cancelled.getByText("Session compaction cancelled", { exact: true })).toBeVisible()
+  await expect(cancelled.getByText("Session compacted", { exact: true })).toHaveCount(0)
+  await expect(cancelled.getByRole("status")).toHaveCount(0)
   await expect(cancelled).not.toContainText("Cancellation detail should stay hidden.")
   await expect(cancelled).not.toContainText("Summary before cancellation.")
 })
 
+test("shows an interrupted outcome when stopping automatic compaction", async ({ page }) => {
+  const timeline = await setupTimeline(page, {
+    sessionMessages: [user, assistant(true)],
+    sessionStatus: { [sessionID]: { type: "busy" } },
+  })
+  await timeline.send(compactionStarted({ sessionID, reason: "auto", recent: "" }))
+  await timeline.send(compactionDelta({ sessionID, text: "Partial automatic summary." }))
+  const compaction = page.locator('[data-component="session-compaction-message"]')
+  await expect(compaction.getByRole("status").getByLabel("Compacting", { exact: true })).toBeVisible()
+  await expect(compaction).toContainText("Partial automatic summary.")
+
+  const request = page.waitForRequest(
+    (request) =>
+      request.method() === "POST" && new URL(request.url()).pathname === `/api/session/${sessionID}/interrupt`,
+  )
+  await page.getByRole("button", { name: "Stop", exact: true }).click()
+  await request
+  await timeline.send(
+    compactionFailed({
+      sessionID,
+      reason: "auto",
+      error: { type: "compaction.interrupted", message: "Compaction was interrupted" },
+    }),
+  )
+
+  await expect(compaction.getByText("Session compaction started", { exact: true })).toBeVisible()
+  await expect(compaction.getByText("Session compaction interrupted", { exact: true })).toBeVisible()
+  await expect(compaction.getByText("Session compaction failed", { exact: true })).toHaveCount(0)
+  await expect(compaction.getByText("Session compacted", { exact: true })).toHaveCount(0)
+  await expect(compaction.getByRole("status")).toHaveCount(0)
+  await expect(compaction).not.toContainText("Partial automatic summary.")
+  await expect(compaction).not.toContainText("Compaction was interrupted")
+})
+
 test("moves blocking work to the background with Ctrl+B", async ({ page }) => {
   await setupTimeline(page, {
     settings: {

packages/app/e2e/regression/session-workspace-tab-cycle.spec.ts

@@ -0,0 +1,68 @@
+import { expect, test } from "@playwright/test"
+import type { OpenCodeEvent, SessionMessageInfo } from "@opencode/client/promise"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { fixture } from "../performance/timeline/session-timeline-stress.fixture"
+import { installStressSessionTabs, stressSessionHref } from "../performance/timeline/timeline-test-helpers"
+
+test.use({ viewport: { width: 1440, height: 900 }, serviceWorkers: "block" })
+
+test("keeps five loaded workspace tabs visible and reactive through repeated switches", async ({ page }, info) => {
+  const sessions = Array.from({ length: 5 }, (_, index) => ({
+    ...fixture.sessions[0]!,
+    id: `ses_workspace_cycle_${index}`,
+    directory: `${fixture.directory}/worktree-${index}`,
+    title: `Workspace session ${index}`,
+  }))
+  const events: OpenCodeEvent[] = []
+  await mockOpenCodeServer(page, {
+    ...fixture,
+    sessions,
+    pageMessages: (id) => ({
+      items: [
+        { id: `msg_user_${id}`, type: "user", text: `Prompt for ${id}`, time: { created: 1 } },
+        {
+          id: `msg_assistant_${id}`,
+          type: "assistant",
+          agent: "build",
+          model: { id: "claude-opus-4-6", providerID: "opencode" },
+          time: { created: 2, completed: 3 },
+          content: [{ type: "text", text: `Answer for ${id}` }],
+        },
+      ] satisfies SessionMessageInfo[],
+    }),
+    events: () => events.splice(0),
+  })
+  await page.route("**/api/location?*", (route) =>
+    route.fulfill({
+      json: {
+        directory: new URL(route.request().url()).searchParams.get("location[directory]"),
+        project: { id: fixture.project.id, directory: fixture.directory, canonical: fixture.directory },
+      },
+    }),
+  )
+  await installStressSessionTabs(page, { sessionIDs: sessions.map((session) => session.id) })
+  await page.goto(stressSessionHref(sessions[0]!.id))
+  await expect(page.getByText(`Answer for ${sessions[0]!.id}`, { exact: true })).toBeVisible()
+
+  for (const session of [...sessions.slice(1), ...sessions, ...sessions.toReversed()]) {
+    await page.locator(`[data-titlebar-tab-link][href="${stressSessionHref(session.id)}"]`).click()
+    await expect(page.locator(`[data-timeline-part-id="msg_assistant_${session.id}:text:0"]`)).toBeVisible()
+    await expect(page.locator("[data-timeline-virtual-content]")).toHaveCSS("visibility", "visible")
+  }
+  const active = sessions[0]!
+  events.push({
+    id: "evt_workspace_cycle_update",
+    created: 4,
+    type: "session.text.ended",
+    location: { directory: active.directory },
+    durable: { aggregateID: active.id, seq: 0, version: 1 },
+    data: {
+      sessionID: active.id,
+      assistantMessageID: `msg_assistant_${active.id}`,
+      ordinal: 0,
+      text: "Still receiving updates",
+    },
+  })
+  await expect(page.getByText("Still receiving updates", { exact: true })).toBeVisible()
+  await page.screenshot({ path: info.outputPath("workspace-tabs.png") })
+})

packages/app/e2e/regression/settings-project-edges.spec.ts

@@ -0,0 +1,86 @@
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+
+for (const colorScheme of ["light", "dark"] as const) {
+  test.describe(colorScheme, () => {
+    test.use({ colorScheme, contextOptions: { reducedMotion: "reduce" } })
+
+    test("project card edges stay inside the settings scrollport", async ({ page }, info) => {
+      const projects = ["rebase", "dinocms", "opencode", "Playground"].map((name, index) => ({
+        id: `project-${index}`,
+        name,
+        canonical: `/projects/${name}`,
+        vcs: "git",
+        time: { created: 1, updated: 1 },
+        sandboxes: [],
+      }))
+      await mockOpenCodeServer(page, {
+        directory: "/projects/rebase",
+        project: projects[0],
+        sessions: [],
+        pageMessages: () => ({ items: [] }),
+        provider: { all: [], connected: [], default: {} },
+      })
+      await page.route("**/api/project", (route) =>
+        route.fulfill({ json: projects, headers: { "access-control-allow-origin": "*" } }),
+      )
+      await page.addInitScript((projects) => {
+        localStorage.setItem(
+          "opencode.global.dat:server",
+          JSON.stringify({
+            projects: { local: projects.map((project) => ({ worktree: project.canonical, expanded: true })) },
+          }),
+        )
+      }, projects)
+      await page.goto("/")
+      await expect(page.getByRole("button", { name: "Settings", exact: true })).toBeEnabled()
+      await page.getByRole("button", { name: "Settings", exact: true }).click()
+      const settings = page.getByTestId("settings-screen")
+      await settings.getByRole("tab", { name: "Projects", exact: true }).click()
+      const panel = settings.getByRole("tabpanel")
+      await expect(panel.getByText("rebase", { exact: true })).toBeVisible()
+      await expect(panel.getByText("Playground", { exact: true })).toBeVisible()
+      await page.evaluate(() => document.fonts.ready)
+
+      for (const width of [1280, 1050, 960, 720, 600]) {
+        await page.setViewportSize({ width, height: 720 })
+        await page.mouse.move(0, 0)
+        await page.screenshot({ path: info.outputPath(`projects-${width}.png`), animations: "disabled" })
+        // Raised cards paint a half-pixel border outside their box. The scrollport
+        // must leave room for that border and the soft shadow on both sides.
+        await expect
+          .poll(() =>
+            panel.getByText("rebase", { exact: true }).evaluate((label) => {
+              const row = label.parentElement!.parentElement!
+              const bounds = row.getBoundingClientRect()
+              const clips = []
+              for (let parent = row.parentElement; parent; parent = parent.parentElement) {
+                if (getComputedStyle(parent).overflowX === "visible") continue
+                const clip = parent.getBoundingClientRect()
+                clips.push(bounds.left - clip.left, clip.right - bounds.right)
+              }
+              return Math.min(...clips)
+            }),
+          )
+          .toBeGreaterThanOrEqual(4)
+        await expect(panel).toHaveJSProperty("scrollWidth", await panel.evaluate((el) => el.clientWidth))
+      }
+
+      await page.setViewportSize({ width: 1280, height: 720 })
+      await panel.getByText("rebase", { exact: true }).hover()
+      await panel.getByText("rebase", { exact: true }).click()
+      const dialog = page.getByRole("dialog")
+      await expect(dialog.getByRole("textbox")).toHaveValue("rebase")
+      await expect(dialog.getByRole("textbox")).toBeFocused()
+      await dialog.getByRole("button", { name: "Cancel", exact: true }).click()
+      await expect(dialog).toBeHidden()
+      await expect(panel.getByText("rebase", { exact: true })).toBeVisible()
+
+      await page.setViewportSize({ width: 1280, height: 260 })
+      await panel.getByText("rebase", { exact: true }).hover()
+      await page.mouse.wheel(0, 400)
+      await expect(panel.getByText("Playground", { exact: true })).toBeInViewport({ ratio: 1 })
+      await expect(panel.getByRole("heading", { name: "Projects", exact: true })).toBeInViewport({ ratio: 1 })
+    })
+  })
+}

packages/app/e2e/regression/tab-navigate-mousedown.spec.ts

@@ -188,8 +188,16 @@ test("vertical tabs show project details, resize, and navigate", async ({ page }
     sidebar.getByRole("button", { name: "Home", exact: true }).getByText("Home", { exact: true }),
   ).toBeVisible()
   await expect(sidebar.getByRole("button", { name: "New session" })).toBeVisible()
-  await expect(sidebar.locator('[data-slot="vertical-tabs-footer"]')).toHaveCount(0)
-  await expect(sidebar.getByRole("button", { name: "Status", exact: true })).toHaveCount(0)
+  await expect(sidebar.locator('[data-slot="vertical-tabs-footer"]')).toBeVisible()
+  const status = sidebar.getByRole("button", { name: "Status", exact: true })
+  await expect(status).toBeVisible()
+  await expect
+    .poll(async () => {
+      const bounds = await sidebar.boundingBox()
+      const button = await status.boundingBox()
+      return !!bounds && !!button && button.x >= bounds.x && button.x - bounds.x <= 12
+    })
+    .toBe(true)
   await expect(page.locator('[data-slot="titlebar-v2"]')).toBeHidden()
   await expect
     .poll(async () => {
@@ -293,7 +301,7 @@ for (const count of [0, 26]) {
 }
 
 for (const direction of ["ltr", "rtl"]) {
-  test(`vertical tabs scroll without the retired Status footer in ${direction}`, async ({ page }, testInfo) => {
+  test(`vertical tabs keep Status pinned without Settings in ${direction}`, async ({ page }, testInfo) => {
     await mockServer(page)
     await page.addInitScript(
       ({ server, sessionA, sessionB, directory }) => {
@@ -326,23 +334,38 @@ for (const direction of ["ltr", "rtl"]) {
     const hrefB = `/server/${base64Encode(server)}/session/${sessionB.id}`
     const tabB = sidebar.locator(`[data-titlebar-tab-link][href="${hrefB}"]`)
     await expect(sidebar.locator("[data-titlebar-tab-slot]")).toHaveCount(26)
-    await expect(status).toHaveCount(0)
+    await expect(status).toHaveText("Status")
     await expect(settings).toHaveCount(0)
+    await expect(status.locator('[data-slot="status-indicator"]')).toBeVisible()
     await page.evaluate((direction) => document.documentElement.setAttribute("dir", direction), direction)
 
     for (const width of [1280, 800]) {
       await page.setViewportSize({ width, height: 360 })
       await expect(sidebar).toHaveCSS("padding-inline-start", "10px")
       await expect(sidebar).toHaveCSS("padding-bottom", "10px")
-      await expect(sidebar.locator('[data-slot="vertical-tabs-footer"]')).toHaveCount(0)
+      await expect(sidebar.locator('[data-slot="vertical-tabs-footer"]')).toHaveCSS("margin-top", "8px")
+      await expect(status).toBeInViewport({ ratio: 1 })
+      await expect(status).toHaveCSS("height", "28px")
+      await expect
+        .poll(() =>
+          sidebar.locator('[data-slot="vertical-tabs-footer"]').evaluate((element) => {
+            const content = Math.max(
+              0,
+              ...Array.from(element.children, (child) => child.getBoundingClientRect().height),
+            )
+            return element.getBoundingClientRect().height - content
+          }),
+        )
+        .toBe(0)
       await expect(scroll).toHaveCSS("mask-image", /linear-gradient/)
       await scroll.evaluate((element) => element.scrollTo(0, 0))
       await expect(scroll).toHaveJSProperty("scrollTop", 0)
+      const pinnedStatus = await status.boundingBox()
       await scroll.hover()
       await page.mouse.wheel(0, 200)
       await expect.poll(() => scroll.evaluate((element) => element.scrollTop)).toBeGreaterThan(0)
-      await expect(status).toHaveCount(0)
-      await testInfo.attach(`vertical-tabs-scroll-${width}`, {
+      await expect.poll(() => status.boundingBox()).toEqual(pinnedStatus)
+      await testInfo.attach(`vertical-tabs-status-${width}`, {
         body: await sidebar.screenshot(),
         contentType: "image/png",
       })
@@ -356,9 +379,14 @@ for (const direction of ["ltr", "rtl"]) {
           return !!tab && !!viewport && tab.y + tab.height <= viewport.y + viewport.height - 16
         })
         .toBe(true)
-      await expect(status).toHaveCount(0)
+      await expect.poll(() => status.boundingBox()).toEqual(pinnedStatus)
       await expect(settings).toHaveCount(0)
     }
+
+    await status.click()
+    await expect(status).toHaveAttribute("aria-expanded", "true")
+    await status.press("Escape")
+    await expect(status).toHaveAttribute("aria-expanded", "false")
   })
 }
 

packages/app/e2e/utils/mock-server.ts

@@ -80,6 +80,7 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
         const id = state.connections
         let ended = false
         let own: ReadableStreamDefaultController<Uint8Array> | undefined
+        let keepalive: ReturnType<typeof setInterval> | undefined
         const stream = new ReadableStream<Uint8Array>({
           start(controller) {
             own = controller
@@ -89,11 +90,15 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
               encoder.encode(frame({ id: `evt_mock_connected_${id}`, type: "server.connected", data: {} })),
             )
             state.buffer.splice(0).forEach((item) => controller.enqueue(encoder.encode(item)))
+            // Match the real server's idle stream so long scenarios do not
+            // trigger the client's 45-second stall watchdog and reload history.
+            keepalive = setInterval(() => controller.enqueue(encoder.encode(": keepalive\n\n")), 15_000)
             request.signal.addEventListener(
               "abort",
               () => {
                 if (ended) return
                 ended = true
+                clearInterval(keepalive)
                 if (state.controller === controller) state.controller = undefined
                 controller.error(request.signal.reason ?? new DOMException("The operation was aborted", "AbortError"))
               },
@@ -103,6 +108,7 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
           cancel() {
             if (ended) return
             ended = true
+            clearInterval(keepalive)
             if (state.controller === own) state.controller = undefined
           },
         })

packages/app/src/composer/submit.ts

@@ -88,8 +88,12 @@ export function createComposerSubmit(input: ComposerSubmitInput) {
       if (value.mode === "normal" && !command) {
         session.handoff?.set(handoffMessage(value))
         const optimisticBusy = !input.adapter.working()
-        if (optimisticBusy) session.data.session.setStatus(session.id, "running")
-        const sending = sendPrompt(session, value, input.adapter.controls().model.selection.trackSessionCommit).then(
+        if (optimisticBusy && input.adapter.kind === "new-session")
+          session.data.session.setStatus(session.id, "running")
+        const sending = sendPrompt(session, value, input.adapter.controls().model.selection.trackSessionCommit, () => {
+          if (optimisticBusy && input.adapter.kind === "active-session")
+            session.data.session.setStatus(session.id, "running")
+        }).then(
           () => ({ ok: true as const }),
           (error) => ({ ok: false as const, error }),
         )
@@ -359,7 +363,8 @@ async function applySelection(
 async function sendPrompt(
   session: ComposerSession,
   value: ComposerSubmission,
-  track?: ModelSelection["trackSessionCommit"],
+  track: ModelSelection["trackSessionCommit"] | undefined,
+  onAdmit: () => void,
 ) {
   const request = await buildSubmissionRequest(session, value)
   // Switching agent or model reconfigures the session immediately, and with it
@@ -389,7 +394,9 @@ async function sendPrompt(
       },
     },
   }
-  await session.data.session.prompt(admission).catch(() => session.data.session.prompt(admission))
+  const sending = session.data.session.prompt(admission).catch(() => session.data.session.prompt(admission))
+  onAdmit()
+  await sending
 }
 
 async function buildSubmissionRequest(session: ComposerSession, value: ComposerSubmission) {

packages/app/src/new-session/composer-adapter.ts

@@ -17,14 +17,12 @@ import { useSessionKey } from "@/session/session-layout"
 import { showToast } from "@/shell/notifications/toast"
 import { SessionRouteKey, SessionStateKey } from "@/runtime/server/scope"
 import { clearSessionMessageHandoff, setSessionMessageHandoff } from "@/session/handoff"
-import type { DraftMcpControls } from "./mcp"
 
 export function createNewSessionComposerAdapter(props: {
   draftID: string
   worktree: () => string
   branch: () => string | undefined
   submitted: () => void
-  mcp: DraftMcpControls
 }) {
   const route = useSessionKey()
   const prompt = useComposerState()
@@ -51,7 +49,6 @@ export function createNewSessionComposerAdapter(props: {
       const projectDirectory = location().directory
       const worktree = props.worktree()
       const branch = props.branch()
-      const mcp = props.mcp.capture()
       const id = Session.ID.create()
       const pending =
         worktree === "create"
@@ -71,18 +68,6 @@ export function createNewSessionComposerAdapter(props: {
         return
       }
 
-      const rollback = async () => {
-        if (!pending) return
-        data.project.invalidate()
-        await data.project.sync().catch(() => undefined)
-        await pending.rollback(sessionDirectory)
-      }
-      if (!(await props.mcp.prepare(sessionDirectory, mcp))) {
-        await rollback()
-        if (pending) props.mcp.remember(sessionDirectory, mcp)
-        return
-      }
-
       const created = data.session.create({
         id,
         agent: selection.agent,
@@ -104,7 +89,10 @@ export function createNewSessionComposerAdapter(props: {
         },
       )
       if (pending && !(await creation).ok) {
-        await rollback()
+        // Keep retries on the worktree that was already created, not another new checkout.
+        data.project.invalidate()
+        await data.project.sync().catch(() => undefined)
+        await pending.rollback(sessionDirectory)
         return
       }
       const afterCreation = async <T>(run: () => Promise<T>) => {

packages/app/src/new-session/mcp.ts

@@ -1,117 +0,0 @@
-import { createMemo } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useMcpToggle, type McpControls } from "@/providers/connect/mcp"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useServerSDK } from "@/runtime/server/client"
-import { useServer } from "@/runtime/server/current"
-import { useTabs } from "@/shell/tabs/tabs"
-import { showToast } from "@/shell/notifications/toast"
-import { useWorkspaceLocation } from "@/workspaces/location"
-
-export function createDraftMcpControls(input: { draftID: string; worktree: () => string }) {
-  const tabs = useTabs()
-  const location = useWorkspaceLocation()
-  const server = useServer()
-  const sdk = useServerSDK()
-  const language = useLanguage()
-  const [store, setStore] = createStore<{
-    preparing: boolean
-    pending: Record<string, Promise<boolean> | undefined>
-  }>({ preparing: false, pending: {} })
-  const key = (worktree: string) => JSON.stringify([server.key, location().directory, worktree])
-  const target = createMemo(() => key(input.worktree()))
-  const preview = () => input.worktree() === "create"
-  const directory = createMemo(() => {
-    const selected = input.worktree()
-    return selected === "main" || selected === "create" ? location().directory : selected
-  })
-  const states = createMemo(() => {
-    const draft = tabs.store.find((tab) => tab.type === "draft" && tab.draftID === input.draftID)
-    return draft?.type === "draft" && draft.mcp?.target === target() ? draft.mcp.states : {}
-  })
-  const toggle = useMcpToggle(directory)
-  const controls: McpControls = {
-    get preview() {
-      return preview()
-    },
-    get states() {
-      return states()
-    },
-    get pending() {
-      return store.preparing || (!preview() && store.pending[directory()] !== undefined)
-    },
-    change(name, enabled) {
-      if (controls.pending) return
-      tabs.updateDraft(input.draftID, { mcp: { target: target(), states: { ...states(), [name]: enabled } } })
-      if (preview()) return
-      const current = directory()
-      const request = toggle.mutateAsync({ name, enabled, directory: current }).then(
-        () => true,
-        () => false,
-      )
-      setStore("pending", current, request)
-      void request.finally(() => setStore("pending", current, undefined))
-    },
-  }
-
-  const apply = async (directory: string, states: Readonly<Record<string, boolean>>) => {
-    const pending = store.pending[directory]
-    if (pending && !(await pending)) return false
-    const entries = Object.entries(states)
-    if (entries.length === 0) return true
-    const catalog = await sdk.api.mcp.list({ location: { directory } })
-    const missing = entries.find(([name, enabled]) => enabled && !catalog.data.some((server) => server.name === name))
-    if (missing) throw new Error(language.t("session.summary.mcp.unavailable", { name: missing[0] }))
-    const results = await Promise.all(
-      entries
-        .filter(([name, enabled]) => {
-          const server = catalog.data.find((server) => server.name === name)
-          return server && (enabled ? server.status.status !== "connected" : server.status.status !== "disabled")
-        })
-        .map(([name, enabled]) =>
-          toggle.mutateAsync({ name, enabled, directory }).then(
-            () => true,
-            () => false,
-          ),
-        ),
-    )
-    if (results.some((success) => !success)) return false
-    const current = await sdk.api.mcp.list({ location: { directory } })
-    const unresolved = entries.find(([name, enabled]) => {
-      const status = current.data.find((server) => server.name === name)?.status.status
-      return enabled ? status !== "connected" : status !== undefined && status !== "disabled"
-    })
-    if (!unresolved) return true
-    const status = current.data.find((server) => server.name === unresolved[0])?.status.status
-    throw new Error(
-      language.t(status === "needs_auth" ? "session.summary.mcp.signInBeforeSend" : "session.summary.mcp.notReady", {
-        name: unresolved[0],
-      }),
-    )
-  }
-
-  return {
-    controls,
-    directory,
-    capture: () => ({ ...states() }),
-    remember(directory: string, states: Readonly<Record<string, boolean>>) {
-      tabs.updateDraft(input.draftID, { mcp: { target: key(directory), states: { ...states } } })
-    },
-    async prepare(directory: string, states: Readonly<Record<string, boolean>>) {
-      if (!store.pending[directory] && !Object.keys(states).length) return true
-      setStore("preparing", true)
-      return apply(directory, states)
-        .catch((error) => {
-          showToast({
-            variant: "error",
-            title: language.t("session.summary.mcp.prepareFailed"),
-            description: error instanceof Error ? error.message : String(error),
-          })
-          return false
-        })
-        .finally(() => setStore("preparing", false))
-    },
-  }
-}
-
-export type DraftMcpControls = ReturnType<typeof createDraftMcpControls>

packages/app/src/new-session/screen.tsx

@@ -1,18 +1,19 @@
 import { createPromptProjectController } from "@/new-session/project/selector"
 import { useSettingsDialog } from "@/settings/command"
+import { useSettings } from "@/settings/model"
 import { useTabs, type DraftTab } from "@/shell/tabs/tabs"
 import { useSearchParams } from "@solidjs/router"
 import { createEffect, createMemo, createResource, untrack } from "solid-js"
 import { createComposerModel } from "@/composer/model"
 import { useComposerCommands } from "@/composer/commands"
 import { createNewSessionComposerAdapter } from "./composer-adapter"
-import { NewSessionView } from "./view"
+import { NewSessionStatus, NewSessionView } from "./view"
 import { createNewSessionWorkspaceController } from "./workspace/controller"
 import { useNewSessionCommands } from "./commands"
-import { createDraftMcpControls } from "./mcp"
 
 /** The draft-only Session page. Submitting promotes the draft into a real Session. */
 export default function NewSessionPage(props: { draftId: string }) {
+  const settings = useSettings()
   const [search, setSearch] = useSearchParams<{ draftId?: string; prompt?: string }>()
   const tabs = useTabs()
   const openWorkspaces = useSettingsDialog("workspaces")
@@ -30,13 +31,11 @@ export default function NewSessionPage(props: { draftId: string }) {
     },
     onViewAll: openWorkspaces,
   })
-  const mcp = createDraftMcpControls({ draftID: props.draftId, worktree: workspace.selection.value })
   const composer = createNewSessionComposerAdapter({
     draftID: props.draftId,
     worktree: workspace.selection.value,
     branch: workspace.bar.branch,
     submitted: workspace.selection.remember,
-    mcp,
   })
   const model = createComposerModel(composer.adapter)
   useComposerCommands({ model: composer.model })
@@ -73,8 +72,9 @@ export default function NewSessionPage(props: { draftId: string }) {
   return (
     <div class="relative size-full overflow-hidden flex flex-col">
       {suspendUntilPromptReady()}
+      <NewSessionStatus visible={settings.visibility.status()} />
       <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]">
-        <NewSessionView composer={model} project={project} workspace={workspace} mcp={mcp} />
+        <NewSessionView composer={model} project={project} workspace={workspace} />
       </div>
     </div>
   )

packages/app/src/new-session/summary.tsx

@@ -1,54 +0,0 @@
-import { Icon } from "@opencode/ui/icon"
-import { Show } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ProjectSummaryCard } from "@/session/summary/project-card"
-import { SessionServerPanel } from "@/session/summary/server-panel"
-import type { PromptProject } from "./project/selector"
-import type { DraftMcpControls } from "./mcp"
-import type { NewSessionWorkspaceController } from "./workspace/controller"
-import { PromptWorkspaceSelector } from "./workspace/selector"
-
-export function NewSessionSummary(props: {
-  project?: PromptProject
-  workspace: NewSessionWorkspaceController
-  mcp: DraftMcpControls
-  shown: boolean
-  onChooseProject: () => void
-}) {
-  const language = useLanguage()
-  return (
-    <div data-component="session-summary-panel">
-      <Show
-        when={props.project}
-        fallback={
-          <div class="session-summary-card">
-            <button type="button" class="session-summary-row" onClick={props.onChooseProject}>
-              <Icon name="folder" class="text-v2-icon-icon-muted" />
-              {language.t("session.summary.chooseProject")}
-            </button>
-          </div>
-        }
-      >
-        {(project) => (
-          <>
-            <ProjectSummaryCard project={project()}>
-              <PromptWorkspaceSelector
-                variant="summary"
-                value={props.workspace.selection.value()}
-                projectRoot={props.workspace.project.root()}
-                workspaces={props.workspace.project.workspaces()}
-                branches={props.workspace.project.branches()}
-                branch={props.workspace.bar.branch()}
-                onChange={props.workspace.selection.set}
-                onCreate={props.workspace.selection.create}
-                onSearch={props.workspace.project.searchBranches}
-                onViewAll={props.workspace.project.openAll}
-              />
-            </ProjectSummaryCard>
-            <SessionServerPanel directory={props.mcp.directory()} shown={props.shown} mcp={props.mcp.controls} />
-          </>
-        )}
-      </Show>
-    </div>
-  )
-}

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

@@ -1,8 +1,7 @@
 import { useDialog } from "@opencode/ui/context/dialog"
 import { Tooltip } from "@opencode/ui/tooltip"
 import { Icon } from "@opencode/ui/icon"
-import { Show, Suspense, createMemo, createSignal, lazy } from "solid-js"
-import { createStore } from "solid-js/store"
+import { Show, createMemo, createSignal } from "solid-js"
 import { Schema } from "effect"
 import createPresence from "solid-presence"
 import { Composer } from "@/composer/composer"
@@ -14,6 +13,8 @@ import {
   PromptProjectSelector,
   type PromptProjectController,
 } from "@/new-session/project/selector"
+import { StatusPopover } from "@/shell/status/status-popover"
+import { TitlebarRight } from "@/shell/titlebar/right-slot"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useWorkspaceLocation } from "@/workspaces/location"
 import { useProviders } from "@/providers/catalog/providers"
@@ -22,13 +23,6 @@ import { Persist, persisted } from "@/runtime/persistence/storage"
 import { Persistence } from "@/runtime/persistence/schema"
 import type { NewSessionWorkspaceController } from "./workspace/controller"
 import { NewSessionWordmark } from "./wordmark"
-import { SummaryPopover } from "@/session/summary/popover"
-import type { DraftMcpControls } from "./mcp"
-
-const NewSessionSummary = lazy(async () => {
-  const { NewSessionSummary } = await import("./summary")
-  return { default: NewSessionSummary }
-})
 
 const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
 
@@ -46,9 +40,7 @@ export function NewSessionView(props: {
   composer: ComposerModel
   project: PromptProjectController
   workspace: NewSessionWorkspaceController
-  mcp: DraftMcpControls
 }) {
-  const [store, setStore] = createStore({ summary: false })
   const [onboarding, setOnboarding, , onboardingReady] = persisted(
     Persist.global("workspace-onboarding"),
     WorkspaceOnboardingSchema,
@@ -69,25 +61,6 @@ export function NewSessionView(props: {
           active={props.composer.state.drag === "active"}
           input={props.composer.model.selection.current()?.capabilities.input}
         />
-        <div
-          data-slot="new-session-summary"
-          class="absolute inset-x-0 top-0 z-20 flex h-12 items-center justify-end px-3"
-        >
-          <SummaryPopover open={store.summary} onOpenChange={(open) => setStore("summary", open)}>
-            <Suspense>
-              <NewSessionSummary
-                project={props.project.selected()}
-                workspace={props.workspace}
-                mcp={props.mcp}
-                shown={store.summary}
-                onChooseProject={() => {
-                  setStore("summary", false)
-                  props.project.add()
-                }}
-              />
-            </Suspense>
-          </SummaryPopover>
-        </div>
         <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
           <div class={NEW_SESSION_CONTENT_WIDTH}>
             <NewSessionWordmark />
@@ -142,6 +115,19 @@ export function NewSessionView(props: {
   )
 }
 
+export function NewSessionStatus(props: { visible: boolean }) {
+  const language = useLanguage()
+  return (
+    <TitlebarRight>
+      <Show when={props.visible}>
+        <Tooltip appearance="standard" placement="bottom" value={language.t("status.popover.trigger")}>
+          <StatusPopover />
+        </Tooltip>
+      </Show>
+    </TitlebarRight>
+  )
+}
+
 function NewSessionTips(props: { workspaceEligible: boolean; onWorkspace: () => void }) {
   const language = useLanguage()
   const dialog = useDialog()

packages/app/src/new-session/workspace/selector.tsx

@@ -15,18 +15,13 @@ export function PromptWorkspaceSelector(props: {
   branches: string[]
   branch?: string
   onboarding?: boolean
-  variant?: "inline" | "summary"
   onChange: (value: string) => void
   onCreate: (branch: string) => void
   onSearch: (search: string) => void
-  onDone?: () => void
+  onDone: () => void
   onViewAll: () => void
 }) {
   const language = useLanguage()
-  const summary = () => props.variant === "summary"
-  const placement = createMemo(() =>
-    summary() ? (language.direction() === "rtl" ? "right-start" : "left-start") : "bottom",
-  )
   const [search, setSearch] = createStore({ workspaces: "", branches: "" })
   let searchInput: HTMLInputElement | undefined
   let branchSearchInput: HTMLInputElement | undefined
@@ -63,20 +58,17 @@ export function PromptWorkspaceSelector(props: {
       props.onViewAll()
       return
     }
-    props.onDone?.()
+    props.onDone()
   }
   const label = () => {
-    if (selected() === "main")
-      return language.t(summary() ? "session.new.workspace.local" : "session.new.workspace.triggerLocal")
+    if (selected() === "main") return language.t("session.new.workspace.triggerLocal")
     if (props.value === "create") return language.t("workspace.new")
     return getFilename(props.value)
   }
 
   return (
     <>
-      <Show when={!summary()}>
-        <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
-      </Show>
+      <span class="hidden select-none opacity-50 sm:inline mx-1">/</span>
       <Tooltip
         appearance={props.onboarding ? "large" : undefined}
         placement="top"
@@ -95,28 +87,18 @@ export function PromptWorkspaceSelector(props: {
           )
         }
         contentClass={props.onboarding ? "max-w-[280px]" : undefined}
-        class={summary() ? "min-w-0 w-full" : "min-w-0"}
+        class="min-w-0"
       >
-        <Menu
-          placement={placement()}
-          gutter={4}
-          overflowPadding={24}
-          modal={summary() ? false : undefined}
-          onOpenChange={onOpenChange}
-        >
+        <Menu placement="bottom" gutter={4} overflowPadding={24} onOpenChange={onOpenChange}>
           <Menu.Trigger
             aria-description={language.t("session.new.workspace.trigger.tooltip")}
-            class={
-              summary()
-                ? "session-summary-row"
-                : "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"
-            }
+            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"
           >
             <Icon
               name={icon()}
-              class={`shrink-0 ${summary() || selected() === "main" || selected() === "create" ? "text-v2-icon-icon-muted" : "text-v2-icon-icon-accent"}`}
+              class={`shrink-0 ${selected() === "main" || selected() === "create" ? "text-v2-icon-icon-muted" : "text-v2-icon-icon-accent"}`}
             />
-            <span class={summary() ? "session-summary-label" : "min-w-0 truncate"}>{label()}</span>
+            <span class="min-w-0 truncate">{label()}</span>
             <Show when={props.onboarding}>
               <span
                 data-slot="workspace-onboarding-dot"
@@ -124,11 +106,7 @@ export function PromptWorkspaceSelector(props: {
                 class="size-1.5 shrink-0 rounded-full bg-v2-text-text-accent"
               />
             </Show>
-            <Icon
-              name={summary() ? "fill-triangle-down" : "chevron-down"}
-              size={summary() ? "normal" : "small"}
-              class="shrink-0 text-v2-icon-icon-muted"
-            />
+            <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
           </Menu.Trigger>
           <Menu.Portal>
             <Menu.Content class="w-[200px]">
@@ -255,58 +233,32 @@ export function PromptWorkspaceSelector(props: {
       </Tooltip>
       <Show
         when={selected() === "create" && props.branch}
-        fallback={
-          summary() ? (
-            <Show when={props.branch}>
-              <div class="session-summary-row">
-                <Icon name="branch" class="shrink-0 text-v2-icon-icon-muted" />
-                <span dir="auto" class="session-summary-label">
-                  {props.branch}
-                </span>
-              </div>
-            </Show>
-          ) : (
-            <PromptGitStatus branch={props.branch} from={selected() === "create"} class="ms-1" />
-          )
-        }
+        fallback={<PromptGitStatus branch={props.branch} from={selected() === "create"} class="ms-1" />}
       >
         <Tooltip
           placement="top"
           value={language.t("session.new.workspace.fromBranch", { branch: props.branch! })}
           disabled={!branchTruncation.truncated()}
-          class={summary() ? "min-w-0 w-full" : "ms-1 min-w-0 max-w-[220px]"}
+          class="ms-1 min-w-0 max-w-[220px]"
           contentClass="max-w-[calc(100vw-32px)] break-all"
         >
-          <Menu
-            placement={placement()}
-            gutter={4}
-            modal={summary() ? false : undefined}
-            onOpenChange={(open) => {
-              onOpenChange(open)
-              if (open) requestAnimationFrame(() => branchSearchInput?.focus())
-            }}
-          >
-            <Menu.Trigger
-              class={
-                summary()
-                  ? "session-summary-row"
-                  : "flex h-6 min-w-0 max-w-[220px] items-center gap-1.5 rounded-full bg-v2-background-bg-layer-02 px-2.5 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:bg-v2-background-bg-layer-03 hover:text-v2-text-text-muted focus-visible:bg-v2-background-bg-layer-03 focus-visible:text-v2-text-text-muted focus-visible:outline-none data-[expanded]:bg-v2-background-bg-layer-03 data-[expanded]:text-v2-text-text-muted"
-              }
-            >
-              <Icon name="branch-out" size={summary() ? "normal" : "small"} class="shrink-0 text-v2-icon-icon-muted" />
-              <span ref={branchTruncation.observe} class={summary() ? "session-summary-label" : "min-w-0 truncate"}>
-                {language.t(summary() ? "session.summary.basedOn" : "session.new.workspace.fromBranch", {
-                  branch: props.branch!,
-                })}
+          <Menu placement="bottom" gutter={4} onOpenChange={onOpenChange}>
+            <Menu.Trigger class="flex h-6 min-w-0 max-w-[220px] items-center gap-1.5 rounded-full bg-v2-background-bg-layer-02 px-2.5 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:bg-v2-background-bg-layer-03 hover:text-v2-text-text-muted focus-visible:bg-v2-background-bg-layer-03 focus-visible:text-v2-text-text-muted focus-visible:outline-none data-[expanded]:bg-v2-background-bg-layer-03 data-[expanded]:text-v2-text-text-muted">
+              <Icon name="branch-out" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+              <span ref={branchTruncation.observe} class="min-w-0 truncate">
+                {language.t("session.new.workspace.fromBranch", { branch: props.branch! })}
               </span>
-              <Icon
-                name={summary() ? "fill-triangle-down" : "chevron-down"}
-                size={summary() ? "normal" : "small"}
-                class="shrink-0 text-v2-icon-icon-muted"
-              />
+              <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
             </Menu.Trigger>
             <Menu.Portal>
-              <Menu.Content class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none">
+              <Menu.Content
+                class="w-[243px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none"
+                onOpenAutoFocus={(event) => {
+                  event.preventDefault()
+                  // Kobalte defers its list autofocus until after the focus scope opens.
+                  setTimeout(() => requestAnimationFrame(() => branchSearchInput?.focus({ preventScroll: true })))
+                }}
+              >
                 <div class="flex h-7 shrink-0 items-center gap-2 rounded-sm pl-3 pr-2.5 text-v2-icon-icon-muted">
                   <Icon name="magnifying-glass" size="small" class="shrink-0" />
                   <input

packages/app/src/providers/connect/mcp.ts

@@ -6,13 +6,6 @@ import { useServerSDK } from "@/runtime/server/client"
 import { usePlatform } from "@/runtime/platform/platform"
 import { showToast } from "@/shell/notifications/toast"
 
-export type McpControls = {
-  readonly preview: boolean
-  readonly states: Readonly<Record<string, boolean>>
-  readonly pending: boolean
-  change: (name: string, enabled: boolean) => void
-}
-
 export function useMcpToggle(directory?: Accessor<string | undefined>, onSuccess?: () => unknown) {
   const data = useData()
   const serverSDK = useServerSDK()
@@ -24,36 +17,31 @@ export function useMcpToggle(directory?: Accessor<string | undefined>, onSuccess
   }
 
   return useMutation(() => ({
-    mutationFn: async (input: string | { name: string; enabled: boolean; directory?: string }) => {
-      const name = typeof input === "string" ? input : input.name
-      const ref = typeof input !== "string" && input.directory ? { directory: input.directory } : location()
+    mutationFn: async (name: string) => {
+      const ref = location()
       const server = (await serverSDK.api.mcp.list({ location: ref })).data.find((item) => item.name === name)
-      if (!server || (server.status.status === "pending" && typeof input === "string")) return
-      const enabled = typeof input === "string" ? server.status.status !== "connected" : input.enabled
-      if (!enabled) {
+      if (!server || server.status.status === "pending") return
+      if (server.status.status === "connected") {
         await serverSDK.api.mcp.disconnect({ server: name, location: ref })
-      }
-      if (enabled && server.status.status !== "needs_auth") {
-        await serverSDK.api.mcp.connect({ server: name, location: ref })
-      }
-      data.location.mcp.server.invalidate(ref)
-      await data.location.mcp.server.sync(ref)
-      const current = data.location.mcp.server.list(ref)?.find((item) => item.name === name)
-      if (enabled && current?.status.status === "needs_auth" && current.integrationID) {
-        const integration = await serverSDK.api.integration.get({ integrationID: current.integrationID, location: ref })
+      } else if (server.status.status === "needs_auth" && server.integrationID) {
+        const integration = await serverSDK.api.integration.get({ integrationID: server.integrationID, location: ref })
         const method = integration.data?.methods.find((item) => item.type === "oauth" && !item.form?.length)
-        if (!method || method.type !== "oauth") throw new Error(language.t("mcp.auth.interactiveForm", { name }))
+        if (!method || method.type !== "oauth")
+          throw new Error(`MCP server ${name} requires an interactive authentication form`)
         const attempt = await serverSDK.api.integration.oauth.connect({
-          integrationID: current.integrationID,
+          integrationID: server.integrationID,
           methodID: method.id,
           location: ref,
         })
         platform.openExternal(attempt.data.url)
+      } else {
+        await serverSDK.api.mcp.connect({ server: name, location: ref })
       }
+      data.location.mcp.server.invalidate(ref)
       data.location.mcp.resource.invalidate(ref)
-      await Promise.all([data.location.mcp.resource.sync(ref), onSuccess?.()])
+      await Promise.all([data.location.mcp.server.sync(ref), data.location.mcp.resource.sync(ref), onSuccess?.()])
       // A successful HTTP response can still leave the MCP connection in a failed state.
-      const status = current?.status
+      const status = data.location.mcp.server.list(ref)?.find((item) => item.name === name)?.status
       if (status?.status === "failed") throw new Error(`${name}: ${status.error}`)
     },
     onError: (error) =>

packages/app/src/runtime/i18n/en.ts

@@ -387,7 +387,6 @@ export const dict = {
   "mcp.status.needs_auth": "needs auth",
   "mcp.status.disabled": "disabled",
   "mcp.auth.clickToAuthenticate": "Click to authenticate",
-  "mcp.auth.interactiveForm": "MCP server {{name}} requires an interactive authentication form",
 
   "dialog.fork.empty": "No messages to fork from",
 
@@ -1386,32 +1385,6 @@ export const dict = {
   "session.summary.title": "Session details",
   "session.summary.noBranch": "No branch",
   "session.summary.basedOn": "Based on {{branch}}",
-  "session.summary.server": "Server",
-  "session.summary.chooseProject": "Choose a project",
-  "session.summary.mcp.onCreation": "Applies when the worktree is created",
-  "session.summary.mcp.prepareFailed": "Could not prepare MCP servers",
-  "session.summary.mcp.unavailable": "MCP server {{name}} is not available in this worktree.",
-  "session.summary.mcp.signInBeforeSend": "Sign in to {{name}} before sending the prompt.",
-  "session.summary.mcp.notReady": "MCP server {{name}} is not ready. Resolve its connection before sending the prompt.",
-  "session.summary.mcp": "MCP",
-  "session.summary.plugins": "Plugins",
-  "session.summary.skills": "Skills",
-  "session.summary.lsp": "LSP",
-  "session.summary.failed": "Failed",
-  "session.summary.retry": "Retry",
-  "session.summary.connecting": "Connecting…",
-  "session.summary.needsAuth": "Sign in required",
-  "session.summary.mcp.empty": "No MCP servers configured yet",
-  "session.summary.mcp.add": "Add servers in opencode.json",
-  "session.summary.plugins.manage": "Manage plugins in opencode.json",
-  "session.summary.plugins.empty": "No plugins configured yet",
-  "session.summary.plugins.add": "Add plugins in opencode.json",
-  "session.summary.skills.manage": "Manage skills in opencode.json",
-  "session.summary.skills.empty": "No skills configured yet",
-  "session.summary.skills.add": "Add skills in opencode.json",
-  "session.summary.lsp.configured": "Configured LSPs",
-  "session.summary.lsp.empty": "No LSP servers explicitly configured",
-  "session.summary.lsp.manage": "Manage LSP in opencode.json",
   "workspace.type.local": "local",
   "workspace.type.sandbox": "sandbox",
   "workspace.create.failed.title": "Failed to create worktree",

packages/app/src/runtime/server/request-queue.test.ts

@@ -34,6 +34,27 @@ function setup(input?: {
 }
 
 describe("createRequestQueue", () => {
+  test("starts a free slot before the caller continues its synchronous work", async () => {
+    const input = setup()
+    const response = input.queue.fetch("http://server/api/session")
+    expect(input.pending.map((item) => new URL(item.url).pathname)).toEqual(["/api/session"])
+    expect(input.queue.inflight()).toBe(1)
+    input.pending[0]!.resolve()
+    await response
+    expect(input.queue.inflight()).toBe(0)
+  })
+
+  test("releases a free slot without sending an already-aborted request", async () => {
+    const input = setup()
+    const controller = new AbortController()
+    controller.abort()
+    await expect(input.queue.fetch("http://server/api/session", { signal: controller.signal })).rejects.toBeInstanceOf(
+      DOMException,
+    )
+    expect(input.pending).toHaveLength(0)
+    expect(input.queue.inflight()).toBe(0)
+  })
+
   test("caps concurrent requests and starts queued ones as slots free up", async () => {
     const input = setup()
     const responses = ["/api/a", "/api/b", "/api/c"].map((path) => input.queue.fetch(`http://server${path}`))
@@ -109,12 +130,10 @@ describe("createRequestQueue", () => {
     const input = setup({ limit: 1, headersTimeoutMs: 10 })
     const dead = input.queue.fetch("http://server/api/dead")
     const next = input.queue.fetch("http://server/api/next")
-    await input.settle()
     expect(input.queue.queued()).toBe(1)
     const error = await dead.catch((cause: unknown) => cause)
     expect(error).toBeInstanceOf(DOMException)
     expect((error as DOMException).name).toBe("TimeoutError")
-    await input.settle()
     expect(input.pending.map((item) => new URL(item.url).pathname)).toEqual(["/api/dead", "/api/next"])
     input.pending[1]!.resolve()
     await expect(next).resolves.toBeInstanceOf(Response)

packages/app/src/runtime/server/request-queue.ts

@@ -84,17 +84,23 @@ export function createRequestQueue(input: {
     if (index === -1) return
     waiting.splice(index, 1)[0]?.start()
   }
-  const acquire = (entry: Entry) =>
-    new Promise<void>((resolve) => {
+  const acquire = (entry: Entry) => {
+    // A free slot must start fetch before the caller's synchronous UI work.
+    // Awaiting an already-resolved promise postpones that dispatch until after it.
+    if (canStart(entry)) {
+      inflight.add(entry)
+      return
+    }
+    return new Promise<void>((resolve) => {
       const start = () => {
         entry.at = now()
         inflight.add(entry)
         resolve()
       }
-      if (canStart(entry)) return start()
       waiting.push({ entry, start })
       watcher ??= setTimeout(watch, stallMs)
     })
+  }
 
   const fetch: typeof globalThis.fetch = Object.assign(
     async (resource: RequestInfo | URL, init?: RequestInit) => {
@@ -103,7 +109,8 @@ export function createRequestQueue(input: {
       // The event stream is long-lived; never count it against the request budget.
       if (pathname === "/api/event") return base(request)
       const entry = { method: request.method, url: request.url, at: now(), slow: isSlowRequest(pathname) }
-      await acquire(entry)
+      const queued = acquire(entry)
+      if (queued) await queued
       if (request.signal.aborted) {
         release(entry)
         throw request.signal.reason ?? new DOMException("The operation was aborted.", "AbortError")

packages/app/src/runtime/server/runtime.tsx

@@ -16,6 +16,8 @@ import { ModelState } from "./persistence"
 import { useLanguage } from "@/runtime/i18n/language"
 import { showToast } from "@/shell/notifications/toast"
 import { formatServerError } from "./errors"
+import { useSettings } from "@/settings/model"
+import { timelinePreset } from "@opencode/session-ui/timeline/detail"
 
 export const { use: useGlobal, provider: GlobalProvider } = createSimpleContext({
   name: "Global",
@@ -131,10 +133,12 @@ function createServerController(
   projects: ReturnType<typeof createServerProjects>,
 ) {
   const language = useLanguage()
+  const settings = useSettings()
   const connKey = ServerConnection.key(conn)
   const sdk = createServerSdkContext(conn, scope)
   const source = createData({
     api: () => sdk.api,
+    initialMessageLimit: () => (timelinePreset(settings.general.timelineDetail())?.id === "compact" ? 40 : 20),
     event: {
       on: sdk.event.on,
       listen: (handler) => sdk.event.listen((event) => handler({ name: event.type, details: event })),

packages/app/src/session/browser/pane.tsx

@@ -108,6 +108,13 @@ export function SessionBrowserPane(props: { browser: ReturnType<typeof createSes
   }
 
   createEffect(() => !store.editing && setStore("address", address()))
+  createEffect(
+    on(registration, (current) => {
+      // Session routes can change before this pane unmounts. Hide the registration
+      // that owned the native view, rather than reading the destination's handle.
+      onCleanup(() => current?.setLayout())
+    }),
+  )
   createEffect(
     on(
       [
@@ -140,7 +147,6 @@ export function SessionBrowserPane(props: { browser: ReturnType<typeof createSes
   createEventListener(document, "visibilitychange", () => setStore("visible", document.visibilityState === "visible"))
   onCleanup(() => {
     if (frame !== undefined) cancelAnimationFrame(frame)
-    registration()?.setLayout()
   })
 
   return (

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

@@ -1,12 +1,29 @@
 import { Show } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
+import { useLanguage } from "@/runtime/i18n/language"
+import { useSettings } from "@/settings/model"
+import { StatusPopover } from "@/shell/status/status-popover"
+import { TitlebarRight } from "@/shell/titlebar/right-slot"
+import { Tooltip } from "@opencode/ui/tooltip"
+
+export function SessionHeader(props: { reserveReviewToggle: boolean }) {
+  const language = useLanguage()
+  const settings = useSettings()
 
-export function SessionHeaderSpacer() {
   const isDesktop = createMediaQuery("(min-width: 768px)")
 
   return (
-    <Show when={isDesktop()}>
-      <div class="size-7 shrink-0" aria-hidden />
-    </Show>
+    <>
+      <TitlebarRight>
+        <Show when={isDesktop() && settings.visibility.status()}>
+          <Tooltip appearance="standard" placement="bottom" value={language.t("status.popover.trigger")}>
+            <StatusPopover />
+          </Tooltip>
+        </Show>
+      </TitlebarRight>
+      <Show when={isDesktop() && props.reserveReviewToggle}>
+        <div class="size-7 shrink-0" aria-hidden />
+      </Show>
+    </>
   )
 }

packages/app/src/session/review/view.tsx

@@ -15,6 +15,11 @@ import { SessionReviewTab } from "./review-tab"
 import type { ChangeMode, SessionReviewModel } from "./model"
 import type { createSessionBrowser } from "../browser/model"
 
+const StatusDrawer = lazy(async () => {
+  const { StatusDrawer } = await import("@/shell/status/status-drawer")
+  return { default: StatusDrawer }
+})
+
 const MobilePanelDrawer = lazy(async () => {
   const { MobilePanelDrawer } = await import("@/shell/mobile-panel-drawer")
   return { default: MobilePanelDrawer }
@@ -29,9 +34,11 @@ export function SessionMobileViewTabs(props: {
   const language = useLanguage()
   const [store, setStore] = createStore({
     menu: false,
+    status: false,
+    statusLoaded: false,
     details: false,
     detailsLoaded: false,
-    pending: false,
+    pending: undefined as "status" | "details" | undefined,
   })
   createEffect(() => props.onDetailsOpenChange?.(store.details))
   onCleanup(() => props.onDetailsOpenChange?.(false))
@@ -88,18 +95,32 @@ export function SessionMobileViewTabs(props: {
             onCloseAutoFocus={(event) => {
               if (!store.pending) return
               event.preventDefault()
-              setStore({ details: true, detailsLoaded: true, pending: false })
+              if (store.pending === "status") setStore({ status: true, statusLoaded: true })
+              if (store.pending === "details") setStore({ details: true, detailsLoaded: true })
+              setStore("pending", undefined)
             }}
           >
             <Menu.Item onSelect={() => props.onSelect("usage")}>{language.t("session.tab.usage")}</Menu.Item>
             <Show when={props.details}>
-              <Menu.Item onSelect={() => setStore({ pending: true, menu: false })}>
+              <Menu.Item onSelect={() => setStore({ pending: "details", menu: false })}>
                 {language.t("session.summary.title")}
               </Menu.Item>
             </Show>
+            <Menu.Item onSelect={() => setStore({ pending: "status", menu: false })}>
+              {language.t("status.popover.trigger")}
+            </Menu.Item>
           </Menu.Content>
         </Menu.Portal>
       </Menu>
+      <Show when={store.statusLoaded}>
+        <Suspense>
+          <StatusDrawer
+            open={store.status}
+            onOpenChange={(open) => setStore("status", open)}
+            returnFocus={() => trigger}
+          />
+        </Suspense>
+      </Show>
       <Show when={store.detailsLoaded}>
         <Suspense>
           <MobilePanelDrawer

packages/app/src/session/screen.tsx

@@ -12,7 +12,7 @@ import {
 } from "solid-js"
 import { createStore } from "solid-js/store"
 import { ResizeHandle } from "@opencode/ui/resize-handle"
-import { MessageTimeline } from "@/session/timeline/message-timeline"
+import { MessageTimeline, SessionSummaryPanel } from "@/session/timeline/message-timeline"
 import { useServer } from "@/runtime/server/current"
 import { projectForSession } from "@/shell/layout/helpers"
 import { ComposerDropzone } from "@/composer/dropzone"
@@ -34,17 +34,13 @@ import { SessionIdentityHeader } from "./session-identity-header"
 import { SessionReviewToggle } from "./header/session-header-actions"
 import { createAnimatedPresence } from "@/runtime/animated-presence"
 import { createSessionBrowser } from "./browser/model"
+import { createTimelineCache } from "./timeline/cache"
 
 const SessionMobileFiles = lazy(async () => {
   const { SessionMobileFiles } = await import("./files/session-mobile-files")
   return { default: SessionMobileFiles }
 })
 
-const SessionSummaryPanel = lazy(async () => {
-  const { SessionSummaryPanel } = await import("./summary/panel")
-  return { default: SessionSummaryPanel }
-})
-
 export function SessionScreen(props: { session: SessionModel }) {
   const session = props.session
   const server = useServer()
@@ -224,6 +220,45 @@ export function SessionScreen(props: { session: SessionModel }) {
     </Show>
   )
 
+  const timelineView = createTimelineCache(
+    session,
+    (source, active) => (
+      <MessageTimeline
+        active={active()}
+        hideHeader={!isDesktop()}
+        session={source}
+        background={composer.requests.background}
+        actions={composer.actions.timeline}
+        scroll={timeline.scroll}
+        onResumeScroll={timeline.actions.resume}
+        setScrollRef={timeline.view.setScrollRef}
+        onScheduleScrollState={timeline.view.scheduleScrollState}
+        onPin={timeline.view.pin}
+        onUnpin={timeline.view.unpin}
+        onUserScroll={timeline.view.markUserScroll}
+        onHistoryScroll={timeline.view.onHistoryScroll}
+        onSelectionInteraction={timeline.view.selectionInteraction}
+        pinned={timeline.view.pinned()}
+        centered={screen.centered()}
+        reserveReviewToggle={!sideVisible()}
+        setContentRef={timeline.view.setContentRef}
+        diffs={review.details.diffs}
+        onReview={review.open}
+        workspaceMoveEligible={composer.workspaceMoveEligible()}
+        onSummaryOpenChange={review.details.setOpen}
+        anchor={timeline.view.anchor}
+        setRevealMessage={timeline.view.setRevealMessage}
+        setScrollToEnd={timeline.view.setScrollToEnd}
+        search={
+          <Show when={active()}>
+            <TimelineSearchBar controller={timelineSearch} />
+          </Show>
+        }
+      />
+    ),
+    () => conversationVisible() && messagesReady(),
+  )
+
   const sessionPanelContent = () => (
     <>
       <ComposerDropzone
@@ -263,36 +298,7 @@ export function SessionScreen(props: { session: SessionModel }) {
             <Show when={isDesktop() && !messagesReady()}>
               <SessionIdentityHeader sessionID={session.identity.params.id ?? ""} session={session.data.info()} />
             </Show>
-            <Show when={messagesReady() ? session.identity.params.id : undefined} keyed>
-              {(_id) => (
-                <MessageTimeline
-                  hideHeader={!isDesktop()}
-                  session={session}
-                  background={composer.requests.background}
-                  actions={composer.actions.timeline}
-                  scroll={timeline.scroll}
-                  onResumeScroll={timeline.actions.resume}
-                  setScrollRef={timeline.view.setScrollRef}
-                  onScheduleScrollState={timeline.view.scheduleScrollState}
-                  onPin={timeline.view.pin}
-                  onUnpin={timeline.view.unpin}
-                  onUserScroll={timeline.view.markUserScroll}
-                  onHistoryScroll={timeline.view.onHistoryScroll}
-                  onSelectionInteraction={timeline.view.selectionInteraction}
-                  pinned={timeline.view.pinned()}
-                  centered={screen.centered()}
-                  setContentRef={timeline.view.setContentRef}
-                  diffs={review.details.diffs}
-                  onReview={review.open}
-                  workspaceMoveEligible={composer.workspaceMoveEligible()}
-                  onSummaryOpenChange={review.details.setOpen}
-                  anchor={timeline.view.anchor}
-                  setRevealMessage={timeline.view.setRevealMessage}
-                  setScrollToEnd={timeline.view.setScrollToEnd}
-                  search={<TimelineSearchBar controller={timelineSearch} />}
-                />
-              )}
-            </Show>
+            <Show when={messagesReady() && session.identity.params.id}>{timelineView()}</Show>
           </Match>
         </Switch>
       </div>

packages/app/src/session/summary/background.tsx

@@ -1,89 +0,0 @@
-import { Popover } from "@kobalte/core/popover"
-import { useData } from "@opencode/session-ui/context"
-import { Icon } from "@opencode/ui/icon"
-import { TextShimmer } from "@opencode/ui/text-shimmer"
-import { createEffect, For, Show } from "solid-js"
-import { createStore } from "solid-js/store"
-import { Dynamic } from "solid-js/web"
-import { useLanguage } from "@/runtime/i18n/language"
-
-export type BackgroundTask = {
-  id: string
-  type: "shell" | "subagent"
-  label: string
-  agent?: string
-}
-
-export function BackgroundWorkSummary(props: { tasks: BackgroundTask[]; mobile?: boolean }) {
-  const language = useLanguage()
-  const data = useData()
-  const [store, setStore] = createStore({ open: false })
-  createEffect(() => {
-    if (props.tasks.length > 0) return
-    setStore("open", false)
-  })
-  const taskType = (task: BackgroundTask) => {
-    if (task.type === "shell") return language.t("ui.tool.shell")
-    if (!task.agent) return language.t("ui.tool.agent.default")
-    return task.agent.slice(0, 1).toUpperCase() + task.agent.slice(1)
-  }
-
-  return (
-    <Popover
-      open={store.open}
-      placement={props.mobile ? "top-end" : language.direction() === "rtl" ? "right-end" : "left-end"}
-      gutter={4}
-      onOpenChange={(open) => setStore("open", open)}
-    >
-      <Show when={props.tasks.length > 0}>
-        <Popover.Trigger
-          as="button"
-          type="button"
-          data-component="session-background-summary"
-          class="session-summary-row"
-          aria-label={language.plural("session.background.tasksRunning", props.tasks.length)}
-        >
-          <Icon name="outline-arrow-to-corner-top-right" class="shrink-0 text-v2-icon-icon-muted" />
-          <TextShimmer
-            as="span"
-            text={language.plural("session.background.tasksRunning", props.tasks.length)}
-            active
-            class="session-summary-label"
-          />
-        </Popover.Trigger>
-      </Show>
-      <Popover.Portal>
-        <Popover.Content
-          data-component="session-background-list"
-          class="session-service-menu"
-          aria-label={language.plural("session.background.tasksRunning", props.tasks.length)}
-        >
-          <For each={props.tasks.slice(0, 10)}>
-            {(task) => (
-              <Dynamic
-                component={task.type === "subagent" ? "a" : "div"}
-                data-component="session-background-list-item"
-                class="session-service-row"
-                classList={{
-                  "hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none":
-                    task.type === "subagent",
-                }}
-                href={task.type === "subagent" ? data.sessionHref?.(task.id) : undefined}
-                onClick={(event: MouseEvent) => {
-                  if (task.type !== "subagent" || !data.navigateToSession) return
-                  if (event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
-                  event.preventDefault()
-                  setStore("open", false)
-                  data.navigateToSession(task.id)
-                }}
-              >
-                <span class="shrink-0">{taskType(task)}</span>
-                <span class="session-summary-label text-v2-text-text-faint">{task.label}</span>
-              </Dynamic>
-            )}
-          </For>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover>
-  )
-}

packages/app/src/session/summary/configured-lsp.test.ts

@@ -1,38 +0,0 @@
-import { expect, test } from "bun:test"
-import { configuredLsps } from "./configured-lsp"
-
-test("lists configured LSP names with project overrides and no inferred built-ins", () => {
-  expect(
-    configuredLsps([
-      {
-        type: "document",
-        info: {
-          lsp: {
-            typescript: { command: ["typescript-language-server", "--stdio"] },
-            rust: { command: ["rust-analyzer"] },
-          },
-        },
-      },
-      {
-        type: "document",
-        info: {
-          lsp: {
-            typescript: { disabled: true },
-            eslint: { command: ["vscode-eslint-language-server", "--stdio"] },
-          },
-        },
-      },
-    ]),
-  ).toEqual(["eslint", "rust"])
-  expect(configuredLsps([{ type: "document", info: { lsp: true } }])).toEqual([])
-})
-
-test("a later whole-LSP setting clears earlier names", () => {
-  expect(
-    configuredLsps([
-      { type: "document", info: { lsp: { rust: { command: ["rust-analyzer"] } } } },
-      { type: "document", info: { lsp: false } },
-      { type: "document", info: { lsp: { custom: { command: ["custom-lsp"] } } } },
-    ]),
-  ).toEqual(["custom"])
-})

packages/app/src/session/summary/configured-lsp.ts

@@ -1,17 +0,0 @@
-import type { ConfigEntry } from "@opencode/client"
-
-export function configuredLsps(entries: readonly ConfigEntry[]) {
-  return entries
-    .reduce<string[]>((names, entry) => {
-      if (entry.type !== "document" || entry.info.lsp === undefined) return names
-      const lsp = entry.info.lsp
-      if (typeof lsp === "boolean") return []
-      return [
-        ...names.filter((name) => !Object.hasOwn(lsp, name)),
-        ...Object.entries(lsp)
-          .filter(([, server]) => !server.disabled)
-          .map(([name]) => name),
-      ]
-    }, [])
-    .toSorted((a, b) => a.localeCompare(b))
-}

packages/app/src/session/summary/panel.tsx

@@ -1,130 +0,0 @@
-import { DiffChanges } from "@opencode/ui/diff-changes"
-import { Icon } from "@opencode/ui/icon"
-import { getFilename } from "@opencode/util/path"
-import { createMemo, Show, type JSX } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import type { Project } from "@/runtime/server/types"
-import { useSettings } from "@/settings/model"
-import { containsDirectory, workspaceDirectories } from "@/workspaces/paths"
-import { SessionWorkspaceMenu } from "../timeline/session-workspace-menu"
-import { BackgroundWorkSummary, type BackgroundTask } from "./background"
-import { SessionServerPanel } from "./server-panel"
-import { ProjectSummaryCard } from "./project-card"
-import "./summary.css"
-
-export function SessionSummaryPanel(props: {
-  shown?: boolean
-  mobile?: boolean
-  project: Project
-  avatar?: JSX.Element
-  directory: string
-  local: boolean
-  branch?: string
-  baseBranch?: string
-  diffs?: { additions: number; deletions: number }[]
-  sessionID: string
-  moveEligible: boolean
-  moveDismissed: boolean
-  onMoveDismiss: () => void
-  onReview: () => void
-  backgroundTasks: BackgroundTask[]
-}) {
-  const language = useLanguage()
-  const settings = useSettings()
-  const expanded = settings.sessionSummary.projectExpanded
-  const placement = createMemo(() =>
-    props.mobile ? "top-end" : language.direction() === "rtl" ? "right-start" : "left-start",
-  )
-  const location = () => {
-    if (props.local) return language.t("session.new.workspace.local")
-    const workspace = workspaceDirectories(props.project).find((item) => containsDirectory(item, props.directory))
-    return getFilename(workspace ?? props.directory)
-  }
-
-  return (
-    <div data-component="session-summary-panel" data-mobile={props.mobile || undefined}>
-      <div>
-        <ProjectSummaryCard project={props.project} avatar={props.avatar}>
-          <SessionWorkspaceMenu
-            eligible={props.moveEligible}
-            sessionID={props.sessionID}
-            project={props.project}
-            directory={props.directory}
-            placement={placement()}
-            gutter={4}
-            class="session-summary-row"
-          >
-            <Icon name={props.local ? "monitor" : "outline-worktree"} class="shrink-0 text-v2-icon-icon-muted" />
-            <span dir="auto" class="session-summary-label">
-              {location()}
-            </span>
-            <Icon name="fill-triangle-down" class="shrink-0 text-v2-icon-icon-muted" />
-          </SessionWorkspaceMenu>
-          <div class="session-summary-row">
-            <Icon name="branch" class="shrink-0 text-v2-icon-icon-muted" />
-            <Show
-              when={props.branch}
-              fallback={
-                <span class="flex min-w-0 items-center gap-1.5">
-                  <span class="shrink-0 whitespace-nowrap">{language.t("session.summary.noBranch")}</span>
-                  <Show when={props.baseBranch}>
-                    {(base) => (
-                      <>
-                        <span class="text-v2-text-text-muted">·</span>
-                        <span class="truncate text-v2-text-text-faint">
-                          {language.t("session.summary.basedOn", { branch: base() })}
-                        </span>
-                      </>
-                    )}
-                  </Show>
-                </span>
-              }
-            >
-              <span dir="auto" class="min-w-0 truncate">
-                {props.branch}
-              </span>
-            </Show>
-          </div>
-          <button type="button" class="session-summary-row" onClick={props.onReview}>
-            <Icon 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()} />
-                </Show>
-              )}
-            </Show>
-          </button>
-          <BackgroundWorkSummary tasks={props.backgroundTasks} mobile={props.mobile} />
-        </ProjectSummaryCard>
-        <Show when={expanded() && props.local && props.diffs?.length && props.moveEligible && !props.moveDismissed}>
-          <div class="session-summary-move">
-            <SessionWorkspaceMenu
-              eligible={props.moveEligible}
-              sessionID={props.sessionID}
-              project={props.project}
-              directory={props.directory}
-              placement={placement()}
-              gutter={4}
-              class="session-summary-row"
-            >
-              <Icon name="outline-worktree" class="shrink-0 text-v2-icon-icon-muted" />
-              <span class="min-w-0 truncate">{language.t("workspace.move.title")}</span>
-            </SessionWorkspaceMenu>
-            <button
-              type="button"
-              class="session-summary-dismiss"
-              aria-label={language.t("common.dismiss")}
-              onClick={props.onMoveDismiss}
-            >
-              <Icon name="xmark-small" />
-            </button>
-          </div>
-        </Show>
-      </div>
-      <SessionServerPanel directory={props.directory} shown={props.shown !== false} mobile={props.mobile} />
-    </div>
-  )
-}

packages/app/src/session/summary/popover.tsx

@@ -1,31 +0,0 @@
-import { Popover } from "@kobalte/core/popover"
-import { Icon } from "@opencode/ui/icon"
-import { IconButton } from "@opencode/ui/icon-button"
-import type { ParentProps } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-
-export function SummaryPopover(props: ParentProps<{ open: boolean; onOpenChange: (open: boolean) => void }>) {
-  const language = useLanguage()
-  return (
-    <Popover open={props.open} placement="bottom-end" gutter={2} overflowPadding={16} onOpenChange={props.onOpenChange}>
-      <Popover.Anchor class="pointer-events-none absolute end-3 top-0 h-12 w-0" aria-hidden="true" />
-      <Popover.Trigger
-        as={IconButton}
-        icon={<Icon name="window-analytics" />}
-        variant="ghost-muted"
-        size="large"
-        state={props.open ? "pressed" : undefined}
-        aria-label={language.t("session.summary.title")}
-        aria-expanded={props.open}
-      />
-      <Popover.Portal>
-        <Popover.Content
-          class="z-50 max-h-[calc(100dvh-96px)] overflow-y-auto border-0 bg-transparent p-1 outline-none"
-          aria-label={language.t("session.summary.title")}
-        >
-          {props.children}
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover>
-  )
-}

packages/app/src/session/summary/project-card.tsx

@@ -1,50 +0,0 @@
-import { Icon } from "@opencode/ui/icon"
-import { ProjectAvatar } from "@opencode/ui/project-avatar"
-import { createUniqueId, Show, type ParentProps, type JSX } from "solid-js"
-import type { Project } from "@/runtime/server/types"
-import { useSettings } from "@/settings/model"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
-import { getProjectAvatarVariant } from "@/shell/state/layout"
-import "./summary.css"
-
-export function ProjectSummaryCard(
-  props: ParentProps<{
-    project: Pick<Project, "name" | "worktree" | "icon"> & { id?: string }
-    avatar?: JSX.Element
-  }>,
-) {
-  const settings = useSettings()
-  const contentID = createUniqueId()
-  const expanded = settings.sessionSummary.projectExpanded
-  return (
-    <section class="session-summary-card" data-section="project">
-      <button
-        type="button"
-        class="session-summary-row session-summary-heading"
-        aria-label={displayName(props.project)}
-        aria-expanded={expanded()}
-        aria-controls={contentID}
-        onClick={() => settings.sessionSummary.setProjectExpanded(!expanded())}
-      >
-        {props.avatar ?? (
-          <ProjectAvatar
-            fallback={displayName(props.project)}
-            src={getProjectAvatarSource(props.project.id, props.project.icon)}
-            variant={getProjectAvatarVariant(props.project.icon?.color)}
-          />
-        )}
-        <span class="session-summary-heading-label">
-          <span dir="auto" class="min-w-0 truncate">
-            {displayName(props.project)}
-          </span>
-          <Icon name="fill-triangle-down" class="session-summary-disclosure" />
-        </span>
-      </button>
-      <Show when={expanded()}>
-        <div id={contentID} class="session-summary-rows">
-          {props.children}
-        </div>
-      </Show>
-    </section>
-  )
-}

packages/app/src/session/summary/server-panel.tsx

@@ -1,441 +0,0 @@
-import { Popover } from "@kobalte/core/popover"
-import { Icon } from "@opencode/ui/icon"
-import { Switch } from "@opencode/ui/switch"
-import {
-  createEffect,
-  createMemo,
-  createResource,
-  createUniqueId,
-  For,
-  Index,
-  on,
-  onCleanup,
-  Show,
-  type JSX,
-} from "solid-js"
-import { createStore } from "solid-js/store"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useData, useServer } from "@/runtime/server/current"
-import { useServerSDK } from "@/runtime/server/client"
-import { ServerConnection, serverName } from "@/runtime/server/registry"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useSettings } from "@/settings/model"
-import { pluginLabel } from "@/providers/catalog/plugin"
-import { useMcpToggle, type McpControls } from "@/providers/connect/mcp"
-import { configuredLsps } from "./configured-lsp"
-
-const services = [
-  { type: "mcp", icon: "mcp", label: "session.summary.mcp" },
-  { type: "plugins", icon: "cube", label: "session.summary.plugins" },
-  { type: "skills", icon: "post-skill", label: "session.summary.skills" },
-  { type: "lsp", icon: "code", label: "session.summary.lsp" },
-] as const
-
-type Service = (typeof services)[number]["type"]
-
-type ServiceMenuProps = {
-  service: (typeof services)[number]
-  directory: string
-  shown: boolean
-  open: boolean
-  mobile?: boolean
-  mcp?: McpControls
-  onOpenChange: (open: boolean) => void
-}
-
-export function SessionServerPanel(props: { directory: string; shown: boolean; mobile?: boolean; mcp?: McpControls }) {
-  const language = useLanguage()
-  const server = useServer()
-  const global = useGlobal()
-  const settings = useSettings()
-  const contentID = createUniqueId()
-  const expanded = settings.sessionSummary.serverExpanded
-  const name = createMemo(() => {
-    const servers = global.servers.list()
-    if (servers.length < 2) return language.t("session.summary.server")
-    return serverName(servers.find((connection) => ServerConnection.key(connection) === server.key) ?? server.conn)
-  })
-  const [store, setStore] = createStore<{ submenu?: Service }>({})
-  createEffect(on([() => props.directory, () => props.shown, expanded], () => setStore("submenu", undefined)))
-
-  return (
-    <section class="session-summary-card" data-section="server">
-      <button
-        type="button"
-        class="session-summary-row session-summary-heading"
-        aria-expanded={expanded()}
-        aria-controls={contentID}
-        onClick={() => settings.sessionSummary.setServerExpanded(!expanded())}
-      >
-        <Icon name="server" class="shrink-0 text-v2-icon-icon-muted" />
-        <span class="session-summary-heading-label">
-          <span dir="auto" class="min-w-0 truncate">
-            {name()}
-          </span>
-          <Icon name="fill-triangle-down" class="session-summary-disclosure" />
-        </span>
-      </button>
-      <Show when={expanded() ? props.directory : undefined} keyed>
-        {(directory) => (
-          <div id={contentID} class="session-summary-rows">
-            <For each={services}>
-              {(service) => (
-                <ServiceMenu
-                  service={service}
-                  directory={directory}
-                  shown={props.shown}
-                  open={store.submenu === service.type}
-                  mobile={props.mobile}
-                  mcp={props.mcp}
-                  onOpenChange={(open) => setStore("submenu", open ? service.type : undefined)}
-                />
-              )}
-            </For>
-          </div>
-        )}
-      </Show>
-    </section>
-  )
-}
-
-function ServiceMenu(props: ServiceMenuProps) {
-  if (props.service.type === "mcp") return <McpMenu {...props} />
-  if (props.service.type === "lsp") return <LspMenu {...props} />
-  return <ServiceCatalog {...props} />
-}
-
-function LspMenu(props: ServiceMenuProps) {
-  const data = useData()
-  const sdk = useServerSDK()
-  const language = useLanguage()
-  const [load, { refetch }] = createResource(
-    () => props.shown && props.directory,
-    (directory) => {
-      data.location.config.invalidate({ directory })
-      return data.location.config.sync({ directory })
-    },
-  )
-  const names = createMemo(() => configuredLsps(data.location.config.list({ directory: props.directory }) ?? []))
-  createEffect(() => {
-    onCleanup(sdk.event.location(props.directory).on("config.updated", () => void refetch()))
-  })
-  return (
-    <ServicePopover
-      {...props}
-      loading={load.loading}
-      ready={data.location.config.list({ directory: props.directory }) !== undefined}
-      empty={names().length === 0}
-      error={load.error}
-      retry={refetch}
-    >
-      <Show
-        when={names().length}
-        fallback={
-          <ServiceEmpty
-            title={language.t("session.summary.lsp.empty")}
-            description={language.t("session.summary.lsp.manage")}
-          />
-        }
-      >
-        <div class="session-service-message">{language.t("session.summary.lsp.configured")}</div>
-        <For each={names()}>
-          {(name) => (
-            <div class="session-service-row">
-              <span dir="auto" class="session-summary-label">
-                {name}
-              </span>
-            </div>
-          )}
-        </For>
-        <div class="session-service-message">{language.t("session.summary.lsp.manage")}</div>
-      </Show>
-    </ServicePopover>
-  )
-}
-
-function McpMenu(props: ServiceMenuProps) {
-  const data = useData()
-  const language = useLanguage()
-  const toggle = useMcpToggle(() => props.directory)
-  const [load, { refetch }] = createResource(
-    () => props.shown && ([props.directory, props.mcp?.preview] as const),
-    async ([directory, preview]) => {
-      data.location.mcp.server.invalidate({ directory })
-      await Promise.all([
-        data.location.mcp.server.sync({ directory }),
-        ...(preview ? [data.location.config.sync({ directory })] : []),
-      ])
-    },
-  )
-  const servers = createMemo(() =>
-    (data.location.mcp.server.list({ directory: props.directory }) ?? []).toSorted((a, b) =>
-      a.name.localeCompare(b.name),
-    ),
-  )
-  const defaults = createMemo(() =>
-    Object.fromEntries(
-      (data.location.config.list({ directory: props.directory }) ?? []).flatMap((entry) =>
-        entry.type === "document"
-          ? Object.entries(entry.info.mcp?.servers ?? {}).map(([name, config]) => [name, !config.disabled] as const)
-          : [],
-      ),
-    ),
-  )
-
-  return (
-    <ServicePopover
-      {...props}
-      loading={load.loading}
-      ready={
-        data.location.mcp.server.list({ directory: props.directory }) !== undefined &&
-        (!props.mcp?.preview || data.location.config.list({ directory: props.directory }) !== undefined)
-      }
-      empty={servers().length === 0}
-      error={load.error}
-      retry={refetch}
-    >
-      <Show
-        when={servers().length}
-        fallback={
-          <ServiceEmpty
-            title={language.t("session.summary.mcp.empty")}
-            description={language.t("session.summary.mcp.add")}
-          />
-        }
-      >
-        <Show when={props.mcp?.preview}>
-          <div class="session-service-message" data-slot="mcp-preview-hint">
-            {language.t("session.summary.mcp.onCreation")}
-          </div>
-        </Show>
-        <Index each={servers()}>
-          {(server) => {
-            const preview = () => props.mcp?.preview === true
-            const enabled = () =>
-              preview()
-                ? (props.mcp?.states[server().name] ?? defaults()[server().name] ?? true)
-                : server().status.status !== "disabled"
-            const pending = () =>
-              (props.mcp?.pending ?? toggle.isPending) || (!preview() && server().status.status === "pending")
-            const error = () => {
-              const status = server().status
-              return status.status === "failed" ? status.error : undefined
-            }
-            const label = () => {
-              if (preview()) return undefined
-              const status = server().status.status
-              if (status === "failed") return language.t("session.summary.failed")
-              if (status === "pending") return language.t("session.summary.connecting")
-              if (status === "needs_auth") return language.t("session.summary.needsAuth")
-              return undefined
-            }
-            const change = (value: boolean) => {
-              if (pending()) return
-              if (props.mcp) return props.mcp.change(server().name, value)
-              toggle.mutate({ name: server().name, enabled: value })
-            }
-            return (
-              <Switch
-                class="session-mcp-row [&_[data-slot=switch-description]]:sr-only"
-                description={preview() ? language.t("session.summary.mcp.onCreation") : label()}
-                checked={enabled()}
-                readOnly={pending()}
-                aria-disabled={pending()}
-                aria-busy={props.mcp?.pending ?? toggle.isPending}
-                onChange={change}
-                onClick={(event: MouseEvent) => {
-                  if (event.target === event.currentTarget) change(!enabled())
-                }}
-                title={preview() ? server().name : (error() ?? server().name)}
-              >
-                <span
-                  class="session-service-dot"
-                  data-status={preview() ? undefined : server().status.status}
-                  aria-hidden="true"
-                />
-                <span dir="auto" class="session-summary-label">
-                  {server().name}
-                </span>
-                <Show when={label()}>
-                  {(status) => (
-                    <span class="session-service-status" aria-hidden="true">
-                      {status()}
-                    </span>
-                  )}
-                </Show>
-              </Switch>
-            )
-          }}
-        </Index>
-      </Show>
-    </ServicePopover>
-  )
-}
-
-function ServiceCatalog(props: ServiceMenuProps) {
-  const data = useData()
-  const sdk = useServerSDK()
-  const language = useLanguage()
-  const [items, { refetch }] = createResource(
-    () => props.shown && props.directory,
-    async (directory) => {
-      if (props.service.type === "plugins") {
-        const result = await sdk.api.plugin.list({ location: { directory } })
-        return result.data
-          .filter((plugin) => plugin.source.type !== "builtin")
-          .map((plugin) => ({
-            name: pluginLabel(plugin),
-            status: plugin.state.status,
-            error: plugin.state.status === "failed" ? plugin.state.error : undefined,
-          }))
-      }
-      data.location.skill.invalidate({ directory })
-      await data.location.skill.sync({ directory })
-      return undefined
-    },
-  )
-  const loaded = () => items.state === "ready" || items.state === "refreshing"
-  const list = createMemo(() => {
-    const entries =
-      props.service.type === "plugins"
-        ? loaded()
-          ? (items.latest ?? [])
-          : []
-        : (data.location.skill.list({ directory: props.directory }) ?? []).map((skill) => ({
-            name: skill.name,
-            status: "active",
-            error: undefined,
-          }))
-    return entries.toSorted((a, b) => a.name.localeCompare(b.name))
-  })
-  createEffect(() => {
-    onCleanup(
-      sdk.event
-        .location(props.directory)
-        .on(props.service.type === "plugins" ? "plugin.updated" : "skill.updated", () => void refetch()),
-    )
-  })
-  return (
-    <ServicePopover
-      {...props}
-      loading={items.loading}
-      ready={
-        props.service.type === "plugins"
-          ? loaded()
-          : data.location.skill.list({ directory: props.directory }) !== undefined
-      }
-      empty={list().length === 0}
-      error={items.error}
-      retry={refetch}
-    >
-      <Show
-        when={list().length}
-        fallback={
-          <ServiceEmpty
-            title={language.t(
-              props.service.type === "plugins" ? "session.summary.plugins.empty" : "session.summary.skills.empty",
-            )}
-            description={language.t(
-              props.service.type === "plugins" ? "session.summary.plugins.add" : "session.summary.skills.add",
-            )}
-          />
-        }
-      >
-        <div class="session-service-message">
-          {language.t(
-            props.service.type === "plugins" ? "session.summary.plugins.manage" : "session.summary.skills.manage",
-          )}
-        </div>
-        <For each={list()}>
-          {(item) => (
-            <div class="session-service-row" title={item.error ?? item.name}>
-              <span class="session-service-dot" data-status={item.status} aria-hidden="true" />
-              <span dir="auto" class="session-summary-label">
-                {item.name}
-              </span>
-              <Show when={item.status === "failed"}>
-                <span class="session-service-status">{language.t("session.summary.failed")}</span>
-              </Show>
-            </div>
-          )}
-        </For>
-      </Show>
-    </ServicePopover>
-  )
-}
-
-function ServicePopover(
-  props: ServiceMenuProps & {
-    loading: boolean
-    ready: boolean
-    empty: boolean
-    error: unknown
-    retry: () => unknown
-    children: JSX.Element
-  },
-) {
-  const language = useLanguage()
-  const placement = createMemo(() =>
-    props.mobile ? "top-end" : language.direction() === "rtl" ? "right-start" : "left-start",
-  )
-  return (
-    <Popover
-      open={props.open}
-      onOpenChange={(open) => {
-        props.onOpenChange(open)
-        if (open && !props.loading) void props.retry()
-      }}
-      placement={placement()}
-      gutter={4}
-      overflowPadding={16}
-      modal={false}
-    >
-      <Popover.Trigger as="button" type="button" class="session-summary-row">
-        <Icon name={props.service.icon} class="shrink-0 text-v2-icon-icon-muted" />
-        <span class="session-summary-label">{language.t(props.service.label)}</span>
-        <Icon name="fill-triangle-down" class="shrink-0 text-v2-icon-icon-muted" />
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          class="session-service-menu"
-          data-service={props.service.type}
-          data-empty={(props.ready && !props.error && props.empty) || undefined}
-          aria-busy={props.loading}
-          aria-label={language.t(props.service.label)}
-        >
-          <Show
-            when={props.ready || !props.loading}
-            fallback={
-              <div class="session-service-message" role="status">
-                {language.t("common.loading")}
-              </div>
-            }
-          >
-            <Show
-              when={!props.error}
-              fallback={
-                <div class="session-service-message" role="alert">
-                  <p>{language.t("common.requestFailed")}</p>
-                  <button type="button" class="session-summary-row" onClick={() => props.retry()}>
-                    {language.t("session.summary.retry")}
-                  </button>
-                </div>
-              }
-            >
-              {props.children}
-            </Show>
-          </Show>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover>
-  )
-}
-
-function ServiceEmpty(props: { title: string; description: string }) {
-  return (
-    <div class="session-service-empty">
-      <strong>{props.title}</strong>
-      <p>{props.description}</p>
-    </div>
-  )
-}

packages/app/src/session/summary/summary.css

@@ -1,221 +0,0 @@
-[data-component="session-summary-panel"] {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  width: 280px;
-  max-width: calc(100vw - 32px);
-
-  &[data-mobile] {
-    width: 100%;
-    max-width: none;
-  }
-}
-
-.session-summary-card {
-  position: relative;
-  z-index: 1;
-  padding: 4px 2px;
-  border-radius: 6px;
-  background: var(--v2-background-bg-base);
-  box-shadow: var(--v2-elevation-raised);
-}
-
-[data-color-scheme="dark"] .session-summary-card {
-  background: var(--v2-background-bg-layer-01);
-}
-
-.session-summary-rows {
-  display: flex;
-  flex-direction: column;
-}
-
-.session-summary-row,
-.session-service-row,
-[data-component="switch"].session-mcp-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-height: 32px;
-  padding: 4px 12px;
-  border-radius: 4px;
-  color: var(--v2-text-text-base);
-  font-size: 13px;
-  font-weight: 440;
-  line-height: var(--line-height-base);
-  text-align: start;
-}
-
-.session-summary-row:focus-visible,
-.session-mcp-row:focus-within {
-  outline: none;
-  background: var(--v2-overlay-simple-overlay-hover);
-}
-
-@media (hover: hover) {
-  button.session-summary-row:hover,
-  .session-mcp-row:not([data-disabled]):hover {
-    background: var(--v2-overlay-simple-overlay-hover);
-  }
-}
-
-.session-summary-row[data-expanded] {
-  background: var(--v2-overlay-simple-overlay-pressed);
-}
-
-.session-summary-heading {
-  color: var(--v2-text-text-muted);
-  font-weight: 530;
-}
-
-.session-summary-heading-label {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  gap: 4px;
-}
-
-.session-summary-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: start;
-}
-.session-summary-disclosure {
-  flex-shrink: 0;
-  color: var(--v2-icon-icon-muted);
-}
-.session-summary-heading[aria-expanded="false"] .session-summary-disclosure {
-  transform: rotate(-90deg);
-}
-.session-summary-heading[aria-expanded="false"]:dir(rtl) .session-summary-disclosure {
-  transform: rotate(90deg);
-}
-
-.session-service-menu {
-  z-index: 60;
-  width: 280px;
-  max-width: calc(100vw - 32px);
-  max-height: min(480px, calc(100dvh - 32px));
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding: 4px 2px;
-  border-radius: 6px;
-  background: var(--v2-background-bg-layer-01);
-  box-shadow: var(--v2-elevation-floating);
-  outline: none;
-  color: var(--v2-text-text-base);
-  font-size: 13px;
-  line-height: var(--line-height-base);
-  transform-origin: var(--kb-popover-content-transform-origin);
-  animation: menu-v2-in 120ms ease-out;
-
-  &[data-empty] {
-    width: 200px;
-    padding: 0;
-  }
-}
-
-.session-service-empty {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px 12px;
-  color: var(--v2-text-text-faint);
-  font-size: 11px;
-  font-weight: 440;
-  line-height: var(--line-height-compact);
-  overflow-wrap: anywhere;
-
-  strong {
-    font-weight: 530;
-  }
-}
-
-.session-service-message {
-  padding: 6px 12px;
-  color: var(--v2-text-text-faint);
-  overflow-wrap: anywhere;
-}
-.session-service-dot {
-  width: 6px;
-  height: 6px;
-  flex-shrink: 0;
-  border-radius: 50%;
-  background: var(--v2-icon-icon-faint);
-}
-.session-service-dot[data-status="connected"],
-.session-service-dot[data-status="active"] {
-  background: var(--icon-success-base);
-}
-.session-service-dot[data-status="failed"] {
-  background: var(--icon-critical-base);
-}
-.session-service-dot[data-status="needs_auth"] {
-  background: var(--icon-warning-base);
-}
-
-[data-component="switch"].session-mcp-row [data-slot="switch-label"] {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 0;
-  height: auto;
-  align-self: stretch;
-  color: inherit;
-  font: inherit;
-  letter-spacing: inherit;
-}
-.session-service-status {
-  flex-shrink: 0;
-  font-size: 11px;
-  line-height: var(--line-height-compact);
-  color: var(--v2-text-text-faint);
-}
-.session-mcp-row[aria-disabled="true"] [data-slot="switch-control"] {
-  opacity: 0.5;
-}
-.session-summary-move {
-  position: relative;
-  padding-top: 6px;
-  margin-top: -6px;
-  border-radius: 0 0 6px 6px;
-  background: var(--v2-background-bg-layer-02);
-}
-.session-summary-move > .session-summary-row {
-  padding-inline-end: 36px;
-}
-.session-summary-dismiss {
-  position: absolute;
-  inset-inline-end: 8px;
-  bottom: 6px;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--v2-icon-icon-muted);
-  border-radius: 4px;
-}
-.session-summary-dismiss:hover,
-.session-summary-dismiss:focus-visible {
-  background: var(--v2-overlay-simple-overlay-hover);
-  outline: none;
-}
-
-@media (max-width: 767px) {
-  [data-component="session-summary-panel"] .session-summary-row,
-  .session-service-menu .session-service-row,
-  .session-service-menu .session-mcp-row {
-    min-height: 44px;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .session-service-menu {
-    animation: none;
-  }
-}

packages/app/src/session/timeline/background-work.stories.tsx

@@ -1,7 +1,5 @@
 import { DataProvider } from "@opencode/session-ui/context"
-import { BackgroundMoveHint } from "./message-timeline"
-import { BackgroundWorkSummary } from "../summary/background"
-import "../summary/summary.css"
+import { BackgroundMoveHint, BackgroundWorkSummary } from "./message-timeline"
 
 const tasks = [
   { id: "task_explore", type: "subagent" as const, agent: "explore", label: "Reviewing component implementation" },

packages/app/src/session/timeline/cache.ts

@@ -0,0 +1,69 @@
+import {
+  createComputed,
+  createMemo,
+  createRoot,
+  getOwner,
+  on,
+  onCleanup,
+  untrack,
+  type Accessor,
+  type JSX,
+} from "solid-js"
+import { createScopedCache } from "@/runtime/server/scoped-cache"
+import type { TimelineSessionSource } from "./controller"
+
+export function createTimelineCache(
+  session: TimelineSessionSource & { identity: { workspaceKey: Accessor<string> } },
+  render: (source: TimelineSessionSource, active: Accessor<boolean>) => JSX.Element,
+  visible: Accessor<boolean>,
+) {
+  const owner = getOwner()
+  let workspace = untrack(session.identity.workspaceKey)
+  const cache = createScopedCache(
+    (key) =>
+      createRoot((dispose) => {
+        const id = untrack(session.identity.sessionID)
+        const sessionKey = untrack(session.identity.sessionKey)
+        const active = createMemo(() => visible() && session.identity.sessionKey() === key)
+        // A detached view retains its own inputs until it is selected again.
+        const select = <T>(read: Accessor<T>) =>
+          createMemo<T>((previous) => (active() ? read() : previous), untrack(read))
+        return {
+          value: render(
+            {
+              identity: {
+                params: session.identity.params,
+                sessionID: () => id,
+                sessionKey: () => sessionKey,
+              },
+              data: {
+                info: select(session.data.info),
+                parent: select(session.data.parent),
+                parentID: select(session.data.parentID),
+                status: select(session.data.status),
+              },
+              history: { messages: select(session.history.messages) },
+            },
+            active,
+          ),
+          dispose,
+        }
+      }, owner),
+    { maxEntries: 16, dispose: (entry) => entry.dispose() },
+  )
+  onCleanup(cache.clear)
+  const syncWorkspace = (key: string) => {
+    if (workspace === key) return
+    workspace = key
+    cache.clear()
+  }
+  // Providers follow the selected Location even while its history is loading.
+  // Dispose detached views before their effects can read the new Location.
+  createComputed(on(session.identity.workspaceKey, syncWorkspace, { defer: true }))
+  return () => {
+    // A tab's render can run before the workspace watcher in the same batch.
+    // Clear the old workspace here, and let that later watcher keep this view.
+    syncWorkspace(session.identity.workspaceKey())
+    return cache.get(session.identity.sessionKey()).value
+  }
+}

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

@@ -1,19 +1,11 @@
-import {
-  createEffect,
-  createMemo,
-  createSignal,
-  lazy,
-  on,
-  onCleanup,
-  Show,
-  Suspense,
-  type Accessor,
-  type JSX,
-} from "solid-js"
+import { createEffect, createMemo, createSignal, For, on, onCleanup, Show, type Accessor, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
 import { createAnimatedPresence } from "@/runtime/animated-presence"
 import type { SessionUserActions } from "@opencode/session-ui/actions"
+import { useData } from "@opencode/session-ui/context"
 import { Button } from "@opencode/ui/button"
+import { DiffChanges } from "@opencode/ui/diff-changes"
 import { Icon } from "@opencode/ui/icon"
 import { IconButton } from "@opencode/ui/icon-button"
 import { InlineInput } from "@opencode/ui/inline-input"
@@ -21,30 +13,34 @@ import { Keybind } from "@opencode/ui/keybind"
 import { Menu } from "@opencode/ui/menu"
 import { TextShimmer } from "@opencode/ui/text-shimmer"
 import { ProjectAvatar } from "@opencode/ui/project-avatar"
-import { SummaryPopover } from "../summary/popover"
+import type { Project } from "@/runtime/server/types"
+import { getFilename } from "@opencode/util/path"
+import { Popover } from "@kobalte/core/popover"
 import { SessionContextUsage } from "@/session/timeline/session-context-usage"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useServer } from "@/runtime/server/current"
 import { useWorkspaceLocation } from "@/workspaces/location"
-import { Timeline } from "@opencode/session-ui/timeline/projection"
+import { Timeline, TimelineRow } from "@opencode/session-ui/timeline/projection"
 import { createSessionTimelineRowRenderer } from "@opencode/session-ui/timeline/row"
 import { getReadyMarkdown, preloadMarkdown } from "@opencode/session-ui/markdown-cache"
 import { createTimelineController, type TimelineController, type TimelineSessionSource } from "./controller"
 import { createTimelineVirtualizer } from "./virtualizer"
-import { containsDirectory, isWorkspaceDirectory } from "@/workspaces/paths"
+import { containsDirectory, isWorkspaceDirectory, workspaceDirectories } from "@/workspaces/paths"
+import { SessionWorkspaceMenu } from "@/session/timeline/session-workspace-menu"
 import { getProjectAvatarVariant } from "@/shell/state/layout"
 import { displayName, getProjectAvatarSource, projectForSession } from "@/shell/layout/helpers"
 import { parseCommentNote, readPromptPresentation } from "@/composer/comment-note"
 import { useCommand } from "@/shell/commands/command"
 import { useSettings } from "@/settings/model"
 import { SessionProjectMenu, SessionTitleHeader } from "../session-identity-header"
-import { SessionHeaderSpacer } from "@/session/header/session-header"
-import type { BackgroundTask } from "../summary/background"
+import { SessionHeader } from "@/session/header/session-header"
 
-const SessionSummaryPanel = lazy(async () => {
-  const { SessionSummaryPanel } = await import("../summary/panel")
-  return { default: SessionSummaryPanel }
-})
+type BackgroundTask = {
+  id: string
+  type: "shell" | "subagent"
+  label: string
+  agent?: string
+}
 
 type SessionBackground = {
   blocking: Accessor<{ type: "shell" | "subagent"; partID: string; id?: string; label?: string }[]>
@@ -74,8 +70,286 @@ export function BackgroundMoveHint(props: { keybind?: string[]; onMove?: () => v
   )
 }
 
+export function BackgroundWorkSummary(props: { tasks: BackgroundTask[]; mobile?: boolean }) {
+  const language = useLanguage()
+  const data = useData()
+  const [open, setOpen] = createSignal(false)
+  const [triggerRef, setTriggerRef] = createSignal<HTMLButtonElement>()
+  const tasks = createMemo<BackgroundTask[]>((previous = []) => (props.tasks.length > 0 ? props.tasks : previous))
+  const presence = createAnimatedPresence(
+    () => (props.tasks.length > 0 ? true : undefined),
+    () => triggerRef() ?? null,
+  )
+  createEffect(() => {
+    if (props.tasks.length > 0) return
+    setOpen(false)
+  })
+  const taskType = (task: BackgroundTask) => {
+    if (task.type === "shell") return language.t("ui.tool.shell")
+    if (!task.agent) return language.t("ui.tool.agent.default")
+    return task.agent.slice(0, 1).toUpperCase() + task.agent.slice(1)
+  }
+
+  return (
+    <Popover
+      open={open()}
+      placement={props.mobile ? "top-end" : language.direction() === "rtl" ? "right-end" : "left-end"}
+      gutter={4}
+      onOpenChange={(value) => setOpen(value && props.tasks.length > 0)}
+    >
+      <Show when={presence.present()}>
+        <Popover.Trigger
+          ref={setTriggerRef}
+          as="button"
+          type="button"
+          data-component="session-background-summary"
+          class="flex h-7 w-full items-center gap-2 rounded-[4px] px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base 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 duration-150 motion-reduce:animate-none"
+          classList={{
+            "animate-out fade-out fill-mode-forwards": presence.animate() && !presence.show(),
+          }}
+          aria-label={language.plural("session.background.tasksRunning", tasks().length)}
+        >
+          <Icon name="outline-arrow-to-corner-top-right" class="shrink-0 text-v2-icon-icon-muted" />
+          <TextShimmer
+            as="span"
+            text={language.plural("session.background.tasksRunning", tasks().length)}
+            active
+            class="min-w-0 flex-1 truncate text-start"
+          />
+        </Popover.Trigger>
+      </Show>
+      <Popover.Portal>
+        <Popover.Content
+          data-component="session-background-list"
+          class="z-[60] w-[200px] overflow-hidden rounded-[6px] bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] outline-none data-[closed]:animate-out data-[closed]:fade-out data-[closed]:duration-150 motion-reduce:data-[closed]:animate-none"
+        >
+          <For each={tasks().slice(0, 10)}>
+            {(task) => (
+              <Dynamic
+                component={task.type === "subagent" ? "a" : "div"}
+                data-component="session-background-list-item"
+                class="flex h-7 min-w-0 items-center gap-2 rounded-[4px] px-3 text-[13px] font-[440] leading-[var(--line-height-compact)] tracking-[-0.04px]"
+                classList={{
+                  "hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none":
+                    task.type === "subagent",
+                }}
+                href={task.type === "subagent" ? data.sessionHref?.(task.id) : undefined}
+                onClick={(event: MouseEvent) => {
+                  if (task.type !== "subagent" || !data.navigateToSession) return
+                  if (event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+                  event.preventDefault()
+                  setOpen(false)
+                  data.navigateToSession(task.id)
+                }}
+              >
+                <span class="shrink-0 text-v2-text-text-base">{taskType(task)}</span>
+                <span class="min-w-0 flex-1 truncate text-v2-text-text-faint">{task.label}</span>
+              </Dynamic>
+            )}
+          </For>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover>
+  )
+}
+
+function WorkspaceMoveAction(props: {
+  variant: "inline" | "panel"
+  mobile?: boolean
+  eligible: boolean
+  sessionID: string
+  project: Project
+  directory: string
+  dismissed: boolean
+  onDismiss: () => void
+}) {
+  const language = useLanguage()
+  const inline = () => props.variant === "inline"
+  return (
+    <div
+      classList={{
+        "group/workspace-move relative shrink-0": true,
+        "ms-auto h-5 w-[167px]": inline(),
+        "-mt-2.5 h-[46px] w-full rounded-b-[6px] bg-v2-background-bg-layer-02 hover:bg-v2-background-bg-layer-03 transition-colors":
+          !inline(),
+        hidden: props.dismissed,
+      }}
+    >
+      <SessionWorkspaceMenu
+        eligible={props.eligible}
+        sessionID={props.sessionID}
+        project={props.project}
+        directory={props.directory}
+        placement={
+          props.mobile
+            ? "top-end"
+            : inline()
+              ? "bottom-end"
+              : language.direction() === "rtl"
+                ? "right-start"
+                : "left-start"
+        }
+        gutter={props.mobile || inline() ? 4 : -22}
+        contentClass={props.mobile || inline() ? undefined : "relative top-3.5"}
+        class={
+          inline()
+            ? "flex h-5 w-full items-center gap-1.5 rounded-[4px] pe-6 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint 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"
+            : "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="outline-worktree" class="shrink-0 text-v2-icon-icon-muted" />
+        <span class="min-w-0 truncate">{language.t("workspace.move.title")}</span>
+      </SessionWorkspaceMenu>
+      <button
+        type="button"
+        class={`absolute flex size-5 -translate-y-1/2 items-center justify-center rounded-[4px] text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none ${
+          inline()
+            ? "end-0 top-1/2"
+            : "hover-reveal end-3 top-[calc(50%+5px)] group-hover/workspace-move:opacity-100 group-focus-within/workspace-move:opacity-100"
+        }`}
+        aria-label={language.t("common.dismiss")}
+        onClick={(event) => {
+          event.stopPropagation()
+          props.onDismiss()
+        }}
+      >
+        <Icon name="xmark-small" />
+      </button>
+    </div>
+  )
+}
+
+export function SessionSummaryPanel(props: {
+  mobile?: boolean
+  project: Project
+  avatar?: JSX.Element
+  directory: string
+  local: boolean
+  branch?: string
+  baseBranch?: string
+  diffs?: { additions: number; deletions: number }[]
+  sessionID: string
+  moveEligible: boolean
+  moveDismissed: boolean
+  onMoveDismiss: () => void
+  onReview: () => void
+  backgroundTasks: BackgroundTask[]
+}) {
+  const language = useLanguage()
+  const location = () => {
+    if (props.local) return language.t("session.new.workspace.local")
+    const workspace = workspaceDirectories(props.project).find((item) => containsDirectory(item, props.directory))
+    return getFilename(workspace ?? props.directory)
+  }
+  const branch = () => props.branch ?? props.baseBranch
+  const row =
+    "flex h-7 w-full items-center gap-2 rounded-[4px] px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base"
+
+  return (
+    <div data-component="session-summary-panel" class={props.mobile ? "w-full" : "w-[280px]"}>
+      <div class="relative z-10 flex flex-col gap-1 overflow-hidden rounded-[6px] bg-v2-background-bg-base px-0.5 py-1.5 shadow-[var(--v2-elevation-raised)]">
+        <div class={row}>
+          {props.avatar ?? (
+            <ProjectAvatar
+              fallback={displayName(props.project)}
+              src={getProjectAvatarSource(props.project.id, props.project.icon)}
+              variant={getProjectAvatarVariant(props.project.icon?.color)}
+            />
+          )}
+          <span dir="auto" class="min-w-0 flex-1 truncate text-v2-text-text-muted">
+            {displayName(props.project)}
+          </span>
+        </div>
+        <SessionWorkspaceMenu
+          eligible={props.moveEligible}
+          sessionID={props.sessionID}
+          project={props.project}
+          directory={props.directory}
+          placement={props.mobile ? "top-end" : language.direction() === "rtl" ? "right-start" : "left-start"}
+          gutter={props.mobile ? 4 : -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" : "outline-worktree"}
+            class={`shrink-0 ${props.local ? "text-v2-icon-icon-muted" : "text-v2-icon-icon-accent"}`}
+          />
+          <span dir="auto" 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" />
+        </SessionWorkspaceMenu>
+        <div class={row}>
+          <Icon name="branch" class="shrink-0 text-v2-icon-icon-muted" />
+          <Show
+            when={props.branch}
+            fallback={
+              <span class="flex min-w-0 items-center gap-1.5">
+                <span class="shrink-0 whitespace-nowrap">{language.t("session.summary.noBranch")}</span>
+                <Show when={props.baseBranch}>
+                  {(base) => (
+                    <>
+                      <span class="text-v2-text-text-muted">·</span>
+                      <span class="truncate text-v2-text-text-faint">
+                        {language.t("session.summary.basedOn", { branch: base() })}
+                      </span>
+                    </>
+                  )}
+                </Show>
+              </span>
+            }
+          >
+            <span dir="auto" class="min-w-0 truncate">
+              {branch()}
+            </span>
+          </Show>
+        </div>
+        <button
+          type="button"
+          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" />
+          <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()} />
+              </Show>
+            )}
+          </Show>
+        </button>
+        <div
+          class="grid transition-[grid-template-rows] duration-150 ease-out motion-reduce:transition-none"
+          classList={{
+            "grid-rows-[1fr]": props.backgroundTasks.length > 0,
+            "grid-rows-[0fr]": props.backgroundTasks.length === 0,
+          }}
+        >
+          <div class="min-h-0 overflow-hidden">
+            <BackgroundWorkSummary tasks={props.backgroundTasks} mobile={props.mobile} />
+          </div>
+        </div>
+      </div>
+      <Show when={props.local && props.diffs && props.diffs.length > 0 && props.moveEligible}>
+        <WorkspaceMoveAction
+          variant="panel"
+          mobile={props.mobile}
+          eligible={props.moveEligible}
+          sessionID={props.sessionID}
+          project={props.project}
+          directory={props.directory}
+          dismissed={props.moveDismissed}
+          onDismiss={props.onMoveDismiss}
+        />
+      </Show>
+    </div>
+  )
+}
+
 type MessageTimelineProps = {
   hideHeader?: boolean
+  active?: boolean
   session: TimelineSessionSource
   background: SessionBackground
   actions?: SessionUserActions
@@ -90,6 +364,7 @@ type MessageTimelineProps = {
   onSelectionInteraction: (event: MouseEvent) => void
   pinned: boolean
   centered: boolean
+  reserveReviewToggle: boolean
   setContentRef: (el: HTMLDivElement) => void
   diffs: Accessor<{ additions: number; deletions: number }[] | undefined>
   onReview: () => void
@@ -185,6 +460,7 @@ function MessageTimelineView(
   const pinned = createMemo(() => props.pinned)
   const messageByID = projection.messageByID
   const virtualized = createTimelineVirtualizer({
+    active: () => props.active !== false,
     sessionKey: () => `${server.key}/${props.data.sessionID()}`,
     presentationKey: () => JSON.stringify(props.data.timelineDetail()),
     projection,
@@ -278,6 +554,12 @@ function MessageTimelineView(
     if (await props.action.rename(title.draft)) setTitle("editing", false)
   }
 
+  createEffect(() => {
+    if (props.active !== false) return
+    setSummary(false)
+    setTitle({ draft: "", editing: false, menuOpen: false, pendingRename: false })
+  })
+
   const rowRenderer = createSessionTimelineRowRenderer({
     sessionID: () => sessionID()!,
     status: sessionStatus,
@@ -537,32 +819,42 @@ function MessageTimelineView(
                     <SessionContextUsage placement="bottom" />
                     <Show when={!parentID() && project()}>
                       {(project) => (
-                        <SummaryPopover open={summaryOpen()} onOpenChange={setSummary}>
-                          <Suspense>
-                            <SessionSummaryPanel
-                              shown={summaryOpen()}
-                              project={project()}
-                              avatar={showProjectIcon() ? projectAvatar() : undefined}
-                              directory={sessionDirectory()}
-                              local={!workspaceSession()}
-                              branch={data.location.vcs.info({ directory: sdk().directory })?.branch.current}
-                              baseBranch={data.location.vcs.info({ directory: project().worktree })?.branch.current}
-                              diffs={sessionDiffs()}
-                              sessionID={id}
-                              moveEligible={props.workspaceMoveEligible}
-                              moveDismissed={workspaceSuggestionDismissed()}
-                              onMoveDismiss={() => setWorkspaceSuggestionDismissed(true)}
-                              onReview={() => {
-                                setSummary(false)
-                                props.onReview()
-                              }}
-                              backgroundTasks={props.background.tasks()}
-                            />
-                          </Suspense>
-                        </SummaryPopover>
+                        <Popover open={summaryOpen()} placement="bottom-end" gutter={6} onOpenChange={setSummary}>
+                          <Popover.Trigger
+                            as={IconButton}
+                            icon={<Icon name="window-analytics" />}
+                            variant="ghost-muted"
+                            size="large"
+                            state={summaryOpen() ? "pressed" : undefined}
+                            aria-label={language.t("session.summary.title")}
+                            aria-expanded={summaryOpen()}
+                          />
+                          <Popover.Portal>
+                            <Popover.Content class="z-50 border-0 bg-transparent p-0 outline-none">
+                              <SessionSummaryPanel
+                                project={project()}
+                                avatar={showProjectIcon() ? projectAvatar() : undefined}
+                                directory={sessionDirectory()}
+                                local={!workspaceSession()}
+                                branch={data.location.vcs.info({ directory: sdk().directory })?.branch.current}
+                                baseBranch={data.location.vcs.info({ directory: project().worktree })?.branch.current}
+                                diffs={sessionDiffs()}
+                                sessionID={id}
+                                moveEligible={props.workspaceMoveEligible}
+                                moveDismissed={workspaceSuggestionDismissed()}
+                                onMoveDismiss={() => setWorkspaceSuggestionDismissed(true)}
+                                onReview={() => {
+                                  setSummary(false)
+                                  props.onReview()
+                                }}
+                                backgroundTasks={props.background.tasks()}
+                              />
+                            </Popover.Content>
+                          </Popover.Portal>
+                        </Popover>
                       )}
                     </Show>
-                    <SessionHeaderSpacer />
+                    <SessionHeader reserveReviewToggle={props.reserveReviewToggle} />
                   </div>
                 )}
               </Show>

packages/app/src/session/timeline/model.ts

@@ -11,17 +11,17 @@ export {
   selectVisibleSessionUserMessages as selectVisibleUserMessages,
 } from "../session-domain"
 
-export function createTimelineModel(input: { session: Pick<SessionModel, "identity" | "history"> }) {
+export function createTimelineModel(input: { session: Pick<SessionModel, "identity" | "history" | "ownership"> }) {
   const data = useData()
 
   const [resource] = createResource(
     () => input.session.identity.sessionID(),
     async (id) => {
       if (!id) return
-      const key = input.session.identity.sessionKey()
+      const owner = input.session.ownership.capture()
       await Promise.all([data.session.message.sync(id), data.session.pending.sync(id)])
       await enrichLeadingTurn({
-        current: () => input.session.identity.sessionKey() === key,
+        current: owner.current,
         messages: () => data.session.message.list(id),
         more: () => data.session.message.more(id),
         loading: () => data.session.message.loading(id),
@@ -29,12 +29,13 @@ export function createTimelineModel(input: { session: Pick<SessionModel, "identi
         pause: () => new Promise((resolve) => setTimeout(resolve, leadingTurnPageDelay)),
         maxPages: leadingTurnPageLimit,
       }).catch(() => undefined)
+      return id
     },
   )
   const ready = createMemo(() => {
     const id = input.session.identity.sessionID()
     // Enrich the partial leading group without withholding the already loaded tail.
-    return !id || data.session.message.list(id).length > 0 || !resource.loading
+    return !id || data.session.message.list(id).length > 0 || (!resource.loading && resource.latest === id)
   })
   const more = () => {
     const id = input.session.identity.sessionID()

packages/app/src/session/timeline/observe-element-offset.test.ts

@@ -16,6 +16,35 @@ test("matches only the scroll element or an ancestor containing it", () => {
   expect(mutationNodesContainElement([child, sibling], viewport)).toBe(false)
 })
 
+test("restores a view observed before its first attachment", async () => {
+  const targetWindow = new Window()
+  const mutations = controlledMutations(targetWindow)
+  const viewport = targetWindow.document.createElement("div")
+  const instance = {
+    scrollElement: viewport,
+    targetWindow,
+    scrollOffset: 240,
+    options: { horizontal: false, isRtl: false, isScrollingResetDelay: 0, useScrollendEvent: false },
+  } as unknown as Virtualizer<HTMLDivElement, HTMLDivElement>
+  const connections: boolean[] = []
+  const cleanup = observeElementOffsetReconnectAware(
+    instance,
+    (offset) => {
+      instance.scrollOffset = offset
+    },
+    () => connections.push(viewport.isConnected),
+  )
+  try {
+    mutations.append(targetWindow.document.body, viewport)
+    await frames(2, targetWindow)
+    expect(connections).toEqual([true])
+    expect(instance.scrollOffset).toBe(0)
+  } finally {
+    cleanup()
+    await targetWindow.happyDOM.close()
+  }
+})
+
 test("reports a divergent native offset once and ignores equal offsets and unrelated mutations", async () => {
   const targetWindow = new Window()
   const mutations = controlledMutations(targetWindow)

packages/app/src/session/timeline/observe-element-offset.ts

@@ -20,7 +20,8 @@ export function observeElementOffsetReconnectAware<TScrollElement extends Elemen
       cleanupOffset?.()
     }
 
-  let removed = false
+  // Cached views can be constructed before their first attachment to the page.
+  let removed = !element.isConnected
   let frame: number | undefined
   const clearCheck = () => {
     if (frame === undefined) return

packages/app/src/session/timeline/virtualizer.tsx

@@ -2,6 +2,7 @@ import {
   createVirtualizer,
   defaultRangeExtractor,
   elementScroll,
+  observeElementRect,
   type Range,
   type VirtualItem,
 } from "@tanstack/solid-virtual"
@@ -49,6 +50,7 @@ type Projection = Pick<
 >
 
 type Input = {
+  active?: Accessor<boolean>
   sessionKey: Accessor<string>
   presentationKey?: Accessor<string>
   projection: Projection
@@ -83,6 +85,7 @@ type ViewProps = {
 
 export function createTimelineVirtualizer(input: Input) {
   const language = useLanguage()
+  const active = () => input.active?.() !== false
   const isDesktop = createMediaQuery("(min-width: 768px)")
   const topOffset = () => (input.showHeader() ? 64 : isDesktop() ? 0 : 16)
   const ownerSessionKey = input.sessionKey()
@@ -134,7 +137,7 @@ export function createTimelineVirtualizer(input: Input) {
                 !(
                   row._tag === "AssistantPart" &&
                   row.group.type === "context" &&
-                  row.group.refs.length <= 16 &&
+                  row.group.refs.length <= 64 &&
                   !toolOpen[`context:${row.group.key}`]
                 ) && !input.canRenderImmediately?.(row, toolOpen),
             )
@@ -156,6 +159,7 @@ export function createTimelineVirtualizer(input: Input) {
   let virtualContent: HTMLDivElement | undefined
   let scrollTop = 0
   let reportOffset: ((offset: number, scrolling: boolean) => void) | undefined
+  let reportRect: ((rect: { width: number; height: number }) => void) | undefined
   let batchingColdSizes = false
 
   const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
@@ -163,13 +167,22 @@ export function createTimelineVirtualizer(input: Input) {
       return rows().length
     },
     getScrollElement: () => listRoot() ?? null,
+    observeElementRect: (instance, callback) => {
+      reportRect = callback
+      return observeElementRect(instance, (rect) => {
+        if (active()) callback(rect)
+      })
+    },
     // Route navigation detaches and reattaches the scroll element, which drops its offset.
     observeElementOffset: (instance, callback) => {
       reportOffset = (offset, scrolling) => {
+        if (!active()) return
         callback(offset, scrolling)
         settleColdBottom()
       }
       return observeElementOffsetReconnectAware(instance, reportOffset, () => {
+        if (!active()) return
+        virtualContent?.querySelectorAll<HTMLDivElement>("[data-index]").forEach(virtualizer.measureElement)
         if (input.pinned()) virtualizer.scrollToEnd()
         settleColdBottom()
       })
@@ -181,6 +194,11 @@ export function createTimelineVirtualizer(input: Input) {
     // its snapshot on attachment, but later explicit measurements must read layout
     // so deferred/rewrapped content cannot keep stale, clipped heights (TanStack/virtual#1183).
     measureElement: (element, entry, instance) => {
+      if (!active() || !element.isConnected)
+        return (
+          instance.itemSizeCache.get(instance.options.getItemKey(instance.indexFromElement(element))) ??
+          fallbackItemSize
+        )
       const initial = !measuredElements.has(element)
       measuredElements.add(element)
       const box = entry?.borderBoxSize[0]
@@ -192,6 +210,7 @@ export function createTimelineVirtualizer(input: Input) {
       return element.offsetHeight
     },
     scrollToFn: (offset, options, instance) => {
+      if (!active()) return
       if (batchingColdSizes && input.pinned()) return
       if (virtualContent) virtualContent.style.height = `${instance.getTotalSize()}px`
       elementScroll(offset, options, instance)
@@ -221,6 +240,7 @@ export function createTimelineVirtualizer(input: Input) {
   // Read the whole measurement delivery before committing reactive row sizes.
   // Otherwise each row can render and force layout before the next is measured.
   virtualizer.resizeItem = (index, size) => {
+    if (!active()) return
     const row = rows()[index]
     if (!row) return
     const key = TimelineRow.key(row)
@@ -236,6 +256,7 @@ export function createTimelineVirtualizer(input: Input) {
       if (!pendingSizes.size) return
       const sizes = [...pendingSizes]
       pendingSizes.clear()
+      if (!active()) return
       // The hidden pinned mount needs one bottom write after the whole batch,
       // not a layout-forcing scroll adjustment for every measured row.
       batchingColdSizes = coldPending && input.pinned()
@@ -271,7 +292,21 @@ export function createTimelineVirtualizer(input: Input) {
   const virtualRowKeys = createMemo(() => virtualizer.getVirtualItems().map((item) => String(item.key)))
 
   createEffect(() => {
+    if (!active()) return
+    const root = listRoot()
+    if (root) input.setScrollRef(root)
+    if (virtualContent) input.setContentRef(virtualContent)
+    queueMicrotask(() => {
+      if (!active() || !root?.isConnected) return
+      // A detached view can miss its nonzero ResizeObserver delivery. Publish
+      // its real viewport before restoring the offset and admitting rows.
+      reportRect?.({ width: root.offsetWidth, height: root.offsetHeight })
+      if (input.pinned()) virtualizer.scrollToEnd()
+      reportOffset?.(root.scrollTop, false)
+      settleColdBottom()
+    })
     input.setRevealMessage?.((id, partID) => {
+      if (!active()) return
       const partIndex = partID
         ? rows().findIndex(
             (row) => row._tag === "AssistantPart" && row.group.type === "part" && row.group.ref.partID === partID,
@@ -282,6 +317,7 @@ export function createTimelineVirtualizer(input: Input) {
       virtualizer.scrollToIndex(index, { align: "center" })
     })
     input.setScrollToEnd?.(() => {
+      if (!active() || !listRoot()?.isConnected) return
       input.onPin()
       virtualizer.scrollToEnd()
     })
@@ -292,6 +328,7 @@ export function createTimelineVirtualizer(input: Input) {
   let contentObserver: MutationObserver | undefined
   let viewportObserver: ResizeObserver | undefined
   const pinColdBottom = () => {
+    if (!active()) return
     const root = listRoot()
     if (!input.pinned() || !virtualContent || !root) return
     // scrollToEnd computes its target from the DOM, not the new size cache.
@@ -309,7 +346,7 @@ export function createTimelineVirtualizer(input: Input) {
     )
   }
   const settleColdBottom = () => {
-    if (!coldPending || settleQueued) return
+    if (!active() || !coldPending || settleQueued) return
     settleQueued = true
     queueMicrotask(() => {
       settleQueued = false
@@ -372,7 +409,7 @@ export function createTimelineVirtualizer(input: Input) {
     setListRoot(root)
     scrollTop = root.scrollTop
     maxScroll = root.scrollHeight - root.clientHeight
-    input.setScrollRef(root)
+    if (active()) input.setScrollRef(root)
     viewportObserver?.observe(root)
     settleColdBottom()
   }
@@ -429,6 +466,7 @@ export function createTimelineVirtualizer(input: Input) {
   // under a viewport that was already there. Merely resting near the end is not enough, otherwise
   // a later scroll would overwrite an upward intent expressed a pixel short of the bottom.
   const handleListScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+    if (!active()) return
     const root = event.currentTarget
     const previousTop = scrollTop
     const previousMaxScroll = maxScroll
@@ -454,15 +492,8 @@ export function createTimelineVirtualizer(input: Input) {
       let contentMeasureFrame: number | undefined
 
       onMount(() => virtualizer.measureElement(element))
-      createEffect(
-        on(
-          () => item().index,
-          () => {
-            virtualizer.measureElement(element)
-          },
-          { defer: true },
-        ),
-      )
+      // Prepending history changes data-index, not the keyed element's identity.
+      // Its observer reads the current index and delivers any actual size change.
       onCleanup(() => {
         if (contentMeasureFrame !== undefined) cancelAnimationFrame(contentMeasureFrame)
         queueMicrotask(() => virtualizer.measureElement(null))
@@ -484,6 +515,19 @@ export function createTimelineVirtualizer(input: Input) {
           <div
             ref={(value) => {
               element = value
+              if (row()._tag !== "UserMessage" || !addedKeys.has(rowProps.rowKey) || !input.pinned() || coldPending)
+                return
+              // The optimistic row can paint before ResizeObserver corrects the tail estimates.
+              // Measure the mounted tail and pin it in this render's microtask instead.
+              queueMicrotask(() => {
+                if (!input.pinned() || !virtualContent?.isConnected) return
+                virtualizer.elementsCache.forEach((item) => {
+                  if (item.isConnected) virtualizer.resizeItem(virtualizer.indexFromElement(item), item.offsetHeight)
+                })
+                virtualizer.resizeItem(item().index, element.offsetHeight)
+                virtualContent.style.height = `${virtualizer.getTotalSize()}px`
+                virtualizer.scrollToEnd()
+              })
             }}
             data-index={item().index}
             style={{ "min-height": ready() ? undefined : `${initialItem.size}px` }}
@@ -493,7 +537,7 @@ export function createTimelineVirtualizer(input: Input) {
               if (contentMeasureFrame !== undefined) cancelAnimationFrame(contentMeasureFrame)
               contentMeasureFrame = requestAnimationFrame(() => {
                 contentMeasureFrame = undefined
-                if (element.isConnected) virtualizer.measureElement(element)
+                if (active() && element.isConnected) virtualizer.measureElement(element)
               })
             })}
           </div>
@@ -555,7 +599,7 @@ export function createTimelineVirtualizer(input: Input) {
             data-timeline-virtual-content
             ref={(element) => {
               virtualContent = element
-              input.setContentRef(element)
+              if (active()) input.setContentRef(element)
             }}
             style={{
               height: `${virtualizer.getTotalSize()}px`,
@@ -590,9 +634,11 @@ export function createTimelineVirtualizer(input: Input) {
     coldPending = false
     contentObserver?.disconnect()
     viewportObserver?.disconnect()
-    input.setScrollRef(undefined)
-    input.setRevealMessage?.(() => {})
-    input.setScrollToEnd?.(() => {})
+    if (active()) {
+      input.setScrollRef(undefined)
+      input.setRevealMessage?.(() => {})
+      input.setScrollToEnd?.(() => {})
+    }
   })
 
   return {

packages/app/src/settings/general/general.tsx

@@ -382,6 +382,18 @@ export const SettingsGeneral: Component<{
           </div>
         </SettingsRow>
 
+        <SettingsRow
+          title={language.t("settings.general.row.showStatus.title")}
+          description={language.t("settings.general.row.showStatus.description")}
+        >
+          <div data-action="settings-show-status">
+            <Switch
+              checked={settings.general.showStatus()}
+              onChange={(checked) => settings.general.setShowStatus(checked)}
+            />
+          </div>
+        </SettingsRow>
+
         <SettingsRow
           title={language.t("settings.general.row.showCustomAgents.title")}
           description={language.t("settings.general.row.showCustomAgents.description")}

packages/app/src/settings/model.test.ts

@@ -34,17 +34,6 @@ describe("settings timeline detail migration", () => {
 })
 
 describe("settings schema", () => {
-  test("restores summary expansion and discards the retired status preference", () => {
-    const settings = decode({
-      general: { showStatus: true, showSearch: true },
-      sessionSummary: { projectExpanded: false, serverExpanded: true },
-    })
-    expect(settings.general.showSearch).toBe(true)
-    expect(settings.general).not.toHaveProperty("showStatus")
-    expect(settings.sessionSummary).toEqual({ projectExpanded: false, serverExpanded: true })
-    expect(decode(encode(settings)).sessionSummary).toEqual(settings.sessionSummary)
-  })
-
   test("uses the supplied initial values independently of the current schema", () => {
     const initial = {
       ...defaultSettings,
@@ -69,6 +58,7 @@ describe("settings schema", () => {
         showFileTree: false,
         showNavigation: false,
         showSearch: false,
+        showStatus: false,
         showProjectIcon: false,
         showTerminal: false,
         timelineDetail: timelinePresets[2].value,
@@ -79,7 +69,6 @@ describe("settings schema", () => {
         followUpBehavior: "steer",
         experimentalBrowser: false,
       },
-      sessionSummary: { projectExpanded: true, serverExpanded: true },
       appearance: {
         fontSize: 14,
         mono: "",

packages/app/src/settings/model.tsx

@@ -79,6 +79,7 @@ const generalSchema = Persistence.struct({
   showFileTree: Schema.Boolean,
   showNavigation: Schema.Boolean,
   showSearch: Schema.Boolean,
+  showStatus: Schema.Boolean,
   showProjectIcon: Schema.Boolean,
   showTerminal: Schema.Boolean,
   timelineDetail: Persistence.struct({
@@ -134,7 +135,6 @@ const soundsSchema = Persistence.struct({
 
 export const settingsSchema = Persistence.struct({
   general: generalSchema,
-  sessionSummary: Persistence.struct({ projectExpanded: Schema.Boolean, serverExpanded: Schema.Boolean }),
   appearance: appearanceSchema,
   keybinds: Persistence.record(Schema.String.pipe(Schema.catchDecoding(() => Effect.succeed(Option.none())))),
   permissions: permissionsSchema,
@@ -243,6 +243,7 @@ export const defaultSettings: Settings = {
     showFileTree: false,
     showNavigation: false,
     showSearch: false,
+    showStatus: false,
     showProjectIcon: false,
     showTerminal: false,
     timelineDetail: { ...timelinePresets[2].value },
@@ -253,7 +254,6 @@ export const defaultSettings: Settings = {
     followUpBehavior: "steer",
     experimentalBrowser: false,
   },
-  sessionSummary: { projectExpanded: true, serverExpanded: true },
   appearance: { fontSize: 14, mono: "", sans: "", terminal: "", tabLayout: "horizontal", showProjectName: false },
   keybinds: {},
   permissions: { autoApprove: false },
@@ -280,6 +280,7 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
     const [store, setStore, , ready] = persisted({ key: "settings.v3" }, settingsPersistence, defaultSettings)
     const showFileTree = withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree)
     const showSearch = withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch)
+    const showStatus = withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus)
     const showCustomAgents = withFallback(
       () => store.general?.showCustomAgents,
       defaultSettings.general.showCustomAgents,
@@ -287,8 +288,12 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
     createEffect(() => {
       if (typeof document === "undefined") return
       const root = document.documentElement
-      root.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.mono))
+      const mono = monoFontFamily(store.appearance?.mono)
+      root.style.setProperty("--font-family-mono", mono)
       root.style.setProperty("--font-family-sans", sansFontFamily(store.appearance?.sans))
+      // Inline code can first appear during history backfill. Load its selected
+      // face with the shell so that font discovery does not resize that mount.
+      void document.fonts?.load(`440 13px ${mono}`).catch(() => undefined)
     })
 
     return {
@@ -317,6 +322,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setShowSearch(value: boolean) {
           setStore("general", "showSearch", value)
         },
+        showStatus,
+        setShowStatus(value: boolean) {
+          setStore("general", "showStatus", value)
+        },
         showProjectIcon: withFallback(() => store.general?.showProjectIcon, defaultSettings.general.showProjectIcon),
         setShowProjectIcon(value: boolean) {
           setStore("general", "showProjectIcon", value)
@@ -363,25 +372,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
           setStore("general", "experimentalBrowser", value)
         },
       },
-      sessionSummary: {
-        projectExpanded: withFallback(
-          () => store.sessionSummary?.projectExpanded,
-          defaultSettings.sessionSummary.projectExpanded,
-        ),
-        serverExpanded: withFallback(
-          () => store.sessionSummary?.serverExpanded,
-          defaultSettings.sessionSummary.serverExpanded,
-        ),
-        setProjectExpanded(value: boolean) {
-          setStore("sessionSummary", "projectExpanded", value)
-        },
-        setServerExpanded(value: boolean) {
-          setStore("sessionSummary", "serverExpanded", value)
-        },
-      },
       visibility: {
         fileTree: showFileTree,
         search: showSearch,
+        status: showStatus,
         customAgents: showCustomAgents,
       },
       appearance: {

packages/app/src/settings/settings.css

@@ -51,6 +51,8 @@
   flex: 1;
   min-width: 0;
   max-width: 720px;
+  /* Leave room for raised card shadows inside the scrollport. */
+  padding-inline: 4px;
 }
 
 .settings-screen .settings-tab-header {

packages/app/src/shell/commands/command.tsx

@@ -1,7 +1,7 @@
 import { createSimpleContext } from "@opencode/ui/context"
 import { useDialog } from "@opencode/ui/context/dialog"
-import { type Accessor, createEffect, createMemo, onCleanup, onMount } from "solid-js"
-import { createStore } from "solid-js/store"
+import { type Accessor, batch, createEffect, createMemo, onCleanup, onMount } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
 import { Schema } from "effect"
 import { Persistence } from "@/runtime/persistence/schema"
 import { makeEventListener } from "@solid-primitives/event-listener"
@@ -306,19 +306,20 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
     createEffect(() => {
       if (!catalogReady()) return
 
-      setCatalog(
-        registered().reduce((acc, opt) => {
-          const id = actionId(opt.id)
-          if (opt.title)
-            acc[id] = {
+      batch(() =>
+        registered().forEach((opt) => {
+          if (!opt.title) return
+          setCatalog(
+            actionId(opt.id),
+            reconcile({
               title: opt.title,
               description: opt.description,
               category: opt.category,
               keybind: opt.keybind,
               slash: opt.slash,
-            }
-          return acc
-        }, {} as CommandCatalog),
+            }),
+          )
+        }),
       )
     })
 

packages/app/src/shell/status/body.tsx

@@ -0,0 +1,156 @@
+import { Switch } from "@opencode/ui/switch"
+import { Tabs } from "@opencode/ui/tabs"
+import { createMemo, createResource, For, Index, type JSXElement, Show } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
+import { useMcpToggle } from "@/providers/connect/mcp"
+import { useWorkspaceLocation } from "@/workspaces/location"
+import { useData } from "@/runtime/server/current"
+import { useServerSDK } from "@/runtime/server/client"
+import { pluginLabels } from "@/providers/catalog/plugin"
+
+const pluginEmptyMessage = (value: string, file: string): JSXElement => {
+  const parts = value.split(file)
+  if (parts.length === 1) return value
+  return (
+    <>
+      {parts[0]}
+      <code class="bg-surface-raised-base px-1.5 py-0.5 rounded-sm text-text-base">{file}</code>
+      {parts.slice(1).join(file)}
+    </>
+  )
+}
+
+export function StatusPopoverBody(props: { shown: boolean; embedded?: boolean }) {
+  const data = useData()
+  const sdk = useWorkspaceLocation()
+  const serverSDK = useServerSDK()
+  const language = useLanguage()
+
+  const toggleMcp = useMcpToggle(() => sdk().directory)
+  const mcpServers = createMemo(() =>
+    (data.location.mcp.server.list({ directory: sdk().directory }) ?? []).toSorted((a, b) =>
+      a.name.localeCompare(b.name),
+    ),
+  )
+  const mcpConnected = createMemo(() => mcpServers().filter((server) => server.status.status === "connected").length)
+  const [pluginList] = createResource(
+    () => (props.shown ? sdk().directory : undefined),
+    (directory) => serverSDK.api.plugin.list({ location: { directory } }).then((result) => result.data),
+  )
+  const plugins = createMemo(() => pluginLabels(pluginList.latest ?? []))
+  const pluginCount = createMemo(() => plugins().length)
+  const pluginEmpty = createMemo(() => pluginEmptyMessage(language.t("dialog.plugins.empty"), "opencode.json"))
+
+  return (
+    <div
+      class="flex items-center gap-1 rounded-xl"
+      classList={{
+        "w-[360px] shadow-[var(--shadow-lg-border-base)]": !props.embedded,
+        "w-full min-w-0": props.embedded,
+      }}
+    >
+      <Tabs
+        aria-label={language.t("status.popover.ariaLabel")}
+        class="tabs bg-background-strong rounded-xl overflow-hidden"
+        data-active="mcp"
+        defaultValue="mcp"
+        variant="underline"
+      >
+        <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">
+            {mcpConnected() > 0 ? `${mcpConnected()} ` : ""}
+            {language.t("status.popover.tab.mcp")}
+          </Tabs.Trigger>
+          {/* TODO: Restore LSP status when V2 exposes it. */}
+          <Tabs.Trigger value="plugins" data-slot="tab" class="text-12-regular">
+            {pluginCount() > 0 ? `${pluginCount()} ` : ""}
+            {language.t("status.popover.tab.plugins")}
+          </Tabs.Trigger>
+        </Tabs.List>
+
+        <Tabs.Content value="mcp">
+          <div class="flex flex-col px-2 pb-2">
+            <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+              <Show
+                when={mcpServers().length > 0}
+                fallback={
+                  <div class="text-14-regular text-text-base text-center my-auto">{language.t("dialog.mcp.empty")}</div>
+                }
+              >
+                <Index each={mcpServers()}>
+                  {(server) => {
+                    const name = () => server().name
+                    const status = () => server().status.status
+                    const enabled = () => status() === "connected"
+                    return (
+                      <button
+                        type="button"
+                        class="flex items-center gap-2 w-full min-h-8 pl-3 pr-2 py-1 rounded-md hover:bg-surface-raised-base-hover transition-colors text-left"
+                        onClick={() => {
+                          if (toggleMcp.isPending) return
+                          toggleMcp.mutate(name())
+                        }}
+                        disabled={toggleMcp.isPending && toggleMcp.variables === name()}
+                      >
+                        <div
+                          classList={{
+                            "size-1.5 rounded-full shrink-0": true,
+                            "bg-icon-success-base": status() === "connected",
+                            "bg-icon-critical-base": status() === "failed",
+                            "bg-border-weak-base": status() === "disabled",
+                            "bg-icon-warning-base": status() === "needs_auth",
+                          }}
+                        />
+                        <span class="flex flex-col min-w-0 flex-1">
+                          <span class="flex items-center gap-2 min-w-0">
+                            <span class="text-14-regular text-text-base truncate">{name()}</span>
+                          </span>
+                          <Show when={status() === "needs_auth"}>
+                            <span class="text-11-regular text-text-weaker truncate">
+                              {language.t("mcp.auth.clickToAuthenticate")}
+                            </span>
+                          </Show>
+                        </span>
+                        <div onClick={(event) => event.stopPropagation()}>
+                          <Switch
+                            appearance="standard"
+                            checked={enabled()}
+                            disabled={toggleMcp.isPending && toggleMcp.variables === name()}
+                            onChange={() => {
+                              if (toggleMcp.isPending) return
+                              toggleMcp.mutate(name())
+                            }}
+                          />
+                        </div>
+                      </button>
+                    )
+                  }}
+                </Index>
+              </Show>
+            </div>
+          </div>
+        </Tabs.Content>
+
+        <Tabs.Content value="plugins">
+          <div class="flex flex-col px-2 pb-2">
+            <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
+              <Show
+                when={plugins().length > 0}
+                fallback={<div class="text-14-regular text-text-base text-center my-auto">{pluginEmpty()}</div>}
+              >
+                <For each={plugins()}>
+                  {(plugin) => (
+                    <div class="flex items-center gap-2 w-full px-2 py-1">
+                      <div class="size-1.5 rounded-full shrink-0 bg-icon-success-base" />
+                      <span class="text-14-regular text-text-base truncate">{plugin}</span>
+                    </div>
+                  )}
+                </For>
+              </Show>
+            </div>
+          </div>
+        </Tabs.Content>
+      </Tabs>
+    </div>
+  )
+}

packages/app/src/shell/status/indicator.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test } from "bun:test"
+import { hasNonBlockingServiceIssue, hasServiceNeedingAttention, serverStatusDotClass } from "./indicator"
+
+describe("serverStatusDotClass", () => {
+  test("uses the success token while the server and services are healthy", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: false })).toBe("bg-icon-success-base")
+  })
+
+  test("uses the session attention token when a service needs attention", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: true, attention: true, issue: true })).toBe(
+      "bg-v2-background-bg-accent",
+    )
+  })
+
+  test("uses the warning token for non-blocking issues while the server is online", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: true })).toBe("bg-icon-warning-base")
+  })
+
+  test("uses the critical token only after the server connection drops", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: false, issue: false })).toBe("bg-icon-critical-base")
+    expect(serverStatusDotClass({ ready: true, serverHealth: false, issue: true })).toBe("bg-icon-critical-base")
+  })
+
+  test("pulses the neutral dot while the event stream is reconnecting", () => {
+    expect(serverStatusDotClass({ ready: true, serverHealth: true, issue: false, connecting: true })).toBe(
+      "bg-border-weak-base animate-pulse",
+    )
+    expect(serverStatusDotClass({ ready: false, serverHealth: undefined, issue: false, connecting: true })).toBe(
+      "bg-border-weak-base animate-pulse",
+    )
+    // A server that is known to be down stays critical rather than looking like a routine reconnect.
+    expect(serverStatusDotClass({ ready: true, serverHealth: false, issue: false, connecting: true })).toBe(
+      "bg-icon-critical-base",
+    )
+  })
+
+  test("stays neutral before status is ready", () => {
+    expect(serverStatusDotClass({ ready: false, serverHealth: true, issue: false })).toBe("bg-border-weak-base")
+    expect(serverStatusDotClass({ ready: false, serverHealth: undefined, issue: false })).toBe("bg-border-weak-base")
+  })
+})
+
+describe("hasNonBlockingServiceIssue", () => {
+  test("detects MCP failures that do not block chatting", () => {
+    expect(hasNonBlockingServiceIssue({ mcp: ["failed"], lsp: [] })).toBe(true)
+    expect(hasNonBlockingServiceIssue({ mcp: ["needs_auth"], lsp: [] })).toBe(true)
+    expect(hasNonBlockingServiceIssue({ mcp: ["connected", "pending", "disabled"], lsp: [] })).toBe(false)
+  })
+
+  test("detects LSP failures that do not block chatting", () => {
+    expect(hasNonBlockingServiceIssue({ mcp: [], lsp: ["error"] })).toBe(true)
+    expect(hasNonBlockingServiceIssue({ mcp: [], lsp: ["connected"] })).toBe(false)
+  })
+})
+
+describe("hasServiceNeedingAttention", () => {
+  test("detects MCP states that need user attention", () => {
+    expect(hasServiceNeedingAttention({ mcp: ["needs_auth"] })).toBe(true)
+  })
+
+  test("ignores states that do not need user attention", () => {
+    expect(hasServiceNeedingAttention({ mcp: ["failed"] })).toBe(false)
+    expect(hasServiceNeedingAttention({ mcp: ["connected", "pending", "disabled"] })).toBe(false)
+  })
+})

packages/app/src/shell/status/indicator.ts

@@ -0,0 +1,34 @@
+import type { LspStatus } from "@/runtime/server/types"
+import type { McpServer } from "@opencode/client/promise"
+
+export function hasServiceNeedingAttention(input: { mcp: Array<McpServer["status"]["status"]> }) {
+  return input.mcp.some((status) => status === "needs_auth")
+}
+
+export function hasNonBlockingServiceIssue(input: {
+  mcp: Array<McpServer["status"]["status"]>
+  lsp: Array<LspStatus["status"]>
+}) {
+  return (
+    input.mcp.some((status) => status !== "connected" && status !== "pending" && status !== "disabled") ||
+    input.lsp.some((status) => status === "error")
+  )
+}
+
+export function serverStatusDotClass(input: {
+  ready: boolean
+  serverHealth: boolean | undefined
+  attention?: boolean
+  issue: boolean
+  connecting?: boolean
+}) {
+  if (input.serverHealth === false) return "bg-icon-critical-base"
+  // The event stream is (re)connecting: keep the neutral dot but let it breathe so a stale
+  // session is visibly waiting on the server rather than silently frozen.
+  if (input.connecting) return "bg-border-weak-base animate-pulse"
+  if (!input.ready || input.serverHealth === undefined) return "bg-border-weak-base"
+  if (input.attention) return "bg-v2-background-bg-accent"
+  if (input.issue) return "bg-icon-warning-base"
+  if (input.serverHealth === true) return "bg-icon-success-base"
+  return "bg-border-weak-base"
+}

packages/app/src/shell/status/status-drawer.css

@@ -0,0 +1,9 @@
+[data-slot="mobile-status-loading"] {
+  display: flex;
+  min-height: 56px;
+  align-items: center;
+  justify-content: center;
+  color: var(--v2-text-text-muted);
+  font-size: 13px;
+  line-height: var(--line-height-base);
+}

packages/app/src/shell/status/status-drawer.tsx

@@ -0,0 +1,36 @@
+import { lazy, Suspense } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
+import { MobilePanelDrawer } from "../mobile-panel-drawer"
+import "./status-drawer.css"
+
+const Body = lazy(async () => {
+  const { StatusPopoverBody } = await import("./body")
+  return { default: StatusPopoverBody }
+})
+
+export function StatusDrawer(props: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  returnFocus?: () => HTMLElement | undefined
+}) {
+  const language = useLanguage()
+
+  return (
+    <MobilePanelDrawer
+      title={language.t("status.popover.trigger")}
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      returnFocus={props.returnFocus}
+    >
+      <Suspense
+        fallback={
+          <div data-slot="mobile-status-loading" role="status">
+            {language.t("common.loading")}
+          </div>
+        }
+      >
+        <Body shown={props.open} embedded />
+      </Suspense>
+    </MobilePanelDrawer>
+  )
+}

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

@@ -0,0 +1,138 @@
+import { Icon } from "@opencode/ui/icon"
+import { IconButton } from "@opencode/ui/icon-button"
+import { Popover } from "@opencode/ui/popover"
+import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
+import { useLanguage } from "@/runtime/i18n/language"
+import { useGlobal } from "@/runtime/server/runtime"
+import { hasNonBlockingServiceIssue, hasServiceNeedingAttention, serverStatusDotClass } from "./indicator"
+import { useData, useServer } from "@/runtime/server/current"
+import { useWorkspaceLocation } from "@/workspaces/location"
+import { useSettings } from "@/settings/model"
+import { createMediaQuery } from "@solid-primitives/media"
+
+const Body = lazy(() => import("./body").then((x) => ({ default: x.StatusPopoverBody })))
+
+export function StatusPopover() {
+  const language = useLanguage()
+  const server = useServer()
+  const global = useGlobal()
+  const data = useData()
+  const sdk = useWorkspaceLocation()
+  const settings = useSettings()
+  const desktop = createMediaQuery("(min-width: 768px)")
+  const sidebar = () => desktop() && settings.appearance.tabLayout() === "vertical"
+  const [shown, setShown] = createSignal(false)
+  const serverHealth = () => global.servers.health[server.key]?.healthy
+  const mcp = () => data.location.mcp.server.list({ directory: sdk().directory })
+  const ready = createMemo(() => serverHealth() === false || mcp() !== undefined)
+  const attention = createMemo(() =>
+    hasServiceNeedingAttention({
+      mcp: (mcp() ?? []).map((item) => item.status.status),
+    }),
+  )
+  const issue = createMemo(() =>
+    hasNonBlockingServiceIssue({
+      mcp: (mcp() ?? []).map((item) => item.status.status),
+      lsp: [],
+    }),
+  )
+  const state = createMemo<StatusPopoverState>(() => ({
+    shown: shown(),
+    ready: ready(),
+    serverHealth: serverHealth(),
+    attention: attention(),
+    issue: issue(),
+    connecting: server.ctx.sdk.connection.status() !== "connected",
+    sidebar: sidebar(),
+    placement: sidebar() ? "top-start" : "bottom-end",
+    shift: sidebar() ? 0 : -168,
+    label: language.t("status.popover.trigger"),
+    onOpenChange: setShown,
+    body: () => (
+      <StatusPopoverBody shown={shown()}>
+        <Body shown={shown()} />
+      </StatusPopoverBody>
+    ),
+  }))
+
+  return <StatusPopoverView state={state()} />
+}
+
+type StatusPopoverState = {
+  shown: boolean
+  ready: boolean
+  serverHealth: boolean | undefined
+  attention: boolean
+  issue: boolean
+  connecting: boolean
+  sidebar: boolean
+  placement: "top-start" | "bottom-end"
+  shift: number
+  label: string
+  onOpenChange: (value: boolean) => void
+  body: () => JSX.Element
+}
+
+function StatusPopoverBody(props: { shown: boolean; children: JSX.Element }) {
+  return (
+    <Show when={props.shown}>
+      <Suspense
+        fallback={<div class="w-[360px] h-14 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]" />}
+      >
+        {props.children}
+      </Suspense>
+    </Show>
+  )
+}
+
+function StatusPopoverView(props: { state: StatusPopoverState }) {
+  const popoverProps = {
+    class:
+      "[&_[data-slot=popover-body]]:p-0 w-[360px] max-w-[calc(100vw-40px)] bg-transparent border-0 shadow-none rounded-xl",
+    gutter: 4,
+    placement: props.state.placement,
+    shift: props.state.shift,
+  }
+
+  return (
+    <Popover
+      open={props.state.shown}
+      onOpenChange={props.state.onOpenChange}
+      triggerAs={props.state.sidebar ? "button" : IconButton}
+      triggerProps={
+        props.state.sidebar
+          ? {
+              type: "button",
+              class:
+                "flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] px-1.5 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base data-[state=pressed]:bg-v2-background-bg-layer-02 data-[state=pressed]:text-v2-text-text-base focus-visible:outline-none focus-visible:bg-v2-background-bg-layer-02 [app-region:no-drag]",
+              "data-state": props.state.shown ? "pressed" : undefined,
+              "aria-label": props.state.label,
+            }
+          : {
+              variant: "ghost-muted",
+              size: "large",
+              class: "!w-9 shrink-0",
+              state: props.state.shown ? "pressed" : undefined,
+              "aria-label": props.state.label,
+            }
+      }
+      trigger={
+        <>
+          <div class="relative size-4 shrink-0">
+            <Icon name={props.state.shown ? "status-active" : "status"} />
+            <div
+              data-slot="status-indicator"
+              class={`absolute -top-1 -end-1 size-2 rounded-full border border-[var(--v2-background-bg-deep)] ${serverStatusDotClass(props.state)}`}
+            />
+          </div>
+          <Show when={props.state.sidebar}>
+            <span class="min-w-0 truncate">{props.state.label}</span>
+          </Show>
+        </>
+      }
+      {...popoverProps}
+    >
+      {props.state.body()}
+    </Popover>
+  )
+}

packages/app/src/shell/tabs/schema.ts

@@ -21,7 +21,6 @@ export const Draft = Persistence.struct({
   directory: Schema.String,
   worktree: Persistence.optional(Schema.String),
   branch: Persistence.optional(Schema.String),
-  mcp: Persistence.optional(Persistence.struct({ target: Schema.String, states: Persistence.record(Schema.Boolean) })),
 })
 
 const SessionCodec = Session.pipe(

packages/app/src/shell/tabs/tabs.test.ts

@@ -16,19 +16,6 @@ function sessionTab(sessionId: string): SessionTab {
 }
 
 describe("tab migration", () => {
-  test("round trips draft MCP choices without changing older drafts", () => {
-    const legacy: Tab = { type: "draft", draftID: "legacy-draft", server, directory: "/project" }
-    const draft: Tab = {
-      ...legacy,
-      draftID: "mcp-draft",
-      worktree: "create",
-      mcp: { target: "new-worktree", states: { first: true, second: false } },
-    }
-    const restored = decodeTabs([legacy, draft])
-    expect(restored).toEqual([legacy, draft])
-    expect(decodeTabs(Schema.encodeSync(TabStorage.Tabs)(restored))).toEqual([legacy, draft])
-  })
-
   test("drops null and malformed persisted tabs", () => {
     expect(
       decodeTabs([null, sessionTab("a"), { type: "session", server }, { type: "unknown", server }, "invalid"]),

packages/app/src/shell/titlebar/titlebar.tsx

@@ -679,11 +679,12 @@ export function Titlebar(props: {
                                 onReorder={(keys) => tabsStoreActions.reorder(keys)}
                               />
                             </div>
-                            <Show when={updateState().visible}>
-                              <div data-slot="vertical-tabs-footer" class="mt-2 flex w-full shrink-0 flex-col">
+                            <div data-slot="vertical-tabs-footer" class="mt-2 flex w-full shrink-0 flex-col gap-2">
+                              <TitlebarRightMount vertical />
+                              <Show when={updateState().visible}>
                                 <TitlebarUpdateIconButton state={updateState()} vertical />
-                              </div>
-                            </Show>
+                              </Show>
+                            </div>
                           </Portal>
                         )}
                       </Show>

packages/app/test-browser/message-page-publication.test.ts

@@ -0,0 +1,41 @@
+import { expect, test } from "bun:test"
+import { createComputed, createRoot } from "solid-js"
+import { OpenCode } from "@opencode/client/promise"
+import { createData } from "@opencode/client/solid"
+
+test("publishes an initial message page, its index, and its cursor together", async () => {
+  const observed: { ids: string[]; more: boolean; text: string | undefined }[] = []
+  const api = OpenCode.make({
+    baseUrl: "http://opencode.local",
+    fetch: async () =>
+      Response.json({
+        data: [{ id: "msg_page", type: "user", text: "History", time: { created: 1 } }],
+        cursor: { next: "older" },
+      }),
+  })
+  const setup = createRoot((dispose) => {
+    const data = createData({
+      api: () => api,
+      directory: "/project",
+      event: { on: () => () => {}, listen: () => () => {} },
+    })
+    createComputed(() => {
+      const message = data.session.message.get("ses_page", "msg_page")
+      observed.push({
+        ids: data.session.message.list("ses_page").map((message) => message.id),
+        more: data.session.message.more("ses_page"),
+        text: message?.type === "user" ? message.text : undefined,
+      })
+    })
+    return { data, dispose }
+  })
+  try {
+    await setup.data.session.message.sync("ses_page")
+    expect(observed).toEqual([
+      { ids: [], more: false, text: undefined },
+      { ids: ["msg_page"], more: true, text: "History" },
+    ])
+  } finally {
+    setup.dispose()
+  }
+})

packages/app/test-browser/timeline-cache.test.ts

@@ -0,0 +1,196 @@
+import { expect, test } from "bun:test"
+import type { SessionMessageInfo } from "@opencode/client/promise"
+import { batch, createMemo, createRoot, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { ServerScope, SessionRouteKey, SessionStateKey } from "../src/runtime/server/scope"
+import { createTimelineCache } from "../src/session/timeline/cache"
+
+function setup() {
+  return createRoot((dispose) => {
+    const [state, setState] = createStore({
+      id: "ses_a",
+      directory: "/repo",
+      visible: true,
+      messages: {
+        ses_a: [{ id: "msg_a", type: "user", text: "First session", time: { created: 1 } }],
+        ses_b: [{ id: "msg_b", type: "user", text: "Second session", time: { created: 2 } }],
+      } as Record<string, SessionMessageInfo[]>,
+    })
+    const views = new Map<
+      string,
+      { active: () => boolean; messages: () => SessionMessageInfo[]; element: HTMLDivElement }
+    >()
+    const disposed: string[] = []
+    const cache = createTimelineCache(
+      {
+        identity: {
+          params: {
+            get id() {
+              return state.id
+            },
+            serverKey: "local",
+          },
+          sessionID: () => state.id,
+          workspaceKey: () => SessionStateKey.from(ServerScope.local, SessionRouteKey.fromRoute(state.directory)),
+          sessionKey: () =>
+            SessionStateKey.from(ServerScope.local, SessionRouteKey.fromRoute(state.directory, state.id)),
+        },
+        data: {
+          info: createMemo(() => ({
+            id: state.id,
+            projectID: "project",
+            cost: 0,
+            tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+            time: { created: 1, updated: 1 },
+            location: { directory: state.directory },
+          })),
+          parent: () => undefined,
+          parentID: () => undefined,
+          status: () => ({ type: "idle" }),
+        },
+        history: { messages: () => state.messages[state.id] ?? [] },
+      },
+      (source, active) => {
+        const id = source.identity.sessionID()!
+        const element = document.createElement("div")
+        createMemo(() =>
+          element.setAttribute(
+            "data-messages",
+            source.history
+              .messages()
+              .map((message) => message.id)
+              .join(","),
+          ),
+        )
+        views.set(id, { active, messages: source.history.messages, element })
+        onCleanup(() => disposed.push(id))
+        return element
+      },
+      () => state.visible,
+    )
+    return { state, setState, cache, views, disposed, dispose }
+  })
+}
+
+test("reuses a session view and refreshes its own history when selected again", () => {
+  const input = setup()
+  try {
+    const first = input.cache()
+    input.setState("id", "ses_b")
+    const second = input.cache()
+    expect(second).not.toBe(first)
+    expect(input.views.get("ses_a")!.active()).toBe(false)
+    expect(input.views.get("ses_a")!.element.dataset.messages).toBe("msg_a")
+    expect(input.views.get("ses_b")!.element.dataset.messages).toBe("msg_b")
+
+    input.setState("messages", "ses_a", [
+      { id: "msg_c", type: "user", text: "Updated while inactive", time: { created: 3 } },
+    ])
+    input.setState("id", "ses_a")
+    expect(input.cache()).toBe(first)
+    expect(input.views.get("ses_a")!.active()).toBe(true)
+    expect(input.views.get("ses_a")!.element.dataset.messages).toBe("msg_c")
+    expect(input.views.get("ses_b")!.element.dataset.messages).toBe("msg_b")
+    expect(input.disposed).toEqual([])
+  } finally {
+    input.dispose()
+  }
+  expect(input.disposed.sort()).toEqual(["ses_a", "ses_b"])
+})
+
+test("suspends a detached mobile view and reuses it when the conversation returns", () => {
+  const input = setup()
+  try {
+    const first = input.cache()
+    input.setState("visible", false)
+    expect(input.views.get("ses_a")!.active()).toBe(false)
+    input.setState("visible", true)
+    expect(input.cache()).toBe(first)
+    expect(input.views.get("ses_a")!.active()).toBe(true)
+  } finally {
+    input.dispose()
+  }
+})
+
+test("disposes views whose Location-scoped providers no longer match", () => {
+  const input = setup()
+  try {
+    const first = input.cache()
+    input.setState("directory", "/other")
+    expect(input.cache()).not.toBe(first)
+    expect(input.disposed).toEqual(["ses_a"])
+    input.setState("directory", "/repo")
+    expect(input.cache()).not.toBe(first)
+    expect(input.disposed).toEqual(["ses_a", "ses_a"])
+  } finally {
+    input.dispose()
+  }
+  expect(input.disposed).toHaveLength(3)
+})
+
+test("disposes views on workspace changes while the destination is not rendered", () => {
+  const input = setup()
+  try {
+    const first = input.cache()
+    input.setState("visible", false)
+    input.setState("directory", "/other")
+    expect(input.disposed).toEqual(["ses_a"])
+    input.setState("directory", "/repo")
+    input.setState("visible", true)
+    expect(input.cache()).not.toBe(first)
+  } finally {
+    input.dispose()
+  }
+  expect(input.disposed).toEqual(["ses_a", "ses_a"])
+})
+
+for (const order of ["session-first", "workspace-first"] as const) {
+  test(`keeps views live across five workspaces when updates are ${order}`, () => {
+    const input = setup()
+    const render = createRoot((dispose) => ({ selected: createMemo(input.cache), dispose }))
+    const visited = ["ses_a"]
+    try {
+      ;["ses_b", "ses_c", "ses_d", "ses_e", "ses_a", "ses_c", "ses_b", "ses_e", "ses_d", "ses_a"].forEach(
+        (id, index) => {
+          batch(() => {
+            if (order === "workspace-first") input.setState("directory", `/repo/${id}`)
+            input.setState("id", id)
+            if (order === "session-first") input.setState("directory", `/repo/${id}`)
+          })
+          expect(input.disposed).toEqual(visited)
+          input.setState("messages", id, [
+            { id: `msg_live_${index}`, type: "user", text: "Live update", time: { created: index + 3 } },
+          ])
+          expect((render.selected() as HTMLDivElement).dataset.messages).toBe(`msg_live_${index}`)
+          expect(input.views.get(id)!.active()).toBe(true)
+          visited.push(id)
+        },
+      )
+    } finally {
+      render.dispose()
+      input.dispose()
+    }
+  })
+}
+
+test("evicts the least recently selected view and disposes all retained owners", () => {
+  const input = setup()
+  try {
+    const first = input.cache()
+    Array.from({ length: 15 }, (_, index) => `ses_${index}`).forEach((id) => {
+      input.setState("id", id)
+      input.cache()
+    })
+    input.setState("id", "ses_a")
+    expect(input.cache()).toBe(first)
+    input.setState("id", "ses_last")
+    input.cache()
+    expect(input.disposed).toEqual(["ses_0"])
+    input.setState("id", "ses_0")
+    input.cache()
+    expect(input.disposed).toEqual(["ses_0", "ses_1"])
+  } finally {
+    input.dispose()
+  }
+  expect(input.disposed).toHaveLength(18)
+})

packages/cli/script/postinstall.mjs

@@ -100,7 +100,11 @@ function packageNames() {
 function copyBinary(source) {
   if (!fs.existsSync(source)) throw new Error(`Binary not found at ${source}`)
   fs.mkdirSync(path.dirname(targetBinary), { recursive: true })
-  if (fs.existsSync(targetBinary)) fs.unlinkSync(targetBinary)
+  if (fs.existsSync(targetBinary)) {
+    try {
+      fs.unlinkSync(targetBinary)
+    } catch {}
+  }
   try {
     fs.linkSync(source, targetBinary)
   } catch {

packages/cli/src/commands/commands.ts

@@ -119,7 +119,26 @@ const Root = Spec.make(typeof OPENCODE_CLI_NAME === "string" ? OPENCODE_CLI_NAME
       commands: [
         Spec.make("agents", { description: "List all agents" }),
         Spec.make("config", { description: "List configuration sources" }),
-        Spec.make("paths", { description: "Show global paths (data, config, cache, state)" }),
+        Spec.make("paths", {
+          description: "Show global paths (data, config, cache, state)",
+          params: {
+            name: Argument.choice("name", [
+              "db",
+              "home",
+              "data",
+              "config",
+              "cache",
+              "state",
+              "tmp",
+              "bin",
+              "log",
+              "repos",
+            ]).pipe(
+              Argument.withDescription("Print only one path: db, home, data, config, cache, state, tmp, bin, log, repos"),
+              Argument.optional,
+            ),
+          },
+        }),
       ],
     }),
     Spec.make("auth", {

packages/cli/src/commands/handlers/debug/paths.ts

@@ -1,15 +1,21 @@
 import { EOL } from "os"
-import { Effect } from "effect"
+import { Effect, Option } from "effect"
 import { Global } from "@opencode/util/global"
 import { Commands } from "../../commands"
 import { Runtime } from "../../../framework/runtime"
+import { databasePath } from "../../../database-path"
 
 export default Runtime.handler(
   Commands.commands.debug.commands.paths,
-  Effect.fn("cli.debug.paths")(function* () {
+  Effect.fn("cli.debug.paths")(function* (input) {
     const global = yield* Global.Service
+    const paths = { ...global, db: databasePath(global.data) }
+    if (Option.isSome(input.name)) {
+      process.stdout.write(paths[input.name.value] + EOL)
+      return
+    }
     process.stdout.write(
-      Object.entries(global)
+      Object.entries(paths)
         .map(([key, value]) => `${key.padEnd(10)} ${value}${EOL}`)
         .join(""),
     )

packages/cli/src/database-path.ts

@@ -0,0 +1,13 @@
+import path from "node:path"
+import { OPENCODE_CHANNEL } from "./version"
+
+export function databasePath(data: string) {
+  const filename =
+    process.env.OPENCODE_DB ??
+    (["latest", "dev", "beta", "next", "prod"].includes(OPENCODE_CHANNEL) ||
+    process.env.OPENCODE_DISABLE_CHANNEL_DB === "1" ||
+    process.env.OPENCODE_DISABLE_CHANNEL_DB === "true"
+      ? "opencode.db"
+      : `opencode-${OPENCODE_CHANNEL.replace(/[^a-zA-Z0-9._-]/g, "-")}.db`)
+  return filename === ":memory:" ? filename : path.resolve(data, filename)
+}

packages/cli/src/server-process.ts

@@ -15,6 +15,7 @@ import { ServiceConfig } from "./services/service-config"
 import { ServiceRegistration } from "./services/service-registration"
 import { Updater } from "./services/updater"
 import { WebUi } from "./services/web-ui"
+import { databasePath } from "./database-path"
 
 export type Mode = "default" | "service" | "stdio"
 
@@ -94,13 +95,7 @@ const processEffect = Effect.fnUntraced(function* (options: Options) {
           pty: { handoff },
           simulation: truthy(process.env.OPENCODE_SIMULATE),
           database: {
-            path:
-              process.env.OPENCODE_DB ??
-              (["latest", "dev", "beta", "next", "prod"].includes(OPENCODE_CHANNEL) ||
-              process.env.OPENCODE_DISABLE_CHANNEL_DB === "1" ||
-              process.env.OPENCODE_DISABLE_CHANNEL_DB === "true"
-                ? "opencode.db"
-                : `opencode-${OPENCODE_CHANNEL.replace(/[^a-zA-Z0-9._-]/g, "-")}.db`),
+            path: databasePath(global.data),
           },
           models: {
             url: process.env.OPENCODE_MODELS_URL,

packages/cli/src/services/updater.ts

@@ -167,6 +167,11 @@ const make = Effect.gen(function* () {
 
   const latest = () => release().pipe(Effect.map((data) => data.version))
 
+  const temporaryDirectory = (prefix: string) =>
+    Effect.acquireRelease(fs.makeTempDirectory({ directory: global.cache, prefix }), (directory) =>
+      fs.remove(directory, { recursive: true, force: true }).pipe(Effect.ignore),
+    )
+
   const upgrade = Effect.fnUntraced(function* (method: Method, input: string) {
     if (!parseReleaseVersion(input)) return yield* Effect.fail(new Error(`Invalid version: ${input}`))
     const version = input.trim().replace(/^v/, "")
@@ -192,12 +197,12 @@ const make = Effect.gen(function* () {
         if (method === "bun") {
           // Bun does not prune old versions from its shared package cache.
           yield* fs.makeDirectory(global.cache, { recursive: true })
-          const cache = yield* fs.makeTempDirectoryScoped({ directory: global.cache, prefix: "update-" })
+          const cache = yield* temporaryDirectory("update-")
           return yield* exec(["bun", "install", "--global", "--trust", "--cache-dir", cache, target], "5 minutes")
         }
         if (method === "curl") {
           yield* fs.makeDirectory(global.cache, { recursive: true })
-          const directory = yield* fs.makeTempDirectoryScoped({ directory: global.cache, prefix: "update-" })
+          const directory = yield* temporaryDirectory("update-")
           const installer = path.join(directory, "install")
           const download = yield* exec(
             ["curl", "-fsSL", "-o", installer, "https://opencode.ai/v2/install"],

packages/cli/test/updater-install.test.ts

@@ -2,7 +2,7 @@ import { NodeServices } from "@effect/platform-node"
 import { Global } from "@opencode/util/global"
 import { AppProcess } from "@opencode/util/process"
 import { expect, spyOn, test } from "bun:test"
-import { Effect, FileSystem, Stream } from "effect"
+import { Effect, FileSystem, PlatformError, Stream } from "effect"
 import { ChildProcess, ChildProcessSpawner } from "effect/unstable/process"
 import { existsSync } from "node:fs"
 import path from "node:path"
@@ -18,6 +18,7 @@ function fixture(
     error?: AppProcess.AppProcessError
   } = () => ({}),
   name = "@opencode/cli",
+  failCleanup = false,
 ) {
   return Effect.gen(function* () {
     const fs = yield* FileSystem.FileSystem
@@ -57,6 +58,17 @@ function fixture(
       Effect.provideService(Global.Service, global),
       Effect.provideService(FileSystem.FileSystem, {
         ...fs,
+        remove: (target, options) =>
+          failCleanup && target.startsWith(global.cache)
+            ? Effect.fail(
+                PlatformError.systemError({
+                  _tag: "PermissionDenied",
+                  module: "FileSystem",
+                  method: "remove",
+                  pathOrDescriptor: target,
+                }),
+              )
+            : fs.remove(target, options),
         realPath: (input) => (input === process.execPath ? Effect.succeed(executable) : fs.realPath(input)),
       }),
       Effect.provideService(
@@ -125,6 +137,14 @@ installs.forEach(({ method, command }) => {
     }),
   )
 })
+
+it.live("bun ignores install cache cleanup failures", () =>
+  Effect.gen(function* () {
+    const test = yield* fixture(() => ({}), "@opencode/cli", true)
+    yield* test.updater.upgrade("bun", "v2.3.4-beta.1")
+    expect(test.commands).toHaveLength(1)
+  }),
+)
 ;["success", "download", "install"].forEach((failure) => {
   it.live(`curl uses the V2 installer and cleans its directory: ${failure}`, () =>
     Effect.gen(function* () {

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

@@ -1166,6 +1166,18 @@ export type MessageListInput = {
   readonly limit?: number | undefined
   readonly order?: "asc" | "desc" | undefined
   readonly cursor?: string | undefined
+  readonly type?:
+    | "agent-switched"
+    | "model-switched"
+    | "location-switched"
+    | "user"
+    | "synthetic"
+    | "system"
+    | "skill"
+    | "shell"
+    | "assistant"
+    | "compaction"
+    | undefined
 }
 export type MessageListOutput = {
   readonly data: ReadonlyArray<SessionMessage.Info>

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

@@ -757,7 +757,7 @@ const EndpointMessageList = (raw: RawClient["server.message"]) => (input: Messag
   preserveEffect<MessageListOutput>()(
     raw["session.messages"]({
       params: { sessionID: input["sessionID"] },
-      query: { limit: input["limit"], order: input["order"], cursor: input["cursor"] },
+      query: { limit: input["limit"], order: input["order"], cursor: input["cursor"], type: input["type"] },
     }).pipe(Effect.mapError(mapClientError)),
   )
 

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

@@ -1015,7 +1015,7 @@ export function make(options: ClientOptions) {
           {
             method: "GET",
             path: `/api/session/${encodeURIComponent(input.sessionID)}/message`,
-            query: { limit: input["limit"], order: input["order"], cursor: input["cursor"] },
+            query: { limit: input["limit"], order: input["order"], cursor: input["cursor"], type: input["type"] },
             successStatus: 200,
             declaredStatuses: [400, 401, 404, 500],
             empty: false,

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

@@ -1369,6 +1369,7 @@ export type ProviderInfo = {
   activation: "auto" | "enabled" | "disabled"
   package: string
   compaction?: ProviderCompaction
+  websocket?: boolean
   settings?: { [x: string]: any }
   headers?: { [x: string]: string }
   body?: { [x: string]: any }
@@ -1849,6 +1850,7 @@ export type ModelInfo = {
   compatibility?: ModelCompatibility
   package?: string
   compaction?: ProviderCompaction
+  websocket?: boolean
   settings?: { [x: string]: any }
   headers?: { [x: string]: string }
   body?: { [x: string]: any }
@@ -2025,6 +2027,7 @@ export type ConfigEntry =
         providers?: {
           [x: string]: {
             compaction?: ProviderCompaction
+            websocket?: boolean
             canonical?: string
             name?: string
             env?: Array<string>
@@ -2035,6 +2038,7 @@ export type ConfigEntry =
             models?: {
               [x: string]: {
                 compaction?: ProviderCompaction
+                websocket?: boolean
                 modelID?: string
                 family?: string
                 name?: string
@@ -4344,17 +4348,70 @@ export type MessageListInput = {
     readonly limit?: number | undefined
     readonly order?: "asc" | "desc" | undefined
     readonly cursor?: string | undefined
+    readonly type?:
+      | "agent-switched"
+      | "model-switched"
+      | "location-switched"
+      | "user"
+      | "synthetic"
+      | "system"
+      | "skill"
+      | "shell"
+      | "assistant"
+      | "compaction"
+      | undefined
   }["limit"]
   readonly order?: {
     readonly limit?: number | undefined
     readonly order?: "asc" | "desc" | undefined
     readonly cursor?: string | undefined
+    readonly type?:
+      | "agent-switched"
+      | "model-switched"
+      | "location-switched"
+      | "user"
+      | "synthetic"
+      | "system"
+      | "skill"
+      | "shell"
+      | "assistant"
+      | "compaction"
+      | undefined
   }["order"]
   readonly cursor?: {
     readonly limit?: number | undefined
     readonly order?: "asc" | "desc" | undefined
     readonly cursor?: string | undefined
+    readonly type?:
+      | "agent-switched"
+      | "model-switched"
+      | "location-switched"
+      | "user"
+      | "synthetic"
+      | "system"
+      | "skill"
+      | "shell"
+      | "assistant"
+      | "compaction"
+      | undefined
   }["cursor"]
+  readonly type?: {
+    readonly limit?: number | undefined
+    readonly order?: "asc" | "desc" | undefined
+    readonly cursor?: string | undefined
+    readonly type?:
+      | "agent-switched"
+      | "model-switched"
+      | "location-switched"
+      | "user"
+      | "synthetic"
+      | "system"
+      | "skill"
+      | "shell"
+      | "assistant"
+      | "compaction"
+      | undefined
+  }["type"]
 }
 
 export type MessageListOutput = SessionMessagesResponse