fix(tui): soften block tool errors

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-PuNZrtSgh5F3KpXSM+bd+rYQuyzwWd+wCOnMJSDS2Z0=",
-    "aarch64-linux": "sha256-RYy8ZRf59FE/3+gICjvsZv3ekQvn+DTZaT9jefbK+0g=",
-    "aarch64-darwin": "sha256-1AsDK8xNj3RlzX2efbuEDEwaOLAgjFYaEvk7EkQkh4w=",
-    "x86_64-darwin": "sha256-8ONeOu9UmM0GRxVeOO3Uhk1yAOuW6R8tqBYswOVEkME="
+    "x86_64-linux": "sha256-JEqi00PCle+o5OfBlJJaZtXd+4sYB3o+rvYiESlN4dY=",
+    "aarch64-linux": "sha256-zk3Uk1SQyeRrQ7BuFwlOnQAptUHIkq+oPdfd+sTEq5U=",
+    "aarch64-darwin": "sha256-3BOd3EcqimoG3rTI6lTHe91YVlCoEi8/68eT1lbOi0c=",
+    "x86_64-darwin": "sha256-X7wGmjiMloF5Zhuc20kAxLC+tl613YNXRgA+dQjP2WM="
   }
 }

package.json

@@ -27,6 +27,7 @@
     "prepare": "husky",
     "random": "echo 'Random script'",
     "sso": "aws sso login --sso-session=opencode --no-browser",
+    "translate:app": "bun run script/translate-app.ts",
     "test": "echo 'do not run tests from root' && exit 1"
   },
   "workspaces": {

packages/ai/src/protocols/anthropic-messages.ts

@@ -33,18 +33,6 @@ export const DEFAULT_BASE_URL = "https://api.anthropic.com/v1"
 export const PATH = "/messages"
 export const DEFAULT_MAX_TOKENS = 32_000
 
-const SSE_EVENTS = new Set([
-  "message",
-  "message_start",
-  "message_delta",
-  "message_stop",
-  "content_block_start",
-  "content_block_delta",
-  "content_block_stop",
-  "error",
-])
-export const framing = Framing.sseEvents(SSE_EVENTS)
-
 export type ThinkingInput =
   | {
       readonly type: "adaptive"
@@ -246,7 +234,7 @@ export type AnthropicMessagesBody = Schema.Schema.Type<typeof AnthropicMessagesB
 
 const AnthropicUsage = Schema.StructWithRest(
   Schema.Struct({
-    input_tokens: optionalNull(Schema.Number),
+    input_tokens: Schema.optional(Schema.Number),
     output_tokens: Schema.optional(Schema.Number),
     cache_creation_input_tokens: optionalNull(Schema.Number),
     cache_read_input_tokens: optionalNull(Schema.Number),
@@ -374,18 +362,16 @@ const lowerToolChoice = (toolChoice: NonNullable<LLMRequest["toolChoice"]>) =>
     tool: (name) => ({ type: "tool" as const, name }),
   })
 
-const scrubToolCallID = (id: string) => id.replace(/[^a-zA-Z0-9_-]/g, "_")
-
 const lowerToolCall = (part: ToolCallPart): AnthropicToolUseBlock => ({
   type: "tool_use",
-  id: scrubToolCallID(part.id),
+  id: part.id,
   name: part.name,
   input: part.input,
 })
 
 const lowerServerToolCall = (part: ToolCallPart): AnthropicServerToolUseBlock => ({
   type: "server_tool_use",
-  id: scrubToolCallID(part.id),
+  id: part.id,
   name: part.name,
   input: part.input,
 })
@@ -407,7 +393,7 @@ const lowerServerToolResult = Effect.fn("AnthropicMessages.lowerServerToolResult
   // Prefer the provider-owned replay payload; fall back to the result value for
   // histories constructed directly from provider events.
   const payload = part.providerMetadata?.anthropic?.["result"] ?? part.result.value
-  return { type: wireType, tool_use_id: scrubToolCallID(part.id), content: payload } satisfies AnthropicServerToolResultBlock
+  return { type: wireType, tool_use_id: part.id, content: payload } satisfies AnthropicServerToolResultBlock
 })
 
 const lowerMedia = Effect.fn("AnthropicMessages.lowerMedia")(function* (part: MediaPart) {
@@ -589,7 +575,7 @@ const lowerMessages = Effect.fn("AnthropicMessages.lowerMessages")(function* (
         return yield* ProviderShared.unsupportedContent("Anthropic Messages", "tool", ["tool-result"])
       content.push({
         type: "tool_result",
-        tool_use_id: scrubToolCallID(part.id),
+        tool_use_id: part.id,
         content: yield* lowerToolResultContent(part),
         is_error: part.result.type === "error" ? true : undefined,
         cache_control: cacheControl(breakpoints, part.cache),
@@ -706,7 +692,7 @@ const mapFinishReason = (reason: string | null | undefined): FinishReason => {
 // expose that subset through `output_tokens_details.thinking_tokens`.
 const mapUsage = (usage: AnthropicUsage | undefined): Usage | undefined => {
   if (!usage) return undefined
-  const nonCached = usage.input_tokens ?? undefined
+  const nonCached = usage.input_tokens
   const cacheRead = usage.cache_read_input_tokens ?? undefined
   const cacheWrite = usage.cache_creation_input_tokens ?? undefined
   const inputTokens = ProviderShared.sumTokens(nonCached, cacheRead, cacheWrite)
@@ -1053,7 +1039,7 @@ export const route = Route.make({
   protocol,
   endpoint: Endpoint.path(PATH, { baseURL: DEFAULT_BASE_URL }),
   auth: Auth.none,
-  framing,
+  framing: Framing.sse,
   headers: () => ({ "anthropic-version": "2023-06-01" }),
 })
 

packages/ai/src/protocols/gemini.ts

@@ -379,12 +379,7 @@ const lowerMessages = Effect.fn("Gemini.lowerMessages")(function* (request: LLMR
         },
       })
     }
-    // Gemini requires every response to a parallel call batch in one user turn,
-    // so consecutive tool results join the open function-response turn.
-    const previous = contents.at(-1)
-    if (previous?.role === "user" && previous.parts.some((item) => "functionResponse" in item))
-      contents[contents.length - 1] = { role: "user", parts: [...previous.parts, ...parts] }
-    else contents.push({ role: "user", parts })
+    contents.push({ role: "user", parts })
   }
 
   return contents

packages/ai/src/protocols/shared.ts

@@ -197,28 +197,19 @@ export const errorText = (error: unknown) => {
 
 /**
  * `framing` step for Server-Sent Events. Decodes UTF-8, runs the SSE channel
- * decoder, optionally filters named events, and drops empty / `[DONE]`
- * keep-alive events so the protocol event schema sees one JSON string per
- * element. The SSE channel emits a
+ * decoder, and drops empty / `[DONE]` keep-alive events so the protocol event
+ * schema sees one JSON string per element. The SSE channel emits a
  * `Retry` control event on its error channel; we drop it here (we don't
  * implement client-driven retries). Decoder failures become provider output
  * errors so the public error channel stays `AIError`.
  */
-export const sseFraming = (
-  bytes: Stream.Stream<Uint8Array, AIError>,
-  events?: ReadonlySet<string>,
-): Stream.Stream<string, AIError> =>
+export const sseFraming = (bytes: Stream.Stream<Uint8Array, AIError>): Stream.Stream<string, AIError> =>
   bytes.pipe(
     Stream.decodeText(),
     Stream.pipeThroughChannel(Sse.decode()),
     Stream.catchTag("Retry", () => Stream.empty),
     Stream.catchTag("SseError", (error) => Stream.fail(eventError("sse", error.message))),
-    Stream.filter(
-      (event) =>
-        (events === undefined || events.has(event.event)) &&
-        event.data.length > 0 &&
-        (event.data !== "[DONE]" || (events !== undefined && event.event !== "message")),
-    ),
+    Stream.filter((event) => event.data.length > 0 && event.data !== "[DONE]"),
     Stream.map((event) => event.data),
   )
 

packages/ai/src/provider-error.ts

@@ -74,7 +74,6 @@ const INVALID_REQUEST_CODES = new Set(["invalid_prompt", "invalid_request_error"
 const RATE_LIMIT_TEXT = /rate increased too quickly|rate[-_\s]?limit|too[_\s]?many[_\s]?requests/i
 const QUOTA_TEXT = /insufficient[-_\s]?quota|quota[-_\s]?exceeded/i
 const CONTENT_POLICY_TEXT = /content[-_\s]?policy|content_filter|safety/i
-const NETWORK_ERROR_TEXT = /network[-_\s]error/i
 
 export interface ProviderFailure {
   readonly message: string
@@ -128,7 +127,6 @@ export function classifyProviderFailure(input: ProviderFailure): AIError["reason
       retryAfterMs: input.retryAfterMs,
       rateLimit: input.rateLimit,
     })
-  if (NETWORK_ERROR_TEXT.test(text)) return new ProviderInternalReason({ ...common, status: input.status })
   if (codes.some((code) => SERVER_CODES.has(code) || code.includes("exhausted") || code.includes("unavailable")))
     return new ProviderInternalReason({
       ...common,

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

@@ -4,6 +4,7 @@ import { AnthropicMessages } from "../protocols/anthropic-messages.js"
 import { Auth } from "../route/auth.js"
 import { Route, type RouteDefaultsInput } from "../route/client.js"
 import { Endpoint } from "../route/endpoint.js"
+import { Framing } from "../route/framing.js"
 import { Protocol } from "../route/protocol.js"
 import { ProviderID, type ModelID } from "../schema/index.js"
 import { GoogleVertexShared } from "./google-vertex-shared.js"
@@ -13,7 +14,6 @@ export type AnthropicProviderOptionsInput = AnthropicMessages.ProviderOptionsInp
 export type AnthropicThinkingInput = AnthropicMessages.ThinkingInput
 
 const VERSION = "vertex-2023-10-16" as const
-const HEADER_VERSION = "2023-06-01" as const
 
 export const id = ProviderID.make("google-vertex")
 
@@ -57,8 +57,7 @@ const route = Route.make({
   }),
   endpoint: Endpoint.path(({ request }) => `/${request.model.id}:streamRawPredict`),
   auth: Auth.none,
-  framing: AnthropicMessages.framing,
-  headers: () => ({ "anthropic-version": HEADER_VERSION }),
+  framing: Framing.sse,
 })
 
 export const routes = [route]

packages/ai/src/route/framing.ts

@@ -24,10 +24,4 @@ export interface Definition<Frame> {
 /** Server-Sent Events framing. Used by every JSON-streaming HTTP provider. */
 export const sse: Definition<string> = { id: "sse", frame: ProviderShared.sseFraming }
 
-/** SSE framing restricted to protocol-recognized event names. */
-export const sseEvents = (events: ReadonlySet<string>): Definition<string> => ({
-  id: "sse",
-  frame: (bytes) => ProviderShared.sseFraming(bytes, events),
-})
-
 export * as Framing from "./framing.js"

packages/ai/test/lib/sse.ts

@@ -10,9 +10,6 @@ export const sseEvents = (...chunks: ReadonlyArray<unknown>): string =>
 
 const formatChunk = (chunk: unknown) => `data: ${typeof chunk === "string" ? chunk : JSON.stringify(chunk)}\n\n`
 
-export const sseNamedEvent = (event: string, data: unknown): string =>
-  `event: ${event}\ndata: ${typeof data === "string" ? data : JSON.stringify(data)}`
-
 /**
  * Build an SSE body from already-serialized strings (used when the chunk shape
  * itself is part of what's being tested, e.g. malformed chunks).

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

@@ -82,14 +82,6 @@ describe("provider error classification", () => {
     ])
   })
 
-  test("classifies network error text as provider internal", () => {
-    expect(
-      ["network error", "network-error", "network_error"].map(
-        (message) => classifyProviderFailure({ message })._tag,
-      ),
-    ).toEqual(["ProviderInternal", "ProviderInternal", "ProviderInternal"])
-  })
-
   test("classifies nested provider codes when a top-level code is also present", () => {
     expect(
       [

packages/ai/test/provider/anthropic-messages.test.ts

@@ -8,7 +8,7 @@ import * as AnthropicMessages from "../../src/protocols/anthropic-messages.js"
 import { continuationRequest, nativeAnthropicMessagesContinuation } from "../continuation-scenarios.js"
 import { it } from "../lib/effect.js"
 import { dynamicResponse, fixedResponse } from "../lib/http.js"
-import { sseEvents, sseNamedEvent, sseRaw } from "../lib/sse.js"
+import { sseEvents } from "../lib/sse.js"
 
 const model = AnthropicMessages.route
   .with({ endpoint: { baseURL: "https://api.anthropic.test/v1/" }, auth: Auth.header("x-api-key", "test") })
@@ -327,29 +327,6 @@ describe("Anthropic Messages route", () => {
     }),
   )
 
-  it.effect("scrubs outbound tool call IDs without truncating them", () =>
-    Effect.gen(function* () {
-      const id = `functions.lookup:1|${"x".repeat(64)}`
-      const scrubbed = `functions_lookup_1_${"x".repeat(64)}`
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            Message.assistant([ToolCallPart.make({ id, name: "lookup", input: {} })]),
-            Message.tool({ id, name: "lookup", result: "done" }),
-          ],
-          cache: "none",
-        }),
-      )
-
-      expect(prepared.body.messages).toMatchObject([
-        { role: "assistant", content: [{ type: "tool_use", id: scrubbed, name: "lookup", input: {} }] },
-        { role: "user", content: [{ type: "tool_result", tool_use_id: scrubbed }] },
-      ])
-      expect(scrubbed.length).toBeGreaterThan(64)
-    }),
-  )
-
   it.effect("batches parallel tool results into one Anthropic user message", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(
@@ -663,60 +640,7 @@ describe("Anthropic Messages route", () => {
     }),
   )
 
-  it.effect("ignores unknown named SSE events", () =>
-    Effect.gen(function* () {
-      const response = yield* LLMClient.generate(request).pipe(
-        Effect.provide(
-          fixedResponse(
-            sseRaw(
-              sseNamedEvent("message_start", {
-                type: "message_start",
-                message: { usage: { input_tokens: 5 } },
-              }),
-              sseNamedEvent("proxy.stats", "not json"),
-              sseNamedEvent("content_block_start", {
-                type: "content_block_start",
-                index: 0,
-                content_block: { type: "text", text: "" },
-              }),
-              sseNamedEvent("content_block_delta", {
-                type: "content_block_delta",
-                index: 0,
-                delta: { type: "text_delta", text: "Hello" },
-              }),
-              sseNamedEvent("content_block_stop", { type: "content_block_stop", index: 0 }),
-              sseNamedEvent("message_delta", {
-                type: "message_delta",
-                delta: { stop_reason: "end_turn" },
-                usage: { output_tokens: 1 },
-              }),
-              sseNamedEvent("message_stop", { type: "message_stop" }),
-              sseNamedEvent("proxy.done", "still not json"),
-            ),
-          ),
-        ),
-      )
-
-      expect(response.message.content).toEqual([{ type: "text", text: "Hello" }])
-      expect(response.finishReason).toEqual({ normalized: "stop", raw: "end_turn" })
-    }),
-  )
-
-  it.effect("rejects malformed recognized SSE events", () =>
-    Effect.gen(function* () {
-      const error = yield* LLMClient.generate(request).pipe(
-        Effect.provide(fixedResponse(sseRaw(sseNamedEvent("message_start", "[DONE]")))),
-        Effect.flip,
-      )
-
-      expect(error.reason).toMatchObject({
-        _tag: "InvalidProviderOutput",
-        message: "Invalid anthropic/anthropic-messages stream event",
-      })
-    }),
-  )
-
-  it.effect("maps nullable input tokens and preserves unknown Anthropic usage fields", () =>
+  it.effect("maps thinking tokens and preserves unknown Anthropic usage fields", () =>
     Effect.gen(function* () {
       const response = yield* LLMClient.generate(request).pipe(
         Effect.provide(
@@ -739,7 +663,6 @@ describe("Anthropic Messages route", () => {
                 type: "message_delta",
                 delta: { stop_reason: "end_turn" },
                 usage: {
-                  input_tokens: null,
                   output_tokens: 8,
                   server_tool_use: { web_search_requests: 2, terminal_counter: 3 },
                   output_tokens_details: { terminal_detail: "preserved" },
@@ -759,7 +682,7 @@ describe("Anthropic Messages route", () => {
         totalTokens: 15,
         providerMetadata: {
           anthropic: {
-            input_tokens: null,
+            input_tokens: 5,
             cache_read_input_tokens: 2,
             service_tier: "standard",
             cache_creation: { ephemeral_5m_input_tokens: 1 },
@@ -1416,14 +1339,14 @@ describe("Anthropic Messages route", () => {
             Message.assistant([
               {
                 type: "tool-call",
-                id: "srvtoolu.abc",
+                id: "srvtoolu_abc",
                 name: "web_search",
                 input: { query: "effect 4" },
                 providerExecuted: true,
               },
               {
                 type: "tool-result",
-                id: "srvtoolu.abc",
+                id: "srvtoolu_abc",
                 name: "web_search",
                 result: { type: "json", value: [{ url: "https://example.com" }] },
                 providerExecuted: true,

packages/ai/test/provider/gemini.test.ts

@@ -181,53 +181,6 @@ describe("Gemini route", () => {
     }),
   )
 
-  it.effect("merges parallel tool results into one function-response turn", () =>
-    Effect.gen(function* () {
-      const prepared = yield* compileRequest(
-        LLM.request({
-          model,
-          messages: [
-            Message.assistant([
-              ToolCallPart.make({ id: "call_1", name: "lookup", input: { query: "weather" } }),
-              ToolCallPart.make({ id: "call_2", name: "lookup", input: { query: "time" } }),
-            ]),
-            Message.tool({ id: "call_1", name: "lookup", result: "sunny", resultType: "text" }),
-            Message.tool({ id: "call_2", name: "lookup", result: "noon", resultType: "text" }),
-          ],
-        }),
-      )
-
-      expect(prepared.body.contents).toEqual([
-        {
-          role: "model",
-          parts: [
-            { functionCall: { id: undefined, name: "lookup", args: { query: "weather" } } },
-            { functionCall: { id: undefined, name: "lookup", args: { query: "time" } } },
-          ],
-        },
-        {
-          role: "user",
-          parts: [
-            {
-              functionResponse: {
-                id: undefined,
-                name: "lookup",
-                response: { name: "lookup", content: "sunny" },
-              },
-            },
-            {
-              functionResponse: {
-                id: undefined,
-                name: "lookup",
-                response: { name: "lookup", content: "noon" },
-              },
-            },
-          ],
-        },
-      ])
-    }),
-  )
-
   it.effect("prepares multimodal user input and tool history", () =>
     Effect.gen(function* () {
       const prepared = yield* compileRequest(

packages/ai/test/provider/google-vertex.test.ts

@@ -96,7 +96,7 @@ describe("Google Vertex providers", () => {
                 "https://aiplatform.eu.rep.googleapis.com/v1/projects/vertex-project/locations/eu/publishers/anthropic/models/claude-sonnet-4-6:streamRawPredict",
               )
               expect(request.headers.get("authorization")).toBe("Bearer vertex-token")
-              expect(request.headers.get("anthropic-version")).toBe("2023-06-01")
+              expect(request.headers.get("anthropic-version")).toBeNull()
               const body = yield* Effect.promise(() => request.json())
               expect(body).toMatchObject({
                 anthropic_version: "vertex-2023-10-16",

packages/app/e2e/performance/timeline/first-navigation-benchmark.spec.ts

@@ -11,7 +11,7 @@ import {
 } from "./timeline-test-helpers"
 import { waitForStableTimeline } from "./session-tab-switch-probe"
 
-const contentSelector = '[data-message-id], [data-component="composer-editor"]'
+const contentSelector = '[data-message-id], [data-component="prompt-input"]'
 const draftID = "draft_first_navigation"
 
 benchmark.describe("performance: first navigation paint", () => {
@@ -41,11 +41,11 @@ benchmark.describe("performance: first navigation paint", () => {
       href,
       destinationPath: href,
       sourceSelector: messageSelector(fixture.expected.sourceMessageIDs.at(-1)!),
-      destinationSelector: '[data-component="composer-editor"]',
+      destinationSelector: '[data-component="prompt-input"]',
       contentSelector,
       navigate: async () => {
         await page.locator(`[data-slot="titlebar-tabs"] a[href="${href}"]`).first().click()
-        await expect(page.locator('[data-component="composer-editor"]')).toBeVisible()
+        await expect(page.locator('[data-component="prompt-input"]')).toBeVisible()
       },
     })
     report(result)

packages/app/e2e/regression/new-session-panel-corner.spec.ts

@@ -46,7 +46,7 @@ test("matches the rounded panel corners to the dark new-session background", asy
   )
 
   await page.goto(`/new-session?draftId=${draftID}`)
-  await expectAppVisible(page.locator('[data-component="composer-editor"]'))
+  await expectAppVisible(page.locator('[data-component="prompt-input"]'))
   await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark")
   const panel = page.locator('main div[class*="rounded-[10px]"][class*="overflow-hidden"]')
   await expect(panel).toHaveCount(1)

packages/app/e2e/regression/prompt-input-v2-command-draft.spec.ts

@@ -3,9 +3,9 @@ import { base64Encode } from "@opencode-ai/util/encode"
 import { mockOpenCodeServer } from "../utils/mock-server"
 import { expectAppVisible } from "../utils/waits"
 
-const directory = "C:/OpenCode/ComposerEditing"
-const projectID = "proj_composer_editing"
-const sessionID = "ses_composer_editing"
+const directory = "C:/OpenCode/PromptInputV2Editing"
+const projectID = "proj_prompt_input_v2_editing"
+const sessionID = "ses_prompt_input_v2_editing"
 const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 
 test("preserves the draft when a populated command menu triggers a built-in", async ({ page }) => {
@@ -15,7 +15,7 @@ test("preserves the draft when a populated command menu triggers a built-in", as
       id: projectID,
       worktree: directory,
       vcs: "git",
-      name: "composer-editing",
+      name: "prompt-input-v2-editing",
       time: { created: 1700000000000, updated: 1700000000000 },
       sandboxes: [],
     },
@@ -23,10 +23,10 @@ test("preserves the draft when a populated command menu triggers a built-in", as
     sessions: [
       {
         id: sessionID,
-        slug: "composer-editing",
+        slug: "prompt-input-v2-editing",
         projectID,
         directory,
-        title: "Composer editing",
+        title: "Prompt input V2 editing",
         version: "dev",
         time: { created: 1700000000000, updated: 1700000000000 },
       },
@@ -34,11 +34,11 @@ test("preserves the draft when a populated command menu triggers a built-in", as
     pageMessages: () => ({ items: [] }),
   })
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
-  const composer = page.locator('[data-component="composer"]')
-  const input = composer.locator('[data-component="composer-editor"]')
-  await expect
-    .poll(() => input.evaluate((element) => getComputedStyle(element, "::before").content))
-    .toBe(`"${String.fromCodePoint(0x200b)}"`)
+  const composer = page.locator('[data-component="prompt-input-v2"]')
+  const input = composer.locator('[data-component="prompt-input"]')
+  await expect.poll(() => input.evaluate((element) => getComputedStyle(element, "::before").content)).toBe(
+    `"${String.fromCodePoint(0x200b)}"`,
+  )
   await expectAppVisible(composer)
 
   await input.fill("keep me")

packages/app/e2e/regression/prompt-thinking-level.spec.ts

@@ -8,7 +8,7 @@ const projectID = "proj_prompt_thinking_level_regression"
 const sessionID = "ses_prompt_thinking_level_regression"
 const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 
-test("shows the thinking level control while relevant", async ({ page }) => {
+test("shows the V2 thinking level control while relevant", async ({ page }) => {
   await mockOpenCodeServer(page, {
     directory,
     project: {
@@ -51,8 +51,8 @@ test("shows the thinking level control while relevant", async ({ page }) => {
     pageMessages: () => ({ items: [] }),
   })
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
-  const composer = page.locator('[data-component="composer"]')
-  const input = composer.locator('[data-component="composer-editor"]')
+  const composer = page.locator('[data-component="prompt-input-v2"]')
+  const input = composer.locator('[data-component="prompt-input"]')
   const control = composer.getByRole("button", { name: "Choose model variant" })
   await expectAppVisible(composer)
 

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

@@ -22,7 +22,7 @@ test("session settings use the remote server context", async ({ page }) => {
   await expect(page.getByRole("heading", { name: sessionB.title, exact: true })).toBeVisible()
   await page.keyboard.press("Control+,")
 
-  const dialog = page.locator(".settings-dialog")
+  const dialog = page.locator(".settings-v2-dialog")
   const autoAccept = dialog.locator('[data-action="settings-auto-accept-permissions"]')
   const input = autoAccept.getByRole("switch")
   await expect(autoAccept).toBeVisible()
@@ -63,7 +63,7 @@ test("auto-accept responds for an unfocused server session", async ({ page }) =>
   await page.goto(`/server/${base64Encode(serverA)}/session/${sessionA.id}`)
   await expect(page.getByRole("heading", { name: sessionA.title, exact: true })).toBeVisible()
   await page.keyboard.press("Control+,")
-  const autoAccept = page.locator(".settings-dialog").locator('[data-action="settings-auto-accept-permissions"]')
+  const autoAccept = page.locator(".settings-v2-dialog").locator('[data-action="settings-auto-accept-permissions"]')
   await autoAccept.locator('[data-slot="switch-control"]').click()
   await expect(autoAccept.getByRole("switch")).toBeChecked()
   await expect
@@ -224,8 +224,6 @@ async function mockServers(page: Page, permissionRequests: string[], permissionR
     if (currentSessionInfo) return json(route, { data: currentSession(currentSessionInfo) })
     if (sessions.some((session) => url.pathname === `/api/session/${session.id}/message`))
       return json(route, { data: [], cursor: {} })
-    if (sessions.some((session) => url.pathname === `/api/session/${session.id}/inbox`))
-      return json(route, { data: [] })
     if (url.pathname === "/api/location") return json(route, { directory })
     if (url.pathname === "/api/vcs")
       return json(route, { location: { directory }, data: { branch: "main", defaultBranch: "main" } })

packages/app/e2e/regression/session-message-revert.spec.ts

@@ -1,79 +0,0 @@
-import type { SessionMessageInfo } from "@opencode-ai/client/promise"
-import { base64Encode } from "@opencode-ai/util/encode"
-import { expect, test } from "@playwright/test"
-import { mockOpenCodeServer } from "../utils/mock-server"
-import { expectSessionTitle } from "../utils/waits"
-
-const directory = "C:/OpenCode/SessionMessageRevert"
-const projectID = "proj_session_message_revert"
-const sessionID = "ses_session_message_revert"
-const server = `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
-const messages = [
-  { id: "msg_first", type: "user", text: "First prompt", time: { created: 1 } },
-  {
-    id: "msg_first_reply",
-    type: "assistant",
-    agent: "build",
-    model: { id: "test", providerID: "opencode" },
-    content: [{ type: "text", text: "First reply" }],
-    time: { created: 2, completed: 3 },
-  },
-  { id: "msg_second", type: "user", text: "Second prompt", time: { created: 4 } },
-] satisfies SessionMessageInfo[]
-
-test("reverts directly to the selected user message", async ({ page }) => {
-  const staged: { sessionID: string; messageID: string }[] = []
-  await mockOpenCodeServer(page, {
-    directory,
-    project: {
-      id: projectID,
-      worktree: directory,
-      canonical: directory,
-      vcs: "git",
-      name: "session-message-revert",
-      time: { created: 1, updated: 1 },
-      sandboxes: [],
-    },
-    provider: {
-      all: [
-        {
-          id: "opencode",
-          name: "OpenCode",
-          models: { test: { id: "test", name: "Test", variants: {}, limit: { context: 200_000 } } },
-        },
-      ],
-      connected: ["opencode"],
-      default: { providerID: "opencode", modelID: "test" },
-    },
-    sessions: [
-      {
-        id: sessionID,
-        slug: "session-message-revert",
-        projectID,
-        directory,
-        title: "Session message revert",
-        agent: "build",
-        model: { id: "test", providerID: "opencode" },
-        version: "dev",
-        time: { created: 1, updated: 4 },
-      },
-    ],
-    pageMessages: () => ({ items: messages }),
-    onRevertStage: (input) => staged.push(input),
-  })
-  await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
-  await expectSessionTitle(page, "Session message revert")
-
-  const message = page.locator('[data-message-id="msg_second"]')
-  await message.hover()
-  const response = page.waitForResponse(
-    (response) =>
-      response.request().method() === "POST" &&
-      new URL(response.url()).pathname === `/api/session/${sessionID}/revert/stage`,
-  )
-  await message.getByRole("button", { name: "Revert message" }).click()
-  expect((await response).ok()).toBe(true)
-
-  await expect(page.getByRole("textbox", { name: "Prompt" })).toHaveText("Second prompt")
-  expect(staged).toEqual([{ sessionID, messageID: "msg_second" }])
-})

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

@@ -120,7 +120,7 @@ test("restores the draft caret before typing after a request dock closes", async
   await transport.waitForConnection()
   await expectSessionTitle(page, title)
 
-  const editor = page.locator('[data-component="composer-editor"][contenteditable="true"]')
+  const editor = page.locator('[data-component="prompt-input"][contenteditable="true"]')
   const draft = "keep the caret at the end"
   await editor.fill(draft)
   await page.evaluate(() => new Promise<void>((resolve) => requestAnimationFrame(() => resolve())))

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

@@ -103,7 +103,7 @@ test("labels completed searches with result counts", async ({ page }) => {
   await expect(rows.nth(1)).toContainText("(12 matches)")
 })
 
-test("labels read tools from their path input", async ({ page }) => {
+test("labels V2 read tools from their path input", async ({ page }) => {
   const id = "prt_read_path"
   await setupTimeline(page, {
     messages: [userMessage(), assistantMessage([toolPart(id, "read", "completed", { path: "src/a.ts" })])],
@@ -114,7 +114,7 @@ test("labels read tools from their path input", async ({ page }) => {
   await expect(group.locator('[data-slot="basic-tool-tool-subtitle"]')).toHaveText("a.ts")
 })
 
-test("labels skill tools from IDs and result metadata", async ({ page }) => {
+test("labels V2 skill tools from IDs and result metadata", async ({ page }) => {
   const pending = "prt_skill_id"
   const completed = "prt_skill_name"
   await setupTimeline(page, {
@@ -131,10 +131,9 @@ test("labels skill tools from IDs and result metadata", async ({ page }) => {
     "aria-label",
     "sample-skill",
   )
-  await expect(page.locator(`[data-timeline-part-id="${completed}"] [data-component="text-shimmer"]`)).toHaveAttribute(
-    "aria-label",
-    "OpenCode",
-  )
+  await expect(
+    page.locator(`[data-timeline-part-id="${completed}"] [data-component="text-shimmer"]`),
+  ).toHaveAttribute("aria-label", "OpenCode")
   for (const id of [pending, completed]) {
     const skill = page.locator(`[data-timeline-part-id="${id}"]`)
     await expect(skill.locator('[data-slot="skill-tool-label"]')).toHaveText("Skill")
@@ -153,7 +152,8 @@ function errorInput(tool: string) {
   if (tool === "patch") return { patchText: "Update src/error.ts" }
   if (tool === "webfetch") return { url: "https://example.com" }
   if (tool === "websearch") return { query: "failure" }
-  if (tool === "subagent") return { description: "Fail subagent", agent: "explore", prompt: "Inspect the failure." }
+  if (tool === "subagent")
+    return { description: "Fail subagent", agent: "explore", prompt: "Inspect the failure." }
   if (tool === "skill") return { name: "failure" }
   return { target: "failure" }
 }

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

@@ -87,7 +87,7 @@ test("reconnects after a stream error", async ({ page }) => {
   expect((await timeline.transport.connections())[0]?.endedBy).toBe("error")
 })
 
-test("does not request replay when reconnecting the volatile event stream", async ({ page }) => {
+test("does not request replay when reconnecting the volatile V2 event stream", async ({ page }) => {
   const timeline = await setupTimeline(page, { eventRetry: 10 })
   const events = partUpdated(textPart("prt_transport_id", "event with id"))
   const first = (

packages/app/e2e/regression/terminal-composer-focus.spec.ts

@@ -77,7 +77,7 @@ test("routes typing to the composer unless the open terminal is focused", async
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
   await expectSessionTitle(page, "Terminal composer focus")
 
-  const composer = page.locator('[data-component="composer-editor"]')
+  const composer = page.locator('[data-component="prompt-input"]')
   const terminal = page.locator('[data-component="terminal"]')
   await page.keyboard.press("Control+Backquote")
   await expect(terminal).toBeVisible()
@@ -116,7 +116,7 @@ test("keeps composer focus when a cached terminal finishes mounting", async ({ p
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`, { waitUntil: "commit" })
   await expectSessionTitle(page, "Terminal composer focus")
 
-  const composer = page.locator('[data-component="composer-editor"]')
+  const composer = page.locator('[data-component="prompt-input"]')
   const terminal = page.locator('[data-component="terminal"]')
   await expect(terminal).toBeVisible()
   expect(created.count).toBe(0)
@@ -142,7 +142,7 @@ test("keeps newer composer focus while an explicit terminal open finishes", asyn
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
   await expectSessionTitle(page, "Terminal composer focus")
 
-  const composer = page.locator('[data-component="composer-editor"]')
+  const composer = page.locator('[data-component="prompt-input"]')
   const terminal = page.locator('[data-component="terminal"]')
   await page.keyboard.press("Control+Backquote")
   await expect(terminal).toBeVisible()
@@ -187,7 +187,7 @@ test("focuses a terminal created from the new-terminal button", async ({ page })
   await page.goto(`/server/${base64Encode(server)}/session/${sessionID}`)
   await expectSessionTitle(page, "Terminal composer focus")
 
-  const composer = page.locator('[data-component="composer-editor"]')
+  const composer = page.locator('[data-component="prompt-input"]')
   const terminal = page.locator('[data-component="terminal"]')
   await page.keyboard.press("Control+Backquote")
   await expect(terminal.locator("textarea")).toHaveCount(1)

packages/app/e2e/user-story/model-selection-flow.spec.ts

@@ -78,9 +78,9 @@ test("creates a session in a new project and selects its model", async ({ page }
   await selectFolder.click()
 
   await page.locator('[data-action="home-new-session"]').click()
-  await expectAppVisible(page.locator('[data-component="composer"]'))
+  await expectAppVisible(page.locator('[data-component="prompt-input-v2"]'))
 
-  const modelControl = page.locator('[data-action="composer-model"]')
+  const modelControl = page.locator('[data-action="prompt-model"]')
   await modelControl.click()
   await expect(page.locator('[data-option-key="opencode:free-model"]')).toBeVisible()
   const goModel = page.locator('[data-option-key="opencode-go:go-model-1"]')

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

@@ -22,7 +22,6 @@ export interface MockServerConfig {
   onMessages?: (input: { sessionID: string; before?: string; phase: "start" | "end" }) => void
   message?: (sessionID: string, messageID: string) => SessionMessageInfo | undefined
   onMessage?: (input: { sessionID: string; messageID: string }) => void
-  onRevertStage?: (input: { sessionID: string; messageID: string }) => void
   events?: () => OpenCodeEvent[]
   eventRetry?: number
   permissions?: unknown[] | (() => unknown[])
@@ -384,15 +383,6 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
     ) {
       return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
     }
-    const revertStage = path.match(/^\/api\/session\/([^/]+)\/revert\/stage$/)?.[1]
-    if (revertStage && route.request().method() === "POST") {
-      const body = route.request().postDataJSON()
-      if (!body || typeof body !== "object" || !("messageID" in body) || typeof body.messageID !== "string") {
-        return json(route, { error: "Invalid revert request" }, undefined, 400)
-      }
-      config.onRevertStage?.({ sessionID: revertStage, messageID: body.messageID })
-      return json(route, { data: { messageID: body.messageID } })
-    }
     if (/^\/api\/session\/[^/]+$/.test(path) && route.request().method() === "DELETE") {
       return route.fulfill({ status: 204, headers: { "access-control-allow-origin": "*" } })
     }

packages/app/package.json

@@ -6,10 +6,10 @@
   "exports": {
     ".": "./src/index.ts",
     "./desktop": "./src/desktop.ts",
-    "./desktop-menu": "./src/shell/commands/desktop-menu.ts",
-    "./i18n/desktop-native": "./src/runtime/i18n/desktop-native.ts",
-    "./updater": "./src/shell/updates/types.ts",
-    "./wsl/types": "./src/servers/wsl/types.ts",
+    "./desktop-menu": "./src/desktop-menu.ts",
+    "./i18n/desktop-native": "./src/i18n/desktop-native.ts",
+    "./updater": "./src/updater.ts",
+    "./wsl/types": "./src/wsl/types.ts",
     "./vite": "./vite.js",
     "./index.css": "./src/index.css"
   },

packages/app/src/app.tsx

@@ -4,26 +4,72 @@ import { FileComponentProvider } from "@opencode-ai/ui/context/file"
 import { Font } from "@opencode-ai/ui/font"
 import { ThemeProvider } from "@opencode-ai/ui/theme/context"
 import { MetaProvider } from "@solidjs/meta"
-import { type BaseRouterProps, Router } from "@solidjs/router"
+import { type BaseRouterProps, Route, Router, useParams } from "@solidjs/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
-import { type Component, createRenderEffect, ErrorBoundary, type JSX, type ParentProps } from "solid-js"
+import {
+  type Component,
+  createMemo,
+  createRenderEffect,
+  ErrorBoundary,
+  type JSX,
+  lazy,
+  type ParentProps,
+  Show,
+} from "solid-js"
 import { Dynamic } from "solid-js/web"
-import { CommandProvider } from "@/shell/commands/command"
-import { DesktopCommands } from "@/shell/commands/desktop"
-import { GlobalProvider } from "@/runtime/server/runtime"
-import { HighlightsProvider } from "@/shell/updates/highlights"
-import { LanguageProvider, UiI18nBridge, type Locale } from "@/runtime/i18n/language"
-import { ServerConnection, ServersProvider } from "@/runtime/server/registry"
-import { SettingsProvider } from "@/settings/model"
-import { TabsProvider } from "@/shell/tabs/tabs"
-import { WslServersProvider } from "@/servers/wsl/context"
-import { ErrorPage } from "@/shell/errors/error"
-import { AppRoutes, File, preloadRoute } from "@/shell/routes/routes"
+import { CommandProvider, useCommand, type CommandOption } from "@/context/command"
+import { GlobalProvider, useGlobal } from "@/context/global"
+import { HighlightsProvider } from "@/context/highlights"
+import { LanguageProvider, UiI18nBridge, type Locale, useLanguage } from "@/context/language"
+import { LayoutProvider } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { ServerConnection, ServersProvider } from "@/context/servers"
+import { SettingsProvider } from "@/context/settings"
+import { TabsProvider } from "@/context/tabs"
+import { WslServersProvider } from "@/wsl/context"
+import Layout from "@/pages/layout"
+import { ErrorPage } from "./pages/error"
+import { requireServerKey } from "./utils/session-route"
 
-export { preloadRoute }
+import { Home } from "@/pages/home"
+import { ServerProvider } from "./context/server"
+
+const File = lazy(() => import("@opencode-ai/session-ui/file").then((module) => ({ default: module.File })))
+const loadDraftRoute = () => Promise.all([import("@/pages/draft-route"), File.preload()]).then(([module]) => module)
+const loadSessionRoute = () => Promise.all([import("@/session/route"), File.preload()]).then(([module]) => module)
+const DraftRoute = lazy(() => loadDraftRoute().then((module) => ({ default: module.DraftRoute })))
+const TargetSessionRouteContent = lazy(() =>
+  loadSessionRoute().then((module) => ({ default: module.TargetSessionRouteContent })),
+)
+
+export function preloadRoute(url: string) {
+  const pathname = url.split(/[?#]/, 1)[0]
+  if (pathname === "/new-session") return DraftRoute.preload().then(() => undefined)
+  if (/^\/server\/[^/]+\/session\/[^/]+$/.test(pathname))
+    return TargetSessionRouteContent.preload().then(() => undefined)
+  return Promise.resolve()
+}
+
+function TargetServerRoute(props: ParentProps) {
+  const params = useParams<{ serverKey: string }>()
+  const global = useGlobal()
+  const conn = createMemo(() =>
+    global.servers.list().find((item) => ServerConnection.key(item) === requireServerKey(params.serverKey)),
+  )
+
+  return (
+    // Owns the server-identity remount. Session changes must not remount this subtree.
+    <Show when={conn()} keyed>
+      {(conn) => <ServerProvider conn={conn}>{props.children}</ServerProvider>}
+    </Show>
+  )
+}
 
 declare global {
   interface Window {
+    __OPENCODE__?: {
+      deepLinks?: string[]
+    }
     api?: {
       setTitlebar?: (theme: { mode: "light" | "dark"; scheme?: "system" | "light" | "dark" }) => Promise<void>
       exportDebugLogs?: () => Promise<string>
@@ -54,6 +100,39 @@ function BodyTypography() {
   return null
 }
 
+// Server-agnostic providers shared across every route. These live in the shared
+// shell (router root) so they stay mounted regardless of the active server/route.
+function DesktopCommands() {
+  const command = useCommand()
+  const language = useLanguage()
+  const platform = usePlatform()
+
+  command.register("desktop", () => {
+    const commands: CommandOption[] = []
+    if (platform.platform === "desktop" && platform.exportDebugLogs) {
+      commands.push({
+        id: "logs.export",
+        title: language.t("command.logs.export"),
+        category: language.t("command.category.settings"),
+        onSelect: () => {
+          void platform.exportDebugLogs?.()
+        },
+      })
+    }
+    return commands
+  })
+
+  return null
+}
+
+function AppLayout(props: ParentProps) {
+  return (
+    <LayoutProvider>
+      <Layout>{props.children}</Layout>
+    </LayoutProvider>
+  )
+}
+
 export function AppBaseProviders(
   props: ParentProps<{
     locale?: Locale
@@ -125,7 +204,18 @@ export function AppInterface(props: {
       <SettingsProvider>
         <GlobalProvider>
           <Dynamic component={props.router ?? Router} root={Root}>
-            <AppRoutes />
+            <Route component={AppLayout}>
+              <Route path="/" component={Home} />
+              <Route
+                path="/server/:serverKey/session/:id"
+                component={() => (
+                  <TargetServerRoute>
+                    <TargetSessionRouteContent />
+                  </TargetServerRoute>
+                )}
+              />
+              <Route path="/new-session" component={DraftRoute} />
+            </Route>
           </Dynamic>
         </GlobalProvider>
       </SettingsProvider>

packages/app/src/components/command-palette.ts

@@ -1,20 +1,20 @@
 import { getFilename } from "@opencode-ai/util/path"
-import type { Project } from "@/runtime/server/types"
+import type { Project } from "@/types"
 import type { SessionInfo } from "@opencode-ai/client/promise"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createMemo, onCleanup } from "solid-js"
-import { commandPaletteOptions, useCommand, type CommandOption } from "@/shell/commands/command"
-import { useFile } from "@/workspaces/files/model"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useLayout, type LocalProject } from "@/shell/state/layout"
-import { ServerConnection } from "@/runtime/server/registry"
-import { useServerSDK } from "@/runtime/server/client"
-import { useTabs } from "@/shell/tabs/tabs"
-import { displayName, projectForSession } from "@/shell/layout/helpers"
+import { commandPaletteOptions, useCommand, type CommandOption } from "@/context/command"
+import { useFile } from "@/context/file"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { useLayout, type LocalProject } from "@/context/layout"
+import { ServerConnection } from "@/context/servers"
+import { useServerSDK } from "@/context/server-sdk"
+import { useTabs } from "@/context/tabs"
+import { displayName, projectForSession } from "@/pages/layout/helpers"
 import { createSessionTabs } from "@/session/helpers"
 import { useSessionLayout } from "@/session/session-layout"
-import { useServer } from "@/runtime/server/current"
+import { useServer } from "@/context/server"
 
 export type CommandPaletteEntry = {
   id: string

packages/app/src/components/command-tooltip-keybind.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { newTabTooltipKeybind, reviewTooltipKeybind } from "./tooltip-keybind"
+import { newTabTooltipKeybind, reviewTooltipKeybind } from "./command-tooltip-keybind"
 
 describe("command tooltip keybinds", () => {
   test("keeps localized review shortcut modifiers", () => {

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

@@ -3,8 +3,8 @@ import { batch, createEffect, onCleanup, onMount, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { useLanguage } from "@/runtime/i18n/language"
-import { usePlatform } from "@/runtime/platform/platform"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
 
 type Mem = Performance & {
   memory?: {

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

@@ -1,14 +1,14 @@
-.command-palette {
+.command-palette-v2 {
   overflow: hidden;
 }
 
 /* Anchor to the top edge of where a centered 480px-tall dialog would sit, so the
    top stays put while the content-driven height grows and shrinks. */
-[data-component="dialog-v2"]:has(.command-palette) {
+[data-component="dialog-v2"]:has(.command-palette-v2) {
   align-items: flex-start;
 }
 
-[data-component="dialog-v2"]:has(.command-palette) [data-slot="dialog-container"] {
+[data-component="dialog-v2"]:has(.command-palette-v2) [data-slot="dialog-container"] {
   width: min(calc(100vw - 24px), 640px);
   height: auto;
   min-height: 280px;
@@ -19,7 +19,7 @@
   box-shadow: var(--v2-elevation-floating);
 }
 
-.command-palette-body {
+.command-palette-v2-body {
   display: flex;
   min-height: 0;
   flex: 1;
@@ -28,12 +28,12 @@
   padding: 0;
 }
 
-.command-palette-search {
+.command-palette-v2-search {
   flex-shrink: 0;
   padding: 6px;
 }
 
-.command-palette-search [data-component="text-input-v2"] {
+.command-palette-v2-search [data-component="text-input-v2"] {
   width: 100%;
   height: 36px;
   border-radius: 6px;
@@ -45,46 +45,46 @@
     box-shadow 120ms ease-in-out;
 }
 
-.command-palette-search [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]),
-.command-palette-search [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
+.command-palette-v2-search [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]),
+.command-palette-v2-search [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
   background: var(--v2-background-bg-layer-02);
   box-shadow: none;
 }
 
-.command-palette-search [data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
+.command-palette-v2-search [data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
   border-radius: 6px;
   background: transparent;
   gap: 8px;
 }
 
-.command-palette-search [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
+.command-palette-v2-search [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
   padding-left: 12px;
 }
 
-.command-palette-search [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
+.command-palette-v2-search [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
   border-radius: 6px;
   background: transparent;
 }
 
-.command-palette-scroll {
+.command-palette-v2-scroll {
   min-height: 0;
   flex: 1;
 }
 
-.command-palette-results {
+.command-palette-v2-results {
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 6px 6px 8px;
 }
 
-.command-palette-group {
+.command-palette-v2-group {
   display: flex;
   flex-direction: column;
   gap: 1px;
 }
 
-.command-palette-group-title {
+.command-palette-v2-group-title {
   margin: 6px 0;
   padding: 0 12px;
   color: var(--v2-text-text-muted);
@@ -95,7 +95,7 @@
   user-select: none;
 }
 
-.command-palette-row {
+.command-palette-v2-row {
   display: flex;
   width: 100%;
   height: 36px;
@@ -113,16 +113,16 @@
   scroll-margin: 6px 0;
 }
 
-.command-palette-row[data-active] {
+.command-palette-v2-row[data-active] {
   background: var(--v2-overlay-simple-overlay-hover);
 }
 
-.command-palette-row:focus-visible {
+.command-palette-v2-row:focus-visible {
   background: var(--v2-overlay-simple-overlay-hover);
   outline: none;
 }
 
-.command-palette-row-main {
+.command-palette-v2-row-main {
   display: flex;
   min-width: 0;
   flex: 1;
@@ -130,19 +130,19 @@
   gap: 8px;
 }
 
-.command-palette-row-icon {
+.command-palette-v2-row-icon {
   flex-shrink: 0;
   color: var(--v2-icon-icon-muted);
 }
 
-.command-palette-row-text {
+.command-palette-v2-row-text {
   display: flex;
   min-width: 0;
   align-items: center;
   gap: 6px;
 }
 
-.command-palette-title {
+.command-palette-v2-title {
   min-width: 0;
   overflow: hidden;
   color: var(--v2-text-text-base);
@@ -154,8 +154,8 @@
   white-space: nowrap;
 }
 
-.command-palette-description,
-.command-palette-meta {
+.command-palette-v2-description,
+.command-palette-v2-meta {
   min-width: 0;
   overflow: hidden;
   color: var(--v2-text-text-muted);
@@ -167,11 +167,11 @@
   white-space: nowrap;
 }
 
-.command-palette-meta {
+.command-palette-v2-meta {
   flex-shrink: 0;
 }
 
-.command-palette-file-path {
+.command-palette-v2-file-path {
   display: flex;
   min-width: 0;
   align-items: baseline;
@@ -180,7 +180,7 @@
   letter-spacing: -0.04px;
 }
 
-.command-palette-file-dir {
+.command-palette-v2-file-dir {
   min-width: 0;
   overflow: hidden;
   color: var(--v2-text-text-muted);
@@ -189,14 +189,14 @@
   white-space: nowrap;
 }
 
-.command-palette-file-name {
+.command-palette-v2-file-name {
   flex-shrink: 0;
   color: var(--v2-text-text-base);
   font-weight: 530;
   white-space: nowrap;
 }
 
-.command-palette-state {
+.command-palette-v2-state {
   display: grid;
   min-height: 120px;
   place-items: center;
@@ -208,13 +208,13 @@
 }
 
 @media (max-width: 640px) {
-  .command-palette-row-text {
+  .command-palette-v2-row-text {
     flex-direction: column;
     align-items: flex-start;
     gap: 1px;
   }
 
-  .command-palette-description {
+  .command-palette-v2-description {
     max-width: 100%;
   }
 }

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

@@ -6,12 +6,14 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { createEffect, createMemo, createResource, createSignal, For, Match, Show, Switch } from "solid-js"
-import { formatKeybindParts } from "@/shell/commands/command"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useTabs } from "@/shell/tabs/tabs"
-import { SessionTabAvatar } from "@/shell/layout/session-tab-avatar"
-import { getRelativeTime } from "@/shell/time"
+import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
+import { commandPaletteOptions, formatKeybindParts, useCommand } from "@/context/command"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
+import { useTabs } from "@/context/tabs"
+import { SessionTabAvatar } from "@/pages/layout/session-tab-avatar"
+import { getRelativeTime } from "@/utils/time"
 import {
   createCommandPaletteCommandEntry,
   createCommandPaletteFileEntry,
@@ -19,8 +21,8 @@ import {
   createServerSessionEntries,
   uniqueCommandPaletteEntries,
   type CommandPaletteEntry,
-} from "./palette"
-import "./dialog.css"
+} from "./command-palette"
+import "./dialog-command-palette-v2.css"
 
 function groups(entries: CommandPaletteEntry[]) {
   const map = new Map<string, CommandPaletteEntry[]>()
@@ -28,12 +30,12 @@ function groups(entries: CommandPaletteEntry[]) {
   return Array.from(map.entries()).map(([category, entries]) => ({ category, entries }))
 }
 
-export function matchesCommandPaletteEntry(entry: CommandPaletteEntry, query: string) {
+function matchesEntry(entry: CommandPaletteEntry, query: string) {
   const value = query.toLowerCase()
   return [entry.title, entry.description, entry.category].some((text) => text?.toLowerCase().includes(value))
 }
 
-export function DialogCommandPalette(props: { onOpenFile?: (path: string) => void }) {
+export function DialogCommandPaletteV2(props: { onOpenFile?: (path: string) => void }) {
   const palette = createCommandPaletteModel(props)
   const loadItems = async (text: string) => {
     const q = text.trim()
@@ -42,7 +44,7 @@ export function DialogCommandPalette(props: { onOpenFile?: (path: string) => voi
     const [files, nextSessions] = await Promise.all([palette.file.searchFiles(q), Promise.resolve(palette.sessions(q))])
     const category = palette.language.t("palette.group.files")
     return [
-      ...palette.commandEntries().filter((entry) => matchesCommandPaletteEntry(entry, q)),
+      ...palette.commandEntries().filter((entry) => matchesEntry(entry, q)),
       ...nextSessions,
       ...files.map((path) => createCommandPaletteFileEntry(path, category)),
     ]
@@ -59,7 +61,69 @@ export function DialogCommandPalette(props: { onOpenFile?: (path: string) => voi
   )
 }
 
-export function CommandPaletteView(props: {
+export function DialogHomeCommandPaletteV2(props: {
+  server: ServerConnection.Any
+  onSelectSession: (entry: CommandPaletteEntry) => void
+}) {
+  const command = useCommand()
+  const dialog = useDialog()
+  const global = useGlobal()
+  const language = useLanguage()
+  const serverCtx = global.ensureServerCtx(props.server)
+  const state = { cleanup: undefined as (() => void) | void, committed: false }
+  const commandEntries = createMemo(() => {
+    const category = language.t("palette.group.commands")
+    return commandPaletteOptions(command.options).map((option) => createCommandPaletteCommandEntry(option, category))
+  })
+  const sessions = createServerSessionEntries({
+    server: ServerConnection.key(props.server),
+    opened: serverCtx.projects.list,
+    stored: () => serverCtx.sync.data.project,
+    load: (search, signal) => serverCtx.sdk.api.session.list({ parentID: null, search, limit: 50 }, { signal }),
+    untitled: () => language.t("command.session.new"),
+    category: () => language.t("command.category.session"),
+  })
+
+  const highlight = (item: CommandPaletteEntry | undefined) => {
+    state.cleanup?.()
+    state.cleanup = undefined
+    if (item?.type !== "command") return
+    state.cleanup = item.option?.onHighlight?.()
+  }
+  const select = (item: CommandPaletteEntry | undefined) => {
+    if (!item) return
+    state.committed = true
+    state.cleanup = undefined
+    dialog.close()
+    if (item.type === "command") {
+      item.option?.onSelect?.("palette")
+      return
+    }
+    if (item.type === "session") props.onSelectSession(item)
+  }
+  const loadItems = async (text: string) => {
+    const query = text.trim()
+    if (!query) return commandEntries().slice(0, 5)
+    return [...commandEntries().filter((entry) => matchesEntry(entry, query)), ...(await sessions(query))]
+  }
+
+  onCleanup(() => {
+    if (state.committed) return
+    state.cleanup?.()
+  })
+
+  return (
+    <CommandPaletteView
+      placeholder={language.t("palette.search.placeholder.home")}
+      loadItems={loadItems}
+      highlight={highlight}
+      select={select}
+      close={() => dialog.close()}
+    />
+  )
+}
+
+function CommandPaletteView(props: {
   placeholder: string
   loadItems: (text: string) => CommandPaletteEntry[] | Promise<CommandPaletteEntry[]>
   highlight: (item: CommandPaletteEntry | undefined) => void
@@ -124,9 +188,9 @@ export function CommandPaletteView(props: {
   }
 
   return (
-    <Dialog class="command-palette" size="large">
-      <DialogBody class="command-palette-body">
-        <div class="command-palette-search">
+    <Dialog class="command-palette-v2" size="large">
+      <DialogBody class="command-palette-v2-body">
+        <div class="command-palette-v2-search">
           <TextInput
             value={query()}
             autofocus
@@ -139,21 +203,21 @@ export function CommandPaletteView(props: {
             onKeyDown={handleKeyDown}
           />
         </div>
-        <ScrollView class="command-palette-scroll" viewportRef={(el) => (resultsRef = el)}>
-          <div class="command-palette-results" role="listbox">
+        <ScrollView class="command-palette-v2-scroll" viewportRef={(el) => (resultsRef = el)}>
+          <div class="command-palette-v2-results" role="listbox">
             <Show
               when={visibleEntries().length > 0}
               fallback={
-                <div class="command-palette-state">
+                <div class="command-palette-v2-state">
                   {entries.loading ? language.t("common.loading") : language.t("palette.empty")}
                 </div>
               }
             >
               <For each={groupedEntries()}>
                 {(group) => (
-                  <div class="command-palette-group">
+                  <div class="command-palette-v2-group">
                     <Show when={group.category}>
-                      <div class="command-palette-group-title">{group.category}</div>
+                      <div class="command-palette-v2-group-title">{group.category}</div>
                     </Show>
                     <For each={group.entries}>
                       {(item) => (
@@ -198,7 +262,7 @@ function PaletteRow(props: {
   return (
     <button
       type="button"
-      class="command-palette-row group"
+      class="command-palette-v2-row group"
       role="option"
       aria-selected={props.active}
       data-active={props.active ? "" : undefined}
@@ -212,21 +276,21 @@ function PaletteRow(props: {
     >
       <Switch
         fallback={
-          <div class="command-palette-row-main">
-            <FileIcon node={{ path: props.item.path ?? "", type: "file" }} class="command-palette-row-icon size-4" />
-            <div class="command-palette-file-path">
-              <span class="command-palette-file-dir">{getDirectory(props.item.path ?? "")}</span>
-              <span class="command-palette-file-name">{getFilename(props.item.path ?? "")}</span>
+          <div class="command-palette-v2-row-main">
+            <FileIcon node={{ path: props.item.path ?? "", type: "file" }} class="command-palette-v2-row-icon size-4" />
+            <div class="command-palette-v2-file-path">
+              <span class="command-palette-v2-file-dir">{getDirectory(props.item.path ?? "")}</span>
+              <span class="command-palette-v2-file-name">{getFilename(props.item.path ?? "")}</span>
             </div>
           </div>
         }
       >
         <Match when={props.item.type === "command"}>
-          <div class="command-palette-row-main">
-            <div class="command-palette-row-text">
-              <span class="command-palette-title">{props.item.title}</span>
+          <div class="command-palette-v2-row-main">
+            <div class="command-palette-v2-row-text">
+              <span class="command-palette-v2-title">{props.item.title}</span>
               <Show when={props.item.description}>
-                <span class="command-palette-description">{props.item.description}</span>
+                <span class="command-palette-v2-description">{props.item.description}</span>
               </Show>
             </div>
           </div>
@@ -235,7 +299,7 @@ function PaletteRow(props: {
           </Show>
         </Match>
         <Match when={props.item.type === "session"}>
-          <div class="command-palette-row-main">
+          <div class="command-palette-v2-row-main">
             <div class="relative shrink-0">
               <Show when={props.sessionOpen}>
                 <span
@@ -255,19 +319,19 @@ function PaletteRow(props: {
                 )}
               </Show>
             </div>
-            <div class="command-palette-row-text">
-              <span class="command-palette-title" classList={{ "opacity-70": !!props.item.archived }}>
+            <div class="command-palette-v2-row-text">
+              <span class="command-palette-v2-title" classList={{ "opacity-70": !!props.item.archived }}>
                 {props.item.title}
               </span>
               <Show when={props.item.description}>
-                <span class="command-palette-description" classList={{ "opacity-70": !!props.item.archived }}>
+                <span class="command-palette-v2-description" classList={{ "opacity-70": !!props.item.archived }}>
                   {props.item.description}
                 </span>
               </Show>
             </div>
           </div>
           <Show when={props.item.updated}>
-            <span class="command-palette-meta">
+            <span class="command-palette-v2-meta">
               {getRelativeTime(new Date(props.item.updated!).toISOString(), props.language.t)}
             </span>
           </Show>

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

@@ -2,9 +2,9 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
-import { mockProviderAuth } from "@/runtime/server/sync"
+import { mockProviderAuth } from "@/context/server-sync"
 import { onCleanup, onMount } from "solid-js"
-import { DialogConnectProvider, useProviderConnectController } from "./dialog"
+import { DialogConnectProvider, useProviderConnectController } from "./dialog-connect-provider"
 
 function ConnectProviderDialogStory() {
   const dialog = useDialog()
@@ -48,7 +48,7 @@ export default {
   id: "app-dialog-connect-provider",
 }
 
-export const Picker = {
+export const V2 = {
   render: () => (
     <QueryClientProvider client={new QueryClient()}>
       <ConnectProviderDialogStory />
@@ -57,17 +57,17 @@ export const Picker = {
 }
 
 export const ApiKey = {
-  render: renderConnection("openrouter", [{ type: "key", label: "API key" }]),
+  render: renderConnection("openrouter", [{ type: "api", label: "API key" }]),
 }
 
 export const OpenCodeZen = {
-  render: renderConnection("opencode", [{ type: "key", label: "API key" }]),
+  render: renderConnection("opencode", [{ type: "api", label: "API key" }]),
 }
 
 export const LoginMethods = {
   render: renderConnection("openai", [
     { type: "oauth", label: "ChatGPT Pro/Plus (browser)" },
     { type: "oauth", label: "ChatGPT Pro/Plus (headless)" },
-    { type: "key", label: "API key" },
+    { type: "api", label: "API key" },
   ]),
 }

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

@@ -7,17 +7,17 @@ import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { DialogBody, DialogHeader, DialogTitle, Dialog } from "@opencode-ai/ui/dialog"
 import { TextInput } from "@opencode-ai/ui/text-input"
-import { showToast } from "@/shell/notifications/toast"
+import { showToast } from "@/utils/toast"
 import { type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useParams } from "@solidjs/router"
-import { ExternalLink } from "@/runtime/platform/external-link"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useProviders } from "@/providers/catalog/providers"
-import { useIntegrations } from "@/providers/catalog/integrations"
-import { CustomProviderForm } from "@/providers/credentials/dialog"
-import { decode64 } from "@/runtime/persistence/base64"
-import { createProviderConnectionController, type ProviderConnectMethod } from "./controller"
+import { ExternalLink } from "@/components/external-link"
+import { useLanguage } from "@/context/language"
+import { useProviders } from "@/hooks/use-providers"
+import { useIntegrations } from "@/hooks/use-integrations"
+import { CustomProviderForm } from "./dialog-custom-provider"
+import { decode64 } from "@/utils/base64"
+import { createProviderConnectionController, type ProviderConnectMethod } from "./provider-connection-controller"
 
 const CUSTOM_ID = "_custom"
 type IntegrationForm = NonNullable<ProviderConnectMethod["form"]>[number]

packages/app/src/components/dialog-custom-provider.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { validateCustomProvider } from "./form"
+import { validateCustomProvider } from "./dialog-custom-provider-form"
 
 const t = (key: string) => key
 

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

@@ -1,17 +1,45 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { useMutation } from "@tanstack/solid-query"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@/shell/notifications/toast"
+import { showToast } from "@/utils/toast"
 import { batch, For } from "solid-js"
 import { createStore, produce } from "solid-js/store"
-import { ExternalLink } from "@/runtime/platform/external-link"
-import { useData } from "@/runtime/server/current"
-import { useLanguage } from "@/runtime/i18n/language"
-import { type FormState, headerRow, modelRow, validateCustomProvider } from "./form"
+import { ExternalLink } from "@/components/external-link"
+import { useData } from "@/context/server"
+import { useLanguage } from "@/context/language"
+import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
+
+type Props = {
+  onBack: () => void
+}
+
+export function DialogCustomProvider(props: Props) {
+  const language = useLanguage()
+
+  return (
+    <Dialog class="h-full">
+      <DialogHeader>
+        <DialogTitle>
+          <IconButton
+            tabIndex={-1}
+            icon={<Icon name="arrow-left" />}
+            variant="ghost"
+            onClick={props.onBack}
+            aria-label={language.t("common.goBack")}
+          />
+        </DialogTitle>
+      </DialogHeader>
+      <DialogBody>
+        <CustomProviderForm />
+      </DialogBody>
+    </Dialog>
+  )
+}
 
 export function CustomProviderForm(props: { autofocus?: boolean } = {}) {
   const dialog = useDialog()

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

@@ -1,8 +1,8 @@
-.project-settings-dialog [data-slot="dialog-container"] {
+.project-settings-v2-dialog [data-slot="dialog-container"] {
   background: var(--v2-background-bg-base);
 }
 
-.project-settings-dialog [data-slot="dialog-body"] {
+.project-settings-v2-dialog [data-slot="dialog-body"] {
   padding: 0;
   overflow: hidden;
 }
@@ -11,14 +11,14 @@
   height: 100%;
 }
 
-.project-settings-nav {
+.project-settings-v2-nav {
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 100%;
 }
 
-.project-settings-panel {
+.project-settings-v2-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -27,18 +27,18 @@
   user-select: none;
 }
 
-.project-settings-panel :is(input, textarea, [contenteditable="true"]) {
+.project-settings-v2-panel :is(input, textarea, [contenteditable="true"]) {
   user-select: text;
 }
 
-.project-settings-form {
+.project-settings-v2-form {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
 }
 
-.project-settings-scroll {
+.project-settings-v2-scroll {
   display: flex;
   flex: 1;
   flex-direction: column;

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

@@ -7,18 +7,18 @@ import { Tabs } from "@opencode-ai/ui/tabs"
 import { Textarea } from "@opencode-ai/ui/textarea"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { For, Show, createSignal, startTransition } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { getProjectAvatarVariant, type LocalProject } from "@/shell/state/layout"
-import { ServerConnection } from "@/runtime/server/registry"
-import { LocationProvider } from "@/workspaces/location"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
-import { createEditProjectModel } from "./project-model"
-import { ProjectSettingsExtensions } from "./project-extensions"
-import { SettingsServerDataScope } from "@/settings/server-scope"
-import "@/settings/settings.css"
-import "./project-dialog.css"
+import { useLanguage } from "@/context/language"
+import { getProjectAvatarVariant, type LocalProject } from "@/context/layout"
+import { ServerConnection } from "@/context/servers"
+import { LocationProvider } from "@/context/location"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { createEditProjectModel } from "./edit-project"
+import { ProjectSettingsExtensions } from "./project-settings-extensions"
+import { SettingsServerDataScope } from "./settings-server-picker"
+import "./settings-v2/settings-v2.css"
+import "./dialog-edit-project-v2.css"
 
-export function DialogEditProject(props: { project: LocalProject; server: ServerConnection.Any }) {
+export function DialogEditProjectV2(props: { project: LocalProject; server: ServerConnection.Any }) {
   return (
     <SettingsServerDataScope server={props.server}>
       <LocationProvider directory={props.project.worktree}>
@@ -46,7 +46,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
   )
 
   return (
-    <Dialog size="x-large" variant="settings" class="project-settings-dialog">
+    <Dialog size="x-large" variant="settings" class="project-settings-v2-dialog">
       <Tabs
         orientation="vertical"
         variant="settings"
@@ -55,7 +55,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
         class="project-settings-v2"
       >
         <Tabs.List>
-          <div class="project-settings-nav">
+          <div class="project-settings-v2-nav">
             <Tabs.Trigger value="general">
               <ProjectAvatar
                 fallback={projectName()}
@@ -75,9 +75,9 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
           </div>
         </Tabs.List>
 
-        <Tabs.Content value="general" class="project-settings-panel">
-          <form onSubmit={model.submit} class="project-settings-form">
-            <div class="project-settings-scroll">
+        <Tabs.Content value="general" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
                 <h2>{language.t("dialog.project.edit.title")}</h2>
                 <span>{language.t("project.settings.general.description")}</span>
@@ -189,9 +189,9 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
           </form>
         </Tabs.Content>
 
-        <Tabs.Content value="scripts" class="project-settings-panel">
-          <form onSubmit={model.submit} class="project-settings-form">
-            <div class="project-settings-scroll">
+        <Tabs.Content value="scripts" class="project-settings-v2-panel">
+          <form onSubmit={model.submit} class="project-settings-v2-form">
+            <div class="project-settings-v2-scroll">
               <div class="project-settings-page-header">
                 <h2>{language.t("project.settings.scripts")}</h2>
                 <span>{language.t("project.settings.scripts.description")}</span>
@@ -213,7 +213,7 @@ function ProjectSettingsDialog(props: { project: LocalProject; server: ServerCon
           </form>
         </Tabs.Content>
 
-        <Tabs.Content value="extensions" class="project-settings-panel">
+        <Tabs.Content value="extensions" class="project-settings-v2-panel">
           <ProjectSettingsExtensions />
         </Tabs.Content>
       </Tabs>

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

@@ -1,18 +1,18 @@
 import { Component, createMemo } from "solid-js"
 import { useNavigate, useParams } from "@solidjs/router"
-import { useData } from "@/runtime/server/current"
-import { useComposerState } from "@/composer/persistence"
+import { useData } from "@/context/server"
+import { usePrompt } from "@/context/prompt"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { showToast } from "@/shell/notifications/toast"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useServerSDK } from "@/runtime/server/client"
+import { showToast } from "@/utils/toast"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
 import { base64Encode } from "@opencode-ai/util/encode"
-import { extractPromptComments, extractPromptFromMessage } from "@/composer/prompt"
-import { useWorkspaceLocation } from "@/workspaces/location"
-import { useServer } from "@/runtime/server/current"
-import { sessionHref } from "@/shell/routes/session"
+import { extractPromptComments, extractPromptFromMessage } from "@/utils/prompt"
+import { useWorkspaceLocation } from "@/context/location"
+import { useServer } from "@/context/server"
+import { sessionHref } from "@/utils/session-route"
 
 interface ForkableMessage {
   id: string
@@ -30,7 +30,7 @@ export const DialogFork: Component = () => {
   const data = useData()
   const serverSDK = useServerSDK()
   const location = useWorkspaceLocation()
-  const prompt = useComposerState()
+  const prompt = usePrompt()
   const dialog = useDialog()
   const language = useLanguage()
   const server = useServer()

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

@@ -2,20 +2,22 @@ import { Button } from "@opencode-ai/ui/button"
 import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { List } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Switch } from "@opencode-ai/ui/switch"
 import { TextInput } from "@opencode-ai/ui/text-input"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useFilteredList } from "@opencode-ai/ui/hooks"
 import { For, Show, type Component } from "solid-js"
-import { useLocal } from "@/providers/models/selection"
-import { popularProviders } from "@/providers/catalog/providers"
-import { useLanguage } from "@/runtime/i18n/language"
+import { useLocal } from "@/context/local"
+import { popularProviders } from "@/hooks/use-providers"
+import { useLanguage } from "@/context/language"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { DialogConnectProvider } from "@/providers/connect/dialog"
-import { decode64 } from "@/runtime/persistence/base64"
-import { SettingsList } from "@/settings/list"
-import { SettingsRow } from "@/settings/row"
-import "@/settings/settings.css"
+import { DialogConnectProvider } from "./dialog-connect-provider"
+import { decode64 } from "@/utils/base64"
+import { SettingsListV2 } from "./settings-v2/parts/list"
+import { SettingsRowV2 } from "./settings-v2/parts/row"
+import "./settings-v2/settings-v2.css"
 
 type ModelItem = ReturnType<ReturnType<typeof useLocal>["model"]["list"]>[number]
 
@@ -25,6 +27,104 @@ export const DialogManageModels: Component = () => {
   const dialog = useDialog()
   const directory = () => decode64(local.slug())
 
+  const handleConnectProvider = () => {
+    void dialog.show(() => <DialogConnectProvider directory={directory()} />)
+  }
+  const providerRank = (id: string) => popularProviders.indexOf(id)
+  const providerList = (providerID: string) => local.model.list().filter((x) => x.provider.id === providerID)
+  const providerVisible = (providerID: string) =>
+    providerList(providerID).every((x) => local.model.visible({ modelID: x.id, providerID: x.provider.id }))
+  const setProviderVisibility = (providerID: string, checked: boolean) => {
+    providerList(providerID).forEach((x) => {
+      local.model.setVisibility({ modelID: x.id, providerID: x.provider.id }, checked)
+    })
+  }
+
+  return (
+    <Dialog>
+      <DialogHeader hideClose>
+        <DialogTitleGroup
+          title={language.t("dialog.model.manage")}
+          description={language.t("dialog.model.manage.description")}
+        />
+        <Button class="h-7 -my-1 text-14-medium" icon="plus-small" tabIndex={-1} onClick={handleConnectProvider}>
+          {language.t("command.provider.connect")}
+        </Button>
+      </DialogHeader>
+      <DialogBody>
+        <List
+          class="px-3"
+          search={{ placeholder: language.t("dialog.model.search.placeholder"), autofocus: true }}
+          emptyMessage={language.t("dialog.model.empty")}
+          key={(x) => `${x?.provider?.id}:${x?.id}`}
+          items={local.model.list()}
+          filterKeys={["provider.name", "name", "id"]}
+          sortBy={(a, b) => a.name.localeCompare(b.name)}
+          groupBy={(x) => x.provider.id}
+          groupHeader={(group) => {
+            const provider = group.items[0].provider
+            return (
+              <>
+                <span>{provider.name}</span>
+                <Tooltip
+                  appearance="standard"
+                  placement="top"
+                  value={language.t("dialog.model.manage.provider.toggle", { provider: provider.name })}
+                >
+                  <Switch
+                    appearance="standard"
+                    class="-mr-1"
+                    checked={providerVisible(provider.id)}
+                    onChange={(checked) => setProviderVisibility(provider.id, checked)}
+                    hideLabel
+                  >
+                    {provider.name}
+                  </Switch>
+                </Tooltip>
+              </>
+            )
+          }}
+          sortGroupsBy={(a, b) => {
+            const aRank = providerRank(a.items[0].provider.id)
+            const bRank = providerRank(b.items[0].provider.id)
+            const aPopular = aRank >= 0
+            const bPopular = bRank >= 0
+            if (aPopular && !bPopular) return -1
+            if (!aPopular && bPopular) return 1
+            return aRank - bRank
+          }}
+          onSelect={(x) => {
+            if (!x) return
+            const key = { modelID: x.id, providerID: x.provider.id }
+            local.model.setVisibility(key, !local.model.visible(key))
+          }}
+        >
+          {(i) => (
+            <div class="w-full flex items-center justify-between gap-x-3">
+              <span>{i.name}</span>
+              <div onClick={(e) => e.stopPropagation()}>
+                <Switch
+                  appearance="standard"
+                  checked={!!local.model.visible({ modelID: i.id, providerID: i.provider.id })}
+                  onChange={(checked) => {
+                    local.model.setVisibility({ modelID: i.id, providerID: i.provider.id }, checked)
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </List>
+      </DialogBody>
+    </Dialog>
+  )
+}
+
+export const DialogManageModelsV2: Component = () => {
+  const local = useLocal()
+  const language = useLanguage()
+  const dialog = useDialog()
+  const directory = () => decode64(local.slug())
+
   const handleConnectProvider = () => {
     void dialog.show(() => <DialogConnectProvider directory={directory()} />)
   }
@@ -57,7 +157,7 @@ export const DialogManageModels: Component = () => {
   })
 
   return (
-    <Dialog size="large" variant="settings" class="settings-manage-models-dialog">
+    <Dialog size="large" variant="settings" class="settings-v2-manage-models-dialog">
       <DialogHeader hideClose={true} closeLabel={language.t("common.close")}>
         <DialogTitleGroup
           title={language.t("dialog.model.manage")}
@@ -89,7 +189,7 @@ export const DialogManageModels: Component = () => {
                 type="button"
                 variant="ghost-muted"
                 size="small"
-                class="settings-tab-search-clear"
+                class="settings-v2-tab-search-clear"
                 icon={<Icon name="close" size="large" class="text-v2-icon-icon-muted" />}
                 onClick={() => list.clear()}
                 aria-label={language.t("common.clear")}
@@ -98,11 +198,11 @@ export const DialogManageModels: Component = () => {
           </div>
         </div>
         <div data-slot="manage-models-scroll" class="relative min-h-0 flex-1">
-          <div class="settings-panel settings-models h-full px-4 pt-4 pb-4">
+          <div class="settings-v2-panel settings-v2-models h-full px-4 pt-4 pb-4">
             <Show
               when={!list.grouped.loading}
               fallback={
-                <div class="settings-models-status">
+                <div class="settings-v2-models-status">
                   {language.t("common.loading")}
                   {language.t("common.loading.ellipsis")}
                 </div>
@@ -111,21 +211,21 @@ export const DialogManageModels: Component = () => {
               <Show
                 when={list.flat().length > 0}
                 fallback={
-                  <div class="settings-models-status">
+                  <div class="settings-v2-models-status">
                     <span>{language.t("dialog.model.empty")}</span>
                     <Show when={list.filter()}>
-                      <span class="settings-models-status-filter">&quot;{list.filter()}&quot;</span>
+                      <span class="settings-v2-models-status-filter">&quot;{list.filter()}&quot;</span>
                     </Show>
                   </div>
                 }
               >
                 <For each={list.grouped.latest}>
                   {(group) => (
-                    <div class="settings-section" data-component="settings-models-provider">
-                      <div class="settings-models-group-header justify-between">
+                    <div class="settings-v2-section" data-component="settings-models-provider">
+                      <div class="settings-v2-models-group-header justify-between">
                         <div class="flex min-w-0 items-center gap-2">
                           <ProviderIcon id={group.category} width={16} height={16} class="ml-4 shrink-0" />
-                          <h3 class="settings-section-title">{group.items[0].provider.name}</h3>
+                          <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
                         </div>
                         <div>
                           <Switch
@@ -138,10 +238,10 @@ export const DialogManageModels: Component = () => {
                           </Switch>
                         </div>
                       </div>
-                      <SettingsList>
+                      <SettingsListV2>
                         <For each={group.items}>
                           {(item) => (
-                            <SettingsRow title={item.name} description="">
+                            <SettingsRowV2 title={item.name} description="">
                               <div>
                                 <Switch
                                   checked={local.model.visible({ modelID: item.id, providerID: item.provider.id })}
@@ -151,10 +251,10 @@ export const DialogManageModels: Component = () => {
                                   {item.name}
                                 </Switch>
                               </div>
-                            </SettingsRow>
+                            </SettingsRowV2>
                           )}
                         </For>
-                      </SettingsList>
+                      </SettingsListV2>
                     </div>
                   )}
                 </For>

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

@@ -2,8 +2,8 @@ import { createSignal, Index, Show } from "solid-js"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useSettings } from "@/settings/model"
+import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
 
 export type Highlight = {
   title: string

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

@@ -1,4 +1,4 @@
-.directory-picker-body {
+.directory-picker-v2-body {
   display: flex;
   min-height: 0;
   flex: 1;
@@ -7,20 +7,20 @@
   padding: 2px 16px 0;
 }
 
-.directory-picker-path {
+.directory-picker-v2-path {
   position: relative;
   z-index: 10;
   display: flex;
   gap: 8px;
 }
 
-.directory-picker-actions {
+.directory-picker-v2-actions {
   display: flex;
   flex-shrink: 0;
   gap: 2px;
 }
 
-.directory-picker-suggestions {
+.directory-picker-v2-suggestions {
   position: absolute;
   z-index: 20;
   top: 36px;
@@ -35,7 +35,7 @@
   box-shadow: var(--v2-elevation-overlay);
 }
 
-.directory-picker-suggestions button {
+.directory-picker-v2-suggestions button {
   overflow: hidden;
   padding: 6px 8px;
   border-radius: 4px;
@@ -46,13 +46,13 @@
   white-space: nowrap;
 }
 
-.directory-picker-suggestions button:hover,
-.directory-picker-suggestions button[data-active] {
+.directory-picker-v2-suggestions button:hover,
+.directory-picker-v2-suggestions button[data-active] {
   color: var(--v2-text-text-base);
   background: var(--v2-overlay-simple-overlay-hover);
 }
 
-.directory-picker-browser {
+.directory-picker-v2-browser {
   position: relative;
   z-index: 0;
   isolation: isolate;
@@ -64,7 +64,7 @@
   background: transparent;
 }
 
-.directory-picker-tree {
+.directory-picker-v2-tree {
   display: block;
   width: 100%;
   height: 100%;
@@ -85,7 +85,7 @@
   --trees-border-radius-override: 4px;
 }
 
-.directory-picker-state {
+.directory-picker-v2-state {
   position: absolute;
   z-index: 1;
   inset: 0;
@@ -96,7 +96,7 @@
   pointer-events: none;
 }
 
-.directory-picker-selection {
+.directory-picker-v2-selection {
   overflow: hidden;
   flex-shrink: 0;
   color: var(--v2-text-text-muted);

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

@@ -5,10 +5,10 @@ import { Button } from "@opencode-ai/ui/button"
 import { TextInput } from "@opencode-ai/ui/text-input"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createEffect, createMemo, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ServerConnection } from "@/runtime/server/registry"
-import type { Path } from "@/runtime/server/types"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
+import type { Path } from "@/types"
 import {
   absoluteTreePath,
   activeTreeNavigation,
@@ -26,12 +26,12 @@ import {
   displayPickerPath,
   pickerParent,
   pickerRoot,
-} from "./domain"
-import "./dialog.css"
+} from "./directory-picker-domain"
+import "./dialog-select-directory-v2.css"
 import { Divider } from "@opencode-ai/ui/divider"
 import { getFilename } from "@opencode-ai/util/path"
 
-interface DirectoryPickerDialogProps {
+interface DialogSelectDirectoryV2Props {
   title?: string
   multiple?: boolean
   onSelect: (result: string | string[] | null) => void
@@ -40,7 +40,7 @@ interface DirectoryPickerDialogProps {
   start?: string
 }
 
-export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
+export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
   const global = useGlobal()
   const { sync, sdk } = global.ensureServerCtx(props.server)
   const dialog = useDialog()
@@ -277,7 +277,7 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
     })
     if (!container) return
     tree.render({ containerWrapper: container })
-    tree.getFileTreeContainer()?.classList.add("directory-picker-tree")
+    tree.getFileTreeContainer()?.classList.add("directory-picker-v2-tree")
   })
 
   createEffect(() => {
@@ -289,13 +289,13 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
   onCleanup(() => tree?.cleanUp())
 
   return (
-    <Dialog size="large" class="directory-picker">
+    <Dialog size="large" class="directory-picker-v2">
       <DialogHeader>
         <DialogTitle>{props.title ?? language.t("command.project.open")}</DialogTitle>
       </DialogHeader>
       <Divider />
-      <DialogBody class="directory-picker-body pt-4!">
-        <div class="directory-picker-path" ref={pathArea}>
+      <DialogBody class="directory-picker-v2-body pt-4!">
+        <div class="directory-picker-v2-path" ref={pathArea}>
           <TextInput
             value={input()}
             autofocus
@@ -311,13 +311,13 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
             role="combobox"
             aria-autocomplete="list"
             aria-expanded={suggestionsOpen()}
-            aria-controls="directory-picker-suggestions"
+            aria-controls="directory-picker-v2-suggestions"
             aria-activedescendant={
-              activeSuggestion() >= 0 ? `directory-picker-suggestion-${activeSuggestion()}` : undefined
+              activeSuggestion() >= 0 ? `directory-picker-v2-suggestion-${activeSuggestion()}` : undefined
             }
             onKeyDown={handleInputKey}
           />
-          <div class="directory-picker-actions">
+          <div class="directory-picker-v2-actions">
             <Button size="small" variant="ghost" onClick={() => void navigate(home())}>
               ~
             </Button>
@@ -329,11 +329,11 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
             </Button>
           </div>
           <Show when={suggestionsOpen() && currentSuggestions().length > 0}>
-            <div id="directory-picker-suggestions" role="listbox" class="directory-picker-suggestions">
+            <div id="directory-picker-v2-suggestions" role="listbox" class="directory-picker-v2-suggestions">
               <For each={currentSuggestions()}>
                 {(suggestion, index) => (
                   <button
-                    id={`directory-picker-suggestion-${index()}`}
+                    id={`directory-picker-v2-suggestion-${index()}`}
                     data-directory-path={suggestion.absolute}
                     role="option"
                     aria-selected={index() === activeSuggestion()}
@@ -350,7 +350,7 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
           </Show>
         </div>
         <div
-          class="directory-picker-browser"
+          class="directory-picker-v2-browser"
           ref={container}
           onWheel={(event) => {
             const scroller = tree
@@ -370,13 +370,13 @@ export function DirectoryPickerDialog(props: DirectoryPickerDialogProps) {
           }}
         >
           <Show when={loading()}>
-            <div class="directory-picker-state">{language.t("common.loading")}</div>
+            <div class="directory-picker-v2-state">{language.t("common.loading")}</div>
           </Show>
           <Show when={!loading() && error()}>
-            <div class="directory-picker-state">{language.t("dialog.directory.readError")}</div>
+            <div class="directory-picker-v2-state">{language.t("dialog.directory.readError")}</div>
           </Show>
         </div>
-        <div class="directory-picker-selection">{policy.result(root(), selected(), rootValid())}</div>
+        <div class="directory-picker-v2-selection">{policy.result(root(), selected(), rootValid())}</div>
       </DialogBody>
       <DialogFooter>
         <Button variant="neutral" onClick={() => dialog.close()}>

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

@@ -1,11 +1,11 @@
 import { Component, createMemo, Show } from "solid-js"
-import { useData } from "@/runtime/server/current"
-import { useWorkspaceLocation } from "@/workspaces/location"
+import { useData } from "@/context/server"
+import { useWorkspaceLocation } from "@/context/location"
 import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useMcpToggle } from "@/providers/connect/mcp"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
 
 const statusLabels = {
   connected: "mcp.status.connected",

packages/app/src/components/dialog-select-model-search.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { matchesModelSearch } from "./search"
+import { matchesModelSearch } from "./dialog-select-model-search"
 
 describe("matchesModelSearch", () => {
   test("matches model names across separators", () => {

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

@@ -2,7 +2,7 @@
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createSignal, onMount } from "solid-js"
-import { DialogSelectModelUnpaid } from "./unpaid"
+import { DialogSelectModelUnpaidV2 } from "./dialog-select-model-unpaid-v2"
 
 const names = [
   "MiMo V2.5 Free",
@@ -34,7 +34,7 @@ function SelectModelWithoutProviders() {
       setCurrent(models.find((item) => item.id === value?.modelID))
     },
   }
-  const open = () => dialog.show(() => <DialogSelectModelUnpaid model={model} />)
+  const open = () => dialog.show(() => <DialogSelectModelUnpaidV2 model={model} />)
 
   onMount(open)
 

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

@@ -6,17 +6,17 @@ import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme } from "@opencode-ai/ui/theme"
 import { createMemo, onCleanup, onMount, type Component, For, Show } from "solid-js"
-import { useLocal } from "@/providers/models/selection"
-import { useIntegrations } from "@/providers/catalog/integrations"
-import { decode64 } from "@/runtime/persistence/base64"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ModelTooltip } from "./tooltip"
+import { useLocal } from "@/context/local"
+import { useIntegrations } from "@/hooks/use-integrations"
+import { decode64 } from "@/utils/base64"
+import { useLanguage } from "@/context/language"
+import { ModelTooltip } from "./model-tooltip"
 
 type ModelState = ReturnType<typeof useLocal>["model"]
 const featuredProviders = ["opencode", "opencode-go", "openai", "anthropic", "google", "github-copilot"]
 const displayModelName = (name: string) => name.replace(/\s+(?:\(free\)|free)$/i, "")
 
-export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props) => {
+export const DialogSelectModelUnpaidV2: Component<{ model?: ModelState }> = (props) => {
   const local = useLocal()
   const model = props.model ?? local.model
   const dialog = useDialog()
@@ -34,7 +34,7 @@ export const DialogSelectModelUnpaid: Component<{ model?: ModelState }> = (props
   const freeModels = createMemo(() => model.list().filter(isFree))
 
   const openProviders = (provider?: string) => {
-    void import("@/providers/connect/dialog").then((x) => {
+    void import("./dialog-connect-provider").then((x) => {
       const controller = x.useProviderConnectController()
       controller.select(provider)
       void dialog.show(() => <x.DialogConnectProvider controller={controller} directory={directory()} />)

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

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

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

@@ -1,9 +1,9 @@
-import { Popover } from "@kobalte/core/popover"
+import { Popover as Kobalte } from "@kobalte/core/popover"
 import { Component, ComponentProps, createEffect, createMemo, For, JSX, Show } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useLocal } from "@/providers/models/selection"
+import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { popularProviders } from "@/providers/catalog/providers"
+import { popularProviders } from "@/hooks/use-providers"
 import { Button } from "@opencode-ai/ui/button"
 import { Badge } from "@opencode-ai/ui/badge"
 import { Dialog, DialogBody, DialogHeader, DialogTitle } from "@opencode-ai/ui/dialog"
@@ -13,13 +13,13 @@ import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { List } from "@opencode-ai/ui/list"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Menu } from "@opencode-ai/ui/menu"
-import { ModelTooltip } from "./tooltip"
-import { useLanguage } from "@/runtime/i18n/language"
-import { decode64 } from "@/runtime/persistence/base64"
-import { handleDocumentSearchKeydown } from "@/shell/commands/search-keydown"
-import { createMenuDismissController } from "@/shell/commands/menu-dismiss"
+import { ModelTooltip } from "./model-tooltip"
+import { useLanguage } from "@/context/language"
+import { decode64 } from "@/utils/base64"
+import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"
 import { createEventListener } from "@solid-primitives/event-listener"
-import { matchesModelSearch } from "./search"
+import { matchesModelSearch } from "./dialog-select-model-search"
 
 const isFree = (provider: string, cost: { input: number } | undefined) =>
   provider === "opencode" && (!cost || cost.input === 0)
@@ -111,9 +111,115 @@ const ModelList: Component<{
   )
 }
 
-type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Popover.Trigger>, "as" | "ref">
+type ModelSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
 type ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => JSX.Element
+type Dismiss = "escape" | "outside" | "select" | "manage" | "provider"
+
 export function ModelSelectorPopover(props: {
+  provider?: string
+  model?: ModelState
+  trigger: ModelSelectorTrigger
+  onClose?: (cause: "escape" | "select") => void
+}) {
+  const [store, setStore] = createStore<{
+    open: boolean
+    dismiss: Dismiss | null
+  }>({
+    open: false,
+    dismiss: null,
+  })
+  const dialog = useDialog()
+  const local = useLocal()
+  const directory = () => decode64(local.slug())
+
+  const close = (dismiss: Dismiss) => {
+    setStore("dismiss", dismiss)
+    setStore("open", false)
+  }
+
+  const handleManage = () => {
+    close("manage")
+    void import("./dialog-manage-models").then((x) => {
+      dialog.show(() => <x.DialogManageModels />)
+    })
+  }
+
+  const handleConnectProvider = () => {
+    close("provider")
+    void import("./dialog-connect-provider").then((x) => {
+      void dialog.show(() => <x.DialogConnectProvider directory={directory()} />)
+    })
+  }
+  const language = useLanguage()
+
+  return (
+    <Kobalte
+      open={store.open}
+      onOpenChange={(next) => {
+        if (next) setStore("dismiss", null)
+        setStore("open", next)
+      }}
+      modal={false}
+      placement="top-start"
+      gutter={4}
+    >
+      <Kobalte.Trigger as={props.trigger} />
+      <Kobalte.Portal>
+        <Kobalte.Content
+          class="w-72 h-80 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden"
+          onEscapeKeyDown={(event) => {
+            close("escape")
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+          onPointerDownOutside={() => close("outside")}
+          onFocusOutside={() => close("outside")}
+          onCloseAutoFocus={(event) => {
+            const dismiss = store.dismiss
+            if (dismiss === "outside") event.preventDefault()
+            if (dismiss === "escape" || dismiss === "select") {
+              event.preventDefault()
+              props.onClose?.(dismiss)
+            }
+            setStore("dismiss", null)
+          }}
+        >
+          <Kobalte.Title class="sr-only">{language.t("dialog.model.select.title")}</Kobalte.Title>
+          <ModelList
+            provider={props.provider}
+            model={props.model}
+            onSelect={() => close("select")}
+            class="p-1"
+            action={
+              <div class="flex items-center gap-1">
+                <Tooltip appearance="standard" placement="top" value={language.t("command.provider.connect")}>
+                  <IconButton
+                    icon={<Icon name="plus-small" />}
+                    variant="ghost"
+                    class="size-6"
+                    aria-label={language.t("command.provider.connect")}
+                    onClick={handleConnectProvider}
+                  />
+                </Tooltip>
+                <Tooltip appearance="standard" placement="top" value={language.t("dialog.model.manage")}>
+                  <IconButton
+                    icon={<Icon name="sliders" />}
+                    variant="ghost"
+                    class="size-6"
+                    aria-label={language.t("dialog.model.manage")}
+                    onClick={handleManage}
+                  />
+                </Tooltip>
+              </div>
+            }
+          />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}
+
+export function ModelSelectorPopoverV2(props: {
   provider?: string
   model?: ModelState
   trigger: ModelSelectorTrigger
@@ -127,15 +233,15 @@ export function ModelSelectorPopover(props: {
   })
 
   return (
-    <ModelSelectorPopoverView
+    <ModelSelectorPopoverV2View
       trigger={props.trigger}
       models={controller.models}
       groups={controller.groups}
       current={controller.current()}
       select={controller.select}
       onManage={() => {
-        void import("./manage").then((module) => {
-          void dialog.show(() => <module.DialogManageModels />)
+        void import("./dialog-manage-models").then((module) => {
+          void dialog.show(() => <module.DialogManageModelsV2 />)
         })
       }}
       onClose={() => props.onClose?.()}
@@ -182,7 +288,7 @@ function createModelSelectorController(input: {
   }
 }
 
-function ModelSelectorPopoverView(props: {
+function ModelSelectorPopoverV2View(props: {
   trigger: ModelSelectorTrigger
   models: (search: string) => ModelItem[]
   groups: (models: ModelItem[]) => { category: string; items: ModelItem[] }[]
@@ -419,13 +525,13 @@ export const DialogSelectModel: Component<{ provider?: string; model?: ModelStat
   const directory = () => decode64(local.slug())
 
   const provider = () => {
-    void import("@/providers/connect/dialog").then((x) => {
+    void import("./dialog-connect-provider").then((x) => {
       void dialog.show(() => <x.DialogConnectProvider directory={directory()} />)
     })
   }
 
   const manage = () => {
-    void import("./manage").then((x) => {
+    void import("./dialog-manage-models").then((x) => {
       dialog.show(() => <x.DialogManageModels />)
     })
   }

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

@@ -0,0 +1,261 @@
+import { Button } from "@opencode-ai/ui/button"
+import { Menu } from "@opencode-ai/ui/menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { List } from "@opencode-ai/ui/list"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Show } from "solid-js"
+import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
+import { ServerCollectionController } from "@/components/server/server-management-controller"
+
+type ServerConnectionFormController = {
+  state: {
+    adding: () => boolean
+    busy: () => boolean
+    value: () => string
+    name: () => string
+    username: () => string
+    password: () => string
+    error: () => string
+    status: () => boolean | undefined
+  }
+  change: {
+    value: (value: string) => void
+    name: (value: string) => void
+    username: (value: string) => void
+    password: (value: string) => void
+  }
+  reset: () => void
+  submit: () => void
+}
+
+interface ServerFormProps {
+  value: string
+  name: string
+  username: string
+  password: string
+  placeholder: string
+  busy: boolean
+  error: string
+  status: boolean | undefined
+  onChange: (value: string) => void
+  onNameChange: (value: string) => void
+  onUsernameChange: (value: string) => void
+  onPasswordChange: (value: string) => void
+  onSubmit: () => void
+  onBack: () => void
+}
+
+function ServerForm(props: ServerFormProps) {
+  const language = useLanguage()
+  const keyDown = (event: KeyboardEvent) => {
+    event.stopPropagation()
+    if (event.key === "Escape") {
+      event.preventDefault()
+      props.onBack()
+      return
+    }
+    if (event.key !== "Enter" || event.isComposing) return
+    event.preventDefault()
+    props.onSubmit()
+  }
+
+  return (
+    <div>
+      <div class="bg-surface-base rounded-md p-5 flex flex-col gap-3">
+        <div class="flex-1 min-w-0 [&_[data-slot=input-wrapper]]:relative">
+          <TextField
+            type="text"
+            label={language.t("dialog.server.add.url")}
+            placeholder={props.placeholder}
+            value={props.value}
+            autofocus
+            validationState={props.error ? "invalid" : "valid"}
+            error={props.error}
+            disabled={props.busy}
+            onChange={props.onChange}
+            onKeyDown={keyDown}
+          />
+        </div>
+        <TextField
+          type="text"
+          label={language.t("dialog.server.add.name")}
+          placeholder={language.t("dialog.server.add.namePlaceholder")}
+          defaultValue={props.name}
+          disabled={props.busy}
+          onChange={props.onNameChange}
+          onKeyDown={keyDown}
+        />
+        <div class="grid grid-cols-2 gap-2 min-w-0">
+          <TextField
+            type="text"
+            label={language.t("dialog.server.add.username")}
+            placeholder={language.t("dialog.server.add.usernamePlaceholder")}
+            defaultValue={props.username}
+            disabled={props.busy}
+            onChange={props.onUsernameChange}
+            onKeyDown={keyDown}
+          />
+          <TextField
+            type="password"
+            label={language.t("dialog.server.add.password")}
+            placeholder={language.t("dialog.server.add.passwordPlaceholder")}
+            defaultValue={props.password}
+            disabled={props.busy}
+            onChange={props.onPasswordChange}
+            onKeyDown={keyDown}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function ServerConnectionList(props: {
+  domain: ServerCollectionController
+  onAdd: () => void
+  onEdit: (server: ServerConnection.Http) => void
+}) {
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-1 min-h-0 flex-col gap-4">
+      <List
+        class="flex-1 min-h-0 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent"
+        search={{
+          placeholder: language.t("dialog.server.search.placeholder"),
+          autofocus: false,
+        }}
+        noInitialSelection
+        emptyMessage={language.t("dialog.server.empty")}
+        items={props.domain.collection.items}
+        key={(x) => x.http.url}
+        divider={true}
+      >
+        {(i) => {
+          const key = ServerConnection.key(i)
+          return (
+            <div class="flex items-center gap-3 min-w-0 flex-1 w-full group/item">
+              <div class="flex flex-col h-full items-center w-5">
+                <ServerHealthIndicator health={props.domain.collection.health()[key]} />
+              </div>
+              <ServerRow
+                conn={i}
+                dimmed={props.domain.collection.health()[key]?.healthy === false}
+                status={props.domain.collection.health()[key]}
+                class="flex items-center gap-3 min-w-0 flex-1"
+                badge={
+                  <Show when={props.domain.defaults.key() === ServerConnection.key(i)}>
+                    <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs">
+                      {language.t("dialog.server.status.default")}
+                    </span>
+                  </Show>
+                }
+                showCredentials
+              />
+              <div class="flex items-center justify-center gap-4 pl-4">
+                <Show when={i.type === "http"}>
+                  <Menu appearance="standard">
+                    <Menu.Trigger
+                      as={IconButton}
+                      icon={<Icon name="dot-grid" />}
+                      variant="ghost"
+                      class="shrink-0 size-8 hover:bg-surface-base-hover data-[expanded]:bg-surface-base-active"
+                      onClick={(e: MouseEvent) => e.stopPropagation()}
+                      onPointerDown={(e: PointerEvent) => e.stopPropagation()}
+                    />
+                    <Menu.Portal>
+                      <Menu.Content class="mt-1">
+                        <Menu.Item
+                          onSelect={() => {
+                            if (i.type !== "http") return
+                            props.onEdit(i)
+                          }}
+                        >
+                          {language.t("dialog.server.menu.edit")}
+                        </Menu.Item>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(key)}>
+                            {language.t("dialog.server.menu.default")}
+                          </Menu.Item>
+                        </Show>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
+                          <Menu.Item onSelect={() => props.domain.defaults.set(null)}>
+                            {language.t("dialog.server.menu.defaultRemove")}
+                          </Menu.Item>
+                        </Show>
+                        <Show when={props.domain.connection.canRemove(key)}>
+                          <Menu.Separator />
+                          <Menu.Item
+                            onSelect={() => props.domain.connection.remove(key)}
+                            class="text-text-on-critical-base hover:bg-surface-critical-weak"
+                          >
+                            {language.t("dialog.server.menu.delete")}
+                          </Menu.Item>
+                        </Show>
+                      </Menu.Content>
+                    </Menu.Portal>
+                  </Menu>
+                </Show>
+              </div>
+            </div>
+          )
+        }}
+      </List>
+
+      <div class="shrink-0 pb-5">
+        <Button
+          variant="neutral"
+          icon="plus-small"
+          size="large"
+          onClick={props.onAdd}
+          class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
+        >
+          {language.t("dialog.server.add.button")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function ServerConnectionForm(props: { form: ServerConnectionFormController }) {
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-1 min-h-0 flex-col gap-4">
+      <ServerForm
+        value={props.form.state.value()}
+        name={props.form.state.name()}
+        username={props.form.state.username()}
+        password={props.form.state.password()}
+        placeholder={language.t("dialog.server.add.placeholder")}
+        busy={props.form.state.busy()}
+        error={props.form.state.error()}
+        status={props.form.state.status()}
+        onChange={props.form.change.value}
+        onNameChange={props.form.change.name}
+        onUsernameChange={props.form.change.username}
+        onPasswordChange={props.form.change.password}
+        onSubmit={props.form.submit}
+        onBack={props.form.reset}
+      />
+      <div class="shrink-0 pb-5">
+        <Button
+          variant="contrast"
+          size="large"
+          onClick={props.form.submit}
+          disabled={props.form.state.busy()}
+          class="px-3 py-1.5"
+        >
+          {props.form.state.busy()
+            ? language.t("dialog.server.add.checking")
+            : props.form.state.adding()
+              ? language.t("dialog.server.add.button")
+              : language.t("common.save")}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -1,5 +1,5 @@
-import { usePlatform } from "@/runtime/platform/platform"
-import { useLanguage } from "@/runtime/i18n/language"
+import { usePlatform } from "@/context/platform"
+import { useLanguage } from "@/context/language"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog, DialogBody, DialogHeader, DialogTitleGroup } from "@opencode-ai/ui/dialog"

packages/app/src/components/directory-picker-domain.test.ts

@@ -20,7 +20,7 @@ import {
   pickerParent,
   pickerRoot,
   pickerAbsoluteInput,
-} from "./domain"
+} from "./directory-picker-domain"
 
 test("maps server directory entries into Pierre paths", () => {
   expect(

packages/app/src/components/directory-picker-domain.ts

@@ -247,7 +247,7 @@ export function nativePickerPath(path: string) {
 }
 import { getFilename } from "@opencode-ai/util/path"
 import fuzzysort from "fuzzysort"
-import { ServerSDK } from "@/runtime/server/client"
+import { ServerSDK } from "@/context/server-sdk"
 
 export function cleanPickerInput(value: string) {
   const first = (value ?? "").split(/\r?\n/)[0] ?? ""

packages/app/src/components/directory-picker-policy.ts

@@ -1,5 +1,5 @@
-import { ServerConnection } from "@/runtime/server/registry"
-import type { Platform } from "@/runtime/platform/platform"
+import { ServerConnection } from "@/context/servers"
+import type { Platform } from "@/context/platform"
 
 export function directoryPickerKind(platform: Platform["platform"], server: ServerConnection.Any) {
   if (platform === "desktop" && ServerConnection.local(server)) return "native" as const

packages/app/src/components/directory-picker.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { directoryPickerKind } from "./policy"
+import { directoryPickerKind } from "./directory-picker-policy"
 
 const local = {
   type: "sidecar",

packages/app/src/components/directory-picker.tsx

@@ -1,11 +1,11 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { ServerConnection } from "@/runtime/server/registry"
-import { usePlatform } from "@/runtime/platform/platform"
+import { ServerConnection } from "@/context/servers"
+import { usePlatform } from "@/context/platform"
 import { lazy } from "solid-js"
-import { directoryPickerKind } from "./policy"
+import { directoryPickerKind } from "./directory-picker-policy"
 
-const DirectoryPickerDialog = lazy(() =>
-  import("./dialog").then((module) => ({ default: module.DirectoryPickerDialog })),
+const DialogSelectDirectoryV2 = lazy(() =>
+  import("./dialog-select-directory-v2").then((module) => ({ default: module.DialogSelectDirectoryV2 })),
 )
 
 type DirectoryPickerInput = {
@@ -33,6 +33,6 @@ export function useDirectoryPicker() {
     const cancel = () => {
       if (!selected) input.onSelect(null)
     }
-    dialog.show(() => <DirectoryPickerDialog {...input} onSelect={onSelect} />, cancel)
+    dialog.show(() => <DialogSelectDirectoryV2 {...input} onSelect={onSelect} />, cancel)
   }
 }

packages/app/src/components/edit-project.ts

@@ -1,12 +1,12 @@
 import { getFilename } from "@opencode-ai/util/path"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useMutation } from "@tanstack/solid-query"
-import { normalizeProjectInfo } from "@/runtime/server/global-sync/utils"
+import { normalizeProjectInfo } from "@/context/global-sync/utils"
 import { createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useGlobal } from "@/runtime/server/runtime"
-import { type LocalProject } from "@/shell/state/layout"
-import { ServerConnection } from "@/runtime/server/registry"
+import { useGlobal } from "@/context/global"
+import { type LocalProject } from "@/context/layout"
+import { ServerConnection } from "@/context/servers"
 
 export function createEditProjectModel(props: { project: LocalProject; server: ServerConnection.Any }) {
   const supported = !props.project.id || props.project.id === "global"

packages/app/src/components/file-tree-v2-model.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { buildFileTreeV2Model, flattenFileTreeV2, flattenLiveFileTreeV2 } from "./file-tree-v2-model"
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 
 describe("buildFileTreeV2Model", () => {
   test("builds a sorted tree and flattens expanded directories", () => {

packages/app/src/components/file-tree-v2-model.ts

@@ -1,4 +1,4 @@
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 
 export type FileTreeV2Model = {
   children: ReadonlyMap<string, readonly FileTreeV2Node[]>

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

@@ -1,4 +1,4 @@
-import { useFile } from "@/workspaces/files/model"
+import { useFile } from "@/context/file"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import "@opencode-ai/ui/file-tree.css"
 import {
@@ -12,9 +12,9 @@ import {
   type ParentProps,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 import { Icon } from "@opencode-ai/ui/icon"
-import { pathToFileUrl, withFileDragImage, type Kind } from "@/session/files/file-tree"
+import { pathToFileUrl, withFileDragImage, type Kind } from "@/components/file-tree"
 import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
 import {
   buildFileTreeV2Model,
@@ -22,10 +22,10 @@ import {
   flattenLiveFileTreeV2,
   normalizeFileTreeV2Path,
   type FileTreeV2Node,
-} from "@/session/files/file-tree-v2-model"
-import { virtualScrollElement } from "@/session/files/virtual-scroll"
+} from "@/components/file-tree-v2-model"
+import { virtualScrollElement } from "@/components/virtual-scroll-element"
 
-export type { Kind } from "@/session/files/file-tree"
+export type { Kind } from "@/components/file-tree"
 
 const INDENT_STEP = 16
 

packages/app/src/components/file-tree.test.ts

@@ -11,7 +11,7 @@ beforeAll(async () => {
     useLocation: () => ({}),
     useSearchParams: () => [{}, () => undefined],
   }))
-  mock.module("@/workspaces/files/model", () => ({
+  mock.module("@/context/file", () => ({
     useFile: () => ({
       tree: {
         state: () => undefined,

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

@@ -1,5 +1,5 @@
-import { useFile } from "@/workspaces/files/model"
-import { encodeFilePath } from "@/workspaces/files/path"
+import { useFile } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -17,7 +17,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import type { FileNode } from "@/runtime/server/types"
+import type { FileNode } from "@/types"
 
 const MAX_DEPTH = 128
 

packages/app/src/components/model-tooltip.tsx

@@ -1,5 +1,5 @@
 import { Show, type Component, type JSX } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
+import { useLanguage } from "@/context/language"
 
 type InputKey = "text" | "image" | "audio" | "video" | "pdf"
 type InputMap = Record<InputKey, boolean>

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

@@ -1,14 +1,14 @@
 import { Icon } from "@opencode-ai/ui/icon"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
-import { type Component, For, Show, createEffect, createMemo, createResource, createSignal, type JSX } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useMcpToggle } from "@/providers/connect/mcp"
-import { useWorkspaceLocation } from "@/workspaces/location"
-import { useServerSDK } from "@/runtime/server/client"
-import { useData } from "@/runtime/server/current"
-import { pluginLabel } from "@/providers/catalog/plugin"
-import { ExternalLink } from "@/runtime/platform/external-link"
+import { type Component, For, Show, createEffect, createMemo, createResource, createSignal } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { useMcpToggle } from "@/context/mcp"
+import { useWorkspaceLocation } from "@/context/location"
+import { useServerSDK } from "@/context/server-sdk"
+import { useData } from "@/context/server"
+import { pluginLabel } from "@/utils/plugin"
+import { ExternalLink } from "./external-link"
 
 type SkillItem = {
   name: string
@@ -17,27 +17,27 @@ type SkillItem = {
 
 const skillKey = (item: SkillItem) => `${item.name}\n${item.location}`
 
-const ExtensionCard: Component<{ children: JSX.Element }> = (props) => (
-  <div class="project-settings-extension-card">{props.children}</div>
+const ExtensionCard: Component<{ children: unknown }> = (props) => (
+  <div class="project-settings-extension-card">{props.children as any}</div>
 )
 
 const ExtensionRow: Component<{
   icon: "mcp" | "cube" | "post-skill"
   name: string
-  children?: JSX.Element
+  children?: unknown
 }> = (props) => (
   <div class="project-settings-extension-row">
     <div class="project-settings-extension-row-main">
       <Icon name={props.icon} class="project-settings-extension-row-icon" />
       <span class="project-settings-extension-row-name">{props.name}</span>
     </div>
-    {props.children}
+    {props.children as any}
   </div>
 )
 
 const SharedSection: Component<{
   count: number
-  children: JSX.Element
+  children: unknown
 }> = (props) => {
   const language = useLanguage()
   const [open, setOpen] = createSignal(false)

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

@@ -1,33 +1,86 @@
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
+import { Button } from "@opencode-ai/ui/button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Keybind } from "@opencode-ai/ui/keybind"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { ReferenceInfo } from "@opencode-ai/client/promise"
-import { createComponent, createEffect, createMemo, on } from "solid-js"
-import type { ComposerSuggestion } from "./types"
-import { createComposerEditor, createComposerEditorState, type ComposerEditorModel } from "./editor/interaction"
-import { selectionFromLines, type SelectedLineRange, useFile } from "@/workspaces/files/model"
-import { useComments } from "@/composer/comments"
-import { useCommand } from "@/shell/commands/command"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useLayout } from "@/shell/state/layout"
-import { usePlatform } from "@/runtime/platform/platform"
-import { useWorkspaceLocation } from "@/workspaces/location"
-import { useData } from "@/runtime/server/current"
+import { createEffect, createMemo, on, Show } from "solid-js"
+import { ModelSelectorPopoverV2 } from "@/components/dialog-select-model"
+import { DialogSelectModelUnpaidV2 } from "@/components/dialog-select-model-unpaid-v2"
+import type { PromptInputProps } from "@/components/prompt-input/contracts"
+import { normalizePromptHistoryEntry, promptLength, type PromptHistoryComment } from "@/components/prompt-input/history"
+import { createPersistedPromptInputHistory } from "@/components/prompt-input/history-store"
+import { promptDesignPlaceholder, promptPlaceholder } from "@/components/prompt-input/placeholder"
+import { createPromptSubmit } from "@/components/prompt-input/submit"
+import { selectionFromLines, type SelectedLineRange, useFile } from "@/context/file"
+import { useComments } from "@/context/comments"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { usePermission } from "@/context/permission"
+import { type ImageAttachmentPart, usePrompt } from "@/context/prompt"
+import { usePlatform } from "@/context/platform"
+import { useWorkspaceLocation } from "@/context/location"
+import { useData } from "@/context/server"
 import { createSessionTabs } from "@/session/helpers"
-import { showToast } from "@/shell/notifications/toast"
-import { formatServerError } from "@/runtime/server/errors"
-import { Skill } from "@opencode-ai/schema/skill"
-import type { ComposerAdapter, ComposerControls } from "./adapter"
-import type { ImageAttachmentPart } from "./state"
-import { normalizePromptHistoryEntry, type PromptHistoryComment } from "./history/entry"
-import { createComposerHistory } from "./history/store"
-import { composerPlaceholder } from "./placeholder"
-import { createComposerSubmit } from "./submit"
+import { showToast } from "@/utils/toast"
+import { PromptInputV2, type PromptInputV2Suggestion } from "@opencode-ai/session-ui/v2/prompt-input"
+import {
+  createPromptInputV2Controller,
+  createPromptInputV2State,
+  type PromptInputV2Interaction,
+} from "@opencode-ai/session-ui/v2/prompt-input/interaction"
 
-export type ComposerModel = ComposerEditorModel & {
-  readonly model: ComposerControls["model"]
+export type PromptInputV2ComposerProps = {
+  class?: string
+  controller: PromptInputV2ComposerController
+  borderUnderlay?: boolean
+  accentSubmit?: boolean
 }
 
-export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
+export type PromptInputV2ControllerProps = Omit<PromptInputProps, "class">
+export type PromptInputV2ComposerController = PromptInputV2Interaction & {
+  readonly model: PromptInputProps["controls"]["model"]
+}
+
+export function PromptInputV2Composer(props: PromptInputV2ComposerProps) {
+  const dialog = useDialog()
+  const command = useCommand()
+  const language = useLanguage()
+
+  return (
+    <div class="flex flex-col gap-3">
+      <PromptInputV2
+        controller={props.controller}
+        accentSubmit={props.accentSubmit}
+        borderUnderlay={props.borderUnderlay}
+        class={props.class}
+        variantControlVisible={!props.controller.model.loading}
+        attachKeybind={command.keybindParts("file.attach")}
+        attachShortcut={command.keybind("file.attach")}
+        modelControl={
+          <PromptInputV2ModelControl
+            loading={props.controller.model.loading}
+            paid={props.controller.model.paid}
+            title={language.t("command.model.choose")}
+            keybind={command.keybindParts("model.choose")}
+            model={props.controller.model.selection}
+            providerID={props.controller.model.selection.current()?.provider?.id}
+            modelName={props.controller.model.selection.current()?.name ?? language.t("dialog.model.select.title")}
+            onClose={props.controller.restoreFocus}
+            onUnpaidClick={() =>
+              dialog.show(() => <DialogSelectModelUnpaidV2 model={props.controller.model.selection} />)
+            }
+          />
+        }
+      />
+    </div>
+  )
+}
+
+export function usePromptInputV2Controller(props: PromptInputV2ControllerProps): PromptInputV2ComposerController {
   const sdk = useWorkspaceLocation()
   const data = useData()
   const files = useFile()
@@ -35,20 +88,16 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
   const comments = useComments()
   const dialog = useDialog()
   const command = useCommand()
+  const permission = usePermission()
   const language = useLanguage()
   const platform = usePlatform()
-  const prompt = adapter.state
+  const prompt = props.state ?? usePrompt()
   let editor: HTMLDivElement | undefined
 
-  const interaction = createComposerEditorState(prompt.mode.current())
-  createEffect(
-    on(adapter.ready, (ready) => {
-      if (ready) interaction[1]("mode", prompt.mode.current())
-    }),
-  )
+  const interaction = createPromptInputV2State()
   const mode = () => interaction[0].mode
-  const history = createComposerHistory()
-  const tabs = () => adapter.controls().session.tabs
+  const history = props.history ?? createPersistedPromptInputHistory()
+  const tabs = () => props.controls.session.tabs
   const activeFileTab = createSessionTabs({
     tabs,
     pathFromTab: files.pathFromTab,
@@ -64,6 +113,8 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
       return [...result, path]
     }, [])
   })
+  const info = createMemo(() => (props.controls.session.id ? data.session.get(props.controls.session.id) : undefined))
+  const working = createMemo(() => data.session.status(props.controls.session.id ?? "") === "running")
   const attachments = createMemo(() =>
     prompt.current().filter((part): part is ImageAttachmentPart => part.type === "image"),
   )
@@ -78,9 +129,20 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
       .join("")
     return text.trim().length === 0 && attachments().length === 0 && commentCount() === 0
   })
-  const stopping = createMemo(() => adapter.working() && blank())
-  const placeholder = () =>
-    composerPlaceholder(mode(), (key, params) => language.t(key as Parameters<typeof language.t>[0], params as never))
+  const stopping = createMemo(() => working() && blank())
+  const placeholder = createMemo(() =>
+    promptPlaceholder({
+      mode: mode(),
+      commentCount: commentCount(),
+      example: mode() === "shell" ? "git status" : "",
+      suggest: false,
+      t: (key, params) => language.t(key as Parameters<typeof language.t>[0], params as never),
+    }),
+  )
+  const designPlaceholder = () =>
+    promptDesignPlaceholder(mode(), placeholder(), (key, params) =>
+      language.t(key as Parameters<typeof language.t>[0], params as never),
+    )
 
   const historyComments = () => {
     const byID = new Map(comments.all().map((item) => [`${item.file}\n${item.id}`, item] as const))
@@ -130,6 +192,39 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
     )
   }
 
+  const accepting = createMemo(() => {
+    const id = props.controls.session.id
+    if (!id) return permission.isAutoAcceptingDirectory(sdk().directory)
+    return permission.isAutoAccepting(id, sdk().directory)
+  })
+  const submission =
+    props.submission ??
+    createPromptSubmit({
+      prompt,
+      info,
+      imageAttachments: attachments,
+      commentCount,
+      autoAccept: accepting,
+      mode,
+      working,
+      editor: () => editor,
+      queueScroll: () => requestAnimationFrame(() => editor?.scrollIntoView({ block: "nearest" })),
+      promptLength,
+      addToHistory: (value, mode) => controller.addHistory(value, mode),
+      resetHistoryNavigation: () => controller.resetHistory(),
+      setMode: (next) => controller.dispatch({ type: next === "shell" ? "mode.shell" : "mode.normal" }),
+      setPopover: (popover) => {
+        if (!popover) controller.dispatch({ type: "popover.close" })
+      },
+      newSessionWorktree: () => props.newSessionWorktree,
+      onNewSessionWorktreeReset: props.onNewSessionWorktreeReset,
+      shouldQueue: props.shouldQueue,
+      onQueue: props.onQueue,
+      onAbort: props.onAbort,
+      onSubmit: props.onSubmit,
+      model: props.controls.model.selection,
+    })
+
   const referenceDescription = (reference: ReferenceInfo) =>
     reference.source.type === "git" ? reference.source.repository : reference.source.path
   const references = createMemo(() =>
@@ -178,26 +273,10 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
       resource,
     })),
   )
-  const skills = createMemo(() => data.location.skill.list({ directory: sdk().directory }) ?? [])
-  const context = createMemo<ComposerSuggestion[]>(() => [
+  const context = createMemo<PromptInputV2Suggestion[]>(() => [
     ...references(),
-    ...skills().map((skill) => ({
-      id: `skill:${skill.id}`,
-      kind: "skill" as const,
-      label: `@${skill.id}`,
-      description: skill.description,
-      mention: {
-        type: "skill" as const,
-        id: Skill.ID.make(skill.id),
-        name: Skill.Name.make(skill.name),
-        content: `@${skill.id}`,
-        start: 0,
-        end: 0,
-      },
-    })),
-    ...adapter
-      .controls()
-      .agents.available.filter((agent) => !agent.hidden && agent.mode !== "primary")
+    ...props.controls.agents.available
+      .filter((agent) => !agent.hidden && agent.mode !== "primary")
       .map((agent) => ({
         id: `agent:${agent.name}`,
         kind: "agent" as const,
@@ -232,7 +311,7 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
         type: "builtin" as const,
       })),
   ])
-  const commands = createMemo<ComposerSuggestion[]>(() =>
+  const commands = createMemo<PromptInputV2Suggestion[]>(() =>
     slashCommands().map((item) => ({
       id: item.id,
       kind: "command",
@@ -243,46 +322,11 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
       keybind: command.keybindParts(item.id),
     })),
   )
-  const variants = createMemo(() => ["default", ...adapter.controls().model.selection.variant.list()])
-  const submission = createComposerSubmit({
-    adapter,
-    mode,
-    editor: () => editor,
-    queueScroll: () => requestAnimationFrame(() => editor?.scrollIntoView({ block: "nearest" })),
-    addToHistory: (value, mode) => controller.addHistory(value, mode),
-    resetHistory: () => controller.resetHistory(),
-    setMode: (next) => controller.dispatch({ type: next === "shell" ? "mode.shell" : "mode.normal" }),
-    closePopover: () => controller.dispatch({ type: "popover.close" }),
-    notify: {
-      missingSelection: () =>
-        showToast({
-          title: language.t("prompt.toast.modelAgentRequired.title"),
-          description: language.t("prompt.toast.modelAgentRequired.description"),
-        }),
-      failed: (kind, error) =>
-        showToast({
-          title: language.t(
-            kind === "shell"
-              ? "prompt.toast.shellSendFailed.title"
-              : kind === "command"
-                ? "prompt.toast.commandSendFailed.title"
-                : "prompt.toast.promptSendFailed.title",
-          ),
-          description:
-            kind === "command"
-              ? formatServerError(error, language.t, language.t("common.requestFailed"))
-              : composerErrorMessage(language, error),
-        }),
-    },
-    comments: {
-      capture: historyComments,
-      clear: comments.clear,
-      restore: restoreHistoryComments,
-    },
-  })
-  const controller = createComposerEditor({
-    store: prompt.store,
+  const variants = createMemo(() => ["default", ...props.controls.model.selection.variant.list()])
+  const controller = createPromptInputV2Controller({
+    store: () => prompt.capture().store,
     state: interaction,
+    identity: () => prompt.capture(),
     history: {
       entries: (mode) =>
         history.entries(mode).map((value) => {
@@ -307,14 +351,14 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
       if (item?.commentID) comments.remove(item.path, item.commentID)
     },
     openAttachment: (attachment) =>
-      dialog.show(() => createComponent(ImagePreview, { src: attachment.blob.url, alt: attachment.filename })),
+      dialog.show(() => <ImagePreview src={attachment.blob.url} alt={attachment.filename} />),
     openContext(key) {
       const item = controller.contextItem(key)
-      if (item) openComment(item, adapter.controls(), layout, files, comments)
+      if (item) openComment(item, props, layout, files, comments)
     },
     onEditor(element) {
       editor = element as HTMLDivElement
-      if (adapter.kind === "active-session") adapter.setEditor(editor)
+      props.ref?.(editor)
     },
     onSuggestionSelect(item) {
       if (item.kind !== "command") return
@@ -343,35 +387,34 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
       store: platform.draftStore?.putBlob,
     },
     view: {
-      placeholder,
+      placeholder: designPlaceholder,
       get agent() {
-        const agents = adapter.controls().agents
-        return agents.visible && agents.options.length > 0
+        return props.controls.agents.visible && props.controls.agents.options.length > 0
           ? {
-              options: () => adapter.controls().agents.options.map((name) => ({ id: name, label: name })),
-              current: () => adapter.controls().agents.current,
-              onSelect: (value: string) => adapter.controls().agents.select(value),
+              options: () => props.controls.agents.options.map((name) => ({ id: name, label: name })),
+              current: () => props.controls.agents.current,
+              onSelect: (value: string) => props.controls.agents.select(value),
               keybind: () => command.keybindParts("agent.cycle"),
             }
           : undefined
       },
       variant: {
         options: () => variants().map((value) => ({ id: value, label: value })),
-        current: () => adapter.controls().model.selection.variant.current() ?? "default",
-        onSelect: (value) => adapter.controls().model.selection.variant.set(value === "default" ? undefined : value),
+        current: () => props.controls.model.selection.variant.current() ?? "default",
+        onSelect: (value) => props.controls.model.selection.variant.set(value === "default" ? undefined : value),
         keybind: () => command.keybindParts("model.variant.cycle"),
       },
       submit: {
         stopping,
-        working: adapter.working,
-        onSubmit: () => void submission.submit(new Event("submit")),
-        onStop: () => void submission.stop(),
+        working,
+        onSubmit: () => void submission.handleSubmit(new Event("submit")),
+        onStop: () => void submission.abort(),
       },
     },
   })
-  Object.defineProperty(controller, "model", { get: () => adapter.controls().model })
+  Object.defineProperty(controller, "model", { get: () => props.controls.model })
 
-  command.register("composer-editor", () => [
+  command.register("prompt-input", () => [
     {
       id: "file.attach",
       title: language.t("prompt.action.attachFile"),
@@ -398,23 +441,122 @@ export function createComposerModel(adapter: ComposerAdapter): ComposerModel {
     },
   ])
 
-  return controller as ComposerModel
+  createEffect(
+    on(
+      () => props.edit?.id,
+      (id) => {
+        const edit = props.edit
+        if (!id || !edit) return
+        prompt.context.items().forEach((item) => prompt.context.remove(item.key))
+        edit.context.forEach((item) =>
+          prompt.context.add({
+            type: item.type,
+            path: item.path,
+            selection: item.selection,
+            comment: item.comment,
+            commentID: item.commentID,
+            commentOrigin: item.commentOrigin,
+            preview: item.preview,
+          }),
+        )
+        controller.dispatch({ type: "mode.normal" })
+        controller.resetHistory()
+        prompt.set(edit.prompt, promptLength(edit.prompt))
+        controller.restoreFocus()
+        props.onEditLoaded?.()
+      },
+      { defer: true },
+    ),
+  )
+
+  return controller as PromptInputV2ComposerController
 }
 
-function composerErrorMessage(language: ReturnType<typeof useLanguage>, error: unknown) {
-  if (error && typeof error === "object" && "message" in error && typeof error.message === "string") {
-    return error.message
-  }
-  if (error && typeof error === "object" && "data" in error) {
-    const data = (error as { data?: { message?: string } }).data
-    if (data?.message) return data.message
-  }
-  return language.t("common.requestFailed")
+function PromptInputV2ModelControl(props: {
+  loading: boolean
+  paid: boolean
+  title: string
+  keybind: string[]
+  model: PromptInputV2ComposerController["model"]["selection"]
+  providerID?: string
+  modelName: string
+  onClose: () => void
+  onUnpaidClick: () => void
+}) {
+  const shouldAnimate = createMemo<boolean>((previous) => previous ?? props.loading)
+  const content = () => (
+    <>
+      <Show when={props.providerID}>
+        {(providerID) => (
+          <ProviderIcon
+            id={providerID()}
+            class="size-4 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity duration-150"
+            style={{ "will-change": "opacity", transform: "translateZ(0)" }}
+          />
+        )}
+      </Show>
+      <span class="truncate leading-4">{props.modelName}</span>
+      <span class="-ml-0.5 -mr-1 flex shrink-0">
+        <Icon name="chevron-down" />
+      </span>
+    </>
+  )
+  return (
+    <Show when={!props.loading}>
+      <Tooltip
+        placement="top"
+        gutter={4}
+        value={
+          <>
+            {props.title}
+            <Keybind keys={props.keybind} variant="neutral" />
+          </>
+        }
+      >
+        <Show
+          when={props.paid}
+          fallback={
+            <Button
+              data-action="prompt-model"
+              data-control-type="dialog"
+              variant="ghost-muted"
+              size="normal"
+              class="min-w-0 max-w-[220px] justify-start ![font-weight:440] group"
+              classList={{ "animate-in fade-in": shouldAnimate() }}
+              style={{ height: "28px" }}
+              onClick={props.onUnpaidClick}
+            >
+              {content()}
+            </Button>
+          }
+        >
+          <ModelSelectorPopoverV2
+            model={props.model}
+            trigger={(triggerProps) => (
+              <Button
+                {...triggerProps}
+                variant="ghost-muted"
+                size="normal"
+                style={{ height: "28px" }}
+                class="min-w-0 max-w-[220px] justify-start ![font-weight:440] group"
+                classList={{ "animate-in fade-in": shouldAnimate() }}
+                data-action="prompt-model"
+                data-control-type="popover"
+              >
+                {content()}
+              </Button>
+            )}
+            onClose={props.onClose}
+          />
+        </Show>
+      </Tooltip>
+    </Show>
+  )
 }
 
 function openComment(
   item: { path: string; commentID?: string; commentOrigin?: "review" | "file" },
-  controls: ComposerControls,
+  props: PromptInputV2ControllerProps,
   layout: ReturnType<typeof useLayout>,
   files: ReturnType<typeof useFile>,
   comments: ReturnType<typeof useComments>,
@@ -433,16 +575,16 @@ function openComment(
     })
   }
   const review = item.commentOrigin === "review"
-  if (!controls.session.reviewPanel.opened()) controls.session.reviewPanel.open()
+  if (!props.controls.session.reviewPanel.opened()) props.controls.session.reviewPanel.open()
   if (review) {
     layout.fileTree.setTab("changes")
-    controls.session.tabs.setActive("review")
+    props.controls.session.tabs.setActive("review")
     queueFocus()
     return
   }
   layout.fileTree.setTab("all")
   const tab = files.tab(item.path)
-  void controls.session.tabs.open(tab)
-  controls.session.tabs.setActive(tab)
+  void props.controls.session.tabs.open(tab)
+  props.controls.session.tabs.setActive(tab)
   void Promise.resolve(files.load(item.path)).finally(() => queueFocus())
 }

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

@@ -0,0 +1,17 @@
+import type { Component } from "solid-js"
+import { PromptInputV2Composer, usePromptInputV2Controller } from "./prompt-input-v2"
+import { createPromptInputHistory, type PromptInputHistory } from "./prompt-input/history-store"
+import type {
+  PromptInputControls,
+  PromptInputProps,
+  PromptInputState,
+  PromptInputSubmission,
+} from "./prompt-input/contracts"
+
+export { createPromptInputHistory }
+export type { PromptInputControls, PromptInputHistory, PromptInputProps, PromptInputState, PromptInputSubmission }
+
+export const PromptInput: Component<PromptInputProps> = (props) => {
+  const controller = usePromptInputV2Controller(props)
+  return <PromptInputV2Composer class={props.class} controller={controller} />
+}

packages/app/src/components/prompt-input/attachments.test.ts

@@ -0,0 +1,108 @@
+import { describe, expect, test } from "bun:test"
+import { attachmentMime, pickAttachmentFiles } from "./files"
+import { pasteMode } from "./paste"
+
+describe("attachmentMime", () => {
+  test("keeps PDFs when the browser reports the mime", async () => {
+    const file = new File(["%PDF-1.7"], "guide.pdf", { type: "application/pdf" })
+    expect(await attachmentMime(file)).toBe("application/pdf")
+  })
+
+  test("normalizes structured text types to text/plain", async () => {
+    const file = new File(['{"ok":true}\n'], "data.json", { type: "application/json" })
+    expect(await attachmentMime(file)).toBe("text/plain")
+  })
+
+  test("accepts text files even with a misleading browser mime", async () => {
+    const file = new File(["export const x = 1\n"], "main.ts", { type: "video/mp2t" })
+    expect(await attachmentMime(file)).toBe("text/plain")
+  })
+
+  test("rejects binary files", async () => {
+    const file = new File([Uint8Array.of(0, 255, 1, 2)], "blob.bin", { type: "application/octet-stream" })
+    expect(await attachmentMime(file)).toBeUndefined()
+  })
+})
+
+describe("pickAttachmentFiles", () => {
+  test("reads the current project directory for every native picker invocation", async () => {
+    const paths: string[] = []
+    const files: File[] = []
+    const file = new File(["hello"], "hello.txt", { type: "text/plain" })
+    let directory = "C:\\Projects\\LoremIpsum"
+    const picker = async (options?: { defaultPath?: string }, onFile?: (file: File) => Promise<unknown>) => {
+      paths.push(options?.defaultPath ?? "")
+      await onFile?.(file)
+    }
+
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    directory = "C:\\Projects\\DolorSit"
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    expect(files).toEqual([file, file])
+    expect(paths).toEqual(["C:\\Projects\\LoremIpsum", "C:\\Projects\\DolorSit"])
+  })
+
+  test("uses the browser file input when no native picker exists", async () => {
+    let fallback = 0
+    pickAttachmentFiles({
+      directory: () => "/projects/consectetur-adipiscing",
+      fallback: () => {
+        fallback += 1
+      },
+      onFile: async () => undefined,
+      onError: () => undefined,
+    })
+    expect(fallback).toBe(1)
+  })
+
+  test("reports native picker failures without rejecting", async () => {
+    const error = new Error("picker unavailable")
+    const errors: unknown[] = []
+    const handled = Promise.withResolvers<void>()
+    pickAttachmentFiles({
+      picker: async () => Promise.reject(error),
+      directory: () => "C:\\Projects\\LoremIpsum",
+      fallback: () => undefined,
+      onFile: async () => undefined,
+      onError: (cause) => {
+        errors.push(cause)
+        handled.resolve()
+      },
+    })
+    await handled.promise
+    expect(errors).toEqual([error])
+  })
+})
+
+describe("pasteMode", () => {
+  test("uses native paste for short single-line text", () => {
+    expect(pasteMode("hello world")).toBe("native")
+  })
+
+  test("uses manual paste for multiline text", () => {
+    expect(
+      pasteMode(`{
+  "ok": true
+}`),
+    ).toBe("manual")
+    expect(pasteMode("a\r\nb")).toBe("manual")
+  })
+
+  test("uses manual paste for large text", () => {
+    expect(pasteMode("x".repeat(8000))).toBe("manual")
+  })
+})

packages/app/src/components/prompt-input/attachments.ts

@@ -0,0 +1,213 @@
+import { onMount } from "solid-js"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { showToast } from "@/utils/toast"
+import { type ContentPart, type ImageAttachmentPart, type usePrompt } from "@/context/prompt"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { uuid } from "@/utils/uuid"
+import { getCursorPosition } from "./editor-dom"
+import { createBlobReference, type DraftStore } from "@/utils/draft-store"
+import { attachmentMime } from "./files"
+import { normalizePaste, pasteMode } from "./paste"
+
+type PromptTarget = Pick<ReturnType<ReturnType<typeof usePrompt>["capture"]>, "current" | "cursor" | "set">
+type AttachmentTarget = { prompt: PromptTarget; cursor: number | undefined }
+
+type PromptAttachmentsCoreInput = {
+  capture: () => PromptTarget
+  editor: () => HTMLDivElement | undefined
+  focusEditor?: () => void
+  addPart?: (part: ContentPart) => boolean
+  warn?: () => void
+  readClipboardImage?: () => Promise<File | null>
+  getPathForFile?: (file: File) => string
+  draftStore?: DraftStore
+}
+
+export type PromptAttachmentsInput = {
+  prompt: ReturnType<typeof usePrompt>
+  editor: () => HTMLDivElement | undefined
+  isDialogActive: () => boolean
+  setDraggingType: (type: "image" | "@mention" | null) => void
+  focusEditor: () => void
+  addPart: (part: ContentPart) => boolean
+  readClipboardImage?: () => Promise<File | null>
+  getPathForFile?: (file: File) => string
+}
+
+export function createPromptAttachmentsCore(input: PromptAttachmentsCoreInput) {
+  const capture = (): AttachmentTarget | undefined => {
+    const prompt = input.capture()
+    const editor = input.editor()
+    if (!editor) return
+    return { prompt, cursor: prompt.cursor() ?? getCursorPosition(editor) }
+  }
+
+  const add = async (file: File, toast = true, target = capture()) => {
+    if (!target) return false
+    const mime = await attachmentMime(file)
+    if (!mime) {
+      if (toast) input.warn?.()
+      return false
+    }
+
+    const attachment: ImageAttachmentPart = {
+      type: "image",
+      id: uuid(),
+      filename: file.name,
+      sourcePath: input.getPathForFile?.(file) || undefined,
+      mime,
+      blob: input.draftStore ? await input.draftStore.putBlob(file) : await createBlobReference(file),
+    }
+    target.prompt.set([...target.prompt.current(), attachment], target.cursor)
+    return true
+  }
+
+  const addAttachment = (file: File) => add(file)
+
+  const addAttachments = async (files: File[], toast = true, target = capture()) => {
+    let found = false
+
+    for (const file of files) {
+      const ok = await add(file, false, target)
+      if (ok) found = true
+    }
+
+    if (!found && files.length > 0 && toast) input.warn?.()
+    return found
+  }
+
+  const addClipboardAttachment = async (pending: Promise<File | null>, target = capture()) => {
+    const file = await pending
+    if (!file) return false
+    return add(file, true, target)
+  }
+
+  const removeAttachment = (id: string) => {
+    const target = input.capture()
+    const current = target.current()
+    const next = current.filter((part) => part.type !== "image" || part.id !== id)
+    target.set(next, target.cursor())
+  }
+
+  const handlePaste = async (event: ClipboardEvent) => {
+    const clipboardData = event.clipboardData
+    if (!clipboardData) return
+    const target = capture()
+    if (!target) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const files = Array.from(clipboardData.items).flatMap((item) => {
+      if (item.kind !== "file") return []
+      const file = item.getAsFile()
+      return file ? [file] : []
+    })
+
+    if (files.length > 0) {
+      await addAttachments(files, true, target)
+      return
+    }
+
+    const plainText = clipboardData.getData("text/plain") ?? ""
+
+    // Desktop: Browser clipboard has no images and no text, try platform's native clipboard for images
+    if (input.readClipboardImage && !plainText) {
+      if (await addClipboardAttachment(input.readClipboardImage(), target)) return
+    }
+
+    if (!plainText) return
+
+    const text = normalizePaste(plainText)
+
+    const put = () => {
+      if (input.addPart?.({ type: "text", content: text, start: 0, end: 0 })) return true
+      input.focusEditor?.()
+      return input.addPart?.({ type: "text", content: text, start: 0, end: 0 }) ?? false
+    }
+
+    if (pasteMode(text) === "manual") {
+      put()
+      return
+    }
+
+    const inserted = typeof document.execCommand === "function" && document.execCommand("insertText", false, text)
+    if (inserted) return
+
+    put()
+  }
+
+  return {
+    addAttachment,
+    addAttachments,
+    addClipboardAttachment,
+    removeAttachment,
+    handlePaste,
+  }
+}
+
+export function createPromptAttachments(input: PromptAttachmentsInput) {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const attachments = createPromptAttachmentsCore({
+    ...input,
+    draftStore: platform.draftStore,
+    capture: input.prompt.capture,
+    warn: () => {
+      showToast({
+        title: language.t("prompt.toast.pasteUnsupported.title"),
+        description: language.t("prompt.toast.pasteUnsupported.description"),
+      })
+    },
+  })
+
+  const handleGlobalDragOver = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    const hasFiles = event.dataTransfer?.types.includes("Files")
+    const hasText = event.dataTransfer?.types.includes("text/plain")
+    if (hasFiles) {
+      input.setDraggingType("image")
+    } else if (hasText) {
+      input.setDraggingType("@mention")
+    }
+  }
+
+  const handleGlobalDragLeave = (event: DragEvent) => {
+    if (input.isDialogActive()) return
+    if (!event.relatedTarget) {
+      input.setDraggingType(null)
+    }
+  }
+
+  const handleGlobalDrop = async (event: DragEvent) => {
+    if (input.isDialogActive()) return
+
+    event.preventDefault()
+    input.setDraggingType(null)
+
+    const plainText = event.dataTransfer?.getData("text/plain")
+    const filePrefix = "file:"
+    if (plainText?.startsWith(filePrefix)) {
+      const filePath = plainText.slice(filePrefix.length)
+      input.focusEditor()
+      input.addPart({ type: "file", path: filePath, content: "@" + filePath, start: 0, end: 0 })
+      return
+    }
+
+    const dropped = event.dataTransfer?.files
+    if (!dropped) return
+
+    await attachments.addAttachments(Array.from(dropped))
+  }
+
+  onMount(() => {
+    makeEventListener(document, "dragover", handleGlobalDragOver)
+    makeEventListener(document, "dragleave", handleGlobalDragLeave)
+    makeEventListener(document, "drop", handleGlobalDrop)
+  })
+
+  return attachments
+}

packages/app/src/components/prompt-input/build-prompt-request.test.ts

@@ -1,7 +1,6 @@
 import { describe, expect, test } from "bun:test"
-import { Skill } from "@opencode-ai/schema/skill"
-import type { Prompt } from "@/composer/state"
-import { buildPromptRequest } from "./request"
+import type { Prompt } from "@/context/prompt"
+import { buildPromptRequest } from "./build-prompt-request"
 
 describe("buildPromptRequest", () => {
   test("builds text, files, and agents from the prompt", () => {
@@ -319,30 +318,4 @@ describe("buildPromptRequest", () => {
     // Should preserve .. segments (backend normalizes)
     expect(file!.uri).toContain("/..")
   })
-
-  test("keeps skill mentions out of file attachments", () => {
-    const skill = {
-      id: "skill-review",
-      name: "review",
-    }
-    const result = buildPromptRequest({
-      prompt: [
-        {
-          type: "skill",
-          id: Skill.ID.make(skill.id),
-          name: Skill.Name.make(skill.name),
-          content: "@review",
-          start: 0,
-          end: 7,
-        },
-      ],
-      context: [],
-      images: [],
-      text: "@review",
-      sessionDirectory: "/repo",
-    })
-
-    expect(result.files).toEqual([])
-    expect(result.skills).toEqual([{ id: skill.id, name: skill.name, mention: { start: 0, end: 7, text: "@review" } }])
-  })
 })

packages/app/src/components/prompt-input/build-prompt-request.ts

@@ -1,8 +1,8 @@
 import { getFilename } from "@opencode-ai/util/path"
-import type { FileSelection } from "@/workspaces/files/model"
-import { encodeFilePath } from "@/workspaces/files/path"
-import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt, SkillPart } from "@/composer/state"
-import { formatCommentNote, type PromptComment } from "@/composer/comment-note"
+import type { FileSelection } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
+import type { AgentPart, FileAttachmentPart, ImageAttachmentPart, Prompt } from "@/context/prompt"
+import { formatCommentNote, type PromptComment } from "@/utils/comment-note"
 
 // Network fields feed both boundaries; display fields keep desktop-only rendering details in the local echo.
 type PromptRequest = {
@@ -10,7 +10,6 @@ type PromptRequest = {
   displayText: string
   files: { uri: string; mime: string; name?: string; mention?: { start: number; end: number; text: string } }[]
   agents: { name: string; mention?: { start: number; end: number; text: string } }[]
-  skills: { id: string; name: string; mention?: { start: number; end: number; text: string } }[]
   comments: PromptComment[]
 }
 
@@ -55,14 +54,8 @@ const parseCommentMentions = (comment: string) => {
 
 const isFileAttachment = (part: Prompt[number]): part is FileAttachmentPart => part.type === "file"
 const isAgentAttachment = (part: Prompt[number]): part is AgentPart => part.type === "agent"
-const isSkillAttachment = (part: Prompt[number]): part is SkillPart => part.type === "skill"
 
 export function buildPromptRequest(input: BuildPromptRequestInput): PromptRequest {
-  const skills = input.prompt.filter(isSkillAttachment).map((attachment) => ({
-    id: attachment.id,
-    name: attachment.name,
-    mention: { start: attachment.start, end: attachment.end, text: attachment.content },
-  }))
   const files = input.prompt.filter(isFileAttachment).map((attachment) => {
     const path = absolute(input.sessionDirectory, attachment.path)
     return {
@@ -117,7 +110,6 @@ export function buildPromptRequest(input: BuildPromptRequestInput): PromptReques
     displayText: input.text,
     files: [...files, ...context, ...images],
     agents,
-    skills,
     comments,
   }
 }

packages/app/src/components/prompt-input/contracts.ts

@@ -0,0 +1,57 @@
+import type { useLocal } from "@/context/local"
+import type { Prompt, usePrompt } from "@/context/prompt"
+import type { PromptInputHistory } from "./history-store"
+import type { FollowupDraft } from "./submit"
+
+export type PromptInputState = ReturnType<typeof usePrompt>
+
+export type PromptInputSubmission = {
+  abort: () => Promise<void> | void
+  handleSubmit: (event: Event) => Promise<void> | void
+}
+
+export type PromptInputControls = {
+  agents: {
+    available: { name: string; hidden?: boolean; mode: string }[]
+    options: string[]
+    current: string
+    loading: boolean
+    visible: boolean
+    select: (name: string | undefined) => void
+  }
+  model: {
+    selection: ReturnType<typeof useLocal>["model"]
+    paid: boolean
+    loading: boolean
+  }
+  session: {
+    id?: string
+    tabs: {
+      active: () => string | undefined
+      all: () => string[]
+      open: (tab: string) => void | Promise<void>
+      setActive: (tab: string) => void
+    }
+    reviewPanel: {
+      opened: () => boolean
+      open: () => void
+    }
+  }
+}
+
+export interface PromptInputProps {
+  class?: string
+  state?: PromptInputState
+  history?: PromptInputHistory
+  submission?: PromptInputSubmission
+  controls: PromptInputControls
+  ref?: (el: HTMLDivElement) => void
+  newSessionWorktree?: string
+  onNewSessionWorktreeReset?: () => void
+  edit?: { id: string; prompt: Prompt; context: FollowupDraft["context"] }
+  onEditLoaded?: () => void
+  shouldQueue?: () => boolean
+  onQueue?: (draft: FollowupDraft) => void
+  onAbort?: () => void
+  onSubmit?: () => void
+}

packages/app/src/components/prompt-input/editor-dom.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "bun:test"
+import { createTextFragment, getCursorPosition, getNodeLength, getTextLength, setCursorPosition } from "./editor-dom"
+
+describe("prompt-input editor dom", () => {
+  test("createTextFragment preserves newlines with consecutive br nodes", () => {
+    const fragment = createTextFragment("foo\n\nbar")
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(4)
+    expect(container.childNodes[0]?.textContent).toBe("foo")
+    expect((container.childNodes[1] as HTMLElement).tagName).toBe("BR")
+    expect((container.childNodes[2] as HTMLElement).tagName).toBe("BR")
+    expect(container.childNodes[3]?.textContent).toBe("bar")
+  })
+
+  test("createTextFragment keeps trailing newline as terminal break", () => {
+    const fragment = createTextFragment("foo\n")
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(2)
+    expect(container.childNodes[0]?.textContent).toBe("foo")
+    expect((container.childNodes[1] as HTMLElement).tagName).toBe("BR")
+  })
+
+  test("createTextFragment avoids break-node explosion for large multiline content", () => {
+    const content = Array.from({ length: 220 }, () => "line").join("\n")
+    const fragment = createTextFragment(content)
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(1)
+    expect(container.childNodes[0]?.nodeType).toBe(Node.TEXT_NODE)
+    expect(container.textContent).toBe(content)
+  })
+
+  test("createTextFragment keeps terminal break in large multiline fallback", () => {
+    const content = `${Array.from({ length: 220 }, () => "line").join("\n")}\n`
+    const fragment = createTextFragment(content)
+    const container = document.createElement("div")
+    container.appendChild(fragment)
+
+    expect(container.childNodes.length).toBe(2)
+    expect(container.childNodes[0]?.textContent).toBe(content.slice(0, -1))
+    expect((container.childNodes[1] as HTMLElement).tagName).toBe("BR")
+  })
+
+  test("length helpers treat breaks as one char and ignore zero-width chars", () => {
+    const container = document.createElement("div")
+    container.appendChild(document.createTextNode("ab\u200B"))
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("cd"))
+
+    expect(getNodeLength(container.childNodes[0]!)).toBe(2)
+    expect(getNodeLength(container.childNodes[1]!)).toBe(1)
+    expect(getTextLength(container)).toBe(5)
+  })
+
+  test("setCursorPosition and getCursorPosition round-trip with pills and breaks", () => {
+    const container = document.createElement("div")
+    const pill = document.createElement("span")
+    pill.dataset.type = "file"
+    pill.textContent = "@file"
+    container.appendChild(document.createTextNode("ab"))
+    container.appendChild(pill)
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("cd"))
+    document.body.appendChild(container)
+
+    setCursorPosition(container, 2)
+    expect(getCursorPosition(container)).toBe(2)
+
+    setCursorPosition(container, 7)
+    expect(getCursorPosition(container)).toBe(7)
+
+    setCursorPosition(container, 8)
+    expect(getCursorPosition(container)).toBe(8)
+
+    container.remove()
+  })
+
+  test("setCursorPosition and getCursorPosition round-trip across blank lines", () => {
+    const container = document.createElement("div")
+    container.appendChild(document.createTextNode("a"))
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createElement("br"))
+    container.appendChild(document.createTextNode("b"))
+    document.body.appendChild(container)
+
+    setCursorPosition(container, 2)
+    expect(getCursorPosition(container)).toBe(2)
+
+    setCursorPosition(container, 3)
+    expect(getCursorPosition(container)).toBe(3)
+
+    container.remove()
+  })
+})

packages/app/src/components/prompt-input/editor-dom.ts

@@ -1,3 +1,32 @@
+const MAX_BREAKS = 200
+
+export function createTextFragment(content: string): DocumentFragment {
+  const fragment = document.createDocumentFragment()
+  let breaks = 0
+  for (const char of content) {
+    if (char !== "\n") continue
+    breaks += 1
+    if (breaks > MAX_BREAKS) {
+      const tail = content.endsWith("\n")
+      const text = tail ? content.slice(0, -1) : content
+      if (text) fragment.appendChild(document.createTextNode(text))
+      if (tail) fragment.appendChild(document.createElement("br"))
+      return fragment
+    }
+  }
+
+  const segments = content.split("\n")
+  segments.forEach((segment, index) => {
+    if (segment) {
+      fragment.appendChild(document.createTextNode(segment))
+    }
+    if (index < segments.length - 1) {
+      fragment.appendChild(document.createElement("br"))
+    }
+  })
+  return fragment
+}
+
 export function getNodeLength(node: Node): number {
   if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR") return 1
   return (node.textContent ?? "").replace(/\u200B/g, "").length
@@ -30,7 +59,9 @@ export function setCursorPosition(parent: HTMLElement, position: number) {
   while (node) {
     const length = getNodeLength(node)
     const isText = node.nodeType === Node.TEXT_NODE
-    const isPill = node.nodeType === Node.ELEMENT_NODE && !!(node as HTMLElement).dataset.mention
+    const isPill =
+      node.nodeType === Node.ELEMENT_NODE &&
+      ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
     const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
 
     if (isText && remaining <= length) {
@@ -85,3 +116,33 @@ export function setCursorPosition(parent: HTMLElement, position: number) {
   fallbackSelection?.removeAllRanges()
   fallbackSelection?.addRange(fallbackRange)
 }
+
+export function setRangeEdge(parent: HTMLElement, range: Range, edge: "start" | "end", offset: number) {
+  let remaining = offset
+  const nodes = Array.from(parent.childNodes)
+
+  for (const node of nodes) {
+    const length = getNodeLength(node)
+    const isText = node.nodeType === Node.TEXT_NODE
+    const isPill =
+      node.nodeType === Node.ELEMENT_NODE &&
+      ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
+    const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
+
+    if (isText && remaining <= length) {
+      if (edge === "start") range.setStart(node, remaining)
+      if (edge === "end") range.setEnd(node, remaining)
+      return
+    }
+
+    if ((isPill || isBreak) && remaining <= length) {
+      if (edge === "start" && remaining === 0) range.setStartBefore(node)
+      if (edge === "start" && remaining > 0) range.setStartAfter(node)
+      if (edge === "end" && remaining === 0) range.setEndBefore(node)
+      if (edge === "end" && remaining > 0) range.setEndAfter(node)
+      return
+    }
+
+    remaining -= length
+  }
+}

packages/app/src/components/prompt-input/files.ts

@@ -0,0 +1,98 @@
+import { ACCEPTED_FILE_TYPES, ACCEPTED_IMAGE_TYPES } from "@/constants/file-picker"
+
+export { ACCEPTED_FILE_TYPES }
+
+type AttachmentPicker = (
+  options: {
+    defaultPath?: string
+    multiple?: boolean
+    accept?: string[]
+  },
+  onFile: (file: File) => Promise<unknown>,
+) => Promise<void>
+
+export function pickAttachmentFiles(input: {
+  picker?: AttachmentPicker
+  directory: () => string
+  fallback: () => void
+  onFile: (file: File) => Promise<unknown>
+  onError: (error: unknown) => void
+}) {
+  if (!input.picker) {
+    input.fallback()
+    return
+  }
+  void input
+    .picker(
+      {
+        defaultPath: input.directory(),
+        multiple: true,
+        accept: ACCEPTED_FILE_TYPES,
+      },
+      input.onFile,
+    )
+    .catch(input.onError)
+}
+
+const IMAGE_MIMES = new Set(ACCEPTED_IMAGE_TYPES)
+const IMAGE_EXTS = new Map([
+  ["gif", "image/gif"],
+  ["jpeg", "image/jpeg"],
+  ["jpg", "image/jpeg"],
+  ["png", "image/png"],
+  ["webp", "image/webp"],
+])
+const TEXT_MIMES = new Set([
+  "application/json",
+  "application/ld+json",
+  "application/toml",
+  "application/x-toml",
+  "application/x-yaml",
+  "application/xml",
+  "application/yaml",
+])
+
+const SAMPLE = 4096
+
+function kind(type: string) {
+  return type.split(";", 1)[0]?.trim().toLowerCase() ?? ""
+}
+
+function ext(name: string) {
+  const idx = name.lastIndexOf(".")
+  if (idx === -1) return ""
+  return name.slice(idx + 1).toLowerCase()
+}
+
+function textMime(type: string) {
+  if (!type) return false
+  if (type.startsWith("text/")) return true
+  if (TEXT_MIMES.has(type)) return true
+  if (type.endsWith("+json")) return true
+  return type.endsWith("+xml")
+}
+
+function textBytes(bytes: Uint8Array) {
+  if (bytes.length === 0) return true
+  let count = 0
+  for (const byte of bytes) {
+    if (byte === 0) return false
+    if (byte < 9 || (byte > 13 && byte < 32)) count += 1
+  }
+  return count / bytes.length <= 0.3
+}
+
+export async function attachmentMime(file: File) {
+  const type = kind(file.type)
+  if (IMAGE_MIMES.has(type)) return type
+  if (type === "application/pdf") return type
+
+  const suffix = ext(file.name)
+  const fallback = IMAGE_EXTS.get(suffix) ?? (suffix === "pdf" ? "application/pdf" : undefined)
+  if ((!type || type === "application/octet-stream") && fallback) return fallback
+
+  if (textMime(type)) return "text/plain"
+  const bytes = new Uint8Array(await file.slice(0, SAMPLE).arrayBuffer())
+  if (!textBytes(bytes)) return
+  return "text/plain"
+}

packages/app/src/components/prompt-input/history-store.ts

@@ -1,15 +1,15 @@
 import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
-import type { Prompt } from "@/composer/state"
-import { Persist, persisted } from "@/runtime/persistence/storage"
+import type { Prompt } from "@/context/prompt"
+import { Persist, persisted } from "@/utils/persist"
 import {
   clonePromptHistoryComments,
   clonePromptParts,
   prependHistoryEntry,
   type PromptHistoryComment,
   type PromptHistoryStoredEntry,
-} from "./entry"
+} from "./history"
 
-export type ComposerHistoryStore = {
+export type PromptInputHistory = {
   entries: (mode: "normal" | "shell") => PromptHistoryStoredEntry[]
   add: (prompt: Prompt, mode: "normal" | "shell", comments: PromptHistoryComment[]) => void
 }
@@ -31,12 +31,12 @@ export function upgradeHistoryState(value: unknown) {
   }
 }
 
-function createComposerHistoryStore(
+function createPromptInputHistoryStore(
   normal: Store<PromptHistoryState>,
   setNormal: SetStoreFunction<PromptHistoryState>,
   shell: Store<PromptHistoryState>,
   setShell: SetStoreFunction<PromptHistoryState>,
-): ComposerHistoryStore {
+): PromptInputHistory {
   return {
     entries: (mode) => (mode === "shell" ? shell.entries : normal.entries),
     add(prompt, mode, comments) {
@@ -49,7 +49,13 @@ function createComposerHistoryStore(
   }
 }
 
-export function createComposerHistory() {
+export function createPromptInputHistory(): PromptInputHistory {
+  const [normal, setNormal] = createStore<PromptHistoryState>({ entries: [] })
+  const [shell, setShell] = createStore<PromptHistoryState>({ entries: [] })
+  return createPromptInputHistoryStore(normal, setNormal, shell, setShell)
+}
+
+export function createPersistedPromptInputHistory() {
   const [normal, setNormal, normalInit] = persisted(
     { ...Persist.prompt(Persist.global("prompt-history")), migrate: upgradeHistoryState },
     createStore<PromptHistoryState>({ entries: [] }),
@@ -58,7 +64,7 @@ export function createComposerHistory() {
     { ...Persist.prompt(Persist.global("prompt-history-shell")), migrate: upgradeHistoryState },
     createStore<PromptHistoryState>({ entries: [] }),
   )
-  const history = createComposerHistoryStore(normal, setNormal, shell, setShell)
+  const history = createPromptInputHistoryStore(normal, setNormal, shell, setShell)
   return {
     ...history,
     add(prompt: Prompt, mode: "normal" | "shell", comments: PromptHistoryComment[]) {

packages/app/src/components/prompt-input/history.test.ts

@@ -0,0 +1,154 @@
+import { describe, expect, test } from "bun:test"
+import type { Prompt } from "@/context/prompt"
+import {
+  canNavigateHistoryAtCursor,
+  clonePromptParts,
+  navigatePromptHistory,
+  prependHistoryEntry,
+  promptLength,
+  type PromptHistoryComment,
+} from "./history"
+import { upgradeHistoryState } from "./history-store"
+
+const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
+
+const text = (value: string): Prompt => [{ type: "text", content: value, start: 0, end: value.length }]
+const entry = (value: string) => ({ prompt: text(value), comments: [] })
+const comment = (id: string, value = "note"): PromptHistoryComment => ({
+  id,
+  path: "src/a.ts",
+  selection: { start: 2, end: 4 },
+  comment: value,
+  time: 1,
+  origin: "review",
+  preview: "const a = 1",
+})
+
+describe("prompt-input history", () => {
+  test("prependHistoryEntry skips empty prompt and deduplicates consecutive entries", () => {
+    const first = prependHistoryEntry([], DEFAULT_PROMPT)
+    expect(first).toEqual([])
+
+    const commentsOnly = prependHistoryEntry([], DEFAULT_PROMPT, [comment("c1")])
+    expect(commentsOnly).toHaveLength(1)
+
+    const withOne = prependHistoryEntry([], text("hello"))
+    expect(withOne).toHaveLength(1)
+
+    const deduped = prependHistoryEntry(withOne, text("hello"))
+    expect(deduped).toBe(withOne)
+
+    const dedupedComments = prependHistoryEntry(commentsOnly, DEFAULT_PROMPT, [comment("c1")])
+    expect(dedupedComments).toBe(commentsOnly)
+  })
+
+  test("navigatePromptHistory restores saved prompt when moving down from newest", () => {
+    const entries = [entry("third"), entry("second"), entry("first")]
+    const up = navigatePromptHistory({
+      direction: "up",
+      entries,
+      historyIndex: -1,
+      currentPrompt: text("draft"),
+      currentComments: [comment("draft")],
+      savedPrompt: null,
+    })
+    expect(up.handled).toBe(true)
+    if (!up.handled) throw new Error("expected handled")
+    expect(up.historyIndex).toBe(0)
+    expect(up.cursor).toBe("start")
+    expect(up.entry.comments).toEqual([])
+
+    const down = navigatePromptHistory({
+      direction: "down",
+      entries,
+      historyIndex: up.historyIndex,
+      currentPrompt: text("ignored"),
+      currentComments: [],
+      savedPrompt: up.savedPrompt,
+    })
+    expect(down.handled).toBe(true)
+    if (!down.handled) throw new Error("expected handled")
+    expect(down.historyIndex).toBe(-1)
+    expect(down.entry.prompt[0]?.type === "text" ? down.entry.prompt[0].content : "").toBe("draft")
+    expect(down.entry.comments).toEqual([comment("draft")])
+  })
+
+  test("navigatePromptHistory keeps entry comments when moving through history", () => {
+    const entries = [
+      {
+        prompt: text("with comment"),
+        comments: [comment("c1")],
+      },
+    ]
+
+    const up = navigatePromptHistory({
+      direction: "up",
+      entries,
+      historyIndex: -1,
+      currentPrompt: text("draft"),
+      currentComments: [],
+      savedPrompt: null,
+    })
+
+    expect(up.handled).toBe(true)
+    if (!up.handled) throw new Error("expected handled")
+    expect(up.entry.prompt[0]?.type === "text" ? up.entry.prompt[0].content : "").toBe("with comment")
+    expect(up.entry.comments).toEqual([comment("c1")])
+  })
+
+  test("upgrades stored prompt arrays once at the persistence boundary", () => {
+    expect(upgradeHistoryState({ entries: [text("stored")] })).toEqual({
+      entries: [{ prompt: text("stored"), comments: [] }],
+    })
+  })
+
+  test("helpers clone prompt and count text content length", () => {
+    const original: Prompt = [
+      { type: "text", content: "one", start: 0, end: 3 },
+      {
+        type: "file",
+        path: "src/a.ts",
+        content: "@src/a.ts",
+        start: 3,
+        end: 12,
+        selection: { startLine: 1, startChar: 1, endLine: 2, endChar: 1 },
+      },
+      { type: "image", id: "1", filename: "img.png", mime: "image/png", blob: { id: "blob", url: "blob:test" } },
+    ]
+    const copy = clonePromptParts(original)
+    expect(copy).not.toBe(original)
+    expect(promptLength(copy)).toBe(12)
+    if (copy[1]?.type !== "file") throw new Error("expected file")
+    copy[1].selection!.startLine = 9
+    if (original[1]?.type !== "file") throw new Error("expected file")
+    expect(original[1].selection?.startLine).toBe(1)
+  })
+
+  test("canNavigateHistoryAtCursor only allows prompt boundaries", () => {
+    const value = "a\nb\nc"
+
+    expect(canNavigateHistoryAtCursor("up", value, 0)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", value, 0)).toBe(false)
+
+    expect(canNavigateHistoryAtCursor("up", value, 2)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", value, 2)).toBe(false)
+
+    expect(canNavigateHistoryAtCursor("up", value, 5)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", value, 5)).toBe(true)
+
+    expect(canNavigateHistoryAtCursor("up", "abc", 0)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", "abc", 3)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", "abc", 1)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", "abc", 1)).toBe(false)
+
+    expect(canNavigateHistoryAtCursor("up", "", 0)).toBe(true)
+    expect(canNavigateHistoryAtCursor("down", "", 0)).toBe(true)
+
+    expect(canNavigateHistoryAtCursor("up", "abc", 0, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", "abc", 3, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("down", "abc", 0, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("down", "abc", 3, true)).toBe(true)
+    expect(canNavigateHistoryAtCursor("up", "abc", 1, true)).toBe(false)
+    expect(canNavigateHistoryAtCursor("down", "abc", 1, true)).toBe(false)
+  })
+})

packages/app/src/components/prompt-input/history.ts

@@ -1,5 +1,7 @@
-import type { Prompt } from "@/composer/state"
-import type { SelectedLineRange } from "@/workspaces/files/model"
+import type { Prompt } from "@/context/prompt"
+import type { SelectedLineRange } from "@/context/file"
+
+const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
 
 export const MAX_HISTORY = 100
 
@@ -20,12 +22,20 @@ export type PromptHistoryEntry = {
 
 export type PromptHistoryStoredEntry = PromptHistoryEntry
 
+export function canNavigateHistoryAtCursor(direction: "up" | "down", text: string, cursor: number, inHistory = false) {
+  const position = Math.max(0, Math.min(cursor, text.length))
+  const atStart = position === 0
+  const atEnd = position === text.length
+  if (inHistory) return atStart || atEnd
+  if (direction === "up") return position === 0 && text.length === 0
+  return position === text.length
+}
+
 export function clonePromptParts(prompt: Prompt): Prompt {
   return prompt.map((part) => {
     if (part.type === "text") return { ...part }
     if (part.type === "image") return { ...part }
     if (part.type === "agent") return { ...part }
-    if (part.type === "skill") return { ...part }
     return {
       ...part,
       selection: part.selection ? { ...part.selection } : undefined,
@@ -120,9 +130,6 @@ function isPromptEqual(promptA: PromptHistoryStoredEntry, promptB: PromptHistory
       if (!sameSelection) return false
     }
     if (partA.type === "agent" && partA.name !== (partB.type === "agent" ? partB.name : "")) return false
-    if (partA.type === "skill") {
-      if (partB.type !== "skill" || partA.id !== partB.id || partA.name !== partB.name) return false
-    }
     if (partA.type === "image" && partA.id !== (partB.type === "image" ? partB.id : "")) return false
   }
   if (entryA.comments.length !== entryB.comments.length) return false
@@ -133,3 +140,111 @@ function isPromptEqual(promptA: PromptHistoryStoredEntry, promptB: PromptHistory
   }
   return true
 }
+
+type HistoryNavInput = {
+  direction: "up" | "down"
+  entries: PromptHistoryStoredEntry[]
+  historyIndex: number
+  currentPrompt: Prompt
+  currentComments: PromptHistoryComment[]
+  savedPrompt: PromptHistoryEntry | null
+}
+
+type HistoryNavResult =
+  | {
+      handled: false
+      historyIndex: number
+      savedPrompt: PromptHistoryEntry | null
+    }
+  | {
+      handled: true
+      historyIndex: number
+      savedPrompt: PromptHistoryEntry | null
+      entry: PromptHistoryEntry
+      cursor: "start" | "end"
+    }
+
+export function navigatePromptHistory(input: HistoryNavInput): HistoryNavResult {
+  if (input.direction === "up") {
+    if (input.entries.length === 0) {
+      return {
+        handled: false,
+        historyIndex: input.historyIndex,
+        savedPrompt: input.savedPrompt,
+      }
+    }
+
+    if (input.historyIndex === -1) {
+      const entry = normalizePromptHistoryEntry(input.entries[0])
+      return {
+        handled: true,
+        historyIndex: 0,
+        savedPrompt: {
+          prompt: clonePromptParts(input.currentPrompt),
+          comments: clonePromptHistoryComments(input.currentComments),
+        },
+        entry,
+        cursor: "start",
+      }
+    }
+
+    if (input.historyIndex < input.entries.length - 1) {
+      const next = input.historyIndex + 1
+      const entry = normalizePromptHistoryEntry(input.entries[next])
+      return {
+        handled: true,
+        historyIndex: next,
+        savedPrompt: input.savedPrompt,
+        entry,
+        cursor: "start",
+      }
+    }
+
+    return {
+      handled: false,
+      historyIndex: input.historyIndex,
+      savedPrompt: input.savedPrompt,
+    }
+  }
+
+  if (input.historyIndex > 0) {
+    const next = input.historyIndex - 1
+    const entry = normalizePromptHistoryEntry(input.entries[next])
+    return {
+      handled: true,
+      historyIndex: next,
+      savedPrompt: input.savedPrompt,
+      entry,
+      cursor: "end",
+    }
+  }
+
+  if (input.historyIndex === 0) {
+    if (input.savedPrompt) {
+      return {
+        handled: true,
+        historyIndex: -1,
+        savedPrompt: null,
+        entry: input.savedPrompt,
+        cursor: "end",
+      }
+    }
+
+    return {
+      handled: true,
+      historyIndex: -1,
+      savedPrompt: null,
+      entry: {
+        prompt: DEFAULT_PROMPT,
+        comments: [],
+      },
+      cursor: "end",
+    }
+  }
+
+  return {
+    handled: false,
+    historyIndex: input.historyIndex,
+    savedPrompt: input.savedPrompt,
+  }
+}

packages/app/src/components/prompt-input/paste.ts

@@ -0,0 +1,24 @@
+const LARGE_PASTE_CHARS = 8000
+const LARGE_PASTE_BREAKS = 120
+
+function largePaste(text: string) {
+  if (text.length >= LARGE_PASTE_CHARS) return true
+  let breaks = 0
+  for (const char of text) {
+    if (char !== "\n") continue
+    breaks += 1
+    if (breaks >= LARGE_PASTE_BREAKS) return true
+  }
+  return false
+}
+
+export function normalizePaste(text: string) {
+  if (!text.includes("\r")) return text
+  return text.replace(/\r\n?/g, "\n")
+}
+
+export function pasteMode(text: string) {
+  if (largePaste(text)) return "manual"
+  if (text.includes("\n") || text.includes("\r")) return "manual"
+  return "native"
+}

packages/app/src/components/prompt-input/placeholder.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, test } from "bun:test"
+import { promptDesignPlaceholder, promptPlaceholder } from "./placeholder"
+
+describe("promptPlaceholder", () => {
+  const t = (key: string, params?: Record<string, string>) => `${key}${params?.example ? `:${params.example}` : ""}`
+
+  test("returns shell placeholder in shell mode", () => {
+    const value = promptPlaceholder({
+      mode: "shell",
+      commentCount: 0,
+      example: "example",
+      suggest: true,
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.shell:example")
+  })
+
+  test("returns summarize placeholders for comment context", () => {
+    expect(promptPlaceholder({ mode: "normal", commentCount: 1, example: "example", suggest: true, t })).toBe(
+      "prompt.placeholder.summarizeComment",
+    )
+    expect(promptPlaceholder({ mode: "normal", commentCount: 2, example: "example", suggest: true, t })).toBe(
+      "prompt.placeholder.summarizeComments",
+    )
+  })
+
+  test("returns default placeholder with example when suggestions enabled", () => {
+    const value = promptPlaceholder({
+      mode: "normal",
+      commentCount: 0,
+      example: "translated-example",
+      suggest: true,
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.normal:translated-example")
+  })
+
+  test("returns simple placeholder when suggestions disabled", () => {
+    const value = promptPlaceholder({
+      mode: "normal",
+      commentCount: 0,
+      example: "translated-example",
+      suggest: false,
+      t,
+    })
+    expect(value).toBe("prompt.placeholder.simple")
+  })
+})
+
+describe("promptDesignPlaceholder", () => {
+  const t = (key: string, params?: Record<string, string>) => {
+    if (key !== "ui.promptInput.placeholder.normal") return key
+    return `Ask anything, ${params?.slash} for commands, ${params?.at} for context...`
+  }
+
+  test("composes the design placeholder from localized fragments", () => {
+    expect(promptDesignPlaceholder("normal", "fallback", t)).toBe("Ask anything, / for commands, @ for context...")
+  })
+
+  test("preserves the shell placeholder", () => {
+    expect(promptDesignPlaceholder("shell", "Enter shell command...", t)).toBe("Enter shell command...")
+  })
+})

packages/app/src/components/prompt-input/placeholder.ts

@@ -0,0 +1,24 @@
+type PromptPlaceholderInput = {
+  mode: "normal" | "shell"
+  commentCount: number
+  example: string
+  suggest: boolean
+  t: (key: string, params?: Record<string, string>) => string
+}
+
+export function promptPlaceholder(input: PromptPlaceholderInput) {
+  if (input.mode === "shell") return input.t("prompt.placeholder.shell", { example: input.example })
+  if (input.commentCount > 1) return input.t("prompt.placeholder.summarizeComments")
+  if (input.commentCount === 1) return input.t("prompt.placeholder.summarizeComment")
+  if (!input.suggest) return input.t("prompt.placeholder.simple")
+  return input.t("prompt.placeholder.normal", { example: input.example })
+}
+
+export function promptDesignPlaceholder(
+  mode: PromptPlaceholderInput["mode"],
+  placeholder: string,
+  t: PromptPlaceholderInput["t"],
+) {
+  if (mode === "shell") return placeholder
+  return t("ui.promptInput.placeholder.normal", { slash: "/", at: "@" })
+}

packages/app/src/components/prompt-input/submission-state.ts

@@ -1,9 +1,9 @@
-import type { ComposerState, ContextItem, Prompt } from "./state"
+import { type ContextItem, type Prompt, type usePrompt } from "@/context/prompt"
 
-export type ComposerStateTarget = ReturnType<ComposerState["capture"]>
+type PromptTarget = ReturnType<ReturnType<typeof usePrompt>["capture"]>
 
-export function createComposerSubmission(input: {
-  target: ComposerStateTarget
+export function createPromptSubmissionState(input: {
+  target: PromptTarget
   prompt: Prompt
   context: (ContextItem & { key: string })[]
 }) {
@@ -20,11 +20,11 @@ export function createComposerSubmission(input: {
       target.reset()
       cleared = target.current()
     },
-    retarget(next: ComposerStateTarget) {
-      input.context.forEach((item) => next.context.add(item))
+    retarget(next: PromptTarget) {
+      input.context.forEach(next.context.add)
       target = next
     },
-    current: (value: ComposerStateTarget) => target === value,
+    current: (value: PromptTarget) => target === value,
     restore() {
       if (cleared !== undefined && target.current() !== cleared) return
       return { target, prompt: input.prompt, context: input.context }

packages/app/src/components/prompt-input/submit.test.ts

@@ -0,0 +1,480 @@
+import { beforeAll, beforeEach, describe, expect, mock, test } from "bun:test"
+import { createStore } from "solid-js/store"
+import type { Prompt, PromptStore } from "@/context/prompt"
+import { ServerScope } from "@/utils/server-scope"
+
+let createPromptSubmit: typeof import("./submit").createPromptSubmit
+
+const createdSessions: string[] = []
+type SessionCreateInput = {
+  agent?: string
+  model?: { id: string; providerID: string; variant?: string }
+  location?: { directory: string }
+}
+const sentShell: Array<{ sessionID: string; id?: string; command: string }> = []
+const sentShellDirectories: string[] = []
+const promotedDrafts: Array<{ draftID: string; server: string; sessionId: string }> = []
+const sentPrompts: string[] = []
+const promptInputs: unknown[] = []
+const sentCommands: unknown[] = []
+const switchedAgents: Array<{ sessionID: string; agent: string }> = []
+const switchedModels: Array<{
+  sessionID: string
+  model: { id: string; providerID: string; variant?: string }
+}> = []
+const sessionRequestOrder: string[] = []
+const updatedDrafts: Array<{ draftID: string; worktree?: string }> = []
+const promptCaptures: Array<{ scope?: unknown; target?: unknown }> = []
+const navigations: string[] = []
+let serverSessionSyncs = 0
+let restoredPrompts = 0
+
+let params: { id?: string } = {}
+let search: { draftId?: string } = {}
+let selected = "/repo/worktree-a"
+let variant: string | undefined
+let createSessionGate: Promise<void> | undefined
+let createWorktreeGate: Promise<void> | undefined
+let worktreeFailure: Error | undefined
+let locationFailure: Error | undefined
+let promptFailure: Error | undefined
+let worktreeCreates = 0
+let activeSDK = "server-a"
+let activeServer = "server-a"
+let commands: Array<{ name: string }> = []
+let worktreeDirectory = "/repo/new-0"
+let worktreeID = 0
+const sessionDirectories: Record<string, string> = {}
+
+let promptValue: Prompt = [{ type: "text", content: "ls", start: 0, end: 2 }]
+const [promptStore, setPromptStore] = createStore<PromptStore>({
+  prompt: promptValue,
+  cursor: 0,
+  context: { items: [] },
+})
+const prompt = {
+  store: [() => promptStore, setPromptStore] as [() => PromptStore, typeof setPromptStore],
+  ready: Object.assign(() => true, { promise: Promise.resolve(true) }),
+  current: () => promptValue,
+  cursor: () => 0,
+  dirty: () => true,
+  model: {
+    current: () => undefined,
+    set: () => undefined,
+  },
+  reset: () => undefined,
+  set: () => restoredPrompts++,
+  context: {
+    add: () => undefined,
+    remove: () => undefined,
+    removeComment: () => undefined,
+    updateComment: () => undefined,
+    replaceComments: () => undefined,
+    items: () => [],
+  },
+  capture: (scope?: unknown, target?: unknown) => {
+    promptCaptures.push({ scope, target })
+    return prompt
+  },
+}
+const settle = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+const clientFor = (directory: string) => {
+  return {
+    api: {
+      session: {
+        create: async (input: SessionCreateInput) => {
+          await createSessionGate
+          const location = input.location?.directory ?? directory
+          createdSessions.push(location)
+          const id = `session-${createdSessions.length}`
+          sessionDirectories[id] = location
+          return {
+            id,
+            projectID: "project",
+            agent: input.agent,
+            model: input.model,
+            cost: 0,
+            tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+            time: { created: 1, updated: 1 },
+            title: `New session ${createdSessions.length}`,
+            location: { directory: location },
+          }
+        },
+        prompt: async (input: unknown) => {
+          sessionRequestOrder.push("prompt")
+          sentPrompts.push(sessionDirectories[(input as { sessionID: string }).sessionID] ?? directory)
+          promptInputs.push(input)
+          if (promptFailure) throw promptFailure
+          const prompt = input as { sessionID: string; id: string; text: string }
+          return {
+            id: prompt.id,
+            sessionID: prompt.sessionID,
+            timeCreated: 1,
+            type: "user" as const,
+            delivery: "steer" as const,
+            payload: { text: prompt.text },
+          }
+        },
+        switchAgent: async (input: { sessionID: string; agent: string }) => {
+          sessionRequestOrder.push("agent")
+          switchedAgents.push(input)
+        },
+        switchModel: async (input: {
+          sessionID: string
+          model: { id: string; providerID: string; variant?: string }
+        }) => {
+          sessionRequestOrder.push("model")
+          switchedModels.push(input)
+        },
+        command: async (input: unknown) => {
+          sentCommands.push(input)
+        },
+        shell: async (input: { sessionID: string; id?: string; command: string }) => {
+          sentShell.push(input)
+          sentShellDirectories.push(sessionDirectories[input.sessionID] ?? directory)
+        },
+      },
+      worktree: {
+        create: async (_input: unknown) => {
+          worktreeCreates++
+          await createWorktreeGate
+          if (worktreeFailure) throw worktreeFailure
+          return { directory: worktreeDirectory }
+        },
+      },
+      location: {
+        get: async () => {
+          if (locationFailure) throw locationFailure
+          return { directory: worktreeDirectory }
+        },
+      },
+    },
+    session: {
+      command: async () => ({ data: undefined }),
+      abort: async () => ({ data: undefined }),
+    },
+  }
+}
+
+beforeAll(async () => {
+  const rootClient = clientFor("/repo/main")
+
+  mock.module("@solidjs/router", () => ({
+    useNavigate: () => (href: string) => navigations.push(href),
+    useParams: () => params,
+    useLocation: () => ({}),
+    useSearchParams: () => [search, () => undefined],
+  }))
+
+  mock.module("@opencode-ai/ui/toast", () => ({
+    Toast: { Region: () => null },
+    toaster: { create: () => undefined, show: () => undefined, dismiss: () => undefined },
+    showToast: () => 0,
+  }))
+
+  mock.module("@opencode-ai/util/encode", () => ({
+    base64Decode: (value: string) => value,
+    base64Encode: (value: string) => value,
+    checksum: (value: string) => value,
+    sampledChecksum: (value: string) => value,
+  }))
+
+  mock.module("@/context/local", () => ({
+    useLocal: () => ({
+      model: {
+        current: () => ({ id: "model", provider: { id: "provider" } }),
+        variant: { current: () => variant },
+      },
+      agent: {
+        current: () => ({ name: "agent" }),
+      },
+      session: {
+        promote: () => undefined,
+      },
+    }),
+  }))
+
+  mock.module("@/context/permission", () => {
+    return { usePermission: () => ({ currentServerState: () => ({ enableAutoAccept: () => undefined }) }) }
+  })
+
+  mock.module("@/context/tabs", () => ({
+    useTabs: () => ({
+      updateDraft: (draftID: string, draft: { worktree?: string }) => {
+        updatedDrafts.push({ draftID, ...draft })
+      },
+      promoteDraft: (draftID: string, session: { server: string; sessionId: string }) => {
+        promotedDrafts.push({ draftID, ...session })
+      },
+    }),
+  }))
+
+  mock.module("@/context/prompt", () => ({
+    usePrompt: () => prompt,
+  }))
+
+  mock.module("@/context/location", () => ({
+    useWorkspaceLocation: () => {
+      return () => ({
+        directory: activeSDK === "server-a" ? "/repo/main" : "/repo/other",
+      })
+    },
+  }))
+
+  mock.module("@/context/server-sdk", () => ({
+    useServerSDK: () => ({
+      scope: activeSDK === "server-a" ? ServerScope.local : "server-b",
+      api: rootClient.api,
+    }),
+  }))
+
+  mock.module("@/context/server", () => ({
+    useServer: () => ({ key: activeServer }),
+    useData: () => ({
+      session: {
+        remember: () => undefined,
+        setStatus: () => undefined,
+        // Delegates straight to the API client; optimistic admission and
+        // rollback are covered by the data-layer tests in packages/tui.
+        prompt: (input: unknown) => rootClient.api.session.prompt(input as never),
+      },
+      location: {
+        info: () => ({ project: { id: "project", directory: "/repo/main" } }),
+        command: {
+          list: () => commands,
+        },
+      },
+    }),
+  }))
+
+  mock.module("@/context/platform", () => ({
+    usePlatform: () => ({
+      fetch: fetch,
+    }),
+  }))
+
+  mock.module("@/context/language", () => ({
+    useLanguage: () => ({
+      t: (key: string) => key,
+    }),
+  }))
+
+  const mod = await import("./submit")
+  createPromptSubmit = mod.createPromptSubmit
+})
+
+beforeEach(() => {
+  createdSessions.length = 0
+  promotedDrafts.length = 0
+  updatedDrafts.length = 0
+  sentCommands.length = 0
+  sentPrompts.length = 0
+  promptInputs.length = 0
+  switchedAgents.length = 0
+  switchedModels.length = 0
+  sessionRequestOrder.length = 0
+  promptCaptures.length = 0
+  navigations.length = 0
+  restoredPrompts = 0
+  params = {}
+  search = {}
+  sentShell.length = 0
+  sentShellDirectories.length = 0
+  selected = "/repo/worktree-a"
+  variant = undefined
+  activeSDK = "server-a"
+  activeServer = "server-a"
+  commands = []
+  promptValue = [{ type: "text", content: "ls", start: 0, end: 2 }]
+  worktreeDirectory = `/repo/new-${++worktreeID}`
+  createSessionGate = undefined
+  serverSessionSyncs = 0
+  createWorktreeGate = undefined
+  worktreeFailure = undefined
+  locationFailure = undefined
+  promptFailure = undefined
+  worktreeCreates = 0
+  for (const key of Object.keys(sessionDirectories)) delete sessionDirectories[key]
+})
+
+const event = { preventDefault: () => undefined } as unknown as Event
+const makeSubmit = (overrides: Partial<Parameters<typeof createPromptSubmit>[0]> = {}) =>
+  createPromptSubmit({
+    prompt,
+    info: () => undefined,
+    imageAttachments: () => [],
+    commentCount: () => 0,
+    autoAccept: () => false,
+    mode: () => "normal",
+    working: () => false,
+    editor: () => undefined,
+    queueScroll: () => undefined,
+    promptLength: (value) => value.reduce((sum, part) => sum + ("content" in part ? part.content.length : 0), 0),
+    addToHistory: () => undefined,
+    resetHistoryNavigation: () => undefined,
+    setMode: () => undefined,
+    setPopover: () => undefined,
+    newSessionWorktree: () => selected,
+    onNewSessionWorktreeReset: () => undefined,
+    onSubmit: () => undefined,
+    ...overrides,
+  })
+
+describe("prompt submit worktree selection", () => {
+  test("admits only one concurrent new-workspace submission", async () => {
+    selected = "create"
+    let release = () => {}
+    createWorktreeGate = new Promise<void>((resolve) => {
+      release = resolve
+    })
+    const submit = makeSubmit()
+
+    const first = submit.handleSubmit(event)
+    const duplicate = submit.handleSubmit(event)
+    expect(worktreeCreates).toBe(1)
+
+    release()
+    await Promise.all([first, duplicate])
+    expect(createdSessions).toEqual([worktreeDirectory])
+    await settle()
+
+    expect(worktreeCreates).toBe(1)
+    expect(createdSessions).toHaveLength(1)
+    expect(sentPrompts).toEqual([worktreeDirectory])
+    expect(navigations).toEqual(["/server/server-a/session/session-1"])
+  })
+
+  test("stops when the created workspace cannot initialize", async () => {
+    selected = "create"
+    locationFailure = new Error("initialization failed")
+
+    await makeSubmit().handleSubmit(event)
+
+    expect(worktreeCreates).toBe(1)
+    expect(createdSessions).toEqual([])
+    expect(sentPrompts).toEqual([])
+  })
+
+  test("keeps async submission effects bound to the initiating context", async () => {
+    search = { draftId: "draft-1" }
+    let release = () => {}
+    createSessionGate = new Promise<void>((resolve) => {
+      release = resolve
+    })
+    let submitted = 0
+    const submit = makeSubmit({
+      onSubmit: () => submitted++,
+    })
+
+    const result = submit.handleSubmit(event)
+    activeSDK = "server-b"
+    activeServer = "server-b"
+    search.draftId = "draft-2"
+    release()
+    await result
+    await settle()
+
+    expect(updatedDrafts).toEqual([{ draftID: "draft-1", worktree: undefined }])
+    expect(promotedDrafts).toEqual([{ draftID: "draft-1", server: "server-a", sessionId: "session-1" }])
+    expect(promptCaptures.at(-1)?.target).toEqual({ server: "server-a", scope: ServerScope.local })
+    expect(submitted).toBe(0)
+  })
+
+  test("switches the selected agent and model before prompting", async () => {
+    params = { id: "session-1" }
+    variant = "high"
+
+    const submit = makeSubmit({
+      info: () => ({
+        id: "session-1",
+        agent: "old-agent",
+        model: { id: "old-model", providerID: "old-provider" },
+      }),
+    })
+
+    await submit.handleSubmit(event)
+    await Bun.sleep(0)
+
+    expect(sentPrompts).toEqual(["/repo/main"])
+    expect(switchedAgents).toEqual([{ sessionID: "session-1", agent: "agent" }])
+    expect(switchedModels).toEqual([
+      {
+        sessionID: "session-1",
+        model: { id: "model", providerID: "provider", variant: "high" },
+      },
+    ])
+    expect(sessionRequestOrder).toEqual(["agent", "model", "prompt"])
+    expect(promptInputs[0]).toMatchObject({
+      sessionID: "session-1",
+      text: "ls",
+      files: [],
+      agents: [],
+      metadata: {
+        displayText: "ls",
+        comments: [],
+        agent: "agent",
+        model: { providerID: "provider", modelID: "model", variant: "high" },
+      },
+    })
+    // ID minting is delegated to the data layer, which mints a client ID when
+    // none is supplied (covered by the data-layer tests in packages/tui).
+    expect((promptInputs[0] as { id?: string }).id).toBeUndefined()
+  })
+
+  test("restores the prompt when sending fails", async () => {
+    params = { id: "session-1" }
+    promptFailure = new Error("connection lost")
+    const submit = makeSubmit({
+      info: () => ({ id: "session-1", agent: "agent", model: { id: "model", providerID: "provider" } }),
+    })
+
+    await submit.handleSubmit(event)
+    await settle()
+
+    expect(restoredPrompts).toBe(1)
+  })
+
+  test("submits slash commands through the current session API", async () => {
+    params = { id: "session-1" }
+    variant = "high"
+    commands.push({ name: "review" })
+    promptValue = [{ type: "text", content: "/review staged changes", start: 0, end: 22 }]
+
+    const submit = makeSubmit({
+      info: () => ({ id: "session-1" }),
+    })
+
+    await submit.handleSubmit(event)
+    await settle()
+
+    expect(sentCommands).toEqual([
+      {
+        sessionID: "session-1",
+        id: expect.stringMatching(/^msg_/),
+        command: "review",
+        arguments: "staged changes",
+        agent: "agent",
+        model: { id: "model", providerID: "provider", variant: "high" },
+        files: [],
+      },
+    ])
+    expect(serverSessionSyncs).toBe(0)
+  })
+
+  test("sends an initial shell after synchronous workspace creation", async () => {
+    selected = "create"
+    const submit = makeSubmit({
+      mode: () => "shell",
+    })
+
+    await submit.handleSubmit(event)
+    await settle()
+
+    expect(sentShellDirectories).toEqual([worktreeDirectory])
+    expect(sentShell[0]).toMatchObject({
+      sessionID: "session-1",
+      command: "ls",
+    })
+  })
+})

packages/app/src/components/prompt-input/submit.ts

@@ -0,0 +1,505 @@
+import type { Data } from "@opencode-ai/client/solid"
+import { showToast } from "@/utils/toast"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { useNavigate, useParams, useSearchParams } from "@solidjs/router"
+import { startTransition, type Accessor } from "solid-js"
+import { useTabs } from "@/context/tabs"
+import { useData } from "@/context/server"
+import { useLanguage } from "@/context/language"
+import { useLocal, type ModelSelection } from "@/context/local"
+import { usePermission } from "@/context/permission"
+import { type ContextItem, type ImageAttachmentPart, type Prompt, type usePrompt } from "@/context/prompt"
+import { useWorkspaceLocation } from "@/context/location"
+import { useServerSDK, type ServerSDK } from "@/context/server-sdk"
+import { SessionMessage } from "@opencode-ai/schema/session-message"
+import { getDirectory } from "@opencode-ai/util/path"
+import { buildPromptRequest } from "./build-prompt-request"
+import { setCursorPosition } from "./editor-dom"
+import { formatServerError } from "@/utils/server-errors"
+import { ScopedKey } from "@/utils/server-scope"
+import { createPromptSubmissionState } from "./submission-state"
+import { Event } from "@opencode-ai/schema/event"
+import { blobDataUrl } from "@/utils/draft-store"
+import { useServer } from "@/context/server"
+import { sessionHref } from "@/utils/session-route"
+
+const submitting = new Set<string>()
+
+export type FollowupDraft = {
+  sessionID: string
+  sessionDirectory: string
+  prompt: Prompt
+  context: (ContextItem & { key: string })[]
+  agent: string
+  model: { providerID: string; modelID: string }
+  variant?: string
+}
+
+type FollowupSendInput = {
+  api: ServerSDK["api"]["session"]
+  data: Data
+  session: Accessor<{ agent?: string; model?: { id: string; providerID: string; variant?: string } } | undefined>
+  draft: FollowupDraft
+  optimisticBusy?: boolean
+}
+
+const draftText = (prompt: Prompt) => prompt.map((part) => ("content" in part ? part.content : "")).join("")
+
+const draftImages = (prompt: Prompt) => prompt.filter((part): part is ImageAttachmentPart => part.type === "image")
+
+export async function sendFollowupDraft(input: FollowupSendInput) {
+  const text = draftText(input.draft.prompt)
+  const images = draftImages(input.draft.prompt)
+  const setBusy = () => {
+    if (!input.optimisticBusy) return
+    input.data.session.setStatus(input.draft.sessionID, "running")
+  }
+
+  const setIdle = () => {
+    if (!input.optimisticBusy) return
+    input.data.session.setStatus(input.draft.sessionID, "idle")
+  }
+
+  const [head, ...tail] = text.split(" ")
+  const cmd = head?.startsWith("/") ? head.slice(1) : undefined
+  if (
+    cmd &&
+    input.data.location.command.list({ directory: input.draft.sessionDirectory })?.some((item) => item.name === cmd)
+  ) {
+    setBusy()
+    try {
+      await input.api.command({
+        sessionID: input.draft.sessionID,
+        id: SessionMessage.ID.create(),
+        command: cmd,
+        arguments: tail.join(" "),
+        agent: input.draft.agent,
+        model: {
+          id: input.draft.model.modelID,
+          providerID: input.draft.model.providerID,
+          variant: input.draft.variant,
+        },
+        files: await Promise.all(
+          images.map(async (attachment) => ({
+            uri: await blobDataUrl(attachment.blob, attachment.mime),
+            name: attachment.filename,
+          })),
+        ),
+      })
+      return true
+    } catch (err) {
+      setIdle()
+      throw err
+    }
+  }
+
+  const encodedImages = await Promise.all(
+    images.map(async (attachment) => ({
+      ...attachment,
+      dataUrl: await blobDataUrl(attachment.blob, attachment.mime),
+    })),
+  )
+  const request = buildPromptRequest({
+    prompt: input.draft.prompt,
+    context: input.draft.context,
+    images: encodedImages,
+    text,
+    sessionDirectory: input.draft.sessionDirectory,
+  })
+
+  setBusy()
+
+  try {
+    const session = input.session()
+    if (session?.agent !== input.draft.agent) {
+      await input.api.switchAgent({ sessionID: input.draft.sessionID, agent: input.draft.agent })
+    }
+    if (
+      session?.model?.providerID !== input.draft.model.providerID ||
+      session.model.id !== input.draft.model.modelID ||
+      (session.model.variant ?? "default") !== (input.draft.variant ?? "default")
+    ) {
+      await input.api.switchModel({
+        sessionID: input.draft.sessionID,
+        model: {
+          id: input.draft.model.modelID,
+          providerID: input.draft.model.providerID,
+          variant: input.draft.variant,
+        },
+      })
+    }
+
+    // The data layer admits optimistically under a client-minted ID: the
+    // prompt renders immediately and rolls back if the server rejects it.
+    await input.data.session.prompt({
+      sessionID: input.draft.sessionID,
+      text: request.text,
+      files: request.files.map((file) => ({ uri: file.uri, name: file.name, mention: file.mention })),
+      agents: request.agents,
+      metadata: {
+        displayText: request.displayText,
+        comments: request.comments,
+        agent: input.draft.agent,
+        model: {
+          ...input.draft.model,
+          ...(input.draft.variant ? { variant: input.draft.variant } : {}),
+        },
+      },
+    })
+    return true
+  } catch (err) {
+    setIdle()
+    throw err
+  }
+}
+
+type PromptSubmitInput = {
+  prompt: ReturnType<typeof usePrompt>
+  info: Accessor<
+    { id: string; agent?: string; model?: { id: string; providerID: string; variant?: string } } | undefined
+  >
+  imageAttachments: Accessor<ImageAttachmentPart[]>
+  commentCount: Accessor<number>
+  autoAccept: Accessor<boolean>
+  mode: Accessor<"normal" | "shell">
+  working: Accessor<boolean>
+  editor: () => HTMLDivElement | undefined
+  queueScroll: () => void
+  promptLength: (prompt: Prompt) => number
+  addToHistory: (prompt: Prompt, mode: "normal" | "shell") => void
+  resetHistoryNavigation: () => void
+  setMode: (mode: "normal" | "shell") => void
+  setPopover: (popover: "at" | "slash" | null) => void
+  newSessionWorktree?: Accessor<string | undefined>
+  onNewSessionWorktreeReset?: () => void
+  shouldQueue?: Accessor<boolean>
+  onQueue?: (draft: FollowupDraft) => void
+  onAbort?: () => void
+  onSubmit?: () => void
+  model?: ModelSelection
+}
+
+export function createPromptSubmit(input: PromptSubmitInput) {
+  const navigate = useNavigate()
+  const sdk = useWorkspaceLocation()
+  const serverSDK = useServerSDK()
+  const data = useData()
+  const server = useServer()
+  const local = useLocal()
+  const permission = usePermission()
+  const prompt = input.prompt
+  const language = useLanguage()
+  const params = useParams()
+  const [search] = useSearchParams<{ draftId?: string }>()
+  const tabs = useTabs()
+  const errorMessage = (err: unknown) => {
+    if (err && typeof err === "object" && "message" in err && typeof err.message === "string") return err.message
+    if (err && typeof err === "object" && "data" in err) {
+      const data = (err as { data?: { message?: string } }).data
+      if (data?.message) return data.message
+    }
+    if (err instanceof Error) return err.message
+    return language.t("common.requestFailed")
+  }
+
+  const abort = async () => {
+    const sessionID = params.id
+    if (!sessionID) return Promise.resolve()
+    input.onAbort?.()
+
+    return serverSDK.api.session.interrupt({ sessionID }).catch(() => {})
+  }
+
+  const restoreCommentItems = (
+    target: ReturnType<ReturnType<typeof usePrompt>["capture"]>,
+    items: (ContextItem & { key: string })[],
+  ) => {
+    for (const item of items) {
+      target.context.add({
+        type: "file",
+        path: item.path,
+        selection: item.selection,
+        comment: item.comment,
+        commentID: item.commentID,
+        commentOrigin: item.commentOrigin,
+        preview: item.preview,
+      })
+    }
+  }
+
+  const clearContext = (target: ReturnType<ReturnType<typeof usePrompt>["capture"]>) => {
+    for (const item of target.context.items()) {
+      target.context.remove(item.key)
+    }
+  }
+
+  const handleSubmit = async (event: Event) => {
+    event.preventDefault()
+
+    const target = prompt.capture()
+    const submission = createPromptSubmissionState({
+      target,
+      prompt: target.current(),
+      context: target.context.items().slice(),
+    })
+    const currentPrompt = submission.prompt
+    const context = submission.context
+    const text = currentPrompt.map((part) => ("content" in part ? part.content : "")).join("")
+    const images = input.imageAttachments().slice()
+    const mode = input.mode()
+
+    if (text.trim().length === 0 && images.length === 0 && input.commentCount() === 0) {
+      if (input.working()) void abort()
+      return
+    }
+    const modelSelection = input.model ?? local.model
+    const currentModel = modelSelection.current()
+    const currentAgent = local.agent.current()
+    const variant = modelSelection.variant.current()
+    if (!currentModel || !currentAgent) {
+      showToast({
+        title: language.t("prompt.toast.modelAgentRequired.title"),
+        description: language.t("prompt.toast.modelAgentRequired.description"),
+      })
+      return
+    }
+
+    const submissionSDK = sdk()
+    const submissionServerSDK = serverSDK
+    const submissionData = data
+    const submissionScope = submissionServerSDK.scope
+    const submissionServer = server.key
+    const projectDirectory = submissionSDK.directory
+    const sessionID = params.id
+    const isNewSession = !sessionID
+    const currentSession = input.info()
+    const draftID = search.draftId
+    const capturePrompt = prompt.capture
+    const localSession = local.session
+    const resetWorktree = input.onNewSessionWorktreeReset
+    const onSubmit = input.onSubmit
+    const permissionState = permission
+    const shouldAutoAccept = isNewSession && input.autoAccept()
+    const worktreeSelection = input.newSessionWorktree?.() || "main"
+    const submissionKey = ScopedKey.from(
+      submissionScope,
+      draftID ? `draft:${draftID}` : sessionID ? `session:${sessionID}` : `directory:${projectDirectory}`,
+    )
+    if (submitting.has(submissionKey)) return
+    submitting.add(submissionKey)
+
+    try {
+      input.addToHistory(currentPrompt, mode)
+      input.resetHistoryNavigation()
+
+      let sessionDirectory = projectDirectory
+      if (isNewSession) {
+        if (worktreeSelection === "create") {
+          const createdWorktree = await submissionServerSDK.api.worktree
+            .create({
+              projectID: submissionData.location.info({ directory: projectDirectory })?.project.id ?? "",
+              strategy: "git",
+              directory: getDirectory(
+                submissionData.location.info({ directory: projectDirectory })?.project.directory ?? projectDirectory,
+              ),
+            })
+            .then(async (created) => {
+              await submissionServerSDK.api.location.get({ location: { directory: created.directory } })
+              return created
+            })
+            .catch((err) => {
+              showToast({
+                title: language.t("prompt.toast.worktreeCreateFailed.title"),
+                description: errorMessage(err),
+              })
+            })
+
+          if (!createdWorktree) return
+          sessionDirectory = createdWorktree.directory
+        }
+
+        if (worktreeSelection !== "main" && worktreeSelection !== "create") {
+          sessionDirectory = worktreeSelection
+        }
+      }
+
+      let session = currentSession
+      if (!session && isNewSession) {
+        const created = await submissionServerSDK.api.session
+          .create({
+            agent: currentAgent.name,
+            model: { id: currentModel.id, providerID: currentModel.provider.id, variant },
+            location: { directory: sessionDirectory },
+          })
+          .catch((err) => {
+            showToast({
+              title: language.t("prompt.toast.sessionCreateFailed.title"),
+              description: errorMessage(err),
+            })
+            return undefined
+          })
+        if (created) {
+          submissionData.session.remember(created)
+          session = created
+          await startTransition(() => {
+            if (!session) return
+            if (draftID) tabs.updateDraft(draftID, { worktree: undefined })
+            if (!draftID) resetWorktree?.()
+            if (shouldAutoAccept) permissionState.enableAutoAccept(session.id, sessionDirectory)
+            localSession.promote(sessionDirectory, session.id, {
+              agent: currentAgent.name,
+              model: { providerID: currentModel.provider.id, modelID: currentModel.id },
+              variant: variant ?? null,
+            })
+            if (draftID) tabs.promoteDraft(draftID, { server: submissionServer, sessionId: session.id })
+            else navigate(sessionHref(submissionServer, session.id))
+            submission.retarget(
+              capturePrompt(
+                { dir: base64Encode(sessionDirectory), id: session.id },
+                { server: submissionServer, scope: submissionScope },
+              ),
+            )
+          })
+        }
+      }
+      if (!session) {
+        showToast({
+          title: language.t("prompt.toast.promptSendFailed.title"),
+          description: language.t("prompt.toast.promptSendFailed.description"),
+        })
+        return
+      }
+
+      const model = {
+        modelID: currentModel.id,
+        providerID: currentModel.provider.id,
+      }
+      const agent = currentAgent.name
+      const draft: FollowupDraft = {
+        sessionID: session.id,
+        sessionDirectory,
+        prompt: currentPrompt,
+        context,
+        agent,
+        model,
+        variant,
+      }
+
+      const clearInput = () => {
+        submission.clear()
+        input.setMode("normal")
+        input.setPopover(null)
+      }
+
+      const restoreInput = () => {
+        const restored = submission.restore()
+        if (!restored) return false
+        restored.target.set(restored.prompt, input.promptLength(restored.prompt))
+        if (!submission.current(prompt.capture())) return true
+        input.setMode(mode)
+        input.setPopover(null)
+        requestAnimationFrame(() => {
+          const editor = input.editor()
+          if (!editor) return
+          editor.focus()
+          setCursorPosition(editor, input.promptLength(currentPrompt))
+          input.queueScroll()
+        })
+        return true
+      }
+
+      if (!isNewSession && mode === "normal" && input.shouldQueue?.()) {
+        input.onQueue?.(draft)
+        clearContext(submission.target())
+        clearInput()
+        return
+      }
+
+      if (!draftID || search.draftId === draftID) onSubmit?.()
+
+      if (mode === "shell") {
+        clearInput()
+        const eventID = Event.ID.create()
+        void submissionServerSDK.api.session
+          .shell({
+            sessionID: session.id,
+            id: eventID,
+            command: text,
+          })
+          .catch((err) => {
+            showToast({
+              title: language.t("prompt.toast.shellSendFailed.title"),
+              description: errorMessage(err),
+            })
+            restoreInput()
+          })
+        return
+      }
+
+      if (text.startsWith("/")) {
+        const [cmdName, ...args] = text.split(" ")
+        const commandName = cmdName.slice(1)
+        const customCommand = submissionData.location.command
+          .list({ directory: sessionDirectory })
+          ?.find((command) => command.name === commandName)
+        if (customCommand) {
+          clearInput()
+          submissionData.session.setStatus(session.id, "running")
+          void submissionServerSDK.api.session
+            .command({
+              sessionID: session.id,
+              id: SessionMessage.ID.create(),
+              command: commandName,
+              arguments: args.join(" "),
+              agent,
+              model: { id: model.modelID, providerID: model.providerID, variant },
+              files: await Promise.all(
+                images.map(async (attachment) => ({
+                  uri: await blobDataUrl(attachment.blob, attachment.mime),
+                  name: attachment.filename,
+                })),
+              ),
+            })
+            .catch((err) => {
+              submissionData.session.setStatus(session.id, "idle")
+              showToast({
+                title: language.t("prompt.toast.commandSendFailed.title"),
+                description: formatServerError(err, language.t, language.t("common.requestFailed")),
+              })
+              restoreInput()
+            })
+          return
+        }
+      }
+
+      const commentItems = context.filter((item) => item.type === "file" && !!item.comment?.trim())
+
+      for (const item of commentItems) submission.target().context.remove(item.key)
+      clearInput()
+
+      void sendFollowupDraft({
+        api: submissionServerSDK.api.session,
+        data: submissionData,
+        session: () => session,
+        draft,
+        optimisticBusy: sessionDirectory === projectDirectory,
+      }).catch((err) => {
+        if (sessionDirectory === projectDirectory) {
+          submissionData.session.setStatus(session.id, "idle")
+        }
+        showToast({
+          title: language.t("prompt.toast.promptSendFailed.title"),
+          description: errorMessage(err),
+        })
+        if (restoreInput()) restoreCommentItems(submission.target(), commentItems)
+      })
+    } finally {
+      submitting.delete(submissionKey)
+    }
+  }
+
+  return {
+    abort,
+    handleSubmit,
+  }
+}

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

@@ -12,12 +12,12 @@ import { createStore } from "solid-js/store"
 import { Menu } from "@opencode-ai/ui/menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
-import { getProjectAvatarVariant } from "@/shell/state/layout"
-import { useLanguage } from "@/runtime/i18n/language"
-import { displayName, getProjectAvatarSource } from "@/shell/layout/helpers"
-import { pathKey } from "@/workspaces/path-key"
-import { handleDocumentSearchKeydown } from "@/shell/commands/search-keydown"
-import { createMenuDismissController } from "@/shell/commands/menu-dismiss"
+import { getProjectAvatarVariant } from "@/context/layout"
+import { useLanguage } from "@/context/language"
+import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
+import { pathKey } from "@/utils/path-key"
+import { handleDocumentSearchKeydown } from "@/utils/search-keydown"
+import { createMenuDismissController } from "@/utils/menu-dismiss-controller"
 
 export type PromptProject = {
   name?: string
@@ -419,7 +419,9 @@ export function PromptProjectSelector(props: {
                   onMouseEnter={() => props.controller.setActive(props.controller.actionKey())}
                 >
                   <Icon name="plus" size="small" />
-                  <span class="min-w-0 flex-1 truncate leading-5">{props.controller.labels.add()}</span>
+                  <span class="min-w-0 flex-1 truncate leading-5">
+                    {props.controller.labels.add()}
+                  </span>
                 </Menu.SubTrigger>
                 <Menu.Portal>
                   <Menu.SubContent class="min-w-[180px] overflow-hidden rounded-md border-0 bg-v2-background-bg-layer-01 p-0.5 shadow-[var(--v2-elevation-floating)] focus:outline-none">
@@ -567,7 +569,9 @@ function ProjectAction(props: {
       onSelect={() => props.onSelect(props.server)}
     >
       <Icon name="plus" size="small" />
-      <span class="min-w-0 truncate leading-5">{props.controller.labels.add()}</span>
+      <span class="min-w-0 truncate leading-5">
+        {props.controller.labels.add()}
+      </span>
     </Menu.Item>
   )
 }

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

@@ -3,8 +3,8 @@ import { Menu } from "@opencode-ai/ui/menu"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Icon } from "@opencode-ai/ui/icon"
 import { getFilename } from "@opencode-ai/util/path"
-import { useLanguage } from "@/runtime/i18n/language"
-import { sameDirectory } from "@/workspaces/paths"
+import { useLanguage } from "@/context/language"
+import { sameDirectory } from "@/utils/workspace"
 
 export function PromptWorkspaceSelector(props: {
   value: string

packages/app/src/components/provider-connection-controller.ts

@@ -1,7 +1,7 @@
 import type { FormAnswer, IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
-import { useLanguage } from "@/runtime/i18n/language"
-import { useServerSDK } from "@/runtime/server/client"
-import { useData } from "@/runtime/server/current"
+import { useLanguage } from "@/context/language"
+import { useServerSDK } from "@/context/server-sdk"
+import { useData } from "@/context/server"
 import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 

packages/app/src/components/server/server-management-controller.ts

@@ -1,13 +1,13 @@
 import { useNavigate } from "@solidjs/router"
 import { createMemo, createResource } from "solid-js"
-import { useGlobal } from "@/runtime/server/runtime"
-import { useLanguage } from "@/runtime/i18n/language"
-import { usePlatform } from "@/runtime/platform/platform"
-import { ServerConnection, useServers } from "@/runtime/server/registry"
-import { useSettings } from "@/settings/model"
-import { useTabs } from "@/shell/tabs/tabs"
-import { type ServerHealth } from "@/runtime/server/health"
-import { showToast } from "@/shell/notifications/toast"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { ServerConnection, useServers } from "@/context/servers"
+import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+import { type ServerHealth } from "@/utils/server-health"
+import { showToast } from "@/utils/toast"
 
 function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
   showToast({

packages/app/src/components/server/server-management.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
-import { ServerConnection } from "@/runtime/server/registry"
-import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./management"
+import { ServerConnection } from "@/context/servers"
+import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./server-management"
 
 function deferred<T>() {
   let resolve!: (value: T) => void

packages/app/src/components/server/server-management.ts

@@ -1,5 +1,5 @@
-import { normalizeServerUrl, ServerConnection } from "@/runtime/server/registry"
-import type { ServerHealth } from "@/runtime/server/health"
+import { normalizeServerUrl, ServerConnection } from "@/context/servers"
+import type { ServerHealth } from "@/utils/server-health"
 
 export type ServerFormValues = {
   url: string

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

@@ -2,9 +2,9 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Menu } from "@opencode-ai/ui/menu"
 import { type Component, Show } from "solid-js"
-import type { ServerActionsController } from "@/servers/registry/controller"
-import { useLanguage } from "@/runtime/i18n/language"
-import { ServerConnection } from "@/runtime/server/registry"
+import type { ServerActionsController } from "@/components/server/server-management-controller"
+import { useLanguage } from "@/context/language"
+import { ServerConnection } from "@/context/servers"
 
 export const ServerRowMenu: Component<{
   server: ServerConnection.Any

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

@@ -1,5 +1,4 @@
 import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon } from "@opencode-ai/ui/icon"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import {
   children,
@@ -11,9 +10,9 @@ import {
   type ParentProps,
   Show,
 } from "solid-js"
-import { useLanguage } from "@/runtime/i18n/language"
-import { type ServerConnection, serverName } from "@/runtime/server/registry"
-import type { ServerHealth } from "@/runtime/server/health"
+import { useLanguage } from "@/context/language"
+import { type ServerConnection, serverName } from "@/context/servers"
+import type { ServerHealth } from "@/utils/server-health"
 
 interface ServerRowProps extends ParentProps {
   conn: ServerConnection.Any
@@ -120,20 +119,13 @@ export function ServerRow(props: ServerRowProps) {
 
 export function ServerHealthIndicator(props: { health?: ServerHealth }) {
   return (
-    <Show
-      when={props.health?.incompatible}
-      fallback={
-        <div
-          classList={{
-            "size-1.5 rounded-full shrink-0 my-[3.5px]": true,
-            "bg-icon-success-base": props.health?.healthy === true,
-            "bg-icon-critical-base": props.health?.healthy === false,
-            "bg-border-weak-base": props.health === undefined,
-          }}
-        />
-      }
-    >
-      <Icon name="warning" size="small" class="shrink-0 text-icon-warning-base" />
-    </Show>
+    <div
+      classList={{
+        "size-1.5 rounded-full shrink-0 my-[3.5px]": true,
+        "bg-icon-success-base": props.health?.healthy === true,
+        "bg-icon-critical-base": props.health?.healthy === false,
+        "bg-border-weak-base": props.health === undefined,
+      }}
+    />
   )
 }

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

@@ -1,7 +1,7 @@
 import { useParams } from "@solidjs/router"
 import { onCleanup } from "solid-js"
-import { useCommand } from "@/shell/commands/command"
-import { useLanguage } from "@/runtime/i18n/language"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 
 export function useSettingsDialog(defaultValue?: string) {
@@ -17,7 +17,7 @@ export function useSettingsDialog(defaultValue?: string) {
   return () => {
     const current = ++run
     const sessionID = params.id
-    void import("@/settings/shell").then((module) => {
+    void import("@/components/settings-v2").then((module) => {
       if (dead || run !== current) return
       void dialog.show(() => <module.DialogSettings sessionID={sessionID} defaultValue={defaultValue} />)
     })