fix(llm): preserve native provider options

.dockerignore

@@ -1,12 +0,0 @@
-.git
-.opencode
-.sst
-.turbo
-.wrangler
-node_modules
-**/node_modules
-**/.output
-**/dist
-**/.turbo
-**/.vite
-**/coverage

.gitattributes

@@ -1,2 +0,0 @@
-packages/core/migration/**/snapshot.json linguist-generated
-packages/core/src/database/migration.gen.ts linguist-generated

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,5 +1,5 @@
 name: Bug report
-description: Report an issue that should be fixed (avoid pasting giant AI generated summaries or your issue may be closed/ignored)
+description: Report an issue that should be fixed
 body:
   - type: textarea
     id: description

.github/workflows/deploy.yml

@@ -9,15 +9,9 @@ on:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
-permissions:
-  contents: read
-  id-token: write
-
 jobs:
   deploy:
-    if: github.repository == 'anomalyco/opencode' && (github.ref_name == 'dev' || github.ref_name == 'production')
     runs-on: ubuntu-latest
-    environment: ${{ github.ref_name }}
     steps:
       - uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
@@ -27,12 +21,6 @@ jobs:
         with:
           node-version: "24"
 
-      - uses: aws-actions/configure-aws-credentials@7474bc4690e29a8392af63c5b98e7449536d5c3a # v4.3.1
-        with:
-          role-to-assume: ${{ vars.AWS_DEPLOY_ROLE_ARN }}
-          role-session-name: opencode-${{ github.run_id }}
-          aws-region: us-east-1
-
       - run: bun sst deploy --stage=${{ github.ref_name }}
         env:
           CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.opencode/opencode.jsonc

@@ -2,9 +2,6 @@
   "$schema": "https://opencode.ai/config.json",
   "provider": {},
   "permission": {},
-  "reference": {
-    "effect": "github.com/Effect-TS/effect-smol",
-  },
   "mcp": {},
   "tools": {
     "github-triage": false,

.opencode/skills/improve-codebase-architecture/DEEPENING.md

@@ -0,0 +1,37 @@
+# Deepening
+
+How to deepen a cluster of shallow modules safely, given its dependencies. Assumes the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**.
+
+## Dependency categories
+
+When assessing a candidate for deepening, classify its dependencies. The category determines how the deepened module is tested across its seam.
+
+### 1. In-process
+
+Pure computation, in-memory state, no I/O. Always deepenable — merge the modules and test through the new interface directly. No adapter needed.
+
+### 2. Local-substitutable
+
+Dependencies that have local test stand-ins (PGLite for Postgres, in-memory filesystem). Deepenable if the stand-in exists. The deepened module is tested with the stand-in running in the test suite. The seam is internal; no port at the module's external interface.
+
+### 3. Remote but owned (Ports & Adapters)
+
+Your own services across a network boundary (microservices, internal APIs). Define a **port** (interface) at the seam. The deep module owns the logic; the transport is injected as an **adapter**. Tests use an in-memory adapter. Production uses an HTTP/gRPC/queue adapter.
+
+Recommendation shape: _"Define a port at the seam, implement an HTTP adapter for production and an in-memory adapter for testing, so the logic sits in one deep module even though it's deployed across a network."_
+
+### 4. True external (Mock)
+
+Third-party services (Stripe, Twilio, etc.) you don't control. The deepened module takes the external dependency as an injected port; tests provide a mock adapter.
+
+## Seam discipline
+
+- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a port unless at least two adapters are justified (typically production + test). A single-adapter seam is just indirection.
+- **Internal seams vs external seams.** A deep module can have internal seams (private to its implementation, used by its own tests) as well as the external seam at its interface. Don't expose internal seams through the interface just because tests use them.
+
+## Testing strategy: replace, don't layer
+
+- Old unit tests on shallow modules become waste once tests at the deepened module's interface exist — delete them.
+- Write new tests at the deepened module's interface. The **interface is the test surface**.
+- Tests assert on observable outcomes through the interface, not internal state.
+- Tests should survive internal refactors — they describe behaviour, not implementation. If a test has to change when the implementation changes, it's testing past the interface.

.opencode/skills/improve-codebase-architecture/INTERFACE-DESIGN.md

@@ -0,0 +1,44 @@
+# Interface Design
+
+When the user wants to explore alternative interfaces for a chosen deepening candidate, use this parallel sub-agent pattern. Based on "Design It Twice" (Ousterhout) — your first idea is unlikely to be the best.
+
+Uses the vocabulary in [LANGUAGE.md](LANGUAGE.md) — **module**, **interface**, **seam**, **adapter**, **leverage**.
+
+## Process
+
+### 1. Frame the problem space
+
+Before spawning sub-agents, write a user-facing explanation of the problem space for the chosen candidate:
+
+- The constraints any new interface would need to satisfy
+- The dependencies it would rely on, and which category they fall into (see [DEEPENING.md](DEEPENING.md))
+- A rough illustrative code sketch to ground the constraints — not a proposal, just a way to make the constraints concrete
+
+Show this to the user, then immediately proceed to Step 2. The user reads and thinks while the sub-agents work in parallel.
+
+### 2. Spawn sub-agents
+
+Spawn 3+ sub-agents in parallel using the Agent tool. Each must produce a **radically different** interface for the deepened module.
+
+Prompt each sub-agent with a separate technical brief (file paths, coupling details, dependency category from [DEEPENING.md](DEEPENING.md), what sits behind the seam). The brief is independent of the user-facing problem-space explanation in Step 1. Give each agent a different design constraint:
+
+- Agent 1: "Minimize the interface — aim for 1–3 entry points max. Maximise leverage per entry point."
+- Agent 2: "Maximise flexibility — support many use cases and extension."
+- Agent 3: "Optimise for the most common caller — make the default case trivial."
+- Agent 4 (if applicable): "Design around ports & adapters for cross-seam dependencies."
+
+Include both [LANGUAGE.md](LANGUAGE.md) vocabulary and CONTEXT.md vocabulary in the brief so each sub-agent names things consistently with the architecture language and the project's domain language.
+
+Each sub-agent outputs:
+
+1. Interface (types, methods, params — plus invariants, ordering, error modes)
+2. Usage example showing how callers use it
+3. What the implementation hides behind the seam
+4. Dependency strategy and adapters (see [DEEPENING.md](DEEPENING.md))
+5. Trade-offs — where leverage is high, where it's thin
+
+### 3. Present and compare
+
+Present designs sequentially so the user can absorb each one, then compare them in prose. Contrast by **depth** (leverage at the interface), **locality** (where change concentrates), and **seam placement**.
+
+After comparing, give your own recommendation: which design you think is strongest and why. If elements from different designs would combine well, propose a hybrid. Be opinionated — the user wants a strong read, not a menu.

.opencode/skills/improve-codebase-architecture/LANGUAGE.md

@@ -0,0 +1,53 @@
+# Language
+
+Shared vocabulary for every suggestion this skill makes. Use these terms exactly — don't substitute "component," "service," "API," or "boundary." Consistent language is the whole point.
+
+## Terms
+
+**Module**
+Anything with an interface and an implementation. Deliberately scale-agnostic — applies equally to a function, class, package, or tier-spanning slice.
+_Avoid_: unit, component, service.
+
+**Interface**
+Everything a caller must know to use the module correctly. Includes the type signature, but also invariants, ordering constraints, error modes, required configuration, and performance characteristics.
+_Avoid_: API, signature (too narrow — those refer only to the type-level surface).
+
+**Implementation**
+What's inside a module — its body of code. Distinct from **Adapter**: a thing can be a small adapter with a large implementation (a Postgres repo) or a large adapter with a small implementation (an in-memory fake). Reach for "adapter" when the seam is the topic; "implementation" otherwise.
+
+**Depth**
+Leverage at the interface — the amount of behaviour a caller (or test) can exercise per unit of interface they have to learn. A module is **deep** when a large amount of behaviour sits behind a small interface. A module is **shallow** when the interface is nearly as complex as the implementation.
+
+**Seam** _(from Michael Feathers)_
+A place where you can alter behaviour without editing in that place. The _location_ at which a module's interface lives. Choosing where to put the seam is its own design decision, distinct from what goes behind it.
+_Avoid_: boundary (overloaded with DDD's bounded context).
+
+**Adapter**
+A concrete thing that satisfies an interface at a seam. Describes _role_ (what slot it fills), not substance (what's inside).
+
+**Leverage**
+What callers get from depth. More capability per unit of interface they have to learn. One implementation pays back across N call sites and M tests.
+
+**Locality**
+What maintainers get from depth. Change, bugs, knowledge, and verification concentrate at one place rather than spreading across callers. Fix once, fixed everywhere.
+
+## Principles
+
+- **Depth is a property of the interface, not the implementation.** A deep module can be internally composed of small, mockable, swappable parts — they just aren't part of the interface. A module can have **internal seams** (private to its implementation, used by its own tests) as well as the **external seam** at its interface.
+- **The deletion test.** Imagine deleting the module. If complexity vanishes, the module wasn't hiding anything (it was a pass-through). If complexity reappears across N callers, the module was earning its keep.
+- **The interface is the test surface.** Callers and tests cross the same seam. If you want to test _past_ the interface, the module is probably the wrong shape.
+- **One adapter means a hypothetical seam. Two adapters means a real one.** Don't introduce a seam unless something actually varies across it.
+
+## Relationships
+
+- A **Module** has exactly one **Interface** (the surface it presents to callers and tests).
+- **Depth** is a property of a **Module**, measured against its **Interface**.
+- A **Seam** is where a **Module**'s **Interface** lives.
+- An **Adapter** sits at a **Seam** and satisfies the **Interface**.
+- **Depth** produces **Leverage** for callers and **Locality** for maintainers.
+
+## Rejected framings
+
+- **Depth as ratio of implementation-lines to interface-lines** (Ousterhout): rewards padding the implementation. We use depth-as-leverage instead.
+- **"Interface" as the TypeScript `interface` keyword or a class's public methods**: too narrow — interface here includes every fact a caller must know.
+- **"Boundary"**: overloaded with DDD's bounded context. Say **seam** or **interface**.

.opencode/skills/improve-codebase-architecture/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: improve-codebase-architecture
+description: Find deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
+---
+
+# Improve Codebase Architecture
+
+Surface architectural friction and propose **deepening opportunities** — refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability.
+
+## Glossary
+
+Use these terms exactly in every suggestion. Consistent language is the point — don't drift into "component," "service," "API," or "boundary." Full definitions in [LANGUAGE.md](LANGUAGE.md).
+
+- **Module** — anything with an interface and an implementation (function, class, package, slice).
+- **Interface** — everything a caller must know to use the module: types, invariants, error modes, ordering, config. Not just the type signature.
+- **Implementation** — the code inside.
+- **Depth** — leverage at the interface: a lot of behaviour behind a small interface. **Deep** = high leverage. **Shallow** = interface nearly as complex as the implementation.
+- **Seam** — where an interface lives; a place behaviour can be altered without editing in place. (Use this, not "boundary.")
+- **Adapter** — a concrete thing satisfying an interface at a seam.
+- **Leverage** — what callers get from depth.
+- **Locality** — what maintainers get from depth: change, bugs, knowledge concentrated in one place.
+
+Key principles (see [LANGUAGE.md](LANGUAGE.md) for the full list):
+
+- **Deletion test**: imagine deleting the module. If complexity vanishes, it was a pass-through. If complexity reappears across N callers, it was earning its keep.
+- **The interface is the test surface.**
+- **One adapter = hypothetical seam. Two adapters = real seam.**
+
+This skill is _informed_ by the project's domain model. The domain language gives names to good seams; ADRs record decisions the skill should not re-litigate.
+
+## Process
+
+### 1. Explore
+
+Read the project's domain glossary and any ADRs in the area you're touching first.
+
+Then use the Agent tool with `subagent_type=Explore` to walk the codebase. Don't follow rigid heuristics — explore organically and note where you experience friction:
+
+- Where does understanding one concept require bouncing between many small modules?
+- Where are modules **shallow** — interface nearly as complex as the implementation?
+- Where have pure functions been extracted just for testability, but the real bugs hide in how they're called (no **locality**)?
+- Where do tightly-coupled modules leak across their seams?
+- Which parts of the codebase are untested, or hard to test through their current interface?
+
+Apply the **deletion test** to anything you suspect is shallow: would deleting it concentrate complexity, or just move it? A "yes, concentrates" is the signal you want.
+
+### 2. Present candidates
+
+Present a numbered list of deepening opportunities. For each candidate:
+
+- **Files** — which files/modules are involved
+- **Problem** — why the current architecture is causing friction
+- **Solution** — plain English description of what would change
+- **Benefits** — explained in terms of locality and leverage, and also in how tests would improve
+
+**Use CONTEXT.md vocabulary for the domain, and [LANGUAGE.md](LANGUAGE.md) vocabulary for the architecture.** If `CONTEXT.md` defines "Order," talk about "the Order intake module" — not "the FooBarHandler," and not "the Order service."
+
+**ADR conflicts**: if a candidate contradicts an existing ADR, only surface it when the friction is real enough to warrant revisiting the ADR. Mark it clearly (e.g. _"contradicts ADR-0007 — but worth reopening because…"_). Don't list every theoretical refactor an ADR forbids.
+
+Do NOT propose interfaces yet. Ask the user: "Which of these would you like to explore?"
+
+### 3. Grilling loop
+
+Once the user picks a candidate, drop into a grilling conversation. Walk the design tree with them — constraints, dependencies, the shape of the deepened module, what sits behind the seam, what tests survive.
+
+Side effects happen inline as decisions crystallize:
+
+- **Naming a deepened module after a concept not in `CONTEXT.md`?** Add the term to `CONTEXT.md` — same discipline as `/grill-with-docs` (see [CONTEXT-FORMAT.md](../grill-with-docs/CONTEXT-FORMAT.md)). Create the file lazily if it doesn't exist.
+- **Sharpening a fuzzy term during the conversation?** Update `CONTEXT.md` right there.
+- **User rejects the candidate with a load-bearing reason?** Offer an ADR, framed as: _"Want me to record this as an ADR so future architecture reviews don't re-suggest it?"_ Only offer when the reason would actually be needed by a future explorer to avoid re-suggesting the same thing — skip ephemeral reasons ("not worth it right now") and self-evident ones. See [ADR-FORMAT.md](../grill-with-docs/ADR-FORMAT.md).
+- **Want to explore alternative interfaces for the deepened module?** See [INTERFACE-DESIGN.md](INTERFACE-DESIGN.md).

AGENTS.md

@@ -1,6 +1,8 @@
 - To regenerate the JavaScript SDK, run `./packages/sdk/js/script/build.ts`.
+- ALWAYS USE PARALLEL TOOLS WHEN APPLICABLE.
 - The default branch in this repo is `dev`.
 - Local `main` ref may not exist; use `dev` or `origin/dev` for diffs.
+- Prefer automation: execute requested actions without confirmation unless blocked by missing info or safety/irreversibility.
 
 ## Commits and PR Titles
 
@@ -47,13 +49,6 @@ obj.b
 const { a, b } = obj
 ```
 
-### Imports
-
-- Never alias imports. Do not use `import { foo as bar } from "..."` or renamed imports like `resolve as pathResolve`.
-- Never use star imports. Do not use `import * as Foo from "..."` or `import type * as Foo from "..."`.
-- If a namespace-style value is needed, import the module's own exported namespace by name, for example `import { Project } from "@opencode-ai/core/project"`, then reference `Project.ID`.
-- Prefer dynamic imports for heavy modules that are only needed in selected code paths, especially in startup-sensitive entrypoints. Destructure dynamic import bindings near the top of the narrowest scope that needs them so they read like normal imports. Avoid inline chains such as `await import("./module").then((mod) => mod.value())` or `(await import("./module")).value()`. Keep branch-specific imports inside the branch that needs them to preserve lazy loading.
-
 ### Variables
 
 Prefer `const` over `let`. Use ternaries or early returns instead of reassignment.

bunfig.toml

@@ -2,7 +2,7 @@
 exact = true
 # Only install newly resolved package versions published at least 3 days ago.
 minimumReleaseAge = 259200
-minimumReleaseAgeExcludes = ["@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-x64", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "gitlab-ai-provider"]
+minimumReleaseAgeExcludes = ["@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-x64", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid"]
 
 [test]
 root = "./do-not-run-tests-from-root"

infra/app.ts

@@ -30,7 +30,7 @@ export const api = new sst.cloudflare.Worker("Api", {
   transform: {
     worker: (args) => {
       args.logpush = true
-      if ($app.stage === "vimtor" || $app.stage === "adam") return
+      if ($app.stage === "vimtor") return
       args.bindings = $resolve(args.bindings).apply((bindings) => [
         ...bindings,
         {

infra/console.ts

@@ -1,9 +1,7 @@
-import { deployAws, domain } from "./stage"
+import { domain } from "./stage"
 import { EMAILOCTOPUS_API_KEY } from "./app"
 import { SECRET } from "./secret"
 
-const lake = deployAws ? await import("./lake") : undefined
-
 ////////////////
 // DATABASE
 ////////////////
@@ -242,7 +240,7 @@ const SALESFORCE_INSTANCE_URL = new sst.Secret("SALESFORCE_INSTANCE_URL")
 
 const logProcessor = new sst.cloudflare.Worker("LogProcessor", {
   handler: "packages/console/function/src/log-processor.ts",
-  link: [SECRET.HoneycombApiKey, ...(lake?.lakeIngest ? [lake.lakeIngest] : [])],
+  link: [new sst.Secret("HONEYCOMB_API_KEY")],
 })
 
 new sst.cloudflare.x.SolidStart("Console", {
@@ -252,8 +250,6 @@ new sst.cloudflare.x.SolidStart("Console", {
     bucket,
     bucketNew,
     database,
-    SECRET.UpstashRedisRestUrl,
-    SECRET.UpstashRedisRestToken,
     AUTH_API_URL,
     STRIPE_WEBHOOK_SECRET,
     DISCORD_INCIDENT_WEBHOOK_URL,
@@ -285,7 +281,7 @@ new sst.cloudflare.x.SolidStart("Console", {
   },
   transform: {
     server: {
-      placement: { region: "aws:us-east-2" },
+      placement: { region: "aws:us-east-1" },
       transform: {
         worker: {
           tailConsumers: [{ service: logProcessor.nodes.worker.scriptName }],

infra/lake.ts

@@ -1,327 +0,0 @@
-import { domain } from "./stage"
-
-const current = aws.getCallerIdentityOutput({})
-const partition = aws.getPartitionOutput({})
-const region = aws.getRegionOutput({})
-
-const tableBucketName = `opencode-${$app.stage}-lake`
-const glueCatalogName = "s3tablescatalog"
-const glueCatalogArn = $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:catalog`
-const glueS3TablesCatalogArn = $interpolate`${glueCatalogArn}/${glueCatalogName}`
-const glueS3TablesChildCatalogArn = $interpolate`${glueS3TablesCatalogArn}/${tableBucketName}`
-const glueS3TablesDatabaseWildcardArn = $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:database/${glueCatalogName}/${tableBucketName}/*`
-const glueS3TablesTableWildcardArn = $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/${glueCatalogName}/${tableBucketName}/*/*`
-const s3TablesBucketWildcardArn = $interpolate`arn:${partition.partition}:s3tables:${region.region}:${current.accountId}:bucket/*`
-
-export const tableBucket = new aws.s3tables.TableBucket("LakeTableBucket", {
-  name: tableBucketName,
-  forceDestroy: $app.stage !== "production",
-})
-
-const s3TablesCatalog = new aws.cloudcontrol.Resource(
-  "LakeS3TablesCatalog",
-  {
-    typeName: "AWS::Glue::Catalog",
-    desiredState: $jsonStringify({
-      Name: glueCatalogName,
-      Description: "Federated catalog for S3 Tables",
-      FederatedCatalog: {
-        Identifier: s3TablesBucketWildcardArn,
-        ConnectionName: "aws:s3tables",
-      },
-      CreateDatabaseDefaultPermissions: [
-        {
-          Principal: {
-            DataLakePrincipalIdentifier: "IAM_ALLOWED_PRINCIPALS",
-          },
-          Permissions: ["ALL"],
-        },
-      ],
-      CreateTableDefaultPermissions: [
-        {
-          Principal: {
-            DataLakePrincipalIdentifier: "IAM_ALLOWED_PRINCIPALS",
-          },
-          Permissions: ["ALL"],
-        },
-      ],
-      AllowFullTableExternalDataAccess: "True",
-    }),
-  },
-  { dependsOn: [tableBucket] },
-)
-
-const athenaResultsBucket = new aws.s3.Bucket("LakeAthenaResults", {
-  bucket: `opencode-${$app.stage}-lake-athena-results`,
-  forceDestroy: $app.stage !== "production",
-})
-
-const firehoseErrorBucket = new aws.s3.Bucket("LakeFirehoseErrors", {
-  bucket: `opencode-${$app.stage}-lake-firehose-errors`,
-  forceDestroy: $app.stage !== "production",
-})
-
-const athenaWorkgroup = new aws.athena.Workgroup("LakeAthenaWorkgroup", {
-  name: `opencode-${$app.stage}-lake-workgroup`,
-  forceDestroy: $app.stage !== "production",
-  configuration: {
-    enforceWorkgroupConfiguration: true,
-    publishCloudwatchMetricsEnabled: true,
-    resultConfiguration: {
-      outputLocation: $interpolate`s3://${athenaResultsBucket.bucket}/`,
-    },
-  },
-})
-
-const firehoseRole = new aws.iam.Role("LakeFirehoseRole", {
-  assumeRolePolicy: aws.iam.getPolicyDocumentOutput({
-    statements: [
-      {
-        effect: "Allow",
-        actions: ["sts:AssumeRole"],
-        principals: [
-          {
-            type: "Service",
-            identifiers: ["firehose.amazonaws.com"],
-          },
-        ],
-      },
-    ],
-  }).json,
-})
-
-const firehosePolicy = new aws.iam.RolePolicy("LakeFirehosePolicy", {
-  role: firehoseRole.id,
-  policy: aws.iam.getPolicyDocumentOutput({
-    statements: [
-      {
-        effect: "Allow",
-        actions: [
-          "s3tables:ListTableBuckets",
-          "s3tables:GetTableBucket",
-          "s3tables:GetNamespace",
-          "s3tables:GetTable",
-          "s3tables:GetTableData",
-          "s3tables:GetTableMetadataLocation",
-          "s3tables:ListNamespaces",
-          "s3tables:ListTables",
-          "s3tables:PutTableData",
-          "s3tables:UpdateTableMetadataLocation",
-        ],
-        resources: ["*"],
-      },
-      {
-        effect: "Allow",
-        actions: [
-          "glue:GetCatalog",
-          "glue:GetCatalogs",
-          "glue:GetDatabase",
-          "glue:GetDatabases",
-          "glue:GetTable",
-          "glue:GetTables",
-          "glue:UpdateTable",
-        ],
-        resources: [
-          glueCatalogArn,
-          glueS3TablesCatalogArn,
-          $interpolate`${glueS3TablesCatalogArn}/*`,
-          glueS3TablesDatabaseWildcardArn,
-          glueS3TablesTableWildcardArn,
-          $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:database/*`,
-          $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/*/*`,
-          $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/${glueCatalogName}/*`,
-        ],
-      },
-      {
-        effect: "Allow",
-        actions: [
-          "s3:AbortMultipartUpload",
-          "s3:GetBucketLocation",
-          "s3:GetObject",
-          "s3:ListBucket",
-          "s3:ListBucketMultipartUploads",
-          "s3:PutObject",
-        ],
-        resources: [firehoseErrorBucket.arn, $interpolate`${firehoseErrorBucket.arn}/*`],
-      },
-      {
-        effect: "Allow",
-        actions: ["lakeformation:GetDataAccess"],
-        resources: ["*"],
-      },
-    ],
-  }).json,
-})
-
-const firehose = new aws.kinesis.FirehoseDeliveryStream(
-  "LakeFirehose",
-  {
-    name: `opencode-${$app.stage}-lake-ingest`,
-    destination: "iceberg",
-    icebergConfiguration: {
-      appendOnly: true,
-      bufferingInterval: 60,
-      bufferingSize: 1,
-      catalogArn: glueS3TablesChildCatalogArn,
-      processingConfiguration: {
-        enabled: true,
-        processors: [
-          {
-            type: "MetadataExtraction",
-            parameters: [
-              { parameterName: "JsonParsingEngine", parameterValue: "JQ-1.6" },
-              {
-                parameterName: "MetadataExtractionQuery",
-                parameterValue:
-                  '{destinationDatabaseName:._lake_database,destinationTableName:._lake_table,operation:(._lake_operation // "insert")}',
-              },
-            ],
-          },
-        ],
-      },
-      roleArn: firehoseRole.arn,
-      s3BackupMode: "FailedDataOnly",
-      s3Configuration: {
-        roleArn: firehoseRole.arn,
-        bucketArn: firehoseErrorBucket.arn,
-        errorOutputPrefix: "errors/!{firehose:error-output-type}/",
-      },
-    },
-  },
-  { dependsOn: [s3TablesCatalog, firehosePolicy] },
-)
-
-export const lakeVpc = new sst.aws.Vpc("LakeVpc")
-export const lakeCluster = new sst.aws.Cluster("LakeCluster", { vpc: lakeVpc })
-export const lakeRegion = region.region
-export const lakeCatalog = $interpolate`${glueCatalogName}/${tableBucket.name}`
-export const lakeAthenaWorkgroup = athenaWorkgroup
-
-const ingestSecret = new random.RandomPassword("LakeIngestSecret", { length: 32 })
-export const ingestSecretSsm = new aws.ssm.Parameter("LakeIngestSecretSsm", {
-  name: $interpolate`/${$app.name}/${$app.stage}/lake/ingest/secret`,
-  type: "SecureString",
-  value: ingestSecret.result,
-})
-
-const ingestConfig = new sst.Linkable("LakeIngestConfig", {
-  properties: {
-    streamName: firehose.name,
-    secret: ingestSecret.result,
-  },
-})
-
-const ingestService = new sst.aws.Service("LakeIngestService", {
-  cluster: lakeCluster,
-  architecture: "arm64",
-  cpu: "1 vCPU",
-  memory: "4 GB",
-  image: {
-    context: ".",
-    dockerfile: "packages/stats/server/Dockerfile",
-  },
-  link: [ingestConfig],
-  permissions: [
-    {
-      actions: ["firehose:PutRecord", "firehose:PutRecordBatch"],
-      resources: [firehose.arn],
-    },
-  ],
-  scaling: {
-    min: $app.stage === "production" ? 2 : 1,
-    max: $app.stage === "production" ? 32 : 4,
-    cpuUtilization: 60,
-    memoryUtilization: 70,
-  },
-  loadBalancer: {
-    domain: {
-      name: `lake.${domain}`,
-      dns: sst.cloudflare.dns(),
-    },
-    rules: [
-      { listen: "80/http", redirect: "443/https" },
-      { listen: "443/https", forward: "3000/http" },
-    ],
-    health: {
-      "3000/http": {
-        path: "/ready",
-        successCodes: "200-299",
-      },
-    },
-  },
-  health: {
-    command: [
-      "CMD-SHELL",
-      "bun --eval \"fetch('http://localhost:3000/health').then((r) => process.exit(r.ok ? 0 : 1)).catch(() => process.exit(1))\"",
-    ],
-    interval: "30 seconds",
-    retries: 3,
-    startPeriod: "30 seconds",
-    timeout: "5 seconds",
-  },
-  dev: {
-    command: "bun run start",
-    directory: "packages/stats/server",
-    url: "http://localhost:3000",
-  },
-  wait: $app.stage === "production",
-})
-
-export const lakeIngest = new sst.Linkable("LakeIngest", {
-  properties: {
-    url: ingestService.url,
-    secret: ingestSecret.result,
-  },
-})
-
-export const lakeQueryPermissions = [
-  {
-    actions: ["athena:StartQueryExecution", "athena:GetQueryExecution", "athena:GetQueryResults"],
-    resources: [athenaWorkgroup.arn],
-  },
-  {
-    actions: [
-      "glue:GetCatalog",
-      "glue:GetCatalogs",
-      "glue:GetDatabase",
-      "glue:GetDatabases",
-      "glue:GetTable",
-      "glue:GetTables",
-      "glue:GetPartitions",
-    ],
-    resources: [
-      glueCatalogArn,
-      glueS3TablesCatalogArn,
-      $interpolate`${glueS3TablesCatalogArn}/*`,
-      glueS3TablesDatabaseWildcardArn,
-      glueS3TablesTableWildcardArn,
-      $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:database/*`,
-      $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/*/*`,
-      $interpolate`arn:${partition.partition}:glue:${region.region}:${current.accountId}:table/${glueCatalogName}/*`,
-    ],
-  },
-  {
-    actions: ["s3:GetBucketLocation", "s3:ListBucket"],
-    resources: [athenaResultsBucket.arn],
-  },
-  {
-    actions: ["s3:GetObject", "s3:PutObject", "s3:AbortMultipartUpload", "s3:ListBucketMultipartUploads"],
-    resources: [$interpolate`${athenaResultsBucket.arn}/*`],
-  },
-  {
-    actions: [
-      "s3tables:GetTableBucket",
-      "s3tables:GetNamespace",
-      "s3tables:GetTable",
-      "s3tables:GetTableData",
-      "s3tables:GetTableMetadataLocation",
-      "s3tables:ListNamespaces",
-      "s3tables:ListTables",
-    ],
-    resources: ["*"],
-  },
-  {
-    actions: ["lakeformation:GetDataAccess"],
-    resources: ["*"],
-  },
-]

infra/secret.ts

@@ -7,8 +7,5 @@ sst.Linkable.wrap(random.RandomPassword, (resource) => ({
 export const SECRET = {
   R2AccessKey: new sst.Secret("R2AccessKey", "unknown"),
   R2SecretKey: new sst.Secret("R2SecretKey", "unknown"),
-  HoneycombApiKey: new sst.Secret("HONEYCOMB_API_KEY"),
   HoneycombWebhookSecret: new random.RandomPassword("HoneycombWebhookSecret", { length: 24 }),
-  UpstashRedisRestUrl: new sst.Secret("UpstashRedisRestUrl"),
-  UpstashRedisRestToken: new sst.Secret("UpstashRedisRestToken"),
 }

infra/stage.ts

@@ -5,8 +5,6 @@ export const domain = (() => {
 })()
 
 export const zoneID = "430ba34c138cfb5360826c4909f99be8"
-export const awsStage = $app.stage === "production" ? "production" : "dev"
-export const deployAws = $app.stage === awsStage
 
 new cloudflare.RegionalHostname("RegionalHostname", {
   hostname: domain,

infra/stats.ts

@@ -1,203 +0,0 @@
-import { lakeAthenaWorkgroup, lakeCatalog, lakeCluster, lakeQueryPermissions, lakeRegion, tableBucket } from "./lake"
-import { EMAILOCTOPUS_API_KEY } from "./app"
-import { domain } from "./stage"
-
-////////////////
-// LAKE
-////////////////
-
-const inferenceNamespace = new aws.s3tables.Namespace("LakeInferenceNamespace", {
-  namespace: "inference",
-  tableBucketArn: tableBucket.arn,
-})
-
-const inferenceEventTable = new aws.s3tables.Table(
-  "LakeInferenceEventTable",
-  {
-    name: "event",
-    namespace: inferenceNamespace.namespace,
-    tableBucketArn: inferenceNamespace.tableBucketArn,
-    format: "ICEBERG",
-    metadata: {
-      iceberg: {
-        schema: {
-          fields: [
-            { name: "event_timestamp", type: "string", required: false },
-            { name: "event_date", type: "string", required: false },
-            { name: "event_type", type: "string", required: false },
-            { name: "dataset", type: "string", required: false },
-            { name: "cf_continent", type: "string", required: false },
-            { name: "cf_country", type: "string", required: false },
-            { name: "cf_city", type: "string", required: false },
-            { name: "cf_region", type: "string", required: false },
-            { name: "cf_latitude", type: "double", required: false },
-            { name: "cf_longitude", type: "double", required: false },
-            { name: "cf_timezone", type: "string", required: false },
-            { name: "duration", type: "double", required: false },
-            { name: "request_length", type: "long", required: false },
-            { name: "status", type: "int", required: false },
-            { name: "ip", type: "string", required: false },
-            { name: "is_stream", type: "boolean", required: false },
-            { name: "session", type: "string", required: false },
-            { name: "request", type: "string", required: false },
-            { name: "client", type: "string", required: false },
-            { name: "user_agent", type: "string", required: false },
-            { name: "model_variant", type: "string", required: false },
-            { name: "source", type: "string", required: false },
-            { name: "provider", type: "string", required: false },
-            { name: "provider_model", type: "string", required: false },
-            { name: "model", type: "string", required: false },
-            { name: "llm_error_code", type: "int", required: false },
-            { name: "llm_error_message", type: "string", required: false },
-            { name: "error_response", type: "string", required: false },
-            { name: "error_type", type: "string", required: false },
-            { name: "error_message", type: "string", required: false },
-            { name: "error_cause", type: "string", required: false },
-            { name: "error_cause2", type: "string", required: false },
-            { name: "api_key", type: "string", required: false },
-            { name: "workspace", type: "string", required: false },
-            { name: "is_subscription", type: "boolean", required: false },
-            { name: "subscription", type: "string", required: false },
-            { name: "response_length", type: "long", required: false },
-            { name: "time_to_first_byte", type: "long", required: false },
-            { name: "timestamp_first_byte", type: "long", required: false },
-            { name: "timestamp_last_byte", type: "long", required: false },
-            { name: "tokens_input", type: "long", required: false },
-            { name: "tokens_output", type: "long", required: false },
-            { name: "tokens_reasoning", type: "long", required: false },
-            { name: "tokens_cache_read", type: "long", required: false },
-            { name: "tokens_cache_write_5m", type: "long", required: false },
-            { name: "tokens_cache_write_1h", type: "long", required: false },
-            { name: "cost_input_microcents", type: "long", required: false },
-            { name: "cost_output_microcents", type: "long", required: false },
-            { name: "cost_cache_read_microcents", type: "long", required: false },
-            { name: "cost_cache_write_microcents", type: "long", required: false },
-            { name: "cost_total_microcents", type: "long", required: false },
-            { name: "cost_input", type: "long", required: false },
-            { name: "cost_output", type: "long", required: false },
-            { name: "cost_cache_read", type: "long", required: false },
-            { name: "cost_cache_write_5m", type: "long", required: false },
-            { name: "cost_cache_write_1h", type: "long", required: false },
-            { name: "cost_total", type: "long", required: false },
-          ],
-        },
-      },
-    },
-  },
-  { deleteBeforeReplace: $app.stage !== "production" },
-)
-
-export const inferenceEvent = new sst.Linkable("InferenceEvent", {
-  properties: {
-    region: lakeRegion,
-    catalog: lakeCatalog,
-    database: inferenceNamespace.namespace,
-    table: inferenceEventTable.name,
-    tableBucket: tableBucket.name,
-    workgroup: lakeAthenaWorkgroup.name,
-  },
-})
-
-////////////////
-// DATABASE
-////////////////
-
-const cluster = planetscale.getDatabaseOutput({
-  name: "opencode-stats",
-  organization: "anomalyco",
-})
-
-const branch =
-  $app.stage === "production"
-    ? planetscale.getBranchOutput({
-        name: "production",
-        organization: cluster.organization,
-        database: cluster.name,
-      })
-    : new planetscale.Branch("StatsDatabaseBranch", {
-        database: cluster.name,
-        organization: cluster.organization,
-        name: $app.stage,
-        parentBranch: "production",
-      })
-
-const password = new planetscale.Password("StatsDatabasePassword", {
-  name: $app.stage,
-  database: cluster.name,
-  organization: cluster.organization,
-  branch: branch.name,
-})
-
-const databaseUrl = $interpolate`mysql://${password.username.apply(encodeURIComponent)}:${password.plaintext.apply(
-  encodeURIComponent,
-)}@${password.accessHostUrl}/${cluster.name}`
-
-export const database = new sst.Linkable("StatsDatabase", {
-  properties: {
-    host: password.accessHostUrl,
-    database: cluster.name,
-    username: password.username,
-    password: password.plaintext,
-    port: 3306,
-    url: databaseUrl,
-  },
-})
-
-new sst.x.DevCommand("StatsStudio", {
-  link: [database],
-  environment: {
-    DATABASE_URL: databaseUrl,
-  },
-  dev: {
-    command: "bun db:studio",
-    directory: "packages/stats/core",
-    autostart: false,
-  },
-})
-
-////////////////
-// APP
-////////////////
-
-export const app = new sst.cloudflare.x.SolidStart("Stats", {
-  path: "packages/stats/app",
-  buildCommand: "bun run build",
-  domain: `stats.${domain}`,
-  link: [database, EMAILOCTOPUS_API_KEY],
-  environment: {
-    PUBLIC_URL: `https://stats.${domain}/stats`,
-  },
-})
-
-////////////////
-// SERVICES
-////////////////
-
-const statsSyncConfig = new sst.Linkable("StatsSyncConfig", {
-  properties: {
-    dataset: "zen",
-  },
-})
-
-export const statSync = new sst.aws.Service("StatsSyncService", {
-  cluster: lakeCluster,
-  architecture: "arm64",
-  cpu: "0.25 vCPU",
-  memory: "0.5 GB",
-  image: {
-    context: ".",
-    dockerfile: "packages/stats/server/Dockerfile",
-  },
-  command: ["bun", "src/stat-sync.ts"],
-  link: [database, inferenceEvent, statsSyncConfig],
-  permissions: lakeQueryPermissions,
-  scaling: {
-    min: 1,
-    max: 1,
-  },
-  dev: {
-    command: "bun src/stat-sync.ts",
-    directory: "packages/stats/server",
-    autostart: false,
-  },
-})

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-fzplLKjzYefVCRhAgfCWWIa3me2JiI2d9kDBACnz4fA=",
-    "aarch64-linux": "sha256-gccipj2CAau/lZ7KTQhdeU8n6fcXDuUt4X4XbNufCko=",
-    "aarch64-darwin": "sha256-r0QEetxKUf6HrtMOozyvb4jjEJjVtp+DE8aiKKhRrVI=",
-    "x86_64-darwin": "sha256-bU+5WudkiIflFgoqgLSf30iqeNNLuEbScI5oMFPu9eM="
+    "x86_64-linux": "sha256-qq8cKNcW10NRbPx2T/Gpzby4nx2qHzj0LWDwqyPl7rY=",
+    "aarch64-linux": "sha256-UguK4nObAL/ovGZQousveoXCmkcxEgWy7XSSzxVJNEY=",
+    "aarch64-darwin": "sha256-NibSqZiF0XMbFhOtl2CQvFe4N/BXB5UAdt2iKv7dIcI=",
+    "x86_64-darwin": "sha256-ZNeZSpYitdUjXx/sULAIoLXrM6+Vz+GXQxKpdfgXh60="
   }
 }

package.json

@@ -10,7 +10,6 @@
     "dev:desktop": "bun --cwd packages/desktop dev",
     "dev:web": "bun --cwd packages/app dev",
     "dev:console": "ulimit -n 10240 2>/dev/null; bun run --cwd packages/console/app dev",
-    "dev:stats": "bun sst shell --stage=production -- bun run --cwd packages/stats/app dev",
     "dev:storybook": "bun --cwd packages/storybook storybook",
     "lint": "oxlint",
     "typecheck": "bun turbo typecheck",
@@ -18,29 +17,28 @@
     "postinstall": "bun run --cwd packages/opencode fix-node-pty",
     "prepare": "husky",
     "random": "echo 'Random script'",
-    "sso": "aws sso login --sso-session=opencode --no-browser",
+    "hello": "echo 'Hello World!'",
     "test": "echo 'do not run tests from root' && exit 1"
   },
   "workspaces": {
     "packages": [
       "packages/*",
       "packages/console/*",
-      "packages/stats/*",
       "packages/sdk/js",
       "packages/slack"
     ],
     "catalog": {
-      "@effect/opentelemetry": "4.0.0-beta.74",
-      "@effect/platform-node": "4.0.0-beta.74",
-      "@effect/sql-sqlite-bun": "4.0.0-beta.74",
+      "@effect/opentelemetry": "4.0.0-beta.66",
+      "@effect/platform-node": "4.0.0-beta.66",
+      "@effect/sql-sqlite-bun": "4.0.0-beta.66",
       "@npmcli/arborist": "9.4.0",
       "@types/bun": "1.3.13",
       "@types/cross-spawn": "6.0.6",
       "@octokit/rest": "22.0.0",
       "@hono/zod-validator": "0.4.2",
-      "@opentui/core": "0.3.1",
-      "@opentui/keymap": "0.3.1",
-      "@opentui/solid": "0.3.1",
+      "@opentui/core": "0.2.15",
+      "@opentui/keymap": "0.2.15",
+      "@opentui/solid": "0.2.15",
       "ulid": "3.0.1",
       "@kobalte/core": "0.13.11",
       "@types/luxon": "3.7.1",
@@ -58,7 +56,7 @@
       "dompurify": "3.3.1",
       "drizzle-kit": "1.0.0-rc.2",
       "drizzle-orm": "1.0.0-rc.2",
-      "effect": "4.0.0-beta.74",
+      "effect": "4.0.0-beta.66",
       "ai": "6.0.168",
       "cross-spawn": "7.0.6",
       "hono": "4.10.7",
@@ -74,7 +72,6 @@
       "@typescript/native-preview": "7.0.0-dev.20251207.1",
       "zod": "4.1.8",
       "remeda": "2.26.0",
-      "sst": "4.13.1",
       "shiki": "3.20.0",
       "solid-list": "0.3.0",
       "tailwindcss": "4.1.11",
@@ -87,7 +84,7 @@
       "@sentry/vite-plugin": "4.6.0",
       "solid-js": "1.9.10",
       "vite-plugin-solid": "2.11.10",
-      "@lydell/node-pty": "1.2.0-beta.12"
+      "@lydell/node-pty": "1.2.0-beta.10"
     }
   },
   "devDependencies": {
@@ -101,7 +98,7 @@
     "oxlint-tsgolint": "0.21.0",
     "prettier": "3.6.2",
     "semver": "^7.6.0",
-    "sst": "catalog:",
+    "sst": "4.13.1",
     "turbo": "2.8.13"
   },
   "dependencies": {
@@ -143,10 +140,6 @@
     "@silvia-odwyer/photon-node@0.3.4": "patches/@silvia-odwyer%2Fphoton-node@0.3.4.patch",
     "@standard-community/standard-openapi@0.2.9": "patches/@standard-community%2Fstandard-openapi@0.2.9.patch",
     "solid-js@1.9.10": "patches/solid-js@1.9.10.patch",
-    "virtua@0.49.1": "patches/virtua@0.49.1.patch",
-    "@ai-sdk/xai@3.0.82": "patches/@ai-sdk%2Fxai@3.0.82.patch",
-    "gcp-metadata@8.1.2": "patches/gcp-metadata@8.1.2.patch",
-    "pacote@21.5.0": "patches/pacote@21.5.0.patch",
-    "@ai-sdk/google@3.0.73": "patches/@ai-sdk%2Fgoogle@3.0.73.patch"
+    "@ai-sdk/xai@3.0.82": "patches/@ai-sdk%2Fxai@3.0.82.patch"
   }
 }

packages/app/e2e/regression/session-list-path-loading.spec.ts

@@ -1,40 +0,0 @@
-import { expect, test } from "@playwright/test"
-import { fixture, pageMessages } from "../smoke/session-timeline.fixture"
-import { mockOpenCodeServer } from "../utils/mock-server"
-
-test("shows loaded sessions before the directory path request resolves", async ({ page }) => {
-  await mockOpenCodeServer(page, {
-    sessions: fixture.sessions,
-    provider: fixture.provider,
-    directory: fixture.directory,
-    project: fixture.project,
-    pageMessages,
-  })
-
-  let releasePath!: () => void
-  const pathBlocked = new Promise<void>((resolve) => {
-    releasePath = resolve
-  })
-  await page.route("**/path?*", async (route) => {
-    if (!new URL(route.request().url()).searchParams.has("directory")) return route.fallback()
-    await pathBlocked
-    return route.fallback()
-  })
-
-  await page.addInitScript((directory) => {
-    localStorage.setItem(
-      "opencode.global.dat:server",
-      JSON.stringify({
-        projects: { local: [{ worktree: directory, expanded: true }] },
-        lastProject: { local: directory },
-      }),
-    )
-  }, fixture.directory)
-
-  await page.goto("/")
-  try {
-    await expect(page.getByText(fixture.expected.sourceTitle).first()).toBeVisible({ timeout: 5_000 })
-  } finally {
-    releasePath()
-  }
-})

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

@@ -1,352 +0,0 @@
-import { expect, test, type Locator, type Page } from "@playwright/test"
-import { mockOpenCodeServer } from "../utils/mock-server"
-
-const directory = "C:/OpenCode/TimelineStateRegression"
-const projectID = "proj_timeline_state_regression"
-const sessionID = "ses_timeline_state_regression"
-const userMessageID = "msg_user_regression"
-const assistantMessageID = "msg_assistant_regression"
-const editPartID = "prt_0001_edit"
-const textPartID = "prt_9999_text"
-const title = "Timeline collapse state regression"
-const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
-
-type EventPayload = {
-  directory: string
-  payload: Record<string, unknown>
-}
-
-declare global {
-  interface Window {
-    __timelineDiffProbe: {
-      reset: () => void
-      shadowRoots: () => number
-    }
-  }
-}
-
-const userMessage = {
-  info: {
-    id: userMessageID,
-    sessionID,
-    role: "user",
-    time: { created: 1700000000000 },
-    summary: { diffs: [] },
-    agent: "build",
-    model,
-  },
-  parts: [
-    {
-      id: "prt_user_text",
-      sessionID,
-      messageID: userMessageID,
-      type: "text",
-      text: "Please edit the file.",
-    },
-  ],
-}
-
-const editPart = {
-  id: editPartID,
-  sessionID,
-  messageID: assistantMessageID,
-  type: "tool",
-  callID: "call_edit_regression",
-  tool: "edit",
-  state: {
-    status: "completed",
-    input: { filePath: "src/regression.ts" },
-    output: "Edited src/regression.ts",
-    title: "src/regression.ts",
-    metadata: {
-      filediff: {
-        file: "src/regression.ts",
-        additions: 1,
-        deletions: 1,
-        before: "export const value = 'before'\n",
-        after: "export const value = 'after'\n",
-      },
-      diff: "diff --git a/src/regression.ts b/src/regression.ts\n-export const value = 'before'\n+export const value = 'after'\n",
-    },
-    time: { start: 1700000001000, end: 1700000002000 },
-  },
-}
-
-const streamedTextPart = {
-  id: textPartID,
-  sessionID,
-  messageID: assistantMessageID,
-  type: "text",
-  text: "Streaming added a later assistant text part.",
-}
-
-const assistantMessage = {
-  info: {
-    id: assistantMessageID,
-    sessionID,
-    role: "assistant",
-    time: { created: 1700000001000 },
-    parentID: userMessageID,
-    modelID: model.modelID,
-    providerID: model.providerID,
-    mode: "build",
-    agent: "build",
-    path: { cwd: directory, root: directory },
-    cost: 0.01,
-    tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
-    variant: "max",
-  },
-  parts: [editPart],
-}
-
-test.describe("regression: session timeline local row state", () => {
-  test("keeps a manually collapsed tool collapsed when later assistant content streams", async ({ page }) => {
-    const events: EventPayload[] = []
-    await mockServer(page, events)
-    await configurePage(page)
-
-    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-    await expect(page.getByRole("heading", { name: title })).toBeVisible()
-
-    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
-    await expect(wrapper).toBeVisible()
-    await expectExpanded(wrapper, true)
-
-    await wrapper.evaluate((element) => {
-      ;(element as HTMLElement).dataset.regressionMarker = "before-stream"
-    })
-    await wrapper.locator('[data-slot="collapsible-trigger"]').first().click()
-    await expectExpanded(wrapper, false)
-
-    events.push({
-      directory,
-      payload: {
-        type: "message.part.updated",
-        properties: { part: streamedTextPart },
-      },
-    })
-
-    await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
-
-    expect(await readToolState(page)).toEqual({
-      expanded: false,
-      row: "AssistantPart",
-      streamedTextVisible: true,
-    })
-  })
-
-  test("does not remount an edit diff when sibling parts or diff counts update", async ({ page }) => {
-    const events: EventPayload[] = []
-    await installDiffProbe(page)
-    await mockServer(page, events)
-    await configurePage(page)
-
-    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-    await expect(page.getByRole("heading", { name: title })).toBeVisible()
-
-    const wrapper = page.locator(`[data-timeline-part-id="${editPartID}"]`).first()
-    await expect(wrapper).toBeVisible()
-    await expect(wrapper.locator('[data-component="file"][data-mode="diff"]').first()).toBeVisible()
-    await markDiffProbe(page)
-
-    events.push({
-      directory,
-      payload: {
-        type: "message.part.updated",
-        properties: { part: streamedTextPart },
-      },
-    })
-
-    await expect(page.locator(`[data-timeline-part-id="${textPartID}"]`).first()).toBeVisible({ timeout: 10_000 })
-    expect(await readDiffProbe(page)).toEqual({ fileMarker: "before", shadowRoots: 0, toolMarker: "before" })
-
-    await markDiffProbe(page)
-    events.push({
-      directory,
-      payload: {
-        type: "message.part.updated",
-        properties: { part: editPartWithAdditions(2) },
-      },
-    })
-
-    await expect(wrapper.locator('[data-slot="diff-changes-additions"]').filter({ hasText: "+2" }).first()).toBeVisible(
-      { timeout: 10_000 },
-    )
-    expect(await readDiffProbe(page)).toEqual({ fileMarker: "before", shadowRoots: 0, toolMarker: "before" })
-  })
-})
-
-async function configurePage(page: Page) {
-  await page.addInitScript(() => {
-    localStorage.setItem(
-      "settings.v3",
-      JSON.stringify({
-        general: {
-          editToolPartsExpanded: true,
-          shellToolPartsExpanded: true,
-          showReasoningSummaries: true,
-          showSessionProgressBar: true,
-        },
-      }),
-    )
-  })
-}
-
-async function expectExpanded(locator: Locator, expected: boolean) {
-  await expect.poll(() => locator.evaluate(readExpanded)).toBe(expected)
-}
-
-async function readToolState(page: Page) {
-  return page
-    .locator(`[data-timeline-part-id="${editPartID}"]`)
-    .first()
-    .evaluate(
-      (element, textPartID) => ({
-        expanded: (() => {
-          const trigger = element.querySelector('[data-slot="collapsible-trigger"]')
-          const aria = trigger?.getAttribute("aria-expanded")
-          if (aria === "true") return true
-          if (aria === "false") return false
-
-          const root = element.querySelector('[data-component="collapsible"]')
-          if (root?.hasAttribute("data-expanded")) return true
-          if (root?.hasAttribute("data-closed")) return false
-
-          const content = element.querySelector<HTMLElement>('[data-slot="collapsible-content"]')
-          return !!content && content.getBoundingClientRect().height > 0
-        })(),
-        row: element.closest("[data-timeline-row]")?.getAttribute("data-timeline-row"),
-        streamedTextVisible: !!document.querySelector(`[data-timeline-part-id="${textPartID}"]`),
-      }),
-      textPartID,
-    )
-}
-
-async function installDiffProbe(page: Page) {
-  await page.addInitScript(() => {
-    let shadowRootCount = 0
-    const attachShadow = Element.prototype.attachShadow
-    Element.prototype.attachShadow = function (init) {
-      shadowRootCount += 1
-      return attachShadow.call(this, init)
-    }
-    window.__timelineDiffProbe = {
-      reset: () => {
-        shadowRootCount = 0
-      },
-      shadowRoots: () => shadowRootCount,
-    }
-  })
-}
-
-async function markDiffProbe(page: Page) {
-  await page
-    .locator(`[data-timeline-part-id="${editPartID}"]`)
-    .first()
-    .evaluate((element) => {
-      const tool = element as HTMLElement
-      const file = tool.querySelector<HTMLElement>('[data-component="file"][data-mode="diff"]')
-      if (!file) throw new Error("missing edit diff file")
-
-      tool.dataset.timelineProbe = "before"
-      file.dataset.timelineProbe = "before"
-      window.__timelineDiffProbe.reset()
-    })
-}
-
-async function readDiffProbe(page: Page) {
-  return page
-    .locator(`[data-timeline-part-id="${editPartID}"]`)
-    .first()
-    .evaluate((element) => {
-      const tool = element as HTMLElement
-      const file = tool.querySelector<HTMLElement>('[data-component="file"][data-mode="diff"]')
-      return {
-        fileMarker: file?.dataset.timelineProbe,
-        shadowRoots: window.__timelineDiffProbe.shadowRoots(),
-        toolMarker: tool.dataset.timelineProbe,
-      }
-    })
-}
-
-function editPartWithAdditions(additions: number) {
-  return {
-    ...editPart,
-    state: {
-      ...editPart.state,
-      metadata: {
-        ...editPart.state.metadata,
-        filediff: {
-          ...editPart.state.metadata.filediff,
-          additions,
-        },
-      },
-    },
-  }
-}
-
-function readExpanded(element: Element) {
-  const trigger = element.querySelector('[data-slot="collapsible-trigger"]')
-  const aria = trigger?.getAttribute("aria-expanded")
-  if (aria === "true") return true
-  if (aria === "false") return false
-
-  const root = element.querySelector('[data-component="collapsible"]')
-  if (root?.hasAttribute("data-expanded")) return true
-  if (root?.hasAttribute("data-closed")) return false
-
-  const content = element.querySelector<HTMLElement>('[data-slot="collapsible-content"]')
-  return !!content && content.getBoundingClientRect().height > 0
-}
-
-async function mockServer(page: Page, events: EventPayload[]) {
-  await mockOpenCodeServer(page, {
-    directory,
-    project: project(),
-    provider: provider(),
-    sessions: [session()],
-    pageMessages: () => ({ items: [userMessage, assistantMessage] }),
-    events: () => events.splice(0),
-  })
-}
-
-function project() {
-  return {
-    id: projectID,
-    worktree: directory,
-    vcs: "git",
-    name: "timeline-state-regression",
-    time: { created: 1700000000000, updated: 1700000000000 },
-    sandboxes: [],
-  }
-}
-
-function session() {
-  return {
-    id: sessionID,
-    slug: "timeline-state-regression",
-    projectID,
-    directory,
-    title,
-    version: "dev",
-    time: { created: 1700000000000, updated: 1700000000000 },
-  }
-}
-
-function provider() {
-  return {
-    all: [
-      {
-        id: "opencode",
-        name: "OpenCode",
-        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
-      },
-    ],
-    connected: ["opencode"],
-    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
-  }
-}
-
-function base64Encode(value: string) {
-  return Buffer.from(value, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
-}

packages/app/e2e/regression/session-timeline-context-resize.spec.ts

@@ -1,267 +0,0 @@
-import { expect, test, type Page } from "@playwright/test"
-import { mockOpenCodeServer } from "../utils/mock-server"
-
-const directory = "C:/OpenCode/ContextResizeRegression"
-const projectID = "proj_context_resize_regression"
-const sessionID = "ses_context_resize_regression"
-const title = "Context resize regression"
-const model = { providerID: "opencode", modelID: "claude-opus-4-6", variant: "max" }
-const contextIDs = ["prt_0100_read", "prt_0101_glob", "prt_0102_grep", "prt_0103_list"]
-const followingTextID = "prt_0104_text"
-
-type Message = {
-  info: Record<string, unknown> & { id: string; role: "user" | "assistant" }
-  parts: Record<string, unknown>[]
-}
-
-const messages = [...Array.from({ length: 8 }, (_, index) => turn(index, false)).flat(), ...turn(10, true)]
-
-test.describe("regression: session timeline context group resize", () => {
-  test("remeasures a recent explored context group before the next paint", async ({ page }) => {
-    await page.setViewportSize({ width: 1400, height: 900 })
-    await mockServer(page)
-    await configurePage(page)
-
-    await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
-    await expect(page.getByRole("heading", { name: title })).toBeVisible()
-    await expect(page.locator(`[data-timeline-part-ids="${contextIDs.join(",")}"]`).first()).toBeVisible()
-    await expect(page.locator(`[data-timeline-part-id="${followingTextID}"]`).first()).toBeVisible()
-    await settle(page)
-
-    const samples = await sampleExpansion(page)
-    const visibleOverlap = samples.filter((sample) => sample.frame >= 1 && sample.overlap > 0.5)
-
-    console.log("context resize samples", JSON.stringify(samples, null, 2))
-
-    expect(samples[0]?.overlap).toBe(0)
-    expect(visibleOverlap).toEqual([])
-    expect(samples.at(-1)?.expanded).toBe("true")
-  })
-})
-
-async function configurePage(page: Page) {
-  await page.addInitScript(() => {
-    localStorage.setItem(
-      "settings.v3",
-      JSON.stringify({
-        general: {
-          editToolPartsExpanded: true,
-          shellToolPartsExpanded: true,
-          showReasoningSummaries: true,
-          showSessionProgressBar: true,
-        },
-      }),
-    )
-  })
-}
-
-async function sampleExpansion(page: Page) {
-  return page.evaluate(
-    ({ contextIDs, followingTextID }) =>
-      new Promise<
-        {
-          frame: number
-          label: string
-          scrollTop: number
-          scrollHeight: number
-          contextBottom: number
-          textTop: number
-          overlap: number
-          gap: number
-          expanded: string | null
-        }[]
-      >((resolve) => {
-        const context = document.querySelector<HTMLElement>(`[data-timeline-part-ids="${contextIDs.join(",")}"]`)
-        const text = document.querySelector<HTMLElement>(`[data-timeline-part-id="${followingTextID}"]`)
-        const scroller = context?.closest<HTMLElement>(".scroll-view__viewport")
-        const trigger = context?.querySelector<HTMLElement>('[data-slot="collapsible-trigger"]')
-        const contextRow = context?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
-        const textRow = text?.closest<HTMLElement>('[data-timeline-row="AssistantPart"]')
-        if (!context || !text || !scroller || !trigger || !contextRow || !textRow)
-          throw new Error("missing regression nodes")
-
-        scroller.scrollTop = scroller.scrollHeight
-        const samples: {
-          frame: number
-          label: string
-          scrollTop: number
-          scrollHeight: number
-          contextBottom: number
-          textTop: number
-          overlap: number
-          gap: number
-          expanded: string | null
-        }[] = []
-        const capture = (frame: number, label: string) => {
-          const contextRect = contextRow.getBoundingClientRect()
-          const textRect = textRow.getBoundingClientRect()
-          samples.push({
-            frame,
-            label,
-            scrollTop: Math.round(scroller.scrollTop * 10) / 10,
-            scrollHeight: Math.round(scroller.scrollHeight * 10) / 10,
-            contextBottom: Math.round(contextRect.bottom * 10) / 10,
-            textTop: Math.round(textRect.top * 10) / 10,
-            overlap: Math.max(0, Math.round((contextRect.bottom - textRect.top) * 10) / 10),
-            gap: Math.max(0, Math.round((textRect.top - contextRect.bottom) * 10) / 10),
-            expanded: trigger.getAttribute("aria-expanded"),
-          })
-        }
-
-        capture(-1, "before")
-        trigger.click()
-        capture(0, "sync-after-click")
-
-        let frame = 1
-        const tick = () => {
-          capture(frame, "raf")
-          frame += 1
-          if (frame > 8) {
-            resolve(samples)
-            return
-          }
-          requestAnimationFrame(tick)
-        }
-        requestAnimationFrame(tick)
-      }),
-    { contextIDs, followingTextID },
-  )
-}
-
-function turn(index: number, target: boolean): Message[] {
-  const userID = id("msg_user", index)
-  const assistantID = id("msg_assistant", index)
-  return [
-    {
-      info: {
-        id: userID,
-        sessionID,
-        role: "user",
-        time: { created: 1700000000000 + index * 10_000 },
-        summary: { diffs: [] },
-        agent: "build",
-        model,
-      },
-      parts: [{ id: id("prt_user", index), sessionID, messageID: userID, type: "text", text: `User message ${index}` }],
-    },
-    {
-      info: {
-        id: assistantID,
-        sessionID,
-        role: "assistant",
-        time: { created: 1700000000000 + index * 10_000 + 1_000, completed: 1700000000000 + index * 10_000 + 2_000 },
-        parentID: userID,
-        modelID: model.modelID,
-        providerID: model.providerID,
-        mode: "build",
-        agent: "build",
-        path: { cwd: directory, root: directory },
-        cost: 0.01,
-        tokens: { input: 100, output: 200, reasoning: 0, cache: { read: 0, write: 0 } },
-        variant: "max",
-        finish: "stop",
-      },
-      parts: target
-        ? [
-            contextTool(contextIDs[0]!, assistantID, "read", { filePath: "src/recent-a.ts", offset: 0, limit: 120 }),
-            contextTool(contextIDs[1]!, assistantID, "glob", { path: directory, pattern: "**/*.ts" }),
-            contextTool(contextIDs[2]!, assistantID, "grep", { path: directory, pattern: "Explored", include: "*.ts" }),
-            contextTool(contextIDs[3]!, assistantID, "list", { path: "src" }),
-            {
-              id: followingTextID,
-              sessionID,
-              messageID: assistantID,
-              type: "text",
-              text: "This assistant text is immediately after the explored context group.",
-            },
-          ]
-        : [
-            {
-              id: id("prt_text", index),
-              sessionID,
-              messageID: assistantID,
-              type: "text",
-              text: `Assistant filler ${index}. ${"filler ".repeat(60)}`,
-            },
-          ],
-    },
-  ]
-}
-
-function contextTool(partID: string, messageID: string, tool: string, input: Record<string, unknown>) {
-  return {
-    id: partID,
-    sessionID,
-    messageID,
-    type: "tool",
-    callID: `call_${partID}`,
-    tool,
-    state: {
-      status: "completed",
-      input,
-      output: `Completed ${tool}.\n${"detail line\n".repeat(8)}`,
-      title: input.filePath || input.path || input.pattern || "completed",
-      metadata: {},
-      time: { start: 1700000000000, end: 1700000000100 },
-    },
-  }
-}
-
-async function mockServer(page: Page) {
-  await mockOpenCodeServer(page, {
-    directory,
-    project: project(),
-    provider: provider(),
-    sessions: [session()],
-    pageMessages: () => ({ items: messages }),
-  })
-}
-
-async function settle(page: Page) {
-  await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))))
-}
-
-function id(prefix: string, index: number) {
-  return `${prefix}_${String(index).padStart(4, "0")}`
-}
-
-function project() {
-  return {
-    id: projectID,
-    worktree: directory,
-    vcs: "git",
-    name: "context-resize-regression",
-    time: { created: 1700000000000, updated: 1700000000000 },
-    sandboxes: [],
-  }
-}
-
-function session() {
-  return {
-    id: sessionID,
-    slug: "context-resize-regression",
-    projectID,
-    directory,
-    title,
-    version: "dev",
-    time: { created: 1700000000000, updated: 1700000000000 },
-  }
-}
-
-function provider() {
-  return {
-    all: [
-      {
-        id: "opencode",
-        name: "OpenCode",
-        models: { "claude-opus-4-6": { id: "claude-opus-4-6", name: "Claude Opus 4.6", limit: { context: 200_000 } } },
-      },
-    ],
-    connected: ["opencode"],
-    default: { providerID: "opencode", modelID: "claude-opus-4-6" },
-  }
-}
-
-function base64Encode(value: string) {
-  return Buffer.from(value, "utf8").toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
-}

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

@@ -18,7 +18,6 @@ export interface MockServerConfig {
   project: unknown
   sessions: ({ id: string } & Record<string, unknown>)[]
   pageMessages: (sessionId: string, limit: number, before?: string) => { items: unknown[]; cursor?: string }
-  events?: () => unknown[]
 }
 
 export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
@@ -44,8 +43,7 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
     if (url.port !== targetPort) return route.fallback()
 
     const path = url.pathname
-    if (path === "/global/event" || path === "/event") return sse(route, config.events?.())
-    if (path === "/global/health") return json(route, { healthy: true })
+    if (path === "/global/event" || path === "/event") return sse(route)
     if (emptyObject.has(path)) return json(route, {})
     if (emptyList.has(path)) return json(route, [])
     if (path in staticRoutes) return json(route, staticRoutes[path])
@@ -83,10 +81,6 @@ function json(route: Route, body: unknown, headers?: Record<string, string>) {
   })
 }
 
-function sse(route: Route, events?: unknown[]) {
-  return route.fulfill({
-    status: 200,
-    contentType: "text/event-stream",
-    body: events?.map((event) => `data: ${JSON.stringify(event)}\n\n`).join("") || ": ok\n\n",
-  })
+function sse(route: Route) {
+  return route.fulfill({ status: 200, contentType: "text/event-stream", body: ": ok\n\n" })
 }

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.15.13",
+  "version": "1.15.10",
   "description": "",
   "type": "module",
   "exports": {

packages/app/src/app.tsx

@@ -14,7 +14,6 @@ import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { Effect } from "effect"
 import {
   type Component,
-  createEffect,
   createMemo,
   createResource,
   createSignal,
@@ -31,8 +30,8 @@ import { Dynamic } from "solid-js/web"
 import { CommandProvider } from "@/context/command"
 import { CommentsProvider } from "@/context/comments"
 import { FileProvider } from "@/context/file"
-import { ServerSDKProvider } from "@/context/server-sdk"
-import { ServerSyncProvider } from "@/context/server-sync"
+import { GlobalSDKProvider } from "@/context/global-sdk"
+import { GlobalSyncProvider } from "@/context/global-sync"
 import { HighlightsProvider } from "@/context/highlights"
 import { LanguageProvider, type Locale, useLanguage } from "@/context/language"
 import { LayoutProvider } from "@/context/layout"
@@ -41,13 +40,12 @@ import { NotificationProvider } from "@/context/notification"
 import { PermissionProvider } from "@/context/permission"
 import { PromptProvider } from "@/context/prompt"
 import { ServerConnection, ServerProvider, serverName, useServer } from "@/context/server"
-import { SettingsProvider, useSettings } from "@/context/settings"
+import { SettingsProvider } from "@/context/settings"
 import { TerminalProvider } from "@/context/terminal"
 import DirectoryLayout from "@/pages/directory-layout"
 import Layout from "@/pages/layout"
 import { ErrorPage } from "./pages/error"
 import { useCheckServerHealth } from "./utils/server-health"
-import { ServersProvider } from "./context/servers"
 
 const HomeRoute = lazy(() => import("@/pages/home"))
 const Session = lazy(() => import("@/pages/session"))
@@ -93,26 +91,9 @@ function QueryProvider(props: ParentProps) {
   return <QueryClientProvider client={client}>{props.children}</QueryClientProvider>
 }
 
-function BodyDesignClass() {
-  const settings = useSettings()
-
-  createEffect(() => {
-    if (typeof document === "undefined") return
-
-    const enabled = settings.general.newLayoutDesigns()
-    document.body.classList.toggle("text-12-regular", !enabled)
-    document.body.classList.toggle("font-(family-name:--font-family-text)", enabled)
-    document.body.classList.toggle("text-[13px]", enabled)
-    document.body.classList.toggle("font-[440]", enabled)
-  })
-
-  return null
-}
-
 function AppShellProviders(props: ParentProps) {
   return (
     <SettingsProvider>
-      <BodyDesignClass />
       <PermissionProvider>
         <LayoutProvider>
           <NotificationProvider>
@@ -315,29 +296,31 @@ export function AppInterface(props: {
   disableHealthCheck?: boolean
 }) {
   return (
-    <ServerProvider defaultServer={props.defaultServer} servers={props.servers}>
-      <ServersProvider>
-        <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
-          <ServerKey>
-            <QueryProvider>
-              <ServerSDKProvider>
-                <ServerSyncProvider>
-                  <Dynamic
-                    component={props.router ?? Router}
-                    root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
-                  >
-                    <Route path="/" component={HomeRoute} />
-                    <Route path="/:dir" component={DirectoryLayout}>
-                      <Route path="/" component={() => <Navigate href="session" />} />
-                      <Route path="/session/:id?" component={SessionRoute} />
-                    </Route>
-                  </Dynamic>
-                </ServerSyncProvider>
-              </ServerSDKProvider>
-            </QueryProvider>
-          </ServerKey>
-        </ConnectionGate>
-      </ServersProvider>
+    <ServerProvider
+      defaultServer={props.defaultServer}
+      disableHealthCheck={props.disableHealthCheck}
+      servers={props.servers}
+    >
+      <ConnectionGate disableHealthCheck={props.disableHealthCheck}>
+        <ServerKey>
+          <QueryProvider>
+            <GlobalSDKProvider>
+              <GlobalSyncProvider>
+                <Dynamic
+                  component={props.router ?? Router}
+                  root={(routerProps) => <RouterRoot appChildren={props.children}>{routerProps.children}</RouterRoot>}
+                >
+                  <Route path="/" component={HomeRoute} />
+                  <Route path="/:dir" component={DirectoryLayout}>
+                    <Route path="/" component={() => <Navigate href="session" />} />
+                    <Route path="/session/:id?" component={SessionRoute} />
+                  </Route>
+                </Dynamic>
+              </GlobalSyncProvider>
+            </GlobalSDKProvider>
+          </QueryProvider>
+        </ServerKey>
+      </ConnectionGate>
     </ServerProvider>
   )
 }

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

@@ -8,19 +8,19 @@ import { List, type ListRef } from "@opencode-ai/ui/list"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { createEffect, createMemo, createResource, Match, onCleanup, onMount, Switch } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { useProviders } from "@/hooks/use-providers"
 
 export function DialogConnectProvider(props: { provider: string }) {
   const dialog = useDialog()
-  const serverSync = useServerSync()
-  const serverSDK = useServerSDK()
+  const globalSync = useGlobalSync()
+  const globalSDK = useGlobalSDK()
   const language = useLanguage()
   const providers = useProviders()
 
@@ -41,7 +41,7 @@ export function DialogConnectProvider(props: { provider: string }) {
   })
 
   const provider = createMemo(
-    () => providers.all().get(props.provider) ?? serverSync.data.provider.all.get(props.provider)!,
+    () => providers.all().get(props.provider) ?? globalSync.data.provider.all.get(props.provider)!,
   )
   const fallback = createMemo<ProviderAuthMethod[]>(() => [
     {
@@ -52,16 +52,16 @@ export function DialogConnectProvider(props: { provider: string }) {
   const [auth] = createResource(
     () => props.provider,
     async () => {
-      const cached = serverSync.data.provider_auth[props.provider]
+      const cached = globalSync.data.provider_auth[props.provider]
       if (cached) return cached
-      const res = await serverSDK.client.provider.auth()
+      const res = await globalSDK.client.provider.auth()
       if (!alive.value) return fallback()
-      serverSync.set("provider_auth", res.data ?? {})
+      globalSync.set("provider_auth", res.data ?? {})
       return res.data?.[props.provider] ?? fallback()
     },
   )
-  const loading = createMemo(() => auth.loading && !serverSync.data.provider_auth[props.provider])
-  const methods = createMemo(() => auth.latest ?? serverSync.data.provider_auth[props.provider] ?? fallback())
+  const loading = createMemo(() => auth.loading && !globalSync.data.provider_auth[props.provider])
+  const methods = createMemo(() => auth.latest ?? globalSync.data.provider_auth[props.provider] ?? fallback())
   const [store, setStore] = createStore({
     methodIndex: undefined as undefined | number,
     authorization: undefined as undefined | ProviderAuthAuthorization,
@@ -158,7 +158,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       }
       dispatch({ type: "auth.pending" })
       const start = Date.now()
-      await serverSDK.client.provider.oauth
+      await globalSDK.client.provider.oauth
         .authorize(
           {
             providerID: props.provider,
@@ -330,7 +330,7 @@ export function DialogConnectProvider(props: { provider: string }) {
   })
 
   async function complete() {
-    await serverSDK.client.global.dispose()
+    await globalSDK.client.global.dispose()
     dialog.close()
     showToast({
       variant: "success",
@@ -407,7 +407,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       }
 
       setFormStore("error", undefined)
-      await serverSDK.client.auth.set({
+      await globalSDK.client.auth.set({
         providerID: props.provider,
         auth: {
           type: "api",
@@ -478,7 +478,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       }
 
       setFormStore("error", undefined)
-      const result = await serverSDK.client.provider.oauth
+      const result = await globalSDK.client.provider.oauth
         .callback({
           providerID: props.provider,
           method: store.methodIndex,
@@ -531,7 +531,7 @@ export function DialogConnectProvider(props: { provider: string }) {
 
     onMount(() => {
       void (async () => {
-        const result = await serverSDK.client.provider.oauth
+        const result = await globalSDK.client.provider.oauth
           .callback({
             providerID: props.provider,
             method: store.methodIndex,

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

@@ -5,12 +5,12 @@ 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 "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { batch, For } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { Link } from "@/components/link"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { type FormState, headerRow, modelRow, validateCustomProvider } from "./dialog-custom-provider-form"
 import { DialogSelectProvider } from "./dialog-select-provider"
@@ -21,8 +21,8 @@ type Props = {
 
 export function DialogCustomProvider(props: Props) {
   const dialog = useDialog()
-  const serverSync = useServerSync()
-  const serverSDK = useServerSDK()
+  const globalSync = useGlobalSync()
+  const globalSDK = useGlobalSDK()
   const language = useLanguage()
 
   const [form, setForm] = createStore<FormState>({
@@ -105,8 +105,8 @@ export function DialogCustomProvider(props: Props) {
     const output = validateCustomProvider({
       form,
       t: language.t,
-      disabledProviders: serverSync.data.config.disabled_providers ?? [],
-      existingProviderIDs: new Set(serverSync.data.provider.all.keys()),
+      disabledProviders: globalSync.data.config.disabled_providers ?? [],
+      existingProviderIDs: new Set(globalSync.data.provider.all.keys()),
     })
     batch(() => {
       setForm("err", output.err)
@@ -118,11 +118,11 @@ export function DialogCustomProvider(props: Props) {
 
   const saveMutation = useMutation(() => ({
     mutationFn: async (result: NonNullable<ReturnType<typeof validate>>) => {
-      const disabledProviders = serverSync.data.config.disabled_providers ?? []
+      const disabledProviders = globalSync.data.config.disabled_providers ?? []
       const nextDisabled = disabledProviders.filter((id) => id !== result.providerID)
 
       if (result.key) {
-        await serverSDK.client.auth.set({
+        await globalSDK.client.auth.set({
           providerID: result.providerID,
           auth: {
             type: "api",
@@ -131,7 +131,7 @@ export function DialogCustomProvider(props: Props) {
         })
       }
 
-      await serverSync.updateConfig({
+      await globalSync.updateConfig({
         provider: { [result.providerID]: result.config },
         disabled_providers: nextDisabled,
       })

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

@@ -6,8 +6,8 @@ import { useMutation } from "@tanstack/solid-query"
 import { Icon } from "@opencode-ai/ui/icon"
 import { createMemo, For, Show } from "solid-js"
 import { createStore } from "solid-js/store"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
 import { type LocalProject, getAvatarColors } from "@/context/layout"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { Avatar } from "@opencode-ai/ui/avatar"
@@ -18,8 +18,8 @@ const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] a
 
 export function DialogEditProject(props: { project: LocalProject }) {
   const dialog = useDialog()
-  const serverSDK = useServerSDK()
-  const serverSync = useServerSync()
+  const globalSDK = useGlobalSDK()
+  const globalSync = useGlobalSync()
   const language = useLanguage()
 
   const folderName = createMemo(() => getFilename(props.project.worktree))
@@ -78,19 +78,19 @@ export function DialogEditProject(props: { project: LocalProject }) {
       const start = store.startup.trim()
 
       if (props.project.id && props.project.id !== "global") {
-        await serverSDK.client.project.update({
+        await globalSDK.client.project.update({
           projectID: props.project.id,
           directory: props.project.worktree,
           name,
           icon: { color: store.color || "", override: store.iconOverride || "" },
           commands: { start },
         })
-        serverSync.project.icon(props.project.worktree, store.iconOverride || undefined)
+        globalSync.project.icon(props.project.worktree, store.iconOverride || undefined)
         dialog.close()
         return
       }
 
-      serverSync.project.meta(props.project.worktree, {
+      globalSync.project.meta(props.project.worktree, {
         name,
         icon: { color: store.color || undefined, override: store.iconOverride || undefined },
         commands: { start: start || undefined },

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

@@ -6,7 +6,7 @@ import { usePrompt } from "@/context/prompt"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { extractPromptFromParts } from "@/utils/prompt"
 import type { TextPart as SDKTextPart } from "@opencode-ai/sdk/v2/client"
 import { base64Encode } from "@opencode-ai/core/util/encode"

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

@@ -6,8 +6,8 @@ import type { ListRef } from "@opencode-ai/ui/list"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import fuzzysort from "fuzzysort"
 import { createMemo, createResource, createSignal } from "solid-js"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
 import { useLayout } from "@/context/layout"
 import { useLanguage } from "@/context/language"
 
@@ -128,7 +128,7 @@ function uniqueRows(rows: Row[]) {
 }
 
 function useDirectorySearch(args: {
-  sdk: ReturnType<typeof useServerSDK>
+  sdk: ReturnType<typeof useGlobalSDK>
   start: () => string | undefined
   home: () => string
 }) {
@@ -246,8 +246,8 @@ function useDirectorySearch(args: {
 }
 
 export function DialogSelectDirectory(props: DialogSelectDirectoryProps) {
-  const sync = useServerSync()
-  const sdk = useServerSDK()
+  const sync = useGlobalSync()
+  const sdk = useGlobalSDK()
   const layout = useLayout()
   const dialog = useDialog()
   const language = useLanguage()

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

@@ -9,8 +9,8 @@ import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import { useNavigate } from "@solidjs/router"
 import { createMemo, createSignal, Match, onCleanup, Show, Switch } from "solid-js"
 import { formatKeybind, useCommand, type CommandOption } from "@/context/command"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
 import { useLayout } from "@/context/layout"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
@@ -175,7 +175,7 @@ function createFileEntries(props: {
 function createSessionEntries(props: {
   workspaces: () => string[]
   label: (directory: string) => string
-  serverSDK: ReturnType<typeof useServerSDK>
+  globalSDK: ReturnType<typeof useGlobalSDK>
   language: ReturnType<typeof useLanguage>
 }) {
   const state: {
@@ -207,7 +207,7 @@ function createSessionEntries(props: {
     state.inflight = Promise.all(
       dirs.map((directory) => {
         const description = props.label(directory)
-        return props.serverSDK.client.session
+        return props.globalSDK.client.session
           .list({ directory, roots: true })
           .then((x) =>
             (x.data ?? [])
@@ -268,8 +268,8 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
   const file = useFile()
   const dialog = useDialog()
   const navigate = useNavigate()
-  const serverSDK = useServerSDK()
-  const serverSync = useServerSync()
+  const globalSDK = useGlobalSDK()
+  const globalSync = useGlobalSync()
   const { params, tabs, view } = useSessionLayout()
   const filesOnly = () => props.mode === "files"
   const state = { cleanup: undefined as (() => void) | void, committed: false }
@@ -292,21 +292,21 @@ export function DialogSelectFile(props: { mode?: DialogSelectFileMode; onOpenFil
     if (directory && !dirs.includes(directory)) return [...dirs, directory]
     return dirs
   })
-  const homedir = createMemo(() => serverSync.data.path.home)
+  const homedir = createMemo(() => globalSync.data.path.home)
   const label = (directory: string) => {
     const current = project()
     const kind =
       current && directory === current.worktree
         ? language.t("workspace.type.local")
         : language.t("workspace.type.sandbox")
-    const [store] = serverSync.child(directory, { bootstrap: false })
+    const [store] = globalSync.child(directory, { bootstrap: false })
     const home = homedir()
     const path = home ? directory.replace(home, "~") : directory
     const name = store.vcs?.branch ?? getFilename(directory)
     return `${kind} : ${name || path}`
   }
 
-  const { sessions } = createSessionEntries({ workspaces, label, serverSDK, language })
+  const { sessions } = createSessionEntries({ workspaces, label, globalSDK, language })
 
   const items = async (text: string) => {
     const query = text.trim()

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

@@ -6,7 +6,7 @@ import { Dialog } from "@opencode-ai/ui/dialog"
 import { List } from "@opencode-ai/ui/list"
 import { Switch } from "@opencode-ai/ui/switch"
 import { useLanguage } from "@/context/language"
-import { useQueryOptions } from "@/context/server-sync"
+import { useQueryOptions } from "@/context/global-sync"
 import { pathKey } from "@/utils/path-key"
 
 const statusLabels = {

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

@@ -7,7 +7,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { useMutation } from "@tanstack/solid-query"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { useNavigate } from "@solidjs/router"
 import { createEffect, createMemo, createResource, onCleanup, Show } from "solid-js"
 import { createStore, reconcile } from "solid-js/store"

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

@@ -4,8 +4,6 @@ import {
   createEffect,
   on,
   Component,
-  splitProps,
-  For,
   Show,
   onCleanup,
   createMemo,
@@ -13,10 +11,7 @@ import {
   createResource,
   Switch,
   Match,
-  type ComponentProps,
-  type JSX,
 } from "solid-js"
-import { Popover as KobaltePopover } from "@kobalte/core/popover"
 import { createStore } from "solid-js/store"
 import { useLocal } from "@/context/local"
 import { selectionFromLines, type SelectedLineRange, useFile } from "@/context/file"
@@ -31,14 +26,12 @@ import {
   FileAttachmentPart,
 } from "@/context/prompt"
 import { useLayout } from "@/context/layout"
-import { useNavigate } from "@solidjs/router"
 import { useSDK } from "@/context/sdk"
-import { useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
 import { useComments } from "@/context/comments"
 import { Button } from "@opencode-ai/ui/button"
 import { DockShellForm, DockTray } from "@opencode-ai/ui/dock-surface"
-import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
@@ -51,7 +44,6 @@ import { Persist, persisted } from "@/utils/persist"
 import { usePermission } from "@/context/permission"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
-import { useSettings } from "@/context/settings"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { createSessionTabs } from "@/pages/session/helpers"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
@@ -74,16 +66,16 @@ import { PromptDragOverlay } from "./prompt-input/drag-overlay"
 import { promptPlaceholder } from "./prompt-input/placeholder"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { useQueries } from "@tanstack/solid-query"
-import { useQueryOptions } from "@/context/server-sync"
+import { useQueryOptions } from "@/context/global-sync"
 import { pathKey } from "@/utils/path-key"
-import { base64Encode } from "@opencode-ai/core/util/encode"
-import { displayName } from "@/pages/layout/helpers"
+import { getFilename } from "@opencode-ai/core/util/path"
 
 interface PromptInputProps {
   class?: string
   variant?: "dock" | "new-session"
   ref?: (el: HTMLDivElement) => void
   newSessionWorktree?: string
+  onNewSessionWorktreeChange?: (worktree: string) => void
   onNewSessionWorktreeReset?: () => void
   edit?: { id: string; prompt: Prompt; context: FollowupDraft["context"] }
   onEditLoaded?: () => void
@@ -121,9 +113,11 @@ const EXAMPLES = [
   "prompt.example.25",
 ] as const
 
+const MAIN_WORKTREE = "main"
+const CREATE_WORKTREE = "create"
+
 export const PromptInput: Component<PromptInputProps> = (props) => {
   const sdk = useSDK()
-  const navigate = useNavigate()
   const queryOptions = useQueryOptions()
 
   const sync = useSync()
@@ -131,7 +125,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const files = useFile()
   const prompt = usePrompt()
   const layout = useLayout()
-  const server = useServer()
   const comments = useComments()
   const dialog = useDialog()
   const providers = useProviders()
@@ -139,13 +132,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const permission = usePermission()
   const language = useLanguage()
   const platform = usePlatform()
-  const settings = useSettings()
   const { params, tabs, view } = useSessionLayout()
   let editorRef!: HTMLDivElement
   let fileInputRef: HTMLInputElement | undefined
   let scrollRef!: HTMLDivElement
   let slashPopoverRef!: HTMLDivElement
-  let projectSearchRef: HTMLInputElement | undefined
 
   const mirror = { input: false }
   const inset = 56
@@ -286,10 +277,6 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     mode: "normal",
     applyingHistory: false,
   })
-  const [picker, setPicker] = createStore({
-    projectOpen: false,
-    projectSearch: "",
-  })
 
   const buttonsSpring = useSpring(() => (store.mode === "normal" ? 1 : 0), { visualDuration: 0.2, bounce: 0 })
   const motion = (value: number) => ({
@@ -1316,124 +1303,91 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return "Ask anything, / for commands, @ for context..."
   }
 
-  const modelControlState = createMemo<ComposerModelControlState>(() => ({
-    loading: providersLoading(),
-    paid: providers.paid().length > 0,
-    title: language.t("command.model.choose"),
-    keybind: command.keybind("model.choose"),
-    model: local.model,
-    providerID: local.model.current()?.provider?.id,
-    modelName: local.model.current()?.name ?? language.t("dialog.model.select.title"),
-    style: control(),
-    onClose: restoreFocus,
-    onUnpaidClick: () => {
-      void import("@/components/dialog-select-model-unpaid").then((x) => {
-        dialog.show(() => <x.DialogSelectModelUnpaid model={local.model} />)
-      })
-    },
-  }))
+  const modelControl = () => (
+    <Show when={!providersLoading()}>
+      <Show
+        when={providers.paid().length > 0}
+        fallback={
+          <TooltipKeybind
+            placement="top"
+            gutter={4}
+            title={language.t("command.model.choose")}
+            keybind={command.keybind("model.choose")}
+          >
+            <Button
+              data-action="prompt-model"
+              as="div"
+              variant="ghost"
+              size="normal"
+              class="min-w-0 max-w-[220px] justify-start text-[13px] font-[440] leading-4 text-v2-text-text-faint group"
+              style={control()}
+              onClick={() => {
+                void import("@/components/dialog-select-model-unpaid").then((x) => {
+                  dialog.show(() => <x.DialogSelectModelUnpaid model={local.model} />)
+                })
+              }}
+            >
+              <Show when={local.model.current()?.provider?.id}>
+                <ProviderIcon
+                  id={local.model.current()?.provider?.id ?? ""}
+                  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">{local.model.current()?.name ?? language.t("dialog.model.select.title")}</span>
+              <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+            </Button>
+          </TooltipKeybind>
+        }
+      >
+        <TooltipKeybind
+          placement="top"
+          gutter={4}
+          title={language.t("command.model.choose")}
+          keybind={command.keybind("model.choose")}
+        >
+          <ModelSelectorPopover
+            model={local.model}
+            triggerAs={Button}
+            triggerProps={{
+              variant: "ghost",
+              size: "normal",
+              style: control(),
+              class:
+                "min-w-0 max-w-[220px] justify-start text-[13px] font-[440] leading-4 text-v2-text-text-faint group",
+              "data-action": "prompt-model",
+            }}
+            onClose={restoreFocus}
+          >
+            <Show when={local.model.current()?.provider?.id}>
+              <ProviderIcon
+                id={local.model.current()?.provider?.id ?? ""}
+                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">{local.model.current()?.name ?? language.t("dialog.model.select.title")}</span>
+            <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
+          </ModelSelectorPopover>
+        </TooltipKeybind>
+      </Show>
+    </Show>
+  )
 
   const newSession = () => props.variant === "new-session"
-  const projects = createMemo(() => layout.projects.list())
-  const projectForDirectory = (directory: string | undefined) => {
-    if (!directory) return
-    const key = pathKey(directory)
-    return projects().find(
-      (project) => pathKey(project.worktree) === key || project.sandboxes?.some((sandbox) => pathKey(sandbox) === key),
-    )
-  }
-  const selectedProject = createMemo(() => projectForDirectory(sdk.directory))
-  const projectResults = createMemo(() => {
-    const search = picker.projectSearch.trim().toLowerCase()
-    if (!search) return projects()
-    return projects().filter((project) => displayName(project).toLowerCase().includes(search))
+  const worktrees = createMemo(() => [MAIN_WORKTREE, ...(sync.project?.sandboxes ?? []), CREATE_WORKTREE])
+  const currentWorktree = createMemo(() => {
+    if (worktrees().includes(props.newSessionWorktree ?? MAIN_WORKTREE))
+      return props.newSessionWorktree ?? MAIN_WORKTREE
+    return MAIN_WORKTREE
   })
-  const showAgentControl = createMemo(() => settings.general.showCustomAgents() && agentNames().length > 0)
-  const selectProject = (worktree: string) => {
-    setPicker({
-      projectOpen: false,
-      projectSearch: "",
-    })
-    if (pathKey(worktree) === pathKey(selectedProject()?.worktree ?? "")) {
-      restoreFocus()
-      return
-    }
-    layout.projects.open(worktree)
-    server.projects.touch(worktree)
-    navigate(`/${base64Encode(worktree)}/session`)
-  }
-  const addProject = async () => {
-    const select = (result: string | string[] | null) => {
-      const directory = Array.isArray(result) ? result[0] : result
-      if (!directory) return
-      selectProject(directory)
-    }
-    if (platform.openDirectoryPickerDialog && server.isLocal()) {
-      select(await platform.openDirectoryPickerDialog({ title: language.t("command.project.open") }))
-      return
-    }
-    void import("@/components/dialog-select-directory").then((x) => {
-      dialog.show(
-        () => <x.DialogSelectDirectory onSelect={select} />,
-        () => select(null),
-      )
-    })
+  const worktreeLabel = (value: string) => {
+    if (value === MAIN_WORKTREE) return MAIN_WORKTREE
+    if (value === CREATE_WORKTREE) return language.t("session.new.worktree.create")
+    return getFilename(value)
   }
 
-  const projectPickerState = createMemo<ComposerPickerState>(() => ({
-    open: picker.projectOpen,
-    trigger: {
-      action: "prompt-project",
-      icon: "folder",
-      label: selectedProject() ? displayName(selectedProject()!) : language.t("session.new.project.new"),
-      class: "max-w-[203px]",
-      style: control(),
-      onPress: () => setPicker("projectOpen", true),
-    },
-    search: picker.projectSearch,
-    searchPlaceholder: language.t("session.new.project.search"),
-    clearLabel: language.t("common.clear"),
-    items: projectResults().map((project) => ({
-      icon: "folder",
-      label: displayName(project),
-      selected: selectedProject()?.worktree === project.worktree,
-      onSelect: () => selectProject(project.worktree),
-    })),
-    action: {
-      icon: "plus",
-      label: language.t("session.new.project.add"),
-      onSelect: () => {
-        setPicker("projectOpen", false)
-        void addProject()
-      },
-    },
-    onOpenChange: (open) => {
-      setPicker("projectOpen", open)
-      if (open) requestAnimationFrame(() => projectSearchRef?.focus())
-    },
-    onSearchInput: (value) => setPicker("projectSearch", value),
-    onSearchClear: () => setPicker("projectSearch", ""),
-    searchRef: (el) => (projectSearchRef = el),
-  }))
-  const agentControlState = createMemo<ComposerAgentControlState>(() => ({
-    title: language.t("command.agent.cycle"),
-    keybind: command.keybind("agent.cycle"),
-    options: agentNames(),
-    current: local.agent.current()?.name ?? "",
-    style: control(),
-    onSelect: (value) => {
-      local.agent.set(value)
-      restoreFocus()
-    },
-  }))
-  const newProjectTriggerState = createMemo<ComposerPickerTriggerState>(() => ({
-    action: "prompt-project",
-    icon: "folder-add-left",
-    label: language.t("session.new.project.new"),
-    class: "max-w-[160px]",
-    style: control(),
-    onPress: () => void addProject(),
-  }))
+  const USE_V2_INPUT = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
 
   return (
     <div class="relative size-full flex flex-col gap-0">
@@ -1454,146 +1408,155 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         t={(key) => language.t(key as Parameters<typeof language.t>[0])}
       />
       <Switch>
-        <Match when={settings.general.newLayoutDesigns()}>
-          <div class="flex flex-col gap-3">
-            <DockShellForm
-              data-component={newSession() ? "session-new-composer" : "session-composer"}
-              onSubmit={handleSubmit}
-              classList={{
-                "group/prompt-input min-h-[96px] w-full rounded-xl bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]": true,
-                "border-icon-info-active border-dashed": store.draggingType !== null,
-                [props.class ?? ""]: !!props.class,
+        <Match when={USE_V2_INPUT}>
+          <DockShellForm
+            data-component={newSession() ? "session-new-composer" : "session-composer"}
+            onSubmit={handleSubmit}
+            classList={{
+              "group/prompt-input min-h-[96px] w-full rounded-xl bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]": true,
+              "border-icon-info-active border-dashed": store.draggingType !== null,
+              [props.class ?? ""]: !!props.class,
+            }}
+          >
+            <PromptDragOverlay
+              type={store.draggingType}
+              label={language.t(
+                store.draggingType === "@mention" ? "prompt.dropzone.file.label" : "prompt.dropzone.label",
+              )}
+            />
+            <PromptContextItems
+              items={contextItems()}
+              active={(item) => {
+                const active = comments.active()
+                return !!item.commentID && item.commentID === active?.id && item.path === active?.file
+              }}
+              openComment={openComment}
+              remove={(item) => {
+                if (item.commentID) comments.remove(item.path, item.commentID)
+                prompt.context.remove(item.key)
+              }}
+              t={(key) => language.t(key as Parameters<typeof language.t>[0])}
+            />
+            <PromptImageAttachments
+              attachments={imageAttachments()}
+              onOpen={(attachment) =>
+                dialog.show(() => <ImagePreview src={attachment.dataUrl} alt={attachment.filename} />)
+              }
+              onRemove={removeAttachment}
+              removeLabel={language.t("prompt.attachment.remove")}
+            />
+            <div
+              class="relative min-h-[52px]"
+              onMouseDown={(e) => {
+                const target = e.target
+                if (!(target instanceof HTMLElement)) return
+                if (target.closest('[data-action="prompt-attach"], [data-action="prompt-submit"]')) return
+                editorRef?.focus()
               }}
             >
-              <PromptDragOverlay
-                type={store.draggingType}
-                label={language.t(
-                  store.draggingType === "@mention" ? "prompt.dropzone.file.label" : "prompt.dropzone.label",
-                )}
-              />
-              <PromptContextItems
-                items={contextItems()}
-                active={(item) => {
-                  const active = comments.active()
-                  return !!item.commentID && item.commentID === active?.id && item.path === active?.file
-                }}
-                openComment={openComment}
-                remove={(item) => {
-                  if (item.commentID) comments.remove(item.path, item.commentID)
-                  prompt.context.remove(item.key)
-                }}
-                t={(key) => language.t(key as Parameters<typeof language.t>[0])}
-              />
-              <PromptImageAttachments
-                attachments={imageAttachments()}
-                onOpen={(attachment) =>
-                  dialog.show(() => <ImagePreview src={attachment.dataUrl} alt={attachment.filename} />)
-                }
-                onRemove={removeAttachment}
-                removeLabel={language.t("prompt.attachment.remove")}
-              />
-              <div
-                class="relative min-h-[52px]"
-                onMouseDown={(e) => {
-                  const target = e.target
-                  if (!(target instanceof HTMLElement)) return
-                  if (target.closest('[data-action^="prompt-"]')) return
-                  editorRef?.focus()
-                }}
-              >
-                <div class="relative max-h-[180px] overflow-y-auto no-scrollbar" ref={(el) => (scrollRef = el)}>
-                  <div
-                    data-component="prompt-input"
-                    ref={(el) => {
-                      editorRef = el
-                      props.ref?.(el)
-                    }}
-                    role="textbox"
-                    aria-multiline="true"
-                    aria-label={designPlaceholder()}
-                    contenteditable="true"
-                    autocapitalize={store.mode === "normal" ? "sentences" : "off"}
-                    autocorrect={store.mode === "normal" ? "on" : "off"}
-                    spellcheck={store.mode === "normal"}
-                    inputMode="text"
-                    // @ts-expect-error
-                    autocomplete="off"
-                    onInput={handleInput}
-                    onPaste={handlePaste}
-                    onCompositionStart={handleCompositionStart}
-                    onCompositionEnd={handleCompositionEnd}
-                    onBlur={handleBlur}
-                    onKeyDown={handleKeyDown}
-                    classList={{
-                      "select-text": true,
-                      "min-h-[52px] w-full px-4 pt-4 pb-2 focus:outline-none whitespace-pre-wrap leading-5 text-[13px] font-[440] text-v2-text-text-base": true,
-                      "[&_[data-type=file]]:text-syntax-property": true,
-                      "[&_[data-type=agent]]:text-syntax-type": true,
-                      "font-mono!": store.mode === "shell",
-                    }}
-                  />
-                  <div
-                    data-component={newSession() ? "session-new-design-text" : "session-composer-text"}
-                    class="absolute top-0 inset-x-0 px-4 pt-4 pointer-events-none whitespace-nowrap truncate leading-5 text-[13px] font-[440] text-v2-text-text-faint [font-family:Inter,var(--font-family-sans)]"
-                    classList={{ "font-mono!": store.mode === "shell", hidden: prompt.dirty() }}
-                  >
-                    {designPlaceholder()}
-                  </div>
+              <div class="relative max-h-[180px] overflow-y-auto no-scrollbar" ref={(el) => (scrollRef = el)}>
+                <div
+                  data-component="prompt-input"
+                  ref={(el) => {
+                    editorRef = el
+                    props.ref?.(el)
+                  }}
+                  role="textbox"
+                  aria-multiline="true"
+                  aria-label={designPlaceholder()}
+                  contenteditable="true"
+                  autocapitalize={store.mode === "normal" ? "sentences" : "off"}
+                  autocorrect={store.mode === "normal" ? "on" : "off"}
+                  spellcheck={store.mode === "normal"}
+                  inputMode="text"
+                  // @ts-expect-error
+                  autocomplete="off"
+                  onInput={handleInput}
+                  onPaste={handlePaste}
+                  onCompositionStart={handleCompositionStart}
+                  onCompositionEnd={handleCompositionEnd}
+                  onBlur={handleBlur}
+                  onKeyDown={handleKeyDown}
+                  classList={{
+                    "select-text": true,
+                    "min-h-[52px] w-full px-4 pt-4 pb-2 focus:outline-none whitespace-pre-wrap leading-5 text-[13px] font-[440] text-v2-text-text-faint [font-family:Inter,var(--font-family-sans)]": true,
+                    "[&_[data-type=file]]:text-syntax-property": true,
+                    "[&_[data-type=agent]]:text-syntax-type": true,
+                    "font-mono!": store.mode === "shell",
+                  }}
+                />
+                <div
+                  data-component={newSession() ? "session-new-design-text" : "session-composer-text"}
+                  class="absolute top-0 inset-x-0 px-4 pt-4 pointer-events-none whitespace-nowrap truncate leading-5 text-[13px] font-[440] text-v2-text-text-faint [font-family:Inter,var(--font-family-sans)]"
+                  classList={{ "font-mono!": store.mode === "shell", hidden: prompt.dirty() }}
+                >
+                  {designPlaceholder()}
                 </div>
               </div>
-              <div class="flex h-11 items-center px-2">
-                <div class="flex min-w-0 flex-1 items-center gap-0">
-                  {fileAttachmentInput()}
-                  <TooltipKeybind
-                    placement="top"
-                    title={language.t("prompt.action.attachFile")}
-                    keybind={command.keybind("file.attach")}
-                  >
-                    <IconButton
-                      data-action="prompt-attach"
-                      type="button"
-                      icon="plus"
-                      variant="ghost"
-                      class="size-7 rounded-md p-[6px] text-v2-icon-icon-muted"
-                      style={buttons()}
-                      onClick={pick}
-                      disabled={store.mode !== "normal"}
-                      tabIndex={store.mode === "normal" ? undefined : -1}
-                      aria-label={language.t("prompt.action.attachFile")}
-                    />
-                  </TooltipKeybind>
-                  <Show when={showAgentControl()}>
-                    <ComposerAgentControl state={agentControlState()} />
-                  </Show>
-                  <Show when={newSession() && !selectedProject()}>
-                    <ComposerPickerTrigger state={newProjectTriggerState()} />
-                  </Show>
-                  <ComposerModelControl state={modelControlState()} />
-                </div>
-                <Tooltip placement="top" inactive={!working() && blank()} value={tip()}>
+            </div>
+            <div class="flex h-11 items-center px-2">
+              <div class="flex min-w-0 flex-1 items-center gap-0">
+                {fileAttachmentInput()}
+                <TooltipKeybind
+                  placement="top"
+                  title={language.t("prompt.action.attachFile")}
+                  keybind={command.keybind("file.attach")}
+                >
                   <IconButton
-                    data-action="prompt-submit"
-                    type="submit"
-                    disabled={!working() && blank()}
+                    data-action="prompt-attach"
+                    type="button"
+                    icon="plus"
+                    variant="ghost"
+                    class="size-7 rounded-md p-[6px] text-v2-icon-icon-muted"
+                    style={buttons()}
+                    onClick={pick}
+                    disabled={store.mode !== "normal"}
                     tabIndex={store.mode === "normal" ? undefined : -1}
-                    icon={stopping() ? "stop" : store.mode === "shell" ? "arrow-undo-down" : "arrow-up"}
-                    variant="primary"
-                    class="size-7 rounded-md p-[6px] text-v2-icon-icon-muted shadow-[var(--v2-elevation-button-contrast)] disabled:opacity-50"
-                    style={{
-                      "background-image":
-                        "linear-gradient(180deg,var(--v2-alpha-light-20) 0%,var(--v2-alpha-light-0) 100%),linear-gradient(90deg,var(--v2-background-bg-contrast) 0%,var(--v2-background-bg-contrast) 100%)",
-                    }}
-                    aria-label={stopping() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
+                    aria-label={language.t("prompt.action.attachFile")}
                   />
-                </Tooltip>
+                </TooltipKeybind>
+                <Show when={newSession()}>
+                  <div class="relative">
+                    <div class="pointer-events-none absolute left-2 top-1/2 z-10 flex size-4 -translate-y-1/2 items-center justify-center">
+                      <Icon name="sliders" size="small" />
+                    </div>
+                    <Select
+                      size="normal"
+                      options={worktrees()}
+                      current={currentWorktree()}
+                      label={worktreeLabel}
+                      onSelect={(value) => {
+                        if (value) props.onNewSessionWorktreeChange?.(value)
+                        restoreFocus()
+                      }}
+                      class="max-w-[175px] justify-start text-text-base [&_[data-component=icon]]:text-v2-icon-icon-muted"
+                      valueClass="truncate pl-5 text-[13px] font-[440] leading-4 text-v2-text-text-faint"
+                      triggerStyle={control()}
+                      triggerProps={{ "data-action": "prompt-workspace" }}
+                      variant="ghost"
+                    />
+                  </div>
+                </Show>
+                {modelControl()}
               </div>
-            </DockShellForm>
-            <Show when={newSession() && selectedProject()}>
-              <div class="flex h-7 min-w-0 items-center gap-0 px-2">
-                <ComposerPicker state={projectPickerState()} />
-              </div>
-            </Show>
-          </div>
+              <Tooltip placement="top" inactive={!working() && blank()} value={tip()}>
+                <IconButton
+                  data-action="prompt-submit"
+                  type="submit"
+                  disabled={!working() && blank()}
+                  tabIndex={store.mode === "normal" ? undefined : -1}
+                  icon={stopping() ? "stop" : store.mode === "shell" ? "arrow-undo-down" : "arrow-up"}
+                  variant="primary"
+                  class="size-7 rounded-md p-[6px] text-v2-icon-icon-muted shadow-[var(--v2-elevation-button-contrast)] disabled:opacity-50"
+                  style={{
+                    "background-image":
+                      "linear-gradient(180deg,var(--v2-alpha-light-20) 0%,var(--v2-alpha-light-0) 100%),linear-gradient(90deg,var(--v2-background-bg-contrast) 0%,var(--v2-background-bg-contrast) 100%)",
+                  }}
+                  aria-label={stopping() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
+                />
+              </Tooltip>
+            </div>
+          </DockShellForm>
         </Match>
         <Match when>
           <DockShellForm
@@ -1929,226 +1892,3 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     </div>
   )
 }
-
-type ComposerPickerItemState = {
-  icon: IconProps["name"]
-  label: string
-  selected?: boolean
-  onSelect: () => void
-}
-
-type ComposerPickerTriggerState = {
-  action: string
-  icon?: IconProps["name"]
-  label: string
-  class?: string
-  style: JSX.CSSProperties | undefined
-  onPress: () => void
-}
-
-type ComposerPickerState = {
-  open: boolean
-  trigger: ComposerPickerTriggerState
-  search: string
-  searchPlaceholder: string
-  clearLabel: string
-  items: ComposerPickerItemState[]
-  action: ComposerPickerItemState
-  listClass?: string
-  searchRef: (el: HTMLInputElement) => void
-  onOpenChange: (open: boolean) => void
-  onSearchInput: (value: string) => void
-  onSearchClear: () => void
-}
-
-type ComposerAgentControlState = {
-  title: string
-  keybind: string
-  options: string[]
-  current: string
-  style: JSX.CSSProperties | undefined
-  onSelect: (value: string | undefined) => void
-}
-
-type ComposerModelControlState = {
-  loading: boolean
-  paid: boolean
-  title: string
-  keybind: string
-  model: ReturnType<typeof useLocal>["model"]
-  providerID?: string
-  modelName: string
-  style: JSX.CSSProperties | undefined
-  onClose: () => void
-  onUnpaidClick: () => void
-}
-
-function ComposerPickerTrigger(props: ComponentProps<"button"> & { state: ComposerPickerTriggerState }) {
-  const [local, rest] = splitProps(props, ["state", "class", "style", "onClick"])
-  return (
-    <button
-      {...rest}
-      data-action={local.state.action}
-      type="button"
-      class={`flex h-7 min-w-0 items-center gap-1.5 rounded px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none ${local.state.class ?? ""}`}
-      style={local.state.style}
-      onClick={() => local.state.onPress()}
-    >
-      <Show when={local.state.icon}>
-        {(icon) => <Icon name={icon()} size="small" class="shrink-0 text-v2-icon-icon-muted" />}
-      </Show>
-      <span class="min-w-0 truncate leading-5">{local.state.label}</span>
-      <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-    </button>
-  )
-}
-
-function ComposerPickerMenuItem(props: { state: ComposerPickerItemState }) {
-  return (
-    <button
-      type="button"
-      class="flex h-7 w-full items-center gap-2 rounded px-3 text-left text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
-      onClick={props.state.onSelect}
-    >
-      <Icon name={props.state.icon} size="small" class="shrink-0 text-v2-icon-icon-base" />
-      <span class="min-w-0 flex-1 truncate leading-5">{props.state.label}</span>
-      <Show when={props.state.selected}>
-        <Icon name="check-small" size="small" class="shrink-0 text-v2-icon-icon-base" />
-      </Show>
-    </button>
-  )
-}
-
-function ComposerPicker(props: { state: ComposerPickerState }) {
-  return (
-    <KobaltePopover
-      open={props.state.open}
-      placement="bottom-start"
-      gutter={4}
-      modal={false}
-      onOpenChange={props.state.onOpenChange}
-    >
-      <KobaltePopover.Trigger as={ComposerPickerTrigger} state={props.state.trigger} />
-      <KobaltePopover.Portal>
-        <KobaltePopover.Content
-          class="w-[243px] overflow-hidden rounded-md bg-v2-background-bg-layer-01 shadow-[var(--v2-elevation-floating)] focus:outline-none"
-          onOpenAutoFocus={(event) => event.preventDefault()}
-        >
-          <div class={`flex flex-col p-0.5 ${props.state.listClass ?? ""}`}>
-            <div class="flex h-7 items-center gap-2 rounded px-3 text-v2-icon-icon-muted">
-              <Icon name="magnifying-glass" size="small" class="shrink-0" />
-              <input
-                ref={props.state.searchRef}
-                value={props.state.search}
-                placeholder={props.state.searchPlaceholder}
-                class="h-7 min-w-0 flex-1 border-0 bg-transparent text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base outline-none placeholder:text-v2-text-text-faint"
-                onInput={(event) => props.state.onSearchInput(event.currentTarget.value)}
-              />
-              <Show when={props.state.search.trim()}>
-                <button
-                  type="button"
-                  class="flex size-5 items-center justify-center rounded text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover"
-                  onClick={props.state.onSearchClear}
-                  aria-label={props.state.clearLabel}
-                >
-                  <Icon name="close-small" size="small" />
-                </button>
-              </Show>
-            </div>
-            <For each={props.state.items}>{(item) => <ComposerPickerMenuItem state={item} />}</For>
-          </div>
-          <div class="h-px bg-v2-border-border-muted" />
-          <div class="flex flex-col p-0.5">
-            <ComposerPickerMenuItem state={props.state.action} />
-          </div>
-        </KobaltePopover.Content>
-      </KobaltePopover.Portal>
-    </KobaltePopover>
-  )
-}
-
-function ComposerAgentControl(props: { state: ComposerAgentControlState }) {
-  return (
-    <div class="relative">
-      <div class="pointer-events-none absolute left-2 top-1/2 z-10 flex size-4 -translate-y-1/2 items-center justify-center text-v2-icon-icon-muted">
-        <Icon name="sliders" size="small" />
-      </div>
-      <TooltipKeybind placement="top" gutter={4} title={props.state.title} keybind={props.state.keybind}>
-        <Select
-          size="normal"
-          options={props.state.options}
-          current={props.state.current}
-          onSelect={props.state.onSelect}
-          class="max-w-[175px] justify-start text-v2-text-text-faint [&_[data-component=icon]]:text-v2-icon-icon-muted"
-          valueClass="truncate pl-5 text-[13px] font-[440] leading-5 text-v2-text-text-faint"
-          triggerStyle={props.state.style}
-          triggerProps={{ "data-action": "prompt-agent" }}
-          variant="ghost"
-        />
-      </TooltipKeybind>
-    </div>
-  )
-}
-
-function ComposerModelControl(props: { state: ComposerModelControlState }) {
-  return (
-    <Show when={!props.state.loading}>
-      <Show
-        when={props.state.paid}
-        fallback={
-          <TooltipKeybind placement="top" gutter={4} title={props.state.title} keybind={props.state.keybind}>
-            <Button
-              data-action="prompt-model"
-              as="div"
-              variant="ghost"
-              size="normal"
-              class="min-w-0 max-w-[220px] justify-start text-[13px] font-[440] leading-5 text-v2-text-text-faint group"
-              style={props.state.style}
-              onClick={props.state.onUnpaidClick}
-            >
-              <Show when={props.state.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">{props.state.modelName}</span>
-              <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-            </Button>
-          </TooltipKeybind>
-        }
-      >
-        <TooltipKeybind placement="top" gutter={4} title={props.state.title} keybind={props.state.keybind}>
-          <ModelSelectorPopover
-            model={props.state.model}
-            triggerAs={Button}
-            triggerProps={{
-              variant: "ghost",
-              size: "normal",
-              style: props.state.style,
-              class:
-                "min-w-0 max-w-[220px] justify-start text-[13px] font-[440] leading-5 text-v2-text-text-faint group",
-              "data-action": "prompt-model",
-            }}
-            onClose={props.state.onClose}
-          >
-            <Show when={props.state.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">{props.state.modelName}</span>
-            <Icon name="chevron-down" size="small" class="shrink-0 text-v2-icon-icon-muted" />
-          </ModelSelectorPopover>
-        </TooltipKeybind>
-      </Show>
-    </Show>
-  )
-}

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

@@ -1,6 +1,6 @@
 import { onMount } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { usePrompt, type ContentPart, type ImageAttachmentPart } from "@/context/prompt"
 import { useLanguage } from "@/context/language"
 import { uuid } from "@/utils/uuid"

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

@@ -162,8 +162,8 @@ beforeAll(async () => {
     }),
   }))
 
-  mock.module("@/context/server-sync", () => ({
-    useServerSync: () => ({
+  mock.module("@/context/global-sync", () => ({
+    useGlobalSync: () => ({
       child: (directory: string) => {
         syncedDirectories.push(directory)
         storedSessions[directory] ??= []

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

@@ -1,11 +1,11 @@
 import type { Message, Session } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Binary } from "@opencode-ai/core/util/binary"
 import { useNavigate, useParams } from "@solidjs/router"
 import { batch, type Accessor } from "solid-js"
 import type { FileSelection } from "@/context/file"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useLocal } from "@/context/local"
@@ -38,7 +38,7 @@ export type FollowupDraft = {
 
 type FollowupSendInput = {
   client: ReturnType<typeof useSDK>["client"]
-  serverSync: ReturnType<typeof useServerSync>
+  globalSync: ReturnType<typeof useGlobalSync>
   sync: ReturnType<typeof useSync>
   draft: FollowupDraft
   messageID?: string
@@ -53,7 +53,7 @@ const draftImages = (prompt: Prompt) => prompt.filter((part): part is ImageAttac
 export async function sendFollowupDraft(input: FollowupSendInput) {
   const text = draftText(input.draft.prompt)
   const images = draftImages(input.draft.prompt)
-  const [, setStore] = input.serverSync.child(input.draft.sessionDirectory)
+  const [, setStore] = input.globalSync.child(input.draft.sessionDirectory)
 
   const setBusy = () => {
     if (!input.optimisticBusy) return
@@ -205,7 +205,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   const navigate = useNavigate()
   const sdk = useSDK()
   const sync = useSync()
-  const serverSync = useServerSync()
+  const globalSync = useGlobalSync()
   const local = useLocal()
   const permission = usePermission()
   const prompt = usePrompt()
@@ -226,8 +226,8 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     const sessionID = params.id
     if (!sessionID) return Promise.resolve()
 
-    serverSync.todo.set(sessionID, [])
-    const [, setStore] = serverSync.child(sdk.directory)
+    globalSync.todo.set(sessionID, [])
+    const [, setStore] = globalSync.child(sdk.directory)
     setStore("todo", sessionID, [])
 
     input.onAbort?.()
@@ -273,7 +273,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
   }
 
   const seed = (dir: string, info: Session) => {
-    const [, setStore] = serverSync.child(dir)
+    const [, setStore] = globalSync.child(dir)
     setStore("session", (list: Session[]) => {
       const result = Binary.search(list, info.id, (item) => item.id)
       const next = [...list]
@@ -354,7 +354,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
           directory: sessionDirectory,
           throwOnError: true,
         })
-        serverSync.child(sessionDirectory)
+        globalSync.child(sessionDirectory)
       }
 
       input.onNewSessionWorktreeReset?.()
@@ -557,7 +557,7 @@ export function createPromptSubmit(input: PromptSubmitInput) {
     void sendFollowupDraft({
       client,
       sync,
-      serverSync,
+      globalSync,
       draft,
       messageID,
       optimisticBusy: sessionDirectory === projectDirectory,

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

@@ -5,7 +5,7 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { Spinner } from "@opencode-ai/ui/spinner"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { createEffect, createMemo, createSignal, For, onMount, Show } from "solid-js"
@@ -24,9 +24,7 @@ import { useSessionLayout } from "@/pages/session/session-layout"
 import { messageAgentColor } from "@/utils/agent"
 import { decode64 } from "@/utils/base64"
 import { Persist, persisted } from "@/utils/persist"
-import { StatusPopover, StatusPopoverV2 } from "../status-popover"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { StatusPopover } from "../status-popover"
 
 const OPEN_APPS = [
   "vscode",
@@ -155,11 +153,11 @@ export function SessionHeader() {
   })
   const hotkey = createMemo(() => command.keybind("file.open"))
   const os = createMemo(() => detectOS(platform))
-  const isDesktopV2 = createMemo(() => platform.platform === "desktop" && settings.general.newLayoutDesigns())
-  const search = createMemo(() => (isDesktopV2() ? settings.general.showSearch() : true))
-  const tree = createMemo(() => (isDesktopV2() ? settings.general.showFileTree() : true))
-  const term = createMemo(() => (isDesktopV2() ? settings.general.showTerminal() : true))
-  const status = createMemo(() => (isDesktopV2() ? settings.general.showStatus() : true))
+  const isDesktopBeta = platform.platform === "desktop" && import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
+  const search = createMemo(() => !isDesktopBeta || settings.general.showSearch())
+  const tree = createMemo(() => !isDesktopBeta || settings.general.showFileTree())
+  const term = createMemo(() => !isDesktopBeta || settings.general.showTerminal())
+  const status = createMemo(() => !isDesktopBeta || settings.general.showStatus())
 
   const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
     finder: true,
@@ -233,14 +231,6 @@ export function SessionHeader() {
   const tint = createMemo(() =>
     messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent),
   )
-  const v2ActionsState = createMemo<SessionHeaderV2ActionsState>(() => ({
-    statusVisible: status(),
-    statusLabel: language.t("status.popover.trigger"),
-    reviewLabel: language.t("command.review.toggle"),
-    reviewKeybind: command.keybind("review.toggle"),
-    reviewOpened: view().reviewPanel.opened(),
-    onReviewToggle: () => view().reviewPanel.toggle(),
-  }))
 
   const selectApp = (app: OpenApp) => {
     if (!options().some((item) => item.id === app)) return
@@ -321,235 +311,193 @@ export function SessionHeader() {
       <Show when={rightMount()}>
         {(mount) => (
           <Portal mount={mount()}>
-            <Show
-              when={isDesktopV2}
-              fallback={
-                <div class="flex items-center gap-2">
-                  <Show when={projectDirectory()}>
-                    <div class="hidden xl:flex items-center">
-                      <Show
-                        when={canOpen()}
-                        fallback={
-                          <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
-                            <Button
-                              variant="ghost"
-                              class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
-                              onClick={copyPath}
-                              aria-label={language.t("session.header.open.copyPath")}
-                            >
-                              <Icon name="copy" size="small" class="text-icon-base" />
-                              <span class="text-12-regular text-text-strong">
-                                {language.t("session.header.open.copyPath")}
-                              </span>
-                            </Button>
+            <div class="flex items-center gap-2">
+              <Show when={projectDirectory()}>
+                <div class="hidden xl:flex items-center">
+                  <Show
+                    when={canOpen()}
+                    fallback={
+                      <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                        <Button
+                          variant="ghost"
+                          class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
+                          onClick={copyPath}
+                          aria-label={language.t("session.header.open.copyPath")}
+                        >
+                          <Icon name="copy" size="small" class="text-icon-base" />
+                          <span class="text-12-regular text-text-strong">
+                            {language.t("session.header.open.copyPath")}
+                          </span>
+                        </Button>
+                      </div>
+                    }
+                  >
+                    <div class="flex items-center">
+                      <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
+                        <Button
+                          variant="ghost"
+                          class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
+                          classList={{
+                            "bg-surface-raised-base-active": opening(),
+                          }}
+                          onClick={() => openDir(current().id)}
+                          disabled={opening()}
+                          aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
+                        >
+                          <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                            <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
+                              <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
+                            </Show>
                           </div>
-                        }
-                      >
-                        <div class="flex items-center">
-                          <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
-                            <Button
-                              variant="ghost"
-                              class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
-                              classList={{
-                                "bg-surface-raised-base-active": opening(),
-                              }}
-                              onClick={() => openDir(current().id)}
-                              disabled={opening()}
-                              aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
-                            >
-                              <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
-                                <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
-                                  <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
-                                </Show>
-                              </div>
-                            </Button>
-                            <DropdownMenu
-                              gutter={4}
-                              placement="bottom-end"
-                              open={menu.open}
-                              onOpenChange={(open) => setMenu("open", open)}
-                            >
-                              <DropdownMenu.Trigger
-                                as={IconButton}
-                                icon="chevron-down"
-                                variant="ghost"
-                                disabled={opening()}
-                                class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
-                                classList={{
-                                  "bg-surface-raised-base-active": opening(),
+                        </Button>
+                        <DropdownMenu
+                          gutter={4}
+                          placement="bottom-end"
+                          open={menu.open}
+                          onOpenChange={(open) => setMenu("open", open)}
+                        >
+                          <DropdownMenu.Trigger
+                            as={IconButton}
+                            icon="chevron-down"
+                            variant="ghost"
+                            disabled={opening()}
+                            class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
+                            classList={{
+                              "bg-surface-raised-base-active": opening(),
+                            }}
+                            aria-label={language.t("session.header.open.menu")}
+                          />
+                          <DropdownMenu.Portal>
+                            <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]+[data-slot=dropdown-menu-radio-item]]:mt-1">
+                              <DropdownMenu.Group>
+                                <DropdownMenu.GroupLabel class="!px-1 !py-1">
+                                  {language.t("session.header.openIn")}
+                                </DropdownMenu.GroupLabel>
+                                <DropdownMenu.RadioGroup
+                                  class="mt-1"
+                                  value={current().id}
+                                  onChange={(value) => {
+                                    if (!OPEN_APPS.includes(value as OpenApp)) return
+                                    selectApp(value as OpenApp)
+                                  }}
+                                >
+                                  <For each={options()}>
+                                    {(o) => (
+                                      <DropdownMenu.RadioItem
+                                        value={o.id}
+                                        disabled={opening()}
+                                        onSelect={() => {
+                                          setMenu("open", false)
+                                          openDir(o.id)
+                                        }}
+                                      >
+                                        <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
+                                          <AppIcon id={o.icon} />
+                                        </div>
+                                        <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
+                                        <DropdownMenu.ItemIndicator>
+                                          <Icon name="check-small" size="small" class="text-icon-weak" />
+                                        </DropdownMenu.ItemIndicator>
+                                      </DropdownMenu.RadioItem>
+                                    )}
+                                  </For>
+                                </DropdownMenu.RadioGroup>
+                              </DropdownMenu.Group>
+                              <DropdownMenu.Separator />
+                              <DropdownMenu.Item
+                                onSelect={() => {
+                                  setMenu("open", false)
+                                  copyPath()
                                 }}
-                                aria-label={language.t("session.header.open.menu")}
-                              />
-                              <DropdownMenu.Portal>
-                                <DropdownMenu.Content class="[&_[data-slot=dropdown-menu-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]]:pl-1 [&_[data-slot=dropdown-menu-radio-item]+[data-slot=dropdown-menu-radio-item]]:mt-1">
-                                  <DropdownMenu.Group>
-                                    <DropdownMenu.GroupLabel class="!px-1 !py-1">
-                                      {language.t("session.header.openIn")}
-                                    </DropdownMenu.GroupLabel>
-                                    <DropdownMenu.RadioGroup
-                                      class="mt-1"
-                                      value={current().id}
-                                      onChange={(value) => {
-                                        if (!OPEN_APPS.includes(value as OpenApp)) return
-                                        selectApp(value as OpenApp)
-                                      }}
-                                    >
-                                      <For each={options()}>
-                                        {(o) => (
-                                          <DropdownMenu.RadioItem
-                                            value={o.id}
-                                            disabled={opening()}
-                                            onSelect={() => {
-                                              setMenu("open", false)
-                                              openDir(o.id)
-                                            }}
-                                          >
-                                            <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
-                                              <AppIcon id={o.icon} />
-                                            </div>
-                                            <DropdownMenu.ItemLabel>{o.label}</DropdownMenu.ItemLabel>
-                                            <DropdownMenu.ItemIndicator>
-                                              <Icon name="check-small" size="small" class="text-icon-weak" />
-                                            </DropdownMenu.ItemIndicator>
-                                          </DropdownMenu.RadioItem>
-                                        )}
-                                      </For>
-                                    </DropdownMenu.RadioGroup>
-                                  </DropdownMenu.Group>
-                                  <DropdownMenu.Separator />
-                                  <DropdownMenu.Item
-                                    onSelect={() => {
-                                      setMenu("open", false)
-                                      copyPath()
-                                    }}
-                                  >
-                                    <div class="flex size-5 shrink-0 items-center justify-center">
-                                      <Icon name="copy" size="small" class="text-icon-weak" />
-                                    </div>
-                                    <DropdownMenu.ItemLabel>
-                                      {language.t("session.header.open.copyPath")}
-                                    </DropdownMenu.ItemLabel>
-                                  </DropdownMenu.Item>
-                                </DropdownMenu.Content>
-                              </DropdownMenu.Portal>
-                            </DropdownMenu>
-                          </div>
-                        </div>
-                      </Show>
+                              >
+                                <div class="flex size-5 shrink-0 items-center justify-center">
+                                  <Icon name="copy" size="small" class="text-icon-weak" />
+                                </div>
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("session.header.open.copyPath")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Portal>
+                        </DropdownMenu>
+                      </div>
                     </div>
                   </Show>
-                  <div class="flex items-center gap-1">
-                    <Show when={status()}>
-                      <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
-                        <StatusPopover />
-                      </Tooltip>
-                    </Show>
-                    <Show when={term()}>
-                      <TooltipKeybind
-                        title={language.t("command.terminal.toggle")}
-                        keybind={command.keybind("terminal.toggle")}
-                      >
-                        <Button
-                          variant="ghost"
-                          class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
-                          onClick={toggleTerminal}
-                          aria-label={language.t("command.terminal.toggle")}
-                          aria-expanded={view().terminal.opened()}
-                          aria-controls="terminal-panel"
-                        >
-                          <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
-                        </Button>
-                      </TooltipKeybind>
-                    </Show>
-
-                    <div class="hidden md:flex items-center gap-1 shrink-0">
-                      <TooltipKeybind
-                        title={language.t("command.review.toggle")}
-                        keybind={command.keybind("review.toggle")}
-                      >
-                        <Button
-                          variant="ghost"
-                          class="group/review-toggle titlebar-icon w-8 h-6 p-0 box-border"
-                          onClick={() => view().reviewPanel.toggle()}
-                          aria-label={language.t("command.review.toggle")}
-                          aria-expanded={view().reviewPanel.opened()}
-                          aria-controls="review-panel"
-                        >
-                          <Icon size="small" name={view().reviewPanel.opened() ? "review-active" : "review"} />
-                        </Button>
-                      </TooltipKeybind>
-
-                      <Show when={tree()}>
-                        <TooltipKeybind
-                          title={language.t("command.fileTree.toggle")}
-                          keybind={command.keybind("fileTree.toggle")}
-                        >
-                          <Button
-                            variant="ghost"
-                            class="titlebar-icon w-8 h-6 p-0 box-border"
-                            onClick={() => layout.fileTree.toggle()}
-                            aria-label={language.t("command.fileTree.toggle")}
-                            aria-expanded={layout.fileTree.opened()}
-                            aria-controls="file-tree-panel"
-                          >
-                            <div class="relative flex items-center justify-center size-4">
-                              <Icon
-                                size="small"
-                                name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
-                                classList={{
-                                  "text-icon-strong": layout.fileTree.opened(),
-                                  "text-icon-weak": !layout.fileTree.opened(),
-                                }}
-                              />
-                            </div>
-                          </Button>
-                        </TooltipKeybind>
-                      </Show>
-                    </div>
-                  </div>
                 </div>
-              }
-            >
-              <SessionHeaderV2Actions state={v2ActionsState()} />
-            </Show>
+              </Show>
+              <div class="flex items-center gap-1">
+                <Show when={status()}>
+                  <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                    <StatusPopover />
+                  </Tooltip>
+                </Show>
+                <Show when={term()}>
+                  <TooltipKeybind
+                    title={language.t("command.terminal.toggle")}
+                    keybind={command.keybind("terminal.toggle")}
+                  >
+                    <Button
+                      variant="ghost"
+                      class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
+                      onClick={toggleTerminal}
+                      aria-label={language.t("command.terminal.toggle")}
+                      aria-expanded={view().terminal.opened()}
+                      aria-controls="terminal-panel"
+                    >
+                      <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
+                    </Button>
+                  </TooltipKeybind>
+                </Show>
+
+                <div class="hidden md:flex items-center gap-1 shrink-0">
+                  <TooltipKeybind
+                    title={language.t("command.review.toggle")}
+                    keybind={command.keybind("review.toggle")}
+                  >
+                    <Button
+                      variant="ghost"
+                      class="group/review-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                      onClick={() => view().reviewPanel.toggle()}
+                      aria-label={language.t("command.review.toggle")}
+                      aria-expanded={view().reviewPanel.opened()}
+                      aria-controls="review-panel"
+                    >
+                      <Icon size="small" name={view().reviewPanel.opened() ? "review-active" : "review"} />
+                    </Button>
+                  </TooltipKeybind>
+
+                  <Show when={tree()}>
+                    <TooltipKeybind
+                      title={language.t("command.fileTree.toggle")}
+                      keybind={command.keybind("fileTree.toggle")}
+                    >
+                      <Button
+                        variant="ghost"
+                        class="titlebar-icon w-8 h-6 p-0 box-border"
+                        onClick={() => layout.fileTree.toggle()}
+                        aria-label={language.t("command.fileTree.toggle")}
+                        aria-expanded={layout.fileTree.opened()}
+                        aria-controls="file-tree-panel"
+                      >
+                        <div class="relative flex items-center justify-center size-4">
+                          <Icon
+                            size="small"
+                            name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
+                            classList={{
+                              "text-icon-strong": layout.fileTree.opened(),
+                              "text-icon-weak": !layout.fileTree.opened(),
+                            }}
+                          />
+                        </div>
+                      </Button>
+                    </TooltipKeybind>
+                  </Show>
+                </div>
+              </div>
+            </div>
           </Portal>
         )}
       </Show>
     </>
   )
 }
-
-type SessionHeaderV2ActionsState = {
-  statusVisible: boolean
-  statusLabel: string
-  reviewLabel: string
-  reviewKeybind: string
-  reviewOpened: boolean
-  onReviewToggle: () => void
-}
-
-function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
-  return (
-    <div class="flex items-center gap-2">
-      <Show when={props.state.statusVisible}>
-        <Tooltip placement="bottom" value={props.state.statusLabel}>
-          <StatusPopoverV2 />
-        </Tooltip>
-      </Show>
-      <TooltipKeybind title={props.state.reviewLabel} keybind={props.state.reviewKeybind}>
-        <IconButtonV2
-          type="button"
-          variant="ghost-muted"
-          size="large"
-          class="!w-9 shrink-0"
-          state={props.state.reviewOpened ? "pressed" : undefined}
-          onClick={props.state.onReviewToggle}
-          aria-label={props.state.reviewLabel}
-          aria-expanded={props.state.reviewOpened}
-          aria-controls="review-panel"
-          icon={<IconV2 name="sidebar-right" />}
-        />
-      </TooltipKeybind>
-    </div>
-  )
-}

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

@@ -1,14 +1,76 @@
 import type { JSX } from "solid-js"
-import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
-import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { createMemo } from "solid-js"
+import { useNavigate } from "@solidjs/router"
+import { useGlobalSync } from "@/context/global-sync"
+import { useLayout } from "@/context/layout"
+import { useSDK } from "@/context/sdk"
+import { useServer } from "@/context/server"
+import { useSync } from "@/context/sync"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Select } from "@opencode-ai/ui/select"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/components/wordmark-v2.jsx"
+
+const MAIN_WORKTREE = "main"
+
+export function NewSessionDesignView(props: { worktree: string; children: JSX.Element }) {
+  const globalSync = useGlobalSync()
+  const layout = useLayout()
+  const navigate = useNavigate()
+  const sdk = useSDK()
+  const server = useServer()
+  const sync = useSync()
+
+  const projectRoot = createMemo(() => sync.project?.worktree ?? sdk.directory)
+  const projects = createMemo(() => {
+    const roots = globalSync.data.project.map((project) => project.worktree)
+    if (roots.includes(projectRoot())) return roots
+    return [projectRoot(), ...roots]
+  })
+  const branch = createMemo(() => sync.data.vcs?.branch ?? MAIN_WORKTREE)
+
+  const openProject = (directory: string | undefined) => {
+    if (!directory) return
+    if (directory === projectRoot()) return
+    layout.projects.open(directory)
+    server.projects.touch(directory)
+    navigate(`/${base64Encode(directory)}/session`)
+  }
 
-export function NewSessionDesignView(props: { children: JSX.Element }) {
   return (
     <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep">
       <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
-        <div class={NEW_SESSION_CONTENT_WIDTH}>
+        <div class="w-full max-w-[720px]">
           <WordmarkV2 class="h-auto w-full text-v2-icon-icon-base" />
-          <div class="mt-8">{props.children}</div>
+          <div class="mt-8">
+            {props.children}
+            <div class="mt-3 flex h-7 items-center gap-0 pl-2">
+              <Select
+                size="normal"
+                variant="ghost"
+                options={projects()}
+                current={projectRoot()}
+                label={getFilename}
+                onSelect={openProject}
+                class="max-w-[203px] justify-start text-text-base [&_[data-component=icon]]:text-v2-icon-icon-muted"
+                valueClass="truncate text-[length:13px] font-[440] text-v2-text-text-faint"
+              />
+              <div class="relative">
+                <div class="pointer-events-none absolute left-2 top-1/2 z-10 flex size-4 -translate-y-1/2 items-center justify-center">
+                  <Icon name="branch" size="small" />
+                </div>
+                <Select
+                  size="normal"
+                  variant="ghost"
+                  options={[branch()]}
+                  current={branch()}
+                  class="max-w-[240px] justify-start text-text-base [&_[data-component=icon]]:text-v2-icon-icon-muted"
+                  valueClass="truncate pl-5 font-[440] text-v2-text-text-faint"
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

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

@@ -7,14 +7,13 @@ import { Switch } from "@opencode-ai/ui/switch"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { useParams } from "@solidjs/router"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
 import { usePlatform, type DisplayBackend } from "@/context/platform"
-import { useServerSync } from "@/context/server-sync"
-import { useServerSDK } from "@/context/server-sdk"
+import { useGlobalSync } from "@/context/global-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
 import {
   monoDefault,
   monoFontFamily,
@@ -87,7 +86,6 @@ export const SettingsGeneral: Component = () => {
   const language = useLanguage()
   const permission = usePermission()
   const platform = usePlatform()
-  const dialog = useDialog()
   const params = useParams()
   const settings = useSettings()
 
@@ -177,8 +175,8 @@ export const SettingsGeneral: Component = () => {
 
   const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
 
-  const serverSync = useServerSync()
-  const globalSdk = useServerSDK()
+  const globalSync = useGlobalSync()
+  const globalSdk = useGlobalSDK()
 
   const [shells] = createResource(
     () =>
@@ -206,11 +204,11 @@ export const SettingsGeneral: Component = () => {
   })
 
   const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
-  const currentShell = createMemo(() => serverSync.data.config.shell ?? "")
+  const currentShell = createMemo(() => globalSync.data.config.shell ?? "")
 
   const shellOptions = createMemo<ShellSelectOption[]>(() => {
     const list = shells.latest
-    const current = serverSync.data.config.shell
+    const current = globalSync.data.config.shell
 
     const nameCounts = new Map<string, number>()
     for (const s of list) {
@@ -345,7 +343,7 @@ export const SettingsGeneral: Component = () => {
             onSelect={(option) => {
               if (!option) return
               if (option.value === currentShell()) return
-              serverSync.updateConfig({ shell: option.value })
+              globalSync.updateConfig({ shell: option.value })
             }}
             variant="secondary"
             size="small"
@@ -401,24 +399,6 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.newLayoutDesigns.title")}
-          description={language.t("settings.general.row.newLayoutDesigns.description")}
-        >
-          <div data-action="settings-new-layout-designs">
-            <Switch
-              checked={settings.general.newLayoutDesigns()}
-              onChange={(checked) => {
-                settings.general.setNewLayoutDesigns(checked)
-                if (!checked) return
-                void import("@/components/settings-v2").then((module) => {
-                  dialog.show(() => <module.DialogSettings />)
-                })
-              }}
-            />
-          </div>
-        </SettingsRow>
       </SettingsList>
     </div>
   )
@@ -464,6 +444,18 @@ export const SettingsGeneral: Component = () => {
           </div>
         </SettingsRow>
 
+        <SettingsRow
+          title={language.t("settings.general.row.showTerminal.title")}
+          description={language.t("settings.general.row.showTerminal.description")}
+        >
+          <div data-action="settings-show-terminal">
+            <Switch
+              checked={settings.general.showTerminal()}
+              onChange={(checked) => settings.general.setShowTerminal(checked)}
+            />
+          </div>
+        </SettingsRow>
+
         <SettingsRow
           title={language.t("settings.general.row.showStatus.title")}
           description={language.t("settings.general.row.showStatus.description")}
@@ -475,18 +467,6 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
-
-        <SettingsRow
-          title={language.t("settings.general.row.showCustomAgents.title")}
-          description={language.t("settings.general.row.showCustomAgents.description")}
-        >
-          <div data-action="settings-show-custom-agents">
-            <Switch
-              checked={settings.general.showCustomAgents()}
-              onChange={(checked) => settings.general.setShowCustomAgents(checked)}
-            />
-          </div>
-        </SettingsRow>
       </SettingsList>
     </div>
   )
@@ -801,6 +781,7 @@ export const SettingsGeneral: Component = () => {
     </Show>
   )
 
+  console.log(import.meta.env)
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
@@ -822,7 +803,7 @@ export const SettingsGeneral: Component = () => {
 
         <DisplaySection />
 
-        <Show when={desktop()}>
+        <Show when={desktop() && import.meta.env.VITE_OPENCODE_CHANNEL === "beta"}>
           <AdvancedSection />
         </Show>
       </div>

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

@@ -1,29 +1,17 @@
-import { Component, For, Show, createMemo, lazy, onCleanup, onMount } from "solid-js"
+import { Component, For, Show, createMemo, onCleanup, onMount } from "solid-js"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import fuzzysort from "fuzzysort"
 import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { SettingsList } from "./settings-list"
 
-const ButtonV2 = lazy(() => import("@opencode-ai/ui/v2/button-v2").then((module) => ({ default: module.ButtonV2 })))
-const IconV2 = lazy(() => import("@opencode-ai/ui/v2/icon").then((module) => ({ default: module.Icon })))
-const IconButtonV2 = lazy(() =>
-  import("@opencode-ai/ui/v2/icon-button-v2").then((module) => ({ default: module.IconButtonV2 })),
-)
-const TextInputV2 = lazy(() =>
-  import("@opencode-ai/ui/v2/text-input-v2").then((module) => ({ default: module.TextInputV2 })),
-)
-const SettingsListV2 = lazy(() =>
-  import("./settings-v2/parts/list").then((module) => ({ default: module.SettingsListV2 })),
-)
-
 const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
 const PALETTE_ID = "command.palette"
 const DEFAULT_PALETTE_KEYBIND = "mod+shift+p"
@@ -269,7 +257,7 @@ function useKeyCapture(input: {
   })
 }
 
-export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
+export const SettingsKeybinds: Component = () => {
   const command = useCommand()
   const language = useLanguage()
   const settings = useSettings()
@@ -383,178 +371,85 @@ export const SettingsKeybinds: Component<{ v2?: boolean }> = (props) => {
     if (store.active) command.keybinds(true)
   })
 
-  const emptyResults = (
-    <Show when={store.filter && !hasResults()}>
-      <div
-        classList={{
-          "flex flex-col items-center justify-center py-12 text-center": !props.v2,
-          "settings-v2-shortcuts-status": props.v2,
-        }}
-      >
-        <span
-          classList={{
-            "text-14-regular text-text-weak": !props.v2,
-          }}
-        >
-          {language.t("settings.shortcuts.search.empty")}
-        </span>
-        <Show when={store.filter}>
-          <span
-            classList={{
-              "text-14-regular text-text-strong mt-1": !props.v2,
-              "settings-v2-shortcuts-status-filter": props.v2,
-            }}
-          >
-            &quot;{store.filter}&quot;
-          </span>
-        </Show>
-      </div>
-    </Show>
-  )
-
-  const List = props.v2 ? SettingsListV2 : SettingsList
-
-  const groups = (
-    <div
-      classList={{
-        "settings-v2-shortcuts flex flex-col gap-8": props.v2,
-        "flex flex-col gap-8 max-w-[720px]": !props.v2,
-      }}
-    >
-      <For each={GROUPS}>
-        {(group) => (
-          <Show when={(filtered().get(group) ?? []).length > 0}>
-            <div
-              classList={{
-                "settings-v2-section": props.v2,
-                "flex flex-col gap-1": !props.v2,
-              }}
-            >
-              <h3
-                classList={{
-                  "settings-v2-section-title": props.v2,
-                  "text-14-medium text-text-strong pb-2": !props.v2,
-                }}
-              >
-                {language.t(groupKey[group])}
-              </h3>
-              <List>
-                <For each={filtered().get(group) ?? []}>
-                  {(id) => (
-                    <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
-                      <span
-                        classList={{
-                          "text-14-regular text-text-strong": !props.v2,
-                        }}
-                      >
-                        {title(id)}
-                      </span>
-                      <button
-                        type="button"
-                        data-keybind-id={id}
-                        classList={{
-                          "settings-v2-keybind-button": props.v2,
-                          "settings-v2-keybind-button--active": props.v2 && store.active === id,
-                          "h-8 px-3 rounded-md text-12-regular": !props.v2,
-                          "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
-                            !props.v2 && store.active !== id,
-                          "border border-border-weak-base bg-surface-inset-base text-text-weak":
-                            !props.v2 && store.active === id,
-                        }}
-                        onClick={() => start(id)}
-                      >
-                        <Show
-                          when={store.active === id}
-                          fallback={command.keybind(id) || language.t("settings.shortcuts.unassigned")}
-                        >
-                          {language.t("settings.shortcuts.pressKeys")}
-                        </Show>
-                      </button>
-                    </div>
-                  )}
-                </For>
-              </List>
-            </div>
-          </Show>
-        )}
-      </For>
-      {emptyResults}
-    </div>
-  )
-
   return (
-    <Show
-      when={props.v2}
-      fallback={
-        <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
-          <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
-            <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
-              <div class="flex items-center justify-between gap-4">
-                <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
-                <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
-                  {language.t("settings.shortcuts.reset.button")}
-                </Button>
-              </div>
-
-              <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
-                <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
-                <TextField
-                  variant="ghost"
-                  type="text"
-                  value={store.filter}
-                  onChange={(v) => setStore("filter", v)}
-                  placeholder={language.t("settings.shortcuts.search.placeholder")}
-                  spellcheck={false}
-                  autocorrect="off"
-                  autocomplete="off"
-                  autocapitalize="off"
-                  class="flex-1"
-                />
-                <Show when={store.filter}>
-                  <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
-                </Show>
-              </div>
-            </div>
-          </div>
-          {groups}
-        </div>
-      }
-    >
-      <>
-        <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
-          <div class="settings-v2-tab-header-row">
-            <h2 class="settings-v2-tab-title">{language.t("settings.shortcuts.title")}</h2>
-            <ButtonV2 variant="ghost" onClick={resetAll} disabled={!hasOverrides()}>
+    <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
+      <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
+        <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
+          <div class="flex items-center justify-between gap-4">
+            <h2 class="text-16-medium text-text-strong">{language.t("settings.shortcuts.title")}</h2>
+            <Button size="small" variant="secondary" onClick={resetAll} disabled={!hasOverrides()}>
               {language.t("settings.shortcuts.reset.button")}
-            </ButtonV2>
+            </Button>
           </div>
-          <div class="settings-v2-tab-search">
-            <TextInputV2
-              type="search"
-              appearance="base"
+
+          <div class="flex items-center gap-2 px-3 h-9 rounded-lg bg-surface-base">
+            <Icon name="magnifying-glass" class="text-icon-weak-base flex-shrink-0" />
+            <TextField
+              variant="ghost"
+              type="text"
               value={store.filter}
-              onInput={(event) => setStore("filter", event.currentTarget.value)}
+              onChange={(v) => setStore("filter", v)}
               placeholder={language.t("settings.shortcuts.search.placeholder")}
               spellcheck={false}
               autocorrect="off"
               autocomplete="off"
               autocapitalize="off"
-              aria-label={language.t("settings.shortcuts.search.placeholder")}
+              class="flex-1"
             />
             <Show when={store.filter}>
-              <IconButtonV2
-                type="button"
-                variant="ghost-muted"
-                size="small"
-                class="settings-v2-tab-search-clear"
-                icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
-                onClick={() => setStore("filter", "")}
-              />
+              <IconButton icon="circle-x" variant="ghost" onClick={() => setStore("filter", "")} />
             </Show>
           </div>
         </div>
-        <div class="settings-v2-tab-body">{groups}</div>
-      </>
-    </Show>
+      </div>
+
+      <div class="flex flex-col gap-8 max-w-[720px]">
+        <For each={GROUPS}>
+          {(group) => (
+            <Show when={(filtered().get(group) ?? []).length > 0}>
+              <div class="flex flex-col gap-1">
+                <h3 class="text-14-medium text-text-strong pb-2">{language.t(groupKey[group])}</h3>
+                <SettingsList>
+                  <For each={filtered().get(group) ?? []}>
+                    {(id) => (
+                      <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
+                        <span class="text-14-regular text-text-strong">{title(id)}</span>
+                        <button
+                          type="button"
+                          data-keybind-id={id}
+                          classList={{
+                            "h-8 px-3 rounded-md text-12-regular": true,
+                            "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":
+                              store.active !== id,
+                            "border border-border-weak-base bg-surface-inset-base text-text-weak": store.active === id,
+                          }}
+                          onClick={() => start(id)}
+                        >
+                          <Show
+                            when={store.active === id}
+                            fallback={command.keybind(id) || language.t("settings.shortcuts.unassigned")}
+                          >
+                            {language.t("settings.shortcuts.pressKeys")}
+                          </Show>
+                        </button>
+                      </div>
+                    )}
+                  </For>
+                </SettingsList>
+              </div>
+            </Show>
+          )}
+        </For>
+
+        <Show when={store.filter && !hasResults()}>
+          <div class="flex flex-col items-center justify-center py-12 text-center">
+            <span class="text-14-regular text-text-weak">{language.t("settings.shortcuts.search.empty")}</span>
+            <Show when={store.filter}>
+              <span class="text-14-regular text-text-strong mt-1">"{store.filter}"</span>
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </div>
   )
 }

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

@@ -2,12 +2,12 @@ import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { Tag } from "@opencode-ai/ui/tag"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { createMemo, type Component, For, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "@/context/global-sync"
 import { DialogConnectProvider } from "./dialog-connect-provider"
 import { DialogSelectProvider } from "./dialog-select-provider"
 import { DialogCustomProvider } from "./dialog-custom-provider"
@@ -30,8 +30,8 @@ const PROVIDER_NOTES = [
 export const SettingsProviders: Component = () => {
   const dialog = useDialog()
   const language = useLanguage()
-  const serverSDK = useServerSDK()
-  const serverSync = useServerSync()
+  const globalSDK = useGlobalSDK()
+  const globalSync = useGlobalSync()
   const providers = useProviders()
 
   const connected = createMemo(() => {
@@ -74,7 +74,7 @@ export const SettingsProviders: Component = () => {
   const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
 
   const isConfigCustom = (providerID: string) => {
-    const provider = serverSync.data.config.provider?.[providerID]
+    const provider = globalSync.data.config.provider?.[providerID]
     if (!provider) return false
     if (provider.npm !== "@ai-sdk/openai-compatible") return false
     if (!provider.models || Object.keys(provider.models).length === 0) return false
@@ -82,11 +82,11 @@ export const SettingsProviders: Component = () => {
   }
 
   const disableProvider = async (providerID: string, name: string) => {
-    const before = serverSync.data.config.disabled_providers ?? []
+    const before = globalSync.data.config.disabled_providers ?? []
     const next = before.includes(providerID) ? before : [...before, providerID]
-    serverSync.set("config", "disabled_providers", next)
+    globalSync.set("config", "disabled_providers", next)
 
-    await serverSync
+    await globalSync
       .updateConfig({ disabled_providers: next })
       .then(() => {
         showToast({
@@ -97,7 +97,7 @@ export const SettingsProviders: Component = () => {
         })
       })
       .catch((err: unknown) => {
-        serverSync.set("config", "disabled_providers", before)
+        globalSync.set("config", "disabled_providers", before)
         const message = err instanceof Error ? err.message : String(err)
         showToast({ title: language.t("common.requestFailed"), description: message })
       })
@@ -105,14 +105,14 @@ export const SettingsProviders: Component = () => {
 
   const disconnect = async (providerID: string, name: string) => {
     if (isConfigCustom(providerID)) {
-      await serverSDK.client.auth.remove({ providerID }).catch(() => undefined)
+      await globalSDK.client.auth.remove({ providerID }).catch(() => undefined)
       await disableProvider(providerID, name)
       return
     }
-    await serverSDK.client.auth
+    await globalSDK.client.auth
       .remove({ providerID })
       .then(async () => {
-        await serverSDK.client.global.dispose()
+        await globalSDK.client.global.dispose()
         showToast({
           variant: "success",
           icon: "circle-check",

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

@@ -1,80 +0,0 @@
-import { Component } from "solid-js"
-import { Dialog } from "@opencode-ai/ui/v2/dialog-v2"
-import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
-import { Icon } from "@opencode-ai/ui/icon"
-import { useLanguage } from "@/context/language"
-import { usePlatform } from "@/context/platform"
-import { SettingsGeneralV2 } from "./general"
-import { SettingsKeybinds } from "../settings-keybinds"
-import { SettingsProvidersV2 } from "./providers"
-import { SettingsModelsV2 } from "./models"
-import "./settings-v2.css"
-
-export const DialogSettings: Component = () => {
-  const language = useLanguage()
-  const platform = usePlatform()
-
-  return (
-    <Dialog size="x-large" class="settings-v2-dialog" data-component="settings-v2-dialog">
-      <TabsV2
-        orientation="vertical"
-        variant="settings"
-        defaultValue="general"
-        class="settings-v2"
-        data-component="settings-v2"
-      >
-        <TabsV2.List>
-          <div class="flex flex-col justify-between h-full w-full">
-            <div class="flex flex-col gap-3 w-full">
-              <div class="flex flex-col gap-3">
-                <div class="flex flex-col gap-1.5">
-                  <TabsV2.SectionTitle>{language.t("settings.section.desktop")}</TabsV2.SectionTitle>
-                  <div class="flex flex-col gap-1.5 w-full">
-                    <TabsV2.Trigger value="general">
-                      <Icon name="sliders" />
-                      {language.t("settings.tab.general")}
-                    </TabsV2.Trigger>
-                    <TabsV2.Trigger value="shortcuts">
-                      <Icon name="keyboard" />
-                      {language.t("settings.tab.shortcuts")}
-                    </TabsV2.Trigger>
-                  </div>
-                </div>
-
-                <div class="flex flex-col gap-1.5">
-                  <TabsV2.SectionTitle>{language.t("settings.section.server")}</TabsV2.SectionTitle>
-                  <div class="flex flex-col gap-1.5 w-full">
-                    <TabsV2.Trigger value="providers">
-                      <Icon name="providers" />
-                      {language.t("settings.providers.title")}
-                    </TabsV2.Trigger>
-                    <TabsV2.Trigger value="models">
-                      <Icon name="models" />
-                      {language.t("settings.models.title")}
-                    </TabsV2.Trigger>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="settings-v2-nav-footer">
-              <span>{language.t("app.name.desktop")}</span>
-              <span>v{platform.version}</span>
-            </div>
-          </div>
-        </TabsV2.List>
-        <TabsV2.Content value="general" class="settings-v2-panel">
-          <SettingsGeneralV2 />
-        </TabsV2.Content>
-        <TabsV2.Content value="shortcuts" class="settings-v2-panel">
-          <SettingsKeybinds v2 />
-        </TabsV2.Content>
-        <TabsV2.Content value="providers" class="settings-v2-panel">
-          <SettingsProvidersV2 />
-        </TabsV2.Content>
-        <TabsV2.Content value="models" class="settings-v2-panel">
-          <SettingsModelsV2 />
-        </TabsV2.Content>
-      </TabsV2>
-    </Dialog>
-  )
-}

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

@@ -1,825 +0,0 @@
-import { Component, Show, createMemo, createResource, onMount } from "solid-js"
-import { createStore } from "solid-js/store"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon } from "@opencode-ai/ui/icon"
-import { SelectV2 } from "@opencode-ai/ui/select-v2"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { showToast } from "@/utils/toast"
-import { useParams } from "@solidjs/router"
-import { useLanguage } from "@/context/language"
-import { usePermission } from "@/context/permission"
-import { usePlatform, type DisplayBackend } from "@/context/platform"
-import { useServerSync } from "@/context/server-sync"
-import { useServerSDK } from "@/context/server-sdk"
-import {
-  monoDefault,
-  monoFontFamily,
-  monoInput,
-  sansDefault,
-  sansFontFamily,
-  sansInput,
-  terminalDefault,
-  terminalFontFamily,
-  terminalInput,
-  useSettings,
-} from "@/context/settings"
-import { decode64 } from "@/utils/base64"
-import { playSoundById, SOUND_OPTIONS } from "@/utils/sound"
-import { Link } from "../link"
-import { SettingsListV2 } from "./parts/list"
-import { SettingsRowV2 } from "./parts/row"
-import "./settings-v2.css"
-
-let demoSoundState = {
-  cleanup: undefined as (() => void) | undefined,
-  timeout: undefined as NodeJS.Timeout | undefined,
-  run: 0,
-}
-
-type ThemeOption = {
-  id: string
-  name: string
-}
-
-type ShellOption = {
-  path: string
-  name: string
-  acceptable: boolean
-}
-
-type ShellSelectOption = {
-  id: string
-  value: string
-  label: string
-}
-
-// To prevent audio from overlapping/playing very quickly when navigating the settings menus,
-// delay the playback by 100ms during quick selection changes and pause existing sounds.
-const stopDemoSound = () => {
-  demoSoundState.run += 1
-  if (demoSoundState.cleanup) {
-    demoSoundState.cleanup()
-  }
-  clearTimeout(demoSoundState.timeout)
-  demoSoundState.cleanup = undefined
-}
-
-const playDemoSound = (id: string | undefined) => {
-  stopDemoSound()
-  if (!id) return
-
-  const run = ++demoSoundState.run
-  demoSoundState.timeout = setTimeout(() => {
-    void playSoundById(id).then((cleanup) => {
-      if (demoSoundState.run !== run) {
-        cleanup?.()
-        return
-      }
-      demoSoundState.cleanup = cleanup
-    })
-  }, 100)
-}
-
-export const SettingsGeneralV2: Component = () => {
-  const theme = useTheme()
-  const language = useLanguage()
-  const permission = usePermission()
-  const platform = usePlatform()
-  const dialog = useDialog()
-  const params = useParams()
-  const settings = useSettings()
-
-  const [store, setStore] = createStore({
-    checking: false,
-  })
-
-  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
-  const dir = createMemo(() => decode64(params.dir))
-  const accepting = createMemo(() => {
-    const value = dir()
-    if (!value) return false
-    if (!params.id) return permission.isAutoAcceptingDirectory(value)
-    return permission.isAutoAccepting(params.id, value)
-  })
-
-  const toggleAccept = (checked: boolean) => {
-    const value = dir()
-    if (!value) return
-
-    if (!params.id) {
-      if (permission.isAutoAcceptingDirectory(value) === checked) return
-      permission.toggleAutoAcceptDirectory(value)
-      return
-    }
-
-    if (checked) {
-      permission.enableAutoAccept(params.id, value)
-      return
-    }
-
-    permission.disableAutoAccept(params.id, value)
-  }
-  const desktop = createMemo(() => platform.platform === "desktop")
-
-  const check = () => {
-    if (!platform.checkUpdate) return
-    setStore("checking", true)
-
-    void platform
-      .checkUpdate()
-      .then((result) => {
-        if (!result.updateAvailable) {
-          showToast({
-            variant: "success",
-            icon: "circle-check",
-            title: language.t("settings.updates.toast.latest.title"),
-            description: language.t("settings.updates.toast.latest.description", { version: platform.version ?? "" }),
-          })
-          return
-        }
-
-        const actions = platform.updateAndRestart
-          ? [
-              {
-                label: language.t("toast.update.action.installRestart"),
-                onClick: async () => {
-                  await platform.updateAndRestart!()
-                },
-              },
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
-          : [
-              {
-                label: language.t("toast.update.action.notYet"),
-                onClick: "dismiss" as const,
-              },
-            ]
-
-        showToast({
-          persistent: true,
-          icon: "download",
-          title: language.t("toast.update.title"),
-          description: language.t("toast.update.description", { version: result.version ?? "" }),
-          actions,
-        })
-      })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-      .finally(() => setStore("checking", false))
-  }
-
-  const themeOptions = createMemo<ThemeOption[]>(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
-
-  const globalSync = useServerSync()
-  const globalSdk = useServerSDK()
-
-  const [shells] = createResource(
-    () =>
-      globalSdk.client.pty
-        .shells()
-        .then((res) => res.data ?? [])
-        .catch(() => [] as ShellOption[]),
-    { initialValue: [] as ShellOption[] },
-  )
-
-  const [displayBackend, { refetch: refetchDisplayBackend }] = createResource(
-    () => (linux() && platform.getDisplayBackend ? true : false),
-    () => Promise.resolve(platform.getDisplayBackend?.() ?? null).catch(() => null as DisplayBackend | null),
-    { initialValue: null as DisplayBackend | null },
-  )
-
-  const [pinchZoom, { mutate: setPinchZoom }] = createResource(
-    () => (desktop() && platform.getPinchZoomEnabled ? true : false),
-    () => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
-    { initialValue: false },
-  )
-
-  onMount(() => {
-    void theme.loadThemes()
-  })
-
-  const autoOption = { id: "auto", value: "", label: language.t("settings.general.row.shell.autoDefault") }
-  const currentShell = createMemo(() => globalSync.data.config.shell ?? "")
-
-  const shellOptions = createMemo<ShellSelectOption[]>(() => {
-    const list = shells.latest
-    const current = globalSync.data.config.shell
-
-    const nameCounts = new Map<string, number>()
-    for (const s of list) {
-      nameCounts.set(s.name, (nameCounts.get(s.name) || 0) + 1)
-    }
-
-    const options = [
-      autoOption,
-      ...list.map((s) => {
-        const ambiguousName = (nameCounts.get(s.name) || 0) > 1
-        const text = ambiguousName ? s.path : s.name
-        const label = s.acceptable ? text : `${text} (${language.t("settings.general.row.shell.terminalOnly")})`
-        return {
-          id: s.path,
-          // Prefer name over path - "bash" is much cleaner than the explicit full route even when it may change due to PATH.
-          value: ambiguousName ? s.path : s.name,
-          label,
-        }
-      }),
-    ]
-
-    if (current && !options.some((o) => o.value === current)) {
-      options.push({ id: current, value: current, label: current })
-    }
-
-    return options
-  })
-
-  const onDisplayBackendChange = (checked: boolean) => {
-    const update = platform.setDisplayBackend?.(checked ? "wayland" : "auto")
-    if (!update) return
-    void update.finally(() => {
-      void refetchDisplayBackend()
-    })
-  }
-
-  const onPinchZoomChange = (checked: boolean) => {
-    setPinchZoom(checked)
-    const update = platform.setPinchZoomEnabled?.(checked)
-    if (!update) return
-    void update.catch(() => setPinchZoom(!checked))
-  }
-
-  const colorSchemeOptions = createMemo((): { value: ColorScheme; label: string }[] => [
-    { value: "system", label: language.t("theme.scheme.system") },
-    { value: "light", label: language.t("theme.scheme.light") },
-    { value: "dark", label: language.t("theme.scheme.dark") },
-  ])
-
-  const languageOptions = createMemo(() =>
-    language.locales.map((locale) => ({
-      value: locale,
-      label: language.label(locale),
-    })),
-  )
-
-  const noneSound = { id: "none", label: "sound.option.none" } as const
-  const soundOptions = [noneSound, ...SOUND_OPTIONS]
-  const mono = () => monoInput(settings.appearance.font())
-  const sans = () => sansInput(settings.appearance.uiFont())
-  const terminal = () => terminalInput(settings.appearance.terminalFont())
-
-  const soundSelectProps = (
-    enabled: () => boolean,
-    current: () => string,
-    setEnabled: (value: boolean) => void,
-    set: (id: string) => void,
-  ) => ({
-    options: soundOptions,
-    current: enabled() ? (soundOptions.find((o) => o.id === current()) ?? noneSound) : noneSound,
-    value: (o: (typeof soundOptions)[number]) => o.id,
-    label: (o: (typeof soundOptions)[number]) => language.t(o.label),
-    onHighlight: (option: (typeof soundOptions)[number] | undefined) => {
-      if (!option) return
-      playDemoSound(option.id === "none" ? undefined : option.id)
-    },
-    onSelect: (option: (typeof soundOptions)[number] | undefined) => {
-      if (!option) return
-      if (option.id === "none") {
-        setEnabled(false)
-        stopDemoSound()
-        return
-      }
-      setEnabled(true)
-      set(option.id)
-      playDemoSound(option.id)
-    },
-  })
-
-  const GeneralSection = () => (
-    <div class="settings-v2-section">
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.language.title")}
-          description={language.t("settings.general.row.language.description")}
-        >
-          <SelectV2
-            data-action="settings-language"
-            options={languageOptions()}
-            current={languageOptions().find((o) => o.value === language.locale())}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && language.setLocale(option.value)}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("command.permissions.autoaccept.enable")}
-          description={language.t("toast.permissions.autoaccept.on.description")}
-        >
-          <div data-action="settings-auto-accept-permissions">
-            <Switch checked={accepting()} disabled={!dir()} onChange={toggleAccept} />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.shell.title")}
-          description={language.t("settings.general.row.shell.description")}
-        >
-          <SelectV2
-            data-action="settings-shell"
-            options={shellOptions()}
-            current={shellOptions().find((o) => o.value === currentShell()) ?? autoOption}
-            value={(o) => o.id}
-            label={(o) => o.label}
-            onSelect={(option) => {
-              if (!option) return
-              if (option.value === currentShell()) return
-              globalSync.updateConfig({ shell: option.value })
-            }}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.reasoningSummaries.title")}
-          description={language.t("settings.general.row.reasoningSummaries.description")}
-        >
-          <div data-action="settings-feed-reasoning-summaries">
-            <Switch
-              checked={settings.general.showReasoningSummaries()}
-              onChange={(checked) => settings.general.setShowReasoningSummaries(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.shellToolPartsExpanded.title")}
-          description={language.t("settings.general.row.shellToolPartsExpanded.description")}
-        >
-          <div data-action="settings-feed-shell-tool-parts-expanded">
-            <Switch
-              checked={settings.general.shellToolPartsExpanded()}
-              onChange={(checked) => settings.general.setShellToolPartsExpanded(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.editToolPartsExpanded.title")}
-          description={language.t("settings.general.row.editToolPartsExpanded.description")}
-        >
-          <div data-action="settings-feed-edit-tool-parts-expanded">
-            <Switch
-              checked={settings.general.editToolPartsExpanded()}
-              onChange={(checked) => settings.general.setEditToolPartsExpanded(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showSessionProgressBar.title")}
-          description={language.t("settings.general.row.showSessionProgressBar.description")}
-        >
-          <div data-action="settings-show-session-progress-bar">
-            <Switch
-              checked={settings.general.showSessionProgressBar()}
-              onChange={(checked) => settings.general.setShowSessionProgressBar(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.newLayoutDesigns.title")}
-          description={language.t("settings.general.row.newLayoutDesigns.description")}
-        >
-          <div data-action="settings-new-layout-designs">
-            <Switch
-              checked={settings.general.newLayoutDesigns()}
-              onChange={(checked) => {
-                settings.general.setNewLayoutDesigns(checked)
-                if (checked) return
-                void import("@/components/dialog-settings").then((module) => {
-                  dialog.show(() => <module.DialogSettings />)
-                })
-              }}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
-  const AdvancedSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.advanced")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.showFileTree.title")}
-          description={language.t("settings.general.row.showFileTree.description")}
-        >
-          <div data-action="settings-show-file-tree">
-            <Switch
-              checked={settings.general.showFileTree()}
-              onChange={(checked) => settings.general.setShowFileTree(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showNavigation.title")}
-          description={language.t("settings.general.row.showNavigation.description")}
-        >
-          <div data-action="settings-show-navigation">
-            <Switch
-              checked={settings.general.showNavigation()}
-              onChange={(checked) => settings.general.setShowNavigation(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showSearch.title")}
-          description={language.t("settings.general.row.showSearch.description")}
-        >
-          <div data-action="settings-show-search">
-            <Switch
-              checked={settings.general.showSearch()}
-              onChange={(checked) => settings.general.setShowSearch(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showTerminal.title")}
-          description={language.t("settings.general.row.showTerminal.description")}
-        >
-          <div data-action="settings-show-terminal">
-            <Switch
-              checked={settings.general.showTerminal()}
-              onChange={(checked) => settings.general.setShowTerminal(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showStatus.title")}
-          description={language.t("settings.general.row.showStatus.description")}
-        >
-          <div data-action="settings-show-status">
-            <Switch
-              checked={settings.general.showStatus()}
-              onChange={(checked) => settings.general.setShowStatus(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.showCustomAgents.title")}
-          description={language.t("settings.general.row.showCustomAgents.description")}
-        >
-          <div data-action="settings-show-custom-agents">
-            <Switch
-              checked={settings.general.showCustomAgents()}
-              onChange={(checked) => settings.general.setShowCustomAgents(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
-  const AppearanceSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.appearance")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.row.colorScheme.title")}
-          description={language.t("settings.general.row.colorScheme.description")}
-        >
-          <SelectV2
-            data-action="settings-color-scheme"
-            options={colorSchemeOptions()}
-            current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
-            value={(o) => o.value}
-            label={(o) => o.label}
-            onSelect={(option) => option && theme.setColorScheme(option.value)}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewColorScheme(option.value)
-              return () => theme.cancelPreview()
-            }}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.theme.title")}
-          description={
-            <>
-              {language.t("settings.general.row.theme.description")}{" "}
-              <Link class="settings-v2-link" href="https://opencode.ai/docs/themes/">
-                {language.t("common.learnMore")}
-              </Link>
-            </>
-          }
-        >
-          <SelectV2
-            data-action="settings-theme"
-            options={themeOptions()}
-            current={themeOptions().find((o) => o.id === theme.themeId())}
-            value={(o) => o.id}
-            label={(o) => o.name}
-            onSelect={(option) => {
-              if (!option) return
-              theme.setTheme(option.id)
-            }}
-            onHighlight={(option) => {
-              if (!option) return
-              theme.previewTheme(option.id)
-              return () => theme.cancelPreview()
-            }}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.uiFont.title")}
-          description={language.t("settings.general.row.uiFont.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-ui-font"
-              type="text"
-              appearance="base"
-              value={sans()}
-              onInput={(event) => settings.appearance.setUIFont(event.currentTarget.value)}
-              placeholder={sansDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.uiFont.title")}
-              style={{ "font-family": sansFontFamily(settings.appearance.uiFont()) }}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.font.title")}
-          description={language.t("settings.general.row.font.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-code-font"
-              type="text"
-              appearance="base"
-              value={mono()}
-              onInput={(event) => settings.appearance.setFont(event.currentTarget.value)}
-              placeholder={monoDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.font.title")}
-              style={{ "font-family": monoFontFamily(settings.appearance.font()) }}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.terminalFont.title")}
-          description={language.t("settings.general.row.terminalFont.description")}
-        >
-          <div class="w-full sm:w-[220px]">
-            <TextInputV2
-              data-action="settings-terminal-font"
-              type="text"
-              appearance="base"
-              value={terminal()}
-              onInput={(event) => settings.appearance.setTerminalFont(event.currentTarget.value)}
-              placeholder={terminalDefault}
-              spellcheck={false}
-              autocorrect="off"
-              autocomplete="off"
-              autocapitalize="off"
-              aria-label={language.t("settings.general.row.terminalFont.title")}
-              style={{ "font-family": terminalFontFamily(settings.appearance.terminalFont()) }}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
-  const NotificationsSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.notifications")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.notifications.agent.title")}
-          description={language.t("settings.general.notifications.agent.description")}
-        >
-          <div data-action="settings-notifications-agent">
-            <Switch
-              checked={settings.notifications.agent()}
-              onChange={(checked) => settings.notifications.setAgent(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.notifications.permissions.title")}
-          description={language.t("settings.general.notifications.permissions.description")}
-        >
-          <div data-action="settings-notifications-permissions">
-            <Switch
-              checked={settings.notifications.permissions()}
-              onChange={(checked) => settings.notifications.setPermissions(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.notifications.errors.title")}
-          description={language.t("settings.general.notifications.errors.description")}
-        >
-          <div data-action="settings-notifications-errors">
-            <Switch
-              checked={settings.notifications.errors()}
-              onChange={(checked) => settings.notifications.setErrors(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
-  const SoundsSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.sounds")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.agent.title")}
-          description={language.t("settings.general.sounds.agent.description")}
-        >
-          <SelectV2
-            data-action="settings-sounds-agent"
-            {...soundSelectProps(
-              () => settings.sounds.agentEnabled(),
-              () => settings.sounds.agent(),
-              (value) => settings.sounds.setAgentEnabled(value),
-              (id) => settings.sounds.setAgent(id),
-            )}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.permissions.title")}
-          description={language.t("settings.general.sounds.permissions.description")}
-        >
-          <SelectV2
-            data-action="settings-sounds-permissions"
-            {...soundSelectProps(
-              () => settings.sounds.permissionsEnabled(),
-              () => settings.sounds.permissions(),
-              (value) => settings.sounds.setPermissionsEnabled(value),
-              (id) => settings.sounds.setPermissions(id),
-            )}
-          />
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.sounds.errors.title")}
-          description={language.t("settings.general.sounds.errors.description")}
-        >
-          <SelectV2
-            data-action="settings-sounds-errors"
-            {...soundSelectProps(
-              () => settings.sounds.errorsEnabled(),
-              () => settings.sounds.errors(),
-              (value) => settings.sounds.setErrorsEnabled(value),
-              (id) => settings.sounds.setErrors(id),
-            )}
-          />
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
-  const UpdatesSection = () => (
-    <div class="settings-v2-section">
-      <h3 class="settings-v2-section-title">{language.t("settings.general.section.updates")}</h3>
-
-      <SettingsListV2>
-        <SettingsRowV2
-          title={language.t("settings.updates.row.startup.title")}
-          description={language.t("settings.updates.row.startup.description")}
-        >
-          <div data-action="settings-updates-startup">
-            <Switch
-              checked={settings.updates.startup()}
-              disabled={!platform.checkUpdate}
-              onChange={(checked) => settings.updates.setStartup(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.general.row.releaseNotes.title")}
-          description={language.t("settings.general.row.releaseNotes.description")}
-        >
-          <div data-action="settings-release-notes">
-            <Switch
-              checked={settings.general.releaseNotes()}
-              onChange={(checked) => settings.general.setReleaseNotes(checked)}
-            />
-          </div>
-        </SettingsRowV2>
-
-        <SettingsRowV2
-          title={language.t("settings.updates.row.check.title")}
-          description={language.t("settings.updates.row.check.description")}
-        >
-          <ButtonV2 size="normal" variant="neutral" disabled={store.checking || !platform.checkUpdate} onClick={check}>
-            {store.checking
-              ? language.t("settings.updates.action.checking")
-              : language.t("settings.updates.action.checkNow")}
-          </ButtonV2>
-        </SettingsRowV2>
-      </SettingsListV2>
-    </div>
-  )
-
-  const DisplaySection = () => (
-    <Show when={desktop()}>
-      <div class="settings-v2-section">
-        <h3 class="settings-v2-section-title">{language.t("settings.general.section.display")}</h3>
-
-        <SettingsListV2>
-          <SettingsRowV2
-            title={language.t("settings.general.row.pinchZoom.title")}
-            description={language.t("settings.general.row.pinchZoom.description")}
-          >
-            <div data-action="settings-pinch-zoom">
-              <Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
-            </div>
-          </SettingsRowV2>
-
-          <Show when={linux()}>
-            <SettingsRowV2
-              title={
-                <div class="flex items-center gap-2">
-                  <span>{language.t("settings.general.row.wayland.title")}</span>
-                  <Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
-                    <span class="text-text-weak">
-                      <Icon name="help" size="small" />
-                    </span>
-                  </Tooltip>
-                </div>
-              }
-              description={language.t("settings.general.row.wayland.description")}
-            >
-              <div data-action="settings-wayland">
-                <Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
-              </div>
-            </SettingsRowV2>
-          </Show>
-        </SettingsListV2>
-      </div>
-    </Show>
-  )
-
-  return (
-    <>
-      <div class="settings-v2-tab-header">
-        <h2 class="settings-v2-tab-title">{language.t("settings.tab.general")}</h2>
-      </div>
-
-      <div class="settings-v2-tab-body">
-        <GeneralSection />
-
-        <AppearanceSection />
-
-        <NotificationsSection />
-
-        <SoundsSection />
-
-        <UpdatesSection />
-
-        <DisplaySection />
-
-        <Show when={desktop()}>
-          <AdvancedSection />
-        </Show>
-      </div>
-    </>
-  )
-}

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

@@ -1 +0,0 @@
-export { DialogSettings } from "./dialog-settings-v2"

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

@@ -1,138 +0,0 @@
-import { useFilteredList } from "@opencode-ai/ui/hooks"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { Switch } from "@opencode-ai/ui/v2/switch-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
-import { type Component, For, Show } from "solid-js"
-import { useLanguage } from "@/context/language"
-import { useModels } from "@/context/models"
-import { popularProviders } from "@/hooks/use-providers"
-import { SettingsListV2 } from "./parts/list"
-import { SettingsRowV2 } from "./parts/row"
-import "./settings-v2.css"
-
-type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
-
-const PROVIDER_ICON_SIZE = 16
-
-export const SettingsModelsV2: Component = () => {
-  const language = useLanguage()
-  const models = useModels()
-
-  const list = useFilteredList<ModelItem>({
-    items: (_filter) => models.list(),
-    key: (x) => `${x.provider.id}:${x.id}`,
-    filterKeys: ["provider.name", "name", "id"],
-    sortBy: (a, b) => a.name.localeCompare(b.name),
-    groupBy: (x) => x.provider.id,
-    sortGroupsBy: (a, b) => {
-      const aIndex = popularProviders.indexOf(a.category)
-      const bIndex = popularProviders.indexOf(b.category)
-      const aPopular = aIndex >= 0
-      const bPopular = bIndex >= 0
-
-      if (aPopular && !bPopular) return -1
-      if (!aPopular && bPopular) return 1
-      if (aPopular && bPopular) return aIndex - bIndex
-
-      const aName = a.items[0].provider.name
-      const bName = b.items[0].provider.name
-      return aName.localeCompare(bName)
-    },
-  })
-
-  return (
-    <>
-      <div class="settings-v2-tab-header settings-v2-tab-header--stacked">
-        <h2 class="settings-v2-tab-title">{language.t("settings.models.title")}</h2>
-        <div class="settings-v2-tab-search">
-          <TextInputV2
-            type="search"
-            appearance="base"
-            value={list.filter()}
-            onInput={(event) => list.onInput(event.currentTarget.value)}
-            placeholder={language.t("dialog.model.search.placeholder")}
-            spellcheck={false}
-            autocorrect="off"
-            autocomplete="off"
-            autocapitalize="off"
-            aria-label={language.t("dialog.model.search.placeholder")}
-          />
-          <Show when={list.filter()}>
-            <IconButtonV2
-              type="button"
-              variant="ghost-muted"
-              size="small"
-              class="settings-v2-tab-search-clear"
-              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
-              onClick={() => list.clear()}
-            />
-          </Show>
-        </div>
-      </div>
-
-      <div class="settings-v2-tab-body settings-v2-models">
-        <Show
-          when={!list.grouped.loading}
-          fallback={
-            <div class="settings-v2-models-status">
-              {language.t("common.loading")}
-              {language.t("common.loading.ellipsis")}
-            </div>
-          }
-        >
-          <Show
-            when={list.flat().length > 0}
-            fallback={
-              <div class="settings-v2-models-status">
-                <span>{language.t("dialog.model.empty")}</span>
-                <Show when={list.filter()}>
-                  <span class="settings-v2-models-status-filter">&quot;{list.filter()}&quot;</span>
-                </Show>
-              </div>
-            }
-          >
-            <For each={list.grouped.latest}>
-              {(group) => (
-                <div class="settings-v2-section" data-component="settings-models-provider">
-                  <div class="settings-v2-models-group-header">
-                    <ProviderIcon
-                      id={group.category}
-                      width={PROVIDER_ICON_SIZE}
-                      height={PROVIDER_ICON_SIZE}
-                      class="settings-v2-models-provider-icon shrink-0"
-                    />
-                    <h3 class="settings-v2-section-title">{group.items[0].provider.name}</h3>
-                  </div>
-                  <SettingsListV2>
-                    <For each={group.items}>
-                      {(item) => {
-                        const key = { providerID: item.provider.id, modelID: item.id }
-                        return (
-                          <SettingsRowV2 title={item.name} description="">
-                            <div>
-                              <Switch
-                                checked={models.visible(key)}
-                                onChange={(checked) => {
-                                  models.setVisibility(key, checked)
-                                }}
-                                hideLabel
-                              >
-                                {item.name}
-                              </Switch>
-                            </div>
-                          </SettingsRowV2>
-                        )
-                      }}
-                    </For>
-                  </SettingsListV2>
-                </div>
-              )}
-            </For>
-          </Show>
-        </Show>
-      </div>
-    </>
-  )
-}

packages/app/src/components/settings-v2/parts/list.tsx

@@ -1,6 +0,0 @@
-import type { Component, JSX } from "solid-js"
-import "../settings-v2.css"
-
-export const SettingsListV2: Component<{ children: JSX.Element }> = (props) => {
-  return <div data-component="settings-v2-list">{props.children}</div>
-}

packages/app/src/components/settings-v2/parts/row.tsx

@@ -1,20 +0,0 @@
-import type { Component, JSX } from "solid-js"
-import "../settings-v2.css"
-
-export interface SettingsRowV2Props {
-  title: string | JSX.Element
-  description: string | JSX.Element
-  children: JSX.Element
-}
-
-export const SettingsRowV2: Component<SettingsRowV2Props> = (props) => {
-  return (
-    <div data-component="settings-v2-row">
-      <div data-slot="settings-v2-row-copy">
-        <div data-slot="settings-v2-row-title">{props.title}</div>
-        <div data-slot="settings-v2-row-description">{props.description}</div>
-      </div>
-      <div data-slot="settings-v2-row-control">{props.children}</div>
-    </div>
-  )
-}

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

@@ -1,263 +0,0 @@
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Tag } from "@opencode-ai/ui/v2/badge-v2"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
-import { showToast } from "@/utils/toast"
-import { popularProviders, useProviders } from "@/hooks/use-providers"
-import { createMemo, type Component, For, Show } from "solid-js"
-import { useLanguage } from "@/context/language"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "@/context/server-sync"
-import { DialogConnectProvider } from "../dialog-connect-provider"
-import { DialogSelectProvider } from "../dialog-select-provider"
-import { DialogCustomProvider } from "../dialog-custom-provider"
-import { SettingsListV2 } from "./parts/list"
-import "./settings-v2.css"
-
-type ProviderSource = "env" | "api" | "config" | "custom"
-type ProviderItem = ReturnType<ReturnType<typeof useProviders>["connected"]>[number]
-
-const PROVIDER_NOTES = [
-  { match: (id: string) => id === "opencode", key: "dialog.provider.opencode.note" },
-  { match: (id: string) => id === "opencode-go", key: "dialog.provider.opencodeGo.tagline" },
-  { match: (id: string) => id === "anthropic", key: "dialog.provider.anthropic.note" },
-  { match: (id: string) => id.startsWith("github-copilot"), key: "dialog.provider.copilot.note" },
-  { match: (id: string) => id === "openai", key: "dialog.provider.openai.note" },
-  { match: (id: string) => id === "google", key: "dialog.provider.google.note" },
-  { match: (id: string) => id === "openrouter", key: "dialog.provider.openrouter.note" },
-  { match: (id: string) => id === "vercel", key: "dialog.provider.vercel.note" },
-] as const
-
-const PROVIDER_ICON_SIZE = 16
-
-export const SettingsProvidersV2: Component = () => {
-  const dialog = useDialog()
-  const language = useLanguage()
-  const globalSDK = useServerSDK()
-  const globalSync = useServerSync()
-  const providers = useProviders()
-
-  const connected = createMemo(() => {
-    return providers
-      .connected()
-      .filter((p) => p.id !== "opencode" || Object.values(p.models).find((m) => m.cost?.input))
-  })
-
-  const popular = createMemo(() => {
-    const connectedIDs = new Set(connected().map((p) => p.id))
-    const items = providers
-      .popular()
-      .filter((p) => !connectedIDs.has(p.id))
-      .slice()
-    items.sort((a, b) => popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id))
-    return items
-  })
-
-  const source = (item: ProviderItem): ProviderSource | undefined => {
-    if (!("source" in item)) return
-    const value = item.source
-    if (value === "env" || value === "api" || value === "config" || value === "custom") return value
-    return
-  }
-
-  const type = (item: ProviderItem) => {
-    const current = source(item)
-    if (current === "env") return language.t("settings.providers.tag.environment")
-    if (current === "api") return language.t("provider.connect.method.apiKey")
-    if (current === "config") {
-      if (isConfigCustom(item.id)) return language.t("settings.providers.tag.custom")
-      return language.t("settings.providers.tag.config")
-    }
-    if (current === "custom") return language.t("settings.providers.tag.custom")
-    return language.t("settings.providers.tag.other")
-  }
-
-  const canDisconnect = (item: ProviderItem) => source(item) !== "env"
-
-  const note = (id: string) => PROVIDER_NOTES.find((item) => item.match(id))?.key
-
-  const isConfigCustom = (providerID: string) => {
-    const provider = globalSync.data.config.provider?.[providerID]
-    if (!provider) return false
-    if (provider.npm !== "@ai-sdk/openai-compatible") return false
-    if (!provider.models || Object.keys(provider.models).length === 0) return false
-    return true
-  }
-
-  const disableProvider = async (providerID: string, name: string) => {
-    const before = globalSync.data.config.disabled_providers ?? []
-    const next = before.includes(providerID) ? before : [...before, providerID]
-    globalSync.set("config", "disabled_providers", next)
-
-    await globalSync
-      .updateConfig({ disabled_providers: next })
-      .then(() => {
-        showToast({
-          variant: "success",
-          icon: "circle-check",
-          title: language.t("provider.disconnect.toast.disconnected.title", { provider: name }),
-          description: language.t("provider.disconnect.toast.disconnected.description", { provider: name }),
-        })
-      })
-      .catch((err: unknown) => {
-        globalSync.set("config", "disabled_providers", before)
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-  }
-
-  const disconnect = async (providerID: string, name: string) => {
-    if (isConfigCustom(providerID)) {
-      await globalSDK.client.auth.remove({ providerID }).catch(() => undefined)
-      await disableProvider(providerID, name)
-      return
-    }
-    await globalSDK.client.auth
-      .remove({ providerID })
-      .then(async () => {
-        await globalSDK.client.global.dispose()
-        showToast({
-          variant: "success",
-          icon: "circle-check",
-          title: language.t("provider.disconnect.toast.disconnected.title", { provider: name }),
-          description: language.t("provider.disconnect.toast.disconnected.description", { provider: name }),
-        })
-      })
-      .catch((err: unknown) => {
-        const message = err instanceof Error ? err.message : String(err)
-        showToast({ title: language.t("common.requestFailed"), description: message })
-      })
-  }
-
-  return (
-    <>
-      <div class="settings-v2-tab-header">
-        <h2 class="settings-v2-tab-title">{language.t("settings.providers.title")}</h2>
-      </div>
-
-      <div class="settings-v2-tab-body settings-v2-providers">
-        <div class="settings-v2-section" data-component="connected-providers-section">
-          <h3 class="settings-v2-section-title">{language.t("settings.providers.section.connected")}</h3>
-          <SettingsListV2>
-            <Show
-              when={connected().length > 0}
-              fallback={
-                <div class="settings-v2-provider-empty">{language.t("settings.providers.connected.empty")}</div>
-              }
-            >
-              <For each={connected()}>
-                {(item) => (
-                  <div class="settings-v2-provider-row group">
-                    <div class="settings-v2-provider-lead">
-                      <ProviderIcon
-                        id={item.id}
-                        width={PROVIDER_ICON_SIZE}
-                        height={PROVIDER_ICON_SIZE}
-                        class="settings-v2-provider-icon shrink-0"
-                      />
-                      <div class="settings-v2-provider-main">
-                        <span class="settings-v2-provider-name truncate">{item.name}</span>
-                        <Tag>{type(item)}</Tag>
-                      </div>
-                    </div>
-                    <Show
-                      when={canDisconnect(item)}
-                      fallback={
-                        <span class="settings-v2-provider-env-hint">
-                          {language.t("settings.providers.connected.environmentDescription")}
-                        </span>
-                      }
-                    >
-                      <ButtonV2 size="normal" variant="ghost-muted" onClick={() => void disconnect(item.id, item.name)}>
-                        {language.t("common.disconnect")}
-                      </ButtonV2>
-                    </Show>
-                  </div>
-                )}
-              </For>
-            </Show>
-          </SettingsListV2>
-        </div>
-
-        <div class="settings-v2-section">
-          <h3 class="settings-v2-section-title">{language.t("settings.providers.section.popular")}</h3>
-          <SettingsListV2>
-            <For each={popular()}>
-              {(item) => (
-                <div class="settings-v2-provider-row">
-                  <div class="settings-v2-provider-lead">
-                    <ProviderIcon
-                      id={item.id}
-                      width={PROVIDER_ICON_SIZE}
-                      height={PROVIDER_ICON_SIZE}
-                      class="settings-v2-provider-icon shrink-0"
-                    />
-                    <div class="settings-v2-provider-copy">
-                      <div class="settings-v2-provider-main">
-                        <span class="settings-v2-provider-name">{item.name}</span>
-                        <Show when={item.id === "opencode" || item.id === "opencode-go"}>
-                          <Tag>{language.t("dialog.provider.tag.recommended")}</Tag>
-                        </Show>
-                      </div>
-                      <Show when={note(item.id)}>
-                        {(key) => <p class="settings-v2-provider-description">{language.t(key())}</p>}
-                      </Show>
-                    </div>
-                  </div>
-                  <ButtonV2
-                    size="normal"
-                    variant="neutral"
-                    icon="plus"
-                    onClick={() => {
-                      dialog.show(() => <DialogConnectProvider provider={item.id} />)
-                    }}
-                  >
-                    {language.t("common.connect")}
-                  </ButtonV2>
-                </div>
-              )}
-            </For>
-
-            <div class="settings-v2-provider-row" data-component="custom-provider-section">
-              <div class="settings-v2-provider-lead">
-                <ProviderIcon
-                  id="synthetic"
-                  width={PROVIDER_ICON_SIZE}
-                  height={PROVIDER_ICON_SIZE}
-                  class="settings-v2-provider-icon shrink-0"
-                />
-                <div class="settings-v2-provider-copy">
-                  <div class="settings-v2-provider-main">
-                    <span class="settings-v2-provider-name">{language.t("provider.custom.title")}</span>
-                    <Tag>{language.t("settings.providers.tag.custom")}</Tag>
-                  </div>
-                  <p class="settings-v2-provider-description">{language.t("settings.providers.custom.description")}</p>
-                </div>
-              </div>
-              <ButtonV2
-                size="normal"
-                variant="neutral"
-                icon="plus"
-                onClick={() => {
-                  dialog.show(() => <DialogCustomProvider back="close" />)
-                }}
-              >
-                {language.t("common.connect")}
-              </ButtonV2>
-            </div>
-          </SettingsListV2>
-
-          <button
-            type="button"
-            class="settings-v2-providers-view-all"
-            onClick={() => {
-              dialog.show(() => <DialogSelectProvider />)
-            }}
-          >
-            {language.t("dialog.provider.viewAll")}
-          </button>
-        </div>
-      </div>
-    </>
-  )
-}

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

@@ -1,515 +0,0 @@
-@import "@opencode-ai/ui/v2/text-input-v2.css";
-@import "@opencode-ai/ui/v2/button-v2.css";
-
-[data-component="settings-v2"] {
-  height: 100%;
-}
-
-[data-component="settings-v2-dialog"] [data-slot="dialog-body"] {
-  padding: 0;
-  overflow: hidden;
-}
-
-.settings-v2-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-  scrollbar-width: none;
-}
-
-.settings-v2-panel::-webkit-scrollbar {
-  display: none;
-}
-
-.settings-v2-tab-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  padding: 40px 40px 32px;
-  background: linear-gradient(to bottom, var(--v2-background-bg-base) calc(100% - 24px), transparent);
-}
-
-.settings-v2-tab-title {
-  font-size: 15px;
-  font-weight: 640;
-  line-height: 1;
-  color: var(--v2-text-text-base);
-}
-
-.settings-v2-tab-body {
-  display: flex;
-  flex-direction: column;
-  gap: 36px;
-  width: 100%;
-  padding: 0 40px 40px;
-}
-
-[data-slot="settings-v2-row-description"] a.settings-v2-link {
-  color: var(--v2-text-text-accent);
-  cursor: pointer;
-  text-decoration: none;
-}
-
-[data-slot="settings-v2-row-description"] a.settings-v2-link:hover {
-  color: var(--v2-text-text-accent-hover);
-}
-
-.settings-v2-section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.settings-v2-section-title {
-  padding-bottom: 8px;
-  font-size: 15px;
-  font-weight: 640;
-  line-height: 1;
-  color: var(--v2-text-text-base);
-}
-
-.settings-v2-section-title + [data-component="settings-v2-list"] {
-  margin-top: -4px;
-  margin-bottom: 0;
-}
-
-[data-component="settings-v2-list"] {
-  border-radius: 8px;
-  background-color: var(--v2-background-bg-layer-01);
-  padding-inline: 20px;
-  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
-}
-
-[data-slot="dialog-container"]:has(.settings-v2-dialog) {
-  box-shadow: var(--v2-elevation-overlay);
-}
-
-[data-component="settings-v2-row"] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 16px;
-  padding-block: 20px;
-  border-bottom: 0.5px solid var(--v2-border-border-base);
-}
-
-[data-component="settings-v2-row"]:last-child {
-  border-bottom: none;
-}
-
-@media (min-width: 640px) {
-  [data-component="settings-v2-row"] {
-    flex-wrap: nowrap;
-  }
-}
-
-[data-slot="settings-v2-row-copy"] {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  flex-direction: column;
-  gap: 8px;
-}
-
-[data-slot="settings-v2-row-title"] {
-  font-style: normal;
-  font-size: 13px;
-  font-weight: 530;
-  line-height: 1;
-  letter-spacing: -0.04px;
-  color: var(--v2-text-text-base);
-  font-variation-settings: "slnt" 0;
-}
-
-[data-slot="settings-v2-row-description"] {
-  font-size: 11px;
-  font-weight: 440;
-  line-height: 1;
-  color: var(--v2-text-text-muted);
-}
-
-[data-slot="settings-v2-row-control"] {
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-}
-
-[data-slot="settings-v2-row-control"] > div:has([data-component="switch"]),
-[data-slot="settings-v2-row-control"] > [data-component="switch"] {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px;
-}
-
-@media (min-width: 640px) {
-  [data-slot="settings-v2-row-control"] {
-    width: auto;
-    flex-shrink: 0;
-  }
-}
-
-[data-slot="settings-v2-row-control"] [data-component="text-input-v2"] {
-  width: 100%;
-}
-
-[data-component="settings-v2-dialog"] [data-component="select"][data-trigger-style="settings-v2"] {
-  width: fit-content;
-  max-width: 100%;
-}
-
-[data-component="settings-v2-dialog"]
-  [data-component="select"][data-trigger-style="settings-v2"]
-  [data-component="button-v2"] {
-  width: fit-content;
-  max-width: 100%;
-}
-
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
-  background-color: var(--v2-background-bg-layer-01);
-}
-
-.settings-v2-nav-footer {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 4px 0 4px 4px;
-}
-
-.settings-v2-nav-footer > span {
-  font-size: 11px;
-  font-weight: 440;
-  line-height: 1;
-  color: var(--v2-text-text-faint);
-}
-
-.settings-v2-legacy-panel {
-  height: 100%;
-  overflow: hidden;
-}
-
-.settings-v2-legacy-panel [data-component="dialog"] {
-  display: contents;
-}
-
-.settings-v2-provider-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding-block: 20px;
-  border-bottom: 0.5px solid var(--v2-border-border-base);
-}
-
-.settings-v2-provider-row:last-child {
-  border-bottom: none;
-}
-
-@media (min-width: 640px) {
-  .settings-v2-provider-row {
-    flex-wrap: nowrap;
-  }
-}
-
-.settings-v2-providers [data-component="provider-icon"] {
-  color: var(--v2-icon-icon-base);
-}
-
-.settings-v2-provider-lead {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-.settings-v2-provider-lead:not(:has(.settings-v2-provider-copy)) {
-  align-items: center;
-}
-
-.settings-v2-provider-copy {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.settings-v2-provider-main {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.settings-v2-provider-name {
-  font-size: 13px;
-  font-weight: 530;
-  line-height: 16px;
-  color: var(--v2-text-text-base);
-}
-
-.settings-v2-provider-description {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 1;
-  color: var(--v2-text-text-muted);
-}
-
-.settings-v2-provider-empty {
-  padding-block: 20px;
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 1;
-  color: var(--v2-text-text-muted);
-}
-
-.settings-v2-provider-env-hint {
-  padding-right: 12px;
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 1;
-  color: var(--v2-text-text-muted);
-  opacity: 0;
-  transition: opacity 200ms ease;
-  cursor: default;
-}
-
-.group:hover .settings-v2-provider-env-hint {
-  opacity: 1;
-}
-
-.settings-v2-providers-view-all {
-  margin-top: 20px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 530;
-  line-height: 1;
-  color: var(--v2-text-text-accent);
-  cursor: pointer;
-  text-align: left;
-}
-
-.settings-v2-providers-view-all:hover {
-  color: var(--v2-text-text-accent-hover);
-}
-
-.settings-v2-tab-body.settings-v2-providers {
-  gap: 32px;
-}
-
-.settings-v2-tab-header:has(+ .settings-v2-tab-body.settings-v2-providers) {
-  padding-bottom: 32px;
-}
-
-.settings-v2-providers .settings-v2-section-title {
-  padding-bottom: 0;
-  font-size: 13px;
-  font-weight: 530;
-  line-height: 1;
-}
-
-.settings-v2-providers .settings-v2-section-title + [data-component="settings-v2-list"] {
-  margin-top: 16px;
-}
-
-.settings-v2-tab-header.settings-v2-tab-header--stacked {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  padding-bottom: 32px;
-}
-
-.settings-v2-tab-header--stacked > .settings-v2-tab-header-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.settings-v2-tab-search {
-  position: relative;
-  width: 100%;
-}
-
-.settings-v2-tab-search [data-component="text-input-v2"] {
-  width: 100%;
-}
-
-.settings-v2-tab-search [data-slot="text-input-v2-input"] {
-  padding-right: 28px;
-}
-
-.settings-v2-tab-search-clear {
-  position: absolute;
-  top: 50%;
-  right: 6px;
-  z-index: 1;
-  transform: translateY(-50%);
-}
-
-.settings-v2-tab-body.settings-v2-models {
-  gap: 24px;
-}
-
-.settings-v2-models-group-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-bottom: 8px;
-}
-
-.settings-v2-models .settings-v2-section-title {
-  padding-bottom: 0;
-  font-size: 13px;
-  font-weight: 530;
-  line-height: 16px;
-}
-
-.settings-v2-models [data-component="provider-icon"] {
-  color: var(--v2-icon-icon-base);
-}
-
-.settings-v2-models .settings-v2-section-title + [data-component="settings-v2-list"] {
-  margin-top: 0;
-}
-
-.settings-v2-models [data-slot="settings-v2-row-description"]:empty {
-  display: none;
-}
-
-.settings-v2-models [data-slot="settings-v2-row-copy"] {
-  gap: 0;
-}
-
-.settings-v2-models [data-slot="settings-v2-row-title"] {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.settings-v2-models-status {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding-block: 48px;
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 1;
-  color: var(--v2-text-text-muted);
-  text-align: center;
-}
-
-.settings-v2-models-status-filter {
-  color: var(--v2-text-text-base);
-}
-
-.settings-v2-shortcuts .settings-v2-section {
-  gap: 16px;
-}
-
-.settings-v2-shortcuts .settings-v2-section-title {
-  padding-bottom: 0;
-  font-size: 13px;
-  font-weight: 530;
-  line-height: 1;
-}
-
-.settings-v2-shortcuts [data-component="settings-v2-list"] {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 20px;
-  border-radius: 6px;
-}
-
-.settings-v2-shortcuts [data-component="settings-v2-list"] > div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding-top: 0;
-  padding-bottom: 0;
-  border-bottom: none;
-}
-
-.settings-v2-shortcuts [data-component="settings-v2-list"] > div:not(:last-child) {
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-  border-bottom: 0.5px solid var(--v2-border-border-base);
-}
-
-.settings-v2-shortcuts [data-component="settings-v2-list"] > div > span {
-  font-weight: 440;
-  font-size: 13px;
-  line-height: 1;
-  letter-spacing: -0.04px;
-  color: var(--v2-text-text-base);
-  font-variation-settings: "slnt" 0;
-}
-
-.settings-v2-keybind-button {
-  box-sizing: border-box;
-  flex-shrink: 0;
-  padding: 6px 8px;
-  margin: -6px -8px;
-  border: 0;
-  border-radius: 2px;
-  background: transparent;
-  cursor: pointer;
-  font-style: normal;
-  font-weight: 530;
-  font-size: 11px;
-  line-height: 1;
-  letter-spacing: 0.05px;
-  font-variant-numeric: tabular-nums;
-  font-feature-settings:
-    "tnum" on,
-    "lnum" on;
-  font-variation-settings: "slnt" 0;
-  color: var(--v2-text-text-faint);
-}
-
-.settings-v2-keybind-button:hover {
-  background-color: var(--v2-background-bg-layer-02);
-}
-
-.settings-v2-keybind-button:focus-visible {
-  outline: 2px solid var(--v2-border-border-focus);
-  outline-offset: 2px;
-}
-
-.settings-v2-keybind-button--active {
-  color: var(--v2-text-text-faint);
-  border-radius: 2px;
-  background-color: var(--v2-background-bg-layer-02);
-}
-
-.settings-v2-shortcuts-status {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding-block: 48px;
-  font-size: 13px;
-  font-weight: 440;
-  line-height: 1;
-  color: var(--v2-text-text-muted);
-  text-align: center;
-}
-
-.settings-v2-shortcuts-status-filter {
-  color: var(--v2-text-text-base);
-}

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

@@ -4,20 +4,19 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { Switch } from "@opencode-ai/ui/switch"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { useMutation, useQueryClient } from "@tanstack/solid-query"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { useNavigate } from "@solidjs/router"
 import { type Accessor, createEffect, createMemo, For, type JSXElement, onCleanup, Show } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, reconcile } from "solid-js/store"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
 import { useSDK } from "@/context/sdk"
 import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
-import { type ServerHealth } from "@/utils/server-health"
-import { useQueryOptions } from "@/context/server-sync"
+import { useCheckServerHealth, type ServerHealth } from "@/utils/server-health"
+import { useQueryOptions } from "@/context/global-sync"
 import { pathKey } from "@/utils/path-key"
-import { useServers } from "@/context/servers"
 
 const pollMs = 10_000
 
@@ -55,6 +54,40 @@ const listServersByHealth = (
   })
 }
 
+const useServerHealth = (servers: Accessor<ServerConnection.Any[]>, enabled: Accessor<boolean>) => {
+  const checkServerHealth = useCheckServerHealth()
+  const [status, setStatus] = createStore({} as Record<ServerConnection.Key, ServerHealth | undefined>)
+
+  createEffect(() => {
+    if (!enabled()) {
+      setStatus(reconcile({}))
+      return
+    }
+    const list = servers()
+    let dead = false
+
+    const refresh = async () => {
+      const results: Record<string, ServerHealth> = {}
+      await Promise.all(
+        list.map(async (conn) => {
+          results[ServerConnection.key(conn)] = await checkServerHealth(conn.http)
+        }),
+      )
+      if (dead) return
+      setStatus(reconcile(results))
+    }
+
+    void refresh()
+    const id = setInterval(() => void refresh(), pollMs)
+    onCleanup(() => {
+      dead = true
+      clearInterval(id)
+    })
+  })
+
+  return status
+}
+
 const useDefaultServerKey = (
   get: (() => string | Promise<string | null | undefined> | null | undefined) | undefined,
 ) => {
@@ -133,162 +166,8 @@ const useMcpToggleMutation = () => {
   }))
 }
 
-type ServerStatusState = {
-  servers: () => ServerStatusItem[]
-  defaultKey: () => ServerConnection.Key | undefined
-  ariaLabel: string
-  serversLabel: string
-  defaultLabel: string
-  manageLabel: string
-  onManage: () => void
-}
-
-type ServerStatusItem = {
-  key: ServerConnection.Key
-  conn: ServerConnection.Any
-  health?: ServerHealth
-  blocked: boolean
-  active: boolean
-  onSelect: () => void
-}
-
-export function StatusPopoverServerBody() {
-  const servers = useServers()
-  const server = useServer()
-  const platform = usePlatform()
-  const dialog = useDialog()
-  const language = useLanguage()
-  const navigate = useNavigate()
-
-  let dialogRun = 0
-  let dialogDead = false
-  onCleanup(() => {
-    dialogDead = true
-    dialogRun += 1
-  })
-
-  const sortedServers = createMemo(() => listServersByHealth(servers.list(), server.key, servers.health))
-  const defaultServer = useDefaultServerKey(platform.getDefaultServer)
-  const serverItems = createMemo(() =>
-    sortedServers().map((conn) => {
-      const key = ServerConnection.key(conn)
-      return {
-        key,
-        conn,
-        health: servers.health[key],
-        blocked: servers.health[key]?.healthy === false,
-        active: !!server.current && key === ServerConnection.key(server.current),
-        onSelect: () => {
-          navigate("/")
-          queueMicrotask(() => server.setActive(key))
-        },
-      }
-    }),
-  )
-
-  return (
-    <ServerStatusPopoverView
-      state={{
-        servers: serverItems,
-        defaultKey: defaultServer.key,
-        ariaLabel: language.t("status.popover.ariaLabel"),
-        serversLabel: language.t("status.popover.tab.servers"),
-        defaultLabel: language.t("common.default"),
-        manageLabel: language.t("status.popover.action.manageServers"),
-        onManage: () => {
-          const run = ++dialogRun
-          void import("./dialog-select-server").then((x) => {
-            if (dialogDead || dialogRun !== run) return
-            dialog.show(() => <x.DialogSelectServer />, defaultServer.refresh)
-          })
-        },
-      }}
-    />
-  )
-}
-
-function ServerStatusPopoverView(props: { state: ServerStatusState }) {
-  return (
-    <div class="flex items-center gap-1 w-[360px] rounded-xl shadow-[var(--shadow-lg-border-base)]">
-      <Tabs
-        aria-label={props.state.ariaLabel}
-        class="tabs bg-background-strong rounded-xl overflow-hidden"
-        data-component="tabs"
-        data-active="servers"
-        defaultValue="servers"
-        variant="alt"
-      >
-        <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
-          <Tabs.Trigger value="servers" data-slot="tab" class="text-12-regular">
-            {props.state.servers().length > 0 ? `${props.state.servers().length} ` : ""}
-            {props.state.serversLabel}
-          </Tabs.Trigger>
-        </Tabs.List>
-        <Tabs.Content value="servers">
-          <ServerStatusList state={props.state} />
-        </Tabs.Content>
-      </Tabs>
-    </div>
-  )
-}
-
-function ServerStatusList(props: { state: ServerStatusState }) {
-  return (
-    <div class="flex flex-col px-2 pb-2">
-      <div class="flex flex-col p-3 bg-background-base rounded-sm min-h-14">
-        <For each={props.state.servers()}>
-          {(item) => {
-            return (
-              <button
-                type="button"
-                class="flex items-center gap-2 w-full h-8 pl-3 pr-1.5 py-1.5 rounded-md transition-colors text-left"
-                classList={{
-                  "hover:bg-surface-raised-base-hover": !item.blocked,
-                  "cursor-not-allowed": item.blocked,
-                }}
-                aria-disabled={item.blocked}
-                onClick={() => {
-                  if (item.blocked) return
-                  item.onSelect()
-                }}
-              >
-                <ServerHealthIndicator health={item.health} />
-                <ServerRow
-                  conn={item.conn}
-                  dimmed={item.blocked}
-                  status={item.health}
-                  class="flex items-center gap-2 w-full min-w-0"
-                  nameClass="text-14-regular text-text-base truncate"
-                  versionClass="text-12-regular text-text-weak truncate"
-                  badge={
-                    <Show when={item.key === props.state.defaultKey()}>
-                      <span class="text-11-regular text-text-base bg-surface-base px-1.5 py-0.5 rounded-md">
-                        {props.state.defaultLabel}
-                      </span>
-                    </Show>
-                  }
-                >
-                  <div class="flex-1" />
-                  <Show when={item.active}>
-                    <Icon name="check" size="small" class="text-icon-weak shrink-0" />
-                  </Show>
-                </ServerRow>
-              </button>
-            )
-          }}
-        </For>
-
-        <Button variant="secondary" class="mt-3 self-start h-8 px-3 py-1.5" onClick={props.state.onManage}>
-          {props.state.manageLabel}
-        </Button>
-      </div>
-    </div>
-  )
-}
-
 export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
   const sync = useSync()
-  const servers = useServers()
   const server = useServer()
   const platform = usePlatform()
   const dialog = useDialog()
@@ -313,7 +192,15 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
     dialogDead = true
     dialogRun += 1
   })
-  const sortedServers = createMemo(() => listServersByHealth(servers.list(), server.key, servers.health))
+  const servers = createMemo(() => {
+    const current = server.current
+    const list = server.list
+    if (!current) return list
+    if (list.every((item) => ServerConnection.key(item) !== ServerConnection.key(current))) return [current, ...list]
+    return [current, ...list.filter((item) => ServerConnection.key(item) !== ServerConnection.key(current))]
+  })
+  const health = useServerHealth(servers, props.shown)
+  const sortedServers = createMemo(() => listServersByHealth(servers(), server.key, health))
   const toggleMcp = useMcpToggleMutation()
   const defaultServer = useDefaultServerKey(platform.getDefaultServer)
   const mcpNames = createMemo(() => Object.keys(sync.data.mcp ?? {}).sort((a, b) => a.localeCompare(b)))
@@ -339,7 +226,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
       >
         <Tabs.List data-slot="tablist" class="bg-transparent border-b-0 px-4 pt-2 pb-0 gap-4 h-10">
           <Tabs.Trigger value="servers" data-slot="tab" class="text-12-regular">
-            {servers.list().length > 0 ? `${servers.list().length} ` : ""}
+            {sortedServers().length > 0 ? `${sortedServers().length} ` : ""}
             {language.t("status.popover.tab.servers")}
           </Tabs.Trigger>
           <Tabs.Trigger value="mcp" data-slot="tab" class="text-12-regular">
@@ -362,7 +249,7 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
               <For each={sortedServers()}>
                 {(s) => {
                   const key = ServerConnection.key(s)
-                  const blocked = () => servers.health[key]?.healthy === false
+                  const blocked = () => health[key]?.healthy === false
                   return (
                     <button
                       type="button"
@@ -378,11 +265,11 @@ export function StatusPopoverBody(props: { shown: Accessor<boolean> }) {
                         queueMicrotask(() => server.setActive(key))
                       }}
                     >
-                      <ServerHealthIndicator health={servers.health[key]} />
+                      <ServerHealthIndicator health={health[key]} />
                       <ServerRow
                         conn={s}
                         dimmed={blocked()}
-                        status={servers.health[key]}
+                        status={health[key]}
                         class="flex items-center gap-2 w-full min-w-0"
                         nameClass="text-14-regular text-text-base truncate"
                         versionClass="text-12-regular text-text-weak truncate"

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

@@ -1,24 +1,19 @@
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { Popover } from "@opencode-ai/ui/popover"
-import { Suspense, createMemo, createSignal, lazy, Show, type JSX } from "solid-js"
+import { Suspense, createMemo, createSignal, lazy, Show } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { useServer } from "@/context/server"
 import { useSync } from "@/context/sync"
-import { useServers } from "@/context/servers"
 
 const Body = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverBody })))
-const ServerBody = lazy(() => import("./status-popover-body").then((x) => ({ default: x.StatusPopoverServerBody })))
 
 export function StatusPopover() {
   const language = useLanguage()
   const server = useServer()
-  const servers = useServers()
   const sync = useSync()
   const [shown, setShown] = createSignal(false)
-  const ready = createMemo(() => servers.health[server.key]?.healthy === false || sync.data.mcp_ready)
+  const ready = createMemo(() => server.healthy() === false || sync.data.mcp_ready)
   const mcpIssue = createMemo(() => {
     const mcp = Object.values(sync.data.mcp ?? {})
     const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration")
@@ -26,8 +21,7 @@ export function StatusPopover() {
     if (failed) return "critical" as const
     if (warn) return "warning" as const
   })
-  const serverHealthy = () => servers.health[server.key]?.healthy === true
-  const healthy = createMemo(() => servers.health[server.key]?.healthy === true && !mcpIssue())
+  const healthy = createMemo(() => server.healthy() === true && !mcpIssue())
 
   return (
     <Popover
@@ -49,9 +43,10 @@ export function StatusPopover() {
             classList={{
               "absolute -top-px -right-px size-1.5 rounded-full": true,
               "bg-icon-success-base": ready() && healthy(),
-              "bg-icon-warning-base": ready() && serverHealthy() && mcpIssue() === "warning",
-              "bg-icon-critical-base": serverHealthy() || (ready() && serverHealthy() && mcpIssue() === "critical"),
-              "bg-border-weak-base": serverHealthy() || !ready(),
+              "bg-icon-warning-base": ready() && server.healthy() === true && mcpIssue() === "warning",
+              "bg-icon-critical-base":
+                server.healthy() === false || (ready() && server.healthy() === true && mcpIssue() === "critical"),
+              "bg-border-weak-base": server.healthy() === undefined || !ready(),
             }}
           />
         </div>
@@ -73,135 +68,3 @@ export function StatusPopover() {
     </Popover>
   )
 }
-
-export function StatusPopoverV2(props: { scope?: "server" }) {
-  if (props.scope === "server") return <ServerStatusPopover />
-  return <DirectoryStatusPopover />
-}
-
-function DirectoryStatusPopover() {
-  const language = useLanguage()
-  const server = useServer()
-  const servers = useServers()
-  const sync = useSync()
-  const [shown, setShown] = createSignal(false)
-  const serverHealth = () => servers.health[server.key]?.healthy
-  const ready = createMemo(() => serverHealth() === false || sync.data.mcp_ready)
-  const mcpIssue = createMemo(() => {
-    const mcp = Object.values(sync.data.mcp ?? {})
-    const failed = mcp.some((item) => item.status === "failed" || item.status === "needs_client_registration")
-    const warn = mcp.some((item) => item.status === "needs_auth")
-    if (failed) return "critical" as const
-    if (warn) return "warning" as const
-  })
-  const healthy = createMemo(() => serverHealth() === true && !mcpIssue())
-  const state = createMemo<StatusPopoverState>(() => ({
-    shown: shown(),
-    ready: ready(),
-    healthy: healthy(),
-    serverHealth: serverHealth(),
-    issue: mcpIssue(),
-    label: language.t("status.popover.trigger"),
-    onOpenChange: setShown,
-    body: () => (
-      <StatusPopoverBody shown={shown()}>
-        <Body shown={shown} />
-      </StatusPopoverBody>
-    ),
-  }))
-
-  return <StatusPopoverView state={state()} />
-}
-
-function ServerStatusPopover() {
-  const language = useLanguage()
-  const server = useServer()
-  const servers = useServers()
-  const [shown, setShown] = createSignal(false)
-  const serverHealth = () => servers.health[server.key]?.healthy
-  const state = createMemo<StatusPopoverState>(() => ({
-    shown: shown(),
-    ready: serverHealth() !== undefined,
-    healthy: serverHealth() === true,
-    serverHealth: serverHealth(),
-    label: language.t("status.popover.trigger"),
-    onOpenChange: setShown,
-    body: () => (
-      <StatusPopoverBody shown={shown()}>
-        <ServerBody />
-      </StatusPopoverBody>
-    ),
-  }))
-
-  return <StatusPopoverView state={state()} />
-}
-
-type StatusPopoverState = {
-  shown: boolean
-  ready: boolean
-  healthy: boolean
-  serverHealth: boolean | undefined
-  issue?: "critical" | "warning"
-  label: string
-  onOpenChange: (value: boolean) => void
-  body: () => JSX.Element
-}
-
-function StatusPopoverBody(props: { shown: boolean; children: JSX.Element }) {
-  return (
-    <Show when={props.shown}>
-      <Suspense
-        fallback={<div class="w-[360px] h-14 rounded-xl bg-background-strong shadow-[var(--shadow-lg-border-base)]" />}
-      >
-        {props.children}
-      </Suspense>
-    </Show>
-  )
-}
-
-function StatusPopoverView(props: { state: StatusPopoverState }) {
-  const statusDotClass = () => ({
-    "absolute rounded-full": true,
-    "bg-icon-success-base": props.state.ready && props.state.healthy,
-    "bg-icon-warning-base": props.state.ready && props.state.serverHealth === true && props.state.issue === "warning",
-    "bg-icon-critical-base":
-      props.state.serverHealth === false ||
-      (props.state.ready && props.state.serverHealth === true && props.state.issue === "critical"),
-    "bg-border-weak-base": props.state.serverHealth === undefined || !props.state.ready,
-  })
-
-  const popoverProps = {
-    class:
-      "[&_[data-slot=popover-body]]:p-0 w-[360px] max-w-[calc(100vw-40px)] bg-transparent border-0 shadow-none rounded-xl",
-    gutter: 4,
-    placement: "bottom-end" as const,
-    shift: -168,
-  }
-
-  return (
-    <Popover
-      open={props.state.shown}
-      onOpenChange={props.state.onOpenChange}
-      triggerAs={IconButtonV2}
-      triggerProps={{
-        variant: "ghost-muted",
-        size: "large",
-        class: "!w-9 shrink-0",
-        state: props.state.shown ? "pressed" : undefined,
-        "aria-label": props.state.label,
-      }}
-      trigger={
-        <div class="relative size-4">
-          <IconV2 name={props.state.shown ? "status-active" : "status"} />
-          <div
-            classList={statusDotClass()}
-            class="-top-1 -right-1 size-2 border border-[var(--v2-background-bg-deep)]"
-          />
-        </div>
-      }
-      {...popoverProps}
-    >
-      {props.state.body()}
-    </Popover>
-  )
-}

packages/app/src/components/terminal.tsx

@@ -2,7 +2,7 @@ import { withAlpha } from "@opencode-ai/ui/theme/color"
 import { useTheme } from "@opencode-ai/ui/theme/context"
 import { resolveThemeVariant } from "@opencode-ai/ui/theme/resolve"
 import type { HexColor } from "@opencode-ai/ui/theme/types"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import type { FitAddon, Ghostty, Terminal as Term } from "ghostty-web"
 import { type ComponentProps, createEffect, createMemo, onCleanup, onMount, splitProps } from "solid-js"
 import { SerializeAddon } from "@/addons/serialize"

packages/app/src/components/titlebar-session-events.test.ts

@@ -1,28 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { readSessionTabsRemovedDetail, SESSION_TABS_REMOVED_EVENT } from "./titlebar-session-events"
-
-describe("titlebar session events", () => {
-  test("reads valid removed session tab details", () => {
-    expect(
-      readSessionTabsRemovedDetail(
-        new CustomEvent(SESSION_TABS_REMOVED_EVENT, {
-          detail: { directory: "/tmp/project", sessionIDs: ["ses_1", "ses_2", 1] },
-        }),
-      ),
-    ).toEqual({
-      directory: "/tmp/project",
-      sessionIDs: ["ses_1", "ses_2"],
-    })
-  })
-
-  test("ignores invalid removed session tab details", () => {
-    expect(readSessionTabsRemovedDetail(new Event(SESSION_TABS_REMOVED_EVENT))).toBeUndefined()
-    expect(
-      readSessionTabsRemovedDetail(
-        new CustomEvent(SESSION_TABS_REMOVED_EVENT, {
-          detail: { directory: "/tmp/project", sessionIDs: [] },
-        }),
-      ),
-    ).toBeUndefined()
-  })
-})

packages/app/src/components/titlebar-session-events.ts

@@ -1,29 +0,0 @@
-export const SESSION_TABS_REMOVED_EVENT = "opencode:session-tabs-removed"
-
-export type SessionTabsRemovedDetail = {
-  directory: string
-  sessionIDs: string[]
-}
-
-export function notifySessionTabsRemoved(input: SessionTabsRemovedDetail) {
-  window.dispatchEvent(new CustomEvent(SESSION_TABS_REMOVED_EVENT, { detail: input }))
-}
-
-export function readSessionTabsRemovedDetail(event: Event): SessionTabsRemovedDetail | undefined {
-  if (!(event instanceof CustomEvent)) return undefined
-
-  const detail: unknown = event.detail
-  if (!detail || typeof detail !== "object") return undefined
-  if (!("directory" in detail)) return undefined
-  if (!("sessionIDs" in detail)) return undefined
-  if (typeof detail.directory !== "string") return undefined
-  if (!Array.isArray(detail.sessionIDs)) return undefined
-
-  const sessionIDs = detail.sessionIDs.filter((id): id is string => typeof id === "string")
-  if (sessionIDs.length === 0) return undefined
-
-  return {
-    directory: detail.directory,
-    sessionIDs,
-  }
-}

packages/app/src/components/titlebar.tsx

@@ -6,29 +6,25 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { useTheme } from "@opencode-ai/ui/theme/context"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
 
-import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/context/layout"
+import { getAvatarColors, useLayout, type LocalProject } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { WindowsAppMenu } from "./windows-app-menu"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSync } from "@/context/global-sync"
 import { decodeDirectory } from "@/pages/directory-layout"
 import { iife } from "@opencode-ai/core/util/iife"
 import { base64Encode } from "@opencode-ai/core/util/encode"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
+import { Avatar as AvatarV2 } from "@opencode-ai/ui/v2/components/avatar-v2.jsx"
 import { displayName, getProjectAvatarSource, projectForSession } from "@/pages/layout/helpers"
-import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import {
-  readSessionTabsRemovedDetail,
-  SESSION_TABS_REMOVED_EVENT,
-  type SessionTabsRemovedDetail,
-} from "@/components/titlebar-session-events"
+import { StatusPopover } from "./status-popover"
+import { SDKProvider } from "@/context/sdk"
 
 type TauriDesktopWindow = {
   startDragging?: () => Promise<void>
@@ -52,9 +48,10 @@ const tauriApi = () => (window as unknown as { __TAURI__?: TauriApi }).__TAURI__
 const currentDesktopWindow = () => tauriApi()?.window?.getCurrentWindow?.()
 const currentThemeWindow = () => tauriApi()?.webviewWindow?.getCurrentWebviewWindow?.()
 const legacyTitlebarHeight = 40
-const v2TitlebarHeight = 36
+const v2TitlebarHeight = 44
 const minTitlebarZoom = 0.25
 const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
+const USE_V2_TITLEBAR = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
 
 const makeSessionHref = (b64Dir: string, sessionId: string) => `/${b64Dir}/session/${sessionId}`
 
@@ -74,7 +71,6 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
   const navigate = useNavigate()
   const location = useLocation()
   const params = useParams()
-  const useV2Titlebar = createMemo(() => settings.general.newLayoutDesigns())
 
   const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
   const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
@@ -85,7 +81,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
   const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
   const counterZoom = () => (windows() && titlebarZoom() < 1 ? 1 / titlebarZoom() : 1)
   const minHeight = () => {
-    const height = useV2Titlebar() ? v2TitlebarHeight : legacyTitlebarHeight
+    const height = USE_V2_TITLEBAR ? v2TitlebarHeight : legacyTitlebarHeight
     if (mac()) return `${height / zoom()}px`
     if (windows()) return `${height / Math.min(titlebarZoom(), 1)}px`
     return undefined
@@ -119,21 +115,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
   const canBack = createMemo(() => history.index > 0)
   const canForward = createMemo(() => history.index < history.stack.length - 1)
   const hasProjects = createMemo(() => layout.projects.list().length > 0)
-  const nav = createMemo(() => (useV2Titlebar() ? settings.general.showNavigation() : true))
-  const updateState = createMemo<TitlebarUpdatePillState>(() => {
-    const version = props.update?.version()
-    return {
-      visible: version !== undefined,
-      installing: props.update?.installing() ?? false,
-      label: "Update",
-      ariaLabel: language.t("toast.update.action.installRestart"),
-      title: version ? `Update ${version}` : undefined,
-      onInstall: () => props.update?.install(),
-    }
-  })
-  const v2RightState = createMemo<TitlebarV2RightState>(() => ({
-    update: updateState(),
-  }))
+  const nav = createMemo(() => import.meta.env.VITE_OPENCODE_CHANNEL !== "beta" || settings.general.showNavigation())
 
   const back = () => {
     const next = backPath(history)
@@ -220,8 +202,8 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
     <header
       classList={{
         "shrink-0 relative overflow-hidden flex flex-row": true,
-        "h-9 bg-v2-background-bg-deep": useV2Titlebar(),
-        "h-10 bg-background-base": !useV2Titlebar(),
+        "h-11 bg-v2-background-bg-deep": USE_V2_TITLEBAR,
+        "h-10 bg-background-base": !USE_V2_TITLEBAR,
       }}
       style={{
         "min-height": minHeight(),
@@ -237,9 +219,9 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
       onDblClick={maximize}
     >
       <Switch>
-        <Match when={useV2Titlebar()}>
+        <Match when={USE_V2_TITLEBAR}>
           {(_) => {
-            const serverSync = useServerSync()
+            const globalSync = useGlobalSync()
             const navigate = useNavigate()
             const homeMatch = useMatch(() => "/")
 
@@ -279,7 +261,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                   )
                 },
                 removeTab: (href: string) => {
-                  void startTransition(() => {
+                  startTransition(() => {
                     setStore(
                       produce((tabs) => {
                         const index = tabs.findIndex((t) => t.href === href)
@@ -292,45 +274,11 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                     )
                   })
                 },
-                removeSessions: (input: SessionTabsRemovedDetail) => {
-                  void startTransition(() => {
-                    setStore(
-                      produce((tabs) => {
-                        const sessionIDs = new Set(input.sessionIDs)
-                        const currentHref = params.dir && params.id ? makeSessionHref(params.dir, params.id) : undefined
-                        const currentIndex = currentHref ? tabs.findIndex((tab) => tab.href === currentHref) : -1
-                        const removedCurrent =
-                          currentIndex !== -1 &&
-                          tabs[currentIndex]?.dir === input.directory &&
-                          sessionIDs.has(tabs[currentIndex]?.sessionId ?? "")
-
-                        for (let i = tabs.length - 1; i >= 0; i--) {
-                          const tab = tabs[i]
-                          if (!tab) continue
-                          if (tab.dir !== input.directory) continue
-                          if (!sessionIDs.has(tab.sessionId)) continue
-                          tabs.splice(i, 1)
-                        }
-
-                        if (!removedCurrent) return
-                        const nextTab = tabs[currentIndex] ?? tabs[tabs.length - 1]
-                        if (nextTab) navigate(nextTab.href)
-                        else navigate("/")
-                      }),
-                    )
-                  })
-                },
               }
 
               return [store, actions]
             })
 
-            makeEventListener(window, SESSION_TABS_REMOVED_EVENT, (event) => {
-              const detail = readSessionTabsRemovedDetail(event)
-              if (!detail) return
-              tabsStoreActions.removeSessions(detail)
-            })
-
             createEffect(() => {
               const params = useParams()
               if (!(params.dir && params.id)) return
@@ -368,28 +316,22 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
               return true
             }
 
-            const openNewTab = () => navigate(newSessionHref())
+            makeEventListener(
+              document,
+              "keydown",
+              (event) => {
+                if (!event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return
+                if (event.key.toLowerCase() !== "w") return
+                if (!(closeCurrentSessionTab() || closeNewSessionTab())) return
 
-            const closeActiveTab = () => closeCurrentSessionTab() || closeNewSessionTab()
+                event.preventDefault()
+                event.stopPropagation()
+              },
+              { capture: true },
+            )
 
             command.register(() => {
               const commands = [
-                {
-                  id: "tab.new",
-                  category: "tab",
-                  title: language.t("command.session.new"),
-                  keybind: "mod+t",
-                  hidden: true,
-                  onSelect: openNewTab,
-                },
-                {
-                  id: "tab.close",
-                  category: "tab",
-                  title: language.t("command.tab.close"),
-                  keybind: "mod+w",
-                  hidden: true,
-                  onSelect: closeActiveTab,
-                },
                 {
                   id: `tab.prev`,
                   category: "tab",
@@ -449,7 +391,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
               const base = mapArray(
                 () => tabsStore,
                 (tab) => {
-                  const sync = serverSync.createDirSyncContext(tab.dir)
+                  const sync = globalSync.createDirSyncContext(tab.dir)
                   const session = sync.session.get(tab.sessionId)
                   return session ? { ...tab, info: session } : null
                 },
@@ -460,7 +402,7 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
 
             return (
               <div
-                class="h-full flex-1 flex flex-row items-center gap-1.5 pr-3 pt-2"
+                class="h-full flex-1 flex flex-row items-center gap-1.5 pr-3 py-2"
                 classList={{
                   "pl-2": mac(),
                   "pl-4": !mac(),
@@ -493,8 +435,8 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                             title={tab.info.title}
                             project={projectForSession(tab.info, projects(), projectByID())}
                             directory={tab.dir}
-                            sessionId={tab.info.id}
                             onClose={() => tabsStoreActions.removeTab(tab.href)}
+                            hideClose={tabsEnriched().length < 2}
                           />
                         </>
                       )}
@@ -523,7 +465,16 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
                   </Show>
                   <div class="min-w-0 flex-1" />
                 </div>
-                <TitlebarV2Right state={v2RightState()} />
+                <Show when={currentSessionTab()?.dir} keyed>
+                  {(dir) => (
+                    <SDKProvider directory={dir}>
+                      <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                        <StatusPopover />
+                      </Tooltip>
+                    </SDKProvider>
+                  )}
+                </Show>
+                <TitlebarUpdatePill update={props.update} />
                 <Show when={windows() && !electronWindows()}>
                   <div data-tauri-decorum-tb class="flex flex-row" />
                 </Show>
@@ -690,83 +641,56 @@ export function Titlebar(props: { update?: TitlebarUpdate }) {
   )
 }
 
-type TitlebarUpdatePillState = {
-  visible: boolean
-  installing: boolean
-  label: string
-  ariaLabel: string
-  title?: string
-  onInstall: () => void
-}
+function TitlebarUpdatePill(props: { update?: TitlebarUpdate }) {
+  const language = useLanguage()
+  const version = () => props.update?.version()
 
-type TitlebarV2RightState = {
-  update: TitlebarUpdatePillState
-}
-
-function TitlebarV2Right(props: { state: TitlebarV2RightState }) {
   return (
-    <div class="flex shrink-0 items-center justify-end gap-0">
-      <TitlebarUpdatePill state={props.state.update} />
-      <div id="opencode-titlebar-right" class="flex shrink-0 items-center justify-end gap-0" />
-    </div>
-  )
-}
-
-function TitlebarUpdatePill(props: { state: TitlebarUpdatePillState }) {
-  return (
-    <Show when={props.state.visible}>
+    <Show when={version() !== undefined}>
       <button
         type="button"
-        class="h-5 shrink-0 rounded-[27px] bg-[var(--v2-background-bg-layer-03)] px-2.5 text-[11px] font-[530] leading-4 tracking-[0.05px] text-[var(--v2-text-text-base)] disabled:opacity-60"
-        onClick={props.state.onInstall}
-        disabled={props.state.installing}
-        aria-label={props.state.ariaLabel}
-        title={props.state.title}
+        class="h-5 shrink-0 rounded-[27px] bg-[var(--v2-background-bg-accent)] px-2.5 text-[11px] font-[530] leading-[1.1] tracking-[-0.04px] text-[var(--v2-text-text-contrast)] disabled:opacity-60"
+        onClick={() => props.update?.install()}
+        disabled={props.update?.installing()}
+        aria-label={language.t("toast.update.action.installRestart")}
+        title={version() ? `Update ${version()}` : undefined}
       >
-        {props.state.label}
+        Update
       </button>
     </Show>
   )
 }
 
+function DesktopTitlebarIconButton(props: Parameters<typeof IconButtonV2>[0]) {
+  return
+}
+
 function TabNavItem(props: {
   href: string
   title: string
   project?: LocalProject
   directory: string
-  sessionId: string
   hideClose?: boolean
   onClose: () => void
 }) {
   const match = useMatch(() => props.href)
   const isActive = () => !!match()
-  const closeTab = (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    props.onClose()
-  }
   return (
     <div
-      class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] px-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
+      class="group relative flex h-7 min-w-24 max-w-60 flex-row items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[6px] bg-[var(--tab-bg)] pl-1.5 [--tab-bg:var(--v2-background-bg-deep)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)]"
       data-active={isActive()}
-      onMouseDown={(event) => {
-        if (event.button !== 1) return
-        closeTab(event)
-      }}
     >
       <a
         href={props.href}
-        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
+        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium text-v2-text-text-faint group-data-[active='true']:text-v2-text-text-base"
       >
-        <span data-slot="project-avatar-slot">
-          <ProjectTabAvatar project={props.project} directory={props.directory} sessionId={props.sessionId} />
-        </span>
-        <span class="min-w-0 flex-1">{props.title}</span>
+        <ProjectTabAvatar project={props.project} directory={props.directory} />
+        <span class="text-clip">{props.title}</span>
       </a>
 
-      <div class="absolute not-group-hover:not-group-data-[active=true]:left-52 group-hover:right-0 group-data-[active=true]:right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
+      <div class="absolute right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
         <div
-          class="absolute inset-0 rounded-r-[6px] bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
+          class="absolute inset-0 bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
           style={{
             "--inactive-bg": "linear-gradient(to right, transparent 0%, var(--tab-bg) 80%)",
             "--active-bg": "linear-gradient(90deg, transparent 0%, var(--tab-bg) 25%)",
@@ -775,8 +699,8 @@ function TabNavItem(props: {
         <IconButtonV2
           size="small"
           variant="ghost-muted"
-          class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100 z-10"
-          onClick={closeTab}
+          class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100"
+          onClick={props.onClose}
           icon={<IconV2 name="xmark-small" />}
         />
       </div>
@@ -784,44 +708,31 @@ function TabNavItem(props: {
   )
 }
 
-function ProjectTabAvatar(props: { project?: LocalProject; directory: string; sessionId: string }) {
-  const directory = () => props.directory
-  const sessionId = () => props.sessionId
-  const state = useSessionTabAvatarState(directory, sessionId)
+function ProjectTabAvatar(props: { project?: LocalProject; directory: string }) {
   return (
-    <ProjectAvatar
+    <AvatarV2
       fallback={displayName(props.project ?? { worktree: props.directory })}
       src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
-      variant={getProjectAvatarVariant(props.project?.icon?.color)}
-      unread={state.unread()}
-      loading={state.loading()}
+      kind="org"
+      size="small"
+      {...getAvatarColors(props.project?.icon?.color)}
+      class="size-4 rounded"
     />
   )
 }
 
 function NewSessionTabItem(props: { href: string; title: string; onClose: () => void }) {
-  const closeTab = (event: MouseEvent) => {
-    event.preventDefault()
-    event.stopPropagation()
-    props.onClose()
-  }
   return (
-    <div
-      class="group relative flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--v2-overlay-simple-overlay-pressed)] pl-1.5 pr-8 whitespace-nowrap focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]"
-      onMouseDown={(event) => {
-        if (event.button !== 1) return
-        closeTab(event)
-      }}
-    >
+    <div class="group relative flex h-7 max-w-60 flex-row items-center gap-1.5 overflow-hidden rounded-[6px] bg-[var(--v2-overlay-simple-overlay-pressed)] pl-1.5 pr-8 whitespace-nowrap focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[var(--v2-border-border-focus)]">
       <a
         href={props.href}
         aria-current="page"
-        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-5 text-[var(--v2-text-text-base)]"
+        class="flex h-full min-w-0 flex-1 flex-row items-center gap-1.5 overflow-hidden text-[13px] font-medium leading-none text-[var(--v2-text-text-base)]"
       >
         <span class="flex size-4 shrink-0 rotate-90 items-center justify-center">
           <IconV2 name="edit" />
         </span>
-        <span class="truncate leading-5">{props.title}</span>
+        <span class="truncate">{props.title}</span>
       </a>
       <div class="absolute right-0 inset-y-0 flex w-7 items-center justify-center">
         <IconButtonV2
@@ -831,7 +742,11 @@ function NewSessionTabItem(props: { href: string; title: string; onClose: () =>
             event.preventDefault()
             event.stopPropagation()
           }}
-          onClick={closeTab}
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            props.onClose()
+          }}
           icon={<IconV2 name="xmark-small" />}
           aria-label="Close tab"
         />

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

@@ -2,8 +2,8 @@ import { Show, type JSX } from "solid-js"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
 
 import { useCommand } from "@/context/command"
 import { DESKTOP_MENU, desktopMenuVisible, type DesktopMenuAction, type DesktopMenuEntry } from "@/desktop-menu"

packages/app/src/context/directory-sync.ts

@@ -8,11 +8,10 @@ import {
   getSessionPrefetchPromise,
   setSessionPrefetch,
 } from "./global-sync/session-prefetch"
-import { createServerSyncContext } from "./server-sync"
-import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+import { useGlobalSync } from "./global-sync"
+import type { Message, OpencodeClient, Part } from "@opencode-ai/sdk/v2/client"
 import { SESSION_CACHE_LIMIT, dropSessionCaches, pickSessionCacheEvictions } from "./global-sync/session-cache"
 import { diffs as list, message as clean } from "@/utils/diffs"
-import { useServerSDK } from "./server-sdk"
 
 const SKIP_PARTS = new Set(["patch", "step-start", "step-finish"])
 
@@ -34,12 +33,6 @@ const keyFor = (directory: string, id: string) => `${directory}\n${id}`
 
 const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)
 
-const isNotFound = (error: unknown) =>
-  error instanceof Error &&
-  typeof error.cause === "object" &&
-  error.cause !== null &&
-  (error.cause as { status?: unknown }).status === 404
-
 function merge<T extends { id: string }>(a: readonly T[], b: readonly T[]) {
   const map = new Map(a.map((item) => [item.id, item] as const))
   for (const item of b) map.set(item.id, item)
@@ -171,17 +164,16 @@ function setOptimisticRemove(setStore: (...args: unknown[]) => void, input: Opti
   })
 }
 
-export const createDirSyncContext = (directory: string, serverSync: ReturnType<typeof createServerSyncContext>) => {
-  const serverSDK = useServerSDK()
-  const client = serverSDK.createClient({ directory, throwOnError: true })
+export const createDirSyncContext = (client: OpencodeClient, directory: string) => {
+  const globalSync = useGlobalSync()
 
-  type Child = ReturnType<(typeof serverSync)["child"]>
+  type Child = ReturnType<(typeof globalSync)["child"]>
   type Setter = Child[1]
 
-  const current = createMemo(() => serverSync.child(directory, { mcp: true }))
+  const current = createMemo(() => globalSync.child(directory))
   const target = (directory?: string) => {
     if (!directory || directory === directory) return current()
-    return serverSync.child(directory)
+    return globalSync.child(directory)
   }
   const absolute = (path: string) => (current()[0].path.directory + "/" + path).replace("//", "/")
   const initialMessagePageSize = 80
@@ -247,7 +239,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
       if (!first) break
       const stale = [...(seen.get(first) ?? [])]
       seen.delete(first)
-      const [, setStore] = serverSync.child(first, { bootstrap: false })
+      const [, setStore] = globalSync.child(first, { bootstrap: false })
       evict(first, setStore, stale)
     }
     return created
@@ -275,7 +267,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
     if (sessionIDs.length === 0) return
     clearSessionPrefetch(directory, sessionIDs)
     for (const sessionID of sessionIDs) {
-      serverSync.todo.set(sessionID, undefined)
+      globalSync.todo.set(sessionID, undefined)
     }
     setStore(
       produce((draft) => {
@@ -332,7 +324,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
         for (const messageID of next.confirmed) {
           clearOptimistic(input.directory, input.sessionID, messageID)
         }
-        const [store] = serverSync.child(input.directory, { bootstrap: false })
+        const [store] = globalSync.child(input.directory, { bootstrap: false })
         const cached = input.mode === "prepend" ? (store.message[input.sessionID] ?? []) : []
         const message = input.mode === "prepend" ? merge(cached, next.session) : next.session
         batch(() => {
@@ -353,10 +345,6 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
           })
         })
       })
-      .catch((error) => {
-        if (isNotFound(error) && !tracked(input.directory, input.sessionID)) return
-        throw error
-      })
       .finally(() => {
         setMeta(
           produce((draft) => {
@@ -385,8 +373,8 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
     },
     get project() {
       const store = current()[0]
-      const match = Binary.search(serverSync.data.project, store.project, (p) => p.id)
-      if (match.found) return serverSync.data.project[match.index]
+      const match = Binary.search(globalSync.data.project, store.project, (p) => p.id)
+      if (match.found) return globalSync.data.project[match.index]
       return undefined
     },
     session: {
@@ -430,7 +418,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
         })
       },
       async sync(sessionID: string, opts?: { force?: boolean }) {
-        const [store, setStore] = serverSync.child(directory)
+        const [store, setStore] = globalSync.child(directory)
         const key = keyFor(directory, sessionID)
 
         touch(directory, setStore, sessionID)
@@ -468,27 +456,22 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
           const sessionReq =
             hasSession && !opts?.force
               ? Promise.resolve()
-              : retry(() => client.session.get({ sessionID }))
-                  .then((session) => {
-                    if (!tracked(directory, sessionID)) return
-                    const data = session.data
-                    if (!data) return
-                    setStore(
-                      "session",
-                      produce((draft) => {
-                        const match = Binary.search(draft, sessionID, (s) => s.id)
-                        if (match.found) {
-                          draft[match.index] = data
-                          return
-                        }
-                        draft.splice(match.index, 0, data)
-                      }),
-                    )
-                  })
-                  .catch((error) => {
-                    if (isNotFound(error) && !tracked(directory, sessionID)) return
-                    throw error
-                  })
+              : retry(() => client.session.get({ sessionID })).then((session) => {
+                  if (!tracked(directory, sessionID)) return
+                  const data = session.data
+                  if (!data) return
+                  setStore(
+                    "session",
+                    produce((draft) => {
+                      const match = Binary.search(draft, sessionID, (s) => s.id)
+                      if (match.found) {
+                        draft[match.index] = data
+                        return
+                      }
+                      draft.splice(match.index, 0, data)
+                    }),
+                  )
+                })
 
           const messagesReq =
             cached && !opts?.force
@@ -505,7 +488,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
         })
       },
       async diff(sessionID: string, opts?: { force?: boolean }) {
-        const [store, setStore] = serverSync.child(directory)
+        const [store, setStore] = globalSync.child(directory)
         touch(directory, setStore, sessionID)
         if (store.session_diff[sessionID] !== undefined && !opts?.force) return
 
@@ -518,13 +501,13 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
         )
       },
       async todo(sessionID: string, opts?: { force?: boolean }) {
-        const [store, setStore] = serverSync.child(directory)
+        const [store, setStore] = globalSync.child(directory)
         touch(directory, setStore, sessionID)
         const existing = store.todo[sessionID]
-        const cached = serverSync.data.session_todo[sessionID]
+        const cached = globalSync.data.session_todo[sessionID]
         if (existing !== undefined) {
           if (cached === undefined) {
-            serverSync.todo.set(sessionID, existing)
+            globalSync.todo.set(sessionID, existing)
           }
           if (!opts?.force) return
         }
@@ -539,7 +522,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
             if (!tracked(directory, sessionID)) return
             const list = todo.data ?? []
             setStore("todo", sessionID, reconcile(list, { key: "id" }))
-            serverSync.todo.set(sessionID, list)
+            globalSync.todo.set(sessionID, list)
           }),
         )
       },
@@ -557,7 +540,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
           return meta.loading[key] ?? false
         },
         async loadMore(sessionID: string, count?: number) {
-          const [, setStore] = serverSync.child(directory)
+          const [, setStore] = globalSync.child(directory)
           touch(directory, setStore, sessionID)
           const key = keyFor(directory, sessionID)
           const step = count ?? historyMessagePageSize
@@ -578,12 +561,12 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
         },
       },
       evict(sessionID: string, _directory = directory) {
-        const [, setStore] = serverSync.child(_directory)
+        const [, setStore] = globalSync.child(_directory)
         seenFor(_directory).delete(sessionID)
         evict(_directory, setStore, [sessionID])
       },
       fetch: async (count = 10) => {
-        const [store, setStore] = serverSync.child(directory)
+        const [store, setStore] = globalSync.child(directory)
         setStore("limit", (x) => x + count)
         await client.session.list().then((x) => {
           const sessions = (x.data ?? [])
@@ -595,7 +578,7 @@ export const createDirSyncContext = (directory: string, serverSync: ReturnType<t
       },
       more: createMemo(() => current()[0].session.length >= current()[0].limit),
       archive: async (sessionID: string) => {
-        const [, setStore] = serverSync.child(directory)
+        const [, setStore] = globalSync.child(directory)
         await client.session.update({ sessionID, time: { archived: Date.now() } })
         setStore(
           produce((draft) => {

packages/app/src/context/file.tsx

@@ -1,7 +1,7 @@
 import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { useParams } from "@solidjs/router"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { useSDK } from "./sdk"

packages/app/src/context/global-sdk.tsx

@@ -0,0 +1,309 @@
+import type { Event } from "@opencode-ai/sdk/v2/client"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { createGlobalEmitter } from "@solid-primitives/event-bus"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { batch, onCleanup, onMount } from "solid-js"
+import { createSdkForServer } from "@/utils/server"
+import { useLanguage } from "./language"
+import { usePlatform } from "./platform"
+import { useServer } from "./server"
+
+const isAbortError = (error: unknown) =>
+  error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"
+
+export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleContext({
+  name: "GlobalSDK",
+  init: () => {
+    const language = useLanguage()
+    const server = useServer()
+    const platform = usePlatform()
+    const abort = new AbortController()
+
+    const eventFetch = (() => {
+      if (!platform.fetch || !server.current) return
+      try {
+        const url = new URL(server.current.http.url)
+        const loopback = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "::1"
+        if (url.protocol === "http:" && !loopback) return platform.fetch
+      } catch {
+        return
+      }
+    })()
+
+    const currentServer = server.current
+    if (!currentServer) throw new Error(language.t("error.globalSDK.noServerAvailable"))
+
+    const eventSdk = createSdkForServer({
+      signal: abort.signal,
+      fetch: eventFetch,
+      server: currentServer.http,
+    })
+    const emitter = createGlobalEmitter<{
+      [key: string]: Event
+    }>()
+
+    type Queued = { directory: string; payload: Event }
+    const FLUSH_FRAME_MS = 16
+    const STREAM_YIELD_MS = 8
+    const RECONNECT_DELAY_MS = 250
+
+    let queue: Queued[] = []
+    let buffer: Queued[] = []
+    const coalesced = new Map<string, number>()
+    const staleDeltas = new Set<string>()
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let last = 0
+
+    const deltaKey = (directory: string, messageID: string, partID: string) => `${directory}:${messageID}:${partID}`
+
+    const key = (directory: string, payload: Event) => {
+      if (payload.type === "session.status") return `session.status:${directory}:${payload.properties.sessionID}`
+      if (payload.type === "lsp.updated") return `lsp.updated:${directory}`
+      if (payload.type === "message.part.updated") {
+        const part = payload.properties.part
+        return `message.part.updated:${directory}:${part.messageID}:${part.id}`
+      }
+    }
+
+    const flush = () => {
+      if (timer) clearTimeout(timer)
+      timer = undefined
+
+      if (queue.length === 0) return
+
+      const events = queue
+      const skip = staleDeltas.size > 0 ? new Set(staleDeltas) : undefined
+      queue = buffer
+      buffer = events
+      queue.length = 0
+      coalesced.clear()
+      staleDeltas.clear()
+
+      last = Date.now()
+      batch(() => {
+        for (const event of events) {
+          if (skip && event.payload.type === "message.part.delta") {
+            const props = event.payload.properties
+            if (skip.has(deltaKey(event.directory, props.messageID, props.partID))) continue
+          }
+          emitter.emit(event.directory, event.payload)
+        }
+      })
+
+      buffer.length = 0
+    }
+
+    const schedule = () => {
+      if (timer) return
+      const elapsed = Date.now() - last
+      timer = setTimeout(flush, Math.max(0, FLUSH_FRAME_MS - elapsed))
+    }
+
+    let streamErrorLogged = false
+    const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
+    const aborted = isAbortError
+
+    let attempt: AbortController | undefined
+    let run: Promise<void> | undefined
+    let started = false
+    const HEARTBEAT_TIMEOUT_MS = 15_000
+    let lastEventAt = Date.now()
+    let heartbeat: ReturnType<typeof setTimeout> | undefined
+    const resetHeartbeat = () => {
+      lastEventAt = Date.now()
+      if (heartbeat) clearTimeout(heartbeat)
+      heartbeat = setTimeout(() => {
+        attempt?.abort()
+      }, HEARTBEAT_TIMEOUT_MS)
+    }
+    const clearHeartbeat = () => {
+      if (!heartbeat) return
+      clearTimeout(heartbeat)
+      heartbeat = undefined
+    }
+
+    const start = () => {
+      if (started) return run
+      started = true
+      run = (async () => {
+        // oxlint-disable-next-line no-unmodified-loop-condition -- `started` is set to false by stop() which also aborts; both flags are checked to allow graceful exit
+        while (!abort.signal.aborted && started) {
+          attempt = new AbortController()
+          lastEventAt = Date.now()
+          const onAbort = () => {
+            attempt?.abort()
+          }
+          abort.signal.addEventListener("abort", onAbort)
+          try {
+            const events = await eventSdk.global.event({
+              signal: attempt.signal,
+              onSseError: (error) => {
+                if (aborted(error)) return
+                if (streamErrorLogged) return
+                streamErrorLogged = true
+                console.error("[global-sdk] event stream error", {
+                  url: currentServer.http.url,
+                  fetch: eventFetch ? "platform" : "webview",
+                  error,
+                })
+              },
+            })
+            let yielded = Date.now()
+            resetHeartbeat()
+            for await (const event of events.stream) {
+              resetHeartbeat()
+              streamErrorLogged = false
+              const directory = event.directory ?? "global"
+              if (event.payload.type === "sync") {
+                continue
+              }
+
+              const payload = event.payload as Event
+
+              const k = key(directory, payload)
+              if (k) {
+                const i = coalesced.get(k)
+                if (i !== undefined) {
+                  queue[i] = { directory, payload }
+                  if (payload.type === "message.part.updated") {
+                    const part = payload.properties.part
+                    staleDeltas.add(deltaKey(directory, part.messageID, part.id))
+                  }
+                  continue
+                }
+                coalesced.set(k, queue.length)
+              }
+              queue.push({ directory, payload })
+              schedule()
+
+              if (Date.now() - yielded < STREAM_YIELD_MS) continue
+              yielded = Date.now()
+              await wait(0)
+            }
+          } catch (error) {
+            if (!aborted(error) && !streamErrorLogged) {
+              streamErrorLogged = true
+              console.error("[global-sdk] event stream failed", {
+                url: currentServer.http.url,
+                fetch: eventFetch ? "platform" : "webview",
+                error,
+              })
+            }
+          } finally {
+            abort.signal.removeEventListener("abort", onAbort)
+            attempt = undefined
+            clearHeartbeat()
+          }
+
+          if (abort.signal.aborted || !started) return
+          await wait(RECONNECT_DELAY_MS)
+        }
+      })().finally(() => {
+        run = undefined
+        flush()
+      })
+      return run
+    }
+
+    const stop = () => {
+      started = false
+      attempt?.abort()
+      clearHeartbeat()
+    }
+
+    onMount(() => {
+      makeEventListener(document, "visibilitychange", () => {
+        if (document.visibilityState !== "visible") return
+        if (!started) return
+        if (Date.now() - lastEventAt < HEARTBEAT_TIMEOUT_MS) return
+        attempt?.abort()
+      })
+    })
+
+    onCleanup(() => {
+      stop()
+      abort.abort()
+      flush()
+    })
+
+    const sdk = createSdkForServer({
+      server: server.current.http,
+      fetch: platform.fetch,
+      throwOnError: true,
+    })
+
+    const dirSyncContexts = new Map<string, ReturnType<typeof createDirSdkContext>>()
+    const dirSdkContextRefCounts = new Map<string, number>()
+
+    return {
+      url: currentServer.http.url,
+      client: sdk,
+      event: {
+        on: emitter.on.bind(emitter),
+        listen: emitter.listen.bind(emitter),
+        start,
+      },
+      createClient(opts: Omit<Parameters<typeof createSdkForServer>[0], "server" | "fetch">) {
+        const s = server.current
+        if (!s) throw new Error(language.t("error.globalSDK.serverNotAvailable"))
+        return createSdkForServer({
+          server: s.http,
+          fetch: platform.fetch,
+          ...opts,
+        })
+      },
+      createDirSyncContext: (directory: string) => {
+        onCleanup(() => {
+          dirSdkContextRefCounts.set(directory, (dirSdkContextRefCounts.get(directory) ?? 0) - 1)
+          if (dirSdkContextRefCounts.get(directory) === 0) {
+            dirSyncContexts.delete(directory)
+            dirSdkContextRefCounts.delete(directory)
+          }
+        })
+
+        const cached = dirSyncContexts.get(directory)
+        if (cached) {
+          dirSdkContextRefCounts.set(directory, (dirSdkContextRefCounts.get(directory) ?? 0) + 1)
+          return cached
+        }
+        const ctx = createDirSdkContext(directory)
+        dirSyncContexts.set(directory, ctx)
+        dirSdkContextRefCounts.set(directory, 1)
+
+        return ctx
+      },
+    }
+  },
+})
+
+type SDKEventMap = {
+  [key in Event["type"]]: Extract<Event, { type: key }>
+}
+
+function createDirSdkContext(directory: string) {
+  const globalSDK = useGlobalSDK()
+
+  const client = globalSDK.createClient({
+    directory,
+    throwOnError: true,
+  })
+
+  const emitter = createGlobalEmitter<SDKEventMap>()
+
+  const unsub = globalSDK.event.on(directory, (event) => {
+    emitter.emit(event.type, event)
+  })
+  onCleanup(unsub)
+
+  return {
+    directory,
+    client,
+    event: emitter,
+    get url() {
+      return globalSDK.url
+    },
+    createClient(opts: Parameters<typeof globalSDK.createClient>[0]) {
+      return globalSDK.createClient(opts)
+    },
+  }
+}

packages/app/src/context/global-sync.tsx

@@ -1,11 +1,11 @@
 import type { Config, OpencodeClient, Path, Project, ProviderAuthResponse, Todo } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { batch, createContext, getOwner, onCleanup, onMount, type ParentProps, untrack, useContext } from "solid-js"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { useLanguage } from "@/context/language"
 import type { InitError } from "../pages/error"
-import { useServerSDK } from "./server-sdk"
+import { useGlobalSDK } from "./global-sdk"
 import {
   bootstrapDirectory,
   bootstrapGlobal,
@@ -29,9 +29,7 @@ import { createRefreshQueue } from "./global-sync/queue"
 import { directoryKey } from "./global-sync/utils"
 import { PathKey } from "@/utils/path-key"
 import { createDirSyncContext } from "./directory-sync"
-import { createSimpleContext, NormalizedProviderListResponse } from "@opencode-ai/ui/context"
-import { createRefCountMap } from "@/utils/refcount"
-import { retry } from "@opencode-ai/core/util/retry"
+import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 
 type GlobalStore = {
   ready: boolean
@@ -59,13 +57,13 @@ export const loadLspQuery = (directory: string, sdk: OpencodeClient) =>
     queryFn: () => sdk.lsp.status().then((r) => r.data ?? []),
   })
 
-function makeQueryOptionsApi(serverSDK: () => OpencodeClient, sdkFor: (dir: PathKey) => OpencodeClient) {
+function makeQueryOptionsApi(globalSDK: () => OpencodeClient, sdkFor: (dir: PathKey) => OpencodeClient) {
   return {
-    globalConfig: () => loadGlobalConfigQuery(serverSDK()),
-    projects: () => loadProjectsQuery(serverSDK()),
+    globalConfig: () => loadGlobalConfigQuery(globalSDK()),
+    projects: () => loadProjectsQuery(globalSDK()),
     providers: (directory: PathKey | null) =>
-      loadProvidersQuery(directory, directory === null ? serverSDK() : sdkFor(directory)),
-    path: (directory: PathKey | null) => loadPathQuery(directory, directory === null ? serverSDK() : sdkFor(directory)),
+      loadProvidersQuery(directory, directory === null ? globalSDK() : sdkFor(directory)),
+    path: (directory: PathKey | null) => loadPathQuery(directory, directory === null ? globalSDK() : sdkFor(directory)),
     agents: (directory: PathKey) => loadAgentsQuery(directory, sdkFor(directory)),
     mcp: (directory: PathKey) => loadMcpQuery(directory, sdkFor(directory)),
     lsp: (directory: PathKey) => loadLspQuery(directory, sdkFor(directory)),
@@ -74,11 +72,11 @@ function makeQueryOptionsApi(serverSDK: () => OpencodeClient, sdkFor: (dir: Path
 }
 export type QueryOptionsApi = ReturnType<typeof makeQueryOptionsApi>
 
-export function createServerSyncContext() {
-  const serverSDK = useServerSDK()
+function createGlobalSync() {
+  const globalSDK = useGlobalSDK()
   const language = useLanguage()
   const owner = getOwner()
-  if (!owner) throw new Error("ServerSync must be created within owner")
+  if (!owner) throw new Error("GlobalSync must be created within owner")
 
   const sdkCache = new Map<string, OpencodeClient>()
   const booting = new Map<string, Promise<void>>()
@@ -89,7 +87,7 @@ export function createServerSyncContext() {
     const key = directoryKey(directory)
     const cached = sdkCache.get(key)
     if (cached) return cached
-    const sdk = serverSDK.createClient({
+    const sdk = globalSDK.createClient({
       directory,
       throwOnError: true,
     })
@@ -97,7 +95,7 @@ export function createServerSyncContext() {
     return sdk
   }
 
-  const queryOptionsApi = makeQueryOptionsApi(() => serverSDK.client, sdkFor)
+  const queryOptionsApi = makeQueryOptionsApi(() => globalSDK.client, sdkFor)
 
   const [configQuery, providerQuery, pathQuery] = useQueries(() => ({
     queries: [queryOptionsApi.globalConfig(), queryOptionsApi.providers(null), queryOptionsApi.path(null)],
@@ -156,7 +154,7 @@ export function createServerSyncContext() {
     queryKey: ["bootstrap"],
     queryFn: async () => {
       await bootstrapGlobal({
-        serverSDK: serverSDK.client,
+        globalSDK: globalSDK.client,
         requestFailedTitle: language.t("common.requestFailed"),
         translate: language.t,
         formatMoreCount: (count) => language.t("common.moreCountSuffix", { count }),
@@ -206,19 +204,6 @@ export function createServerSyncContext() {
     onBootstrap: (directory) => {
       void bootstrapInstance(directory)
     },
-    onMcp: (directory, setStore) => {
-      void retry(() =>
-        sdkFor(directory)
-          .command.list()
-          .then((x) => setStore("command", x.data ?? [])),
-      ).catch((err) => {
-        showToast({
-          variant: "error",
-          title: language.t("toast.project.reloadFailed.title", { project: getFilename(directory) }),
-          description: formatServerError(err, language.t),
-        })
-      })
-    },
     onDispose: (directory) => {
       const key = directoryKey(directory)
       queue.clear(key)
@@ -263,7 +248,7 @@ export function createServerSyncContext() {
           loadRootSessionsWithFallback({
             directory,
             limit,
-            list: (query) => serverSDK.client.session.list(query),
+            list: (query) => globalSDK.client.session.list(query),
           })
             .then((x) => {
               const nonArchived = (x.data ?? [])
@@ -325,7 +310,6 @@ export function createServerSyncContext() {
       const sdk = sdkFor(directory)
       await bootstrapDirectory({
         directory,
-        mcp: children.mcp(key),
         global: {
           config: globalStore.config,
           path: globalStore.path,
@@ -350,7 +334,7 @@ export function createServerSyncContext() {
     return promise
   }
 
-  const unsub = serverSDK.event.listen((e) => {
+  const unsub = globalSDK.event.listen((e) => {
     const directory = e.name
     const key = directoryKey(directory)
     const event = e.details
@@ -409,13 +393,13 @@ export function createServerSyncContext() {
         eventFrame = undefined
         eventTimer = setTimeout(() => {
           eventTimer = undefined
-          void serverSDK.event.start()
+          void globalSDK.event.start()
         }, 0)
       })
     } else {
       eventTimer = setTimeout(() => {
         eventTimer = undefined
-        void serverSDK.event.start()
+        void globalSDK.event.start()
       }, 0)
     }
   })
@@ -431,7 +415,7 @@ export function createServerSyncContext() {
   }
 
   const updateConfigMutation = useMutation(() => ({
-    mutationFn: (config: Config) => serverSDK.client.global.config.update({ config }),
+    mutationFn: (config: Config) => globalSDK.client.global.config.update({ config }),
     onSuccess: () => {
       bootstrap.refetch()
       // Invalidate all provider queries so newly configured custom providers
@@ -441,6 +425,9 @@ export function createServerSyncContext() {
     },
   }))
 
+  const dirSyncContexts = new Map<string, ReturnType<typeof createDirSyncContext>>()
+  const dirSyncContextRefCounts = new Map<string, number>()
+
   return {
     data: globalStore,
     set,
@@ -452,7 +439,6 @@ export function createServerSyncContext() {
     },
     child: children.child,
     peek: children.peek,
-    disableMcp: children.disableMcp,
     queryOptions: queryOptionsApi,
     // bootstrap,
     updateConfig: updateConfigMutation.mutateAsync,
@@ -460,25 +446,42 @@ export function createServerSyncContext() {
     todo: {
       set: setSessionTodo,
     },
+    createDirSyncContext: (directory: string) => {
+      onCleanup(() => {
+        dirSyncContextRefCounts.set(directory, (dirSyncContextRefCounts.get(directory) ?? 0) - 1)
+        if (dirSyncContextRefCounts.get(directory) === 0) {
+          dirSyncContexts.delete(directory)
+          dirSyncContextRefCounts.delete(directory)
+        }
+      })
+
+      const cached = dirSyncContexts.get(directory)
+      if (cached) {
+        dirSyncContextRefCounts.set(directory, (dirSyncContextRefCounts.get(directory) ?? 0) + 1)
+        return cached
+      }
+      const ctx = createDirSyncContext(globalSDK.createClient({ directory, throwOnError: true }), directory)
+      dirSyncContexts.set(directory, ctx)
+      dirSyncContextRefCounts.set(directory, 1)
+
+      return ctx
+    },
   }
 }
 
-export const { use: useServerSync, provider: ServerSyncProvider } = createSimpleContext({
-  name: "ServerSync",
-  init: () => {
-    const sync = createServerSyncContext()
+const GlobalSyncContext = createContext<ReturnType<typeof createGlobalSync>>()
 
-    return {
-      ...sync,
-      createDirSyncContext: createRefCountMap(
-        (dir) => createDirSyncContext(dir, sync),
-        (dir) => sync.disableMcp(dir),
-        directoryKey,
-      ),
-    }
-  },
-})
+export function GlobalSyncProvider(props: ParentProps) {
+  const value = createGlobalSync()
+  return <GlobalSyncContext.Provider value={value}>{props.children}</GlobalSyncContext.Provider>
+}
+
+export function useGlobalSync() {
+  const context = useContext(GlobalSyncContext)
+  if (!context) throw new Error("useGlobalSync must be used within GlobalSyncProvider")
+  return context
+}
 
 export function useQueryOptions() {
-  return useServerSync().queryOptions
+  return useGlobalSync().queryOptions
 }

packages/app/src/context/global-sync/bootstrap.test.ts

@@ -10,7 +10,6 @@ const provider = { all: new Map(), connected: [], default: {} } satisfies Normal
 
 describe("bootstrapDirectory", () => {
   test("marks a loading directory partial during bootstrap and complete after success", async () => {
-    const mcpReads: string[] = []
     const [store, setStore] = createStore<State>({
       status: "loading",
       agent: [],
@@ -45,7 +44,6 @@ describe("bootstrapDirectory", () => {
 
     await bootstrapDirectory({
       directory: "/project",
-      mcp: false,
       global: {
         config: {} satisfies Config,
         path: { state: "", config: "", worktree: "/project", directory: "/project", home: "/home" },
@@ -57,20 +55,10 @@ describe("bootstrapDirectory", () => {
         config: { get: async () => ({ data: {} }) },
         session: { status: async () => ({ data: {} }) },
         vcs: { get: async () => ({ data: undefined }) },
-        command: {
-          list: async () => {
-            mcpReads.push("command")
-            return { data: [] }
-          },
-        },
+        command: { list: async () => ({ data: [] }) },
         permission: { list: async () => ({ data: [] }) },
         question: { list: async () => ({ data: [] }) },
-        mcp: {
-          status: async () => {
-            mcpReads.push("status")
-            return { data: {} }
-          },
-        },
+        mcp: { status: async () => ({ data: {} }) },
         provider: { list: async () => ({ data: { all: [], connected: [], default: {} } }) },
       } as unknown as OpencodeClient,
       store,
@@ -86,6 +74,5 @@ describe("bootstrapDirectory", () => {
     await new Promise((resolve) => setTimeout(resolve, 80))
 
     expect(store.status).toBe("complete")
-    expect(mcpReads).toEqual([])
   })
 })

packages/app/src/context/global-sync/bootstrap.ts

@@ -9,7 +9,7 @@ import type {
   Session,
   Todo,
 } from "@opencode-ai/sdk/v2/client"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { getFilename } from "@opencode-ai/core/util/path"
 import { retry } from "@opencode-ai/core/util/retry"
 import { batch } from "solid-js"
@@ -18,7 +18,7 @@ import type { State, VcsCache } from "./types"
 import { cmp, normalizeAgentList, normalizeProviderList } from "./utils"
 import { formatServerError } from "@/utils/server-errors"
 import { QueryClient, queryOptions } from "@tanstack/solid-query"
-import { loadMcpQuery } from "../server-sync"
+import { loadMcpQuery } from "../global-sync"
 import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 
 type GlobalStore = {
@@ -105,7 +105,7 @@ export const loadProjectsQuery = (sdk: OpencodeClient) =>
   })
 
 export async function bootstrapGlobal(input: {
-  serverSDK: OpencodeClient
+  globalSDK: OpencodeClient
   requestFailedTitle: string
   translate: (key: string, vars?: Record<string, string | number>) => string
   formatMoreCount: (count: number) => string
@@ -113,12 +113,12 @@ export async function bootstrapGlobal(input: {
   queryClient: QueryClient
 }) {
   const slow = [
-    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.serverSDK)),
-    () => input.queryClient.fetchQuery(loadProvidersQuery(null, input.serverSDK)),
-    () => input.queryClient.fetchQuery(loadPathQuery(null, input.serverSDK)),
+    () => input.queryClient.fetchQuery(loadGlobalConfigQuery(input.globalSDK)),
+    () => input.queryClient.fetchQuery(loadProvidersQuery(null, input.globalSDK)),
+    () => input.queryClient.fetchQuery(loadPathQuery(null, input.globalSDK)),
     () =>
       input.queryClient
-        .fetchQuery(loadProjectsQuery(input.serverSDK))
+        .fetchQuery(loadProjectsQuery(input.globalSDK))
         .then((data) => input.setGlobalStore("project", data)),
   ]
   await runAll(slow)
@@ -198,7 +198,6 @@ export const loadPathQuery = (directory: string | null, sdk: OpencodeClient) =>
 
 export async function bootstrapDirectory(input: {
   directory: string
-  mcp: boolean
   sdk: OpencodeClient
   store: Store<State>
   setStore: SetStoreFunction<State>
@@ -251,7 +250,7 @@ export async function bootstrapDirectory(input: {
             if (next) input.vcsCache.setStore("value", next)
           }),
         ),
-      input.mcp && (() => retry(() => input.sdk.command.list().then((x) => input.setStore("command", x.data ?? [])))),
+      () => retry(() => input.sdk.command.list().then((x) => input.setStore("command", x.data ?? []))),
       () =>
         retry(() =>
           input.sdk.permission.list().then((x) => {
@@ -305,7 +304,7 @@ export async function bootstrapDirectory(input: {
           }),
         ),
       () => Promise.resolve(input.loadSessions(input.directory)),
-      input.mcp && (() => input.queryClient.fetchQuery(loadMcpQuery(input.directory, input.sdk))),
+      () => input.queryClient.fetchQuery(loadMcpQuery(input.directory, input.sdk)),
       () =>
         input.queryClient.fetchQuery(loadProvidersQuery(input.directory, input.sdk)).catch((err) => {
           const project = getFilename(input.directory)

packages/app/src/context/global-sync/child-store.test.ts

@@ -3,10 +3,9 @@ import { createRoot, getOwner, type Owner } from "solid-js"
 import { createStore } from "solid-js/store"
 import type { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 import type { State } from "./types"
-import type { QueryOptionsApi } from "../server-sync"
+import type { QueryOptionsApi } from "../global-sync"
 
 let createChildStoreManager: typeof import("./child-store").createChildStoreManager
-const querySingles: Array<() => { queryKey?: unknown[]; enabled?: boolean }> = []
 
 const child = () => createStore({} as State)
 const provider = { all: new Map(), connected: [], default: {} } satisfies NormalizedProviderListResponse
@@ -49,21 +48,12 @@ beforeAll(async () => {
     persisted: (_target: string, store: unknown[]) => [store[0], store[1], null, () => true],
   }))
   mock.module("@tanstack/solid-query", () => ({
-    useQuery: (options: () => { queryKey?: unknown[]; enabled?: boolean }) => {
-      querySingles.push(options)
-      return {
-        get isLoading() {
-          return options().queryKey?.[1] === "path"
-        },
-        get data() {
-          if (options().queryKey?.[1] === "path") throw new Error("pending path data read")
-          if (options().queryKey?.[1] === "mcp") return options().enabled ? { demo: { status: "disabled" } } : undefined
-          if (options().queryKey?.[1] === "lsp") return []
-          if (options().queryKey?.[1] === "providers") return provider
-          return undefined
-        },
-      }
-    },
+    useQueries: () => [
+      { isLoading: false, data: { state: "", config: "", worktree: "", directory: "", home: "" } },
+      { isLoading: false, data: {} },
+      { isLoading: false, data: [] },
+      { isLoading: false, data: provider },
+    ],
   }))
 
   createChildStoreManager = (await import("./child-store")).createChildStoreManager
@@ -83,7 +73,6 @@ describe("createChildStoreManager", () => {
       isBooting: () => false,
       isLoadingSessions: () => false,
       onBootstrap() {},
-      onMcp() {},
       onDispose() {},
       translate: (key) => key,
       queryOptions: queryOptionsApi,
@@ -114,7 +103,6 @@ describe("createChildStoreManager", () => {
         onBootstrap(directory) {
           bootstraps.push(directory)
         },
-        onMcp() {},
         onDispose() {},
         translate: (key) => key,
         queryOptions: queryOptionsApi,
@@ -133,76 +121,4 @@ describe("createChildStoreManager", () => {
       dispose()
     }
   })
-
-  test("provides the requested directory while the path query is pending", () => {
-    let manager: ReturnType<typeof createChildStoreManager> | undefined
-
-    const dispose = createOwner((owner) => {
-      manager = createChildStoreManager({
-        owner,
-        isBooting: () => false,
-        isLoadingSessions: () => false,
-        onBootstrap() {},
-        onMcp() {},
-        onDispose() {},
-        translate: (key) => key,
-        queryOptions: queryOptionsApi,
-        global: { provider },
-      })
-    })
-
-    try {
-      if (!manager) throw new Error("manager required")
-
-      const [store] = manager.child("/project", { bootstrap: false })
-
-      expect(store.path.directory).toBe("/project")
-      expect(store.path.worktree).toBe("")
-    } finally {
-      dispose()
-    }
-  })
-
-  test("enables MCP only when requested for the directory", () => {
-    let manager: ReturnType<typeof createChildStoreManager> | undefined
-    const offset = querySingles.length
-    const mcpLoads: string[] = []
-
-    const dispose = createOwner((owner) => {
-      manager = createChildStoreManager({
-        owner,
-        isBooting: () => false,
-        isLoadingSessions: () => false,
-        onBootstrap() {},
-        onMcp(directory) {
-          mcpLoads.push(directory)
-        },
-        onDispose() {},
-        translate: (key) => key,
-        queryOptions: queryOptionsApi,
-        global: { provider },
-      })
-    })
-
-    try {
-      if (!manager) throw new Error("manager required")
-      const [store, setStore] = manager.child("/project", { bootstrap: false })
-      expect(querySingles.length - offset).toBe(4)
-      const query = querySingles[offset + 1]
-      if (!query) throw new Error("query required")
-      expect(query().enabled).toBe(false)
-
-      setStore("status", "complete")
-      manager.child("/project", { bootstrap: false, mcp: true })
-      expect(query().enabled).toBe(true)
-      expect(store.mcp).toEqual({ demo: { status: "disabled" } })
-      expect(mcpLoads).toEqual(["/project"])
-
-      manager.disableMcp("/project")
-      expect(query().enabled).toBe(false)
-      expect(manager.mcp("/project")).toBe(false)
-    } finally {
-      dispose()
-    }
-  })
 })

packages/app/src/context/global-sync/child-store.ts

@@ -1,4 +1,4 @@
-import { createRoot, createSignal, getOwner, onCleanup, runWithOwner, type Owner } from "solid-js"
+import { createRoot, getOwner, onCleanup, runWithOwner, type Owner } from "solid-js"
 import { createStore, type SetStoreFunction, type Store } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
 import type { VcsInfo } from "@opencode-ai/sdk/v2/client"
@@ -14,8 +14,8 @@ import {
   type VcsCache,
 } from "./types"
 import { canDisposeDirectory, pickDirectoriesToEvict } from "./eviction"
-import { useQuery } from "@tanstack/solid-query"
-import { QueryOptionsApi } from "../server-sync"
+import { useQueries } from "@tanstack/solid-query"
+import { QueryOptionsApi } from "../global-sync"
 import { directoryKey, type DirectoryKey } from "./utils"
 import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
 
@@ -24,7 +24,6 @@ export function createChildStoreManager(input: {
   isBooting: (directory: string) => boolean
   isLoadingSessions: (directory: string) => boolean
   onBootstrap: (directory: string) => void
-  onMcp: (directory: string, setStore: SetStoreFunction<State>) => void
   onDispose: (directory: string) => void
   translate: (key: string, vars?: Record<string, string | number>) => string
   queryOptions: QueryOptionsApi
@@ -40,8 +39,6 @@ export function createChildStoreManager(input: {
   const pins = new Map<string, number>()
   const ownerPins = new WeakMap<object, Set<string>>()
   const disposers = new Map<string, () => void>()
-  const mcpDirectories = new Set<string>()
-  const mcpToggles = new Map<string, (enabled: boolean) => void>()
 
   const markKey = (key: DirectoryKey) => {
     if (!key) return
@@ -113,8 +110,6 @@ export function createChildStoreManager(input: {
     metaCache.delete(key)
     iconCache.delete(key)
     lifecycle.delete(key)
-    mcpDirectories.delete(key)
-    mcpToggles.delete(key)
     const dispose = disposers.get(key)
     if (dispose) {
       dispose()
@@ -178,12 +173,15 @@ export function createChildStoreManager(input: {
         createRoot((dispose) => {
           const initialMeta = meta[0].value
           const initialIcon = icon[0].value
-          const [mcpEnabled, setMcpEnabled] = createSignal(false)
 
-          const pathQuery = useQuery(() => input.queryOptions.path(key))
-          const mcpQuery = useQuery(() => ({ ...input.queryOptions.mcp(key), enabled: mcpEnabled() }))
-          const lspQuery = useQuery(() => input.queryOptions.lsp(key))
-          const providerQuery = useQuery(() => input.queryOptions.providers(key))
+          const [pathQuery, mcpQuery, lspQuery, providerQuery] = useQueries(() => ({
+            queries: [
+              input.queryOptions.path(key),
+              input.queryOptions.mcp(key),
+              input.queryOptions.lsp(key),
+              input.queryOptions.providers(key),
+            ],
+          }))
 
           const child = createStore<State>({
             project: "",
@@ -200,9 +198,9 @@ export function createChildStoreManager(input: {
             },
             config: {},
             get path() {
-              const EMPTY = { state: "", config: "", worktree: "", directory, home: "" }
-              if (pathQuery.isLoading) return EMPTY
-              return pathQuery.data ?? EMPTY
+              if (pathQuery.isLoading || !pathQuery.data)
+                return { state: "", config: "", worktree: "", directory: "", home: "" }
+              return pathQuery.data
             },
             status: "loading" as const,
             agent: [],
@@ -238,7 +236,6 @@ export function createChildStoreManager(input: {
           })
           children[key] = child
           disposers.set(key, dispose)
-          mcpToggles.set(key, setMcpEnabled)
 
           const onPersistedInit = (init: Promise<string> | string | null, run: () => void) => {
             if (!(init instanceof Promise)) return
@@ -277,7 +274,6 @@ export function createChildStoreManager(input: {
     const key = directoryKey(directory)
     const childStore = ensureChild(directory)
     pinForOwner(key)
-    if (options.mcp) enableMcp(directory, key, childStore)
     const shouldBootstrap = options.bootstrap ?? true
     if (shouldBootstrap && childStore[0].status === "loading") {
       input.onBootstrap(directory)
@@ -288,7 +284,6 @@ export function createChildStoreManager(input: {
   function peek(directory: string, options: ChildOptions = {}) {
     const key = directoryKey(directory)
     const childStore = ensureChild(directory)
-    if (options.mcp) enableMcp(directory, key, childStore)
     const shouldBootstrap = options.bootstrap ?? true
     if (shouldBootstrap && childStore[0].status === "loading") {
       input.onBootstrap(directory)
@@ -296,19 +291,6 @@ export function createChildStoreManager(input: {
     return childStore
   }
 
-  function enableMcp(directory: string, key: DirectoryKey, childStore: [Store<State>, SetStoreFunction<State>]) {
-    if (mcpDirectories.has(key)) return
-    mcpDirectories.add(key)
-    mcpToggles.get(key)?.(true)
-    if (childStore[0].status !== "loading") input.onMcp(directory, childStore[1])
-  }
-
-  function disableMcp(directory: string) {
-    const key = directoryKey(directory)
-    if (!mcpDirectories.delete(key)) return
-    mcpToggles.get(key)?.(false)
-  }
-
   function projectMeta(directory: string, patch: ProjectMeta) {
     const key = directoryKey(directory)
     const [store, setStore] = ensureChild(directory)
@@ -348,8 +330,6 @@ export function createChildStoreManager(input: {
     pin,
     unpin,
     pinned,
-    mcp: (directory: string) => mcpDirectories.has(directoryKey(directory)),
-    disableMcp,
     disposeDirectory,
     runEviction,
     vcsCache,

packages/app/src/context/global-sync/types.ts

@@ -98,7 +98,6 @@ export type IconCache = {
 
 export type ChildOptions = {
   bootstrap?: boolean
-  mcp?: boolean
 }
 
 export type DirState = {

packages/app/src/context/layout.tsx

@@ -2,8 +2,8 @@ import { createStore, produce } from "solid-js/store"
 import { batch, createEffect, createMemo, onCleanup, onMount, type Accessor } from "solid-js"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import { useServerSync } from "./server-sync"
-import { useServerSDK } from "./server-sdk"
+import { useGlobalSync } from "./global-sync"
+import { useGlobalSDK } from "./global-sdk"
 import { useServer } from "./server"
 import { usePlatform } from "./platform"
 import { Project } from "@opencode-ai/sdk/v2"
@@ -12,9 +12,6 @@ import { decode64 } from "@/utils/base64"
 import { same } from "@/utils/same"
 import { createScrollPersistence, type SessionScroll } from "./layout-scroll"
 import { createPathHelpers } from "./file/path"
-import type { ProjectAvatarVariant } from "@opencode-ai/ui/v2/project-avatar-v2"
-
-export type { ProjectAvatarVariant }
 
 const AVATAR_COLOR_KEYS = ["pink", "mint", "orange", "purple", "cyan", "lime"] as const
 const DEFAULT_SIDEBAR_WIDTH = 344
@@ -36,16 +33,6 @@ export function getAvatarColors(key?: string) {
   }
 }
 
-export function getProjectAvatarVariant(key?: string): ProjectAvatarVariant {
-  if (key === "orange") return "orange"
-  if (key === "pink") return "pink"
-  if (key === "cyan") return "cyan"
-  if (key === "purple") return "purple"
-  if (key === "mint") return "cyan"
-  if (key === "lime") return "green"
-  return "gray"
-}
-
 type SessionTabs = {
   active?: string
   all: string[]
@@ -149,8 +136,8 @@ const normalizeStoredSessionTabs = (key: string, tabs: SessionTabs) => {
 export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
   name: "Layout",
   init: () => {
-    const globalSdk = useServerSDK()
-    const serverSync = useServerSync()
+    const globalSdk = useGlobalSDK()
+    const globalSync = useGlobalSync()
     const server = useServer()
     const platform = usePlatform()
 
@@ -399,11 +386,11 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
     }
 
     function enrich(project: { worktree: string; expanded: boolean }) {
-      const [childStore] = serverSync.child(project.worktree, { bootstrap: false })
+      const [childStore] = globalSync.child(project.worktree, { bootstrap: false })
       const projectID = childStore.project
       const metadata = projectID
-        ? serverSync.data.project.find((x) => x.id === projectID)
-        : serverSync.data.project.find((x) => x.worktree === project.worktree)
+        ? globalSync.data.project.find((x) => x.id === projectID)
+        : globalSync.data.project.find((x) => x.worktree === project.worktree)
 
       // Preserve local icon override from per-workspace localStorage cache (childStore.icon).
       // Without this, different subdirectories of the same git repo would share the same
@@ -417,7 +404,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
 
     const roots = createMemo(() => {
       const map = new Map<string, string>()
-      for (const project of serverSync.data.project) {
+      for (const project of globalSync.data.project) {
         const sandboxes = project.sandboxes ?? []
         for (const sandbox of sandboxes) {
           map.set(sandbox, project.worktree)
@@ -483,12 +470,12 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
     createEffect(() => {
       const projects = enriched()
       if (projects.length === 0) return
-      if (!serverSync.ready) return
+      if (!globalSync.ready) return
 
       for (const project of projects) {
         if (!project.id) continue
         if (project.id === "global") continue
-        serverSync.project.icon(project.worktree, project.icon?.override)
+        globalSync.project.icon(project.worktree, project.icon?.override)
       }
     })
 
@@ -522,7 +509,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         colorRequested.set(worktree, color)
 
         if (project.id === "global") {
-          serverSync.project.meta(worktree, { icon: { color } })
+          globalSync.project.meta(worktree, { icon: { color } })
           continue
         }
 
@@ -544,7 +531,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           sessionTimer = undefined
           void Promise.all(
             server.projects.list().map((project) => {
-              return serverSync.project.loadSessions(project.worktree)
+              return globalSync.project.loadSessions(project.worktree)
             }),
           )
         }, 0)
@@ -573,7 +560,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         open(directory: string) {
           const root = rootFor(directory)
           if (server.projects.list().find((x) => x.worktree === root)) return
-          void serverSync.project.loadSessions(root)
+          void globalSync.project.loadSessions(root)
           server.projects.open(root)
         },
         close(directory: string) {

packages/app/src/context/notification.tsx

@@ -2,8 +2,8 @@ import { createStore, reconcile } from "solid-js/store"
 import { batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { useServerSDK } from "./server-sdk"
-import { useServerSync } from "./server-sync"
+import { useGlobalSDK } from "./global-sdk"
+import { useGlobalSync } from "./global-sync"
 import { usePlatform } from "@/context/platform"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
@@ -109,8 +109,8 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
   name: "Notification",
   init: () => {
     const params = useParams()
-    const serverSDK = useServerSDK()
-    const serverSync = useServerSync()
+    const globalSDK = useGlobalSDK()
+    const globalSync = useGlobalSync()
     const platform = usePlatform()
     const settings = useSettings()
     const language = useLanguage()
@@ -207,10 +207,10 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
 
     const lookup = async (directory: string, sessionID?: string) => {
       if (!sessionID) return undefined
-      const [syncStore] = serverSync.child(directory, { bootstrap: false })
+      const [syncStore] = globalSync.child(directory, { bootstrap: false })
       const match = Binary.search(syncStore.session, sessionID, (s) => s.id)
       if (match.found) return syncStore.session[match.index]
-      return serverSDK.client.session
+      return globalSDK.client.session
         .get({ directory, sessionID })
         .then((x) => x.data)
         .catch(() => undefined)
@@ -285,7 +285,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
       })
     }
 
-    const unsub = serverSDK.event.listen((e) => {
+    const unsub = globalSDK.event.listen((e) => {
       const event = e.details
       if (event.type !== "session.idle" && event.type !== "session.error") return
 

packages/app/src/context/permission.tsx

@@ -3,8 +3,8 @@ import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import type { PermissionRequest } from "@opencode-ai/sdk/v2/client"
 import { Persist, persisted } from "@/utils/persist"
-import { useServerSDK } from "@/context/server-sdk"
-import { useServerSync } from "./server-sync"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "./global-sync"
 import { useParams } from "@solidjs/router"
 import { decode64 } from "@/utils/base64"
 import {
@@ -48,13 +48,13 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
   name: "Permission",
   init: () => {
     const params = useParams()
-    const serverSDK = useServerSDK()
-    const serverSync = useServerSync()
+    const globalSDK = useGlobalSDK()
+    const globalSync = useGlobalSync()
 
     const permissionsEnabled = createMemo(() => {
       const directory = decode64(params.dir)
       if (!directory) return false
-      const [store] = serverSync.child(directory)
+      const [store] = globalSync.child(directory)
       return hasPermissionPromptRules(store.config.permission)
     })
 
@@ -86,7 +86,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       if (!ready()) return
       const directory = decode64(params.dir)
       if (!directory) return
-      const [childStore] = serverSync.child(directory)
+      const [childStore] = globalSync.child(directory)
       const perm = childStore.config.permission
       if (typeof perm === "string" && perm === "allow") {
         const key = directoryAcceptKey(directory)
@@ -118,7 +118,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     }
 
     const respond: PermissionRespondFn = (input) => {
-      serverSDK.client.permission.respond(input).catch(() => {
+      globalSDK.client.permission.respond(input).catch(() => {
         responded.delete(input.permissionID)
       })
     }
@@ -139,7 +139,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     }
 
     function isAutoAccepting(sessionID: string, directory?: string) {
-      const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : []
+      const session = directory ? globalSync.child(directory, { bootstrap: false })[0].session : []
       return autoRespondsPermission(store.autoAccept, session, { sessionID }, directory)
     }
 
@@ -148,7 +148,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
     }
 
     function shouldAutoRespond(permission: PermissionRequest, directory?: string) {
-      const session = directory ? serverSync.child(directory, { bootstrap: false })[0].session : []
+      const session = directory ? globalSync.child(directory, { bootstrap: false })[0].session : []
       return autoRespondsPermission(store.autoAccept, session, permission, directory)
     }
 
@@ -159,7 +159,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       return next
     }
 
-    const unsubscribe = serverSDK.event.listen((e) => {
+    const unsubscribe = globalSDK.event.listen((e) => {
       const event = e.details
       if (event?.type !== "permission.asked") return
 
@@ -178,7 +178,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
         }),
       )
 
-      serverSDK.client.permission
+      globalSDK.client.permission
         .list({ directory })
         .then((x) => {
           if (!isAutoAcceptingDirectory(directory)) return
@@ -210,7 +210,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
         }),
       )
 
-      serverSDK.client.permission
+      globalSDK.client.permission
         .list({ directory })
         .then((x) => {
           if (enableVersion.get(key) !== version) return
@@ -268,7 +268,7 @@ export const { use: usePermission, provider: PermissionProvider } = createSimple
       },
       permissionsEnabled,
       isPermissionAllowAll(directory: string) {
-        const [childStore] = serverSync.child(directory)
+        const [childStore] = globalSync.child(directory)
         const perm = childStore.config.permission
         return typeof perm === "string" && perm === "allow"
       },

packages/app/src/context/sdk.tsx

@@ -1,11 +1,11 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { useServerSDK } from "./server-sdk"
+import { useGlobalSDK } from "./global-sdk"
 
 export const { use: useSDK, provider: SDKProvider } = createSimpleContext({
   name: "SDK",
   init: (props: { directory: string }) => {
-    const serverSDK = useServerSDK()
+    const globalSDK = useGlobalSDK()
 
-    return serverSDK.createDirSdkContext(props.directory)
+    return globalSDK.createDirSyncContext(props.directory)
   },
 })

packages/app/src/context/server-sdk.tsx

@@ -1,290 +0,0 @@
-import type { Event } from "@opencode-ai/sdk/v2/client"
-import { createSimpleContext } from "@opencode-ai/ui/context"
-import { createGlobalEmitter } from "@solid-primitives/event-bus"
-import { makeEventListener } from "@solid-primitives/event-listener"
-import { batch, onCleanup, onMount } from "solid-js"
-import { createSdkForServer } from "@/utils/server"
-import { useLanguage } from "./language"
-import { usePlatform } from "./platform"
-import { ServerConnection, useServer } from "./server"
-import { createRefCountMap } from "@/utils/refcount"
-
-const isAbortError = (error: unknown) =>
-  error !== null && typeof error === "object" && "name" in error && error.name === "AbortError"
-
-function createServerSdkContext(server: ServerConnection.Any) {
-  const platform = usePlatform()
-  const abort = new AbortController()
-
-  const eventFetch = (() => {
-    if (!platform.fetch || !server) return
-    try {
-      const url = new URL(server.http.url)
-      const loopback = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "::1"
-      if (url.protocol === "http:" && !loopback) return platform.fetch
-    } catch {
-      return
-    }
-  })()
-
-  const eventSdk = createSdkForServer({
-    signal: abort.signal,
-    fetch: eventFetch,
-    server: server.http,
-  })
-  const emitter = createGlobalEmitter<{
-    [key: string]: Event
-  }>()
-
-  type Queued = { directory: string; payload: Event }
-  const FLUSH_FRAME_MS = 16
-  const STREAM_YIELD_MS = 8
-  const RECONNECT_DELAY_MS = 250
-
-  let queue: Queued[] = []
-  let buffer: Queued[] = []
-  const coalesced = new Map<string, number>()
-  const staleDeltas = new Set<string>()
-  let timer: ReturnType<typeof setTimeout> | undefined
-  let last = 0
-
-  const deltaKey = (directory: string, messageID: string, partID: string) => `${directory}:${messageID}:${partID}`
-
-  const key = (directory: string, payload: Event) => {
-    if (payload.type === "session.status") return `session.status:${directory}:${payload.properties.sessionID}`
-    if (payload.type === "lsp.updated") return `lsp.updated:${directory}`
-    if (payload.type === "message.part.updated") {
-      const part = payload.properties.part
-      return `message.part.updated:${directory}:${part.messageID}:${part.id}`
-    }
-  }
-
-  const flush = () => {
-    if (timer) clearTimeout(timer)
-    timer = undefined
-
-    if (queue.length === 0) return
-
-    const events = queue
-    const skip = staleDeltas.size > 0 ? new Set(staleDeltas) : undefined
-    queue = buffer
-    buffer = events
-    queue.length = 0
-    coalesced.clear()
-    staleDeltas.clear()
-
-    last = Date.now()
-    batch(() => {
-      for (const event of events) {
-        if (skip && event.payload.type === "message.part.delta") {
-          const props = event.payload.properties
-          if (skip.has(deltaKey(event.directory, props.messageID, props.partID))) continue
-        }
-        emitter.emit(event.directory, event.payload)
-      }
-    })
-
-    buffer.length = 0
-  }
-
-  const schedule = () => {
-    if (timer) return
-    const elapsed = Date.now() - last
-    timer = setTimeout(flush, Math.max(0, FLUSH_FRAME_MS - elapsed))
-  }
-
-  let streamErrorLogged = false
-  const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
-  const aborted = isAbortError
-
-  let attempt: AbortController | undefined
-  let run: Promise<void> | undefined
-  let started = false
-  const HEARTBEAT_TIMEOUT_MS = 15_000
-  let lastEventAt = Date.now()
-  let heartbeat: ReturnType<typeof setTimeout> | undefined
-  const resetHeartbeat = () => {
-    lastEventAt = Date.now()
-    if (heartbeat) clearTimeout(heartbeat)
-    heartbeat = setTimeout(() => {
-      attempt?.abort()
-    }, HEARTBEAT_TIMEOUT_MS)
-  }
-  const clearHeartbeat = () => {
-    if (!heartbeat) return
-    clearTimeout(heartbeat)
-    heartbeat = undefined
-  }
-
-  const start = () => {
-    if (started) return run
-    started = true
-    run = (async () => {
-      // oxlint-disable-next-line no-unmodified-loop-condition -- `started` is set to false by stop() which also aborts; both flags are checked to allow graceful exit
-      while (!abort.signal.aborted && started) {
-        attempt = new AbortController()
-        lastEventAt = Date.now()
-        const onAbort = () => {
-          attempt?.abort()
-        }
-        abort.signal.addEventListener("abort", onAbort)
-        try {
-          const events = await eventSdk.global.event({
-            signal: attempt.signal,
-            onSseError: (error) => {
-              if (aborted(error)) return
-              if (streamErrorLogged) return
-              streamErrorLogged = true
-              console.error("[global-sdk] event stream error", {
-                url: server.http.url,
-                fetch: eventFetch ? "platform" : "webview",
-                error,
-              })
-            },
-          })
-          let yielded = Date.now()
-          resetHeartbeat()
-          for await (const event of events.stream) {
-            resetHeartbeat()
-            streamErrorLogged = false
-            const directory = event.directory ?? "global"
-            if (event.payload.type === "sync") {
-              continue
-            }
-
-            const payload = event.payload as Event
-
-            const k = key(directory, payload)
-            if (k) {
-              const i = coalesced.get(k)
-              if (i !== undefined) {
-                queue[i] = { directory, payload }
-                if (payload.type === "message.part.updated") {
-                  const part = payload.properties.part
-                  staleDeltas.add(deltaKey(directory, part.messageID, part.id))
-                }
-                continue
-              }
-              coalesced.set(k, queue.length)
-            }
-            queue.push({ directory, payload })
-            schedule()
-
-            if (Date.now() - yielded < STREAM_YIELD_MS) continue
-            yielded = Date.now()
-            await wait(0)
-          }
-        } catch (error) {
-          if (!aborted(error) && !streamErrorLogged) {
-            streamErrorLogged = true
-            console.error("[global-sdk] event stream failed", {
-              url: server.http.url,
-              fetch: eventFetch ? "platform" : "webview",
-              error,
-            })
-          }
-        } finally {
-          abort.signal.removeEventListener("abort", onAbort)
-          attempt = undefined
-          clearHeartbeat()
-        }
-
-        if (abort.signal.aborted || !started) return
-        await wait(RECONNECT_DELAY_MS)
-      }
-    })().finally(() => {
-      run = undefined
-      flush()
-    })
-    return run
-  }
-
-  const stop = () => {
-    started = false
-    attempt?.abort()
-    clearHeartbeat()
-  }
-
-  onMount(() => {
-    makeEventListener(document, "visibilitychange", () => {
-      if (document.visibilityState !== "visible") return
-      if (!started) return
-      if (Date.now() - lastEventAt < HEARTBEAT_TIMEOUT_MS) return
-      attempt?.abort()
-    })
-  })
-
-  onCleanup(() => {
-    stop()
-    abort.abort()
-    flush()
-  })
-
-  const sdk = createSdkForServer({
-    server: server.http,
-    fetch: platform.fetch,
-    throwOnError: true,
-  })
-
-  return {
-    url: server.http.url,
-    client: sdk,
-    event: {
-      on: emitter.on.bind(emitter),
-      listen: emitter.listen.bind(emitter),
-      start,
-    },
-    createClient(opts: Omit<Parameters<typeof createSdkForServer>[0], "server" | "fetch">) {
-      return createSdkForServer({
-        server: server.http,
-        fetch: platform.fetch,
-        ...opts,
-      })
-    },
-  }
-}
-
-export const { use: useServerSDK, provider: ServerSDKProvider } = createSimpleContext({
-  name: "ServerSDK",
-  init: () => {
-    const language = useLanguage()
-    const server = useServer()
-
-    if (!server.current) throw new Error(language.t("error.serverSDK.noServerAvailable"))
-    const sdk = createServerSdkContext(server.current)
-    return {
-      ...sdk,
-      createDirSdkContext: createRefCountMap((dir) => createDirSdkContext(dir, sdk)),
-    }
-  },
-})
-
-type SDKEventMap = {
-  [key in Event["type"]]: Extract<Event, { type: key }>
-}
-
-function createDirSdkContext(directory: string, serverSDK: ReturnType<typeof createServerSdkContext>) {
-  const client = serverSDK.createClient({
-    directory,
-    throwOnError: true,
-  })
-
-  const emitter = createGlobalEmitter<SDKEventMap>()
-
-  const unsub = serverSDK.event.on(directory, (event) => {
-    emitter.emit(event.type, event)
-  })
-  onCleanup(unsub)
-
-  return {
-    directory,
-    client,
-    event: emitter,
-    get url() {
-      return serverSDK.url
-    },
-    createClient(opts: Parameters<typeof serverSDK.createClient>[0]) {
-      return serverSDK.createClient(opts)
-    },
-  }
-}

packages/app/src/context/server.tsx

@@ -1,7 +1,8 @@
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { type Accessor, batch, createMemo } from "solid-js"
+import { type Accessor, batch, createEffect, createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Persist, persisted } from "@/utils/persist"
+import { useCheckServerHealth } from "@/utils/server-health"
 
 type StoredProject = { worktree: string; expanded: boolean }
 type StoredServer = string | ServerConnection.HttpBase | ServerConnection.Http
@@ -36,30 +37,24 @@ export function resolveServerList(input: {
   props?: Array<ServerConnection.Any>
   stored: StoredServer[]
 }): Array<ServerConnection.Any> {
-  const deduped = new Map<ServerConnection.Key, ServerConnection.Any>(
-    input.props?.map((v) => [ServerConnection.key(v), v]) ?? [],
-  )
-
-  for (const value of input.stored) {
-    const conn: ServerConnection.Http =
+  const servers = [
+    ...input.stored.map((value) =>
       typeof value === "string"
         ? {
             type: "http" as const,
             http: { url: value },
           }
-        : "http" in value
-          ? value
-          : { type: "http", http: value }
-    const key = ServerConnection.key(conn)
+        : value,
+    ),
+    ...(input.props ?? []),
+  ]
 
-    const existing = deduped.get(key)
-    if (existing)
-      deduped.set(key, {
-        ...existing,
-        ...conn,
-        http: { ...existing.http, ...conn.http },
-      })
-    else deduped.set(key, conn)
+  const deduped = new Map<ServerConnection.Key, ServerConnection.Any>()
+  for (const value of servers) {
+    const conn: ServerConnection.Any = "type" in value ? value : { type: "http", http: value }
+    const key = ServerConnection.key(conn)
+    if (deduped.has(key) && conn.type === "http" && !conn.authToken) continue
+    deduped.set(key, conn)
   }
 
   return [...deduped.values()]
@@ -127,7 +122,13 @@ export namespace ServerConnection {
 
 export const { use: useServer, provider: ServerProvider } = createSimpleContext({
   name: "Server",
-  init: (props: { defaultServer: ServerConnection.Key; servers?: Array<ServerConnection.Any> }) => {
+  init: (props: {
+    defaultServer: ServerConnection.Key
+    disableHealthCheck?: boolean
+    servers?: Array<ServerConnection.Any>
+  }) => {
+    const checkServerHealth = useCheckServerHealth()
+
     const [store, setStore, _, ready] = persisted(
       Persist.global("server", ["server.v3"]),
       createStore({
@@ -145,8 +146,36 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
 
     const [state, setState] = createStore({
       active: props.defaultServer,
+      healthy: undefined as boolean | undefined,
     })
 
+    const healthy = () => state.healthy
+
+    function startHealthPolling(conn: ServerConnection.Any) {
+      let alive = true
+      let busy = false
+
+      const run = () => {
+        if (busy) return
+        busy = true
+        void check(conn)
+          .then((next) => {
+            if (!alive) return
+            setState("healthy", next)
+          })
+          .finally(() => {
+            busy = false
+          })
+      }
+
+      run()
+      const interval = setInterval(run, HEALTH_POLL_INTERVAL_MS)
+      return () => {
+        alive = false
+        clearInterval(interval)
+      }
+    }
+
     function setActive(input: ServerConnection.Key) {
       if (state.active !== input) setState("active", input)
     }
@@ -180,6 +209,20 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
 
     const isReady = createMemo(() => ready() && !!state.active)
 
+    const check = (conn: ServerConnection.Any) => checkServerHealth(conn.http).then((x) => x.healthy)
+
+    createEffect(() => {
+      const current_ = current()
+      if (!current_) return
+
+      if (props.disableHealthCheck) {
+        setState("healthy", true)
+        return
+      }
+      setState("healthy", undefined)
+      onCleanup(startHealthPolling(current_))
+    })
+
     const origin = createMemo(() => projectsKey(state.active))
     const projectsList = createMemo(() => store.projects[origin()] ?? [])
     const current: Accessor<ServerConnection.Any | undefined> = createMemo(
@@ -192,6 +235,7 @@ export const { use: useServer, provider: ServerProvider } = createSimpleContext(
 
     return {
       ready: isReady,
+      healthy,
       isLocal,
       get key() {
         return state.active

packages/app/src/context/servers.tsx

@@ -1,20 +0,0 @@
-import { createSimpleContext } from "@opencode-ai/ui/context"
-import { useServer } from "./server"
-import { useServerHealth } from "@/utils/server-health"
-
-export const { use: useServers, provider: ServersProvider } = createSimpleContext({
-  name: "Servers",
-  init: () => {
-    const server = useServer()
-
-    const health = useServerHealth(
-      () => server.list,
-      () => true,
-    )
-
-    return {
-      list: () => server.list,
-      health,
-    }
-  },
-})

packages/app/src/context/settings.tsx

@@ -32,8 +32,6 @@ export interface Settings {
     shellToolPartsExpanded: boolean
     editToolPartsExpanded: boolean
     showSessionProgressBar: boolean
-    showCustomAgents: boolean
-    newLayoutDesigns?: boolean
   }
   updates: {
     startup: boolean
@@ -55,7 +53,6 @@ export interface Settings {
 export const monoDefault = "System Mono"
 export const sansDefault = "System Sans"
 export const terminalDefault = "JetBrainsMono Nerd Font Mono"
-export const newLayoutDesignsDefault = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
 
 const monoFallback =
   'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
@@ -120,7 +117,6 @@ const defaultSettings: Settings = {
     shellToolPartsExpanded: false,
     editToolPartsExpanded: false,
     showSessionProgressBar: true,
-    showCustomAgents: false,
   },
   updates: {
     startup: true,
@@ -240,14 +236,6 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setShowSessionProgressBar(value: boolean) {
           setStore("general", "showSessionProgressBar", value)
         },
-        showCustomAgents: withFallback(() => store.general?.showCustomAgents, defaultSettings.general.showCustomAgents),
-        setShowCustomAgents(value: boolean) {
-          setStore("general", "showCustomAgents", value)
-        },
-        newLayoutDesigns: withFallback(() => store.general?.newLayoutDesigns, newLayoutDesignsDefault),
-        setNewLayoutDesigns(value: boolean) {
-          setStore("general", "newLayoutDesigns", value)
-        },
       },
       updates: {
         startup: withFallback(() => store.updates?.startup, defaultSettings.updates.startup),

packages/app/src/context/sync.tsx

@@ -1,5 +1,5 @@
 import { Binary } from "@opencode-ai/core/util/binary"
-import { useServerSync } from "./server-sync"
+import { useGlobalSync } from "./global-sync"
 import { useSDK } from "./sdk"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
 
@@ -109,8 +109,8 @@ export function applyOptimisticRemove(draft: OptimisticStore, input: OptimisticR
 }
 
 export const useSync = () => {
-  const serverSync = useServerSync()
+  const globalSync = useGlobalSync()
   const sdk = useSDK()
 
-  return serverSync.createDirSyncContext(sdk.directory)
+  return globalSync.createDirSyncContext(sdk.directory)
 }

packages/app/src/hooks/use-providers.ts

@@ -1,4 +1,4 @@
-import { useServerSync } from "@/context/server-sync"
+import { useGlobalSync } from "@/context/global-sync"
 import { decode64 } from "@/utils/base64"
 import { useParams } from "@solidjs/router"
 import { Iterable, pipe } from "effect"
@@ -17,15 +17,15 @@ export const popularProviders = [
 const popularProviderSet = new Set(popularProviders)
 
 export function useProviders() {
-  const serverSync = useServerSync()
+  const globalSync = useGlobalSync()
   const params = useParams()
   const dir = createMemo(() => decode64(params.dir) ?? "")
   const providers = () => {
     if (dir()) {
-      const [projectStore] = serverSync.child(dir())
+      const [projectStore] = globalSync.child(dir())
       if (projectStore.provider_ready) return projectStore.provider
     }
-    return serverSync.data.provider
+    return globalSync.data.provider
   }
   return {
     all: () => providers().all,

packages/app/src/i18n/ar.ts

@@ -413,7 +413,7 @@ export const dict = {
   "error.page.version": "الإصدار: {{version}}",
   "error.dev.rootNotFound":
     "لم يتم العثور على العنصر الجذري. هل نسيت إضافته إلى index.html؟ أو ربما تمت كتابة سمة id بشكل خاطئ؟",
-  "error.serverSync.connectFailed": "تعذر الاتصال بالخادم. هل هناك خادم يعمل في `{{url}}`؟",
+  "error.globalSync.connectFailed": "تعذر الاتصال بالخادم. هل هناك خادم يعمل في `{{url}}`؟",
   "directory.error.invalidUrl": "دليل غير صالح في عنوان URL.",
   "error.chain.unknown": "خطأ غير معروف",
   "error.chain.causedBy": "بسبب:",
@@ -837,8 +837,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "غير معروف",
   "error.page.circular": "[دائري]",
-  "error.serverSDK.noServerAvailable": "لا يوجد خادم متاح",
-  "error.serverSDK.serverNotAvailable": "الخادم غير متاح",
+  "error.globalSDK.noServerAvailable": "لا يوجد خادم متاح",
+  "error.globalSDK.serverNotAvailable": "الخادم غير متاح",
   "error.childStore.persistedCacheCreateFailed": "فشل إنشاء ذاكرة التخزين المؤقت الدائمة",
   "error.childStore.persistedProjectMetadataCreateFailed": "فشل إنشاء بيانات تعريف المشروع الدائمة",
   "error.childStore.persistedProjectIconCreateFailed": "فشل إنشاء أيقونة المشروع الدائمة",

packages/app/src/i18n/br.ts

@@ -414,7 +414,7 @@ export const dict = {
   "error.page.version": "Versão: {{version}}",
   "error.dev.rootNotFound":
     "Elemento raiz não encontrado. Você esqueceu de adicioná-lo ao seu index.html? Ou talvez o atributo id foi escrito incorretamente?",
-  "error.serverSync.connectFailed": "Não foi possível conectar ao servidor. Há um servidor executando em `{{url}}`?",
+  "error.globalSync.connectFailed": "Não foi possível conectar ao servidor. Há um servidor executando em `{{url}}`?",
   "directory.error.invalidUrl": "Diretório inválido na URL.",
   "error.chain.unknown": "Erro desconhecido",
   "error.chain.causedBy": "Causado por:",
@@ -850,8 +850,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "desconhecido",
   "error.page.circular": "[Circular]",
-  "error.serverSDK.noServerAvailable": "Nenhum servidor disponível",
-  "error.serverSDK.serverNotAvailable": "Servidor indisponível",
+  "error.globalSDK.noServerAvailable": "Nenhum servidor disponível",
+  "error.globalSDK.serverNotAvailable": "Servidor indisponível",
   "error.childStore.persistedCacheCreateFailed": "Falha ao criar cache persistente",
   "error.childStore.persistedProjectMetadataCreateFailed": "Falha ao criar metadados de projeto persistentes",
   "error.childStore.persistedProjectIconCreateFailed": "Falha ao criar ícone de projeto persistente",

packages/app/src/i18n/bs.ts

@@ -462,7 +462,7 @@ export const dict = {
   "error.dev.rootNotFound":
     "Korijenski element nije pronađen. Da li si zaboravio da ga dodaš u index.html? Ili je možda id atribut pogrešno napisan?",
 
-  "error.serverSync.connectFailed": "Nije moguće povezati se na server. Da li server radi na `{{url}}`?",
+  "error.globalSync.connectFailed": "Nije moguće povezati se na server. Da li server radi na `{{url}}`?",
   "directory.error.invalidUrl": "Nevažeći direktorij u URL-u.",
 
   "error.chain.unknown": "Nepoznata greška",
@@ -926,8 +926,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "nepoznato",
   "error.page.circular": "[Kružno]",
-  "error.serverSDK.noServerAvailable": "Nema dostupnog servera",
-  "error.serverSDK.serverNotAvailable": "Server nije dostupan",
+  "error.globalSDK.noServerAvailable": "Nema dostupnog servera",
+  "error.globalSDK.serverNotAvailable": "Server nije dostupan",
   "error.childStore.persistedCacheCreateFailed": "Nije uspjelo kreiranje trajnog keša",
   "error.childStore.persistedProjectMetadataCreateFailed": "Nije uspjelo kreiranje trajnih metapodataka projekta",
   "error.childStore.persistedProjectIconCreateFailed": "Nije uspjelo kreiranje trajne ikone projekta",

packages/app/src/i18n/da.ts

@@ -459,7 +459,7 @@ export const dict = {
   "error.dev.rootNotFound":
     "Rodelement ikke fundet. Har du glemt at tilføje det til din index.html? Eller måske er id-attributten stavet forkert?",
 
-  "error.serverSync.connectFailed": "Kunne ikke forbinde til server. Kører der en server på `{{url}}`?",
+  "error.globalSync.connectFailed": "Kunne ikke forbinde til server. Kører der en server på `{{url}}`?",
   "directory.error.invalidUrl": "Ugyldig mappe i URL.",
 
   "error.chain.unknown": "Ukendt fejl",
@@ -920,8 +920,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "ukendt",
   "error.page.circular": "[Cirkulær]",
-  "error.serverSDK.noServerAvailable": "Ingen server tilgængelig",
-  "error.serverSDK.serverNotAvailable": "Server ikke tilgængelig",
+  "error.globalSDK.noServerAvailable": "Ingen server tilgængelig",
+  "error.globalSDK.serverNotAvailable": "Server ikke tilgængelig",
   "error.childStore.persistedCacheCreateFailed": "Kunne ikke oprette vedvarende cache",
   "error.childStore.persistedProjectMetadataCreateFailed": "Kunne ikke oprette vedvarende projektmetadata",
   "error.childStore.persistedProjectIconCreateFailed": "Kunne ikke oprette vedvarende projektikon",

packages/app/src/i18n/de.ts

@@ -421,7 +421,7 @@ export const dict = {
   "error.page.version": "Version: {{version}}",
   "error.dev.rootNotFound":
     "Wurzelelement nicht gefunden. Haben Sie vergessen, es in Ihre index.html aufzunehmen? Oder wurde das id-Attribut falsch geschrieben?",
-  "error.serverSync.connectFailed": "Verbindung zum Server fehlgeschlagen. Läuft ein Server unter `{{url}}`?",
+  "error.globalSync.connectFailed": "Verbindung zum Server fehlgeschlagen. Läuft ein Server unter `{{url}}`?",
   "directory.error.invalidUrl": "Ungültiges Verzeichnis in der URL.",
   "error.chain.unknown": "Unbekannter Fehler",
   "error.chain.causedBy": "Verursacht durch:",
@@ -862,8 +862,8 @@ export const dict = {
   "common.key.insert": "Einfg",
   "common.unknown": "unbekannt",
   "error.page.circular": "[Zirkulär]",
-  "error.serverSDK.noServerAvailable": "Kein Server verfügbar",
-  "error.serverSDK.serverNotAvailable": "Server nicht verfügbar",
+  "error.globalSDK.noServerAvailable": "Kein Server verfügbar",
+  "error.globalSDK.serverNotAvailable": "Server nicht verfügbar",
   "error.childStore.persistedCacheCreateFailed": "Dauerhafter Cache konnte nicht erstellt werden",
   "error.childStore.persistedProjectMetadataCreateFailed": "Dauerhafte Projektmetadaten konnten nicht erstellt werden",
   "error.childStore.persistedProjectIconCreateFailed": "Dauerhaftes Projekticon konnte nicht erstellt werden",

packages/app/src/i18n/en.ts

@@ -221,7 +221,6 @@ export const dict = {
   "common.loading": "Loading",
   "common.loading.ellipsis": "...",
   "common.cancel": "Cancel",
-  "common.clear": "Clear",
   "common.open": "Open",
   "common.connect": "Connect",
   "common.disconnect": "Disconnect",
@@ -483,9 +482,9 @@ export const dict = {
   "error.dev.rootNotFound":
     "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
 
-  "error.serverSync.connectFailed": "Could not connect to server. Is there a server running at `{{url}}`?",
-  "error.serverSDK.noServerAvailable": "No server available",
-  "error.serverSDK.serverNotAvailable": "Server not available",
+  "error.globalSync.connectFailed": "Could not connect to server. Is there a server running at `{{url}}`?",
+  "error.globalSDK.noServerAvailable": "No server available",
+  "error.globalSDK.serverNotAvailable": "Server not available",
   "error.childStore.persistedCacheCreateFailed": "Failed to create persisted cache",
   "error.childStore.persistedProjectMetadataCreateFailed": "Failed to create persisted project metadata",
   "error.childStore.persistedProjectIconCreateFailed": "Failed to create persisted project icon",
@@ -531,10 +530,7 @@ export const dict = {
   "home.projects": "Projects",
   "home.project.add": "Add project",
   "home.sessions.search.placeholder": "Search sessions",
-  "home.sessions.search.sessions": "Sessions",
-  "home.sessions.search.noResults": "No sessions found for {{query}}",
   "home.sessions.empty": "No sessions found",
-  "home.sessions.empty.description": "Start a new session for this project",
   "home.sessions.group.today": "Today",
   "home.sessions.group.yesterday": "Yesterday",
   "home.sessions.group.older": "Older",
@@ -588,9 +584,6 @@ export const dict = {
   "session.revertDock.restore": "Restore message",
 
   "session.new.title": "Build anything",
-  "session.new.project.new": "New project",
-  "session.new.project.search": "Search projects",
-  "session.new.project.add": "Add project",
   "session.new.worktree.main": "Main branch",
   "session.new.worktree.mainWithBranch": "Main branch ({{branch}})",
   "session.new.worktree.create": "Create new worktree",
@@ -771,7 +764,7 @@ export const dict = {
   "settings.general.row.followup.option.queue": "Queue",
   "settings.general.row.followup.option.steer": "Steer",
   "settings.general.row.showFileTree.title": "File tree",
-  "settings.general.row.showFileTree.description": "Show the file tree panel in desktop sessions",
+  "settings.general.row.showFileTree.description": "Show the file tree toggle and panel in desktop sessions",
   "settings.general.row.showNavigation.title": "Navigation controls",
   "settings.general.row.showNavigation.description": "Show the back and forward buttons in the desktop title bar",
   "settings.general.row.showSearch.title": "Command palette",
@@ -780,8 +773,6 @@ export const dict = {
   "settings.general.row.showTerminal.description": "Show the terminal button in the desktop title bar",
   "settings.general.row.showStatus.title": "Server status",
   "settings.general.row.showStatus.description": "Show the server status button in the desktop title bar",
-  "settings.general.row.showCustomAgents.title": "Custom agents",
-  "settings.general.row.showCustomAgents.description": "Show the agent picker in the v2 desktop composer",
   "settings.general.row.reasoningSummaries.title": "Show reasoning summaries",
   "settings.general.row.reasoningSummaries.description": "Display model reasoning summaries in the timeline",
   "settings.general.row.shellToolPartsExpanded.title": "Expand shell tool parts",
@@ -793,8 +784,6 @@ export const dict = {
   "settings.general.row.showSessionProgressBar.title": "Show session progress bar",
   "settings.general.row.showSessionProgressBar.description":
     "Display the animated progress bar at the top of the session when the agent is working",
-  "settings.general.row.newLayoutDesigns.title": "New layout and designs",
-  "settings.general.row.newLayoutDesigns.description": "Enable the redesigned layout, home, composer, and session UI",
   "settings.general.row.pinchZoom.title": "Pinch to zoom",
   "settings.general.row.pinchZoom.description": "Allow trackpad pinch and Ctrl-scroll gestures to zoom",
 

packages/app/src/i18n/es.ts

@@ -462,7 +462,7 @@ export const dict = {
   "error.dev.rootNotFound":
     "Elemento raíz no encontrado. ¿Olvidaste añadirlo a tu index.html? ¿O tal vez el atributo id está mal escrito?",
 
-  "error.serverSync.connectFailed": "No se pudo conectar al servidor. ¿Hay un servidor ejecutándose en `{{url}}`?",
+  "error.globalSync.connectFailed": "No se pudo conectar al servidor. ¿Hay un servidor ejecutándose en `{{url}}`?",
   "directory.error.invalidUrl": "URL de directorio inválida.",
 
   "error.chain.unknown": "Error desconocido",
@@ -933,8 +933,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "desconocido",
   "error.page.circular": "[Circular]",
-  "error.serverSDK.noServerAvailable": "Ningún servidor disponible",
-  "error.serverSDK.serverNotAvailable": "Servidor no disponible",
+  "error.globalSDK.noServerAvailable": "Ningún servidor disponible",
+  "error.globalSDK.serverNotAvailable": "Servidor no disponible",
   "error.childStore.persistedCacheCreateFailed": "Error al crear caché persistente",
   "error.childStore.persistedProjectMetadataCreateFailed": "Error al crear metadatos de proyecto persistentes",
   "error.childStore.persistedProjectIconCreateFailed": "Error al crear icono de proyecto persistente",

packages/app/src/i18n/fr.ts

@@ -417,7 +417,7 @@ export const dict = {
   "error.page.version": "Version : {{version}}",
   "error.dev.rootNotFound":
     "Élément racine introuvable. Avez-vous oublié de l'ajouter à votre index.html ? Ou peut-être que l'attribut id est mal orthographié ?",
-  "error.serverSync.connectFailed":
+  "error.globalSync.connectFailed":
     "Impossible de se connecter au serveur. Y a-t-il un serveur en cours d'exécution à `{{url}}` ?",
   "directory.error.invalidUrl": "Répertoire invalide dans l'URL.",
   "error.chain.unknown": "Erreur inconnue",
@@ -860,8 +860,8 @@ export const dict = {
   "common.key.insert": "Inser",
   "common.unknown": "inconnu",
   "error.page.circular": "[Circulaire]",
-  "error.serverSDK.noServerAvailable": "Aucun serveur disponible",
-  "error.serverSDK.serverNotAvailable": "Serveur non disponible",
+  "error.globalSDK.noServerAvailable": "Aucun serveur disponible",
+  "error.globalSDK.serverNotAvailable": "Serveur non disponible",
   "error.childStore.persistedCacheCreateFailed": "Échec de la création du cache persistant",
   "error.childStore.persistedProjectMetadataCreateFailed":
     "Échec de la création des métadonnées de projet persistantes",

packages/app/src/i18n/ja.ts

@@ -413,7 +413,7 @@ export const dict = {
   "error.page.version": "バージョン: {{version}}",
   "error.dev.rootNotFound":
     "ルート要素が見つかりません。index.htmlに追加するのを忘れていませんか？またはid属性のスペルが間違っていませんか？",
-  "error.serverSync.connectFailed": "サーバーに接続できませんでした。`{{url}}`でサーバーが実行されていますか？",
+  "error.globalSync.connectFailed": "サーバーに接続できませんでした。`{{url}}`でサーバーが実行されていますか？",
   "directory.error.invalidUrl": "URL内のディレクトリが無効です。",
   "error.chain.unknown": "不明なエラー",
   "error.chain.causedBy": "原因:",
@@ -844,8 +844,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "不明",
   "error.page.circular": "[循環]",
-  "error.serverSDK.noServerAvailable": "利用可能なサーバーがありません",
-  "error.serverSDK.serverNotAvailable": "サーバーが利用できません",
+  "error.globalSDK.noServerAvailable": "利用可能なサーバーがありません",
+  "error.globalSDK.serverNotAvailable": "サーバーが利用できません",
   "error.childStore.persistedCacheCreateFailed": "永続キャッシュの作成に失敗しました",
   "error.childStore.persistedProjectMetadataCreateFailed": "永続プロジェクトメタデータの作成に失敗しました",
   "error.childStore.persistedProjectIconCreateFailed": "永続プロジェクトアイコンの作成に失敗しました",

packages/app/src/i18n/ko.ts

@@ -412,7 +412,7 @@ export const dict = {
   "error.page.version": "버전: {{version}}",
   "error.dev.rootNotFound":
     "루트 요소를 찾을 수 없습니다. index.html에 추가하는 것을 잊으셨나요? 또는 id 속성의 철자가 틀렸을 수 있습니다.",
-  "error.serverSync.connectFailed": "서버에 연결할 수 없습니다. `{{url}}`에서 서버가 실행 중인가요?",
+  "error.globalSync.connectFailed": "서버에 연결할 수 없습니다. `{{url}}`에서 서버가 실행 중인가요?",
   "directory.error.invalidUrl": "URL에 유효하지 않은 디렉터리가 있습니다.",
   "error.chain.unknown": "알 수 없는 오류",
   "error.chain.causedBy": "원인:",
@@ -839,8 +839,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "알 수 없음",
   "error.page.circular": "[순환]",
-  "error.serverSDK.noServerAvailable": "사용 가능한 서버 없음",
-  "error.serverSDK.serverNotAvailable": "서버를 사용할 수 없음",
+  "error.globalSDK.noServerAvailable": "사용 가능한 서버 없음",
+  "error.globalSDK.serverNotAvailable": "서버를 사용할 수 없음",
   "error.childStore.persistedCacheCreateFailed": "영구 캐시 생성 실패",
   "error.childStore.persistedProjectMetadataCreateFailed": "영구 프로젝트 메타데이터 생성 실패",
   "error.childStore.persistedProjectIconCreateFailed": "영구 프로젝트 아이콘 생성 실패",

packages/app/src/i18n/no.ts

@@ -463,7 +463,7 @@ export const dict = {
   "error.dev.rootNotFound":
     "Rotelement ikke funnet. Glemte du å legge det til i index.html? Eller kanskje id-attributten er feilstavet?",
 
-  "error.serverSync.connectFailed": "Kunne ikke koble til server. Kjører det en server på `{{url}}`?",
+  "error.globalSync.connectFailed": "Kunne ikke koble til server. Kjører det en server på `{{url}}`?",
   "directory.error.invalidUrl": "Invalid directory in URL.",
 
   "error.chain.unknown": "Ukjent feil",
@@ -927,8 +927,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "ukjent",
   "error.page.circular": "[Sirkulær]",
-  "error.serverSDK.noServerAvailable": "Ingen server tilgjengelig",
-  "error.serverSDK.serverNotAvailable": "Server ikke tilgjengelig",
+  "error.globalSDK.noServerAvailable": "Ingen server tilgjengelig",
+  "error.globalSDK.serverNotAvailable": "Server ikke tilgjengelig",
   "error.childStore.persistedCacheCreateFailed": "Kunne ikke opprette vedvarende hurtigbuffer",
   "error.childStore.persistedProjectMetadataCreateFailed": "Kunne ikke opprette vedvarende prosjektmetadata",
   "error.childStore.persistedProjectIconCreateFailed": "Kunne ikke opprette vedvarende prosjektikon",

packages/app/src/i18n/pl.ts

@@ -414,7 +414,7 @@ export const dict = {
   "error.page.version": "Wersja: {{version}}",
   "error.dev.rootNotFound":
     "Nie znaleziono elementu głównego. Czy zapomniałeś dodać go do swojego index.html? A może atrybut id został błędnie wpisany?",
-  "error.serverSync.connectFailed": "Nie można połączyć się z serwerem. Czy serwer działa pod adresem `{{url}}`?",
+  "error.globalSync.connectFailed": "Nie można połączyć się z serwerem. Czy serwer działa pod adresem `{{url}}`?",
   "directory.error.invalidUrl": "Nieprawidłowy katalog w URL.",
   "error.chain.unknown": "Nieznany błąd",
   "error.chain.causedBy": "Spowodowany przez:",
@@ -848,8 +848,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "nieznany",
   "error.page.circular": "[Cykliczne]",
-  "error.serverSDK.noServerAvailable": "Brak dostępnego serwera",
-  "error.serverSDK.serverNotAvailable": "Serwer niedostępny",
+  "error.globalSDK.noServerAvailable": "Brak dostępnego serwera",
+  "error.globalSDK.serverNotAvailable": "Serwer niedostępny",
   "error.childStore.persistedCacheCreateFailed": "Nie udało się utworzyć trwałej pamięci podręcznej",
   "error.childStore.persistedProjectMetadataCreateFailed": "Nie udało się utworzyć trwałych metadanych projektu",
   "error.childStore.persistedProjectIconCreateFailed": "Nie udało się utworzyć trwałej ikony projektu",

packages/app/src/i18n/ru.ts

@@ -461,7 +461,7 @@ export const dict = {
   "error.dev.rootNotFound":
     "Корневой элемент не найден. Вы забыли добавить его в index.html? Или, может быть, атрибут id был написан неправильно?",
 
-  "error.serverSync.connectFailed": "Не удалось подключиться к серверу. Запущен ли сервер по адресу `{{url}}`?",
+  "error.globalSync.connectFailed": "Не удалось подключиться к серверу. Запущен ли сервер по адресу `{{url}}`?",
   "directory.error.invalidUrl": "Недопустимая директория в URL.",
 
   "error.chain.unknown": "Неизвестная ошибка",
@@ -929,8 +929,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "неизвестно",
   "error.page.circular": "[Циклично]",
-  "error.serverSDK.noServerAvailable": "Нет доступного сервера",
-  "error.serverSDK.serverNotAvailable": "Сервер недоступен",
+  "error.globalSDK.noServerAvailable": "Нет доступного сервера",
+  "error.globalSDK.serverNotAvailable": "Сервер недоступен",
   "error.childStore.persistedCacheCreateFailed": "Не удалось создать постоянный кэш",
   "error.childStore.persistedProjectMetadataCreateFailed": "Не удалось создать постоянные метаданные проекта",
   "error.childStore.persistedProjectIconCreateFailed": "Не удалось создать постоянный значок проекта",

packages/app/src/i18n/th.ts

@@ -459,7 +459,7 @@ export const dict = {
 
   "error.dev.rootNotFound": "ไม่พบองค์ประกอบรูท คุณลืมเพิ่มใน index.html หรือบางทีแอตทริบิวต์ id อาจสะกดผิด?",
 
-  "error.serverSync.connectFailed": "ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ มีเซิร์ฟเวอร์ทำงานอยู่ที่ `{{url}}` หรือไม่?",
+  "error.globalSync.connectFailed": "ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ มีเซิร์ฟเวอร์ทำงานอยู่ที่ `{{url}}` หรือไม่?",
   "directory.error.invalidUrl": "ไดเรกทอรีใน URL ไม่ถูกต้อง",
 
   "error.chain.unknown": "ข้อผิดพลาดที่ไม่รู้จัก",
@@ -916,8 +916,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "ไม่ทราบ",
   "error.page.circular": "[วงกลม]",
-  "error.serverSDK.noServerAvailable": "ไม่มีเซิร์ฟเวอร์",
-  "error.serverSDK.serverNotAvailable": "เซิร์ฟเวอร์ไม่พร้อมใช้งาน",
+  "error.globalSDK.noServerAvailable": "ไม่มีเซิร์ฟเวอร์",
+  "error.globalSDK.serverNotAvailable": "เซิร์ฟเวอร์ไม่พร้อมใช้งาน",
   "error.childStore.persistedCacheCreateFailed": "ไม่สามารถสร้างแคชถาวร",
   "error.childStore.persistedProjectMetadataCreateFailed": "ไม่สามารถสร้างเมตาดาต้าโปรเจกต์ถาวร",
   "error.childStore.persistedProjectIconCreateFailed": "ไม่สามารถสร้างไอคอนโปรเจกต์ถาวร",

packages/app/src/i18n/tr.ts

@@ -465,7 +465,7 @@ export const dict = {
   "error.dev.rootNotFound":
     "Kök eleman bulunamadı. index.html dosyanıza eklemeyi unuttunuz mu? Ya da id özelliği yanlış mı yazıldı?",
 
-  "error.serverSync.connectFailed": "Sunucuya bağlanılamadı. `{{url}}` adresinde çalışan bir sunucu var mı?",
+  "error.globalSync.connectFailed": "Sunucuya bağlanılamadı. `{{url}}` adresinde çalışan bir sunucu var mı?",
   "directory.error.invalidUrl": "URL'de geçersiz dizin.",
 
   "error.chain.unknown": "Bilinmeyen hata",
@@ -935,8 +935,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "bilinmiyor",
   "error.page.circular": "[Döngüsel]",
-  "error.serverSDK.noServerAvailable": "Sunucu yok",
-  "error.serverSDK.serverNotAvailable": "Sunucu mevcut değil",
+  "error.globalSDK.noServerAvailable": "Sunucu yok",
+  "error.globalSDK.serverNotAvailable": "Sunucu mevcut değil",
   "error.childStore.persistedCacheCreateFailed": "Kalıcı önbellek oluşturulamadı",
   "error.childStore.persistedProjectMetadataCreateFailed": "Kalıcı proje meta verileri oluşturulamadı",
   "error.childStore.persistedProjectIconCreateFailed": "Kalıcı proje simgesi oluşturulamadı",

packages/app/src/i18n/uk.ts

@@ -483,9 +483,9 @@ export const dict = {
   "error.dev.rootNotFound":
     "Кореневий елемент не знайдено. Ви забули додати його до index.html? Або, можливо, атрибут id було написано з помилкою?",
 
-  "error.serverSync.connectFailed": "Не вдалося підключитися до сервера. Чи працює сервер за адресою `{{url}}`?",
-  "error.serverSDK.noServerAvailable": "Сервер недоступний",
-  "error.serverSDK.serverNotAvailable": "Сервер недоступний",
+  "error.globalSync.connectFailed": "Не вдалося підключитися до сервера. Чи працює сервер за адресою `{{url}}`?",
+  "error.globalSDK.noServerAvailable": "Сервер недоступний",
+  "error.globalSDK.serverNotAvailable": "Сервер недоступний",
   "error.childStore.persistedCacheCreateFailed": "Не вдалося створити постійний кеш",
   "error.childStore.persistedProjectMetadataCreateFailed": "Не вдалося створити постійні метадані проєкту",
   "error.childStore.persistedProjectIconCreateFailed": "Не вдалося створити постійну іконку проєкту",
@@ -759,7 +759,8 @@ export const dict = {
   "settings.general.row.followup.option.queue": "Черга",
   "settings.general.row.followup.option.steer": "Керування",
   "settings.general.row.showFileTree.title": "Дерево файлів",
-  "settings.general.row.showFileTree.description": "Показувати панель дерева файлів у сесіях на робочому столі",
+  "settings.general.row.showFileTree.description":
+    "Показувати перемикач і панель дерева файлів у сесіях на робочому столі",
   "settings.general.row.showNavigation.title": "Елементи навігації",
   "settings.general.row.showNavigation.description": "Показувати кнопки назад і вперед у заголовку робочого столу",
   "settings.general.row.showSearch.title": "Палітра команд",

packages/app/src/i18n/zh.ts

@@ -462,7 +462,7 @@ export const dict = {
   "error.page.report.discord": "在 Discord 上",
   "error.page.version": "版本：{{version}}",
   "error.dev.rootNotFound": "未找到根元素。你是不是忘了把它添加到 index.html？或者 id 属性拼写错了？",
-  "error.serverSync.connectFailed": "无法连接到服务器。是否有服务器正在 `{{url}}` 运行？",
+  "error.globalSync.connectFailed": "无法连接到服务器。是否有服务器正在 `{{url}}` 运行？",
 
   "directory.error.invalidUrl": "URL 中的目录无效。",
 
@@ -502,8 +502,6 @@ export const dict = {
   "home.projects": "项目",
   "home.project.add": "添加项目",
   "home.sessions.search.placeholder": "搜索会话",
-  "home.sessions.search.sessions": "会话",
-  "home.sessions.search.noResults": "未找到与 {{query}} 相关的会话",
   "home.sessions.empty": "未找到会话",
   "home.sessions.group.today": "今天",
   "home.sessions.group.yesterday": "昨天",
@@ -921,8 +919,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "未知",
   "error.page.circular": "[循环]",
-  "error.serverSDK.noServerAvailable": "无可用服务器",
-  "error.serverSDK.serverNotAvailable": "服务器不可用",
+  "error.globalSDK.noServerAvailable": "无可用服务器",
+  "error.globalSDK.serverNotAvailable": "服务器不可用",
   "error.childStore.persistedCacheCreateFailed": "创建持久化缓存失败",
   "error.childStore.persistedProjectMetadataCreateFailed": "创建持久化项目元数据失败",
   "error.childStore.persistedProjectIconCreateFailed": "创建持久化项目图标失败",

packages/app/src/i18n/zht.ts

@@ -457,7 +457,7 @@ export const dict = {
 
   "error.dev.rootNotFound": "找不到根元素。你是不是忘了把它新增到 index.html? 或者 id 屬性拼錯了?",
 
-  "error.serverSync.connectFailed": "無法連線到伺服器。是否有伺服器正在 `{{url}}` 執行?",
+  "error.globalSync.connectFailed": "無法連線到伺服器。是否有伺服器正在 `{{url}}` 執行?",
   "directory.error.invalidUrl": "URL 中的目錄無效。",
 
   "error.chain.unknown": "未知錯誤",
@@ -907,8 +907,8 @@ export const dict = {
   "common.key.insert": "Insert",
   "common.unknown": "未知",
   "error.page.circular": "[循環]",
-  "error.serverSDK.noServerAvailable": "無可用的伺服器",
-  "error.serverSDK.serverNotAvailable": "伺服器無法使用",
+  "error.globalSDK.noServerAvailable": "無可用的伺服器",
+  "error.globalSDK.serverNotAvailable": "伺服器無法使用",
   "error.childStore.persistedCacheCreateFailed": "建立持續性快取失敗",
   "error.childStore.persistedProjectMetadataCreateFailed": "建立持續性專案中繼資料失敗",
   "error.childStore.persistedProjectIconCreateFailed": "建立持續性專案圖示失敗",

packages/app/src/index.css

@@ -8,13 +8,6 @@
   font-style: normal;
 }
 
-@font-face {
-  font-family: "Inter";
-  src: url("/assets/Inter.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
 @layer components {
   @keyframes session-progress-whip {
     0% {

packages/app/src/pages/directory-layout.tsx

@@ -1,5 +1,5 @@
 import { DataProvider } from "@opencode-ai/ui/context"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"
 import { createEffect, createMemo, createResource, type ParentProps, Show } from "solid-js"

packages/app/src/pages/home.tsx

@@ -1,18 +1,15 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
-import { createEffect, createMemo, For, Match, on, onCleanup, onMount, Show, Switch } from "solid-js"
-import { makeEventListener } from "@solid-primitives/event-listener"
+import { createMemo, For, Match, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useQuery } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
 import { Logo } from "@opencode-ai/ui/logo"
 import { Spinner } from "@opencode-ai/ui/spinner"
-import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
-import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
-import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { TabStateIndicator } from "@opencode-ai/ui/v2/tab-state-indicator"
-import { getProjectAvatarVariant, useLayout, type LocalProject } from "@/context/layout"
+import { Avatar as AvatarV2 } from "@opencode-ai/ui/v2/components/avatar-v2.jsx"
+import { ButtonV2 } from "@opencode-ai/ui/v2/components/button-v2.jsx"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/components/icon.jsx"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
+import { getAvatarColors, useLayout, type LocalProject } from "@/context/layout"
 import { useNavigate } from "@solidjs/router"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -21,28 +18,23 @@ import { DateTime } from "luxon"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectDirectory } from "@/components/dialog-select-directory"
 import { DialogSelectServer } from "@/components/dialog-select-server"
-import { ServerConnection, useServer } from "@/context/server"
-import { useServerSync } from "@/context/server-sync"
-import { useServers } from "@/context/servers"
+import { useServer } from "@/context/server"
+import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
 import { displayName, getProjectAvatarSource, projectForSession, sortedRootSessions } from "@/pages/layout/helpers"
+import { getFilename } from "@opencode-ai/core/util/path"
 import { sessionTitle } from "@/utils/session-title"
 import { pathKey } from "@/utils/path-key"
 import { messageAgentColor } from "@/utils/agent"
 import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree"
-import { useCommand } from "@/context/command"
-import { useSettings } from "@/context/settings"
-import { ServerHealthIndicator } from "@/components/server/server-row"
 
+const USE_HOME_DESIGN = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
 const HOME_SESSION_LIMIT = 15
-const HOME_ROW_LAYOUT =
-  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
-const HOME_ROW_BASE = `${HOME_ROW_LAYOUT} border-0`
-const HOME_ROW = `${HOME_ROW_BASE} [font-weight:530] text-v2-text-text-muted hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover`
-const HOME_PROJECT_NAV_LABEL = "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
-const HOME_PROJECT_NAV_ROW = `${HOME_ROW_LAYOUT} h-7 gap-2 px-1.5 [font-weight:440] text-v2-text-text-muted hover:bg-v2-background-bg-layer-01 hover:text-v2-text-text-base hover:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:bg-v2-background-bg-layer-02 data-[selected]:text-v2-text-text-base data-[selected]:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)] data-[selected]:hover:bg-v2-background-bg-layer-02 focus-visible:bg-v2-background-bg-layer-01 focus-visible:text-v2-text-text-base focus-visible:[box-shadow:inset_0_0_0_0.5px_var(--v2-border-border-muted)]`
+const HOME_ROW =
+  "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] border-0 bg-transparent text-left [font-weight:530] text-v2-text-text-muted transition-colors duration-[120ms] ease-in-out hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
+const HOME_PROJECT_NAV_ROW = `${HOME_ROW} h-8 gap-1.5 px-3 [&>span]:min-w-0 [&>span]:overflow-hidden [&>span]:text-ellipsis [&>span]:whitespace-nowrap`
 const HOME_SECTION_LABEL = "text-v2-text-text-muted [font-weight:440]"
 
 type HomeSessionRecord = {
@@ -57,81 +49,29 @@ type HomeSessionGroup = {
   sessions: HomeSessionRecord[]
 }
 
-const HOME_SESSION_SEARCH_RESULTS_ID = "home-session-search-results"
-const HOME_SEARCH_RESULT_ROW =
-  "flex h-10 w-full shrink-0 cursor-default items-center gap-2 border-0 py-3 pl-4 pr-6 text-left transition-[background-color] duration-[120ms] ease-in-out hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
-const HOME_SEARCH_RESULT_TITLE =
-  "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-base [font-weight:530]"
-const HOME_SEARCH_RESULT_META =
-  "min-w-0 flex-[1_1_auto] overflow-hidden text-ellipsis whitespace-nowrap text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]"
-
-function buildHomeSessionRecords(input: {
-  sync: ReturnType<typeof useServerSync>
-  projectDirectories: () => string[]
-  projects: () => LocalProject[]
-  projectByID: () => Map<string, LocalProject>
-}) {
-  return [
-    ...new Map(
-      input
-        .projectDirectories()
-        .flatMap((directory) => sortedRootSessions(input.sync.child(directory, { bootstrap: false })[0], Date.now()))
-        .map((session) => [`${pathKey(session.directory)}:${session.id}`, session] as const),
-    ).values(),
-  ]
-    .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
-    .flatMap((session) => {
-      const project = projectForSession(session, input.projects(), input.projectByID())
-      if (!project) return []
-      return {
-        session,
-        project,
-        projectName: displayName(project),
-      }
-    })
-}
-
-function matchesHomeSessionSearch(record: HomeSessionRecord, query: string) {
-  return `${record.session.title} ${record.projectName}`.toLowerCase().includes(query)
-}
-
-function homeSessionSearchKey(record: HomeSessionRecord) {
-  return `${pathKey(record.session.directory)}:${record.session.id}`
-}
-
 export default function Home() {
-  const settings = useSettings()
-  return (
-    <Show when={settings.general.newLayoutDesigns()} fallback={<LegacyHome />}>
-      <HomeDesign />
-    </Show>
-  )
+  if (USE_HOME_DESIGN) return <HomeDesign />
+  return <LegacyHome />
 }
 
 function HomeDesign() {
-  const sync = useServerSync()
+  const sync = useGlobalSync()
   const layout = useLayout()
   const platform = usePlatform()
   const dialog = useDialog()
   const navigate = useNavigate()
   const server = useServer()
   const language = useLanguage()
-  const command = useCommand()
-  const notification = useNotification()
-  let focusSessionSearch: (() => void) | undefined
-  const [state, setState] = createStore({
-    search: "",
-    project: undefined as string | undefined,
-    searchFocused: false,
-  })
+  const [state, setState] = createStore({ search: "", project: undefined as string | undefined })
 
   const projects = createMemo(() => layout.projects.list())
-  const selectedProject = createMemo(() => projects().find((project) => project.worktree === state.project))
-  const directories = (project: LocalProject) => [project.worktree, ...(project.sandboxes ?? [])]
+  const selectedProject = createMemo(
+    () => projects().find((project) => project.worktree === state.project) ?? projects()[0],
+  )
   const projectDirectories = createMemo(() => {
     const project = selectedProject()
-    if (!project) return projects().flatMap(directories)
-    return directories(project)
+    if (!project) return []
+    return [project.worktree, ...(project.sandboxes ?? [])]
   })
   const search = createMemo(() => state.search.trim())
   const sessionLoad = useQuery(() => ({
@@ -145,46 +85,36 @@ function HomeDesign() {
   const projectByID = createMemo(
     () => new Map(projects().flatMap((project) => (project.id ? [[project.id, project] as const] : []))),
   )
-  const allRecords = createMemo(() =>
-    buildHomeSessionRecords({
-      sync,
-      projectDirectories,
-      projects,
-      projectByID,
-    }),
+  const records = createMemo(() =>
+    [
+      ...new Map(
+        projectDirectories()
+          .flatMap((directory) => sortedRootSessions(sync.child(directory, { bootstrap: false })[0], Date.now()))
+          .map((session) => [`${pathKey(session.directory)}:${session.id}`, session] as const),
+      ).values(),
+    ]
+      .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
+      .flatMap((session) => {
+        const project = projectForSession(session, projects(), projectByID())
+        if (!project) return []
+        return {
+          session,
+          project,
+          projectName: displayName(project),
+        }
+      })
+      .filter((record) => {
+        const value = search().toLowerCase()
+        if (!value) return true
+        return `${record.session.title} ${record.projectName}`.toLowerCase().includes(value)
+      })
+      .slice(0, HOME_SESSION_LIMIT),
   )
-  const records = createMemo(() => allRecords().slice(0, HOME_SESSION_LIMIT))
-  const searchResults = createMemo(() => {
-    const query = search().toLowerCase()
-    if (!query) return []
-    return allRecords().filter((record) => matchesHomeSessionSearch(record, query))
-  })
-  const searchOpen = createMemo(() => state.searchFocused && search().length > 0)
   const groups = createMemo(() => groupSessions(records(), language))
 
-  function closeSearch() {
-    setState("search", "")
-    setState("searchFocused", false)
-  }
-
-  function selectSearchSession(session: Session) {
-    openSession(session)
-    closeSearch()
-  }
-
-  command.register("home", () => [
-    {
-      id: "home.sessions.search.focus",
-      title: language.t("home.sessions.search.placeholder"),
-      keybind: "mod+f",
-      hidden: true,
-      onSelect: () => focusSessionSearch?.(),
-    },
-  ])
-
   function selectProject(directory: string) {
     if (!projects().some((project) => project.worktree === directory)) return
-    setState("project", state.project === directory ? undefined : directory)
+    setState("project", directory)
   }
 
   function addProject(directory: string) {
@@ -204,28 +134,6 @@ function HomeDesign() {
     navigate(`/${base64Encode(project.worktree)}/session`)
   }
 
-  function openProjectNewSession(directory: string) {
-    layout.projects.open(directory)
-    server.projects.touch(directory)
-    navigate(`/${base64Encode(directory)}/session`)
-  }
-
-  function editProject(project: LocalProject) {
-    void import("@/components/dialog-edit-project").then((x) => {
-      dialog.show(() => <x.DialogEditProject project={project} />)
-    })
-  }
-
-  function unseenCount(project: LocalProject) {
-    return directories(project).reduce((total, directory) => total + notification.project.unseenCount(directory), 0)
-  }
-
-  function clearNotifications(project: LocalProject) {
-    directories(project)
-      .filter((directory) => notification.project.unseenCount(directory) > 0)
-      .forEach((directory) => notification.project.markViewed(directory))
-  }
-
   function openSession(session: Session) {
     const project = projectForSession(session, projects(), projectByID())
     layout.projects.open(project?.worktree ?? session.directory)
@@ -259,7 +167,7 @@ function HomeDesign() {
   }
 
   function openSettings() {
-    void import("@/components/settings-v2").then((x) => {
+    void import("@/components/dialog-settings").then((x) => {
       dialog.show(() => <x.DialogSettings />)
     })
   }
@@ -270,37 +178,22 @@ function HomeDesign() {
         projects={projects()}
         selected={selectedProject()?.worktree}
         selectProject={selectProject}
-        openNewSession={openProjectNewSession}
         chooseProject={() => void chooseProject()}
-        editProject={editProject}
-        closeProject={(directory) => {
-          layout.projects.close(directory)
-          if (state.project === directory) setState("project", undefined)
-        }}
-        clearNotifications={clearNotifications}
-        unseenCount={unseenCount}
         openSettings={openSettings}
         openHelp={() => platform.openLink("https://opencode.ai/desktop-feedback")}
         language={language}
       />
 
-      <section class="min-w-0 flex-1 flex flex-col pt-12" aria-label={language.t("sidebar.project.recentSessions")}>
+      <section
+        class="min-w-0 flex-1 flex flex-col overflow-y-hidden pt-12"
+        aria-label={language.t("sidebar.project.recentSessions")}
+      >
         <HomeSessionSearch
           value={state.search}
           placeholder={language.t("home.sessions.search.placeholder")}
-          open={searchOpen()}
-          loading={sessionLoad.isLoading}
-          results={searchResults()}
-          noResultsLabel={language.t("home.sessions.search.noResults", { query: search() })}
-          bindFocus={(focus) => {
-            focusSessionSearch = focus
-          }}
           onInput={(value) => setState("search", value)}
-          onFocus={() => setState("searchFocused", true)}
-          onClose={closeSearch}
-          onSelect={selectSearchSession}
         />
-        <div class="mt-3 min-h-0 flex-1 overflow-y-auto">
+        <div class="mt-3 overflow-auto flex-1">
           <div class="pt-3 flex flex-col gap-6">
             <Show when={!sessionLoad.isLoading} fallback={<HomeSessionSkeleton label={language.t("common.loading")} />}>
               <Show
@@ -339,20 +232,14 @@ function HomeProjectColumn(props: {
   projects: LocalProject[]
   selected?: string
   selectProject: (directory: string) => void
-  openNewSession: (directory: string) => void
   chooseProject: () => void
-  editProject: (project: LocalProject) => void
-  closeProject: (directory: string) => void
-  clearNotifications: (project: LocalProject) => void
-  unseenCount: (project: LocalProject) => number
   openSettings: () => void
   openHelp: () => void
   language: ReturnType<typeof useLanguage>
 }) {
-  const servers = useServers()
   return (
-    <aside class="flex min-w-0 flex-col lg:pt-[52px] mt-14 gap-4" aria-label={props.language.t("home.projects")}>
-      <div class="flex h-7 min-w-0 items-center justify-between pl-1.5">
+    <aside class="flex min-w-0 flex-col lg:pt-[52px]" aria-label={props.language.t("home.projects")}>
+      <div class="flex h-7 min-w-0 items-center justify-between pl-3">
         <div class={HOME_SECTION_LABEL}>{props.language.t("home.projects")}</div>
         <IconButtonV2
           data-action="home-add-project"
@@ -364,49 +251,46 @@ function HomeProjectColumn(props: {
           aria-label={props.language.t("home.project.add")}
         />
       </div>
-      <Show when={servers.list().length > 1} fallback={<HomeProjectList {...props} />}>
-        <For each={servers.list()}>
-          {(item) => {
-            const key = ServerConnection.key(item)
-            const healthy = () => !!servers.health[key]?.healthy
-            const [state, setState] = createStore({ open: true })
-            return (
-              <div class="flex max-h-[min(572px,calc(100vh_-_300px))] min-w-0 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <button
-                  type="button"
-                  class={`${HOME_PROJECT_NAV_ROW} disabled:opacity-60`}
-                  disabled={!healthy()}
-                  onClick={() => setState("open", !state.open)}
-                >
-                  <div class="flex size-4 shrink-0 items-center justify-center">
-                    <ServerHealthIndicator health={servers.health[key]} />
-                  </div>
-                  <span class={HOME_PROJECT_NAV_LABEL}>{item.displayName ?? new URL(item.http.url).host}</span>
-                  <Show when={healthy()}>
-                    <IconV2
-                      name="outline-chevron-down"
-                      class="shrink-0 text-v2-icon-icon-muted data-[open=false]:-rotate-90"
-                      data-open={state.open}
-                    />
-                  </Show>
-                </button>
-                <Show when={healthy() && state.open}>
-                  <div class="mx-3 h-px bg-v2-border-border-base" />
-                  <HomeProjectList {...props} />
-                </Show>
-              </div>
-            )
-          }}
-        </For>
-      </Show>
-      <div class="flex min-w-0 flex-col gap-1">
+      <div class="mt-4 flex max-h-[min(572px,calc(100vh_-_300px))] min-w-0 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <Show
+          when={props.projects.length > 0}
+          fallback={
+            <button
+              type="button"
+              class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
+              onClick={props.chooseProject}
+            >
+              <IconV2 name="folder-add-left" size="small" />
+              <span>{props.language.t("home.project.add")}</span>
+            </button>
+          }
+        >
+          <For each={props.projects}>
+            {(project) => (
+              <button
+                type="button"
+                data-component="home-project-row"
+                class={HOME_PROJECT_NAV_ROW}
+                classList={{ "bg-v2-overlay-simple-overlay-hover": props.selected === project.worktree }}
+                data-selected={props.selected === project.worktree ? "" : undefined}
+                aria-current={props.selected === project.worktree ? "page" : undefined}
+                onClick={() => props.selectProject(project.worktree)}
+              >
+                <HomeProjectAvatar project={project} />
+                <span>{displayName(project)}</span>
+              </button>
+            )}
+          </For>
+        </Show>
+      </div>
+      <div class="mt-4 flex min-w-0 flex-col gap-1">
         <button
           type="button"
           class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
           onClick={props.openSettings}
         >
           <IconV2 name="settings-gear" size="small" />
-          <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.settings")}</span>
+          <span>{props.language.t("sidebar.settings")}</span>
         </button>
         <button
           type="button"
@@ -414,444 +298,55 @@ function HomeProjectColumn(props: {
           onClick={props.openHelp}
         >
           <IconV2 name="help" size="small" />
-          <span class={HOME_PROJECT_NAV_LABEL}>{props.language.t("sidebar.help")}</span>
+          <span>{props.language.t("sidebar.help")}</span>
         </button>
       </div>
     </aside>
   )
 }
 
-function HomeProjectList(props: {
-  projects: LocalProject[]
-  selected?: string
-  selectProject: (directory: string) => void
-  openNewSession: (directory: string) => void
-  chooseProject: () => void
-  editProject: (project: LocalProject) => void
-  closeProject: (directory: string) => void
-  clearNotifications: (project: LocalProject) => void
-  unseenCount: (project: LocalProject) => number
-  language: ReturnType<typeof useLanguage>
-}) {
-  return (
-    <Show
-      when={props.projects.length > 0}
-      fallback={
-        <button
-          type="button"
-          class={`${HOME_PROJECT_NAV_ROW} text-v2-text-text-faint [&>[data-slot=icon-svg]]:text-v2-icon-icon-muted`}
-          onClick={props.chooseProject}
-        >
-          <IconV2 name="folder-add-left" size="small" />
-          <span>{props.language.t("home.project.add")}</span>
-        </button>
-      }
-    >
-      <For each={props.projects}>
-        {(project) => (
-          <HomeProjectRow
-            project={project}
-            selected={props.selected === project.worktree}
-            unseenCount={props.unseenCount(project)}
-            selectProject={props.selectProject}
-            openNewSession={props.openNewSession}
-            editProject={props.editProject}
-            closeProject={props.closeProject}
-            clearNotifications={props.clearNotifications}
-            language={props.language}
-          />
-        )}
-      </For>
-    </Show>
-  )
-}
-
-function HomeProjectRow(props: {
-  project: LocalProject
-  selected: boolean
-  unseenCount: number
-  selectProject: (directory: string) => void
-  openNewSession: (directory: string) => void
-  editProject: (project: LocalProject) => void
-  closeProject: (directory: string) => void
-  clearNotifications: (project: LocalProject) => void
-  language: ReturnType<typeof useLanguage>
-}) {
-  const [state, setState] = createStore({ menuOpen: false })
-  return (
-    <div class="group/project relative flex h-7 min-w-0 items-center rounded-[6px]">
-      <button
-        type="button"
-        data-component="home-project-row"
-        class={`${HOME_PROJECT_NAV_ROW} pr-16`}
-        data-selected={props.selected ? "" : undefined}
-        aria-current={props.selected ? "page" : undefined}
-        onClick={() => props.selectProject(props.project.worktree)}
-      >
-        <HomeProjectAvatar project={props.project} />
-        <span class={HOME_PROJECT_NAV_LABEL}>{displayName(props.project)}</span>
-      </button>
-      <div
-        class="absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-0 transition-opacity group-hover/project:opacity-100 focus-within:opacity-100 data-[menu=true]:opacity-100"
-        data-menu={state.menuOpen}
-      >
-        <MenuV2
-          gutter={4}
-          modal={false}
-          placement="bottom-end"
-          open={state.menuOpen}
-          onOpenChange={(open) => setState("menuOpen", open)}
-        >
-          <MenuV2.Trigger
-            as={IconButtonV2}
-            data-action="home-project-menu"
-            variant="ghost-muted"
-            size="small"
-            icon={<IconV2 name="outline-dots" />}
-            aria-label={props.language.t("common.moreOptions")}
-          />
-          <MenuV2.Portal>
-            <MenuV2.Content>
-              <MenuV2.Item onSelect={() => props.openNewSession(props.project.worktree)}>
-                {props.language.t("command.session.new")}
-              </MenuV2.Item>
-              <MenuV2.Item onSelect={() => props.editProject(props.project)}>
-                {props.language.t("common.edit")}
-              </MenuV2.Item>
-              <MenuV2.Item disabled={props.unseenCount === 0} onSelect={() => props.clearNotifications(props.project)}>
-                {props.language.t("sidebar.project.clearNotifications")}
-              </MenuV2.Item>
-              <MenuV2.Separator />
-              <MenuV2.Item onSelect={() => props.closeProject(props.project.worktree)}>
-                {props.language.t("common.close")}
-              </MenuV2.Item>
-            </MenuV2.Content>
-          </MenuV2.Portal>
-        </MenuV2>
-        <IconButtonV2
-          data-action="home-project-new-session"
-          variant="ghost-muted"
-          size="small"
-          icon={<IconV2 name="edit" />}
-          aria-label={props.language.t("command.session.new")}
-          onClick={() => props.openNewSession(props.project.worktree)}
-        />
-      </div>
-    </div>
-  )
-}
-
 function HomeProjectAvatar(props: { project: LocalProject }) {
   const name = createMemo(() => displayName(props.project))
   return (
-    <ProjectAvatar
+    <AvatarV2
       fallback={name()}
       src={getProjectAvatarSource(props.project.id, props.project.icon)}
-      variant={getProjectAvatarVariant(props.project.icon?.color)}
+      kind="org"
+      size="small"
+      {...getAvatarColors(props.project.icon?.color)}
+      class="size-4 rounded"
     />
   )
 }
 
-function HomeSessionSearch(props: {
-  value: string
-  placeholder: string
-  open: boolean
-  loading: boolean
-  results: HomeSessionRecord[]
-  noResultsLabel: string
-  bindFocus: (focus: () => void) => void
-  onInput: (value: string) => void
-  onFocus: () => void
-  onClose: () => void
-  onSelect: (session: Session) => void
-}) {
-  const language = useLanguage()
-  const [store, setStore] = createStore({ active: "" })
-  let root: HTMLDivElement | undefined
-  let input: HTMLInputElement | undefined
-  let listRef: HTMLDivElement | undefined
-
-  const focusInput = () => {
-    input?.focus()
-    props.onFocus()
-  }
-
-  onMount(() => {
-    props.bindFocus(focusInput)
-  })
-
-  const syncActive = (results: HomeSessionRecord[]) => {
-    if (results.length === 0) {
-      setStore("active", "")
-      return
-    }
-    if (!results.some((record) => homeSessionSearchKey(record) === store.active)) {
-      setStore("active", homeSessionSearchKey(results[0]))
-    }
-  }
-
-  createEffect(() => syncActive(props.results))
-
-  createEffect(
-    on(
-      () => props.value,
-      () => syncActive(props.results),
-    ),
-  )
-
-  const scrollActiveIntoView = () => {
-    const key = store.active
-    if (!key || !listRef) return
-    const element = listRef.querySelector<HTMLElement>(`[data-key="${key}"]`)
-    element?.scrollIntoView({ block: "nearest" })
-  }
-
-  const moveActive = (delta: number) => {
-    const results = props.results
-    if (results.length === 0) return
-    const index = results.findIndex((record) => homeSessionSearchKey(record) === store.active)
-    const start = index === -1 ? 0 : index
-    const next = (start + delta + results.length) % results.length
-    setStore("active", homeSessionSearchKey(results[next]))
-    scrollActiveIntoView()
-  }
-
-  const selectActive = () => {
-    const record = props.results.find((item) => homeSessionSearchKey(item) === store.active)
-    if (!record) return
-    props.onSelect(record.session)
-  }
-
-  onCleanup(
-    makeEventListener(document, "pointerdown", (event) => {
-      if (!props.open) return
-      const target = event.target
-      if (!(target instanceof Node)) return
-      if (root?.contains(target)) return
-      props.onClose()
-    }),
-  )
-
+function HomeSessionSearch(props: { value: string; placeholder: string; onInput: (value: string) => void }) {
   return (
-    <div class="ml-4 mr-2 w-[calc(100%_-_24px)]">
-      <div ref={root} data-component="home-session-search" class="relative z-10 w-full">
-        <Show when={props.open}>
-          <div
-            data-component="home-session-search-panel"
-            class="absolute flex flex-col rounded-[12px] bg-v2-background-bg-base shadow-[var(--v2-elevation-floating)]"
-            style={{
-              top: "-6px",
-              left: "-6px",
-              width: "calc(100% + 14px)",
-            }}
-          >
-            <div class="flex flex-col pt-9">
-              <div id={HOME_SESSION_SEARCH_RESULTS_ID} role="listbox" class="flex flex-col gap-4 pt-4 pb-2">
-                <Show
-                  when={!props.loading}
-                  fallback={
-                    <div class="flex items-center justify-center px-4 py-3 text-v2-text-text-muted [font-weight:440]">
-                      <Spinner class="size-4" />
-                    </div>
-                  }
-                >
-                  <Show
-                    when={props.results.length > 0}
-                    fallback={
-                      <p class="my-1.5 px-4 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
-                        {props.noResultsLabel}
-                      </p>
-                    }
-                  >
-                    <div class="flex flex-col">
-                      <p class="my-1.5 px-4 text-[13px] leading-4 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
-                        {language.t("home.sessions.search.sessions")}
-                      </p>
-                      <div ref={listRef} class="flex max-h-80 flex-col gap-px overflow-y-auto">
-                        <For each={props.results}>
-                          {(record) => (
-                            <HomeSessionSearchResultRow
-                              record={record}
-                              selected={store.active === homeSessionSearchKey(record)}
-                              onHighlight={() => setStore("active", homeSessionSearchKey(record))}
-                              onSelect={(session) => props.onSelect(session)}
-                            />
-                          )}
-                        </For>
-                      </div>
-                    </div>
-                  </Show>
-                </Show>
-              </div>
-            </div>
-          </div>
-        </Show>
-        <label
-          class="relative z-20 flex h-9 w-full items-center gap-2 rounded-[6px] py-1 pl-3 pr-2 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out"
-          classList={{
-            "bg-v2-background-bg-deep focus-within:bg-v2-background-bg-base focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]":
-              !props.open,
-            "bg-transparent shadow-[0_0_0_0.5px_var(--v2-border-border-focus)]": props.open,
-          }}
-        >
-          <IconV2 name="magnifying-glass" />
-          <input
-            ref={input}
-            class="relative z-20 min-w-0 flex-1 border-0 bg-transparent text-v2-text-text-base outline-0 [font-weight:440] placeholder:text-v2-text-text-faint"
-            value={props.value}
-            placeholder={props.placeholder}
-            aria-label={props.placeholder}
-            aria-expanded={props.open}
-            aria-controls={HOME_SESSION_SEARCH_RESULTS_ID}
-            aria-autocomplete="list"
-            aria-activedescendant={
-              store.active && props.open ? `home-session-search-option-${store.active}` : undefined
-            }
-            onFocus={() => props.onFocus()}
-            onInput={(event) => props.onInput(event.currentTarget.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Escape") {
-                event.preventDefault()
-                props.onClose()
-                input?.blur()
-                return
-              }
-              if (!props.open || props.results.length === 0) return
-              if (event.altKey || event.metaKey) return
-              if (event.key === "ArrowDown") {
-                event.preventDefault()
-                moveActive(1)
-                return
-              }
-              if (event.key === "ArrowUp") {
-                event.preventDefault()
-                moveActive(-1)
-                return
-              }
-              if (event.key === "Enter" && !event.isComposing) {
-                event.preventDefault()
-                selectActive()
-              }
-            }}
-          />
-          <Show when={props.value}>
-            <IconButtonV2
-              type="button"
-              variant="ghost-muted"
-              size="small"
-              class="relative z-20 shrink-0"
-              icon={<IconV2 name="close" size="large" class="text-v2-icon-icon-muted" />}
-              aria-label={props.placeholder}
-              onClick={() => {
-                props.onClose()
-                input?.focus()
-              }}
-            />
-          </Show>
-        </label>
-      </div>
-    </div>
-  )
-}
-
-function HomeSessionSearchResultRow(props: {
-  record: HomeSessionRecord
-  selected: boolean
-  onHighlight: () => void
-  onSelect: (session: Session) => void
-}) {
-  const globalSync = useServerSync()
-  const notification = useNotification()
-  const permission = usePermission()
-  const [sessionStore] = globalSync.child(props.record.session.directory, { bootstrap: false })
-  const title = createMemo(() => sessionTitle(props.record.session.title) || props.record.session.id)
-  const unseenCount = createMemo(() => notification.session.unseenCount(props.record.session.id))
-  const hasError = createMemo(() => notification.session.unseenHasError(props.record.session.id))
-  const hasPermissions = createMemo(
-    () =>
-      !!sessionPermissionRequest(sessionStore.session, sessionStore.permission, props.record.session.id, (item) => {
-        return !permission.autoResponds(item, props.record.session.directory)
-      }),
-  )
-  const isWorking = createMemo(() => {
-    if (hasPermissions()) return false
-    return sessionStore.session_working(props.record.session.id)
-  })
-  const tint = createMemo(() => messageAgentColor(sessionStore.message[props.record.session.id], sessionStore.agent))
-  const showStatus = createMemo(() => isWorking() || hasPermissions() || hasError() || unseenCount() > 0)
-
-  const key = () => homeSessionSearchKey(props.record)
-
-  return (
-    <button
-      type="button"
-      id={`home-session-search-option-${key()}`}
-      data-key={key()}
-      data-component="home-session-search-row"
-      role="option"
-      aria-selected={props.selected}
-      classList={{
-        [HOME_SEARCH_RESULT_ROW]: true,
-        "bg-v2-overlay-simple-overlay-hover": props.selected,
-      }}
-      onMouseEnter={() => props.onHighlight()}
-      onClick={() => props.onSelect(props.record.session)}
-    >
-      <Show
-        when={showStatus()}
-        fallback={
-          <div class="flex size-4 shrink-0 items-center justify-center">
-            <TabStateIndicator />
-          </div>
-        }
-      >
-        <div
-          class="flex size-4 shrink-0 items-center justify-center"
-          style={{ color: tint() ?? "var(--icon-interactive-base)" }}
-        >
-          <Switch>
-            <Match when={isWorking()}>
-              <Spinner class="size-[15px]" />
-            </Match>
-            <Match when={hasPermissions()}>
-              <div class="size-1.5 rounded-full bg-surface-warning-strong" />
-            </Match>
-            <Match when={hasError()}>
-              <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
-            </Match>
-            <Match when={unseenCount() > 0}>
-              <div class="size-1.5 rounded-full bg-text-interactive-base" />
-            </Match>
-          </Switch>
-        </div>
-      </Show>
-      <div class="flex min-w-0 flex-1 items-center gap-1.5">
-        <span
-          class={`${HOME_SEARCH_RESULT_TITLE} ${props.record.projectName ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}
-        >
-          {title()}
-        </span>
-        <Show when={props.record.projectName}>
-          <span class={HOME_SEARCH_RESULT_META}>{props.record.projectName}</span>
-        </Show>
-      </div>
-    </button>
+    <label class="ml-4 flex h-9 w-[calc(100%_-_48px)] sticky top-0 inset-x-0 items-center gap-2 rounded-[6px] bg-v2-background-bg-deep px-3 py-1 text-v2-icon-icon-muted transition-[background-color,box-shadow] duration-[120ms] ease-in-out focus-within:bg-v2-background-bg-base focus-within:shadow-[0_0_0_0.5px_var(--v2-border-border-focus),var(--v2-elevation-raised)]">
+      <IconV2 name="magnifying-glass" size="small" />
+      <input
+        class="min-w-0 flex-1 border-0 bg-transparent text-v2-text-text-base outline-0 [font-weight:440] placeholder:text-v2-text-text-faint"
+        value={props.value}
+        placeholder={props.placeholder}
+        aria-label={props.placeholder}
+        onInput={(event) => props.onInput(event.currentTarget.value)}
+      />
+    </label>
   )
 }
 
 function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => void }) {
   const language = useLanguage()
   return (
-    <div class="flex h-7 min-w-0 items-center justify-between pl-4 pr-2">
+    <div class="flex h-7 min-w-0 items-center justify-between px-4">
       <div class={HOME_SECTION_LABEL}>{props.title}</div>
       <Show when={props.onNewSession}>
         {(onNewSession) => (
           <ButtonV2
             data-action="home-new-session"
-            variant="ghost-muted"
+            variant="ghost"
             size="normal"
             icon="edit"
-            class="h-7 px-2 [font-weight:530]"
+            class="h-7 px-2 text-v2-text-text-muted [font-weight:530]"
             onClick={onNewSession()}
           >
             {language.t("command.session.new")}
@@ -863,7 +358,7 @@ function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => voi
 }
 
 function HomeSessionRow(props: { record: HomeSessionRecord; openSession: (session: Session) => void }) {
-  const globalSync = useServerSync()
+  const globalSync = useGlobalSync()
   const notification = useNotification()
   const permission = usePermission()
   const [sessionStore] = globalSync.child(props.record.session.directory, { bootstrap: false })
@@ -890,14 +385,7 @@ function HomeSessionRow(props: { record: HomeSessionRecord; openSession: (sessio
       class={`${HOME_ROW} h-10 gap-2 px-6 py-3 pl-4`}
       onClick={() => props.openSession(props.record.session)}
     >
-      <Show
-        when={showStatus()}
-        fallback={
-          <div class="flex size-4 shrink-0 items-center justify-center">
-            <TabStateIndicator />
-          </div>
-        }
-      >
+      <Show when={showStatus()}>
         <div
           class="flex size-4 shrink-0 items-center justify-center"
           style={{ color: tint() ?? "var(--icon-interactive-base)" }}
@@ -971,13 +459,12 @@ function groupSessions(records: HomeSessionRecord[], language: ReturnType<typeof
 }
 
 function LegacyHome() {
-  const sync = useServerSync()
+  const sync = useGlobalSync()
   const layout = useLayout()
   const platform = usePlatform()
   const dialog = useDialog()
   const navigate = useNavigate()
   const server = useServer()
-  const servers = useServers()
   const language = useLanguage()
   const homedir = createMemo(() => sync.data.path.home)
   const recent = createMemo(() => {
@@ -988,7 +475,7 @@ function LegacyHome() {
   })
 
   const serverDotClass = createMemo(() => {
-    const healthy = servers.health[server.key]?.healthy
+    const healthy = server.healthy()
     if (healthy === true) return "bg-icon-success-base"
     if (healthy === false) return "bg-icon-critical-base"
     return "bg-border-weak-base"