diff --git a/packages/app/src/context/global-sync.tsx b/packages/app/src/context/global-sync.tsx
index a0656c5fc60..405e7bd6667 100644
--- a/packages/app/src/context/global-sync.tsx
+++ b/packages/app/src/context/global-sync.tsx
@@ -16,6 +16,7 @@ import {
type LspStatus,
type VcsInfo,
type PermissionRequest,
+ type QuestionRequest,
createOpencodeClient,
} from "@opencode-ai/sdk/v2/client"
import { createStore, produce, reconcile } from "solid-js/store"
@@ -23,7 +24,19 @@ import { Binary } from "@opencode-ai/util/binary"
import { retry } from "@opencode-ai/util/retry"
import { useGlobalSDK } from "./global-sdk"
import { ErrorPage, type InitError } from "../pages/error"
-import { batch, createContext, useContext, onCleanup, onMount, type ParentProps, Switch, Match } from "solid-js"
+import {
+ batch,
+ createContext,
+ useContext,
+ onCleanup,
+ onMount,
+ createEffect,
+ type ParentProps,
+ Switch,
+ Match,
+} from "solid-js"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { Logo } from "@opencode-ai/ui/logo"
import { showToast } from "@opencode-ai/ui/toast"
import { getFilename } from "@opencode-ai/util/path"
@@ -48,12 +61,16 @@ type State = {
permission: {
[sessionID: string]: PermissionRequest[]
}
+ question: {
+ [sessionID: string]: QuestionRequest[]
+ }
mcp: {
[name: string]: McpStatus
}
lsp: LspStatus[]
vcs: VcsInfo | undefined
limit: number
+ totalSessions: number
message: {
[sessionID: string]: Message[]
}
@@ -62,8 +79,38 @@ type State = {
}
}
+const CACHE_KEY = "opencode-global-state"
+
+type CachedState = {
+ project: Project[]
+ provider: ProviderListResponse
+ timestamp: number
+}
+
+function loadCachedState(): CachedState | null {
+ try {
+ const cached = localStorage.getItem(CACHE_KEY)
+ if (!cached) return null
+ const parsed = JSON.parse(cached) as CachedState
+ // Cache expires after 24 hours
+ if (Date.now() - parsed.timestamp > 24 * 60 * 60 * 1000) return null
+ return parsed
+ } catch {
+ return null
+ }
+}
+
+function saveCachedState(project: Project[], provider: ProviderListResponse) {
+ try {
+ localStorage.setItem(CACHE_KEY, JSON.stringify({ project, provider, timestamp: Date.now() }))
+ } catch {
+ // Ignore storage errors (private browsing, quota exceeded, etc.)
+ }
+}
+
function createGlobalSync() {
const globalSDK = useGlobalSDK()
+ const cached = loadCachedState()
const [globalStore, setGlobalStore] = createStore<{
ready: boolean
error?: InitError
@@ -72,10 +119,11 @@ function createGlobalSync() {
provider: ProviderListResponse
provider_auth: ProviderAuthResponse
}>({
- ready: false,
+ // If we have cached data, mark as ready immediately for instant UI
+ ready: !!cached,
path: { state: "", config: "", worktree: "", directory: "", home: "" },
- project: [],
- provider: { all: [], connected: [], default: {} },
+ project: cached?.project ?? [],
+ provider: cached?.provider ?? { all: [], connected: [], default: {} },
provider_auth: {},
})
@@ -96,10 +144,12 @@ function createGlobalSync() {
session_diff: {},
todo: {},
permission: {},
+ question: {},
mcp: {},
lsp: [],
vcs: undefined,
limit: 5,
+ totalSessions: 0,
message: {},
part: {},
})
@@ -125,6 +175,7 @@ function createGlobalSync() {
const updated = new Date(s.time?.updated ?? s.time?.created).getTime()
return updated > fourHoursAgo
})
+ setStore("totalSessions", nonArchived.length)
setStore("session", reconcile(sessions, { key: "id" }))
})
.catch((err) => {
@@ -205,6 +256,38 @@ function createGlobalSync() {
}
})
}),
+ sdk.question.list().then((x) => {
+ const grouped: Record
= {}
+ for (const q of x.data ?? []) {
+ if (!q?.id || !q.sessionID) continue
+ const existing = grouped[q.sessionID]
+ if (existing) {
+ existing.push(q)
+ continue
+ }
+ grouped[q.sessionID] = [q]
+ }
+
+ batch(() => {
+ for (const sessionID of Object.keys(store.question)) {
+ if (grouped[sessionID]) continue
+ setStore("question", sessionID, [])
+ }
+ for (const [sessionID, questions] of Object.entries(grouped)) {
+ setStore(
+ "question",
+ sessionID,
+ reconcile(
+ questions
+ .filter((q) => !!q?.id)
+ .slice()
+ .sort((a, b) => a.id.localeCompare(b.id)),
+ { key: "id" },
+ ),
+ )
+ }
+ })
+ }),
]).then(() => {
setStore("status", "complete")
})
@@ -256,6 +339,8 @@ function createGlobalSync() {
draft.splice(result.index, 1)
}),
)
+ // Decrement totalSessions when session is archived
+ setStore("totalSessions", (n) => Math.max(0, n - 1))
}
break
}
@@ -263,6 +348,14 @@ function createGlobalSync() {
setStore("session", result.index, reconcile(event.properties.info))
break
}
+ // Session not in local store - add it
+ // Only increment totalSessions if session was created recently (truly new),
+ // not if it's an old session we just didn't have loaded due to limit
+ const createdAt = new Date(event.properties.info.time?.created).getTime()
+ const isNewSession = Date.now() - createdAt < 30_000
+ if (isNewSession) {
+ setStore("totalSessions", (n) => n + 1)
+ }
setStore(
"session",
produce((draft) => {
@@ -402,20 +495,64 @@ function createGlobalSync() {
sdk.lsp.status().then((x) => setStore("lsp", x.data ?? []))
break
}
+ case "question.asked": {
+ const sessionID = event.properties.sessionID
+ const questions = store.question[sessionID]
+ if (!questions) {
+ setStore("question", sessionID, [event.properties])
+ break
+ }
+
+ const result = Binary.search(questions, event.properties.id, (q) => q.id)
+ if (result.found) {
+ setStore("question", sessionID, result.index, reconcile(event.properties))
+ break
+ }
+
+ setStore(
+ "question",
+ sessionID,
+ produce((draft) => {
+ draft.splice(result.index, 0, event.properties)
+ }),
+ )
+ break
+ }
+ case "question.replied":
+ case "question.rejected": {
+ const questions = store.question[event.properties.sessionID]
+ if (!questions) break
+ const result = Binary.search(questions, event.properties.requestID, (q) => q.id)
+ if (!result.found) break
+ setStore(
+ "question",
+ event.properties.sessionID,
+ produce((draft) => {
+ draft.splice(result.index, 1)
+ }),
+ )
+ break
+ }
}
})
onCleanup(unsub)
async function bootstrap() {
- const health = await globalSDK.client.global
- .health()
- .then((x) => x.data)
- .catch(() => undefined)
+ const hasCachedData = globalStore.project.length > 0
+
+ // Quick health check with 3s timeout - don't block UI if server is slow
+ const healthPromise = globalSDK.client.global.health().then((x) => x.data)
+ const timeoutPromise = new Promise((resolve) => setTimeout(() => resolve(undefined), 3000))
+ const health = await Promise.race([healthPromise, timeoutPromise]).catch(() => undefined)
+
if (!health?.healthy) {
- setGlobalStore(
- "error",
- new Error(`Could not connect to server. Is there a server running at \`${globalSDK.url}\`?`),
- )
+ // If we have cached data, don't show error - just use cache silently
+ if (!hasCachedData) {
+ setGlobalStore(
+ "error",
+ new Error(`Could not connect to server. Is there a server running at \`${globalSDK.url}\`?`),
+ )
+ }
return
}
@@ -456,9 +593,21 @@ function createGlobalSync() {
),
])
.then(() => setGlobalStore("ready", true))
- .catch((e) => setGlobalStore("error", e))
+ .catch((e) => {
+ // Only show error if we don't have cached data to fall back on
+ if (!hasCachedData) setGlobalStore("error", e)
+ })
}
+ // Save state to cache when projects or providers change
+ createEffect(() => {
+ const project = globalStore.project
+ const provider = globalStore.provider
+ if (project.length > 0 || provider.all.length > 0) {
+ saveCachedState(project, provider)
+ }
+ })
+
onMount(() => {
bootstrap()
})
@@ -484,7 +633,17 @@ const GlobalSyncContext = createContext>()
export function GlobalSyncProvider(props: ParentProps) {
const value = createGlobalSync()
return (
-
+
+
+
+
+ Connecting...
+
+
diff --git a/packages/app/src/context/layout.tsx b/packages/app/src/context/layout.tsx
index 385f564fa57..af652af9496 100644
--- a/packages/app/src/context/layout.tsx
+++ b/packages/app/src/context/layout.tsx
@@ -35,6 +35,7 @@ type SessionView = {
reviewOpen?: string[]
terminalOpened?: boolean
reviewPanelOpened?: boolean
+ mobileTab?: "session" | "review"
}
export type LocalProject = Partial