fix(app): keep right panel controls aligned

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

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

@@ -304,6 +304,11 @@ export const OpenResponsesUsage = Schema.Struct({
 })
 type OpenResponsesUsage = Schema.Schema.Type<typeof OpenResponsesUsage>
 
+// The spec requires `id` on every output item, but some gateways drop it from
+// later item events (Bedrock Mantle renames it to `item_id` on
+// `output_item.done` and `response.completed.output`). Decode it as optional
+// and let `normalize` recover or mint it once before the parser runs.
+// https://www.openresponses.org/specification#extending-items
 export const StreamItem = Schema.StructWithRest(
   Schema.Struct({
     type: Schema.String,
@@ -316,6 +321,7 @@ export const StreamItem = Schema.StructWithRest(
   [Schema.Record(Schema.String, Schema.Unknown)],
 )
 export type StreamItem = Schema.Schema.Type<typeof StreamItem>
+export type OutputItem = StreamItem & { readonly id: string }
 
 // The Responses schema puts streaming error details at the top level and
 // response failures under `response.error`. WebSocket failures use an
@@ -395,6 +401,7 @@ export const Event = Schema.StructWithRest(
   [Schema.Record(Schema.String, Schema.Unknown)],
 )
 export type Event = Schema.Schema.Type<typeof Event>
+export type NormalizedEvent = Event & { readonly item?: OutputItem | null }
 
 export interface ProviderAdapter {
   readonly id: string
@@ -416,14 +423,13 @@ export interface ParserState {
   readonly name: string
   readonly providerMetadataKey: string
   readonly tools: ToolStream.State<string>
-  // Call ids stay independent of item ids, which may be omitted or reused.
+  // Item ids are response-scoped identities. Keep completed ids tombstoned so
+  // reconnect replay cannot reopen fragments already emitted downstream.
   readonly completedTools: ReadonlySet<string>
   readonly hasFunctionCall: boolean
   readonly lifecycle: Lifecycle.State
   readonly outputItems: Readonly<Record<number, string>>
   readonly message: { readonly id: string; readonly phase: MessagePhase | null | undefined } | undefined
-  // Item ids are response-scoped identities. Keep completed ids tombstoned so
-  // reconnect replay cannot reopen fragments already emitted downstream.
   readonly completedMessages: ReadonlySet<string>
   readonly reasoningItems: Readonly<Record<string, ReasoningStreamItem>>
 }
@@ -875,9 +881,6 @@ export const providerMetadata = (state: ParserState, metadata: Record<string, un
   [state.providerMetadataKey]: metadata,
 })
 
-const isReasoningItem = (item: StreamItem): item is StreamItem & { type: "reasoning"; id: string } =>
-  item.type === "reasoning" && typeof item.id === "string"
-
 export type StepResult = readonly [ParserState, ReadonlyArray<LLMEvent>]
 
 const NO_EVENTS: StepResult["1"] = []
@@ -921,9 +924,34 @@ const joinReasoningText = (parts: ReadonlyArray<string | undefined>) => {
   return parts.filter((part) => part !== undefined).join("\n\n")
 }
 
-export const outputItemID = (state: ParserState, event: Event) =>
+const outputItemID = (state: ParserState, event: Event) =>
   event.output_index === undefined ? event.item_id : (state.outputItems[event.output_index] ?? event.item_id)
 
+const ITEM_ID_PREFIX: Readonly<Record<string, string>> = {
+  message: "msg",
+  reasoning: "rs",
+  function_call: "fc",
+  compaction: "cmp",
+}
+
+// An item without an id adopts the id already open in its output slot,
+// otherwise it gets a locally minted one.
+const resolveItem = (state: ParserState, item: StreamItem, index: number | undefined): OutputItem => ({
+  ...item,
+  id:
+    item.id ??
+    (index === undefined ? undefined : state.outputItems[index]) ??
+    `${ITEM_ID_PREFIX[item.type] ?? "item"}_${crypto.randomUUID().replaceAll("-", "")}`,
+})
+
+// Registered output slots are authoritative for `item_id` routing, and items
+// are resolved here so everything downstream can rely on `item.id`.
+export const normalize = (state: ParserState, input: Event): NormalizedEvent => ({
+  ...input,
+  item_id: input.item_id === undefined ? undefined : outputItemID(state, input),
+  item: input.item ? resolveItem(state, input.item, input.output_index) : input.item,
+})
+
 const startReasoningSummaryPart = (state: ParserState, itemID: string, index: number): StepResult => {
   const item = state.reasoningItems[itemID]
   if (!item?.open || index === 0 || item.summaryParts[index] !== undefined) return [state, NO_EVENTS]
@@ -997,7 +1025,7 @@ export const onReasoningDone = (state: ParserState, event: Event, itemID: string
   return onReasoningDelta(state, { ...event, delta: event.text }, itemID)
 }
 
-const reasoningMetadata = (state: ParserState, item: StreamItem & { id: string }) =>
+const reasoningMetadata = (state: ParserState, item: OutputItem) =>
   providerMetadata(state, { itemId: item.id, reasoningEncryptedContent: item.encrypted_content ?? null })
 
 // Responses APIs normally stream reasoning items in this order:
@@ -1010,18 +1038,18 @@ const reasoningMetadata = (state: ParserState, item: StreamItem & { id: string }
 // `onOutputItemAdded` seeds the per-item entry, while each later part start is
 // also an implicit boundary for the previous part. This keeps the common event
 // lifecycle ordered when a compatible provider omits or delays a part-done event.
-const onOutputItemAdded = (state: ParserState, event: Event): StepResult => {
+const onOutputItemAdded = (state: ParserState, event: NormalizedEvent): StepResult => {
   const item = event.item
-  if (item?.type === "message" && item.id !== undefined) {
-    const itemID = item.id
-    if (state.completedMessages.has(itemID)) return [state, NO_EVENTS]
+  if (!item) return [state, NO_EVENTS]
+  if (item.type === "message") {
+    if (state.completedMessages.has(item.id)) return [state, NO_EVENTS]
     const phase = messagePhase(item.phase)
     const completedMessages = new Set(state.completedMessages)
-    if (state.message !== undefined && state.message.id !== itemID) completedMessages.add(state.message.id)
+    if (state.message !== undefined && state.message.id !== item.id) completedMessages.add(state.message.id)
     // A new message closes earlier messages, including ones that never streamed.
     const events: LLMEvent[] = []
     const lifecycle = [...state.lifecycle.text]
-      .filter((id) => id !== itemID)
+      .filter((id) => id !== item.id)
       .reduce((lifecycle, id) => {
         completedMessages.add(id)
         const openPhase = state.message?.id === id ? state.message.phase : undefined
@@ -1038,14 +1066,14 @@ const onOutputItemAdded = (state: ParserState, event: Event): StepResult => {
         lifecycle,
         completedMessages,
         message: {
-          id: itemID,
-          phase: phase === undefined && state.message?.id === itemID ? state.message.phase : phase,
+          id: item.id,
+          phase: phase === undefined && state.message?.id === item.id ? state.message.phase : phase,
         },
       },
       events,
     ]
   }
-  if (item && isReasoningItem(item)) {
+  if (item.type === "reasoning") {
     if (state.reasoningItems[item.id] !== undefined) return [state, NO_EVENTS]
     const events: LLMEvent[] = []
     return [
@@ -1065,18 +1093,16 @@ const onOutputItemAdded = (state: ParserState, event: Event): StepResult => {
       events,
     ]
   }
-  if (item?.type !== "function_call" || !item.call_id) return [state, NO_EVENTS]
-  const id = item.id ?? item.call_id
-  if (Object.values(state.tools).some((tool) => tool?.id === item.call_id) || state.completedTools.has(item.call_id))
-    return [state, NO_EVENTS]
-  const metadata = item.id !== undefined ? providerMetadata(state, { itemId: item.id }) : undefined
+  if (item.type !== "function_call" || !item.call_id) return [state, NO_EVENTS]
+  if (state.tools[item.id] !== undefined || state.completedTools.has(item.id)) return [state, NO_EVENTS]
+  const metadata = providerMetadata(state, { itemId: item.id })
   const events: LLMEvent[] = []
   const lifecycle = Lifecycle.stepStart(state.lifecycle, events)
   return [
     {
       ...state,
       lifecycle,
-      tools: ToolStream.start(state.tools, id, {
+      tools: ToolStream.start(state.tools, item.id, {
         id: item.call_id,
         name: item.name ?? "",
         input: item.arguments ?? "",
@@ -1148,13 +1174,13 @@ const onFunctionCallArgumentsDelta = Effect.fn("OpenResponses.onFunctionCallArgu
 
 const onOutputItemDone = Effect.fn("OpenResponses.onOutputItemDone")(function* (
   state: ParserState,
-  item: Event["item"],
+  item: NormalizedEvent["item"],
 ) {
   if (!item) return [state, NO_EVENTS] satisfies StepResult
 
   if (item.type === "compaction") {
-    if (!item.id || typeof item.encrypted_content !== "string")
-      return yield* ProviderShared.eventError(state.id, "Compaction output is missing its id or encrypted content")
+    if (typeof item.encrypted_content !== "string")
+      return yield* ProviderShared.eventError(state.id, "Compaction output is missing its encrypted content")
     if (state.completedCompactions.has(item.id)) return [state, NO_EVENTS] satisfies StepResult
     const events: LLMEvent[] = []
     const lifecycle = Lifecycle.stepStart(state.lifecycle, events)
@@ -1171,7 +1197,7 @@ const onOutputItemDone = Effect.fn("OpenResponses.onOutputItemDone")(function* (
     ] satisfies StepResult
   }
 
-  if (item.type === "message" && item.id !== undefined) {
+  if (item.type === "message") {
     if (state.completedMessages.has(item.id)) return [state, NO_EVENTS] satisfies StepResult
     const completedMessages = new Set(state.completedMessages)
     completedMessages.add(item.id)
@@ -1204,36 +1230,23 @@ const onOutputItemDone = Effect.fn("OpenResponses.onOutputItemDone")(function* (
 
   if (item.type === "function_call") {
     if (!item.call_id || !item.name) return [state, NO_EVENTS] satisfies StepResult
-    const callID = item.call_id
-    if (state.completedTools.has(callID)) return [state, NO_EVENTS] satisfies StepResult
-    const metadata = item.id !== undefined ? providerMetadata(state, { itemId: item.id }) : undefined
-    const fallback = item.id ?? callID
-    // Match the pending tool by call id so item events that disagree on
-    // whether `item.id` is present still resolve the same call.
-    const registered =
-      state.tools[fallback] !== undefined
-        ? fallback
-        : Object.keys(state.tools).find((key) => state.tools[key]?.id === callID)
-    const id = registered ?? fallback
-    const tools =
-      registered !== undefined
-        ? state.tools
-        : ToolStream.start(state.tools, id, {
-            id: callID,
-            name: item.name,
-            providerMetadata: metadata,
-          })
+    if (state.completedTools.has(item.id)) return [state, NO_EVENTS] satisfies StepResult
+    const metadata = providerMetadata(state, { itemId: item.id })
+    const registered = state.tools[item.id] !== undefined
+    const tools = registered
+      ? state.tools
+      : ToolStream.start(state.tools, item.id, { id: item.call_id, name: item.name, providerMetadata: metadata })
     const result =
       item.arguments === undefined
-        ? yield* ToolStream.finish(state.id, tools, id)
-        : yield* ToolStream.finishWithInput(state.id, tools, id, item.arguments)
+        ? yield* ToolStream.finish(state.id, tools, item.id)
+        : yield* ToolStream.finishWithInput(state.id, tools, item.id, item.arguments)
     const events: LLMEvent[] = []
     const finished = result.events ?? []
     // A done-only call never streamed a start event, so open its lifecycle here.
     const resultEvents =
-      registered !== undefined || finished.length === 0
+      registered || finished.length === 0
         ? finished
-        : [LLMEvent.toolInputStart({ id: callID, name: item.name, providerMetadata: metadata }), ...finished]
+        : [LLMEvent.toolInputStart({ id: item.call_id, name: item.name, providerMetadata: metadata }), ...finished]
     const lifecycle = resultEvents.length ? Lifecycle.stepStart(state.lifecycle, events) : state.lifecycle
     events.push(...resultEvents)
     return [
@@ -1244,13 +1257,13 @@ const onOutputItemDone = Effect.fn("OpenResponses.onOutputItemDone")(function* (
           resultEvents.some((event) => LLMEvent.is.toolCall(event) || LLMEvent.is.toolInputError(event)) ||
           state.hasFunctionCall,
         tools: result.tools,
-        completedTools: new Set([...state.completedTools, callID]),
+        completedTools: new Set([...state.completedTools, item.id]),
       },
       events,
     ] satisfies StepResult
   }
 
-  if (isReasoningItem(item)) {
+  if (item.type === "reasoning") {
     if (state.reasoningItems[item.id]?.open === false) return [state, NO_EVENTS] satisfies StepResult
     const metadata = reasoningMetadata(state, item)
     const summaryParts: ReadonlyArray<unknown> = Array.isArray(item.summary) ? item.summary : []
@@ -1334,21 +1347,17 @@ const onResponseFinish = Effect.fn("OpenResponses.onResponseFinish")(function* (
   let current = state
   const events: LLMEvent[] = []
   if (event.type === "response.completed") {
-    for (const item of event.response?.output ?? []) {
-      if (item.type !== "compaction" && item.type !== "function_call") continue
-      if (item.type === "compaction") {
-        // Terminal recovery cannot insert a checkpoint before already-emitted content.
-        if (state.lifecycle.stepStarted && !state.completedCompactions.has(item.id ?? ""))
-          return yield* ProviderShared.eventError(
-            state.id,
-            "Cannot recover a compaction checkpoint after output has been emitted",
-          )
-      }
-      if (
-        item.type === "function_call" &&
-        (!item.call_id || !Object.values(current.tools).some((tool) => tool?.id === item.call_id))
-      )
-        continue
+    // An output item's array position is its output index.
+    for (const item of (event.response?.output ?? []).map((item, index) => resolveItem(state, item, index))) {
+      // Terminal recovery cannot insert a checkpoint before already-emitted content.
+      if (item.type === "compaction" && state.lifecycle.stepStarted && !state.completedCompactions.has(item.id))
+        return yield* ProviderShared.eventError(
+          state.id,
+          "Cannot recover a compaction checkpoint after output has been emitted",
+        )
+      const recoverable =
+        item.type === "compaction" || (item.type === "function_call" && current.tools[item.id] !== undefined)
+      if (!recoverable) continue
       const [next, emitted] = yield* onOutputItemDone(current, item)
       current = next
       events.push(...emitted)
@@ -1415,12 +1424,9 @@ export const providerFailure = (event: Event, fallback: string, body = ProviderS
   return new AIError({ reason })
 }
 
-export const step = (state: ParserState, input: Event) => {
-  // The OpenAPI requires string IDs but imposes no minLength; empty is not missing.
-  const event =
-    input.item_id !== undefined && outputItemID(state, input) !== input.item_id
-      ? { ...input, item_id: outputItemID(state, input) }
-      : input
+// Callers must pass events through `normalize` first. The OpenAPI requires
+// string IDs but imposes no minLength; empty is not missing.
+export const step = (state: ParserState, event: NormalizedEvent) => {
   if (event.type === "response.output_text.delta" || event.type === "response.output_text.done") {
     if (event.item_id === undefined) return ProviderShared.eventError(state.id, `${event.type} is missing item_id`)
     return Effect.succeed(
@@ -1460,20 +1466,16 @@ export const step = (state: ParserState, input: Event) => {
       ? Effect.succeed(onReasoningSummaryPartDone(state, event))
       : ProviderShared.eventError(state.id, `${event.type} is missing item_id`)
   if (event.type === "response.output_item.added") {
-    if (event.item?.type === "message" && event.item.id === undefined)
-      return ProviderShared.eventError(state.id, `${event.type} message is missing id`)
     if (
-      event.item &&
-      isReasoningItem(event.item) &&
+      event.item?.type === "reasoning" &&
       state.reasoningItems[event.item.id] === undefined &&
       state.lifecycle.reasoning.size > 0
     )
       return ProviderShared.eventError(state.id, `${event.type} started reasoning before the previous item ended`)
-    const id = event.item?.id ?? (event.item?.type === "function_call" ? event.item.call_id : undefined)
     return Effect.succeed(
       onOutputItemAdded(
-        event.output_index !== undefined && id !== undefined
-          ? { ...state, outputItems: { ...state.outputItems, [event.output_index]: id } }
+        event.output_index !== undefined && event.item
+          ? { ...state, outputItems: { ...state.outputItems, [event.output_index]: event.item.id } }
           : state,
         event,
       ),
@@ -1483,11 +1485,7 @@ export const step = (state: ParserState, input: Event) => {
     return event.item_id !== undefined
       ? onFunctionCallArgumentsDelta(state, event)
       : ProviderShared.eventError(state.id, `${event.type} is missing item_id`)
-  if (event.type === "response.output_item.done") {
-    if (event.item?.type === "message" && event.item.id === undefined)
-      return ProviderShared.eventError(state.id, `${event.type} message is missing id`)
-    return onOutputItemDone(state, event.item)
-  }
+  if (event.type === "response.output_item.done") return onOutputItemDone(state, event.item)
   if (event.type === "response.completed" || event.type === "response.incomplete") return onResponseFinish(state, event)
   if (event.type === "response.failed") return providerFailure(event, `${state.name} response failed`)
   if (event.type === "error")
@@ -1537,7 +1535,7 @@ export const protocol = Protocol.make({
   stream: {
     event: Protocol.jsonEvent(Event),
     initial,
-    step,
+    step: (state: ParserState, event: Event) => step(state, normalize(state, event)),
     terminal,
   },
 })

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

@@ -201,12 +201,11 @@ const HOSTED_TOOLS = {
   },
 } as const satisfies ResponsesHostedTools.Definitions
 
-const step = (state: OpenResponses.ParserState, event: OpenResponses.Event) => {
+const step = (state: OpenResponses.ParserState, input: OpenResponses.Event) => {
+  const event = OpenResponses.normalize(state, input)
   if (event.type === "response.reasoning_text.delta")
     return event.item_id !== undefined
-      ? Effect.succeed(
-          OpenResponses.onReasoningDelta(state, event, OpenResponses.outputItemID(state, event) ?? event.item_id),
-        )
+      ? Effect.succeed(OpenResponses.onReasoningDelta(state, event, event.item_id))
       : ProviderShared.eventError(ADAPTER, `${event.type} is missing item_id`)
   if (event.type === "response.output_item.done" && event.item && ResponsesHostedTools.isItem(event.item, HOSTED_TOOLS))
     return ResponsesHostedTools.onDone(state, event.item, HOSTED_TOOLS)

packages/ai/src/protocols/utils/responses-hosted-tools.ts

@@ -3,8 +3,7 @@ import { LLMEvent, type AIError, type ToolResultPart } from "../../schema/index.
 import { OpenResponses } from "../open-responses.js"
 import { Lifecycle } from "./lifecycle.js"
 
-export type Item = OpenResponses.StreamItem & {
-  readonly id: string
+export type Item = OpenResponses.OutputItem & {
   readonly status?: string
   readonly action?: unknown
   readonly queries?: unknown
@@ -27,8 +26,8 @@ export interface Definition {
 
 export type Definitions = Readonly<Record<string, Definition>>
 
-export const isItem = <Tools extends Definitions>(item: OpenResponses.StreamItem, tools: Tools): item is Item =>
-  item.type in tools && typeof item.id === "string" && item.id.length > 0
+export const isItem = <Tools extends Definitions>(item: OpenResponses.OutputItem, tools: Tools): item is Item =>
+  item.type in tools
 
 export const onDone: (
   state: OpenResponses.ParserState,

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

@@ -69,7 +69,8 @@ const HOSTED_TOOLS = {
 
 // Grok speaks the standard Responses reasoning dialect (`reasoning_summary_text.*`,
 // handled by the baseline); only its hosted tool vocabulary differs.
-const step = (state: OpenResponses.ParserState, event: OpenResponses.Event) => {
+const step = (state: OpenResponses.ParserState, input: OpenResponses.Event) => {
+  const event = OpenResponses.normalize(state, input)
   if (event.type === "response.output_item.done" && event.item && ResponsesHostedTools.isItem(event.item, HOSTED_TOOLS))
     return ResponsesHostedTools.onDone(state, event.item, HOSTED_TOOLS)
   return OpenResponses.step(state, event)

packages/ai/test/provider/compaction.test.ts

@@ -125,12 +125,15 @@ testEffect(
       response: { output: [{ type: "compaction", encrypted_content: "opaque" }] },
     }),
   ),
-).effect("rejects terminal checkpoints missing an id", () =>
+).effect("mints an id for terminal checkpoints that omit one", () =>
   Effect.gen(function* () {
-    const error = yield* LLMClient.generate(
+    const response = yield* LLMClient.generate(
       LLM.request({ model: OpenAI.configure({ apiKey: "test" }).responses("fixture"), prompt: "hello" }),
-    ).pipe(Effect.flip)
-    expect(error.reason._tag).toBe("InvalidProviderOutput")
-    expect(error.message).toContain("missing its id")
+    )
+    const part = response.message.content[0]
+    expect(part?.type).toBe("compaction")
+    if (part?.type !== "compaction") return
+    expect(part.id).toMatch(/^cmp_[0-9a-f]{32}$/)
+    expect(part.encrypted).toBe("opaque")
   }),
 )

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

@@ -329,69 +329,126 @@ describe("Open Responses basic-item lifecycles", () => {
       ])
     }),
   )
-  ;[undefined, "fc_1"].forEach((id) => {
-    it.effect(`opens and closes a done-only tool ${id === undefined ? "without" : "with"} an item id`, () =>
-      Effect.gen(function* () {
-        const item = {
-          type: "function_call",
-          ...(id === undefined ? {} : { id }),
-          call_id: "call_1",
-          name: "lookup",
-          arguments: '{"query":"weather"}',
-        }
-        const events = yield* collect(
-          { type: "response.output_item.done", item },
-          { type: "response.output_item.done", item: { ...item, id: "fc_1" } },
-          { type: "response.output_item.added", item },
-          completed,
-        )
-        const providerMetadata = id === undefined ? undefined : { "openai-compatible": { itemId: id } }
-        expect(events.filter((event) => event.type.startsWith("tool-"))).toEqual([
-          { type: "tool-input-start", id: "call_1", name: "lookup", providerMetadata },
-          { type: "tool-input-end", id: "call_1", name: "lookup", providerMetadata },
-          { type: "tool-call", id: "call_1", name: "lookup", input: { query: "weather" }, providerMetadata },
-        ])
-        expect(events.filter(LLMEvent.is.finish)).toEqual([
-          {
-            type: "finish",
-            reason: { normalized: "tool-calls", raw: undefined },
-            providerMetadata: { "openai-compatible": { responseId: "resp_1", serviceTier: undefined } },
+  // Captured from Bedrock Mantle (openai.gpt-oss-120b): the terminal function_call
+  // items rename `id` to `item_id` and carry a stray `output_index`.
+  it.effect("recovers a terminal function_call id from its output slot", () =>
+    Effect.gen(function* () {
+      const terminal = {
+        type: "function_call",
+        item_id: "fc_828bee50dee1d029",
+        call_id: "call_bc1eb4b42e70ee53",
+        name: "get_weather",
+        arguments: '{\n  "city": "Paris"\n}',
+        output_index: 1,
+        status: "completed",
+      }
+      const events = yield* collect(
+        {
+          type: "response.output_item.added",
+          output_index: 0,
+          item: { type: "reasoning", id: "msg_879a68b589198b4c" },
+        },
+        { type: "response.output_item.done", output_index: 0, item: { type: "reasoning", id: "msg_879a68b589198b4c" } },
+        {
+          type: "response.output_item.added",
+          output_index: 1,
+          item: {
+            type: "function_call",
+            id: "fc_828bee50dee1d029",
+            call_id: "call_bc1eb4b42e70ee53",
+            name: "get_weather",
+            arguments: "",
+            status: "in_progress",
           },
-        ])
-      }),
-    )
+        },
+        {
+          type: "response.function_call_arguments.delta",
+          output_index: 1,
+          item_id: "fc_828bee50dee1d029",
+          delta: '{\n  "city": "Paris"\n}',
+        },
+        {
+          type: "response.function_call_arguments.done",
+          output_index: 1,
+          item_id: "fc_828bee50dee1d029",
+          arguments: '{\n  "city": "Paris"\n}',
+        },
+        { type: "response.output_item.done", output_index: 1, item: terminal },
+        {
+          type: "response.completed",
+          response: { id: "resp_1", output: [{ type: "reasoning", id: "msg_879a68b589198b4c" }, terminal] },
+        },
+      )
+      const providerMetadata = { "openai-compatible": { itemId: "fc_828bee50dee1d029" } }
+      expect(events.filter((event) => event.type.startsWith("tool-"))).toEqual([
+        { type: "tool-input-start", id: "call_bc1eb4b42e70ee53", name: "get_weather", providerMetadata },
+        {
+          type: "tool-input-delta",
+          id: "call_bc1eb4b42e70ee53",
+          name: "get_weather",
+          text: '{\n  "city": "Paris"\n}',
+          input: { city: "Paris" },
+        },
+        { type: "tool-input-end", id: "call_bc1eb4b42e70ee53", name: "get_weather", providerMetadata },
+        {
+          type: "tool-call",
+          id: "call_bc1eb4b42e70ee53",
+          name: "get_weather",
+          input: { city: "Paris" },
+          providerMetadata,
+        },
+      ])
+    }),
+  )
 
-    it.effect(`deduplicates a pending call whose item id is ${id === undefined ? "introduced" : "omitted"} later`, () =>
-      Effect.gen(function* () {
-        const item = { type: "function_call", call_id: "call_1", name: "lookup" }
-        const first = { ...item, ...(id === undefined ? {} : { id }) }
-        const duplicate = { ...item, ...(id === undefined ? { id: "fc_1" } : {}) }
-        const events = yield* collect(
-          { type: "response.output_item.added", item: first },
-          { type: "response.function_call_arguments.delta", item_id: id ?? "call_1", delta: '{"query":"weather"}' },
-          { type: "response.output_item.added", item: duplicate },
-          { type: "response.output_item.done", item: duplicate },
-          { type: "response.output_item.done", item: first },
-          { type: "response.output_item.added", item: duplicate },
-          completed,
-        )
-        // Identity metadata comes from the first admission, not the duplicate.
-        const providerMetadata = id === undefined ? undefined : { "openai-compatible": { itemId: id } }
-        expect(events.filter((event) => event.type.startsWith("tool-"))).toEqual([
-          { type: "tool-input-start", id: "call_1", name: "lookup", providerMetadata },
-          {
-            type: "tool-input-delta",
-            id: "call_1",
-            name: "lookup",
-            text: '{"query":"weather"}',
-            input: { query: "weather" },
-          },
-          { type: "tool-input-end", id: "call_1", name: "lookup", providerMetadata },
-          { type: "tool-call", id: "call_1", name: "lookup", input: { query: "weather" }, providerMetadata },
-        ])
-      }),
-    )
-  })
+  it.effect("mints an id for a done-only tool that never had one", () =>
+    Effect.gen(function* () {
+      const events = yield* collect(
+        {
+          type: "response.output_item.done",
+          output_index: 0,
+          item: { type: "function_call", call_id: "call_1", name: "lookup", arguments: '{"query":"weather"}' },
+        },
+        completed,
+      )
+      const call = events.find(LLMEvent.is.toolCall)
+      expect(call).toMatchObject({ id: "call_1", name: "lookup", input: { query: "weather" } })
+      expect(call?.providerMetadata?.["openai-compatible"]).toMatchObject({
+        itemId: expect.stringMatching(/^fc_[0-9a-f]{32}$/),
+      })
+    }),
+  )
+
+  it.effect("opens and closes a done-only tool once", () =>
+    Effect.gen(function* () {
+      const item = {
+        type: "function_call",
+        id: "fc_1",
+        call_id: "call_1",
+        name: "lookup",
+        arguments: '{"query":"weather"}',
+      }
+      const events = yield* collect(
+        { type: "response.output_item.done", item },
+        { type: "response.output_item.done", item },
+        { type: "response.output_item.added", item },
+        completed,
+      )
+      const providerMetadata = { "openai-compatible": { itemId: "fc_1" } }
+      expect(events.filter((event) => event.type.startsWith("tool-"))).toEqual([
+        { type: "tool-input-start", id: "call_1", name: "lookup", providerMetadata },
+        { type: "tool-input-end", id: "call_1", name: "lookup", providerMetadata },
+        { type: "tool-call", id: "call_1", name: "lookup", input: { query: "weather" }, providerMetadata },
+      ])
+      expect(events.filter(LLMEvent.is.finish)).toEqual([
+        {
+          type: "finish",
+          reason: { normalized: "tool-calls", raw: undefined },
+          providerMetadata: { "openai-compatible": { responseId: "resp_1", serviceTier: undefined } },
+        },
+      ])
+    }),
+  )
 
   it.effect("recovers pending calls without reconciling terminal reasoning", () =>
     Effect.gen(function* () {
@@ -436,21 +493,6 @@ describe("Open Responses basic-item lifecycles", () => {
     }),
   )
 
-  it.effect("preserves call identity and pending order when an item id is reused", () =>
-    Effect.gen(function* () {
-      const first = { type: "function_call", id: "fc_1", call_id: "call_1", name: "lookup", arguments: "{}" }
-      const events = yield* collect(
-        { type: "response.output_item.added", item: first },
-        { type: "response.output_item.added", item: { ...first, id: "fc_2", call_id: "call_2" } },
-        { type: "response.output_item.done", item: first },
-        { type: "response.output_item.added", item: { ...first, call_id: "call_3" } },
-        { type: "response.output_item.done", item: first },
-        completed,
-      )
-      expect(events.filter(LLMEvent.is.toolCall).map((event) => event.id)).toEqual(["call_1", "call_2", "call_3"])
-    }),
-  )
-
   it.effect("keeps text and reasoning identities separate even with empty item ids", () =>
     Effect.gen(function* () {
       const events = yield* collect(
@@ -500,14 +542,15 @@ describe("Open Responses basic-item lifecycles", () => {
         { type: "response.output_text.delta", item_id: "msg_1", delta: "Answer" },
         {
           type: "response.output_item.added",
-          item: { type: "function_call", call_id: "call_1", name: "lookup", arguments: "{}" },
+          item: { type: "function_call", id: "fc_1", call_id: "call_1", name: "lookup", arguments: "{}" },
         },
         completed,
       )
       // Generic terminal closure does not repeat the message's phase metadata.
+      const providerMetadata = { "openai-compatible": { itemId: "fc_1" } }
       expect(events.slice(4, -2)).toEqual([
-        { type: "tool-input-end", id: "call_1", name: "lookup" },
-        { type: "tool-call", id: "call_1", name: "lookup", input: {} },
+        { type: "tool-input-end", id: "call_1", name: "lookup", providerMetadata },
+        { type: "tool-call", id: "call_1", name: "lookup", input: {}, providerMetadata },
         { type: "text-end", id: "msg_1" },
       ])
     }),

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

@@ -586,23 +586,21 @@ describe("Open Responses-compatible route", () => {
       Effect.gen(function* () {
         yield* Effect.forEach(["response.output_item.added", "response.output_item.done"], (type) =>
           Effect.forEach(fixtures, (fixture) =>
-            Effect.forEach(
-              fixture.item.type === "message" ? [undefined, null, 0, false, {}, []] : [null, 0, false, {}, []],
-              (id) =>
-                Effect.gen(function* () {
-                  const error = yield* LLMClient.generate(request).pipe(
-                    Effect.provide(
-                      fixedResponse(
-                        sseEvents(
-                          { type, item: { ...fixture.item, id } },
-                          { type: "response.completed", response: { id: "resp_1" } },
-                        ),
+            Effect.forEach([null, 0, false, {}, []], (id) =>
+              Effect.gen(function* () {
+                const error = yield* LLMClient.generate(request).pipe(
+                  Effect.provide(
+                    fixedResponse(
+                      sseEvents(
+                        { type, item: { ...fixture.item, id } },
+                        { type: "response.completed", response: { id: "resp_1" } },
                       ),
                     ),
-                    Effect.flip,
-                  )
-                  expect(error.reason._tag).toBe("InvalidProviderOutput")
-                }),
+                  ),
+                  Effect.flip,
+                )
+                expect(error.reason._tag).toBe("InvalidProviderOutput")
+              }),
             ),
           ),
         )
@@ -610,43 +608,6 @@ describe("Open Responses-compatible route", () => {
     )
   })
 
-  it.effect("streams function calls without optional item ids through the shared baseline", () =>
-    Effect.gen(function* () {
-      const model = configure({
-        apiKey: "test-key",
-        baseURL: "https://responses.example.test/v1",
-        provider: "example",
-      }).model("example-model")
-      const item = { type: "function_call", call_id: "call_1", name: "lookup", arguments: "" }
-      const response = yield* LLMClient.generate(LLM.request({ model, prompt: "Look it up." })).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              { type: "response.output_item.added", output_index: 1, item },
-              {
-                type: "response.function_call_arguments.delta",
-                output_index: 1,
-                item_id: "opaque_item",
-                delta: '{"query":"shared"}',
-              },
-              {
-                type: "response.output_item.done",
-                output_index: 1,
-                item: { ...item, arguments: '{"query":"complete"}' },
-              },
-              { type: "response.completed", response: { id: "resp_1" } },
-            ),
-          ),
-        ),
-      )
-
-      expect(response.events.filter(LLMEvent.is.toolCall)).toEqual([
-        expect.objectContaining({ id: "call_1", name: "lookup", input: { query: "complete" } }),
-      ])
-      expect(response.events.find(LLMEvent.is.toolCall)?.providerMetadata).toBeUndefined()
-    }),
-  )
-
   it.effect("finalizes pending function calls from completed response output", () =>
     Effect.gen(function* () {
       const model = configure({

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

@@ -469,7 +469,7 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("continues an item-id-less tool call with only the new tool output", () =>
+  it.effect("continues a streamed tool call with only the new tool output", () =>
     Effect.gen(function* () {
       const firstRequest = {
         type: "response.create",
@@ -485,6 +485,7 @@ describe("OpenAI Responses route", () => {
           type: "response.output_item.done",
           item: {
             type: "function_call",
+            id: "fc_1",
             status: "completed",
             call_id: "call_1",
             name: "weather",
@@ -2129,47 +2130,6 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("routes item-id-less function arguments by output index and prefers item completion", () =>
-    Effect.gen(function* () {
-      const item = { type: "function_call", call_id: "call_1", name: "lookup", arguments: "" }
-      const response = yield* LLMClient.generate(request).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              { type: "response.output_item.added", output_index: 2, item },
-              {
-                type: "response.function_call_arguments.delta",
-                output_index: 2,
-                item_id: "opaque_delta",
-                delta: '{"query":"streamed"}',
-              },
-              {
-                type: "response.function_call_arguments.done",
-                output_index: 2,
-                item_id: "opaque_done",
-                arguments: '{"query":"arguments-done"}',
-              },
-              {
-                type: "response.output_item.done",
-                output_index: 2,
-                item: { ...item, arguments: '{"query":"output-item-done"}' },
-              },
-              { type: "response.completed", response: { id: "resp_1" } },
-            ),
-          ),
-        ),
-      )
-
-      expect(response.events.filter((event) => event.type === "tool-input-delta")).toMatchObject([
-        { id: "call_1", text: '{"query":"streamed"}' },
-      ])
-      expect(response.events.filter(LLMEvent.is.toolCall)).toEqual([
-        expect.objectContaining({ id: "call_1", name: "lookup", input: { query: "output-item-done" } }),
-      ])
-      expect(response.events.find(LLMEvent.is.toolCall)?.providerMetadata).toBeUndefined()
-    }),
-  )
-
   it.effect("routes reasoning summary events by output index", () =>
     Effect.gen(function* () {
       const response = yield* LLMClient.generate(request).pipe(
@@ -2389,7 +2349,7 @@ describe("OpenAI Responses route", () => {
                 {
                   type: "response.output_item.added",
                   output_index: 0,
-                  item: { type: "function_call", call_id: "call_1", name: "lookup", arguments: "" },
+                  item: { type: "function_call", id: "fc_1", call_id: "call_1", name: "lookup", arguments: "" },
                 },
                 event,
                 { type: "response.completed", response: { id: "resp_1" } },
@@ -2931,14 +2891,10 @@ describe("OpenAI Responses route", () => {
                   arguments: '{"query":"weather"}',
                 },
               },
-              // Duplicates that drop the item id still resolve the same call.
-              {
-                type: "response.output_item.done",
-                item: { type: "function_call", call_id: "call_1", name: "lookup", arguments: '{"query":"weather"}' },
-              },
+              // A completed item that is re-added stays closed.
               {
                 type: "response.output_item.added",
-                item: { type: "function_call", call_id: "call_1", name: "lookup", arguments: "" },
+                item: { type: "function_call", id: "fc_1", call_id: "call_1", name: "lookup", arguments: "" },
               },
               { type: "response.completed", response: { id: "resp_1" } },
             ),
@@ -3793,43 +3749,6 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("finalizes and replays a completed function call without an optional item id", () =>
-    Effect.gen(function* () {
-      const response = yield* LLMClient.generate(request).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              {
-                type: "response.output_item.done",
-                item: { type: "function_call", call_id: "call_1", name: "lookup", arguments: '{"query":"weather"}' },
-              },
-              { type: "response.completed", response: { id: "resp_1" } },
-            ),
-          ),
-        ),
-      )
-
-      expect(response.events.filter(LLMEvent.is.toolCall)).toEqual([
-        expect.objectContaining({ id: "call_1", name: "lookup", input: { query: "weather" } }),
-      ])
-      expect(response.events.find(LLMEvent.is.toolCall)?.providerMetadata).toBeUndefined()
-
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            response.message,
-            Message.tool({ id: "call_1", name: "lookup", resultType: "json", result: { forecast: "sunny" } }),
-          ],
-        }),
-      )
-      expect(prepared.body.input).toEqual([
-        { type: "function_call", call_id: "call_1", name: "lookup", arguments: '{"query":"weather"}' },
-        { type: "function_call_output", call_id: "call_1", output: '{"forecast":"sunny"}' },
-      ])
-    }),
-  )
-
   it.effect("emits only missing function arguments from the arguments done event", () =>
     Effect.gen(function* () {
       const body = sseEvents(
@@ -4017,7 +3936,7 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("uses completed response output when item completion and its terminal item id are missing", () =>
+  it.effect("uses completed response output when output item completion is missing", () =>
     Effect.gen(function* () {
       const body = sseEvents(
         {
@@ -4032,6 +3951,7 @@ describe("OpenAI Responses route", () => {
             output: [
               {
                 type: "function_call",
+                id: "fc_item_1",
                 call_id: "call_1",
                 name: "lookup",
                 arguments: '{"query":"weather"}',
@@ -4053,37 +3973,6 @@ describe("OpenAI Responses route", () => {
     }),
   )
 
-  it.effect("reconciles an item-id-less pending function call from completed response output", () =>
-    Effect.gen(function* () {
-      const item = { type: "function_call", call_id: "call_1", name: "lookup", arguments: "" }
-      const response = yield* LLMClient.generate(request).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseEvents(
-              { type: "response.output_item.added", output_index: 0, item },
-              {
-                type: "response.function_call_arguments.delta",
-                output_index: 0,
-                item_id: "opaque_delta",
-                delta: '{"query":"partial',
-              },
-              {
-                type: "response.completed",
-                response: { id: "resp_1", output: [{ ...item, arguments: '{"query":"complete"}' }] },
-              },
-            ),
-          ),
-        ),
-      )
-
-      expect(response.events.filter(LLMEvent.is.toolCall)).toEqual([
-        expect.objectContaining({ id: "call_1", name: "lookup", input: { query: "complete" } }),
-      ])
-      expect(response.events.find(LLMEvent.is.toolCall)?.providerMetadata).toBeUndefined()
-      expect(response.events.filter(LLMEvent.is.toolInputEnd)).toHaveLength(1)
-    }),
-  )
-
   it.effect("lets completed response output override arguments done", () =>
     Effect.gen(function* () {
       const body = sseEvents(

packages/app/component-tests/open-in-border.spec.ts

@@ -0,0 +1,18 @@
+import { expect, story } from "../../storybook/playwright/story"
+
+for (const theme of ["light", "dark"]) {
+  story(`keeps the Open in border visible without hovering (${theme})`, async ({ mount, page }, testInfo) => {
+    const component = await mount("ui-split-button--open-in", { globals: { theme } })
+    const control = component.locator('[data-component="split-button-v2"]')
+    await page.mouse.move(0, 0)
+    await expect(control).toBeVisible()
+    await expect(control).not.toHaveCSS("box-shadow", "none")
+    const border = await control.evaluate((element) => getComputedStyle(element).boxShadow)
+
+    await component.getByRole("button", { name: "Open options" }).hover()
+    await expect(control).toHaveCSS("box-shadow", border)
+    await page.mouse.move(0, 0)
+    await expect(control).toHaveCSS("box-shadow", border)
+    await control.screenshot({ path: testInfo.outputPath(`open-in-${theme}.png`) })
+  })
+}

packages/app/e2e/performance/timeline-stability/fixture.ts

@@ -11,6 +11,7 @@ import type {
 } from "@opencode-ai/client/promise"
 import { EventManifest } from "@opencode-ai/schema/event-manifest"
 import { SessionMessage } from "@opencode-ai/schema/session-message"
+import type { TimelineDetail } from "@opencode-ai/session-ui/timeline/detail"
 import { expect, type Page } from "@playwright/test"
 import { Schema } from "effect"
 import { mockOpenCodeServer } from "../../utils/mock-server"
@@ -122,7 +123,7 @@ export async function setupTimeline(
     messages?: TimelineMessage[]
     sessionMessages?: SessionMessageInfo[]
     sessionStatus?: Record<string, SessionStatus>
-    settings?: Record<string, boolean>
+    settings?: Record<string, boolean | TimelineDetail>
     sessions?: Session[]
     cpuRate?: number
     viewport?: { width: number; height: number }

packages/app/e2e/regression/mobile-review-summary.spec.ts

@@ -92,6 +92,8 @@ for (const direction of ["ltr", "rtl"] as const) {
       .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem("settings.v3") ?? "{}").general?.mobileDiffWrap))
       .toBe(false)
     await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+    await expect(page).toHaveURL(stressSessionHref(fixture.targetID))
+    await page.getByRole("tab", { name: "Changes", exact: true }).click()
     await expect(modified.locator("[data-diff]")).toHaveAttribute("data-overflow", "scroll")
     await expect
       .poll(() => modified.locator("[data-code]").evaluate((element) => element.scrollWidth > element.clientWidth))
@@ -114,6 +116,8 @@ for (const direction of ["ltr", "rtl"] as const) {
       .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem("settings.v3") ?? "{}").general?.mobileDiffWrap))
       .toBe(true)
     await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+    await expect(page).toHaveURL(stressSessionHref(fixture.targetID))
+    await navigation.getByRole("tab", { name: "Changes", exact: true }).click()
     await expect(modified.locator("[data-diff]")).toHaveAttribute("data-overflow", "wrap")
     const openFile = modified.getByRole("button", { name: "Open file", exact: true })
     await expect(openFile).toBeVisible()

packages/app/e2e/regression/mobile-shell.spec.ts

@@ -67,6 +67,7 @@ test("mobile settings section menu stays above a full-width panel", async ({ pag
   const menu = settings.getByRole("button", { name: "Preferences", exact: true })
   const panel = settings.getByRole("tabpanel")
   await expect(settings.getByRole("heading", { name: "General", exact: true })).toBeVisible()
+  await expect(page).toHaveURL("/settings")
   await expect(menu).toBeVisible()
   await menu.click()
   await expect(page.getByRole("menuitemradio", { name: "Preferences", exact: true })).toBeChecked()
@@ -87,6 +88,7 @@ test("mobile settings section menu stays above a full-width panel", async ({ pag
     .toBe(true)
   await expect.poll(async () => (await panel.boundingBox())?.width ?? 0).toBeGreaterThan(350)
   await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+  await expect(page).toHaveURL("/")
   await expect(settings).toBeHidden()
   await expect(page.locator('[data-component="home-session-row"]')).toHaveCount(fixture.sessions.length)
 })

packages/app/e2e/regression/remote-session-settings.spec.ts

@@ -30,9 +30,11 @@ test("session settings use the remote server context", async ({ page }) => {
 
   const settings = page.getByTestId("settings-screen")
   await expect(settings).toBeVisible()
+  await expect(page).toHaveURL("/settings")
+  await expect(page.locator('[data-titlebar-tab][data-active="true"]')).toHaveCount(0)
+  await expect(page.getByRole("button", { name: "Home", exact: true })).toHaveAttribute("aria-pressed", "false")
   await expect(page.getByRole("dialog")).toHaveCount(0)
   await expect(settings.getByRole("tablist")).toHaveCSS("width", "328px")
-  await expect(sessionHeading).toBeAttached()
   await expect(sessionHeading).toBeHidden()
   const autoAccept = settings.locator('[data-action="settings-auto-accept-permissions"]')
   const input = autoAccept.getByRole("switch")
@@ -66,6 +68,15 @@ test("session settings use the remote server context", async ({ page }) => {
   await expect(settings.getByRole("switch", { name: "Server A Model" })).toHaveCount(0)
   await settings.getByRole("button", { name: "Back to app" }).click()
   await expect(settings).toBeHidden()
+  await expect(page).toHaveURL(`/server/${base64Encode(serverB)}/session/${sessionB.id}`)
+  await expect(sessionHeading).toBeVisible()
+  await expect(page.locator('[data-titlebar-tab][data-active="true"]')).toContainText(sessionB.title)
+  await page.keyboard.press("Control+]")
+  await expect(page).toHaveURL("/settings")
+  await expect(settings.getByRole("tab", { name: "Models", exact: true })).toHaveAttribute("aria-selected", "true")
+  await expect(page.locator('[data-titlebar-tab][data-active="true"]')).toHaveCount(0)
+  await page.keyboard.press("Escape")
+  await expect(page).toHaveURL(`/server/${base64Encode(serverB)}/session/${sessionB.id}`)
   await expect(sessionHeading).toBeVisible()
 })
 

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

@@ -0,0 +1,85 @@
+import { base64Encode } from "@opencode-ai/util/encode"
+import { expect, test } from "@playwright/test"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/ReviewTogglePosition"
+const sessionID = "ses_review_toggle_position"
+const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
+
+for (const width of [1000, 1440]) {
+  for (const direction of ["ltr", "rtl"] as const) {
+    test(`keeps the review toggle at the outer header edge (${width}px, ${direction})`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 900 })
+      await mockOpenCodeServer(page, {
+        directory,
+        project: {
+          id: "proj_review_toggle_position",
+          worktree: directory,
+          vcs: "git",
+          name: "review-toggle-position",
+          time: { created: 1700000000000, updated: 1700000000000 },
+          sandboxes: [],
+        },
+        provider: { all: [], connected: [], default: {} },
+        sessions: [
+          {
+            id: sessionID,
+            slug: "review-toggle-position",
+            projectID: "proj_review_toggle_position",
+            directory,
+            title: "Review toggle position",
+            version: "dev",
+            time: { created: 1700000000000, updated: 1700000000000 },
+          },
+        ],
+        pageMessages: () => ({ items: [] }),
+      })
+      await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
+      await expectSessionTitle(page, "Review toggle position")
+      await page.locator("html").evaluate((element, dir) => element.setAttribute("dir", dir), direction)
+
+      const toggle = page.getByRole("button", { name: "Toggle review", exact: true })
+      const header = page.locator("[data-session-title]")
+      const panel = page.locator("#review-panel")
+      await expect(toggle).toHaveAttribute("aria-expanded", "false")
+      const closed = await toggle.boundingBox()
+      if (!closed) throw new Error("Review toggle bounds are unavailable")
+      const headerBox = await header.boundingBox()
+      if (!headerBox) throw new Error("Session header bounds are unavailable")
+      expect(closed.y).toBeGreaterThanOrEqual(headerBox.y)
+      expect(closed.y + closed.height).toBeLessThanOrEqual(headerBox.y + headerBox.height)
+
+      await toggle.click()
+      await expect(toggle).toHaveAttribute("aria-expanded", "true")
+      await expect(panel).toHaveAttribute("aria-hidden", "false")
+      await expect(toggle).toHaveCount(1)
+      await expect.poll(() => toggle.boundingBox()).toEqual(closed)
+      await expect
+        .poll(async () => {
+          const box = await panel.boundingBox()
+          if (!box) return false
+          return (
+            closed.x >= box.x &&
+            closed.x + closed.width <= box.x + box.width &&
+            closed.y >= box.y &&
+            closed.y + closed.height <= box.y + 52
+          )
+        })
+        .toBe(true)
+
+      await expect
+        .poll(async () => {
+          const box = await panel.locator('[data-slot="session-side-panel-actions"]').boundingBox()
+          return box ? box.y + box.height / 2 : undefined
+        })
+        .toBe(closed.y + closed.height / 2)
+
+      await toggle.press("Enter")
+      await expect(toggle).toHaveAttribute("aria-expanded", "false")
+      await expect(toggle).toBeFocused()
+      await expect(toggle).toHaveCount(1)
+      await expect.poll(() => toggle.boundingBox()).toEqual(closed)
+    })
+  }
+}

packages/app/e2e/regression/session-location-sync.spec.ts

@@ -67,6 +67,12 @@ test("follows a live session move while the agent catalog is still loading", asy
   const session = { id: sessionID, projectID: fixture.project.id, directory, title: "Moved session" }
   const requested = Promise.withResolvers<void>()
   const release = Promise.withResolvers<void>()
+  await page.addInitScript(() => {
+    localStorage.setItem(
+      "settings.v3",
+      JSON.stringify({ general: { timelineDetail: { notices: { placement: "separate" } } } }),
+    )
+  })
   const transport = await installSseTransport(page, { server: fixture.serverKey })
   await mockOpenCodeServer(page, {
     directory: fixture.directory,
@@ -95,9 +101,7 @@ test("follows a live session move while the agent catalog is still loading", asy
   await transport.waitForConnection()
   const resolved = page.waitForResponse((response) => {
     const url = new URL(response.url())
-    return (
-      url.pathname === "/api/agent" && url.searchParams.get("location[directory]") === destination && response.ok()
-    )
+    return url.pathname === "/api/agent" && url.searchParams.get("location[directory]") === destination && response.ok()
   })
   session.directory = destination
   await transport.send({
@@ -221,7 +225,8 @@ function recoveryRequests(page: Page) {
   const requests: string[] = []
   page.on("request", (request) => {
     const path = new URL(request.url()).pathname
-    if (request.method() === "POST" && /^\/api\/(session\/[^/]+\/move$|worktree(?:\/|$))/.test(path)) requests.push(path)
+    if (request.method() === "POST" && /^\/api\/(session\/[^/]+\/move$|worktree(?:\/|$))/.test(path))
+      requests.push(path)
   })
   return requests
 }

packages/app/e2e/regression/session-notice-truncation.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import { setupTimeline } from "../performance/timeline-stability/fixture"
 
 for (const width of [1400, 390]) {
@@ -16,6 +17,9 @@ for (const width of [1400, 390]) {
         `\u0645\u0631\u0627\u062c\u0639\u0629 ${command}--reviewed`,
       ]
       await setupTimeline(page, {
+        settings: {
+          timelineDetail: { ...timelinePresets[2].value, notices: { placement: "separate" } },
+        },
         locale: profile.locale,
         viewport: { width, height: 900 },
         sessionMessages: [

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

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import { createTwoFilesPatch } from "diff"
 import {
   assistantMessage,
@@ -36,7 +37,9 @@ test("renders a completed single-file patch", async ({ page }) => {
         ),
       ]),
     ],
-    settings: { editToolPartsExpanded: true },
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } },
+    },
   })
 
   const wrapper = page.locator(`[data-timeline-part-id="${id}"]`)
@@ -68,7 +71,9 @@ test("keeps an expanded file diff header at the same viewport position", async (
   const before = Array.from({ length: 80 }, (_, index) => `export const value${index} = ${index}\n`).join("")
   const after = before.replaceAll(" = ", " = compute(").replaceAll("\n", ")\n")
   await setupTimeline(page, {
-    settings: { editToolPartsExpanded: true },
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } },
+    },
     messages: [
       userMessage([userText("Preceding context ".repeat(120))]),
       assistantMessage([
@@ -100,6 +105,7 @@ test("keeps an expanded file diff header at the same viewport position", async (
   const wrapper = page.locator(`[data-timeline-part-id="${id}"]`)
   const row = page.locator("[data-timeline-key]", { has: wrapper })
   const trigger = wrapper.getByRole("button")
+  await expect(trigger).toHaveAttribute("aria-expanded", "false")
   await expect
     .poll(() =>
       row.evaluate((element) => {

packages/app/e2e/regression/session-timeline-lifecycle-state.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import {
   assistantID,
   assistantMessage,
@@ -23,20 +24,23 @@ for (const expanded of [false, true]) {
   test(`preserves shell user intent from a ${expanded ? "expanded" : "collapsed"} default`, async ({ page }) => {
     const id = `prt_shell_default_${expanded}`
     const timeline = await setupTimeline(page, {
-      messages: [userMessage(), assistantMessage([shell(id, "completed", lines(3))])],
-      settings: { shellToolPartsExpanded: expanded },
+      messages: [userMessage(), assistantMessage([shell(id, "running", lines(3))], { completed: false })],
+      settings: {
+        timelineDetail: {
+          ...timelinePresets[2].value,
+          shell: { placement: "separate", details: expanded ? "expanded" : "collapsed" },
+        },
+      },
     })
-    const trigger = expanded
-      ? page.locator(`[data-timeline-part-id="${id}"] [data-slot="collapsible-trigger"]`)
-      : page.getByRole("button", { name: "Used 1 Shell", exact: true })
+    const trigger = page.locator(`[data-timeline-part-id="${id}"] [data-slot="collapsible-trigger"]`)
     await expect(trigger).toHaveAttribute("aria-expanded", String(expanded))
     await trigger.click()
     await expect(trigger).toHaveAttribute("aria-expanded", String(!expanded))
 
-    await timeline.send(partUpdated(shell(id, "completed", lines(6))), 180)
-    await timeline.send(partUpdated(textPart(`prt_sibling_${expanded}`, "Sibling content")), 180)
-    await timeline.send(status("busy"), 100)
-    await timeline.send(status("idle"), 250)
+    await timeline.send(partUpdated(shell(id, "completed", lines(6))))
+    await timeline.send(partUpdated(textPart(`prt_sibling_${expanded}`, "Sibling content")))
+    await timeline.send(status("idle"))
+    await expect(page.getByText("Sibling content", { exact: true })).toBeVisible()
     await expect(trigger).toHaveAttribute("aria-expanded", String(!expanded))
   })
 }
@@ -46,6 +50,9 @@ test("transitions a streaming shell from writing through command execution", asy
   const command = "printf ready"
   const timeline = await setupTimeline(page, {
     messages: [userMessage(), assistantMessage([], { completed: false })],
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, shell: { placement: "separate", details: "collapsed" } },
+    },
   })
   await timeline.send(toolInputStarted({ sessionID, assistantMessageID: assistantID, id, name: "shell" }))
 
@@ -95,7 +102,9 @@ test("shimmers and expands a running shell command", async ({ page }) => {
   const command = "sleep 10 && echo done"
   await setupTimeline(page, {
     messages: [userMessage(), assistantMessage([shell(id, "running", "still running", command)], { completed: false })],
-    settings: { shellToolPartsExpanded: false },
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, shell: { placement: "separate", details: "collapsed" } },
+    },
   })
 
   const tool = page.locator(`[data-timeline-part-id="${id}"]`)
@@ -110,7 +119,7 @@ test("shimmers and expands a running shell command", async ({ page }) => {
 })
 
 for (const open of [false, true]) {
-  test(`keeps ${open ? "expanded" : "collapsed"} reasoning intent from Thinking through standalone shell into Used`, async ({
+  test(`keeps ${open ? "expanded" : "collapsed"} Separate reasoning intent through shell completion`, async ({
     page,
   }) => {
     const reasoningID = `prt_reasoning_hidden_${open}`
@@ -118,7 +127,13 @@ for (const open of [false, true]) {
     const assistant = assistantMessage([reasoningPart(reasoningID, "## Inspecting stability")], { completed: false })
     const timeline = await setupTimeline(page, {
       messages: [userMessage(), assistant],
-      settings: { showReasoningSummaries: false },
+      settings: {
+        timelineDetail: {
+          ...timelinePresets[2].value,
+          thinking: { placement: "separate", details: "collapsed" },
+          shell: { placement: "separate", details: "collapsed" },
+        },
+      },
       cpuRate: 4,
     })
     const reasoning = page.locator(`[data-timeline-part-id="${renderedPartID(reasoningID)}"]`)
@@ -141,28 +156,11 @@ for (const open of [false, true]) {
     await timeline.send(partUpdated(shell(shellID, "completed", "done")))
     await timeline.send(messageUpdated(completedAssistantInfo(assistant)))
     await timeline.send(status("idle"))
-    const used = group.getByRole("button", { name: "Used 1 Shell", exact: true })
-    await expect(used).toHaveAttribute("aria-expanded", "false")
-    await used.click()
-    await expect(used).toHaveAttribute("aria-expanded", "true")
-    await expect(group.locator(`[data-timeline-part-id="${shellID}"]`)).toBeVisible()
-    await expect(group.getByRole("button", { name: "Thought", exact: true })).toHaveAttribute(
-      "aria-expanded",
-      String(open),
-    )
-    await expect(used.locator('[data-slot="basic-tool-tool-title"]')).toHaveText("1 Shell")
+    await expect(group).toHaveCount(0)
+    await expect(thought).toHaveAttribute("aria-expanded", String(open))
     await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
-    await expect(used).toHaveAttribute("aria-expanded", "true")
     if (!open) await thought.click()
     await expect(reasoning.getByRole("heading", { name: "Inspecting stability", exact: true })).toBeVisible()
-    await used.click()
-    await expect(used).toHaveAttribute("aria-expanded", "false")
-    await used.click()
-    await expect(reasoning.getByRole("button", { name: "Thought", exact: true })).toHaveAttribute(
-      "aria-expanded",
-      "true",
-    )
-    await expect(reasoning.getByRole("heading", { name: "Inspecting stability", exact: true })).toBeVisible()
   })
 }
 
@@ -172,6 +170,9 @@ for (const transition of ["reasoning-end", "idle", "retry"] as const) {
     const text = "## Inspecting stability\n\nThe timeline is ready for the next step."
     const timeline = await setupTimeline(page, {
       messages: [userMessage(), assistantMessage([reasoningPart(id, text)], { completed: false })],
+      settings: {
+        timelineDetail: { ...timelinePresets[2].value, thinking: { placement: "separate", details: "collapsed" } },
+      },
     })
     const part = page.locator(`[data-timeline-part-id="${renderedPartID(id)}"]`)
     const trigger = part.locator('[data-slot="collapsible-trigger"]')

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

@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test"
 import type { SessionMessageAssistant, SessionMessageInfo } from "@opencode-ai/client/promise"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import {
   compactionDelta,
   compactionEnded,
@@ -49,6 +50,9 @@ test("renders current protocol notices in CLI order", async ({ page }) => {
       ownerWarnings.push(message.text())
   })
   await setupTimeline(page, {
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, notices: { placement: "separate" } },
+    },
     sessionMessages: [
       user,
       { id: "msg_agent", type: "agent-switched", agent: "explore", time: { created: 2 } },
@@ -84,7 +88,12 @@ test("renders current protocol notices in CLI order", async ({ page }) => {
 })
 
 test("renders a compaction summary while it streams and after completion", async ({ page }) => {
-  const timeline = await setupTimeline(page, { sessionMessages: [user, assistant(true)] })
+  const timeline = await setupTimeline(page, {
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, notices: { placement: "separate" } },
+    },
+    sessionMessages: [user, assistant(true)],
+  })
 
   await timeline.send(
     compactionStarted({
@@ -161,7 +170,12 @@ test("updates running compactions to failed and cancelled boundaries", async ({
 })
 
 test("moves blocking work to the background with Ctrl+B", async ({ page }) => {
-  await setupTimeline(page, { sessionMessages: [user, assistant(false, true)] })
+  await setupTimeline(page, {
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, subagents: { placement: "separate" } },
+    },
+    sessionMessages: [user, assistant(false, true)],
+  })
   const card = page.locator('[data-component="task-tool-card"]')
   await expect(card).toBeVisible()
   await expect(card).toContainText("Inspect code")
@@ -198,6 +212,9 @@ test("moves blocking work to the background with Ctrl+B", async ({ page }) => {
 test("navigates from a running subagent card and hides background controls in the child", async ({ page }) => {
   const childID = "ses_running_child"
   await setupTimeline(page, {
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, subagents: { placement: "separate" } },
+    },
     sessionMessages: [user, assistant(false, true, childID)],
     sessions: [session(), session({ id: childID, parentID: sessionID, title: "Sleep for 5 minutes" })],
     sessionStatus: { [sessionID]: { type: "busy" }, [childID]: { type: "busy" } },
@@ -213,6 +230,7 @@ for (const name of ["shell", "subagent"] as const) {
   test(`keeps the background shortcut available for a grouped running ${name}`, async ({ page }) => {
     const message = assistant(false, true)
     await setupTimeline(page, {
+      settings: { timelineDetail: timelinePresets[2].value },
       sessionMessages: [
         user,
         {
@@ -281,6 +299,7 @@ test("separates blocking and already-backgrounded work into two rows", async ({
   const backgroundID = "ses_background_existing"
   const blockingID = "ses_background_blocking"
   const timeline = await setupTimeline(page, {
+    settings: { timelineDetail: timelinePresets[2].value },
     sessionMessages: [
       user,
       {
@@ -369,6 +388,13 @@ test("separates blocking and already-backgrounded work into two rows", async ({
   })
   const backgroundCard = page.locator('[data-timeline-part-id="call_backgrounded"]')
   await expect(page.getByText(/move running work to the background/i)).toBeVisible()
+  const used = page
+    .locator('[data-timeline-part-ids="call_backgrounded,call_shell_backgrounded,call_blocking"]')
+    .locator(':scope > [data-component="collapsible"] > [data-slot="collapsible-trigger"]')
+  await expect(used).toHaveText(/^Used\s*2 Agent, 1 Shell$/)
+  await expect(used).toHaveAttribute("aria-expanded", "false")
+  await used.click()
+  await expect(used).toHaveAttribute("aria-expanded", "true")
   await page.getByRole("button", { name: "Session details" }).click()
   const summary = page.getByRole("button", { name: "2 items running in background" })
   await expect(summary).toContainText("2")
@@ -376,6 +402,7 @@ test("separates blocking and already-backgrounded work into two rows", async ({
   const list = page.locator('[data-component="session-background-list"]')
   await expect(list).toContainText("Background task")
   await expect(list).toContainText("sleep 120")
+  await expect(list).not.toContainText("Foreground task")
   await expect(backgroundCard).toContainText("Background task (background)")
   await expect(backgroundCard.locator('[data-component="session-progress-indicator-v2"]')).toBeVisible()
   await expect(

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

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import {
   assistantMessage,
   partUpdated,
@@ -14,7 +15,9 @@ test.describe("session timeline projection", () => {
     const first = "prt_patch_first"
     const second = "prt_patch_second"
     const timeline = await setupTimeline(page, {
-      settings: { editToolPartsExpanded: true },
+      settings: {
+        timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } },
+      },
       messages: [
         userMessage(),
         assistantMessage([
@@ -34,6 +37,7 @@ test.describe("session timeline projection", () => {
     const initial = page.locator(`[data-timeline-part-id="${first}"]`)
     const initialFile = initial.locator('[data-scope="apply-patch"] [data-type="update"]')
     await expect(initialFile).toBeVisible()
+    await expect(initialFile.getByRole("button")).toHaveAttribute("aria-expanded", "false")
     await initialFile.getByRole("button").click()
     await expect(initialFile.getByRole("button")).toHaveAttribute("aria-expanded", "true")
     await initial.evaluate((element) => {
@@ -110,8 +114,11 @@ test.describe("session timeline projection", () => {
       parentID: "msg_2000_second_user",
       created: 1700000006000,
     })
-    const timeline = await setupTimeline(page, { messages: [firstUser, aborted, failed, nextUser, nextAssistant] })
-    await timeline.send(status("idle"), 100)
+    const timeline = await setupTimeline(page, {
+      settings: { timelineDetail: timelinePresets[2].value },
+      messages: [firstUser, aborted, failed, nextUser, nextAssistant],
+    })
+    await timeline.send(status("idle"))
     const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
     await scroller.evaluate((element) => (element.scrollTop = 0))
 
@@ -127,6 +134,7 @@ test.describe("session timeline projection", () => {
     const longName = "Company Gateway Extra Long Context Model for Narrow Timeline Layouts"
     await setupTimeline(page, {
       viewport: { width: 420, height: 700 },
+      settings: { timelineDetail: { ...timelinePresets[2].value, notices: { placement: "separate" } } },
       sessionMessages: [
         {
           id: "msg_model_fast_nano",

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

@@ -5,134 +5,48 @@ import {
   reasoningPart,
   setupTimeline,
   textPart,
-  toolPart,
   userMessage,
 } from "../performance/timeline-stability/fixture"
 
-test("changes live reasoning through Settings and persists Hidden, Compact, and Full", async ({ page }) => {
+test("changes timeline presets and saves custom thinking details", async ({ page }) => {
   await setupTimeline(page, {
     messages: [
       userMessage(),
-      assistantMessage(
-        [
-          reasoningPart(
-            "prt_reasoning_settings",
-            "## Inspecting stability\n\nThe selected mode controls these details.",
-          ),
-        ],
-        { completed: false },
-      ),
+      assistantMessage([
+        reasoningPart("prt_reasoning_settings", "## Inspecting stability\n\nThe selected mode controls these details."),
+      ]),
     ],
   })
   const part = page.locator(`[data-timeline-part-id="${assistantID}:reasoning:0"]`)
-  await expect(part.getByRole("button")).toHaveAttribute("aria-expanded", "false")
   const settings = page.getByTestId("settings-screen")
-  const select = settings.locator('[data-action="settings-reasoning-mode"] [data-component="select-v2"]')
-  for (const label of ["Full", "Hidden", "Compact"] as const) {
-    await page.keyboard.press("Control+,")
-    await expect(settings.getByText("Model reasoning", { exact: true })).toBeVisible()
-    await expect(select).toHaveAttribute("aria-expanded", "false")
-    await select.click()
-    await expect(page.getByRole("listbox").getByRole("option")).toHaveText(["Hidden", "Compact", "Full"])
-    await page.getByRole("option", { name: label, exact: true }).click()
-    await expect(select).toHaveText(label)
-    await expect(select).toHaveAttribute("aria-expanded", "false")
-    await expect
-      .poll(() => page.evaluate(() => JSON.parse(localStorage.getItem("settings.v3") ?? "{}").general?.reasoningMode))
-      .toBe(label.toLowerCase())
-    await settings.getByRole("button", { name: "Back to app", exact: true }).click()
-    await expect(settings).toBeHidden()
-    await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(label === "Hidden" ? 0 : 1)
-    await expect(part).toHaveCount(label === "Hidden" ? 0 : 1)
-    if (label === "Hidden") {
-      await expect(page.getByText("The selected mode controls these details.", { exact: true })).toBeHidden()
-      continue
-    }
-    await expect(part.getByRole("button")).toHaveAttribute("aria-expanded", String(label === "Full"))
-    if (label === "Full")
-      await expect(part.getByText("The selected mode controls these details.", { exact: true })).toBeVisible()
-    if (label === "Compact") {
-      await expect(part.getByRole("button")).toContainText("Inspecting stability")
-      await expect(part.getByText("The selected mode controls these details.", { exact: true })).toBeHidden()
-    }
-  }
   await page.keyboard.press("Control+,")
-  await expect(select).toHaveText("Compact")
-})
-
-// The persisted boolean migrates to compact (false) or full (true).
-for (const summaries of [false, true]) {
-  for (const profile of ["none", "blank", "heading", "tool", "text"] as const) {
-    test(`projects legacy ${summaries ? "full" : "compact"} reasoning with ${profile}`, async ({ page }) => {
-      await setupTimeline(page, {
-        messages: [
-          userMessage(),
-          assistantMessage(
-            [
-              ...(profile === "none"
-                ? []
-                : [
-                    reasoningPart(
-                      `prt_reasoning_${summaries}_${profile}`,
-                      profile === "blank"
-                        ? "   "
-                        : "## Inspecting stability\n\nI will inspect the timeline before changing its state.",
-                    ),
-                  ]),
-              ...(profile === "tool"
-                ? [toolPart(`prt_reasoning_tool_${summaries}`, "skill", "running", { name: "inspect" })]
-                : []),
-              ...(profile === "text" ? [textPart(`prt_reasoning_text_${summaries}`, "The timeline is stable.")] : []),
-            ],
-            { completed: false },
-          ),
-        ],
-        settings: { showReasoningSummaries: summaries },
-      })
-      const part = page.locator(`[data-timeline-part-id="${assistantID}:reasoning:0"]`)
-      await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(
-        profile === "blank" || profile === "heading" ? 1 : 0,
-      )
-      if (profile === "none") {
-        await expect(part).toHaveCount(0)
-        return
-      }
-      if (profile === "blank") {
-        await expect(part).toContainText("Thinking")
-        await expect(part.getByRole("heading")).toHaveCount(0)
-        return
-      }
-      if (profile === "tool") {
-        const group = page.locator('[data-component="collapsed-tool-group"]')
-        const used = group.locator(':scope > [data-component="collapsible"] > [data-slot="collapsible-trigger"]')
-        await expect(used).toHaveText(/^Used\s*1 Skill$/)
-        await expect(used).toHaveAttribute("aria-expanded", "false")
-        await expect(page.getByText("Inspecting stability", { exact: true })).toBeHidden()
-        await expect(used.locator('[data-slot="basic-tool-tool-title"]')).toHaveText("1 Skill")
-        await used.click()
-        await expect(used).toHaveAttribute("aria-expanded", "true")
-        await expect(group.locator(`[data-timeline-part-id="prt_reasoning_tool_${summaries}"]`)).toBeVisible()
-        await expect(group.locator('[data-component="reasoning-part"]')).toHaveCount(1)
-      }
-      if (profile === "text") await expect(page.getByText("The timeline is stable.", { exact: true })).toBeVisible()
-      const trigger = part.locator('[data-slot="collapsible-trigger"]')
-      const body = part.getByText("I will inspect the timeline before changing its state.", { exact: true })
-      await expect(trigger).toContainText(profile === "heading" ? "Thinking" : "Thought")
-      await expect(trigger).toHaveAttribute("aria-expanded", String(summaries))
-      if (!summaries) {
-        await expect(body).toBeHidden()
-        if (profile === "heading") await expect(trigger).toContainText("Inspecting stability")
-        await trigger.click()
-        await expect(trigger).toHaveAttribute("aria-expanded", "true")
-      }
-      await expect(body).toBeVisible()
-      await trigger.click()
-      await expect(trigger).toHaveAttribute("aria-expanded", "false")
-      await expect(body).toBeHidden()
-      if (profile !== "heading") await expect(trigger).not.toContainText("Inspecting stability")
-    })
+  const slider = settings.getByRole("slider", { name: "Timeline detail", exact: true })
+  await expect(slider).toBeEnabled()
+  await slider.press("Home")
+  for (const [index, name] of ["Everything", "Detailed", "Compact", "Quiet", "Text only"].entries()) {
+    if (index) await slider.press("ArrowRight")
+    await expect(slider).toHaveValue(String(index))
+    await expect(slider).toHaveAttribute("aria-valuetext", name)
   }
-}
+  await slider.press("Home")
+  await settings.getByRole("button", { name: "Advanced", exact: true }).click()
+  await settings.getByRole("button", { name: "Thinking Placement Separate", exact: true }).click()
+  await page.getByRole("option", { name: "Grouped", exact: true }).click()
+  await settings.getByRole("button", { name: "Thinking Details Expanded", exact: true }).click()
+  await page.getByRole("option", { name: "Collapsed", exact: true }).click()
+  await expect(slider).toHaveAttribute("aria-valuetext", "Custom")
+  await expect
+    .poll(() =>
+      page.evaluate(() => JSON.parse(localStorage.getItem("settings.v3") ?? "{}").general?.timelineDetail?.thinking),
+    )
+    .toEqual({ placement: "grouped", details: "collapsed" })
+  await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+  await expect(settings).toBeHidden()
+  await page.getByRole("button", { name: "Reasoning", exact: true }).click()
+  await expect(part.getByRole("button")).toHaveAttribute("aria-expanded", "false")
+  await part.getByRole("button").click()
+  await expect(part.getByText("The selected mode controls these details.", { exact: true })).toBeVisible()
+})
 
 test("does not infer reasoning visibility from provider identity", async ({ page }) => {
   await setupTimeline(page, {

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

@@ -18,10 +18,10 @@ test("reducer-hardening: converges when idle arrives before final part and messa
   const textID = "prt_event_order_text"
   const assistant = assistantMessage([textPart(textID, "Partial")], { completed: false })
   const timeline = await setupTimeline(page, { messages: [userMessage(), assistant] })
-  await timeline.send(status("busy"), 100)
-  await timeline.send(status("idle"), 100)
-  await timeline.send(partUpdated(textPart(textID, "Final after early idle")), 120)
-  await timeline.send(messageUpdated(completedAssistantInfo(assistant)), 250)
+  await timeline.send(status("busy"))
+  await timeline.send(status("idle"))
+  await timeline.send(partUpdated(textPart(textID, "Final after early idle")))
+  await timeline.send(messageUpdated(completedAssistantInfo(assistant)))
 
   await expect(page.locator('[data-timeline-row="Thinking"]')).toHaveCount(0)
   await expect(page.locator(`[data-timeline-part-id="${renderedPartID(textID)}"]`)).toContainText(
@@ -138,7 +138,7 @@ test("combines follow-up patches into one three-file stack inside Used", async (
   await expect(group.locator('[data-slot="apply-patch-filename"]')).toHaveText(["a.ts", "b.ts", "c.ts"])
 })
 
-test("keeps failed search calls and their error cards inside the collapsed stack", async ({ page }) => {
+test("keeps failed search calls and their error cards outside the collapsed stack", async ({ page }) => {
   const parts = [
     toolPart(
       "prt_error_glob",
@@ -161,12 +161,9 @@ test("keeps failed search calls and their error cards inside the collapsed stack
   ]
   await setupTimeline(page, { messages: [userMessage(), assistantMessage(parts)] })
 
-  const group = page.locator('[data-timeline-part-ids="prt_error_glob,prt_error_grep"]')
-  const summary = group.getByRole("button", { name: "Used 1 Glob, 1 Grep", exact: true })
-  await expect(summary.locator('[data-slot="basic-tool-tool-title"]')).toHaveText("1 Glob, 1 Grep")
-  await summary.click()
-  await expect(group.locator('[data-kind="tool-error-card"]')).toHaveCount(2)
-  const glob = group.locator('[data-timeline-part-id="prt_error_glob"]')
+  await expect(page.locator('[data-component="collapsed-tool-group"]')).toHaveCount(0)
+  await expect(page.locator('[data-kind="tool-error-card"]')).toHaveCount(2)
+  const glob = page.locator('[data-timeline-part-id="prt_error_glob"]')
   await expect(glob).toContainText("Invalid tool input")
   await expect(glob.locator('[data-component="tool-error-card-icon"]')).toBeVisible()
   await expect(glob.locator('[data-component="tool-error-card-icon"] use')).toHaveAttribute(
@@ -180,7 +177,7 @@ test("keeps failed search calls and their error cards inside the collapsed stack
         .evaluate((element) => getComputedStyle(element, "::before").display),
     )
     .toBe("none")
-  await expect(group.locator('[data-timeline-part-id="prt_error_grep"]')).toContainText(
+  await expect(page.locator('[data-timeline-part-id="prt_error_grep"]')).toContainText(
     "Search timed out after 30 seconds",
   )
 })

packages/app/e2e/regression/session-timeline-shell-outline.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test, type Locator, type Page } from "@playwright/test"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import {
   assistantMessage,
   setupTimeline,
@@ -74,21 +75,29 @@ test("keeps the patch card inside a fractionally short virtual row", async ({ pa
     additions: 1,
     deletions: 1,
   }
-  const timeline = await setupTimeline(page, {
+  await setupTimeline(page, {
     messages: [
       userMessage(),
       assistantMessage([
-        toolPart(patchID, "patch", "completed", { patchText: "Update src/outline.ts" }, { metadata: { files: [file] } }),
+        toolPart(
+          patchID,
+          "patch",
+          "completed",
+          { patchText: "Update src/outline.ts" },
+          { metadata: { files: [file] } },
+        ),
       ]),
     ],
-    settings: { editToolPartsExpanded: true },
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } },
+    },
     reducedMotion: true,
   })
   const part = page.locator(`[data-timeline-part-id="${patchID}"]`)
   const card = part.locator('[data-component="accordion"][data-scope="apply-patch"]')
   const row = page.locator("[data-timeline-key]", { has: part })
   await expect(card).toBeVisible()
-  await timeline.settle()
+  await expect(card.getByRole("button")).toHaveAttribute("aria-expanded", "false")
 
   const geometry = await row.evaluate((element) => {
     const card = element.querySelector<HTMLElement>('[data-component="accordion"][data-scope="apply-patch"]')
@@ -106,8 +115,6 @@ test("keeps the patch card inside a fractionally short virtual row", async ({ pa
       cardHeight: cardRect.height,
     }
   })
-  await timeline.settle()
-
   expect(geometry.overflow).toBeCloseTo(0.49, 1)
   expect(geometry.paintOverflow).toBeLessThanOrEqual(0)
   const edges = await captureCardEdges(page, card)

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

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import {
   assistantMessage,
   partUpdated,
@@ -11,7 +12,9 @@ test("transitions shell and question through running error outcomes", async ({ p
   const shellID = "prt_transition_error_shell"
   const questionID = "prt_transition_error_question"
   const timeline = await setupTimeline(page, {
-    settings: { shellToolPartsExpanded: true },
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, shell: { placement: "separate", details: "expanded" } },
+    },
     messages: [
       userMessage(),
       assistantMessage(
@@ -24,18 +27,17 @@ test("transitions shell and question through running error outcomes", async ({ p
     ],
   })
   await expect(page.locator(`[data-timeline-part-id="${questionID}"]`)).toHaveCount(0)
-  await timeline.send(partUpdated(toolPart(shellID, "shell", "running", { command: "exit 1" })), 120)
-  await timeline.send(partUpdated(toolPart(questionID, "question", "running", questionInput())), 180)
+  await timeline.send(partUpdated(toolPart(shellID, "shell", "running", { command: "exit 1" })))
+  await expect(page.locator(`[data-timeline-part-id="${shellID}"]`)).toContainText("exit 1")
+  await timeline.send(partUpdated(toolPart(questionID, "question", "running", questionInput())))
   await expect(page.locator(`[data-timeline-part-id="${questionID}"]`)).toHaveCount(0)
   await timeline.send(
     partUpdated(toolPart(shellID, "shell", "error", { command: "exit 1" }, { error: "Command exited 1" })),
-    180,
   )
   await timeline.send(
     partUpdated(
       toolPart(questionID, "question", "error", questionInput(), { error: "The user dismissed this question" }),
     ),
-    250,
   )
 
   await expect(page.locator(`[data-timeline-part-id="${shellID}"] [data-kind="tool-error-card"]`)).toBeVisible()
@@ -46,7 +48,9 @@ test("preserves surviving grouped patch state when its first patch fails", async
   const failed = "prt_grouped_patch_failed"
   const surviving = "prt_grouped_patch_surviving"
   const timeline = await setupTimeline(page, {
-    settings: { editToolPartsExpanded: true },
+    settings: {
+      timelineDetail: { ...timelinePresets[2].value, edit: { placement: "separate", details: "collapsed" } },
+    },
     messages: [
       userMessage(),
       assistantMessage(
@@ -80,6 +84,7 @@ test("preserves surviving grouped patch state when its first patch fails", async
   const group = page.locator(`[data-timeline-part-ids="${failed},${surviving}"]`)
   const file = group.locator('[data-scope="apply-patch"] button')
   await expect(file).toBeVisible()
+  await expect(file).toHaveAttribute("aria-expanded", "false")
   await file.click()
   await expect(file).toHaveAttribute("aria-expanded", "true")
   await group.evaluate((element) => {
@@ -116,6 +121,7 @@ test("preserves surviving grouped patch state when its first patch fails", async
 test("groups instruction files loaded by the same read", async ({ page }) => {
   const id = "prt_read_instructions"
   await setupTimeline(page, {
+    settings: { timelineDetail: { ...timelinePresets[2].value, tools: { placement: "separate" } } },
     messages: [
       userMessage(),
       assistantMessage([
@@ -148,7 +154,10 @@ test("groups only consecutive successful skill tools", async ({ page }) => {
     toolPart("prt_skill_break", "read", "completed", { path: "src/a.ts" }),
     toolPart("prt_skill_last", "skill", "completed", { id: "opencode" }),
   ]
-  await setupTimeline(page, { messages: [userMessage(), assistantMessage(parts)] })
+  await setupTimeline(page, {
+    settings: { timelineDetail: timelinePresets[2].value },
+    messages: [userMessage(), assistantMessage(parts)],
+  })
 
   const group = page.locator(`[data-timeline-part-ids="${parts.map((part) => part.id).join(",")}"]`)
   await group.getByRole("button").click()

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

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import {
   assistantID,
   assistantMessage,
@@ -19,6 +20,9 @@ for (const width of [1400, 390]) {
       messages: [userMessage()],
       sessionStatus: { [sessionID]: { type: "busy" } },
       viewport: { width, height: 900 },
+      settings: {
+        timelineDetail: { ...timelinePresets[2].value, thinking: { placement: "separate", details: "collapsed" } },
+      },
     })
     const working = page.locator('[data-component="session-working"]')
     await expect(working).toHaveCount(1)
@@ -51,7 +55,9 @@ for (const name of ["shell", "patch", "subagent"] as const) {
   test(`hides Working during ${name} input and execution, then restores it on completion`, async ({ page }) => {
     const timeline = await setupTimeline(page, {
       messages: [userMessage(), assistantMessage([], { completed: false })],
-      settings: { editToolPartsExpanded: true },
+      settings: {
+        timelineDetail: { ...timelinePresets[0].value, shell: { placement: "separate", details: "collapsed" } },
+      },
     })
     const working = page.locator('[data-component="session-working"]')
     await expect(working).toBeVisible()
@@ -89,13 +95,8 @@ for (const name of ["shell", "patch", "subagent"] as const) {
     await expect(working).toHaveCount(0)
 
     await timeline.send(partUpdated(toolPart(id, name, "completed", input, { metadata })))
-    if (name === "shell") {
-      const group = page.locator('[data-component="collapsed-tool-group"]')
-      await expect(
-        group.getByRole("button", { name: "Used 1 Shell", exact: true, includeHidden: true }),
-      ).toHaveAttribute("aria-expanded", "false")
-      await expect(group).toBeVisible()
-    }
+    await expect(tool).toBeVisible()
+    await expect(page.locator('[data-component="collapsed-tool-group"]')).toHaveCount(0)
     await expect(working.locator('[data-component="text-shimmer"]')).toHaveAttribute("aria-label", "Working")
     await expect(working).toBeVisible()
     await expect(working.locator('[data-component="text-shimmer"]')).toHaveAttribute("data-active", "true")
@@ -259,6 +260,7 @@ for (const failed of [false, true]) {
     const editor = page.locator('[data-component="composer"]').getByRole("textbox")
     await expect(editor).toBeEditable()
     await editor.fill("Check the working indicator immediately.")
+    await expect(page.locator('[data-action="composer-submit"]')).toBeEnabled()
     const requested = page.waitForRequest(
       (request) =>
         request.method() === "POST" && new URL(request.url()).pathname === `/api/session/${sessionID}/prompt`,

packages/app/e2e/regression/settings-loading.spec.ts

@@ -32,6 +32,24 @@ test.beforeEach(async ({ page }) => {
   await expect(page.getByTestId("settings-screen").getByRole("tab", { name: "Preferences" })).toBeVisible()
 })
 
+test("settings has its own route and returns through app history", async ({ page }) => {
+  const settings = page.getByTestId("settings-screen")
+  const home = page.getByRole("button", { name: "Home", exact: true })
+  await expect(page).toHaveURL("/settings")
+  await expect(home).toHaveAttribute("aria-pressed", "false")
+  await settings.getByRole("button", { name: "Back to app", exact: true }).click()
+  await expect(page).toHaveURL("/")
+  await expect(home).toHaveAttribute("aria-pressed", "true")
+  await page.keyboard.press("Control+]")
+  await expect(page).toHaveURL("/settings")
+  await expect(settings.getByRole("tab", { name: "Preferences", exact: true })).toBeVisible()
+  await expect(home).toHaveAttribute("aria-pressed", "false")
+  await home.click()
+  await expect(page).toHaveURL("/")
+  await expect(settings).toBeHidden()
+  await expect(home).toHaveAttribute("aria-pressed", "true")
+})
+
 test("workspaces opens without waiting for inventory or sessions", async ({ page }) => {
   const inventory = Promise.withResolvers<void>()
   const sessions = Promise.withResolvers<void>()

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

@@ -29,7 +29,7 @@ test("new session tab matches neighboring session widths", async ({ page }, test
   await page.goto(href)
 
   const tabs = page.locator("[data-titlebar-tab-slot]")
-  await expect(tabs.locator("[data-titlebar-tab-title]")).toHaveText([sessionA.title, "New session", sessionB.title])
+  await expect(tabs.locator("[data-titlebar-tab-title]")).toHaveText([sessionA.title, "Session", sessionB.title])
   await testInfo.attach("new-session-between-tabs", {
     body: await page.locator('[data-slot="titlebar-v2"]').screenshot(),
     contentType: "image/png",
@@ -194,7 +194,7 @@ test("vertical tabs show project details, resize, and navigate", async ({ page }
     .poll(async () => {
       const bounds = await sidebar.boundingBox()
       const button = await status.boundingBox()
-      return !!bounds && !!button && bounds.x + bounds.width - button.x - button.width <= 12
+      return !!bounds && !!button && button.x >= bounds.x && button.x - bounds.x <= 12
     })
     .toBe(true)
   await expect(page.locator('[data-slot="titlebar-v2"]')).toBeHidden()

packages/app/src/composer/editor/editor.css

@@ -2,6 +2,7 @@
   content: "\200B";
 }
 
-[data-color-scheme="dark"] [data-component="composer"][data-dock-border-underlay="true"] {
+[data-color-scheme="dark"] [data-component="composer"][data-dock-border-underlay="true"],
+[data-color-scheme="dark"] [data-component="new-session"] [data-component="composer"] {
   background: var(--v2-background-bg-layer-01);
 }

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

@@ -52,7 +52,7 @@ export function NewSessionView(props: {
     <div class="@container relative flex flex-col min-h-0 h-full flex-1">
       <div
         data-component="new-session"
-        class="relative flex-1 min-h-0 overflow-hidden rounded-[10px] bg-v2-background-bg-deep"
+        class="relative flex-1 min-h-0 overflow-hidden rounded-[10px] bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]"
       >
         <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
           <div class={NEW_SESSION_CONTENT_WIDTH}>

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

@@ -951,6 +951,40 @@ export const dict = {
   "settings.general.section.feed": "Feed",
   "settings.general.section.display": "Display",
 
+  "settings.timeline.title": "Timeline",
+  "settings.timeline.detail": "Timeline detail",
+  "settings.timeline.description": "Choose how much activity appears in the timeline. Messages stay visible.",
+  "settings.timeline.preset.everything": "Everything",
+  "settings.timeline.preset.detailed": "Detailed",
+  "settings.timeline.preset.compact": "Compact",
+  "settings.timeline.preset.quiet": "Quiet",
+  "settings.timeline.preset.text-only": "Text only",
+  "settings.timeline.description.everything": "Show all activity separately. Expand shell output, edits, and thinking.",
+  "settings.timeline.description.detailed":
+    "Expand shell output and edits. Show subagents separately and group other activity in Used.",
+  "settings.timeline.description.compact": "Group all activity in Used with details collapsed.",
+  "settings.timeline.description.quiet": "Group edits and subagents in Used. Hide other activity.",
+  "settings.timeline.description.text-only": "Hide all activity. Show only messages.",
+  "settings.timeline.description.custom": "Use your selected placement and details for each activity category.",
+  "settings.timeline.custom": "Custom",
+  "settings.timeline.advanced": "Advanced",
+  "settings.timeline.advanced.description": "Set placement and details for each activity category.",
+  "settings.timeline.advanced.explainer": "Grouped activity goes into Used. Details applies after opening the group.",
+  "settings.timeline.activity": "Activity",
+  "settings.timeline.category.shell": "Shell",
+  "settings.timeline.category.edit": "Edits",
+  "settings.timeline.category.thinking": "Thinking",
+  "settings.timeline.category.subagents": "Subagents",
+  "settings.timeline.category.notices": "Notices",
+  "settings.timeline.category.tools": "Other tools",
+  "settings.timeline.placement.title": "Placement",
+  "settings.timeline.placement.separate": "Separate",
+  "settings.timeline.placement.grouped": "Grouped",
+  "settings.timeline.placement.hidden": "Hidden",
+  "settings.timeline.expansion.title": "Details",
+  "settings.timeline.expansion.collapsed": "Collapsed",
+  "settings.timeline.expansion.expanded": "Expanded",
+
   "settings.general.row.language.title": "Language",
   "settings.general.row.language.description": "Change the display language for OpenCode",
   "settings.general.row.shell.title": "Terminal shell",

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

@@ -230,8 +230,6 @@ export function createServerSyncContextInner(serverSDK: ServerSDK, data: Data) {
     children.mark(key)
     if (event.type === "config.updated" || event.type === "agent.updated") queue.push(key)
     if (event.type === "worktree.updated") void bootstrap.refetch()
-    if (event.type === "reference.updated" && children.active(key))
-      void data.location.reference.sync({ directory: key }).catch(() => undefined)
   })
 
   onCleanup(unsub)

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

@@ -427,11 +427,15 @@ export function SessionSidePanel(props: {
                           </div>
                         </Tabs.List>
                         <div
-                          class="session-review-v2-open-in-app-slot shrink-0 flex items-center pr-3"
+                          data-slot="session-side-panel-actions"
+                          class="session-review-v2-open-in-app-slot h-12 self-start shrink-0 flex items-center gap-2 pe-3"
                           onPointerDown={(event) => event.stopPropagation()}
                           onClick={(event) => event.stopPropagation()}
                         >
                           <OpenInAppButton directory={projectDirectory} />
+                          <Show when={reviewOpen()}>
+                            <div class="size-7 shrink-0" aria-hidden />
+                          </Show>
                         </div>
                       </div>
 

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

@@ -3,6 +3,28 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { useCommand } from "@/shell/commands/command"
+import { reviewTooltipKeybind } from "@/shell/commands/tooltip-keybind"
+import { useLanguage } from "@/runtime/i18n/language"
+import { useSessionLayout } from "@/session/session-layout"
+
+export function SessionReviewToggle() {
+  const command = useCommand()
+  const language = useLanguage()
+  const { view } = useSessionLayout()
+
+  return (
+    <SessionHeaderActions
+      state={{
+        reviewLabel: language.t("command.review.toggle"),
+        reviewKeybind: reviewTooltipKeybind(command),
+        reviewVisible: true,
+        reviewOpened: view().reviewPanel.opened(),
+        onReviewToggle: () => view().reviewPanel.toggle(),
+      }}
+    />
+  )
+}
 
 export type SessionHeaderActionsState = {
   reviewLabel: string

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

@@ -1,31 +1,19 @@
-import { createMemo, Show } from "solid-js"
+import { Show } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
-import { useCommand } from "@/shell/commands/command"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useSettings } from "@/settings/model"
 import { useSessionLayout } from "@/session/session-layout"
-import { reviewTooltipKeybind } from "@/shell/commands/tooltip-keybind"
 import { StatusPopover } from "@/shell/status/status-popover"
 import { TitlebarRight } from "@/shell/titlebar/right-slot"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { SessionHeaderActions, type SessionHeaderActionsState } from "./session-header-actions"
 
 export function SessionHeader() {
-  const command = useCommand()
   const language = useLanguage()
   const settings = useSettings()
   const { view } = useSessionLayout()
 
   const isDesktop = createMediaQuery("(min-width: 768px)")
 
-  const actions = createMemo<SessionHeaderActionsState>(() => ({
-    reviewLabel: language.t("command.review.toggle"),
-    reviewKeybind: reviewTooltipKeybind(command),
-    reviewVisible: isDesktop(),
-    reviewOpened: view().reviewPanel.opened(),
-    onReviewToggle: () => view().reviewPanel.toggle(),
-  }))
-
   return (
     <>
       <TitlebarRight>
@@ -35,7 +23,9 @@ export function SessionHeader() {
           </Tooltip>
         </Show>
       </TitlebarRight>
-      <SessionHeaderActions state={actions()} />
+      <Show when={isDesktop() && !view().reviewPanel.opened()}>
+        <div class="size-7 shrink-0" aria-hidden />
+      </Show>
     </>
   )
 }

packages/app/src/session/screen.tsx

@@ -28,6 +28,7 @@ import { SessionContextTab } from "./files/session-context-tab"
 import { createSessionTimelineInteraction } from "./timeline/interaction"
 import { ActiveSessionComposerRegion, createActiveSessionRegion } from "./composer/region"
 import { SessionIdentityHeader } from "./session-identity-header"
+import { SessionReviewToggle } from "./header/session-header-actions"
 import { createAnimatedPresence } from "@/runtime/animated-presence"
 
 const SessionMobileFiles = lazy(async () => {
@@ -274,6 +275,12 @@ export function SessionScreen(props: { session: SessionModel }) {
     <>
       <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)]">
         <div ref={screen.panel.ref} class="relative flex-1 min-h-0 flex flex-col md:flex-row gap-2">
+          {/* Both headers reserve a slot for this control, outside their width animations. */}
+          <Show when={isDesktop() && messagesReady() && session.identity.params.id}>
+            <div class="absolute end-3 top-2.5 z-30" data-slot="session-review-toggle">
+              <SessionReviewToggle />
+            </div>
+          </Show>
           <div
             classList={{
               "@container relative z-10 min-w-0 shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none transition-[width]":

packages/app/src/session/timeline/controller-projection.test.ts

@@ -3,6 +3,7 @@ import type { SessionInboxInfo, SessionMessageInfo } from "@opencode-ai/client/p
 import { createRoot } from "solid-js"
 import { applyTimelineMessageHandoff, visibleTimelineMessages } from "./controller-projection"
 import { createTimelineProjection } from "./projection"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 
 const messages = [
   { id: "msg_1", type: "user", text: "first", time: { created: 1 } },
@@ -63,6 +64,7 @@ describe("visibleTimelineMessages", () => {
         reasoningMode: () => "compact",
         shellToolDefaultOpen: () => false,
         editToolDefaultOpen: () => false,
+        timelineDetail: () => timelinePresets[2].value,
         pendingUserMessageIDs: () => new Set([steer.id]),
       })
       expect(projection.activeMessageID()).toBe("msg_1")

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

@@ -21,6 +21,7 @@ import { applyTimelineMessageHandoff, timelineChildTitle, visibleTimelineMessage
 import { createTimelineProjection } from "./projection"
 import { useServer } from "@/runtime/server/current"
 import { getSessionMessageHandoff } from "@/session/handoff"
+import type { ReasoningMode } from "@opencode-ai/session-ui/timeline/projection"
 
 const emptyMessages: SessionMessageInfo[] = []
 const taskDescription = (message: SessionMessageInfo, sessionID: string): string | undefined => {
@@ -101,12 +102,32 @@ export function createTimelineController(input: { session: TimelineSessionSource
     })
   })
   const showHeader = createMemo(() => !!input.session.identity.sessionID())
+  const timelineDetail = createMemo(() => {
+    const detail = settings.general.timelineDetail()
+    return {
+      shell: { ...detail.shell },
+      edit: { ...detail.edit },
+      thinking: { ...detail.thinking },
+      subagents: { ...detail.subagents },
+      notices: { ...detail.notices },
+      tools: { ...detail.tools },
+    }
+  })
+  const reasoningMode = (): ReasoningMode =>
+    timelineDetail().thinking.placement === "hidden"
+      ? "hidden"
+      : timelineDetail().thinking.details === "expanded"
+        ? "full"
+        : "compact"
+  const shellToolPartsExpanded = () => timelineDetail().shell.details === "expanded"
+  const editToolPartsExpanded = () => timelineDetail().edit.details === "expanded"
   const projection = createTimelineProjection({
     sessionMessages: projectedMessages,
     status: input.session.data.status,
-    reasoningMode: settings.general.reasoningMode,
-    shellToolDefaultOpen: settings.general.shellToolPartsExpanded,
-    editToolDefaultOpen: settings.general.editToolPartsExpanded,
+    reasoningMode,
+    shellToolDefaultOpen: shellToolPartsExpanded,
+    editToolDefaultOpen: editToolPartsExpanded,
+    timelineDetail,
     pendingUserMessageIDs,
   })
   const [pending, setPending] = createStore({ rename: false })
@@ -235,9 +256,10 @@ export function createTimelineController(input: { session: TimelineSessionSource
       childTitle,
       showHeader,
       projection,
-      reasoningMode: settings.general.reasoningMode,
-      shellToolPartsExpanded: settings.general.shellToolPartsExpanded,
-      editToolPartsExpanded: settings.general.editToolPartsExpanded,
+      timelineDetail,
+      reasoningMode,
+      shellToolPartsExpanded,
+      editToolPartsExpanded,
     },
     pending: {
       rename: () => pending.rename,

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

@@ -420,6 +420,7 @@ function MessageTimelineView(
   const messageByID = projection.messageByID
   const virtualized = createTimelineVirtualizer({
     sessionKey: () => `${server.key}/${props.data.sessionID()}`,
+    presentationKey: () => JSON.stringify(props.data.timelineDetail()),
     projection,
     showHeader,
     pinned,
@@ -527,6 +528,7 @@ function MessageTimelineView(
     reasoningMode: props.data.reasoningMode,
     shellToolDefaultOpen: props.data.shellToolPartsExpanded,
     editToolDefaultOpen: props.data.editToolPartsExpanded,
+    timelineDetail: props.data.timelineDetail,
     disclosure: virtualized.disclosure,
     centered: () => props.centered,
     padding: turnPadding,

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

@@ -21,7 +21,7 @@ import {
   type Accessor,
   type JSX,
 } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, reconcile } from "solid-js/store"
 import { createMediaQuery } from "@solid-primitives/media"
 import type { createTimelineProjection } from "./projection"
 import { observeElementOffsetReconnectAware } from "./observe-element-offset"
@@ -33,7 +33,15 @@ const pendingMarkdown = '[data-component="markdown"]:not([data-markdown-ready])'
 // exactly to the end, while a one-pixel nudge upward is a deliberate move away from it.
 const endEpsilon = 0.5
 const upwardKeys = new Set(["up", "page-up", "home"])
-const cache = new Map<string, { measurements: VirtualItem[]; toolOpen: Record<string, boolean | undefined> }>()
+const cache = new Map<
+  string,
+  {
+    measurements: VirtualItem[]
+    toolOpen: Record<string, boolean | undefined>
+    patchGroupKeys: Map<string, string>
+    presentationKey?: string
+  }
+>()
 
 type Projection = Pick<
   ReturnType<typeof createTimelineProjection>,
@@ -42,6 +50,7 @@ type Projection = Pick<
 
 type Input = {
   sessionKey: Accessor<string>
+  presentationKey?: Accessor<string>
   projection: Projection
   showHeader: Accessor<boolean>
   /** True while the timeline follows the newest content. Drives every anchoring decision. */
@@ -77,11 +86,20 @@ export function createTimelineVirtualizer(input: Input) {
   const isDesktop = createMediaQuery("(min-width: 768px)")
   const topOffset = () => (input.showHeader() ? 64 : isDesktop() ? 0 : 16)
   const ownerSessionKey = input.sessionKey()
-  const cached = cache.get(ownerSessionKey)
+  const entry = cache.get(ownerSessionKey)
+  const cached = entry?.presentationKey === input.presentationKey?.() ? entry : undefined
   const initialMeasurements = cached?.measurements
   const coldBottomMount = !initialMeasurements?.length && input.pinned()
   const [listRoot, setListRoot] = createSignal<HTMLDivElement>()
   const [toolOpen, setToolOpen] = createStore<Record<string, boolean | undefined>>(cached?.toolOpen ?? {})
+  const patchGroupKeys = cached?.patchGroupKeys ?? new Map<string, string>()
+  createEffect(
+    on(
+      () => input.presentationKey?.(),
+      () => setToolOpen(reconcile({})),
+      { defer: true },
+    ),
+  )
   const [rendering, setRendering] = createStore({ initialTail: coldBottomMount })
   const rows = input.projection.rows
   const rowByKey = input.projection.rowByKey
@@ -189,7 +207,8 @@ export function createTimelineVirtualizer(input: Input) {
     },
     scrollEndThreshold: 80,
     get scrollMargin() {
-      return topOffset()
+      // Empty projections still need the bottom spacer for running status.
+      return rows().length > 0 ? topOffset() : 0
     },
     paddingEnd: 64,
     get rangeExtractor() {
@@ -540,15 +559,13 @@ export function createTimelineVirtualizer(input: Input) {
             }}
           >
             <For each={virtualRowKeys()}>{(rowKey) => <VirtualRow rowKey={rowKey} />}</For>
-            <Show when={rows().length > 0}>
-              <div
-                data-timeline-row="bottom-spacer"
-                class="h-16 absolute top-0 left-0 w-full"
-                style={{ transform: `translateY(${virtualizer.getTotalSize() - 64}px)` }}
-              >
-                {props.bottomSpacer}
-              </div>
-            </Show>
+            <div
+              data-timeline-row="bottom-spacer"
+              class="h-16 absolute top-0 left-0 w-full"
+              style={{ transform: `translateY(${virtualizer.getTotalSize() - 64}px)` }}
+            >
+              {props.bottomSpacer}
+            </div>
           </div>
         </ScrollView>
       </div>
@@ -557,7 +574,12 @@ export function createTimelineVirtualizer(input: Input) {
 
   onCleanup(() => {
     cache.delete(ownerSessionKey)
-    cache.set(ownerSessionKey, { measurements: virtualizer.takeSnapshot(), toolOpen: { ...toolOpen } })
+    cache.set(ownerSessionKey, {
+      measurements: virtualizer.takeSnapshot(),
+      toolOpen: { ...toolOpen },
+      patchGroupKeys,
+      presentationKey: input.presentationKey?.(),
+    })
     while (cache.size > 16) cache.delete(cache.keys().next().value!)
     coldPending = false
     contentObserver?.disconnect()
@@ -569,6 +591,7 @@ export function createTimelineVirtualizer(input: Input) {
 
   return {
     disclosure: {
+      patchGroupKeys,
       value: (key: string) => toolOpen[key],
       set: (key: string, open: boolean) => setToolOpen(key, open),
     },

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

@@ -4,7 +4,7 @@ import { Button } from "@opencode-ai/ui/button"
 import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
 import { TextInput } from "@opencode-ai/ui/text-input"
-import type { ReasoningMode } from "@opencode-ai/session-ui/timeline/projection"
+import { TimelineDetailControl } from "@/settings/timeline-detail"
 import { useLanguage } from "@/runtime/i18n/language"
 import { usePlatform } from "@/runtime/platform/platform"
 import { useUpdaterAction } from "@/shell/updates/action"
@@ -184,34 +184,6 @@ const FollowUpBehaviorSetting: Component = () => {
   )
 }
 
-const ReasoningModeSetting: Component = () => {
-  const language = useLanguage()
-  const settings = useSettings()
-  const options = createMemo((): { value: ReasoningMode; label: string }[] => [
-    { value: "hidden", label: language.t("settings.general.row.reasoningMode.hidden") },
-    { value: "compact", label: language.t("settings.general.row.reasoningMode.compact") },
-    { value: "full", label: language.t("settings.general.row.reasoningMode.full") },
-  ])
-
-  return (
-    <SettingsRow
-      title={language.t("settings.general.row.reasoningMode.title")}
-      description={language.t("settings.general.row.reasoningMode.description")}
-    >
-      <Select
-        data-action="settings-reasoning-mode"
-        options={options()}
-        current={options().find((option) => option.value === settings.general.reasoningMode())}
-        value={(option) => option.value}
-        label={(option) => option.label}
-        placement="bottom-end"
-        gutter={6}
-        onSelect={(option) => option && settings.general.setReasoningMode(option.value)}
-      />
-    </SettingsRow>
-  )
-}
-
 const AppearanceSection: Component<{ controller: AppearanceSettingsController }> = (props) => {
   const language = useLanguage()
   return (
@@ -360,8 +332,6 @@ export const SettingsGeneral: Component<{
         <TerminalPlacementSetting />
         <FollowUpBehaviorSetting />
 
-        <ReasoningModeSetting />
-
         <SettingsRow
           title={language.t("session.review.wrapLines")}
           description={language.t("settings.general.row.mobileDiffWrap.description")}
@@ -378,30 +348,6 @@ export const SettingsGeneral: Component<{
           </div>
         </SettingsRow>
 
-        <SettingsRow
-          title={language.t("settings.general.row.shellToolPartsExpanded.title")}
-          description={language.t("settings.general.row.shellToolPartsExpanded.description")}
-        >
-          <div data-action="settings-feed-shell-tool-parts-expanded">
-            <Switch
-              checked={settings.general.shellToolPartsExpanded()}
-              onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
-            />
-          </div>
-        </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.editToolPartsExpanded.title")}
-          description={language.t("settings.general.row.editToolPartsExpanded.description")}
-        >
-          <div data-action="settings-feed-edit-tool-parts-expanded">
-            <Switch
-              checked={settings.general.editToolPartsExpanded()}
-              onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
-            />
-          </div>
-        </SettingsRow>
-
         <Show when={import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
           <SettingsRow
             title={language.t("settings.general.row.showProjectIcon.title")}
@@ -585,6 +531,18 @@ export const SettingsGeneral: Component<{
       <div class="settings-tab-body">
         <GeneralSection />
 
+        <section class="settings-section" aria-label={language.t("settings.timeline.title")}>
+          <h3 class="settings-section-title">{language.t("settings.timeline.title")}</h3>
+          <SettingsList>
+            <div class="py-5">
+              <TimelineDetailControl
+                value={settings.general.timelineDetail()}
+                onChange={settings.general.setTimelineDetail}
+              />
+            </div>
+          </SettingsList>
+        </section>
+
         <Show when={desktop()}>
           <UpdatesSection />
         </Show>

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

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { Schema } from "effect"
+import { timelinePresets } from "@opencode-ai/session-ui/timeline/detail"
 import { Persistence } from "@/runtime/persistence/schema"
 import {
   settingsSchema,
@@ -16,54 +17,19 @@ const schema = Persistence.withInitial(settingsPersistence, defaultSettings)
 const decode = Schema.decodeUnknownSync(schema)
 const encode = Schema.encodeSync(schema)
 
-describe("settings reasoning mode migration", () => {
-  test.each([
-    [true, "full"],
-    [false, "compact"],
-  ] as const)("maps persisted reasoning summaries %s to %s", (showReasoningSummaries, reasoningMode) => {
-    const value = { general: { showReasoningSummaries, showTerminal: true }, appearance: { fontSize: 16 } }
-    const settings = decode(value)
-    expect(settings.general.reasoningMode).toBe(reasoningMode)
-    expect(settings.general.showTerminal).toBe(true)
+describe("settings timeline detail migration", () => {
+  test("migrates saved switches and round trips the current settings", () => {
+    const settings = decode({
+      general: { shellToolPartsExpanded: true, editToolPartsExpanded: false, showReasoningSummaries: true },
+      appearance: { fontSize: 16 },
+    })
+    expect(settings.general.timelineDetail).toEqual({
+      ...timelinePresets[2].value,
+      shell: { placement: "separate", details: "expanded" },
+      thinking: { placement: "separate", details: "expanded" },
+    })
     expect(settings.appearance.fontSize).toBe(16)
-    expect(settings.general).not.toHaveProperty("showReasoningSummaries")
-    expect(value.general).not.toHaveProperty("reasoningMode")
-  })
-
-  test.each(["hidden", "compact", "full"])(
-    "preserves an explicit %s mode over either legacy value",
-    (reasoningMode) => {
-      ;[true, false].forEach((showReasoningSummaries) => {
-        const value = { general: { reasoningMode, showReasoningSummaries } }
-        expect(decode(value).general.reasoningMode).toBe(reasoningMode)
-      })
-    },
-  )
-
-  test.each([undefined, null, {}, { showReasoningSummaries: "true" }])(
-    "defaults invalid or absent legacy settings: %j",
-    (general) => {
-      expect(decode({ general }).general.reasoningMode).toBe("compact")
-    },
-  )
-
-  test("migrates an undefined current mode but defaults an invalid current mode", () => {
-    expect(decode({ general: { reasoningMode: undefined, showReasoningSummaries: true } }).general.reasoningMode).toBe(
-      "full",
-    )
-    expect(decode({ general: { reasoningMode: "invalid", showReasoningSummaries: true } }).general.reasoningMode).toBe(
-      "compact",
-    )
-  })
-
-  test("encodes only the current format and round trips migrated settings", () => {
-    const settings = decode({ general: { showReasoningSummaries: true, obsolete: true }, obsolete: true })
-    const encoded = encode(settings)
-    expect(encoded).toEqual(settings)
-    expect(encoded).not.toHaveProperty("obsolete")
-    expect(encoded).not.toHaveProperty("general.obsolete")
-    expect(encoded).not.toHaveProperty("general.showReasoningSummaries")
-    expect(decode(encoded)).toEqual(settings)
+    expect(decode(encode(settings))).toEqual(settings)
   })
 })
 
@@ -71,13 +37,16 @@ describe("settings schema", () => {
   test("uses the supplied initial values independently of the current schema", () => {
     const initial = {
       ...defaultSettings,
-      general: { ...defaultSettings.general, reasoningMode: "hidden" as const, autoSave: false },
+      general: { ...defaultSettings.general, timelineDetail: timelinePresets[4].value, autoSave: false },
       appearance: { ...defaultSettings.appearance, fontSize: 20 },
     }
     const restore = Schema.decodeUnknownSync(Persistence.withInitial(settingsPersistence, initial))
     expect(restore({})).toEqual(initial)
     expect(restore({ general: { reasoningMode: "invalid", showReasoningSummaries: true } })).toEqual(initial)
-    expect(restore({ general: { showReasoningSummaries: true } }).general.reasoningMode).toBe("full")
+    expect(restore({ general: { showReasoningSummaries: true } }).general.timelineDetail.thinking).toEqual({
+      placement: "separate",
+      details: "expanded",
+    })
     expect(() => Schema.decodeUnknownSync(settingsSchema)({})).toThrow()
   })
 
@@ -92,9 +61,7 @@ describe("settings schema", () => {
         showStatus: false,
         showProjectIcon: false,
         showTerminal: false,
-        reasoningMode: "compact",
-        shellToolPartsExpanded: false,
-        editToolPartsExpanded: false,
+        timelineDetail: timelinePresets[2].value,
         showCustomAgents: false,
         mobileTitlebarPosition: "top",
         mobileDiffWrap: true,
@@ -144,7 +111,7 @@ describe("settings schema", () => {
       showTerminal: true,
       autoSave: false,
       releaseNotes: true,
-      reasoningMode: "compact",
+      timelineDetail: timelinePresets[2].value,
       followUpBehavior: "steer",
     })
     expect(settings.appearance).toEqual({

packages/app/src/settings/model.tsx

@@ -1,8 +1,8 @@
-import { reconcile } from "solid-js/store"
+import { reconcile, unwrap } from "solid-js/store"
 import { createEffect, createMemo } from "solid-js"
 import { Effect, Option, Schema, SchemaGetter } from "effect"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import type { ReasoningMode } from "@opencode-ai/session-ui/timeline/projection"
+import { timelinePresets, type TimelineCategory, type TimelineDetail } from "@opencode-ai/session-ui/timeline/detail"
 import { persisted } from "@/runtime/persistence/storage"
 import { Persistence } from "@/runtime/persistence/schema"
 import { ScopedKey, type ServerScope } from "@/runtime/server/scope"
@@ -68,7 +68,10 @@ export function terminalFontFamily(font: string | undefined) {
   return stack(font, terminalBase)
 }
 
-const reasoningModeSchema = Schema.Literals(["hidden", "compact", "full"])
+const placementSchema = Schema.Literals(["separate", "grouped", "hidden"])
+const detailsSchema = Schema.Literals(["collapsed", "expanded"])
+const activitySchema = Persistence.struct({ placement: placementSchema, details: detailsSchema })
+const placementOnlySchema = Persistence.struct({ placement: placementSchema })
 
 const generalSchema = Persistence.struct({
   autoSave: Schema.Boolean,
@@ -79,9 +82,14 @@ const generalSchema = Persistence.struct({
   showStatus: Schema.Boolean,
   showProjectIcon: Schema.Boolean,
   showTerminal: Schema.Boolean,
-  reasoningMode: reasoningModeSchema,
-  shellToolPartsExpanded: Schema.Boolean,
-  editToolPartsExpanded: Schema.Boolean,
+  timelineDetail: Persistence.struct({
+    shell: activitySchema,
+    edit: activitySchema,
+    thinking: activitySchema,
+    subagents: placementOnlySchema,
+    notices: placementOnlySchema,
+    tools: placementOnlySchema,
+  }),
   showCustomAgents: Schema.Boolean,
   mobileTitlebarPosition: Schema.Literals(["top", "bottom"]),
   mobileDiffWrap: Schema.Boolean,
@@ -134,25 +142,91 @@ export const settingsSchema = Persistence.struct({
   sounds: soundsSchema,
 })
 
+function storedTimelineCategory(category: TimelineCategory) {
+  return Persistence.optional(
+    Schema.Union([
+      Schema.Struct({
+        placement: Persistence.optional(placementSchema),
+        details: Persistence.optional(detailsSchema),
+      }),
+      Schema.Literals(["expanded", "collapsed", "hidden", "visible"]),
+    ]).pipe(
+      Schema.decode({
+        decode: SchemaGetter.transform((value) => {
+          if (typeof value !== "string") return value
+          return {
+            placement:
+              value === "hidden"
+                ? "hidden"
+                : category === "subagents"
+                  ? "separate"
+                  : category === "tools"
+                    ? "grouped"
+                    : value === "expanded"
+                      ? "separate"
+                      : value === "collapsed"
+                        ? "grouped"
+                        : undefined,
+            details: value === "expanded" ? "expanded" : "collapsed",
+          }
+        }),
+        encode: SchemaGetter.passthrough(),
+      }),
+    ),
+  )
+}
+
+function legacyTimelineActivity(value: boolean | "hidden" | "compact" | "full" | null | undefined) {
+  if (value === undefined || value === null) return
+  const expanded = value === true || value === "full"
+  return {
+    placement: value === "hidden" ? "hidden" : expanded ? "separate" : "grouped",
+    details: expanded ? "expanded" : "collapsed",
+  } as const
+}
+
 export const settingsPersistence = Persistence.migrate(
   settingsSchema,
   Schema.Struct({
     general: Persistence.optional(
       Schema.Struct({
-        reasoningMode: Schema.optional(Schema.Unknown),
+        // Keep invalid explicit values distinct from absent values so legacy preferences cannot replace them.
+        timelineDetail: Schema.optional(
+          Schema.NullOr(
+            Schema.Struct({
+              shell: storedTimelineCategory("shell"),
+              edit: storedTimelineCategory("edit"),
+              thinking: storedTimelineCategory("thinking"),
+              subagents: storedTimelineCategory("subagents"),
+              notices: storedTimelineCategory("notices"),
+              tools: storedTimelineCategory("tools"),
+            }),
+          ),
+        ).pipe(Schema.catchDecoding(() => Effect.succeed(Option.some(null)))),
+        reasoningMode: Schema.optional(Schema.NullOr(Schema.Literals(["hidden", "compact", "full"]))).pipe(
+          Schema.catchDecoding(() => Effect.succeed(Option.some(null))),
+        ),
         showReasoningSummaries: Persistence.optional(Schema.Boolean),
+        shellToolPartsExpanded: Persistence.optional(Schema.Boolean),
+        editToolPartsExpanded: Persistence.optional(Schema.Boolean),
       }),
     ),
   }).pipe(
     Schema.decode({
       decode: SchemaGetter.transform((value) => {
-        if (value.general?.reasoningMode !== undefined || value.general?.showReasoningSummaries === undefined)
-          return value
+        const general = value.general
+        if (!general || general.timelineDetail !== undefined) return value
         return {
           ...value,
           general: {
-            ...value.general,
-            reasoningMode: value.general.showReasoningSummaries ? "full" : "compact",
+            ...general,
+            timelineDetail: {
+              shell: legacyTimelineActivity(general.shellToolPartsExpanded),
+              edit: legacyTimelineActivity(general.editToolPartsExpanded),
+              thinking: legacyTimelineActivity(
+                general.reasoningMode === undefined ? general.showReasoningSummaries : general.reasoningMode,
+              ),
+            },
           },
         }
       }),
@@ -171,9 +245,7 @@ export const defaultSettings: Settings = {
     showStatus: false,
     showProjectIcon: false,
     showTerminal: false,
-    reasoningMode: "compact",
-    shellToolPartsExpanded: false,
-    editToolPartsExpanded: false,
+    timelineDetail: { ...timelinePresets[2].value },
     showCustomAgents: false,
     mobileTitlebarPosition: "top",
     mobileDiffWrap: true,
@@ -256,23 +328,9 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setShowTerminal(value: boolean) {
           setStore("general", "showTerminal", value)
         },
-        reasoningMode: withFallback(() => store.general?.reasoningMode, defaultSettings.general.reasoningMode),
-        setReasoningMode(value: ReasoningMode) {
-          setStore("general", "reasoningMode", value)
-        },
-        shellToolPartsExpanded: withFallback(
-          () => store.general?.shellToolPartsExpanded,
-          defaultSettings.general.shellToolPartsExpanded,
-        ),
-        setShellToolPartsExpanded(value: boolean) {
-          setStore("general", "shellToolPartsExpanded", value)
-        },
-        editToolPartsExpanded: withFallback(
-          () => store.general?.editToolPartsExpanded,
-          defaultSettings.general.editToolPartsExpanded,
-        ),
-        setEditToolPartsExpanded(value: boolean) {
-          setStore("general", "editToolPartsExpanded", value)
+        timelineDetail: withFallback(() => store.general?.timelineDetail, defaultSettings.general.timelineDetail),
+        setTimelineDetail(value: TimelineDetail) {
+          setStore("general", "timelineDetail", structuredClone(unwrap(value)))
         },
         showCustomAgents,
         setShowCustomAgents(value: boolean) {

packages/app/src/settings/settings.css

@@ -7,13 +7,17 @@
 
 .settings-screen {
   display: flex;
-  width: 100%;
-  height: 100%;
+  flex: 1;
+  width: calc(100% - 16px);
   min-width: 0;
   min-height: 0;
+  margin-inline: 8px;
+  margin-block: var(--shell-top-inset, 8px) var(--shell-bottom-inset, 8px);
   justify-content: center;
   overflow: hidden;
-  background: var(--v2-background-bg-deep);
+  border-radius: 10px;
+  background: var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-raised);
   outline: none;
   container: settings-screen / inline-size;
 }
@@ -27,7 +31,7 @@
 @media (max-width: 767px) {
   .settings-screen {
     --settings-mobile-inner-inset: 8px;
-    padding-block: var(--settings-top-inset, var(--shell-top-inset, 8px)) var(--shell-bottom-inset, 8px);
+    margin-block-start: var(--settings-top-inset, var(--shell-top-inset, 8px));
   }
 }
 
@@ -51,7 +55,7 @@
 
 .settings-screen .settings-tab-header {
   padding: 48px 0 32px;
-  background: linear-gradient(to bottom, var(--v2-background-bg-deep) calc(100% - 24px), transparent);
+  background: linear-gradient(to bottom, var(--v2-background-bg-base) calc(100% - 24px), transparent);
 }
 
 .settings-screen .settings-tab-body {
@@ -349,7 +353,7 @@
     gap: 16px;
     padding: 8px var(--settings-mobile-inner-inset, 16px);
     border-bottom: 0.5px solid var(--v2-border-border-muted);
-    background: var(--v2-background-bg-deep);
+    background: var(--v2-background-bg-base);
   }
 
   .settings-mobile-nav::after {
@@ -358,7 +362,7 @@
     inset-inline: 0;
     inset-block-start: 100%;
     height: 1px;
-    background: var(--v2-background-bg-deep);
+    background: var(--v2-background-bg-base);
     pointer-events: none;
   }
 

packages/app/src/settings/shell.tsx

@@ -1,14 +1,4 @@
-import {
-  Component,
-  createEffect,
-  createMemo,
-  createSignal,
-  For,
-  Show,
-  onCleanup,
-  onMount,
-  startTransition,
-} from "solid-js"
+import { Component, createEffect, createMemo, For, Show, onCleanup, onMount, startTransition } from "solid-js"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Menu } from "@opencode-ai/ui/menu"
@@ -54,9 +44,7 @@ const sections = [
   ],
 ] as const
 
-export const SettingsScreen: Component<{
-  defaultValue?: string
-}> = (props) => {
+export const SettingsScreen: Component = () => {
   const language = useLanguage()
   const platform = usePlatform()
   const dialog = useDialog()
@@ -66,7 +54,6 @@ export const SettingsScreen: Component<{
   const servers = useServers()
   const tabs = useTabs()
   const global = useGlobal()
-  const [tab, setTab] = createSignal(props.defaultValue ?? "general")
   let root: HTMLDivElement | undefined
 
   onMount(() => {
@@ -75,10 +62,8 @@ export const SettingsScreen: Component<{
   })
   onCleanup(() => command.keybinds(true))
 
-  createEffect(() => setTab(props.defaultValue ?? "general"))
-
   const server = createMemo(() => {
-    const route = layout.route()
+    const route = surface.route()
     switch (route.type) {
       case "draft": {
         const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
@@ -101,7 +86,7 @@ export const SettingsScreen: Component<{
     const selected = global.settings.server.selected()
     const current = server()
     if (!selected || !current || ServerConnection.key(selected) !== ServerConnection.key(current)) return
-    const route = layout.route()
+    const route = surface.route()
     if (route.type === "draft") {
       const draft = tabs.store.find((item) => item.type === "draft" && item.draftID === route.draftID)
       return draft?.type === "draft" ? draft.directory : undefined
@@ -112,7 +97,7 @@ export const SettingsScreen: Component<{
 
   const showProviders = () => {
     dialog.close()
-    setTab("providers")
+    surface.open("providers")
   }
 
   return (
@@ -130,8 +115,8 @@ export const SettingsScreen: Component<{
       <Tabs
         orientation="vertical"
         variant="settings"
-        value={tab()}
-        onChange={(value) => void startTransition(() => setTab(value))}
+        value={surface.tab()}
+        onChange={(value) => void startTransition(() => surface.open(value))}
         class="settings"
       >
         <div class="settings-mobile-nav">
@@ -143,14 +128,18 @@ export const SettingsScreen: Component<{
             <Menu.Trigger as={Button} size="normal" variant="outline" class="settings-mobile-menu-trigger">
               <span>
                 {language.t(
-                  sections.flat().find((section) => section.value === tab())?.label ?? "settings.tab.preferences",
+                  sections.flat().find((section) => section.value === surface.tab())?.label ??
+                    "settings.tab.preferences",
                 )}
               </span>
               <Icon name="chevron-down" size="small" />
             </Menu.Trigger>
             <Menu.Portal>
               <Menu.Content class="settings-mobile-menu" onEscapeKeyDown={(event) => event.stopPropagation()}>
-                <Menu.RadioGroup value={tab()} onChange={(value) => void startTransition(() => setTab(value))}>
+                <Menu.RadioGroup
+                  value={surface.tab()}
+                  onChange={(value) => void startTransition(() => surface.open(value))}
+                >
                   <For each={sections}>
                     {(group, index) => (
                       <>

packages/app/src/settings/surface.tsx

@@ -1,32 +1,52 @@
-import { useLocation } from "@solidjs/router"
+import { useLocation, useNavigate } from "@solidjs/router"
 import { createEffect, on } from "solid-js"
-import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
+import { useLayout, type LayoutRoute } from "@/shell/state/layout"
+import { useCommand } from "@/shell/commands/command"
 
 export const { use: useSettingsSurface, provider: SettingsSurfaceProvider } = createSimpleContext({
   name: "SettingsSurface",
   gate: false,
   init: () => {
-    const location = useLocation()
-    const [store, setStore] = createStore({ open: false, tab: "general" })
+    const navigate = useNavigate()
+    const layout = useLayout()
+    const command = useCommand()
+    const location = useLocation<{
+      settings?: { route: Exclude<LayoutRoute, { type: "settings" }>; tab: string }
+    }>()
+    const open = () => layout.route().type === "settings"
+    const source = () => location.state?.settings?.route ?? { type: "home" as const }
     let focus: HTMLElement | undefined
 
-    const close = () => {
-      if (!store.open) return
-      setStore("open", false)
-      if (focus?.isConnected) focus.focus({ preventScroll: true })
-      focus = undefined
-    }
-
-    createEffect(on(() => `${location.pathname}${location.search}`, close, { defer: true }))
+    createEffect(
+      on(
+        open,
+        (value) => {
+          if (value) return
+          if (focus?.isConnected) focus.focus({ preventScroll: true })
+          focus = undefined
+        },
+        { defer: true },
+      ),
+    )
 
     return {
-      store,
+      active: open,
+      route: source,
+      tab: () => location.state?.settings?.tab ?? "general",
       open(tab = "general") {
-        if (!store.open && document.activeElement instanceof HTMLElement) focus = document.activeElement
-        setStore({ open: true, tab })
+        const route = layout.route()
+        if (route.type !== "settings") {
+          if (document.activeElement instanceof HTMLElement) focus = document.activeElement
+        }
+        navigate("/settings", {
+          replace: open(),
+          state: { settings: { route: route.type === "settings" ? source() : route, tab } },
+        })
+      },
+      close() {
+        if (open()) command.trigger("common.goBack")
       },
-      close,
     }
   },
 })

packages/app/src/settings/timeline-detail.css

@@ -0,0 +1,249 @@
+[data-component="timeline-detail-control"] {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--v2-text-text-base);
+  font-size: 13px;
+  line-height: var(--line-height-base);
+  letter-spacing: -0.04px;
+  container: timeline-detail / inline-size;
+
+  [data-slot="timeline-detail-heading"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 24px;
+    font-weight: 530;
+    line-height: var(--line-height-compact);
+  }
+
+  [data-slot="timeline-detail-current"] {
+    color: var(--v2-text-text-muted);
+    text-align: end;
+  }
+
+  p {
+    margin: 0;
+    color: var(--v2-text-text-muted);
+  }
+
+  [data-slot="timeline-detail-scale"] {
+    position: relative;
+    height: 28px;
+  }
+
+  [data-slot="timeline-detail-track"] {
+    position: absolute;
+    inset-inline: 8px;
+    top: 12px;
+    height: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 2px;
+    background: var(--v2-background-bg-layer-03);
+    pointer-events: none;
+
+    span {
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: var(--v2-border-border-strong);
+    }
+  }
+
+  input[type="range"] {
+    appearance: none;
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 28px;
+    margin: 0;
+    background: transparent;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:focus-visible {
+      outline: 2px solid var(--v2-border-border-focus);
+      outline-offset: 2px;
+    }
+
+    &::-webkit-slider-runnable-track {
+      height: 4px;
+      background: transparent;
+    }
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 16px;
+      height: 16px;
+      margin-top: -6px;
+      border: 1px solid var(--v2-border-border-base);
+      border-radius: 50%;
+      background: var(--v2-background-bg-base);
+      box-shadow: var(--v2-elevation-button-neutral);
+    }
+
+    &::-moz-range-track {
+      height: 4px;
+      background: transparent;
+    }
+
+    &::-moz-range-thumb {
+      box-sizing: border-box;
+      width: 16px;
+      height: 16px;
+      border: 1px solid var(--v2-border-border-base);
+      border-radius: 50%;
+      background: var(--v2-background-bg-base);
+      box-shadow: var(--v2-elevation-button-neutral);
+    }
+  }
+
+  [data-slot="timeline-detail-advanced"] {
+    margin-top: 4px;
+    padding-top: 8px;
+    border-top: 0.5px solid var(--v2-border-border-base);
+  }
+
+  [data-slot="timeline-detail-advanced"] > [data-slot="collapsible-trigger"] {
+    width: fit-content;
+    height: 28px;
+    align-self: flex-start;
+    gap: 6px;
+    font-size: inherit;
+    font-weight: 530;
+    line-height: var(--line-height-compact);
+    letter-spacing: inherit;
+    color: var(--v2-text-text-muted);
+
+    [data-slot="collapsible-arrow"] {
+      width: 16px;
+    }
+
+    &:focus-visible [data-slot="collapsible-arrow"] {
+      opacity: 1;
+    }
+
+    &:dir(rtl):not([aria-expanded="true"]) [data-slot="collapsible-arrow-icon"] {
+      transform: rotate(90deg);
+    }
+  }
+
+  [data-slot="timeline-detail-categories"] {
+    --timeline-detail-columns: minmax(0, 1fr) 100px 108px;
+    display: flex;
+    flex-direction: column;
+    margin-top: 8px;
+  }
+
+  [data-slot="timeline-detail-explainer"] {
+    margin-bottom: 12px;
+  }
+
+  [data-slot="timeline-detail-field-label"] {
+    display: none;
+  }
+
+  [data-slot="timeline-detail-columns"],
+  [data-slot="timeline-detail-category"] {
+    display: grid;
+    grid-template-columns: var(--timeline-detail-columns);
+    align-items: center;
+    column-gap: 8px;
+    line-height: var(--line-height-compact);
+
+    > span {
+      min-width: 0;
+      overflow-wrap: normal;
+    }
+  }
+
+  [data-slot="timeline-detail-columns"] {
+    min-height: 28px;
+    color: var(--v2-text-text-muted);
+
+    span:not(:first-child) {
+      padding-inline-start: 8px;
+    }
+  }
+
+  [data-slot="timeline-detail-category"] {
+    min-height: 40px;
+    padding-block: 8px;
+    border-bottom: 0.5px solid var(--v2-border-border-base);
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    [data-component="select-v2-root"],
+    [data-slot="timeline-detail-placement"],
+    [data-slot="timeline-detail-expansion"] {
+      min-width: 0;
+    }
+
+    [data-component="select-v2-root"][data-field] {
+      width: 100%;
+    }
+
+    [data-component="select-v2"][data-appearance="inline"] {
+      width: 100%;
+    }
+  }
+}
+
+@container timeline-detail (max-width: 250px) {
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-heading"] {
+    flex-wrap: wrap;
+    gap: 4px 8px;
+  }
+
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-current"] {
+    margin-inline-start: auto;
+  }
+
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-columns"] {
+    display: none;
+  }
+
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-category"] {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: 8px;
+    padding-block: 12px;
+
+    > span {
+      font-weight: 530;
+    }
+  }
+
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-field-label"] {
+    display: block;
+    margin-bottom: 2px;
+    padding-inline-start: 8px;
+    font-size: 12px;
+    line-height: var(--line-height-compact);
+    color: var(--v2-text-text-muted);
+  }
+
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-expansion"]:empty {
+    display: none;
+  }
+}
+
+@container timeline-detail (max-width: 310px) {
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-categories"] {
+    --timeline-detail-columns: minmax(0, 1fr) 90px 96px;
+  }
+
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-columns"],
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-category"] {
+    column-gap: 4px;
+  }
+
+  [data-component="timeline-detail-control"] [data-slot="timeline-detail-category"] {
+    min-height: 48px;
+  }
+}

packages/app/src/settings/timeline-detail.tsx

@@ -0,0 +1,127 @@
+import { For, Show, createMemo, createUniqueId } from "solid-js"
+import { Collapsible } from "@opencode-ai/ui/collapsible"
+import { Select } from "@opencode-ai/ui/select"
+import {
+  timelineCategories,
+  timelinePreset,
+  timelinePresets,
+  type TimelineDetail,
+  type TimelineExpansion,
+  type TimelinePlacement,
+} from "@opencode-ai/session-ui/timeline/detail"
+import { useLanguage } from "@/runtime/i18n/language"
+import "./timeline-detail.css"
+
+const placements: TimelinePlacement[] = ["separate", "grouped", "hidden"]
+const expansions: TimelineExpansion[] = ["collapsed", "expanded"]
+
+export function TimelineDetailControl(props: { value: TimelineDetail; onChange: (value: TimelineDetail) => void }) {
+  const language = useLanguage()
+  const id = createUniqueId()
+  const preset = createMemo(() => timelinePreset(props.value))
+  const position = () => {
+    const current = preset()
+    return current ? timelinePresets.indexOf(current) : 2
+  }
+  const label = () => {
+    const current = preset()
+    return current ? language.t(`settings.timeline.preset.${current.id}`) : language.t("settings.timeline.custom")
+  }
+
+  return (
+    <div data-component="timeline-detail-control">
+      <div data-slot="timeline-detail-heading">
+        <label for={`${id}-slider`}>{language.t("settings.timeline.detail")}</label>
+        <span data-slot="timeline-detail-current" aria-live="polite">
+          {label()}
+        </span>
+      </div>
+      <p id={`${id}-description`} class="sr-only">
+        {language.t("settings.timeline.description")}
+      </p>
+      <div data-slot="timeline-detail-scale">
+        <div data-slot="timeline-detail-track" aria-hidden="true">
+          <For each={timelinePresets}>{() => <span />}</For>
+        </div>
+        <input
+          id={`${id}-slider`}
+          data-action="settings-timeline-detail"
+          type="range"
+          min="0"
+          max={timelinePresets.length - 1}
+          step="1"
+          value={position()}
+          aria-valuetext={label()}
+          aria-describedby={`${id}-description ${id}-preset-description`}
+          onInput={(event) => props.onChange({ ...timelinePresets[event.currentTarget.valueAsNumber].value })}
+        />
+      </div>
+      <p id={`${id}-preset-description`}>{language.t(`settings.timeline.description.${preset()?.id ?? "custom"}`)}</p>
+      <Collapsible variant="ghost" data-slot="timeline-detail-advanced">
+        <Collapsible.Trigger>
+          <span>{language.t("settings.timeline.advanced")}</span>
+          <Collapsible.Arrow />
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <div
+            data-slot="timeline-detail-categories"
+            role="group"
+            aria-label={language.t("settings.timeline.advanced.description")}
+          >
+            <p data-slot="timeline-detail-explainer">{language.t("settings.timeline.advanced.explainer")}</p>
+            <div data-slot="timeline-detail-columns">
+              <span>{language.t("settings.timeline.activity")}</span>
+              <span id={`${id}-placement`}>{language.t("settings.timeline.placement.title")}</span>
+              <span id={`${id}-expansion`}>{language.t("settings.timeline.expansion.title")}</span>
+            </div>
+            <For each={timelineCategories}>
+              {(category) => (
+                <div data-slot="timeline-detail-category" role="group" aria-labelledby={`${id}-${category}`}>
+                  <span id={`${id}-${category}`}>{language.t(`settings.timeline.category.${category}`)}</span>
+                  <div data-slot="timeline-detail-placement">
+                    <span data-slot="timeline-detail-field-label" aria-hidden="true">
+                      {language.t("settings.timeline.placement.title")}
+                    </span>
+                    <Select
+                      data-category={category}
+                      data-field="placement"
+                      aria-labelledby={`${id}-${category} ${id}-placement`}
+                      options={placements}
+                      current={props.value[category].placement}
+                      label={(value) => language.t(`settings.timeline.placement.${value}`)}
+                      onSelect={(placement) =>
+                        placement &&
+                        props.onChange({ ...props.value, [category]: { ...props.value[category], placement } })
+                      }
+                    />
+                  </div>
+                  <div data-slot="timeline-detail-expansion">
+                    {category === "shell" || category === "edit" || category === "thinking" ? (
+                      <Show when={props.value[category].placement !== "hidden"}>
+                        <span data-slot="timeline-detail-field-label" aria-hidden="true">
+                          {language.t("settings.timeline.expansion.title")}
+                        </span>
+                        <Select
+                          data-category={category}
+                          data-field="details"
+                          aria-labelledby={`${id}-${category} ${id}-expansion`}
+                          options={expansions}
+                          current={props.value[category].details}
+                          label={(value) => language.t(`settings.timeline.expansion.${value}`)}
+                          onSelect={(details) =>
+                            details &&
+                            props.onChange({ ...props.value, [category]: { ...props.value[category], details } })
+                          }
+                        />
+                      </Show>
+                    ) : null}
+                  </div>
+                </div>
+              )}
+            </For>
+          </div>
+        </Collapsible.Content>
+      </Collapsible>
+    </div>
+  )
+}

packages/app/src/shell/routes/routes.tsx

@@ -13,6 +13,7 @@ import { requireServerKey } from "./session"
 export const File = lazy(() => import("@opencode-ai/session-ui/file").then((module) => ({ default: module.File })))
 const loadSessionRoute = () => Promise.all([import("@/session/route"), File.preload()]).then(([module]) => module)
 const DraftRoute = lazy(() => import("@/new-session/route").then((module) => ({ default: module.DraftRoute })))
+const SettingsScreen = lazy(() => import("@/settings/shell").then((module) => ({ default: module.SettingsScreen })))
 const TargetSessionRouteContent = lazy(() =>
   loadSessionRoute().then((module) => ({ default: module.TargetSessionRouteContent })),
 )
@@ -20,6 +21,7 @@ const TargetSessionRouteContent = lazy(() =>
 export function preloadRoute(url: string) {
   const pathname = url.split(/[?#]/, 1)[0]
   if (pathname === "/new-session") return DraftRoute.preload().then(() => undefined)
+  if (pathname === "/settings") return SettingsScreen.preload().then(() => undefined)
   if (/^\/server\/[^/]+\/session\/[^/]+$/.test(pathname))
     return TargetSessionRouteContent.preload().then(() => undefined)
   return Promise.resolve()
@@ -29,6 +31,7 @@ export function AppRoutes() {
   return (
     <Route component={AppLayout}>
       <Route path="/" component={Home} />
+      <Route path="/settings" component={SettingsScreen} />
       <Route
         path="/server/:serverKey/session/:id"
         component={() => (

packages/app/src/shell/shell.tsx

@@ -10,7 +10,6 @@ import { useSettingsSurface } from "@/settings/surface"
 import { useSettings } from "@/settings/model"
 
 const DebugBar = lazy(() => import("@/shell/debug/debug-bar").then((module) => ({ default: module.DebugBar })))
-const SettingsScreen = lazy(() => import("@/settings/shell").then((module) => ({ default: module.SettingsScreen })))
 
 export default function Layout(props: ParentProps) {
   const platform = usePlatform()
@@ -86,24 +85,14 @@ export default function Layout(props: ParentProps) {
             class="flex-1 min-h-0 min-w-0 overflow-x-hidden flex flex-col items-start contain-content"
             style={{
               "padding-top": bottomTitlebar() ? "env(safe-area-inset-top, 0px)" : "0px",
-              "padding-bottom": bottomTitlebar() || settings.store.open ? "0px" : "env(safe-area-inset-bottom, 0px)",
+              "padding-bottom": bottomTitlebar() || settings.active() ? "0px" : "env(safe-area-inset-bottom, 0px)",
               "--settings-bottom-inset": bottomTitlebar() ? "40px" : "env(safe-area-inset-bottom, 0px)",
               "--settings-top-inset": mobile() && !bottomTitlebar() ? "0px" : "var(--shell-top-inset, 8px)",
             }}
           >
-            <div
-              class="flex size-full min-h-0 min-w-0 flex-col"
-              hidden={settings.store.open}
-              inert={settings.store.open}
-              aria-hidden={settings.store.open}
-            >
+            <div class="flex size-full min-h-0 min-w-0 flex-col">
               <Suspense>{props.children}</Suspense>
             </div>
-            <Show when={settings.store.open}>
-              <Suspense>
-                <SettingsScreen defaultValue={settings.store.tab} />
-              </Suspense>
-            </Show>
           </main>
         </div>
         <Show when={import.meta.env.DEV && state.debugTools}>

packages/app/src/shell/state/layout.test.ts

@@ -3,9 +3,13 @@ import { createRoot, createSignal } from "solid-js"
 import { Schema } from "effect"
 import { ServerConnection } from "@/runtime/server/registry"
 import { Persistence } from "@/runtime/persistence/schema"
-import { initialLayout, layoutPersistence, layoutSchema } from "./layout"
+import { currentRoute, initialLayout, layoutPersistence, layoutSchema } from "./layout"
 import { createSessionKeyReader, ensureSessionKey, pruneSessionKeys } from "./helpers"
 
+test("settings has its own layout route", () => {
+  expect(currentRoute("/settings", "")).toEqual({ type: "settings" })
+})
+
 describe("layout persistence", () => {
   const schema = Persistence.withInitial(layoutPersistence, initialLayout(ServerConnection.Key.make("local")))
   const decode = Schema.decodeUnknownSync(schema)

packages/app/src/shell/state/layout.tsx

@@ -66,6 +66,7 @@ export type TabPanes = {
 
 export type LayoutRoute =
   | { type: "home" }
+  | { type: "settings" }
   | { type: "draft"; draftID: string }
   | { type: "session"; sessionId: string; server: ServerConnection.Key }
 
@@ -104,6 +105,7 @@ const normalizeStoredSessionTabs = (key: string, tabs: SessionTabs) => {
 export const currentRoute = (pathname: string, search: string): LayoutRoute => {
   const parts = pathname.split("/").filter(Boolean)
   if (parts.length === 0) return { type: "home" }
+  if (parts[0] === "settings") return { type: "settings" }
 
   if (parts[0] === "new-session") {
     const draftID = new URLSearchParams(search).get("draftId")

packages/app/src/shell/titlebar/history.test.ts

@@ -8,56 +8,75 @@ function history(): TitlebarHistory {
 describe("titlebar history", () => {
   test("append and trim keeps max bounded", () => {
     let state = history()
-    state = applyPath(state, "/", 3)
-    state = applyPath(state, "/a", 3)
-    state = applyPath(state, "/b", 3)
-    state = applyPath(state, "/c", 3)
+    state = applyPath(state, { url: "/" }, 3)
+    state = applyPath(state, { url: "/a" }, 3)
+    state = applyPath(state, { url: "/b" }, 3)
+    state = applyPath(state, { url: "/c" }, 3)
 
-    expect(state.stack).toEqual(["/a", "/b", "/c"])
+    expect(state.stack.map((entry) => entry.url)).toEqual(["/a", "/b", "/c"])
     expect(state.stack.length).toBe(3)
     expect(state.index).toBe(2)
   })
 
   test("back and forward indexes stay correct after trimming", () => {
     let state = history()
-    state = applyPath(state, "/", 3)
-    state = applyPath(state, "/a", 3)
-    state = applyPath(state, "/b", 3)
-    state = applyPath(state, "/c", 3)
+    state = applyPath(state, { url: "/" }, 3)
+    state = applyPath(state, { url: "/a" }, 3)
+    state = applyPath(state, { url: "/b" }, 3)
+    state = applyPath(state, { url: "/c" }, 3)
 
-    expect(state.stack).toEqual(["/a", "/b", "/c"])
+    expect(state.stack.map((entry) => entry.url)).toEqual(["/a", "/b", "/c"])
     expect(state.index).toBe(2)
 
     const back = backPath(state)
-    expect(back?.to).toBe("/b")
+    expect(back?.to.url).toBe("/b")
     expect(back?.state.index).toBe(1)
 
     const afterBack = applyPath(back!.state, back!.to, 3)
-    expect(afterBack.stack).toEqual(["/a", "/b", "/c"])
+    expect(afterBack.stack.map((entry) => entry.url)).toEqual(["/a", "/b", "/c"])
     expect(afterBack.index).toBe(1)
 
     const forward = forwardPath(afterBack)
-    expect(forward?.to).toBe("/c")
+    expect(forward?.to.url).toBe("/c")
     expect(forward?.state.index).toBe(2)
 
     const afterForward = applyPath(forward!.state, forward!.to, 3)
-    expect(afterForward.stack).toEqual(["/a", "/b", "/c"])
+    expect(afterForward.stack.map((entry) => entry.url)).toEqual(["/a", "/b", "/c"])
     expect(afterForward.index).toBe(2)
   })
 
   test("action-driven navigation does not push duplicate history entries", () => {
     const state: TitlebarHistory = {
-      stack: ["/", "/a", "/b"],
+      stack: [{ url: "/" }, { url: "/a" }, { url: "/b" }],
       index: 2,
       action: undefined,
     }
 
     const back = backPath(state)
-    expect(back?.to).toBe("/a")
+    expect(back?.to.url).toBe("/a")
 
     const next = applyPath(back!.state, back!.to, 10)
-    expect(next.stack).toEqual(["/", "/a", "/b"])
+    expect(next.stack.map((entry) => entry.url)).toEqual(["/", "/a", "/b"])
     expect(next.index).toBe(1)
     expect(next.action).toBeUndefined()
   })
+
+  test("settings visits retain their own route state", () => {
+    const first = { url: "/settings", state: { settings: { type: "draft", draftID: "a" } } }
+    const second = { url: "/settings", state: { settings: { type: "draft", draftID: "b" } } }
+    const state = applyPath(applyPath(applyPath(history(), first), { url: "/b" }), second)
+    const back = backPath(state)!
+    const previous = backPath(applyPath(back.state, back.to))!
+    expect(previous.to).toEqual(first)
+    expect(forwardPath(applyPath(back.state, back.to))?.to).toEqual(second)
+  })
+
+  test("replacing settings state does not add a back navigation", () => {
+    const initial = applyPath(history(), { url: "/settings", state: { tab: "general" } })
+    const updated = applyPath(initial, { url: "/settings", state: { tab: "models" } })
+    expect(updated.stack).toHaveLength(2)
+    const back = backPath(updated)!
+    expect(back.to.url).toBe("/")
+    expect(forwardPath(applyPath(back.state, back.to))?.to.state).toEqual({ tab: "models" })
+  })
 })

packages/app/src/shell/titlebar/history.ts

@@ -2,22 +2,32 @@ export const MAX_TITLEBAR_HISTORY = 100
 
 export type TitlebarAction = "back" | "forward" | undefined
 
+export type HistoryLocation = { url: string; state?: unknown }
+
 export type TitlebarHistory = {
-  stack: string[]
+  stack: HistoryLocation[]
   index: number
   action: TitlebarAction
 }
 
-export function applyPath(state: TitlebarHistory, current: string, max = MAX_TITLEBAR_HISTORY): TitlebarHistory {
+export function applyPath(
+  state: TitlebarHistory,
+  current: HistoryLocation,
+  max = MAX_TITLEBAR_HISTORY,
+): TitlebarHistory {
   if (!state.stack.length) {
-    const stack = current === "/" ? ["/"] : ["/", current]
+    const stack = current.url === "/" ? [current] : [{ url: "/" }, current]
     return { stack, index: stack.length - 1, action: undefined }
   }
 
   const active = state.stack[state.index]
-  if (current === active) {
-    if (!state.action) return state
-    return { ...state, action: undefined }
+  if (current.url === active.url) {
+    if (!state.action && current.state === active.state) return state
+    return {
+      ...state,
+      stack: state.stack.map((entry, index) => (index === state.index ? current : entry)),
+      action: undefined,
+    }
   }
 
   if (state.action) return { ...state, action: undefined }
@@ -25,13 +35,13 @@ export function applyPath(state: TitlebarHistory, current: string, max = MAX_TIT
   return pushPath(state, current, max)
 }
 
-export function pushPath(state: TitlebarHistory, path: string, max = MAX_TITLEBAR_HISTORY): TitlebarHistory {
+export function pushPath(state: TitlebarHistory, path: HistoryLocation, max = MAX_TITLEBAR_HISTORY): TitlebarHistory {
   const stack = state.stack.slice(0, state.index + 1).concat(path)
   const next = trimHistory(stack, stack.length - 1, max)
   return { ...state, ...next, action: undefined }
 }
 
-export function trimHistory(stack: string[], index: number, max = MAX_TITLEBAR_HISTORY) {
+export function trimHistory(stack: HistoryLocation[], index: number, max = MAX_TITLEBAR_HISTORY) {
   if (stack.length <= max) return { stack, index }
   const cut = stack.length - max
   return {

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

@@ -432,7 +432,20 @@ export function DraftTabItem(props: {
         class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base [-webkit-user-drag:none]"
       >
         <span class="flex size-4 shrink-0 items-center justify-center">
-          <Icon name="edit" />
+          <svg
+            class="text-v2-icon-icon-muted group-data-[active='true']:text-v2-icon-icon-base"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M9.00002 13.5H14M2.60419 10.9167V13.3958H5.08335L13.3959 5.08333L10.9167 2.60416L2.60419 10.9167Z"
+              stroke="currentColor"
+            />
+          </svg>
         </span>
         <span
           data-titlebar-tab-title

packages/app/src/shell/titlebar/tab-strip.tsx

@@ -377,7 +377,7 @@ export function TitlebarTabStrip(props: {
                     index={visibleIndex()}
                     active={props.currentTab === tab}
                     orientation={vertical() ? "vertical" : "horizontal"}
-                    title={language.t("command.session.new")}
+                    title={language.t("session.tab.session")}
                     onNavigate={(element) => {
                       ref = element
                       props.onNavigate(tab, element)

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

@@ -1,5 +1,5 @@
 import { createEffect, createMemo, createResource, Match, Show, Switch, untrack } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, unwrap } from "solid-js/store"
 import { Portal } from "solid-js/web"
 import { useLocation, useNavigate } from "@solidjs/router"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -13,7 +13,7 @@ import { useCommand } from "@/shell/commands/command"
 import { useLanguage } from "@/runtime/i18n/language"
 import { useSettings } from "@/settings/model"
 import { WindowsAppMenu } from "./windows-menu"
-import { applyPath, backPath, forwardPath } from "./history"
+import { applyPath, backPath, forwardPath, type HistoryLocation } from "./history"
 import { TitlebarTabStrip } from "@/shell/titlebar/tab-strip"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { createMediaQuery } from "@solid-primitives/media"
@@ -75,7 +75,7 @@ export function Titlebar(props: {
   const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px`
 
   const [history, setHistory] = createStore({
-    stack: [] as string[],
+    stack: [] as HistoryLocation[],
     index: 0,
     action: undefined as "back" | "forward" | undefined,
   })
@@ -83,7 +83,7 @@ export function Titlebar(props: {
   const path = () => `${location.pathname}${location.search}${location.hash}`
 
   createEffect(() => {
-    const current = path()
+    const current = { url: path(), state: location.state }
 
     untrack(() => {
       const next = applyPath(history, current)
@@ -113,14 +113,14 @@ export function Titlebar(props: {
     const next = backPath(history)
     if (!next) return
     setHistory(next.state)
-    navigate(next.to)
+    navigate(next.to.url, { state: unwrap(next.to.state) })
   }
 
   const forward = () => {
     const next = forwardPath(history)
     if (!next) return
     setHistory(next.state)
-    navigate(next.to)
+    navigate(next.to.url, { state: unwrap(next.to.state) })
   }
 
   command.register(() => [
@@ -297,6 +297,7 @@ export function Titlebar(props: {
                   void tabs.newDraft({ server: activeTab.server, directory: activeTab.directory }, "", model)
                   return
                 }
+                case "settings":
                 case "home": {
                   const selection = layout.home.selection()
                   const conn =
@@ -432,8 +433,8 @@ export function Titlebar(props: {
                   "md:pl-4": !macTrafficLights(),
                 }}
               >
-                <Show when={!mobile() && !props.verticalTabs}>
-                  <ChannelIndicator debugTools={props.debugTools} />
+                <Show when={!mobile() && (!props.verticalTabs || windows())}>
+                  <ChannelIndicator debugTools={props.debugTools} height={windows() ? minHeight() : undefined} />
                 </Show>
                 <Show when={windows() || linux()}>
                   <WindowsAppMenu command={command} platform={platform} />
@@ -624,10 +625,22 @@ export function Titlebar(props: {
                           >
                             <Show when={macVerticalTabs()}>
                               <div
-                                class="relative w-full shrink-0"
+                                class="relative mb-2 w-full shrink-0"
                                 style={{ height: `${macTrafficLightsTopClearance / zoom()}px` }}
                                 data-tauri-drag-region
-                              ></div>
+                              >
+                                <div
+                                  class="absolute -top-0.5 bottom-0.5 flex items-center"
+                                  style={{
+                                    // Native traffic lights stay on the physical left; subtract the sidebar padding.
+                                    left: macTrafficLights()
+                                      ? `calc(${macTrafficLightsBaseWidth / zoom()}px - 0.625rem)`
+                                      : "0px",
+                                  }}
+                                >
+                                  <ChannelIndicator debugTools={props.debugTools} />
+                                </div>
+                              </div>
                             </Show>
                             {homeButton(true)}
                             <button
@@ -637,10 +650,10 @@ export function Titlebar(props: {
                               onClick={openNewTab}
                               aria-label={language.t("command.session.new")}
                             >
-                              <Icon name="plus" />
+                              <Icon name="edit" />
                               {language.t("command.session.new")}
                             </button>
-                            <div class="my-1 h-px w-full shrink-0 bg-v2-border-border-muted" aria-hidden="true" />
+                            <div class="h-4 w-full shrink-0" aria-hidden="true" />
                             <div class="flex min-h-0 flex-1 flex-col gap-1">
                               <TitlebarTabStrip
                                 orientation="vertical"
@@ -657,13 +670,14 @@ export function Titlebar(props: {
                                 onReorder={(keys) => tabsStoreActions.reorder(keys)}
                               />
                             </div>
-                            <div data-slot="vertical-tabs-footer" class="relative mt-auto h-9 w-full shrink-0">
-                              <div class="absolute bottom-0 left-0 flex h-9 items-center">
+                            <div
+                              data-slot="vertical-tabs-footer"
+                              class="mt-auto flex h-9 w-full shrink-0 items-center gap-1.5"
+                            >
+                              <TitlebarRightMount />
+                              <Show when={!macVerticalTabs() && !windows()}>
                                 <ChannelIndicator debugTools={props.debugTools} />
-                              </div>
-                              <div class="absolute bottom-0 right-0 flex h-9 items-center">
-                                <TitlebarRightMount />
-                              </div>
+                              </Show>
                             </div>
                           </Portal>
                         )}
@@ -739,13 +753,19 @@ function TitlebarUpdateIconButton(props: { state: TitlebarUpdatePillState }) {
   )
 }
 
-function ChannelIndicator(props: { debugTools?: { visible: boolean; toggle: () => void } }) {
+function ChannelIndicator(props: { debugTools?: { visible: boolean; toggle: () => void }; height?: string }) {
+  const platform = usePlatform()
+  const style = () => ({
+    height: props.height,
+    "font-size": platform.platform === "desktop" && platform.os === "macos" ? "9px" : "10px",
+  })
   const channel = import.meta.env.VITE_OPENCODE_CHANNEL
   if (channel === "dev" && props.debugTools) {
     return (
       <button
         type="button"
-        class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono cursor-pointer"
+        class="inline-flex h-4 shrink-0 items-center bg-icon-interactive-base text-[#FFF] leading-4 font-medium px-1.5 rounded-full uppercase font-mono cursor-pointer [app-region:no-drag]"
+        style={style()}
         onClick={props.debugTools.toggle}
         aria-label="Toggle debug tools"
         aria-pressed={props.debugTools.visible}
@@ -759,7 +779,10 @@ function ChannelIndicator(props: { debugTools?: { visible: boolean; toggle: () =
   return (
     <Show when={label}>
       {(value) => (
-        <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
+        <div
+          class="inline-flex h-4 shrink-0 items-center bg-icon-interactive-base text-[#FFF] leading-4 font-medium px-1.5 rounded-full uppercase font-mono"
+          style={style()}
+        >
           {value()}
         </div>
       )}

packages/cli/script/build.ts

@@ -141,7 +141,12 @@ export default { path: file, version: ${JSON.stringify(opencodePty.version)}, sh
       target: target.replace(binary, "bun") as Bun.Build.CompileTarget,
       ...(executablePath ? { executablePath } : {}),
       outfile: path.join(outdir, name, "bin", binary),
-      execArgv: [`--user-agent=${binary}/${Script.version}`, "--use-system-ca", "--no-warnings", "--"],
+      execArgv: [
+        `--user-agent=opencode/${Script.channel}/${Script.version}/cli`,
+        "--use-system-ca",
+        "--no-warnings",
+        "--",
+      ],
       windows: {},
     },
     define: {

packages/cli/src/commands/handlers/default.ts

@@ -9,7 +9,7 @@ import { ServerConnection } from "../../services/server-connection"
 import { Updater } from "../../services/updater"
 import { UpdatePreflight } from "../../services/update-preflight"
 import { Npm } from "@opencode-ai/util/npm"
-import { OPENCODE_CHANNEL, OPENCODE_VERSION } from "../../version"
+import { OPENCODE_ARTIFACT, OPENCODE_CHANNEL, OPENCODE_VERSION } from "../../version"
 import { Env } from "../../env"
 
 export default Runtime.handler(Commands, (input) =>
@@ -59,7 +59,7 @@ export default Runtime.handler(Commands, (input) =>
     const service = server.service
     yield* run({
       app: {
-        name: process.env.OPENCODE_CLIENT ?? "cli",
+        name: process.env.OPENCODE_CLIENT ?? OPENCODE_ARTIFACT,
         version: OPENCODE_VERSION,
         channel: process.env.OPENCODE_TUI_CHANNEL ?? OPENCODE_CHANNEL,
       },

packages/cli/src/index.ts

@@ -6,7 +6,7 @@ import { Commands } from "./commands/commands"
 import { Runtime } from "./framework/runtime"
 import { Observability } from "@opencode-ai/util/observability"
 import { Updater } from "./services/updater"
-import { OPENCODE_CHANNEL, OPENCODE_LOCAL, OPENCODE_VERSION } from "./version"
+import { OPENCODE_ARTIFACT, OPENCODE_CHANNEL, OPENCODE_LOCAL, OPENCODE_VERSION } from "./version"
 import { LayerNode } from "@opencode-ai/util/effect/layer-node"
 import { Global } from "@opencode-ai/util/global"
 import { AppProcess } from "@opencode-ai/util/process"
@@ -113,7 +113,7 @@ Effect.gen(function* () {
     Observability.layer({
       endpoint: process.env.OTEL_EXPORTER_OTLP_ENDPOINT,
       headers: process.env.OTEL_EXPORTER_OTLP_HEADERS,
-      client: process.env.OPENCODE_CLIENT ?? "cli",
+      client: process.env.OPENCODE_CLIENT ?? OPENCODE_ARTIFACT,
       version: OPENCODE_VERSION,
       channel: OPENCODE_CHANNEL,
     }),

packages/cli/src/server-process.ts

@@ -4,7 +4,7 @@ import { NodeServices } from "@effect/platform-node"
 import { Service, type DiscoverOptions } from "@opencode-ai/client/effect/service"
 import { LayerNode } from "@opencode-ai/util/effect/layer-node"
 import { Global } from "@opencode-ai/util/global"
-import { OPENCODE_CHANNEL, OPENCODE_VERSION } from "./version"
+import { OPENCODE_ARTIFACT, OPENCODE_CHANNEL, OPENCODE_VERSION } from "./version"
 import { AppProcess } from "@opencode-ai/util/process"
 import { randomBytes, randomUUID } from "node:crypto"
 import { spawn } from "node:child_process"
@@ -86,7 +86,7 @@ const processEffect = Effect.fnUntraced(function* (options: Options) {
       const server = yield* start(
         {
           app: {
-            name: process.env.OPENCODE_CLIENT ?? "cli",
+            name: process.env.OPENCODE_CLIENT ?? OPENCODE_ARTIFACT,
             version: OPENCODE_VERSION,
             channel: OPENCODE_CHANNEL,
           },

packages/client/src/solid/data.ts

@@ -1180,8 +1180,8 @@ export function createData(config: CreateDataInput) {
         }))
         break
       case "reference.updated":
-        result.location.reference.invalidate()
-        void result.location.reference.sync()
+        result.location.reference.invalidate(location)
+        void result.location.reference.sync(location)
         break
       case "integration.updated":
         result.location.integration.invalidate(location)

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

@@ -409,6 +409,66 @@ test("refreshes global credential events across every loaded location and worksp
   }
 })
 
+test("refreshes references for the location an update names", async () => {
+  const listeners = new Set<Parameters<CreateDataInput["event"]["listen"]>[0]>()
+  const requests: URL[] = []
+  const api = OpenCode.make({
+    baseUrl: "http://opencode.local",
+    fetch: async (input, init) => {
+      const request = input instanceof Request ? input : new Request(input, init)
+      const url = new URL(request.url)
+      requests.push(url)
+      const directory = url.searchParams.get("location[directory]") ?? "/project"
+      return Response.json({
+        location: {
+          directory,
+          workspaceID: url.searchParams.get("location[workspace]") ?? undefined,
+          project: { id: "project", directory, canonical: directory },
+        },
+        data: [],
+      })
+    },
+  })
+  const setup = createRoot((dispose) => ({
+    data: createData({
+      api: () => api,
+      directory: "/project",
+      event: {
+        on: () => () => {},
+        listen(handler) {
+          listeners.add(handler)
+          return () => listeners.delete(handler)
+        },
+      },
+      connection: { status: () => "connected" },
+    }),
+    dispose,
+  }))
+  const other = { directory: "/other", workspaceID: "workspace-other" }
+
+  try {
+    await Promise.all([setup.data.location.reference.sync(), setup.data.location.reference.sync(other)])
+    requests.length = 0
+
+    const updated: OpenCodeEvent = {
+      id: "evt_reference.updated",
+      created: 1,
+      type: "reference.updated",
+      location: other,
+      data: {},
+    }
+    listeners.forEach((listener) => listener({ name: updated.type, details: updated }))
+    await wait(() => requests.length === 1)
+    expect([
+      requests[0]!.pathname,
+      requests[0]!.searchParams.get("location[directory]"),
+      requests[0]!.searchParams.get("location[workspace]"),
+    ]).toEqual(["/api/reference", "/other", "workspace-other"])
+  } finally {
+    setup.dispose()
+  }
+})
+
 test("reports optimistic sessions as creating until the request settles", async () => {
   const release = Promise.withResolvers<void>()
   const api = OpenCode.make({

packages/core/src/catalog.ts

@@ -100,6 +100,7 @@ const layer = Layer.effect(
                 editor.providers.set(providerID, current)
               }
               fn(current.provider)
+              current.provider.id = providerID
             },
             remove: (providerID) => {
               editor.providers.delete(providerID)

packages/core/src/filesystem/location-watcher.ts

@@ -50,16 +50,14 @@ const layer = Layer.effect(
       ),
     )
     const lock = Semaphore.makeUnsafe(1)
-    let requested = 0
     let stopped = false
     let active: { path: string; scope: Scope.Closeable } | undefined
-    const reconcile = (ignore: readonly string[]) => {
-      const request = ++requested
-      return lock.withPermit(
+    const reconcile = () =>
+      lock.withPermit(
         Effect.gen(function* () {
-          if (stopped || request !== requested) return
+          if (stopped) return
           const resolved = yield* target
-          if (stopped || request !== requested) return
+          const ignore = policy.current()
           const next = resolved && !resolved.aliases.some((alias) => ignore.includes(alias)) ? resolved.path : undefined
           if (active?.path === next) return
           if (active) yield* Scope.close(active.scope, Exit.void)
@@ -79,12 +77,10 @@ const layer = Layer.effect(
           )
         }).pipe(Effect.withSpan("LocationWatcher.reconcile", { attributes: { directory: location.directory } })),
       )
-    }
     yield* Effect.addFinalizer(() =>
       lock.withPermit(
         Effect.gen(function* () {
           stopped = true
-          requested++
           if (active) yield* Scope.close(active.scope, Exit.void)
           active = undefined
         }),
@@ -93,7 +89,7 @@ const layer = Layer.effect(
     yield* policy.observe(reconcile)
     yield* Effect.gen(function* () {
       yield* Plugin.awaitActivation
-      yield* reconcile(policy.current())
+      yield* reconcile()
     }).pipe(
       Effect.catchCauseIf(
         (cause) => !Cause.hasInterrupts(cause),

packages/core/src/plugin/host.ts

@@ -397,6 +397,7 @@ export const make = Effect.fn("PluginHost.make")(function* (
             add: (name, source) => editor.add(name, Schema.decodeUnknownSync(Reference.Source)(source)),
             remove: editor.remove,
             list: editor.list,
+            get: editor.get,
           })
         }),
     },
@@ -407,6 +408,7 @@ export const make = Effect.fn("PluginHost.make")(function* (
         skill.transform((editor) => {
           callback({
             list: () => mutable(editor.list()),
+            get: editor.get,
             add: (value) => editor.add(Schema.decodeUnknownSync(Skill.Info)(value)),
             update: editor.update,
             remove: editor.remove,

packages/core/src/reference.ts

@@ -32,6 +32,7 @@ type Editor = {
   add(name: string, source: Source): void
   remove(name: string): void
   list(): readonly [string, Source][]
+  get(name: string): Source | undefined
 }
 
 export interface Interface extends State.Transformable<Editor> {
@@ -98,6 +99,7 @@ const layer = Layer.effect(
         add: (name, source) => editor.sources.set(name, source),
         remove: (name) => editor.sources.delete(name),
         list: () => Array.from(editor.sources),
+        get: (name) => editor.sources.get(name),
       }),
       notify: () =>
         Effect.gen(function* () {

packages/core/src/repository-cache.ts

@@ -18,7 +18,6 @@ import { KV } from "./kv.js"
 
 const Refresh = Schema.Struct({
   attemptedAt: Schema.Number,
-  refreshedAt: Schema.optionalKey(Schema.Number),
 })
 const refreshInterval = Duration.toMillis(Duration.days(1))
 
@@ -161,7 +160,7 @@ const layer = Layer.effect(
 
               if (status !== "cached") {
                 // Record attempts before network work so failures obey the same refresh interval.
-                yield* kv.set(key, { ...previous, attemptedAt: now })
+                yield* kv.set(key, { attemptedAt: now })
 
                 if (status === "cloned") {
                   yield* git.repo
@@ -205,8 +204,6 @@ const layer = Layer.effect(
                     .resetHard(existing, target ? `origin/${target}` : "HEAD")
                     .pipe(Effect.mapError((error) => new ResetFailedError({ repository, message: error.message })))
                 }
-
-                yield* kv.set(key, { attemptedAt: now, refreshedAt: yield* Clock.currentTimeMillis })
               }
 
               const checkout = yield* git.repo.discover(AbsolutePath.make(localPath))

packages/core/src/skill.ts

@@ -74,6 +74,7 @@ export type Data = {
 
 export type Editor = {
   list: () => readonly Types.DeepMutable<Info>[]
+  get: (id: string) => Types.DeepMutable<Info> | undefined
   add: (skill: Info) => void
   update: (id: string, update: (skill: Types.DeepMutable<Info>) => void) => void
   remove: (id: string) => void
@@ -96,6 +97,7 @@ const layer = Layer.effect(
       initial: () => ({ skills: new Map() }),
       editor: (editor) => ({
         list: () => Array.from(editor.skills.values()),
+        get: (id) => editor.skills.get(ID.make(id)),
         add: (skill) => {
           editor.skills.set(skill.id, { ...skill } as Types.DeepMutable<Info>)
         },

packages/core/test/catalog.test.ts

@@ -93,6 +93,32 @@ describe("Catalog", () => {
     }),
   )
 
+  it.effect("preserves provider identity when updating new and existing providers", () =>
+    Effect.gen(function* () {
+      const catalog = yield* Catalog.Service
+      const providerID = Provider.ID.make("original")
+      const renamed = Provider.ID.make("renamed")
+      yield* catalog.transform((editor) => {
+        editor.provider.update(providerID, (provider) => {
+          provider.id = renamed
+          provider.name = "Created"
+        })
+        expect(editor.provider.get(providerID)?.provider.id).toBe(providerID)
+        editor.provider.update(providerID, (provider) => {
+          provider.id = renamed
+          provider.name = "Updated"
+        })
+      })
+
+      expect(yield* catalog.provider.get(providerID)).toMatchObject({ id: providerID, name: "Updated" })
+      expect(yield* catalog.provider.get(renamed)).toBeUndefined()
+      expect((yield* catalog.provider.all()).map((provider) => provider.id)).toEqual([providerID])
+
+      yield* catalog.reload()
+      expect(yield* catalog.provider.get(providerID)).toMatchObject({ id: providerID, name: "Updated" })
+    }),
+  )
+
   it.effect("derives availability from active credentials without changing provider state", () => {
     const integrationID = Integration.ID.make("test")
     const localCatalogLayer = Layer.fresh(

packages/core/test/filesystem/watcher.test.ts

@@ -16,6 +16,7 @@ import { Watcher } from "@opencode-ai/core/filesystem/watcher"
 import { FileSystem } from "@opencode-ai/schema/filesystem"
 import { Document, Event, Info, type Entry } from "@opencode-ai/schema/config"
 import { Location } from "@opencode-ai/core/location"
+import { Plugin } from "@opencode-ai/core/plugin"
 import { PluginSupervisor } from "@opencode-ai/core/plugin/supervisor"
 import { AbsolutePath } from "@opencode-ai/core/schema"
 import { location } from "../fixture/location"
@@ -125,6 +126,7 @@ function provide(
   watcher?: Layer.Layer<Watcher.Service>,
   config: Layer.Layer<Config.Service> = configLayer,
   plugins?: LayerNode.Replacement,
+  replacements: LayerNode.Replacements = [],
 ) {
   const locationLayer = Layer.succeed(
     Location.Service,
@@ -137,6 +139,7 @@ function provide(
       Location.node.replace(locationLayer),
       plugins ?? PluginSupervisor.node.replace(Layer.empty),
       ...(watcher ? ([Watcher.node.replace(watcher)] as const) : []),
+      ...replacements,
     ],
   )
   return Effect.provide(built)
@@ -150,6 +153,7 @@ function withTmp<A, E, R>(
     watcher?: Layer.Layer<Watcher.Service>
     config?: Layer.Layer<Config.Service>
     plugins?: LayerNode.Replacement
+    replacements?: LayerNode.Replacements
   },
 ) {
   return Effect.acquireRelease(
@@ -172,7 +176,16 @@ function withTmp<A, E, R>(
     ({ tmp }) => Effect.promise(() => tmp[Symbol.asyncDispose]()),
   ).pipe(
     Effect.flatMap(({ tmp, vcs }) =>
-      f(tmp.path, vcs).pipe(provide(tmp.path, vcs, options?.watcher, options?.config ?? configLayer, options?.plugins)),
+      f(tmp.path, vcs).pipe(
+        provide(
+          tmp.path,
+          vcs,
+          options?.watcher,
+          options?.config ?? configLayer,
+          options?.plugins,
+          options?.replacements,
+        ),
+      ),
     ),
   )
 }
@@ -293,6 +306,64 @@ describe("LocationWatcher subscriptions", () => {
     })
   })
 
+  it.live("uses the policy changed while target discovery was suspended", () =>
+    Effect.gen(function* () {
+      const fs = yield* FSUtil.Service
+      const discovering = yield* Deferred.make<void>()
+      const release = yield* Deferred.make<void>()
+      const subscribed = yield* Deferred.make<void>()
+      const subscriptions: Watcher.WatchInput[] = []
+      let released = 0
+      yield* withTmp(
+        (directory) =>
+          Effect.gen(function* () {
+            const policy = yield* LocationWatcherPolicy.Service
+            yield* Deferred.await(discovering)
+            const update = yield* policy
+              .transform((editor) => editor.add([".hg"]))
+              .pipe(Effect.forkScoped({ startImmediately: true }))
+            expect(policy.current()).toEqual([".hg"])
+            yield* Deferred.succeed(release, undefined)
+            const registration = yield* Fiber.join(update)
+            expect(subscriptions).toEqual([])
+
+            yield* registration.dispose
+            yield* Deferred.await(subscribed)
+            yield* policy.reload()
+            expect(subscriptions).toEqual([{ path: path.join(directory, ".hg", "branch"), type: "file" }])
+            expect(released).toBe(0)
+          }),
+        {
+          vcs: "hg",
+          replacements: [
+            Plugin.node.replace(Layer.mock(Plugin.Service, { awaitActivation: Effect.void })),
+            FSUtil.node.replace(
+              Layer.succeed(FSUtil.Service, {
+                ...fs,
+                realPath: (target) =>
+                  Deferred.succeed(discovering, undefined).pipe(
+                    Effect.andThen(Deferred.await(release)),
+                    Effect.andThen(fs.realPath(target)),
+                  ),
+              }),
+            ),
+          ],
+          watcher: Layer.succeed(
+            Watcher.Service,
+            Watcher.Service.of({
+              subscribe: (input) =>
+                Effect.sync(() => subscriptions.push(input)).pipe(
+                  Effect.andThen(Deferred.succeed(subscribed, undefined)),
+                  Effect.as(Stream.never.pipe(Stream.ensuring(Effect.sync(() => released++)))),
+                ),
+            }),
+          ),
+        },
+      )
+      expect(released).toBe(1)
+    }),
+  )
+
   it.live("does not start before configured policy is ready", () => {
     const subscriptions: Watcher.WatchInput[] = []
     const watcher = Layer.succeed(

packages/core/test/reference.test.ts

@@ -19,6 +19,26 @@ const referenceLayer = AppNodeBuilder.build(LayerNode.group([Reference.node, Bus
 ])
 
 describe("Reference", () => {
+  it.effect("reads the current editor source by name", () =>
+    Effect.gen(function* () {
+      const references = yield* Reference.Service
+      const source = Reference.LocalSource.make({ type: "local", path: AbsolutePath.make("/docs") })
+      yield* references.transform((editor) => editor.add("docs", source))
+      yield* references.transform((editor) => {
+        expect(editor.get("docs")).toBe(editor.list()[0]?.[1])
+        expect(editor.get("docs")).toEqual(source)
+        expect(editor.get("missing")).toBeUndefined()
+        const replacement = Reference.GitSource.make({ type: "git", repository: "owner/repo" })
+        editor.add("docs", replacement)
+        expect(editor.get("docs")).toBe(replacement)
+        editor.remove("docs")
+        expect(editor.get("docs")).toBeUndefined()
+      })
+
+      expect(yield* references.list()).toEqual([])
+    }).pipe(Effect.provide(referenceLayer)),
+  )
+
   it.effect("reads batched references before cache work and update events", () => {
     const operations: RepositoryCache.EnsureInput[] = []
     const started = Deferred.makeUnsafe<void>()

packages/core/test/repository-cache.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, setDefaultTimeout } from "bun:test"
 import fs from "fs/promises"
 import path from "path"
 import { pathToFileURL } from "url"
-import { Clock, Duration, Effect, Layer, Schema } from "effect"
+import { Clock, Duration, Effect, Layer } from "effect"
 import { AppNodeBuilder } from "@opencode-ai/core/effect/app-node-builder"
 import { Global } from "@opencode-ai/util/global"
 import { Repository } from "@opencode-ai/core/repository"
@@ -35,7 +35,7 @@ describe("RepositoryCache", () => {
           expect((yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })).status).toBe("cached")
           expect(yield* read(path.join(initial.localPath, "README.md"))).toBe("one\n")
           const yesterday = (yield* Clock.currentTimeMillis) - Duration.toMillis(Duration.days(1))
-          yield* kv.set(`repository-cache:${initial.localPath}`, { attemptedAt: yesterday, refreshedAt: yesterday })
+          yield* kv.set(`repository-cache:${initial.localPath}`, { attemptedAt: yesterday })
         }).pipe(Effect.provide(cacheLayer(fixture.root)))
 
         const results = yield* Effect.all(
@@ -61,7 +61,30 @@ describe("RepositoryCache", () => {
     ),
   )
 
-  it.live("throttles failed refresh attempts without marking them successful", () =>
+  it.live("honors legacy attempt records while allowing forced refreshes", () =>
+    withRemote((fixture) =>
+      Effect.gen(function* () {
+        const cache = yield* RepositoryCache.Service
+        const kv = yield* KV.Service
+        const initial = yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })
+        yield* Effect.promise(() => commit(fixture.source, "two\n", "advance main"))
+
+        // Persisted records from older versions include an unused success timestamp.
+        yield* kv.set(`repository-cache:${initial.localPath}`, {
+          attemptedAt: yield* Clock.currentTimeMillis,
+          refreshedAt: 0,
+        })
+        expect((yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })).status).toBe("cached")
+        expect(yield* read(path.join(initial.localPath, "README.md"))).toBe("one\n")
+
+        expect((yield* cache.ensure({ reference: fixture.reference, refresh: true })).status).toBe("refreshed")
+        expect(yield* read(path.join(initial.localPath, "README.md"))).toBe("two\n")
+        expect((yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })).status).toBe("cached")
+      }).pipe(Effect.provide(cacheLayer(fixture.root))),
+    ),
+  )
+
+  it.live("throttles failed refresh attempts until the next interval", () =>
     withRemote((fixture) =>
       Effect.gen(function* () {
         const cache = yield* RepositoryCache.Service
@@ -69,31 +92,23 @@ describe("RepositoryCache", () => {
         const initial = yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })
         const key = `repository-cache:${initial.localPath}`
         const yesterday = (yield* Clock.currentTimeMillis) - Duration.toMillis(Duration.days(1))
-        yield* kv.set(key, { attemptedAt: yesterday, refreshedAt: yesterday })
+        yield* kv.set(key, { attemptedAt: yesterday })
         yield* Effect.promise(() =>
           fs.rename(path.join(fixture.root, "origin.git"), path.join(fixture.root, "offline.git")),
         )
 
         const error = yield* Effect.flip(cache.ensure({ reference: fixture.reference, refresh: "daily" }))
         expect(error).toBeInstanceOf(RepositoryCache.FetchFailedError)
-        const stored = yield* kv.get(key)
-        const stamp = Schema.decodeUnknownSync(
-          Schema.Struct({ attemptedAt: Schema.Number, refreshedAt: Schema.Number }),
-        )(stored)
-        expect(stamp.attemptedAt).toBeGreaterThan(yesterday)
-        expect(stamp.refreshedAt).toBe(yesterday)
         expect((yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })).status).toBe("cached")
-        expect(yield* kv.get(key)).toEqual(stored)
         expect(yield* read(path.join(initial.localPath, "README.md"))).toBe("one\n")
 
         yield* Effect.promise(async () => {
           await fs.rename(path.join(fixture.root, "offline.git"), path.join(fixture.root, "origin.git"))
           await commit(fixture.source, "two\n", "advance main")
         })
-        yield* kv.set(key, { attemptedAt: yesterday, refreshedAt: yesterday })
+        yield* kv.set(key, { attemptedAt: yesterday })
         expect((yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })).status).toBe("refreshed")
         expect(yield* read(path.join(initial.localPath, "README.md"))).toBe("two\n")
-        expect(yield* kv.get(key)).not.toEqual(stored)
       }).pipe(Effect.provide(cacheLayer(fixture.root))),
     ),
   )
@@ -157,13 +172,13 @@ describe("RepositoryCache", () => {
     withRemote((fixture) =>
       Effect.gen(function* () {
         const cache = yield* RepositoryCache.Service
-        const initial = yield* cache.ensure({ reference: fixture.reference })
+        const initial = yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })
         yield* Effect.promise(async () => {
           await git(initial.localPath, "config", "remote.origin.url", "https://github.com/other/repo.git")
           await fs.writeFile(path.join(initial.localPath, "stale.txt"), "stale")
         })
 
-        const replaced = yield* cache.ensure({ reference: fixture.reference })
+        const replaced = yield* cache.ensure({ reference: fixture.reference, refresh: "daily" })
 
         expect(replaced.status).toBe("cloned")
         expect(yield* exists(path.join(replaced.localPath, "stale.txt"))).toBe(false)

packages/core/test/skill.test.ts

@@ -20,6 +20,25 @@ const info = (id: string, description: string) =>
   })
 
 describe("Skill", () => {
+  it.effect("reads the current editor entry by ID", () =>
+    Effect.gen(function* () {
+      const skill = yield* Skill.Service
+      yield* skill.transform((editor) => editor.add(info("review", "Initial")))
+      yield* skill.transform((editor) => {
+        expect(editor.get("review")).toBe(editor.list()[0])
+        expect(editor.get("missing")).toBeUndefined()
+        editor.update("review", (value) => {
+          value.description = "Updated"
+        })
+        expect(editor.get("review")?.description).toBe("Updated")
+        editor.remove("review")
+        expect(editor.get("review")).toBeUndefined()
+      })
+
+      expect(yield* skill.list()).toEqual([])
+    }),
+  )
+
   it.effect("registers values with last-write-wins precedence", () =>
     Effect.gen(function* () {
       const skill = yield* Skill.Service

packages/plugin/src/effect/reference.ts

@@ -7,6 +7,7 @@ export interface ReferenceEditor {
   add(name: string, source: ReferenceLocalSource | ReferenceGitSource): void
   remove(name: string): void
   list(): readonly (readonly [string, ReferenceLocalSource | ReferenceGitSource])[]
+  get(name: string): ReferenceLocalSource | ReferenceGitSource | undefined
 }
 
 export interface ReferenceDomain extends ReferenceApi<unknown> {

packages/plugin/src/effect/skill.ts

@@ -5,6 +5,7 @@ import type { Transform } from "./registration.js"
 
 export interface SkillEditor {
   list(): readonly Types.DeepMutable<Skill.Info>[]
+  get(id: string): Types.DeepMutable<Skill.Info> | undefined
   add(skill: Skill.Info): void
   update(id: string, update: (skill: Types.DeepMutable<Skill.Info>) => void): void
   remove(id: string): void

packages/plugin/src/promise/reference.ts

@@ -6,6 +6,7 @@ export interface ReferenceEditor {
   add(name: string, source: ReferenceLocalSource | ReferenceGitSource): void
   remove(name: string): void
   list(): readonly (readonly [string, ReferenceLocalSource | ReferenceGitSource])[]
+  get(name: string): ReferenceLocalSource | ReferenceGitSource | undefined
 }
 
 export interface ReferenceDomain extends ReferenceApi {

packages/plugin/src/promise/skill.ts

@@ -5,6 +5,7 @@ import type { DeepMutable } from "./types.js"
 
 export interface SkillEditor {
   list(): readonly DeepMutable<Skill.Info>[]
+  get(id: string): DeepMutable<Skill.Info> | undefined
   add(skill: Skill.Info): void
   update(id: string, update: (skill: DeepMutable<Skill.Info>) => void): void
   remove(id: string): void

packages/plugin/src/promise/tool.ts

@@ -22,7 +22,7 @@ export type Info<
   ) => Promise<Tool.Result<Output>>
 }
 
-interface ToolEditor {
+export interface ToolEditor {
   list(): readonly (Info & { readonly id: string })[]
   get(id: string): (Info & { readonly id: string }) | undefined
   namespace(namespace: Tool.Namespace): void

packages/session-ui/package.json

@@ -9,6 +9,7 @@
     "./document": "./src/document.ts",
     "./message": "./src/message/current-message.tsx",
     "./timeline/projection": "./src/timeline/projection.ts",
+    "./timeline/detail": "./src/timeline/detail.ts",
     "./timeline/row": "./src/timeline/session-timeline-row.tsx",
     "./timeline": "./src/timeline/session-timeline.tsx",
     "./basic-tool": "./src/components/basic-tool.tsx",

packages/session-ui/src/components/basic-tool.css

@@ -252,13 +252,25 @@
     justify-content: center;
     flex-shrink: 0;
     color: var(--v2-text-text-faint);
-    margin-left: auto;
+    margin-inline-start: auto;
+    opacity: 0;
+    transform: translateX(-4px);
     transition:
       opacity 0.15s ease,
-      color 0.15s ease;
+      color 0.15s ease,
+      transform 0.15s ease;
 
-    @media (hover: hover) {
-      opacity: 0;
+    :dir(rtl) & {
+      transform: translateX(4px);
+    }
+
+    @media (hover: none) {
+      opacity: 1;
+      transform: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
     }
   }
 
@@ -285,6 +297,7 @@
 
     [data-component="task-tool-action"] {
       opacity: 1;
+      transform: none;
     }
   }
 }

packages/session-ui/src/message/current-message.tsx

@@ -3,15 +3,10 @@ import type {
   SessionMessageAssistantTool,
   SessionMessageUser,
 } from "@opencode-ai/client/promise"
-import { Match, Switch } from "solid-js"
+import { Match, Switch, type ComponentProps } from "solid-js"
 import type { SessionUserActions, SessionUserComment } from "../actions"
 import { AssistantReasoningContent, AssistantTextContent, CurrentUserMessageDisplay } from "./message-content"
-import {
-  CurrentContextToolGroup,
-  CurrentFileToolGroup,
-  ToolDisplay,
-  type ContextGroupPart,
-} from "../tools/tool-renderer"
+import { CurrentContextToolGroup, CurrentFileToolGroup, ToolDisplay } from "../tools/tool-renderer"
 import { currentToolError, currentToolInput, currentToolMetadata, currentToolOutput } from "./current-tool-state"
 
 export type { SessionUserActions, SessionUserComment } from "../actions"
@@ -101,28 +96,8 @@ export function SessionAssistantContent(props: {
   )
 }
 
-export function SessionContextToolGroup(props: {
-  parts: ContextGroupPart[]
-  reasoningDefaultOpen?: boolean
-  reasoningOpen?: (id: string) => boolean | undefined
-  onReasoningOpenChange?: (id: string, open: boolean) => void
-  open: boolean
-  busy: boolean
-  onOpenChange: (open: boolean) => void
-  onSizeChange?: () => void
-}) {
-  return (
-    <CurrentContextToolGroup
-      parts={props.parts}
-      reasoningDefaultOpen={props.reasoningDefaultOpen}
-      reasoningOpen={props.reasoningOpen}
-      onReasoningOpenChange={props.onReasoningOpenChange}
-      open={props.open}
-      busy={props.busy}
-      onOpenChange={props.onOpenChange}
-      onSizeChange={props.onSizeChange}
-    />
-  )
+export function SessionContextToolGroup(props: ComponentProps<typeof CurrentContextToolGroup>) {
+  return <CurrentContextToolGroup {...props} />
 }
 
 export function SessionFileToolGroup(props: {

packages/session-ui/src/message/current-tool-state.ts

@@ -29,6 +29,42 @@ export function currentToolError(tool: SessionMessageAssistantTool) {
   return tool.state.error.message
 }
 
+export function currentToolFailed(tool: SessionMessageAssistantTool) {
+  return (
+    tool.state.status === "error" ||
+    (tool.name === "execute" && executeToolFailed(currentToolMetadata(tool))) ||
+    (tool.name === "shell" && tool.state.status === "completed" && shellResultFailed(currentToolMetadata(tool)))
+  )
+}
+
+export function shellResultFailed(metadata: Record<string, unknown>) {
+  // Shell completion reports the process outcome in metadata, not the tool status.
+  return metadata.timeout === true || (typeof metadata.exit === "number" && metadata.exit !== 0)
+}
+
+export function executeToolFailed(metadata: Record<string, unknown>) {
+  // Code Mode can report failed nested calls in a completed tool result.
+  const calls = metadata.toolCalls
+  return (
+    metadata.error === true ||
+    (Array.isArray(calls) &&
+      calls.some(
+        (call) =>
+          call !== null &&
+          typeof call === "object" &&
+          !Array.isArray(call) &&
+          "status" in call &&
+          call.status === "error",
+      ))
+  )
+}
+
+export function currentToolHasLoadedFiles(tool: SessionMessageAssistantTool) {
+  if (tool.name !== "read" || tool.state.status !== "completed") return false
+  const loaded = tool.state.metadata?.loaded
+  return Array.isArray(loaded) && loaded.some((path) => typeof path === "string")
+}
+
 export function currentContentDefaultOpen(
   content: SessionMessageAssistant["content"][number],
   shellExpanded: boolean,

packages/session-ui/src/timeline/detail.ts

@@ -0,0 +1,109 @@
+import type { SessionMessageAssistant, SessionMessageInfo } from "@opencode-ai/client/promise"
+import { shellResultFailed } from "../message/current-tool-state"
+
+export const timelineCategories = ["shell", "edit", "thinking", "subagents", "notices", "tools"] as const
+export type TimelineCategory = (typeof timelineCategories)[number]
+export type TimelinePlacement = "separate" | "grouped" | "hidden"
+export type TimelineExpansion = "collapsed" | "expanded"
+export type TimelineDetail = {
+  shell: { placement: TimelinePlacement; details: TimelineExpansion }
+  edit: { placement: TimelinePlacement; details: TimelineExpansion }
+  thinking: { placement: TimelinePlacement; details: TimelineExpansion }
+  subagents: { placement: TimelinePlacement }
+  notices: { placement: TimelinePlacement }
+  tools: { placement: TimelinePlacement }
+}
+
+export const timelinePresets = [
+  {
+    id: "everything",
+    value: {
+      shell: { placement: "separate", details: "expanded" },
+      edit: { placement: "separate", details: "expanded" },
+      thinking: { placement: "separate", details: "expanded" },
+      subagents: { placement: "separate" },
+      notices: { placement: "separate" },
+      tools: { placement: "separate" },
+    },
+  },
+  {
+    id: "detailed",
+    value: {
+      shell: { placement: "separate", details: "expanded" },
+      edit: { placement: "separate", details: "expanded" },
+      thinking: { placement: "grouped", details: "collapsed" },
+      subagents: { placement: "separate" },
+      notices: { placement: "grouped" },
+      tools: { placement: "grouped" },
+    },
+  },
+  {
+    id: "compact",
+    value: {
+      shell: { placement: "grouped", details: "collapsed" },
+      edit: { placement: "grouped", details: "collapsed" },
+      thinking: { placement: "grouped", details: "collapsed" },
+      subagents: { placement: "grouped" },
+      notices: { placement: "grouped" },
+      tools: { placement: "grouped" },
+    },
+  },
+  {
+    id: "quiet",
+    value: {
+      shell: { placement: "hidden", details: "collapsed" },
+      edit: { placement: "grouped", details: "collapsed" },
+      thinking: { placement: "hidden", details: "collapsed" },
+      subagents: { placement: "grouped" },
+      notices: { placement: "hidden" },
+      tools: { placement: "hidden" },
+    },
+  },
+  {
+    id: "text-only",
+    value: {
+      shell: { placement: "hidden", details: "collapsed" },
+      edit: { placement: "hidden", details: "collapsed" },
+      thinking: { placement: "hidden", details: "collapsed" },
+      subagents: { placement: "hidden" },
+      notices: { placement: "hidden" },
+      tools: { placement: "hidden" },
+    },
+  },
+] as const satisfies readonly { id: string; value: TimelineDetail }[]
+
+export function timelinePreset(value: TimelineDetail) {
+  return timelinePresets.find((preset) =>
+    timelineCategories.every((category) => {
+      const current = value[category]
+      const expected = preset.value[category]
+      return (
+        current.placement === expected.placement &&
+        (current.placement === "hidden" ||
+          !("details" in current) ||
+          ("details" in expected && current.details === expected.details))
+      )
+    }),
+  )
+}
+
+export function timelineCategory(
+  content: SessionMessageAssistant["content"][number],
+): keyof TimelineDetail | undefined {
+  if (content.type === "text") return
+  if (content.type === "reasoning") return "thinking"
+  if (["shell", "execute", "bash"].includes(content.name)) return "shell"
+  if (["edit", "write", "patch", "apply_patch"].includes(content.name)) return "edit"
+  if (["subagent", "task"].includes(content.name)) return "subagents"
+  return "tools"
+}
+
+export function timelineNoticeRequired(message: SessionMessageInfo) {
+  if (message.type === "compaction") return message.status !== "completed"
+  if (message.type !== "synthetic") return false
+  const metadata = message.metadata
+  return (
+    metadata?.state === "error" ||
+    (metadata?.source === "shell" && metadata.state === "completed" && shellResultFailed(metadata))
+  )
+}

packages/session-ui/src/timeline/projection.ts

@@ -8,8 +8,9 @@ import type {
 } from "@opencode-ai/client/promise"
 import { Option, Schema } from "effect"
 import { createMemo, mapArray, type Accessor } from "solid-js"
-import { currentContentDefaultOpen } from "../message/current-tool-state"
+import { currentContentDefaultOpen, currentToolFailed, currentToolHasLoadedFiles } from "../message/current-tool-state"
 import { TimelineRow, type PartGroup, type PartRef, type TimelineRowMap } from "./timeline-row"
+import { timelineCategory, timelineNoticeRequired, type TimelineDetail } from "./detail"
 
 export { TimelineRow, type PartGroup, type PartRef, type TimelineRowMap }
 
@@ -29,6 +30,7 @@ export type TimelineProjectionInput = {
   reasoningMode: ReasoningMode
   shellToolDefaultOpen?: boolean
   editToolDefaultOpen?: boolean
+  timelineDetail?: TimelineDetail
   pendingUserMessageIDs?: ReadonlySet<string>
   previousRows?: TimelineRow.TimelineRow[]
 }
@@ -42,6 +44,8 @@ export function createTimelineProjection(input: TimelineProjectionInput) {
     input.pendingUserMessageIDs,
     input.shellToolDefaultOpen ?? false,
     input.editToolDefaultOpen ?? false,
+    undefined,
+    input.timelineDetail,
   )
   const rows = reuseTimelineRows(input.previousRows, projection.rows)
   const rowByKey = new Map(rows.map((row) => [TimelineRow.key(row), row] as const))
@@ -75,6 +79,7 @@ export function createReactiveTimelineProjection(input: {
   reasoningMode: Accessor<ReasoningMode>
   shellToolDefaultOpen?: Accessor<boolean>
   editToolDefaultOpen?: Accessor<boolean>
+  timelineDetail?: Accessor<TimelineDetail>
   pendingUserMessageIDs?: Accessor<ReadonlySet<string>>
 }) {
   const sessionMessageByID = createMemo(
@@ -102,10 +107,12 @@ export function createReactiveTimelineProjection(input: {
       input.pendingUserMessageIDs?.(),
       input.shellToolDefaultOpen?.() ?? false,
       input.editToolDefaultOpen?.() ?? false,
-      (content, showReasoning) =>
+      (content, showReasoning, detail) =>
         content.type === "tool"
-          ? renderable(content, showReasoning)
-          : (content.type === "text" || showReasoning) && textVisible().get(content)!(),
+          ? renderable(content, showReasoning, detail)
+          : (content.type === "text" || (detail ? detail.thinking.placement !== "hidden" : showReasoning)) &&
+            textVisible().get(content)!(),
+      input.timelineDetail?.(),
     ),
   )
   const activeMessageID = createMemo(() => projection().activeMessageID)
@@ -157,6 +164,7 @@ export namespace Timeline {
     shellToolDefaultOpen = false,
     editToolDefaultOpen = false,
     isRenderable = renderable,
+    detail?: TimelineDetail,
   ) {
     type Turn = {
       id: string
@@ -208,37 +216,68 @@ export namespace Timeline {
     })
 
     const activeMessageID = turns.findLast((turn) => !pendingUserMessageIDs?.has(turn.id))?.id ?? turns.at(-1)?.id
+    const visibleNotice = (message: Notice) =>
+      !detail || detail.notices.placement !== "hidden" || timelineNoticeRequired(message)
+    const visibleTurns = detail
+      ? turns.filter((turn) => {
+          if (turn.user) return true
+          if (turn.shell && (detail.shell.placement !== "hidden" || shellFailed(turn.shell))) return true
+          return turn.entries.some((entry) =>
+            entry.type === "notice"
+              ? visibleNotice(entry.message)
+              : !!entry.message.error ||
+                !!entry.message.retry ||
+                entry.message.content.some((content) => isRenderable(content, showReasoning, detail)),
+          )
+        })
+      : turns
+    const rows: TimelineRow.TimelineRow[] = [
+      ...leading
+        .filter(visibleNotice)
+        .map((message) => new TimelineRow.Notice({ userMessageID: turns[0]?.id ?? message.id, messageID: message.id })),
+      ...visibleTurns.flatMap((turn, index) => {
+        if (turn.shell)
+          return [
+            ...(index > 0 ? [new TimelineRow.TurnGap({ userMessageID: turn.id })] : []),
+            ...(!detail || detail.shell.placement !== "hidden" || shellFailed(turn.shell)
+              ? [new TimelineRow.Shell({ userMessageID: turn.id, messageID: turn.shell.id })]
+              : []),
+            ...turn.entries.flatMap((entry) =>
+              entry.type === "notice" && visibleNotice(entry.message)
+                ? [new TimelineRow.Notice({ userMessageID: turn.id, messageID: entry.message.id })]
+                : [],
+            ),
+          ]
+        return constructMessageRows(
+          turn.user,
+          turn.id,
+          turn.entries,
+          index,
+          showReasoning,
+          status,
+          turn.id === activeMessageID,
+          shellToolDefaultOpen,
+          editToolDefaultOpen,
+          isRenderable,
+          detail,
+        )
+      }),
+    ]
     return {
       activeMessageID,
-      rows: [
-        ...leading.map(
-          (message) => new TimelineRow.Notice({ userMessageID: turns[0]?.id ?? message.id, messageID: message.id }),
-        ),
-        ...turns.flatMap((turn, index) => {
-          if (turn.shell)
-            return [
-              ...(index > 0 ? [new TimelineRow.TurnGap({ userMessageID: turn.id })] : []),
-              new TimelineRow.Shell({ userMessageID: turn.id, messageID: turn.shell.id }),
-              ...turn.entries.flatMap((entry) =>
-                entry.type === "notice"
-                  ? [new TimelineRow.Notice({ userMessageID: turn.id, messageID: entry.message.id })]
-                  : [],
-              ),
-            ]
-          return constructMessageRows(
-            turn.user,
-            turn.id,
-            turn.entries,
-            index,
-            showReasoning,
-            status,
-            turn.id === activeMessageID,
-            shellToolDefaultOpen,
-            editToolDefaultOpen,
-            isRenderable,
+      rows: detail
+        ? groupMessages(
+            rows,
+            detail,
+            new Set(
+              messages
+                .filter(
+                  (message) => timelineNoticeRequired(message) || (message.type === "shell" && shellFailed(message)),
+                )
+                .map((message) => message.id),
+            ),
           )
-        }),
-      ],
+        : rows,
     }
   }
 
@@ -253,6 +292,7 @@ export namespace Timeline {
     shellToolDefaultOpen = false,
     editToolDefaultOpen = false,
     isRenderable = renderable,
+    detail?: TimelineDetail,
   ) {
     const rows: TimelineRow.TimelineRow[] = []
     const assistantMessages = entries.flatMap((entry) => (entry.type === "assistant" ? [entry.message] : []))
@@ -261,7 +301,7 @@ export namespace Timeline {
     const compaction = entries.some((entry) => entry.type === "notice" && entry.message.type === "compaction")
     const lastContent = lastAssistant?.content.at(-1)
     const thinking =
-      showReasoning &&
+      (detail ? detail.thinking.placement === "separate" : showReasoning) &&
       isActive &&
       status.type === "busy" &&
       lastAssistant?.time.completed === undefined &&
@@ -280,7 +320,9 @@ export namespace Timeline {
     const appendAssistantSegment = (messages: SessionMessageAssistant[]) => {
       const refs = messages.flatMap((message, messageIndex) =>
         contentEntries(message)
-          .filter((entry) => isRenderable(entry.content, showReasoning) && !(thinking && entry.content === lastContent))
+          .filter(
+            (entry) => isRenderable(entry.content, showReasoning, detail) && !(thinking && entry.content === lastContent),
+          )
           .map((entry) => ({ messageID: message.id, messageIndex, partID: entry.id, content: entry.content })),
       )
       const interruptedAt = messages.findIndex((message) => isInterrupted(message.error))
@@ -288,7 +330,7 @@ export namespace Timeline {
       const after = interruptedAt < 0 ? [] : refs.filter((ref) => ref.messageIndex > interruptedAt)
       const appendGroups = (items: typeof refs) => {
         let offset = 0
-        groupContent(items, shellToolDefaultOpen, editToolDefaultOpen).forEach((group) => {
+        groupContent(items, shellToolDefaultOpen, editToolDefaultOpen, detail).forEach((group) => {
           const tool = group.type !== "part" || items[offset]?.content.type !== "text"
           offset += group.type === "part" ? 1 : group.refs.length
           rows.push(
@@ -306,7 +348,8 @@ export namespace Timeline {
 
       appendGroups(before)
       if (interruptedAt >= 0) {
-        if (!compaction) rows.push(new TimelineRow.TurnDivider({ userMessageID: turnID }))
+        if (!compaction && detail?.notices.placement !== "hidden")
+          rows.push(new TimelineRow.TurnDivider({ userMessageID: turnID }))
         appendGroups(after)
       }
 
@@ -325,6 +368,7 @@ export namespace Timeline {
           assistantSegment.push(entry.message)
           return
         case "notice":
+          if (detail?.notices.placement === "hidden" && !timelineNoticeRequired(entry.message)) return
           appendAssistantSegment(assistantSegment)
           assistantSegment = []
           rows.push(new TimelineRow.Notice({ userMessageID: turnID, messageID: entry.message.id }))
@@ -366,6 +410,48 @@ function isInterrupted(error: SessionMessageAssistant["error"]) {
   return error?.type.toLowerCase().includes("abort") || error?.type.toLowerCase().includes("interrupt")
 }
 
+function shellFailed(message: SessionMessageShell) {
+  return (
+    message.status === "timeout" || (message.status === "exited" && message.exit !== undefined && message.exit !== 0)
+  )
+}
+
+function groupMessages(rows: TimelineRow.TimelineRow[], detail: TimelineDetail, required: ReadonlySet<string>) {
+  return rows.reduce<TimelineRow.TimelineRow[]>((result, row) => {
+    const previous = result.at(-1)
+    const current =
+      ((row._tag === "Notice" && detail.notices.placement === "grouped") ||
+        (row._tag === "Shell" && detail.shell.placement === "grouped")) &&
+      !required.has(row.messageID)
+        ? new TimelineRow.AssistantPart({
+            userMessageID: row.userMessageID,
+            previousAssistantPart: previous?._tag === "AssistantPart",
+            spacing: previous?._tag === "AssistantPart" ? "tool" : undefined,
+            group: {
+              type: "context",
+              key: `message:${row.messageID}`,
+              refs: [{ messageID: row.messageID, partID: row.messageID }],
+            },
+          })
+        : row
+    if (
+      previous?._tag === "AssistantPart" &&
+      previous.group.type === "context" &&
+      current._tag === "AssistantPart" &&
+      current.group.type === "context" &&
+      previous.userMessageID === current.userMessageID
+    ) {
+      result[result.length - 1] = new TimelineRow.AssistantPart({
+        ...previous,
+        group: { ...previous.group, refs: [...previous.group.refs, ...current.group.refs] },
+      })
+      return result
+    }
+    result.push(current)
+    return result
+  }, [])
+}
+
 export function reuseTimelineRows(previous: TimelineRow.TimelineRow[] | undefined, rows: TimelineRow.TimelineRow[]) {
   if (!previous?.length) return rows
   const byKey = new Map(previous.map((row) => [TimelineRow.key(row), row] as const))
@@ -494,11 +580,14 @@ function groupPartKey(ref: PartRef) {
   return `${ref.messageID}:${ref.partID}`
 }
 
-function renderable(content: Content, showReasoning: boolean) {
+function renderable(content: Content, showReasoning: boolean, detail?: TimelineDetail) {
   if (content.type === "text") return !!content.text.trim()
-  if (content.type === "reasoning") return showReasoning && !!content.text.trim()
+  if (content.type === "reasoning")
+    return (detail ? detail.thinking.placement !== "hidden" : showReasoning) && !!content.text.trim()
+  if (detail && currentToolFailed(content)) return true
   if (content.name === "todowrite") return false
   if (content.name === "question") return content.state.status !== "streaming" && content.state.status !== "running"
+  if (detail && detail[timelineCategory(content)!].placement === "hidden") return false
   return true
 }
 
@@ -506,6 +595,7 @@ function groupContent(
   items: { messageID: string; partID: string; content: Content }[],
   shellToolDefaultOpen: boolean,
   editToolDefaultOpen: boolean,
+  detail?: TimelineDetail,
 ): PartGroup[] {
   const groups: PartGroup[] = []
   let adjacent: { type: "context" | "patch" | "edit"; refs: PartRef[]; tools: boolean } | undefined
@@ -513,7 +603,7 @@ function groupContent(
     const current = adjacent
     const first = current?.refs[0]
     if (!first) return
-    if (!current.tools) {
+    if (!current.tools && !detail) {
       groups.push(
         ...current.refs.map((ref) => ({ type: "part" as const, key: `part:${ref.messageID}:${ref.partID}`, ref })),
       )
@@ -539,9 +629,12 @@ function groupContent(
             shellToolDefaultOpen,
             editToolDefaultOpen,
             adjacent?.type === "context" && adjacent.tools,
+            detail,
           )
         : item.content.type === "reasoning"
-          ? "context"
+          ? detail && detail.thinking.placement !== "grouped"
+            ? undefined
+            : "context"
           : undefined
     if (type) {
       if (adjacent?.type !== type) flush()
@@ -566,8 +659,17 @@ function toolGroupType(
   shellExpanded: boolean,
   editExpanded: boolean,
   hasContextGroup: boolean,
+  detail?: TimelineDetail,
 ) {
-  if (content.name === "question" || hasLoadedFiles(content)) return undefined
+  if (detail) {
+    if (currentToolFailed(content) || content.name === "question") return undefined
+    const category = timelineCategory(content)!
+    if (detail[category].placement === "grouped") return "context"
+    if (content.name === "patch") return "patch"
+    if (content.name === "edit") return "edit"
+    return undefined
+  }
+  if (content.name === "question" || currentToolHasLoadedFiles(content)) return undefined
   if (content.state.status === "error") {
     if ((content.name === "shell" || content.name === "execute") && shellExpanded) return undefined
     if ((content.name === "edit" || content.name === "write" || content.name === "patch") && editExpanded)
@@ -587,12 +689,6 @@ function toolGroupType(
   return undefined
 }
 
-function hasLoadedFiles(content: Extract<Content, { type: "tool" }>) {
-  if (content.name !== "read" || content.state.status !== "completed") return false
-  const loaded = content.state.metadata?.loaded
-  return Array.isArray(loaded) && loaded.some((path) => typeof path === "string")
-}
-
 export function reasoningHeading(text: string): string | undefined {
   const markdown = text.replace(/\r\n?/g, "\n")
   const html = markdown.match(/<h[1-6][^>]*>([\s\S]*?)<\/h[1-6]>/i)
@@ -671,5 +767,5 @@ function record(value: unknown): value is Record<string, unknown> {
 function isNotice(message: SessionMessageInfo): message is Notice {
   if (message.type === "user" || message.type === "assistant" || message.type === "shell") return false
   if (message.type !== "synthetic") return true
-  return !!message.description?.trim()
+  return !!message.description?.trim() || timelineNoticeRequired(message)
 }

packages/session-ui/src/timeline/session-timeline-row.tsx

@@ -22,6 +22,8 @@ import {
 import { AssistantReasoningContent, SessionCompactionMessage } from "../message/message-content"
 import type { ContextGroupPart } from "../tools/tool-renderer"
 import { SessionRetry } from "../components/session-retry"
+import { timelineCategory, type TimelineDetail } from "./detail"
+import { currentToolFailed } from "../message/current-tool-state"
 import {
   createReactiveTimelineProjection,
   Timeline,
@@ -49,9 +51,11 @@ export function createSessionTimelineRowRenderer(input: {
   reasoningMode: Accessor<ReasoningMode>
   shellToolDefaultOpen: Accessor<boolean>
   editToolDefaultOpen: Accessor<boolean>
+  timelineDetail?: Accessor<TimelineDetail>
   disclosure: {
     value: (key: string) => boolean | undefined
     set: (key: string, open: boolean) => void
+    patchGroupKeys?: Map<string, string>
   }
   centered?: Accessor<boolean>
   padding?: Accessor<string>
@@ -59,6 +63,21 @@ export function createSessionTimelineRowRenderer(input: {
 }) {
   const i18n = useI18n()
   const data = useData()
+  // Cached timelines retain subgroup identities alongside their disclosure choices.
+  const patchGroupKeys = input.disclosure.patchGroupKeys ?? new Map<string, string>()
+  const patchPartKeys = new WeakMap<SessionMessageAssistant["content"][number], string>()
+  const patchOwners = createMemo(() => {
+    const owners = new Map<string, string>()
+    input.projection.rows().forEach((row) => {
+      if (row._tag !== "AssistantPart" || row.group.type !== "context") return
+      row.group.refs.forEach((ref) => {
+        const part = `${ref.messageID}:${ref.partID}`
+        const key = patchGroupKeys.get(part)
+        if (key && !owners.has(key)) owners.set(key, part)
+      })
+    })
+    return owners
+  })
   const workingTurn = (messageID: string) =>
     input.status().type !== "idle" && input.projection.activeMessageID() === messageID
   const duration = (messageID: string) => {
@@ -104,10 +123,35 @@ export function createSessionTimelineRowRenderer(input: {
         const group = row().group
         if (group.type !== "context") return []
         const contents = indexGroupContents(group.refs)
+        const lastAssistant = input.projection.assistantMessagesByParent().get(row().userMessageID)?.at(-1)
         return group.refs.flatMap<ContextGroupPart>((ref) => {
           const content = contents.get(ref.messageID)?.get(ref.partID)
-          if (content?.type === "tool") return [content]
-          if (content?.type === "reasoning") return [{ ...content, id: ref.partID }]
+          if (content?.type === "tool") {
+            patchPartKeys.set(content, `${ref.messageID}:${ref.partID}`)
+            return [content]
+          }
+          if (content?.type === "reasoning")
+            return [
+              {
+                ...content,
+                id: ref.partID,
+                streaming:
+                  workingTurn(row().userMessageID) &&
+                  input.status().type === "busy" &&
+                  lastAssistant?.id === ref.messageID &&
+                  lastAssistant.time.completed === undefined &&
+                  !lastAssistant.error &&
+                  !lastAssistant.retry &&
+                  lastAssistant.content.at(-1) === content &&
+                  content.time?.completed === undefined,
+              },
+            ]
+          const message = input.projection.messageByID().get(ref.messageID)
+          if (ref.messageID !== ref.partID || !message) return []
+          if (message.type === "shell")
+            return [{ type: "shell", id: ref.partID, render: () => <Shell messageID={ref.messageID} grouped /> }]
+          if (message.type !== "assistant" && message.type !== "user")
+            return [{ type: "notice", id: ref.partID, render: () => <Notice messageID={ref.messageID} grouped /> }]
           return []
         })
       })
@@ -115,9 +159,30 @@ export function createSessionTimelineRowRenderer(input: {
       return (
         <SessionContextToolGroup
           parts={parts()}
-          reasoningDefaultOpen={input.reasoningMode() === "full"}
+          patchGroupKey={(tools) => {
+            const parts = tools.map((tool) => patchPartKeys.get(tool)!)
+            // After a split, only the subgroup with the earliest surviving member keeps the old anchor.
+            const key =
+              parts
+                .map((part) => patchGroupKeys.get(part))
+                .find((key) => key !== undefined && parts.includes(patchOwners().get(key)!)) ?? parts[0]!
+            parts.forEach((part) => patchGroupKeys.set(part, key))
+            return key
+          }}
+          reasoningDefaultOpen={
+            input.timelineDetail
+              ? input.timelineDetail().thinking.details === "expanded"
+              : input.reasoningMode() === "full"
+          }
           reasoningOpen={(id) => input.disclosure.value(id)}
           onReasoningOpenChange={(id, open) => input.disclosure.set(id, open)}
+          toolDefaultOpen={(tool) => (input.timelineDetail ? contentDefaultOpen(tool) : false)}
+          toolOpen={(id) => input.disclosure.value(`${row().group.key}:tool:${id}`)}
+          onToolOpenChange={(id, open) => input.disclosure.set(`${row().group.key}:tool:${id}`, open)}
+          fileOpen={(path) =>
+            input.disclosure.value(`patch:${path}`) ?? input.timelineDetail?.().edit.details === "expanded"
+          }
+          onFileOpenChange={(path, open) => input.disclosure.set(`patch:${path}`, open)}
           open={input.disclosure.value(key()) === true}
           busy={
             workingTurn(row().userMessageID) &&
@@ -155,6 +220,7 @@ export function createSessionTimelineRowRenderer(input: {
           fileOpen={(path) => {
             const open = input.disclosure.value(`${row().group.key}:file:${path}`)
             if (open !== undefined) return open
+            if (input.timelineDetail) return input.timelineDetail().edit.details === "expanded"
             if (tools()[0]?.name !== "edit" || path !== firstPath()) return false
             return input.disclosure.value(row().group.key) ?? input.editToolDefaultOpen()
           }}
@@ -179,9 +245,7 @@ export function createSessionTimelineRowRenderer(input: {
     })
     const defaultOpen = createMemo(() => {
       const item = content()
-      if (!item) return undefined
-      if (item.type === "reasoning") return input.reasoningMode() === "full"
-      return currentContentDefaultOpen(item, input.shellToolDefaultOpen(), input.editToolDefaultOpen())
+      return item ? contentDefaultOpen(item) : undefined
     })
     const disclosureKey = () => (content()?.type === "reasoning" ? ref()!.partID : row().group.key)
     return (
@@ -207,6 +271,17 @@ export function createSessionTimelineRowRenderer(input: {
     )
   }
 
+  function contentDefaultOpen(item: SessionMessageAssistant["content"][number]) {
+    if (input.timelineDetail) {
+      if (item.type === "tool" && currentToolFailed(item)) return true
+      const category = timelineCategory(item)
+      if (category === "shell" || category === "edit" || category === "thinking")
+        return input.timelineDetail()[category].details === "expanded"
+    }
+    if (item.type === "reasoning") return input.reasoningMode() === "full"
+    return currentContentDefaultOpen(item, input.shellToolDefaultOpen(), input.editToolDefaultOpen())
+  }
+
   const notice = (message: SessionMessageInfo) => {
     if (message.type === "agent-switched")
       return {
@@ -271,6 +346,168 @@ export function createSessionTimelineRowRenderer(input: {
     </div>
   )
 
+  function Notice(props: { messageID: string; grouped?: boolean }) {
+    const inset = () => (props.grouped ? "" : padding())
+    const message = createMemo(() => input.projection.messageByID().get(props.messageID))
+    const compaction = createMemo(() => {
+      const value = message()
+      return value?.type === "compaction" ? value : undefined
+    })
+    const compactionError = createMemo(() => {
+      const value = compaction()
+      if (value?.status !== "failed") return ""
+      return unwrapErrorMessage(value.error.message)
+    })
+    const moved = createMemo(() => {
+      const value = message()
+      return value?.type === "location-switched" ? value : undefined
+    })
+    const model = createMemo(() => {
+      const value = message()
+      if (value?.type !== "model-switched") return undefined
+      const match = data.store.provider?.all?.get(value.model.providerID)
+      return {
+        providerID: value.model.providerID,
+        variant: value.model.variant,
+        label: i18n.t("ui.sessionTimeline.notice.modelSwitched", {
+          model: match?.models?.[value.model.id]?.name ?? value.model.id,
+        }),
+      }
+    })
+    const content = createMemo(() => {
+      const value = message()
+      return value ? notice(value) : undefined
+    })
+    return (
+      <>
+        <Show when={compaction()}>
+          {(message) => (
+            <div data-slot="session-turn-message-container" class={`w-full ${inset()}`}>
+              <div data-slot="session-turn-compaction">
+                <SessionCompactionMessage message={message()} error={compactionError()} />
+              </div>
+            </div>
+          )}
+        </Show>
+        <Show
+          when={moved()}
+          fallback={
+            <Show
+              when={model()}
+              fallback={
+                <Show when={content()}>
+                  {(content) => (
+                    <Show
+                      when={content().items?.length}
+                      fallback={
+                        <div
+                          data-slot="session-timeline-notice"
+                          class={`w-full truncate ${props.grouped ? "py-1" : "pt-3 pb-1"} text-13-regular leading-text-compact text-text-weak ${inset()}`}
+                        >
+                          <bdi dir="auto" class="text-13-medium">
+                            {content().label}
+                          </bdi>
+                          <Show when={content().data}>
+                            {(data) => (
+                              <span>
+                                {" "}
+                                · <bdi dir="auto">{data()}</bdi>
+                              </span>
+                            )}
+                          </Show>
+                        </div>
+                      }
+                    >
+                      <div data-slot="session-timeline-notice" class={`w-full py-1 ${inset()}`}>
+                        <div class="flex min-h-5 min-w-0 items-center gap-2 overflow-hidden">
+                          <bdi
+                            dir="auto"
+                            class="shrink-0 text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-faint"
+                          >
+                            {content().label}
+                          </bdi>
+                          <For each={content().items}>
+                            {(item) => (
+                              <bdi
+                                dir="auto"
+                                class="min-w-0 truncate text-[13px] font-[440] leading-text-compact tracking-[-0.04px] text-v2-text-text-faint"
+                              >
+                                {item}
+                              </bdi>
+                            )}
+                          </For>
+                        </div>
+                      </div>
+                    </Show>
+                  )}
+                </Show>
+              }
+            >
+              {(model) => (
+                <div data-slot="session-timeline-notice" data-type="model-switched" class={`w-full py-2 ${inset()}`}>
+                  <TimelineSeparator label={model().label} providerID={model().providerID} variant={model().variant} />
+                </div>
+              )}
+            </Show>
+          }
+        >
+          {(message) => (
+            <div
+              data-slot="session-timeline-notice"
+              data-type="location-switched"
+              class={`flex h-7 w-full min-w-0 items-center gap-2 py-1 text-[13px] leading-text-compact tracking-[-0.04px] text-v2-text-text-faint ${inset()}`}
+            >
+              <Tooltip
+                appearance="compact"
+                placement="top"
+                value={i18n.t("ui.sessionTimeline.notice.movedTooltip")}
+                class="shrink-0"
+                triggerTabIndex={0}
+              >
+                <bdi data-slot="session-timeline-notice-label" dir="auto" class="font-[530]">
+                  {i18n.t("ui.sessionTimeline.notice.movedTo")}
+                </bdi>
+              </Tooltip>{" "}
+              <bdi data-slot="session-timeline-notice-value" dir="ltr" class="min-w-0 truncate font-[440]">
+                {message().location.directory}
+              </bdi>
+            </div>
+          )}
+        </Show>
+      </>
+    )
+  }
+
+  function Shell(props: { messageID: string; grouped?: boolean }) {
+    const message = createMemo(() => {
+      const value = input.projection.messageByID().get(props.messageID)
+      return value?.type === "shell" ? value : undefined
+    })
+    const defaultOpen = createMemo(() => {
+      if (!input.timelineDetail) return input.shellToolDefaultOpen()
+      const value = message()
+      return (
+        input.timelineDetail().shell.details === "expanded" ||
+        value?.status === "timeout" ||
+        (value?.status === "exited" && value.exit !== undefined && value.exit !== 0)
+      )
+    })
+    return (
+      <Show when={message()}>
+        {(message) => (
+          <div data-slot="session-turn-message-container" class={`w-full ${props.grouped ? "" : padding()}`}>
+            <SessionShellMessage
+              message={message()}
+              defaultOpen={defaultOpen()}
+              open={input.disclosure.value(message().id) ?? (input.timelineDetail ? defaultOpen() : undefined)}
+              onOpenChange={(open) => input.disclosure.set(message().id, open)}
+            />
+          </div>
+        )}
+      </Show>
+    )
+  }
+
   const render = (row: Accessor<TimelineRow.TimelineRow>, onSizeChange?: () => void) => {
     if (row()._tag === "TurnGap") return <div data-timeline-row="TurnGap" aria-hidden="true" class="h-6" />
     if (row()._tag === "UserMessage") {
@@ -315,24 +552,9 @@ export function createSessionTimelineRowRenderer(input: {
         if (value._tag !== "Shell") throw new Error("Expected a shell timeline row")
         return value
       }
-      const message = createMemo(() => {
-        const value = input.projection.messageByID().get(current().messageID)
-        return value?.type === "shell" ? value : undefined
-      })
       return (
         <Frame row={current()}>
-          <Show when={message()}>
-            {(message) => (
-              <div data-slot="session-turn-message-container" class={`w-full ${padding()}`}>
-                <SessionShellMessage
-                  message={message()}
-                  defaultOpen={input.shellToolDefaultOpen()}
-                  open={input.disclosure.value(message().id)}
-                  onOpenChange={(open) => input.disclosure.set(message().id, open)}
-                />
-              </div>
-            )}
-          </Show>
+          <Shell messageID={current().messageID} />
         </Frame>
       )
     }
@@ -342,140 +564,9 @@ export function createSessionTimelineRowRenderer(input: {
         if (value._tag !== "Notice") throw new Error("Expected a notice timeline row")
         return value
       }
-      const message = createMemo(() => input.projection.messageByID().get(current().messageID))
-      const compaction = createMemo(() => {
-        const value = message()
-        return value?.type === "compaction" ? value : undefined
-      })
-      const compactionError = createMemo(() => {
-        const value = compaction()
-        if (value?.status !== "failed") return ""
-        return unwrapErrorMessage(value.error.message)
-      })
-      const moved = createMemo(() => {
-        const value = message()
-        return value?.type === "location-switched" ? value : undefined
-      })
-      const model = createMemo(() => {
-        const value = message()
-        if (value?.type !== "model-switched") return undefined
-        const match = data.store.provider?.all?.get(value.model.providerID)
-        return {
-          providerID: value.model.providerID,
-          variant: value.model.variant,
-          label: i18n.t("ui.sessionTimeline.notice.modelSwitched", {
-            model: match?.models?.[value.model.id]?.name ?? value.model.id,
-          }),
-        }
-      })
-      const content = createMemo(() => {
-        const value = message()
-        return value ? notice(value) : undefined
-      })
       return (
         <Frame row={current()}>
-          <Show when={compaction()}>
-            {(message) => (
-              <div data-slot="session-turn-message-container" class={`w-full ${padding()}`}>
-                <div data-slot="session-turn-compaction">
-                  <SessionCompactionMessage message={message()} error={compactionError()} />
-                </div>
-              </div>
-            )}
-          </Show>
-          <Show
-            when={moved()}
-            fallback={
-              <Show
-                when={model()}
-                fallback={
-                  <Show when={content()}>
-                    {(content) => (
-                      <Show
-                        when={content().items?.length}
-                        fallback={
-                          <div
-                            data-slot="session-timeline-notice"
-                            class={`w-full truncate pt-3 pb-1 text-13-regular text-text-weak ${padding()}`}
-                          >
-                            <bdi dir="auto" class="text-13-medium">
-                              {content().label}
-                            </bdi>
-                            <Show when={content().data}>
-                              {(data) => (
-                                <span>
-                                  {" "}
-                                  · <bdi dir="auto">{data()}</bdi>
-                                </span>
-                              )}
-                            </Show>
-                          </div>
-                        }
-                      >
-                        <div data-slot="session-timeline-notice" class={`w-full py-1 ${padding()}`}>
-                          <div class="flex min-h-5 min-w-0 items-center gap-2 overflow-hidden">
-                            <bdi
-                              dir="auto"
-                              class="shrink-0 text-[13px] font-[530] leading-text-compact tracking-[-0.04px] text-v2-text-text-faint"
-                            >
-                              {content().label}
-                            </bdi>
-                            <For each={content().items}>
-                              {(item) => (
-                                <bdi
-                                  dir="auto"
-                                  class="min-w-0 truncate text-[13px] font-[440] leading-text-compact tracking-[-0.04px] text-v2-text-text-faint"
-                                >
-                                  {item}
-                                </bdi>
-                              )}
-                            </For>
-                          </div>
-                        </div>
-                      </Show>
-                    )}
-                  </Show>
-                }
-              >
-                {(model) => (
-                  <div
-                    data-slot="session-timeline-notice"
-                    data-type="model-switched"
-                    class={`w-full py-2 ${padding()}`}
-                  >
-                    <TimelineSeparator
-                      label={model().label}
-                      providerID={model().providerID}
-                      variant={model().variant}
-                    />
-                  </div>
-                )}
-              </Show>
-            }
-          >
-            {(message) => (
-              <div
-                data-slot="session-timeline-notice"
-                data-type="location-switched"
-                class={`flex h-7 w-full min-w-0 items-center gap-2 py-1 text-[13px] leading-text-compact tracking-[-0.04px] text-v2-text-text-faint ${padding()}`}
-              >
-                <Tooltip
-                  appearance="compact"
-                  placement="top"
-                  value={i18n.t("ui.sessionTimeline.notice.movedTooltip")}
-                  class="shrink-0"
-                  triggerTabIndex={0}
-                >
-                  <bdi data-slot="session-timeline-notice-label" dir="auto" class="font-[530]">
-                    {i18n.t("ui.sessionTimeline.notice.movedTo")}
-                  </bdi>
-                </Tooltip>{" "}
-                <bdi data-slot="session-timeline-notice-value" dir="ltr" class="min-w-0 truncate font-[440]">
-                  {message().location.directory}
-                </bdi>
-              </div>
-            )}
-          </Show>
+          <Notice messageID={current().messageID} />
         </Frame>
       )
     }
@@ -536,8 +627,15 @@ export function createSessionTimelineRowRenderer(input: {
                     id={current().ref.partID}
                     content={content()}
                     streaming
-                    defaultOpen={input.reasoningMode() === "full"}
-                    open={input.disclosure.value(current().ref.partID)}
+                    defaultOpen={
+                      input.timelineDetail
+                        ? input.timelineDetail().thinking.details === "expanded"
+                        : input.reasoningMode() === "full"
+                    }
+                    open={
+                      input.disclosure.value(current().ref.partID) ??
+                      (input.timelineDetail ? input.timelineDetail().thinking.details === "expanded" : undefined)
+                    }
                     onOpenChange={(open) => input.disclosure.set(current().ref.partID, open)}
                     onContentRendered={onSizeChange}
                   />

packages/session-ui/src/tools/tool-renderer.tsx

@@ -44,9 +44,11 @@ import type {
 } from "@opencode-ai/client/promise"
 import {
   currentToolError,
+  currentToolHasLoadedFiles,
   currentToolInput,
   currentToolMetadata,
   currentToolOutput,
+  executeToolFailed,
 } from "../message/current-tool-state"
 import { AssistantReasoningContent, writeClipboard } from "../message/message-content"
 
@@ -480,7 +482,10 @@ function ExaOutput(props: { output?: string }) {
   )
 }
 
-export type ContextGroupPart = SessionMessageAssistantTool | (SessionMessageAssistantReasoning & { id: string })
+export type ContextGroupPart =
+  | SessionMessageAssistantTool
+  | (SessionMessageAssistantReasoning & { id: string; streaming?: boolean })
+  | { type: "notice" | "shell"; id: string; render: () => JSX.Element }
 
 export function CurrentContextToolGroup(props: {
   parts: ContextGroupPart[]
@@ -491,6 +496,12 @@ export function CurrentContextToolGroup(props: {
   reasoningDefaultOpen?: boolean
   reasoningOpen?: (id: string) => boolean | undefined
   onReasoningOpenChange?: (id: string, open: boolean) => void
+  toolDefaultOpen?: (tool: SessionMessageAssistantTool) => boolean | undefined
+  toolOpen?: (id: string) => boolean | undefined
+  onToolOpenChange?: (id: string, open: boolean) => void
+  fileOpen?: (path: string) => boolean | undefined
+  onFileOpenChange?: (path: string, open: boolean) => void
+  patchGroupKey?: (tools: SessionMessageAssistantTool[]) => string
 }) {
   const i18n = useI18n()
   const tools = createMemo(() => props.parts.filter((part) => part.type === "tool"))
@@ -499,14 +510,16 @@ export function CurrentContextToolGroup(props: {
   )
   const names = createMemo(() =>
     [
-      ...tools().reduce((counts, tool) => {
-        const input = currentToolInput(tool)
+      ...props.parts.reduce((counts, part) => {
+        if (part.type !== "tool" && part.type !== "shell") return counts
         const name =
-          tool.name === "skill"
-            ? i18n.t("ui.tool.skill")
-            : tool.name === "subagent"
-              ? i18n.t("ui.tool.agent.default")
-              : getToolInfo(tool.name, input, currentToolMetadata(tool)).title
+          part.type !== "tool"
+            ? i18n.t("ui.tool.shell")
+            : part.name === "skill"
+              ? i18n.t("ui.tool.skill")
+              : part.name === "subagent"
+                ? i18n.t("ui.tool.agent.default")
+                : getToolInfo(part.name, currentToolInput(part), currentToolMetadata(part)).title
         counts.set(name, (counts.get(name) ?? 0) + 1)
         return counts
       }, new Map<string, number>()),
@@ -515,15 +528,22 @@ export function CurrentContextToolGroup(props: {
       .join(", "),
   )
   const label = createMemo(() => {
-    const title = names()
+    const notices = props.parts.filter((part) => part.type === "notice").length
+    if (!names() && !notices) {
+      const title = i18n.t("ui.messagePart.context.reasoning")
+      return { text: title, title, before: "", after: "" }
+    }
+    const title = [names(), notices ? i18n.plural("ui.messagePart.context.notice", notices) : undefined]
+      .filter(Boolean)
+      .join(", ")
     const text = i18n.t("ui.messagePart.tools.used", { tools: title })
     const index = text.indexOf(title)
     return { text, title, before: text.slice(0, index).trim(), after: text.slice(index + title.length).trim() }
   })
   const items = createMemo(() =>
-    props.parts.reduce<(SessionMessageAssistantTool[] | (SessionMessageAssistantReasoning & { id: string }))[]>(
+    props.parts.reduce<(SessionMessageAssistantTool[] | Exclude<ContextGroupPart, SessionMessageAssistantTool>)[]>(
       (groups, tool) => {
-        if (tool.type === "reasoning") {
+        if (tool.type !== "tool") {
           groups.push(tool)
           return groups
         }
@@ -556,6 +576,15 @@ export function CurrentContextToolGroup(props: {
       [],
     ),
   )
+  const patchKeys = createMemo(() => {
+    const keys = new Map<SessionMessageAssistantTool, string>()
+    items().forEach((item) => {
+      if (!Array.isArray(item) || item[0]?.name !== "patch" || item[0].state.status === "error") return
+      const key = props.patchGroupKey?.(item) ?? item[0].id
+      item.forEach((tool) => keys.set(tool, key))
+    })
+    return keys
+  })
   const change = (open: boolean) => {
     props.onOpenChange(open)
     props.onSizeChange?.()
@@ -594,19 +623,30 @@ export function CurrentContextToolGroup(props: {
               })
               const reasoning = createMemo(() => {
                 const value = item()
-                return Array.isArray(value) ? undefined : value
+                return !Array.isArray(value) && value.type === "reasoning" ? value : undefined
+              })
+              const callback = createMemo(() => {
+                const value = item()
+                return !Array.isArray(value) && (value.type === "notice" || value.type === "shell") ? value : undefined
               })
               return (
                 <Show
                   when={group()}
                   fallback={
-                    <Show when={reasoning()}>
+                    <Show
+                      when={reasoning()}
+                      fallback={
+                        <Show when={callback()}>
+                          {(part) => <div data-slot="context-tool-group-item">{part().render()}</div>}
+                        </Show>
+                      }
+                    >
                       {(part) => (
                         <div data-slot="context-tool-group-item">
                           <AssistantReasoningContent
                             id={part().id}
                             content={part()}
-                            streaming={false}
+                            streaming={part().streaming ?? false}
                             defaultOpen={props.reasoningDefaultOpen}
                             open={props.reasoningOpen?.(part().id)}
                             onOpenChange={(open) => props.onReasoningOpenChange?.(part().id, open)}
@@ -636,7 +676,8 @@ export function CurrentContextToolGroup(props: {
                           when={
                             tool().state.status !== "error" &&
                             ["read", "glob", "grep", "list"].includes(tool().name) &&
-                            !(tool().name === "read" && readImagePath(currentToolInput(tool())))
+                            !(tool().name === "read" && readImagePath(currentToolInput(tool()))) &&
+                            !currentToolHasLoadedFiles(tool())
                           }
                           fallback={
                             <Show
@@ -653,14 +694,28 @@ export function CurrentContextToolGroup(props: {
                                       output={currentToolOutput(tool())}
                                       error={currentToolError(tool())}
                                       status={tool().state.status}
-                                      defaultOpen={false}
+                                      defaultOpen={props.toolDefaultOpen?.(tool()) ?? false}
+                                      open={props.toolOpen?.(tool().id) ?? props.toolDefaultOpen?.(tool())}
+                                      onOpenChange={(open) => props.onToolOpenChange?.(tool().id, open)}
                                       deferContent
                                       virtualizeDiff={false}
                                       onContentRendered={props.onSizeChange}
                                     />
                                   }
                                 >
-                                  <CurrentFileToolGroup tools={group()} onSizeChange={props.onSizeChange} />
+                                  <CurrentFileToolGroup
+                                    tools={group()}
+                                    fileOpen={
+                                      props.fileOpen &&
+                                      ((path) => props.fileOpen?.(`${patchKeys().get(tool())}:${path}`))
+                                    }
+                                    onFileOpenChange={
+                                      props.onFileOpenChange &&
+                                      ((path, open) =>
+                                        props.onFileOpenChange?.(`${patchKeys().get(tool())}:${path}`, open))
+                                    }
+                                    onSizeChange={props.onSizeChange}
+                                  />
                                 </Show>
                               }
                             >
@@ -1044,19 +1099,7 @@ function toolErrorSubtitle(props: ToolProps, i18n: UiI18n) {
 function toolDisplayError(props: ToolProps & { error?: string }, fallback: string) {
   if (props.status === "error") return props.error
   if (props.tool !== "execute") return undefined
-  const calls = props.metadata.toolCalls
-  const failed =
-    props.metadata.error === true ||
-    (Array.isArray(calls) &&
-      calls.some(
-        (call) =>
-          call !== null &&
-          typeof call === "object" &&
-          !Array.isArray(call) &&
-          "status" in call &&
-          call.status === "error",
-      ))
-  if (!failed) return undefined
+  if (!executeToolFailed(props.metadata)) return undefined
   if (typeof props.output === "string" && props.output) return props.output
   return fallback
 }
@@ -1398,13 +1441,13 @@ ToolRegistry.register({
                 <span data-slot="basic-tool-tool-subtitle">{subtitle()}</span>
               </Show>
             </div>
+            <Show when={clickable()}>
+              <div data-component="task-tool-action">
+                <Icon name="chevron-right" size="small" />
+              </div>
+            </Show>
           </div>
         </div>
-        <Show when={clickable()}>
-          <div data-component="task-tool-action">
-            <Icon name="square-arrow-top-right" size="small" />
-          </div>
-        </Show>
       </div>
     )
 

packages/tui/src/feature-plugins/system/plugins.tsx

@@ -1,5 +1,6 @@
 import type { PluginInfo } from "@opencode-ai/client"
 import { Plugin } from "@opencode-ai/plugin/tui"
+import path from "path"
 import { createEffect, createMemo, createResource, createSignal, onCleanup, onMount, Show } from "solid-js"
 import { DialogErrorDetails } from "../../component/dialog-error-details"
 import { Spinner } from "../../component/spinner"
@@ -37,7 +38,7 @@ export function PluginsDialog(props: {
     () => (props.server ? undefined : (props.context.location ?? props.context.data.location.default())),
     (location) => props.context.client.plugin.list({ location }).then((result) => result.data),
   )
-  onMount(() => dialog.setSize("medium"))
+  onMount(() => dialog.setSize("large"))
   onCleanup(props.context.data.on("plugin.updated", () => void refetch()))
   const updating = (entry: Entry) =>
     pending().includes(entry.key) ||
@@ -167,13 +168,6 @@ export function PluginsDialog(props: {
       .check({ location: props.context.location ?? props.context.data.location.default() })
       .then((result) => {
         mutate(result.data)
-        const count = result.data.filter(
-          (plugin) => plugin.source.type === "package" && plugin.source.outdated === true,
-        ).length
-        props.context.ui.toast.show({
-          variant: count ? "info" : "success",
-          message: count ? `${count} plugin update${count === 1 ? "" : "s"} available` : "All plugins are up to date",
-        })
       })
       .catch((cause) => {
         props.context.ui.toast.show({
@@ -218,19 +212,7 @@ export function PluginsDialog(props: {
             }}
             actions={[
               {
-                title: toggleTitle(),
-                command: "plugins.toggle",
-                hidden: !focusedTui(),
-                onTrigger: (option) => toggle(entries().find((entry) => entry.key === option.value)),
-              },
-              {
-                title: "update",
-                command: "dialog.plugins.update",
-                hidden: !updatable(focusedEntry()),
-                onTrigger: (option) => update(entries().find((entry) => entry.key === option.value)),
-              },
-              {
-                title: checking() ? "checking" : "check",
+                title: checking() ? "checking for updates" : "check for updates",
                 command: "dialog.plugins.check",
                 selection: "none",
                 hidden: !entries().some(
@@ -239,6 +221,20 @@ export function PluginsDialog(props: {
                 disabled: checking(),
                 onTrigger: check,
               },
+              {
+                title: toggleTitle(),
+                command: "plugins.toggle",
+                side: "right",
+                hidden: !focusedTui(),
+                onTrigger: (option) => toggle(entries().find((entry) => entry.key === option.value)),
+              },
+              {
+                title: "update",
+                command: "dialog.plugins.update",
+                side: "right",
+                hidden: !updatable(focusedEntry()),
+                onTrigger: (option) => update(entries().find((entry) => entry.key === option.value)),
+              },
             ]}
             footer={
               <Show when={pluginError(focusedEntry())}>
@@ -262,7 +258,7 @@ export function PluginsDialog(props: {
             context={`Plugin: ${label(entry(), props.context)}\nStatus: failed\nRuntime: ${entry().runtime}\nSource: ${pluginSource(entry(), props.context)}`}
             onBack={() => {
               setDetail()
-              dialog.setSize("medium")
+              dialog.setSize("large")
             }}
           />
         )}
@@ -287,6 +283,14 @@ function source(plugin: PluginInfo, context: Plugin.Context) {
   return plugin.source.type
 }
 
+function isLocal(entry: Entry) {
+  if (entry.runtime === "server") return entry.plugin.source.type === "local"
+  const target = entry.target
+  return (
+    target.startsWith("file://") || target.startsWith("./") || target.startsWith("../") || path.isAbsolute(target)
+  )
+}
+
 function status(entry: Entry) {
   if (entry.runtime === "server") return entry.plugin.state.status
   return entry.status
@@ -299,6 +303,7 @@ function outdated(entry: Entry) {
 function footer(entry: Entry) {
   const details = [
     ...(status(entry) === "active" ? [] : [status(entry)]),
+    ...(isLocal(entry) ? ["local"] : []),
     ...(entry.runtime === "server" && entry.plugin.source.type === "package" && entry.plugin.source.version
       ? [displayVersion(entry.plugin.source.version)]
       : []),

packages/tui/test/cli/tui/plugins-dialog.test.tsx

@@ -93,7 +93,7 @@ async function renderPlugins(root: string, inventory: { list: PluginInfo[]; chec
 
   const app = await testRender(() => <Harness />, { width: 80, height: 20, kittyKeyboard: true })
   app.renderer.start()
-  await app.waitForFrame((frame) => frame.includes("Plugins"))
+  await app.waitForFrame((frame) => frame.includes("team.plugins") || frame.includes("local.plugin"))
   return { app, requests, toasts }
 }
 
@@ -102,16 +102,16 @@ test("checking for updates refreshes the inventory and reveals the update action
   const fixture = await renderPlugins(tmp.path, { list: [packagePlugin(false)], check: [packagePlugin(true)] })
 
   try {
-    const initial = await fixture.app.waitForFrame((frame) => frame.includes("dadba13"))
-    expect(initial).toContain("check ctrl+r")
-    expect(initial).not.toContain("update available")
-    expect(initial).not.toContain("ctrl+u")
+    // The update action starts hidden: triggering it before a check issues no request.
+    fixture.app.mockInput.pressKey("u", { ctrl: true })
+    await fixture.app.flush()
+    expect(fixture.requests).toEqual([])
 
     fixture.app.mockInput.pressKey("r", { ctrl: true })
-    const checked = await fixture.app.waitForFrame((frame) => frame.includes("update available"))
-    expect(checked).toContain("ctrl+u")
+    await fixture.app.waitFor(() => fixture.requests.length === 1)
     expect(fixture.requests).toEqual([{ path: "/api/plugin/check", body: {} }])
-    expect(fixture.toasts).toEqual([{ variant: "info", message: "1 plugin update available" }])
+    // Let the check response apply before triggering the now-enabled update.
+    await fixture.app.flush()
 
     fixture.app.mockInput.pressKey("u", { ctrl: true })
     await fixture.app.waitFor(() => fixture.requests.length === 2)
@@ -126,12 +126,12 @@ test("checking for updates reports an up-to-date inventory", async () => {
   const fixture = await renderPlugins(tmp.path, { list: [packagePlugin(false)], check: [packagePlugin(false)] })
 
   try {
-    await fixture.app.waitForFrame((frame) => frame.includes("dadba13"))
     fixture.app.mockInput.pressKey("r", { ctrl: true })
-    await fixture.app.waitFor(() => fixture.toasts.length === 1)
+    await fixture.app.waitFor(() => fixture.requests.length === 1)
+    await fixture.app.flush()
 
-    expect(fixture.toasts).toEqual([{ variant: "success", message: "All plugins are up to date" }])
     expect(fixture.requests).toEqual([{ path: "/api/plugin/check", body: {} }])
+    expect(fixture.toasts).toEqual([])
   } finally {
     fixture.app.renderer.destroy()
   }
@@ -148,9 +148,6 @@ test("the check action stays hidden without package plugins", async () => {
   const fixture = await renderPlugins(tmp.path, { list: [local], check: [] })
 
   try {
-    const frame = await fixture.app.waitForFrame((frame) => frame.includes("local.plugin"))
-    expect(frame).not.toContain("ctrl+r")
-
     fixture.app.mockInput.pressKey("r", { ctrl: true })
     await fixture.app.flush()
     expect(fixture.requests).toEqual([])

packages/ui/src/actions/split-button/split-button.css

@@ -9,6 +9,7 @@
   overflow: hidden;
 }
 
+[data-component="split-button-v2"].session-review-v2-open-in-app,
 [data-component="split-button-v2"]:is(:hover, :has([data-component="split-button-v2-menu-trigger"][data-expanded])) {
   box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
 }

packages/ui/src/actions/split-button/split-button.stories.tsx

@@ -1,4 +1,5 @@
 import { Icon } from "@opencode-ai/ui/icon"
+import { AppIcon } from "@opencode-ai/ui/app-icon"
 import { SplitButton, SplitButtonAction, SplitButtonMenuTrigger } from "./split-button"
 
 export default {
@@ -29,3 +30,16 @@ export const Disabled = {
     </SplitButton>
   ),
 }
+
+export const OpenIn = {
+  render: () => (
+    <SplitButton class="session-review-v2-open-in-app">
+      <SplitButtonAction aria-label="Open in Finder">
+        <AppIcon id="finder" />
+      </SplitButtonAction>
+      <SplitButtonMenuTrigger aria-label="Open options">
+        <Icon name="chevron-down" size="small" />
+      </SplitButtonMenuTrigger>
+    </SplitButton>
+  ),
+}

packages/ui/src/forms/select/select.tsx

@@ -181,6 +181,8 @@ export function Select<T>(props: SelectProps<T>) {
     >
       <Trigger
         as="div"
+        aria-label={props["aria-label"]}
+        aria-labelledby={props["aria-labelledby"]}
         data-component="select-v2"
         data-appearance="inline"
         data-invalid={local.invalid ? "" : undefined}

packages/ui/src/i18n/en.ts

@@ -108,6 +108,9 @@ const source = {
   "ui.messagePart.context.search.other": "{{count}} searches",
   "ui.messagePart.context.list.one": "{{count}} list",
   "ui.messagePart.context.list.other": "{{count}} lists",
+  "ui.messagePart.context.notice.one": "{{count}} notice",
+  "ui.messagePart.context.notice.other": "{{count}} notices",
+  "ui.messagePart.context.reasoning": "Reasoning",
   "ui.messagePart.context.match.one": "({{count}} match)",
   "ui.messagePart.context.match.other": "({{count}} matches)",
   "ui.messagePart.tools.used": "Used {{tools}}",

packages/ui/src/icons/icon/icon.tsx

@@ -6,7 +6,7 @@ import "./icon.css"
 const icons = {
   edit: {
     viewBox: "0 0 16 16",
-    body: `<path d="M13.5555 8.21534V13.5556H2.44434L2.44434 2.4445H7.78462M6.88878 9.11119C6.88878 9.11119 8.96327 9.0367 9.69678 8.3032L14.0301 3.96986C14.5824 3.4176 14.5824 2.52213 14.0301 1.96986C13.4778 1.4176 12.5824 1.4176 12.0301 1.96986L7.69678 6.3032C7.00513 6.99484 6.88878 9.11119 6.88878 9.11119Z" stroke="currentColor"/>`,
+    body: `<path d="M13.5556 8.21529V13.5556H2.44446L2.44446 2.44445H7.78474M6.00002 8.16216V10H7.83786L14 3.83784L12.1622 2L6.00002 8.16216Z" stroke="currentColor"/>`,
   },
   "folder-add-left": {
     viewBox: "0 0 16 16",

packages/ui/src/typography/wordmark/wordmark.tsx

@@ -11,7 +11,7 @@ export function Wordmark(props: Pick<ComponentProps<"svg">, "class">) {
       fill="none"
       classList={{ [props.class ?? ""]: !!props.class }}
     >
-      <g opacity="0.6">
+      <g opacity="0.6" class="[[data-color-scheme=dark]_&]:opacity-100">
         <g mask={`url(#${mask})`}>
           <g opacity="0.16">
             <path

packages/www/src/docs/content/build/plugins/effect.mdx

@@ -644,7 +644,8 @@ effect: (ctx) =>
   }),
 ```
 
-Add or remove local and Git references, then reload after external state changes.
+Add or remove local and Git references, then reload after external state changes. `get(name)` returns the current configured
+source, or `undefined` when the name is absent.
 
 ```ts
 effect: (ctx) =>
@@ -653,6 +654,7 @@ effect: (ctx) =>
     yield* reference.transform((editor) => {
       editor.add("handbook", { type: "local", path: "/workspace/docs/handbook" })
       editor.add("standards", { type: "git", repository: "https://github.com/acme/standards", branch: "main" })
+      const handbook = editor.get("handbook")
       editor.remove("legacy")
     })
     yield* reference.reload()
@@ -667,6 +669,7 @@ interface ReferenceEditor {
   add(name: string, source: ReferenceLocalSource | ReferenceGitSource): void
   remove(name: string): void
   list(): readonly (readonly [string, ReferenceLocalSource | ReferenceGitSource])[]
+  get(name: string): ReferenceLocalSource | ReferenceGitSource | undefined
 }
 
 interface ReferenceDomain extends ReferenceApi<unknown> {
@@ -747,7 +750,8 @@ effect: (ctx) =>
   }),
 ```
 
-Transform and reload skills. Use the re-exported Effect schema constructors for branded values.
+Transform and reload skills. Use the re-exported Effect schema constructors for branded values. `get(id)` returns the
+current editor entry, or `undefined` when the skill is absent.
 
 ```ts
 effect: (ctx) =>
@@ -761,6 +765,7 @@ effect: (ctx) =>
         location: "/workspace/.opencode/skills/review.md",
         content: "Review the current changes for correctness and missing tests.",
       }))
+      const review = editor.get("review")
       editor.update("review", (item) => (item.autoinvoke = true))
       editor.remove("legacy")
     })
@@ -773,6 +778,7 @@ Schema: [`Skill.Info`](/api#schema-Skill.Info).
 ```ts
 interface SkillEditor {
   list(): readonly Types.DeepMutable<Skill.Info>[]
+  get(id: string): Types.DeepMutable<Skill.Info> | undefined
   add(skill: Skill.Info): void
   update(id: string, update: (skill: Types.DeepMutable<Skill.Info>) => void): void
   remove(id: string): void

packages/www/src/docs/content/build/plugins/index.mdx

@@ -596,13 +596,15 @@ Read the references available at a location.
 const references = await ctx.reference.list()
 ```
 
-Register a transform to inspect, add, or remove local and Git references.
+Register a transform to inspect, add, or remove local and Git references. `get(name)` returns the current configured source,
+or `undefined` when the name is absent.
 
 ```ts
 await ctx.reference.transform((editor) => {
   const references = editor.list()
   editor.add("handbook", { type: "local", path: "/workspace/docs/handbook" })
   editor.add("standards", { type: "git", repository: "https://github.com/acme/standards", branch: "main" })
+  const handbook = editor.get("handbook")
   editor.remove("legacy")
 })
 ```
@@ -627,6 +629,7 @@ interface ReferenceContext {
 
 interface ReferenceEditor {
   list(): readonly (readonly [string, ReferenceLocalSource | ReferenceGitSource])[]
+  get(name: string): ReferenceLocalSource | ReferenceGitSource | undefined
   add(name: string, source: ReferenceLocalSource | ReferenceGitSource): void
   remove(name: string): void
 }
@@ -717,7 +720,8 @@ Read the skills available at a location.
 const skills = await ctx.skill.list()
 ```
 
-Register a transform to inspect, add, update, or remove skills.
+Register a transform to inspect, add, update, or remove skills. `get(id)` returns the current editor entry, or `undefined`
+when the skill is absent.
 
 ```ts
 await ctx.skill.transform((editor) => {
@@ -729,6 +733,7 @@ await ctx.skill.transform((editor) => {
     location: "/workspace/.opencode/skills/review.md",
     content: "Review the current changes for correctness and missing tests.",
   })
+  const review = editor.get("review")
   editor.update("review", (skill) => {
     skill.autoinvoke = true
   })
@@ -755,6 +760,7 @@ interface SkillContext {
 
 interface SkillEditor {
   list(): readonly SkillInfo[]
+  get(id: string): SkillInfo | undefined
   add(skill: SkillInfo): void
   update(id: string, update: (skill: SkillInfo) => void): void
   remove(id: string): void