fix(app): keep new session open while the worktree list loads (#47734)

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

packages/ai/AGENTS.md

@@ -81,7 +81,7 @@ export const route = Route.make({
 
 Route defaults are request-shaping defaults such as `headers`, `limits`, `generation`, `providerOptions`, and `http`. Endpoint host/query belongs on the route endpoint. Selected `LanguageModel` values carry only model id, provider id, and the configured route value. Model capability/catalog metadata lives outside this package; protocol support is enforced by request lowering and typed `AIError`s.
 
-The four-axis decomposition is the reason DeepSeek, TogetherAI, Cerebras, Baseten, Fireworks, and DeepInfra all reuse `OpenAIChat.protocol` verbatim — each provider deployment is a 5-15 line `Route.make(...)` call instead of a 300-400 line route clone. Bug fixes in one protocol propagate to every consumer of that protocol in a single commit.
+The four-axis decomposition is the reason DeepSeek, TogetherAI, Cerebras, Baseten, Fireworks, and DeepInfra all reuse `OpenAIChat.protocol` verbatim — each provider owns a small `Route.make(...)` composition instead of a protocol clone. Bug fixes in one protocol propagate to every consumer of that protocol in a single commit.
 
 When a provider supports multiple physical transports, selection remains execution policy below its semantic route. `OpenResponsesChannel.transport(...)` owns the provider-neutral Responses WebSocket concept: it prepares one final request, executes HTTP by default, strips WebSocket-disallowed fields, and passes a generic channel exchange to a per-call `WebSocketChannelExecutor` when supplied. Provider-specific Responses routes opt in with handshake and connection-age policy. `Route.streamPrepared` owns decoding and acknowledges channel completion only after successful full consumption.
 
@@ -115,6 +115,7 @@ Keep provider facades small and explicit:
 - Prefer `apiKey` as provider-specific sugar and `auth` as the explicit override; keep them mutually exclusive in provider option types with `ProviderAuthOption`.
 - Resolve `apiKey` → `Auth` with `AuthOptions.bearer(options, "<PROVIDER>_API_KEY")` (it honors an explicit `auth` override and falls back to `Auth.config(envVar)` so missing keys surface a typed `Authentication` error rather than a runtime crash).
 - Use separate top-level facades for products with different required setup, such as `CloudflareAIGateway` and `CloudflareWorkersAI`.
+- Give every named provider its own file and top-level export. Keep its endpoint, auth defaults, and route setup in that file. Compose shared protocols directly; do not nest named provider presets under generic compatible facades or keep their endpoints in a shared provider profile registry.
 
 `Provider.make(...)` remains available for simple static provider definitions, but new built-in providers should prefer plain configured facades unless a helper removes real duplication without adding runtime behavior.
 

packages/ai/README.md

@@ -1,6 +1,6 @@
 # @opencode-ai/ai
 
-Schema-first AI primitives for opencode. Provider quirks live in adapters, not in calling code.
+Schema-first language model and image-generation APIs built with Effect.
 
 ```ts
 import { Effect, Layer } from "effect"
@@ -255,7 +255,7 @@ over the same implementation, including the legacy live `requests` array. New te
 
 ## Provider compaction
 
-Compaction is opt-in. The package supports automatic compaction in OpenAI/Azure Responses and Anthropic Messages (including Claude on Vertex), and explicit compaction calls in OpenAI/Azure/xAI Responses. Model and deployment support still depends on the provider. Bedrock compaction is deferred to a separate follow-up.
+Compaction is opt-in. The package supports automatic compaction in OpenAI/Azure Responses and Anthropic Messages (including Claude on Vertex), and explicit compaction calls in OpenAI/Azure/xAI Responses. Model and deployment support still depends on the provider.
 
 This is different from prompt caching, server-side history storage, or truncation. Compaction returns provider-owned context that must be replayed to continue the conversation.
 
@@ -298,7 +298,7 @@ result.responseID
 result.usage
 ```
 
-This appends a native `compaction_trigger` control item to the full input and sends a normal Responses request. It follows the [Codex V2 request shape](https://github.com/openai/codex/blob/728cb12/codex-rs/core/src/compact_remote_v2_attempt.rs), with tools and instructions retained, `stream: true`, `store: false`, and parallel tool calls enabled. It removes normal-answer text/output-format controls, forced tool choices, output-token/tool-call limits, and automatic `context_management`. Body overlays cannot replace `input` or supply `previous_response_id`/`conversation`; the complete canonical history is required for safe stateless replay. Session/cache identifiers, auth, headers, query parameters, service tier, and supported prompt-cache settings are preserved.
+This appends a native `compaction_trigger` control item to the full input and sends a normal Responses request, with tools and instructions retained, `stream: true`, `store: false`, and parallel tool calls enabled. It removes normal-answer text/output-format controls, forced tool choices, output-token/tool-call limits, and automatic `context_management`. Body overlays cannot replace `input` or supply `previous_response_id`/`conversation`; the complete canonical history is required for safe stateless replay. Request metadata, auth, headers, query parameters, service tier, and supported prompt-cache settings are preserved.
 
 Only a successful `response.completed` with a response ID and exactly one logical encrypted checkpoint succeeds. Repeated item events are correlated by ID/output slot, including ID-less checkpoints. Other output is ignored, not returned as assistant text or dispatched as tools. Failed, incomplete, malformed, and interrupted responses return errors rather than partial checkpoints.
 
@@ -372,9 +372,7 @@ providerOptions: {
 - Anthropic can return a compaction block with `content: null` when summarization fails. This becomes a compaction part with `text: null`, which is **not** a successful replacement for prior history. The package never prunes history automatically.
 - `Usage` totals include all reported Anthropic `usage.iterations`, including compaction. `contextTokens` separately reports the final message iteration's inclusive input size, when available. A compaction-only pause does not report a post-compaction context size. Raw iteration usage remains in `providerMetadata`.
 
-### Ownership and verification
-
-The AI package transports options and typed conversation parts. It does not schedule compaction, persist Session checkpoints, select history, switch providers, or replace Core's existing local compaction policy. Native compaction is not enabled for OpenCode Sessions by this feature; Session integration must persist these parts before enabling it. The AI SDK bridge rejects native compaction parts rather than dropping them. Provider-executed tool APIs and persistence changes are a separate follow-up.
+### Recording tests
 
 Tests cover serialized round trips, real local HTTP plus a tool loop, WebSocket recovery, provider errors, malformed blocks, and usage accounting. Live provider tests are gated by `RECORD=true` and the relevant API keys:
 
@@ -393,7 +391,7 @@ Prompt caching is **on by default**. Every `LLMRequest` resolves to `cache: "aut
 
 ### Auto placement
 
-`"auto"` places up to four breakpoints — the last tool definition, the first system part, the last system part when distinct, and the final message boundary. These expose successively larger reusable prefixes for tools, the base agent, project instructions, and the active conversation. The rolling final-message boundary advances on every request so recent conversation prefixes remain reusable during tool loops.
+`"auto"` places up to four breakpoints — the last tool definition, the first system part, the last system part when distinct, and the final message boundary. These expose successively larger reusable prefixes for tool definitions, system instructions, and the active conversation. The rolling final-message boundary advances on every request so recent conversation prefixes remain reusable during tool loops.
 
 Tools precede every system and conversation block in the provider prefix, so tool definitions must remain byte-stable and deterministically ordered for downstream breakpoints to remain reusable.
 
@@ -461,22 +459,33 @@ const gateway = CloudflareAIGateway.configure({
 }).model("workers-ai/@cf/meta/llama-3.1-8b-instruct")
 ```
 
-Included providers: OpenAI, Anthropic, Google (Gemini), Google Vertex Gemini and Anthropic, Amazon Bedrock, Azure OpenAI, Cloudflare AI Gateway, Cloudflare Workers AI, GitHub Copilot, OpenRouter, xAI, Z.ai, plus generic OpenAI-compatible Chat and Responses entrypoints and an Anthropic Messages-compatible entrypoint.
+Included LLM providers: OpenAI, Anthropic, Google (Gemini), Google Vertex, Amazon Bedrock, Azure OpenAI, Baseten, Cerebras, Cloudflare AI Gateway, Cloudflare Workers AI, DeepInfra, DeepSeek, Fireworks, Groq, Mistral, OpenRouter, TogetherAI, and xAI. Z.ai currently exposes image generation. Generic Chat Completions, Responses, and Anthropic Messages-compatible entrypoints support custom endpoints.
 
-### Package-like entrypoints
+Each named provider owns its module, endpoint, authentication, and route setup. Providers with the same wire format compose the shared protocol directly:
 
-Native catalog integrations load provider behavior through package-like entrypoints. These are export paths from the same `@opencode-ai/ai` npm package, not independently published packages. Each entrypoint exports the same `model(modelID, settings)` contract, and `settings` contains serializable provider configuration plus common `headers` and `body` overlays.
+```ts
+import { DeepSeek, Fireworks } from "@opencode-ai/ai/providers"
+
+const deepseek = DeepSeek.configure({ apiKey }).model("deepseek-chat")
+const fireworks = Fireworks.configure({ apiKey }).model("accounts/fireworks/models/my-model")
+```
+
+The former `OpenAICompatible.baseten`, `.cerebras`, `.deepinfra`, `.deepseek`, `.fireworks`, `.groq`, and `.togetherai` presets are replaced by the top-level `Baseten`, `Cerebras`, `DeepInfra`, `DeepSeek`, `Fireworks`, `Groq`, and `TogetherAI` exports. Use `CloudflareAIGateway` and `CloudflareWorkersAI` directly; each has its own module. `OpenAICompatible` configures generic endpoints with an explicit `baseURL`.
+
+### Provider entrypoints
+
+Provider modules are available through dedicated exports from `@opencode-ai/ai`. Each LLM entrypoint exports `model(modelID, settings)`, where `settings` contains provider configuration plus common `headers` and `body` overlays.
 
 ```ts
 import { model } from "@opencode-ai/ai/providers/openai/responses"
 
 const selected = model("gpt-5", {
   apiKey: process.env.OPENAI_API_KEY,
-  headers: { "x-application": "opencode" },
+  headers: { "x-application": "example" },
 })
 ```
 
-OpenAI Chat and OpenAI Responses are separate semantic entrypoints:
+APIs have separate entrypoints:
 
 - `@opencode-ai/ai/providers/openai/chat`
 - `@opencode-ai/ai/providers/openai/responses`
@@ -517,9 +526,13 @@ import { model } from "@opencode-ai/ai/providers/google-vertex/messages"
 model("claude-sonnet-4-6", { project: "my-project", location: "global" })
 ```
 
-Provider facades such as `OpenAI.configure(...).responses(...)` remain the direct application API. Package-like entrypoints are the self-similar loading contract used when a catalog selects behavior by export path.
+Additional provider entrypoints include:
 
-Other provider exports listed above remain direct facades until they explicitly implement the package-like contract. Exporting a provider facade does not implicitly make it a catalog-loadable provider package.
+- `@opencode-ai/ai/providers/baseten`
+- `@opencode-ai/ai/providers/deepseek`
+- `@opencode-ai/ai/providers/fireworks`
+- `@opencode-ai/ai/providers/cloudflare-ai-gateway`
+- `@opencode-ai/ai/providers/cloudflare-workers-ai`
 
 ## Provider options & HTTP overlays
 
@@ -546,7 +559,7 @@ LLM.request({
 
 ## Routes
 
-Adding a new model or deployment is usually 5-15 lines using `Route.make({ protocol, endpoint, auth, framing, ... })`. The route owns endpoint/auth/framing and the protocol owns body construction plus stream parsing. Transports are reusable IO templates that receive route endpoint/auth at compile time. Capability/catalog metadata lives outside this low-level package; unsupported request shapes fail during protocol lowering. See `AGENTS.md` for the architectural detail.
+Compose a route with `Route.make({ protocol, endpoint, auth, framing, ... })`. The route owns endpoint/auth/framing and the protocol owns body construction plus stream parsing. Transports receive the route's endpoint and auth when preparing requests. Unsupported request shapes fail during protocol lowering.
 
 ## Effect
 

packages/ai/script/setup-recording-env.ts

@@ -7,7 +7,8 @@ import { AwsV4Signer } from "aws4fetch"
 import { Config, ConfigProvider, Effect, FileSystem, PlatformError, Redacted } from "effect"
 import { FetchHttpClient, HttpClient, HttpClientRequest, type HttpClientResponse } from "effect/unstable/http"
 import * as ProviderShared from "../src/protocols/shared"
-import * as Cloudflare from "../src/providers/cloudflare"
+import { CloudflareAIGateway } from "../src/providers/cloudflare-ai-gateway.js"
+import { CloudflareWorkersAI } from "../src/providers/cloudflare-workers-ai.js"
 
 type Provider = {
   readonly id: string
@@ -120,11 +121,11 @@ const PROVIDERS: ReadonlyArray<Provider> = [
     ],
     validate: (env) =>
       validateChat({
-        url: `${Cloudflare.aiGatewayBaseURL({
+        url: `${CloudflareAIGateway.baseURL({
           accountId: env.CLOUDFLARE_ACCOUNT_ID,
           gatewayId: env.CLOUDFLARE_GATEWAY_ID || undefined,
         })}/chat/completions`,
-        token: Redacted.make(envValue(env, Cloudflare.aiGatewayAuthEnvVars)),
+        token: Redacted.make(envValue(env, CloudflareAIGateway.authEnvVars)),
         tokenHeader: "cf-aig-authorization",
         model: "workers-ai/@cf/meta/llama-3.1-8b-instruct",
       }),
@@ -140,8 +141,8 @@ const PROVIDERS: ReadonlyArray<Provider> = [
     ],
     validate: (env) =>
       validateChat({
-        url: `${Cloudflare.workersAIBaseURL({ accountId: env.CLOUDFLARE_ACCOUNT_ID })}/chat/completions`,
-        token: Redacted.make(envValue(env, Cloudflare.workersAIAuthEnvVars)),
+        url: `${CloudflareWorkersAI.baseURL({ accountId: env.CLOUDFLARE_ACCOUNT_ID })}/chat/completions`,
+        token: Redacted.make(envValue(env, CloudflareWorkersAI.authEnvVars)),
         model: "@cf/meta/llama-3.1-8b-instruct",
       }),
   },

packages/ai/src/providers/baseten.ts

@@ -0,0 +1,60 @@
+import type { ProviderPackage } from "../provider-package.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
+import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
+import { ProviderID, type ModelID } from "../schema/index.js"
+import type { OpenAIProviderOptionsInput } from "./openai-options.js"
+
+export const id = ProviderID.make("baseten")
+const baseURL = "https://inference.baseten.co/v1"
+
+export type LanguageModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
+  ProviderAuthOption<"optional"> & {
+    readonly baseURL?: string
+    readonly providerOptions?: OpenAIProviderOptionsInput
+  }
+
+export interface Settings extends ProviderPackage.Settings {
+  readonly apiKey?: string
+  readonly baseURL?: string
+  readonly providerOptions?: OpenAIProviderOptionsInput
+}
+
+export const route = Route.make({
+  id: "baseten-chat",
+  provider: id,
+  providerMetadataKey: "baseten",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
+  framing: OpenAIChat.framing,
+})
+
+export const routes = [route]
+
+export const configure = (input: LanguageModelOptions = {}) => {
+  const { apiKey: _apiKey, auth: _auth, baseURL: endpoint, ...defaults } = input
+  const configured = route.with({
+    ...defaults,
+    endpoint: { baseURL: endpoint ?? baseURL },
+    auth: AuthOptions.bearer(input, "BASETEN_API_KEY"),
+  })
+  return {
+    id,
+    model: (modelID: string | ModelID) => configured.model<OpenAIProviderOptionsInput>({ id: modelID }),
+    configure,
+  }
+}
+
+export const provider = configure()
+
+export const model: ProviderPackage.Definition<Settings, OpenAIProviderOptionsInput>["model"] = (modelID, settings) =>
+  configure({
+    apiKey: settings.apiKey,
+    baseURL: settings.baseURL,
+    headers: settings.headers === undefined ? undefined : { ...settings.headers },
+    http: settings.body === undefined ? undefined : { body: { ...settings.body } },
+    providerOptions: settings.providerOptions,
+  }).model(modelID)
+
+export * as Baseten from "./baseten.js"

packages/ai/src/providers/cerebras.ts

@@ -1,12 +1,13 @@
 import type { ProviderPackage } from "../provider-package.js"
-import { OpenAICompatibleChat } from "../protocols/openai-compatible-chat.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
 import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
-import type { RouteDefaultsInput } from "../route/client.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
 import { ProviderID, type ModelID } from "../schema/index.js"
-import { profiles } from "./openai-compatible-profile.js"
 import type { OpenAIProviderOptionsInput } from "./openai-options.js"
 
 export const id = ProviderID.make("cerebras")
+const baseURL = "https://api.cerebras.ai/v1"
 
 export type LanguageModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
   ProviderAuthOption<"optional"> & {
@@ -20,19 +21,22 @@ export interface Settings extends ProviderPackage.Settings {
   readonly providerOptions?: OpenAIProviderOptionsInput
 }
 
-export const route = OpenAICompatibleChat.route.with({
+export const route = Route.make({
   id: "cerebras-chat",
   provider: id,
-  endpoint: { baseURL: profiles.cerebras.baseURL },
+  providerMetadataKey: "cerebras",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
+  framing: OpenAIChat.framing,
 })
 
 export const routes = [route]
 
 export const configure = (input: LanguageModelOptions = {}) => {
-  const { apiKey: _apiKey, auth: _auth, baseURL, ...defaults } = input
+  const { apiKey: _apiKey, auth: _auth, baseURL: endpoint, ...defaults } = input
   const configured = route.with({
     ...defaults,
-    endpoint: { baseURL: baseURL ?? profiles.cerebras.baseURL },
+    endpoint: { baseURL: endpoint ?? baseURL },
     auth: AuthOptions.bearer(input, "CEREBRAS_API_KEY"),
   })
   return {

packages/ai/src/providers/cloudflare-ai-gateway.ts

@@ -0,0 +1,98 @@
+import type { Config, Redacted } from "effect"
+import type { ProviderPackage } from "../provider-package.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
+import { Auth } from "../route/auth.js"
+import type { AtLeastOne, ProviderAuthOption } from "../route/auth-options.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
+import { ProviderID, type ModelID } from "../schema/index.js"
+import type { OpenAIProviderOptionsInput } from "./openai-options.js"
+
+export const id = ProviderID.make("cloudflare-ai-gateway")
+export const authEnvVars = ["CLOUDFLARE_API_TOKEN", "CF_AIG_TOKEN"] as const
+
+type GatewayURL = AtLeastOne<{
+  readonly accountId: string
+  readonly baseURL: string
+}> & {
+  readonly gatewayId?: string
+}
+
+export type LanguageModelOptions = GatewayURL &
+  Omit<RouteDefaultsInput, "providerOptions"> &
+  ProviderAuthOption<"optional"> & {
+    /** Cloudflare AI Gateway authentication token. Sent as `cf-aig-authorization`. */
+    readonly gatewayApiKey?: string | Redacted.Redacted | Config.Config<string | Redacted.Redacted>
+    readonly providerOptions?: OpenAIProviderOptionsInput
+  }
+
+export type Settings = ProviderPackage.Settings &
+  GatewayURL & {
+    readonly apiKey?: string
+    readonly gatewayApiKey?: string
+    readonly providerOptions?: OpenAIProviderOptionsInput
+  }
+
+export const baseURL = (input: GatewayURL) => {
+  if (input.baseURL) return input.baseURL
+  if (!input.accountId) throw new Error("CloudflareAIGateway.configure requires accountId unless baseURL is supplied")
+  return `https://gateway.ai.cloudflare.com/v1/${encodeURIComponent(input.accountId)}/${encodeURIComponent(input.gatewayId?.trim() || "default")}/compat`
+}
+
+const auth = (input: LanguageModelOptions) => {
+  if ("auth" in input && input.auth) return input.auth
+  const gateway = Auth.optional(input.gatewayApiKey, "gatewayApiKey")
+    .orElse(Auth.config(authEnvVars[0]))
+    .orElse(Auth.config(authEnvVars[1]))
+    .pipe(Auth.bearerHeader("cf-aig-authorization"))
+  if (!("apiKey" in input) || input.apiKey === undefined) return gateway
+  if (input.gatewayApiKey === undefined) return Auth.bearer(input.apiKey)
+  return Auth.bearerHeader("cf-aig-authorization", input.gatewayApiKey).andThen(Auth.bearer(input.apiKey))
+}
+
+export const route = Route.make({
+  id: "cloudflare-ai-gateway",
+  provider: id,
+  providerMetadataKey: "cloudflare-ai-gateway",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions"),
+  framing: OpenAIChat.framing,
+})
+
+export const routes = [route]
+
+export const configure = (input: LanguageModelOptions) => {
+  const {
+    accountId: _accountId,
+    gatewayId: _gatewayId,
+    apiKey: _apiKey,
+    gatewayApiKey: _gatewayApiKey,
+    baseURL: _baseURL,
+    auth: _auth,
+    ...defaults
+  } = input
+  const configured = route.with({
+    ...defaults,
+    endpoint: { baseURL: baseURL(input) },
+    auth: auth(input),
+  })
+  return {
+    id,
+    model: (modelID: string | ModelID) => configured.model<OpenAIProviderOptionsInput>({ id: modelID }),
+    configure,
+  }
+}
+
+export const provider = { id, configure }
+
+export const model: ProviderPackage.Definition<Settings, OpenAIProviderOptionsInput>["model"] = (modelID, settings) =>
+  configure({
+    apiKey: settings.apiKey,
+    gatewayApiKey: settings.gatewayApiKey,
+    baseURL: baseURL(settings),
+    headers: settings.headers === undefined ? undefined : { ...settings.headers },
+    http: settings.body === undefined ? undefined : { body: { ...settings.body } },
+    providerOptions: settings.providerOptions,
+  }).model(modelID)
+
+export * as CloudflareAIGateway from "./cloudflare-ai-gateway.js"

packages/ai/src/providers/cloudflare-workers-ai.ts

@@ -0,0 +1,71 @@
+import type { ProviderPackage } from "../provider-package.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
+import { AuthOptions, type AtLeastOne, type ProviderAuthOption } from "../route/auth-options.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
+import { ProviderID, type ModelID } from "../schema/index.js"
+import type { OpenAIProviderOptionsInput } from "./openai-options.js"
+
+export const id = ProviderID.make("cloudflare-workers-ai")
+export const authEnvVars = ["CLOUDFLARE_API_KEY", "CLOUDFLARE_WORKERS_AI_TOKEN"] as const
+
+type WorkersAIURL = AtLeastOne<{
+  readonly accountId: string
+  readonly baseURL: string
+}>
+
+export type LanguageModelOptions = WorkersAIURL &
+  Omit<RouteDefaultsInput, "providerOptions"> &
+  ProviderAuthOption<"optional"> & {
+    readonly providerOptions?: OpenAIProviderOptionsInput
+  }
+
+export type Settings = ProviderPackage.Settings &
+  WorkersAIURL & {
+    readonly apiKey?: string
+    readonly providerOptions?: OpenAIProviderOptionsInput
+  }
+
+export const baseURL = (input: WorkersAIURL) => {
+  if (input.baseURL) return input.baseURL
+  if (!input.accountId) throw new Error("CloudflareWorkersAI.configure requires accountId unless baseURL is supplied")
+  return `https://api.cloudflare.com/client/v4/accounts/${encodeURIComponent(input.accountId)}/ai/v1`
+}
+
+export const route = Route.make({
+  id: "cloudflare-workers-ai",
+  provider: id,
+  providerMetadataKey: "cloudflare-workers-ai",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions"),
+  framing: OpenAIChat.framing,
+})
+
+export const routes = [route]
+
+export const configure = (input: LanguageModelOptions) => {
+  const { accountId: _accountId, apiKey: _apiKey, auth: _auth, baseURL: _baseURL, ...defaults } = input
+  const configured = route.with({
+    ...defaults,
+    endpoint: { baseURL: baseURL(input) },
+    auth: AuthOptions.bearer(input, authEnvVars),
+  })
+  return {
+    id,
+    model: (modelID: string | ModelID) => configured.model<OpenAIProviderOptionsInput>({ id: modelID }),
+    configure,
+  }
+}
+
+export const provider = { id, configure }
+
+export const model: ProviderPackage.Definition<Settings, OpenAIProviderOptionsInput>["model"] = (modelID, settings) =>
+  configure({
+    apiKey: settings.apiKey,
+    baseURL: baseURL(settings),
+    headers: settings.headers === undefined ? undefined : { ...settings.headers },
+    http: settings.body === undefined ? undefined : { body: { ...settings.body } },
+    providerOptions: settings.providerOptions,
+  }).model(modelID)
+
+export * as CloudflareWorkersAI from "./cloudflare-workers-ai.js"

packages/ai/src/providers/cloudflare.ts

@@ -1,133 +0,0 @@
-import type { Config, Redacted } from "effect"
-import * as OpenAICompatibleChat from "../protocols/openai-compatible-chat.js"
-import { Auth } from "../route/auth.js"
-import { AuthOptions, type AtLeastOne, type ProviderAuthOption } from "../route/auth-options.js"
-import type { RouteDefaultsInput } from "../route/client.js"
-import { ProviderID, type ModelID } from "../schema/index.js"
-import type { OpenAIProviderOptionsInput } from "./openai-options.js"
-
-export const aiGatewayID = ProviderID.make("cloudflare-ai-gateway")
-export const workersAIID = ProviderID.make("cloudflare-workers-ai")
-export const aiGatewayAuthEnvVars = ["CLOUDFLARE_API_TOKEN", "CF_AIG_TOKEN"] as const
-export const workersAIAuthEnvVars = ["CLOUDFLARE_API_KEY", "CLOUDFLARE_WORKERS_AI_TOKEN"] as const
-
-type CloudflareSecret = string | Redacted.Redacted | Config.Config<string | Redacted.Redacted>
-
-type GatewayURL = AtLeastOne<{
-  readonly accountId: string
-  readonly baseURL: string
-}> & {
-  readonly gatewayId?: string
-}
-
-export type AIGatewayOptions = GatewayURL &
-  Omit<RouteDefaultsInput, "providerOptions"> &
-  ProviderAuthOption<"optional"> & {
-    /** Cloudflare AI Gateway authentication token. Sent as `cf-aig-authorization`. */
-    readonly gatewayApiKey?: CloudflareSecret
-    readonly providerOptions?: OpenAIProviderOptionsInput
-  }
-
-type WorkersAIURL = AtLeastOne<{
-  readonly accountId: string
-  readonly baseURL: string
-}>
-
-export type WorkersAIOptions = WorkersAIURL &
-  Omit<RouteDefaultsInput, "providerOptions"> &
-  ProviderAuthOption<"optional"> & {
-    readonly providerOptions?: OpenAIProviderOptionsInput
-  }
-
-export const aiGatewayBaseURL = (input: GatewayURL) => {
-  if (input.baseURL) return input.baseURL
-  if (!input.accountId) throw new Error("CloudflareAIGateway.configure requires accountId unless baseURL is supplied")
-  return `https://gateway.ai.cloudflare.com/v1/${encodeURIComponent(input.accountId)}/${encodeURIComponent(input.gatewayId?.trim() || "default")}/compat`
-}
-
-const aiGatewayAuth = (input: AIGatewayOptions) => {
-  if ("auth" in input && input.auth) return input.auth
-  const gateway = Auth.optional(input.gatewayApiKey, "gatewayApiKey")
-    .orElse(Auth.config("CLOUDFLARE_API_TOKEN"))
-    .orElse(Auth.config("CF_AIG_TOKEN"))
-    .pipe(Auth.bearerHeader("cf-aig-authorization"))
-  if (!("apiKey" in input) || input.apiKey === undefined) return gateway
-  if (input.gatewayApiKey === undefined) return Auth.bearer(input.apiKey)
-  return Auth.bearerHeader("cf-aig-authorization", input.gatewayApiKey).andThen(Auth.bearer(input.apiKey))
-}
-
-export const workersAIBaseURL = (input: WorkersAIURL) => {
-  if (input.baseURL) return input.baseURL
-  if (!input.accountId) throw new Error("CloudflareWorkersAI.configure requires accountId unless baseURL is supplied")
-  return `https://api.cloudflare.com/client/v4/accounts/${encodeURIComponent(input.accountId)}/ai/v1`
-}
-
-const workersAIAuth = (input: WorkersAIOptions) => {
-  return AuthOptions.bearer(input, workersAIAuthEnvVars)
-}
-
-export const aiGatewayRoute = OpenAICompatibleChat.route.with({
-  id: "cloudflare-ai-gateway",
-  provider: aiGatewayID,
-})
-
-export const workersAIRoute = OpenAICompatibleChat.route.with({
-  id: "cloudflare-workers-ai",
-  provider: workersAIID,
-})
-
-export const routes = [aiGatewayRoute, workersAIRoute]
-
-const aiGatewayDefaults = (options: AIGatewayOptions) => {
-  const {
-    accountId: _accountId,
-    gatewayId: _gatewayId,
-    apiKey: _apiKey,
-    gatewayApiKey: _gatewayApiKey,
-    baseURL: _baseURL,
-    auth: _auth,
-    ...rest
-  } = options
-  return rest
-}
-
-const workersAIDefaults = (options: WorkersAIOptions) => {
-  const { accountId: _accountId, apiKey: _apiKey, auth: _auth, baseURL: _baseURL, ...rest } = options
-  return rest
-}
-
-const configureAIGateway = (options: AIGatewayOptions) => {
-  const route = aiGatewayRoute.with({
-    ...aiGatewayDefaults(options),
-    endpoint: { baseURL: aiGatewayBaseURL(options) },
-    auth: aiGatewayAuth(options),
-  })
-  return {
-    id: aiGatewayID,
-    model: (modelID: string | ModelID) => route.model<OpenAIProviderOptionsInput>({ id: modelID }),
-    configure: configureAIGateway,
-  }
-}
-
-const configureWorkersAI = (options: WorkersAIOptions) => {
-  const route = workersAIRoute.with({
-    ...workersAIDefaults(options),
-    endpoint: { baseURL: workersAIBaseURL(options) },
-    auth: workersAIAuth(options),
-  })
-  return {
-    id: workersAIID,
-    model: (modelID: string | ModelID) => route.model<OpenAIProviderOptionsInput>({ id: modelID }),
-    configure: configureWorkersAI,
-  }
-}
-
-export const CloudflareAIGateway = {
-  id: aiGatewayID,
-  configure: configureAIGateway,
-}
-
-export const CloudflareWorkersAI = {
-  id: workersAIID,
-  configure: configureWorkersAI,
-}

packages/ai/src/providers/deepinfra.ts

@@ -1,12 +1,13 @@
 import type { ProviderPackage } from "../provider-package.js"
-import { OpenAICompatibleChat } from "../protocols/openai-compatible-chat.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
 import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
-import type { RouteDefaultsInput } from "../route/client.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
 import { ProviderID, type ModelID } from "../schema/index.js"
-import { profiles } from "./openai-compatible-profile.js"
 import type { OpenAIProviderOptionsInput } from "./openai-options.js"
 
 export const id = ProviderID.make("deepinfra")
+const baseURL = "https://api.deepinfra.com/v1/openai"
 
 export type LanguageModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
   ProviderAuthOption<"optional"> & {
@@ -20,21 +21,24 @@ export interface Settings extends ProviderPackage.Settings {
   readonly providerOptions?: OpenAIProviderOptionsInput
 }
 
-export const route = OpenAICompatibleChat.route.with({
+export const route = Route.make({
   id: "deepinfra-chat",
   provider: id,
-  endpoint: { baseURL: profiles.deepinfra.baseURL },
+  providerMetadataKey: "deepinfra",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
+  framing: OpenAIChat.framing,
 })
 
 export const routes = [route]
 
 export const configure = (input: LanguageModelOptions = {}) => {
-  const { apiKey: _apiKey, auth: _auth, baseURL, ...defaults } = input
-  const root = baseURL?.replace(/\/+$/, "")
+  const { apiKey: _apiKey, auth: _auth, baseURL: endpoint, ...defaults } = input
+  const root = endpoint?.replace(/\/+$/, "")
   const configured = route.with({
     ...defaults,
     endpoint: {
-      baseURL: root === undefined ? profiles.deepinfra.baseURL : root.endsWith("/openai") ? root : `${root}/openai`,
+      baseURL: root === undefined ? baseURL : root.endsWith("/openai") ? root : `${root}/openai`,
     },
     auth: AuthOptions.bearer(input, "DEEPINFRA_API_KEY"),
   })

packages/ai/src/providers/deepseek.ts

@@ -0,0 +1,64 @@
+import type { ProviderPackage } from "../provider-package.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
+import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
+import { ProviderID, type ModelID } from "../schema/index.js"
+import type { OpenAIProviderOptionsInput } from "./openai-options.js"
+
+export const id = ProviderID.make("deepseek")
+const baseURL = "https://api.deepseek.com/v1"
+
+export type LanguageModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
+  ProviderAuthOption<"optional"> & {
+    readonly baseURL?: string
+    readonly providerOptions?: OpenAIProviderOptionsInput
+  }
+
+export interface Settings extends ProviderPackage.Settings {
+  readonly apiKey?: string
+  readonly baseURL?: string
+  readonly providerOptions?: OpenAIProviderOptionsInput
+}
+
+export const route = Route.make({
+  id: "deepseek-chat",
+  provider: id,
+  providerMetadataKey: "deepseek",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
+  framing: OpenAIChat.framing,
+})
+
+export const routes = [route]
+
+export const configure = (input: LanguageModelOptions = {}) => {
+  const { apiKey: _apiKey, auth: _auth, baseURL: endpoint, ...defaults } = input
+  const configured = route.with({
+    ...defaults,
+    endpoint: { baseURL: endpoint ?? baseURL },
+    auth: AuthOptions.bearer(input, "DEEPSEEK_API_KEY"),
+  })
+  return {
+    id,
+    model: (modelID: string | ModelID) =>
+      configured.model<OpenAIProviderOptionsInput>({
+        id: modelID,
+        compatibility: { maxTokensField: "max_tokens", supportsStore: false },
+      }),
+    configure,
+  }
+}
+
+export const provider = configure()
+
+export const model: ProviderPackage.Definition<Settings, OpenAIProviderOptionsInput>["model"] = (modelID, settings) =>
+  configure({
+    apiKey: settings.apiKey,
+    baseURL: settings.baseURL,
+    headers: settings.headers === undefined ? undefined : { ...settings.headers },
+    http: settings.body === undefined ? undefined : { body: { ...settings.body } },
+    providerOptions: settings.providerOptions,
+  }).model(modelID)
+
+export * as DeepSeek from "./deepseek.js"

packages/ai/src/providers/fireworks.ts

@@ -0,0 +1,60 @@
+import type { ProviderPackage } from "../provider-package.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
+import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
+import { ProviderID, type ModelID } from "../schema/index.js"
+import type { OpenAIProviderOptionsInput } from "./openai-options.js"
+
+export const id = ProviderID.make("fireworks")
+const baseURL = "https://api.fireworks.ai/inference/v1"
+
+export type LanguageModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
+  ProviderAuthOption<"optional"> & {
+    readonly baseURL?: string
+    readonly providerOptions?: OpenAIProviderOptionsInput
+  }
+
+export interface Settings extends ProviderPackage.Settings {
+  readonly apiKey?: string
+  readonly baseURL?: string
+  readonly providerOptions?: OpenAIProviderOptionsInput
+}
+
+export const route = Route.make({
+  id: "fireworks-chat",
+  provider: id,
+  providerMetadataKey: "fireworks",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
+  framing: OpenAIChat.framing,
+})
+
+export const routes = [route]
+
+export const configure = (input: LanguageModelOptions = {}) => {
+  const { apiKey: _apiKey, auth: _auth, baseURL: endpoint, ...defaults } = input
+  const configured = route.with({
+    ...defaults,
+    endpoint: { baseURL: endpoint ?? baseURL },
+    auth: AuthOptions.bearer(input, "FIREWORKS_API_KEY"),
+  })
+  return {
+    id,
+    model: (modelID: string | ModelID) => configured.model<OpenAIProviderOptionsInput>({ id: modelID }),
+    configure,
+  }
+}
+
+export const provider = configure()
+
+export const model: ProviderPackage.Definition<Settings, OpenAIProviderOptionsInput>["model"] = (modelID, settings) =>
+  configure({
+    apiKey: settings.apiKey,
+    baseURL: settings.baseURL,
+    headers: settings.headers === undefined ? undefined : { ...settings.headers },
+    http: settings.body === undefined ? undefined : { body: { ...settings.body } },
+    providerOptions: settings.providerOptions,
+  }).model(modelID)
+
+export * as Fireworks from "./fireworks.js"

packages/ai/src/providers/google-vertex-chat.ts

@@ -1,6 +1,7 @@
 import type { ProviderPackage } from "../provider-package.js"
-import { OpenAICompatibleChat } from "../protocols/openai-compatible-chat.js"
-import type { RouteDefaultsInput } from "../route/client.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
 import { ProviderID, type ModelID } from "../schema/index.js"
 import { GoogleVertexShared } from "./google-vertex-shared.js"
 import type { OpenAIProviderOptionsInput } from "./openai-options.js"
@@ -24,10 +25,13 @@ export interface Settings extends ProviderPackage.Settings {
   readonly providerOptions?: OpenAIProviderOptionsInput
 }
 
-const route = OpenAICompatibleChat.route.with({
+const route = Route.make({
   id: "google-vertex-chat",
   provider: id,
   providerMetadataKey: "vertex",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions"),
+  framing: OpenAIChat.framing,
 })
 
 export const routes = [route]

packages/ai/src/providers/google-vertex-responses.ts

@@ -1,6 +1,7 @@
 import type { ProviderPackage } from "../provider-package.js"
-import { OpenAICompatibleResponses } from "../protocols/openai-compatible-responses.js"
-import type { RouteDefaultsInput } from "../route/client.js"
+import { OpenResponses } from "../protocols/open-responses.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
 import { ProviderID, type ModelID } from "../schema/index.js"
 import { GoogleVertexShared } from "./google-vertex-shared.js"
 import type { OpenResponsesProviderOptionsInput } from "./open-responses-options.js"
@@ -24,11 +25,14 @@ export interface Settings extends ProviderPackage.Settings {
   readonly providerOptions?: OpenResponsesProviderOptionsInput
 }
 
-const route = OpenAICompatibleResponses.route.with({
+const route = Route.make({
   id: "google-vertex-responses",
   provider: id,
   providerMetadataKey: "vertex",
-  providerOptions: { store: false },
+  protocol: OpenResponses.protocol,
+  endpoint: Endpoint.path(OpenResponses.PATH),
+  transport: OpenResponses.httpTransport,
+  defaults: { providerOptions: { store: false, include: ["reasoning.encrypted_content"] } },
 })
 
 export const routes = [route]

packages/ai/src/providers/groq.ts

@@ -7,10 +7,10 @@ import { Route, type RouteDefaultsInput } from "../route/client.js"
 import { Endpoint } from "../route/endpoint.js"
 import { Protocol } from "../route/protocol.js"
 import { ProviderID, type ModelID, type LLMRequest } from "../schema/index.js"
-import { profiles } from "./openai-compatible-profile.js"
 import type { OpenAIProviderOptionsInput } from "./openai-options.js"
 
 export const id = ProviderID.make("groq")
+const baseURL = "https://api.groq.com/openai/v1"
 
 export type ProviderOptions = Pick<OpenAIProviderOptionsInput, "reasoningEffort"> & {
   /** Controls visible reasoning on GPT-OSS; other models always use parsed reasoning. */
@@ -73,15 +73,15 @@ export const route = Route.make({
   provider: id,
   providerMetadataKey: "openai",
   protocol,
-  endpoint: Endpoint.path("/chat/completions", { baseURL: profiles.groq.baseURL }),
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
   framing: OpenAIChat.framing,
 })
 
 export const configure = (input: LanguageModelOptions = {}) => {
-  const { apiKey: _apiKey, auth: _auth, baseURL, ...defaults } = input
+  const { apiKey: _apiKey, auth: _auth, baseURL: endpoint, ...defaults } = input
   const configured = route.with({
     ...defaults,
-    endpoint: { baseURL: baseURL ?? profiles.groq.baseURL },
+    endpoint: { baseURL: endpoint ?? baseURL },
     auth: AuthOptions.bearer(input, "GROQ_API_KEY"),
   })
   return {

packages/ai/src/providers/index.ts

@@ -3,10 +3,13 @@ export * as AnthropicCompatible from "./anthropic-compatible.js"
 export * as AmazonBedrock from "./amazon-bedrock.js"
 export * as AmazonBedrockMantle from "./amazon-bedrock-mantle.js"
 export * as Azure from "./azure.js"
+export * as Baseten from "./baseten.js"
 export * as Cerebras from "./cerebras.js"
-export * as Cloudflare from "./cloudflare.js"
-export { CloudflareAIGateway, CloudflareWorkersAI } from "./cloudflare.js"
+export * as CloudflareAIGateway from "./cloudflare-ai-gateway.js"
+export * as CloudflareWorkersAI from "./cloudflare-workers-ai.js"
 export * as DeepInfra from "./deepinfra.js"
+export * as DeepSeek from "./deepseek.js"
+export * as Fireworks from "./fireworks.js"
 export * as Google from "./google.js"
 export * as GoogleVertex from "./google-vertex.js"
 export * as GoogleVertexChat from "./google-vertex-chat.js"

packages/ai/src/providers/openai-compatible-profile.ts

@@ -1,20 +0,0 @@
-export interface OpenAICompatibleProfile {
-  readonly provider: string
-  readonly baseURL: string
-}
-
-export const profiles = {
-  baseten: { provider: "baseten", baseURL: "https://inference.baseten.co/v1" },
-  cerebras: { provider: "cerebras", baseURL: "https://api.cerebras.ai/v1" },
-  deepinfra: { provider: "deepinfra", baseURL: "https://api.deepinfra.com/v1/openai" },
-  deepseek: { provider: "deepseek", baseURL: "https://api.deepseek.com/v1" },
-  fireworks: { provider: "fireworks", baseURL: "https://api.fireworks.ai/inference/v1" },
-  groq: { provider: "groq", baseURL: "https://api.groq.com/openai/v1" },
-  openrouter: { provider: "openrouter", baseURL: "https://openrouter.ai/api/v1" },
-  togetherai: { provider: "togetherai", baseURL: "https://api.together.xyz/v1" },
-  xai: { provider: "xai", baseURL: "https://api.x.ai/v1" },
-} as const satisfies Record<string, OpenAICompatibleProfile>
-
-export const byProvider: Record<string, OpenAICompatibleProfile> = Object.fromEntries(
-  Object.values(profiles).map((profile) => [profile.provider, profile]),
-)

packages/ai/src/providers/openai-compatible.ts

@@ -1,9 +1,8 @@
 import { ProviderID, type ModelID } from "../schema/index.js"
-import * as OpenAICompatibleChat from "../protocols/openai-compatible-chat.js"
+import { OpenAICompatibleChat } from "../protocols/openai-compatible-chat.js"
 import type { RouteDefaultsInput } from "../route/client.js"
 import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
 import type { ProviderPackage } from "../provider-package.js"
-import { profiles, type OpenAICompatibleProfile } from "./openai-compatible-profile.js"
 import type { OpenAIProviderOptionsInput } from "./openai-options.js"
 
 export const id = ProviderID.make("openai-compatible")
@@ -22,12 +21,6 @@ export interface Settings extends ProviderPackage.Settings {
   readonly providerOptions?: OpenAIProviderOptionsInput
 }
 
-export type FamilyModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
-  ProviderAuthOption<"optional"> & {
-    readonly baseURL?: string
-    readonly providerOptions?: OpenAIProviderOptionsInput
-  }
-
 export const routes = [OpenAICompatibleChat.route]
 
 export const configure = (input: GenericModelOptions) => {
@@ -47,22 +40,6 @@ export const configure = (input: GenericModelOptions) => {
   }
 }
 
-const define = (profile: OpenAICompatibleProfile) => {
-  const configureProfile = (input: FamilyModelOptions = {}) => {
-    const facade = configure({
-      ...input,
-      baseURL: input.baseURL ?? profile.baseURL,
-      provider: profile.provider,
-    })
-    return {
-      id: ProviderID.make(profile.provider),
-      model: facade.model,
-      configure: configureProfile,
-    }
-  }
-  return configureProfile()
-}
-
 export const provider = {
   id,
   configure,
@@ -78,10 +55,4 @@ export const model: ProviderPackage.Definition<Settings, OpenAIProviderOptionsIn
     providerOptions: settings.providerOptions,
   }).model(modelID)
 
-export const baseten = define(profiles.baseten)
-export const cerebras = define(profiles.cerebras)
-export const deepinfra = define(profiles.deepinfra)
-export const deepseek = define(profiles.deepseek)
-export const fireworks = define(profiles.fireworks)
-export const groq = define(profiles.groq)
-export const togetherai = define(profiles.togetherai)
+export * as OpenAICompatible from "./openai-compatible.js"

packages/ai/src/providers/openrouter.ts

@@ -5,13 +5,12 @@ import { Protocol } from "../route/protocol.js"
 import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
 import { ProviderID, type CacheHint, type ModelID } from "../schema/index.js"
 import type { ProviderPackage } from "../provider-package.js"
-import * as OpenAICompatibleProfiles from "./openai-compatible-profile.js"
-import * as OpenAIChat from "../protocols/openai-chat.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
 import { newBreakpoints, ttlBucket } from "../protocols/utils/cache.js"
 import { isRecord } from "../protocols/shared.js"
 
-export const profile = OpenAICompatibleProfiles.profiles.openrouter
-export const id = ProviderID.make(profile.provider)
+export const id = ProviderID.make("openrouter")
+const baseURL = "https://openrouter.ai/api/v1"
 const ADAPTER = "openrouter"
 
 type OpenRouterString<Known extends string> = Known | (string & {})
@@ -162,20 +161,20 @@ const bodyOptions = (input: unknown) => {
 
 export const route = Route.make({
   id: ADAPTER,
-  provider: profile.provider,
+  provider: id,
   providerMetadataKey: "openrouter",
   protocol,
-  endpoint: Endpoint.path("/chat/completions", { baseURL: profile.baseURL }),
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
   framing: OpenAIChat.framing,
 })
 
 export const routes = [route]
 
 const configuredRoute = (input: LanguageModelOptions) => {
-  const { apiKey: _, auth: _auth, baseURL, ...rest } = input
+  const { apiKey: _, auth: _auth, baseURL: endpoint, ...rest } = input
   return route.with({
     ...rest,
-    endpoint: { baseURL: baseURL ?? profile.baseURL },
+    endpoint: { baseURL: endpoint ?? baseURL },
     auth: AuthOptions.bearer(input, "OPENROUTER_API_KEY"),
   })
 }

packages/ai/src/providers/togetherai.ts

@@ -1,12 +1,13 @@
 import type { ProviderPackage } from "../provider-package.js"
-import { OpenAICompatibleChat } from "../protocols/openai-compatible-chat.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
 import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
-import type { RouteDefaultsInput } from "../route/client.js"
+import { Route, type RouteDefaultsInput } from "../route/client.js"
+import { Endpoint } from "../route/endpoint.js"
 import { ProviderID, type ModelID } from "../schema/index.js"
-import { profiles } from "./openai-compatible-profile.js"
 import type { OpenAIProviderOptionsInput } from "./openai-options.js"
 
 export const id = ProviderID.make("togetherai")
+const baseURL = "https://api.together.xyz/v1"
 
 export type LanguageModelOptions = Omit<RouteDefaultsInput, "providerOptions"> &
   ProviderAuthOption<"optional"> & {
@@ -20,19 +21,22 @@ export interface Settings extends ProviderPackage.Settings {
   readonly providerOptions?: OpenAIProviderOptionsInput
 }
 
-export const route = OpenAICompatibleChat.route.with({
+export const route = Route.make({
   id: "togetherai-chat",
   provider: id,
-  endpoint: { baseURL: profiles.togetherai.baseURL },
+  providerMetadataKey: "togetherai",
+  protocol: OpenAIChat.protocol,
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
+  framing: OpenAIChat.framing,
 })
 
 export const routes = [route]
 
 export const configure = (input: LanguageModelOptions = {}) => {
-  const { apiKey: _apiKey, auth: _auth, baseURL, ...defaults } = input
+  const { apiKey: _apiKey, auth: _auth, baseURL: endpoint, ...defaults } = input
   const configured = route.with({
     ...defaults,
-    endpoint: { baseURL: baseURL ?? profiles.togetherai.baseURL },
+    endpoint: { baseURL: endpoint ?? baseURL },
     auth: AuthOptions.bearer(input, ["TOGETHER_API_KEY", "TOGETHER_AI_API_KEY"]),
   })
   return {

packages/ai/src/providers/xai.ts

@@ -2,9 +2,7 @@ import { AuthOptions, type ProviderAuthOption } from "../route/auth-options.js"
 import { Route, type RouteDefaultsInput } from "../route/client.js"
 import { Endpoint } from "../route/endpoint.js"
 import { HttpOptions, ProviderID, type ModelID } from "../schema/index.js"
-import * as OpenAICompatibleProfiles from "./openai-compatible-profile.js"
-import * as OpenAICompatibleChat from "../protocols/openai-compatible-chat.js"
-import * as OpenAIChat from "../protocols/openai-chat.js"
+import { OpenAIChat } from "../protocols/openai-chat.js"
 import { OpenResponsesChannel } from "../protocols/open-responses-channel.js"
 import { XAIResponses } from "../protocols/xai-responses.js"
 import { XAIImages } from "../protocols/xai-images.js"
@@ -12,6 +10,7 @@ import type { OpenAIOptionsInput } from "./openai-options.js"
 import type { ProviderPackage } from "../provider-package.js"
 
 export const id = ProviderID.make("xai")
+const baseURL = "https://api.x.ai/v1"
 
 export type XAIProviderOptionsInput = OpenAIOptionsInput & { readonly contextManagement?: never }
 
@@ -37,7 +36,7 @@ const responsesRoute = Route.make({
   provider: id,
   providerMetadataKey: "xai",
   protocol: XAIResponses.protocol,
-  endpoint: Endpoint.path("/responses", { baseURL: OpenAICompatibleProfiles.profiles.xai.baseURL }),
+  endpoint: Endpoint.path("/responses", { baseURL }),
   transport: OpenResponsesChannel.transport({
     id: "openai-responses",
     name: "xAI Responses",
@@ -51,8 +50,8 @@ const chatRoute = Route.make({
   provider: id,
   providerMetadataKey: "xai",
   protocol: OpenAIChat.protocol,
-  endpoint: Endpoint.path("/chat/completions", { baseURL: OpenAICompatibleProfiles.profiles.xai.baseURL }),
-  transport: OpenAICompatibleChat.route.transport,
+  endpoint: Endpoint.path("/chat/completions", { baseURL }),
+  framing: OpenAIChat.framing,
   headers: ({ request }): Record<string, string> =>
     request.promptCacheKey ? { "x-grok-conv-id": request.promptCacheKey } : {},
 })
@@ -62,19 +61,19 @@ export const routes = [responsesRoute, chatRoute]
 const auth = (options: ProviderAuthOption<"optional">) => AuthOptions.bearer(options, "XAI_API_KEY")
 
 const configuredResponsesRoute = (input: LanguageModelOptions) => {
-  const { apiKey: _, auth: _auth, baseURL, ...rest } = input
+  const { apiKey: _, auth: _auth, baseURL: endpoint, ...rest } = input
   return responsesRoute.with({
     ...rest,
-    endpoint: { baseURL: baseURL ?? OpenAICompatibleProfiles.profiles.xai.baseURL },
+    endpoint: { baseURL: endpoint ?? baseURL },
     auth: auth(input),
   })
 }
 
 const configuredChatRoute = (input: LanguageModelOptions) => {
-  const { apiKey: _, auth: _auth, baseURL, ...rest } = input
+  const { apiKey: _, auth: _auth, baseURL: endpoint, ...rest } = input
   return chatRoute.with({
     ...rest,
-    endpoint: { baseURL: baseURL ?? OpenAICompatibleProfiles.profiles.xai.baseURL },
+    endpoint: { baseURL: endpoint ?? baseURL },
     auth: auth(input),
   })
 }
@@ -88,7 +87,7 @@ export const configure = (input: LanguageModelOptions = {}) => {
     XAIImages.model({
       id: modelID,
       auth: auth(input),
-      baseURL: input.baseURL ?? OpenAICompatibleProfiles.profiles.xai.baseURL,
+      baseURL: input.baseURL ?? baseURL,
       headers: input.headers,
       http: input.http === undefined ? undefined : HttpOptions.make(input.http),
     })

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

@@ -20,7 +20,7 @@ export interface WebSocketChannelExchange {
   readonly connect: {
     readonly url: string
     readonly headers: Headers.Headers
-    /** Provider-safe connection age after which Core should rotate before sending. */
+    /** Provider-safe connection age after which the channel executor should reconnect before sending. */
     readonly rotateAfterMs?: number
   }
   readonly fallback: () => Stream.Stream<string, AIError>

packages/ai/test/auth-options.types.ts

@@ -6,7 +6,8 @@ import * as AmazonBedrock from "../src/providers/amazon-bedrock.js"
 import * as Anthropic from "../src/providers/anthropic.js"
 import * as AnthropicCompatible from "../src/providers/anthropic-compatible.js"
 import * as Azure from "../src/providers/azure.js"
-import * as Cloudflare from "../src/providers/cloudflare.js"
+import { CloudflareWorkersAI } from "../src/providers/cloudflare-workers-ai.js"
+import { DeepSeek } from "../src/providers/deepseek.js"
 import * as Google from "../src/providers/google.js"
 import * as GoogleVertex from "../src/providers/google-vertex.js"
 import * as GoogleVertexChat from "../src/providers/google-vertex-chat.js"
@@ -263,10 +264,10 @@ XAI.configure({ apiKey: "xai-key" }).responses("grok-4", {})
 // @ts-expect-error xAI Chat selectors only accept model ids.
 XAI.configure({ apiKey: "xai-key" }).chat("grok-4", {})
 
-OpenAICompatible.deepseek.configure({ apiKey: "deepseek-key" }).model("deepseek-chat")
+DeepSeek.configure({ apiKey: "deepseek-key" }).model("deepseek-chat")
 // @ts-expect-error OpenAI-compatible family selectors only accept model ids.
-OpenAICompatible.deepseek.configure({ apiKey: "deepseek-key" }).model("deepseek-chat", {})
+DeepSeek.configure({ apiKey: "deepseek-key" }).model("deepseek-chat", {})
 
-Cloudflare.CloudflareWorkersAI.configure({ accountId: "account", apiKey: "cf-key" }).model("@cf/meta/llama")
+CloudflareWorkersAI.configure({ accountId: "account", apiKey: "cf-key" }).model("@cf/meta/llama")
 // @ts-expect-error Cloudflare Workers AI model selectors only accept model ids.
-Cloudflare.CloudflareWorkersAI.configure({ accountId: "account", apiKey: "cf-key" }).model("@cf/meta/llama", {})
+CloudflareWorkersAI.configure({ accountId: "account", apiKey: "cf-key" }).model("@cf/meta/llama", {})

packages/ai/test/exports.test.ts

@@ -3,8 +3,11 @@ import { AIError, ImageInput, LanguageModel, LLM, LLMClient, Provider } from "@o
 import { Route, Protocol, WebSocketTransport } from "@opencode-ai/ai/route"
 import { Provider as ProviderSubpath } from "@opencode-ai/ai/provider"
 import {
+  Baseten,
   CloudflareAIGateway,
   CloudflareWorkersAI,
+  DeepSeek,
+  Fireworks,
   OpenAI,
   OpenAICompatible,
   OpenRouter,
@@ -48,7 +51,13 @@ describe("public exports", () => {
     expect(OpenAI.model).toBeFunction()
     expect(OpenAI.provider.responses).toBe(OpenAI.responses)
     expect(OpenAI.configure({ apiKey: "fixture" }).responses).toBeFunction()
-    expect(OpenAICompatible.deepseek.model).toBeFunction()
+    for (const provider of [Baseten, DeepSeek, Fireworks]) {
+      expect(provider.configure).toBeFunction()
+      expect(provider.model).toBeFunction()
+    }
+    for (const name of ["baseten", "cerebras", "deepinfra", "deepseek", "fireworks", "groq", "togetherai"]) {
+      expect(OpenAICompatible).not.toHaveProperty(name)
+    }
     expect(
       OpenAICompatibleResponses.configure({ baseURL: "https://responses.test/v1" }).model("fixture").route.id,
     ).toBe("openai-compatible-responses")

packages/ai/test/provider-options/openai-compatible.types.ts

@@ -1,7 +1,7 @@
 import { LLM } from "../../src/index.js"
 import { OpenAICompatible } from "../../src/providers.js"
 
-const model = OpenAICompatible.deepseek.model("deepseek-chat")
+const model = OpenAICompatible.configure({ baseURL: "https://compatible.example/v1" }).model("test-model")
 
 LLM.request({ model, prompt: "Hello", providerOptions: { store: false } })
 

packages/ai/test/provider-package.test.ts

@@ -32,6 +32,11 @@ describe("provider package entrypoints", () => {
       import("@opencode-ai/ai/providers/cerebras"),
       import("@opencode-ai/ai/providers/deepinfra"),
       import("@opencode-ai/ai/providers/groq"),
+      import("@opencode-ai/ai/providers/baseten"),
+      import("@opencode-ai/ai/providers/deepseek"),
+      import("@opencode-ai/ai/providers/fireworks"),
+      import("@opencode-ai/ai/providers/cloudflare-ai-gateway"),
+      import("@opencode-ai/ai/providers/cloudflare-workers-ai"),
     ])
 
     for (const module of modules) expect(module.model).toBeFunction()
@@ -60,6 +65,27 @@ describe("provider package entrypoints", () => {
     expect(deepinfra.route.defaults.http?.body).toEqual(settings.body)
   })
 
+  test("maps Cloudflare package settings onto provider-owned models", async () => {
+    const modules = await Promise.all([
+      import("@opencode-ai/ai/providers/cloudflare-ai-gateway"),
+      import("@opencode-ai/ai/providers/cloudflare-workers-ai"),
+    ])
+    for (const provider of modules) {
+      const selected = provider.model("provider-model", {
+        accountId: "account",
+        apiKey: "fixture",
+        headers: { "x-application": "opencode" },
+        body: { custom: true },
+        providerOptions: { reasoningEffort: "high" },
+      })
+      expect(selected.provider).toBe(provider.id)
+      expect(selected.route.endpoint.baseURL).toBe(provider.baseURL({ accountId: "account" }))
+      expect(selected.route.defaults.headers).toEqual({ "x-application": "opencode" })
+      expect(selected.route.defaults.http?.body).toEqual({ custom: true })
+      expect(selected.route.defaults.providerOptions).toEqual({ reasoningEffort: "high" })
+    }
+  })
+
   test("maps OpenRouter and xAI package settings onto executable models", async () => {
     const OpenRouter = await import("@opencode-ai/ai/providers/openrouter")
     const XAI = await import("@opencode-ai/ai/providers/xai")

packages/ai/test/provider/cloudflare.test.ts

@@ -2,7 +2,8 @@ import { describe, expect, test } from "bun:test"
 import { ConfigProvider, Effect, Schema } from "effect"
 import { HttpClientRequest } from "effect/unstable/http"
 import { LLM, LLMEvent } from "../../src/index.js"
-import { CloudflareAIGateway, CloudflareWorkersAI } from "../../src/providers/cloudflare.js"
+import { CloudflareAIGateway } from "../../src/providers/cloudflare-ai-gateway.js"
+import { CloudflareWorkersAI } from "../../src/providers/cloudflare-workers-ai.js"
 import { compileRequest } from "../../src/route/client.js"
 import { it } from "../lib/effect.js"
 import { dynamicResponse } from "../lib/http.js"

packages/ai/test/provider/golden.recorded.test.ts

@@ -1,7 +1,13 @@
 import * as Anthropic from "../../src/providers/anthropic.js"
 import * as AnthropicCompatible from "../../src/providers/anthropic-compatible.js"
-import { Cerebras, DeepInfra, TogetherAI } from "../../src/providers/index.js"
-import { CloudflareAIGateway, CloudflareWorkersAI } from "../../src/providers/cloudflare.js"
+import {
+  Cerebras,
+  CloudflareAIGateway,
+  CloudflareWorkersAI,
+  DeepInfra,
+  DeepSeek,
+  TogetherAI,
+} from "../../src/providers/index.js"
 import * as Google from "../../src/providers/google.js"
 import * as OpenAI from "../../src/providers/openai.js"
 import * as OpenAICompatible from "../../src/providers/openai-compatible.js"
@@ -45,16 +51,18 @@ const cloudflareAIGatewayWorkers = cloudflareAIGateway.model("workers-ai/@cf/met
 const cloudflareAIGatewayWorkersTools = cloudflareAIGateway.model("workers-ai/@cf/openai/gpt-oss-20b")
 const cloudflareWorkersAI = cloudflareWorkers.model("@cf/meta/llama-3.1-8b-instruct")
 const cloudflareWorkersAITools = cloudflareWorkers.model("@cf/openai/gpt-oss-20b")
-const deepseek = OpenAICompatible.deepseek
-  .configure({ apiKey: process.env.DEEPSEEK_API_KEY ?? "fixture" })
-  .model("deepseek-chat")
+const deepseek = DeepSeek.configure({ apiKey: process.env.DEEPSEEK_API_KEY ?? "fixture" }).model("deepseek-chat")
 const together = TogetherAI.configure({
   apiKey: process.env.TOGETHER_API_KEY ?? process.env.TOGETHER_AI_API_KEY ?? "fixture",
 }).model("meta-llama/Llama-3.3-70B-Instruct-Turbo")
 const cerebras = Cerebras.configure({ apiKey: process.env.CEREBRAS_API_KEY ?? "fixture" }).model("gpt-oss-120b")
-const groq = OpenAICompatible.groq
-  .configure({ apiKey: process.env.GROQ_API_KEY ?? "fixture" })
-  .model("llama-3.3-70b-versatile")
+// These older cassettes exercise generic Chat compatibility. Native Groq request
+// shaping and reasoning are covered by groq.recorded.test.ts.
+const groq = OpenAICompatible.configure({
+  provider: "groq",
+  baseURL: "https://api.groq.com/openai/v1",
+  apiKey: process.env.GROQ_API_KEY ?? "fixture",
+}).model("llama-3.3-70b-versatile")
 const deepInfra = DeepInfra.configure({ apiKey: process.env.DEEPINFRA_API_KEY ?? "fixture" }).model(
   "meta-llama/Llama-3.3-70B-Instruct-Turbo",
 )

packages/ai/test/provider/native-providers.test.ts

@@ -8,10 +8,13 @@ import {
   Anthropic,
   AnthropicCompatible,
   Azure,
+  Baseten,
   Cerebras,
   CloudflareAIGateway,
   CloudflareWorkersAI,
   DeepInfra,
+  DeepSeek,
+  Fireworks,
   Google,
   GoogleVertex,
   GoogleVertexChat,
@@ -57,6 +60,9 @@ describe("native OpenAI-compatible providers", () => {
         "custom",
       ],
       [Cerebras.configure({ apiKey: "test" }).model("model"), "cerebras"],
+      [Baseten.configure({ apiKey: "test" }).model("model"), "baseten"],
+      [DeepSeek.configure({ apiKey: "test" }).model("model"), "deepseek"],
+      [Fireworks.configure({ apiKey: "test" }).model("model"), "fireworks"],
       [DeepInfra.configure({ apiKey: "test" }).model("model"), "deepinfra"],
       [TogetherAI.configure({ apiKey: "test" }).model("model"), "togetherai"],
       [CloudflareAIGateway.configure({ accountId: "account" }).model("model"), "cloudflare-ai-gateway"],
@@ -87,6 +93,36 @@ describe("native OpenAI-compatible providers", () => {
     expect(cerebras.route.endpoint.baseURL).toBe("https://api.cerebras.ai/v1")
   })
 
+  it.effect("preserves extracted providers' Chat requests and identity through custom endpoints", () =>
+    Effect.gen(function* () {
+      for (const provider of [Baseten, DeepSeek, Fireworks]) {
+        const settings = {
+          apiKey: "fixture",
+          baseURL: "https://gateway.example/v1",
+          providerOptions: { reasoningEffort: "high" },
+        }
+        const selected = provider.configure(settings).model("test-model")
+        expect(selected.provider).toBe(provider.id)
+        expect(selected.route.id).toBe(`${provider.id}-chat`)
+        expect(selected.route.protocol).toBe("openai-chat")
+        expect(selected.route.endpoint.baseURL).toBe(settings.baseURL)
+        const input = {
+          prompt: "Use a tool.",
+          generation: { maxTokens: 48 },
+          tools: [ToolDefinition.make({ name: "lookup", description: "Lookup data", inputSchema: { type: "object" } })],
+        }
+        const native = yield* compileRequest(LLM.request({ ...input, model: selected }))
+        const generic = yield* compileRequest(
+          LLM.request({
+            ...input,
+            model: OpenAICompatible.configure({ ...settings, provider: provider.id }).model("test-model"),
+          }),
+        )
+        expect(native.body).toEqual(generic.body)
+      }
+    }),
+  )
+
   test("preserves native DeepInfra provider and route identity", () => {
     const deepinfra = DeepInfra.configure({ apiKey: "fixture" }).model("google/gemma-3-27b-it")
     expect(deepinfra).toMatchObject({
@@ -164,7 +200,7 @@ describe("native OpenAI-compatible providers", () => {
   })
 
   test("maps package settings onto native executable models", () => {
-    for (const native of [TogetherAI, Cerebras]) {
+    for (const native of [Baseten, Cerebras, DeepSeek, Fireworks, TogetherAI]) {
       const selected = native.model("provider-model", {
         apiKey: "fixture",
         baseURL: "https://gateway.example/v1",
@@ -183,6 +219,24 @@ describe("native OpenAI-compatible providers", () => {
   it.effect("resolves provider environment credentials and preserves deprecated Together credentials", () =>
     Effect.gen(function* () {
       const scenarios = [
+        {
+          model: Baseten.configure().model("model"),
+          env: { BASETEN_API_KEY: "baseten-secret" },
+          token: "baseten-secret",
+          url: "https://inference.baseten.co/v1/chat/completions",
+        },
+        {
+          model: DeepSeek.configure().model("deepseek-chat"),
+          env: { DEEPSEEK_API_KEY: "deepseek-secret" },
+          token: "deepseek-secret",
+          url: "https://api.deepseek.com/v1/chat/completions",
+        },
+        {
+          model: Fireworks.configure().model("model"),
+          env: { FIREWORKS_API_KEY: "fireworks-secret" },
+          token: "fireworks-secret",
+          url: "https://api.fireworks.ai/inference/v1/chat/completions",
+        },
         {
           model: TogetherAI.configure().model("llama"),
           env: { TOGETHER_API_KEY: "together-primary", TOGETHER_AI_API_KEY: "together-legacy" },

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

@@ -4,7 +4,6 @@ import { HttpClientRequest } from "effect/unstable/http"
 import { LLM, LLMRequest, Message, ToolCallPart, ToolChoice, ToolDefinition } from "../../src/index.js"
 import { Auth, LLMClient } from "../../src/route.js"
 import { compileRequest } from "../../src/route/client.js"
-import * as OpenAICompatible from "../../src/providers/openai-compatible.js"
 import * as OpenAICompatibleChat from "../../src/protocols/openai-compatible-chat.js"
 import { it } from "../lib/effect.js"
 import { dynamicResponse, fixedResponse } from "../lib/http.js"
@@ -41,15 +40,6 @@ const usageChunk = (usage: object) => ({
   usage,
 })
 
-const providerFamilies = [
-  ["baseten", OpenAICompatible.baseten, "https://inference.baseten.co/v1"],
-  ["cerebras", OpenAICompatible.cerebras, "https://api.cerebras.ai/v1"],
-  ["deepinfra", OpenAICompatible.deepinfra, "https://api.deepinfra.com/v1/openai"],
-  ["deepseek", OpenAICompatible.deepseek, "https://api.deepseek.com/v1"],
-  ["fireworks", OpenAICompatible.fireworks, "https://api.fireworks.ai/inference/v1"],
-  ["togetherai", OpenAICompatible.togetherai, "https://api.together.xyz/v1"],
-] as const
-
 describe("OpenAI-compatible Chat route", () => {
   it.effect("prepares generic Chat target", () =>
     Effect.gen(function* () {
@@ -91,39 +81,6 @@ describe("OpenAI-compatible Chat route", () => {
     }),
   )
 
-  test("provides model helpers for compatible provider families", () => {
-    expect(
-      providerFamilies.map(([provider, family]) => {
-        const model = family.configure({ apiKey: "test-key" }).model(`${provider}-model`)
-        return {
-          id: String(model.id),
-          provider: String(model.provider),
-          route: model.route.id,
-          baseURL: model.route.endpoint.baseURL,
-        }
-      }),
-    ).toEqual(
-      providerFamilies.map(([provider, _, baseURL]) => ({
-        id: `${provider}-model`,
-        provider,
-        route: "openai-compatible-chat",
-        baseURL,
-      })),
-    )
-
-    const custom = OpenAICompatible.deepseek
-      .configure({
-        apiKey: "test-key",
-        baseURL: "https://custom.deepseek.test/v1",
-      })
-      .model("deepseek-chat")
-    expect(custom).toMatchObject({
-      provider: "deepseek",
-      route: { id: "openai-compatible-chat" },
-    })
-    expect(custom.route.endpoint.baseURL).toBe("https://custom.deepseek.test/v1")
-  })
-
   it.effect("matches AI SDK compatible basic request body fixture", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(request)

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

@@ -34,7 +34,7 @@ const observationFrame = (observation: ChannelObservation) => {
 
 const terminal = (observation: ChannelObservation) => observation.type !== "frame"
 
-// This deliberately models only sequential test traffic. Core owns production connection pooling and recovery.
+// This channel fixture supports sequential test traffic.
 const makeChannel = Effect.gen(function* () {
   const constructor = yield* Socket.WebSocketConstructor
   let connection: WebSocketConnection | undefined

packages/app/component-tests/timeline-detail.spec.ts

@@ -0,0 +1,264 @@
+import { expect, story } from "../../storybook/playwright/story"
+
+story("maps grouped and collapsed switches to the timeline settings", async ({ mount }) => {
+  const component = await mount("settings-timeline-detail--interactive")
+  await component.getByRole("button", { name: "Advanced", exact: true }).click()
+  const shell = component.getByRole("group", { name: "Shell", exact: true })
+  const grouped = shell.getByRole("switch", { name: "Shell grouped", exact: true })
+  const collapsed = shell.getByRole("switch", { name: "Shell collapsed", exact: true })
+  const value = component.locator('[data-slot="timeline-detail-fixture-value"]')
+
+  await expect(component.getByRole("switch")).toHaveCount(9)
+  await expect(component.getByText("Activity", { exact: true })).toHaveCount(0)
+  await expect(grouped).toBeChecked()
+  await expect(collapsed).toBeChecked()
+  await shell.locator('[data-field="placement"] [data-slot="switch-control"]').click()
+  await shell.locator('[data-field="details"] [data-slot="switch-control"]').click()
+  await expect(value).toContainText('"shell":{"placement":"separate","details":"expanded"}')
+  await grouped.focus()
+  await grouped.press("Space")
+  await collapsed.focus()
+  await collapsed.press("Space")
+  await expect(value).toContainText('"shell":{"placement":"grouped","details":"collapsed"}')
+  await expect(component.getByRole("group", { name: "Subagents", exact: true }).getByRole("switch")).toHaveCount(1)
+})
+
+story("replaces hidden switches with solid lines and restores options", async ({ mount, page }) => {
+  const component = await mount("settings-timeline-detail--interactive")
+  await component.getByRole("button", { name: "Advanced", exact: true }).click()
+  const shell = component.getByRole("group", { name: "Shell", exact: true })
+  const visibility = shell.getByRole("button", { name: "Shell visibility" })
+  const label = shell.locator('[data-slot="timeline-detail-activity"] > label')
+  const color = await label.evaluate((element) => getComputedStyle(element).color)
+  const iconColor = await visibility.evaluate((element) => getComputedStyle(element).color)
+  await shell.locator('[data-field="placement"] [data-slot="switch-control"]').click()
+  await shell.locator('[data-field="details"] [data-slot="switch-control"]').click()
+  await visibility.hover()
+  await expect(page.getByRole("tooltip")).toHaveText("Hide")
+  expect(await page.getByRole("tooltip").evaluate((element) => element.getBoundingClientRect().bottom)).toBeLessThan(
+    await visibility.evaluate((element) => element.getBoundingClientRect().top),
+  )
+  await visibility.click()
+
+  await expect(visibility).toHaveAttribute("aria-pressed", "false")
+  await expect(shell.getByRole("switch")).toHaveCount(0)
+  await expect(shell.locator('[data-slot="timeline-detail-unavailable"]')).toHaveCount(2)
+  await expect(shell.locator('[data-slot="timeline-detail-unavailable"]').first()).toHaveCSS(
+    "border-top-style",
+    "solid",
+  )
+  await expect(component.locator('[data-slot="timeline-detail-fixture-value"]')).toContainText(
+    '"shell":{"placement":"hidden","details":"expanded"}',
+  )
+  await expect(label).not.toHaveCSS("color", color)
+  await expect(visibility.locator("use")).toHaveAttribute("href", "#opencode-v2-icon-outline-eye-slash")
+  await component.getByRole("button", { name: "Advanced", exact: true }).hover()
+  await expect(visibility).not.toHaveCSS("color", iconColor)
+  await expect(shell.locator('[data-slot="timeline-detail-unavailable"]').first()).toHaveCSS(
+    "border-top-color",
+    await visibility.evaluate((element) => getComputedStyle(element).color),
+  )
+  await visibility.hover()
+  await expect(page.getByRole("tooltip")).toHaveText("Show")
+  expect(await page.getByRole("tooltip").evaluate((element) => element.getBoundingClientRect().bottom)).toBeLessThan(
+    await visibility.evaluate((element) => element.getBoundingClientRect().top),
+  )
+  await visibility.click()
+
+  await expect(visibility).toHaveAttribute("aria-pressed", "true")
+  await expect(label).toHaveCSS("color", color)
+  await expect(visibility.locator("use")).toHaveAttribute("href", "#opencode-v2-icon-outline-eye")
+  await expect(shell.locator('[data-slot="timeline-detail-unavailable"]')).toHaveCount(0)
+  await expect(shell.getByRole("switch", { name: "Shell grouped", exact: true })).toBeEnabled()
+  await expect(shell.getByRole("switch", { name: "Shell collapsed", exact: true })).toBeEnabled()
+  await expect(shell.getByRole("switch", { name: "Shell grouped", exact: true })).not.toBeChecked()
+  await expect(shell.getByRole("switch", { name: "Shell collapsed", exact: true })).not.toBeChecked()
+})
+
+story("toggles visibility by clicking the activity label", async ({ mount }) => {
+  const component = await mount("settings-timeline-detail--interactive")
+  await component.getByRole("button", { name: "Advanced", exact: true }).click()
+  const shell = component.getByRole("group", { name: "Shell", exact: true })
+  const label = shell.locator('[data-slot="timeline-detail-activity"] > label')
+  const visibility = shell.getByRole("button", { name: "Shell visibility" })
+
+  await expect(label).toHaveCSS("cursor", "default")
+  await label.click()
+  await expect(visibility).toHaveAttribute("aria-pressed", "false")
+  await expect(shell.getByRole("switch")).toHaveCount(0)
+  await expect(shell.locator('[data-slot="timeline-detail-unavailable"]')).toHaveCount(2)
+  await label.click()
+  await expect(visibility).toHaveAttribute("aria-pressed", "true")
+  await expect(shell.getByRole("switch", { name: "Shell grouped", exact: true })).toBeChecked()
+  await expect(shell.getByRole("switch", { name: "Shell collapsed", exact: true })).toBeChecked()
+})
+
+story("only highlights the eye when hovering the icon, not its activity label", async ({ mount }) => {
+  const component = await mount("settings-timeline-detail--interactive")
+  await component.getByRole("button", { name: "Advanced", exact: true }).click()
+  const shell = component.getByRole("group", { name: "Shell", exact: true })
+  const visibility = shell.getByRole("button", { name: "Shell visibility" })
+  const label = shell.locator('[data-slot="timeline-detail-activity"] > label')
+
+  for (const hidden of [false, true]) {
+    if (hidden) await label.click()
+    await visibility.hover()
+    await expect(visibility).not.toHaveCSS("background-color", "rgba(0, 0, 0, 0)")
+    await label.hover()
+    await expect(visibility).toHaveCSS("background-color", "rgba(0, 0, 0, 0)")
+  }
+})
+
+story("opens advanced on returning to custom settings but not presets", async ({ mount }) => {
+  const component = await mount("settings-timeline-detail--interactive")
+  const advanced = component.getByRole("button", { name: "Advanced", exact: true })
+  await expect(advanced).toHaveAttribute("aria-expanded", "false")
+  await advanced.click()
+  await component.locator('[data-category="shell"][data-field="placement"] [data-slot="switch-control"]').click()
+  await expect(component.getByRole("slider")).toHaveAttribute("aria-valuetext", "Custom")
+  await advanced.click()
+  await expect(advanced).toHaveAttribute("aria-expanded", "false")
+  await component.getByRole("button", { name: "Leave settings" }).click()
+  await expect(advanced).toHaveCount(0)
+  await component.getByRole("button", { name: "Return to settings" }).click()
+  await expect(advanced).toHaveAttribute("aria-expanded", "true")
+  await expect(component.getByRole("switch", { name: "Shell grouped", exact: true })).not.toBeChecked()
+
+  await component.getByRole("slider").press("End")
+  await expect(component.getByRole("slider")).toHaveAttribute("aria-valuetext", "Everything")
+  await component.getByRole("button", { name: "Leave settings" }).click()
+  await component.getByRole("button", { name: "Return to settings" }).click()
+  await expect(advanced).toHaveAttribute("aria-expanded", "false")
+})
+
+story("keeps visibility and switches in sync with the preset slider", async ({ mount }) => {
+  const component = await mount("settings-timeline-detail--interactive")
+  await component.getByRole("button", { name: "Advanced", exact: true }).click()
+  const slider = component.getByRole("slider", { name: "Timeline detail" })
+  await slider.focus()
+  await slider.press("Home")
+  await expect(slider).toHaveAttribute("aria-valuetext", "Messages only")
+  await expect(component.getByRole("switch")).toHaveCount(0)
+  await expect(component.locator('[data-slot="timeline-detail-unavailable"]')).toHaveCount(9)
+  await expect(component.locator('[data-action="timeline-detail-visibility"][aria-pressed="false"]')).toHaveCount(6)
+  await component.getByRole("button", { name: "Shell visibility" }).click()
+  await expect(component.getByRole("switch", { name: "Shell grouped", exact: true })).toBeChecked()
+  await expect(slider).toHaveAttribute("aria-valuetext", "Custom")
+  await slider.focus()
+  await slider.press("End")
+  await expect(slider).toHaveAttribute("aria-valuetext", "Everything")
+  await expect(component.getByRole("switch")).toHaveCount(9)
+  await expect(component.locator('[data-slot="timeline-detail-unavailable"]')).toHaveCount(0)
+  await expect(component.locator('[data-action="timeline-detail-visibility"][aria-pressed="true"]')).toHaveCount(6)
+  await expect(component.getByRole("switch", { checked: true })).toHaveCount(0)
+})
+
+for (const direction of ["ltr", "rtl"]) {
+  for (const theme of ["light", "dark"]) {
+    story(`fits narrow and wide layouts in ${direction}, ${theme}`, async ({ mount, page }, testInfo) => {
+      await page.setViewportSize({ width: 900, height: 900 })
+      const component = await mount("settings-timeline-detail--interactive", { globals: { direction, theme } })
+      await expect(component.locator('[data-slot="timeline-detail-summary"]')).toHaveCSS(
+        "color",
+        await component
+          .locator('[data-slot="settings-row-title"]')
+          .evaluate((element) => getComputedStyle(element).color),
+      )
+      await component.getByRole("button", { name: "Advanced", exact: true }).click()
+      const track = component.locator('[data-slot="timeline-detail-track"]')
+      await expect(track).toHaveCSS(
+        "--timeline-detail-track-background",
+        await track.evaluate(
+          (element, theme) =>
+            getComputedStyle(element)
+              .getPropertyValue(theme === "light" ? "--v2-background-bg-layer-04" : "--v2-background-bg-layer-03")
+              .trim(),
+          theme,
+        ),
+      )
+      if (theme === "light") {
+        await expect(track.locator("span").first()).toHaveCSS("background-image", "none")
+        await expect(track).toHaveCSS(
+          "--timeline-detail-marker-background",
+          await track.evaluate((element) => getComputedStyle(element).getPropertyValue("--v2-grey-500").trim()),
+        )
+      }
+      if (theme === "dark") {
+        await expect(track.locator("span").first()).not.toHaveCSS("background-image", "none")
+      }
+      await page.screenshot({ path: testInfo.outputPath(`timeline-${theme}-${direction}.png`) })
+      const list = component.locator('[data-slot="timeline-detail-list"]')
+      await expect(component.locator('[data-slot="timeline-detail-categories"]')).toHaveCSS("margin-top", "0px")
+      for (const [column, field] of [
+        [2, "placement"],
+        [3, "details"],
+      ] as const) {
+        const heading = await component
+          .locator(`[data-slot="timeline-detail-columns"] > :nth-child(${column})`)
+          .evaluate((element) => {
+            const rect = element.getBoundingClientRect()
+            return rect.x + rect.width / 2
+          })
+        const toggle = await component
+          .locator(`[data-category="shell"][data-field="${field}"] [data-slot="switch-control"]`)
+          .evaluate((element) => {
+            const rect = element.getBoundingClientRect()
+            return rect.x + rect.width / 2
+          })
+        expect(Math.abs(heading - toggle)).toBeLessThan(1)
+      }
+      await expect(component.locator('[data-slot="timeline-detail-activity"]').first()).toHaveCSS("gap", "12px")
+      for (const width of [900, 320]) {
+        await page.setViewportSize({ width, height: 900 })
+        await expect(component.getByRole("switch", { name: "Shell grouped", exact: true })).toBeVisible()
+        expect(await list.evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true)
+        const visibility = component.getByRole("button", { name: "Shell visibility" })
+        await visibility.focus()
+        await visibility.press("Space")
+        await expect(visibility).toHaveAttribute("aria-pressed", "false")
+        await expect(component.getByRole("switch", { name: "Shell grouped", exact: true })).toHaveCount(0)
+        await expect(
+          component
+            .getByRole("group", { name: "Shell", exact: true })
+            .locator('[data-slot="timeline-detail-unavailable"]'),
+        ).toHaveCount(2)
+        await visibility.press("Space")
+        await expect(visibility).toHaveAttribute("aria-pressed", "true")
+
+        const slider = component.getByRole("slider", { name: "Timeline detail" })
+        const track = component.locator('[data-slot="timeline-detail-track"]')
+        expect(await track.evaluate((element) => element.getBoundingClientRect().width)).toBe(
+          await component
+            .locator('[data-slot="timeline-detail-scale"]')
+            .evaluate((element) => element.getBoundingClientRect().width),
+        )
+        await slider.focus()
+        await slider.press("Home")
+        for (const position of [0, 1, 2, 3, 4]) {
+          if (position > 0) await slider.press("ArrowUp")
+          await expect(track).toHaveCSS("--timeline-detail-progress", `${position * 25}%`)
+          const fill = await track.evaluate((element) => {
+            const style = getComputedStyle(element, "::before")
+            return {
+              fraction: parseFloat(style.width) / element.getBoundingClientRect().width,
+              start: style.getPropertyValue("inset-inline-start"),
+              color: style.backgroundColor,
+              remainder: getComputedStyle(element).backgroundColor,
+            }
+          })
+          expect(fill.fraction).toBeCloseTo(position / 4, 2)
+          expect(fill.start).toBe("0px")
+          expect(fill.color).not.toBe(fill.remainder)
+          const marker = await track.locator("span").nth(position).boundingBox()
+          const bounds = await track.boundingBox()
+          expect(marker).not.toBeNull()
+          expect(bounds).not.toBeNull()
+          expect((marker!.x + marker!.width / 2 - bounds!.x) / bounds!.width).toBeCloseTo(
+            direction === "rtl" ? 1 - position / 4 : position / 4,
+            2,
+          )
+        }
+      }
+    })
+  }
+}

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

@@ -23,17 +23,21 @@ test("changes timeline presets and saves custom thinking details", async ({ page
   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()) {
+  for (const [index, name] of ["Messages only", "Quiet", "Compact", "Detailed", "Everything"].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 slider.press("End")
   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()
+  const grouped = settings.getByRole("switch", { name: "Thinking grouped", exact: true })
+  const collapsed = settings.getByRole("switch", { name: "Thinking collapsed", exact: true })
+  await expect(grouped).not.toBeChecked()
+  await expect(collapsed).not.toBeChecked()
+  await settings.locator('[data-category="thinking"][data-field="placement"] [data-slot="switch-control"]').click()
+  await settings.locator('[data-category="thinking"][data-field="details"] [data-slot="switch-control"]').click()
+  await expect(grouped).toBeChecked()
+  await expect(collapsed).toBeChecked()
   await expect(slider).toHaveAttribute("aria-valuetext", "Custom")
   await expect
     .poll(() =>

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

@@ -33,7 +33,7 @@ for (const viewport of [
     const slider = settings.getByRole("slider", { name: "Timeline detail", exact: true })
     await expect(settings).toBeFocused()
     await page.setViewportSize(viewport)
-    await expect(slider).toHaveAccessibleDescription(/Choose how much activity appears in the timeline/)
+    await expect(slider).toHaveAccessibleDescription(/Choose how much detail appears in the session timeline/)
     await expect.poll(() => main.evaluate((el) => el.scrollHeight - el.clientHeight)).toBeLessThanOrEqual(1)
 
     // Wheel over the outer gutter must not move the entire settings screen.

packages/app/src/entry.tsx

@@ -7,6 +7,7 @@ import { loadInitialLocale } from "@/runtime/i18n/language"
 import { PlatformProvider } from "@/runtime/platform/platform"
 import { createWebPlatform } from "@/runtime/platform/web"
 import { isStandalone, PwaRoutePersistence, restorePwaRoute } from "@/runtime/platform/pwa"
+import { KeyboardInsets } from "@/runtime/platform/keyboard"
 import en from "@/runtime/i18n/en"
 import zh from "@/runtime/i18n/zh"
 import { authFromToken } from "@/runtime/server/api"
@@ -92,6 +93,7 @@ if (root instanceof HTMLElement && root.dataset.opencodeMounted === undefined) {
               canonicalLocalServer={ServerConnection.key(server)}
               servers={[server]}
             >
+              <KeyboardInsets />
               {standalone && <PwaRoutePersistence />}
             </AppInterface>
           </AppBaseProviders>

packages/app/src/new-session/workspace/controller.ts

@@ -75,9 +75,14 @@ export function createNewSessionWorkspaceController(input: {
       if (event.type === "worktree.updated") void worktreeActions.refetch()
     }),
   )
+  // `latest` only skips Suspense once the resource has resolved at least once. Before that it
+  // behaves like a plain read, which holds the transition that opens the New Session tab until
+  // the worktree list returns.
+  const worktreesLoaded = () => worktrees.state === "ready" || worktrees.state === "refreshing"
   const worktreeItems = createMemo(() => {
     const project = currentProject()
     if (!project) return []
+    if (!worktreesLoaded()) return project.worktrees
     const loaded = worktrees.latest
     return loaded?.projectID === project.id ? loaded.items : project.worktrees
   })
@@ -110,10 +115,11 @@ export function createNewSessionWorkspaceController(input: {
     const project = currentProject()
     const worktree = input.selectedWorktree()
     if (!project || !worktree) return
-    return isWorkspaceSelection(project, worktree) ||
-      worktreeDirectories().some((item) => sameDirectory(item, worktree))
-      ? worktree
-      : undefined
+    if (isWorkspaceSelection(project, worktree)) return worktree
+    // A saved choice may only exist in the server inventory. Keep it until the list can confirm it,
+    // otherwise the selector falls back to Local while loading and a submit would target the wrong directory.
+    if (!worktreesLoaded()) return worktree
+    return worktreeDirectories().some((item) => sameDirectory(item, worktree)) ? worktree : undefined
   })
   const fallback = createMemo(() => {
     const project = currentProject()
@@ -140,12 +146,19 @@ export function createNewSessionWorkspaceController(input: {
         .catch(() => ({ directory, search, data: [] })),
   )
   createEffect(() => {
-    void Promise.all([data.location.syncInfo({ directory: sdk().directory }), data.project.sync()]).catch(
-      () => undefined,
-    )
-    const project = currentProject()
-    const directories = project ? [project.worktree, ...worktreeDirectories()] : [sdk().directory]
-    directories.forEach((directory) => void data.location.vcs.sync({ directory }).catch(() => undefined))
+    void Promise.all([
+      data.location.syncInfo({ directory: sdk().directory }),
+      data.project.sync(),
+      data.location.vcs.sync({ directory: sdk().directory }),
+    ]).catch(() => undefined)
+  })
+  // Only the selected worktree feeds the branch label. Syncing every worktree in the inventory boots
+  // each one on the server, which then emits `agent.updated` and makes the client run the full
+  // catalog fan-out for every directory.
+  createEffect(() => {
+    const selection = value()
+    if (selection === "main" || selection === "create") return
+    void data.location.vcs.sync({ directory: selection }).catch(() => undefined)
   })
   const branch = createMemo(() =>
     resolveNewSessionBranch({
@@ -169,12 +182,10 @@ export function createNewSessionWorkspaceController(input: {
       workspace: createMemo(() => {
         const project = currentProject()
         const current = value()
-        return (
-          current === "create" ||
-          (!!project &&
-            (isWorkspaceDirectory(project, current) ||
-              worktreeDirectories().some((item) => sameDirectory(item, current))))
-        )
+        if (current === "create") return true
+        if (current === "main" || !project) return false
+        if (isWorkspaceDirectory(project, current) || !worktreesLoaded()) return true
+        return worktreeDirectories().some((item) => sameDirectory(item, current))
       }),
       reset: () => {
         input.setSelectedWorktree(undefined)

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

@@ -994,37 +994,36 @@ export const dict = {
 
   "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.description": "Choose how much detail appears in the session timeline.",
+  "settings.timeline.summary": "{{preset}}:",
   "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.preset.text-only": "Messages 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.",
+    "Expand shell output and edits. Show subagents separately and group other activity.",
+  "settings.timeline.description.compact": "Group all activity with details collapsed.",
+  "settings.timeline.description.quiet": "Group edits and subagents. Hide other activity.",
+  "settings.timeline.description.text-only": "Hide all activity.",
+  "settings.timeline.description.custom": "Uses advanced settings.",
   "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.group": "Group",
+  "settings.timeline.collapse": "Collapse",
+  "settings.timeline.visibility.show": "Show",
+  "settings.timeline.visibility.hide": "Hide",
+  "settings.timeline.visibility.label": "{{activity}} visibility",
+  "settings.timeline.grouped.label": "{{activity}} grouped",
+  "settings.timeline.collapsed.label": "{{activity}} collapsed",
   "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",

packages/app/src/runtime/persistence/README.md

@@ -108,3 +108,28 @@ Storage-key relocation (`previousKey`, workspace aliases, draft storage moves)
 remains separate from schema migration. Draft blob externalization and hydration
 also remain in the storage adapter: composer codecs receive hydrated references,
 not raw ID-only blob documents.
+
+## Large draft content
+
+Draft documents never carry large text inline. Any string of `draftTextThreshold`
+characters or more is split into `draftTextChunk`-sized content-addressed blobs and
+stored as `{ blob: { kind: "text", ids: [...] } }`; reads join the chunks again. A
+content-keyed cache means unchanged chunks are not hashed or sent on later saves, so
+typing after a large paste uploads one chunk per save rather than the paste. Chunk
+boundaries never split a surrogate pair, and a failed upload is evicted so the next save
+retries it.
+
+Blob collection is made safe by validation on write, not by timing. A strict document write
+is refused while it references blob ids the store does not hold, so the previous document
+stays visible; the renderer uploads the missing bytes again from the chunk text or the image
+`Blob` it still holds, renames the references to the ids the uploads returned (content hashes
+normally, fresh ids on a store without WebCrypto), and publishes. This covers a chunk another
+tab collected, and an image the composer kept in its history long after its blob was
+collected. The desktop host additionally refreshes `touched_at` for every blob a written
+document references and collects only blobs unreferenced and untouched for `blobGrace`, so
+repairs stay rare.
+`persisted()` hands the draft store the encoded document (`setDocument`) rather than
+a serialized string, so the store does not re-parse the full document to externalize
+it. Both blob collectors (desktop SQL, browser IndexedDB) keep chunk ids alive. This
+follows VS Code's rule that editor content lives in per-resource backups, not in the
+state database.

packages/app/src/runtime/persistence/drafts.test.ts

@@ -0,0 +1,232 @@
+import { describe, expect, test } from "bun:test"
+import { createDraftStore, draftTextChunk, draftTextThreshold } from "./drafts"
+
+function memoryDriver() {
+  const documents = new Map<string, string>()
+  const blobs = new Map<string, Blob>()
+  let puts = 0
+  return {
+    documents,
+    blobs,
+    puts: () => puts,
+    driver: {
+      get: async (key: string) => documents.get(key) ?? null,
+      // Like the real stores: report referenced blobs that are not held; a strict write with any
+      // missing is refused.
+      set: async (key: string, value: string, strict: boolean) => {
+        const ids = new Set<string>()
+        JSON.parse(value, (_key, item) => {
+          if (item?.blob && typeof item.blob.id === "string") ids.add(item.blob.id)
+          if (item?.blob && Array.isArray(item.blob.ids)) item.blob.ids.forEach((id: unknown) => ids.add(String(id)))
+          return item
+        })
+        const missing = [...ids].filter((id) => !blobs.has(id))
+        if (!strict || missing.length === 0) documents.set(key, value)
+        return missing
+      },
+      remove: async (key: string) => void documents.delete(key),
+      putBlob: async (blob: Blob) => {
+        puts++
+        const id = `blob-${await blob.text().then((text) => Bun.hash(text).toString(16))}`
+        blobs.set(id, blob)
+        return id
+      },
+      getBlob: async (id: string) => blobs.get(id) ?? null,
+    },
+  }
+}
+
+const large = "x".repeat(draftTextThreshold)
+const paste = Array.from({ length: 3 * draftTextChunk }, (_, i) => String.fromCharCode(97 + (i % 26))).join("")
+
+describe("draft store text externalization", () => {
+  test("large strings become chunk lists and small ones stay inline", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    await store.setDocument("doc", {
+      prompt: [
+        { type: "text", content: paste },
+        { type: "text", content: "hi" },
+      ],
+    })
+    const stored = JSON.parse(memory.documents.get("doc")!)
+    expect(stored.prompt[0].content.blob.kind).toBe("text")
+    expect(stored.prompt[0].content.blob.ids).toHaveLength(3)
+    expect(stored.prompt[1].content).toBe("hi")
+    expect(memory.documents.get("doc")!.length).toBeLessThan(400)
+    const chunks = await Promise.all(
+      stored.prompt[0].content.blob.ids.map((id: string) => memory.blobs.get(id)!.text()),
+    )
+    expect(chunks.join("")).toBe(paste)
+  })
+
+  test("appending to a large string re-uploads only the final chunk", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    await store.setDocument("doc", { prompt: [{ type: "text", content: paste }] })
+    expect(memory.puts()).toBe(3)
+    await store.setDocument("doc", { prompt: [{ type: "text", content: `${paste}!` }] })
+    expect(memory.puts()).toBe(4)
+    await store.setDocument("doc", { prompt: [{ type: "text", content: `${paste}!` }], cursor: 1 })
+    expect(memory.puts()).toBe(4)
+  })
+
+  test("reads join the chunks again and reuse cached content", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    await store.setDocument("doc", { prompt: [{ type: "text", content: paste }] })
+    const fresh = createDraftStore(memory.driver)
+    expect(JSON.parse((await fresh.getItem("doc"))!)).toEqual({ prompt: [{ type: "text", content: paste }] })
+    memory.blobs.clear()
+    expect(JSON.parse((await fresh.getItem("doc"))!)).toEqual({ prompt: [{ type: "text", content: paste }] })
+  })
+
+  test("a missing chunk decodes to empty text instead of failing the document", async () => {
+    const memory = memoryDriver()
+    memory.documents.set(
+      "doc",
+      JSON.stringify({ prompt: [{ type: "text", content: { blob: { kind: "text", ids: ["gone"] } } }] }),
+    )
+    const store = createDraftStore(memory.driver)
+    expect(JSON.parse((await store.getItem("doc"))!)).toEqual({ prompt: [{ type: "text", content: "" }] })
+  })
+
+  test("a cached chunk id the store no longer holds is uploaded again on the next save", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    await store.setDocument("doc", { prompt: [{ type: "text", content: large }] })
+    const [id] = JSON.parse(memory.documents.get("doc")!).prompt[0].content.blob.ids
+    await store.setDocument("doc", { prompt: [{ type: "text", content: `${large}!` }] })
+    // Another tab collected the chunk for `large` while this tab still caches its id.
+    memory.blobs.clear()
+    // Undo republishes the cached id; the write reports it missing and the chunk is uploaded again.
+    await store.setDocument("doc", { prompt: [{ type: "text", content: large }] })
+    expect(memory.puts()).toBe(3)
+    const fresh = createDraftStore(memory.driver)
+    expect(JSON.parse((await fresh.getItem("doc"))!).prompt[0].content).toBe(large)
+    expect(memory.blobs.has(id)).toBe(true)
+  })
+
+  test("an image reference whose blob was collected is restored from its object url", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    const image = await store.putBlob(new Blob([new Uint8Array([1, 2, 3])], { type: "image/png" }))
+    // The composer kept this reference (for example in its history) while the store collected the bytes.
+    memory.blobs.clear()
+    await store.setDocument("doc", { prompt: [{ type: "image", blob: { id: image.id, url: image.url } }] })
+    expect(memory.blobs.has(image.id)).toBe(true)
+    expect(new Uint8Array(await memory.blobs.get(image.id)!.arrayBuffer())).toEqual(new Uint8Array([1, 2, 3]))
+  })
+
+  test("the previous document stays visible until missing blobs are restored", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    await store.setDocument("doc", { prompt: [{ type: "text", content: large }] })
+    await store.setDocument("doc", { prompt: [{ type: "text", content: `${large}!` }] })
+    const before = memory.documents.get("doc")
+    memory.blobs.clear()
+    // Hold the repair upload: while it is pending, another reader must still see the old document.
+    const gate = Promise.withResolvers<void>()
+    const putBlob = memory.driver.putBlob
+    memory.driver.putBlob = async (blob) => {
+      await gate.promise
+      return putBlob(blob)
+    }
+    const saving = store.setDocument("doc", { prompt: [{ type: "text", content: large }] })
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(memory.documents.get("doc")).toBe(before)
+    gate.resolve()
+    await saving
+    expect(JSON.parse(memory.documents.get("doc")!).prompt[0].content.blob.ids).toHaveLength(1)
+    const fresh = createDraftStore(memory.driver)
+    expect(JSON.parse((await fresh.getItem("doc"))!).prompt[0].content).toBe(large)
+  })
+
+  test("references are renamed when a restored blob comes back under a different id", async () => {
+    const memory = memoryDriver()
+    // A store without WebCrypto assigns a fresh id to every upload.
+    let counter = 0
+    memory.driver.putBlob = async (blob) => {
+      const id = `random-${counter++}`
+      memory.blobs.set(id, blob)
+      return id
+    }
+    const store = createDraftStore(memory.driver)
+    const image = await store.putBlob(new Blob([new Uint8Array([7])], { type: "image/png" }))
+    await store.setDocument("doc", {
+      prompt: [
+        { type: "text", content: paste },
+        { type: "image", blob: image },
+      ],
+    })
+    const original = JSON.parse(memory.documents.get("doc")!)
+    memory.blobs.clear()
+    await store.setDocument("doc", {
+      prompt: [
+        { type: "text", content: paste },
+        { type: "image", blob: image },
+      ],
+    })
+    const restored = JSON.parse(memory.documents.get("doc")!)
+    expect(restored.prompt[0].content.blob.ids).not.toEqual(original.prompt[0].content.blob.ids)
+    expect(restored.prompt[1].blob.id).not.toBe(original.prompt[1].blob.id)
+    for (const id of [...restored.prompt[0].content.blob.ids, restored.prompt[1].blob.id])
+      expect(memory.blobs.has(id)).toBe(true)
+    const fresh = createDraftStore(memory.driver)
+    const read = JSON.parse((await fresh.getItem("doc"))!)
+    expect(read.prompt[0].content).toBe(paste)
+    expect(read.prompt[1].blob.id).toBe(restored.prompt[1].blob.id)
+    // The renamed ids are what later encodes publish, so saves of the still-live references (the
+    // composer keeps the original image id) upload nothing and keep one stable image id.
+    const puts = counter
+    for (const cursor of [1, 2, 3]) {
+      await store.setDocument("doc", {
+        prompt: [
+          { type: "text", content: paste },
+          { type: "image", blob: image },
+        ],
+        cursor,
+      })
+      expect(JSON.parse(memory.documents.get("doc")!).prompt[1].blob.id).toBe(restored.prompt[1].blob.id)
+    }
+    expect(counter).toBe(puts)
+  })
+
+  test("chunk boundaries never split a surrogate pair", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    const text = "x".repeat(draftTextChunk - 1) + "😀tail"
+    await store.setDocument("doc", { prompt: [{ type: "text", content: text }] })
+    const stored = JSON.parse(memory.documents.get("doc")!)
+    const bytes = await Promise.all(stored.prompt[0].content.blob.ids.map((id: string) => memory.blobs.get(id)!.text()))
+    expect(bytes.join("")).toBe(text)
+    expect(bytes[0]!.length).toBe(draftTextChunk + 1)
+    const fresh = createDraftStore(memory.driver)
+    expect(JSON.parse((await fresh.getItem("doc"))!).prompt[0].content).toBe(text)
+  })
+
+  test("a failed chunk upload is retried on the next save instead of being reused", async () => {
+    const memory = memoryDriver()
+    let failNext = true
+    const putBlob = memory.driver.putBlob
+    memory.driver.putBlob = async (blob) => {
+      if (failNext) {
+        failNext = false
+        throw new Error("offline")
+      }
+      return putBlob(blob)
+    }
+    const store = createDraftStore(memory.driver)
+    await expect(store.setDocument("doc", { prompt: [{ type: "text", content: paste }] })).rejects.toThrow("offline")
+    await store.setDocument("doc", { prompt: [{ type: "text", content: `${paste}!` }] })
+    const fresh = createDraftStore(memory.driver)
+    expect(JSON.parse((await fresh.getItem("doc"))!).prompt[0].content).toBe(`${paste}!`)
+  })
+
+  test("setItem still accepts a serialized document", async () => {
+    const memory = memoryDriver()
+    const store = createDraftStore(memory.driver)
+    await store.setItem("doc", JSON.stringify({ prompt: [{ type: "text", content: large }] }))
+    expect(JSON.parse(memory.documents.get("doc")!).prompt[0].content.blob.ids).toHaveLength(1)
+  })
+})

packages/app/src/runtime/persistence/drafts.ts

@@ -5,20 +5,43 @@ export type BlobReference = { id: string; url: string }
 
 type Driver = {
   get(key: string): Promise<string | null>
-  set(key: string, value: string): Promise<void>
+  /**
+   * Store the document and report every blob id it references that the store does not hold. A
+   * strict write is refused (nothing stored) when any are missing, so a document is never visible
+   * with dangling references while its blobs are being restored.
+   */
+  set(key: string, value: string, strict: boolean): Promise<readonly string[]>
   remove(key: string): Promise<void>
   putBlob(blob: Blob): Promise<string>
   getBlob(id: string): Promise<Blob | null>
 }
 
-export type DraftStore = AsyncStorage & { putBlob(blob: Blob): Promise<BlobReference> }
+export type DraftStore = AsyncStorage & {
+  putBlob(blob: Blob): Promise<BlobReference>
+  /** Persist an already-encoded document without re-parsing its serialized form. */
+  setDocument(key: string, document: unknown): Promise<void>
+}
+
+// Strings at least this long leave the document as fixed-size content-addressed chunks. Typing
+// after a large paste changes only the final chunk, so a save uploads one chunk, not the paste.
+export const draftTextThreshold = 16 * 1024
+export const draftTextChunk = 64 * 1024
+const textCacheLimit = 64
+
 const urls = new Map<string, string>()
+// The object URL already pins the Blob for the page's lifetime; keeping the Blob itself lets a
+// collected image be uploaded again without fetching the URL.
+const held = new Map<string, Blob>()
+// Image ids that were restored under a different id (a store without WebCrypto assigns fresh
+// ones); live references still carry the original.
+const aliases = new Map<string, string>()
 
 function blobUrl(id: string, blob: Blob) {
   const existing = urls.get(id)
   if (existing) return existing
   const url = URL.createObjectURL(blob)
   urls.set(id, url)
+  held.set(id, blob)
   return url
 }
 
@@ -56,25 +79,82 @@ export function createDraftStore(driver: Driver): DraftStore {
     const id = await driver.putBlob(blob)
     return { id, url: blobUrl(id, blob) }
   }
-  const encode = async (value: unknown): Promise<unknown> => {
-    if (Array.isArray(value)) return Promise.all(value.map(encode))
+  // Keyed by chunk content so unchanged chunks are never hashed or sent again while the draft is
+  // edited. Bounded because each entry pins up to draftTextChunk characters. A hit is safe even if
+  // the store has since collected the blob: the write reports it missing and it is uploaded again.
+  const chunkIds = new Map<string, Promise<string>>()
+  const chunks = new Map<string, string>()
+  const remember = <V>(cache: Map<string, V>, key: string, value: V) => {
+    cache.set(key, value)
+    if (cache.size > textCacheLimit) cache.delete(cache.keys().next().value!)
+    return value
+  }
+  const upload = (chunk: string) => {
+    const id = driver.putBlob(new Blob([chunk])).then(
+      (id) => {
+        remember(chunks, id, chunk)
+        return id
+      },
+      (error: unknown) => {
+        // A failed upload must not be reused as the answer for this content on later saves.
+        if (chunkIds.get(chunk) === id) chunkIds.delete(chunk)
+        throw error
+      },
+    )
+    return remember(chunkIds, chunk, id)
+  }
+  const externalize = (text: string) => Promise.all(split(text).map((chunk) => chunkIds.get(chunk) ?? upload(chunk)))
+  const loadChunk = async (id: string) => {
+    const cached = chunks.get(id)
+    if (cached !== undefined) return cached
+    const blob = await driver.getBlob(id)
+    // A missing chunk loses that text but keeps the rest of the document decodable.
+    return remember(chunks, id, blob ? await blob.text() : "")
+  }
+  // `sources` collects, for every blob id the encoded document references, a way to produce its
+  // bytes again: the chunk text itself, or the image Blob (or object URL) the reference carries.
+  type Sources = Map<string, { blob: () => Promise<Blob>; chunk?: string }>
+  const encode = async (value: unknown, sources: Sources): Promise<unknown> => {
+    if (typeof value === "string" && value.length >= draftTextThreshold) {
+      const pieces = split(value)
+      const ids = await externalize(value)
+      ids.forEach((id, index) =>
+        sources.set(id, { blob: async () => new Blob([pieces[index]!]), chunk: pieces[index] }),
+      )
+      return { blob: { kind: "text", ids } }
+    }
+    if (Array.isArray(value)) return Promise.all(value.map((entry) => encode(entry, sources)))
     if (!value || typeof value !== "object") return value
     const item = value as Record<string, unknown>
     if (item.type === "image" && typeof item.dataUrl === "string") {
       const blob = await fetch(item.dataUrl).then((response) => response.blob())
       const { dataUrl: _, ...rest } = item
-      return { ...rest, blob: { id: await driver.putBlob(blob) } }
+      const id = await driver.putBlob(blob)
+      sources.set(id, { blob: async () => blob })
+      return { ...rest, blob: { id } }
     }
     if ("blob" in item && item.blob && typeof item.blob === "object") {
       const blob = item.blob as Record<string, unknown>
+      if (blob.kind === "text") return item
       if (typeof blob.id === "string" && blob.id.startsWith("data:")) {
         const data = await fetch(blob.id).then((response) => response.blob())
-        return { ...item, blob: { id: await driver.putBlob(data) } }
+        const id = await driver.putBlob(data)
+        sources.set(id, { blob: async () => data })
+        return { ...item, blob: { id } }
+      }
+      if (typeof blob.id === "string") {
+        // A live reference keeps the id it was created with; publish the id its bytes now live under.
+        const id = aliases.get(blob.id) ?? blob.id
+        const kept = held.get(id)
+        const url = typeof blob.url === "string" ? blob.url : urls.get(id)
+        if (kept) sources.set(id, { blob: async () => kept })
+        else if (url) sources.set(id, { blob: () => fetch(url).then((response) => response.blob()) })
+        return { ...item, blob: { id } }
       }
       return { ...item, blob: { id: blob.id } }
     }
     return Object.fromEntries(
-      await Promise.all(Object.entries(item).map(async ([key, entry]) => [key, await encode(entry)])),
+      await Promise.all(Object.entries(item).map(async ([key, entry]) => [key, await encode(entry, sources)])),
     )
   }
   const decode = async (value: unknown): Promise<unknown> => {
@@ -83,6 +163,9 @@ export function createDraftStore(driver: Driver): DraftStore {
     const item = value as Record<string, unknown>
     if (item.blob && typeof item.blob === "object") {
       const ref = item.blob as Record<string, unknown>
+      if (ref.kind === "text" && Array.isArray(ref.ids)) {
+        return (await Promise.all(ref.ids.map((id) => loadChunk(String(id))))).join("")
+      }
       if (typeof ref.id === "string") {
         const url = await loadBlobUrl(ref.id)
         if (url) return { ...item, blob: { id: ref.id, url } }
@@ -92,6 +175,65 @@ export function createDraftStore(driver: Driver): DraftStore {
       await Promise.all(Object.entries(item).map(async ([key, entry]) => [key, await decode(entry)])),
     )
   }
+  // Upload the bytes behind `ids` again and return the ids they were stored under. Ids are
+  // usually content hashes and come back unchanged, but a store without WebCrypto assigns fresh
+  // ones, so callers must rename references rather than assume.
+  const restore = async (ids: readonly string[], sources: Sources) => {
+    const renamed = new Map<string, string>()
+    await Promise.all(
+      ids.map(async (id) => {
+        const source = sources.get(id)
+        if (!source) return
+        const blob = await source.blob()
+        const next = await driver.putBlob(blob)
+        renamed.set(id, next)
+        if (source.chunk !== undefined) {
+          remember(chunkIds, source.chunk, Promise.resolve(next))
+          remember(chunks, next, source.chunk)
+          return
+        }
+        held.set(next, blob)
+        blobUrl(next, blob)
+        if (next === id) return
+        // Later encodes of the still-live reference resolve straight to the new id. Re-point any
+        // earlier alias chain so lookups stay one step.
+        for (const [from, to] of aliases) if (to === id) aliases.set(from, next)
+        aliases.set(id, next)
+      }),
+    )
+    return renamed
+  }
+  const rename = (value: unknown, renamed: Map<string, string>): unknown => {
+    if (Array.isArray(value)) return value.map((entry) => rename(entry, renamed))
+    if (!value || typeof value !== "object") return value
+    const item = value as Record<string, unknown>
+    if (item.blob && typeof item.blob === "object") {
+      const ref = item.blob as Record<string, unknown>
+      if (Array.isArray(ref.ids))
+        return { ...item, blob: { ...ref, ids: ref.ids.map((id) => renamed.get(String(id)) ?? id) } }
+      if (typeof ref.id === "string") return { ...item, blob: { ...ref, id: renamed.get(ref.id) ?? ref.id } }
+    }
+    return Object.fromEntries(Object.entries(item).map(([key, entry]) => [key, rename(entry, renamed)]))
+  }
+  const setDocument = async (key: string, document: unknown) => {
+    const version = (versions.get(key) ?? 0) + 1
+    versions.set(key, version)
+    const sources: Sources = new Map()
+    const encoded = await encode(document, sources)
+    if (versions.get(key) !== version) return
+    // The store refuses the write while any referenced blob is missing, so the previous document
+    // stays visible until the bytes are back. Covers a blob collected while a cache, another tab,
+    // or the composer's history still held its id.
+    const missing = await driver.set(key, JSON.stringify(encoded), true)
+    if (missing.length === 0) return
+    const renamed = await restore(missing, sources)
+    if (versions.get(key) !== version) return
+    const unrestored = missing.filter((id) => !renamed.has(id))
+    if (unrestored.length)
+      console.error(`[persistence] draft ${key} references blobs with no bytes to restore`, unrestored)
+    // Anything still missing has no bytes anywhere; the owning codec drops such references on read.
+    await driver.set(key, JSON.stringify(rename(encoded, renamed)), false)
+  }
   return {
     getItem: async (key) => {
       const value = await driver.get(key)
@@ -101,12 +243,8 @@ export function createDraftStore(driver: Driver): DraftStore {
       if (Option.isNone(parsed)) return value
       return JSON.stringify(await decode(parsed.value))
     },
-    setItem: async (key, value) => {
-      const version = (versions.get(key) ?? 0) + 1
-      versions.set(key, version)
-      const encoded = JSON.stringify(await encode(JSON.parse(value)))
-      if (versions.get(key) === version) await driver.set(key, encoded)
-    },
+    setItem: (key, value) => setDocument(key, JSON.parse(value)),
+    setDocument,
     removeItem: async (key) => {
       versions.set(key, (versions.get(key) ?? 0) + 1)
       await driver.remove(key)
@@ -115,6 +253,20 @@ export function createDraftStore(driver: Driver): DraftStore {
   }
 }
 
+// Fixed-size pieces, except that a piece never ends between the two halves of a surrogate pair:
+// each piece becomes its own Blob, and an unpaired surrogate would be encoded as U+FFFD.
+function split(text: string) {
+  const pieces: string[] = []
+  for (let start = 0; start < text.length; ) {
+    const end = Math.min(start + draftTextChunk, text.length)
+    const code = text.charCodeAt(end - 1)
+    const stop = end < text.length && code >= 0xd800 && code <= 0xdbff ? end + 1 : end
+    pieces.push(text.slice(start, stop))
+    start = stop
+  }
+  return pieces
+}
+
 export function createBrowserDraftStore(): DraftStore {
   const request = indexedDB.open("opencode-drafts", 1)
   request.addEventListener("upgradeneeded", () => {
@@ -127,11 +279,7 @@ export function createBrowserDraftStore(): DraftStore {
       const transaction = database.transaction(["documents", "blobs"], "readwrite")
       const documents = transaction.objectStore("documents").getAll()
       documents.addEventListener("success", () => {
-        const used = new Set<string>()
-        JSON.parse(`[${documents.result.join(",")}]`, (_key, item) => {
-          if (item?.blob && typeof item.blob.id === "string") used.add(item.blob.id)
-          return item
-        })
+        const used = referenced(`[${documents.result.join(",")}]`)
         const store = transaction.objectStore("blobs")
         const blobs = store.openKeyCursor()
         blobs.addEventListener("success", () => {
@@ -164,7 +312,32 @@ export function createBrowserDraftStore(): DraftStore {
   }
   return createDraftStore({
     get: async (key) => ((await get("documents", key)) as string | undefined) ?? null,
-    set: (key, value) => write("documents", key, value),
+    set: async (key, value, strict) => {
+      // One readwrite transaction over both stores: IndexedDB serialises overlapping readwrite
+      // transactions in creation order, so a later save or removal cannot commit between the
+      // reference check and this write. The put is issued from the last lookup's callback so the
+      // transaction is never left without a pending request.
+      const ids = [...referenced(value)]
+      const transaction = (await db).transaction(["blobs", "documents"], "readwrite")
+      const missing: string[] = []
+      const publish = () => {
+        if (!strict || missing.length === 0) transaction.objectStore("documents").put(value, key)
+      }
+      let remaining = ids.length
+      if (remaining === 0) publish()
+      for (const id of ids) {
+        const lookup = transaction.objectStore("blobs").getKey(id)
+        lookup.addEventListener("success", () => {
+          if (lookup.result === undefined) missing.push(id)
+          if (--remaining === 0) publish()
+        })
+      }
+      return new Promise<string[]>((resolve, reject) => {
+        transaction.addEventListener("complete", () => resolve(missing))
+        transaction.addEventListener("error", () => reject(transaction.error))
+        transaction.addEventListener("abort", () => reject(transaction.error))
+      })
+    },
     remove: (key) => write("documents", key),
     putBlob: async (blob) => {
       const id = await blobID(blob)
@@ -175,6 +348,17 @@ export function createBrowserDraftStore(): DraftStore {
   })
 }
 
+// Every blob id a serialized document (or array of documents) references.
+function referenced(json: string) {
+  const ids = new Set<string>()
+  JSON.parse(json, (_key, item) => {
+    if (item?.blob && typeof item.blob.id === "string") ids.add(item.blob.id)
+    if (item?.blob && Array.isArray(item.blob.ids)) item.blob.ids.forEach((id: unknown) => ids.add(String(id)))
+    return item
+  })
+  return ids
+}
+
 export async function blobDataUrl(blob: BlobReference, mime: string) {
   const data = await fetch(blob.url).then((response) => response.blob())
   return new Promise<string>((resolve, reject) => {

packages/app/src/runtime/persistence/persist.ts

@@ -32,6 +32,8 @@ export function persistStore<T extends object>(input: {
   deserialize: (raw: string) => T
   sync?: PersistenceSyncAPI
   delay?: number
+  /** Replaces `storage.setItem` for stores whose storage can take the value itself. */
+  write?: (value: T, serialized: string) => void
 }) {
   const delay = input.delay ?? persistSaveDelay
   let dirty = false
@@ -57,6 +59,7 @@ export function persistStore<T extends object>(input: {
     }
     last = next
     input.sync?.[1](input.name, next)
+    if (input.write) return input.write(input.store, next)
     void input.storage.setItem(input.name, next)
   }
 

packages/app/src/runtime/persistence/storage.ts

@@ -484,6 +484,7 @@ export function persisted<S extends Schema.ConstraintCodec<object, unknown>>(
   const initialized = Persistence.withInitial(schema, initial)
   const json = Schema.fromJsonString(initialized)
   const decode = Schema.decodeUnknownOption(json)
+  const encode = Schema.encodeSync(initialized)
   const serialize = Schema.encodeSync(json)
   const normalize = (raw: string) => {
     const value = decode(raw)
@@ -492,10 +493,12 @@ export function persisted<S extends Schema.ConstraintCodec<object, unknown>>(
   const store = createStore<S["Type"]>(Schema.decodeUnknownSync(Schema.toType(initialized))(initial))
   const isDesktop = platform.platform === "desktop" && !!platform.storage
   const draft = config.draft ? platform.draftStore : undefined
+  const prefix = `${config.storage ?? "default"}:`
+  // The newest serialized draft, replayed into storage if a slow load finishes after an edit.
+  let draftLatest: string | undefined
 
   const currentStorage = (() => {
     if (draft) {
-      const prefix = `${config.storage ?? "default"}:`
       return {
         getItem: (key: string) => draft.getItem(prefix + key),
         setItem: (key: string, value: string) => draft.setItem(prefix + key, value),
@@ -557,7 +560,6 @@ export function persisted<S extends Schema.ConstraintCodec<object, unknown>>(
     ]
       .filter((source): source is { storage: SyncStorage | AsyncStorage; key?: string } => !!source?.storage)
       .map((source) => ({ ...source, storage: toAsyncStorage(source.storage) }))
-    let draftLatest: string | undefined
 
     const api: AsyncStorage = {
       getItem: async (key) => {
@@ -602,6 +604,17 @@ export function persisted<S extends Schema.ConstraintCodec<object, unknown>>(
     serialize,
     deserialize: Schema.decodeUnknownSync(json),
     sync: channel ? messageSync(channel) : undefined,
+    // Drafts take the encoded document itself so large text is externalized without the store
+    // re-parsing the serialized form on every save.
+    write: draft
+      ? (value, serialized) => {
+          draftLatest = serialized
+          // A failed chunk upload is retried by the next save; see drafts.ts.
+          void draft
+            .setDocument(prefix + config.key, encode(value))
+            .catch((error: unknown) => console.error(`[persistence] draft write failed for ${config.key}`, error))
+        }
+      : undefined,
   })
   const state = store[0]
   const setState = persist.setStore

packages/app/src/runtime/platform/keyboard.ts

@@ -0,0 +1,33 @@
+import { onCleanup, onMount } from "solid-js"
+
+export function KeyboardInsets() {
+  onMount(() => {
+    const viewport = window.visualViewport
+    if (!viewport) return
+    const root = document.documentElement
+    const sync = () => {
+      const active = document.activeElement
+      const editing =
+        active instanceof HTMLElement &&
+        (active.isContentEditable || active.matches("input:not([readonly]), textarea:not([readonly])"))
+      // iOS retains the home-indicator inset above its keyboard. Ignore pinch zoom
+      // and small viewport changes from browser chrome, not just editor focus.
+      const keyboard = editing && root.clientHeight - viewport.height * viewport.scale > 100
+      if (keyboard) root.style.setProperty("--safe-area-inset-bottom", "0px")
+      if (!keyboard) root.style.removeProperty("--safe-area-inset-bottom")
+    }
+    sync()
+    viewport.addEventListener("resize", sync)
+    window.addEventListener("resize", sync)
+    document.addEventListener("focusin", sync)
+    document.addEventListener("focusout", sync)
+    onCleanup(() => {
+      viewport.removeEventListener("resize", sync)
+      window.removeEventListener("resize", sync)
+      document.removeEventListener("focusin", sync)
+      document.removeEventListener("focusout", sync)
+      root.style.removeProperty("--safe-area-inset-bottom")
+    })
+  })
+  return null
+}

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

@@ -1,4 +1,6 @@
 [data-component="timeline-detail-control"] {
+  --timeline-detail-track-background: var(--v2-background-bg-layer-04);
+  --timeline-detail-marker-background: var(--v2-grey-500);
   position: relative;
   display: flex;
   min-width: 0;
@@ -10,48 +12,55 @@
   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-summary"] {
+    color: var(--v2-text-text-base);
+  }
+
   [data-slot="timeline-detail-scale"] {
     position: relative;
     height: 28px;
+    margin-top: 24px;
+    margin-inline: 8px;
   }
 
   [data-slot="timeline-detail-track"] {
     position: absolute;
-    inset-inline: 8px;
+    inset-inline: 0;
     top: 12px;
     height: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     border-radius: 2px;
-    background: var(--v2-background-bg-layer-03);
+    background: var(--timeline-detail-track-background);
     pointer-events: none;
 
+    &::before {
+      content: "";
+      position: absolute;
+      inset-inline-start: 0;
+      width: var(--timeline-detail-progress);
+      height: 100%;
+      border-radius: inherit;
+      background: var(--v2-background-bg-accent);
+    }
+
     span {
-      width: 4px;
-      height: 4px;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      box-sizing: content-box;
+      width: 6px;
+      height: 6px;
+      border: 2px solid var(--v2-background-bg-layer-01);
       border-radius: 50%;
-      background: var(--v2-border-border-strong);
+      background: var(--timeline-detail-marker-background);
+
+      &:dir(rtl) {
+        transform: translate(50%, -50%);
+      }
     }
   }
 
@@ -59,9 +68,11 @@
     appearance: none;
     position: relative;
     display: block;
-    width: 100%;
+    /* Native ranges reserve half the thumb width at each end of their track. */
+    width: calc(100% + 16px);
     height: 28px;
     margin: 0;
+    margin-inline: -8px;
     background: transparent;
     cursor: pointer;
     border-radius: 4px;
@@ -81,9 +92,15 @@
       width: 16px;
       height: 16px;
       margin-top: -6px;
-      border: 1px solid var(--v2-border-border-base);
+      border: 0;
       border-radius: 50%;
-      background: var(--v2-background-bg-base);
+      background:
+        linear-gradient(
+          180deg,
+          var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+          var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+        ),
+        var(--v2-grey-300);
       box-shadow: var(--v2-elevation-button-neutral);
     }
 
@@ -96,28 +113,34 @@
       box-sizing: border-box;
       width: 16px;
       height: 16px;
-      border: 1px solid var(--v2-border-border-base);
+      border: 0;
       border-radius: 50%;
-      background: var(--v2-background-bg-base);
+      background:
+        linear-gradient(
+          180deg,
+          var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+          var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+        ),
+        var(--v2-grey-300);
       box-shadow: var(--v2-elevation-button-neutral);
     }
   }
 
   [data-slot="timeline-detail-advanced"] {
-    margin-top: 4px;
+    margin-top: 20px;
     padding-top: 8px;
   }
 
   [data-slot="timeline-detail-advanced"] > [data-slot="collapsible-trigger"] {
     width: fit-content;
-    height: 28px;
+    height: 24px;
     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);
+    color: var(--v2-text-text-base);
 
     [data-slot="collapsible-arrow"] {
       width: 16px;
@@ -133,20 +156,28 @@
   }
 
   [data-slot="timeline-detail-categories"] {
-    --timeline-detail-columns: minmax(0, 1fr) 100px 108px;
+    --timeline-detail-columns: minmax(0, 1fr) 72px 88px;
     display: flex;
     flex-direction: column;
-    margin-top: 8px;
-  }
-
-  [data-slot="timeline-detail-explainer"] {
-    margin-bottom: 12px;
+    margin-top: 0;
   }
 
   [data-slot="timeline-detail-field-label"] {
     display: none;
   }
 
+  [data-slot="timeline-detail-unavailable"] {
+    width: 24px;
+    border-block-start: 1px solid var(--v2-icon-icon-muted);
+    opacity: 0.5;
+  }
+
+  [data-slot="timeline-detail-list"] {
+    border: 0.5px solid var(--v2-border-border-base);
+    border-radius: 8px;
+    background-color: var(--v2-background-bg-layer-02);
+  }
+
   [data-slot="timeline-detail-columns"],
   [data-slot="timeline-detail-category"] {
     display: grid;
@@ -155,6 +186,10 @@
     column-gap: 8px;
     line-height: var(--line-height-compact);
 
+    > :nth-child(3) {
+      margin-inline-start: 8px;
+    }
+
     > span {
       min-width: 0;
       overflow-wrap: normal;
@@ -162,49 +197,78 @@
   }
 
   [data-slot="timeline-detail-columns"] {
-    min-height: 28px;
+    min-height: var(--line-height-compact);
+    margin-bottom: 8px;
+    padding-inline: 12.5px;
     color: var(--v2-text-text-muted);
 
     span:not(:first-child) {
-      padding-inline-start: 8px;
+      text-align: center;
     }
   }
 
   [data-slot="timeline-detail-category"] {
     min-height: 40px;
     padding-block: 8px;
+    padding-inline: 12px;
     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"] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       min-width: 0;
     }
 
-    [data-component="select-v2-root"][data-field] {
-      width: 100%;
+    &[data-hidden] [data-slot="timeline-detail-activity"] {
+      color: var(--v2-text-text-faint);
+    }
+  }
+
+  [data-slot="timeline-detail-activity"] {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+
+    > label {
+      min-width: 0;
+      overflow-wrap: anywhere;
+      cursor: default;
     }
 
-    [data-component="select-v2"][data-appearance="inline"] {
-      width: 100%;
+    [data-component="tooltip-v2-trigger"] {
+      flex-shrink: 0;
+    }
+
+    [data-action="timeline-detail-visibility"][aria-pressed="true"] {
+      color: var(--v2-icon-icon-base);
+    }
+
+    /* Labels also activate :hover on their associated button. Keep that feedback local to the icon. */
+    &:has(> label:hover) [data-action="timeline-detail-visibility"][data-variant="ghost-muted"] {
+      background-color: transparent;
     }
   }
 }
 
+[data-color-scheme="dark"] [data-component="timeline-detail-control"] {
+  --timeline-detail-track-background: var(--v2-background-bg-layer-03);
+  --timeline-detail-marker-background:
+    linear-gradient(
+      180deg,
+      var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+      var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+    ),
+    var(--v2-grey-300);
+}
+
 @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;
   }
@@ -214,20 +278,20 @@
     row-gap: 8px;
     padding-block: 12px;
 
-    > span {
-      font-weight: 530;
+    > :nth-child(3) {
+      margin-inline-start: 0;
     }
   }
 
   [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-placement"]:empty,
   [data-component="timeline-detail-control"] [data-slot="timeline-detail-expansion"]:empty {
     display: none;
   }
@@ -235,7 +299,7 @@
 
 @container timeline-detail (max-width: 310px) {
   [data-component="timeline-detail-control"] [data-slot="timeline-detail-categories"] {
-    --timeline-detail-columns: minmax(0, 1fr) 90px 96px;
+    --timeline-detail-columns: minmax(0, 1fr) 64px 80px;
   }
 
   [data-component="timeline-detail-control"] [data-slot="timeline-detail-columns"],

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

@@ -0,0 +1,40 @@
+import { Show } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Button } from "@opencode-ai/ui/button"
+import { timelinePresets, type TimelineDetail } from "@opencode-ai/session-ui/timeline/detail"
+import { SettingsList } from "./list"
+import { TimelineDetailControl } from "./timeline-detail"
+import "./settings.css"
+
+export default {
+  title: "OpenCode/Settings/Timeline detail",
+  id: "settings-timeline-detail",
+}
+
+export const Interactive = {
+  render: () => {
+    const [state, setState] = createStore<{ value: TimelineDetail; visible: boolean }>({
+      value: structuredClone(timelinePresets[2].value),
+      visible: true,
+    })
+
+    return (
+      <div class="flex w-[560px] max-w-full flex-col gap-4">
+        <Show when={state.visible}>
+          <SettingsList>
+            <div class="py-5">
+              <TimelineDetailControl value={state.value} onChange={(value) => setState("value", value)} />
+            </div>
+          </SettingsList>
+        </Show>
+        <Button onClick={() => setState("visible", !state.visible)}>
+          {state.visible ? "Leave settings" : "Return to settings"}
+        </Button>
+        <Button onClick={() => setState("value", structuredClone(timelinePresets[2].value))}>Reset</Button>
+        <output data-slot="timeline-detail-fixture-value" hidden>
+          {JSON.stringify(state.value)}
+        </output>
+      </div>
+    )
+  },
+}

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

@@ -1,27 +1,33 @@
 import { For, Show, createMemo, createUniqueId } from "solid-js"
+import { createStore } from "solid-js/store"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
-import { Select } from "@opencode-ai/ui/select"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Switch } from "@opencode-ai/ui/switch"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import {
   timelineCategories,
   timelinePreset,
   timelinePresets,
+  type TimelineCategory,
   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"]
+const presets = timelinePresets.toReversed()
 
 export function TimelineDetailControl(props: { value: TimelineDetail; onChange: (value: TimelineDetail) => void }) {
   const language = useLanguage()
   const id = createUniqueId()
+  const [visiblePlacements, setVisiblePlacements] = createStore<
+    Partial<Record<TimelineCategory, Exclude<TimelinePlacement, "hidden">>>
+  >({})
   const preset = createMemo(() => timelinePreset(props.value))
   const position = () => {
     const current = preset()
-    return current ? timelinePresets.indexOf(current) : 2
+    return current ? presets.indexOf(current) : 2
   }
   const label = () => {
     const current = preset()
@@ -30,34 +36,42 @@ export function TimelineDetailControl(props: { value: TimelineDetail; onChange:
 
   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 data-slot="settings-row-copy">
+        <label data-slot="settings-row-title" for={`${id}-slider`}>
+          {language.t("settings.timeline.detail")}
+        </label>
+        <div id={`${id}-description`} data-slot="settings-row-description">
+          {language.t("settings.timeline.description")}
+        </div>
       </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
+          data-slot="timeline-detail-track"
+          aria-hidden="true"
+          style={{ "--timeline-detail-progress": `${(position() / (presets.length - 1)) * 100}%` }}
+        >
+          <For each={presets}>
+            {(_, index) => <span style={{ "inset-inline-start": `${(index() / (presets.length - 1)) * 100}%` }} />}
+          </For>
         </div>
         <input
           id={`${id}-slider`}
           data-action="settings-timeline-detail"
           type="range"
           min="0"
-          max={timelinePresets.length - 1}
+          max={presets.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 })}
+          onInput={(event) => props.onChange({ ...presets[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">
+      <p id={`${id}-preset-description`} aria-live="polite">
+        <span data-slot="timeline-detail-summary">{language.t("settings.timeline.summary", { preset: label() })}</span>{" "}
+        {language.t(`settings.timeline.description.${preset()?.id ?? "custom"}`)}
+      </p>
+      <Collapsible variant="ghost" data-slot="timeline-detail-advanced" defaultOpen={!preset()}>
         <Collapsible.Trigger>
           <span>{language.t("settings.timeline.advanced")}</span>
           <Collapsible.Arrow />
@@ -68,57 +82,122 @@ export function TimelineDetailControl(props: { value: TimelineDetail; onChange:
             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>
+              <span aria-hidden="true" />
+              <span>{language.t("settings.timeline.group")}</span>
+              <span>{language.t("settings.timeline.collapse")}</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 } })
+            <div data-slot="timeline-detail-list">
+              <For each={timelineCategories}>
+                {(category) => (
+                  <div
+                    data-slot="timeline-detail-category"
+                    data-hidden={props.value[category].placement === "hidden" ? "" : undefined}
+                    role="group"
+                    aria-labelledby={`${id}-${category}`}
+                  >
+                    <div data-slot="timeline-detail-activity">
+                      <Tooltip
+                        placement="top"
+                        value={language.t(
+                          props.value[category].placement === "hidden"
+                            ? "settings.timeline.visibility.show"
+                            : "settings.timeline.visibility.hide",
+                        )}
+                      >
+                        <IconButton
+                          id={`${id}-${category}-visibility`}
+                          type="button"
+                          variant="ghost-muted"
+                          size="small"
+                          data-action="timeline-detail-visibility"
+                          aria-label={language.t("settings.timeline.visibility.label", {
+                            activity: language.t(`settings.timeline.category.${category}`),
+                          })}
+                          aria-pressed={props.value[category].placement !== "hidden"}
+                          onClick={() => {
+                            const placement = props.value[category].placement
+                            if (placement !== "hidden") setVisiblePlacements(category, placement)
+                            props.onChange({
+                              ...props.value,
+                              [category]: {
+                                ...props.value[category],
+                                placement:
+                                  placement === "hidden" ? (visiblePlacements[category] ?? "grouped") : "hidden",
+                              },
+                            })
+                          }}
+                          icon={
+                            <Icon
+                              name={props.value[category].placement === "hidden" ? "outline-eye-slash" : "outline-eye"}
+                            />
                           }
                         />
+                      </Tooltip>
+                      <label id={`${id}-${category}`} for={`${id}-${category}-visibility`}>
+                        {language.t(`settings.timeline.category.${category}`)}
+                      </label>
+                    </div>
+                    <div data-slot="timeline-detail-placement">
+                      <span data-slot="timeline-detail-field-label" aria-hidden="true">
+                        {language.t("settings.timeline.group")}
+                      </span>
+                      <Show
+                        when={props.value[category].placement !== "hidden"}
+                        fallback={<span data-slot="timeline-detail-unavailable" aria-hidden="true" />}
+                      >
+                        <Switch
+                          data-category={category}
+                          data-field="placement"
+                          hideLabel
+                          checked={props.value[category].placement === "grouped"}
+                          onChange={(checked) =>
+                            props.onChange({
+                              ...props.value,
+                              [category]: { ...props.value[category], placement: checked ? "grouped" : "separate" },
+                            })
+                          }
+                        >
+                          {language.t("settings.timeline.grouped.label", {
+                            activity: language.t(`settings.timeline.category.${category}`),
+                          })}
+                        </Switch>
                       </Show>
-                    ) : null}
+                    </div>
+                    <div data-slot="timeline-detail-expansion">
+                      {category === "shell" || category === "edit" || category === "thinking" ? (
+                        <>
+                          <span data-slot="timeline-detail-field-label" aria-hidden="true">
+                            {language.t("settings.timeline.collapse")}
+                          </span>
+                          <Show
+                            when={props.value[category].placement !== "hidden"}
+                            fallback={<span data-slot="timeline-detail-unavailable" aria-hidden="true" />}
+                          >
+                            <Switch
+                              data-category={category}
+                              data-field="details"
+                              hideLabel
+                              checked={props.value[category].details === "collapsed"}
+                              onChange={(checked) =>
+                                props.onChange({
+                                  ...props.value,
+                                  [category]: { ...props.value[category], details: checked ? "collapsed" : "expanded" },
+                                })
+                              }
+                            >
+                              {language.t("settings.timeline.collapsed.label", {
+                                activity: language.t(`settings.timeline.category.${category}`),
+                              })}
+                            </Switch>
+                          </Show>
+                        </>
+                      ) : null}
+                    </div>
                   </div>
-                </div>
-              )}
-            </For>
+                )}
+              </For>
+            </div>
           </div>
         </Collapsible.Content>
       </Collapsible>

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

@@ -19,7 +19,7 @@
   display: flex;
   flex-direction: column;
   max-height: min(75dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px));
-  padding: 0 12px max(12px, env(safe-area-inset-bottom, 0px));
+  padding: 0 12px max(12px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
   padding-left: max(12px, env(safe-area-inset-left, 0px));
   padding-right: max(12px, env(safe-area-inset-right, 0px));
   border-radius: 16px 16px 0 0;

packages/app/src/shell/shell.tsx

@@ -47,7 +47,9 @@ export default function Layout(props: ParentProps) {
             : platform.platform === "desktop" && platform.os === "windows"
               ? "1px"
               : "8px",
-          "--shell-bottom-inset": bottomTitlebar() ? "8px" : "max(0px, calc(8px - env(safe-area-inset-bottom, 0px)))",
+          "--shell-bottom-inset": bottomTitlebar()
+            ? "8px"
+            : "max(0px, calc(8px - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))))",
         }}
       >
         <Titlebar
@@ -67,7 +69,7 @@ export default function Layout(props: ParentProps) {
               class="relative flex h-full min-h-0 shrink-0 flex-col bg-v2-background-bg-deep pe-0.5 ps-2.5 pb-[var(--shell-bottom-inset,8px)] pt-[var(--shell-top-inset,8px)]"
               style={{
                 width: `${state.tabsWidth}px`,
-                "padding-bottom": "max(10px, env(safe-area-inset-bottom, 0px))",
+                "padding-bottom": "max(10px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))",
               }}
             >
               <ResizeHandle
@@ -85,8 +87,13 @@ 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.active() ? "0px" : "env(safe-area-inset-bottom, 0px)",
-              "--settings-bottom-inset": bottomTitlebar() ? "40px" : "env(safe-area-inset-bottom, 0px)",
+              "padding-bottom":
+                bottomTitlebar() || settings.active()
+                  ? "0px"
+                  : "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))",
+              "--settings-bottom-inset": bottomTitlebar()
+                ? "40px"
+                : "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))",
               "--settings-top-inset": mobile() && !bottomTitlebar() ? "0px" : "var(--shell-top-inset, 8px)",
             }}
           >

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

@@ -155,11 +155,11 @@ export function Titlebar(props: {
         height:
           platform.platform === "web"
             ? bottom()
-              ? "calc(28px + max(8px, env(safe-area-inset-bottom, 0px)))"
+              ? "calc(28px + max(8px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))))"
               : "calc(28px + max(8px, env(safe-area-inset-top, 0px)))"
             : undefined,
         "padding-top": bottom() ? "0px" : "env(safe-area-inset-top, 0px)",
-        "padding-bottom": bottom() ? "env(safe-area-inset-bottom, 0px)" : "0px",
+        "padding-bottom": bottom() ? "var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))" : "0px",
         "min-height": minHeight(),
         // Keep native macOS traffic lights clear even when the desktop window is narrow.
         "padding-left": macTrafficLights() ? `${macTrafficLightsBaseWidth / zoom()}px` : 0,
@@ -440,7 +440,7 @@ export function Titlebar(props: {
                 class="h-full flex-1 overflow-hidden flex flex-row items-center gap-1.5 px-2 md:pe-3"
                 classList={{
                   "pt-[max(0px,calc(8px-env(safe-area-inset-top,0px)))]": !bottom() && !windows(),
-                  "pb-[max(0px,calc(8px-env(safe-area-inset-bottom,0px)))]": bottom(),
+                  "pb-[max(0px,calc(8px-var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))))]": bottom(),
                   "pl-4": macTrafficLights(),
                   // Center the 20px app icon over the sidebar's 16px icon column.
                   "ps-3.5": windows(),

packages/app/test-browser/draft-history-cache.test.ts

@@ -9,7 +9,10 @@ function fixture(id: string, getBlob: () => Promise<Blob | null>) {
   ])
   const store = createDraftStore({
     get: async (key) => documents.get(key) ?? null,
-    set: async (key, value) => void documents.set(key, value),
+    set: async (key, value) => {
+      documents.set(key, value)
+      return []
+    },
     remove: async (key) => void documents.delete(key),
     putBlob: async () => id,
     getBlob,
@@ -113,7 +116,7 @@ test("keeps different blob IDs independent", async () => {
   const reads: string[] = []
   const store = createDraftStore({
     get: async () => JSON.stringify(["history-cache-first", "history-cache-second"].map((id) => ({ blob: { id } }))),
-    set: async () => {},
+    set: async () => [],
     remove: async () => {},
     putBlob: async () => "unused",
     getBlob: async (id) => {

packages/app/test-browser/prompt-persistence.test.ts

@@ -40,7 +40,7 @@ describe("prompt persistence", () => {
     async (raw) => {
       const store = createDraftStore({
         get: async () => raw,
-        set: async () => undefined,
+        set: async () => [],
         remove: async () => undefined,
         putBlob: async () => "unused",
         getBlob: async () => null,
@@ -68,7 +68,10 @@ describe("prompt persistence", () => {
     const blobs = new Map<string, Blob>()
     const store = createDraftStore({
       get: async (key) => documents.get(key) ?? null,
-      set: async (key, value) => void documents.set(key, value),
+      set: async (key, value) => {
+        documents.set(key, value)
+        return []
+      },
       remove: async (key) => void documents.delete(key),
       putBlob: async (blob) => {
         blobs.set("composer-image", blob)
@@ -170,7 +173,10 @@ describe("prompt persistence", () => {
     const documents = new Map<string, string>()
     const store = createDraftStore({
       get: async (key) => documents.get(key) ?? null,
-      set: async (key, value) => void documents.set(key, value),
+      set: async (key, value) => {
+        documents.set(key, value)
+        return []
+      },
       remove: async (key) => void documents.delete(key),
       putBlob: async () => "blob",
       getBlob: async () => null,
@@ -201,7 +207,10 @@ describe("prompt persistence", () => {
     const documents = new Map<string, string>()
     const store = createDraftStore({
       get: async (key) => documents.get(key) ?? null,
-      set: async (key, value) => void documents.set(key, value),
+      set: async (key, value) => {
+        documents.set(key, value)
+        return []
+      },
       remove: async (key) => void documents.delete(key),
       putBlob: async () => "blob",
       getBlob: async () => null,
@@ -233,7 +242,10 @@ test("moves image data URLs into blobs and hydrates object URLs", async () => {
   const blobs = new Map<string, Blob>()
   const store = createDraftStore({
     get: async (key) => documents.get(key) ?? null,
-    set: async (key, value) => void documents.set(key, value),
+    set: async (key, value) => {
+      documents.set(key, value)
+      return []
+    },
     remove: async (key) => void documents.delete(key),
     putBlob: async (blob) => {
       const id = String(blob.size)
@@ -255,7 +267,10 @@ test("does not let delayed blob migration overwrite a newer draft", async () =>
   const migration = Promise.withResolvers<void>()
   const store = createDraftStore({
     get: async () => null,
-    set: async (key, value) => void documents.set(key, value),
+    set: async (key, value) => {
+      documents.set(key, value)
+      return []
+    },
     remove: async () => undefined,
     putBlob: async () => {
       await migration.promise

packages/core/src/model-resolver.ts

@@ -344,8 +344,13 @@ function usesAPIKeyAuth(packageName: string | undefined) {
     name?.startsWith("@opencode-ai/ai/providers/openai/") === true ||
     name === "@opencode-ai/ai/providers/anthropic" ||
     name === "@opencode-ai/ai/providers/anthropic-compatible" ||
+    name === "@opencode-ai/ai/providers/baseten" ||
     name === "@opencode-ai/ai/providers/cerebras" ||
+    name === "@opencode-ai/ai/providers/cloudflare-ai-gateway" ||
+    name === "@opencode-ai/ai/providers/cloudflare-workers-ai" ||
     name === "@opencode-ai/ai/providers/deepinfra" ||
+    name === "@opencode-ai/ai/providers/deepseek" ||
+    name === "@opencode-ai/ai/providers/fireworks" ||
     name === "@opencode-ai/ai/providers/openai-compatible" ||
     name === "@opencode-ai/ai/providers/google" ||
     name === "@opencode-ai/ai/providers/groq" ||

packages/core/src/provider.ts

@@ -48,8 +48,13 @@ const builtins = new Map<string, () => Promise<unknown>>([
   ["@opencode-ai/ai/providers/azure", () => import("@opencode-ai/ai/providers/azure")],
   ["@opencode-ai/ai/providers/azure/chat", () => import("@opencode-ai/ai/providers/azure/chat")],
   ["@opencode-ai/ai/providers/azure/responses", () => import("@opencode-ai/ai/providers/azure/responses")],
+  ["@opencode-ai/ai/providers/baseten", () => import("@opencode-ai/ai/providers/baseten")],
   ["@opencode-ai/ai/providers/cerebras", () => import("@opencode-ai/ai/providers/cerebras")],
+  ["@opencode-ai/ai/providers/cloudflare-ai-gateway", () => import("@opencode-ai/ai/providers/cloudflare-ai-gateway")],
+  ["@opencode-ai/ai/providers/cloudflare-workers-ai", () => import("@opencode-ai/ai/providers/cloudflare-workers-ai")],
   ["@opencode-ai/ai/providers/deepinfra", () => import("@opencode-ai/ai/providers/deepinfra")],
+  ["@opencode-ai/ai/providers/deepseek", () => import("@opencode-ai/ai/providers/deepseek")],
+  ["@opencode-ai/ai/providers/fireworks", () => import("@opencode-ai/ai/providers/fireworks")],
   ["@opencode-ai/ai/providers/google", () => import("@opencode-ai/ai/providers/google")],
   ["@opencode-ai/ai/providers/google-vertex", () => import("@opencode-ai/ai/providers/google-vertex")],
   ["@opencode-ai/ai/providers/google-vertex/gemini", () => import("@opencode-ai/ai/providers/google-vertex/gemini")],

packages/core/test/model-resolver.test.ts

@@ -132,6 +132,25 @@ describe("ModelResolver", () => {
     }),
   )
 
+  it.effect("keeps explicitly selected compatible packages generic for known provider IDs", () =>
+    Effect.gen(function* () {
+      for (const providerID of ["baseten", "cerebras", "deepinfra", "deepseek", "fireworks-ai", "groq", "togetherai"]) {
+        const selected = yield* ModelResolver.fromCatalogModel(
+          model(Provider.aisdk("@ai-sdk/openai-compatible"), {
+            providerID: Provider.ID.make(providerID),
+            settings: { baseURL: "https://provider.example/v1/openai", apiKey: "fixture" },
+          }),
+        )
+        expect(String(selected.provider)).toBe(providerID)
+        expect(selected.route.id).toBe("openai-compatible-chat")
+        expect(selected.route.endpoint.baseURL).toBe("https://provider.example/v1/openai")
+        const prepared = yield* compileRequest(LLM.request({ model: selected, prompt: "Hello" }))
+        expect(prepared.body.messages).toEqual([{ role: "user", content: "Hello" }])
+        expect(prepared.body).not.toHaveProperty("apiKey")
+      }
+    }),
+  )
+
   it.effect("resolves environment templates before native providers inspect endpoints", () =>
     withEnv({ AZURE_HOST: "resource.openai.azure.com" }, () =>
       Effect.gen(function* () {
@@ -301,6 +320,13 @@ describe("ModelResolver", () => {
         settings: { baseURL: "https://native-mistral.example.com/v1" },
         headers: { "cf-access-token": "access-token" },
       }),
+      ...["baseten", "cloudflare-ai-gateway", "cloudflare-workers-ai", "deepseek", "fireworks"].map((name) =>
+        model(`@opencode-ai/ai/providers/${name}`, {
+          providerID: Provider.ID.make("gateway"),
+          settings: { baseURL: `https://${name}.example.com/v1` },
+          headers: { "cf-access-token": "access-token" },
+        }),
+      ),
     ]
     const provider = Provider.Info.make({
       ...Provider.Info.empty(selected.providerID),

packages/core/test/provider.test.ts

@@ -5,8 +5,13 @@ import { Provider } from "@opencode-ai/core/provider"
 describe("Provider", () => {
   test("loads bundled native provider entrypoints", async () => {
     const packages = [
+      "@opencode-ai/ai/providers/baseten",
       "@opencode-ai/ai/providers/cerebras",
+      "@opencode-ai/ai/providers/cloudflare-ai-gateway",
+      "@opencode-ai/ai/providers/cloudflare-workers-ai",
       "@opencode-ai/ai/providers/deepinfra",
+      "@opencode-ai/ai/providers/deepseek",
+      "@opencode-ai/ai/providers/fireworks",
       "@opencode-ai/ai/providers/google-vertex",
       "@opencode-ai/ai/providers/google-vertex/gemini",
       "@opencode-ai/ai/providers/google-vertex/chat",

packages/desktop/src/main/ipc-handlers/storage.ts

@@ -26,8 +26,8 @@ export const storageHandlers = StorageRpcs.toLayer(
         }),
       StorageClear: ({ name }) => Effect.sync(() => storage.state.clear(name)),
       DraftsGet: ({ key }) => Effect.sync(() => storage.drafts.get(key)),
-      DraftsSet: ({ key, value }) => Effect.sync(() => storage.drafts.set(key, value)),
-      DraftsDelete: ({ key }) => Effect.sync(() => storage.drafts.set(key, null)),
+      DraftsSet: ({ key, value, strict }) => Effect.sync(() => storage.drafts.set(key, value, strict)),
+      DraftsDelete: ({ key }) => Effect.sync(() => void storage.drafts.set(key, null)),
       DraftsPutBlob: ({ data }) => Effect.sync(() => storage.drafts.putBlob(data)),
       DraftsGetBlob: ({ id }) => Effect.sync(() => storage.drafts.getBlob(id)),
     })

packages/desktop/src/main/storage/drafts.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "bun:test"
 import { sql } from "drizzle-orm"
 import { openDatabase } from "./database"
-import { createDraftStore } from "./drafts"
+import { blobGrace, createDraftStore } from "./drafts"
 
 describe("draft store", () => {
   test("queues documents and reads them back before and after flush", () => {
@@ -29,4 +29,102 @@ describe("draft store", () => {
     expect(second.getBlob(used)).toEqual(new Uint8Array([1, 2, 3]))
     expect(second.getBlob(unused)).toBeNull()
   })
+
+  test("collects a retired chunk only once it is unreferenced and past the grace period", () => {
+    const database = openDatabase(":memory:")
+    let clock = 0
+    const drafts = createDraftStore(database.db, { delay: 1_000, now: () => clock })
+    const text = (...ids: string[]) =>
+      JSON.stringify({ prompt: [{ type: "text", content: { blob: { kind: "text", ids } } }] })
+    const a = drafts.putBlob(new TextEncoder().encode("chunk a"))
+    const b = drafts.putBlob(new TextEncoder().encode("chunk b"))
+    drafts.set("doc", text(a, b))
+    drafts.flush()
+    const c = drafts.putBlob(new TextEncoder().encode("chunk c"))
+    drafts.set("doc", text(a, c))
+    drafts.flush()
+    // Retired but recently touched: survives a due collection.
+    clock = 120_000
+    drafts.putBlob(new TextEncoder().encode("chunk d"))
+    drafts.set("other", "{}")
+    drafts.flush()
+    expect(drafts.getBlob(b)).not.toBeNull()
+    // Past the grace period and still unreferenced: collected. Referenced chunks stay.
+    clock = 120_000 + blobGrace + 1
+    drafts.putBlob(new TextEncoder().encode("chunk e"))
+    drafts.set("other", "{}")
+    drafts.flush()
+    expect(drafts.getBlob(a)).not.toBeNull()
+    expect(drafts.getBlob(c)).not.toBeNull()
+    expect(drafts.getBlob(b)).toBeNull()
+  })
+
+  test("a document that republishes a cached chunk id refreshes the chunk without an upload", () => {
+    const database = openDatabase(":memory:")
+    let clock = 0
+    const drafts = createDraftStore(database.db, { delay: 1_000, now: () => clock })
+    const text = (...ids: string[]) =>
+      JSON.stringify({ prompt: [{ type: "text", content: { blob: { kind: "text", ids } } }] })
+    const a = drafts.putBlob(new TextEncoder().encode("A"))
+    drafts.set("doc", text(a))
+    drafts.flush()
+    // Edit away from A; A becomes unreferenced.
+    const b = drafts.putBlob(new TextEncoder().encode("A!"))
+    drafts.set("doc", text(b))
+    drafts.flush()
+    // Long after, undo republishes A from the renderer cache with no upload. The write touches A.
+    clock = blobGrace - 1
+    drafts.set("doc", text(a))
+    drafts.flush()
+    clock = blobGrace + collectInterval
+    drafts.putBlob(new TextEncoder().encode("unrelated"))
+    drafts.set("other", "{}")
+    drafts.flush()
+    expect(drafts.getBlob(a)).not.toBeNull()
+    expect(drafts.getBlob(b)).toBeNull()
+  })
+
+  test("set reports referenced blobs the store does not hold so the renderer can upload them again", () => {
+    const database = openDatabase(":memory:")
+    const drafts = createDraftStore(database.db, { delay: 1_000 })
+    const kept = drafts.putBlob(new TextEncoder().encode("kept"))
+    const image = drafts.putBlob(new Uint8Array([9]))
+    const document = JSON.stringify({
+      prompt: [
+        { type: "text", content: { blob: { kind: "text", ids: [kept, "gone-chunk"] } } },
+        { type: "image", blob: { id: image } },
+        { type: "image", blob: { id: "gone-image" } },
+      ],
+    })
+    // A strict write with missing blobs is refused: the previous document remains.
+    drafts.set("doc", JSON.stringify({ previous: true }))
+    expect(drafts.set("doc", document, true).sort()).toEqual(["gone-chunk", "gone-image"])
+    expect(drafts.get("doc")).toBe(JSON.stringify({ previous: true }))
+    // A non-strict write stores it anyway and still reports what is missing.
+    expect(drafts.set("doc", document, false).sort()).toEqual(["gone-chunk", "gone-image"])
+    expect(drafts.get("doc")).toBe(document)
+    expect(drafts.set("plain", "not json", true)).toEqual([])
+    expect(drafts.set("doc", null, true)).toEqual([])
+    expect(drafts.set("doc", document, true)).not.toContain(kept)
+  })
+
+  test("an uploaded attachment survives a due collection before its document is written", () => {
+    const database = openDatabase(":memory:")
+    let clock = 0
+    const drafts = createDraftStore(database.db, { delay: 1_000, now: () => clock })
+    drafts.putBlob(new TextEncoder().encode("old"))
+    drafts.set("other", JSON.stringify({ n: 1 }))
+    drafts.flush()
+    clock = collectInterval + 1
+    // The renderer uploads first and saves the referencing document up to a second later.
+    const image = drafts.putBlob(new Uint8Array([1, 2, 3]))
+    drafts.set("other", JSON.stringify({ n: 2 }))
+    drafts.flush()
+    expect(drafts.getBlob(image)).not.toBeNull()
+    drafts.set("doc", JSON.stringify({ prompt: [{ type: "image", blob: { id: image } }] }))
+    drafts.flush()
+    expect(drafts.getBlob(image)).not.toBeNull()
+  })
 })
+
+const collectInterval = 60_000

packages/desktop/src/main/storage/drafts.ts

@@ -6,8 +6,34 @@ import { createWriteBehind } from "./write-behind"
 
 export type DraftStore = ReturnType<typeof createDraftStore>
 
-export function createDraftStore(db: Database, input: { delay?: number; onError?: (error: unknown) => void } = {}) {
-  collectBlobs(db)
+// Editing a large paste retires one text chunk per save, so orphans accumulate while the app runs.
+const collectInterval = 60_000
+// A blob stays collectable-proof for this long after its last upload or document reference. The
+// renderer reuses a cached chunk id without uploading for far less than this (see
+// draftChunkCacheTtl), so a reference it publishes always points at a retained blob.
+export const blobGrace = 15 * 60_000
+
+// Every blob id a document references: image parts `{ blob: { id } }` and text chunk lists
+// `{ blob: { kind: "text", ids: [...] } }`. SQLite walks the JSON; nothing parses drafts in JS.
+const referenced = (value: unknown) => sql`
+  SELECT json_extract(node.value, '$.id') AS id
+  FROM json_tree(${value}) AS node
+  WHERE node.key = 'blob' AND node.type = 'object' AND json_type(node.value, '$.id') = 'text'
+  UNION
+  SELECT chunk.value AS id
+  FROM json_tree(${value}) AS node, json_each(node.value, '$.ids') AS chunk
+  WHERE node.key = 'blob' AND node.type = 'object' AND json_type(node.value, '$.ids') = 'array'
+`
+
+export function createDraftStore(
+  db: Database,
+  input: { delay?: number; onError?: (error: unknown) => void; now?: () => number } = {},
+) {
+  const now = input.now ?? Date.now
+  // Nothing outside this process can hold a blob id at startup, so no grace applies.
+  collectBlobs(db, Infinity)
+  let collected = now()
+  let orphans = false
   const byKey = eq(document.key, sql.placeholder("key"))
   const read = db.select({ value: document.value }).from(document).where(byKey).prepare()
   const remove = db.delete(document).where(byKey).prepare()
@@ -19,13 +45,27 @@ export function createDraftStore(db: Database, input: { delay?: number; onError?
   const writer = createWriteBehind<string | null>({
     delay: input.delay ?? 500,
     onError: input.onError,
-    write: (batch) =>
+    write: (batch) => {
+      const at = now()
       db.transaction(() => {
         for (const [key, value] of batch) {
-          if (value === null) remove.run({ key })
-          else upsert.run({ key, value })
+          if (value === null) {
+            remove.run({ key })
+            continue
+          }
+          upsert.run({ key, value })
+          // Referencing a blob keeps it alive; done here so a reference the renderer republished
+          // from its cache is refreshed even though no upload happened.
+          if (json(value))
+            db.run(sql`UPDATE ${blobs} SET touched_at = ${at} WHERE ${blobs.id} IN (${referenced(value)})`)
         }
-      }),
+      })
+      // Only a document rewrite can orphan a blob, so collect right after one when due.
+      if (!orphans || at - collected < collectInterval) return
+      collectBlobs(db, at - blobGrace)
+      collected = at
+      orphans = false
+    },
   })
 
   return {
@@ -33,13 +73,29 @@ export function createDraftStore(db: Database, input: { delay?: number; onError?
       if (writer.has(key)) return writer.get(key) ?? null
       return read.get({ key })?.value ?? null
     },
-    set: (key: string, value: string | null) => writer.set(key, value),
+    // Returns the referenced blob ids this store does not hold so the renderer can upload them
+    // again. A strict write is refused while any are missing, so the previously stored document
+    // stays visible instead of one with dangling references.
+    set(key: string, value: string | null, strict = false) {
+      const missing =
+        value === null || !json(value)
+          ? []
+          : db
+              .all<{
+                id: string
+              }>(sql`SELECT ref.id FROM (${referenced(value)}) AS ref WHERE ref.id NOT IN (SELECT ${blobs.id} FROM ${blobs})`)
+              .map((row) => row.id)
+      if (!strict || missing.length === 0) writer.set(key, value)
+      return missing
+    },
     putBlob(data: Uint8Array) {
       const id = createHash("sha256").update(data).digest("hex")
+      const touched_at = now()
       db.insert(blobs)
-        .values({ id, data: Buffer.from(data) })
-        .onConflictDoNothing()
+        .values({ id, data: Buffer.from(data), touched_at })
+        .onConflictDoUpdate({ target: blobs.id, set: { touched_at } })
         .run()
+      orphans = true
       return id
     },
     getBlob(id: string): Uint8Array | null {
@@ -50,14 +106,25 @@ export function createDraftStore(db: Database, input: { delay?: number; onError?
   }
 }
 
-// Blobs are content-addressed and shared; drop the ones no document references anymore. SQLite
-// walks the JSON itself, so startup does not parse every draft and history entry in JavaScript.
-function collectBlobs(db: Database) {
+function json(value: string) {
+  return value.startsWith("{") || value.startsWith("[")
+}
+
+// Drop blobs no stored document references and nothing has touched since `before`.
+function collectBlobs(db: Database, before: number) {
   db.run(sql`
-    DELETE FROM ${blobs} WHERE ${blobs.id} NOT IN (
-      SELECT json_extract(node.value, '$.id')
-      FROM ${document}, json_tree(${document.value}) AS node
-      WHERE json_valid(${document.value}) AND node.key = 'blob' AND node.type = 'object'
-    )
+    DELETE FROM ${blobs}
+    WHERE ${blobs.touched_at} < ${before === Infinity ? Number.MAX_SAFE_INTEGER : before}
+      AND ${blobs.id} NOT IN (
+        SELECT json_extract(node.value, '$.id')
+        FROM ${document}, json_tree(${document.value}) AS node
+        WHERE json_valid(${document.value}) AND node.key = 'blob' AND node.type = 'object'
+          AND json_type(node.value, '$.id') = 'text'
+        UNION
+        SELECT chunk.value
+        FROM ${document}, json_tree(${document.value}) AS node, json_each(node.value, '$.ids') AS chunk
+        WHERE json_valid(${document.value}) AND node.key = 'blob' AND node.type = 'object'
+          AND json_type(node.value, '$.ids') = 'array'
+      )
   `)
 }

packages/desktop/src/main/storage/migration.gen.ts

@@ -14,4 +14,8 @@ export const migrations = [
       "CREATE TABLE `state` (\n\t`name` text NOT NULL,\n\t`key` text NOT NULL,\n\t`value` text NOT NULL,\n\t`updated_at` integer NOT NULL,\n\tCONSTRAINT `state_pk` PRIMARY KEY(`name`, `key`)\n);",
     ],
   },
+  {
+    id: "20260907031611_blob-touched",
+    statements: ["ALTER TABLE `blob` ADD `touched_at` integer DEFAULT 0 NOT NULL;"],
+  },
 ]

packages/desktop/src/main/storage/migration/20260907031611_blob-touched/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE `blob` ADD `touched_at` integer DEFAULT 0 NOT NULL;

packages/desktop/src/main/storage/migration/20260907031611_blob-touched/snapshot.json

@@ -0,0 +1,141 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "id": "53c65132-8703-42d6-8464-64356145dfb4",
+  "prevIds": [
+    "5a2f8b7e-2765-4a0b-8877-a74ee2f29b20"
+  ],
+  "ddl": [
+    {
+      "name": "blob",
+      "entityType": "tables"
+    },
+    {
+      "name": "document",
+      "entityType": "tables"
+    },
+    {
+      "name": "state",
+      "entityType": "tables"
+    },
+    {
+      "type": "text",
+      "notNull": false,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "id",
+      "entityType": "columns",
+      "table": "blob"
+    },
+    {
+      "type": "blob",
+      "notNull": true,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "data",
+      "entityType": "columns",
+      "table": "blob"
+    },
+    {
+      "type": "integer",
+      "notNull": true,
+      "autoincrement": false,
+      "default": "0",
+      "generated": null,
+      "name": "touched_at",
+      "entityType": "columns",
+      "table": "blob"
+    },
+    {
+      "type": "text",
+      "notNull": false,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "key",
+      "entityType": "columns",
+      "table": "document"
+    },
+    {
+      "type": "text",
+      "notNull": true,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "value",
+      "entityType": "columns",
+      "table": "document"
+    },
+    {
+      "type": "text",
+      "notNull": true,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "name",
+      "entityType": "columns",
+      "table": "state"
+    },
+    {
+      "type": "text",
+      "notNull": true,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "key",
+      "entityType": "columns",
+      "table": "state"
+    },
+    {
+      "type": "text",
+      "notNull": true,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "value",
+      "entityType": "columns",
+      "table": "state"
+    },
+    {
+      "type": "integer",
+      "notNull": true,
+      "autoincrement": false,
+      "default": null,
+      "generated": null,
+      "name": "updated_at",
+      "entityType": "columns",
+      "table": "state"
+    },
+    {
+      "columns": [
+        "name",
+        "key"
+      ],
+      "nameExplicit": false,
+      "name": "state_pk",
+      "entityType": "pks",
+      "table": "state"
+    },
+    {
+      "columns": [
+        "id"
+      ],
+      "nameExplicit": false,
+      "name": "blob_pk",
+      "table": "blob",
+      "entityType": "pks"
+    },
+    {
+      "columns": [
+        "key"
+      ],
+      "nameExplicit": false,
+      "name": "document_pk",
+      "table": "document",
+      "entityType": "pks"
+    }
+  ],
+  "renames": []
+}

packages/desktop/src/main/storage/schema.ts

@@ -6,10 +6,12 @@ export const document = sqliteTable("document", {
   value: text().notNull(),
 })
 
-// Images referenced from documents by content hash.
+// Images and text chunks referenced from documents by content hash. `touched_at` is the last time
+// a blob was uploaded or a written document referenced it; collection leaves recent blobs alone.
 export const blobs = sqliteTable("blob", {
   id: text().primaryKey(),
   data: blob({ mode: "buffer" }).notNull(),
+  touched_at: integer().notNull().default(0),
 })
 
 // Everything the renderer persists through `platform.storage(name)`. `name` is the storage

packages/desktop/src/renderer/api-types.ts

@@ -39,7 +39,7 @@ export type ElectronAPI = {
     cb: (name: string, insert: Record<string, string>, remove: string[], revision: number) => void,
   ): () => void
   draftGet(key: string): Promise<string | null>
-  draftSet(key: string, value: string): Promise<void>
+  draftSet(key: string, value: string, strict: boolean): Promise<string[]>
   draftDelete(key: string): Promise<void>
   draftBlobPut(data: ArrayBuffer): Promise<string>
   draftBlobGet(id: string): Promise<ArrayBuffer | null>

packages/desktop/src/renderer/api.ts

@@ -81,7 +81,7 @@ export const api: ElectronAPI = {
   onStoreChanged: (cb) =>
     listen("StorageChanged", (event) => cb(event.name, mutable(event.insert), mutable(event.remove), event.revision)),
   draftGet: (key) => invoke("DraftsGet", { key }),
-  draftSet: (key, value) => invoke("DraftsSet", { key, value }),
+  draftSet: (key, value, strict) => invoke("DraftsSet", { key, value, strict }).then(mutable),
   draftDelete: (key) => invoke("DraftsDelete", { key }),
   draftBlobPut: (data) => invoke("DraftsPutBlob", { data: new Uint8Array(data) }),
   draftBlobGet: (id) => invoke("DraftsGetBlob", { id }).then((data) => (data ? toArrayBuffer(data) : null)),

packages/desktop/src/shared/ipc-rpc/storage.ts

@@ -19,7 +19,8 @@ export const DraftsGet = Rpc.make("DraftsGet", {
   success: Schema.NullOr(Schema.String),
 })
 export const DraftsSet = Rpc.make("DraftsSet", {
-  payload: { key: Schema.String, value: Schema.String },
+  payload: { key: Schema.String, value: Schema.String, strict: Schema.Boolean },
+  success: Schema.Array(Schema.String),
 })
 export const DraftsDelete = Rpc.make("DraftsDelete", { payload: { key: Schema.String } })
 export const DraftsPutBlob = Rpc.make("DraftsPutBlob", {

packages/ui/src/data-display/project-avatar/project-avatar.css

@@ -105,8 +105,8 @@
 }
 
 [data-component="project-avatar-v2"][data-unread] [data-slot="project-avatar-surface"] {
-  -webkit-mask-image: radial-gradient(circle 4.5px at calc(100% - 1px) 1px, transparent 4.5px, black 4.5px);
-  mask-image: radial-gradient(circle 4.5px at calc(100% - 1px) 1px, transparent 4.5px, black 4.5px);
+  -webkit-mask-image: radial-gradient(circle 4.5px at 100% 0, transparent 4px, black 5px);
+  mask-image: radial-gradient(circle 4.5px at 100% 0, transparent 4px, black 5px);
 }
 
 [data-slot="project-avatar-unread-dot"] {
@@ -114,8 +114,8 @@
   z-index: 3;
   width: 6px;
   height: 6px;
-  right: -2px;
-  top: -2px;
+  right: -3px;
+  top: -3px;
   border-radius: 9999px;
   background: var(--v2-background-bg-accent);
   pointer-events: none;

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

@@ -19,6 +19,8 @@ const names = [
   "outline-arrow-to-corner-top-right",
   "outline-copy",
   "outline-dots",
+  "outline-eye",
+  "outline-eye-slash",
   "outline-hexagonal-warning",
   "plus",
   "review",

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

@@ -184,6 +184,14 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M13.5554 10.4445V13.5556C13.5554 13.5556 12.7599 13.5556 11.7777 13.5556H4.22211C3.23989 13.5556 2.44434 13.5556 2.44434 13.5556V10.4445M4.88878 5.55557L7.99989 2.44446L11.111 5.55557M7.99989 2.44446L7.99989 9.11112" stroke="currentColor"/>`,
   },
+  "outline-eye": {
+    viewBox: "0 0 20 20",
+    body: `<path d="M2.5 10s3.33-5.42 7.5-5.42S17.5 10 17.5 10s-3.33 5.42-7.5 5.42S2.5 10 2.5 10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="10" r="2.5" stroke="currentColor"/>`,
+  },
+  "outline-eye-slash": {
+    viewBox: "0 0 20 20",
+    body: `<path d="M2.5 10s3.33-5.42 7.5-5.42S17.5 10 17.5 10s-3.33 5.42-7.5 5.42S2.5 10 2.5 10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="10" r="2.5" stroke="currentColor"/><path d="M3 3 17 17" stroke="currentColor" stroke-linecap="round"/>`,
+  },
   reset: {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,