chore: bump effect beta

When the sidebar was collapsed (not on mobile), the background color was showing as the stronger variant instead of matching the base background. This fixes the hover state detection so users see a consistent lighter background when the sidebar is in collapsed mode.

AGENTS.md

@@ -122,3 +122,7 @@ const table = sqliteTable("session", {
 - Avoid mocks as much as possible
 - Test actual implementation, do not duplicate logic into tests
 - Tests cannot run from repo root (guard: `do-not-run-tests-from-root`); run from package dirs like `packages/opencode`.
+
+## Type Checking
+
+- Always run `bun typecheck` from package directories (e.g., `packages/opencode`), never `tsc` directly.

nix/hashes.json

@@ -1,8 +1,8 @@
 {
   "nodeModules": {
-    "x86_64-linux": "sha256-4kjoJ06VNvHltPHfzQRBG0bC6R39jao10ffGzrNZ230=",
-    "aarch64-linux": "sha256-6Uio+S2rcyBWbBEeOZb9N1CCKgkbKi68lOIKi3Ws/pQ=",
-    "aarch64-darwin": "sha256-8ngN5KVN4vhdsk0QJ11BGgSVBrcaEbwSj23c77HBpgs=",
-    "x86_64-darwin": "sha256-v/ueYGb9a0Nymzy+mkO4uQr78DAuJnES1qOT0onFgnQ="
+    "x86_64-linux": "sha256-c99eE1cKAQHvwJosaFo42U9Hk0Rtp/U5oTTlyiz2Zw4=",
+    "aarch64-linux": "sha256-LbdssPrf8Bijyp4mRo8QaO/swxwUWSo1g0jLPm2rvUA=",
+    "aarch64-darwin": "sha256-0L9y6Zk4l2vAxsM2bENahhtRZY1C3XhdxLgnnYlhkkY=",
+    "x86_64-darwin": "sha256-0J5sFG/kHHRDcTpdpdPBMJEOHwCRnAUYmbxEHPPLDvU="
   }
 }

package.json

@@ -43,6 +43,7 @@
       "dompurify": "3.3.1",
       "drizzle-kit": "1.0.0-beta.16-ea816b6",
       "drizzle-orm": "1.0.0-beta.16-ea816b6",
+      "effect": "4.0.0-beta.29",
       "ai": "5.0.124",
       "hono": "4.10.7",
       "hono-openapi": "1.1.2",

packages/app/e2e/terminal/terminal-tabs.spec.ts

@@ -44,12 +44,14 @@ async function store(page: Page, key: string) {
   }, key)
 }
 
-test("terminal tab buffers persist across tab switches", async ({ page, withProject }) => {
+test("inactive terminal tab buffers persist across tab switches", async ({ page, withProject }) => {
   await withProject(async ({ directory, gotoSession }) => {
     const key = workspacePersistKey(directory, "terminal")
     const one = `E2E_TERM_ONE_${Date.now()}`
     const two = `E2E_TERM_TWO_${Date.now()}`
     const tabs = page.locator('#terminal-panel [data-slot="tabs-trigger"]')
+    const first = tabs.filter({ hasText: /Terminal 1/ }).first()
+    const second = tabs.filter({ hasText: /Terminal 2/ }).first()
 
     await gotoSession()
     await open(page)
@@ -61,22 +63,39 @@ test("terminal tab buffers persist across tab switches", async ({ page, withProj
 
     await run(page, `echo ${two}`)
 
-    await tabs
-      .filter({ hasText: /Terminal 1/ })
-      .first()
-      .click()
-
+    await first.click()
+    await expect(first).toHaveAttribute("aria-selected", "true")
     await expect
       .poll(
         async () => {
           const state = await store(page, key)
           const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
           const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
-          return first.includes(one) && second.includes(two)
+          return {
+            first: first.includes(one),
+            second: second.includes(two),
+          }
         },
         { timeout: 30_000 },
       )
-      .toBe(true)
+      .toEqual({ first: false, second: true })
+
+    await second.click()
+    await expect(second).toHaveAttribute("aria-selected", "true")
+    await expect
+      .poll(
+        async () => {
+          const state = await store(page, key)
+          const first = state?.all.find((item) => item.titleNumber === 1)?.buffer ?? ""
+          const second = state?.all.find((item) => item.titleNumber === 2)?.buffer ?? ""
+          return {
+            first: first.includes(one),
+            second: second.includes(two),
+          }
+        },
+        { timeout: 30_000 },
+      )
+      .toEqual({ first: true, second: false })
   })
 })
 

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

@@ -27,7 +27,7 @@ import type { InitError } from "../pages/error"
 import { useGlobalSDK } from "./global-sdk"
 import { bootstrapDirectory, bootstrapGlobal } from "./global-sync/bootstrap"
 import { createChildStoreManager } from "./global-sync/child-store"
-import { applyDirectoryEvent, applyGlobalEvent } from "./global-sync/event-reducer"
+import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./global-sync/event-reducer"
 import { createRefreshQueue } from "./global-sync/queue"
 import { estimateRootSessionTotal, loadRootSessionsWithFallback } from "./global-sync/session-load"
 import { trimSessions } from "./global-sync/session-trim"
@@ -189,6 +189,7 @@ function createGlobalSync() {
       })
       if (next.length !== store.session.length) {
         setStore("session", reconcile(next, { key: "id" }))
+        cleanupDroppedSessionCaches(store, setStore, next, setSessionTodo)
       }
       children.unpin(directory)
       return
@@ -220,6 +221,7 @@ function createGlobalSync() {
           }),
         )
         setStore("session", reconcile(sessions, { key: "id" }))
+        cleanupDroppedSessionCaches(store, setStore, sessions, setSessionTodo)
         sessionMeta.set(directory, { limit })
       })
       .catch((err) => {

packages/app/src/context/global-sync/event-reducer.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test"
 import type { Message, Part, PermissionRequest, Project, QuestionRequest, Session } from "@opencode-ai/sdk/v2/client"
 import { createStore } from "solid-js/store"
 import type { State } from "./types"
-import { applyDirectoryEvent, applyGlobalEvent } from "./event-reducer"
+import { applyDirectoryEvent, applyGlobalEvent, cleanupDroppedSessionCaches } from "./event-reducer"
 
 const rootSession = (input: { id: string; parentID?: string; archived?: number }) =>
   ({
@@ -248,6 +248,62 @@ describe("applyDirectoryEvent", () => {
     }
   })
 
+  test("cleans caches for trimmed sessions on session.created", () => {
+    const dropped = rootSession({ id: "ses_b" })
+    const kept = rootSession({ id: "ses_a" })
+    const message = userMessage("msg_1", dropped.id)
+    const todos: string[] = []
+    const [store, setStore] = createStore(
+      baseState({
+        limit: 1,
+        session: [dropped],
+        message: { [dropped.id]: [message] },
+        part: { [message.id]: [textPart("prt_1", dropped.id, message.id)] },
+        session_diff: { [dropped.id]: [] },
+        todo: { [dropped.id]: [] },
+        permission: { [dropped.id]: [] },
+        question: { [dropped.id]: [] },
+        session_status: { [dropped.id]: { type: "busy" } },
+      }),
+    )
+
+    applyDirectoryEvent({
+      event: { type: "session.created", properties: { info: kept } },
+      store,
+      setStore,
+      push() {},
+      directory: "/tmp",
+      loadLsp() {},
+      setSessionTodo(sessionID, value) {
+        if (value !== undefined) return
+        todos.push(sessionID)
+      },
+    })
+
+    expect(store.session.map((x) => x.id)).toEqual([kept.id])
+    expect(store.message[dropped.id]).toBeUndefined()
+    expect(store.part[message.id]).toBeUndefined()
+    expect(store.session_diff[dropped.id]).toBeUndefined()
+    expect(store.todo[dropped.id]).toBeUndefined()
+    expect(store.permission[dropped.id]).toBeUndefined()
+    expect(store.question[dropped.id]).toBeUndefined()
+    expect(store.session_status[dropped.id]).toBeUndefined()
+    expect(todos).toEqual([dropped.id])
+  })
+
+  test("cleanupDroppedSessionCaches clears part-only orphan state", () => {
+    const [store, setStore] = createStore(
+      baseState({
+        session: [rootSession({ id: "ses_keep" })],
+        part: { msg_1: [textPart("prt_1", "ses_drop", "msg_1")] },
+      }),
+    )
+
+    cleanupDroppedSessionCaches(store, setStore, store.session)
+
+    expect(store.part.msg_1).toBeUndefined()
+  })
+
   test("upserts and removes messages while clearing orphaned parts", () => {
     const sessionID = "ses_1"
     const [store, setStore] = createStore(

packages/app/src/context/global-sync/event-reducer.ts

@@ -13,6 +13,7 @@ import type {
 } from "@opencode-ai/sdk/v2/client"
 import type { State, VcsCache } from "./types"
 import { trimSessions } from "./session-trim"
+import { dropSessionCaches } from "./session-cache"
 
 export function applyGlobalEvent(input: {
   event: { type: string; properties?: unknown }
@@ -40,37 +41,44 @@ export function applyGlobalEvent(input: {
 }
 
 function cleanupSessionCaches(
-  store: Store<State>,
   setStore: SetStoreFunction<State>,
   sessionID: string,
   setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
 ) {
   if (!sessionID) return
-  const hasAny =
-    store.message[sessionID] !== undefined ||
-    store.session_diff[sessionID] !== undefined ||
-    store.todo[sessionID] !== undefined ||
-    store.permission[sessionID] !== undefined ||
-    store.question[sessionID] !== undefined ||
-    store.session_status[sessionID] !== undefined
   setSessionTodo?.(sessionID, undefined)
-  if (!hasAny) return
   setStore(
     produce((draft) => {
-      const messages = draft.message[sessionID]
-      if (messages) {
-        for (const message of messages) {
-          const id = message?.id
-          if (!id) continue
-          delete draft.part[id]
-        }
-      }
-      delete draft.message[sessionID]
-      delete draft.session_diff[sessionID]
-      delete draft.todo[sessionID]
-      delete draft.permission[sessionID]
-      delete draft.question[sessionID]
-      delete draft.session_status[sessionID]
+      dropSessionCaches(draft, [sessionID])
+    }),
+  )
+}
+
+export function cleanupDroppedSessionCaches(
+  store: Store<State>,
+  setStore: SetStoreFunction<State>,
+  next: Session[],
+  setSessionTodo?: (sessionID: string, todos: Todo[] | undefined) => void,
+) {
+  const keep = new Set(next.map((item) => item.id))
+  const stale = [
+    ...Object.keys(store.message),
+    ...Object.keys(store.session_diff),
+    ...Object.keys(store.todo),
+    ...Object.keys(store.permission),
+    ...Object.keys(store.question),
+    ...Object.keys(store.session_status),
+    ...Object.values(store.part)
+      .map((parts) => parts?.find((part) => !!part?.sessionID)?.sessionID)
+      .filter((sessionID): sessionID is string => !!sessionID),
+  ].filter((sessionID, index, list) => !keep.has(sessionID) && list.indexOf(sessionID) === index)
+  if (stale.length === 0) return
+  for (const sessionID of stale) {
+    setSessionTodo?.(sessionID, undefined)
+  }
+  setStore(
+    produce((draft) => {
+      dropSessionCaches(draft, stale)
     }),
   )
 }
@@ -102,6 +110,7 @@ export function applyDirectoryEvent(input: {
       next.splice(result.index, 0, info)
       const trimmed = trimSessions(next, { limit: input.store.limit, permission: input.store.permission })
       input.setStore("session", reconcile(trimmed, { key: "id" }))
+      cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
       if (!info.parentID) input.setStore("sessionTotal", (value) => value + 1)
       break
     }
@@ -117,7 +126,7 @@ export function applyDirectoryEvent(input: {
             }),
           )
         }
-        cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
+        cleanupSessionCaches(input.setStore, info.id, input.setSessionTodo)
         if (info.parentID) break
         input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
         break
@@ -130,6 +139,7 @@ export function applyDirectoryEvent(input: {
       next.splice(result.index, 0, info)
       const trimmed = trimSessions(next, { limit: input.store.limit, permission: input.store.permission })
       input.setStore("session", reconcile(trimmed, { key: "id" }))
+      cleanupDroppedSessionCaches(input.store, input.setStore, trimmed, input.setSessionTodo)
       break
     }
     case "session.deleted": {
@@ -143,7 +153,7 @@ export function applyDirectoryEvent(input: {
           }),
         )
       }
-      cleanupSessionCaches(input.store, input.setStore, info.id, input.setSessionTodo)
+      cleanupSessionCaches(input.setStore, info.id, input.setSessionTodo)
       if (info.parentID) break
       input.setStore("sessionTotal", (value) => Math.max(0, value - 1))
       break

packages/app/src/context/global-sync/session-cache.test.ts

@@ -0,0 +1,102 @@
+import { describe, expect, test } from "bun:test"
+import type {
+  FileDiff,
+  Message,
+  Part,
+  PermissionRequest,
+  QuestionRequest,
+  SessionStatus,
+  Todo,
+} from "@opencode-ai/sdk/v2/client"
+import { dropSessionCaches, pickSessionCacheEvictions } from "./session-cache"
+
+const msg = (id: string, sessionID: string) =>
+  ({
+    id,
+    sessionID,
+    role: "user",
+    time: { created: 1 },
+    agent: "assistant",
+    model: { providerID: "openai", modelID: "gpt" },
+  }) as Message
+
+const part = (id: string, sessionID: string, messageID: string) =>
+  ({
+    id,
+    sessionID,
+    messageID,
+    type: "text",
+    text: id,
+  }) as Part
+
+describe("app session cache", () => {
+  test("dropSessionCaches clears orphaned parts without message rows", () => {
+    const store: {
+      session_status: Record<string, SessionStatus | undefined>
+      session_diff: Record<string, FileDiff[] | undefined>
+      todo: Record<string, Todo[] | undefined>
+      message: Record<string, Message[] | undefined>
+      part: Record<string, Part[] | undefined>
+      permission: Record<string, PermissionRequest[] | undefined>
+      question: Record<string, QuestionRequest[] | undefined>
+    } = {
+      session_status: { ses_1: { type: "busy" } as SessionStatus },
+      session_diff: { ses_1: [] },
+      todo: { ses_1: [] as Todo[] },
+      message: {},
+      part: { msg_1: [part("prt_1", "ses_1", "msg_1")] },
+      permission: { ses_1: [] as PermissionRequest[] },
+      question: { ses_1: [] as QuestionRequest[] },
+    }
+
+    dropSessionCaches(store, ["ses_1"])
+
+    expect(store.message.ses_1).toBeUndefined()
+    expect(store.part.msg_1).toBeUndefined()
+    expect(store.todo.ses_1).toBeUndefined()
+    expect(store.session_diff.ses_1).toBeUndefined()
+    expect(store.session_status.ses_1).toBeUndefined()
+    expect(store.permission.ses_1).toBeUndefined()
+    expect(store.question.ses_1).toBeUndefined()
+  })
+
+  test("dropSessionCaches clears message-backed parts", () => {
+    const m = msg("msg_1", "ses_1")
+    const store: {
+      session_status: Record<string, SessionStatus | undefined>
+      session_diff: Record<string, FileDiff[] | undefined>
+      todo: Record<string, Todo[] | undefined>
+      message: Record<string, Message[] | undefined>
+      part: Record<string, Part[] | undefined>
+      permission: Record<string, PermissionRequest[] | undefined>
+      question: Record<string, QuestionRequest[] | undefined>
+    } = {
+      session_status: {},
+      session_diff: {},
+      todo: {},
+      message: { ses_1: [m] },
+      part: { [m.id]: [part("prt_1", "ses_1", m.id)] },
+      permission: {},
+      question: {},
+    }
+
+    dropSessionCaches(store, ["ses_1"])
+
+    expect(store.message.ses_1).toBeUndefined()
+    expect(store.part[m.id]).toBeUndefined()
+  })
+
+  test("pickSessionCacheEvictions preserves requested sessions", () => {
+    const seen = new Set(["ses_1", "ses_2", "ses_3"])
+
+    const stale = pickSessionCacheEvictions({
+      seen,
+      keep: "ses_4",
+      limit: 2,
+      preserve: ["ses_1"],
+    })
+
+    expect(stale).toEqual(["ses_2", "ses_3"])
+    expect([...seen]).toEqual(["ses_1", "ses_4"])
+  })
+})

packages/app/src/context/global-sync/session-cache.ts

@@ -0,0 +1,62 @@
+import type {
+  FileDiff,
+  Message,
+  Part,
+  PermissionRequest,
+  QuestionRequest,
+  SessionStatus,
+  Todo,
+} from "@opencode-ai/sdk/v2/client"
+
+export const SESSION_CACHE_LIMIT = 40
+
+type SessionCache = {
+  session_status: Record<string, SessionStatus | undefined>
+  session_diff: Record<string, FileDiff[] | undefined>
+  todo: Record<string, Todo[] | undefined>
+  message: Record<string, Message[] | undefined>
+  part: Record<string, Part[] | undefined>
+  permission: Record<string, PermissionRequest[] | undefined>
+  question: Record<string, QuestionRequest[] | undefined>
+}
+
+export function dropSessionCaches(store: SessionCache, sessionIDs: Iterable<string>) {
+  const stale = new Set(Array.from(sessionIDs).filter(Boolean))
+  if (stale.size === 0) return
+
+  for (const key of Object.keys(store.part)) {
+    const parts = store.part[key]
+    if (!parts?.some((part) => stale.has(part?.sessionID ?? ""))) continue
+    delete store.part[key]
+  }
+
+  for (const sessionID of stale) {
+    delete store.message[sessionID]
+    delete store.todo[sessionID]
+    delete store.session_diff[sessionID]
+    delete store.session_status[sessionID]
+    delete store.permission[sessionID]
+    delete store.question[sessionID]
+  }
+}
+
+export function pickSessionCacheEvictions(input: {
+  seen: Set<string>
+  keep: string
+  limit: number
+  preserve?: Iterable<string>
+}) {
+  const stale: string[] = []
+  const keep = new Set([input.keep, ...Array.from(input.preserve ?? [])])
+  if (input.seen.has(input.keep)) input.seen.delete(input.keep)
+  input.seen.add(input.keep)
+  for (const id of input.seen) {
+    if (input.seen.size - stale.length <= input.limit) break
+    if (keep.has(id)) continue
+    stale.push(id)
+  }
+  for (const id of stale) {
+    input.seen.delete(id)
+  }
+  return stale
+}

packages/app/src/context/sync.tsx

@@ -6,6 +6,7 @@ import { createSimpleContext } from "@opencode-ai/ui/context"
 import { useGlobalSync } from "./global-sync"
 import { useSDK } from "./sdk"
 import type { Message, Part } from "@opencode-ai/sdk/v2/client"
+import { SESSION_CACHE_LIMIT, dropSessionCaches, pickSessionCacheEvictions } from "./global-sync/session-cache"
 
 function sortParts(parts: Part[]) {
   return parts.filter((part) => !!part?.id).sort((a, b) => cmp(a.id, b.id))
@@ -108,6 +109,8 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
     const inflight = new Map<string, Promise<void>>()
     const inflightDiff = new Map<string, Promise<void>>()
     const inflightTodo = new Map<string, Promise<void>>()
+    const maxDirs = 30
+    const seen = new Map<string, Set<string>>()
     const [meta, setMeta] = createStore({
       limit: {} as Record<string, number>,
       complete: {} as Record<string, boolean>,
@@ -121,6 +124,62 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       return undefined
     }
 
+    const seenFor = (directory: string) => {
+      const existing = seen.get(directory)
+      if (existing) {
+        seen.delete(directory)
+        seen.set(directory, existing)
+        return existing
+      }
+      const created = new Set<string>()
+      seen.set(directory, created)
+      while (seen.size > maxDirs) {
+        const first = seen.keys().next().value
+        if (!first) break
+        const stale = [...(seen.get(first) ?? [])]
+        seen.delete(first)
+        const [, setStore] = globalSync.child(first, { bootstrap: false })
+        evict(first, setStore, stale)
+      }
+      return created
+    }
+
+    const clearMeta = (directory: string, sessionIDs: string[]) => {
+      if (sessionIDs.length === 0) return
+      setMeta(
+        produce((draft) => {
+          for (const sessionID of sessionIDs) {
+            const key = keyFor(directory, sessionID)
+            delete draft.limit[key]
+            delete draft.complete[key]
+            delete draft.loading[key]
+          }
+        }),
+      )
+    }
+
+    const evict = (directory: string, setStore: Setter, sessionIDs: string[]) => {
+      if (sessionIDs.length === 0) return
+      for (const sessionID of sessionIDs) {
+        globalSync.todo.set(sessionID, undefined)
+      }
+      setStore(
+        produce((draft) => {
+          dropSessionCaches(draft, sessionIDs)
+        }),
+      )
+      clearMeta(directory, sessionIDs)
+    }
+
+    const touch = (directory: string, setStore: Setter, sessionID: string) => {
+      const stale = pickSessionCacheEvictions({
+        seen: seenFor(directory),
+        keep: sessionID,
+        limit: SESSION_CACHE_LIMIT,
+      })
+      evict(directory, setStore, stale)
+    }
+
     const fetchMessages = async (input: { client: typeof sdk.client; sessionID: string; limit: number }) => {
       const messages = await retry(() =>
         input.client.session.messages({ sessionID: input.sessionID, limit: input.limit }),
@@ -135,6 +194,8 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       }
     }
 
+    const tracked = (directory: string, sessionID: string) => seen.get(directory)?.has(sessionID) ?? false
+
     const loadMessages = async (input: {
       directory: string
       client: typeof sdk.client
@@ -148,6 +209,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       setMeta("loading", key, true)
       await fetchMessages(input)
         .then((next) => {
+          if (!tracked(input.directory, input.sessionID)) return
           batch(() => {
             input.setStore("message", input.sessionID, reconcile(next.session, { key: "id" }))
             for (const p of next.part) {
@@ -158,6 +220,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           })
         })
         .finally(() => {
+          if (!tracked(input.directory, input.sessionID)) return
           setMeta("loading", key, false)
         })
     }
@@ -224,11 +287,16 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const key = keyFor(directory, sessionID)
           const hasSession = Binary.search(store.session, sessionID, (s) => s.id).found
 
+          touch(directory, setStore, sessionID)
+
+          if (store.message[sessionID] !== undefined && hasSession && meta.limit[key] !== undefined) return
+
           const limit = meta.limit[key] ?? messagePageSize
 
           const sessionReq = hasSession
             ? Promise.resolve()
             : retry(() => client.session.get({ sessionID })).then((session) => {
+                if (!tracked(directory, sessionID)) return
                 const data = session.data
                 if (!data) return
                 setStore(
@@ -258,11 +326,13 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
+          touch(directory, setStore, sessionID)
           if (store.session_diff[sessionID] !== undefined) return
 
           const key = keyFor(directory, sessionID)
           return runInflight(inflightDiff, key, () =>
             retry(() => client.session.diff({ sessionID })).then((diff) => {
+              if (!tracked(directory, sessionID)) return
               setStore("session_diff", sessionID, reconcile(diff.data ?? [], { key: "file" }))
             }),
           )
@@ -271,6 +341,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const directory = sdk.directory
           const client = sdk.client
           const [store, setStore] = globalSync.child(directory)
+          touch(directory, setStore, sessionID)
           const existing = store.todo[sessionID]
           const cached = globalSync.data.session_todo[sessionID]
           if (existing !== undefined) {
@@ -287,6 +358,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           const key = keyFor(directory, sessionID)
           return runInflight(inflightTodo, key, () =>
             retry(() => client.session.todo({ sessionID })).then((todo) => {
+              if (!tracked(directory, sessionID)) return
               const list = todo.data ?? []
               setStore("todo", sessionID, reconcile(list, { key: "id" }))
               globalSync.todo.set(sessionID, list)
@@ -310,6 +382,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             const directory = sdk.directory
             const client = sdk.client
             const [, setStore] = globalSync.child(directory)
+            touch(directory, setStore, sessionID)
             const key = keyFor(directory, sessionID)
             const step = count ?? messagePageSize
             if (meta.loading[key]) return
@@ -325,6 +398,11 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             })
           },
         },
+        evict(sessionID: string, directory = sdk.directory) {
+          const [, setStore] = globalSync.child(directory)
+          seenFor(directory).delete(sessionID)
+          evict(directory, setStore, [sessionID])
+        },
         fetch: async (count = 10) => {
           const directory = sdk.directory
           const client = sdk.client

packages/app/src/context/terminal.tsx

@@ -1,6 +1,6 @@
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
-import { batch, createEffect, createMemo, createRoot, onCleanup } from "solid-js"
+import { batch, createEffect, createMemo, createRoot, on, onCleanup } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { useSDK } from "./sdk"
 import type { Platform } from "./platform"
@@ -38,6 +38,16 @@ type TerminalCacheEntry = {
 
 const caches = new Set<Map<string, TerminalCacheEntry>>()
 
+const trimTerminal = (pty: LocalPTY) => {
+  if (!pty.buffer && pty.cursor === undefined && pty.scrollY === undefined) return pty
+  return {
+    ...pty,
+    buffer: undefined,
+    cursor: undefined,
+    scrollY: undefined,
+  }
+}
+
 export function clearWorkspaceTerminals(dir: string, sessionIDs?: string[], platform?: Platform) {
   const key = getWorkspaceTerminalCacheKey(dir)
   for (const cache of caches) {
@@ -188,6 +198,18 @@ function createWorkspaceTerminalSession(sdk: ReturnType<typeof useSDK>, dir: str
           console.error("Failed to update terminal", error)
         })
     },
+    trim(id: string) {
+      const index = store.all.findIndex((x) => x.id === id)
+      if (index === -1) return
+      setStore("all", index, (pty) => trimTerminal(pty))
+    },
+    trimAll() {
+      setStore("all", (all) => {
+        const next = all.map(trimTerminal)
+        if (next.every((pty, index) => pty === all[index])) return all
+        return next
+      })
+    },
     async clone(id: string) {
       const index = store.all.findIndex((x) => x.id === id)
       const pty = store.all[index]
@@ -322,12 +344,27 @@ export const { use: useTerminal, provider: TerminalProvider } = createSimpleCont
 
     const workspace = createMemo(() => loadWorkspace(params.dir!, params.id))
 
+    createEffect(
+      on(
+        () => ({ dir: params.dir, id: params.id }),
+        (next, prev) => {
+          if (!prev?.dir) return
+          if (next.dir === prev.dir && next.id === prev.id) return
+          if (next.dir === prev.dir && next.id) return
+          loadWorkspace(prev.dir, prev.id).trimAll()
+        },
+        { defer: true },
+      ),
+    )
+
     return {
       ready: () => workspace().ready(),
       all: () => workspace().all(),
       active: () => workspace().active(),
       new: () => workspace().new(),
       update: (pty: Partial<LocalPTY> & { id: string }) => workspace().update(pty),
+      trim: (id: string) => workspace().trim(id),
+      trimAll: () => workspace().trimAll(),
       clone: (id: string) => workspace().clone(id),
       open: (id: string) => workspace().open(id),
       close: (id: string) => workspace().close(id),

packages/app/src/pages/layout.tsx

@@ -34,6 +34,7 @@ import { useProviders } from "@/hooks/use-providers"
 import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { clearWorkspaceTerminals } from "@/context/terminal"
+import { dropSessionCaches, pickSessionCacheEvictions } from "@/context/global-sync/session-cache"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
 import { Binary } from "@opencode-ai/util/binary"
@@ -657,25 +658,24 @@ export default function Layout(props: ParentProps) {
   const prefetchQueues = new Map<string, PrefetchQueue>()
 
   const PREFETCH_MAX_SESSIONS_PER_DIR = 10
-  const prefetchedByDir = new Map<string, Map<string, true>>()
+  const prefetchedByDir = new Map<string, Set<string>>()
 
   const lruFor = (directory: string) => {
     const existing = prefetchedByDir.get(directory)
     if (existing) return existing
-    const created = new Map<string, true>()
+    const created = new Set<string>()
     prefetchedByDir.set(directory, created)
     return created
   }
 
   const markPrefetched = (directory: string, sessionID: string) => {
     const lru = lruFor(directory)
-    if (lru.has(sessionID)) lru.delete(sessionID)
-    lru.set(sessionID, true)
-    while (lru.size > PREFETCH_MAX_SESSIONS_PER_DIR) {
-      const oldest = lru.keys().next().value as string | undefined
-      if (!oldest) return
-      lru.delete(oldest)
-    }
+    return pickSessionCacheEvictions({
+      seen: lru,
+      keep: sessionID,
+      limit: PREFETCH_MAX_SESSIONS_PER_DIR,
+      preserve: directory === params.dir && params.id ? [params.id] : undefined,
+    })
   }
 
   createEffect(() => {
@@ -724,6 +724,7 @@ export default function Layout(props: ParentProps) {
     return retry(() => globalSDK.client.session.messages({ directory, sessionID, limit: prefetchChunk }))
       .then((messages) => {
         if (prefetchToken.value !== token) return
+        if (!lruFor(directory).has(sessionID)) return
 
         const items = (messages.data ?? []).filter((x) => !!x?.info?.id)
         const next = items.map((x) => x.info).filter((m): m is Message => !!m?.id)
@@ -787,7 +788,18 @@ export default function Layout(props: ParentProps) {
     const lru = lruFor(directory)
     const known = lru.has(session.id)
     if (!known && lru.size >= PREFETCH_MAX_SESSIONS_PER_DIR && priority !== "high") return
-    markPrefetched(directory, session.id)
+    const stale = markPrefetched(directory, session.id)
+    if (stale.length > 0) {
+      const [, setStore] = globalSync.child(directory, { bootstrap: false })
+      for (const id of stale) {
+        globalSync.todo.set(id, undefined)
+      }
+      setStore(
+        produce((draft) => {
+          dropSessionCaches(draft, stale)
+        }),
+      )
+    }
 
     if (priority === "high") q.pending.unshift(session.id)
     if (priority !== "high") q.pending.push(session.id)
@@ -1879,6 +1891,7 @@ export default function Layout(props: ParentProps) {
 
   const SidebarPanel = (panelProps: { project: LocalProject | undefined; mobile?: boolean; merged?: boolean }) => {
     const merged = createMemo(() => panelProps.mobile || (panelProps.merged ?? layout.sidebar.opened()))
+    const hover = createMemo(() => !panelProps.mobile && panelProps.merged === false && !layout.sidebar.opened())
     const projectName = createMemo(() => {
       const project = panelProps.project
       if (!project) return ""
@@ -1907,8 +1920,8 @@ export default function Layout(props: ParentProps) {
           "flex flex-col min-h-0 min-w-0 rounded-tl-[12px] px-2": true,
           "border border-b-0 border-border-weak-base": !merged(),
           "border-l border-t border-border-weaker-base": merged(),
-          "bg-background-base": merged(),
-          "bg-background-stronger": !merged(),
+          "bg-background-base": merged() || hover(),
+          "bg-background-stronger": !merged() && !hover(),
           "flex-1 min-w-0": panelProps.mobile,
           "max-w-full overflow-hidden": panelProps.mobile,
         }}

packages/app/src/pages/layout/sidebar-project.tsx

@@ -91,6 +91,7 @@ const ProjectTile = (props: {
       modal={!props.sidebarHovering()}
       onOpenChange={(value) => {
         props.setMenu(value)
+        props.setSuppressHover(value)
         if (value) props.setOpen(false)
       }}
     >
@@ -107,6 +108,12 @@ const ProjectTile = (props: {
             !props.selected() && !props.active(),
           "bg-surface-base-hover border border-border-weak-base": !props.selected() && props.active(),
         }}
+        onPointerDown={(event) => {
+          if (!props.overlay()) return
+          if (event.button !== 2 && !(event.button === 0 && event.ctrlKey)) return
+          props.setSuppressHover(true)
+          event.preventDefault()
+        }}
         onMouseEnter={(event: MouseEvent) => {
           if (!props.overlay()) return
           if (props.suppressHover()) return

packages/app/src/pages/session.tsx

@@ -41,216 +41,12 @@ import { createScrollSpy } from "@/pages/session/scroll-spy"
 import { SessionMobileTabs } from "@/pages/session/session-mobile-tabs"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
+import { createSessionHistoryWindow, emptyUserMessages } from "@/pages/session/history-window"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
 import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
 import { same } from "@/utils/same"
 import { formatServerError } from "@/utils/server-errors"
 
-const emptyUserMessages: UserMessage[] = []
-
-type SessionHistoryWindowInput = {
-  sessionID: () => string | undefined
-  messagesReady: () => boolean
-  visibleUserMessages: () => UserMessage[]
-  historyMore: () => boolean
-  historyLoading: () => boolean
-  loadMore: (sessionID: string) => Promise<void>
-  userScrolled: () => boolean
-  scroller: () => HTMLDivElement | undefined
-}
-
-/**
- * Maintains the rendered history window for a session timeline.
- *
- * It keeps initial paint bounded to recent turns, reveals cached turns in
- * small batches while scrolling upward, and prefetches older history near top.
- */
-function createSessionHistoryWindow(input: SessionHistoryWindowInput) {
-  const turnInit = 10
-  const turnBatch = 8
-  const turnScrollThreshold = 200
-  const turnPrefetchBuffer = 16
-  const prefetchCooldownMs = 400
-  const prefetchNoGrowthLimit = 2
-
-  const [state, setState] = createStore({
-    turnID: undefined as string | undefined,
-    turnStart: 0,
-    prefetchUntil: 0,
-    prefetchNoGrowth: 0,
-  })
-
-  const initialTurnStart = (len: number) => (len > turnInit ? len - turnInit : 0)
-
-  const turnStart = createMemo(() => {
-    const id = input.sessionID()
-    const len = input.visibleUserMessages().length
-    if (!id || len <= 0) return 0
-    if (state.turnID !== id) return initialTurnStart(len)
-    if (state.turnStart <= 0) return 0
-    if (state.turnStart >= len) return initialTurnStart(len)
-    return state.turnStart
-  })
-
-  const setTurnStart = (start: number) => {
-    const id = input.sessionID()
-    const next = start > 0 ? start : 0
-    if (!id) {
-      setState({ turnID: undefined, turnStart: next })
-      return
-    }
-    setState({ turnID: id, turnStart: next })
-  }
-
-  const renderedUserMessages = createMemo(
-    () => {
-      const msgs = input.visibleUserMessages()
-      const start = turnStart()
-      if (start <= 0) return msgs
-      return msgs.slice(start)
-    },
-    emptyUserMessages,
-    {
-      equals: same,
-    },
-  )
-
-  const preserveScroll = (fn: () => void) => {
-    const el = input.scroller()
-    if (!el) {
-      fn()
-      return
-    }
-    const beforeTop = el.scrollTop
-    fn()
-    void el.scrollHeight
-    el.scrollTop = beforeTop
-  }
-
-  const backfillTurns = () => {
-    const start = turnStart()
-    if (start <= 0) return
-
-    const next = start - turnBatch
-    const nextStart = next > 0 ? next : 0
-
-    preserveScroll(() => setTurnStart(nextStart))
-  }
-
-  /** Button path: reveal all cached turns, fetch older history, reveal one batch. */
-  const loadAndReveal = async () => {
-    const id = input.sessionID()
-    if (!id) return
-
-    const start = turnStart()
-    const beforeVisible = input.visibleUserMessages().length
-
-    if (start > 0) setTurnStart(0)
-
-    if (!input.historyMore() || input.historyLoading()) return
-
-    await input.loadMore(id)
-    if (input.sessionID() !== id) return
-
-    const afterVisible = input.visibleUserMessages().length
-    const growth = afterVisible - beforeVisible
-    if (state.prefetchNoGrowth) setState("prefetchNoGrowth", 0)
-    if (growth <= 0) return
-    if (turnStart() !== 0) return
-
-    const target = Math.min(afterVisible, Math.max(beforeVisible, renderedUserMessages().length) + turnBatch)
-    const nextStart = Math.max(0, afterVisible - target)
-    preserveScroll(() => setTurnStart(nextStart))
-  }
-
-  /** Scroll/prefetch path: fetch older history from server. */
-  const fetchOlderMessages = async (opts?: { prefetch?: boolean }) => {
-    const id = input.sessionID()
-    if (!id) return
-    if (!input.historyMore() || input.historyLoading()) return
-
-    if (opts?.prefetch) {
-      const now = Date.now()
-      if (state.prefetchUntil > now) return
-      if (state.prefetchNoGrowth >= prefetchNoGrowthLimit) return
-      setState("prefetchUntil", now + prefetchCooldownMs)
-    }
-
-    const start = turnStart()
-    const beforeVisible = input.visibleUserMessages().length
-    const beforeRendered = start <= 0 ? beforeVisible : renderedUserMessages().length
-
-    await input.loadMore(id)
-    if (input.sessionID() !== id) return
-
-    const afterVisible = input.visibleUserMessages().length
-    const growth = afterVisible - beforeVisible
-
-    if (opts?.prefetch) {
-      setState("prefetchNoGrowth", growth > 0 ? 0 : state.prefetchNoGrowth + 1)
-    } else if (growth > 0 && state.prefetchNoGrowth) {
-      setState("prefetchNoGrowth", 0)
-    }
-
-    if (growth <= 0) return
-    if (turnStart() !== start) return
-
-    const reveal = !opts?.prefetch
-    const currentRendered = renderedUserMessages().length
-    const base = Math.max(beforeRendered, currentRendered)
-    const target = reveal ? Math.min(afterVisible, base + turnBatch) : base
-    const nextStart = Math.max(0, afterVisible - target)
-    preserveScroll(() => setTurnStart(nextStart))
-  }
-
-  const onScrollerScroll = () => {
-    if (!input.userScrolled()) return
-    const el = input.scroller()
-    if (!el) return
-    if (el.scrollHeight - el.clientHeight + el.scrollTop >= turnScrollThreshold) return
-
-    const start = turnStart()
-    if (start > 0) {
-      if (start <= turnPrefetchBuffer) {
-        void fetchOlderMessages({ prefetch: true })
-      }
-      backfillTurns()
-      return
-    }
-
-    void fetchOlderMessages()
-  }
-
-  createEffect(
-    on(
-      input.sessionID,
-      () => {
-        setState({ prefetchUntil: 0, prefetchNoGrowth: 0 })
-      },
-      { defer: true },
-    ),
-  )
-
-  createEffect(
-    on(
-      () => [input.sessionID(), input.messagesReady()] as const,
-      ([id, ready]) => {
-        if (!id || !ready) return
-        setTurnStart(initialTurnStart(input.visibleUserMessages().length))
-      },
-      { defer: true },
-    ),
-  )
-
-  return {
-    turnStart,
-    setTurnStart,
-    renderedUserMessages,
-    loadAndReveal,
-    onScrollerScroll,
-  }
-}
-
 export default function Page() {
   const globalSync = useGlobalSync()
   const layout = useLayout()
@@ -426,10 +222,12 @@ export default function Page() {
 
   createEffect(
     on(
-      () => params.id,
-      (id, prev) => {
-        if (id || !prev) return
-        resetSessionModel(local)
+      () => ({ dir: params.dir, id: params.id }),
+      (next, prev) => {
+        if (!prev) return
+        if (next.dir === prev.dir && next.id === prev.id) return
+        if (prev.id) sync.session.evict(prev.id, prev.dir)
+        if (!next.id) resetSessionModel(local)
       },
       { defer: true },
     ),
@@ -1088,6 +886,7 @@ export default function Page() {
 
   let scrollStateFrame: number | undefined
   let scrollStateTarget: HTMLDivElement | undefined
+  let historyFillFrame: number | undefined
   const scrollSpy = createScrollSpy({
     onActive: (id) => {
       if (id === store.messageId) return
@@ -1157,7 +956,9 @@ export default function Page() {
     scroller = el
     autoScroll.scrollRef(el)
     scrollSpy.setContainer(el)
-    if (el) scheduleScrollState(el)
+    if (!el) return
+    scheduleScrollState(el)
+    scheduleHistoryFill()
   }
 
   createResizeObserver(
@@ -1166,6 +967,7 @@ export default function Page() {
       const el = scroller
       if (el) scheduleScrollState(el)
       scrollSpy.markDirty()
+      scheduleHistoryFill()
     },
   )
 
@@ -1180,6 +982,45 @@ export default function Page() {
     scroller: () => scroller,
   })
 
+  const scheduleHistoryFill = () => {
+    if (historyFillFrame !== undefined) return
+
+    historyFillFrame = requestAnimationFrame(() => {
+      historyFillFrame = undefined
+
+      if (!params.id || !messagesReady()) return
+      if (autoScroll.userScrolled() || historyLoading()) return
+
+      const el = scroller
+      if (!el) return
+      if (el.scrollHeight > el.clientHeight + 1) return
+      if (historyWindow.turnStart() <= 0 && !historyMore()) return
+
+      void historyWindow.loadAndReveal()
+    })
+  }
+
+  createEffect(
+    on(
+      () =>
+        [
+          params.id,
+          messagesReady(),
+          historyWindow.turnStart(),
+          historyMore(),
+          historyLoading(),
+          autoScroll.userScrolled(),
+          visibleUserMessages().length,
+        ] as const,
+      ([id, ready, start, more, loading, scrolled]) => {
+        if (!id || !ready || loading || scrolled) return
+        if (start <= 0 && !more) return
+        scheduleHistoryFill()
+      },
+      { defer: true },
+    ),
+  )
+
   createResizeObserver(
     () => promptDock,
     ({ height }) => {
@@ -1197,6 +1038,7 @@ export default function Page() {
 
       if (el) scheduleScrollState(el)
       scrollSpy.markDirty()
+      scheduleHistoryFill()
     },
   )
 
@@ -1226,6 +1068,7 @@ export default function Page() {
     document.removeEventListener("keydown", handleKeyDown)
     scrollSpy.destroy()
     if (scrollStateFrame !== undefined) cancelAnimationFrame(scrollStateFrame)
+    if (historyFillFrame !== undefined) cancelAnimationFrame(historyFillFrame)
   })
 
   return (

packages/app/src/pages/session/history-window.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from "bun:test"
+import { historyLoadMode, historyRevealTop } from "./history-window"
+
+describe("historyLoadMode", () => {
+  test("reveals cached turns before fetching", () => {
+    expect(historyLoadMode({ start: 10, more: true, loading: false })).toBe("reveal")
+  })
+
+  test("fetches older history when cache is already revealed", () => {
+    expect(historyLoadMode({ start: 0, more: true, loading: false })).toBe("fetch")
+  })
+
+  test("does nothing while history is unavailable or loading", () => {
+    expect(historyLoadMode({ start: 0, more: false, loading: false })).toBe("noop")
+    expect(historyLoadMode({ start: 0, more: true, loading: true })).toBe("noop")
+  })
+})
+
+describe("historyRevealTop", () => {
+  test("pins the viewport to the top when older turns were revealed there", () => {
+    expect(historyRevealTop({ top: -400, height: 1000, gap: 0, max: 400 }, { clientHeight: 600, height: 2000 })).toBe(
+      -1400,
+    )
+  })
+
+  test("keeps the latest turns pinned when the viewport was underfilled", () => {
+    expect(historyRevealTop({ top: 0, height: 200, gap: -400, max: -400 }, { clientHeight: 600, height: 2000 })).toBe(0)
+  })
+
+  test("keeps the current anchor when the user was not at the top", () => {
+    expect(historyRevealTop({ top: -200, height: 1000, gap: 200, max: 400 }, { clientHeight: 600, height: 2000 })).toBe(
+      -200,
+    )
+  })
+})

packages/app/src/pages/session/history-window.ts

@@ -0,0 +1,273 @@
+import type { UserMessage } from "@opencode-ai/sdk/v2"
+import { createEffect, createMemo, on } from "solid-js"
+import { createStore } from "solid-js/store"
+import { same } from "@/utils/same"
+
+export const emptyUserMessages: UserMessage[] = []
+
+export type SessionHistoryWindowInput = {
+  sessionID: () => string | undefined
+  messagesReady: () => boolean
+  visibleUserMessages: () => UserMessage[]
+  historyMore: () => boolean
+  historyLoading: () => boolean
+  loadMore: (sessionID: string) => Promise<void>
+  userScrolled: () => boolean
+  scroller: () => HTMLDivElement | undefined
+}
+
+type Snap = {
+  top: number
+  height: number
+  gap: number
+  max: number
+}
+
+export const historyLoadMode = (input: { start: number; more: boolean; loading: boolean }) => {
+  if (input.start > 0) return "reveal"
+  if (!input.more || input.loading) return "noop"
+  return "fetch"
+}
+
+export const historyRevealTop = (
+  mark: { top: number; height: number; gap: number; max: number },
+  next: { clientHeight: number; height: number },
+  threshold = 16,
+) => {
+  const delta = next.height - mark.height
+  if (delta <= 0) return mark.top
+  if (mark.max <= 0) return mark.top
+  if (mark.gap > threshold) return mark.top
+
+  const max = next.height - next.clientHeight
+  if (max <= 0) return 0
+  return Math.max(-max, Math.min(0, mark.top - delta))
+}
+
+const snap = (el: HTMLDivElement | undefined): Snap | undefined => {
+  if (!el) return
+  const max = el.scrollHeight - el.clientHeight
+  return {
+    top: el.scrollTop,
+    height: el.scrollHeight,
+    gap: max + el.scrollTop,
+    max,
+  }
+}
+
+const clamp = (el: HTMLDivElement, top: number) => {
+  const max = el.scrollHeight - el.clientHeight
+  if (max <= 0) return 0
+  return Math.max(-max, Math.min(0, top))
+}
+
+const revealThreshold = 16
+
+const reveal = (input: SessionHistoryWindowInput, mark: Snap | undefined) => {
+  const el = input.scroller()
+  if (!el || !mark) return
+  el.scrollTop = clamp(
+    el,
+    historyRevealTop(mark, { clientHeight: el.clientHeight, height: el.scrollHeight }, revealThreshold),
+  )
+}
+
+const preserve = (input: SessionHistoryWindowInput, fn: () => void) => {
+  const el = input.scroller()
+  if (!el) {
+    fn()
+    return
+  }
+  const top = el.scrollTop
+  fn()
+  el.scrollTop = top
+}
+
+/**
+ * Maintains the rendered history window for a session timeline.
+ *
+ * It keeps initial paint bounded to recent turns, reveals cached turns in
+ * small batches while scrolling upward, and prefetches older history near top.
+ */
+export function createSessionHistoryWindow(input: SessionHistoryWindowInput) {
+  const turnInit = 10
+  const turnBatch = 8
+  const turnScrollThreshold = 200
+  const turnPrefetchBuffer = 16
+  const prefetchCooldownMs = 400
+  const prefetchNoGrowthLimit = 2
+
+  const [state, setState] = createStore({
+    turnID: undefined as string | undefined,
+    turnStart: 0,
+    prefetchUntil: 0,
+    prefetchNoGrowth: 0,
+  })
+
+  const initialTurnStart = (len: number) => (len > turnInit ? len - turnInit : 0)
+
+  const turnStart = createMemo(() => {
+    const id = input.sessionID()
+    const len = input.visibleUserMessages().length
+    if (!id || len <= 0) return 0
+    if (state.turnID !== id) return initialTurnStart(len)
+    if (state.turnStart <= 0) return 0
+    if (state.turnStart >= len) return initialTurnStart(len)
+    return state.turnStart
+  })
+
+  const setTurnStart = (start: number) => {
+    const id = input.sessionID()
+    const next = start > 0 ? start : 0
+    if (!id) {
+      setState({ turnID: undefined, turnStart: next })
+      return
+    }
+    setState({ turnID: id, turnStart: next })
+  }
+
+  const renderedUserMessages = createMemo(
+    () => {
+      const msgs = input.visibleUserMessages()
+      const start = turnStart()
+      if (start <= 0) return msgs
+      return msgs.slice(start)
+    },
+    emptyUserMessages,
+    {
+      equals: same,
+    },
+  )
+
+  const backfillTurns = () => {
+    const start = turnStart()
+    if (start <= 0) return
+
+    const next = start - turnBatch
+    const nextStart = next > 0 ? next : 0
+
+    preserve(input, () => setTurnStart(nextStart))
+  }
+
+  /** Button path: reveal cached turns first, then fetch older history. */
+  const loadAndReveal = async () => {
+    const id = input.sessionID()
+    if (!id) return
+
+    const start = turnStart()
+    const mode = historyLoadMode({
+      start,
+      more: input.historyMore(),
+      loading: input.historyLoading(),
+    })
+
+    if (mode === "reveal") {
+      const mark = snap(input.scroller())
+      setTurnStart(0)
+      reveal(input, mark)
+      return
+    }
+
+    if (mode === "noop") return
+
+    const beforeVisible = input.visibleUserMessages().length
+    const mark = snap(input.scroller())
+
+    await input.loadMore(id)
+    if (input.sessionID() !== id) return
+
+    const afterVisible = input.visibleUserMessages().length
+    const growth = afterVisible - beforeVisible
+    if (growth <= 0) return
+    if (state.prefetchNoGrowth) setState("prefetchNoGrowth", 0)
+
+    reveal(input, mark)
+  }
+
+  /** Scroll/prefetch path: fetch older history from server. */
+  const fetchOlderMessages = async (opts?: { prefetch?: boolean }) => {
+    const id = input.sessionID()
+    if (!id) return
+    if (!input.historyMore() || input.historyLoading()) return
+
+    if (opts?.prefetch) {
+      const now = Date.now()
+      if (state.prefetchUntil > now) return
+      if (state.prefetchNoGrowth >= prefetchNoGrowthLimit) return
+      setState("prefetchUntil", now + prefetchCooldownMs)
+    }
+
+    const start = turnStart()
+    const beforeVisible = input.visibleUserMessages().length
+    const beforeRendered = start <= 0 ? beforeVisible : renderedUserMessages().length
+
+    await input.loadMore(id)
+    if (input.sessionID() !== id) return
+
+    const afterVisible = input.visibleUserMessages().length
+    const growth = afterVisible - beforeVisible
+
+    if (opts?.prefetch) {
+      setState("prefetchNoGrowth", growth > 0 ? 0 : state.prefetchNoGrowth + 1)
+    } else if (growth > 0 && state.prefetchNoGrowth) {
+      setState("prefetchNoGrowth", 0)
+    }
+
+    if (growth <= 0) return
+    if (turnStart() !== start) return
+
+    const revealMore = !opts?.prefetch
+    const currentRendered = renderedUserMessages().length
+    const base = Math.max(beforeRendered, currentRendered)
+    const target = revealMore ? Math.min(afterVisible, base + turnBatch) : base
+    const nextStart = Math.max(0, afterVisible - target)
+    preserve(input, () => setTurnStart(nextStart))
+  }
+
+  const onScrollerScroll = () => {
+    if (!input.userScrolled()) return
+    const el = input.scroller()
+    if (!el) return
+    if (el.scrollHeight - el.clientHeight + el.scrollTop >= turnScrollThreshold) return
+
+    const start = turnStart()
+    if (start > 0) {
+      if (start <= turnPrefetchBuffer) {
+        void fetchOlderMessages({ prefetch: true })
+      }
+      backfillTurns()
+      return
+    }
+
+    void fetchOlderMessages()
+  }
+
+  createEffect(
+    on(
+      input.sessionID,
+      () => {
+        setState({ prefetchUntil: 0, prefetchNoGrowth: 0 })
+      },
+      { defer: true },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => [input.sessionID(), input.messagesReady()] as const,
+      ([id, ready]) => {
+        if (!id || !ready) return
+        setTurnStart(initialTurnStart(input.visibleUserMessages().length))
+      },
+      { defer: true },
+    ),
+  )
+
+  return {
+    turnStart,
+    setTurnStart,
+    renderedUserMessages,
+    loadAndReveal,
+    onScrollerScroll,
+  }
+}

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

@@ -2,10 +2,10 @@ import { createEffect, createMemo, on, onCleanup, Show } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { useNavigate, useParams } from "@solidjs/router"
 import { Button } from "@opencode-ai/ui/button"
+import { useReducedMotion } from "@opencode-ai/ui/hooks"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Dialog } from "@opencode-ai/ui/dialog"
-import { prefersReducedMotion } from "@opencode-ai/ui/hooks"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { animate, type AnimationPlaybackControls, clearFadeStyles, FAST_SPRING } from "@opencode-ai/ui/motion"
 import { showToast } from "@opencode-ai/ui/toast"
@@ -32,7 +32,7 @@ export function SessionTimelineHeader(props: {
   const sync = useSync()
   const dialog = useDialog()
   const language = useLanguage()
-  const reduce = prefersReducedMotion
+  const reduce = useReducedMotion()
 
   const [title, setTitle] = createStore({
     draft: "",

packages/app/src/pages/session/terminal-panel.tsx

@@ -250,6 +250,7 @@ export function TerminalPanel() {
                           <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
                             <Terminal
                               pty={pty()}
+                              onConnect={() => terminal.trim(id)}
                               onCleanup={terminal.update}
                               onConnectError={() => terminal.clone(id)}
                             />

packages/opencode/migration/20260228203230_blue_harpoon/migration.sql

@@ -0,0 +1,17 @@
+CREATE TABLE `account` (
+	`id` text PRIMARY KEY,
+	`email` text NOT NULL,
+	`url` text NOT NULL,
+	`access_token` text NOT NULL,
+	`refresh_token` text NOT NULL,
+	`token_expiry` integer,
+	`selected_org_id` text,
+	`time_created` integer NOT NULL,
+	`time_updated` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `account_state` (
+	`id` integer PRIMARY KEY NOT NULL,
+	`active_account_id` text,
+	FOREIGN KEY (`active_account_id`) REFERENCES `account`(`id`) ON UPDATE no action ON DELETE set null
+);

packages/opencode/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.28.4",
+    "@effect/language-service": "0.79.0",
     "@octokit/webhooks-types": "7.6.1",
     "@opencode-ai/script": "workspace:*",
     "@parcel/watcher-darwin-arm64": "2.5.1",
@@ -107,6 +108,7 @@
     "decimal.js": "10.5.0",
     "diff": "catalog:",
     "drizzle-orm": "1.0.0-beta.16-ea816b6",
+    "effect": "catalog:",
     "fuzzysort": "3.1.0",
     "glob": "13.0.5",
     "google-auth-library": "10.5.0",

packages/opencode/src/account/account.sql.ts

@@ -1,7 +1,23 @@
-import { sqliteTable, text, integer, primaryKey, uniqueIndex } from "drizzle-orm/sqlite-core"
-import { eq } from "drizzle-orm"
+import { sqliteTable, text, integer, primaryKey } from "drizzle-orm/sqlite-core"
 import { Timestamps } from "@/storage/schema.sql"
 
+export const AccountTable = sqliteTable("account", {
+  id: text().primaryKey(),
+  email: text().notNull(),
+  url: text().notNull(),
+  access_token: text().notNull(),
+  refresh_token: text().notNull(),
+  token_expiry: integer(),
+  selected_org_id: text(),
+  ...Timestamps,
+})
+
+export const AccountStateTable = sqliteTable("account_state", {
+  id: integer().primaryKey(),
+  active_account_id: text().references(() => AccountTable.id, { onDelete: "set null" }),
+})
+
+// LEGACY
 export const ControlAccountTable = sqliteTable(
   "control_account",
   {

packages/opencode/src/account/index.ts

@@ -0,0 +1,43 @@
+import { Effect, Option, ServiceMap } from "effect"
+
+import {
+  Account as AccountSchema,
+  type AccountError,
+  type AccessToken,
+  AccountID,
+  AccountService,
+  OrgID,
+} from "./service"
+
+export { AccessToken, AccountID, OrgID } from "./service"
+
+import { runtime } from "@/effect/runtime"
+
+type AccountServiceShape = ServiceMap.Service.Shape<typeof AccountService>
+
+function runSync<A>(f: (service: AccountServiceShape) => Effect.Effect<A, AccountError>) {
+  return runtime.runSync(AccountService.use(f))
+}
+
+function runPromise<A>(f: (service: AccountServiceShape) => Effect.Effect<A, AccountError>) {
+  return runtime.runPromise(AccountService.use(f))
+}
+
+export namespace Account {
+  export const Account = AccountSchema
+  export type Account = AccountSchema
+
+  export function active(): Account | undefined {
+    return Option.getOrUndefined(runSync((service) => service.active()))
+  }
+
+  export async function config(accountID: AccountID, orgID: OrgID): Promise<Record<string, unknown> | undefined> {
+    const config = await runPromise((service) => service.config(accountID, orgID))
+    return Option.getOrUndefined(config)
+  }
+
+  export async function token(accountID: AccountID): Promise<AccessToken | undefined> {
+    const token = await runPromise((service) => service.token(accountID))
+    return Option.getOrUndefined(token)
+  }
+}

packages/opencode/src/account/repo.ts

@@ -0,0 +1,150 @@
+import { eq } from "drizzle-orm"
+import { Effect, Layer, Option, Schema, ServiceMap } from "effect"
+
+import { Database } from "@/storage/db"
+import { AccountStateTable, AccountTable } from "./account.sql"
+import { Account, AccountID, AccountRepoError, OrgID } from "./schema"
+
+export type AccountRow = (typeof AccountTable)["$inferSelect"]
+
+const decodeAccount = Schema.decodeUnknownSync(Account)
+
+type DbClient = Parameters<typeof Database.use>[0] extends (db: infer T) => unknown ? T : never
+
+const toAccountRepoError = (message: string, cause?: unknown) => new AccountRepoError({ message, cause })
+
+const db = <A>(run: (db: DbClient) => A) =>
+  Effect.try({
+    try: () => Database.use(run),
+    catch: (cause) => toAccountRepoError("Database operation failed", cause),
+  })
+
+const fromRow = (row: AccountRow) => decodeAccount(row)
+
+const current = (db: DbClient) => {
+  const state = db.select().from(AccountStateTable).where(eq(AccountStateTable.id, 1)).get()
+  if (!state?.active_account_id) return
+  return db.select().from(AccountTable).where(eq(AccountTable.id, state.active_account_id)).get()
+}
+
+const setActive = (db: DbClient, accountID: AccountID) =>
+  db
+    .insert(AccountStateTable)
+    .values({ id: 1, active_account_id: accountID })
+    .onConflictDoUpdate({
+      target: AccountStateTable.id,
+      set: { active_account_id: accountID },
+    })
+    .run()
+
+export class AccountRepo extends ServiceMap.Service<
+  AccountRepo,
+  {
+    readonly active: () => Effect.Effect<Option.Option<Account>, AccountRepoError>
+    readonly list: () => Effect.Effect<Account[], AccountRepoError>
+    readonly remove: (accountID: AccountID) => Effect.Effect<void, AccountRepoError>
+    readonly use: (accountID: AccountID, orgID: Option.Option<OrgID>) => Effect.Effect<void, AccountRepoError>
+    readonly getRow: (accountID: AccountID) => Effect.Effect<Option.Option<AccountRow>, AccountRepoError>
+    readonly persistToken: (input: {
+      accountID: AccountID
+      accessToken: string
+      refreshToken: string
+      expiry: Option.Option<number>
+    }) => Effect.Effect<void, AccountRepoError>
+    readonly persistAccount: (input: {
+      id: AccountID
+      email: string
+      url: string
+      accessToken: string
+      refreshToken: string
+      expiry: number
+      orgID: Option.Option<OrgID>
+    }) => Effect.Effect<void, AccountRepoError>
+  }
+>()("@opencode/AccountRepo") {
+  static readonly layer: Layer.Layer<AccountRepo> = Layer.succeed(
+    AccountRepo,
+    AccountRepo.of({
+      active: Effect.fn("AccountRepo.active")(() =>
+        db((db) => current(db)).pipe(Effect.map((row) => (row ? Option.some(fromRow(row)) : Option.none()))),
+      ),
+
+      list: Effect.fn("AccountRepo.list")(() => db((db) => db.select().from(AccountTable).all().map(fromRow))),
+
+      remove: Effect.fn("AccountRepo.remove")((accountID: AccountID) =>
+        db((db) =>
+          Database.transaction((tx) => {
+            tx.update(AccountStateTable)
+              .set({ active_account_id: null })
+              .where(eq(AccountStateTable.active_account_id, accountID))
+              .run()
+            tx.delete(AccountTable).where(eq(AccountTable.id, accountID)).run()
+          }),
+        ).pipe(Effect.asVoid),
+      ),
+
+      use: Effect.fn("AccountRepo.use")((accountID: AccountID, orgID: Option.Option<OrgID>) =>
+        db((db) =>
+          Database.transaction((tx) => {
+            tx.update(AccountTable)
+              .set({ selected_org_id: Option.getOrNull(orgID) })
+              .where(eq(AccountTable.id, accountID))
+              .run()
+            setActive(tx, accountID)
+          }),
+        ).pipe(Effect.asVoid),
+      ),
+
+      getRow: Effect.fn("AccountRepo.getRow")((accountID: AccountID) =>
+        db((db) => db.select().from(AccountTable).where(eq(AccountTable.id, accountID)).get()).pipe(
+          Effect.map(Option.fromNullishOr),
+        ),
+      ),
+
+      persistToken: Effect.fn("AccountRepo.persistToken")((input) =>
+        db((db) =>
+          db
+            .update(AccountTable)
+            .set({
+              access_token: input.accessToken,
+              refresh_token: input.refreshToken,
+              token_expiry: Option.getOrNull(input.expiry),
+            })
+            .where(eq(AccountTable.id, input.accountID))
+            .run(),
+        ).pipe(Effect.asVoid),
+      ),
+
+      persistAccount: Effect.fn("AccountRepo.persistAccount")((input) => {
+        const orgID = Option.getOrNull(input.orgID)
+        return Effect.try({
+          try: () =>
+            Database.transaction((tx) => {
+              tx.insert(AccountTable)
+                .values({
+                  id: input.id,
+                  email: input.email,
+                  url: input.url,
+                  access_token: input.accessToken,
+                  refresh_token: input.refreshToken,
+                  token_expiry: input.expiry,
+                  selected_org_id: orgID,
+                })
+                .onConflictDoUpdate({
+                  target: AccountTable.id,
+                  set: {
+                    access_token: input.accessToken,
+                    refresh_token: input.refreshToken,
+                    token_expiry: input.expiry,
+                    selected_org_id: orgID,
+                  },
+                })
+                .run()
+              setActive(tx, input.id)
+            }),
+          catch: (cause) => toAccountRepoError("Database operation failed", cause),
+        }).pipe(Effect.asVoid)
+      }),
+    }),
+  )
+}

packages/opencode/src/account/schema.ts

@@ -0,0 +1,73 @@
+import { Schema } from "effect"
+
+import { withStatics } from "@/util/schema"
+
+export const AccountID = Schema.String.pipe(
+  Schema.brand("AccountId"),
+  withStatics((s) => ({ make: (id: string) => s.makeUnsafe(id) })),
+)
+export type AccountID = Schema.Schema.Type<typeof AccountID>
+
+export const OrgID = Schema.String.pipe(
+  Schema.brand("OrgId"),
+  withStatics((s) => ({ make: (id: string) => s.makeUnsafe(id) })),
+)
+export type OrgID = Schema.Schema.Type<typeof OrgID>
+
+export const AccessToken = Schema.String.pipe(
+  Schema.brand("AccessToken"),
+  withStatics((s) => ({ make: (token: string) => s.makeUnsafe(token) })),
+)
+export type AccessToken = Schema.Schema.Type<typeof AccessToken>
+
+export class Account extends Schema.Class<Account>("Account")({
+  id: AccountID,
+  email: Schema.String,
+  url: Schema.String,
+  selected_org_id: Schema.NullOr(OrgID),
+}) {}
+
+export class Org extends Schema.Class<Org>("Org")({
+  id: OrgID,
+  name: Schema.String,
+}) {}
+
+export class AccountRepoError extends Schema.TaggedErrorClass<AccountRepoError>()("AccountRepoError", {
+  message: Schema.String,
+  cause: Schema.optional(Schema.Defect),
+}) {}
+
+export class AccountServiceError extends Schema.TaggedErrorClass<AccountServiceError>()("AccountServiceError", {
+  message: Schema.String,
+  cause: Schema.optional(Schema.Defect),
+}) {}
+
+export type AccountError = AccountRepoError | AccountServiceError
+
+export class Login extends Schema.Class<Login>("Login")({
+  code: Schema.String,
+  user: Schema.String,
+  url: Schema.String,
+  server: Schema.String,
+  expiry: Schema.Number,
+  interval: Schema.Number,
+}) {}
+
+export class PollSuccess extends Schema.TaggedClass<PollSuccess>()("PollSuccess", {
+  email: Schema.String,
+}) {}
+
+export class PollPending extends Schema.TaggedClass<PollPending>()("PollPending", {}) {}
+
+export class PollSlow extends Schema.TaggedClass<PollSlow>()("PollSlow", {}) {}
+
+export class PollExpired extends Schema.TaggedClass<PollExpired>()("PollExpired", {}) {}
+
+export class PollDenied extends Schema.TaggedClass<PollDenied>()("PollDenied", {}) {}
+
+export class PollError extends Schema.TaggedClass<PollError>()("PollError", {
+  cause: Schema.Defect,
+}) {}
+
+export const PollResult = Schema.Union([PollSuccess, PollPending, PollSlow, PollExpired, PollDenied, PollError])
+export type PollResult = Schema.Schema.Type<typeof PollResult>

packages/opencode/src/account/service.ts

@@ -0,0 +1,385 @@
+import { Clock, Effect, Layer, Option, Schema, ServiceMap } from "effect"
+import {
+  FetchHttpClient,
+  HttpClient,
+  HttpClientError,
+  HttpClientRequest,
+  HttpClientResponse,
+} from "effect/unstable/http"
+
+import { withTransientReadRetry } from "@/util/effect-http-client"
+import { AccountRepo, type AccountRow } from "./repo"
+import {
+  type AccountError,
+  AccessToken,
+  Account,
+  AccountID,
+  AccountRepoError,
+  AccountServiceError,
+  Login,
+  Org,
+  OrgID,
+  PollDenied,
+  PollError,
+  PollExpired,
+  PollPending,
+  type PollResult,
+  PollSlow,
+  PollSuccess,
+} from "./schema"
+
+export * from "./schema"
+
+export type AccountOrgs = {
+  account: Account
+  orgs: Org[]
+}
+
+const RemoteOrg = Schema.Struct({
+  id: Schema.optional(OrgID),
+  name: Schema.optional(Schema.String),
+})
+
+const RemoteOrgs = Schema.Array(RemoteOrg)
+
+const RemoteConfig = Schema.Struct({
+  config: Schema.Record(Schema.String, Schema.Json),
+})
+
+const TokenRefresh = Schema.Struct({
+  access_token: Schema.String,
+  refresh_token: Schema.optional(Schema.String),
+  expires_in: Schema.optional(Schema.Number),
+})
+
+const DeviceCode = Schema.Struct({
+  device_code: Schema.String,
+  user_code: Schema.String,
+  verification_uri_complete: Schema.String,
+  expires_in: Schema.Number,
+  interval: Schema.Number,
+})
+
+const DeviceToken = Schema.Struct({
+  access_token: Schema.optional(Schema.String),
+  refresh_token: Schema.optional(Schema.String),
+  expires_in: Schema.optional(Schema.Number),
+  error: Schema.optional(Schema.String),
+  error_description: Schema.optional(Schema.String),
+})
+
+const User = Schema.Struct({
+  id: Schema.optional(AccountID),
+  email: Schema.optional(Schema.String),
+})
+
+const ClientId = Schema.Struct({ client_id: Schema.String })
+
+const DeviceTokenRequest = Schema.Struct({
+  grant_type: Schema.String,
+  device_code: Schema.String,
+  client_id: Schema.String,
+})
+
+const serverDefault = "https://web-14275-d60e67f5-pyqs0590.onporter.run"
+const clientId = "opencode-cli"
+
+const toAccountServiceError = (message: string, cause?: unknown) => new AccountServiceError({ message, cause })
+
+const mapAccountServiceError =
+  (operation: string, message = "Account service operation failed") =>
+  <A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, AccountServiceError, R> =>
+    effect.pipe(
+      Effect.mapError((error) =>
+        error instanceof AccountServiceError ? error : toAccountServiceError(`${message} (${operation})`, error),
+      ),
+    )
+
+export class AccountService extends ServiceMap.Service<
+  AccountService,
+  {
+    readonly active: () => Effect.Effect<Option.Option<Account>, AccountError>
+    readonly list: () => Effect.Effect<Account[], AccountError>
+    readonly orgsByAccount: () => Effect.Effect<AccountOrgs[], AccountError>
+    readonly remove: (accountID: AccountID) => Effect.Effect<void, AccountError>
+    readonly use: (accountID: AccountID, orgID: Option.Option<OrgID>) => Effect.Effect<void, AccountError>
+    readonly orgs: (accountID: AccountID) => Effect.Effect<Org[], AccountError>
+    readonly config: (
+      accountID: AccountID,
+      orgID: OrgID,
+    ) => Effect.Effect<Option.Option<Record<string, unknown>>, AccountError>
+    readonly token: (accountID: AccountID) => Effect.Effect<Option.Option<AccessToken>, AccountError>
+    readonly login: (url?: string) => Effect.Effect<Login, AccountError>
+    readonly poll: (input: Login) => Effect.Effect<PollResult, AccountError>
+  }
+>()("@opencode/Account") {
+  static readonly layer: Layer.Layer<AccountService, never, AccountRepo | HttpClient.HttpClient> = Layer.effect(
+    AccountService,
+    Effect.gen(function* () {
+      const repo = yield* AccountRepo
+      const http = yield* HttpClient.HttpClient
+      const httpRead = withTransientReadRetry(http)
+
+      const execute = (operation: string, request: HttpClientRequest.HttpClientRequest) =>
+        http.execute(request).pipe(mapAccountServiceError(operation, "HTTP request failed"))
+
+      const executeRead = (operation: string, request: HttpClientRequest.HttpClientRequest) =>
+        httpRead.execute(request).pipe(mapAccountServiceError(operation, "HTTP request failed"))
+
+      const executeEffect = <E>(operation: string, request: Effect.Effect<HttpClientRequest.HttpClientRequest, E>) =>
+        request.pipe(
+          Effect.flatMap((req) => http.execute(req)),
+          mapAccountServiceError(operation, "HTTP request failed"),
+        )
+
+      const okOrNone = (operation: string, response: HttpClientResponse.HttpClientResponse) =>
+        HttpClientResponse.filterStatusOk(response).pipe(
+          Effect.map(Option.some),
+          Effect.catch((error) =>
+            HttpClientError.isHttpClientError(error) && error.reason._tag === "StatusCodeError"
+              ? Effect.succeed(Option.none<HttpClientResponse.HttpClientResponse>())
+              : Effect.fail(error),
+          ),
+          mapAccountServiceError(operation),
+        )
+
+      const tokenForRow = Effect.fn("AccountService.tokenForRow")(function* (found: AccountRow) {
+        const now = yield* Clock.currentTimeMillis
+        if (found.token_expiry && found.token_expiry > now) return Option.some(AccessToken.make(found.access_token))
+
+        const response = yield* execute(
+          "token.refresh",
+          HttpClientRequest.post(`${found.url}/oauth/token`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bodyUrlParams({
+              grant_type: "refresh_token",
+              refresh_token: found.refresh_token,
+            }),
+          ),
+        )
+
+        const ok = yield* okOrNone("token.refresh", response)
+        if (Option.isNone(ok)) return Option.none()
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(TokenRefresh)(ok.value).pipe(
+          mapAccountServiceError("token.refresh", "Failed to decode response"),
+        )
+
+        const expiry = Option.fromNullishOr(parsed.expires_in).pipe(Option.map((e) => now + e * 1000))
+
+        yield* repo.persistToken({
+          accountID: AccountID.make(found.id),
+          accessToken: parsed.access_token,
+          refreshToken: parsed.refresh_token ?? found.refresh_token,
+          expiry,
+        })
+
+        return Option.some(AccessToken.make(parsed.access_token))
+      })
+
+      const resolveAccess = Effect.fn("AccountService.resolveAccess")(function* (accountID: AccountID) {
+        const maybeAccount = yield* repo.getRow(accountID)
+        if (Option.isNone(maybeAccount)) return Option.none<{ account: AccountRow; accessToken: AccessToken }>()
+
+        const account = maybeAccount.value
+        const accessToken = yield* tokenForRow(account)
+        if (Option.isNone(accessToken)) return Option.none<{ account: AccountRow; accessToken: AccessToken }>()
+
+        return Option.some({ account, accessToken: accessToken.value })
+      })
+
+      const token = Effect.fn("AccountService.token")((accountID: AccountID) =>
+        resolveAccess(accountID).pipe(Effect.map(Option.map((r) => r.accessToken))),
+      )
+
+      const orgsByAccount = Effect.fn("AccountService.orgsByAccount")(function* () {
+        const accounts = yield* repo.list()
+        return yield* Effect.forEach(
+          accounts,
+          (account) => orgs(account.id).pipe(Effect.map((orgs) => ({ account, orgs }))),
+          { concurrency: "unbounded" },
+        )
+      })
+
+      const orgs = Effect.fn("AccountService.orgs")(function* (accountID: AccountID) {
+        const resolved = yield* resolveAccess(accountID)
+        if (Option.isNone(resolved)) return []
+
+        const { account, accessToken } = resolved.value
+
+        const response = yield* executeRead(
+          "orgs",
+          HttpClientRequest.get(`${account.url}/api/orgs`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(accessToken),
+          ),
+        )
+
+        const ok = yield* okOrNone("orgs", response)
+        if (Option.isNone(ok)) return []
+
+        const orgs = yield* HttpClientResponse.schemaBodyJson(RemoteOrgs)(ok.value).pipe(
+          mapAccountServiceError("orgs", "Failed to decode response"),
+        )
+        return orgs
+          .filter((org) => org.id !== undefined && org.name !== undefined)
+          .map((org) => new Org({ id: org.id!, name: org.name! }))
+      })
+
+      const config = Effect.fn("AccountService.config")(function* (accountID: AccountID, orgID: OrgID) {
+        const resolved = yield* resolveAccess(accountID)
+        if (Option.isNone(resolved)) return Option.none()
+
+        const { account, accessToken } = resolved.value
+
+        const response = yield* executeRead(
+          "config",
+          HttpClientRequest.get(`${account.url}/api/config`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(accessToken),
+            HttpClientRequest.setHeaders({ "x-org-id": orgID }),
+          ),
+        )
+
+        const ok = yield* okOrNone("config", response)
+        if (Option.isNone(ok)) return Option.none()
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(RemoteConfig)(ok.value).pipe(
+          mapAccountServiceError("config", "Failed to decode response"),
+        )
+        return Option.some(parsed.config)
+      })
+
+      const login = Effect.fn("AccountService.login")(function* (url?: string) {
+        const server = url ?? serverDefault
+
+        const response = yield* executeEffect(
+          "login",
+          HttpClientRequest.post(`${server}/auth/device/code`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.schemaBodyJson(ClientId)({ client_id: clientId }),
+          ),
+        )
+
+        const ok = yield* okOrNone("login", response)
+        if (Option.isNone(ok)) {
+          const body = yield* response.text.pipe(Effect.orElseSucceed(() => ""))
+          return yield* toAccountServiceError(`Failed to initiate device flow: ${body || response.status}`)
+        }
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(DeviceCode)(ok.value).pipe(
+          mapAccountServiceError("login", "Failed to decode response"),
+        )
+        return new Login({
+          code: parsed.device_code,
+          user: parsed.user_code,
+          url: `${server}${parsed.verification_uri_complete}`,
+          server,
+          expiry: parsed.expires_in,
+          interval: parsed.interval,
+        })
+      })
+
+      const poll = Effect.fn("AccountService.poll")(function* (input: Login) {
+        const response = yield* executeEffect(
+          "poll",
+          HttpClientRequest.post(`${input.server}/auth/device/token`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.schemaBodyJson(DeviceTokenRequest)({
+              grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+              device_code: input.code,
+              client_id: clientId,
+            }),
+          ),
+        )
+
+        const parsed = yield* HttpClientResponse.schemaBodyJson(DeviceToken)(response).pipe(
+          mapAccountServiceError("poll", "Failed to decode response"),
+        )
+
+        if (!parsed.access_token) {
+          if (parsed.error === "authorization_pending") return new PollPending()
+          if (parsed.error === "slow_down") return new PollSlow()
+          if (parsed.error === "expired_token") return new PollExpired()
+          if (parsed.error === "access_denied") return new PollDenied()
+          return new PollError({ cause: parsed.error })
+        }
+
+        const access = parsed.access_token
+
+        const fetchUser = executeRead(
+          "poll.user",
+          HttpClientRequest.get(`${input.server}/api/user`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(access),
+          ),
+        ).pipe(
+          Effect.flatMap((r) =>
+            HttpClientResponse.schemaBodyJson(User)(r).pipe(
+              mapAccountServiceError("poll.user", "Failed to decode response"),
+            ),
+          ),
+        )
+
+        const fetchOrgs = executeRead(
+          "poll.orgs",
+          HttpClientRequest.get(`${input.server}/api/orgs`).pipe(
+            HttpClientRequest.acceptJson,
+            HttpClientRequest.bearerToken(access),
+          ),
+        ).pipe(
+          Effect.flatMap((r) =>
+            HttpClientResponse.schemaBodyJson(RemoteOrgs)(r).pipe(
+              mapAccountServiceError("poll.orgs", "Failed to decode response"),
+            ),
+          ),
+        )
+
+        const [user, remoteOrgs] = yield* Effect.all([fetchUser, fetchOrgs], { concurrency: 2 })
+
+        const userId = user.id
+        const userEmail = user.email
+
+        if (!userId || !userEmail) {
+          return new PollError({ cause: "No id or email in response" })
+        }
+
+        const firstOrgID = remoteOrgs.length > 0 ? Option.fromNullishOr(remoteOrgs[0].id) : Option.none()
+
+        const now = yield* Clock.currentTimeMillis
+        const expiry = now + (parsed.expires_in ?? 0) * 1000
+        const refresh = parsed.refresh_token ?? ""
+
+        yield* repo.persistAccount({
+          id: userId,
+          email: userEmail,
+          url: input.server,
+          accessToken: access,
+          refreshToken: refresh,
+          expiry,
+          orgID: firstOrgID,
+        })
+
+        return new PollSuccess({ email: userEmail })
+      })
+
+      return AccountService.of({
+        active: repo.active,
+        list: repo.list,
+        orgsByAccount,
+        remove: repo.remove,
+        use: repo.use,
+        orgs,
+        config,
+        token,
+        login,
+        poll,
+      })
+    }),
+  )
+
+  static readonly defaultLayer = AccountService.layer.pipe(
+    Layer.provide(AccountRepo.layer),
+    Layer.provide(FetchHttpClient.layer),
+  )
+}

packages/opencode/src/cli/cmd/account.ts

@@ -0,0 +1,177 @@
+import { cmd } from "./cmd"
+import { Duration, Effect, Match, Option } from "effect"
+import { UI } from "../ui"
+import { runtime } from "@/effect/runtime"
+import { AccountID, AccountService, OrgID, PollExpired, type PollResult } from "@/account/service"
+import { type AccountError } from "@/account/schema"
+import * as Prompt from "../effect/prompt"
+import open from "open"
+
+const openBrowser = (url: string) => Effect.promise(() => open(url).catch(() => undefined))
+
+const println = (msg: string) => Effect.sync(() => UI.println(msg))
+
+const loginEffect = Effect.fn("login")(function* (url?: string) {
+  const service = yield* AccountService
+
+  yield* Prompt.intro("Log in")
+  const login = yield* service.login(url)
+
+  yield* Prompt.log.info("Go to: " + login.url)
+  yield* Prompt.log.info("Enter code: " + login.user)
+  yield* openBrowser(login.url)
+
+  const s = Prompt.spinner()
+  yield* s.start("Waiting for authorization...")
+
+  const poll = (wait: number): Effect.Effect<PollResult, AccountError> =>
+    Effect.gen(function* () {
+      yield* Effect.sleep(wait)
+      const result = yield* service.poll(login)
+      if (result._tag === "PollPending") return yield* poll(wait)
+      if (result._tag === "PollSlow") return yield* poll(wait + 5000)
+      return result
+    })
+
+  const result = yield* poll(login.interval * 1000).pipe(
+    Effect.timeout(Duration.seconds(login.expiry)),
+    Effect.catchTag("TimeoutError", () => Effect.succeed(new PollExpired())),
+  )
+
+  yield* Match.valueTags(result, {
+    PollSuccess: (r) =>
+      Effect.gen(function* () {
+        yield* s.stop("Logged in as " + r.email)
+        yield* Prompt.outro("Done")
+      }),
+    PollExpired: () => s.stop("Device code expired", 1),
+    PollDenied: () => s.stop("Authorization denied", 1),
+    PollError: (r) => s.stop("Error: " + String(r.cause), 1),
+    PollPending: () => s.stop("Unexpected state", 1),
+    PollSlow: () => s.stop("Unexpected state", 1),
+  })
+})
+
+const logoutEffect = Effect.fn("logout")(function* (email?: string) {
+  const service = yield* AccountService
+
+  if (email) {
+    const accounts = yield* service.list()
+    const match = accounts.find((a) => a.email === email)
+    if (!match) return yield* println("Account not found: " + email)
+    yield* service.remove(match.id)
+    yield* println("Logged out from " + email)
+    return
+  }
+
+  const active = yield* service.active()
+  if (Option.isNone(active)) return yield* println("Not logged in")
+  yield* service.remove(active.value.id)
+  yield* println("Logged out from " + active.value.email)
+})
+
+interface OrgChoice {
+  orgID: OrgID
+  accountID: AccountID
+  label: string
+}
+
+const switchEffect = Effect.fn("switch")(function* () {
+  const service = yield* AccountService
+
+  const groups = yield* service.orgsByAccount()
+  if (groups.length === 0) return yield* println("Not logged in")
+
+  const active = yield* service.active()
+  const activeOrgID = Option.flatMap(active, (a) => Option.fromNullishOr(a.selected_org_id))
+
+  const opts = groups.flatMap((group) =>
+    group.orgs.map((org) => {
+      const isActive = Option.isSome(activeOrgID) && activeOrgID.value === org.id
+      return {
+        value: { orgID: org.id, accountID: group.account.id, label: org.name },
+        label: isActive
+          ? `${org.name} (${group.account.email})` + UI.Style.TEXT_DIM + " (active)"
+          : `${org.name} (${group.account.email})`,
+      }
+    }),
+  )
+  if (opts.length === 0) return yield* println("No orgs found")
+
+  yield* Prompt.intro("Switch org")
+
+  const selected = yield* Prompt.select<OrgChoice>({ message: "Select org", options: opts })
+  if (Option.isNone(selected)) return
+
+  const choice = selected.value
+  yield* service.use(choice.accountID, Option.some(choice.orgID))
+  yield* Prompt.outro("Switched to " + choice.label)
+})
+
+const orgsEffect = Effect.fn("orgs")(function* () {
+  const service = yield* AccountService
+
+  const groups = yield* service.orgsByAccount()
+  if (groups.length === 0) return yield* println("No accounts found")
+  if (!groups.some((group) => group.orgs.length > 0)) return yield* println("No orgs found")
+
+  const active = yield* service.active()
+  const activeOrgID = Option.flatMap(active, (a) => Option.fromNullishOr(a.selected_org_id))
+
+  for (const group of groups) {
+    for (const org of group.orgs) {
+      const isActive = Option.isSome(activeOrgID) && activeOrgID.value === org.id
+      const dot = isActive ? UI.Style.TEXT_SUCCESS + "●" + UI.Style.TEXT_NORMAL : " "
+      const name = isActive ? UI.Style.TEXT_HIGHLIGHT_BOLD + org.name + UI.Style.TEXT_NORMAL : org.name
+      const email = UI.Style.TEXT_DIM + group.account.email + UI.Style.TEXT_NORMAL
+      const id = UI.Style.TEXT_DIM + org.id + UI.Style.TEXT_NORMAL
+      yield* println(`  ${dot} ${name}  ${email}  ${id}`)
+    }
+  }
+})
+
+export const LoginCommand = cmd({
+  command: "login [url]",
+  describe: "log in to an opencode account",
+  builder: (yargs) =>
+    yargs.positional("url", {
+      describe: "server URL",
+      type: "string",
+    }),
+  async handler(args) {
+    UI.empty()
+    await runtime.runPromise(loginEffect(args.url))
+  },
+})
+
+export const LogoutCommand = cmd({
+  command: "logout [email]",
+  describe: "log out from an account",
+  builder: (yargs) =>
+    yargs.positional("email", {
+      describe: "account email to log out from",
+      type: "string",
+    }),
+  async handler(args) {
+    UI.empty()
+    await runtime.runPromise(logoutEffect(args.email))
+  },
+})
+
+export const SwitchCommand = cmd({
+  command: "switch",
+  describe: "switch active org",
+  async handler() {
+    UI.empty()
+    await runtime.runPromise(switchEffect())
+  },
+})
+
+export const OrgsCommand = cmd({
+  command: "orgs",
+  describe: "list all orgs",
+  async handler() {
+    UI.empty()
+    await runtime.runPromise(orgsEffect())
+  },
+})

packages/opencode/src/cli/cmd/import.ts

@@ -10,7 +10,7 @@ import { ShareNext } from "../../share/share-next"
 import { EOL } from "os"
 import { Filesystem } from "../../util/filesystem"
 
-/** Discriminated union returned by the ShareNext API (GET /api/share/:id/data) */
+/** Discriminated union returned by the ShareNext API (GET /api/shares/:id/data) */
 export type ShareData =
   | { type: "session"; data: SDKSession }
   | { type: "message"; data: Message }
@@ -24,6 +24,14 @@ export function parseShareUrl(url: string): string | null {
   return match ? match[1] : null
 }
 
+export function shouldAttachShareAuthHeaders(shareUrl: string, controlBaseUrl: string): boolean {
+  try {
+    return new URL(shareUrl).origin === new URL(controlBaseUrl).origin
+  } catch {
+    return false
+  }
+}
+
 /**
  * Transform ShareNext API response (flat array) into the nested structure for local file storage.
  *
@@ -97,8 +105,21 @@ export const ImportCommand = cmd({
           return
         }
 
-        const baseUrl = await ShareNext.url()
-        const response = await fetch(`${baseUrl}/api/share/${slug}/data`)
+        const parsed = new URL(args.file)
+        const baseUrl = parsed.origin
+        const req = await ShareNext.request()
+        const headers = shouldAttachShareAuthHeaders(args.file, req.baseUrl) ? req.headers : {}
+
+        const dataPath = req.api.data(slug)
+        let response = await fetch(`${baseUrl}${dataPath}`, {
+          headers,
+        })
+
+        if (!response.ok && dataPath !== `/api/share/${slug}/data`) {
+          response = await fetch(`${baseUrl}/api/share/${slug}/data`, {
+            headers,
+          })
+        }
 
         if (!response.ok) {
           process.stdout.write(`Failed to fetch share data: ${response.statusText}`)

packages/opencode/src/cli/cmd/providers.ts

@@ -13,27 +13,13 @@ import { Instance } from "../../project/instance"
 import type { Hooks } from "@opencode-ai/plugin"
 import { Process } from "../../util/process"
 import { text } from "node:stream/consumers"
-import { setTimeout as sleep } from "node:timers/promises"
 
 type PluginAuth = NonNullable<Hooks["auth"]>
 
-/**
- * Handle plugin-based authentication flow.
- * Returns true if auth was handled, false if it should fall through to default handling.
- */
-async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string, methodName?: string): Promise<boolean> {
+async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string): Promise<boolean> {
   let index = 0
-  if (methodName) {
-    const match = plugin.auth.methods.findIndex((x) => x.label.toLowerCase() === methodName.toLowerCase())
-    if (match === -1) {
-      prompts.log.error(
-        `Unknown method "${methodName}" for ${provider}. Available: ${plugin.auth.methods.map((x) => x.label).join(", ")}`,
-      )
-      process.exit(1)
-    }
-    index = match
-  } else if (plugin.auth.methods.length > 1) {
-    const selected = await prompts.select({
+  if (plugin.auth.methods.length > 1) {
+    const method = await prompts.select({
       message: "Login method",
       options: [
         ...plugin.auth.methods.map((x, index) => ({
@@ -42,13 +28,12 @@ async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string,
         })),
       ],
     })
-    if (prompts.isCancel(selected)) throw new UI.CancelledError()
-    index = parseInt(selected)
+    if (prompts.isCancel(method)) throw new UI.CancelledError()
+    index = parseInt(method)
   }
   const method = plugin.auth.methods[index]
 
-  // Handle prompts for all auth types
-  await sleep(10)
+  await Bun.sleep(10)
   const inputs: Record<string, string> = {}
   if (method.prompts) {
     for (const prompt of method.prompts) {
@@ -171,11 +156,6 @@ async function handlePluginAuth(plugin: { auth: PluginAuth }, provider: string,
   return false
 }
 
-/**
- * Build a deduplicated list of plugin-registered auth providers that are not
- * already present in models.dev, respecting enabled/disabled provider lists.
- * Pure function with no side effects; safe to test without mocking.
- */
 export function resolvePluginProviders(input: {
   hooks: Hooks[]
   existingProviders: Record<string, unknown>
@@ -203,19 +183,20 @@ export function resolvePluginProviders(input: {
   return result
 }
 
-export const AuthCommand = cmd({
-  command: "auth",
-  describe: "manage credentials",
+export const ProvidersCommand = cmd({
+  command: "providers",
+  aliases: ["auth"],
+  describe: "manage AI providers and credentials",
   builder: (yargs) =>
-    yargs.command(AuthLoginCommand).command(AuthLogoutCommand).command(AuthListCommand).demandCommand(),
+    yargs.command(ProvidersListCommand).command(ProvidersLoginCommand).command(ProvidersLogoutCommand).demandCommand(),
   async handler() {},
 })
 
-export const AuthListCommand = cmd({
+export const ProvidersListCommand = cmd({
   command: "list",
   aliases: ["ls"],
-  describe: "list providers",
-  async handler() {
+  describe: "list providers and credentials",
+  async handler(_args) {
     UI.empty()
     const authPath = path.join(Global.Path.data, "auth.json")
     const homedir = os.homedir()
@@ -231,7 +212,6 @@ export const AuthListCommand = cmd({
 
     prompts.outro(`${results.length} credentials`)
 
-    // Environment variables section
     const activeEnvVars: Array<{ provider: string; envVar: string }> = []
 
     for (const [providerID, provider] of Object.entries(database)) {
@@ -258,25 +238,14 @@ export const AuthListCommand = cmd({
   },
 })
 
-export const AuthLoginCommand = cmd({
+export const ProvidersLoginCommand = cmd({
   command: "login [url]",
   describe: "log in to a provider",
   builder: (yargs) =>
-    yargs
-      .positional("url", {
-        describe: "opencode auth provider",
-        type: "string",
-      })
-      .option("provider", {
-        alias: ["p"],
-        describe: "provider id or name to log in to (skips provider selection)",
-        type: "string",
-      })
-      .option("method", {
-        alias: ["m"],
-        describe: "login method label (skips method selection)",
-        type: "string",
-      }),
+    yargs.positional("url", {
+      describe: "opencode auth provider",
+      type: "string",
+    }),
   async handler(args) {
     await Instance.provide({
       directory: process.cwd(),
@@ -284,8 +253,7 @@ export const AuthLoginCommand = cmd({
         UI.empty()
         prompts.intro("Add credential")
         if (args.url) {
-          const url = args.url.replace(/\/+$/, "")
-          const wellknown = await fetch(`${url}/.well-known/opencode`).then((x) => x.json() as any)
+          const wellknown = await fetch(`${args.url}/.well-known/opencode`).then((x) => x.json() as any)
           prompts.log.info(`Running \`${wellknown.auth.command.join(" ")}\``)
           const proc = Process.spawn(wellknown.auth.command, {
             stdout: "pipe",
@@ -301,12 +269,12 @@ export const AuthLoginCommand = cmd({
             prompts.outro("Done")
             return
           }
-          await Auth.set(url, {
+          await Auth.set(args.url, {
             type: "wellknown",
             key: wellknown.auth.env,
             token: token.trim(),
           })
-          prompts.log.success("Logged into " + url)
+          prompts.log.success("Logged into " + args.url)
           prompts.outro("Done")
           return
         }
@@ -343,76 +311,59 @@ export const AuthLoginCommand = cmd({
           enabled,
           providerNames: Object.fromEntries(Object.entries(config.provider ?? {}).map(([id, p]) => [id, p.name])),
         })
-        const options = [
-          ...pipe(
-            providers,
-            values(),
-            sortBy(
-              (x) => priority[x.id] ?? 99,
-              (x) => x.name ?? x.id,
+        let provider = await prompts.autocomplete({
+          message: "Select provider",
+          maxItems: 8,
+          options: [
+            ...pipe(
+              providers,
+              values(),
+              sortBy(
+                (x) => priority[x.id] ?? 99,
+                (x) => x.name ?? x.id,
+              ),
+              map((x) => ({
+                label: x.name,
+                value: x.id,
+                hint: {
+                  opencode: "recommended",
+                  anthropic: "Claude Max or API key",
+                  openai: "ChatGPT Plus/Pro or API key",
+                }[x.id],
+              })),
             ),
-            map((x) => ({
+            ...pluginProviders.map((x) => ({
               label: x.name,
               value: x.id,
-              hint: {
-                opencode: "recommended",
-                anthropic: "Claude Max or API key",
-                openai: "ChatGPT Plus/Pro or API key",
-              }[x.id],
+              hint: "plugin",
             })),
-          ),
-          ...pluginProviders.map((x) => ({
-            label: x.name,
-            value: x.id,
-            hint: "plugin",
-          })),
-        ]
+            {
+              value: "other",
+              label: "Other",
+            },
+          ],
+        })
 
-        let provider: string
-        if (args.provider) {
-          const input = args.provider
-          const byID = options.find((x) => x.value === input)
-          const byName = options.find((x) => x.label.toLowerCase() === input.toLowerCase())
-          const match = byID ?? byName
-          if (!match) {
-            prompts.log.error(`Unknown provider "${input}"`)
-            process.exit(1)
-          }
-          provider = match.value
-        } else {
-          const selected = await prompts.autocomplete({
-            message: "Select provider",
-            maxItems: 8,
-            options: [
-              ...options,
-              {
-                value: "other",
-                label: "Other",
-              },
-            ],
-          })
-          if (prompts.isCancel(selected)) throw new UI.CancelledError()
-          provider = selected as string
-        }
+        if (prompts.isCancel(provider)) throw new UI.CancelledError()
 
         const plugin = await Plugin.list().then((x) => x.findLast((x) => x.auth?.provider === provider))
         if (plugin && plugin.auth) {
-          const handled = await handlePluginAuth({ auth: plugin.auth }, provider, args.method)
+          const handled = await handlePluginAuth({ auth: plugin.auth }, provider)
           if (handled) return
         }
 
         if (provider === "other") {
-          const custom = await prompts.text({
+          provider = await prompts.text({
             message: "Enter provider id",
             validate: (x) => (x && x.match(/^[0-9a-z-]+$/) ? undefined : "a-z, 0-9 and hyphens only"),
           })
-          if (prompts.isCancel(custom)) throw new UI.CancelledError()
-          provider = custom.replace(/^@ai-sdk\//, "")
+          if (prompts.isCancel(provider)) throw new UI.CancelledError()
+          provider = provider.replace(/^@ai-sdk\//, "")
+          if (prompts.isCancel(provider)) throw new UI.CancelledError()
 
-          // Check if a plugin provides auth for this custom provider
           const customPlugin = await Plugin.list().then((x) => x.findLast((x) => x.auth?.provider === provider))
           if (customPlugin && customPlugin.auth) {
-            const handled = await handlePluginAuth({ auth: customPlugin.auth }, provider, args.method)
+            const handled = await handlePluginAuth({ auth: customPlugin.auth }, provider)
             if (handled) return
           }
 
@@ -461,10 +412,10 @@ export const AuthLoginCommand = cmd({
   },
 })
 
-export const AuthLogoutCommand = cmd({
+export const ProvidersLogoutCommand = cmd({
   command: "logout",
   describe: "log out from a configured provider",
-  async handler() {
+  async handler(_args) {
     UI.empty()
     const credentials = await Auth.all().then((x) => Object.entries(x))
     prompts.intro("Remove credential")

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -377,7 +377,12 @@ export function Session() {
             sessionID: route.sessionID,
           })
           .then((res) => copy(res.data!.share!.url))
-          .catch(() => toast.show({ message: "Failed to share session", variant: "error" }))
+          .catch((error) => {
+            toast.show({
+              message: error instanceof Error ? error.message : "Failed to share session",
+              variant: "error",
+            })
+          })
         dialog.clear()
       },
     },
@@ -480,7 +485,12 @@ export function Session() {
             sessionID: route.sessionID,
           })
           .then(() => toast.show({ message: "Session unshared successfully", variant: "success" }))
-          .catch(() => toast.show({ message: "Failed to unshare session", variant: "error" }))
+          .catch((error) => {
+            toast.show({
+              message: error instanceof Error ? error.message : "Failed to unshare session",
+              variant: "error",
+            })
+          })
         dialog.clear()
       },
     },

packages/opencode/src/cli/effect/prompt.ts

@@ -0,0 +1,25 @@
+import * as prompts from "@clack/prompts"
+import { Effect, Option } from "effect"
+
+export const intro = (msg: string) => Effect.sync(() => prompts.intro(msg))
+export const outro = (msg: string) => Effect.sync(() => prompts.outro(msg))
+
+export const log = {
+  info: (msg: string) => Effect.sync(() => prompts.log.info(msg)),
+}
+
+export const select = <Value>(opts: Parameters<typeof prompts.select<Value>>[0]) =>
+  Effect.tryPromise(() => prompts.select(opts)).pipe(
+    Effect.map((result) => {
+      if (prompts.isCancel(result)) return Option.none<Value>()
+      return Option.some(result)
+    }),
+  )
+
+export const spinner = () => {
+  const s = prompts.spinner()
+  return {
+    start: (msg: string) => Effect.sync(() => s.start(msg)),
+    stop: (msg: string, code?: number) => Effect.sync(() => s.stop(msg, code)),
+  }
+}

packages/opencode/src/config/config.ts

@@ -12,6 +12,7 @@ import { lazy } from "../util/lazy"
 import { NamedError } from "@opencode-ai/util/error"
 import { Flag } from "../flag/flag"
 import { Auth } from "../auth"
+import { Env } from "../env"
 import {
   type ParseError as JsoncParseError,
   applyEdits,
@@ -32,7 +33,7 @@ import { Glob } from "../util/glob"
 import { PackageRegistry } from "@/bun/registry"
 import { proxied } from "@/util/proxied"
 import { iife } from "@/util/iife"
-import { Control } from "@/control"
+import { Account } from "@/account"
 import { ConfigPaths } from "./paths"
 import { Filesystem } from "@/util/filesystem"
 
@@ -108,10 +109,6 @@ export namespace Config {
       }
     }
 
-    const token = await Control.token()
-    if (token) {
-    }
-
     // Global user config overrides remote config.
     result = mergeConfigConcatArrays(result, await global())
 
@@ -178,6 +175,26 @@ export namespace Config {
       log.debug("loaded custom config from OPENCODE_CONFIG_CONTENT")
     }
 
+    const active = Account.active()
+    if (active?.selected_org_id) {
+      const config = await Account.config(active.id, active.selected_org_id)
+      const token = await Account.token(active.id)
+      if (token) {
+        process.env["OPENCODE_CONTROL_TOKEN"] = token
+        Env.set("OPENCODE_CONTROL_TOKEN", token)
+      }
+
+      if (config) {
+        result = mergeConfigConcatArrays(
+          result,
+          await load(JSON.stringify(config), {
+            dir: path.dirname(`${active.url}/api/config`),
+            source: `${active.url}/api/config`,
+          }),
+        )
+      }
+    }
+
     // Load managed config files last (highest priority) - enterprise admin-controlled
     // Kept separate from directories array to avoid write operations when installing plugins
     // which would fail on system directories requiring elevated permissions

packages/opencode/src/control/index.ts

@@ -1,67 +0,0 @@
-import { eq, and } from "drizzle-orm"
-import { Database } from "@/storage/db"
-import { ControlAccountTable } from "./control.sql"
-import z from "zod"
-
-export * from "./control.sql"
-
-export namespace Control {
-  export const Account = z.object({
-    email: z.string(),
-    url: z.string(),
-  })
-  export type Account = z.infer<typeof Account>
-
-  function fromRow(row: (typeof ControlAccountTable)["$inferSelect"]): Account {
-    return {
-      email: row.email,
-      url: row.url,
-    }
-  }
-
-  export function account(): Account | undefined {
-    const row = Database.use((db) =>
-      db.select().from(ControlAccountTable).where(eq(ControlAccountTable.active, true)).get(),
-    )
-    return row ? fromRow(row) : undefined
-  }
-
-  export async function token(): Promise<string | undefined> {
-    const row = Database.use((db) =>
-      db.select().from(ControlAccountTable).where(eq(ControlAccountTable.active, true)).get(),
-    )
-    if (!row) return undefined
-    if (row.token_expiry && row.token_expiry > Date.now()) return row.access_token
-
-    const res = await fetch(`${row.url}/oauth/token`, {
-      method: "POST",
-      headers: { "Content-Type": "application/x-www-form-urlencoded" },
-      body: new URLSearchParams({
-        grant_type: "refresh_token",
-        refresh_token: row.refresh_token,
-      }).toString(),
-    })
-
-    if (!res.ok) return
-
-    const json = (await res.json()) as {
-      access_token: string
-      refresh_token?: string
-      expires_in?: number
-    }
-
-    Database.use((db) =>
-      db
-        .update(ControlAccountTable)
-        .set({
-          access_token: json.access_token,
-          refresh_token: json.refresh_token ?? row.refresh_token,
-          token_expiry: json.expires_in ? Date.now() + json.expires_in * 1000 : undefined,
-        })
-        .where(and(eq(ControlAccountTable.email, row.email), eq(ControlAccountTable.url, row.url)))
-        .run(),
-    )
-
-    return json.access_token
-  }
-}

packages/opencode/src/effect/runtime.ts

@@ -0,0 +1,4 @@
+import { ManagedRuntime } from "effect"
+import { AccountService } from "@/account/service"
+
+export const runtime = ManagedRuntime.make(AccountService.defaultLayer)

packages/opencode/src/index.ts

@@ -3,7 +3,8 @@ import { hideBin } from "yargs/helpers"
 import { RunCommand } from "./cli/cmd/run"
 import { GenerateCommand } from "./cli/cmd/generate"
 import { Log } from "./util/log"
-import { AuthCommand } from "./cli/cmd/auth"
+import { LoginCommand, LogoutCommand, SwitchCommand, OrgsCommand } from "./cli/cmd/account"
+import { ProvidersCommand } from "./cli/cmd/providers"
 import { AgentCommand } from "./cli/cmd/agent"
 import { UpgradeCommand } from "./cli/cmd/upgrade"
 import { UninstallCommand } from "./cli/cmd/uninstall"
@@ -134,7 +135,11 @@ let cli = yargs(hideBin(process.argv))
   .command(RunCommand)
   .command(GenerateCommand)
   .command(DebugCommand)
-  .command(AuthCommand)
+  .command(LoginCommand)
+  .command(LogoutCommand)
+  .command(SwitchCommand)
+  .command(OrgsCommand)
+  .command(ProvidersCommand)
   .command(AgentCommand)
   .command(UpgradeCommand)
   .command(UninstallCommand)

packages/opencode/src/share/share-next.ts

@@ -1,4 +1,5 @@
 import { Bus } from "@/bus"
+import { Account } from "@/account"
 import { Config } from "@/config/config"
 import { Provider } from "@/provider/provider"
 import { Session } from "@/session"
@@ -11,8 +12,51 @@ import type * as SDK from "@opencode-ai/sdk/v2"
 export namespace ShareNext {
   const log = Log.create({ service: "share-next" })
 
+  type ApiEndpoints = {
+    create: string
+    sync: (shareId: string) => string
+    remove: (shareId: string) => string
+    data: (shareId: string) => string
+  }
+
+  function apiEndpoints(resource: string): ApiEndpoints {
+    return {
+      create: `/api/${resource}`,
+      sync: (shareId) => `/api/${resource}/${shareId}/sync`,
+      remove: (shareId) => `/api/${resource}/${shareId}`,
+      data: (shareId) => `/api/${resource}/${shareId}/data`,
+    }
+  }
+
+  const legacyApi = apiEndpoints("share")
+  const controlApi = apiEndpoints("shares")
+
   export async function url() {
-    return Config.get().then((x) => x.enterprise?.url ?? "https://opncd.ai")
+    const req = await request()
+    return req.baseUrl
+  }
+
+  export async function request(): Promise<{
+    headers: Record<string, string>
+    api: ApiEndpoints
+    baseUrl: string
+  }> {
+    const headers: Record<string, string> = {}
+
+    const active = Account.active()
+    if (!active?.selected_org_id) {
+      const baseUrl = await Config.get().then((x) => x.enterprise?.url ?? "https://opncd.ai")
+      return { headers, api: legacyApi, baseUrl }
+    }
+
+    const token = await Account.token(active.id)
+    if (!token) {
+      throw new Error("No active OpenControl token available for sharing")
+    }
+
+    headers["authorization"] = `Bearer ${token}`
+    headers["x-org-id"] = active.selected_org_id
+    return { headers, api: controlApi, baseUrl: active.url }
   }
 
   const disabled = process.env["OPENCODE_DISABLE_SHARE"] === "true" || process.env["OPENCODE_DISABLE_SHARE"] === "1"
@@ -68,15 +112,20 @@ export namespace ShareNext {
   export async function create(sessionID: string) {
     if (disabled) return { id: "", url: "", secret: "" }
     log.info("creating share", { sessionID })
-    const result = await fetch(`${await url()}/api/share`, {
+    const req = await request()
+    const response = await fetch(`${req.baseUrl}${req.api.create}`, {
       method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: { ...req.headers, "Content-Type": "application/json" },
       body: JSON.stringify({ sessionID: sessionID }),
     })
-      .then((x) => x.json())
-      .then((x) => x as { id: string; url: string; secret: string })
+
+    if (!response.ok) {
+      const message = await response.text().catch(() => response.statusText)
+      throw new Error(`Failed to create share (${response.status}): ${message || response.statusText}`)
+    }
+
+    const result = (await response.json()) as { id: string; url: string; secret: string }
+
     Database.use((db) =>
       db
         .insert(SessionShareTable)
@@ -159,16 +208,19 @@ export namespace ShareNext {
       const share = get(sessionID)
       if (!share) return
 
-      await fetch(`${await url()}/api/share/${share.id}/sync`, {
+      const req = await request()
+      const response = await fetch(`${req.baseUrl}${req.api.sync(share.id)}`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
+        headers: { ...req.headers, "Content-Type": "application/json" },
         body: JSON.stringify({
           secret: share.secret,
           data: Array.from(queued.data.values()),
         }),
       })
+
+      if (!response.ok) {
+        log.warn("failed to sync share", { sessionID, shareID: share.id, status: response.status })
+      }
     }, 1000)
     queue.set(sessionID, { timeout, data: dataMap })
   }
@@ -178,15 +230,21 @@ export namespace ShareNext {
     log.info("removing share", { sessionID })
     const share = get(sessionID)
     if (!share) return
-    await fetch(`${await url()}/api/share/${share.id}`, {
+
+    const req = await request()
+    const response = await fetch(`${req.baseUrl}${req.api.remove(share.id)}`, {
       method: "DELETE",
-      headers: {
-        "Content-Type": "application/json",
-      },
+      headers: { ...req.headers, "Content-Type": "application/json" },
       body: JSON.stringify({
         secret: share.secret,
       }),
     })
+
+    if (!response.ok) {
+      const message = await response.text().catch(() => response.statusText)
+      throw new Error(`Failed to remove share (${response.status}): ${message || response.statusText}`)
+    }
+
     Database.use((db) => db.delete(SessionShareTable).where(eq(SessionShareTable.session_id, sessionID)).run())
   }
 

packages/opencode/src/storage/db.ts

@@ -39,7 +39,7 @@ export namespace Database {
   type Schema = typeof schema
   export type Transaction = SQLiteTransaction<"sync", void, Schema>
 
-  type Client = SQLiteBunDatabase<Schema>
+  type Client = SQLiteBunDatabase
 
   type Journal = { sql: string; timestamp: number; name: string }[]
 
@@ -93,7 +93,7 @@ export namespace Database {
     sqlite.run("PRAGMA foreign_keys = ON")
     sqlite.run("PRAGMA wal_checkpoint(PASSIVE)")
 
-    const db = drizzle({ client: sqlite, schema })
+    const db = drizzle({ client: sqlite })
 
     // Apply schema migrations
     const entries =
@@ -124,7 +124,7 @@ export namespace Database {
     Client.reset()
   }
 
-  export type TxOrDb = Transaction | Client
+  export type TxOrDb = SQLiteTransaction<"sync", void, any, any> | Client
 
   const ctx = Context.create<{
     tx: TxOrDb

packages/opencode/src/storage/schema.ts

@@ -1,5 +1,5 @@
-export { ControlAccountTable } from "../control/control.sql"
+export { AccountTable, AccountStateTable, ControlAccountTable } from "../account/account.sql"
+export { ProjectTable } from "../project/project.sql"
 export { SessionTable, MessageTable, PartTable, TodoTable, PermissionTable } from "../session/session.sql"
 export { SessionShareTable } from "../share/share.sql"
-export { ProjectTable } from "../project/project.sql"
 export { WorkspaceTable } from "../control-plane/workspace.sql"

packages/opencode/src/util/effect-http-client.ts

@@ -0,0 +1,11 @@
+import { Schedule } from "effect"
+import { HttpClient } from "effect/unstable/http"
+
+export const withTransientReadRetry = <E, R>(client: HttpClient.HttpClient.With<E, R>) =>
+  client.pipe(
+    HttpClient.retryTransient({
+      retryOn: "errors-and-responses",
+      times: 2,
+      schedule: Schedule.exponential(200).pipe(Schedule.jittered),
+    }),
+  )

packages/opencode/src/util/schema.ts

@@ -0,0 +1,17 @@
+import { Schema } from "effect"
+
+/**
+ * Attach static methods to a schema object. Designed to be used with `.pipe()`:
+ *
+ * @example
+ *   export const Foo = fooSchema.pipe(
+ *     withStatics((schema) => ({
+ *       zero: schema.makeUnsafe(0),
+ *       from: Schema.decodeUnknownOption(schema),
+ *     }))
+ *   )
+ */
+export const withStatics =
+  <S extends object, M extends Record<string, unknown>>(methods: (schema: S) => M) =>
+  (schema: S): S & M =>
+    Object.assign(schema, methods(schema))

packages/opencode/test/account/repo.test.ts

@@ -0,0 +1,337 @@
+import { expect } from "bun:test"
+import { Effect, Layer, Option } from "effect"
+
+import { AccountRepo } from "../../src/account/repo"
+import { AccountID, OrgID } from "../../src/account/schema"
+import { resetDatabase } from "../fixture/db"
+import { testEffect } from "../fixture/effect"
+
+const reset = Layer.effectDiscard(Effect.promise(() => resetDatabase()))
+
+const it = testEffect(Layer.merge(AccountRepo.layer, reset))
+
+it.effect(
+  "list returns empty when no accounts exist",
+  Effect.gen(function* () {
+    const accounts = yield* AccountRepo.use((r) => r.list())
+    expect(accounts).toEqual([])
+  }),
+)
+
+it.effect(
+  "active returns none when no accounts exist",
+  Effect.gen(function* () {
+    const active = yield* AccountRepo.use((r) => r.active())
+    expect(Option.isNone(active)).toBe(true)
+  }),
+)
+
+it.effect(
+  "persistAccount inserts and getRow retrieves",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "test@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_123",
+        refreshToken: "rt_456",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.some(OrgID.make("org-1")),
+      }),
+    )
+
+    const row = yield* AccountRepo.use((r) => r.getRow(id))
+    expect(Option.isSome(row)).toBe(true)
+    const value = Option.getOrThrow(row)
+    expect(value.id).toBe("user-1")
+    expect(value.email).toBe("test@example.com")
+    expect(value.selected_org_id).toBe("org-1")
+  }),
+)
+
+it.effect(
+  "persistAccount sets the active account without clearing prior selections",
+  Effect.gen(function* () {
+    const id1 = AccountID.make("user-1")
+    const id2 = AccountID.make("user-2")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: id1,
+        email: "first@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_1",
+        refreshToken: "rt_1",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.some(OrgID.make("org-1")),
+      }),
+    )
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: id2,
+        email: "second@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_2",
+        refreshToken: "rt_2",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.some(OrgID.make("org-2")),
+      }),
+    )
+
+    const row1 = yield* AccountRepo.use((r) => r.getRow(id1))
+    expect(Option.getOrThrow(row1).selected_org_id).toBe("org-1")
+
+    const row2 = yield* AccountRepo.use((r) => r.getRow(id2))
+    expect(Option.getOrThrow(row2).selected_org_id).toBe("org-2")
+
+    const active = yield* AccountRepo.use((r) => r.active())
+    expect(Option.isSome(active)).toBe(true)
+    expect(Option.getOrThrow(active).id).toBe(AccountID.make("user-2"))
+  }),
+)
+
+it.effect(
+  "list returns all accounts",
+  Effect.gen(function* () {
+    const id1 = AccountID.make("user-1")
+    const id2 = AccountID.make("user-2")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: id1,
+        email: "a@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_1",
+        refreshToken: "rt_1",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: id2,
+        email: "b@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_2",
+        refreshToken: "rt_2",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.some(OrgID.make("org-1")),
+      }),
+    )
+
+    const accounts = yield* AccountRepo.use((r) => r.list())
+    expect(accounts.length).toBe(2)
+    expect(accounts.map((a) => a.email).sort()).toEqual(["a@example.com", "b@example.com"])
+  }),
+)
+
+it.effect(
+  "remove deletes an account",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "test@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_1",
+        refreshToken: "rt_1",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    yield* AccountRepo.use((r) => r.remove(id))
+
+    const row = yield* AccountRepo.use((r) => r.getRow(id))
+    expect(Option.isNone(row)).toBe(true)
+  }),
+)
+
+it.effect(
+  "use stores the selected org and marks the account active",
+  Effect.gen(function* () {
+    const id1 = AccountID.make("user-1")
+    const id2 = AccountID.make("user-2")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: id1,
+        email: "first@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_1",
+        refreshToken: "rt_1",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: id2,
+        email: "second@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_2",
+        refreshToken: "rt_2",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    yield* AccountRepo.use((r) => r.use(id1, Option.some(OrgID.make("org-99"))))
+    const row = yield* AccountRepo.use((r) => r.getRow(id1))
+    expect(Option.getOrThrow(row).selected_org_id).toBe("org-99")
+
+    const active = yield* AccountRepo.use((r) => r.active())
+    expect(Option.getOrThrow(active).id).toBe(id1)
+
+    yield* AccountRepo.use((r) => r.use(id1, Option.none()))
+    const row2 = yield* AccountRepo.use((r) => r.getRow(id1))
+    expect(Option.getOrThrow(row2).selected_org_id).toBeNull()
+
+    const other = yield* AccountRepo.use((r) => r.getRow(id2))
+    expect(Option.getOrThrow(other).selected_org_id).toBeNull()
+  }),
+)
+
+it.effect(
+  "persistToken updates token fields",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "test@example.com",
+        url: "https://control.example.com",
+        accessToken: "old_token",
+        refreshToken: "old_refresh",
+        expiry: 1000,
+        orgID: Option.none(),
+      }),
+    )
+
+    const expiry = Date.now() + 7200_000
+    yield* AccountRepo.use((r) =>
+      r.persistToken({
+        accountID: id,
+        accessToken: "new_token",
+        refreshToken: "new_refresh",
+        expiry: Option.some(expiry),
+      }),
+    )
+
+    const row = yield* AccountRepo.use((r) => r.getRow(id))
+    const value = Option.getOrThrow(row)
+    expect(value.access_token).toBe("new_token")
+    expect(value.refresh_token).toBe("new_refresh")
+    expect(value.token_expiry).toBe(expiry)
+  }),
+)
+
+it.effect(
+  "persistToken with no expiry sets token_expiry to null",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "test@example.com",
+        url: "https://control.example.com",
+        accessToken: "old_token",
+        refreshToken: "old_refresh",
+        expiry: 1000,
+        orgID: Option.none(),
+      }),
+    )
+
+    yield* AccountRepo.use((r) =>
+      r.persistToken({
+        accountID: id,
+        accessToken: "new_token",
+        refreshToken: "new_refresh",
+        expiry: Option.none(),
+      }),
+    )
+
+    const row = yield* AccountRepo.use((r) => r.getRow(id))
+    expect(Option.getOrThrow(row).token_expiry).toBeNull()
+  }),
+)
+
+it.effect(
+  "persistAccount upserts on conflict",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "test@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_v1",
+        refreshToken: "rt_v1",
+        expiry: 1000,
+        orgID: Option.some(OrgID.make("org-1")),
+      }),
+    )
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "test@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_v2",
+        refreshToken: "rt_v2",
+        expiry: 2000,
+        orgID: Option.some(OrgID.make("org-2")),
+      }),
+    )
+
+    const accounts = yield* AccountRepo.use((r) => r.list())
+    expect(accounts.length).toBe(1)
+
+    const row = yield* AccountRepo.use((r) => r.getRow(id))
+    const value = Option.getOrThrow(row)
+    expect(value.access_token).toBe("at_v2")
+    expect(value.selected_org_id).toBe("org-2")
+  }),
+)
+
+it.effect(
+  "remove clears active state when deleting the active account",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "test@example.com",
+        url: "https://control.example.com",
+        accessToken: "at_1",
+        refreshToken: "rt_1",
+        expiry: Date.now() + 3600_000,
+        orgID: Option.some(OrgID.make("org-1")),
+      }),
+    )
+
+    yield* AccountRepo.use((r) => r.remove(id))
+
+    const active = yield* AccountRepo.use((r) => r.active())
+    expect(Option.isNone(active)).toBe(true)
+  }),
+)
+
+it.effect(
+  "getRow returns none for nonexistent account",
+  Effect.gen(function* () {
+    const row = yield* AccountRepo.use((r) => r.getRow(AccountID.make("nope")))
+    expect(Option.isNone(row)).toBe(true)
+  }),
+)

packages/opencode/test/account/service.test.ts

@@ -0,0 +1,217 @@
+import { expect } from "bun:test"
+import { Effect, Layer, Option, Ref, Schema } from "effect"
+import { HttpClient, HttpClientResponse } from "effect/unstable/http"
+
+import { AccountRepo } from "../../src/account/repo"
+import { AccountService } from "../../src/account/service"
+import { AccountID, Login, Org, OrgID } from "../../src/account/schema"
+import { resetDatabase } from "../fixture/db"
+import { testEffect } from "../fixture/effect"
+
+const reset = Layer.effectDiscard(Effect.promise(() => resetDatabase()))
+
+const it = testEffect(Layer.merge(AccountRepo.layer, reset))
+
+const live = (client: HttpClient.HttpClient) =>
+  AccountService.layer.pipe(Layer.provide(Layer.succeed(HttpClient.HttpClient, client)))
+
+const json = (req: Parameters<typeof HttpClientResponse.fromWeb>[0], body: unknown, status = 200) =>
+  HttpClientResponse.fromWeb(
+    req,
+    new Response(JSON.stringify(body), {
+      status,
+      headers: { "content-type": "application/json" },
+    }),
+  )
+
+const encodeOrg = Schema.encodeSync(Org)
+
+const org = (id: string, name: string) => encodeOrg(new Org({ id: OrgID.make(id), name }))
+
+it.effect(
+  "orgsByAccount groups orgs per account",
+  Effect.gen(function* () {
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: AccountID.make("user-1"),
+        email: "one@example.com",
+        url: "https://one.example.com",
+        accessToken: "at_1",
+        refreshToken: "rt_1",
+        expiry: Date.now() + 60_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id: AccountID.make("user-2"),
+        email: "two@example.com",
+        url: "https://two.example.com",
+        accessToken: "at_2",
+        refreshToken: "rt_2",
+        expiry: Date.now() + 60_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    const seen = yield* Ref.make<string[]>([])
+    const client = HttpClient.make((req) =>
+      Effect.gen(function* () {
+        yield* Ref.update(seen, (xs) => [...xs, `${req.method} ${req.url}`])
+
+        if (req.url === "https://one.example.com/api/orgs") {
+          return json(req, [org("org-1", "One")])
+        }
+
+        if (req.url === "https://two.example.com/api/orgs") {
+          return json(req, [org("org-2", "Two A"), org("org-3", "Two B")])
+        }
+
+        return json(req, [], 404)
+      }),
+    )
+
+    const rows = yield* AccountService.use((s) => s.orgsByAccount()).pipe(Effect.provide(live(client)))
+
+    expect(rows.map((row) => [row.account.id, row.orgs.map((org) => org.id)]).map(([id, orgs]) => [id, orgs])).toEqual([
+      [AccountID.make("user-1"), [OrgID.make("org-1")]],
+      [AccountID.make("user-2"), [OrgID.make("org-2"), OrgID.make("org-3")]],
+    ])
+    expect(yield* Ref.get(seen)).toEqual([
+      "GET https://one.example.com/api/orgs",
+      "GET https://two.example.com/api/orgs",
+    ])
+  }),
+)
+
+it.effect(
+  "token refresh persists the new token",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "user@example.com",
+        url: "https://one.example.com",
+        accessToken: "at_old",
+        refreshToken: "rt_old",
+        expiry: Date.now() - 1_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    const client = HttpClient.make((req) =>
+      Effect.succeed(
+        req.url === "https://one.example.com/oauth/token"
+          ? json(req, {
+              access_token: "at_new",
+              refresh_token: "rt_new",
+              expires_in: 60,
+            })
+          : json(req, {}, 404),
+      ),
+    )
+
+    const token = yield* AccountService.use((s) => s.token(id)).pipe(Effect.provide(live(client)))
+
+    expect(Option.getOrThrow(token)).toBeDefined()
+    expect(String(Option.getOrThrow(token))).toBe("at_new")
+
+    const row = yield* AccountRepo.use((r) => r.getRow(id))
+    const value = Option.getOrThrow(row)
+    expect(value.access_token).toBe("at_new")
+    expect(value.refresh_token).toBe("rt_new")
+    expect(value.token_expiry).toBeGreaterThan(Date.now())
+  }),
+)
+
+it.effect(
+  "config sends the selected org header",
+  Effect.gen(function* () {
+    const id = AccountID.make("user-1")
+
+    yield* AccountRepo.use((r) =>
+      r.persistAccount({
+        id,
+        email: "user@example.com",
+        url: "https://one.example.com",
+        accessToken: "at_1",
+        refreshToken: "rt_1",
+        expiry: Date.now() + 60_000,
+        orgID: Option.none(),
+      }),
+    )
+
+    const seen = yield* Ref.make<{ auth?: string; org?: string }>({})
+    const client = HttpClient.make((req) =>
+      Effect.gen(function* () {
+        yield* Ref.set(seen, {
+          auth: req.headers.authorization,
+          org: req.headers["x-org-id"],
+        })
+
+        if (req.url === "https://one.example.com/api/config") {
+          return json(req, { config: { theme: "light", seats: 5 } })
+        }
+
+        return json(req, {}, 404)
+      }),
+    )
+
+    const cfg = yield* AccountService.use((s) => s.config(id, OrgID.make("org-9"))).pipe(Effect.provide(live(client)))
+
+    expect(Option.getOrThrow(cfg)).toEqual({ theme: "light", seats: 5 })
+    expect(yield* Ref.get(seen)).toEqual({
+      auth: "Bearer at_1",
+      org: "org-9",
+    })
+  }),
+)
+
+it.effect(
+  "poll stores the account and first org on success",
+  Effect.gen(function* () {
+    const login = new Login({
+      code: "device-code",
+      user: "user-code",
+      url: "https://one.example.com/verify",
+      server: "https://one.example.com",
+      expiry: 600,
+      interval: 5,
+    })
+
+    const client = HttpClient.make((req) =>
+      Effect.succeed(
+        req.url === "https://one.example.com/auth/device/token"
+          ? json(req, {
+              access_token: "at_1",
+              refresh_token: "rt_1",
+              expires_in: 60,
+            })
+          : req.url === "https://one.example.com/api/user"
+            ? json(req, { id: "user-1", email: "user@example.com" })
+            : req.url === "https://one.example.com/api/orgs"
+              ? json(req, [org("org-1", "One")])
+              : json(req, {}, 404),
+      ),
+    )
+
+    const res = yield* AccountService.use((s) => s.poll(login)).pipe(Effect.provide(live(client)))
+
+    expect(res._tag).toBe("PollSuccess")
+    if (res._tag === "PollSuccess") {
+      expect(res.email).toBe("user@example.com")
+    }
+
+    const active = yield* AccountRepo.use((r) => r.active())
+    expect(Option.getOrThrow(active)).toEqual(
+      expect.objectContaining({
+        id: "user-1",
+        email: "user@example.com",
+        selected_org_id: "org-1",
+      }),
+    )
+  }),
+)

packages/opencode/test/cli/import.test.ts

@@ -1,5 +1,10 @@
 import { test, expect } from "bun:test"
-import { parseShareUrl, transformShareData, type ShareData } from "../../src/cli/cmd/import"
+import {
+  parseShareUrl,
+  shouldAttachShareAuthHeaders,
+  transformShareData,
+  type ShareData,
+} from "../../src/cli/cmd/import"
 
 // parseShareUrl tests
 test("parses valid share URLs", () => {
@@ -15,6 +20,19 @@ test("rejects invalid URLs", () => {
   expect(parseShareUrl("not-a-url")).toBeNull()
 })
 
+test("only attaches share auth headers for same-origin URLs", () => {
+  expect(shouldAttachShareAuthHeaders("https://control.example.com/share/abc", "https://control.example.com")).toBe(
+    true,
+  )
+  expect(
+    shouldAttachShareAuthHeaders("https://other.example.com/share/abc", "https://control.example.com"),
+  ).toBe(false)
+  expect(shouldAttachShareAuthHeaders("https://control.example.com:443/share/abc", "https://control.example.com")).toBe(
+    true,
+  )
+  expect(shouldAttachShareAuthHeaders("not-a-url", "https://control.example.com")).toBe(false)
+})
+
 // transformShareData tests
 test("transforms share data to storage format", () => {
   const data: ShareData[] = [

packages/opencode/test/cli/plugin-auth-picker.test.ts

@@ -1,5 +1,5 @@
 import { test, expect, describe } from "bun:test"
-import { resolvePluginProviders } from "../../src/cli/cmd/auth"
+import { resolvePluginProviders } from "../../src/cli/cmd/providers"
 import type { Hooks } from "@opencode-ai/plugin"
 
 function hookWithAuth(provider: string): Hooks {

packages/opencode/test/config/config.test.ts

@@ -2,6 +2,7 @@ import { test, expect, describe, mock, afterEach } from "bun:test"
 import { Config } from "../../src/config/config"
 import { Instance } from "../../src/project/instance"
 import { Auth } from "../../src/auth"
+import { AccessToken, Account, AccountID, OrgID } from "../../src/account"
 import { tmpdir } from "../fixture/fixture"
 import path from "path"
 import fs from "fs/promises"
@@ -242,6 +243,52 @@ test("preserves env variables when adding $schema to config", async () => {
   }
 })
 
+test("resolves env templates in account config with account token", async () => {
+  const originalActive = Account.active
+  const originalConfig = Account.config
+  const originalToken = Account.token
+  const originalControlToken = process.env["OPENCODE_CONTROL_TOKEN"]
+
+  Account.active = mock(() => ({
+    id: AccountID.make("account-1"),
+    email: "user@example.com",
+    url: "https://control.example.com",
+    selected_org_id: OrgID.make("org-1"),
+  }))
+
+  Account.config = mock(async () => ({
+    provider: {
+      opencode: {
+        options: {
+          apiKey: "{env:OPENCODE_CONTROL_TOKEN}",
+        },
+      },
+    },
+  }))
+
+  Account.token = mock(async () => AccessToken.make("st_test_token"))
+
+  try {
+    await using tmp = await tmpdir()
+    await Instance.provide({
+      directory: tmp.path,
+      fn: async () => {
+        const config = await Config.get()
+        expect(config.provider?.["opencode"]?.options?.apiKey).toBe("st_test_token")
+      },
+    })
+  } finally {
+    Account.active = originalActive
+    Account.config = originalConfig
+    Account.token = originalToken
+    if (originalControlToken !== undefined) {
+      process.env["OPENCODE_CONTROL_TOKEN"] = originalControlToken
+    } else {
+      delete process.env["OPENCODE_CONTROL_TOKEN"]
+    }
+  }
+})
+
 test("handles file inclusion substitution", async () => {
   await using tmp = await tmpdir({
     init: async (dir) => {

packages/opencode/test/fixture/effect.ts

@@ -0,0 +1,7 @@
+import { test } from "bun:test"
+import { Effect, Layer } from "effect"
+
+export const testEffect = <R, E>(layer: Layer.Layer<R, E, never>) => ({
+  effect: <A, E2>(name: string, value: Effect.Effect<A, E2, R>) =>
+    test(name, () => Effect.runPromise(value.pipe(Effect.provide(layer)))),
+})

packages/opencode/test/share/share-next.test.ts

@@ -0,0 +1,76 @@
+import { test, expect, mock } from "bun:test"
+import { ShareNext } from "../../src/share/share-next"
+import { AccessToken, Account, AccountID, OrgID } from "../../src/account"
+import { Config } from "../../src/config/config"
+
+test("ShareNext.request uses legacy share API without active org account", async () => {
+  const originalActive = Account.active
+  const originalConfigGet = Config.get
+
+  Account.active = mock(() => undefined)
+  Config.get = mock(async () => ({ enterprise: { url: "https://legacy-share.example.com" } }))
+
+  try {
+    const req = await ShareNext.request()
+
+    expect(req.api.create).toBe("/api/share")
+    expect(req.api.sync("shr_123")).toBe("/api/share/shr_123/sync")
+    expect(req.api.remove("shr_123")).toBe("/api/share/shr_123")
+    expect(req.api.data("shr_123")).toBe("/api/share/shr_123/data")
+    expect(req.baseUrl).toBe("https://legacy-share.example.com")
+    expect(req.headers).toEqual({})
+  } finally {
+    Account.active = originalActive
+    Config.get = originalConfigGet
+  }
+})
+
+test("ShareNext.request uses org share API with auth headers when account is active", async () => {
+  const originalActive = Account.active
+  const originalToken = Account.token
+
+  Account.active = mock(() => ({
+    id: AccountID.make("account-1"),
+    email: "user@example.com",
+    url: "https://control.example.com",
+    selected_org_id: OrgID.make("org-1"),
+  }))
+  Account.token = mock(async () => AccessToken.make("st_test_token"))
+
+  try {
+    const req = await ShareNext.request()
+
+    expect(req.api.create).toBe("/api/shares")
+    expect(req.api.sync("shr_123")).toBe("/api/shares/shr_123/sync")
+    expect(req.api.remove("shr_123")).toBe("/api/shares/shr_123")
+    expect(req.api.data("shr_123")).toBe("/api/shares/shr_123/data")
+    expect(req.baseUrl).toBe("https://control.example.com")
+    expect(req.headers).toEqual({
+      authorization: "Bearer st_test_token",
+      "x-org-id": "org-1",
+    })
+  } finally {
+    Account.active = originalActive
+    Account.token = originalToken
+  }
+})
+
+test("ShareNext.request fails when org account has no token", async () => {
+  const originalActive = Account.active
+  const originalToken = Account.token
+
+  Account.active = mock(() => ({
+    id: AccountID.make("account-1"),
+    email: "user@example.com",
+    url: "https://control.example.com",
+    selected_org_id: OrgID.make("org-1"),
+  }))
+  Account.token = mock(async () => undefined)
+
+  try {
+    await expect(ShareNext.request()).rejects.toThrow("No active OpenControl token available for sharing")
+  } finally {
+    Account.active = originalActive
+    Account.token = originalToken
+  }
+})

packages/opencode/tsconfig.json

@@ -11,6 +11,11 @@
     "paths": {
       "@/*": ["./src/*"],
       "@tui/*": ["./src/cli/cmd/tui/*"]
-    }
+    },
+    "plugins": [{
+      "name": "@effect/language-service",
+      "transform": "@effect/language-service/transform",
+      "namespaceImportPackages": ["effect", "@effect/*"]
+    }]
   }
 }

packages/ui/package.json

@@ -48,8 +48,11 @@
     "@pierre/diffs": "catalog:",
     "@shikijs/transformers": "3.9.2",
     "@solid-primitives/bounds": "0.1.3",
+    "@solid-primitives/lifecycle": "0.1.2",
     "@solid-primitives/media": "2.3.3",
+    "@solid-primitives/page-visibility": "2.1.1",
     "@solid-primitives/resize-observer": "2.1.3",
+    "@solid-primitives/rootless": "1.5.2",
     "@solidjs/meta": "catalog:",
     "@solidjs/router": "catalog:",
     "dompurify": "3.3.1",

packages/ui/src/components/context-tool-results.tsx

@@ -1,8 +1,8 @@
 import { createMemo, createSignal, For, onMount } from "solid-js"
 import type { ToolPart } from "@opencode-ai/sdk/v2"
 import { getFilename } from "@opencode-ai/util/path"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 import { useI18n } from "../context/i18n"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
 import { ToolCall } from "./basic-tool"
 import { ToolStatusTitle } from "./tool-status-title"
 import { AnimatedCountList } from "./tool-count-summary"
@@ -58,11 +58,9 @@ export function ContextToolGroupHeader(props: {
     <ToolCall
       variant="row"
       icon="magnifying-glass-menu"
-      open={!props.pending && props.open}
-      showArrow={!props.pending}
-      onOpenChange={(v) => {
-        if (!props.pending) props.onOpenChange(v)
-      }}
+      open={props.open}
+      showArrow
+      onOpenChange={props.onOpenChange}
       trigger={
         <div data-component="context-tool-group-trigger" data-pending={props.pending || undefined}>
           <span
@@ -149,10 +147,10 @@ export function ContextToolExpandedList(props: { parts: ToolPart[]; expanded: bo
 }
 
 export function ContextToolRollingResults(props: { parts: ToolPart[]; pending: boolean }) {
+  const reduce = useReducedMotion()
   const wiped = new Set<string>()
   const [mounted, setMounted] = createSignal(false)
   onMount(() => setMounted(true))
-  const reduce = prefersReducedMotion
   const show = () => mounted() && props.pending
   const opacity = useSpring(() => (show() ? 1 : 0), GROW_SPRING)
   const blur = useSpring(() => (show() ? 0 : 2), GROW_SPRING)

packages/ui/src/components/grow-box.tsx

@@ -1,6 +1,6 @@
 import { createEffect, on, type JSX, onMount, onCleanup } from "solid-js"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 import { animate, tunableSpringValue, type AnimationPlaybackControls, GROW_SPRING, type SpringConfig } from "./motion"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
 
 export interface GrowBoxProps {
   children: JSX.Element
@@ -49,7 +49,7 @@ export interface GrowBoxProps {
  * Used for timeline turns, assistant part groups, and user messages.
  */
 export function GrowBox(props: GrowBoxProps) {
-  const reduce = prefersReducedMotion
+  const reduce = useReducedMotion()
   const spring = () => props.spring ?? GROW_SPRING
   const toggleSpring = () => props.toggleSpring ?? spring()
   let mode: "mount" | "toggle" = "mount"
@@ -293,6 +293,18 @@ export function GrowBox(props: GrowBoxProps) {
       offChange()
     })
 
+    if (watch()) {
+      observer = new ResizeObserver(() => {
+        if (!open()) return
+        if (resizeFrame !== undefined) return
+        resizeFrame = requestAnimationFrame(() => {
+          resizeFrame = undefined
+          setHeight("mount")
+        })
+      })
+      observer.observe(body)
+    }
+
     if (!animated()) {
       setInstant(open())
       return
@@ -318,17 +330,6 @@ export function GrowBox(props: GrowBoxProps) {
         if (grow()) setHeight("mount")
       })
     }
-    if (watch()) {
-      observer = new ResizeObserver(() => {
-        if (!open()) return
-        if (resizeFrame !== undefined) return
-        resizeFrame = requestAnimationFrame(() => {
-          resizeFrame = undefined
-          setHeight("mount")
-        })
-      })
-      observer.observe(body)
-    }
   })
 
   createEffect(
@@ -402,7 +403,12 @@ export function GrowBox(props: GrowBoxProps) {
       ref={root}
       data-slot={props.slot}
       class={props.class}
-      style={{ transform: "translateZ(0)", position: "relative" }}
+      style={{
+        transform: "translateZ(0)",
+        position: "relative",
+        height: open() ? undefined : "0px",
+        overflow: open() ? undefined : "clip",
+      }}
     >
       <div ref={body} style={{ "padding-top": gap() > 0 ? `${gap()}px` : undefined }}>
         {props.children}

packages/ui/src/components/message-part.tsx

@@ -38,7 +38,7 @@ import { TextShimmer } from "./text-shimmer"
 import { list } from "./text-utils"
 import { GrowBox } from "./grow-box"
 import { COLLAPSIBLE_SPRING } from "./motion"
-import { busy, hold, createThrottledValue, useToolFade, useContextToolPending } from "./tool-utils"
+import { busy, createThrottledValue, useToolFade, useContextToolPending } from "./tool-utils"
 import { ContextToolGroupHeader, ContextToolExpandedList, ContextToolRollingResults } from "./context-tool-results"
 import { ShellRollingResults } from "./shell-rolling-results"
 
@@ -254,8 +254,6 @@ function urls(text: string | undefined) {
 const CONTEXT_GROUP_TOOLS = new Set(["read", "glob", "grep", "list"])
 const HIDDEN_TOOLS = new Set(["todowrite", "todoread"])
 
-import { pageVisible } from "../hooks/use-page-visible"
-
 function createGroupOpenState() {
   const [state, setState] = createStore<Record<string, boolean>>({})
   const read = (key?: string, collapse?: boolean) => {
@@ -274,18 +272,6 @@ function createGroupOpenState() {
   return { read, controlled, write }
 }
 
-function shouldCollapseGroup(
-  statuses: (string | undefined)[],
-  opts: { afterTool?: boolean; groupTail?: boolean; working?: boolean },
-) {
-  if (opts.afterTool) return true
-  if (opts.groupTail === false) return true
-  if (!pageVisible()) return false
-  if (opts.working) return false
-  if (!statuses.length) return false
-  return !statuses.some((s) => busy(s))
-}
-
 function renderable(part: PartType, showReasoningSummaries = true) {
   if (part.type === "tool") {
     if (HIDDEN_TOOLS.has(part.tool)) return false
@@ -480,20 +466,9 @@ export function AssistantParts(props: {
             return COLLAPSIBLE_SPRING
           })
           const contextOpen = createMemo(() => {
-            const collapse = (
-              afterTool?: boolean,
-              groupTail?: boolean,
-              group?: { part: ToolPart; message: AssistantMessage }[],
-            ) =>
-              shouldCollapseGroup(group?.map((item) => item.part.state.status) ?? [], {
-                afterTool,
-                groupTail,
-                working: props.working,
-              })
             const value = ctx()
-            if (value) return groupState.read(value.groupKey, collapse(value.afterTool, value.tail, value.parts))
-            const entry = part()
-            return groupState.read(entry?.groupKey, collapse(entry?.afterTool, entry?.groupTail, entry?.groupParts))
+            if (value) return groupState.read(value.groupKey, true)
+            return groupState.read(part()?.groupKey, true)
           })
           const visible = createMemo(() => {
             if (!context()) return true
@@ -539,9 +514,7 @@ export function AssistantParts(props: {
             ctxPartsPrev = result
             return result
           })
-          const ctxPendingRaw = useContextToolPending(ctxParts, () => !!(props.working && ctx()?.tail))
-          const ctxPending = ctxPendingRaw
-          const ctxHoldOpen = hold(ctxPendingRaw)
+          const ctxPending = useContextToolPending(ctxParts, () => !!(props.working && ctx()?.tail))
           const shell = createMemo(() => {
             const value = part()
             if (!value) return
@@ -593,12 +566,20 @@ export function AssistantParts(props: {
                           onOpenChange={(value: boolean) => groupState.write(entry().groupKey, value)}
                         />
                       </PartGrow>
-                      <ContextToolExpandedList parts={ctxParts()} expanded={!ctxPending() && contextOpen()} />
-                      <ContextToolRollingResults parts={ctxParts()} pending={ctxHoldOpen()} />
+                      <ContextToolExpandedList parts={ctxParts()} expanded={contextOpen() && !ctxPending()} />
+                      <ContextToolRollingResults parts={ctxParts()} pending={contextOpen() && ctxPending()} />
                     </>
                   )}
                 </Show>
-                <Show when={shell()}>{(value) => <ShellRollingResults part={value()} animate={props.animate} />}</Show>
+                <Show when={shell()}>
+                  {(value) => (
+                    <ShellRollingResults
+                      part={value()}
+                      animate={props.animate}
+                      defaultOpen={props.shellToolDefaultOpen}
+                    />
+                  )}
+                </Show>
                 <Show when={!shell() ? part() : undefined}>
                   {(entry) => (
                     <Show when={!entry().context}>

packages/ui/src/components/motion-spring.tsx

@@ -1,7 +1,7 @@
 import { attachSpring, motionValue } from "motion"
 import type { SpringOptions } from "motion"
 import { createEffect, createSignal, onCleanup } from "solid-js"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 
 type Opt = Pick<SpringOptions, "visualDuration" | "bounce" | "stiffness" | "damping" | "mass" | "velocity">
 const eq = (a: Opt | undefined, b: Opt | undefined) =>
@@ -14,7 +14,7 @@ const eq = (a: Opt | undefined, b: Opt | undefined) =>
 
 export function useSpring(target: () => number, options?: Opt | (() => Opt)) {
   const read = () => (typeof options === "function" ? options() : options)
-  const reduce = prefersReducedMotion
+  const reduce = useReducedMotion()
   const [value, setValue] = createSignal(target())
   const source = motionValue(value())
   const spring = motionValue(value())

packages/ui/src/components/rolling-results.tsx

@@ -1,6 +1,6 @@
 import { For, Show, batch, createEffect, createMemo, createSignal, on, onCleanup, onMount, type JSX } from "solid-js"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 import { animate, clearMaskStyles, GROW_SPRING, type AnimationPlaybackControls, type SpringConfig } from "./motion"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
 
 export type RollingResultsProps<T> = {
   items: T[]
@@ -27,8 +27,7 @@ export function RollingResults<T>(props: RollingResultsProps<T>) {
   let shift: AnimationPlaybackControls | undefined
   let resize: AnimationPlaybackControls | undefined
   let edgeFade: AnimationPlaybackControls | undefined
-
-  const reducedMotion = prefersReducedMotion
+  const reduce = useReducedMotion()
 
   const rows = createMemo(() => Math.max(1, Math.round(props.rows ?? 3)))
   const rowHeight = createMemo(() => Math.max(16, Math.round(props.rowHeight ?? 22)))
@@ -54,7 +53,7 @@ export function RollingResults<T>(props: RollingResultsProps<T>) {
     return count() - rendered().length
   })
   const open = createMemo(() => props.open !== false)
-  const active = createMemo(() => (props.animate !== false || props.spring !== undefined) && !reducedMotion())
+  const active = createMemo(() => (props.animate !== false || props.spring !== undefined) && !reduce())
   const noFade = () => props.noFadeOnCollapse === true
   const overflowing = createMemo(() => count() > rows())
   const shown = createMemo(() => Math.min(rows(), count()))

packages/ui/src/components/shell-rolling-results.tsx

@@ -1,7 +1,7 @@
 import { createEffect, createMemo, createSignal, onCleanup, onMount, Show } from "solid-js"
 import stripAnsi from "strip-ansi"
 import type { ToolPart } from "@opencode-ai/sdk/v2"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 import { useI18n } from "../context/i18n"
 import { RollingResults } from "./rolling-results"
 import { Icon } from "./icon"
@@ -10,15 +10,7 @@ import { TextShimmer } from "./text-shimmer"
 import { Tooltip } from "./tooltip"
 import { GROW_SPRING } from "./motion"
 import { useSpring } from "./motion-spring"
-import {
-  busy,
-  createThrottledValue,
-  hold,
-  updateScrollMask,
-  useCollapsible,
-  useRowWipe,
-  useToolFade,
-} from "./tool-utils"
+import { busy, createThrottledValue, updateScrollMask, useCollapsible, useRowWipe, useToolFade } from "./tool-utils"
 
 function ShellRollingSubtitle(props: { text: string; animate?: boolean }) {
   let ref: HTMLSpanElement | undefined
@@ -176,23 +168,17 @@ function ShellExpanded(props: { cmd: string; out: string; open: boolean }) {
   )
 }
 
-export function ShellRollingResults(props: { part: ToolPart; animate?: boolean }) {
+export function ShellRollingResults(props: { part: ToolPart; animate?: boolean; defaultOpen?: boolean }) {
   const i18n = useI18n()
+  const reduce = useReducedMotion()
   const wiped = new Set<string>()
   const [mounted, setMounted] = createSignal(false)
-  const [userToggled, setUserToggled] = createSignal(false)
-  const [userOpen, setUserOpen] = createSignal(false)
+  const [open, setOpen] = createSignal(props.defaultOpen ?? true)
   onMount(() => setMounted(true))
   const state = createMemo(() => props.part.state as Record<string, any>)
   const pending = createMemo(() => busy(props.part.state.status))
-  const autoOpen = hold(pending, 2000)
-  const effectiveOpen = createMemo(() => {
-    if (pending()) return true
-    if (userToggled()) return userOpen()
-    return autoOpen()
-  })
-  const expanded = createMemo(() => !pending() && !autoOpen() && userToggled() && userOpen())
-  const previewOpen = createMemo(() => effectiveOpen() && !expanded())
+  const expanded = createMemo(() => open() && !pending())
+  const previewOpen = createMemo(() => open() && pending())
   const command = createMemo(() => {
     const value = state().input?.command ?? state().metadata?.command
     if (typeof value === "string") return value
@@ -208,7 +194,6 @@ export function ShellRollingResults(props: { part: ToolPart; animate?: boolean }
     if (typeof value === "string") return value
     return ""
   })
-  const reduce = prefersReducedMotion
   const skip = () => reduce() || props.animate === false
   const opacity = useSpring(() => (mounted() ? 1 : 0), GROW_SPRING)
   const blur = useSpring(() => (mounted() ? 0 : 2), GROW_SPRING)
@@ -217,12 +202,10 @@ export function ShellRollingResults(props: { part: ToolPart; animate?: boolean }
   const headerHeight = useSpring(() => (mounted() ? 37 : 0), GROW_SPRING)
   let headerClipRef: HTMLDivElement | undefined
   const handleHeaderClick = () => {
-    if (pending()) return
     const el = headerClipRef
     const viewport = el?.closest(".scroll-view__viewport") as HTMLElement | null
     const beforeY = el?.getBoundingClientRect().top ?? 0
-    setUserToggled(true)
-    setUserOpen((prev) => !prev)
+    setOpen((prev) => !prev)
     if (viewport && el) {
       requestAnimationFrame(() => {
         const afterY = el.getBoundingClientRect().top
@@ -249,7 +232,7 @@ export function ShellRollingResults(props: { part: ToolPart; animate?: boolean }
         ref={headerClipRef}
         data-slot="shell-rolling-header-clip"
         data-scroll-preserve
-        data-clickable={!pending() ? "true" : "false"}
+        data-clickable="true"
         onClick={handleHeaderClick}
         style={{ height: `${skip() ? (mounted() ? 37 : 0) : headerHeight()}px`, overflow: "clip" }}
       >
@@ -258,13 +241,11 @@ export function ShellRollingResults(props: { part: ToolPart; animate?: boolean }
             <TextShimmer text={i18n.t("ui.tool.shell")} active={pending()} />
           </span>
           <Show when={subtitle()}>{(text) => <ShellRollingSubtitle text={text()} animate={props.animate} />}</Show>
-          <Show when={!pending()}>
-            <span data-slot="shell-rolling-actions">
-              <span data-slot="shell-rolling-arrow" data-open={effectiveOpen() ? "true" : "false"}>
-                <Icon name="chevron-down" size="small" />
-              </span>
+          <span data-slot="shell-rolling-actions">
+            <span data-slot="shell-rolling-arrow" data-open={open() ? "true" : "false"}>
+              <Icon name="chevron-down" size="small" />
             </span>
-          </Show>
+          </span>
         </div>
       </div>
       <div

packages/ui/src/components/text-reveal.tsx

@@ -1,4 +1,5 @@
 import { createEffect, createSignal, on, onCleanup, onMount } from "solid-js"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 import {
   animate,
   type AnimationPlaybackControls,
@@ -7,7 +8,6 @@ import {
   GROW_SPRING,
   WIPE_MASK,
 } from "./motion"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
 
 const px = (value: number | string | undefined, fallback: number) => {
   if (typeof value === "number") return `${value}px`
@@ -143,12 +143,13 @@ export function TextWipe(props: { text?: string; class?: string; delay?: number;
   let ref: HTMLSpanElement | undefined
   let frame: number | undefined
   let anim: AnimationPlaybackControls | undefined
+  const reduce = useReducedMotion()
 
   const run = () => {
     if (props.animate === false) return
     const el = ref
     if (!el || !props.text || typeof window === "undefined") return
-    if (prefersReducedMotion()) return
+    if (reduce()) return
 
     const mask =
       typeof CSS !== "undefined" &&

packages/ui/src/components/tool-status-title.tsx

@@ -1,8 +1,8 @@
 import { Show, createEffect, createMemo, createSignal, on, onCleanup, onMount } from "solid-js"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 import { animate, type AnimationPlaybackControls, GROW_SPRING } from "./motion"
 import { TextShimmer } from "./text-shimmer"
 import { commonPrefix } from "./text-utils"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
 
 function contentWidth(el: HTMLSpanElement | undefined) {
   if (!el) return 0
@@ -18,6 +18,7 @@ export function ToolStatusTitle(props: {
   class?: string
   split?: boolean
 }) {
+  const reduce = useReducedMotion()
   const split = createMemo(() => commonPrefix(props.activeText, props.doneText))
   const suffix = createMemo(
     () =>
@@ -38,8 +39,6 @@ export function ToolStatusTitle(props: {
 
   const node = () => (suffix() ? tailRef : swapRef)
 
-  const reduce = prefersReducedMotion
-
   const setNodeWidth = (width: string) => {
     if (swapRef) swapRef.style.width = width
     if (tailRef) tailRef.style.width = width

packages/ui/src/components/tool-utils.ts

@@ -1,4 +1,6 @@
+import type { ToolPart } from "@opencode-ai/sdk/v2"
 import { createEffect, createMemo, createSignal, on, onCleanup, onMount } from "solid-js"
+import { useReducedMotion } from "../hooks/use-reduced-motion"
 import {
   animate,
   type AnimationPlaybackControls,
@@ -8,8 +10,6 @@ import {
   GROW_SPRING,
   WIPE_MASK,
 } from "./motion"
-import { prefersReducedMotion } from "../hooks/use-reduced-motion"
-import type { ToolPart } from "@opencode-ai/sdk/v2"
 
 export const TEXT_RENDER_THROTTLE_MS = 100
 
@@ -106,57 +106,67 @@ export function useCollapsible(options: {
   measure?: () => number
   onOpen?: () => void
 }) {
+  const reduce = useReducedMotion()
   let heightAnim: AnimationPlaybackControls | undefined
   let fadeAnim: AnimationPlaybackControls | undefined
   let gen = 0
 
   createEffect(
-    on(
-      options.open,
-      (isOpen) => {
-        const content = options.content()
-        const body = options.body()
-        if (!content || !body) return
-        heightAnim?.stop()
-        fadeAnim?.stop()
-        const id = ++gen
+    on(options.open, (isOpen) => {
+      const content = options.content()
+      const body = options.body()
+      if (!content || !body) return
+      heightAnim?.stop()
+      fadeAnim?.stop()
+      if (reduce()) {
+        body.style.opacity = ""
+        body.style.filter = ""
         if (isOpen) {
           content.style.display = ""
-          content.style.height = "0px"
-          body.style.opacity = "0"
-          body.style.filter = "blur(2px)"
-          fadeAnim = animate(body, { opacity: [0, 1], filter: ["blur(2px)", "blur(0px)"] }, COLLAPSIBLE_SPRING)
-          queueMicrotask(() => {
-            if (gen !== id) return
-            const c = options.content()
-            if (!c) return
-            const h = options.measure?.() ?? Math.ceil(body.getBoundingClientRect().height)
-            heightAnim = animate(c, { height: ["0px", `${h}px`] }, COLLAPSIBLE_SPRING)
-            heightAnim.finished.then(
-              () => {
-                if (gen !== id) return
-                c.style.height = "auto"
-                options.onOpen?.()
-              },
-              () => {},
-            )
-          })
+          content.style.height = "auto"
+          options.onOpen?.()
           return
         }
+        content.style.height = "0px"
+        content.style.display = "none"
+        return
+      }
+      const id = ++gen
+      if (isOpen) {
+        content.style.display = ""
+        content.style.height = "0px"
+        body.style.opacity = "0"
+        body.style.filter = "blur(2px)"
+        fadeAnim = animate(body, { opacity: [0, 1], filter: ["blur(2px)", "blur(0px)"] }, COLLAPSIBLE_SPRING)
+        queueMicrotask(() => {
+          if (gen !== id) return
+          const c = options.content()
+          if (!c) return
+          const h = options.measure?.() ?? Math.ceil(body.getBoundingClientRect().height)
+          heightAnim = animate(c, { height: ["0px", `${h}px`] }, COLLAPSIBLE_SPRING)
+          heightAnim.finished.then(
+            () => {
+              if (gen !== id) return
+              c.style.height = "auto"
+              options.onOpen?.()
+            },
+            () => {},
+          )
+        })
+        return
+      }
 
-        const h = content.getBoundingClientRect().height
-        heightAnim = animate(content, { height: [`${h}px`, "0px"] }, COLLAPSIBLE_SPRING)
-        fadeAnim = animate(body, { opacity: [1, 0], filter: ["blur(0px)", "blur(2px)"] }, COLLAPSIBLE_SPRING)
-        heightAnim.finished.then(
-          () => {
-            if (gen !== id) return
-            content.style.display = "none"
-          },
-          () => {},
-        )
-      },
-      { defer: true },
-    ),
+      const h = content.getBoundingClientRect().height
+      heightAnim = animate(content, { height: [`${h}px`, "0px"] }, COLLAPSIBLE_SPRING)
+      fadeAnim = animate(body, { opacity: [1, 0], filter: ["blur(0px)", "blur(2px)"] }, COLLAPSIBLE_SPRING)
+      heightAnim.finished.then(
+        () => {
+          if (gen !== id) return
+          content.style.display = "none"
+        },
+        () => {},
+      )
+    }),
   )
 
   onCleanup(() => {
@@ -181,7 +191,7 @@ export function useRowWipe(opts: {
   ref: () => HTMLElement | undefined
   seen: Set<string>
 }) {
-  const reduce = prefersReducedMotion
+  const reduce = useReducedMotion()
 
   createEffect(() => {
     const id = opts.id()
@@ -265,13 +275,14 @@ export function useToolFade(
   const delay = options?.delay ?? 0
   const wipe = options?.wipe ?? false
   const active = options?.animate !== false
+  const reduce = useReducedMotion()
 
   onMount(() => {
     if (!active) return
 
     const el = ref()
     if (!el || typeof window === "undefined") return
-    if (prefersReducedMotion()) return
+    if (reduce()) return
 
     const mask =
       wipe &&

packages/ui/src/hooks/index.ts

@@ -1,5 +1,3 @@
 export * from "./use-filtered-list"
 export * from "./create-auto-scroll"
-export * from "./use-element-height"
 export * from "./use-reduced-motion"
-export * from "./use-page-visible"

packages/ui/src/hooks/use-element-height.ts

@@ -1,25 +0,0 @@
-import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
-
-/**
- * Tracks an element's height via ResizeObserver.
- * Returns a reactive signal that updates whenever the element resizes.
- */
-export function useElementHeight(
-  ref: Accessor<HTMLElement | undefined> | (() => HTMLElement | undefined),
-  initial = 0,
-): Accessor<number> {
-  const [height, setHeight] = createSignal(initial)
-
-  createEffect(() => {
-    const el = ref()
-    if (!el) return
-    setHeight(el.getBoundingClientRect().height)
-    const observer = new ResizeObserver(() => {
-      setHeight(el.getBoundingClientRect().height)
-    })
-    observer.observe(el)
-    onCleanup(() => observer.disconnect())
-  })
-
-  return height
-}

packages/ui/src/hooks/use-page-visible.ts

@@ -1,11 +0,0 @@
-import { createSignal } from "solid-js"
-
-export const pageVisible = /* @__PURE__ */ (() => {
-  const [visible, setVisible] = createSignal(true)
-  if (typeof document !== "undefined") {
-    const sync = () => setVisible(document.visibilityState !== "hidden")
-    sync()
-    document.addEventListener("visibilitychange", sync)
-  }
-  return visible
-})()

packages/ui/src/hooks/use-reduced-motion.ts

@@ -1,9 +1,10 @@
-import { createSignal } from "solid-js"
+import { isHydrated } from "@solid-primitives/lifecycle"
+import { createMediaQuery } from "@solid-primitives/media"
+import { createHydratableSingletonRoot } from "@solid-primitives/rootless"
 
-export const prefersReducedMotion = /* @__PURE__ */ (() => {
-  if (typeof window === "undefined") return () => false
-  const mql = window.matchMedia("(prefers-reduced-motion: reduce)")
-  const [reduced, setReduced] = createSignal(mql.matches)
-  mql.addEventListener("change", () => setReduced(mql.matches))
-  return reduced
-})()
+const query = "(prefers-reduced-motion: reduce)"
+
+export const useReducedMotion = createHydratableSingletonRoot(() => {
+  const value = createMediaQuery(query)
+  return () => !isHydrated() || value()
+})