@@ -150,7 +177,7 @@ dev machine over a VPN (e.g. Tailscale) or LAN without a Cloudflare tunnel.
**How it works:**
- OpenCode runs as its own service, binding only to `localhost`.
-- OpenChamber connects to it via `OPENCODE_HOST` and `--host 0.0.0.0` makes it reachable on your VPN IP.
+- OpenChamber connects to it via `OPENCODE_HOST` and `--lan` makes it reachable on your VPN IP.
- `--foreground` keeps the CLI process alive so systemd can track and restart it.
**`~/.config/systemd/user/opencode.service`**
diff --git a/fix-deprecation.js b/fix-deprecation.js
index 059058e5..17c49be5 100644
--- a/fix-deprecation.js
+++ b/fix-deprecation.js
@@ -14,18 +14,34 @@ const __dirname = path.dirname(__filename);
function fixHttpProxyDeprecation() {
try {
- // Find the http-proxy package in node_modules
- const httpProxyDir = path.join(__dirname, 'node_modules', 'http-proxy', 'lib', 'http-proxy');
- const indexPath = path.join(httpProxyDir, 'index.js');
- const commonPath = path.join(httpProxyDir, 'common.js');
-
- if (!fs.existsSync(indexPath) || !fs.existsSync(commonPath)) {
- return;
+ const candidateDirs = [
+ path.join(__dirname, 'node_modules', 'http-proxy', 'lib', 'http-proxy'),
+ ];
+
+ const bunStoreDir = path.join(__dirname, 'node_modules', '.bun');
+ if (fs.existsSync(bunStoreDir)) {
+ for (const entry of fs.readdirSync(bunStoreDir, { withFileTypes: true })) {
+ if (!entry.isDirectory() || !entry.name.startsWith('http-proxy@')) continue;
+ candidateDirs.push(path.join(bunStoreDir, entry.name, 'node_modules', 'http-proxy', 'lib', 'http-proxy'));
+ }
}
-
- // Patch index.js
- let needsPatch = false;
-
+
+ for (const httpProxyDir of candidateDirs) {
+ patchHttpProxyDir(httpProxyDir);
+ }
+ } catch {
+ // Silently handle errors - functionality is not affected
+ }
+}
+
+function patchHttpProxyDir(httpProxyDir) {
+ const indexPath = path.join(httpProxyDir, 'index.js');
+ const commonPath = path.join(httpProxyDir, 'common.js');
+
+ if (!fs.existsSync(indexPath) || !fs.existsSync(commonPath)) {
+ return;
+ }
+
if (fs.existsSync(indexPath)) {
let content = fs.readFileSync(indexPath, 'utf8');
@@ -49,11 +65,9 @@ function fixHttpProxyDeprecation() {
if (indexPatched) {
fs.writeFileSync(indexPath, content, 'utf8');
- needsPatch = true;
}
}
-
- // Patch common.js
+
if (fs.existsSync(commonPath)) {
let content = fs.readFileSync(commonPath, 'utf8');
@@ -69,13 +83,9 @@ function fixHttpProxyDeprecation() {
if (commonPatched) {
fs.writeFileSync(commonPath, content, 'utf8');
- needsPatch = true;
}
}
- } catch (error) {
- // Silently handle errors - functionality is not affected
- }
}
// Run the fix
-fixHttpProxyDeprecation();
\ No newline at end of file
+fixHttpProxyDeprecation();
diff --git a/package.json b/package.json
index 8ab44606..e2971d0e 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
"lint:electron": "bun run --cwd packages/electron lint",
"clean": "bun run --filter '*' clean",
"changelog-card": "node scripts/changelog-card/generate.mjs",
- "postinstall": "patch-package",
+ "postinstall": "node ./fix-deprecation.js && patch-package",
"dev:web": "bun run --cwd packages/web build:watch",
"dev:web:server": "bun run --cwd packages/web dev:server:watch",
"dev:web:full": "node ./scripts/dev-web-full.mjs",
@@ -51,6 +51,7 @@
"desktop:dev": "node ./packages/desktop/scripts/desktop-dev.mjs",
"desktop:build": "bun run --cwd packages/desktop build:sidecar && bun run --cwd packages/desktop tauri build",
"electron:dev": "node ./packages/electron/scripts/electron-dev.mjs",
+ "electron:dev:bundled": "OPENCHAMBER_ELECTRON_USE_BUNDLED_UI=1 node ./packages/electron/scripts/electron-dev.mjs",
"electron:build": "bun run --cwd packages/electron package",
"desktop:lint": "bun run --cwd packages/desktop lint && cargo fmt --manifest-path packages/desktop/src-tauri/Cargo.toml -- --check && cargo clippy --manifest-path packages/desktop/src-tauri/Cargo.toml -- -D warnings",
"desktop:type-check": "bun run --cwd packages/desktop type-check && cargo fmt --manifest-path packages/desktop/src-tauri/Cargo.toml -- --check && cargo clippy --manifest-path packages/desktop/src-tauri/Cargo.toml -- -D warnings",
diff --git a/packages/docs/content/docs/environment.mdx b/packages/docs/content/docs/environment.mdx
index 6b25e4e1..aaa793d6 100644
--- a/packages/docs/content/docs/environment.mdx
+++ b/packages/docs/content/docs/environment.mdx
@@ -17,6 +17,10 @@ Bind address for the OpenChamber web server. Use `0.0.0.0` to allow access from
Password for the browser UI. Use this when binding outside localhost, using tunnels, or running behind a reverse proxy.
+### `OPENCHAMBER_API_ONLY`
+
+Starts OpenChamber in headless mode when set to `true` or `1`. API routes stay available for desktop and mobile clients, but the browser UI is not served.
+
### `OPENCHAMBER_DATA_DIR`
Overrides the OpenChamber data directory. The default is `~/.config/openchamber`.
diff --git a/packages/docs/content/docs/es/environment.mdx b/packages/docs/content/docs/es/environment.mdx
index be06d227..e6842ded 100644
--- a/packages/docs/content/docs/es/environment.mdx
+++ b/packages/docs/content/docs/es/environment.mdx
@@ -17,6 +17,10 @@ Dirección donde escucha el servidor web de OpenChamber. Usa `0.0.0.0` para perm
Contraseña para la interfaz del navegador. Úsala cuando no te limites a localhost, o cuando uses túneles o un proxy inverso.
+### `OPENCHAMBER_API_ONLY`
+
+Inicia OpenChamber en modo headless cuando vale `true` o `1`. Las rutas API siguen disponibles para clientes de escritorio y móviles, pero no se sirve la UI del navegador.
+
### `OPENCHAMBER_DATA_DIR`
Cambia el directorio de datos de OpenChamber. Por defecto es `~/.config/openchamber`.
diff --git a/packages/docs/content/docs/es/opencode-server.mdx b/packages/docs/content/docs/es/opencode-server.mdx
index 4fd479e6..db492088 100644
--- a/packages/docs/content/docs/es/opencode-server.mdx
+++ b/packages/docs/content/docs/es/opencode-server.mdx
@@ -60,8 +60,24 @@ Para proteger la UI, define la contraseña al habilitar el servicio:
OPENCHAMBER_UI_PASSWORD='secret' openchamber startup enable
```
+Para un servidor headless que arranca al iniciar sesión y se usa desde apps de escritorio o móviles, añade `--api-only` y un host alcanzable:
+
+```bash
+openchamber startup enable --port 3000 --api-only --host 0.0.0.0 --ui-password secret
+```
+
`startup enable` guarda una captura del entorno actual en el servicio para que el arranque se parezca más a ejecutar `openchamber` desde la misma shell. Así conserva tokens de proveedores, `PATH`, configuración del agente SSH y otras variables CLI de auth/config. Usa `--no-env-snapshot` si quieres un entorno de servicio mínimo.
+El servicio de inicio recuerda `--port`, `--host`, `--ui-password` y `--api-only`. El reinicio por CLI y el reinicio durante una actualización reutilizan esos ajustes guardados.
+
+Para crear un enlace de conexión para otra app de OpenChamber, usa:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+Ejecuta `openchamber connect-url --help` para ver todas las opciones del enlace, incluidas `--name`, `--lan`, `--server`, `--api-only`, `--ui-password` y `--qr`.
+
Puedes gestionar túneles de forma independiente para ese servicio en ejecución:
```bash
diff --git a/packages/docs/content/docs/es/remote-instances.mdx b/packages/docs/content/docs/es/remote-instances.mdx
index 345415eb..a46d3100 100644
--- a/packages/docs/content/docs/es/remote-instances.mdx
+++ b/packages/docs/content/docs/es/remote-instances.mdx
@@ -24,6 +24,18 @@ OpenChamber recorre los pasos —comprobar la conexión, configurar el remoto, i
Tú decides si guardar las contraseñas de SSH y de UI o introducirlas cada vez. Si la conexión se cae, OpenChamber informa qué paso falló para que puedas arreglarlo; consulta [Acceso remoto](/es/troubleshooting/remote-access/).
+## Enlaces de conexión directa
+
+Si una máquina remota ya ejecuta OpenChamber, crea allí un enlace de conexión e impórtalo en **Settings → Remote Instances → Server links**:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+`connect-url` inicia el servidor primero si no hay nada ejecutándose en ese puerto. Añade `--api-only` para un servidor headless, `--lan` para escuchar en la LAN al iniciar, `--ui-password` para proteger el acceso del navegador y `--name` para etiquetar la conexión guardada.
+
+El enlace generado contiene un token de cliente para apps de OpenChamber. Ese token es independiente de la contraseña de la UI del navegador y sobrevive a reinicios hasta que lo revoques o elimines.
+
## Relacionado
- [OpenCode Server](/es/opencode-server/) — conéctate a un servidor remoto en la web o en VS Code
diff --git a/packages/docs/content/docs/es/tunnels.mdx b/packages/docs/content/docs/es/tunnels.mdx
index de7ddc50..062fc09c 100644
--- a/packages/docs/content/docs/es/tunnels.mdx
+++ b/packages/docs/content/docs/es/tunnels.mdx
@@ -30,6 +30,8 @@ ngrok config add-authtoken
openchamber
```
+Si omites este paso, `openchamber tunnel start` puede iniciar automáticamente un servidor CLI. Al hacerlo, puedes pasar opciones del servidor como `--port`, `--host`, `--lan`, `--ui-password` y `--api-only`.
+
2. Inicia un túnel de Cloudflare:
```bash
@@ -105,6 +107,7 @@ openchamber tunnel stop --port 3000
- un único túnel activo por instancia de OpenChamber (puerto)
- iniciar un nuevo modo/proveedor en la misma instancia reemplaza el túnel anterior
- generar un nuevo enlace de conexión revoca el anterior sin usar
+- el autoarranque del túnel conserva flags del servidor como `--ui-password` y `--api-only` en los ajustes de instancia usados por reinicios y actualizaciones
## Relacionado
diff --git a/packages/docs/content/docs/ko/environment.mdx b/packages/docs/content/docs/ko/environment.mdx
index e5d95f0e..aebebe09 100644
--- a/packages/docs/content/docs/ko/environment.mdx
+++ b/packages/docs/content/docs/ko/environment.mdx
@@ -17,6 +17,10 @@ OpenChamber 웹 서버가 바인딩할 주소입니다. 다른 컴퓨터에서
브라우저 UI 비밀번호입니다. localhost 밖으로 바인딩하거나 터널, 리버스 프록시를 사용할 때 설정하세요.
+### `OPENCHAMBER_API_ONLY`
+
+`true` 또는 `1`이면 OpenChamber를 headless 모드로 시작합니다. 데스크톱과 모바일 클라이언트용 API route는 계속 사용할 수 있지만 브라우저 UI는 제공하지 않습니다.
+
### `OPENCHAMBER_DATA_DIR`
OpenChamber 데이터 디렉터리를 바꿉니다. 기본값은 `~/.config/openchamber`입니다.
diff --git a/packages/docs/content/docs/ko/opencode-server.mdx b/packages/docs/content/docs/ko/opencode-server.mdx
index 0b4d193a..a345c26c 100644
--- a/packages/docs/content/docs/ko/opencode-server.mdx
+++ b/packages/docs/content/docs/ko/opencode-server.mdx
@@ -60,8 +60,24 @@ UI를 보호하려면 서비스를 활성화할 때 비밀번호를 설정하세
OPENCHAMBER_UI_PASSWORD='secret' openchamber startup enable
```
+로그인 시 시작되고 데스크톱 또는 모바일 앱에서 사용할 headless 서버라면 `--api-only`와 접근 가능한 host를 함께 지정하세요:
+
+```bash
+openchamber startup enable --port 3000 --api-only --host 0.0.0.0 --ui-password secret
+```
+
`startup enable`은 현재 환경의 스냅샷을 서비스에 저장해, 같은 셸에서 `openchamber`를 직접 실행한 것에 더 가깝게 동작하게 합니다. provider 토큰, `PATH`, SSH agent 설정, 기타 CLI auth/config 환경 변수가 유지됩니다. 최소한의 서비스 환경을 원하면 `--no-env-snapshot`을 사용하세요.
+시작 서비스는 `--port`, `--host`, `--ui-password`, `--api-only`를 기억합니다. CLI 재시작과 업데이트 재시작은 이 저장된 설정을 다시 사용합니다.
+
+다른 OpenChamber 앱용 연결 링크를 만들려면 다음을 사용하세요:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+`openchamber connect-url --help`를 실행하면 `--name`, `--lan`, `--server`, `--api-only`, `--ui-password`, `--qr` 같은 모든 링크 옵션을 볼 수 있습니다.
+
실행 중인 이 서비스의 터널은 별도로 관리할 수 있습니다:
```bash
diff --git a/packages/docs/content/docs/ko/remote-instances.mdx b/packages/docs/content/docs/ko/remote-instances.mdx
index ee2cc776..15a5ae3b 100644
--- a/packages/docs/content/docs/ko/remote-instances.mdx
+++ b/packages/docs/content/docs/ko/remote-instances.mdx
@@ -24,6 +24,18 @@ OpenChamber가 연결 확인, 원격 설정, 서버 시작, 포트 포워딩 단
SSH 및 UI 비밀번호를 저장할지, 매번 입력할지 결정합니다. 연결이 끊기면 OpenChamber가 어느 단계가 실패했는지 알려주므로 고칠 수 있습니다. [Remote access](/ko/troubleshooting/remote-access/)를 참고하세요.
+## 직접 연결 링크
+
+원격 머신에서 OpenChamber가 이미 실행 중이면 그 머신에서 연결 링크를 만들고 **Settings → Remote Instances → Server links**에서 가져오세요:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+해당 포트에 서버가 없으면 `connect-url`이 먼저 서버를 시작합니다. Headless 서버에는 `--api-only`, 시작 시 LAN에 바인딩하려면 `--lan`, 브라우저 접근 보호에는 `--ui-password`, 저장된 연결 이름에는 `--name`을 사용하세요.
+
+생성된 링크에는 OpenChamber 앱용 client token이 들어 있습니다. 이 token은 브라우저 UI 비밀번호와 별개이며, 취소하거나 삭제하기 전까지 서버 재시작 후에도 유지됩니다.
+
## 관련 항목
- [OpenCode Server](/ko/opencode-server/) — 웹이나 VS Code에서 원격 서버에 연결하세요
diff --git a/packages/docs/content/docs/ko/tunnels.mdx b/packages/docs/content/docs/ko/tunnels.mdx
index c9f7c6cb..a1b450bb 100644
--- a/packages/docs/content/docs/ko/tunnels.mdx
+++ b/packages/docs/content/docs/ko/tunnels.mdx
@@ -30,6 +30,8 @@ ngrok config add-authtoken
openchamber
```
+이 단계를 건너뛰면 `openchamber tunnel start`가 CLI 서버를 자동으로 시작할 수 있습니다. 자동 시작 시 `--port`, `--host`, `--lan`, `--ui-password`, `--api-only` 같은 서버 옵션을 함께 전달할 수 있습니다.
+
2. Cloudflare 터널을 시작합니다:
```bash
@@ -105,6 +107,7 @@ openchamber tunnel stop --port 3000
- OpenChamber 인스턴스(포트)당 활성 터널은 하나입니다
- 같은 인스턴스에서 새 모드/공급자를 시작하면 이전 터널이 대체됩니다
- 새 연결 링크를 생성하면 사용되지 않은 이전 링크가 무효화됩니다
+- 터널 자동 시작은 재시작/업데이트 흐름에서 쓰는 인스턴스 설정에 `--ui-password`, `--api-only` 같은 서버 플래그를 저장합니다
## 관련 문서
diff --git a/packages/docs/content/docs/opencode-server.mdx b/packages/docs/content/docs/opencode-server.mdx
index 53a506f6..fe9b6bac 100644
--- a/packages/docs/content/docs/opencode-server.mdx
+++ b/packages/docs/content/docs/opencode-server.mdx
@@ -60,8 +60,24 @@ To protect the UI, set the password when enabling the service:
OPENCHAMBER_UI_PASSWORD='secret' openchamber startup enable
```
+For a headless server that starts at login and is meant for desktop or mobile clients, include `--api-only` and a reachable host:
+
+```bash
+openchamber startup enable --port 3000 --api-only --host 0.0.0.0 --ui-password secret
+```
+
`startup enable` snapshots your current environment into the service so it behaves more like starting `openchamber` from the same shell. This keeps provider tokens, `PATH`, SSH agent settings, and other CLI auth/config variables available. Use `--no-env-snapshot` if you want a minimal service environment.
+The startup service remembers `--port`, `--host`, `--ui-password`, and `--api-only`. CLI restart and update restart reuse those saved settings.
+
+To create a connection link for another OpenChamber app, use:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+Run `openchamber connect-url --help` to see all link options, including `--name`, `--lan`, `--server`, `--api-only`, `--ui-password`, and `--qr`.
+
You can still manage tunnels independently for that running service:
```bash
diff --git a/packages/docs/content/docs/pl/environment.mdx b/packages/docs/content/docs/pl/environment.mdx
index fbb91dc8..9954fc79 100644
--- a/packages/docs/content/docs/pl/environment.mdx
+++ b/packages/docs/content/docs/pl/environment.mdx
@@ -17,6 +17,10 @@ Adres, na którym nasłuchuje serwer web OpenChamber. Użyj `0.0.0.0`, aby pozwo
Hasło do interfejsu w przeglądarce. Ustaw je przy dostępie spoza localhost, tunelach albo reverse proxy.
+### `OPENCHAMBER_API_ONLY`
+
+Uruchamia OpenChamber w trybie headless, gdy ustawione na `true` lub `1`. Trasy API pozostają dostępne dla klientów desktopowych i mobilnych, ale UI przeglądarki nie jest serwowane.
+
### `OPENCHAMBER_DATA_DIR`
Nadpisuje katalog danych OpenChamber. Domyślnie jest to `~/.config/openchamber`.
diff --git a/packages/docs/content/docs/pl/opencode-server.mdx b/packages/docs/content/docs/pl/opencode-server.mdx
index 1735eddc..fa647b86 100644
--- a/packages/docs/content/docs/pl/opencode-server.mdx
+++ b/packages/docs/content/docs/pl/opencode-server.mdx
@@ -60,8 +60,24 @@ Aby zabezpieczyć UI, ustaw hasło podczas włączania usługi:
OPENCHAMBER_UI_PASSWORD='secret' openchamber startup enable
```
+Dla serwera headless uruchamianego przy logowaniu i używanego przez aplikacje desktopowe lub mobilne dodaj `--api-only` oraz osiągalny host:
+
+```bash
+openchamber startup enable --port 3000 --api-only --host 0.0.0.0 --ui-password secret
+```
+
`startup enable` zapisuje migawkę bieżącego środowiska w usłudze, aby uruchomienie było bliższe ręcznemu startowi `openchamber` z tej samej powłoki. Zachowuje to tokeny dostawców, `PATH`, ustawienia agenta SSH i inne zmienne CLI auth/config. Użyj `--no-env-snapshot`, jeśli chcesz minimalne środowisko usługi.
+Usługa startowa pamięta `--port`, `--host`, `--ui-password` i `--api-only`. Restart z CLI oraz restart podczas aktualizacji używają tych zapisanych ustawień.
+
+Aby utworzyć link połączenia dla innej aplikacji OpenChamber, użyj:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+Uruchom `openchamber connect-url --help`, aby zobaczyć wszystkie opcje linku, w tym `--name`, `--lan`, `--server`, `--api-only`, `--ui-password` i `--qr`.
+
Tunelami dla tej działającej usługi możesz zarządzać niezależnie:
```bash
diff --git a/packages/docs/content/docs/pl/remote-instances.mdx b/packages/docs/content/docs/pl/remote-instances.mdx
index b026946b..beb69d99 100644
--- a/packages/docs/content/docs/pl/remote-instances.mdx
+++ b/packages/docs/content/docs/pl/remote-instances.mdx
@@ -24,6 +24,18 @@ OpenChamber przeprowadza przez kolejne kroki — sprawdzenie połączenia, skonf
Sam decydujesz, czy zapisać hasła SSH i UI, czy wpisywać je za każdym razem. Jeśli połączenie zostanie zerwane, OpenChamber zgłasza, który krok zawiódł, byś mógł to naprawić — zobacz [Dostęp zdalny](/pl/troubleshooting/remote-access/).
+## Bezpośrednie linki połączenia
+
+Jeśli zdalna maszyna już uruchamia OpenChamber, utwórz tam link połączenia i zaimportuj go w **Settings → Remote Instances → Server links**:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+`connect-url` najpierw uruchamia serwer, jeśli nic nie działa na tym porcie. Dodaj `--api-only` dla serwera headless, `--lan` aby nasłuchiwać w LAN przy starcie, `--ui-password` aby chronić dostęp z przeglądarki oraz `--name` aby nazwać zapisane połączenie.
+
+Wygenerowany link zawiera token klienta dla aplikacji OpenChamber. Ten token jest osobny od hasła UI w przeglądarce i przetrwa restarty, dopóki go nie unieważnisz lub usuniesz.
+
## Powiązane
- [OpenCode Server](/pl/opencode-server/) — połącz się ze zdalnym serwerem w wersji webowej lub VS Code
diff --git a/packages/docs/content/docs/pl/tunnels.mdx b/packages/docs/content/docs/pl/tunnels.mdx
index c5833bfe..95dfbfe7 100644
--- a/packages/docs/content/docs/pl/tunnels.mdx
+++ b/packages/docs/content/docs/pl/tunnels.mdx
@@ -30,6 +30,8 @@ ngrok config add-authtoken
openchamber
```
+Jeśli pominiesz ten krok, `openchamber tunnel start` może automatycznie uruchomić serwer CLI. Przy auto-starcie możesz przekazać opcje serwera, takie jak `--port`, `--host`, `--lan`, `--ui-password` i `--api-only`.
+
2. Uruchom tunel Cloudflare:
```bash
@@ -105,6 +107,7 @@ openchamber tunnel stop --port 3000
- jeden aktywny tunel na instancję OpenChamber (port)
- uruchomienie nowego trybu/dostawcy na tej samej instancji zastępuje poprzedni tunel
- wygenerowanie nowego linku połączenia unieważnia poprzedni nieużyty
+- auto-start tunelu zapisuje flagi serwera, takie jak `--ui-password` i `--api-only`, w ustawieniach instancji używanych przez restarty i aktualizacje
## Powiązane
diff --git a/packages/docs/content/docs/pt-br/environment.mdx b/packages/docs/content/docs/pt-br/environment.mdx
index 967afc23..0e592a54 100644
--- a/packages/docs/content/docs/pt-br/environment.mdx
+++ b/packages/docs/content/docs/pt-br/environment.mdx
@@ -17,6 +17,10 @@ Endereço onde o servidor web do OpenChamber escuta. Use `0.0.0.0` para permitir
Senha da interface no navegador. Use quando expor fora do localhost, por túnel ou por proxy reverso.
+### `OPENCHAMBER_API_ONLY`
+
+Inicia o OpenChamber em modo headless quando definido como `true` ou `1`. As rotas de API continuam disponíveis para clientes desktop e mobile, mas a UI do navegador não é servida.
+
### `OPENCHAMBER_DATA_DIR`
Altera o diretório de dados do OpenChamber. O padrão é `~/.config/openchamber`.
diff --git a/packages/docs/content/docs/pt-br/opencode-server.mdx b/packages/docs/content/docs/pt-br/opencode-server.mdx
index 5cb30afe..b9951383 100644
--- a/packages/docs/content/docs/pt-br/opencode-server.mdx
+++ b/packages/docs/content/docs/pt-br/opencode-server.mdx
@@ -60,8 +60,24 @@ Para proteger a UI, defina a senha ao habilitar o serviço:
OPENCHAMBER_UI_PASSWORD='secret' openchamber startup enable
```
+Para um servidor headless que inicia no login e é usado por apps desktop ou mobile, inclua `--api-only` e um host acessível:
+
+```bash
+openchamber startup enable --port 3000 --api-only --host 0.0.0.0 --ui-password secret
+```
+
`startup enable` salva um snapshot do ambiente atual no serviço para que a inicialização se pareça mais com executar `openchamber` na mesma shell. Isso preserva tokens de provedores, `PATH`, configurações do agente SSH e outras variáveis CLI de auth/config. Use `--no-env-snapshot` se quiser um ambiente de serviço mínimo.
+O serviço de inicialização lembra `--port`, `--host`, `--ui-password` e `--api-only`. Reinícios pela CLI e reinícios durante atualização reutilizam essas configurações salvas.
+
+Para criar um link de conexão para outro app OpenChamber, use:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+Execute `openchamber connect-url --help` para ver todas as opções de link, incluindo `--name`, `--lan`, `--server`, `--api-only`, `--ui-password` e `--qr`.
+
Você ainda pode gerenciar túneis de forma independente para esse serviço em execução:
```bash
diff --git a/packages/docs/content/docs/pt-br/remote-instances.mdx b/packages/docs/content/docs/pt-br/remote-instances.mdx
index 09e440c2..15b199d5 100644
--- a/packages/docs/content/docs/pt-br/remote-instances.mdx
+++ b/packages/docs/content/docs/pt-br/remote-instances.mdx
@@ -24,6 +24,18 @@ O OpenChamber percorre as etapas — verificando a conexão, configurando o remo
Você decide se quer salvar as senhas SSH e de UI ou inseri-las a cada vez. Se a conexão cair, o OpenChamber informa qual etapa falhou para você corrigi-la — veja [Acesso remoto](/pt-br/troubleshooting/remote-access/).
+## Links de conexão direta
+
+Se uma máquina remota já executa OpenChamber, crie um link de conexão nela e importe em **Settings → Remote Instances → Server links**:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+`connect-url` inicia o servidor primeiro se nada estiver rodando nessa porta. Adicione `--api-only` para um servidor headless, `--lan` para escutar na LAN ao iniciar, `--ui-password` para proteger o acesso pelo navegador e `--name` para nomear a conexão salva.
+
+O link gerado contém um token de cliente para apps OpenChamber. Esse token é separado da senha da UI do navegador e sobrevive a reinícios até ser revogado ou removido.
+
## Relacionado
- [OpenCode Server](/pt-br/opencode-server/) — conecte a um servidor remoto na web ou no VS Code
diff --git a/packages/docs/content/docs/pt-br/tunnels.mdx b/packages/docs/content/docs/pt-br/tunnels.mdx
index 8aa9a714..37fef87f 100644
--- a/packages/docs/content/docs/pt-br/tunnels.mdx
+++ b/packages/docs/content/docs/pt-br/tunnels.mdx
@@ -30,6 +30,8 @@ ngrok config add-authtoken
openchamber
```
+Se você pular esta etapa, `openchamber tunnel start` pode iniciar automaticamente um servidor CLI. Ao iniciar automaticamente, você pode passar opções do servidor como `--port`, `--host`, `--lan`, `--ui-password` e `--api-only`.
+
2. Inicie um túnel da Cloudflare:
```bash
@@ -105,6 +107,7 @@ openchamber tunnel stop --port 3000
- um único túnel ativo por instância do OpenChamber (porta)
- iniciar um novo modo/provedor na mesma instância substitui o túnel anterior
- gerar um novo link de conexão revoga o anterior não utilizado
+- o auto-start do túnel preserva flags do servidor como `--ui-password` e `--api-only` nas configurações da instância usadas por reinícios e atualizações
## Relacionado
diff --git a/packages/docs/content/docs/remote-instances.mdx b/packages/docs/content/docs/remote-instances.mdx
index 8edfb832..ab7d7f8d 100644
--- a/packages/docs/content/docs/remote-instances.mdx
+++ b/packages/docs/content/docs/remote-instances.mdx
@@ -24,6 +24,18 @@ OpenChamber walks through the steps — checking the connection, setting up the
You decide whether to save the SSH and UI passwords or enter them each time. If the connection drops, OpenChamber reports which step failed so you can fix it — see [Remote access](/troubleshooting/remote-access/).
+## Direct connection links
+
+If a remote machine already runs OpenChamber, create a connection link there and import it in **Settings → Remote Instances → Server links**:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+`connect-url` starts the server first if nothing is running on that port. Add `--api-only` for a headless server, `--lan` to bind to the LAN when starting, `--ui-password` to protect browser access, and `--name` to label the saved connection.
+
+The generated link contains a client token for OpenChamber apps. That token is separate from the browser UI password and survives server restarts until you revoke or delete it.
+
## Related
- [OpenCode Server](/opencode-server/) — connect to a remote server on web or VS Code
diff --git a/packages/docs/content/docs/tunnels.mdx b/packages/docs/content/docs/tunnels.mdx
index 2eeb2d90..98de5c79 100644
--- a/packages/docs/content/docs/tunnels.mdx
+++ b/packages/docs/content/docs/tunnels.mdx
@@ -30,6 +30,8 @@ ngrok config add-authtoken
openchamber
```
+If you skip this step, `openchamber tunnel start` can auto-start a CLI server. When auto-starting, you can pass server options such as `--port`, `--host`, `--lan`, `--ui-password`, and `--api-only`.
+
2. Start a Cloudflare tunnel:
```bash
@@ -105,6 +107,7 @@ openchamber tunnel stop --port 3000
- one active tunnel per OpenChamber instance (port)
- starting a new mode/provider on same instance replaces previous tunnel
- generating a new connect link revokes previous unused one
+- tunnel auto-start preserves server flags like `--ui-password` and `--api-only` in the instance settings used by restart/update flows
## Related
diff --git a/packages/docs/content/docs/uk/environment.mdx b/packages/docs/content/docs/uk/environment.mdx
index b8295070..e202ab85 100644
--- a/packages/docs/content/docs/uk/environment.mdx
+++ b/packages/docs/content/docs/uk/environment.mdx
@@ -17,6 +17,10 @@ OpenChamber читає ці змінні під час запуску. Для st
Пароль для browser UI. Використовуйте його для доступу не лише з localhost, тунелів або reverse proxy.
+### `OPENCHAMBER_API_ONLY`
+
+Запускає OpenChamber у headless mode, якщо встановлено `true` або `1`. API routes залишаються доступними для desktop і mobile clients, але browser UI не віддається.
+
### `OPENCHAMBER_DATA_DIR`
Перевизначає директорію даних OpenChamber. Типово це `~/.config/openchamber`.
diff --git a/packages/docs/content/docs/uk/opencode-server.mdx b/packages/docs/content/docs/uk/opencode-server.mdx
index cdfa0fcf..2b159343 100644
--- a/packages/docs/content/docs/uk/opencode-server.mdx
+++ b/packages/docs/content/docs/uk/opencode-server.mdx
@@ -60,8 +60,24 @@ openchamber startup disable
OPENCHAMBER_UI_PASSWORD='secret' openchamber startup enable
```
+Для headless-сервера, який стартує під час входу та використовується desktop або mobile застосунками, додайте `--api-only` і доступний host:
+
+```bash
+openchamber startup enable --port 3000 --api-only --host 0.0.0.0 --ui-password secret
+```
+
`startup enable` зберігає знімок поточного середовища в сервісі, щоб запуск був ближчим до ручного запуску `openchamber` з тієї самої shell-сесії. Так зберігаються токени провайдерів, `PATH`, налаштування SSH agent та інші CLI-змінні для auth/config. Використайте `--no-env-snapshot`, якщо потрібне мінімальне середовище сервісу.
+Startup-сервіс пам'ятає `--port`, `--host`, `--ui-password` і `--api-only`. CLI restart і restart під час оновлення повторно використовують ці збережені налаштування.
+
+Щоб створити link підключення для іншого застосунку OpenChamber, використайте:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+Запустіть `openchamber connect-url --help`, щоб побачити всі опції link, зокрема `--name`, `--lan`, `--server`, `--api-only`, `--ui-password` і `--qr`.
+
Тунелями для такого запущеного сервісу можна керувати окремо:
```bash
diff --git a/packages/docs/content/docs/uk/remote-instances.mdx b/packages/docs/content/docs/uk/remote-instances.mdx
index 6c9885e6..b2eddafb 100644
--- a/packages/docs/content/docs/uk/remote-instances.mdx
+++ b/packages/docs/content/docs/uk/remote-instances.mdx
@@ -24,6 +24,18 @@ OpenChamber проходить через кроки — перевірку з'
Ви вирішуєте, чи зберігати SSH- та UI-паролі, чи вводити їх щоразу. Якщо з'єднання обривається, OpenChamber повідомляє, який крок збоїв, щоб ви могли виправити — див. [Віддалений доступ](/uk/troubleshooting/remote-access/).
+## Прямі link підключення
+
+Якщо на віддаленій машині вже запущено OpenChamber, створіть там link підключення й імпортуйте його в **Settings → Remote Instances → Server links**:
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+`connect-url` спочатку запускає сервер, якщо на цьому порту нічого не працює. Додайте `--api-only` для headless-сервера, `--lan` для LAN bind під час старту, `--ui-password` для захисту browser access і `--name` для назви збереженого підключення.
+
+Згенерований link містить client token для застосунків OpenChamber. Цей token окремий від пароля browser UI і зберігається після рестартів, доки ви його не відкличете або не видалите.
+
## Пов'язане
- [OpenCode Server](/uk/opencode-server/) — підключайтеся до віддаленого сервера у вебі чи VS Code
diff --git a/packages/docs/content/docs/uk/tunnels.mdx b/packages/docs/content/docs/uk/tunnels.mdx
index b6d98397..574ef782 100644
--- a/packages/docs/content/docs/uk/tunnels.mdx
+++ b/packages/docs/content/docs/uk/tunnels.mdx
@@ -30,6 +30,8 @@ ngrok config add-authtoken
openchamber
```
+Якщо пропустити цей крок, `openchamber tunnel start` може автоматично запустити CLI server. Під час auto-start можна передати server options: `--port`, `--host`, `--lan`, `--ui-password` і `--api-only`.
+
2. Запустіть тунель Cloudflare:
```bash
diff --git a/packages/docs/content/docs/zh-cn/environment.mdx b/packages/docs/content/docs/zh-cn/environment.mdx
index 9e44d564..69d94b7f 100644
--- a/packages/docs/content/docs/zh-cn/environment.mdx
+++ b/packages/docs/content/docs/zh-cn/environment.mdx
@@ -17,6 +17,10 @@ OpenChamber web 服务器监听的地址。使用 `0.0.0.0` 可允许其他机
浏览器 UI 的密码。当你绑定到 localhost 之外、使用隧道或反向代理时，请设置它。
+### `OPENCHAMBER_API_ONLY`
+
+设置为 `true` 或 `1` 时，以 headless 模式启动 OpenChamber。桌面和移动客户端仍可使用 API 路由，但不会提供浏览器 UI。
+
### `OPENCHAMBER_DATA_DIR`
覆盖 OpenChamber 数据目录。默认是 `~/.config/openchamber`。
diff --git a/packages/docs/content/docs/zh-cn/opencode-server.mdx b/packages/docs/content/docs/zh-cn/opencode-server.mdx
index bb234925..23224c64 100644
--- a/packages/docs/content/docs/zh-cn/opencode-server.mdx
+++ b/packages/docs/content/docs/zh-cn/opencode-server.mdx
@@ -60,8 +60,24 @@ openchamber startup disable
OPENCHAMBER_UI_PASSWORD='secret' openchamber startup enable
```
+如果要在登录时启动一个供桌面或移动应用使用的 headless 服务器，请加上 `--api-only` 和可访问的 host：
+
+```bash
+openchamber startup enable --port 3000 --api-only --host 0.0.0.0 --ui-password secret
+```
+
`startup enable` 会把当前环境快照保存到服务中，让启动行为更接近你在同一个 shell 中手动运行 `openchamber`。这会保留提供商 token、`PATH`、SSH agent 设置以及其他 CLI auth/config 环境变量。如果你想要最小化的服务环境，请使用 `--no-env-snapshot`。
+启动服务会记住 `--port`、`--host`、`--ui-password` 和 `--api-only`。CLI restart 和更新期间的 restart 会复用这些已保存设置。
+
+要为另一个 OpenChamber 应用创建连接链接，请使用：
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+运行 `openchamber connect-url --help` 可查看所有链接选项，包括 `--name`、`--lan`、`--server`、`--api-only`、`--ui-password` 和 `--qr`。
+
你仍然可以独立管理这个运行中服务的隧道：
```bash
diff --git a/packages/docs/content/docs/zh-cn/remote-instances.mdx b/packages/docs/content/docs/zh-cn/remote-instances.mdx
index df58a177..cdc49ba8 100644
--- a/packages/docs/content/docs/zh-cn/remote-instances.mdx
+++ b/packages/docs/content/docs/zh-cn/remote-instances.mdx
@@ -24,6 +24,18 @@ OpenChamber 会引导你完成各个步骤 — 检查连接、设置远程、启
你来决定是保存 SSH 和 UI 密码，还是每次都输入它们。如果连接断开，OpenChamber 会报告哪一步失败了，以便你修复它 — 参阅 [远程访问](/zh-cn/troubleshooting/remote-access/)。
+## 直接连接链接
+
+如果远程机器已经在运行 OpenChamber，请在那台机器上创建连接链接，然后在 **Settings → Remote Instances → Server links** 中导入：
+
+```bash
+openchamber connect-url --port 3000 --server http://your-host:3000 --qr
+```
+
+如果该端口上没有服务器，`connect-url` 会先启动服务器。使用 `--api-only` 可启动 headless 服务器，`--lan` 可在启动时绑定到 LAN，`--ui-password` 可保护浏览器访问，`--name` 可为保存的连接命名。
+
+生成的链接包含 OpenChamber 应用使用的 client token。这个 token 独立于浏览器 UI 密码，并会在服务器重启后继续有效，直到你撤销或删除它。
+
## 相关内容
- [OpenCode Server](/zh-cn/opencode-server/) — 在网页端或 VS Code 中连接到远程服务器
diff --git a/packages/docs/content/docs/zh-cn/tunnels.mdx b/packages/docs/content/docs/zh-cn/tunnels.mdx
index aa4a416d..7f8a7e53 100644
--- a/packages/docs/content/docs/zh-cn/tunnels.mdx
+++ b/packages/docs/content/docs/zh-cn/tunnels.mdx
@@ -30,6 +30,8 @@ ngrok config add-authtoken
openchamber
```
+如果跳过这一步，`openchamber tunnel start` 可以自动启动 CLI 服务器。自动启动时可以传入服务器选项，例如 `--port`、`--host`、`--lan`、`--ui-password` 和 `--api-only`。
+
2. 启动 Cloudflare 隧道：
```bash
diff --git a/packages/electron/main.mjs b/packages/electron/main.mjs
index 7d74f682..00630bb1 100644
--- a/packages/electron/main.mjs
+++ b/packages/electron/main.mjs
@@ -1,4 +1,4 @@
-import { app, BrowserWindow, dialog, ipcMain, Menu, nativeTheme, Notification, powerMonitor, screen, session, shell, webContents } from 'electron';
+import { app, BrowserWindow, dialog, ipcMain, Menu, nativeTheme, net as electronNet, Notification, powerMonitor, protocol, screen, session, shell, webContents } from 'electron';
import contextMenu from 'electron-context-menu';
import log from 'electron-log/main.js';
import dgram from 'node:dgram';
@@ -7,7 +7,7 @@ import fsp from 'node:fs/promises';
import os from 'node:os';
import path from 'node:path';
import { execFile, spawn, spawnSync } from 'node:child_process';
-import { fileURLToPath } from 'node:url';
+import { fileURLToPath, pathToFileURL } from 'node:url';
import { promisify } from 'node:util';
import updaterPkg from 'electron-updater';
import { ElectronSshManager } from './ssh-manager.mjs';
@@ -19,6 +19,7 @@ const __dirname = path.dirname(__filename);
const isDev = process.env.OPENCHAMBER_ELECTRON_DEV === '1' || !app.isPackaged;
const DEEP_LINK_PROTOCOL = 'openchamber';
+const UI_PROTOCOL = 'openchamber-ui';
const PACKAGED_APP_USER_MODEL_ID = 'dev.openchamber.desktop';
const DEV_APP_USER_MODEL_ID = 'dev.openchamber.desktop.dev';
const APP_USER_MODEL_ID = app.isPackaged ? PACKAGED_APP_USER_MODEL_ID : DEV_APP_USER_MODEL_ID;
@@ -50,6 +51,18 @@ if (isDev) {
app.setAppUserModelId(APP_USER_MODEL_ID);
app.commandLine.appendSwitch('proxy-bypass-list', '<-loopback>');
+protocol.registerSchemesAsPrivileged([
+ {
+ scheme: UI_PROTOCOL,
+ privileges: {
+ standard: true,
+ secure: true,
+ supportFetchAPI: true,
+ corsEnabled: true,
+ },
+ },
+]);
+
if (!app.requestSingleInstanceLock()) {
app.exit(0);
process.exit(0);
@@ -123,6 +136,8 @@ const APP_METADATA = readAppMetadata();
const APP_VERSION = APP_METADATA.version;
const DEFAULT_DESKTOP_PORT = 57123;
+const LOOPBACK_BIND_HOST = '127.0.0.1';
+const LAN_BIND_HOST = '0.0.0.0';
const MIN_WINDOW_WIDTH = 800;
const MIN_WINDOW_HEIGHT = 520;
const MIN_RESTORE_WINDOW_WIDTH = 900;
@@ -133,6 +148,8 @@ const MINI_CHAT_MIN_WINDOW_WIDTH = 360;
const MINI_CHAT_MIN_WINDOW_HEIGHT = 480;
const MAX_CAPTURE_PAGE_RECT_AREA = 4_000_000;
const LOCAL_HOST_ID = 'local';
+const LOCAL_DESKTOP_CLIENT_KIND = 'desktop-local';
+const LOCAL_DESKTOP_CLIENT_DEDUPE_KEY = 'desktop-local';
const ENV_OVERRIDE_HOST_ID = '__env';
const CHANGELOG_URL = 'https://raw.githubusercontent.com/openchamber/openchamber/main/CHANGELOG.md';
const UPDATE_METADATA_URL = 'https://github.com/openchamber/openchamber/releases/latest/download/latest.json';
@@ -148,6 +165,8 @@ const state = {
serverHandle: null,
sidecarUrl: null,
localOrigin: null,
+ apiBaseUrl: null,
+ clientToken: null,
bootOutcome: null,
initScript: null,
mainWindow: null,
@@ -399,6 +418,28 @@ const normalizeHostUrl = (raw) => {
};
const sanitizeHostUrlForStorage = (raw) => normalizeHostUrl(raw);
+const sanitizeClientTokenForStorage = (raw) => {
+ const token = typeof raw === 'string' ? raw.trim() : '';
+ return token.length > 0 ? token : null;
+};
+
+const sameOrigin = (left, right) => {
+ if (!left || !right) return false;
+ try {
+ return new URL(left).origin === new URL(right).origin;
+ } catch {
+ return false;
+ }
+};
+
+const readDesktopLocalClientToken = () => {
+ return sanitizeClientTokenForStorage(readSettingsRoot().desktopLocalClientToken) || '';
+};
+
+const isLocalRuntimeUrl = (targetUrl) => {
+ const localUrl = state.sidecarUrl || state.localOrigin || '';
+ return Boolean(localUrl && sameOrigin(targetUrl, localUrl));
+};
const readDesktopHostsConfig = () => {
const root = readSettingsRoot();
@@ -408,8 +449,10 @@ const readDesktopHostsConfig = () => {
const id = typeof entry?.id === 'string' ? entry.id.trim() : '';
const url = sanitizeHostUrlForStorage(entry?.url);
if (!id || id === LOCAL_HOST_ID || !url) return null;
+ const apiUrl = sanitizeHostUrlForStorage(entry?.apiUrl) || url;
+ const clientToken = sanitizeClientTokenForStorage(entry?.clientToken);
const label = typeof entry?.label === 'string' && entry.label.trim() ? entry.label.trim() : url;
- return { id, label, url };
+ return { id, label, url, apiUrl, ...(clientToken ? { clientToken } : {}) };
})
.filter(Boolean);
@@ -430,10 +473,14 @@ const writeDesktopHostsConfig = async (config) => {
const id = typeof entry?.id === 'string' ? entry.id.trim() : '';
const url = sanitizeHostUrlForStorage(entry?.url);
if (!id || id === LOCAL_HOST_ID || !url) return null;
+ const apiUrl = sanitizeHostUrlForStorage(entry?.apiUrl) || url;
+ const clientToken = sanitizeClientTokenForStorage(entry?.clientToken);
return {
id,
label: typeof entry?.label === 'string' && entry.label.trim() ? entry.label.trim() : url,
url,
+ apiUrl,
+ ...(clientToken ? { clientToken } : {}),
};
})
.filter(Boolean)
@@ -444,6 +491,14 @@ const writeDesktopHostsConfig = async (config) => {
if (typeof config?.initialHostChoiceCompleted === 'boolean') {
root.desktopInitialHostChoiceCompleted = config.initialHostChoiceCompleted;
}
+ if (Object.prototype.hasOwnProperty.call(config || {}, 'localClientToken')) {
+ const localClientToken = sanitizeClientTokenForStorage(config.localClientToken);
+ if (localClientToken) {
+ root.desktopLocalClientToken = localClientToken;
+ } else {
+ delete root.desktopLocalClientToken;
+ }
+ }
});
};
@@ -530,18 +585,72 @@ const buildHealthUrl = (url) => {
}
};
-const probeHostWithTimeout = async (url, timeoutMs) => {
- const healthUrl = buildHealthUrl(url);
- if (!healthUrl) {
+const buildVersionUrl = (url) => {
+ try {
+ const parsed = new URL(url);
+ parsed.pathname = `${parsed.pathname.replace(/\/$/, '') || ''}/api/version`;
+ return parsed.toString();
+ } catch {
+ return null;
+ }
+};
+
+const classifyVersionPayload = (payload) => {
+ const compatibility = payload?.compatibility;
+ if (!payload || payload.status !== 'ok' || !compatibility || typeof compatibility !== 'object') {
+ return 'wrong-service';
+ }
+
+ if (!Array.isArray(compatibility.capabilities) || !compatibility.capabilities.includes('api.runtime-url.v1')) {
+ return 'incompatible';
+ }
+
+ if (compatibility.apiVersion !== 1 || compatibility.minClientApiVersion > 1) {
+ return 'update-recommended';
+ }
+
+ return 'ok';
+};
+
+const fetchVersionPayload = async (versionUrl, { headers, timeoutMs }) => {
+ const timeoutSignal = AbortSignal.timeout(timeoutMs);
+ try {
+ return await fetch(versionUrl, { signal: timeoutSignal, headers });
+ } catch (error) {
+ if (timeoutSignal.aborted) {
+ throw error;
+ }
+ return await Promise.race([
+ electronNet.fetch(versionUrl, { headers }),
+ new Promise((_, reject) => setTimeout(() => reject(error), timeoutMs)),
+ ]);
+ }
+};
+
+const probeHostWithTimeout = async (url, timeoutMs, clientToken = '') => {
+ const versionUrl = buildVersionUrl(url);
+ if (!versionUrl) {
throw new Error('Invalid URL');
}
const started = Date.now();
try {
- const response = await fetch(healthUrl, { signal: AbortSignal.timeout(timeoutMs) });
+ const headers = { Accept: 'application/json' };
+ const token = typeof clientToken === 'string' ? clientToken.trim() : '';
+ if (token) {
+ headers.Authorization = `Bearer ${token}`;
+ }
+ const response = await fetchVersionPayload(versionUrl, { headers, timeoutMs });
const status = response.status;
+ if (status === 401 || status === 403) {
+ return { status: 'auth', latencyMs: Date.now() - started };
+ }
+ if (status < 200 || status >= 300) {
+ return { status: 'unreachable', latencyMs: Date.now() - started };
+ }
+ const payload = await response.json().catch(() => null);
return {
- status: status >= 200 && status < 300 ? 'ok' : (status === 401 || status === 403 ? 'auth' : 'unreachable'),
+ status: classifyVersionPayload(payload),
latencyMs: Date.now() - started,
};
} catch {
@@ -549,6 +658,22 @@ const probeHostWithTimeout = async (url, timeoutMs) => {
}
};
+const resolveStoredClientTokenForUrl = (targetUrl, config = readDesktopHostsConfig()) => {
+ const normalizedTarget = normalizeHostUrl(targetUrl);
+ if (!normalizedTarget) return '';
+ if (isLocalRuntimeUrl(normalizedTarget)) {
+ return readDesktopLocalClientToken();
+ }
+ for (const host of config.hosts || []) {
+ const hostUrl = normalizeHostUrl(host?.url || '');
+ const apiUrl = normalizeHostUrl(host?.apiUrl || host?.url || '');
+ if (normalizedTarget === hostUrl || normalizedTarget === apiUrl) {
+ return sanitizeClientTokenForStorage(host?.clientToken);
+ }
+ }
+ return '';
+};
+
const waitForHealth = async (url, timeoutMs = 20_000, initialPollMs = 250, maxPollMs = 2000) => {
const deadline = Date.now() + timeoutMs;
let pollMs = initialPollMs;
@@ -566,11 +691,11 @@ const waitForHealth = async (url, timeoutMs = 20_000, initialPollMs = 250, maxPo
return false;
};
-const pickUnusedPort = async () => {
+const pickUnusedPort = async (host = '127.0.0.1') => {
const net = await import('node:net');
return await new Promise((resolve, reject) => {
const server = net.createServer();
- server.listen(0, '127.0.0.1', () => {
+ server.listen(0, host, () => {
const address = server.address();
const port = typeof address === 'object' && address ? address.port : 0;
server.close(() => resolve(port));
@@ -579,7 +704,7 @@ const pickUnusedPort = async () => {
});
};
-const isPortFree = async (port) => {
+const isPortFree = async (port, host = '127.0.0.1') => {
if (!Number.isFinite(port) || port <= 0) return false;
const net = await import('node:net');
return await new Promise((resolve) => {
@@ -589,7 +714,7 @@ const isPortFree = async (port) => {
resolve(value);
};
test.once('error', () => done(false));
- test.listen(port, '127.0.0.1', () => done(true));
+ test.listen(port, host, () => done(true));
});
};
@@ -636,6 +761,57 @@ const buildLocalUrl = (port) => `http://127.0.0.1:${port}`;
const resourceRoot = () => isDev ? path.join(__dirname, 'resources') : process.resourcesPath;
const resolveWebDistDir = () => path.join(resourceRoot(), 'web-dist');
+const shouldUsePackagedUi = () => {
+ if (process.env.OPENCHAMBER_ELECTRON_LOAD_SERVER_UI === '1') return false;
+ if (process.env.OPENCHAMBER_ELECTRON_USE_BUNDLED_UI === '1') return true;
+ return app.isPackaged;
+};
+const packagedUiOrigin = () => `${UI_PROTOCOL}://app`;
+const buildPackagedUiUrl = (pathname = '/index.html') => new URL(pathname, `${packagedUiOrigin()}/`).toString();
+
+const injectRuntimeConfigIntoHtml = (html) => {
+ const apiBaseUrl = state.apiBaseUrl || state.sidecarUrl || '';
+ const localOrigin = state.localOrigin || state.sidecarUrl || '';
+ const initScript = ``;
+ if (html.includes('')) return html.replace('', `${initScript}`);
+ if (html.includes('')) return html.replace('', `${initScript}`);
+ return `${initScript}${html}`;
+};
+
+const registerPackagedUiProtocol = () => {
+ if (!shouldUsePackagedUi()) return;
+ protocol.handle(UI_PROTOCOL, async (request) => {
+ const distPath = resolveWebDistDir();
+ let requestedPath = '/index.html';
+ try {
+ const url = new URL(request.url);
+ requestedPath = decodeURIComponent(url.pathname || '/index.html');
+ } catch {
+ requestedPath = '/index.html';
+ }
+ const normalized = path.normalize(requestedPath).replace(/^([/\\])+/, '');
+ const candidate = path.join(distPath, normalized || 'index.html');
+ const relative = path.relative(distPath, candidate);
+ const isInsideDist = relative && !relative.startsWith('..') && !path.isAbsolute(relative);
+ const filePath = isInsideDist ? candidate : path.join(distPath, 'index.html');
+ try {
+ const info = await fsp.stat(filePath);
+ if (info.isFile()) {
+ if (filePath.endsWith('.html')) {
+ const html = await fsp.readFile(filePath, 'utf8');
+ const body = injectRuntimeConfigIntoHtml(html);
+ return new Response(body, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+ }
+ return electronNet.fetch(pathToFileURL(filePath).toString());
+ }
+ } catch {
+ }
+ const indexPath = path.join(distPath, 'index.html');
+ const html = await fsp.readFile(indexPath, 'utf8');
+ const body = injectRuntimeConfigIntoHtml(html);
+ return new Response(body, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+ });
+};
const normalizeNotificationInput = (raw) => {
if (!raw || typeof raw !== 'object') return {};
@@ -693,6 +869,9 @@ const maybeShowNativeNotification = (rawInput) => {
const sessionId = typeof payload.sessionId === 'string' && payload.sessionId.trim()
? payload.sessionId.trim()
: null;
+ const directory = typeof payload.directory === 'string' && payload.directory.trim()
+ ? payload.directory.trim()
+ : null;
const notification = new Notification({
title,
@@ -707,7 +886,7 @@ const maybeShowNativeNotification = (rawInput) => {
notification.on('click', () => {
focusForegroundWindow();
if (sessionId) {
- emitToAllWindows('openchamber:open-session', { sessionId });
+ emitToAllWindows('openchamber:open-session', { sessionId, directory });
}
release();
});
@@ -844,7 +1023,7 @@ const spawnLocalServer = async () => {
// so phones/tablets on the same Wi-Fi can reach the app. UI shows a clear
// warning and persists the flag via /api/config/settings.
const lanAccessEnabled = settings.desktopLanAccessEnabled === true;
- const bindHost = lanAccessEnabled ? '0.0.0.0' : '127.0.0.1';
+ const bindHost = lanAccessEnabled ? LAN_BIND_HOST : LOOPBACK_BIND_HOST;
const desktopUiPassword = typeof settings.desktopUiPassword === 'string' ? settings.desktopUiPassword.trim() : '';
// Probe before starting the server — main() in the server module sets up a
@@ -853,13 +1032,13 @@ const spawnLocalServer = async () => {
const candidates = [storedPort, DEFAULT_DESKTOP_PORT].filter((v) => Number.isFinite(v) && v > 0);
let chosenPort = 0;
for (const candidate of candidates) {
- if (await isPortFree(candidate)) {
+ if (await isPortFree(candidate, bindHost)) {
chosenPort = candidate;
break;
}
}
if (chosenPort === 0) {
- chosenPort = await pickUnusedPort();
+ chosenPort = await pickUnusedPort(bindHost);
}
// The server module reads ENV_DESKTOP_NOTIFY / OPENCHAMBER_DIST_DIR /
@@ -887,6 +1066,7 @@ const spawnLocalServer = async () => {
uiPassword: desktopUiPassword || null,
attachSignals: false,
exitOnShutdown: false,
+ apiOnly: shouldUsePackagedUi() && !lanAccessEnabled,
onDesktopNotification: (payload) => maybeShowNativeNotification(payload),
getIsWindowFocused: isAnyWindowFocused,
});
@@ -928,21 +1108,30 @@ const macosMajorVersion = () => {
return major === 10 ? minor : major;
};
-const buildInitScript = (localOrigin, bootOutcome) => {
+const buildInitScript = (localOrigin, bootOutcome, apiBaseUrl = '', clientToken = '') => {
const home = JSON.stringify(os.homedir() || '');
const local = JSON.stringify(localOrigin || '');
+ const apiBase = JSON.stringify(apiBaseUrl || '');
+ const token = JSON.stringify(clientToken || '');
+ const packagedOrigin = JSON.stringify(packagedUiOrigin());
const macVersion = macosMajorVersion();
const outcome = JSON.stringify(bootOutcome ?? null);
return [
'(function(){',
- `try{window.__OPENCHAMBER_HOME__=${home};window.__OPENCHAMBER_MACOS_MAJOR__=${macVersion};window.__OPENCHAMBER_LOCAL_ORIGIN__=${local};var __oc_bo=${outcome};if(__oc_bo){window.__OPENCHAMBER_DESKTOP_BOOT_OUTCOME__=__oc_bo;}}catch(_e){}`,
+ `try{var __oc_local=${local};var __oc_api=${apiBase};var __oc_packaged=${packagedOrigin};var __oc_origin=window.location&&window.location.origin||'';var __oc_is_packaged=__oc_origin===__oc_packaged;var __oc_is_local=__oc_local&&__oc_origin===new URL(__oc_local).origin;window.__OPENCHAMBER_MACOS_MAJOR__=${macVersion};window.__OPENCHAMBER_LOCAL_ORIGIN__=__oc_local;window.__OPENCHAMBER_API_BASE_URL__=__oc_api;if(__oc_is_local||__oc_is_packaged){window.__OPENCHAMBER_HOME__=${home};}if((__oc_is_local||__oc_is_packaged)&&${token}){window.__OPENCHAMBER_CLIENT_TOKEN__=${token};}var __oc_bo=${outcome};if(__oc_bo){window.__OPENCHAMBER_DESKTOP_BOOT_OUTCOME__=__oc_bo;}}catch(_e){}`,
'}())',
].join('');
};
const computeBootOutcome = ({ envTargetUrl, probe, config, localAvailable }) => {
if (envTargetUrl) {
- const status = probe && probe.status === 'unreachable' ? 'unreachable' : 'ok';
+ const status = probe?.status === 'unreachable'
+ ? 'unreachable'
+ : probe?.status === 'incompatible'
+ ? 'incompatible'
+ : probe?.status === 'wrong-service'
+ ? 'wrong-service'
+ : 'ok';
return { target: 'remote', status, hostId: ENV_OVERRIDE_HOST_ID, url: envTargetUrl };
}
@@ -962,8 +1151,14 @@ const computeBootOutcome = ({ envTargetUrl, probe, config, localAvailable }) =>
return { target: 'remote', status: 'missing', hostId: defaultId };
}
- const status = probe && probe.status === 'unreachable' ? 'unreachable' : 'ok';
- return { target: 'remote', status, hostId: host.id, url: host.url };
+ const status = probe?.status === 'unreachable'
+ ? 'unreachable'
+ : probe?.status === 'incompatible'
+ ? 'incompatible'
+ : probe?.status === 'wrong-service'
+ ? 'wrong-service'
+ : 'ok';
+ return { target: 'remote', status, hostId: host.id, url: host.apiUrl || host.url };
};
const buildStartupSplashHtml = () => {
@@ -1088,6 +1283,82 @@ const navigateWindow = async (browserWindow, url, { allowAbort = false } = {}) =
}
};
+const extractCookieHeader = (response) => {
+ const getSetCookie = typeof response.headers?.getSetCookie === 'function'
+ ? response.headers.getSetCookie.bind(response.headers)
+ : null;
+ const cookies = getSetCookie ? getSetCookie() : [];
+ const rawCookies = cookies.length > 0
+ ? cookies
+ : String(response.headers?.get?.('set-cookie') || '').split(/,(?=\s*[^;,=]+=[^;,]+)/);
+ return rawCookies
+ .map((cookie) => String(cookie || '').split(';')[0].trim())
+ .filter(Boolean)
+ .join('; ');
+};
+
+const loginRemoteAndIssueClientToken = async ({ url, password, trustDevice }) => {
+ const baseUrl = normalizeHostUrl(String(url || ''));
+ const candidatePassword = typeof password === 'string' ? password : '';
+ if (!baseUrl) throw new Error('Invalid URL');
+ if (!candidatePassword) throw new Error('Password is required');
+
+ const loginResponse = await fetch(new URL('/auth/session', `${baseUrl}/`).toString(), {
+ method: 'POST',
+ signal: AbortSignal.timeout(10_000),
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ password: candidatePassword,
+ trustDevice: trustDevice === true,
+ issueClientToken: true,
+ clientLabel: 'OpenChamber Desktop',
+ ...(isLocalRuntimeUrl(baseUrl) ? {
+ clientKind: LOCAL_DESKTOP_CLIENT_KIND,
+ dedupeKey: LOCAL_DESKTOP_CLIENT_DEDUPE_KEY,
+ } : {}),
+ }),
+ });
+ if (!loginResponse.ok) {
+ return { ok: false, status: loginResponse.status };
+ }
+
+ const loginPayload = await loginResponse.json().catch(() => null);
+ if (typeof loginPayload?.clientToken === 'string' && loginPayload.clientToken.trim()) {
+ return { ok: true, token: loginPayload.clientToken.trim() };
+ }
+
+ const cookie = extractCookieHeader(loginResponse);
+ if (!cookie) {
+ return { ok: false, status: 401 };
+ }
+
+ const tokenResponse = await fetch(new URL('/api/client-auth/clients', `${baseUrl}/`).toString(), {
+ method: 'POST',
+ signal: AbortSignal.timeout(10_000),
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ Cookie: cookie,
+ },
+ body: JSON.stringify({
+ label: 'OpenChamber Desktop',
+ ...(isLocalRuntimeUrl(baseUrl) ? {
+ clientKind: LOCAL_DESKTOP_CLIENT_KIND,
+ dedupeKey: LOCAL_DESKTOP_CLIENT_DEDUPE_KEY,
+ } : {}),
+ }),
+ });
+ if (!tokenResponse.ok) {
+ return { ok: false, status: tokenResponse.status };
+ }
+ const tokenPayload = await tokenResponse.json().catch(() => null);
+ const token = typeof tokenPayload?.token === 'string' ? tokenPayload.token.trim() : '';
+ return token ? { ok: true, token } : { ok: false, status: 500 };
+};
+
const emitToWindow = (browserWindow, event, detail) => {
if (!browserWindow || browserWindow.isDestroyed()) return;
browserWindow.webContents.send('openchamber:emit', { event, detail });
@@ -1123,41 +1394,144 @@ const parseDeepLink = (raw) => {
const value = segments.length > 0
? decodeURIComponent(segments.join('/'))
: '';
- return { type, value };
+ return { type, value, raw: trimmed };
} catch {
return null;
}
};
+const parseConnectDeepLinkPayload = (raw) => {
+ if (typeof raw !== 'string') return null;
+ try {
+ const url = new URL(raw.trim());
+ if (url.protocol !== `${DEEP_LINK_PROTOCOL}:` || url.hostname !== 'connect') return null;
+ const version = url.searchParams.get('v');
+ const serverUrl = normalizeHostUrl(url.searchParams.get('server') || '');
+ const token = sanitizeClientTokenForStorage(url.searchParams.get('token') || '');
+ const label = typeof url.searchParams.get('label') === 'string'
+ ? url.searchParams.get('label').trim()
+ : '';
+ if (version !== '1' || !serverUrl || !token) return null;
+ return { serverUrl, token, label: label || serverUrl };
+ } catch {
+ return null;
+ }
+};
+
+const importConnectDeepLink = async (payload) => {
+ if (!payload?.serverUrl || !payload?.token) return null;
+ const config = readDesktopHostsConfig();
+ const existing = config.hosts.find((host) => {
+ const hostUrl = normalizeHostUrl(host?.url || '');
+ const apiUrl = normalizeHostUrl(host?.apiUrl || host?.url || '');
+ return payload.serverUrl === hostUrl || payload.serverUrl === apiUrl;
+ });
+
+ const id = existing?.id || `host-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+ const importedHost = {
+ ...(existing || {}),
+ id,
+ label: payload.label || existing?.label || payload.serverUrl,
+ url: payload.serverUrl,
+ apiUrl: payload.serverUrl,
+ clientToken: payload.token,
+ };
+ const hosts = existing
+ ? config.hosts.map((host) => (host.id === existing.id ? importedHost : host))
+ : [importedHost, ...config.hosts];
+ await writeDesktopHostsConfig({
+ ...config,
+ hosts,
+ defaultHostId: config.defaultHostId || id,
+ initialHostChoiceCompleted: true,
+ });
+ return id;
+};
+
const switchToHostById = async (rawId) => {
const id = typeof rawId === 'string' ? rawId.trim() : '';
if (!id) return;
const config = readDesktopHostsConfig();
let targetUrl = null;
+ let apiBaseUrl = null;
+ let clientToken = '';
if (id === LOCAL_HOST_ID) {
- targetUrl = state.sidecarUrl || state.localOrigin;
+ targetUrl = shouldUsePackagedUi() ? buildPackagedUiUrl('/index.html') : (state.sidecarUrl || state.localOrigin);
+ apiBaseUrl = state.sidecarUrl;
+ clientToken = readDesktopLocalClientToken();
} else {
const host = config.hosts.find((entry) => entry.id === id);
if (!host) {
log.warn('[electron] deep-link host not found:', id);
return;
}
- targetUrl = host.url;
+ targetUrl = shouldUsePackagedUi() ? buildPackagedUiUrl('/index.html') : host.url;
+ apiBaseUrl = host.apiUrl || host.url;
+ clientToken = host.clientToken || '';
}
- if (!targetUrl) {
+ if (!targetUrl || !apiBaseUrl) {
log.warn('[electron] deep-link host has no target URL:', id);
return;
}
const bootOutcome = id === LOCAL_HOST_ID
? { target: 'local', status: 'ok' }
- : { target: 'remote', status: 'ok', hostId: id, url: targetUrl };
+ : { target: 'remote', status: 'ok', hostId: id, url: apiBaseUrl };
log.info('[electron] switching to host', { id, bootOutcome });
- await activateMainWindow(targetUrl, state.localOrigin, bootOutcome);
+ await activateMainWindow(targetUrl, state.localOrigin, bootOutcome, { apiBaseUrl, clientToken });
+};
+
+const confirmConnectDeepLink = async (payload) => {
+ // A connect deep-link can be triggered from a browser/email/chat with no
+ // in-app interaction. Importing it stores a client token and points all of
+ // this app's API traffic at the given server, so require explicit consent
+ // BEFORE writing anything to the hosts config. Never surface the token.
+ const visible = BrowserWindow.getAllWindows().find((window) => !window.isDestroyed() && window.isVisible());
+ if (visible) {
+ visible.show();
+ visible.focus();
+ }
+ const options = {
+ type: 'warning',
+ title: 'Connect to OpenChamber server?',
+ message: `Connect to "${payload.label}"?`,
+ detail:
+ `This will add ${payload.serverUrl} as a remote instance and route this app's activity ` +
+ 'through it. Only continue if you trust this server and started the connection yourself.',
+ buttons: ['Connect', 'Cancel'],
+ defaultId: 1,
+ cancelId: 1,
+ };
+ try {
+ const result = visible
+ ? await dialog.showMessageBox(visible, options)
+ : await dialog.showMessageBox(options);
+ return result.response === 0;
+ } catch (error) {
+ log.warn('[electron] connect deep-link confirmation failed:', error);
+ return false;
+ }
};
const dispatchDeepLink = (link) => {
if (!link) return;
log.info('[electron] dispatching deep-link', { type: link.type, valueLen: link.value?.length || 0 });
+ if (link.type === 'connect') {
+ const payload = parseConnectDeepLinkPayload(link.raw);
+ if (!payload) {
+ log.warn('[electron] invalid connect deep-link payload');
+ return;
+ }
+ void confirmConnectDeepLink(payload).then((confirmed) => {
+ if (!confirmed) {
+ log.info('[electron] connect deep-link declined by user');
+ return;
+ }
+ return importConnectDeepLink(payload).then((id) => {
+ if (id) void switchToHostById(id);
+ });
+ });
+ return;
+ }
if (link.type === 'session' && link.value) {
emitToAllWindows('openchamber:open-session', { sessionId: link.value });
return;
@@ -1280,11 +1654,13 @@ const canUseTitleBarOverlay = (browserWindow) => (
!browserWindow.isDestroyed()
);
-const createBrowserWindow = ({ label, restoreGeometry, url }) => {
+const createBrowserWindow = ({ label, restoreGeometry, url, runtimeConfig = {} }) => {
const saved = restoreGeometry ? readWindowState() : null;
const useSaved = saved && typeof saved.width === 'number' && typeof saved.height === 'number';
const restoredBounds = useSaved ? clampWindowBoundsToVisibleWorkArea(saved) : null;
- const desktopLocalOrigin = state.localOrigin || '';
+ const desktopLocalOrigin = state.localOrigin || state.sidecarUrl || '';
+ const desktopApiBaseUrl = typeof runtimeConfig.apiBaseUrl === 'string' ? runtimeConfig.apiBaseUrl : (state.apiBaseUrl || '');
+ const desktopClientToken = typeof runtimeConfig.clientToken === 'string' ? runtimeConfig.clientToken : (state.clientToken || '');
const desktopHome = os.homedir() || '';
const desktopMacosMajor = String(macosMajorVersion());
const usesCustomTitleBar = process.platform === 'darwin' || process.platform === 'win32';
@@ -1314,6 +1690,8 @@ const createBrowserWindow = ({ label, restoreGeometry, url }) => {
webPreferences: {
additionalArguments: [
`--openchamber-local-origin=${desktopLocalOrigin}`,
+ `--openchamber-api-base-url=${desktopApiBaseUrl}`,
+ `--openchamber-client-token=${desktopClientToken}`,
`--openchamber-home=${desktopHome}`,
`--openchamber-macos-major=${desktopMacosMajor}`,
`--openchamber-boot-outcome=${JSON.stringify(state.bootOutcome || null)}`,
@@ -1333,6 +1711,8 @@ const createBrowserWindow = ({ label, restoreGeometry, url }) => {
const browserWindow = new BrowserWindow(options);
browserWindow.__ocLabel = label || nextWindowLabel();
+ browserWindow.__ocRuntimeConfig = { apiBaseUrl: desktopApiBaseUrl, clientToken: desktopClientToken };
+ browserWindow.__ocInitScript = buildInitScript(desktopLocalOrigin, state.bootOutcome, desktopApiBaseUrl, desktopClientToken);
browserWindow.__ocTitleBarOverlayEnabled = titleBarOverlayEnabled;
if (useSaved && saved.maximized) {
@@ -1421,16 +1801,20 @@ const createBrowserWindow = ({ label, restoreGeometry, url }) => {
const isAllowedNavigationUrl = (raw) => {
try {
const url = new URL(raw);
- if (url.protocol === 'file:' || url.protocol === 'about:' || url.protocol === 'devtools:') return true;
+ if (url.protocol === 'devtools:') return true;
if (url.protocol !== 'http:' && url.protocol !== 'https:') return false;
- const hostname = url.hostname;
- if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1') return true;
if (state.localOrigin) {
try {
if (new URL(state.localOrigin).origin === url.origin) return true;
} catch {
}
}
+ if (state.sidecarUrl) {
+ try {
+ if (new URL(state.sidecarUrl).origin === url.origin) return true;
+ } catch {
+ }
+ }
const hosts = readDesktopHostsConfig()?.hosts || [];
for (const entry of hosts) {
if (typeof entry?.url !== 'string') continue;
@@ -1465,8 +1849,9 @@ const createBrowserWindow = ({ label, restoreGeometry, url }) => {
});
browserWindow.webContents.on('dom-ready', () => {
- if (state.initScript) {
- void browserWindow.webContents.executeJavaScript(state.initScript).catch(() => {});
+ const initScript = browserWindow.__ocInitScript || state.initScript;
+ if (initScript) {
+ void browserWindow.webContents.executeJavaScript(initScript).catch(() => {});
}
});
@@ -1496,13 +1881,17 @@ const createBrowserWindow = ({ label, restoreGeometry, url }) => {
return browserWindow;
};
-const activateMainWindow = async (url, localOrigin, bootOutcome) => {
+const activateMainWindow = async (url, localOrigin, bootOutcome, runtimeConfig = {}) => {
state.localOrigin = localOrigin;
+ state.apiBaseUrl = typeof runtimeConfig.apiBaseUrl === 'string' ? runtimeConfig.apiBaseUrl : state.apiBaseUrl;
+ state.clientToken = typeof runtimeConfig.clientToken === 'string' ? runtimeConfig.clientToken : '';
state.bootOutcome = bootOutcome ?? null;
- state.initScript = buildInitScript(localOrigin, state.bootOutcome);
+ state.initScript = buildInitScript(localOrigin, state.bootOutcome, state.apiBaseUrl, state.clientToken);
const mainWindow = state.mainWindow;
if (mainWindow && !mainWindow.isDestroyed()) {
+ mainWindow.__ocRuntimeConfig = { apiBaseUrl: state.apiBaseUrl || '', clientToken: state.clientToken || '' };
+ mainWindow.__ocInitScript = state.initScript;
await navigateWindow(mainWindow, url, { allowAbort: true });
mainWindow.show();
mainWindow.focus();
@@ -1513,26 +1902,31 @@ const activateMainWindow = async (url, localOrigin, bootOutcome) => {
label: 'main',
restoreGeometry: true,
url,
+ runtimeConfig,
});
return state.mainWindow;
};
const openMainWindow = async () => {
if (!state.localOrigin) {
- const { initialUrl, localOrigin, bootOutcome } = await resolveInitialUrl();
- return activateMainWindow(initialUrl, localOrigin, bootOutcome);
+ const { initialUrl, localOrigin, bootOutcome, apiBaseUrl, clientToken } = await resolveInitialUrl();
+ return activateMainWindow(initialUrl, localOrigin, bootOutcome, { apiBaseUrl, clientToken });
}
const config = readDesktopHostsConfig();
- const localUiUrl = state.sidecarUrl || state.localOrigin;
+ const localUiUrl = shouldUsePackagedUi() ? buildPackagedUiUrl('/index.html') : (state.sidecarUrl || state.localOrigin);
const host = config.defaultHostId && config.defaultHostId !== LOCAL_HOST_ID
? config.hosts.find((entry) => entry.id === config.defaultHostId)
: null;
- const targetUrl = host?.url && !state.unreachableHosts.has(host.url) ? host.url : localUiUrl;
- return activateMainWindow(targetUrl, state.localOrigin, state.bootOutcome);
+ const apiBaseUrl = host?.apiUrl || host?.url || state.sidecarUrl || state.apiBaseUrl || '';
+ const clientToken = host?.clientToken || resolveStoredClientTokenForUrl(apiBaseUrl, config) || state.clientToken || '';
+ const targetUrl = host?.url && apiBaseUrl && !state.unreachableHosts.has(apiBaseUrl)
+ ? (shouldUsePackagedUi() ? buildPackagedUiUrl('/index.html') : host.url)
+ : localUiUrl;
+ return activateMainWindow(targetUrl, state.localOrigin, state.bootOutcome, { apiBaseUrl, clientToken });
};
-const createAdditionalWindow = async (url) => {
+const createAdditionalWindow = async (url, runtimeConfig = {}) => {
if (!state.localOrigin) {
return null;
}
@@ -1540,6 +1934,7 @@ const createAdditionalWindow = async (url) => {
label: nextWindowLabel(),
restoreGeometry: false,
url,
+ runtimeConfig,
});
return browserWindow;
};
@@ -1550,7 +1945,7 @@ const buildMiniChatUrl = ({ mode, sessionId, directory, projectId }) => {
throw new Error('Local UI is not available');
}
- const url = new URL('/mini-chat.html', base);
+ const url = new URL(shouldUsePackagedUi() ? buildPackagedUiUrl('/mini-chat.html') : '/mini-chat.html', base);
url.searchParams.set('mode', mode === 'session' ? 'session' : 'draft');
if (sessionId) url.searchParams.set('sessionId', sessionId);
if (directory) url.searchParams.set('directory', directory);
@@ -1558,19 +1953,44 @@ const buildMiniChatUrl = ({ mode, sessionId, directory, projectId }) => {
return url.toString();
};
-const createMiniChatWindow = async ({ mode, sessionId = '', directory = '', projectId = '' } = {}) => {
+const miniChatSessionWindowKey = (runtimeConfig, sessionId) => {
+ const runtimeKey = normalizeHostUrl(runtimeConfig?.apiBaseUrl || state.apiBaseUrl || state.localOrigin || state.sidecarUrl || '') || 'local';
+ return `${runtimeKey}\n${sessionId}`;
+};
+
+const getWindowRuntimeConfig = (browserWindow) => {
+ const fallback = {
+ apiBaseUrl: state.apiBaseUrl || state.localOrigin || state.sidecarUrl || '',
+ clientToken: state.clientToken || '',
+ };
+ if (!browserWindow || browserWindow.isDestroyed()) return fallback;
+ const config = browserWindow.__ocRuntimeConfig;
+ return {
+ apiBaseUrl: typeof config?.apiBaseUrl === 'string' ? config.apiBaseUrl : fallback.apiBaseUrl,
+ clientToken: typeof config?.clientToken === 'string' ? config.clientToken : fallback.clientToken,
+ };
+};
+
+const createMiniChatWindow = async ({ mode, sessionId = '', directory = '', projectId = '', runtimeConfig = {} } = {}) => {
+ const effectiveRuntimeConfig = {
+ apiBaseUrl: normalizeHostUrl(runtimeConfig.apiBaseUrl || state.apiBaseUrl || state.localOrigin || state.sidecarUrl || ''),
+ clientToken: sanitizeClientTokenForStorage(runtimeConfig.clientToken || state.clientToken || ''),
+ };
+ const sessionWindowKey = mode === 'session' && sessionId ? miniChatSessionWindowKey(effectiveRuntimeConfig, sessionId) : '';
if (mode === 'session' && sessionId) {
- const existing = state.miniChatWindowsBySession.get(sessionId);
+ const existing = state.miniChatWindowsBySession.get(sessionWindowKey);
if (existing && !existing.isDestroyed()) {
if (existing.isMinimized()) existing.restore();
existing.show();
existing.focus();
return existing;
}
- state.miniChatWindowsBySession.delete(sessionId);
+ state.miniChatWindowsBySession.delete(sessionWindowKey);
}
const desktopLocalOrigin = state.localOrigin || '';
+ const desktopApiBaseUrl = effectiveRuntimeConfig.apiBaseUrl || '';
+ const desktopClientToken = effectiveRuntimeConfig.clientToken || '';
const desktopHome = os.homedir() || '';
const desktopMacosMajor = String(macosMajorVersion());
const browserWindow = new BrowserWindow({
@@ -1587,6 +2007,8 @@ const createMiniChatWindow = async ({ mode, sessionId = '', directory = '', proj
webPreferences: {
additionalArguments: [
`--openchamber-local-origin=${desktopLocalOrigin}`,
+ `--openchamber-api-base-url=${desktopApiBaseUrl}`,
+ `--openchamber-client-token=${desktopClientToken}`,
`--openchamber-home=${desktopHome}`,
`--openchamber-macos-major=${desktopMacosMajor}`,
],
@@ -1600,12 +2022,14 @@ const createMiniChatWindow = async ({ mode, sessionId = '', directory = '', proj
},
});
browserWindow.__ocLabel = nextWindowLabel();
+ browserWindow.__ocRuntimeConfig = effectiveRuntimeConfig;
+ browserWindow.__ocInitScript = buildInitScript(desktopLocalOrigin, state.bootOutcome, desktopApiBaseUrl, desktopClientToken);
browserWindow.__ocMiniChat = true;
- browserWindow.__ocMiniChatSessionId = mode === 'session' ? sessionId : '';
+ browserWindow.__ocMiniChatSessionId = sessionWindowKey;
browserWindow.__ocPinned = false;
- if (mode === 'session' && sessionId) {
- state.miniChatWindowsBySession.set(sessionId, browserWindow);
+ if (sessionWindowKey) {
+ state.miniChatWindowsBySession.set(sessionWindowKey, browserWindow);
}
browserWindow.on('closed', () => {
@@ -1641,7 +2065,7 @@ const createMiniChatWindow = async ({ mode, sessionId = '', directory = '', proj
browserWindow.webContents.on('will-navigate', (event, url) => {
try {
const target = new URL(url);
- const local = new URL(state.localOrigin || state.sidecarUrl || '');
+ const local = new URL(shouldUsePackagedUi() ? packagedUiOrigin() : (state.localOrigin || state.sidecarUrl || ''));
if (target.origin === local.origin) return;
} catch {
}
@@ -1649,8 +2073,9 @@ const createMiniChatWindow = async ({ mode, sessionId = '', directory = '', proj
void shell.openExternal(url).catch(() => {});
});
browserWindow.webContents.on('dom-ready', () => {
- if (state.initScript) {
- void browserWindow.webContents.executeJavaScript(state.initScript).catch(() => {});
+ const initScript = browserWindow.__ocInitScript || state.initScript;
+ if (initScript) {
+ void browserWindow.webContents.executeJavaScript(initScript).catch(() => {});
}
});
@@ -1678,6 +2103,19 @@ const setMiniChatPinned = (browserWindow, pinned) => {
return { pinned: nextPinned };
};
+const resolveMiniChatRuntimeConfig = (browserWindow, args = {}) => {
+ const windowConfig = getWindowRuntimeConfig(browserWindow);
+ const argApiBaseUrl = typeof args.apiBaseUrl === 'string' ? args.apiBaseUrl : '';
+ const targetUrl = normalizeHostUrl(argApiBaseUrl || windowConfig.apiBaseUrl || state.apiBaseUrl || state.localOrigin || state.sidecarUrl || '');
+ const providedToken = sanitizeClientTokenForStorage(args.clientToken);
+ const storedToken = targetUrl ? resolveStoredClientTokenForUrl(targetUrl) : '';
+ const windowToken = targetUrl && sameOrigin(windowConfig.apiBaseUrl, targetUrl) ? windowConfig.clientToken : '';
+ return {
+ apiBaseUrl: targetUrl,
+ clientToken: providedToken || windowToken || storedToken || '',
+ };
+};
+
const resolveInitialUrl = async () => {
const hmrApiPort = process.env.OPENCHAMBER_HMR_API_PORT || '3901';
const hmrUiPort = process.env.OPENCHAMBER_HMR_UI_PORT || '5173';
@@ -1687,35 +2125,45 @@ const resolveInitialUrl = async () => {
? hmrApiUrl
: await spawnLocalServer();
- const localUiUrl = isDev && await waitForHealth(hmrUiUrl, 8_000, 100)
+ const localUiUrl = shouldUsePackagedUi()
+ ? buildPackagedUiUrl('/index.html')
+ : isDev && await waitForHealth(hmrUiUrl, 8_000, 100)
? hmrUiUrl
: localUrl;
state.sidecarUrl = localUrl;
const localAvailable = Boolean(localUrl);
- const localOrigin = new URL(localUiUrl).origin;
+ const localOrigin = new URL(localUrl).origin;
let initialUrl = localUiUrl;
+ let apiBaseUrl = localUrl;
+ let clientToken = readDesktopLocalClientToken();
let remoteProbe = null;
const envTarget = normalizeHostUrl(process.env.OPENCHAMBER_SERVER_URL || '');
const config = readDesktopHostsConfig();
if (envTarget) {
- initialUrl = envTarget;
+ apiBaseUrl = envTarget;
+ clientToken = '';
+ initialUrl = shouldUsePackagedUi() ? localUiUrl : envTarget;
} else if (config.defaultHostId && config.defaultHostId !== LOCAL_HOST_ID) {
const host = config.hosts.find((entry) => entry.id === config.defaultHostId);
if (host?.url) {
- initialUrl = host.url;
+ apiBaseUrl = host.apiUrl || host.url;
+ clientToken = host.clientToken || '';
+ initialUrl = shouldUsePackagedUi() ? localUiUrl : host.url;
}
}
- if (initialUrl !== localUiUrl) {
- remoteProbe = await probeHostWithTimeout(initialUrl, 2_000);
+ if (apiBaseUrl && apiBaseUrl !== localUrl) {
+ remoteProbe = await probeHostWithTimeout(apiBaseUrl, 2_000);
if (remoteProbe.status === 'unreachable') {
- remoteProbe = await probeHostWithTimeout(initialUrl, 10_000);
+ remoteProbe = await probeHostWithTimeout(apiBaseUrl, 10_000);
}
if (remoteProbe.status === 'unreachable') {
- state.unreachableHosts.add(initialUrl);
+ state.unreachableHosts.add(apiBaseUrl);
+ apiBaseUrl = localUrl;
+ clientToken = readDesktopLocalClientToken();
initialUrl = localUiUrl;
}
}
@@ -1727,7 +2175,7 @@ const resolveInitialUrl = async () => {
localAvailable,
});
- return { initialUrl, localOrigin, localUiUrl, bootOutcome };
+ return { initialUrl, localOrigin, localUiUrl, bootOutcome, apiBaseUrl, clientToken };
};
const compareSemver = (left, right) => {
@@ -2510,25 +2958,42 @@ const handleInvoke = async (browserWindow, command, args = {}) => {
}
case 'desktop_hosts_get':
- return readDesktopHostsConfig();
+ return {
+ ...readDesktopHostsConfig(),
+ localOrigin: state.localOrigin || state.sidecarUrl || null,
+ };
case 'desktop_hosts_set': {
- await writeDesktopHostsConfig(args.input || args.config || {});
+ const nextConfigInput = args.input || args.config || {};
+ await writeDesktopHostsConfig(nextConfigInput);
const updatedConfig = readDesktopHostsConfig();
const envTarget = normalizeHostUrl(process.env.OPENCHAMBER_SERVER_URL || '');
+ if (Object.prototype.hasOwnProperty.call(nextConfigInput, 'localClientToken') && isLocalRuntimeUrl(state.apiBaseUrl || state.sidecarUrl || state.localOrigin || '')) {
+ state.clientToken = readDesktopLocalClientToken();
+ }
state.bootOutcome = computeBootOutcome({
envTargetUrl: envTarget || null,
probe: null,
config: updatedConfig,
localAvailable: Boolean(state.sidecarUrl || state.localOrigin),
});
- state.initScript = buildInitScript(state.localOrigin, state.bootOutcome);
+ state.initScript = buildInitScript(state.localOrigin, state.bootOutcome, state.apiBaseUrl, state.clientToken);
log.info('[electron] hosts config updated, recomputed bootOutcome', state.bootOutcome);
return null;
}
+ case 'desktop_local_client_token_get':
+ return readDesktopLocalClientToken();
+
case 'desktop_host_probe':
- return probeHostWithTimeout(String(args.url || ''), 2_000);
+ return probeHostWithTimeout(String(args.url || ''), 2_000, String(args.clientToken || ''));
+
+ case 'desktop_remote_password_login':
+ return loginRemoteAndIssueClientToken({
+ url: args.url,
+ password: args.password,
+ trustDevice: args.trustDevice === true,
+ });
case 'desktop_set_window_theme': {
const mode = typeof args.themeMode === 'string' ? args.themeMode : '';
@@ -2704,15 +3169,24 @@ const handleInvoke = async (browserWindow, command, args = {}) => {
case 'desktop_new_window': {
const config = readDesktopHostsConfig();
- const localUiUrl = state.sidecarUrl || state.localOrigin;
+ const localUiUrl = shouldUsePackagedUi() ? buildPackagedUiUrl('/index.html') : (state.sidecarUrl || state.localOrigin);
let targetUrl = localUiUrl;
+ let runtimeConfig = {
+ apiBaseUrl: state.sidecarUrl || state.localOrigin || '',
+ clientToken: readDesktopLocalClientToken(),
+ };
if (config.defaultHostId && config.defaultHostId !== LOCAL_HOST_ID) {
const host = config.hosts.find((entry) => entry.id === config.defaultHostId);
- if (host?.url && !state.unreachableHosts.has(host.url)) {
- targetUrl = host.url;
+ const apiUrl = host?.apiUrl || host?.url;
+ if (host?.url && apiUrl && !state.unreachableHosts.has(apiUrl)) {
+ targetUrl = shouldUsePackagedUi() ? buildPackagedUiUrl('/index.html') : host.url;
+ runtimeConfig = {
+ apiBaseUrl: normalizeHostUrl(apiUrl),
+ clientToken: sanitizeClientTokenForStorage(host.clientToken),
+ };
}
}
- await createAdditionalWindow(targetUrl);
+ await createAdditionalWindow(targetUrl, runtimeConfig);
return null;
}
@@ -2721,7 +3195,15 @@ const handleInvoke = async (browserWindow, command, args = {}) => {
if (!targetUrl) {
throw new Error('Invalid URL');
}
- await createAdditionalWindow(targetUrl);
+ const config = readDesktopHostsConfig();
+ const providedToken = typeof args.clientToken === 'string' ? args.clientToken : '';
+ const clientToken = sanitizeClientTokenForStorage(providedToken) || resolveStoredClientTokenForUrl(targetUrl, config);
+ let windowUrl = targetUrl;
+ const runtimeConfig = { apiBaseUrl: targetUrl, clientToken };
+ if (shouldUsePackagedUi()) {
+ windowUrl = buildPackagedUiUrl('/index.html');
+ }
+ await createAdditionalWindow(windowUrl, runtimeConfig);
return null;
}
@@ -2729,14 +3211,14 @@ const handleInvoke = async (browserWindow, command, args = {}) => {
const sessionId = typeof args.sessionId === 'string' ? args.sessionId.trim() : '';
if (!sessionId) throw new Error('Session id is required');
const directory = typeof args.directory === 'string' ? args.directory.trim() : '';
- await createMiniChatWindow({ mode: 'session', sessionId, directory });
+ await createMiniChatWindow({ mode: 'session', sessionId, directory, runtimeConfig: resolveMiniChatRuntimeConfig(browserWindow, args) });
return null;
}
case 'desktop_open_draft_mini_chat_window': {
const directory = typeof args.directory === 'string' ? args.directory.trim() : '';
const projectId = typeof args.projectId === 'string' ? args.projectId.trim() : '';
- await createMiniChatWindow({ mode: 'draft', directory, projectId });
+ await createMiniChatWindow({ mode: 'draft', directory, projectId, runtimeConfig: resolveMiniChatRuntimeConfig(browserWindow, args) });
return null;
}
@@ -3101,11 +3583,9 @@ const isLocalSender = (webContents) => {
try {
const raw = typeof webContents?.getURL === 'function' ? webContents.getURL() : '';
if (!raw) return false;
- if (raw.startsWith('file://') || raw === 'about:blank') return true;
const url = new URL(raw);
+ if (url.protocol === `${UI_PROTOCOL}:` && url.hostname === 'app') return true;
if (url.protocol !== 'http:' && url.protocol !== 'https:') return false;
- const hostname = url.hostname;
- if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname === '::1') return true;
if (state.localOrigin) {
try {
const allowed = new URL(state.localOrigin);
@@ -3113,6 +3593,13 @@ const isLocalSender = (webContents) => {
} catch {
}
}
+ if (state.sidecarUrl) {
+ try {
+ const allowed = new URL(state.sidecarUrl);
+ if (allowed.origin === url.origin) return true;
+ } catch {
+ }
+ }
return false;
} catch {
return false;
@@ -3249,6 +3736,7 @@ app.whenReady().then(async () => {
loginItemSettings,
});
nativeTheme.themeSource = readThemeSource();
+ registerPackagedUiProtocol();
setupAutoUpdater();
if (process.platform === 'darwin') {
@@ -3284,8 +3772,8 @@ app.whenReady().then(async () => {
const initial = extractInitialDeepLinks();
if (initial.length > 0) handleDeepLinks(initial);
- const { initialUrl, localOrigin, bootOutcome } = await resolveInitialUrl();
- await activateMainWindow(initialUrl, localOrigin, bootOutcome);
+ const { initialUrl, localOrigin, bootOutcome, apiBaseUrl, clientToken } = await resolveInitialUrl();
+ await activateMainWindow(initialUrl, localOrigin, bootOutcome, { apiBaseUrl, clientToken });
// Notify renderer on OS wake-from-sleep so the SSE event pipeline can
// reconnect immediately instead of waiting for the heartbeat watchdog.
diff --git a/packages/electron/preload.mjs b/packages/electron/preload.mjs
index 9fb042f5..e4e32d48 100644
--- a/packages/electron/preload.mjs
+++ b/packages/electron/preload.mjs
@@ -12,6 +12,8 @@ const readArgValue = (name) => {
};
const localOrigin = readArgValue('--openchamber-local-origin');
+const apiBaseUrl = readArgValue('--openchamber-api-base-url');
+const clientToken = readArgValue('--openchamber-client-token');
const homeDirectory = readArgValue('--openchamber-home');
const macosMajorRaw = readArgValue('--openchamber-macos-major');
const macosMajor = Number.parseInt(macosMajorRaw, 10);
@@ -22,10 +24,9 @@ const macosMajor = Number.parseInt(macosMajorRaw, 10);
// Remote UIs still need it so isDesktopShell() returns true and the
// window renders with desktop affordances (DesktopHostSwitcher,
// title bar offsets, etc.). Expose unconditionally.
-// - __TAURI__ is the IPC channel to the main process. Remote pages must
-// not get it — otherwise any page loaded via DesktopHostSwitcher could
-// read local files, open apps, relaunch, etc. Expose only on local
-// pages (loopback / state.localOrigin / file:// for dev).
+// - __TAURI__ is the IPC channel to the main process. The compatibility
+// shim is exposed broadly, but privileged commands are gated in main.mjs.
+// Local-only globals below stay limited to packaged UI / exact localOrigin.
// Everything driven by localOrigin (home dir, macOS hints) also stays
// local-only since it leaks info about the Electron host machine.
const currentOrigin = (() => {
@@ -35,10 +36,9 @@ const currentOrigin = (() => {
return '';
}
})();
-const isLoopbackOrigin = /^https?:\/\/(localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/i.test(currentOrigin);
-const isLocalPage = currentOrigin === 'null'
- || isLoopbackOrigin
- || (localOrigin && currentOrigin === localOrigin);
+const isLocalPage = currentOrigin !== 'null'
+ && (currentOrigin === 'openchamber-ui://app'
+ || (localOrigin && currentOrigin === localOrigin));
// Remote pages need __OPENCHAMBER_LOCAL_ORIGIN__ so the HostSwitcher knows
// the URL of the Local entry (isDesktopLocalOriginActive() falls back to
@@ -49,6 +49,14 @@ if (localOrigin) {
contextBridge.exposeInMainWorld('__OPENCHAMBER_LOCAL_ORIGIN__', localOrigin);
}
+if (apiBaseUrl) {
+ contextBridge.exposeInMainWorld('__OPENCHAMBER_API_BASE_URL__', apiBaseUrl);
+}
+
+if (clientToken && isLocalPage) {
+ contextBridge.exposeInMainWorld('__OPENCHAMBER_CLIENT_TOKEN__', clientToken);
+}
+
// Home directory leaks the OS username — keep local-only. Remote pages
// operate on the REMOTE server's filesystem, local home is irrelevant
// (and would be misleading if consumed as a workspace hint).
diff --git a/packages/electron/scripts/electron-dev.mjs b/packages/electron/scripts/electron-dev.mjs
index 816a5a83..8269c31d 100644
--- a/packages/electron/scripts/electron-dev.mjs
+++ b/packages/electron/scripts/electron-dev.mjs
@@ -45,6 +45,25 @@ function spawnProcess(command, args, options = {}) {
});
}
+function runProcess(command, args, options = {}) {
+ return new Promise((resolve, reject) => {
+ const child = spawn(command, args, {
+ cwd: repoRoot,
+ env: { ...process.env, OPENCHAMBER_ELECTRON_DEV: '1' },
+ stdio: 'inherit',
+ ...options,
+ });
+ child.on('error', reject);
+ child.on('exit', (code, signal) => {
+ if (code === 0) {
+ resolve();
+ return;
+ }
+ reject(new Error(`${command} ${args.join(' ')} exited with code ${code ?? 'null'} signal ${signal ?? 'none'}`));
+ });
+ });
+}
+
function waitForExit(child, timeoutMs) {
return new Promise((resolve) => {
if (!child || child.exitCode !== null || child.signalCode !== null) {
@@ -159,23 +178,33 @@ async function stopChildTree(child) {
}
async function main() {
- const hmrApiPort = String(await findAvailablePort(preferredHmrApiPort));
- const hmrUiPort = String(await findAvailablePort(preferredHmrUiPort));
+ const useBundledUi = process.env.OPENCHAMBER_ELECTRON_USE_BUNDLED_UI === '1';
+ let devServer = null;
+ let hmrApiPort = '';
+ let hmrUiPort = '';
+
+ if (useBundledUi) {
+ await runProcess('bun', ['run', '--cwd', 'packages/electron', 'build:web-assets']);
+ } else {
+ hmrApiPort = String(await findAvailablePort(preferredHmrApiPort));
+ hmrUiPort = String(await findAvailablePort(preferredHmrUiPort));
+ devServer = spawnProcess('node', ['./scripts/dev-web-hmr.mjs'], {
+ env: {
+ ...process.env,
+ OPENCHAMBER_ELECTRON_DEV: '1',
+ OPENCHAMBER_HMR_UI_PORT: hmrUiPort,
+ OPENCHAMBER_HMR_API_PORT: hmrApiPort,
+ OPENCHAMBER_DISABLE_PWA_DEV: '1',
+ },
+ });
+ }
- const devServer = spawnProcess('node', ['./scripts/dev-web-hmr.mjs'], {
- env: {
- ...process.env,
- OPENCHAMBER_ELECTRON_DEV: '1',
- OPENCHAMBER_HMR_UI_PORT: hmrUiPort,
- OPENCHAMBER_HMR_API_PORT: hmrApiPort,
- OPENCHAMBER_DISABLE_PWA_DEV: '1',
- },
- });
const electron = spawnProcess('npx', ['electron', './main.mjs'], {
cwd: electronDir,
env: {
...process.env,
OPENCHAMBER_ELECTRON_DEV: '1',
+ ...(useBundledUi ? { OPENCHAMBER_ELECTRON_USE_BUNDLED_UI: '1' } : {}),
OPENCHAMBER_HMR_UI_PORT: hmrUiPort,
OPENCHAMBER_HMR_API_PORT: hmrApiPort,
OPENCHAMBER_DISABLE_PWA_DEV: '1',
@@ -200,9 +229,9 @@ async function main() {
void teardown(code ?? 1);
};
- devServer.on('exit', onChildExit('dev server'));
+ devServer?.on('exit', onChildExit('dev server'));
electron.on('exit', onChildExit('electron'));
- devServer.on('error', (error) => {
+ devServer?.on('error', (error) => {
console.error('[electron:dev] failed to start dev server:', error);
void teardown(1);
});
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 5347682a..a8981772 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -32,6 +32,9 @@ import { useSessionUIStore } from '@/sync/session-ui-store';
import { useDirectoryStore } from '@/stores/useDirectoryStore';
import { useProjectsStore } from '@/stores/useProjectsStore';
import { opencodeClient } from '@/lib/opencode/client';
+import { disposeTerminalInputTransport } from '@/lib/terminalApi';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+import { subscribeRuntimeEndpointChanged } from '@/lib/runtime-switch';
import { SyncProvider } from '@/sync/sync-context';
import { useSync } from '@/sync/use-sync';
import { ConfigUpdateOverlay } from '@/components/ui/ConfigUpdateOverlay';
@@ -51,6 +54,7 @@ import { useI18n } from '@/lib/i18n';
import { applyMobileKeyboardMode } from '@/lib/mobileKeyboardMode';
import { SyncAppEffects } from '@/apps/AppEffects';
import { useAppFontEffects } from '@/apps/useAppFontEffects';
+import { resetStreamingState } from '@/sync/streaming';
import { OpenCodeUpdateToast } from '@/components/update/OpenCodeUpdateToast';
// Lazy-loaded heavy views — loaded on demand to reduce initial bundle size.
@@ -215,6 +219,7 @@ function App({ apis }: AppProps) {
const [isEmbeddedVisible, setIsEmbeddedVisible] = React.useState(true);
const [initRetryExhausted, setInitRetryExhausted] = React.useState(false);
const [initRetryEpoch, setInitRetryEpoch] = React.useState(0);
+ const [runtimeEndpointEpoch, setRuntimeEndpointEpoch] = React.useState(0);
const [manualInitRetrying, setManualInitRetrying] = React.useState(false);
const wideChatLayoutEnabled = useUIStore((state) => state.wideChatLayoutEnabled);
const mobileKeyboardMode = useUIStore((state) => state.mobileKeyboardMode);
@@ -249,6 +254,30 @@ function App({ apis }: AppProps) {
setIsVSCodeRuntime(apis.runtime.isVSCode);
}, [apis.runtime.isVSCode]);
+ React.useEffect(() => {
+ return subscribeRuntimeEndpointChanged((detail) => {
+ useSessionUIStore.getState().prepareForRuntimeSwitch(detail.previousRuntimeKey);
+ useUIStore.getState().prepareForRuntimeSwitch(detail.previousRuntimeKey);
+ disposeTerminalInputTransport();
+ opencodeClient.reconnectToRuntimeBaseUrl();
+ useConfigStore.setState({
+ providers: [],
+ agents: [],
+ isConnected: false,
+ isInitialized: false,
+ connectionPhase: 'connecting',
+ lastDisconnectReason: null,
+ });
+ useProjectsStore.getState().resetForRuntimeSwitch();
+ useSessionUIStore.getState().restoreForRuntimeSwitch(detail.runtimeKey);
+ useUIStore.getState().restoreForRuntimeSwitch(detail.runtimeKey);
+ resetStreamingState();
+ setRuntimeEndpointEpoch((epoch) => epoch + 1);
+ setInitRetryExhausted(false);
+ setInitRetryEpoch((epoch) => epoch + 1);
+ });
+ }, []);
+
React.useEffect(() => {
document.documentElement.classList.toggle('wide-chat-layout', wideChatLayoutEnabled);
return () => {
@@ -337,7 +366,7 @@ function App({ apis }: AppProps) {
let cancelled = false;
const run = async () => {
- const res = await fetch('/health', { method: 'GET' }).catch(() => null);
+ const res = await runtimeFetch('/health', { method: 'GET' }).catch(() => null);
if (!res || !res.ok || cancelled) return;
const data = (await res.json().catch(() => null)) as null | {
planModeExperimentalEnabled?: unknown;
@@ -810,7 +839,7 @@ function App({ apis }: AppProps) {
if (embeddedSessionChat) {
return (
-
+
(null);
const addAttachedFile = useInputStore((state) => state.addAttachedFile);
const isMobile = useUIStore((state) => state.isMobile);
- const isVSCodeRuntime = useIsVSCodeRuntime();
+ const runtimeApis = useRuntimeAPIs();
+ const isVSCodeRuntime = runtimeApis.runtime.isVSCode;
const buttonSizeClass = isMobile ? 'h-9 w-9' : 'h-7 w-7';
const iconSizeClass = isMobile ? 'h-5 w-5' : 'h-[18px] w-[18px]';
@@ -47,8 +48,10 @@ export const FileAttachmentButton = memo(() => {
const handleVSCodePick = async () => {
try {
- const response = await fetch('/api/vscode/pick-files');
- const data = await response.json();
+ const data = (await runtimeApis.vscode?.pickFiles?.()) as {
+ files?: Array<{ name: string; mimeType?: string; dataUrl?: string }>;
+ skipped?: Array<{ name?: string; reason?: string }>;
+ } | undefined;
const picked = Array.isArray(data?.files) ? data.files : [];
const skipped = Array.isArray(data?.skipped) ? data.skipped : [];
@@ -449,7 +452,7 @@ export const ActiveEditorFileSuggestion = memo(() => {
const attachedFiles = useInputStore((s) => s.attachedFiles)
const addVSCodeFileAttachment = useInputStore((s) => s.addVSCodeFileAttachment)
const addVSCodeSelectionAttachment = useInputStore((s) => s.addVSCodeSelectionAttachment)
- const isVSCodeRuntime = useIsVSCodeRuntime();
+ const isVSCodeRuntime = useRuntimeAPIs().runtime.isVSCode;
if (!isVSCodeRuntime || !activeEditorFile) return null;
diff --git a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
index 0dff058d..577995b0 100644
--- a/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
+++ b/packages/ui/src/components/chat/MarkdownRendererImpl.tsx
@@ -16,6 +16,7 @@ import { toast } from '@/components/ui';
import { Icon } from "@/components/icon/Icon";
import { copyTextToClipboard } from '@/lib/clipboard';
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
import { getExternalFaviconUrl, isExternalHttpUrl, isLoopbackHttpUrl, openExternalUrl } from '@/lib/url';
import { useOptionalThemeSystem } from '@/contexts/useThemeSystem';
@@ -1341,7 +1342,7 @@ const fileReferenceExists = (resolvedPath: string): Promise => {
const request = new Promise((resolve) => {
const run = () => {
activeFileReferenceStatCount += 1;
- void fetch(`/api/fs/stat?path=${encodeURIComponent(normalizedPath)}`, {
+ void runtimeFetch(`/api/fs/stat?path=${encodeURIComponent(normalizedPath)}`, {
method: 'GET',
cache: 'no-store',
})
diff --git a/packages/ui/src/components/chat/MessageList.tsx b/packages/ui/src/components/chat/MessageList.tsx
index 121f6910..e8762c55 100644
--- a/packages/ui/src/components/chat/MessageList.tsx
+++ b/packages/ui/src/components/chat/MessageList.tsx
@@ -391,7 +391,6 @@ const getNormalizedMessageForDisplay = (message: ChatMessageEntry): ChatMessageE
interface MessageListProps {
sessionKey: string;
- turnStart: number;
disableStaging?: boolean;
messages: ChatMessageEntry[];
sessionIsWorking?: boolean;
@@ -405,9 +404,7 @@ interface MessageListProps {
} | null;
onMessageContentChange: (reason?: ContentChangeReason) => void;
getAnimationHandlers: (messageId: string) => AnimationHandlers;
- hasMoreAbove: boolean;
isLoadingOlder: boolean;
- onLoadOlder: () => void;
scrollToBottom?: () => void;
scrollRef?: React.RefObject;
}
@@ -1101,7 +1098,6 @@ StreamingTailContent.displayName = 'StreamingTailContent';
const MessageList = React.forwardRef(({
sessionKey,
- turnStart,
disableStaging = false,
messages,
sessionIsWorking = false,
@@ -1110,9 +1106,7 @@ const MessageList = React.forwardRef(({
retryOverlay = null,
onMessageContentChange,
getAnimationHandlers,
- hasMoreAbove,
isLoadingOlder,
- onLoadOlder,
scrollToBottom,
scrollRef,
}, ref) => {
@@ -1128,7 +1122,6 @@ const MessageList = React.forwardRef(({
animatedIds: Set;
}>({ sessionKey: undefined, previousOrder: [], animatedIds: new Set() });
const stableGetAnimationHandlers = useStableEvent(getAnimationHandlers);
- const stableOnLoadOlder = useStableEvent(onLoadOlder);
const stableScrollToBottom = useStableEvent(() => {
scrollToBottom?.();
});
@@ -1675,24 +1668,6 @@ const MessageList = React.forwardRef(({
return (
@@ -853,7 +882,7 @@ function App({ apis }: AppProps) {
return (
-
+
diff --git a/packages/ui/src/apps/ElectronMiniChatApp.tsx b/packages/ui/src/apps/ElectronMiniChatApp.tsx
index 40bbc928..25232a2a 100644
--- a/packages/ui/src/apps/ElectronMiniChatApp.tsx
+++ b/packages/ui/src/apps/ElectronMiniChatApp.tsx
@@ -15,6 +15,7 @@ import { useProjectsStore } from '@/stores/useProjectsStore';
import { useGitStore } from '@/stores/useGitStore';
import { useSessionUIStore } from '@/sync/session-ui-store';
import { SyncProvider, useSessions } from '@/sync/sync-context';
+import { useSync } from '@/sync/use-sync';
import { SyncRuntimeEffects } from './AppEffects';
import { useAppFontEffects } from './useAppFontEffects';
import { useMiniChatKeyboardShortcuts } from '@/hooks/useMiniChatKeyboardShortcuts';
@@ -65,6 +66,7 @@ const MiniChatBootstrap: React.FC<{ config: MiniChatConfig }> = ({ config }) =>
const loadAgents = useConfigStore((state) => state.loadAgents);
const providersCount = useConfigStore((state) => state.providers.length);
const agentsCount = useConfigStore((state) => state.agents.length);
+ const sync = useSync();
React.useEffect(() => {
void initializeApp();
@@ -130,11 +132,14 @@ const MiniChatBootstrap: React.FC<{ config: MiniChatConfig }> = ({ config }) =>
return;
}
const session = sessions.find((entry) => entry.id === config.sessionId);
- if (!session) return;
+ if (!session) {
+ void sync.ensureSessionRenderable(config.sessionId);
+ return;
+ }
const directory = (session as { directory?: string | null }).directory ?? config.directory;
setCurrentSession(config.sessionId, directory);
sessionBootstrappedRef.current = true;
- }, [config, currentSessionId, sessions, setCurrentSession]);
+ }, [config, currentSessionId, sessions, setCurrentSession, sync]);
React.useEffect(() => {
if (config.mode !== 'draft' || draftOpen || currentSessionId) return;
diff --git a/packages/ui/src/apps/MobileApp.tsx b/packages/ui/src/apps/MobileApp.tsx
new file mode 100644
index 00000000..aa686406
--- /dev/null
+++ b/packages/ui/src/apps/MobileApp.tsx
@@ -0,0 +1,468 @@
+import React from 'react';
+import {
+ RiFileTextLine,
+ RiGitBranchLine,
+ RiMenuLine,
+ RiMore2Line,
+ RiSettings3Line,
+} from '@remixicon/react';
+
+import { ChatView } from '@/components/views/ChatView';
+import { SettingsView } from '@/components/views/SettingsView';
+import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
+import { RuntimeAPIProvider } from '@/contexts/RuntimeAPIProvider';
+import { registerRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { Toaster } from '@/components/ui/sonner';
+import { usePushVisibilityBeacon } from '@/hooks/usePushVisibilityBeacon';
+import { useRouter } from '@/hooks/useRouter';
+import { useWindowTitle } from '@/hooks/useWindowTitle';
+import { opencodeClient } from '@/lib/opencode/client';
+import type { RuntimeAPIs } from '@/lib/api/types';
+import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+import { cn } from '@/lib/utils';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useFeatureFlagsStore } from '@/stores/useFeatureFlagsStore';
+import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
+import { useGitStatus, useGitStore } from '@/stores/useGitStore';
+import { useProjectsStore } from '@/stores/useProjectsStore';
+import { listProjectWorktrees } from '@/lib/worktrees/worktreeManager';
+import type { WorktreeMetadata } from '@/types/worktree';
+import { useUIStore } from '@/stores/useUIStore';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { SyncProvider, useSession } from '@/sync/sync-context';
+
+import { SyncAppEffects } from './AppEffects';
+import { MobileChangesSurface } from './MobileChangesSurface';
+import { MobileFilesSurface } from './MobileFilesSurface';
+import { MobileSessionsSheet } from './MobileSessionsSheet';
+import { MobileSurfaceShell } from './MobileSurfaceShell';
+import { DedicatedMobileAppProvider, type MobileAppActions } from './mobileAppContext';
+import { useAppFontEffects } from './useAppFontEffects';
+
+const MOBILE_SETTINGS_PAGES = [
+ 'appearance',
+ 'chat',
+ 'notifications',
+ 'sessions',
+ 'git',
+ 'magic-prompts',
+ 'behavior',
+ 'mcp',
+ 'providers',
+ 'usage',
+ 'voice',
+] as const;
+
+type MobileAppProps = {
+ apis: RuntimeAPIs;
+};
+
+const normalizePath = (value?: string | null): string =>
+ (value || '').replace(/\\/g, '/').replace(/\/+$/g, '');
+
+const getProjectLabel = (path: string): string => {
+ const normalized = normalizePath(path);
+ if (!normalized) return '';
+ const segments = normalized.split('/').filter(Boolean);
+ return segments[segments.length - 1]?.replace(/[-_]/g, ' ') || normalized;
+};
+
+type OverflowItem = {
+ key: 'files' | 'changes' | 'settings';
+ Icon: typeof RiFileTextLine;
+ label: string;
+ badge?: number;
+ onSelect: () => void;
+};
+
+const MobileOverflowMenu: React.FC<{
+ open: boolean;
+ onClose: () => void;
+ items: OverflowItem[];
+}> = ({ open, onClose, items }) => {
+ const { t } = useI18n();
+ React.useEffect(() => {
+ if (!open) return;
+ const handleKey = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') onClose();
+ };
+ document.addEventListener('keydown', handleKey);
+ return () => document.removeEventListener('keydown', handleKey);
+ }, [onClose, open]);
+
+ if (!open) return null;
+
+ return (
+
+
+ );
+};
+
+const MobileShell: React.FC = () => {
+ const { t } = useI18n();
+ const [sessionsSheetOpen, setSessionsSheetOpen] = React.useState(false);
+ const [filesOpen, setFilesOpen] = React.useState(false);
+ const [changesOpen, setChangesOpen] = React.useState(false);
+ const [settingsOpen, setSettingsOpen] = React.useState(false);
+ const [overflowOpen, setOverflowOpen] = React.useState(false);
+ // When set, the Changes surface opens directly into the per-file diff for this path.
+ const [pendingChangesDiff, setPendingChangesDiff] = React.useState<{ path: string; staged: boolean } | null>(null);
+ const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+ const gitStatus = useGitStatus(normalizePath(currentDirectory) || null);
+ const dirtyChangeCount = gitStatus?.files?.length ?? 0;
+
+ const mobileActions = React.useMemo(
+ () => ({
+ openChanges: ({ diffPath, staged } = {}) => {
+ setPendingChangesDiff(diffPath ? { path: diffPath, staged: staged === true } : null);
+ setChangesOpen(true);
+ },
+ openFiles: () => setFilesOpen(true),
+ openSettings: () => setSettingsOpen(true),
+ }),
+ [],
+ );
+
+ const closeChanges = React.useCallback(() => {
+ setChangesOpen(false);
+ setPendingChangesDiff(null);
+ }, []);
+
+ const overflowItems: OverflowItem[] = React.useMemo(
+ () => [
+ {
+ key: 'files',
+ Icon: RiFileTextLine,
+ label: t('mobile.menu.files'),
+ onSelect: () => setFilesOpen(true),
+ },
+ {
+ key: 'changes',
+ Icon: RiGitBranchLine,
+ label: t('mobile.menu.changes'),
+ badge: dirtyChangeCount,
+ onSelect: () => setChangesOpen(true),
+ },
+ {
+ key: 'settings',
+ Icon: RiSettings3Line,
+ label: t('mobile.menu.settings'),
+ onSelect: () => setSettingsOpen(true),
+ },
+ ],
+ [dirtyChangeCount, t],
+ );
+
+ return (
+
+
+ );
+};
+
+export function MobileApp({ apis }: MobileAppProps) {
+ const initializeApp = useConfigStore((state) => state.initializeApp);
+ const isInitialized = useConfigStore((state) => state.isInitialized);
+ const isConnected = useConfigStore((state) => state.isConnected);
+ const providersCount = useConfigStore((state) => state.providers.length);
+ const agentsCount = useConfigStore((state) => state.agents.length);
+ const loadProviders = useConfigStore((state) => state.loadProviders);
+ const loadAgents = useConfigStore((state) => state.loadAgents);
+ const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+ const error = useSessionUIStore((state) => state.error);
+ const clearError = useSessionUIStore((state) => state.clearError);
+ const setIsMobile = useUIStore((state) => state.setIsMobile);
+ const refreshGitHubAuthStatus = useGitHubAuthStore((state) => state.refreshStatus);
+ const setPlanModeEnabled = useFeatureFlagsStore((state) => state.setPlanModeEnabled);
+ const projects = useProjectsStore((state) => state.projects);
+
+ React.useEffect(() => {
+ registerRuntimeAPIs(apis);
+ return () => registerRuntimeAPIs(null);
+ }, [apis]);
+
+ React.useEffect(() => {
+ setIsMobile(true);
+ }, [setIsMobile]);
+
+ React.useEffect(() => {
+ void initializeApp();
+ }, [initializeApp]);
+
+ React.useEffect(() => {
+ if (!isConnected) return;
+ if (providersCount === 0) void loadProviders();
+ if (agentsCount === 0) void loadAgents();
+ }, [agentsCount, isConnected, loadAgents, loadProviders, providersCount]);
+
+ React.useEffect(() => {
+ if (!isConnected) return;
+ opencodeClient.setDirectory(currentDirectory);
+ }, [currentDirectory, isConnected]);
+
+ React.useEffect(() => {
+ void refreshGitHubAuthStatus(apis.github, { force: true });
+ }, [apis.github, refreshGitHubAuthStatus]);
+
+ // Discover all worktrees for every known project so the draft session's
+ // worktree/branch dropdown can list every available branch — not only the
+ // current one. Mirrors ElectronMiniChatApp + desktop SessionSidebar.
+ React.useEffect(() => {
+ if (projects.length === 0) return;
+ let cancelled = false;
+
+ const run = async () => {
+ const worktreesByProject = new Map();
+ const allWorktrees: WorktreeMetadata[] = [];
+
+ await Promise.all(
+ projects.map(async (project) => {
+ const projectPath = project.path.replace(/\\/g, '/').replace(/\/+$/, '');
+ if (!projectPath) return;
+ try {
+ const cachedIsGitRepo = useGitStore.getState().directories.get(projectPath)?.isGitRepo;
+ const isGitRepo =
+ cachedIsGitRepo ?? (await import('@/lib/gitApi').then((m) => m.checkIsGitRepository(projectPath)));
+ if (!isGitRepo) return;
+ const worktrees = await listProjectWorktrees({ id: project.id, path: projectPath });
+ if (cancelled || worktrees.length === 0) return;
+ worktreesByProject.set(projectPath, worktrees);
+ allWorktrees.push(...worktrees);
+ } catch {
+ // Worktree discovery is best-effort; draft selector falls back to the project root.
+ }
+ }),
+ );
+
+ if (cancelled) return;
+ useSessionUIStore.setState({
+ availableWorktrees: allWorktrees,
+ availableWorktreesByProject: worktreesByProject,
+ });
+ };
+
+ void run();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [projects]);
+
+ React.useEffect(() => {
+ let cancelled = false;
+
+ const run = async () => {
+ const res = await runtimeFetch('/health', { method: 'GET' }).catch(() => null);
+ if (!res || !res.ok || cancelled) return;
+ const data = (await res.json().catch(() => null)) as null | { planModeExperimentalEnabled?: unknown };
+ if (!data || cancelled) return;
+ const raw = data.planModeExperimentalEnabled;
+ setPlanModeEnabled(raw === true || raw === 1 || raw === '1' || raw === 'true');
+ };
+
+ void run();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [setPlanModeEnabled]);
+
+ React.useEffect(() => {
+ if (!error) return;
+ const timeout = window.setTimeout(() => clearError(), 5000);
+ return () => window.clearTimeout(timeout);
+ }, [clearError, error]);
+
+ useAppFontEffects();
+ usePushVisibilityBeacon({ enabled: true });
+ useWindowTitle();
+ useRouter();
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/ui/src/apps/MobileChangesSurface.tsx b/packages/ui/src/apps/MobileChangesSurface.tsx
new file mode 100644
index 00000000..34d85f07
--- /dev/null
+++ b/packages/ui/src/apps/MobileChangesSurface.tsx
@@ -0,0 +1,617 @@
+import React from 'react';
+import { RiArrowLeftLine, RiCloseLine, RiGitBranchLine, RiLoader4Line } from '@remixicon/react';
+
+import { toast } from '@/components/ui';
+import { Button } from '@/components/ui/button';
+import { ScrollShadow } from '@/components/ui/ScrollShadow';
+import { ChangesPanel, type ChangesGroupConfig } from '@/components/views/git/ChangesPanel';
+import { CommitSection } from '@/components/views/git/CommitSection';
+import { SyncActions } from '@/components/views/git/SyncActions';
+import { PierreDiffViewer } from '@/components/views/PierreDiffViewer';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
+import type { GitStatus } from '@/lib/api/types';
+import { useI18n } from '@/lib/i18n';
+import { generateCommitMessage, stageGitFile, stageGitFiles, unstageGitFile, unstageGitFiles } from '@/lib/gitApi';
+import type { GitRemote } from '@/lib/gitApi';
+import { getLanguageFromExtension, isImageFile } from '@/lib/toolHelpers';
+import {
+ useGitStore,
+ useGitStatus,
+ useIsGitRepo,
+ useGitLoadingStatus,
+} from '@/stores/useGitStore';
+
+type SyncAction = 'fetch' | 'pull' | 'push' | 'sync' | null;
+type CommitAction = 'commit' | 'commitAndPush' | null;
+
+const normalizePath = (value?: string | null): string => (value || '').replace(/\\/g, '/').replace(/\/+$/g, '');
+
+const isStagedStatusFile = (file: GitStatus['files'][number]): boolean => {
+ const indexStatus = file.index?.trim();
+ return Boolean(indexStatus && indexStatus !== '?');
+};
+
+const isUnstagedStatusFile = (file: GitStatus['files'][number]): boolean => {
+ const workingStatus = file.working_dir?.trim();
+ const indexStatus = file.index?.trim();
+ return Boolean(workingStatus || indexStatus === '?');
+};
+
+const diffCacheKey = (path: string, staged: boolean): string => staged ? `${path}\u0000staged` : path;
+
+type MobileChangesSurfaceProps = {
+ /** When provided, the list header gets a close X that calls this; used when the surface is hosted in MobileSurfaceShell. */
+ onClose?: () => void;
+ /**
+ * When set (and non-null), the surface opens directly into the per-file diff view for this
+ * relative path. Updating it (incl. setting it to a different path while open) routes the
+ * surface to that diff. Setting it back to null leaves the user on the current internal route.
+ */
+ initialDiffPath?: string | null;
+ initialDiffStaged?: boolean;
+};
+
+export const MobileChangesSurface: React.FC = ({ onClose, initialDiffPath, initialDiffStaged = false }) => {
+ const { t } = useI18n();
+ const { git } = useRuntimeAPIs();
+ const currentDirectory = normalizePath(useEffectiveDirectory() ?? null);
+ const status = useGitStatus(currentDirectory || null);
+ const isGitRepo = useIsGitRepo(currentDirectory || null);
+ const isLoadingStatus = useGitLoadingStatus(currentDirectory || null);
+ const setActiveDirectory = useGitStore((state) => state.setActiveDirectory);
+ const ensureAll = useGitStore((state) => state.ensureAll);
+ const fetchStatus = useGitStore((state) => state.fetchStatus);
+ const fetchBranches = useGitStore((state) => state.fetchBranches);
+ const prefetchDiffs = useGitStore((state) => state.prefetchDiffs);
+ const getDiff = useGitStore((state) => state.getDiff);
+ const setDiff = useGitStore((state) => state.setDiff);
+
+ const [route, setRoute] = React.useState<{ type: 'list' } | { type: 'diff'; path: string; staged: boolean }>(
+ () => (initialDiffPath ? { type: 'diff', path: initialDiffPath, staged: initialDiffStaged } : { type: 'list' }),
+ );
+
+ // Allow the host (MobileApp) to push us into a specific diff when the surface
+ // is reopened or when an external trigger (e.g. PendingChangesBar tap) requests
+ // a different file mid-session.
+ React.useEffect(() => {
+ if (!initialDiffPath) return;
+ setRoute((current) => (
+ current.type === 'diff' && current.path === initialDiffPath && current.staged === initialDiffStaged
+ ? current
+ : { type: 'diff', path: initialDiffPath, staged: initialDiffStaged }
+ ));
+ }, [initialDiffPath, initialDiffStaged]);
+ const [syncAction, setSyncAction] = React.useState(null);
+ const [commitAction, setCommitAction] = React.useState(null);
+ const [commitMessage, setCommitMessage] = React.useState('');
+ const [revertingPaths, setRevertingPaths] = React.useState>(new Set());
+ const [isRevertingAll, setIsRevertingAll] = React.useState(false);
+ const [isGeneratingMessage, setIsGeneratingMessage] = React.useState(false);
+ const [generatedHighlights, setGeneratedHighlights] = React.useState([]);
+ const [visibleChangePaths, setVisibleChangePaths] = React.useState([]);
+ const [remotes, setRemotes] = React.useState([]);
+ const [remoteUrl, setRemoteUrl] = React.useState(null);
+ const [diffLoadError, setDiffLoadError] = React.useState(null);
+ const [diffRetryNonce, setDiffRetryNonce] = React.useState(0);
+
+ const changeEntries = React.useMemo(() => {
+ const files = status?.files ?? [];
+ const unique = new Map();
+ for (const file of files) {
+ unique.set(file.path, file);
+ }
+ return Array.from(unique.values()).sort((a, b) => a.path.localeCompare(b.path));
+ }, [status?.files]);
+
+ const stagedChangeEntries = React.useMemo(
+ () => changeEntries.filter(isStagedStatusFile),
+ [changeEntries],
+ );
+
+ const unstagedChangeEntries = React.useMemo(
+ () => changeEntries.filter(isUnstagedStatusFile),
+ [changeEntries],
+ );
+
+ const effectiveRemotes = React.useMemo(() => {
+ if (remotes.length > 0) return remotes;
+ const trackingRemote = status?.tracking?.includes('/') ? status.tracking.split('/')[0] : null;
+ if (trackingRemote || remoteUrl) {
+ return [{ name: trackingRemote || 'origin', fetchUrl: remoteUrl ?? '', pushUrl: remoteUrl ?? '' }];
+ }
+ return [];
+ }, [remoteUrl, remotes, status?.tracking]);
+
+ const selectedDiff = useGitStore(React.useCallback((state) => {
+ if (!currentDirectory || route.type !== 'diff') return null;
+ return state.directories.get(currentDirectory)?.diffCache.get(diffCacheKey(route.path, route.staged)) ?? null;
+ }, [currentDirectory, route]));
+
+ const selectedFileEntry = React.useMemo(() => {
+ if (route.type !== 'diff') return null;
+ return changeEntries.find((entry) => entry.path === route.path) ?? null;
+ }, [changeEntries, route]);
+
+ const refreshStatusAndBranches = React.useCallback(async (showErrors = true) => {
+ if (!currentDirectory) return;
+ try {
+ await Promise.all([
+ fetchStatus(currentDirectory, git),
+ fetchBranches(currentDirectory, git),
+ ]);
+ } catch (error) {
+ if (showErrors) {
+ toast.error(error instanceof Error ? error.message : t('gitView.toast.refreshRepositoryFailed'));
+ }
+ }
+ }, [currentDirectory, fetchBranches, fetchStatus, git, t]);
+
+ const refreshRemotes = React.useCallback(async () => {
+ if (!currentDirectory) {
+ setRemotes([]);
+ setRemoteUrl(null);
+ return;
+ }
+ try {
+ const [remoteList, url] = await Promise.all([
+ git.getRemotes(currentDirectory).catch(() => []),
+ git.getRemoteUrl ? git.getRemoteUrl(currentDirectory).catch(() => null) : Promise.resolve(null),
+ ]);
+ setRemotes(remoteList);
+ setRemoteUrl(url);
+ } catch {
+ setRemotes([]);
+ setRemoteUrl(null);
+ }
+ }, [currentDirectory, git]);
+
+ React.useEffect(() => {
+ if (!currentDirectory) return;
+ setActiveDirectory(currentDirectory);
+ void ensureAll(currentDirectory, git);
+ }, [currentDirectory, ensureAll, git, setActiveDirectory]);
+
+ React.useEffect(() => {
+ void refreshRemotes();
+ }, [refreshRemotes]);
+
+ React.useEffect(() => {
+ if (!currentDirectory || changeEntries.length === 0) return;
+ const orderedPaths = Array.from(new Set([
+ ...stagedChangeEntries.map((entry) => entry.path),
+ ...visibleChangePaths,
+ ...changeEntries.slice(0, 20).map((entry) => entry.path),
+ ])).filter(Boolean);
+ if (orderedPaths.length === 0) return;
+ const timeoutId = window.setTimeout(() => {
+ void prefetchDiffs(currentDirectory, git, orderedPaths, { maxFiles: 40 });
+ }, 120);
+ return () => window.clearTimeout(timeoutId);
+ }, [changeEntries, currentDirectory, git, prefetchDiffs, stagedChangeEntries, visibleChangePaths]);
+
+ React.useEffect(() => {
+ if (route.type !== 'diff') {
+ setDiffLoadError(null);
+ return;
+ }
+ const cacheKey = diffCacheKey(route.path, route.staged);
+ if (!currentDirectory || getDiff(currentDirectory, cacheKey)) {
+ setDiffLoadError(null);
+ return;
+ }
+
+ let cancelled = false;
+ setDiffLoadError(null);
+ void git.getGitFileDiff(currentDirectory, { path: route.path, staged: route.staged || undefined })
+ .then((response) => {
+ if (cancelled) return;
+ setDiff(currentDirectory, cacheKey, {
+ original: response.original ?? '',
+ modified: response.modified ?? '',
+ isBinary: response.isBinary,
+ });
+ })
+ .catch((error) => {
+ if (cancelled) return;
+ setDiffLoadError(error instanceof Error ? error.message : String(error));
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [currentDirectory, diffRetryNonce, getDiff, git, route, setDiff]);
+
+ const handleSyncAction = async (action: Exclude, remote?: GitRemote) => {
+ if (!currentDirectory) return;
+ setSyncAction(action);
+ try {
+ const getPullOptions = (pullRemote: GitRemote) => {
+ const trackingPrefix = `${pullRemote.name}/`;
+ const trackedBranch = status?.tracking?.startsWith(trackingPrefix)
+ ? status.tracking.slice(trackingPrefix.length)
+ : undefined;
+ return { remote: pullRemote.name, branch: trackedBranch, rebase: true };
+ };
+
+ if (action === 'fetch') {
+ if (!remote) throw new Error(t('mobile.changes.noRemote'));
+ await git.gitFetch(currentDirectory, { remote: remote.name });
+ toast.success(t('gitView.toast.fetchedFromRemote', { name: remote.name }));
+ } else if (action === 'sync') {
+ if (!remote) throw new Error(t('mobile.changes.noRemote'));
+ await git.gitFetch(currentDirectory, { remote: remote.name });
+ const afterFetch = await git.getGitStatus(currentDirectory);
+ if ((afterFetch.behind ?? 0) > 0) {
+ if ((afterFetch.files?.length ?? 0) > 0) {
+ toast.error(t('gitView.toast.commitOrStashBeforeSync'));
+ return;
+ }
+ await git.gitPull(currentDirectory, getPullOptions(remote));
+ }
+ const afterPull = await git.getGitStatus(currentDirectory);
+ if ((afterPull.ahead ?? 0) > 0) {
+ await git.gitPush(currentDirectory);
+ }
+ toast.success(t('gitView.toast.alreadyUpToDate'));
+ }
+ await refreshStatusAndBranches(false);
+ await refreshRemotes();
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('gitView.toast.syncActionFailed', { action: t('gitView.sync.syncChanges') }));
+ } finally {
+ setSyncAction(null);
+ }
+ };
+
+ const moveChangePaths = React.useCallback(async (paths: string[], direction: 'stage' | 'unstage') => {
+ if (!currentDirectory || paths.length === 0) return;
+ try {
+ if (direction === 'stage') {
+ if (paths.length > 1) await stageGitFiles(currentDirectory, paths);
+ else await stageGitFile(currentDirectory, paths[0]);
+ } else {
+ if (paths.length > 1) await unstageGitFiles(currentDirectory, paths);
+ else await unstageGitFile(currentDirectory, paths[0]);
+ }
+ await refreshStatusAndBranches(false);
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : direction === 'stage'
+ ? t('gitView.toast.stageFileFailed')
+ : t('gitView.toast.unstageFileFailed'));
+ }
+ }, [currentDirectory, refreshStatusAndBranches, t]);
+
+ const handleViewChangeDiff = React.useCallback((path: string, staged = false) => {
+ setRoute({ type: 'diff', path, staged });
+ }, []);
+
+ const handleRevertFile = React.useCallback(async (filePath: string) => {
+ if (!currentDirectory) return;
+ setRevertingPaths((previous) => new Set(previous).add(filePath));
+ try {
+ await git.revertGitFile(currentDirectory, filePath);
+ toast.success(t('gitView.toast.revertedFile', { path: filePath }));
+ await refreshStatusAndBranches(false);
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('gitView.toast.revertFailed'));
+ } finally {
+ setRevertingPaths((previous) => {
+ const next = new Set(previous);
+ next.delete(filePath);
+ return next;
+ });
+ }
+ }, [currentDirectory, git, refreshStatusAndBranches, t]);
+
+ const handleRevertAll = React.useCallback(async (paths: string[]) => {
+ if (!currentDirectory || paths.length === 0 || isRevertingAll) return;
+ const uniquePaths = Array.from(new Set(paths));
+ setIsRevertingAll(true);
+ setRevertingPaths(new Set(uniquePaths));
+ try {
+ await Promise.all(uniquePaths.map((filePath) => git.revertGitFile(currentDirectory, filePath)));
+ await refreshStatusAndBranches(false);
+ toast.success(uniquePaths.length === 1
+ ? t('gitView.toast.revertedFilesSingle', { count: uniquePaths.length })
+ : t('gitView.toast.revertedFilesPlural', { count: uniquePaths.length }));
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('gitView.toast.revertFailed'));
+ } finally {
+ setRevertingPaths(new Set());
+ setIsRevertingAll(false);
+ }
+ }, [currentDirectory, git, isRevertingAll, refreshStatusAndBranches, t]);
+
+ const handleInsertHighlights = React.useCallback((highlights: string[]) => {
+ const normalized = highlights.map((text) => text.trim()).filter(Boolean);
+ if (normalized.length === 0) {
+ setGeneratedHighlights([]);
+ return;
+ }
+ setCommitMessage((current) => `${current.trim()}${current.trim() ? '\n\n' : ''}${normalized.join('\n')}`.trim());
+ setGeneratedHighlights([]);
+ }, []);
+
+ const handleGenerateCommitMessage = React.useCallback(async () => {
+ if (!currentDirectory) return;
+ const selectedFilePaths = stagedChangeEntries.map((file) => file.path).sort();
+ if (selectedFilePaths.length === 0) {
+ toast.error(t('gitView.toast.selectFileToDescribe'));
+ return;
+ }
+ setIsGeneratingMessage(true);
+ try {
+ const { message } = await generateCommitMessage(currentDirectory, selectedFilePaths);
+ setCommitMessage(message.subject?.trim() ?? '');
+ setGeneratedHighlights(Array.isArray(message.highlights) ? message.highlights : []);
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('gitView.toast.generateCommitMessageFailed'));
+ } finally {
+ setIsGeneratingMessage(false);
+ }
+ }, [currentDirectory, stagedChangeEntries, t]);
+
+ const handleCommit = async (options: { pushAfter?: boolean } = {}) => {
+ if (!currentDirectory) return;
+ if (!commitMessage.trim()) {
+ toast.error(t('gitView.toast.enterCommitMessage'));
+ return;
+ }
+ const filesToCommit = stagedChangeEntries.map((file) => file.path).sort();
+ if (filesToCommit.length === 0) {
+ toast.error(t('gitView.toast.selectFileToCommit'));
+ return;
+ }
+
+ setCommitAction(options.pushAfter ? 'commitAndPush' : 'commit');
+ try {
+ await git.createGitCommit(currentDirectory, commitMessage.trim(), { files: filesToCommit });
+ toast.success(t('gitView.toast.commitCreated'));
+ setCommitMessage('');
+ setGeneratedHighlights([]);
+
+ if (options.pushAfter) {
+ const trackingRemoteName = status?.tracking?.split('/')[0];
+ const remote = effectiveRemotes.find((entry) => entry.name === trackingRemoteName) ?? effectiveRemotes[0];
+ if (!remote) throw new Error(t('mobile.changes.noRemote'));
+ setSyncAction('sync');
+ const trackingPrefix = `${remote.name}/`;
+ const trackedBranch = status?.tracking?.startsWith(trackingPrefix)
+ ? status.tracking.slice(trackingPrefix.length)
+ : undefined;
+
+ await git.gitFetch(currentDirectory, { remote: remote.name });
+ const afterFetch = await git.getGitStatus(currentDirectory);
+ if ((afterFetch.behind ?? 0) > 0) {
+ await git.gitPull(currentDirectory, { remote: remote.name, branch: trackedBranch, rebase: true });
+ }
+
+ const afterPull = await git.getGitStatus(currentDirectory);
+ if ((afterPull.ahead ?? 0) > 0) {
+ await git.gitPush(currentDirectory);
+ }
+
+ await refreshStatusAndBranches(false);
+ await refreshRemotes();
+ } else {
+ await refreshStatusAndBranches(false);
+ }
+ } catch (error) {
+ toast.error(error instanceof Error ? error.message : t('gitView.toast.createCommitFailed'));
+ } finally {
+ setCommitAction(null);
+ if (options.pushAfter) setSyncAction(null);
+ }
+ };
+
+ const changeGroups = React.useMemo(() => {
+ const groups: ChangesGroupConfig[] = [];
+
+ if (stagedChangeEntries.length > 0) {
+ groups.push({
+ id: 'staged',
+ title: t('gitView.changes.stagedTitle'),
+ entries: stagedChangeEntries,
+ actionSymbol: '-',
+ actionAllLabel: t('gitView.changes.unstageAllAria'),
+ getActionLabel: (path: string) => t('gitView.changes.unstageFileAria', { path }),
+ onActionFile: (path: string) => void moveChangePaths([path], 'unstage'),
+ onActionAll: (paths: string[]) => void moveChangePaths(paths, 'unstage'),
+ onViewDiff: (path: string) => handleViewChangeDiff(path, true),
+ onRevertFile: handleRevertFile,
+ showRevertActions: false,
+ accent: true,
+ });
+ }
+
+ if (unstagedChangeEntries.length > 0) {
+ groups.push({
+ id: 'unstaged',
+ title: t('gitView.changes.title'),
+ entries: unstagedChangeEntries,
+ actionSymbol: '+',
+ actionAllLabel: t('gitView.changes.stageAllAria'),
+ getActionLabel: (path: string) => t('gitView.changes.stageFileAria', { path }),
+ onActionFile: (path: string) => void moveChangePaths([path], 'stage'),
+ onActionAll: (paths: string[]) => void moveChangePaths(paths, 'stage'),
+ onViewDiff: (path: string) => handleViewChangeDiff(path, false),
+ onRevertFile: handleRevertFile,
+ });
+ }
+
+ return groups;
+ }, [handleRevertFile, handleViewChangeDiff, moveChangePaths, stagedChangeEntries, t, unstagedChangeEntries]);
+
+ if (!currentDirectory) {
+ return setRoute({ type: 'list' })}
+ onRetry={() => setDiffRetryNonce((value) => value + 1)}
+ />
+ );
+ }
+
+ return (
+ = ({ onClose }) => {
+ const { t } = useI18n();
+ const { files } = useRuntimeAPIs();
+ const root = normalizePath(useEffectiveDirectory() ?? null);
+ const [route, setRoute] = React.useState(() => ({ type: 'browser', directory: root }));
+ const [entries, setEntries] = React.useState([]);
+ const [isLoadingDirectory, setIsLoadingDirectory] = React.useState(false);
+ const [directoryError, setDirectoryError] = React.useState(null);
+ const [query, setQuery] = React.useState('');
+ const [searchResults, setSearchResults] = React.useState([]);
+ const [isSearching, setIsSearching] = React.useState(false);
+ const [fileContent, setFileContent] = React.useState('');
+ const [fileError, setFileError] = React.useState(null);
+ const [isLoadingFile, setIsLoadingFile] = React.useState(false);
+ const directoryLoadRequestIdRef = React.useRef(0);
+
+ React.useEffect(() => {
+ if (!root) return;
+ setRoute((current) => {
+ if (current.type === 'browser' && current.directory) return current;
+ return { type: 'browser', directory: root };
+ });
+ }, [root]);
+
+ const currentDirectory = route.type === 'browser' ? route.directory : route.returnDirectory;
+
+ const loadDirectory = React.useCallback(async (directory: string) => {
+ if (!directory) return;
+ const requestId = directoryLoadRequestIdRef.current + 1;
+ directoryLoadRequestIdRef.current = requestId;
+ setIsLoadingDirectory(true);
+ setDirectoryError(null);
+ try {
+ const result = await files.listDirectory(directory);
+ if (directoryLoadRequestIdRef.current !== requestId) return;
+ setEntries(result.entries.slice().sort((a, b) => {
+ if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;
+ return a.name.localeCompare(b.name);
+ }));
+ } catch (error) {
+ if (directoryLoadRequestIdRef.current !== requestId) return;
+ setEntries([]);
+ setDirectoryError(error instanceof Error ? error.message : t('mobile.files.error.listFailed'));
+ } finally {
+ if (directoryLoadRequestIdRef.current === requestId) {
+ setIsLoadingDirectory(false);
+ }
+ }
+ }, [files, t]);
+
+ React.useEffect(() => {
+ if (route.type !== 'browser') return;
+ void loadDirectory(route.directory);
+ }, [loadDirectory, route]);
+
+ React.useEffect(() => {
+ if (route.type !== 'browser') return;
+ const normalizedQuery = query.trim();
+ if (!normalizedQuery) {
+ setSearchResults([]);
+ setIsSearching(false);
+ return;
+ }
+
+ let cancelled = false;
+ const timeoutId = window.setTimeout(() => {
+ setIsSearching(true);
+ void files.search({ directory: route.directory, query: normalizedQuery, maxResults: 40 })
+ .then((results) => {
+ if (!cancelled) setSearchResults(results);
+ })
+ .catch(() => {
+ if (!cancelled) setSearchResults([]);
+ })
+ .finally(() => {
+ if (!cancelled) setIsSearching(false);
+ });
+ }, 250);
+
+ return () => {
+ cancelled = true;
+ window.clearTimeout(timeoutId);
+ };
+ }, [files, query, route]);
+
+ React.useEffect(() => {
+ if (route.type !== 'file') return;
+ setFileContent('');
+ setFileError(null);
+
+ if (isImageFile(route.path) && !route.path.toLowerCase().endsWith('.svg')) {
+ setIsLoadingFile(false);
+ return;
+ }
+
+ if (!files.readFile) {
+ setFileError(t('mobile.files.error.readUnavailable'));
+ setIsLoadingFile(false);
+ return;
+ }
+
+ let cancelled = false;
+ setIsLoadingFile(true);
+ void files.readFile(route.path)
+ .then((result) => {
+ if (cancelled) return;
+ setFileContent(result.content.length > MAX_MOBILE_FILE_CHARS
+ ? `${result.content.slice(0, MAX_MOBILE_FILE_CHARS)}\n\n${t('mobile.files.file.truncated')}`
+ : result.content);
+ })
+ .catch((error) => {
+ if (!cancelled) setFileError(error instanceof Error ? error.message : t('filesView.error.readFileFailed'));
+ })
+ .finally(() => {
+ if (!cancelled) setIsLoadingFile(false);
+ });
+
+ return () => {
+ cancelled = true;
+ };
+ }, [files, route, t]);
+
+ const openDirectory = (directory: string) => {
+ setQuery('');
+ setRoute({ type: 'browser', directory });
+ };
+
+ const openFile = (path: string) => {
+ setRoute({ type: 'file', path, returnDirectory: currentDirectory || root });
+ };
+
+ const handleCopyPath = async (path: string) => {
+ const result = await copyTextToClipboard(path);
+ if (result.ok) toast.success(t('mobile.files.toast.pathCopied'));
+ else toast.error(t('mobile.files.toast.copyFailed'));
+ };
+
+ const handleCopyContent = async () => {
+ const result = await copyTextToClipboard(fileContent);
+ if (result.ok) toast.success(t('mobile.files.toast.contentCopied'));
+ else toast.error(t('mobile.files.toast.copyFailed'));
+ };
+
+ if (!root) {
+ return setRoute({ type: 'browser', directory: route.returnDirectory })}
+ onCopyPath={() => void handleCopyPath(route.path)}
+ onCopyContent={() => void handleCopyContent()}
+ />
+ );
+ }
+
+ const directoryLabel = route.directory === root ? t('mobile.files.rootDirectory') : getNameFromPath(route.directory);
+ const visibleSearchResults = query.trim() ? searchResults : [];
+
+ // Cap parent navigation at the project root: only allow stepping up while
+ // the parent stays inside (or equal to) the root.
+ const rawParent = getParentDirectory(route.directory);
+ const parentWithinRoot =
+ route.directory !== root && rawParent !== null && (rawParent === root || rawParent.startsWith(`${root}/`));
+ const canGoBack = parentWithinRoot && !query.trim();
+ const parentDirectory = parentWithinRoot ? rawParent : null;
+
+ return (
+
+
+ );
+ }
+ if (isJsonFile(path)) {
+ return ;
+ size?: 'sm' | 'md';
+}> = ({ project, size = 'md' }) => {
+ const { currentTheme } = useThemeSystem();
+
+ const ProjectIcon = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
+ const iconColor = project.color ? PROJECT_COLOR_MAP[project.color] ?? null : null;
+
+ const containerClasses = size === 'sm' ? 'size-6 rounded-md' : 'size-8 rounded-lg';
+ const innerClasses = size === 'sm' ? 'size-3.5' : 'size-4';
+ const fallbackIcon = ProjectIcon ? (
+ = ({ open, onOpenChange }) => {
+ const { t } = useI18n();
+ const { git } = useRuntimeAPIs();
+ const liveSessions = useAllLiveSessions();
+ const globalActiveSessions = useGlobalSessionsStore((state) => state.activeSessions);
+ const projects = useProjectsStore((state) => state.projects);
+ const activeProjectId = useProjectsStore((state) => state.activeProjectId);
+ const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+ const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
+ const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
+ const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
+ const setActiveProject = useProjectsStore((state) => state.setActiveProject);
+ const setActiveProjectIdOnly = useProjectsStore((state) => state.setActiveProjectIdOnly);
+ const reorderProjects = useProjectsStore((state) => state.reorderProjects);
+ const removeProject = useProjectsStore((state) => state.removeProject);
+ const [query, setQuery] = React.useState('');
+ const [directoryDialogOpen, setDirectoryDialogOpen] = React.useState(false);
+ const [newWorktreeDialogOpen, setNewWorktreeDialogOpen] = React.useState(false);
+ const [worktreeDialogProjectId, setWorktreeDialogProjectId] = React.useState(null);
+ const [worktreesByProject, setWorktreesByProject] = React.useState>(new Map());
+ const [gitProjectPaths, setGitProjectPaths] = React.useState>(new Set());
+ const [editingOrder, setEditingOrder] = React.useState(false);
+ const [confirmingDeleteId, setConfirmingDeleteId] = React.useState(null);
+ // Buckets the user explicitly expanded past the SESSIONS_PER_BUCKET cap. Key: `${projectId}::${bucketKey}`.
+ const [expandedBucketsAll, setExpandedBucketsAll] = React.useState>(new Set());
+ // User overrides: true = user explicitly expanded, false = user explicitly collapsed,
+ // missing key = use the default rule (active project/worktree expanded).
+ const [projectOverrides, setProjectOverrides] = React.useState>(new Map());
+ const [worktreeOverrides, setWorktreeOverrides] = React.useState>(new Map());
+
+ React.useEffect(() => {
+ if (!open) {
+ setQuery('');
+ setProjectOverrides(new Map());
+ setWorktreeOverrides(new Map());
+ setEditingOrder(false);
+ setConfirmingDeleteId(null);
+ setExpandedBucketsAll(new Set());
+ return;
+ }
+ void refreshGlobalSessions(liveSessions);
+ // intentionally only on open transition — live overlay handles updates after that
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [open]);
+
+ React.useEffect(() => {
+ if (!editingOrder) setConfirmingDeleteId(null);
+ }, [editingOrder]);
+
+ React.useEffect(() => {
+ if (!open || projects.length === 0) return;
+ let cancelled = false;
+ const run = async () => {
+ const entries = await Promise.all(
+ projects.map(async (project) => {
+ const path = normalizePath(project.path);
+ if (!path) return null;
+ const isGitRepo = await git.checkIsGitRepository(path).catch(() => false);
+ const worktrees = isGitRepo
+ ? await listProjectWorktrees({ id: project.id, path }).catch(() => [])
+ : [];
+ return [path, worktrees, isGitRepo] as const;
+ }),
+ );
+ if (cancelled) return;
+ const next = new Map();
+ const nextGitProjectPaths = new Set();
+ for (const entry of entries) {
+ if (entry) {
+ next.set(entry[0], entry[1]);
+ if (entry[2]) nextGitProjectPaths.add(entry[0]);
+ }
+ }
+ setWorktreesByProject(next);
+ setGitProjectPaths(nextGitProjectPaths);
+ };
+ void run();
+ return () => {
+ cancelled = true;
+ };
+ }, [git, open, projects]);
+
+ const projectsMeta = React.useMemo(
+ () =>
+ projects.map((project) => ({
+ id: project.id,
+ label: project.label?.trim() || getProjectLabel(project.path),
+ path: normalizePath(project.path),
+ icon: project.icon,
+ color: project.color,
+ iconImage: project.iconImage,
+ iconBackground: project.iconBackground,
+ isGitRepo: gitProjectPaths.has(normalizePath(project.path)),
+ worktrees: worktreesByProject.get(normalizePath(project.path)) ?? [],
+ })),
+ [gitProjectPaths, projects, worktreesByProject],
+ );
+
+ /**
+ * Global sessions cover all directories — even unbootstrapped ones — so the tree shows
+ * accurate counts even when a worktree's live store hasn't been hydrated yet. Live
+ * sessions overlay for fresher data on the active directory.
+ */
+ const sessions = React.useMemo(() => {
+ const liveById = new Map(liveSessions.map((session) => [session.id, session]));
+ const merged = globalActiveSessions.map((session) => liveById.get(session.id) ?? session);
+ const seenIds = new Set(merged.map((session) => session.id));
+ for (const session of liveSessions) {
+ if (!seenIds.has(session.id)) merged.push(session);
+ }
+ return merged;
+ }, [globalActiveSessions, liveSessions]);
+
+ const normalizedQuery = query.trim().toLowerCase();
+
+ const projectNodes = React.useMemo(() => {
+ const nodes: ProjectNode[] = projectsMeta.map((project) => ({
+ project,
+ buckets: [] as WorktreeBucket[],
+ totalSessions: 0,
+ isActive: project.id === activeProjectId,
+ }));
+
+ const ensureBucket = (node: ProjectNode, path: string, worktree: WorktreeMetadata | null): WorktreeBucket => {
+ const normalizedBucketPath = normalizePath(path) || node.project.path;
+ const key = normalizedBucketPath || '__root__';
+ let bucket = node.buckets.find((entry) => entry.key === key);
+ if (!bucket) {
+ bucket = {
+ key,
+ label: worktree?.branch || getProjectLabel(normalizedBucketPath),
+ path: normalizedBucketPath,
+ worktree,
+ sessions: [],
+ };
+ node.buckets.push(bucket);
+ }
+ return bucket;
+ };
+
+ for (const node of nodes) {
+ ensureBucket(node, node.project.path, null);
+ for (const worktree of node.project.worktrees) ensureBucket(node, worktree.path, worktree);
+ }
+
+ for (const session of sessions) {
+ const directory = getSessionDirectory(session);
+ if (!directory) continue;
+ const node = nodes.find((entry) => {
+ if (pathBelongsToRoot(directory, entry.project.path)) return true;
+ return entry.project.worktrees.some((worktree) => pathBelongsToRoot(directory, worktree.path));
+ });
+ if (!node) continue;
+ const matchedWorktree = node.project.worktrees.find((entry) => pathBelongsToRoot(directory, entry.path));
+ const bucket = matchedWorktree
+ ? ensureBucket(node, matchedWorktree.path, matchedWorktree)
+ : ensureBucket(node, node.project.path, null);
+ bucket.sessions.push(session);
+ }
+
+ for (const node of nodes) {
+ for (const bucket of node.buckets) {
+ bucket.sessions.sort((a, b) => getSessionTimestamp(b) - getSessionTimestamp(a));
+ node.totalSessions += bucket.sessions.length;
+ }
+ }
+
+ return nodes;
+ }, [activeProjectId, projectsMeta, sessions]);
+
+ const normalizedDirectory = normalizePath(currentDirectory);
+
+ const findActiveWorktreePath = (node: ProjectNode): string | null => {
+ if (!node.isActive) return null;
+ if (normalizedDirectory === node.project.path) return node.project.path;
+ const matched = node.project.worktrees.find((entry) => pathBelongsToRoot(normalizedDirectory, entry.path));
+ return matched?.path ?? node.project.path;
+ };
+
+ // Default rule for a project: active project expanded; non-empty query expands any node
+ // that contains a matching session. User override (true/false) wins over defaults.
+ const isProjectExpanded = (node: ProjectNode): boolean => {
+ const override = projectOverrides.get(node.project.id);
+ if (override !== undefined) return override;
+ if (normalizedQuery) {
+ return node.buckets.some((bucket) =>
+ bucket.sessions.some((session) => sessionMatchesQuery(session, node.project.label, normalizedQuery)),
+ );
+ }
+ return node.isActive;
+ };
+
+ const isWorktreeExpanded = (node: ProjectNode, bucket: WorktreeBucket): boolean => {
+ const key = `${node.project.id}::${bucket.key}`;
+ const override = worktreeOverrides.get(key);
+ if (override !== undefined) return override;
+ if (normalizedQuery) {
+ return bucket.sessions.some((session) =>
+ sessionMatchesQuery(session, node.project.label, normalizedQuery),
+ );
+ }
+ return findActiveWorktreePath(node) === bucket.path;
+ };
+
+ const toggleProject = (projectId: string, currentlyExpanded: boolean) => {
+ setProjectOverrides((previous) => {
+ const next = new Map(previous);
+ next.set(projectId, !currentlyExpanded);
+ return next;
+ });
+ };
+
+ const toggleWorktree = (projectId: string, bucketKey: string, currentlyExpanded: boolean) => {
+ const key = `${projectId}::${bucketKey}`;
+ setWorktreeOverrides((previous) => {
+ const next = new Map(previous);
+ next.set(key, !currentlyExpanded);
+ return next;
+ });
+ };
+
+ const handleSelectSession = (session: Session) => {
+ void setCurrentSession(session.id, getSessionDirectory(session) || null);
+ onOpenChange(false);
+ };
+
+ const handleStartNewChat = () => {
+ openNewSessionDraft();
+ onOpenChange(false);
+ };
+
+ const handleNewWorktree = (projectId: string) => {
+ setWorktreeDialogProjectId(projectId);
+ setActiveProjectIdOnly(projectId);
+ setNewWorktreeDialogOpen(true);
+ };
+
+ const dndSensors = useSensors(
+ useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+ useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+ );
+
+ const handleReorderDragEnd = (event: DragEndEvent) => {
+ const { active, over } = event;
+ setConfirmingDeleteId(null);
+ if (!over || active.id === over.id) return;
+ const fromIndex = projectsMeta.findIndex((p) => p.id === active.id);
+ const toIndex = projectsMeta.findIndex((p) => p.id === over.id);
+ if (fromIndex < 0 || toIndex < 0) return;
+ reorderProjects(fromIndex, toIndex);
+ };
+
+ const handleRequestRemoveProject = (projectId: string) => {
+ setConfirmingDeleteId((current) => (current === projectId ? null : projectId));
+ };
+
+ const handleConfirmRemoveProject = (project: ProjectMeta) => {
+ removeProject(project.id);
+ setConfirmingDeleteId(null);
+ toast.success(t('mobile.sessions.toast.projectRemoved', { label: project.label }));
+ };
+
+ /** Short "Project · branch" string shown under the session title in search results. */
+ const buildSessionContextLabel = React.useCallback(
+ (session: Session): string => {
+ const directory = getSessionDirectory(session);
+ const project = projectsMeta.find((entry) => {
+ if (pathBelongsToRoot(directory, entry.path)) return true;
+ return entry.worktrees.some((worktree) => pathBelongsToRoot(directory, worktree.path));
+ });
+ if (!project) return getProjectLabel(directory) || directory;
+ const matchedWorktree = project.worktrees.find((entry) => pathBelongsToRoot(directory, entry.path));
+ if (matchedWorktree?.branch) return `${project.label} · ${matchedWorktree.branch}`;
+ return project.label;
+ },
+ [projectsMeta],
+ );
+
+ const handleSelectProject = (project: ProjectMeta) => {
+ setActiveProject(project.id);
+ onOpenChange(false);
+ };
+
+ const filteredNodes = React.useMemo(() => {
+ if (!normalizedQuery) return projectNodes;
+ return projectNodes.filter((node) => {
+ if (`${node.project.label} ${node.project.path}`.toLowerCase().includes(normalizedQuery)) return true;
+ return node.buckets.some((bucket) =>
+ bucket.sessions.some((session) => sessionMatchesQuery(session, node.project.label, normalizedQuery)),
+ );
+ });
+ }, [normalizedQuery, projectNodes]);
+
+ // Preserve the store's project order. Reorder mode persists changes via
+ // useProjectsStore.reorderProjects, which writes back to the same source we render here.
+ const orderedNodes = filteredNodes;
+
+ // Flat lists used only by the dedicated search-results view.
+ const searchSessionMatches = React.useMemo(() => {
+ if (!normalizedQuery) return [] as Session[];
+ return sessions
+ .filter((session) => {
+ const directory = getSessionDirectory(session);
+ const project = projectsMeta.find((entry) => {
+ if (pathBelongsToRoot(directory, entry.path)) return true;
+ return entry.worktrees.some((worktree) => pathBelongsToRoot(directory, worktree.path));
+ });
+ return sessionMatchesQuery(session, project?.label ?? '', normalizedQuery);
+ })
+ .sort((a, b) => getSessionTimestamp(b) - getSessionTimestamp(a));
+ }, [normalizedQuery, projectsMeta, sessions]);
+
+ const searchProjectMatches = React.useMemo(() => {
+ if (!normalizedQuery) return [] as Array;
+ return projectsMeta
+ .filter((project) => `${project.label} ${project.path}`.toLowerCase().includes(normalizedQuery))
+ .map((project) => ({
+ ...project,
+ sessionCount: sessions.filter((session) => {
+ const directory = getSessionDirectory(session);
+ if (pathBelongsToRoot(directory, project.path)) return true;
+ return project.worktrees.some((worktree) => pathBelongsToRoot(directory, worktree.path));
+ }).length,
+ }));
+ }, [normalizedQuery, projectsMeta, sessions]);
+
+ const hasNoMatches =
+ normalizedQuery && searchSessionMatches.length === 0 && searchProjectMatches.length === 0;
+ const canEditOrder = !normalizedQuery && projectsMeta.length > 1;
+
+ const editToggle = canEditOrder ? (
+
+ ) : null;
+
+ const newChatButton =
+ !editingOrder && projectsMeta.length > 0 ? (
+
+ ) : null;
+
+ const addProjectButton = !editingOrder ? (
+
+ ) : null;
+
+ const trailingActions =
+ newChatButton || addProjectButton || editToggle ? (
+ <>
+ {newChatButton}
+ {addProjectButton}
+ {editToggle}
+
+ ) : null;
+
+ return (
+ onOpenChange(false)}
+ ariaLabel={t('mobile.sessions.sheet.title')}
+ title={t('mobile.sessions.sheet.title')}
+ trailing={trailingActions}
+ >
+
+ );
+};
+
+const MobileSessionsEmpty: React.FC<{
+ title: string;
+ description?: string;
+ action?: React.ReactNode;
+}> = ({ title, description, action }) => (
+ = ({
+ open,
+ onClose,
+ title,
+ subtitle,
+ trailing,
+ onBack,
+ disableSwipeDismiss = false,
+ headerless = false,
+ ariaLabel,
+ children,
+}) => {
+ const { t } = useI18n();
+ const rootRef = React.useRef(null);
+ const [mounted, setMounted] = React.useState(false);
+ const [entered, setEntered] = React.useState(false);
+ const [dragOffset, setDragOffset] = React.useState(0);
+ const dragStartYRef = React.useRef(null);
+ const isDraggingRef = React.useRef(false);
+ const surfaceRef = React.useRef(null);
+ const previousFocusRef = React.useRef(null);
+
+ if (typeof document !== 'undefined' && !rootRef.current) {
+ rootRef.current = ensureSurfaceRoot();
+ }
+
+ React.useEffect(() => {
+ if (open) {
+ setMounted(true);
+ const id = window.setTimeout(() => setEntered(true), ENTER_DELAY_MS);
+ return () => window.clearTimeout(id);
+ }
+ setEntered(false);
+ const id = window.setTimeout(() => setMounted(false), 220);
+ return () => window.clearTimeout(id);
+ }, [open]);
+
+ React.useEffect(() => {
+ if (!open) return;
+ const previousOverflow = document.body.style.overflow;
+ previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+ document.body.style.overflow = 'hidden';
+ const focusFirstElement = () => {
+ const surface = surfaceRef.current;
+ if (!surface) return;
+ const focusable = surface.querySelector(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+ );
+ (focusable ?? surface).focus({ preventScroll: true });
+ };
+ const focusTimer = window.setTimeout(focusFirstElement, ENTER_DELAY_MS);
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ onClose();
+ return;
+ }
+ if (event.key !== 'Tab') return;
+ const surface = surfaceRef.current;
+ if (!surface) return;
+ const focusable = Array.from(surface.querySelectorAll(
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+ )).filter((element) => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true');
+ if (focusable.length === 0) {
+ event.preventDefault();
+ surface.focus({ preventScroll: true });
+ return;
+ }
+ const first = focusable[0];
+ const last = focusable[focusable.length - 1];
+ const active = document.activeElement;
+ if (event.shiftKey && active === first) {
+ event.preventDefault();
+ last.focus({ preventScroll: true });
+ } else if (!event.shiftKey && active === last) {
+ event.preventDefault();
+ first.focus({ preventScroll: true });
+ }
+ };
+ document.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.clearTimeout(focusTimer);
+ document.body.style.overflow = previousOverflow;
+ document.removeEventListener('keydown', handleKeyDown);
+ previousFocusRef.current?.focus?.({ preventScroll: true });
+ previousFocusRef.current = null;
+ };
+ }, [onClose, open]);
+
+ const handleDragStart = (event: React.TouchEvent) => {
+ if (disableSwipeDismiss) return;
+ dragStartYRef.current = event.touches[0]?.clientY ?? null;
+ isDraggingRef.current = true;
+ };
+
+ const handleDragMove = (event: React.TouchEvent) => {
+ if (!isDraggingRef.current || dragStartYRef.current == null) return;
+ const currentY = event.touches[0]?.clientY ?? dragStartYRef.current;
+ const delta = currentY - dragStartYRef.current;
+ setDragOffset(delta > 0 ? delta : 0);
+ };
+
+ const handleDragEnd = () => {
+ if (!isDraggingRef.current) return;
+ isDraggingRef.current = false;
+ dragStartYRef.current = null;
+ if (dragOffset >= DISMISS_THRESHOLD_PX) {
+ setDragOffset(0);
+ onClose();
+ } else {
+ setDragOffset(0);
+ }
+ };
+
+ if (!mounted || !rootRef.current) return null;
+
+ const leading = onBack ? (
+
+ ) : (
+
+ );
+
+ const visualTransform = entered
+ ? `translateY(${dragOffset}px)`
+ : 'translateY(100%)';
+
+ return createPortal(
+ (null);
+
+export const DedicatedMobileAppProvider: React.FC<{
+ actions: MobileAppActions;
+ children: React.ReactNode;
+}> = ({ actions, children }) => (
+ {children}
+);
+
+/**
+ * Returns true when the surrounding tree is the dedicated MobileApp root
+ * (Capacitor or hosted /mobile.html), as opposed to the desktop responsive
+ * mobile path. Use this to suppress UI that exists only to bridge the
+ * desktop sidebar/layout into mobile, since the dedicated mobile root has
+ * its own native-feeling navigation and no sidebars to bridge into.
+ */
+export const useIsDedicatedMobileApp = (): boolean => React.useContext(DedicatedMobileAppContext) !== null;
+
+/**
+ * Returns the dedicated mobile app's surface-opening actions, or null when
+ * not inside the dedicated mobile root. Components living in shared chat /
+ * input code can use this to route navigation to mobile-native surfaces
+ * (e.g. open the Changes diff for a file from PendingChangesBar) instead of
+ * desktop sidebars.
+ */
+export const useMobileAppActions = (): MobileAppActions | null => React.useContext(DedicatedMobileAppContext);
diff --git a/packages/ui/src/apps/renderMobileApp.tsx b/packages/ui/src/apps/renderMobileApp.tsx
new file mode 100644
index 00000000..d5d33495
--- /dev/null
+++ b/packages/ui/src/apps/renderMobileApp.tsx
@@ -0,0 +1,61 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@/styles/fonts';
+import '@/index.css';
+import '@/lib/debug';
+import { SessionAuthGate } from '@/components/auth/SessionAuthGate';
+import { DiffWorkerProvider } from '@/contexts/DiffWorkerProvider';
+import { ThemeProvider } from '@/components/providers/ThemeProvider';
+import { ThemeSystemProvider } from '@/contexts/ThemeSystemContext';
+import type { RuntimeAPIs } from '@/lib/api/types';
+import { startAppearanceAutoSave } from '@/lib/appearanceAutoSave';
+import { applyPersistedDirectoryPreferences } from '@/lib/directoryPersistence';
+import { initializeLocale, I18nProvider } from '@/lib/i18n';
+import { initializeAppearancePreferences, syncDesktopSettings } from '@/lib/persistence';
+import { startModelPrefsAutoSave } from '@/lib/modelPrefsAutoSave';
+import { startTypographyWatcher } from '@/lib/typographyWatcher';
+import { MobileApp } from './MobileApp';
+
+const initializeSharedPreferences = () => {
+ initializeLocale();
+
+ void initializeAppearancePreferences().then(() => {
+ void Promise.all([
+ syncDesktopSettings(),
+ applyPersistedDirectoryPreferences(),
+ ]).catch((err) => {
+ console.error('[mobile-main] settings init failed:', err);
+ });
+
+ startAppearanceAutoSave();
+ startModelPrefsAutoSave();
+ startTypographyWatcher();
+ }).catch((err) => {
+ console.error('[mobile-main] appearance init failed:', err);
+ });
+};
+
+export function renderMobileApp(apis: RuntimeAPIs) {
+ initializeSharedPreferences();
+
+ const rootElement = document.getElementById('root');
+ if (!rootElement) {
+ throw new Error('Root element not found');
+ }
+
+ createRoot(rootElement).render(
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ );
+}
diff --git a/packages/ui/src/components/auth/SessionAuthGate.tsx b/packages/ui/src/components/auth/SessionAuthGate.tsx
index 9efed1fd..43037233 100644
--- a/packages/ui/src/components/auth/SessionAuthGate.tsx
+++ b/packages/ui/src/components/auth/SessionAuthGate.tsx
@@ -11,6 +11,9 @@ import { DesktopHostSwitcherInline } from '@/components/desktop/DesktopHostSwitc
import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
import { Icon } from "@/components/icon/Icon";
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+import { getRuntimeApiBaseUrl, getRuntimeKey, subscribeRuntimeEndpointChanged, switchRuntimeEndpoint } from '@/lib/runtime-switch';
+import { desktopHostsGet, desktopHostsSet, getDesktopHostApiUrl, normalizeHostUrl } from '@/lib/desktopHosts';
import {
authenticateWithPasskey,
cancelPasskeyCeremony,
@@ -23,9 +26,47 @@ import {
const STATUS_CHECK_ENDPOINT = '/auth/session';
const TRUST_DEVICE_STORAGE_KEY = 'openchamber.uiAuth.trustDevice';
+const LOCAL_DESKTOP_CLIENT_KIND = 'desktop-local';
+const LOCAL_DESKTOP_CLIENT_DEDUPE_KEY = 'desktop-local';
+
+const readLocalOrigin = (): string => {
+ if (typeof window === 'undefined') return '';
+ const injected = (window as typeof window & { __OPENCHAMBER_LOCAL_ORIGIN__?: string }).__OPENCHAMBER_LOCAL_ORIGIN__;
+ return typeof injected === 'string' ? injected.trim() : '';
+};
+
+const sameOrigin = (left: string, right: string): boolean => {
+ const normalizedLeft = normalizeHostUrl(left);
+ const normalizedRight = normalizeHostUrl(right);
+ if (!normalizedLeft || !normalizedRight) return false;
+ try {
+ return new URL(normalizedLeft).origin === new URL(normalizedRight).origin;
+ } catch {
+ return false;
+ }
+};
+
+const shouldIssueDesktopClientToken = (): boolean => {
+ return isDesktopShell();
+};
+
+const isLocalDesktopRuntime = (): boolean => {
+ if (!isDesktopShell()) return false;
+ const apiBaseUrl = getRuntimeApiBaseUrl();
+ const localOrigin = readLocalOrigin();
+ return Boolean(localOrigin && sameOrigin(localOrigin, apiBaseUrl));
+};
+
+const desktopClientAuthMetadata = (): { clientKind?: string; dedupeKey?: string } => {
+ if (!isLocalDesktopRuntime()) return {};
+ return {
+ clientKind: LOCAL_DESKTOP_CLIENT_KIND,
+ dedupeKey: LOCAL_DESKTOP_CLIENT_DEDUPE_KEY,
+ };
+};
const fetchSessionStatus = async (): Promise => {
- const response = await fetch(STATUS_CHECK_ENDPOINT, {
+ const response = await runtimeFetch(STATUS_CHECK_ENDPOINT, {
method: 'GET',
credentials: 'include',
headers: {
@@ -43,18 +84,106 @@ const readStoredTrustDevice = (): boolean => {
};
const submitPassword = async (password: string, trustDevice: boolean): Promise => {
- const response = await fetch(STATUS_CHECK_ENDPOINT, {
+ const issueClientToken = shouldIssueDesktopClientToken();
+ const response = await runtimeFetch(STATUS_CHECK_ENDPOINT, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
- body: JSON.stringify({ password, trustDevice }),
+ body: JSON.stringify({
+ password,
+ trustDevice,
+ issueClientToken,
+ clientLabel: 'OpenChamber Desktop',
+ ...desktopClientAuthMetadata(),
+ }),
});
return response;
};
+const issueDesktopClientToken = async (): Promise => {
+ if (!isDesktopShell()) {
+ return '';
+ }
+
+ const response = await runtimeFetch('/api/client-auth/clients', {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ Accept: 'application/json',
+ },
+ body: JSON.stringify({ label: 'OpenChamber Desktop', ...desktopClientAuthMetadata() }),
+ }).catch(() => null);
+ if (!response?.ok) {
+ return '';
+ }
+
+ const payload = await response.json().catch(() => null) as { token?: unknown } | null;
+ return typeof payload?.token === 'string' ? payload.token.trim() : '';
+};
+
+const issueDesktopClientTokenViaShell = async (password: string, trustDevice: boolean): Promise => {
+ if (!isDesktopShell() || typeof window === 'undefined') {
+ return '';
+ }
+ const invoke = (window as unknown as { __TAURI__?: { core?: { invoke?: (cmd: string, args?: Record) => Promise } } }).__TAURI__?.core?.invoke;
+ if (typeof invoke !== 'function') {
+ return '';
+ }
+ const response = await invoke('desktop_remote_password_login', {
+ url: getRuntimeApiBaseUrl(),
+ password,
+ trustDevice,
+ }).catch(() => null);
+ if (!response || typeof response !== 'object') {
+ return '';
+ }
+ const token = (response as { token?: unknown }).token;
+ return typeof token === 'string' ? token.trim() : '';
+};
+
+const persistDesktopClientToken = async (apiBaseUrl: string, clientToken: string): Promise => {
+ if (!isDesktopShell() || !clientToken) return;
+ const cfg = await desktopHostsGet().catch(() => null);
+ if (!cfg) return;
+ if (cfg.localOrigin && sameOrigin(cfg.localOrigin, apiBaseUrl)) {
+ await desktopHostsSet({
+ hosts: cfg.hosts,
+ defaultHostId: cfg.defaultHostId,
+ initialHostChoiceCompleted: cfg.initialHostChoiceCompleted,
+ localClientToken: clientToken,
+ }).catch(() => undefined);
+ return;
+ }
+ let changed = false;
+ const hosts = cfg.hosts.map((host) => {
+ if (!sameOrigin(getDesktopHostApiUrl(host), apiBaseUrl)) {
+ return host;
+ }
+ if (host.clientToken === clientToken) {
+ return host;
+ }
+ changed = true;
+ return { ...host, clientToken };
+ });
+ if (!changed) return;
+ await desktopHostsSet({
+ hosts,
+ defaultHostId: cfg.defaultHostId,
+ initialHostChoiceCompleted: cfg.initialHostChoiceCompleted,
+ }).catch(() => undefined);
+};
+
+const applyDesktopClientToken = async (clientToken: string): Promise => {
+ if (!clientToken) return;
+ const apiBaseUrl = getRuntimeApiBaseUrl();
+ await persistDesktopClientToken(apiBaseUrl, clientToken);
+ switchRuntimeEndpoint({ apiBaseUrl, clientToken, runtimeKey: getRuntimeKey() });
+};
+
const AuthShell: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const titlebarDragStyle = React.useMemo(() => {
return {
@@ -268,6 +397,21 @@ export const SessionAuthGate: React.FC = ({ children }) =>
void checkStatus();
}, [checkStatus, skipAuth]);
+ React.useEffect(() => {
+ if (skipAuth) {
+ return;
+ }
+
+ return subscribeRuntimeEndpointChanged(() => {
+ setPassword('');
+ setErrorMessage('');
+ setRetryAfter(undefined);
+ setIsTunnelLocked(false);
+ setState('pending');
+ void checkStatus();
+ });
+ }, [checkStatus, skipAuth]);
+
React.useEffect(() => {
if (!skipAuth && state === 'locked') {
hasResyncedRef.current = false;
@@ -336,8 +480,18 @@ export const SessionAuthGate: React.FC = ({ children }) =>
try {
const response = await submitPassword(password, trustDevice);
if (response.ok) {
+ const payload = await response.json().catch(() => null) as { clientToken?: unknown } | null;
+ const shouldUseClientToken = shouldIssueDesktopClientToken();
+ const clientToken = shouldUseClientToken
+ ? (typeof payload?.clientToken === 'string' && payload.clientToken.trim()
+ ? payload.clientToken.trim()
+ : await issueDesktopClientTokenViaShell(password, trustDevice) || await issueDesktopClientToken())
+ : '';
setPassword('');
setIsTunnelLocked(false);
+ if (clientToken) {
+ await applyDesktopClientToken(clientToken);
+ }
if (enrollPasskey && supportsPasskeys) {
try {
await registerPasskeyForCurrentSession();
@@ -402,7 +556,17 @@ export const SessionAuthGate: React.FC = ({ children }) =>
setErrorMessage('');
try {
- await authenticateWithPasskey(trustDevice);
+ const payload = await authenticateWithPasskey(trustDevice, {
+ issueClientToken: shouldIssueDesktopClientToken(),
+ clientLabel: 'OpenChamber Desktop',
+ ...desktopClientAuthMetadata(),
+ }) as { clientToken?: unknown } | null;
+ const clientToken = shouldIssueDesktopClientToken() && typeof payload?.clientToken === 'string' && payload.clientToken.trim()
+ ? payload.clientToken.trim()
+ : '';
+ if (clientToken) {
+ await applyDesktopClientToken(clientToken);
+ }
setPassword('');
setState('authenticated');
diff --git a/packages/ui/src/components/chat/ChatContainer.tsx b/packages/ui/src/components/chat/ChatContainer.tsx
index 641637ee..b315c94f 100644
--- a/packages/ui/src/components/chat/ChatContainer.tsx
+++ b/packages/ui/src/components/chat/ChatContainer.tsx
@@ -142,10 +142,8 @@ type ChatViewportProps = {
stickyUserHeader: boolean;
scrollRef: React.RefObject;
messageListRef: React.RefObject;
- turnStart: number;
pendingRevealWork: boolean;
renderedMessages: SessionMessageRecord[];
- hasMoreAboveTurns: boolean;
isLoadingOlder: boolean;
sessionIsWorking: boolean;
streamingMessageId: string | null;
@@ -158,7 +156,6 @@ type ChatViewportProps = {
} | null;
handleMessageContentChange: (reason?: ContentChangeReason) => void;
getAnimationHandlers: (messageId: string) => AnimationHandlers;
- handleLoadOlder: () => void;
handleHistoryScroll: () => void;
scrollToBottom: () => void;
sessionQuestions: QuestionRequest[];
@@ -173,10 +170,8 @@ const ChatViewport = React.memo(({
stickyUserHeader,
scrollRef,
messageListRef,
- turnStart,
pendingRevealWork,
renderedMessages,
- hasMoreAboveTurns,
isLoadingOlder,
sessionIsWorking,
streamingMessageId,
@@ -184,7 +179,6 @@ const ChatViewport = React.memo(({
retryOverlay,
handleMessageContentChange,
getAnimationHandlers,
- handleLoadOlder,
handleHistoryScroll,
scrollToBottom,
sessionQuestions,
@@ -230,7 +224,6 @@ const ChatViewport = React.memo(({
= ({ autoOpenDraft = tr
isPinned,
showScrollButton,
});
- const { loadEarlier } = timelineController;
-
const resumeToLatestInstant = React.useCallback(() => {
goToBottom('instant');
}, [goToBottom]);
@@ -662,10 +648,6 @@ export const ChatContainer: React.FC = ({ autoOpenDraft = tr
handleMessageContentChange('permission');
}, [handleMessageContentChange, sessionPermissions, sessionQuestions]);
- const handleLoadOlder = React.useCallback(() => {
- void loadEarlier({ userInitiated: true });
- }, [loadEarlier]);
-
const navigation = useChatTurnNavigation({
sessionId: currentSessionId,
turnIds: timelineController.turnIds,
@@ -957,10 +939,8 @@ export const ChatContainer: React.FC = ({ autoOpenDraft = tr
stickyUserHeader={stickyUserHeader}
scrollRef={scrollRef}
messageListRef={messageListRef}
- turnStart={timelineController.turnStart}
pendingRevealWork={timelineController.pendingRevealWork}
renderedMessages={timelineController.renderedMessages}
- hasMoreAboveTurns={timelineController.historySignals.hasMoreAboveTurns}
isLoadingOlder={timelineController.isLoadingOlder}
sessionIsWorking={sessionIsWorking}
streamingMessageId={streamingMessageId}
@@ -968,7 +948,6 @@ export const ChatContainer: React.FC = ({ autoOpenDraft = tr
retryOverlay={retryOverlay}
handleMessageContentChange={handleMessageContentChange}
getAnimationHandlers={getAnimationHandlers}
- handleLoadOlder={handleLoadOlder}
handleHistoryScroll={timelineController.handleHistoryScroll}
scrollToBottom={resumeToLatestInstant}
sessionQuestions={sessionQuestions}
diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index a4002bc4..ee0f63fb 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -31,12 +31,13 @@ import { PendingChangesBar } from './PendingChangesBar';
import { useChatSurfaceMode } from './useChatSurfaceMode';
import { MobileAgentButton } from './MobileAgentButton';
import { MobileModelButton } from './MobileModelButton';
-import { MobileSessionStatusBar } from './MobileSessionStatusBar';
+import { MobileSessionStatusBar, MobileSessionPanelTrigger } from './MobileSessionStatusBar';
import { useCurrentSessionActivity } from '@/hooks/useSessionActivity';
import { toast } from '@/components/ui';
import { Button } from '@/components/ui/button';
// useMessageStore removed — messages now come from sync system
import { isTauriShell, isVSCodeRuntime } from '@/lib/desktop';
+import { runtimeFetch } from '@/lib/runtime-fetch';
import { isIMECompositionEvent } from '@/lib/ime';
import { StopIcon } from '@/components/icons/StopIcon';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -56,7 +57,7 @@ import { DraftPresetChips } from './DraftPresetChips';
import { useChatSearchDirectory } from '@/hooks/useChatSearchDirectory';
import { opencodeClient } from '@/lib/opencode/client';
import { useProjectsStore } from '@/stores/useProjectsStore';
-import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
+import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, ProjectIconImage } from '@/lib/projectMeta';
import { useGitBranches, useGitStore, useIsGitRepo } from '@/stores/useGitStore';
import { useDirectoryStore } from '@/stores/useDirectoryStore';
import { useSkillsStore } from '@/stores/useSkillsStore';
@@ -1030,11 +1031,11 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const isExpandedInput = useUIStore((state) => state.isExpandedInput);
const setExpandedInput = useUIStore((state) => state.setExpandedInput);
const setTimelineDialogOpen = useUIStore((state) => state.setTimelineDialogOpen);
+ const { git: runtimeGit, vscode: vscodeApi } = useRuntimeAPIs();
const cycleAgentShortcutOverride = useUIStore((state) => state.shortcutOverrides.cycle_agent);
const cycleAgentShortcut = React.useMemo(() => (
getEffectiveShortcutCombo('cycle_agent', cycleAgentShortcutOverride ? { cycle_agent: cycleAgentShortcutOverride } : undefined)
), [cycleAgentShortcutOverride]);
- const { git: runtimeGit } = useRuntimeAPIs();
const { currentTheme } = useThemeSystem();
const chatSearchDirectory = useChatSearchDirectory();
const isGitRepo = useIsGitRepo(currentDirectory);
@@ -1869,14 +1870,8 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
else if (commandName === 'compact' && currentSessionId) {
try {
await sessionActions.waitForConnectionOrThrow();
- const { opencodeClient } = await import('@/lib/opencode/client');
- const sdk = opencodeClient.getSdkClient();
- const configState = useConfigStore.getState();
- await sdk.session.summarize({
- sessionID: currentSessionId,
- modelID: configState.currentModelId || '',
- providerID: configState.currentProviderId || '',
- });
+ const compactDirectory = useSessionUIStore.getState().getDirectoryForSession(currentSessionId) || currentDirectory || undefined;
+ await opencodeClient.summarizeSession(currentSessionId, currentProviderId, currentModelId, compactDirectory);
} catch (error) {
toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.compactFailed'));
}
@@ -2722,7 +2717,17 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
} else {
setShowFileMention(false);
}
- }, [inputMode, setCommandQuery, setMentionQuery, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete, setSkillQuery]);
+ }, [
+ inputMode,
+ setCommandQuery,
+ setMentionQuery,
+ setShowCommandAutocomplete,
+ setShowFileMention,
+ setShowSkillAutocomplete,
+ setShowSnippetAutocomplete,
+ setSkillQuery,
+ setSnippetQuery,
+ ]);
const insertTextAtSelection = React.useCallback((text: string) => {
if (!text) {
@@ -3469,7 +3474,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const blob = new Blob([byteArray], { type: result.mime || 'application/octet-stream' });
file = new File([blob], fileName, { type: result.mime || 'application/octet-stream' });
} else {
- const response = await fetch(`/api/fs/raw?path=${encodeURIComponent(normalizedPath)}`);
+ const response = await runtimeFetch('/api/fs/raw', { query: { path: normalizedPath } });
if (!response.ok) {
throw new Error(`Failed to read dropped file (${response.status})`);
}
@@ -3523,8 +3528,10 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
const handleVSCodePickFiles = React.useCallback(async () => {
try {
- const response = await fetch('/api/vscode/pick-files');
- const data = await response.json();
+ const data = (await vscodeApi?.pickFiles?.()) as {
+ files?: Array<{ name: string; mimeType?: string; dataUrl?: string }>;
+ skipped?: Array<{ name?: string; reason?: string }>;
+ } | undefined;
const picked = Array.isArray(data?.files) ? data.files : [];
const skipped = Array.isArray(data?.skipped) ? data.skipped : [];
@@ -3563,7 +3570,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
console.error('VS Code file pick failed', error);
toast.error(error instanceof Error ? error.message : t('chat.chatInput.toast.vscodePickFailed'));
}
- }, [attachFiles, t]);
+ }, [attachFiles, t, vscodeApi]);
const handlePickLocalFiles = React.useCallback(() => {
if (isVSCodeRuntime()) {
@@ -3823,30 +3830,32 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo
iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' } | null;
iconBackground?: string | null;
}) => {
- const imageUrl = getProjectIconImageUrl(
- { id: project.id, iconImage: project.iconImage ?? null },
- {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- },
- );
const projectIconName = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
const iconColor = getProjectIconColor(project.color);
+ const fallbackIcon = projectIconName ? (
+ 
+ = ({ onOpenSettings, scrollTo
<>
diff --git a/packages/ui/src/components/chat/FileAttachment.tsx b/packages/ui/src/components/chat/FileAttachment.tsx
index 53d84189..0c8f9e54 100644
--- a/packages/ui/src/components/chat/FileAttachment.tsx
+++ b/packages/ui/src/components/chat/FileAttachment.tsx
@@ -6,7 +6,7 @@ import { toast } from '@/components/ui';
import { cn } from '@/lib/utils';
import { openExternalUrl } from '@/lib/url';
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
-import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
import { Icon } from "@/components/icon/Icon";
import { useI18n } from '@/lib/i18n';
@@ -19,7 +19,8 @@ export const FileAttachmentButton = memo(() => {
const fileInputRef = useRef
+
+
+ );
+};
+
+const MobileHeader: React.FC<{
+ onOpenSessions: () => void;
+ onOpenMenu: () => void;
+}> = ({ onOpenSessions, onOpenMenu }) => {
+ const { t } = useI18n();
+ const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
+ const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
+ const projects = useProjectsStore((state) => state.projects);
+ const currentSession = useSession(currentSessionId, currentDirectory || undefined);
+
+ const projectLabel = React.useMemo(() => {
+ const directory = normalizePath(currentDirectory);
+ if (!directory) return t('mobile.header.noProject');
+ const project = projects.find((entry) => {
+ const projectPath = normalizePath(entry.path);
+ return directory === projectPath || directory.startsWith(`${projectPath}/`);
+ });
+ return project?.label?.trim() || getProjectLabel(project?.path || directory);
+ }, [currentDirectory, projects, t]);
+
+ const sessionTitle = currentSession?.title?.trim();
+ const primaryLabel = sessionTitle || projectLabel;
+ const secondaryLabel = sessionTitle ? projectLabel : currentSessionId ? t('mobile.sessions.untitled') : '';
+
+ return (
+
+ {items.map((item, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ setSessionsSheetOpen(true)}
+ onOpenMenu={() => setOverflowOpen(true)}
+ />
+
+
+
+
+
+ setOverflowOpen(false)}
+ items={overflowItems}
+ />
+
+ {sessionsSheetOpen ? (
+ setFilesOpen(false)}
+ ariaLabel={t('mobile.menu.files')}
+ headerless
+ >
+
+ setFilesOpen(false)} />
+
+
+
+
+
+
+
+
+ setSettingsOpen(false)}
+ ariaLabel={t('mobile.menu.settings')}
+ headerless
+ >
+
+ setSettingsOpen(false)}
+ />
+
+
+
+
+
+
+
+ {onClose ? (
+
+ ) : null}
+ void handleSyncAction('fetch', remote)}
+ onSync={(remote) => void handleSyncAction('sync', remote)}
+ disabled={commitAction !== null || isLoadingStatus}
+ aheadCount={status?.ahead ?? 0}
+ behindCount={status?.behind ?? 0}
+ trackingRemoteName={status?.tracking?.split('/')[0]}
+ hasUncommittedChanges={changeEntries.length > 0}
+ />
+
+
+ {changeEntries.length > 0 ? (
+
+
+ );
+};
+
+const MobileChangesState: React.FC<{
+ message: string;
+ description?: string;
+ loading?: boolean;
+ icon?: boolean;
+}> = ({ message, description, loading = false, icon = false }) => (
+
+
+ {t('mobile.nav.changes')}
++ {status?.current || currentDirectory} +
+
+ void handleCommit({ pushAfter: false })}
+ onCommitAndPush={() => void handleCommit({ pushAfter: true })}
+ commitAction={commitAction}
+ gitmojiEnabled={false}
+ onOpenGitmojiPicker={() => {}}
+ />
+
+ ) : (
+
+
+);
+
+const MobileDiffDetail: React.FC<{
+ path: string;
+ diff: { original: string; modified: string; isBinary?: boolean } | null;
+ fileExists: boolean;
+ error: string | null;
+ onBack: () => void;
+ onRetry: () => void;
+}> = ({ path, diff, fileExists, error, onBack, onRetry }) => {
+ const { t } = useI18n();
+ const language = React.useMemo(() => getLanguageFromExtension(path) || 'text', [path]);
+
+ return (
+
+ {loading ?
+ {message}
+ {description ?{description}
: null} +
+
+
+
+
+ );
+};
diff --git a/packages/ui/src/apps/MobileFilesSurface.tsx b/packages/ui/src/apps/MobileFilesSurface.tsx
new file mode 100644
index 00000000..f42d6378
--- /dev/null
+++ b/packages/ui/src/apps/MobileFilesSurface.tsx
@@ -0,0 +1,534 @@
+import React from 'react';
+import { File as PierreFile } from '@pierre/diffs/react';
+import {
+ RiArrowLeftLine,
+ RiArrowRightSLine,
+ RiClipboardLine,
+ RiCloseLine,
+ RiFileCopyLine,
+ RiFolder3Fill,
+ RiFolderOpenFill,
+ RiLoader4Line,
+ RiRefreshLine,
+ RiSearchLine,
+} from '@remixicon/react';
+
+import { toast } from '@/components/ui';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollShadow } from '@/components/ui/ScrollShadow';
+import { FileTypeIcon } from '@/components/icons/FileTypeIcon';
+import { JsonTreeView } from '@/components/ui/JsonTreeView';
+import { SimpleMarkdownRenderer } from '@/components/chat/MarkdownRenderer';
+import { PIERRE_RUNTIME_BASE_CSS } from '@/components/views/PierreDiffViewer';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
+import { copyTextToClipboard } from '@/lib/clipboard';
+import { useI18n } from '@/lib/i18n';
+import { ensurePierreThemeRegistered } from '@/lib/shiki/appThemeRegistry';
+import { getDefaultTheme } from '@/lib/theme/themes';
+import { getImageMimeType, getLanguageFromExtension, isImageFile } from '@/lib/toolHelpers';
+import type { FileListEntry, FileSearchResult } from '@/lib/api/types';
+import { getRuntimeUrlResolver } from '@/lib/runtime-url';
+import { refreshRuntimeUrlAuthToken } from '@/lib/runtime-auth';
+import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
+import { cn } from '@/lib/utils';
+
+type MobileFilesRoute =
+ | { type: 'browser'; directory: string }
+ | { type: 'file'; path: string; returnDirectory: string };
+
+const MAX_MOBILE_FILE_CHARS = 250_000;
+
+const normalizePath = (value?: string | null): string => (value || '').replace(/\\/g, '/').replace(/\/+$/g, '');
+
+const getNameFromPath = (path: string): string => {
+ const normalized = normalizePath(path);
+ if (!normalized || normalized === '/') return normalized || '/';
+ return normalized.split('/').filter(Boolean).at(-1) ?? normalized;
+};
+
+const getParentDirectory = (path: string): string | null => {
+ const normalized = normalizePath(path);
+ if (!normalized || normalized === '/') return null;
+ const index = normalized.lastIndexOf('/');
+ if (index <= 0) return normalized.startsWith('/') ? '/' : null;
+ return normalized.slice(0, index);
+};
+
+const getRelativePath = (path: string, root: string): string => {
+ const normalizedPath = normalizePath(path);
+ const normalizedRoot = normalizePath(root);
+ if (!normalizedRoot || normalizedPath === normalizedRoot) return getNameFromPath(normalizedPath);
+ if (normalizedPath.startsWith(`${normalizedRoot}/`)) return normalizedPath.slice(normalizedRoot.length + 1);
+ return normalizedPath;
+};
+
+const formatFileSize = (size?: number): string => {
+ if (typeof size !== 'number' || !Number.isFinite(size) || size < 0) return '';
+ if (size < 1024) return `${size} B`;
+ const units = ['KB', 'MB', 'GB'];
+ let value = size / 1024;
+ for (const unit of units) {
+ if (value < 1024 || unit === units[units.length - 1]) return `${value.toFixed(value >= 10 ? 0 : 1)} ${unit}`;
+ value /= 1024;
+ }
+ return '';
+};
+
+const getImageSrc = (path: string): string => {
+ if (path.toLowerCase().endsWith('.svg')) {
+ return '';
+ }
+ return getRuntimeUrlResolver().authenticatedAsset('/api/fs/raw', { path });
+};
+
+const isMarkdownFile = (path: string): boolean => /\.(md|mdx|markdown)$/i.test(path);
+const isJsonFile = (path: string): boolean => /\.(json|jsonc)$/i.test(path);
+
+type MobileFilesSurfaceProps = {
+ /** When provided, header gets a close X that calls this; used when the surface is hosted in MobileSurfaceShell. */
+ onClose?: () => void;
+};
+
+export const MobileFilesSurface: React.FC
+
+ {path}
+
+ {!fileExists ? (
+
+
+ )}
+
+
+
+ ) : !diff ? (
+
+
+ {t('mobile.changes.diffDetail.loadFailed')}
+{error}
+ +
+
+ {onClose ? (
+
+ ) : null}
+ {canGoBack && parentDirectory ? (
+
+ ) : null}
+
+
+ {directoryError ? (
+
+
+ );
+};
+
+const MobileFileRow: React.FC<{
+ name: string;
+ path: string;
+ directory: boolean;
+ meta?: string;
+ onClick: () => void;
+}> = ({ name, path, directory, meta, onClick }) => (
+
+);
+
+const MobileSearchResults: React.FC<{
+ results: FileSearchResult[];
+ isSearching: boolean;
+ onOpenFile: (path: string) => void;
+}> = ({ results, isSearching, onOpenFile }) => {
+ const { t } = useI18n();
+ const root = normalizePath(useEffectiveDirectory() ?? null);
+ if (isSearching) return
+
+
+ {directoryLabel}
+
+
+
+
+
+
+ {entries.length === 0 && !isLoadingDirectory ? (
+ entry.isDirectory ? openDirectory(entry.path) : openFile(entry.path)}
+ />
+ ))}
+
+ )}
+ {t('mobile.files.empty.directory')}
+ ) : null}
+ {entries.map((entry) => (
+
+ {results.map((result) => (
+ onOpenFile(result.path)}
+ />
+ ))}
+
+ );
+};
+
+const MobileFileDetail: React.FC<{
+ path: string;
+ content: string;
+ error: string | null;
+ isLoading: boolean;
+ onBack: () => void;
+ onCopyPath: () => void;
+ onCopyContent: () => void;
+}> = ({ path, content, error, isLoading, onBack, onCopyPath, onCopyContent }) => {
+ const { t } = useI18n();
+ const imageAuthKey = isImageFile(path) && !path.toLowerCase().endsWith('.svg') ? path : '';
+ const [imageAuthReadyKey, setImageAuthReadyKey] = React.useState('');
+
+ React.useEffect(() => {
+ if (!imageAuthKey) {
+ setImageAuthReadyKey('');
+ return;
+ }
+
+ let cancelled = false;
+ setImageAuthReadyKey('');
+ void refreshRuntimeUrlAuthToken(getRuntimeApiBaseUrl())
+ .then((token) => {
+ if (!cancelled && token) setImageAuthReadyKey(imageAuthKey);
+ })
+ .catch(() => {});
+
+ return () => {
+ cancelled = true;
+ };
+ }, [imageAuthKey]);
+
+ const imageAuthLoading = Boolean(imageAuthKey && imageAuthReadyKey !== imageAuthKey);
+ const imageSrc = imageAuthLoading ? '' : getImageSrc(path);
+
+ return (
+
+
+
+
+
+ );
+};
+
+const MobileTextFile: React.FC<{ path: string; content: string }> = ({ path, content }) => {
+ const { currentTheme, availableThemes, lightThemeId, darkThemeId } = useThemeSystem();
+ const lightTheme = React.useMemo(
+ () => availableThemes.find((theme) => theme.metadata.id === lightThemeId) ?? getDefaultTheme(false),
+ [availableThemes, lightThemeId],
+ );
+ const darkTheme = React.useMemo(
+ () => availableThemes.find((theme) => theme.metadata.id === darkThemeId) ?? getDefaultTheme(true),
+ [availableThemes, darkThemeId],
+ );
+
+ React.useEffect(() => {
+ ensurePierreThemeRegistered(lightTheme);
+ ensurePierreThemeRegistered(darkTheme);
+ }, [darkTheme, lightTheme]);
+
+ const pierreTheme = React.useMemo(
+ () => ({ light: lightTheme.metadata.id, dark: darkTheme.metadata.id }),
+ [darkTheme.metadata.id, lightTheme.metadata.id],
+ );
+
+ if (isMarkdownFile(path)) {
+ return (
+
+
+ {!isImageFile(path) ? (
+
+ ) : null}
+
+ {getNameFromPath(path)}
+
+ {isLoading || imageAuthLoading ? (
+
+ 
+
+ ) : isImageFile(path) ? (
+
+ };utf8,${encodeURIComponent(content)}`})
+
+ ) : (
+
+
+
+
+
+ );
+};
+
+const MobileFilesState: React.FC<{ message: string; loading?: boolean }> = ({ message, loading = false }) => (
+
+
+);
diff --git a/packages/ui/src/apps/MobileSessionsSheet.tsx b/packages/ui/src/apps/MobileSessionsSheet.tsx
new file mode 100644
index 00000000..8fb2e576
--- /dev/null
+++ b/packages/ui/src/apps/MobileSessionsSheet.tsx
@@ -0,0 +1,1162 @@
+import React from 'react';
+import {
+ RiAddLine,
+ RiArrowDownLine,
+ RiArrowDownSLine,
+ RiArrowUpLine,
+ RiCheckLine,
+ RiCloseLine,
+ RiDeleteBinLine,
+ RiDragMove2Line,
+ RiEdit2Line,
+ RiFolder6Line,
+ RiFolderAddLine,
+ RiSearchLine,
+} from '@remixicon/react';
+import type { Session } from '@opencode-ai/sdk/v2/client';
+import {
+ DndContext,
+ type DragEndEvent,
+ KeyboardSensor,
+ PointerSensor,
+ closestCenter,
+ useSensor,
+ useSensors,
+} from '@dnd-kit/core';
+import {
+ SortableContext,
+ sortableKeyboardCoordinates,
+ useSortable,
+ verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import { DirectoryExplorerDialog } from '@/components/session/DirectoryExplorerDialog';
+import { Icon } from '@/components/icon/Icon';
+import { NewWorktreeDialog } from '@/components/session/NewWorktreeDialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { ScrollShadow } from '@/components/ui/ScrollShadow';
+import { toast } from '@/components/ui';
+import { useThemeSystem } from '@/contexts/useThemeSystem';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import { useI18n } from '@/lib/i18n';
+import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, ProjectIconImage } from '@/lib/projectMeta';
+import { cn } from '@/lib/utils';
+import { listProjectWorktrees } from '@/lib/worktrees/worktreeManager';
+import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { refreshGlobalSessions, useGlobalSessionsStore } from '@/stores/useGlobalSessionsStore';
+import { useProjectsStore } from '@/stores/useProjectsStore';
+import { useSessionUIStore } from '@/sync/session-ui-store';
+import { useAllLiveSessions } from '@/sync/sync-context';
+import type { WorktreeMetadata } from '@/types/worktree';
+
+import { MobileSurfaceShell } from './MobileSurfaceShell';
+
+type MobileSessionsSheetProps = {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+};
+
+type ProjectMeta = {
+ id: string;
+ label: string;
+ path: string;
+ icon?: string | null;
+ color?: string | null;
+ iconImage?: { mime: string; updatedAt: number; source: 'custom' | 'auto' } | null;
+ iconBackground?: string | null;
+ isGitRepo: boolean;
+ worktrees: WorktreeMetadata[];
+};
+
+type WorktreeBucket = {
+ /** Stable key — usually the worktree path (or project root). */
+ key: string;
+ /** Display label — branch name when available, else folder name. */
+ label: string;
+ /** Filesystem path used as `directory` for new sessions started here. */
+ path: string;
+ /** Underlying worktree metadata, null when this bucket represents the project root. */
+ worktree: WorktreeMetadata | null;
+ /** Sessions matched into this bucket, sorted by recency desc. */
+ sessions: Session[];
+};
+
+type ProjectNode = {
+ project: ProjectMeta;
+ buckets: WorktreeBucket[];
+ totalSessions: number;
+ isActive: boolean;
+};
+
+const SESSIONS_PER_BUCKET = 7;
+
+const normalizePath = (value?: string | null): string =>
+ (value || '').replace(/\\/g, '/').replace(/\/+$/g, '');
+
+const getSessionDirectory = (session: Session): string => {
+ const sessionWithDirectory = session as Session & {
+ directory?: string | null;
+ project?: { worktree?: string | null } | null;
+ };
+ return normalizePath(sessionWithDirectory.directory ?? sessionWithDirectory.project?.worktree ?? null);
+};
+
+const getProjectLabel = (path: string): string => {
+ const normalized = normalizePath(path);
+ if (!normalized) return '';
+ const segments = normalized.split('/').filter(Boolean);
+ return segments[segments.length - 1]?.replace(/[-_]/g, ' ') || normalized;
+};
+
+const getSessionTimestamp = (session: Session): number => {
+ const raw = session.time?.updated ?? session.time?.created;
+ const value = typeof raw === 'number' ? raw : Number(raw);
+ return Number.isFinite(value) && value > 0 ? value : 0;
+};
+
+const formatRelativeShort = (timestamp: number): string => {
+ if (timestamp <= 0) return '';
+ const diffMs = Date.now() - timestamp;
+ if (diffMs < 60_000) return 'now';
+ const minutes = Math.floor(diffMs / 60_000);
+ if (minutes < 60) return `${minutes}m`;
+ const hours = Math.floor(minutes / 60);
+ if (hours < 24) return `${hours}h`;
+ const days = Math.floor(hours / 24);
+ if (days < 7) return `${days}d`;
+ return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }).format(new Date(timestamp));
+};
+
+const pathBelongsToRoot = (path: string, root: string): boolean => {
+ const normalizedPath = normalizePath(path);
+ const normalizedRoot = normalizePath(root);
+ return Boolean(
+ normalizedPath &&
+ normalizedRoot &&
+ (normalizedPath === normalizedRoot || normalizedPath.startsWith(`${normalizedRoot}/`)),
+ );
+};
+
+const sessionMatchesQuery = (session: Session, projectLabel: string, query: string): boolean => {
+ if (!query) return true;
+ const haystack = `${session.title ?? ''} ${session.id} ${getSessionDirectory(session)} ${projectLabel}`.toLowerCase();
+ return haystack.includes(query);
+};
+
+const MobileProjectIcon: React.FC<{
+ project: Pick
+ {loading ?
+ {message}
+
+
+
+ );
+};
+
+const ShowMoreRow: React.FC<{
+ remaining: number;
+ indent: number;
+ onClick: () => void;
+}> = ({ remaining, indent, onClick }) => {
+ const { t } = useI18n();
+ return (
+
+ );
+};
+
+const SortableProjectRow: React.FC<{
+ project: ProjectMeta;
+ totalSessions: number;
+ isFirst: boolean;
+ isLast: boolean;
+ confirmingDelete: boolean;
+ onMoveUp: () => void;
+ onMoveDown: () => void;
+ onRequestRemove: () => void;
+ onConfirmRemove: () => void;
+}> = ({
+ project,
+ totalSessions,
+ isFirst,
+ isLast,
+ confirmingDelete,
+ onMoveUp,
+ onMoveDown,
+ onRequestRemove,
+ onConfirmRemove,
+}) => {
+ const { t } = useI18n();
+ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: project.id });
+ const style: React.CSSProperties = {
+ transform: CSS.Transform.toString(transform),
+ transition,
+ zIndex: isDragging ? 10 : 1,
+ };
+ return (
+
+
+
+ );
+};
+
+export const MobileSessionsSheet: React.FC
+
+ {projectsMeta.length === 0 ? (
+ setDirectoryDialogOpen(true)}
+ >
+
+
+ {
+ setNewWorktreeDialogOpen(value);
+ if (!value) setWorktreeDialogProjectId(null);
+ }}
+ onWorktreeCreated={(worktreePath, options) => {
+ if (options?.sessionId) void setCurrentSession(options.sessionId, worktreePath);
+ else
+ openNewSessionDraft({
+ selectedProjectId: worktreeDialogProjectId,
+ directoryOverride: worktreePath,
+ preserveDirectoryOverride: true,
+ });
+ onOpenChange(false);
+ }}
+ />
+
+
+
+
+
+
+
+ {searchSessionMatches.length > 0 ? (
+
+
+ ) : null}
+
+ {searchProjectMatches.length > 0 ? (
+
+
+ ) : null}
+
+ ) : editingOrder ? (
+
+
+ {t('mobile.sessions.search.section.sessions')}
+
+
+ {searchSessionMatches.length}
+
+
+
+ {searchSessionMatches.map((session, index) => (
+
+ 0 && 'border-t border-border/30')}>
+ handleSelectSession(session)}
+ />
+
+ ))}
+
+
+ {t('mobile.sessions.search.section.projects')}
+
+
+ {searchProjectMatches.length}
+
+
+
+ {searchProjectMatches.map((project, index) => (
+
+ 0 && 'border-t border-border/30')}
+ >
+
+ {project.isGitRepo ? (
+ handleNewWorktree(project.id)}
+ />
+ ) : null}
+
+ ))}
+
+
+ p.id)}
+ strategy={verticalListSortingStrategy}
+ >
+
+
+
+ ) : (
+ + {t('mobile.sessions.editOrderHint')} +
+
+ {projectsMeta.map((project, index) => {
+ const node = projectNodes.find((n) => n.project.id === project.id);
+ return (
+ reorderProjects(index, index - 1)}
+ onMoveDown={() => reorderProjects(index, index + 1)}
+ onRequestRemove={() => handleRequestRemoveProject(project.id)}
+ onConfirmRemove={() => handleConfirmRemoveProject(project)}
+ />
+ );
+ })}
+
+
+ {orderedNodes.map((node, nodeIndex) => {
+ const projectExpanded = isProjectExpanded(node);
+ const buckets = normalizedQuery
+ ? node.buckets.filter((bucket) =>
+ bucket.sessions.some((session) =>
+ sessionMatchesQuery(session, node.project.label, normalizedQuery),
+ ),
+ )
+ : node.buckets;
+ const showWorktreeLevel = node.buckets.length > 1;
+ // Align session title left edge with the parent label's letters.
+ // Project label sits at ≈52px; worktree label at ≈68px. SessionRow adds 16px (dot + gap) on top of indent.
+ const sessionsIndent = showWorktreeLevel ? 52 : 36;
+ const activeWorktreePath = findActiveWorktreePath(node);
+ return (
+ 0 && 'border-t border-border/30')}
+ >
+
+ );
+ })}
+
+ )}
+
+
+ {node.project.isGitRepo ? (
+ handleNewWorktree(node.project.id)}
+ />
+ ) : null}
+
+
+ {projectExpanded ? (
+
+ {showWorktreeLevel
+ ? buckets.map((bucket) => {
+ const worktreeExpanded = isWorktreeExpanded(node, bucket);
+ const isActiveWt = activeWorktreePath === bucket.path;
+ return (
+
+ ) : null}
+
+
+ {worktreeExpanded ? (
+ (() => {
+ const bucketKey = `${node.project.id}::${bucket.key}`;
+ const showAll = Boolean(normalizedQuery) || expandedBucketsAll.has(bucketKey);
+ const visibleSessions = showAll
+ ? bucket.sessions
+ : bucket.sessions.slice(0, SESSIONS_PER_BUCKET);
+ const remaining = bucket.sessions.length - visibleSessions.length;
+ return (
+
+ );
+ })
+ : (() => {
+ const bucket = buckets[0];
+ if (!bucket) return null;
+ const bucketKey = `${node.project.id}::${bucket.key}`;
+ const showAll = Boolean(normalizedQuery) || expandedBucketsAll.has(bucketKey);
+ const visibleSessions = showAll
+ ? bucket.sessions
+ : bucket.sessions.slice(0, SESSIONS_PER_BUCKET);
+ const remaining = bucket.sessions.length - visibleSessions.length;
+ return (
+
+ {visibleSessions.map((session) => (
+ handleSelectSession(session)}
+ />
+ ))}
+ {remaining > 0 ? (
+
+ setExpandedBucketsAll((previous) => {
+ const next = new Set(previous);
+ next.add(bucketKey);
+ return next;
+ })
+ }
+ />
+ ) : null}
+
+ );
+ })()
+ ) : null}
+
+ {visibleSessions.map((session) => (
+ handleSelectSession(session)}
+ />
+ ))}
+ {remaining > 0 ? (
+
+ setExpandedBucketsAll((previous) => {
+ const next = new Set(previous);
+ next.add(bucketKey);
+ return next;
+ })
+ }
+ />
+ ) : null}
+
+ );
+ })()}
+
+
+);
diff --git a/packages/ui/src/apps/MobileSurfaceShell.tsx b/packages/ui/src/apps/MobileSurfaceShell.tsx
new file mode 100644
index 00000000..20da21b1
--- /dev/null
+++ b/packages/ui/src/apps/MobileSurfaceShell.tsx
@@ -0,0 +1,250 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react';
+
+import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+const SURFACE_ROOT_ID = 'mobile-surface-root';
+const DISMISS_THRESHOLD_PX = 90;
+const ENTER_DELAY_MS = 16;
+
+const ensureSurfaceRoot = (): HTMLElement | null => {
+ if (typeof document === 'undefined') return null;
+ let root = document.getElementById(SURFACE_ROOT_ID);
+ if (!root) {
+ root = document.createElement('div');
+ root.id = SURFACE_ROOT_ID;
+ document.body.appendChild(root);
+ }
+ return root;
+};
+
+export type MobileSurfaceShellProps = {
+ open: boolean;
+ onClose: () => void;
+ title?: React.ReactNode;
+ subtitle?: React.ReactNode;
+ trailing?: React.ReactNode;
+ /** When set, the leading icon becomes a back arrow that calls this. Otherwise it's a close X bound to onClose. */
+ onBack?: () => void;
+ /** If true, disable swipe-down-to-dismiss (e.g. when a nested view should keep gesture for itself). */
+ disableSwipeDismiss?: boolean;
+ /** If true, render only the drag handle and let the child render its own header. */
+ headerless?: boolean;
+ ariaLabel?: string;
+ children: React.ReactNode;
+};
+
+export const MobileSurfaceShell: React.FC{title}
+ {description ?{description}
: null} + {action ?{action}
: null}
+
+
+
+
+
,
+ rootRef.current,
+ );
+};
diff --git a/packages/ui/src/apps/VSCodeApp.tsx b/packages/ui/src/apps/VSCodeApp.tsx
index b3c74248..d0006eb2 100644
--- a/packages/ui/src/apps/VSCodeApp.tsx
+++ b/packages/ui/src/apps/VSCodeApp.tsx
@@ -13,6 +13,7 @@ import { useRouter } from '@/hooks/useRouter';
import { useWindowTitle } from '@/hooks/useWindowTitle';
import { opencodeClient } from '@/lib/opencode/client';
import type { RuntimeAPIs } from '@/lib/api/types';
+import { runtimeFetch } from '@/lib/runtime-fetch';
import { useFeatureFlagsStore } from '@/stores/useFeatureFlagsStore';
import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
import { useDirectoryStore } from '@/stores/useDirectoryStore';
@@ -70,7 +71,7 @@ export function VSCodeApp({ apis }: VSCodeAppProps) {
let cancelled = false;
const run = async () => {
- const res = await fetch('/health', { method: 'GET' }).catch(() => null);
+ const res = await runtimeFetch('/health', { method: 'GET' }).catch(() => null);
if (!res || !res.ok || cancelled) return;
const data = (await res.json().catch(() => null)) as null | {
planModeExperimentalEnabled?: unknown;
diff --git a/packages/ui/src/apps/mobileAppContext.tsx b/packages/ui/src/apps/mobileAppContext.tsx
new file mode 100644
index 00000000..6689ce74
--- /dev/null
+++ b/packages/ui/src/apps/mobileAppContext.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable react-refresh/only-export-components */
+import React from 'react';
+
+export type MobileAppActions = {
+ /** Open the Changes surface as a modal and (optionally) navigate it to a specific diff. */
+ openChanges: (options?: { diffPath?: string | null; staged?: boolean }) => void;
+ /** Open the Files surface as a modal. */
+ openFiles: () => void;
+ /** Open the Settings surface as a modal. */
+ openSettings: () => void;
+};
+
+const DedicatedMobileAppContext = React.createContext
+
+ {leading}
+
+ ) : null}
+
+
+
+
+ {!headerless ? (
+
+ {title ? (
+ typeof title === 'string' ? (
+
+ {trailing ? {title}
+ ) : ( + title + ) + ) : null} + {subtitle ? ( + typeof subtitle === 'string' ? ( +{subtitle}
+ ) : ( + subtitle + ) + ) : null} +{trailing}
: null}
+
+ {children}
+
+
+ = ({ onOpenSettings, scrollTo
)}
- {/* Mobile Session Status Bar - above input */}
+ {/* Mobile session panel: slide-up overlay toggled by MobileSessionPanelTrigger. */}
{isMobile &&
- {(turnStart > 0 || hasMoreAbove) && (
-
void;
@@ -64,6 +30,28 @@ interface SessionWithStatus extends Session {
_childIndicators?: Array<{ session: Session; isRunning: boolean }>;
}
+// Cross-project session source. Mirrors the dedicated MobileSessionsSheet:
+// global sessions cover all directories (even unbootstrapped ones), while the
+// live aggregate (`useAllLiveSessions`) surfaces fresher data and every
+// bootstrapped directory. Merging both makes other projects' sessions appear.
+function useAllProjectSessions(): Session[] {
+ const liveSessions = useAllLiveSessions();
+ const globalActiveSessions = useGlobalSessionsStore((state) => state.activeSessions);
+ return React.useMemo(() => {
+ const liveById = new Map(liveSessions.map((session) => [session.id, session]));
+ const merged = globalActiveSessions.map((session) => liveById.get(session.id) ?? session);
+ const seen = new Set(merged.map((session) => session.id));
+ for (const session of liveSessions) {
+ if (!seen.has(session.id)) merged.push(session);
+ }
+ return merged;
+ }, [globalActiveSessions, liveSessions]);
+}
+
+// Max sessions shown per (filtered) project list - a "recent" cap applied
+// after filtering, so each project view shows at most this many.
+const MAX_RECENT_SESSIONS = 25;
+
// Normalize path for comparison
const normalize = (value: string): string => {
if (!value) return '';
@@ -71,61 +59,21 @@ const normalize = (value: string): string => {
return replaced === '/' ? '/' : replaced.replace(/\/+$/, '');
};
-const getDisplaySessionTitle = (session: Session): string => {
- const title = session.title;
- if (title && title.trim()) return title;
- return 'New session';
-};
-
-const countUnreadSessions = (unseenCounts: Record): number => {
- let count = 0;
- for (const value of Object.values(unseenCounts)) {
- if (value > 0) count += 1;
- }
- return count;
-};
-
-function useCurrentContextUsage(): SessionContextUsage | null {
- const getContextUsage = useSessionUIStore((state) => state.getContextUsage);
- const getCurrentModel = useConfigStore((state) => state.getCurrentModel);
-
- const currentModel = getCurrentModel();
- const limit = currentModel && typeof currentModel.limit === 'object' && currentModel.limit !== null
- ? (currentModel.limit as Record)
- : null;
- const contextLimit = (limit && typeof limit.context === 'number' ? limit.context : 0);
- const outputLimit = (limit && typeof limit.output === 'number' ? limit.output : 0);
- return getContextUsage(contextLimit, outputLimit);
-}
-
-function useCurrentProjectDisplay() {
- const { currentTheme } = useThemeSystem();
- const projects = useProjectsStore((state) => state.projects);
- const activeProjectId = useProjectsStore((state) => state.activeProjectId);
- const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
- const activeProject = React.useMemo(
- () => projects.find((project) => project.id === activeProjectId) ?? null,
- [activeProjectId, projects],
- );
-
- const currentProjectIconImageUrl = activeProject
- ? getProjectIconImageUrl(activeProject, {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- })
- : null;
-
- return {
- projects,
- activeProjectId,
- homeDirectory,
- currentProjectLabel: activeProject?.label || formatDirectoryName(activeProject?.path || '', homeDirectory),
- currentProjectIcon: activeProject?.icon,
- currentProjectIconImageUrl,
- currentProjectIconBackground: activeProject?.iconBackground ?? null,
- currentProjectColor: activeProject?.color,
+// A session's directory, mirroring the store's canonical resolution.
+const sessionDirectory = (session: Session): string => {
+ const record = session as Session & {
+ directory?: string | null;
+ project?: { worktree?: string | null } | null;
};
-}
+ return normalize(record.directory ?? record.project?.worktree ?? '');
+};
+
+// Prefix-match used to group a session under a project root or worktree.
+const pathBelongsToRoot = (path: string, root: string): boolean => {
+ const p = normalize(path);
+ const r = normalize(root);
+ return Boolean(p && r && (p === r || p.startsWith(`${r}/`)));
+};
function useSessionGrouping(
sessions: Session[],
@@ -224,10 +172,7 @@ function useSessionGrouping(
return { sessions: processedSessions, totalRunning, totalUnread, totalCount: processedSessions.length };
}
-function useSessionHelpers(
- agents: Array<{ name: string }>,
- sessionStatus: Record | undefined
-) {
+function useSessionHelpers(agents: Array<{ name: string }>) {
const getSessionAgentName = React.useCallback((session: Session): string => {
const agent = (session as { agent?: string }).agent;
if (agent) return agent;
@@ -239,23 +184,20 @@ function useSessionHelpers(
}, [agents]);
const getSessionTitle = React.useCallback((session: Session): string => {
- return getDisplaySessionTitle(session);
+ const title = session.title;
+ if (title && title.trim()) return title;
+ return 'New session';
}, []);
- const isRunning = React.useCallback((sessionId: string): boolean => {
- const status = sessionStatus?.[sessionId];
- return status?.type === 'busy' || status?.type === 'retry';
- }, [sessionStatus]);
-
const unseenCounts = useNotificationStore((s) => s.index.session.unseenCount);
const needsAttention = React.useCallback((sessionId: string): boolean => {
return (unseenCounts[sessionId] ?? 0) > 0;
}, [unseenCounts]);
- return { getSessionAgentName, getSessionTitle, isRunning, needsAttention };
+ return { getSessionAgentName, getSessionTitle, needsAttention };
}
-// Hook to calculate project status indicators
+// Per-project status indicators (running / unread) for the filter chips.
function useProjectStatus(
sessions: Session[],
sessionStatus: Record | undefined,
@@ -265,7 +207,7 @@ function useProjectStatus(
const getSessionsByDirectory = useSessionUIStore((state) => state.getSessionsByDirectory);
const notifUnseenCounts = useNotificationStore((s) => s.index.session.unseenCount);
- const projectStatusMap = React.useCallback((projectPath: string): { hasRunning: boolean; hasUnread: boolean } => {
+ return React.useCallback((projectPath: string): { hasRunning: boolean; hasUnread: boolean } => {
const getStatusType = (sessionId: string): 'busy' | 'retry' | 'idle' => {
const status = sessionStatus?.[sessionId];
if (status?.type === 'busy' || status?.type === 'retry') return status.type;
@@ -273,9 +215,7 @@ function useProjectStatus(
};
const projectRoot = normalize(projectPath);
- if (!projectRoot) {
- return { hasRunning: false, hasUnread: false };
- }
+ if (!projectRoot) return { hasRunning: false, hasUnread: false };
const dirs: string[] = [projectRoot];
const worktrees = availableWorktreesByProject.get(projectRoot) ?? [];
@@ -283,9 +223,7 @@ function useProjectStatus(
const p = (meta && typeof meta === 'object' && 'path' in meta) ? (meta as { path?: unknown }).path : null;
if (typeof p === 'string' && p.trim()) {
const normalized = normalize(p);
- if (normalized && normalized !== projectRoot) {
- dirs.push(normalized);
- }
+ if (normalized && normalized !== projectRoot) dirs.push(normalized);
}
}
@@ -294,45 +232,49 @@ function useProjectStatus(
let hasUnread = false;
for (const dir of dirs) {
- const list = getSessionsByDirectory(dir);
- for (const session of list) {
- if (!session?.id || seen.has(session.id)) {
- continue;
- }
+ for (const session of getSessionsByDirectory(dir)) {
+ if (!session?.id || seen.has(session.id)) continue;
seen.add(session.id);
- const statusType = getStatusType(session.id);
- if (statusType === 'busy' || statusType === 'retry') {
- hasRunning = true;
- }
-
- if (session.id !== currentSessionId && (notifUnseenCounts[session.id] ?? 0) > 0) {
- hasUnread = true;
- }
-
- if (hasRunning && hasUnread) {
- break;
- }
- }
- if (hasRunning && hasUnread) {
- break;
+ if (getStatusType(session.id) !== 'idle') hasRunning = true;
+ if (session.id !== currentSessionId && (notifUnseenCounts[session.id] ?? 0) > 0) hasUnread = true;
+ if (hasRunning && hasUnread) break;
}
+ if (hasRunning && hasUnread) break;
}
return { hasRunning, hasUnread };
}, [getSessionsByDirectory, availableWorktreesByProject, sessionStatus, notifUnseenCounts, currentSessionId]);
+}
- return projectStatusMap;
+// Resolves the project's root directories (root + known worktrees) for
+// prefix-matching sessions, mirroring the dedicated MobileSessionsSheet.
+function useProjectRootsResolver() {
+ const availableWorktreesByProject = useSessionUIStore((state) => state.availableWorktreesByProject);
+
+ return React.useCallback((project: ProjectEntry): string[] => {
+ const projectRoot = normalize(project.path);
+ const roots = [projectRoot];
+ const worktrees = availableWorktreesByProject.get(projectRoot) ?? [];
+ for (const meta of worktrees) {
+ const p = (meta && typeof meta === 'object' && 'path' in meta) ? (meta as { path?: unknown }).path : null;
+ if (typeof p === 'string' && p.trim()) {
+ const normalized = normalize(p);
+ if (normalized) roots.push(normalized);
+ }
+ }
+ return roots;
+ }, [availableWorktreesByProject]);
}
function StatusIndicator({ isRunning, needsAttention }: { isRunning: boolean; needsAttention: boolean }) {
if (isRunning) {
- return (null);
- const editCancelledRef = React.useRef(false);
-
- React.useEffect(() => {
- if (isEditing) {
- editCancelledRef.current = false;
- const node = editInputRef.current;
- if (node) {
- node.focus();
- node.select();
- }
- }
- }, [isEditing]);
-
- return (
- (null);
- const editCancelledRef = React.useRef(false);
-
- React.useEffect(() => {
- setImageFailed(false);
- }, [currentProjectIconImageUrl]);
-
- React.useEffect(() => {
- if (isEditing) {
- editCancelledRef.current = false;
- const node = editInputRef.current;
- if (node) {
- node.focus();
- node.select();
- }
- }
- }, [isEditing]);
-
- return (
- (null);
- const isLongPress = React.useRef(false);
- const startPosRef = React.useRef<{ x: number; y: number } | null>(null);
- const hasMovedRef = React.useRef(false);
- const MOVE_THRESHOLD = 10; // pixels
-
- const start = React.useCallback((clientX: number, clientY: number) => {
- isLongPress.current = false;
- hasMovedRef.current = false;
- startPosRef.current = { x: clientX, y: clientY };
- timerRef.current = setTimeout(() => {
- if (!hasMovedRef.current) {
- isLongPress.current = true;
- onLongPress();
- }
- }, ms);
- }, [onLongPress, ms]);
-
- const move = React.useCallback((clientX: number, clientY: number) => {
- if (!startPosRef.current) return;
-
- const dx = Math.abs(clientX - startPosRef.current.x);
- const dy = Math.abs(clientY - startPosRef.current.y);
-
- if (dx > MOVE_THRESHOLD || dy > MOVE_THRESHOLD) {
- hasMovedRef.current = true;
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- timerRef.current = null;
- }
- }
- }, []);
-
- const end = React.useCallback(() => {
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- timerRef.current = null;
- }
- startPosRef.current = null;
- }, []);
-
- const handleClick = React.useCallback(() => {
- if (!isLongPress.current) {
- onClick();
- }
- }, [onClick]);
-
- return {
- onMouseDown: (e: React.MouseEvent) => start(e.clientX, e.clientY),
- onMouseUp: end,
- onMouseLeave: end,
- onMouseMove: (e: React.MouseEvent) => move(e.clientX, e.clientY),
- onTouchStart: (e: React.TouchEvent) => {
- const touch = e.touches[0];
- start(touch.clientX, touch.clientY);
- },
- onTouchMove: (e: React.TouchEvent) => {
- const touch = e.touches[0];
- move(touch.clientX, touch.clientY);
- },
- onTouchEnd: end,
- onClick: handleClick,
- };
-}
-
-// Sortable project item for edit panel
-interface SortableProjectItemProps {
- project: ProjectEntry;
- isFirst: boolean;
- isLast: boolean;
- onMoveUp: () => void;
- onMoveDown: () => void;
- onEdit: () => void;
- onDelete: () => void;
- formatProjectLabel: (project: ProjectEntry) => string;
-}
-
-function SortableProjectItem({
- project,
- isFirst,
- isLast,
- onMoveUp,
- onMoveDown,
- onEdit,
- onDelete,
- formatProjectLabel,
-}: SortableProjectItemProps) {
- const { currentTheme } = useThemeSystem();
- const {
- attributes,
- listeners,
- setNodeRef,
- transform,
- transition,
- isDragging,
- } = useSortable({ id: project.id });
-
- const style = {
- transform: CSS.Transform.toString(transform),
- transition,
- zIndex: isDragging ? 10 : 1,
- };
-
- const [imageFailed, setImageFailed] = React.useState(false);
- const projectIconName = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
- const projectIconImageUrl = !imageFailed
- ? getProjectIconImageUrl(project, {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- })
- : null;
- const projectColorVar = project.color ? (PROJECT_COLOR_MAP[project.color] ?? null) : null;
-
- return (
-
- {t('chat.mobileStatus.editProjects.footer')}
-
- }
- >
-
- );
-}
-
-// Project button component with long press support
-interface ProjectButtonProps {
- project: ProjectEntry;
- isActive: boolean;
- status: { hasRunning: boolean; hasUnread: boolean };
- projectColorVar: string | null;
- onProjectSwitch: () => void;
- onOpenEditPanel?: () => void;
- formatProjectLabel: (project: ProjectEntry) => string;
-}
-
-function ProjectButton({
- project,
- isActive,
- status,
- projectColorVar,
- onProjectSwitch,
- onOpenEditPanel,
- formatProjectLabel,
-}: ProjectButtonProps) {
- const { currentTheme } = useThemeSystem();
- const [imageFailed, setImageFailed] = React.useState(false);
- const projectIconName = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
- const projectIconImageUrl = !imageFailed
- ? getProjectIconImageUrl(project, {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- })
- : null;
-
- React.useEffect(() => {
- setImageFailed(false);
- }, [project.id, project.iconImage?.updatedAt]);
-
- const longPressHandlers = useLongPress(
- () => {
- if (onOpenEditPanel) {
- onOpenEditPanel();
- }
- },
- onProjectSwitch,
- 600
- );
+// A single session row sized for comfortable touch.
+function SessionItem({
+ session,
+ isCurrent,
+ getSessionAgentName,
+ getSessionTitle,
+ onClick,
+ needsAttention,
+}: {
+ session: SessionWithStatus;
+ isCurrent: boolean;
+ getSessionAgentName: (s: Session) => string;
+ getSessionTitle: (s: Session) => string;
+ onClick: () => void;
+ needsAttention: (sessionId: string) => boolean;
+}) {
+ const agentName = getSessionAgentName(session);
+ const agentColor = getAgentColor(agentName);
+ const attention = needsAttention(session.id);
return (
);
}
-// Project bar component for expanded view
-interface ProjectBarProps {
- projects: ProjectEntry[];
- activeProjectId: string | null;
- getProjectStatus: (path: string) => { hasRunning: boolean; hasUnread: boolean };
- onProjectSwitch: (projectId: string) => void;
- onAddProject: () => void;
- onRemoveProject?: (projectId: string) => void;
- homeDirectory: string | null;
+// A project filter pill sized for touch. Selecting it filters
+// the session list; it does NOT switch the active project.
+interface ProjectFilterChipProps {
+ label: string;
+ icon?: string | null;
+ project?: Pick | null;
+ iconOptions?: React.ComponentProps['options'];
+ iconBackground?: string | null;
+ colorVar?: string | null;
+ isActive: boolean;
+ status?: { hasRunning: boolean; hasUnread: boolean };
+ onClick: () => void;
}
-function ProjectBar({
- projects,
- activeProjectId,
- getProjectStatus,
- onProjectSwitch,
- onAddProject,
- onRemoveProject,
- homeDirectory
-}: ProjectBarProps) {
- const { t } = useI18n();
- const scrollRef = React.useRef(null);
- const [editPanelOpen, setEditPanelOpen] = React.useState(false);
- const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
- const [projectToDelete, setProjectToDelete] = React.useState(null);
- const reorderProjects = useProjectsStore((state) => state.reorderProjects);
-
- // Scroll active project into view
- React.useEffect(() => {
- if (scrollRef.current && activeProjectId) {
- const activeElement = scrollRef.current.querySelector(`[data-project-id="${activeProjectId}"]`);
- if (activeElement) {
- activeElement.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
- }
- }
- }, [activeProjectId]);
-
- const handleOpenEditPanel = () => {
- setEditPanelOpen(true);
- };
-
- const handleReorder = (fromIndex: number, toIndex: number) => {
- reorderProjects(fromIndex, toIndex);
- };
-
- const [editingProject, setEditingProject] = React.useState(null);
- const updateProjectMeta = useProjectsStore((state) => state.updateProjectMeta);
-
- const handleEditProject = (project: ProjectEntry) => {
- setEditingProject(project);
- };
-
- const handleSaveProjectEdit = (data: { label: string; icon: string | null; color: string | null; iconBackground: string | null }) => {
- if (editingProject) {
- updateProjectMeta(editingProject.id, data);
- }
- setEditingProject(null);
- };
-
- const handleDeleteProject = (project: ProjectEntry) => {
- setProjectToDelete(project);
- setDeleteDialogOpen(true);
- };
-
- const handleConfirmDelete = () => {
- if (projectToDelete && onRemoveProject) {
- onRemoveProject(projectToDelete.id);
- }
- setDeleteDialogOpen(false);
- setProjectToDelete(null);
- };
-
- if (projects.length === 0) {
- return (
-
- {isLoadingOlder ? (
-
- Loading…
-
- ) : (
-
- )}
-
- )}
-
{
- if (isEditing) return;
- e.stopPropagation();
- onDoubleClick?.(session.id, sessionTitle);
- }}
- onKeyDown={(e) => {
- if (isEditing) return;
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault();
- onClick();
- }
- }}
- className={cn(
- "flex items-center gap-0.5 px-1.5 py-px text-left transition-colors",
- "hover:bg-[var(--interactive-hover)] active:bg-[var(--interactive-selection)]",
- isCurrent && "bg-[var(--interactive-selection)]/30"
- )}
- >
-
- );
-}
-
function TokenUsageIndicator({ contextUsage }: { contextUsage: SessionContextUsage | null }) {
if (!contextUsage || contextUsage.totalTokens === 0) return null;
@@ -523,1412 +312,348 @@ function TokenUsageIndicator({ contextUsage }: { contextUsage: SessionContextUsa
);
}
-interface SessionStatusHeaderProps {
- currentSessionId?: string | null;
- currentSessionTitle: string;
- currentProjectLabel?: string;
- currentProjectIcon?: string | null;
- currentProjectIconImageUrl?: string | null;
- currentProjectIconBackground?: string | null;
- currentProjectColor?: string | null;
- onToggle: () => void;
- isExpanded?: boolean;
- childIndicators?: Array<{ session: Session; isRunning: boolean }>;
- isEditing?: boolean;
- editingTitle?: string;
- onTitleDoubleClick?: (sessionId: string, sessionTitle: string) => void;
- onEditingTitleChange?: (value: string) => void;
- onEditSave?: () => void;
- onEditCancel?: () => void;
-}
-
-function SessionStatusHeader({
- currentSessionId,
- currentSessionTitle,
- currentProjectLabel,
- currentProjectIcon,
- currentProjectIconImageUrl,
- currentProjectIconBackground,
- currentProjectColor,
- onToggle,
- isExpanded = false,
- childIndicators = [],
- isEditing = false,
- editingTitle = '',
- onTitleDoubleClick,
- onEditingTitleChange,
- onEditSave,
- onEditCancel,
-}: SessionStatusHeaderProps) {
- const [imageFailed, setImageFailed] = React.useState(false);
- const projectIconName = currentProjectIcon ? PROJECT_ICON_MAP[currentProjectIcon] : null;
- const imageUrl = !imageFailed ? currentProjectIconImageUrl : null;
- const projectColorVar = currentProjectColor ? (PROJECT_COLOR_MAP[currentProjectColor] ?? null) : null;
- const extraCount = childIndicators.length > 3 ? childIndicators.length - 3 : 0;
- const editInputRef = React.useRef
-
-
-
-
- {isEditing ? (
- onEditingTitleChange?.(e.target.value)}
- onClick={(e) => e.stopPropagation()}
- onDoubleClick={(e) => e.stopPropagation()}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- e.preventDefault();
- e.stopPropagation();
- onEditSave?.();
- } else if (e.key === 'Escape') {
- e.preventDefault();
- e.stopPropagation();
- editCancelledRef.current = true;
- onEditCancel?.();
- }
- }}
- onBlur={() => {
- if (editCancelledRef.current) {
- editCancelledRef.current = false;
- return;
- }
- onEditSave?.();
- }}
- className={cn(
- "flex-1 min-w-0 text-[13px] leading-tight px-1 py-px rounded",
- "bg-background border border-[var(--interactive-border)]",
- "text-[var(--surface-foreground)] outline-none",
- "focus:border-[var(--primary-base)]"
- )}
- />
- ) : (
-
- {sessionTitle}
-
- )}
-
- {(session._childIndicators?.length || 0) > 0 && (
-
- [
-
- )}
-
- {session._childIndicators!.map(({ session: child }) => {
- const childColor = getAgentColor(getSessionAgentName(child));
- return (
-
- ]
-
-
- );
- })}
- {extraCount > 0 && (
-
- +{extraCount}
-
- )}
- {
- if (isEditing) return;
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault();
- onToggle();
- }
- }}
- className="w-full flex flex-col px-2 py-0.5 text-left transition-colors hover:bg-[var(--interactive-hover)]"
- >
- {!isExpanded && currentProjectLabel && (
-
- );
-}
-
-// Hook for long press with movement detection
-function useLongPress(
- onLongPress: () => void,
- onClick: () => void,
- ms = 500
-) {
- const timerRef = React.useRef
-
- )}
-
- {imageUrl ? (
-
- setImageFailed(true)}
- />
-
- ) : projectIconName && (
-
-
-
- {isEditing ? (
- onEditingTitleChange?.(e.target.value)}
- onClick={(e) => e.stopPropagation()}
- onDoubleClick={(e) => e.stopPropagation()}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- e.preventDefault();
- e.stopPropagation();
- onEditSave?.();
- } else if (e.key === 'Escape') {
- e.preventDefault();
- e.stopPropagation();
- editCancelledRef.current = true;
- onEditCancel?.();
- }
- }}
- onBlur={() => {
- if (editCancelledRef.current) {
- editCancelledRef.current = false;
- return;
- }
- onEditSave?.();
- }}
- className={cn(
- "flex-1 min-w-0 text-[13px] leading-none px-1 py-0.5 rounded",
- "bg-background border border-[var(--interactive-border)]",
- "text-[var(--surface-foreground)] outline-none",
- "focus:border-[var(--primary-base)]"
- )}
- />
- ) : (
- {
- if (!currentSessionId || !onTitleDoubleClick) return;
- e.preventDefault();
- e.stopPropagation();
- onTitleDoubleClick(currentSessionId, currentSessionTitle);
- }}
- >
- {currentSessionTitle}
-
- )}
- {childIndicators.length > 0 && (
-
-
- [
-
- )}
-
- {childIndicators.slice(0, 3).map((child) => {
- const childAgent = (child.session as { agent?: string }).agent || 'agent';
- const childColor = getAgentColor(childAgent);
- return (
-
- ]
-
-
- );
- })}
- {extraCount > 0 && (
-
- +{extraCount}
-
- )}
-
- {/* Drag handle */}
-
-
- {/* Project info */}
-
- );
-}
-
-// Project edit panel for mobile
-interface ProjectEditPanelProps {
- isOpen: boolean;
- onClose: () => void;
- projects: ProjectEntry[];
- onReorder: (fromIndex: number, toIndex: number) => void;
- onEdit: (project: ProjectEntry) => void;
- onDelete: (project: ProjectEntry) => void;
- homeDirectory: string | null;
-}
-
-function ProjectEditPanel({
- isOpen,
- onClose,
- projects,
- onReorder,
- onEdit,
- onDelete,
- homeDirectory,
-}: ProjectEditPanelProps) {
- const { t } = useI18n();
- const [localProjects, setLocalProjects] = React.useState(projects);
-
- React.useEffect(() => {
- setLocalProjects(projects);
- }, [projects, isOpen]);
-
- const sensors = useSensors(
- useSensor(PointerSensor, {
- activationConstraint: {
- distance: 8,
- },
- }),
- useSensor(KeyboardSensor, {
- coordinateGetter: sortableKeyboardCoordinates,
- })
- );
-
- const handleDragEnd = (event: DragEndEvent) => {
- const { active, over } = event;
- if (over && active.id !== over.id) {
- const oldIndex = localProjects.findIndex((p) => p.id === active.id);
- const newIndex = localProjects.findIndex((p) => p.id === over.id);
-
- setLocalProjects((items) => arrayMove(items, oldIndex, newIndex));
- onReorder(oldIndex, newIndex);
- }
- };
-
- const handleMoveUp = (index: number) => {
- if (index > 0) {
- setLocalProjects((items) => arrayMove(items, index, index - 1));
- onReorder(index, index - 1);
- }
- };
-
- const handleMoveDown = (index: number) => {
- if (index < localProjects.length - 1) {
- setLocalProjects((items) => arrayMove(items, index, index + 1));
- onReorder(index, index + 1);
- }
- };
-
- const formatProjectLabel = (project: ProjectEntry): string => {
- return project.label?.trim()
- || formatDirectoryName(project.path, homeDirectory)
- || project.path;
- };
-
- return (
-
- {projectIconImageUrl ? (
-
- 
setImageFailed(true)}
- />
-
- ) : projectIconName ? (
-
-
- {/* Actions */}
-
- {/* Move up/down buttons (for non-drag sorting) */}
-
-
-
-
-
- {/* Edit button */}
-
-
- {/* Delete button */}
-
-
-
-
- p.id)}
- strategy={verticalListSortingStrategy}
- >
- {localProjects.map((project, index) => (
- handleMoveUp(index)}
- onMoveDown={() => handleMoveDown(index)}
- onEdit={() => onEdit(project)}
- onDelete={() => onDelete(project)}
- formatProjectLabel={formatProjectLabel}
- />
- ))}
-
-
-
- {localProjects.length === 0 && (
-
-
- {t('chat.mobileStatus.editProjects.empty')}
-
- )}
-
- {t('chat.mobileStatus.projects.empty')}
-
-
- );
- }
-
- const formatProjectLabel = (project: ProjectEntry): string => {
- return project.label?.trim()
- || formatDirectoryName(project.path, homeDirectory)
- || project.path;
- };
-
- // Handle touch events to prevent drawer swipe when scrolling project bar
- const handleTouchStart = (e: React.TouchEvent) => {
- // Store initial touch position for this component
- (e.currentTarget as HTMLElement).dataset.touchStartX = String(e.touches[0].clientX);
- (e.currentTarget as HTMLElement).dataset.touchStartY = String(e.touches[0].clientY);
- };
-
- const handleTouchMove = (e: React.TouchEvent) => {
- const target = e.currentTarget as HTMLElement;
- const startX = Number(target.dataset.touchStartX || 0);
- const startY = Number(target.dataset.touchStartY || 0);
- const deltaX = e.touches[0].clientX - startX;
- const deltaY = e.touches[0].clientY - startY;
-
- // If horizontal scroll dominates, prevent default to stop drawer gesture
- if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 5) {
- e.stopPropagation();
- }
- };
-
- const handleTouchEnd = (e: React.TouchEvent) => {
- // Clean up
- const target = e.currentTarget as HTMLElement;
- delete target.dataset.touchStartX;
- delete target.dataset.touchStartY;
- };
+function ProjectFilterChip({
+ label,
+ icon,
+ project,
+ iconOptions,
+ iconBackground,
+ colorVar,
+ isActive,
+ status,
+ onClick,
+}: ProjectFilterChipProps) {
+ const projectIconName = icon ? PROJECT_ICON_MAP[icon] : null;
+ const fallbackIcon = projectIconName ? (
+
- setEditPanelOpen(false)}
- projects={projects}
- onReorder={handleReorder}
- onEdit={handleEditProject}
- onDelete={handleDeleteProject}
- homeDirectory={homeDirectory}
- />
-
- {/* Project edit dialog */}
- {editingProject && (
- {
- if (!open) setEditingProject(null);
- }}
- projectId={editingProject.id}
- projectName={editingProject.label || formatDirectoryName(editingProject.path, homeDirectory)}
- projectPath={editingProject.path}
- initialIcon={editingProject.icon}
- initialColor={editingProject.color}
- initialIconBackground={editingProject.iconBackground}
- onSave={handleSaveProjectEdit}
- />
+
);
}
-const MobileSessionStatusBarCollapsed: React.FC<{ onExpand: () => void }> = ({
- onExpand,
+// The chip that lives in the composer footer and toggles the slide-up sheet.
+// This is the only persistent affordance; there is no longer a permanent bar.
+interface MobileSessionPanelTriggerProps {
+ footerIconButtonClass: string;
+ iconSizeClass: string;
+}
+
+export const MobileSessionPanelTrigger: React.FC = ({
+ footerIconButtonClass,
+ iconSizeClass,
}) => {
const { t } = useI18n();
- const sessionCount = useDirectorySync(React.useCallback((state) => state.session.length, []));
- const currentDirectory = useDirectoryStore((state) => state.currentDirectory);
- const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
- const currentSession = useSession(currentSessionId, currentDirectory || undefined);
- const statusCounts = useLiveSessionStatusCounts();
- const unseenCounts = useNotificationStore((state) => state.index.session.unseenCount);
- const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
- const updateSessionTitle = useSessionUIStore((state) => state.updateSessionTitle);
- const contextUsage = useCurrentContextUsage();
- const {
- currentProjectLabel,
- currentProjectIcon,
- currentProjectIconImageUrl,
- currentProjectIconBackground,
- currentProjectColor,
- } = useCurrentProjectDisplay();
+ const isMobile = useUIStore((state) => state.isMobile);
+ const showMobileSessionStatusBar = useUIStore((state) => state.showMobileSessionStatusBar);
+ const open = useUIStore((state) => state.mobileSessionPanelOpen);
+ const setOpen = useUIStore((state) => state.setMobileSessionPanelOpen);
- const totalUnread = React.useMemo(() => countUnreadSessions(unseenCounts), [unseenCounts]);
- const currentSessionTitle = currentSession
- ? getDisplaySessionTitle(currentSession)
- : t('chat.mobileStatus.swipeHint');
+ // Ensure the cross-project session list is loaded once, so the panel reflects
+ // every project, not just the active directory.
+ React.useEffect(() => {
+ if (isMobile && showMobileSessionStatusBar) {
+ void ensureGlobalSessionsLoaded();
+ }
+ }, [isMobile, showMobileSessionStatusBar]);
- const [editingSessionId, setEditingSessionId] = React.useState(null);
- const [editingTitle, setEditingTitle] = React.useState('');
-
- if (sessionCount === 0) {
+ if (!isMobile || !showMobileSessionStatusBar) {
return null;
}
- const handleSessionDoubleClick = (sessionId: string, sessionTitle: string) => {
- setEditingSessionId(sessionId);
- setEditingTitle(sessionTitle);
- };
-
- const handleEditCancel = () => {
- setEditingSessionId(null);
- setEditingTitle('');
- };
-
- const handleEditSave = () => {
- if (!editingSessionId) return;
- const trimmed = editingTitle.trim();
- const originalTitle = currentSession && currentSession.id === editingSessionId
- ? getDisplaySessionTitle(currentSession)
- : '';
- if (trimmed && trimmed !== originalTitle) {
- void updateSessionTitle(editingSessionId, trimmed);
- }
- setEditingSessionId(null);
- setEditingTitle('');
- };
-
return (
- openNewSessionDraft()}
- contextUsage={contextUsage}
- editingSessionId={editingSessionId}
- editingTitle={editingTitle}
- onTitleDoubleClick={handleSessionDoubleClick}
- onEditingTitleChange={setEditingTitle}
- onEditSave={handleEditSave}
- onEditCancel={handleEditCancel}
- />
- );
-};
-
-const MobileSessionStatusBarExpanded: React.FC void }> = ({
- onSessionSwitch,
- onCollapse,
-}) => {
- const { t } = useI18n();
- const sessions = useSessions();
- const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
- const sessionStatus = useAllSessionStatuses();
- const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
- const openNewSessionDraft = useSessionUIStore((state) => state.openNewSessionDraft);
- const updateSessionTitle = useSessionUIStore((state) => state.updateSessionTitle);
- const agents = useConfigStore((state) => state.agents);
- const setActiveProject = useProjectsStore((state) => state.setActiveProject);
- const setActiveProjectIdOnly = useProjectsStore((state) => state.setActiveProjectIdOnly);
- const removeProject = useProjectsStore((state) => state.removeProject);
- const contextUsage = useCurrentContextUsage();
- const {
- projects,
- activeProjectId,
- homeDirectory,
- currentProjectLabel,
- currentProjectIcon,
- currentProjectIconImageUrl,
- currentProjectIconBackground,
- currentProjectColor,
- } = useCurrentProjectDisplay();
-
- const { sessions: sortedSessions, totalRunning, totalUnread, totalCount } = useSessionGrouping(sessions, sessionStatus);
- const { getSessionAgentName, getSessionTitle, needsAttention } = useSessionHelpers(agents, sessionStatus);
- const getProjectStatus = useProjectStatus(sessions, sessionStatus, currentSessionId);
-
- const currentSession = sessions.find((s) => s.id === currentSessionId);
- const currentSessionTitle = currentSession
- ? getSessionTitle(currentSession)
- : t('chat.mobileStatus.swipeHint');
-
- // Calculate current session's child indicators
- const currentSessionWithStatus = sortedSessions.find((s) => s.id === currentSessionId);
- const currentSessionChildIndicators = currentSessionWithStatus?._childIndicators ?? [];
-
- const [isExpanded, setIsExpanded] = React.useState(false);
- const [editingSessionId, setEditingSessionId] = React.useState(null);
- const [editingTitle, setEditingTitle] = React.useState('');
-
- if (totalCount === 0) {
- return null;
- }
-
- const handleSessionClick = (sessionId: string) => {
- if (editingSessionId) return;
- setCurrentSession(sessionId);
- onSessionSwitch?.(sessionId);
- setIsExpanded(false);
- };
-
- const handleSessionDoubleClick = (sessionId: string, sessionTitle: string) => {
- setEditingSessionId(sessionId);
- setEditingTitle(sessionTitle);
- };
-
- const handleEditCancel = () => {
- setEditingSessionId(null);
- setEditingTitle('');
- };
-
- const handleEditSave = () => {
- if (!editingSessionId) return;
- const trimmed = editingTitle.trim();
- const target = sessions.find((s) => s.id === editingSessionId);
- const originalTitle = target ? getSessionTitle(target) : '';
- if (trimmed && trimmed !== originalTitle) {
- void updateSessionTitle(editingSessionId, trimmed);
- }
- setEditingSessionId(null);
- setEditingTitle('');
- };
-
- const handleEditingTitleChange = (value: string) => {
- setEditingTitle(value);
- };
-
- const handleCreateSession = () => {
- openNewSessionDraft();
- };
-
- const handleProjectSwitch = (projectId: string) => {
- if (projectId === activeProjectId) {
- return;
- }
- const draft = useSessionUIStore.getState().newSessionDraft;
- if (draft?.open) {
- if (
- draft.pendingWorktreeRequestId ||
- draft.bootstrapPendingDirectory ||
- draft.preserveDirectoryOverride
- ) {
- return;
- }
- const project = projects.find((p) => p.id === projectId);
- if (project) {
- setActiveProjectIdOnly(projectId);
- useSessionUIStore.getState().setNewSessionDraftTarget({
- projectId,
- directoryOverride: project.path,
- });
- }
- return;
- }
- setActiveProject(projectId);
- };
-
- const handleAddProject = () => {
- sessionEvents.requestDirectoryDialog();
- };
-
- return (
- {
- onCollapse();
- setIsExpanded(false);
+
);
};
export const MobileSessionStatusBar: React.FC = ({
onSessionSwitch,
}) => {
+ const { t } = useI18n();
+ const { currentTheme } = useThemeSystem();
+ const sessions = useAllProjectSessions();
+ const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
+ const sessionStatus = useAllSessionStatuses();
+ const setCurrentSession = useSessionUIStore((state) => state.setCurrentSession);
+ const getContextUsage = useSessionUIStore((state) => state.getContextUsage);
+ const agents = useConfigStore((state) => state.agents);
+ const getCurrentModel = useConfigStore((state) => state.getCurrentModel);
const isMobile = useUIStore((state) => state.isMobile);
const showMobileSessionStatusBar = useUIStore((state) => state.showMobileSessionStatusBar);
- const isMobileSessionStatusBarCollapsed = useUIStore((state) => state.isMobileSessionStatusBarCollapsed);
- const setIsMobileSessionStatusBarCollapsed = useUIStore((state) => state.setIsMobileSessionStatusBarCollapsed);
+ const open = useUIStore((state) => state.mobileSessionPanelOpen);
+ const setOpen = useUIStore((state) => state.setMobileSessionPanelOpen);
+
+ const projects = useProjectsStore((state) => state.projects);
+ const homeDirectory = useDirectoryStore((state) => state.homeDirectory);
+
+ const { sessions: sortedSessions, totalRunning, totalUnread } = useSessionGrouping(sessions, sessionStatus);
+ const { getSessionAgentName, getSessionTitle, needsAttention } = useSessionHelpers(agents);
+ const getProjectStatus = useProjectStatus(sessions, sessionStatus, currentSessionId);
+ const resolveProjectRoots = useProjectRootsResolver();
+
+ // Project filter, persisted in the UI store so the choice survives closing and
+ // reopening the sheet. Defaults to "All" so sessions from every project are
+ // visible regardless of which session is currently selected.
+ const filterProjectId = useUIStore((state) => state.mobileSessionFilterProjectId);
+ const setFilterProjectId = useUIStore((state) => state.setMobileSessionFilterProjectId);
+
+ // Refresh the cross-project session list when the panel opens (mirrors the
+ // dedicated MobileSessionsSheet). The active-directory sync only upserts the
+ // current project's sessions, so other projects need this global load.
+ React.useEffect(() => {
+ if (open) {
+ void refreshGlobalSessions(sessions);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [open]);
+
+ const formatProjectLabel = React.useCallback((project: ProjectEntry): string => {
+ return project.label?.trim()
+ || formatDirectoryName(project.path, homeDirectory)
+ || project.path;
+ }, [homeDirectory]);
+
+ // Filter sessions by the selected project (root + worktrees), using the
+ // store's canonical directory keying.
+ const filteredSessions = React.useMemo(() => {
+ if (!filterProjectId) return sortedSessions;
+ const project = projects.find((p) => p.id === filterProjectId);
+ if (!project) return sortedSessions;
+ const roots = resolveProjectRoots(project);
+ return sortedSessions.filter((session) => {
+ const dir = sessionDirectory(session);
+ return roots.some((root) => pathBelongsToRoot(dir, root));
+ });
+ }, [sortedSessions, filterProjectId, projects, resolveProjectRoots]);
+
+ // Cap to the most recent N (already sorted running-first, then by updated).
+ const visibleSessions = React.useMemo(
+ () => filteredSessions.slice(0, MAX_RECENT_SESSIONS),
+ [filteredSessions],
+ );
+
+ // Token usage for the current session.
+ const currentModel = getCurrentModel();
+ const limit = currentModel && typeof currentModel.limit === 'object' && currentModel.limit !== null
+ ? (currentModel.limit as Record)
+ : null;
+ const contextLimit = (limit && typeof limit.context === 'number' ? limit.context : 0);
+ const outputLimit = (limit && typeof limit.output === 'number' ? limit.output : 0);
+ const contextUsage = getContextUsage(contextLimit, outputLimit);
+
+ const handleSessionClick = (session: SessionWithStatus) => {
+ setCurrentSession(session.id, sessionDirectory(session) || null);
+ onSessionSwitch?.(session.id);
+ setOpen(false);
+ };
+
+ const renderHeader = React.useCallback((closeButton: React.ReactNode) => (
+ setIsMobileSessionStatusBarCollapsed(false)}
- />
- );
- }
-
return (
- setIsMobileSessionStatusBarCollapsed(true)}
- />
+ setOpen(false)}
+ title={t('mobile.sessions.search.section.sessions')}
+ renderHeader={renderHeader}
+ className="h-[72vh]"
+ contentMaxHeightClassName="max-h-full"
+ >
+
);
};
diff --git a/packages/ui/src/components/chat/PendingChangesBar.tsx b/packages/ui/src/components/chat/PendingChangesBar.tsx
index d7a5ad89..23d81614 100644
--- a/packages/ui/src/components/chat/PendingChangesBar.tsx
+++ b/packages/ui/src/components/chat/PendingChangesBar.tsx
@@ -3,6 +3,7 @@ import { useDirectoryStore } from '@/stores/useDirectoryStore';
import { useGitStore, useIsGitRepo } from '@/stores/useGitStore';
import { useUIStore } from '@/stores/useUIStore';
import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
+import { useMobileAppActions } from '@/apps/mobileAppContext';
import { sessionEvents } from '@/lib/sessionEvents';
import { normalizePath } from '@/components/session/sidebar/utils';
import { Icon } from "@/components/icon/Icon";
@@ -29,6 +30,7 @@ export const PendingChangesBar: React.FC = React.memo(() => {
);
const ensureStatus = useGitStore((s) => s.ensureStatus);
const fetchStatus = useGitStore((s) => s.fetchStatus);
+ const mobileActions = useMobileAppActions();
// Close popover when clicking outside
React.useEffect(() => {
@@ -90,6 +92,16 @@ export const PendingChangesBar: React.FC = React.memo(() => {
? file.path
: (currentDirectory.endsWith('/') ? currentDirectory : currentDirectory + '/') + file.path;
+ // Dedicated mobile root: open the per-file diff inside the mobile Changes surface.
+ if (mobileActions) {
+ mobileActions.openChanges({
+ diffPath: file.relativePath,
+ staged: file.hasStagedChanges && !file.hasWorkingChanges,
+ });
+ setIsExpanded(false);
+ return;
+ }
+
const editor = runtime?.editor;
if (editor) {
void editor.openFile(absolutePath);
diff --git a/packages/ui/src/components/chat/hooks/useChatTimelineController.test.ts b/packages/ui/src/components/chat/hooks/useChatTimelineController.test.ts
new file mode 100644
index 00000000..7c45cd4f
--- /dev/null
+++ b/packages/ui/src/components/chat/hooks/useChatTimelineController.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, test } from 'bun:test';
+
+import { shouldAutoLoadEarlierForUnderfilledPinnedViewport } from './useChatTimelineController';
+
+const baseInput = {
+ sessionId: 'ses_1',
+ isPinned: true,
+ canLoadEarlier: true,
+ isLoadingOlder: false,
+ pendingRevealWork: false,
+ scrollHeight: 799,
+ clientHeight: 800,
+};
+
+describe('shouldAutoLoadEarlierForUnderfilledPinnedViewport', () => {
+ test('loads when pinned content does not fill the viewport', () => {
+ expect(shouldAutoLoadEarlierForUnderfilledPinnedViewport(baseInput)).toBe(true);
+ });
+
+ test('does not load when content already overflows', () => {
+ expect(shouldAutoLoadEarlierForUnderfilledPinnedViewport({
+ ...baseInput,
+ scrollHeight: 802,
+ })).toBe(false);
+ });
+
+ test('does not load while user is away from bottom or history work is active', () => {
+ expect(shouldAutoLoadEarlierForUnderfilledPinnedViewport({
+ ...baseInput,
+ isPinned: false,
+ })).toBe(false);
+ expect(shouldAutoLoadEarlierForUnderfilledPinnedViewport({
+ ...baseInput,
+ isLoadingOlder: true,
+ })).toBe(false);
+ expect(shouldAutoLoadEarlierForUnderfilledPinnedViewport({
+ ...baseInput,
+ pendingRevealWork: true,
+ })).toBe(false);
+ });
+});
diff --git a/packages/ui/src/components/chat/hooks/useChatTimelineController.ts b/packages/ui/src/components/chat/hooks/useChatTimelineController.ts
index b2198ff0..41befabc 100644
--- a/packages/ui/src/components/chat/hooks/useChatTimelineController.ts
+++ b/packages/ui/src/components/chat/hooks/useChatTimelineController.ts
@@ -97,6 +97,21 @@ const rememberTurnModel = (key: string, value: { messages: ChatMessageEntry[]; m
turnModelCache.set(key, value)
}
+export const shouldAutoLoadEarlierForUnderfilledPinnedViewport = (input: {
+ sessionId: string | null;
+ isPinned: boolean;
+ canLoadEarlier: boolean;
+ isLoadingOlder: boolean;
+ pendingRevealWork: boolean;
+ scrollHeight: number;
+ clientHeight: number;
+}): boolean => {
+ if (!input.sessionId) return false;
+ if (!input.isPinned || !input.canLoadEarlier) return false;
+ if (input.isLoadingOlder || input.pendingRevealWork) return false;
+ return input.scrollHeight <= input.clientHeight + 1;
+};
+
export const useChatTimelineController = ({
sessionId,
messages,
@@ -524,26 +539,32 @@ export const useChatTimelineController = ({
void loadEarlier({ userInitiated: true });
}, [loadEarlier, scrollRef]);
+ const loadEarlierIfPinnedViewportUnderfilled = React.useCallback(() => {
+ if (historyInteractionRef.current) return;
+ const container = scrollRef.current;
+ if (!container) return;
+ if (!shouldAutoLoadEarlierForUnderfilledPinnedViewport({
+ sessionId: sessionIdRef.current,
+ isPinned: isPinnedRef.current,
+ canLoadEarlier: historySignalsRef.current.canLoadEarlier,
+ isLoadingOlder: isLoadingOlderRef.current,
+ pendingRevealWork: pendingRevealWorkRef.current,
+ scrollHeight: container.scrollHeight,
+ clientHeight: container.clientHeight,
+ })) {
+ return;
+ }
+
+ void loadEarlier();
+ }, [loadEarlier, scrollRef]);
+
React.useEffect(() => {
- if (!sessionId || isLoadingOlder || pendingRevealWork) {
- return;
- }
- if (!isPinned || !historySignals.canLoadEarlier) {
- return;
- }
if (typeof window === 'undefined') {
return;
}
const frame = window.requestAnimationFrame(() => {
- const container = scrollRef.current;
- if (!container) return;
- if (!isPinnedRef.current) return;
- if (!historySignalsRef.current.canLoadEarlier) return;
- if (isLoadingOlderRef.current || pendingRevealWorkRef.current) return;
- if (container.scrollHeight > container.clientHeight + 1) return;
-
- void loadEarlier();
+ loadEarlierIfPinnedViewportUnderfilled();
});
return () => window.cancelAnimationFrame(frame);
@@ -551,13 +572,49 @@ export const useChatTimelineController = ({
historySignals.canLoadEarlier,
isLoadingOlder,
isPinned,
- loadEarlier,
+ loadEarlierIfPinnedViewportUnderfilled,
pendingRevealWork,
renderedMessages.length,
- scrollRef,
sessionId,
]);
+ React.useEffect(() => {
+ if (typeof window === 'undefined' || typeof ResizeObserver === 'undefined') {
+ return;
+ }
+
+ const container = scrollRef.current;
+ if (!container) {
+ return;
+ }
+
+ let frame: number | null = null;
+ const scheduleCheck = () => {
+ if (frame !== null) {
+ return;
+ }
+ frame = window.requestAnimationFrame(() => {
+ frame = null;
+ loadEarlierIfPinnedViewportUnderfilled();
+ });
+ };
+
+ const observer = new ResizeObserver(scheduleCheck);
+ observer.observe(container);
+ const content = container.firstElementChild;
+ if (content instanceof Element) {
+ observer.observe(content);
+ }
+ scheduleCheck();
+
+ return () => {
+ if (frame !== null) {
+ window.cancelAnimationFrame(frame);
+ }
+ observer.disconnect();
+ };
+ }, [loadEarlierIfPinnedViewportUnderfilled, scrollRef, sessionId]);
+
const scrollToTurn = React.useCallback(async (
turnId: string,
options?: { behavior?: ScrollBehavior },
diff --git a/packages/ui/src/components/chat/message/MessageBody.tsx b/packages/ui/src/components/chat/message/MessageBody.tsx
index bbe14da3..fc53e605 100644
--- a/packages/ui/src/components/chat/message/MessageBody.tsx
+++ b/packages/ui/src/components/chat/message/MessageBody.tsx
@@ -31,6 +31,7 @@ import { TextSelectionMenu } from './TextSelectionMenu';
import { copyTextToClipboard } from '@/lib/clipboard';
import { useChatSurfaceMode } from '@/components/chat/useChatSurfaceMode';
import { isVSCodeRuntime } from '@/lib/desktop';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
import { toPng } from 'html-to-image';
import { toast } from '@/components/ui';
import { Icon } from "@/components/icon/Icon";
@@ -1034,6 +1035,7 @@ const AssistantMessageBody = React.memo(({
const collapsibleThinkingBlocks = useUIStore((state) => state.collapsibleThinkingBlocks);
const groupReasoningBlocks = useUIStore((state) => state.groupReasoningBlocks);
const showSplitAssistantMessageActions = useUIStore((state) => state.showSplitAssistantMessageActions);
+ const vscodeApi = useRuntimeAPIs().vscode;
const isSortedRenderMode = chatRenderMode === 'sorted';
const collapsedPreviewCount = 7;
const isLastAssistantInTurn = turnGroupingContext?.isLastAssistantInTurn ?? false;
@@ -1319,17 +1321,10 @@ const AssistantMessageBody = React.memo(({
const fileName = `message-${messageId}.png`;
if (isVSCodeRuntime()) {
- const response = await fetch('/api/vscode/save-image', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ fileName, dataUrl }),
- });
-
- if (!response.ok) {
+ const payload = await vscodeApi?.saveImage?.({ fileName, dataUrl }) as { saved?: boolean; canceled?: boolean; error?: string } | undefined;
+ if (!payload) {
throw new Error('Failed to save image in VS Code');
}
-
- const payload = await response.json() as { saved?: boolean; canceled?: boolean; error?: string };
if (payload.saved !== true) {
if (payload.canceled) {
return;
@@ -1355,7 +1350,7 @@ const AssistantMessageBody = React.memo(({
}
}
},
- [messageId, t]
+ [messageId, t, vscodeApi]
);
const activityPartsForTurn = React.useMemo(() => {
diff --git a/packages/ui/src/components/chat/message/ToolOutputDialog.tsx b/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
index 3a2cce18..d322cca5 100644
--- a/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
+++ b/packages/ui/src/components/chat/message/ToolOutputDialog.tsx
@@ -27,6 +27,7 @@ import { VirtualizedCodeBlock, type CodeLine } from './parts/VirtualizedCodeBloc
import { JsonTreeView } from '@/components/ui/JsonTreeView';
import { Icon } from "@/components/icon/Icon";
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
interface ToolOutputDialogProps {
popup: ToolPopupContent;
@@ -739,7 +740,7 @@ const MermaidPreviewDialog: React.FC<{
if (!normalizedPath) {
sourcePromise = Promise.reject(new Error('Invalid local file path for Mermaid preview.'));
} else {
- sourcePromise = fetch(`/api/fs/raw?path=${encodeURIComponent(normalizedPath)}`)
+ sourcePromise = runtimeFetch('/api/fs/raw', { query: { path: normalizedPath } })
.then((response) => {
if (!response.ok) {
return Promise.reject(new Error(`Failed to read diagram file (${response.status})`));
diff --git a/packages/ui/src/components/desktop/DesktopHostSwitcher.tsx b/packages/ui/src/components/desktop/DesktopHostSwitcher.tsx
index 8fdd616e..72a73685 100644
--- a/packages/ui/src/components/desktop/DesktopHostSwitcher.tsx
+++ b/packages/ui/src/components/desktop/DesktopHostSwitcher.tsx
@@ -9,29 +9,27 @@ import {
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import { toast } from '@/components/ui';
+import { isElectronShell, isTauriShell, isDesktopShell } from '@/lib/desktop';
import { Icon } from "@/components/icon/Icon";
-import { isTauriShell, isDesktopShell } from '@/lib/desktop';
import { useUIStore } from '@/stores/useUIStore';
import { useI18n } from '@/lib/i18n';
import {
desktopHostProbe,
desktopHostsGet,
desktopHostsSet,
+ desktopLocalClientTokenGet,
desktopOpenNewWindowAtUrl,
+ getDesktopHostApiUrl,
locationMatchesHost,
normalizeHostUrl,
redactSensitiveUrl,
+ resolveDesktopHostUrl,
type DesktopHost,
type HostProbeResult,
} from '@/lib/desktopHosts';
+import { getRuntimeApiBaseUrl, subscribeRuntimeEndpointChanged, switchRuntimeEndpoint } from '@/lib/runtime-switch';
import {
desktopSshConnect,
desktopSshDisconnect,
@@ -44,11 +42,18 @@ const LOCAL_HOST_ID = 'local';
const SSH_CONNECT_TIMEOUT_MS = 90_000;
const SSH_CONNECT_CANCELLED_ERROR = 'SSH connection cancelled';
+const runtimeKeyForHost = (host: DesktopHost): string => {
+ if (host.id === LOCAL_HOST_ID) return 'local';
+ return `host:${host.id}`;
+};
+
type HostStatus = {
status: HostProbeResult['status'];
latencyMs: number;
};
+type HostDisplayStatus = HostProbeResult['status'] | 'checking' | null;
+
const toNavigationUrl = (rawUrl: string): string => {
const normalized = normalizeHostUrl(rawUrl);
if (!normalized) {
@@ -71,37 +76,55 @@ const getLocalOrigin = (): string => {
return window.__OPENCHAMBER_LOCAL_ORIGIN__ || window.location.origin;
};
-const makeId = (): string => {
- if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
- return crypto.randomUUID();
- }
- return `host-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+const getLocalClientToken = async (): Promise => {
+ if (!isElectronShell()) return '';
+ return desktopLocalClientTokenGet().catch(() => '');
};
-const statusDotClass = (status: HostProbeResult['status'] | null): string => {
+const statusDotClass = (status: HostDisplayStatus): string => {
if (status === 'ok') return 'bg-status-success';
if (status === 'auth') return 'bg-status-warning';
+ if (status === 'update-recommended') return 'bg-status-warning';
+ if (status === 'incompatible') return 'bg-status-error';
if (status === 'wrong-service') return 'bg-status-error';
if (status === 'unreachable') return 'bg-status-error';
+ if (status === 'checking') return 'bg-status-info';
return 'bg-muted-foreground/40';
};
-const statusLabelKey = (status: HostProbeResult['status'] | null):
+const isBlockedHostStatus = (status: HostProbeResult['status'] | null): boolean => {
+ return status === 'unreachable' || status === 'wrong-service' || status === 'incompatible';
+};
+
+const isBlockedDisplayStatus = (status: HostDisplayStatus): boolean => {
+ return status === 'unreachable' || status === 'wrong-service' || status === 'incompatible';
+};
+
+const statusLabelKey = (status: HostDisplayStatus):
| 'desktopHostSwitcher.status.connected'
| 'desktopHostSwitcher.status.authRequired'
+ | 'desktopHostSwitcher.status.checking'
+ | 'desktopHostSwitcher.status.updateRecommended'
+ | 'desktopHostSwitcher.status.incompatible'
| 'desktopHostSwitcher.status.wrongService'
| 'desktopHostSwitcher.status.unreachable'
| 'desktopHostSwitcher.status.unknown' => {
if (status === 'ok') return 'desktopHostSwitcher.status.connected';
if (status === 'auth') return 'desktopHostSwitcher.status.authRequired';
+ if (status === 'checking') return 'desktopHostSwitcher.status.checking';
+ if (status === 'update-recommended') return 'desktopHostSwitcher.status.updateRecommended';
+ if (status === 'incompatible') return 'desktopHostSwitcher.status.incompatible';
if (status === 'wrong-service') return 'desktopHostSwitcher.status.wrongService';
if (status === 'unreachable') return 'desktopHostSwitcher.status.unreachable';
return 'desktopHostSwitcher.status.unknown';
};
-const statusIcon = (status: HostProbeResult['status'] | null) => {
+const statusIcon = (status: HostDisplayStatus) => {
+ if (status === 'checking') return ([]);
const [defaultHostId, setDefaultHostId] = React.useState(null);
const [statusById, setStatusById] = React.useState>({});
+ const [probingHostIds, setProbingHostIds] = React.useState>({});
const [isLoading, setIsLoading] = React.useState(false);
const [isProbing, setIsProbing] = React.useState(false);
const [isSaving, setIsSaving] = React.useState(false);
@@ -277,26 +322,32 @@ export function DesktopHostSwitcherDialog({
error: null,
});
const [error, setError] = React.useState('');
+ const [localOrigin, setLocalOrigin] = React.useState(() => getLocalOrigin());
const [editingId, setEditingId] = React.useState(null);
const [editLabel, setEditLabel] = React.useState('');
const [editUrl, setEditUrl] = React.useState('');
- const [newLabel, setNewLabel] = React.useState('');
- const [newUrl, setNewUrl] = React.useState('');
- const [isAddFormOpen, setIsAddFormOpen] = React.useState(!embedded);
+ const [runtimeEndpointEpoch, setRuntimeEndpointEpoch] = React.useState(0);
const sshSwitchTokenRef = React.useRef(0);
const allHosts = React.useMemo(() => {
- const local = buildLocalHost();
+ const local = buildLocalHost(localOrigin);
const normalizedRemote = configHosts.map((h) => ({
...h,
url: normalizeHostUrl(h.url) || h.url,
}));
return [local, ...normalizedRemote];
- }, [configHosts]);
+ }, [configHosts, localOrigin]);
- const current = React.useMemo(() => resolveCurrentHost(allHosts), [allHosts]);
+ React.useEffect(() => {
+ return subscribeRuntimeEndpointChanged(() => setRuntimeEndpointEpoch((epoch) => epoch + 1));
+ }, []);
+
+ const current = React.useMemo(() => {
+ void runtimeEndpointEpoch;
+ return resolveCurrentHost(allHosts);
+ }, [allHosts, runtimeEndpointEpoch]);
const currentDefaultLabel = React.useMemo(() => {
const id = defaultHostId || LOCAL_HOST_ID;
return allHosts.find((h) => h.id === id)?.label || t('desktopHostSwitcher.instance.local');
@@ -334,6 +385,9 @@ export function DesktopHostSwitcherDialog({
desktopSshInstancesGet().catch(() => ({ instances: [] })),
getSshStatusById(),
]);
+ if (cfg.localOrigin) {
+ setLocalOrigin(cfg.localOrigin);
+ }
const nextSshHostIds: Record = {};
for (const instance of sshCfg.instances) {
nextSshHostIds[instance.id] = true;
@@ -356,14 +410,21 @@ export function DesktopHostSwitcherDialog({
const probeAll = React.useCallback(async (hosts: DesktopHost[]) => {
if (!isTauriShell()) return;
setIsProbing(true);
+ const nextProbingHostIds: Record = {};
+ for (const host of hosts) {
+ nextProbingHostIds[host.id] = true;
+ }
+ setProbingHostIds(nextProbingHostIds);
try {
+ const localClientToken = await getLocalClientToken();
const results = await Promise.all(
hosts.map(async (h) => {
- const url = normalizeHostUrl(h.url);
+ const url = normalizeHostUrl(isElectronShell() ? getDesktopHostApiUrl(h) : h.url);
if (!url) {
return [h.id, { status: 'unreachable' as const, latencyMs: 0 } satisfies HostStatus] as const;
}
- const res = await desktopHostProbe(url).catch((): HostProbeResult => ({ status: 'unreachable', latencyMs: 0 }));
+ const clientToken = h.id === LOCAL_HOST_ID ? localClientToken : (h.clientToken || '');
+ const res = await desktopHostProbe(url, { clientToken: clientToken || null }).catch((): HostProbeResult => ({ status: 'unreachable', latencyMs: 0 }));
return [h.id, { status: res.status, latencyMs: res.latencyMs } satisfies HostStatus] as const;
})
);
@@ -373,6 +434,7 @@ export function DesktopHostSwitcherDialog({
}
setStatusById(next);
} finally {
+ setProbingHostIds({});
setIsProbing(false);
}
}, []);
@@ -382,16 +444,13 @@ export function DesktopHostSwitcherDialog({
setEditingId(null);
setEditLabel('');
setEditUrl('');
- setNewLabel('');
- setNewUrl('');
- setIsAddFormOpen(!embedded);
setSwitchingHostId(null);
setSshSwitchModal({ open: false, hostId: null, hostLabel: '', phase: 'idle', detail: null, error: null });
setError('');
return;
}
void refresh();
- }, [embedded, open, refresh]);
+ }, [open, refresh]);
React.useEffect(() => {
if (!open) return;
@@ -425,9 +484,32 @@ export function DesktopHostSwitcherDialog({
}, [open]);
const handleSwitch = React.useCallback(async (host: DesktopHost) => {
- const origin = host.id === LOCAL_HOST_ID ? getLocalOrigin() : (normalizeHostUrl(host.url) || '');
+ const origin = host.id === LOCAL_HOST_ID ? localOrigin : (normalizeHostUrl(host.url) || '');
+ const apiOrigin = host.id === LOCAL_HOST_ID ? localOrigin : (normalizeHostUrl(getDesktopHostApiUrl(host)) || '');
if (!origin) return;
+ if (isElectronShell()) {
+ if (!apiOrigin) return;
+ setSwitchingHostId(host.id);
+ const clientToken = host.id === LOCAL_HOST_ID ? await getLocalClientToken() : (host.clientToken || '');
+ const probe = await desktopHostProbe(apiOrigin, { clientToken: clientToken || null }).catch((): HostProbeResult => ({ status: 'unreachable', latencyMs: 0 }));
+ setStatusById((prev) => ({
+ ...prev,
+ [host.id]: { status: probe.status, latencyMs: probe.latencyMs },
+ }));
+
+ if (isBlockedHostStatus(probe.status)) {
+ toast.error(t('desktopHostSwitcher.toast.instanceUnreachable', { host: redactSensitiveUrl(host.label) }));
+ setSwitchingHostId(null);
+ return;
+ }
+
+ switchRuntimeEndpoint({ apiBaseUrl: apiOrigin, clientToken: clientToken || null, runtimeKey: runtimeKeyForHost(host) });
+ onHostSwitched?.();
+ setSwitchingHostId(null);
+ return;
+ }
+
const isSshHost = Boolean(sshHostIds[host.id]);
if (host.id !== LOCAL_HOST_ID && isSshHost && isTauriShell()) {
@@ -516,13 +598,13 @@ export function DesktopHostSwitcherDialog({
if (host.id !== LOCAL_HOST_ID && isTauriShell()) {
setSwitchingHostId(host.id);
- const probe = await desktopHostProbe(origin).catch((): HostProbeResult => ({ status: 'unreachable', latencyMs: 0 }));
+ const probe = await desktopHostProbe(origin, { clientToken: host.clientToken || null }).catch((): HostProbeResult => ({ status: 'unreachable', latencyMs: 0 }));
setStatusById((prev) => ({
...prev,
[host.id]: { status: probe.status, latencyMs: probe.latencyMs },
}));
- if (probe.status === 'unreachable' || probe.status === 'wrong-service') {
+ if (isBlockedHostStatus(probe.status)) {
toast.error(t('desktopHostSwitcher.toast.instanceUnreachable', { host: redactSensitiveUrl(host.label) }));
setSwitchingHostId(null);
return;
@@ -537,14 +619,7 @@ export function DesktopHostSwitcherDialog({
} catch {
window.location.href = target;
}
- }, [onHostSwitched, sshHostIds, sshStatusesById, t]);
-
- const beginEdit = React.useCallback((host: DesktopHost) => {
- setEditingId(host.id);
- setEditLabel(host.label);
- setEditUrl(host.url);
- setError('');
- }, []);
+ }, [localOrigin, onHostSwitched, sshHostIds, sshStatusesById, t]);
const cancelEdit = React.useCallback(() => {
setEditingId(null);
@@ -563,60 +638,39 @@ export function DesktopHostSwitcherDialog({
return;
}
- const url = normalizeHostUrl(editUrl);
- if (!url) {
+ const resolved = resolveDesktopHostUrl(editUrl);
+ if (!resolved) {
setError(t('desktopHostSwitcher.error.invalidUrl'));
return;
}
+ const url = resolved.persistedUrl;
const label = (editLabel || redactSensitiveUrl(url)).trim();
const nextHosts = configHosts.map((h) => (h.id === editingId ? { ...h, label, url } : h));
await persist(nextHosts, defaultHostId);
cancelEdit();
+ if (resolved.redeemUrl) {
+ window.location.assign(resolved.redeemUrl);
+ }
}, [cancelEdit, configHosts, defaultHostId, editLabel, editUrl, editingId, persist, t]);
- const addHost = React.useCallback(async () => {
- const url = normalizeHostUrl(newUrl);
- if (!url) {
- setError(t('desktopHostSwitcher.error.invalidUrl'));
- return;
- }
- const label = (newLabel || redactSensitiveUrl(url)).trim();
- const id = makeId();
-
- const nextHosts = [{ id, label, url }, ...configHosts];
- await persist(nextHosts, defaultHostId);
- setNewLabel('');
- setNewUrl('');
- if (embedded) {
- setIsAddFormOpen(false);
- }
- }, [configHosts, defaultHostId, embedded, newLabel, newUrl, persist, t]);
-
- const deleteHost = React.useCallback(async (id: string) => {
- if (id === LOCAL_HOST_ID) return;
- const nextHosts = configHosts.filter((h) => h.id !== id);
- const nextDefault = defaultHostId === id ? LOCAL_HOST_ID : defaultHostId;
- await persist(nextHosts, nextDefault);
- }, [configHosts, defaultHostId, persist]);
-
const setDefault = React.useCallback(async (id: string) => {
const next = id === LOCAL_HOST_ID ? LOCAL_HOST_ID : id;
await persist(configHosts, next);
}, [configHosts, persist]);
const openInNewWindow = React.useCallback((host: DesktopHost) => {
- const origin = host.id === LOCAL_HOST_ID ? getLocalOrigin() : (normalizeHostUrl(host.url) || '');
+ const origin = host.id === LOCAL_HOST_ID ? localOrigin : getDesktopHostApiUrl(host);
if (!origin) return;
const target = toNavigationUrl(origin);
- desktopOpenNewWindowAtUrl(target).catch((err: unknown) => {
+ desktopOpenNewWindowAtUrl(target, { clientToken: host.clientToken || null }).catch((err: unknown) => {
toast.error(t('desktopHostSwitcher.error.failedToOpenNewWindow'), {
description: err instanceof Error ? err.message : String(err),
});
});
- }, [t]);
+ }, [localOrigin, t]);
- const switchToLocal = React.useCallback(() => {
+ const switchToLocal = React.useCallback(async () => {
sshSwitchTokenRef.current += 1;
setSwitchingHostId(null);
setSshSwitchModal((prev) => ({
@@ -627,10 +681,16 @@ export function DesktopHostSwitcherDialog({
detail: null,
phase: 'idle',
}));
- const localTarget = toNavigationUrl(getLocalOrigin());
+ const localTarget = toNavigationUrl(localOrigin);
+ if (isElectronShell()) {
+ const clientToken = await getLocalClientToken();
+ switchRuntimeEndpoint({ apiBaseUrl: localOrigin, clientToken: clientToken || null, runtimeKey: 'local' });
+ onHostSwitched?.();
+ return;
+ }
onHostSwitched?.();
window.location.assign(localTarget);
- }, [onHostSwitched]);
+ }, [localOrigin, onHostSwitched]);
const cancelSshSwitch = React.useCallback(async () => {
const hostId = sshSwitchModal.hostId || switchingHostId;
@@ -754,16 +814,6 @@ export function DesktopHostSwitcherDialog({
)}
- {tauriAvailable && (
-
- {projects.map((project) => {
- const isActive = project.id === activeProjectId;
- const status = getProjectStatus(project.path);
- const projectColorVar = project.color ? (PROJECT_COLOR_MAP[project.color] ?? null) : null;
-
- return (
- onProjectSwitch(project.id)}
- onOpenEditPanel={handleOpenEditPanel}
- formatProjectLabel={formatProjectLabel}
- />
- );
- })}
-
-
- {/* Add project button */}
-
-
- {/* Delete confirmation dialog */}
-
-
- {/* Project edit panel */}
-
+
+ ), [t, totalRunning, totalUnread, contextUsage, projects, filterProjectId, setFilterProjectId, formatProjectLabel, currentTheme, getProjectStatus]);
if (!isMobile || !showMobileSessionStatusBar) {
return null;
}
- if (isMobileSessionStatusBarCollapsed) {
- return (
-
+
+
+
+
+
+
+ {projects.length > 1 && (
+ + {t('mobile.sessions.search.section.sessions')} +
+
+
+
+ setFilterProjectId(null)}
+ />
+ {projects.map((project) => (
+ setFilterProjectId(project.id)}
+ />
+ ))}
+
+ )}
+
+ {visibleSessions.length === 0 ? (
+ handleSessionClick(session)}
+ needsAttention={needsAttention}
+ />
+ ))
+ )}
+
+
+ {t('chat.mobileStatus.noSessionsInProject')}
+
+ ) : (
+ visibleSessions.map((session) => (
+
- {t('desktopHostSwitcher.ssh.needInstancesHint')}
-
-
- )}
-
{!tauriAvailable && (
@@ -784,9 +834,10 @@ export function DesktopHostSwitcherDialog({
const isDefault = (defaultHostId || LOCAL_HOST_ID) === host.id;
const status = statusById[host.id] || null;
const sshStatus = sshStatusesById[host.id] || null;
- const statusKind = isSsh ? sshPhaseToHostStatus(sshStatus?.phase) : (status?.status ?? null);
+ const isChecking = !isSsh && Boolean(probingHostIds[host.id]);
+ const statusKind: HostDisplayStatus = isSsh ? sshPhaseToHostStatus(sshStatus?.phase) : (isChecking ? 'checking' : (status?.status ?? null));
const isEditing = editingId === host.id;
- const effectiveUrl = isLocal ? getLocalOrigin() : (normalizeHostUrl(host.url) || host.url);
+ const effectiveUrl = isLocal ? localOrigin : (normalizeHostUrl(host.url) || host.url);
const displayLabel = host.id === LOCAL_HOST_ID
? t('desktopHostSwitcher.instance.local')
: redactSensitiveUrl(host.label);
@@ -811,24 +862,26 @@ export function DesktopHostSwitcherDialog({
aria-label={t('desktopHostSwitcher.actions.switchToAria', { instance: displayLabel })}
>
-
-
-
- {displayLabel}
-
- {isSsh && (
-
- SSH
+
=> {
try {
- const response = await fetch('/health');
+ const response = await runtimeFetch('/health');
if (!response.ok) return false;
const data = await response.json();
return data.openCodeRunning === true || data.isOpenCodeReady === true;
@@ -182,7 +183,7 @@ export function LocalSetupScreen({
return;
}
- await fetch('/api/config/reload', { method: 'POST' });
+ await runtimeFetch('/api/config/reload', { method: 'POST' });
} finally {
setTimeout(() => setIsRetrying(false), 1000);
}
diff --git a/packages/ui/src/components/onboarding/RecoveryScreen.tsx b/packages/ui/src/components/onboarding/RecoveryScreen.tsx
index fc9b0c96..83fa4552 100644
--- a/packages/ui/src/components/onboarding/RecoveryScreen.tsx
+++ b/packages/ui/src/components/onboarding/RecoveryScreen.tsx
@@ -4,6 +4,7 @@ import { DesktopConnectionRecovery, type RecoveryVariant } from './DesktopConnec
import { RemoteConnectionForm } from './RemoteConnectionForm';
import { resolveRecoveryNextStep } from './desktopRecoveryRouting';
import { desktopHostsGet, desktopHostsSet } from '@/lib/desktopHosts';
+import { runtimeFetch } from '@/lib/runtime-fetch';
type RecoveryScreenProps = {
/** Recovery variant */
@@ -62,7 +63,7 @@ export function RecoveryScreen({
return;
}
- await fetch('/api/config/reload', { method: 'POST' });
+ await runtimeFetch('/api/config/reload', { method: 'POST' });
onRetry?.();
}, [onRetry]);
diff --git a/packages/ui/src/components/onboarding/RemoteConnectionForm.tsx b/packages/ui/src/components/onboarding/RemoteConnectionForm.tsx
index 31a83637..a17a91e9 100644
--- a/packages/ui/src/components/onboarding/RemoteConnectionForm.tsx
+++ b/packages/ui/src/components/onboarding/RemoteConnectionForm.tsx
@@ -3,7 +3,7 @@ import {
desktopHostsGet,
desktopHostsSet,
desktopHostProbe,
- normalizeHostUrl,
+ resolveDesktopHostUrl,
type HostProbeResult,
} from '@/lib/desktopHosts';
import { Button } from '@/components/ui/button';
@@ -37,6 +37,10 @@ function getProbeStatusMessageKey(status: ProbeStatus): string | null {
return null; // Success is shown separately
case 'auth':
return 'onboarding.remoteConnection.probe.authMessage';
+ case 'update-recommended':
+ return 'onboarding.remoteConnection.probe.updateRecommendedMessage';
+ case 'incompatible':
+ return 'onboarding.remoteConnection.probe.incompatibleMessage';
case 'wrong-service':
return 'onboarding.remoteConnection.probe.wrongServiceMessage';
case 'unreachable':
@@ -47,7 +51,7 @@ function getProbeStatusMessageKey(status: ProbeStatus): string | null {
}
function isBlockingStatus(status: ProbeStatus): boolean {
- return status === 'wrong-service' || status === 'unreachable';
+ return status === 'wrong-service' || status === 'unreachable' || status === 'incompatible';
}
export function RemoteConnectionForm({
@@ -66,7 +70,8 @@ export function RemoteConnectionForm({
const [probeResult, setProbeResult] = useState(null);
const [error, setError] = useState('');
- const normalizedUrl = normalizeHostUrl(url);
+ const resolvedUrl = resolveDesktopHostUrl(url);
+ const normalizedUrl = resolvedUrl?.persistedUrl ?? null;
const handleUrlChange = useCallback((e: React.ChangeEvent) => {
setUrl(e.target.value);
@@ -89,7 +94,7 @@ export function RemoteConnectionForm({
try {
const result = await desktopHostProbe(normalizedUrl);
setProbeResult(result);
- setState(result.status === 'ok' ? 'success' : 'error');
+ setState(result.status === 'ok' || result.status === 'update-recommended' ? 'success' : 'error');
} catch (err) {
setError(err instanceof Error ? err.message : t('onboarding.remoteConnection.errors.connectionTestFailed'));
setState('error');
@@ -97,14 +102,15 @@ export function RemoteConnectionForm({
}, [normalizedUrl, t]);
const handleConnect = useCallback(async () => {
- if (!normalizedUrl) return;
+ if (!resolvedUrl) return;
+ const targetUrl = resolvedUrl.persistedUrl;
setState('testing');
setProbeResult(null);
setError('');
try {
- const probe = await desktopHostProbe(normalizedUrl);
+ const probe = await desktopHostProbe(targetUrl);
setProbeResult(probe);
// Block connection on wrong-service or unreachable
@@ -114,10 +120,10 @@ export function RemoteConnectionForm({
}
const config = await desktopHostsGet();
- const hostLabel = label.trim() || normalizedUrl;
+ const hostLabel = label.trim() || targetUrl;
const existingHost = config.hosts.find(
- (h) => h.url === normalizedUrl
+ (h) => h.url === targetUrl
);
const hostId = existingHost ? existingHost.id : `host-${Date.now().toString(16)}`;
@@ -125,7 +131,8 @@ export function RemoteConnectionForm({
const newHost = {
id: hostId,
label: hostLabel,
- url: normalizedUrl,
+ url: targetUrl,
+ apiUrl: targetUrl,
};
const updatedHosts = existingHost
@@ -141,6 +148,11 @@ export function RemoteConnectionForm({
onConnect?.();
+ if (resolvedUrl.redeemUrl) {
+ window.location.assign(resolvedUrl.redeemUrl);
+ return;
+ }
+
if (isTauriShell()) {
const tauri = (window as unknown as { __TAURI__?: { core?: { invoke?: (cmd: string, args?: Record) => Promise } } }).__TAURI__;
await tauri?.core?.invoke?.('desktop_restart');
@@ -149,7 +161,7 @@ export function RemoteConnectionForm({
setError(err instanceof Error ? err.message : t('onboarding.remoteConnection.errors.failedToSaveConnection'));
setState('error');
}
- }, [normalizedUrl, label, onConnect, t]);
+ }, [resolvedUrl, label, onConnect, t]);
const isTesting = state === 'testing';
const canTest = normalizedUrl !== null && !isTesting;
@@ -157,6 +169,7 @@ export function RemoteConnectionForm({
const probeMessageKey = getProbeStatusMessageKey(probeResult?.status ?? null);
const isSuccess = probeResult?.status === 'ok';
+ const isUpdateRecommended = probeResult?.status === 'update-recommended';
const isAuth = probeResult?.status === 'auth';
const isBlocking = isBlockingStatus(probeResult?.status ?? null);
@@ -238,6 +251,18 @@ export function RemoteConnectionForm({
)}
+ {probeResult && isUpdateRecommended && (
+
>(new Set());
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
@@ -66,45 +65,32 @@ export const ProjectsSidebar: React.FC<{ onItemSelect?: () => void }> = ({ onIte
{projects.map((project) => {
const selected = project.id === selectedId;
const iconName = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
- const imageFailureKey = `${project.id}:${project.iconImage?.updatedAt ?? 0}`;
- const imageUrl = brokenIconIds.has(imageFailureKey)
- ? null
- : getProjectIconImageUrl(project, {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- });
const color = project.color ? (PROJECT_COLOR_MAP[project.color] ?? null) : null;
- const icon = imageUrl
- ? (
-
- {
- setBrokenIconIds((prev) => {
- if (prev.has(imageFailureKey)) {
- return prev;
- }
- const next = new Set(prev);
- next.add(imageFailureKey);
- return next;
- });
- }}
- />
-
- )
- : iconName
+ const fallbackIcon = iconName
? (
{
const loadAuthMethods = async () => {
setAuthLoading(true);
try {
- const response = await fetch('/api/provider/auth', {
- method: 'GET',
- headers: { Accept: 'application/json' },
- });
-
- if (!response.ok) {
- throw new Error(`Auth methods request failed (${response.status})`);
+ const result = await opencodeClient.getSdkClient().provider.auth();
+ if (result.error) {
+ throw new Error(`provider.auth failed: ${String(result.error)}`);
}
-
- const payload = await response.json().catch(() => ({}));
if (!isMounted) return;
- setAuthMethodsByProvider(parseAuthPayload(payload));
+ setAuthMethodsByProvider(parseAuthPayload(result.data));
} catch (error) {
if (!isMounted) return;
console.error('Failed to load provider auth methods:', error);
@@ -217,18 +213,12 @@ export const ProvidersPage: React.FC = () => {
setAvailableLoading(true);
setAvailableError(null);
try {
- const response = await fetch('/api/provider', {
- method: 'GET',
- headers: { Accept: 'application/json' },
- });
-
- if (!response.ok) {
- throw new Error(`Provider list request failed (${response.status})`);
+ const result = await opencodeClient.getSdkClient().provider.list();
+ if (result.error) {
+ throw new Error(`provider.list failed: ${String(result.error)}`);
}
-
- const payload = await response.json().catch(() => ({}));
if (!isMounted) return;
- setAvailableProviders(parseProvidersPayload(payload));
+ setAvailableProviders(parseProvidersPayload(result.data));
} catch (error) {
if (!isMounted) return;
console.error('Failed to load available providers:', error);
@@ -292,7 +282,9 @@ export const ProvidersPage: React.FC = () => {
const loadSources = async () => {
try {
- const response = await fetch(`/api/provider/${encodeURIComponent(selectedProviderId)}/source`, {
+ // OpenChamber-only metadata endpoint: the SDK exposes provider data but
+ // not local auth/source-file provenance used by this settings UI.
+ const response = await runtimeFetch(`/api/provider/${encodeURIComponent(selectedProviderId)}/source`, {
method: 'GET',
headers: { Accept: 'application/json' },
});
@@ -337,16 +329,12 @@ export const ProvidersPage: React.FC = () => {
setAuthBusyKey(busyKey);
try {
- const response = await fetch(`/api/auth/${encodeURIComponent(providerId)}`, {
- method: 'PUT',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ type: 'api', key: apiKey }),
+ const result = await opencodeClient.getSdkClient().auth.set({
+ providerID: providerId,
+ auth: { type: 'api', key: apiKey },
});
-
- const payload = await response.json().catch(() => null);
- if (!response.ok) {
- const message = payload?.error || t('settings.providers.page.toast.apiKeySaveFailed');
- throw new Error(message);
+ if (result.error) {
+ throw new Error(t('settings.providers.page.toast.apiKeySaveFailed'));
}
toast.success(t('settings.providers.page.toast.apiKeySaved'));
@@ -366,20 +354,17 @@ export const ProvidersPage: React.FC = () => {
setAuthBusyKey(busyKey);
try {
- const response = await fetch(`/api/provider/${encodeURIComponent(providerId)}/oauth/authorize`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ method: methodIndex }),
+ const result = await opencodeClient.getSdkClient().provider.oauth.authorize({
+ providerID: providerId,
+ method: methodIndex,
});
-
- const payload = await response.json().catch(() => null);
- if (!response.ok) {
- const message = payload?.error || t('settings.providers.page.toast.oauthStartFailed');
- throw new Error(message);
+ if (result.error) {
+ throw new Error(t('settings.providers.page.toast.oauthStartFailed'));
}
- const payloadRecord = isRecord(payload) ? payload : {};
- const dataRecord = isRecord(payloadRecord.data) ? payloadRecord.data : payloadRecord;
+ const payloadRecord: Record = isRecord(result.data) ? result.data : {};
+ const nestedData = payloadRecord.data;
+ const dataRecord: Record = isRecord(nestedData) ? nestedData : payloadRecord;
const urlCandidate =
(typeof dataRecord.url === 'string' && dataRecord.url) ||
(typeof dataRecord.verification_uri_complete === 'string' && dataRecord.verification_uri_complete) ||
@@ -435,16 +420,13 @@ export const ProvidersPage: React.FC = () => {
requestBody.code = code;
}
- const response = await fetch(`/api/provider/${encodeURIComponent(providerId)}/oauth/callback`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(requestBody),
+ const result = await opencodeClient.getSdkClient().provider.oauth.callback({
+ providerID: providerId,
+ method: requestBody.method,
+ code: requestBody.code,
});
-
- const responsePayload = await response.json().catch(() => null);
- if (!response.ok) {
- const message = responsePayload?.error || t('settings.providers.page.toast.oauthCompleteFailed');
- throw new Error(message);
+ if (result.error) {
+ throw new Error(t('settings.providers.page.toast.oauthCompleteFailed'));
}
toast.success(t('settings.providers.page.toast.oauthCompleted'));
@@ -485,15 +467,9 @@ export const ProvidersPage: React.FC = () => {
setAuthBusyKey(busyKey);
try {
- const response = await fetch(`/api/provider/${encodeURIComponent(providerId)}/auth?scope=all`, {
- method: 'DELETE',
- headers: { 'Content-Type': 'application/json' },
- });
-
- const payload = await response.json().catch(() => null);
- if (!response.ok) {
- const message = payload?.error || t('settings.providers.page.toast.providerDisconnectFailed');
- throw new Error(message);
+ const result = await opencodeClient.getSdkClient().auth.remove({ providerID: providerId });
+ if (result.error) {
+ throw new Error(t('settings.providers.page.toast.providerDisconnectFailed'));
}
toast.success(t('settings.providers.page.toast.providerDisconnected'));
diff --git a/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx b/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
index 59957c7b..39dac0a2 100644
--- a/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
+++ b/packages/ui/src/components/sections/providers/ProvidersSidebar.tsx
@@ -9,6 +9,7 @@ import { SettingsProjectSelector } from '@/components/sections/shared/SettingsPr
import { Icon } from "@/components/icon/Icon";
import { opencodeClient } from '@/lib/opencode/client';
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
const ADD_PROVIDER_ID = '__add_provider__';
@@ -61,7 +62,9 @@ export const ProvidersSidebar: React.FC = ({ onItemSelect
const tasks = providers.map(async (provider) => {
try {
const query = directory ? `?directory=${encodeURIComponent(directory)}` : '';
- const response = await fetch(`/api/provider/${encodeURIComponent(provider.id)}/source${query}`, {
+ // OpenChamber-only metadata endpoint: the SDK exposes provider data but
+ // not local auth/source-file provenance used by this settings sidebar.
+ const response = await runtimeFetch(`/api/provider/${encodeURIComponent(provider.id)}/source${query}`, {
method: 'GET',
headers: { Accept: 'application/json' },
});
diff --git a/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx b/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx
index 6a6461d9..0b755f08 100644
--- a/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx
+++ b/packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import QRCode from 'qrcode';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { NumberInput } from '@/components/ui/number-input';
@@ -27,6 +28,9 @@ import { Icon } from "@/components/icon/Icon";
import { copyTextToClipboard } from '@/lib/clipboard';
import { openExternalUrl } from '@/lib/url';
import { useI18n, type I18nKey } from '@/lib/i18n';
+import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
+import type { RemoteClientRecord } from '@/lib/api/types';
+import { buildClientConnectionPayload, encodeClientConnectionPayload, parseClientConnectionPayload } from '@/lib/connectionPayload';
import {
desktopSshLogsClear,
desktopSshLogs,
@@ -34,6 +38,16 @@ import {
type DesktopSshPortForward,
type DesktopSshPortForwardType,
} from '@/lib/desktopSsh';
+import {
+ desktopHostsGet,
+ desktopHostsSet,
+ normalizeHostUrl,
+ redactSensitiveUrl,
+ resolveDesktopHostUrl,
+ type DesktopHost,
+} from '@/lib/desktopHosts';
+import { isDesktopShell } from '@/lib/desktop';
+import { getRuntimeApiBaseUrl, switchRuntimeEndpoint } from '@/lib/runtime-switch';
const randomPort = (): number => {
return Math.floor(20000 + Math.random() * 30000);
@@ -241,9 +255,12 @@ const normalizeForSave = (instance: DesktopSshInstance): DesktopSshInstance => {
export const RemoteInstancesPage: React.FC = () => {
const { t } = useI18n();
+ const { clientAuth } = useRuntimeAPIs();
+ const showInstanceManagement = isDesktopShell();
const instances = useDesktopSshStore((state) => state.instances);
const statusesById = useDesktopSshStore((state) => state.statusesById);
const importCandidates = useDesktopSshStore((state) => state.importCandidates);
+ const isLoading = useDesktopSshStore((state) => state.isLoading);
const isImportsLoading = useDesktopSshStore((state) => state.isImportsLoading);
const isSaving = useDesktopSshStore((state) => state.isSaving);
const error = useDesktopSshStore((state) => state.error);
@@ -277,12 +294,276 @@ export const RemoteInstancesPage: React.FC = () => {
const [isPrimaryActionPending, setIsPrimaryActionPending] = React.useState(false);
const [isRetryPending, setIsRetryPending] = React.useState(false);
const [clockMs, setClockMs] = React.useState(() => Date.now());
+ const [directHosts, setDirectHosts] = React.useState([]);
+ const [directDefaultHostId, setDirectDefaultHostId] = React.useState('local');
+ const [directLoading, setDirectLoading] = React.useState(false);
+ const [directSaving, setDirectSaving] = React.useState(false);
+ const [directLabel, setDirectLabel] = React.useState('');
+ const [directUrl, setDirectUrl] = React.useState('');
+ const [directToken, setDirectToken] = React.useState('');
+ const [directConnectLink, setDirectConnectLink] = React.useState('');
+ const [directError, setDirectError] = React.useState(null);
+ const [directAddDialogOpen, setDirectAddDialogOpen] = React.useState(false);
+ const [directImportDialogOpen, setDirectImportDialogOpen] = React.useState(false);
+ const [directEditingId, setDirectEditingId] = React.useState(null);
+ const [directEditLabel, setDirectEditLabel] = React.useState('');
+ const [directEditUrl, setDirectEditUrl] = React.useState('');
+ const [directEditToken, setDirectEditToken] = React.useState('');
+ const [remoteClients, setRemoteClients] = React.useState([]);
+ const [remoteClientsLoading, setRemoteClientsLoading] = React.useState(false);
+ const [remoteClientLabel, setRemoteClientLabel] = React.useState('');
+ const [createdRemoteClientToken, setCreatedRemoteClientToken] = React.useState(null);
+ const [remoteClientError, setRemoteClientError] = React.useState(null);
+ const [pairingUrl, setPairingUrl] = React.useState(null);
+ const [pairingQrDataUrl, setPairingQrDataUrl] = React.useState(null);
+ const revokedClientCount = React.useMemo(() => remoteClients.filter((client) => Boolean(client.revokedAt)).length, [remoteClients]);
+ const [sshAddDialogOpen, setSshAddDialogOpen] = React.useState(false);
+ const [sshCommandDraft, setSshCommandDraft] = React.useState('ssh user@example.com');
+ const [sshNameDraft, setSshNameDraft] = React.useState('');
React.useEffect(() => {
void load();
void loadImports();
}, [load, loadImports]);
+ const loadDirectHosts = React.useCallback(async () => {
+ setDirectLoading(true);
+ setDirectError(null);
+ try {
+ const config = await desktopHostsGet();
+ setDirectHosts(config.hosts || []);
+ setDirectDefaultHostId(config.defaultHostId || 'local');
+ } catch (err) {
+ setDirectError(err instanceof Error ? err.message : String(err));
+ } finally {
+ setDirectLoading(false);
+ }
+ }, []);
+
+ React.useEffect(() => {
+ void loadDirectHosts();
+ }, [loadDirectHosts]);
+
+ const persistDirectHosts = React.useCallback(async (hosts: DesktopHost[], defaultHostId: string | null = directDefaultHostId) => {
+ setDirectSaving(true);
+ setDirectError(null);
+ try {
+ await desktopHostsSet({ hosts, defaultHostId, initialHostChoiceCompleted: true });
+ setDirectHosts(hosts);
+ setDirectDefaultHostId(defaultHostId);
+ } catch (err) {
+ setDirectError(err instanceof Error ? err.message : String(err));
+ } finally {
+ setDirectSaving(false);
+ }
+ }, [directDefaultHostId]);
+
+ const handleAddDirectHost = React.useCallback(async () => {
+ const resolved = resolveDesktopHostUrl(directUrl);
+ if (!resolved) {
+ setDirectError(t('desktopHostSwitcher.error.invalidUrl'));
+ return;
+ }
+ const url = resolved.persistedUrl;
+ const id = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+ ? crypto.randomUUID()
+ : `host-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+ const host: DesktopHost = {
+ id,
+ label: directLabel.trim() || redactSensitiveUrl(url),
+ url,
+ apiUrl: url,
+ ...(directToken.trim() ? { clientToken: directToken.trim() } : {}),
+ };
+ await persistDirectHosts([host, ...directHosts], directDefaultHostId);
+ setDirectLabel('');
+ setDirectUrl('');
+ setDirectToken('');
+ setDirectAddDialogOpen(false);
+ if (resolved.redeemUrl) {
+ navigateToUrl(resolved.redeemUrl);
+ }
+ }, [directDefaultHostId, directHosts, directLabel, directToken, directUrl, persistDirectHosts, t]);
+
+ const importDirectConnectLink = React.useCallback(async () => {
+ const payload = parseClientConnectionPayload(directConnectLink);
+ if (!payload) {
+ setDirectError(t('settings.remoteInstances.direct.error.invalidConnectLink'));
+ return;
+ }
+ const url = normalizeHostUrl(payload.serverUrl);
+ if (!url) {
+ setDirectError(t('desktopHostSwitcher.error.invalidUrl'));
+ return;
+ }
+ const existing = directHosts.find((host) => normalizeHostUrl(host.apiUrl || host.url) === url);
+ if (existing) {
+ const nextHosts = directHosts.map((host) => host.id === existing.id
+ ? { ...host, label: payload.label || host.label, url, apiUrl: url, clientToken: payload.token }
+ : host);
+ await persistDirectHosts(nextHosts, directDefaultHostId);
+ } else {
+ const id = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+ ? crypto.randomUUID()
+ : `host-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+ await persistDirectHosts([{ id, label: payload.label || redactSensitiveUrl(url), url, apiUrl: url, clientToken: payload.token }, ...directHosts], directDefaultHostId);
+ }
+ setDirectConnectLink('');
+ setDirectError(null);
+ setDirectImportDialogOpen(false);
+ }, [directConnectLink, directDefaultHostId, directHosts, persistDirectHosts, t]);
+
+ const handleRemoveDirectHost = React.useCallback(async (id: string) => {
+ const nextHosts = directHosts.filter((host) => host.id !== id);
+ const nextDefault = directDefaultHostId === id ? 'local' : directDefaultHostId;
+ await persistDirectHosts(nextHosts, nextDefault);
+ if (directEditingId === id) {
+ setDirectEditingId(null);
+ }
+ }, [directDefaultHostId, directEditingId, directHosts, persistDirectHosts]);
+
+ const beginEditDirectHost = React.useCallback((host: DesktopHost) => {
+ setDirectEditingId(host.id);
+ setDirectEditLabel(host.label);
+ setDirectEditUrl(host.apiUrl || host.url);
+ setDirectEditToken(host.clientToken || '');
+ setDirectError(null);
+ }, []);
+
+ const saveDirectHostEdit = React.useCallback(async () => {
+ if (!directEditingId) return;
+ const resolved = resolveDesktopHostUrl(directEditUrl);
+ if (!resolved) {
+ setDirectError(t('desktopHostSwitcher.error.invalidUrl'));
+ return;
+ }
+ const url = resolved.persistedUrl;
+ const nextHosts = directHosts.map((host) => host.id === directEditingId
+ ? {
+ ...host,
+ label: directEditLabel.trim() || redactSensitiveUrl(url),
+ url,
+ apiUrl: url,
+ clientToken: directEditToken.trim() || undefined,
+ }
+ : host);
+ await persistDirectHosts(nextHosts, directDefaultHostId);
+ setDirectEditingId(null);
+ if (resolved.redeemUrl) {
+ navigateToUrl(resolved.redeemUrl);
+ }
+ }, [directDefaultHostId, directEditLabel, directEditToken, directEditUrl, directEditingId, directHosts, persistDirectHosts, t]);
+
+ const createSshInstanceFromDialog = React.useCallback(async () => {
+ const command = sshCommandDraft.trim();
+ if (!command) {
+ toast.error(t('settings.remoteInstances.page.toast.sshCommandRequired'));
+ return;
+ }
+ const id = `ssh-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+ try {
+ await createFromCommand(id, command, sshNameDraft.trim() || t('settings.remoteInstances.sidebar.newSshInstanceName'));
+ setSelectedId(id);
+ setSshAddDialogOpen(false);
+ setSshCommandDraft('ssh user@example.com');
+ setSshNameDraft('');
+ toast.success(t('settings.remoteInstances.page.toast.instanceCreated'));
+ } catch (error) {
+ toast.error(t('settings.remoteInstances.sidebar.toast.createFailed'), {
+ description: error instanceof Error ? error.message : String(error),
+ });
+ }
+ }, [createFromCommand, setSelectedId, sshCommandDraft, sshNameDraft, t]);
+
+ const setDefaultDirectHost = React.useCallback(async (id: string) => {
+ await persistDirectHosts(directHosts, id);
+ }, [directHosts, persistDirectHosts]);
+
+ const loadRemoteClients = React.useCallback(async () => {
+ if (!clientAuth) return;
+ setRemoteClientsLoading(true);
+ setRemoteClientError(null);
+ try {
+ setRemoteClients(await clientAuth.listClients());
+ } catch (err) {
+ setRemoteClientError(err instanceof Error ? err.message : String(err));
+ } finally {
+ setRemoteClientsLoading(false);
+ }
+ }, [clientAuth]);
+
+ React.useEffect(() => {
+ void loadRemoteClients();
+ }, [loadRemoteClients]);
+
+ const createRemoteClient = React.useCallback(async () => {
+ if (!clientAuth) return;
+ setRemoteClientError(null);
+ try {
+ const result = await clientAuth.createClient({ label: remoteClientLabel.trim() || undefined });
+ setCreatedRemoteClientToken(result.token);
+ setRemoteClientLabel('');
+ await loadRemoteClients();
+ } catch (err) {
+ setRemoteClientError(err instanceof Error ? err.message : String(err));
+ }
+ }, [clientAuth, loadRemoteClients, remoteClientLabel]);
+
+ const createPairingLink = React.useCallback(async () => {
+ if (!clientAuth) return;
+ setRemoteClientError(null);
+ try {
+ const serverUrl = normalizeHostUrl(getRuntimeApiBaseUrl()) || window.location.origin;
+ const result = await clientAuth.createClient({ label: remoteClientLabel.trim() || 'Paired client' });
+ const payload = buildClientConnectionPayload({ serverUrl, token: result.token, label: remoteClientLabel || 'OpenChamber' });
+ const encoded = encodeClientConnectionPayload(payload);
+ setCreatedRemoteClientToken(result.token);
+ setPairingUrl(encoded);
+ setPairingQrDataUrl(await QRCode.toDataURL(encoded, { width: 192, margin: 1 }));
+ setRemoteClientLabel('');
+ await loadRemoteClients();
+ } catch (err) {
+ setRemoteClientError(err instanceof Error ? err.message : String(err));
+ }
+ }, [clientAuth, loadRemoteClients, remoteClientLabel]);
+
+ const revokeRemoteClient = React.useCallback(async (client: RemoteClientRecord) => {
+ if (!clientAuth) return;
+ const isLocalDesktopClient = client.clientKind === 'desktop-local';
+ setRemoteClientError(null);
+ try {
+ await clientAuth.revokeClient(client.id);
+ if (isLocalDesktopClient && isDesktopShell()) {
+ const config = await desktopHostsGet();
+ await desktopHostsSet({
+ hosts: config.hosts,
+ defaultHostId: config.defaultHostId,
+ initialHostChoiceCompleted: config.initialHostChoiceCompleted,
+ localClientToken: null,
+ });
+ setRemoteClients((clients) => clients.map((entry) => entry.id === client.id
+ ? { ...entry, revokedAt: new Date().toISOString() }
+ : entry));
+ switchRuntimeEndpoint({ apiBaseUrl: getRuntimeApiBaseUrl(), clientToken: null, runtimeKey: 'local' });
+ return;
+ }
+ await loadRemoteClients();
+ } catch (err) {
+ setRemoteClientError(err instanceof Error ? err.message : String(err));
+ }
+ }, [clientAuth, loadRemoteClients]);
+
+ const purgeRevokedRemoteClients = React.useCallback(async () => {
+ if (!clientAuth) return;
+ setRemoteClientError(null);
+ try {
+ await clientAuth.purgeRevokedClients();
+ await loadRemoteClients();
+ } catch (err) {
+ setRemoteClientError(err instanceof Error ? err.message : String(err));
+ }
+ }, [clientAuth, loadRemoteClients]);
+
React.useEffect(() => {
setDraft(selectedInstance);
}, [selectedInstance]);
@@ -674,17 +955,271 @@ export const RemoteInstancesPage: React.FC = () => {
if (!draft) {
return (
-
+ = ({
const renderProjectLabel = React.useCallback((project: ProjectEntry) => {
const displayLabel = project.label?.trim() || formatDirectoryName(project.path, homeDirectory);
- const imageUrl = getProjectIconImageUrl(
- { id: project.id, iconImage: project.iconImage ?? null },
- {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- },
- );
const projectIconName = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
const iconColor = project.color ? PROJECT_COLOR_MAP[project.color] : undefined;
+ const fallbackIcon = projectIconName ? (
+ => {
try {
- const response = await fetch('/health');
+ const response = await runtimeFetch('/health');
if (!response.ok) return false;
const data = await response.json();
return data.openCodeRunning === true || data.isOpenCodeReady === true;
@@ -206,7 +207,7 @@ export function ChooserScreen({ onCliAvailable }: ChooserScreenProps) {
await restartDesktopApp();
return;
}
- await fetch('/api/config/reload', { method: 'POST' });
+ await runtimeFetch('/api/config/reload', { method: 'POST' });
} finally {
setTimeout(() => setIsApplyingPath(false), 1000);
}
diff --git a/packages/ui/src/components/onboarding/DesktopConnectionRecovery.tsx b/packages/ui/src/components/onboarding/DesktopConnectionRecovery.tsx
index b3ae0307..4e4941d3 100644
--- a/packages/ui/src/components/onboarding/DesktopConnectionRecovery.tsx
+++ b/packages/ui/src/components/onboarding/DesktopConnectionRecovery.tsx
@@ -50,7 +50,7 @@ export function DesktopConnectionRecovery({
if (variant === 'remote-unreachable') {
return { host: t('onboarding.desktopRecovery.placeholders.remoteServer') };
}
- if (variant === 'remote-wrong-service') {
+ if (variant === 'remote-wrong-service' || variant === 'remote-incompatible') {
return { host: t('onboarding.desktopRecovery.placeholders.unknownServer') };
}
return undefined;
@@ -84,7 +84,7 @@ export function DesktopConnectionRecovery({
{/* Host info if available */}
- {hostUrl && (variant === 'remote-unreachable' || variant === 'remote-wrong-service') && (
+ {hostUrl && (variant === 'remote-unreachable' || variant === 'remote-wrong-service' || variant === 'remote-incompatible') && (
+ (null);
+ const [localOrigin, setLocalOrigin] = React.useState(() => getLocalOrigin());
const attemptedDefaultSshConnectRef = React.useRef(false);
const [startupSshModal, setStartupSshModal] = React.useState<{
open: boolean;
@@ -1190,7 +1146,11 @@ export function DesktopHostSwitcherButton({ headerIconButtonClass }: DesktopHost
if (!localUrl) {
throw new Error('Connected but missing forwarded URL');
}
- window.location.assign(toNavigationUrl(localUrl));
+ if (isElectronShell()) {
+ switchRuntimeEndpoint({ apiBaseUrl: localUrl, clientToken: null, runtimeKey: `ssh:${hostId}` });
+ } else {
+ window.location.assign(toNavigationUrl(localUrl));
+ }
return true;
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
@@ -1214,12 +1174,24 @@ export function DesktopHostSwitcherButton({ headerIconButtonClass }: DesktopHost
connecting: false,
});
+ let nextLocalOrigin = localOrigin;
await desktopHostsGet()
- .then((cfg) => desktopHostsSet({ hosts: cfg.hosts, defaultHostId: LOCAL_HOST_ID }))
+ .then((cfg) => {
+ if (cfg.localOrigin) {
+ nextLocalOrigin = cfg.localOrigin;
+ setLocalOrigin(cfg.localOrigin);
+ }
+ return desktopHostsSet({ hosts: cfg.hosts, defaultHostId: LOCAL_HOST_ID });
+ })
.catch(() => undefined);
- window.location.assign(toNavigationUrl(getLocalOrigin()));
- }, []);
+ if (isElectronShell()) {
+ const clientToken = await getLocalClientToken();
+ switchRuntimeEndpoint({ apiBaseUrl: nextLocalOrigin, clientToken: clientToken || null, runtimeKey: 'local' });
+ } else {
+ window.location.assign(toNavigationUrl(nextLocalOrigin));
+ }
+ }, [localOrigin]);
const retryStartupSsh = React.useCallback(() => {
const hostId = startupSshModal.hostId;
@@ -1236,11 +1208,16 @@ export function DesktopHostSwitcherButton({ headerIconButtonClass }: DesktopHost
const run = async () => {
try {
const cfg = await desktopHostsGet();
- const local = buildLocalHost();
+ const nextLocalOrigin = cfg.localOrigin || localOrigin;
+ if (cfg.localOrigin && cfg.localOrigin !== localOrigin) {
+ setLocalOrigin(cfg.localOrigin);
+ }
+ const local = buildLocalHost(nextLocalOrigin);
const all = [local, ...(cfg.hosts || [])];
const current = resolveCurrentHost(all);
if (
+ !isElectronShell() &&
!attemptedDefaultSshConnectRef.current &&
current.id === LOCAL_HOST_ID &&
cfg.defaultHostId &&
@@ -1290,13 +1267,16 @@ export function DesktopHostSwitcherButton({ headerIconButtonClass }: DesktopHost
cancelled = true;
window.clearInterval(interval);
};
- }, [connectDefaultSshInstance, t]);
+ }, [connectDefaultSshInstance, localOrigin, t]);
if (!isDesktopShell()) {
return null;
}
- const isCurrentlyLocal = locationMatchesHost(window.location.href, getLocalOrigin());
+ const runtimeApiBaseUrl = getRuntimeApiBaseUrl();
+ const isCurrentlyLocal = runtimeApiBaseUrl
+ ? locationMatchesHost(runtimeApiBaseUrl, localOrigin)
+ : locationMatchesHost(window.location.href, localOrigin);
const fallbackLabel = typeof window !== 'undefined' && window.location.hostname
? window.location.hostname
diff --git a/packages/ui/src/components/layout/ContextPanel.tsx b/packages/ui/src/components/layout/ContextPanel.tsx
index d3f178b2..c6de7376 100644
--- a/packages/ui/src/components/layout/ContextPanel.tsx
+++ b/packages/ui/src/components/layout/ContextPanel.tsx
@@ -19,6 +19,10 @@ import { useSessionUIStore } from '@/sync/session-ui-store';
import { useInputStore } from '@/sync/input-store';
import { ContextPanelContent } from './ContextSidebarTab';
import { toast } from '@/components/ui';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+import { refreshRuntimeUrlAuthToken } from '@/lib/runtime-auth';
+import { getRuntimeUrlResolver } from '@/lib/runtime-url';
+import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
import { Icon } from "@/components/icon/Icon";
import { OpenChamberLogo } from "@/components/ui/OpenChamberLogo";
import { invokeDesktopCommand } from '@/lib/desktopNative';
@@ -436,15 +440,42 @@ type PreviewPaneProps = {
type PreviewProxyState =
| { status: 'idle' }
| { status: 'loading' }
- | { status: 'ready'; proxyBasePath: string; expiresAt: number }
+ | { status: 'ready'; proxyBasePath: string; previewToken?: string; expiresAt: number }
| { status: 'error'; message: string };
+const getPreviewProxyOrigin = (proxySrc: string): string => {
+ if (typeof window === 'undefined') return '';
+ try {
+ return new URL(proxySrc || window.location.href, window.location.href).origin;
+ } catch {
+ return window.location.origin;
+ }
+};
+
+const postPreviewBridgeMessage = (frameWindow: Window, proxySrc: string, payload: Record): void => {
+ const targetOrigin = getPreviewProxyOrigin(proxySrc);
+ frameWindow.postMessage(payload, targetOrigin);
+};
+
+const stripPreviewTokenFromUrl = (value: string): string => {
+ if (!value) return value;
+ try {
+ const parsed = new URL(value);
+ parsed.searchParams.delete('oc_preview_token');
+ parsed.searchParams.delete('oc_client_token');
+ parsed.searchParams.delete('oc_url_token');
+ return parsed.toString();
+ } catch {
+ return value;
+ }
+};
const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
const { t } = useI18n();
const { currentTheme } = useThemeSystem();
const [reloadNonce, bumpReload] = React.useReducer((x: number) => x + 1, 0);
const [proxyRegistrationNonce, bumpProxyRegistration] = React.useReducer((x: number) => x + 1, 0);
const [proxyState, setProxyState] = React.useState({ status: 'idle' });
+ const [urlAuthReadyKey, setUrlAuthReadyKey] = React.useState('');
const iframeRef = React.useRef(null);
const nextConsoleEventIdRef = React.useRef(1);
const [bridgeReady, setBridgeReady] = React.useState(false);
@@ -480,6 +511,7 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
: null;
const targetKey = normalizedUrl ? normalizedUrl.toString() : '';
+ const proxyCacheKey = targetKey ? `${getRuntimeApiBaseUrl() || 'same-origin'}|${targetKey}` : '';
const previewColorScheme = currentTheme.metadata.variant;
React.useEffect(() => {
@@ -488,18 +520,21 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
return;
}
- const cached = getCachedProxyTarget(targetKey);
- if (cached) {
- setProxyState({ status: 'ready', proxyBasePath: cached.proxyBasePath, expiresAt: cached.expiresAt });
+ const cached = getCachedProxyTarget(proxyCacheKey);
+ if (cached?.previewToken) {
+ setProxyState({ status: 'ready', proxyBasePath: cached.proxyBasePath, previewToken: cached.previewToken, expiresAt: cached.expiresAt });
return;
}
+ if (cached) {
+ previewProxyTargetCache.delete(proxyCacheKey);
+ }
let cancelled = false;
setProxyState({ status: 'loading' });
void (async () => {
try {
- const response = await fetch('/api/preview/targets', {
+ const response = await runtimeFetch('/api/preview/targets', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
@@ -507,7 +542,7 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
});
if (!response.ok) {
- previewProxyTargetCache.delete(targetKey);
+ previewProxyTargetCache.delete(proxyCacheKey);
const errorBody = await response.json().catch(() => ({}));
const message = typeof errorBody?.error === 'string'
? errorBody.error
@@ -518,23 +553,24 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
return;
}
- const body = await response.json() as { proxyBasePath?: unknown; expiresAt?: unknown };
+ const body = await response.json() as { proxyBasePath?: unknown; previewToken?: unknown; expiresAt?: unknown };
const proxyBasePath = typeof body.proxyBasePath === 'string' ? body.proxyBasePath : '';
+ const previewToken = typeof body.previewToken === 'string' ? body.previewToken : '';
const expiresAt = typeof body.expiresAt === 'number' ? body.expiresAt : 0;
- if (!proxyBasePath) {
- previewProxyTargetCache.delete(targetKey);
+ if (!proxyBasePath || !previewToken) {
+ previewProxyTargetCache.delete(proxyCacheKey);
if (!cancelled) {
setProxyState({ status: 'error', message: t('contextPanel.preview.proxyError') });
}
return;
}
- previewProxyTargetCache.set(targetKey, { proxyBasePath, expiresAt });
+ previewProxyTargetCache.set(proxyCacheKey, { proxyBasePath, previewToken, expiresAt });
if (!cancelled) {
- setProxyState({ status: 'ready', proxyBasePath, expiresAt });
+ setProxyState({ status: 'ready', proxyBasePath, previewToken, expiresAt });
}
} catch (error) {
- previewProxyTargetCache.delete(targetKey);
+ previewProxyTargetCache.delete(proxyCacheKey);
if (!cancelled) {
const message = error instanceof Error ? error.message : String(error);
setProxyState({ status: 'error', message });
@@ -545,27 +581,51 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
return () => {
cancelled = true;
};
- }, [isLoopback, proxyRegistrationNonce, t, targetKey]);
+ }, [isLoopback, proxyCacheKey, proxyRegistrationNonce, t, targetKey]);
const directSrc = normalizedUrl
&& (normalizedUrl.protocol === 'http:' || normalizedUrl.protocol === 'https:')
? normalizedUrl.toString()
: '';
- const proxySrc = isLoopback && proxyState.status === 'ready' && normalizedUrl
+ const proxyUrlAuthKey = isLoopback && proxyState.status === 'ready'
+ ? `${proxyState.proxyBasePath}|${proxyState.previewToken || ''}|${reloadNonce}`
+ : '';
+
+ React.useEffect(() => {
+ if (!proxyUrlAuthKey) {
+ setUrlAuthReadyKey('');
+ return;
+ }
+
+ let cancelled = false;
+ setUrlAuthReadyKey('');
+ void refreshRuntimeUrlAuthToken(getRuntimeApiBaseUrl())
+ .then((token) => {
+ if (!cancelled && token) setUrlAuthReadyKey(proxyUrlAuthKey);
+ })
+ .catch(() => {});
+
+ return () => {
+ cancelled = true;
+ };
+ }, [proxyUrlAuthKey]);
+
+ const proxySrc = isLoopback && proxyState.status === 'ready' && normalizedUrl && urlAuthReadyKey === proxyUrlAuthKey
? (() => {
const path = normalizedUrl.pathname || '/';
const searchParams = new URLSearchParams(normalizedUrl.search);
searchParams.set('ocPreview', String(reloadNonce));
+ searchParams.set('oc_preview_token', proxyState.previewToken || '');
const search = searchParams.toString();
const hash = normalizedUrl.hash || '';
- return `${proxyState.proxyBasePath}${path}${search ? `?${search}` : ''}${hash}`;
+ return getRuntimeUrlResolver().authenticatedAsset(`${proxyState.proxyBasePath}${path}${search ? `?${search}` : ''}${hash}`);
})()
: '';
const effectiveSrc = isLoopback ? proxySrc : directSrc;
- const headerSrc = effectiveSrc || directSrc;
- const showLoading = isLoopback && (proxyState.status === 'loading' || proxyState.status === 'idle');
+ const headerSrc = isLoopback ? stripPreviewTokenFromUrl(proxySrc) : directSrc;
+ const showLoading = isLoopback && (proxyState.status === 'loading' || proxyState.status === 'idle' || urlAuthReadyKey !== proxyUrlAuthKey);
const showError = isLoopback && proxyState.status === 'error';
const attachPreviewAnnotation = React.useCallback((target: PreviewElementMetadata) => {
@@ -630,26 +690,26 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
if (!bridgeReady || !frameWindow) {
return;
}
- frameWindow.postMessage({
+ postPreviewBridgeMessage(frameWindow, proxySrc, {
source: 'openchamber-preview-parent',
version: 1,
type: 'set-inspect-mode',
enabled: inspectMode,
- }, window.location.origin);
- }, [bridgeReady, inspectMode]);
+ });
+ }, [bridgeReady, inspectMode, proxySrc]);
React.useEffect(() => {
const frameWindow = iframeRef.current?.contentWindow;
if (!bridgeReady || !frameWindow) {
return;
}
- frameWindow.postMessage({
+ postPreviewBridgeMessage(frameWindow, proxySrc, {
source: 'openchamber-preview-parent',
version: 1,
type: 'set-color-scheme',
scheme: previewColorScheme,
- }, window.location.origin);
- }, [bridgeReady, previewColorScheme]);
+ });
+ }, [bridgeReady, previewColorScheme, proxySrc]);
React.useEffect(() => {
if (!inspectMode || typeof window === 'undefined') return;
@@ -860,7 +920,7 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
void (async () => {
const probe = async (): Promise => {
try {
- return await fetch(proxySrc, {
+ return await runtimeFetch(proxySrc, {
method: 'GET',
credentials: 'include',
cache: 'no-store',
@@ -882,7 +942,7 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
}
if (response.status === 403 || response.status === 404) {
- previewProxyTargetCache.delete(targetKey);
+ previewProxyTargetCache.delete(proxyCacheKey);
setProxyState({ status: 'loading' });
bumpProxyRegistration();
return;
@@ -918,7 +978,7 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
return () => {
cancelled = true;
};
- }, [proxySrc, reloadNonce, targetKey]);
+ }, [proxyCacheKey, proxySrc, reloadNonce]);
const showUpstreamStarting = isLoopback
&& proxyState.status === 'ready'
@@ -943,7 +1003,8 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
try {
const location = frameWindow.location;
- if (location.origin !== window.location.origin) {
+ const proxyOrigin = getPreviewProxyOrigin(proxySrc);
+ if (location.origin !== proxyOrigin) {
return;
}
if (location.pathname.startsWith(proxyState.proxyBasePath)) {
@@ -955,7 +1016,7 @@ const PreviewPane: React.FC = ({ rawUrl, onNavigate }) => {
} catch {
// Cross-origin frames are expected for non-loopback/direct previews.
}
- }, [isLoopback, proxyState]);
+ }, [isLoopback, proxySrc, proxyState]);
return (
{}}
- onHostSwitched={() => setIsDesktopServicesOpen(false)}
- />
+ = ({
const [isDesktopServicesOpen, setIsDesktopServicesOpen] = React.useState(false);
const [isUsageRefreshSpinning, setIsUsageRefreshSpinning] = React.useState(false);
const [currentInstanceLabel, setCurrentInstanceLabel] = React.useState('Local');
+ const [currentInstanceIsLocal, setCurrentInstanceIsLocal] = React.useState(true);
+ const [remoteUpdateDialogOpen, setRemoteUpdateDialogOpen] = React.useState(false);
+ const [remoteUpdateInfo, setRemoteUpdateInfo] = React.useState(null);
+ const [remoteUpdateChecking, setRemoteUpdateChecking] = React.useState(false);
+ const [remoteUpdateError, setRemoteUpdateError] = React.useState(null);
const compactCurrentInstanceLabel = React.useMemo(() => formatCompactHeaderLabel(currentInstanceLabel), [currentInstanceLabel]);
const [desktopServicesTab, setDesktopServicesTab] = React.useState<'instance' | 'usage' | 'mcp'>(
isDesktopApp ? 'instance' : 'usage'
@@ -912,17 +958,25 @@ export const Header: React.FC = ({
}
try {
- const cfg = await desktopHostsGet();
- const currentHref = window.location.href;
- const localOrigin = window.__OPENCHAMBER_LOCAL_ORIGIN__ || window.location.origin;
-
- if (locationMatchesHost(currentHref, localOrigin)) {
+ if (isDesktopLocalOriginActive()) {
setCurrentInstanceLabel('Local');
+ setCurrentInstanceIsLocal(true);
+ return;
+ }
+ setCurrentInstanceIsLocal(false);
+
+ const cfg = await desktopHostsGet();
+ const localOrigin = window.__OPENCHAMBER_LOCAL_ORIGIN__ || window.location.origin;
+ const runtimeApiBaseUrl = getRuntimeApiBaseUrl();
+
+ if (runtimeApiBaseUrl && locationMatchesHost(runtimeApiBaseUrl, localOrigin)) {
+ setCurrentInstanceLabel('Local');
+ setCurrentInstanceIsLocal(true);
return;
}
const match = cfg.hosts.find((host) => {
- return locationMatchesHost(currentHref, host.url);
+ return runtimeApiBaseUrl ? locationMatchesHost(runtimeApiBaseUrl, getDesktopHostApiUrl(host)) : false;
});
if (match?.label?.trim()) {
@@ -933,12 +987,98 @@ export const Header: React.FC = ({
setCurrentInstanceLabel('Instance');
} catch {
setCurrentInstanceLabel('Local');
+ setCurrentInstanceIsLocal(true);
}
}, [isDesktopApp]);
useEffect(() => {
void refreshCurrentInstanceLabel();
}, [refreshCurrentInstanceLabel]);
+
+ const checkRemoteInstanceUpdate = React.useCallback(async () => {
+ if (currentInstanceIsLocal) {
+ setRemoteUpdateInfo(null);
+ setRemoteUpdateError(null);
+ return;
+ }
+
+ setRemoteUpdateChecking(true);
+ setRemoteUpdateError(null);
+ try {
+ const params = new URLSearchParams({ appType: 'web', instanceMode: 'remote' });
+ const response = await runtimeFetch(`/api/openchamber/update-check?${params.toString()}`, {
+ method: 'GET',
+ headers: { Accept: 'application/json' },
+ });
+ if (!response.ok) {
+ throw new Error(`Server responded with ${response.status}`);
+ }
+ const data = await response.json();
+ setRemoteUpdateInfo({
+ available: data.available ?? false,
+ version: data.version,
+ currentVersion: data.currentVersion ?? 'unknown',
+ body: data.body,
+ nextSuggestedCheckInSec: typeof data.nextSuggestedCheckInSec === 'number' ? data.nextSuggestedCheckInSec : undefined,
+ packageManager: data.packageManager,
+ updateCommand: data.updateCommand,
+ });
+ } catch (error) {
+ setRemoteUpdateInfo(null);
+ setRemoteUpdateError(error instanceof Error ? error.message : t('header.services.remoteUpdate.error'));
+ } finally {
+ setRemoteUpdateChecking(false);
+ }
+ }, [currentInstanceIsLocal, t]);
+
+ React.useEffect(() => {
+ setRemoteUpdateInfo(null);
+ setRemoteUpdateError(null);
+ setRemoteUpdateDialogOpen(false);
+ }, [currentInstanceIsLocal, currentInstanceLabel]);
+
+ React.useEffect(() => {
+ if (!isDesktopApp || currentInstanceIsLocal) {
+ return;
+ }
+
+ const initialDelayMs = 3000;
+ const intervalMs = 60 * 60 * 1000;
+ let disposed = false;
+ let timer: number | null = null;
+
+ const schedule = (delayMs: number) => {
+ timer = window.setTimeout(() => {
+ if (disposed || (typeof document !== 'undefined' && document.visibilityState !== 'visible')) {
+ schedule(intervalMs);
+ return;
+ }
+ void checkRemoteInstanceUpdate().finally(() => {
+ if (!disposed) {
+ schedule(intervalMs);
+ }
+ });
+ }, delayMs);
+ };
+
+ schedule(initialDelayMs);
+
+ return () => {
+ disposed = true;
+ if (timer !== null) {
+ window.clearTimeout(timer);
+ }
+ };
+ }, [checkRemoteInstanceUpdate, currentInstanceIsLocal, currentInstanceLabel, isDesktopApp]);
+
+ const openRemoteInstanceUpdate = React.useCallback(() => {
+ if (remoteUpdateInfo?.available) {
+ setRemoteUpdateDialogOpen(true);
+ return;
+ }
+ void checkRemoteInstanceUpdate();
+ }, [checkRemoteInstanceUpdate, remoteUpdateInfo?.available]);
+
useQuotaAutoRefresh();
const selectedModels = useQuotaStore((state) => state.selectedModels);
const expandedFamilies = useQuotaStore((state) => state.expandedFamilies);
@@ -1300,7 +1440,7 @@ export const Header: React.FC = ({
const payload = runtimeApis.github
? await runtimeApis.github.authActivate(accountId)
: await (async () => {
- const response = await fetch('/api/github/auth/activate', {
+ const response = await runtimeFetch('/api/github/auth/activate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -1366,6 +1506,8 @@ export const Header: React.FC = ({
void invokeDesktop('desktop_open_draft_mini_chat_window', {
directory: normalize(openDirectory || activeProject?.path || ''),
projectId: activeProject?.id ?? null,
+ apiBaseUrl: getRuntimeApiBaseUrl(),
+ clientToken: getRuntimeBearerTokenSync(),
}).catch((error) => {
console.warn('[header] failed to open draft mini chat window', error);
});
@@ -1383,6 +1525,8 @@ export const Header: React.FC = ({
void invokeDesktop('desktop_open_session_mini_chat_window', {
sessionId: currentSessionId,
directory: normalize(openDirectory || activeProject?.path || ''),
+ apiBaseUrl: getRuntimeApiBaseUrl(),
+ clientToken: getRuntimeBearerTokenSync(),
}).catch((error) => {
console.warn('[header] failed to open session mini chat window', error);
});
@@ -1740,7 +1884,7 @@ export const Header: React.FC = ({
}
try {
- const devRes = await fetch('/api/system/dev-shutdown', {
+ const devRes = await runtimeFetch('/api/system/dev-shutdown', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ previewUrls }),
@@ -1748,7 +1892,7 @@ export const Header: React.FC = ({
if (devRes.ok) {
shutdownRequested = true;
} else {
- const shutdownRes = await fetch('/api/system/shutdown', { method: 'POST' });
+ const shutdownRes = await runtimeFetch('/api/system/shutdown', { method: 'POST' });
shutdownRequested = shutdownRes.ok;
}
} catch {
@@ -1929,6 +2073,7 @@ export const Header: React.FC = ({
isDesktopApp={isDesktopApp}
currentInstanceLabel={currentInstanceLabel}
compactCurrentInstanceLabel={compactCurrentInstanceLabel}
+ currentInstanceIsLocal={currentInstanceIsLocal}
isDesktopServicesOpen={isDesktopServicesOpen}
setIsDesktopServicesOpen={setIsDesktopServicesOpen}
refreshCurrentInstanceLabel={refreshCurrentInstanceLabel}
@@ -1953,6 +2098,10 @@ export const Header: React.FC = ({
showDevShutdown={showDevShutdown}
isDevShutdownInFlight={isDevShutdownInFlight}
onDevShutdown={handleDevShutdown}
+ remoteUpdateInfo={remoteUpdateInfo}
+ remoteUpdateChecking={remoteUpdateChecking}
+ remoteUpdateError={remoteUpdateError}
+ onOpenRemoteUpdate={openRemoteInstanceUpdate}
/>
= ({
);
return (
-
- {isMobile ? renderMobile() : renderDesktop()}
-
+ <>
+
+ {isMobile ? renderMobile() : renderDesktop()}
+
+ {}}
+ onRestart={() => {}}
+ runtimeType="web"
+ />
+
);
};
diff --git a/packages/ui/src/components/layout/MainLayout.tsx b/packages/ui/src/components/layout/MainLayout.tsx
index d6f74cec..b23425a5 100644
--- a/packages/ui/src/components/layout/MainLayout.tsx
+++ b/packages/ui/src/components/layout/MainLayout.tsx
@@ -24,13 +24,13 @@ import { cn } from '@/lib/utils';
import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
import { ChatView } from '@/components/views/ChatView';
+import { DiffView } from '@/components/views/DiffView';
+import { FilesView } from '@/components/views/FilesView';
+import { GitView } from '@/components/views/GitView';
+import { PlanView } from '@/components/views/PlanView';
// Heavy views loaded on-demand to reduce initial bundle parse time.
-const PlanView = lazyWithChunkRecovery(() => import('@/components/views/PlanView').then(m => ({ default: m.PlanView })));
-const GitView = lazyWithChunkRecovery(() => import('@/components/views/GitView').then(m => ({ default: m.GitView })));
-const DiffView = lazyWithChunkRecovery(() => import('@/components/views/DiffView').then(m => ({ default: m.DiffView })));
const TerminalView = lazyWithChunkRecovery(() => import('@/components/views/TerminalView').then(m => ({ default: m.TerminalView })));
-const FilesView = lazyWithChunkRecovery(() => import('@/components/views/FilesView').then(m => ({ default: m.FilesView })));
const SettingsView = lazyWithChunkRecovery(() => import('@/components/views/SettingsView').then(m => ({ default: m.SettingsView })));
const SettingsWindow = lazyWithChunkRecovery(() => import('@/components/views/SettingsWindow').then(m => ({ default: m.SettingsWindow })));
const MultiRunWindow = lazyWithChunkRecovery(() => import('@/components/views/MultiRunWindow').then(m => ({ default: m.MultiRunWindow })));
diff --git a/packages/ui/src/components/layout/ProjectEditDialog.tsx b/packages/ui/src/components/layout/ProjectEditDialog.tsx
index 06ee364e..4fb3aff0 100644
--- a/packages/ui/src/components/layout/ProjectEditDialog.tsx
+++ b/packages/ui/src/components/layout/ProjectEditDialog.tsx
@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { toast } from '@/components/ui';
import { cn } from '@/lib/utils';
-import { PROJECT_ICONS, PROJECT_COLORS, PROJECT_COLOR_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
+import { PROJECT_ICONS, PROJECT_COLORS, PROJECT_COLOR_MAP, ProjectIconImage } from '@/lib/projectMeta';
import { useProjectsStore } from '@/stores/useProjectsStore';
import { useThemeSystem } from '@/contexts/useThemeSystem';
import { useI18n } from '@/lib/i18n';
@@ -146,19 +146,8 @@ export const ProjectEditDialog: React.FC = ({
const hasCustomIcon = currentIconImage?.source === 'custom';
const effectiveHasImageIcon = (hasStoredImageIcon && !pendingRemoveImageIcon) || hasPendingUploadImageIcon;
const hasRemovableImageIcon = effectiveHasImageIcon;
- const iconPreviewUrl = !previewImageFailed
- ? (hasPendingUploadImageIcon
- ? pendingUploadIconPreviewUrl
- : (hasStoredImageIcon && !pendingRemoveImageIcon
- ? getProjectIconImageUrl(
- { id: projectId, iconImage: currentIconImage ?? null },
- {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- },
- )
- : null))
- : null;
+ const showStoredImagePreview = hasStoredImageIcon && !pendingRemoveImageIcon;
+ const showImagePreview = !previewImageFailed && (hasPendingUploadImageIcon || showStoredImagePreview);
React.useEffect(() => {
setPreviewImageFailed(false);
@@ -352,7 +341,7 @@ export const ProjectEditDialog: React.FC = ({
);
})}
- {effectiveHasImageIcon && iconPreviewUrl && (
+ {effectiveHasImageIcon && showImagePreview && (
+
+ {displayLabel}
- )}
- {isActive && (
- {t('desktopHostSwitcher.header.current')}
- )}
-
- {statusIcon(statusKind)}
-
- {isSsh ? t(sshPhaseLabelKey(sshStatus?.phase)) : t(statusLabelKey(status?.status ?? null))}
- {!isSsh && status?.status === 'ok' && typeof status.latencyMs === 'number'
+ {isSsh && (
+
+ SSH
+
+ )}
+ {isActive && (
+ {t('desktopHostSwitcher.header.current')}
+ )}
+
+
+ {statusIcon(statusKind)}
+
+ {isSsh ? t(sshPhaseLabelKey(sshStatus?.phase)) : t(statusLabelKey(statusKind))}
+ {!isSsh && statusKind === 'ok' && typeof status?.latencyMs === 'number'
? t('desktopHostSwitcher.status.ping', { ms: Math.max(0, Math.round(status.latencyMs)) })
: ''}
@@ -841,52 +894,6 @@ export function DesktopHostSwitcherDialog({
- {!isLocal && !isSsh && (
-
-
-
-
-
- {
- e.stopPropagation();
- beginEdit(host);
- }}
- disabled={isSaving}
- >
-
- {
- e.stopPropagation();
- void deleteHost(host.id);
- }}
- className="text-destructive focus:text-destructive"
- disabled={isSaving}
- >
-
-
-
- )}
-
- {isLocal && (
-
- )}
-
{isSsh && !isLocal && (
(sshStatus?.phase === 'idle' || !sshStatus?.phase) ? (
@@ -939,7 +946,7 @@ export function DesktopHostSwitcherDialog({
type="button"
className={cn(
'h-8 w-8 rounded-md inline-flex items-center justify-center hover:bg-interactive-hover transition-colors',
- statusKind === 'unreachable' || statusKind === 'wrong-service'
+ isBlockedDisplayStatus(statusKind)
? 'text-muted-foreground/30 cursor-not-allowed'
: 'text-muted-foreground/60 hover:text-foreground',
)}
@@ -947,14 +954,14 @@ export function DesktopHostSwitcherDialog({
e.stopPropagation();
openInNewWindow(host);
}}
- disabled={statusKind === 'unreachable' || statusKind === 'wrong-service'}
+ disabled={isBlockedDisplayStatus(statusKind)}
aria-label={t('desktopHostSwitcher.actions.openInNewWindowAria')}
>
- {(statusKind === 'unreachable' || statusKind === 'wrong-service')
+ {isBlockedDisplayStatus(statusKind)
? t('desktopHostSwitcher.state.instanceUnreachable')
: t('desktopHostSwitcher.actions.openInNewWindow')}
@@ -1000,68 +1007,16 @@ export function DesktopHostSwitcherDialog({
)}
- {embedded && !isAddFormOpen ? (
-
-
-
- ) : (
-
-
- )}
+
-
- {t('desktopHostSwitcher.add.title')}
-
- {embedded && (
-
- )}
-
-
-
- setNewLabel(e.target.value)}
- onKeyDown={stopDropdownTypeahead}
- placeholder={t('desktopHostSwitcher.field.labelOptionalPlaceholder')}
- disabled={!tauriAvailable || isSaving}
- />
- setNewUrl(e.target.value)}
- onKeyDown={stopDropdownTypeahead}
- placeholder={t('desktopHostSwitcher.field.urlPlaceholder')}
- disabled={!tauriAvailable || isSaving}
- />
-
-
+
+
{error && (
{error}
@@ -1102,7 +1057,7 @@ export function DesktopHostSwitcherDialog({
type="button"
size="sm"
variant="outline"
- onClick={switchToLocal}
+ onClick={() => void switchToLocal()}
>
{t('desktopHostSwitcher.actions.switchToLocal')}
@@ -1152,6 +1107,7 @@ export function DesktopHostSwitcherButton({ headerIconButtonClass }: DesktopHost
const [open, setOpen] = React.useState(false);
const [label, setLabel] = React.useState('Local');
const [status, setStatus] = React.useState
@@ -1195,6 +1256,7 @@ const IframeBrowserPane: React.FC = ({ initialUrl, dire
const [isInspecting, setIsInspecting] = React.useState(false);
const [hoverTarget, setHoverTarget] = React.useState(null);
const [proxyState, setProxyState] = React.useState({ status: 'idle' });
+ const [urlAuthReadyKey, setUrlAuthReadyKey] = React.useState('');
const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
const newSessionDraftOpen = useSessionUIStore((state) => state.newSessionDraft?.open);
const addInlineCommentDraft = useInlineCommentDraftStore((state) => state.addDraft);
@@ -1264,10 +1326,13 @@ const IframeBrowserPane: React.FC = ({ initialUrl, dire
const proxyTargetKey = getBrowserProxyTargetKey(currentUrl);
const cached = getCachedProxyTarget(proxyTargetKey);
- if (cached) {
- setProxyState({ status: 'ready', proxyBasePath: cached.proxyBasePath, expiresAt: cached.expiresAt });
+ if (cached?.previewToken) {
+ setProxyState({ status: 'ready', proxyBasePath: cached.proxyBasePath, previewToken: cached.previewToken, expiresAt: cached.expiresAt });
return;
}
+ if (cached) {
+ previewProxyTargetCache.delete(proxyTargetKey);
+ }
let cancelled = false;
setProxyState({ status: 'loading' });
@@ -1275,7 +1340,7 @@ const IframeBrowserPane: React.FC = ({ initialUrl, dire
void (async () => {
try {
- const response = await fetch('/api/preview/targets', {
+ const response = await runtimeFetch('/api/preview/targets', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
@@ -1293,19 +1358,20 @@ const IframeBrowserPane: React.FC = ({ initialUrl, dire
return;
}
- const body = await response.json() as { proxyBasePath?: unknown; expiresAt?: unknown };
+ const body = await response.json() as { proxyBasePath?: unknown; previewToken?: unknown; expiresAt?: unknown };
const proxyBasePath = typeof body.proxyBasePath === 'string' ? body.proxyBasePath : '';
+ const previewToken = typeof body.previewToken === 'string' ? body.previewToken : '';
const expiresAt = typeof body.expiresAt === 'number' ? body.expiresAt : 0;
- if (!proxyBasePath) {
+ if (!proxyBasePath || !previewToken) {
if (!cancelled) {
setProxyState({ status: 'error', message: t('contextPanel.preview.proxyError') });
}
return;
}
- previewProxyTargetCache.set(proxyTargetKey, { proxyBasePath, expiresAt });
+ previewProxyTargetCache.set(proxyTargetKey, { proxyBasePath, previewToken, expiresAt });
if (!cancelled) {
- setProxyState({ status: 'ready', proxyBasePath, expiresAt });
+ setProxyState({ status: 'ready', proxyBasePath, previewToken, expiresAt });
}
} catch (error) {
if (!cancelled) {
@@ -1320,16 +1386,44 @@ const IframeBrowserPane: React.FC = ({ initialUrl, dire
};
}, [currentUrl, t]);
+ const proxyUrlAuthKey = currentUrl && proxyState.status === 'ready'
+ ? `${proxyState.proxyBasePath}|${proxyState.previewToken || ''}|${reloadNonce}`
+ : '';
+
+ React.useEffect(() => {
+ if (!proxyUrlAuthKey) {
+ setUrlAuthReadyKey('');
+ return;
+ }
+
+ let cancelled = false;
+ setUrlAuthReadyKey('');
+ void refreshRuntimeUrlAuthToken(getRuntimeApiBaseUrl())
+ .then((token) => {
+ if (!cancelled && token) setUrlAuthReadyKey(proxyUrlAuthKey);
+ })
+ .catch(() => {});
+
+ return () => {
+ cancelled = true;
+ };
+ }, [proxyUrlAuthKey]);
+
const proxySrc = React.useMemo(() => {
+ if (urlAuthReadyKey !== proxyUrlAuthKey) return '';
if (!currentUrl || proxyState.status !== 'ready') return '';
try {
const parsed = new URL(currentUrl);
const path = parsed.pathname || '/';
- return `${proxyState.proxyBasePath}${path}${parsed.search}${parsed.hash}`;
+ const searchParams = new URLSearchParams(parsed.search);
+ searchParams.set('ocPreview', String(reloadNonce));
+ searchParams.set('oc_preview_token', proxyState.previewToken || '');
+ const search = searchParams.toString();
+ return getRuntimeUrlResolver().authenticatedAsset(`${proxyState.proxyBasePath}${path}${search ? `?${search}` : ''}${parsed.hash}`);
} catch {
return '';
}
- }, [currentUrl, proxyState]);
+ }, [currentUrl, proxyState, proxyUrlAuthKey, reloadNonce, urlAuthReadyKey]);
const iframeSrc = proxySrc || (proxyState.status === 'error' ? currentUrl : '');
diff --git a/packages/ui/src/components/layout/Header.tsx b/packages/ui/src/components/layout/Header.tsx
index df1b3501..7903aa89 100644
--- a/packages/ui/src/components/layout/Header.tsx
+++ b/packages/ui/src/components/layout/Header.tsx
@@ -32,6 +32,7 @@ import { useFeatureFlagsStore } from '@/stores/useFeatureFlagsStore';
import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
+import { UpdateDialog } from '@/components/ui/UpdateDialog';
import { useDeviceInfo, useTabletStandalonePwaRuntime } from '@/lib/device';
import { cn, hasModifier } from '@/lib/utils';
import { McpDropdownContent } from '@/components/mcp/McpDropdown';
@@ -62,11 +63,14 @@ import { forceKillTerminal } from '@/lib/terminalApi';
import { useTerminalStore } from '@/stores/useTerminalStore';
import { ProjectActionsButton } from '@/components/layout/ProjectActionsButton';
import { SessionSwitcherDropdown } from '@/components/session/SessionSwitcherDropdown';
-import { canUseElectronDesktopIPC, invokeDesktop, isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag } from '@/lib/desktop';
-import { desktopHostsGet, locationMatchesHost, redactSensitiveUrl } from '@/lib/desktopHosts';
+import { canUseElectronDesktopIPC, invokeDesktop, isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, startDesktopWindowDrag, type UpdateInfo } from '@/lib/desktop';
+import { desktopHostsGet, getDesktopHostApiUrl, locationMatchesHost, redactSensitiveUrl } from '@/lib/desktopHosts';
import { resolveSessionDiffStats } from '@/components/session/sidebar/utils';
import { Icon } from "@/components/icon/Icon";
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+import { getRuntimeBearerTokenSync } from '@/lib/runtime-auth';
+import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
import type { Session } from '@opencode-ai/sdk/v2/client';
import type { IconName } from "@/components/icon/icons";
@@ -323,6 +327,7 @@ type DesktopServicesMenuProps = {
isDesktopApp: boolean;
currentInstanceLabel: string;
compactCurrentInstanceLabel: string;
+ currentInstanceIsLocal: boolean;
isDesktopServicesOpen: boolean;
setIsDesktopServicesOpen: React.Dispatch>;
refreshCurrentInstanceLabel: () => Promise;
@@ -346,6 +351,10 @@ type DesktopServicesMenuProps = {
showDevShutdown: boolean;
isDevShutdownInFlight: boolean;
onDevShutdown: () => Promise;
+ remoteUpdateInfo: UpdateInfo | null;
+ remoteUpdateChecking: boolean;
+ remoteUpdateError: string | null;
+ onOpenRemoteUpdate: () => void;
showPredValues: boolean;
};
@@ -353,6 +362,7 @@ const DesktopServicesMenu = React.memo(function DesktopServicesMenu({
isDesktopApp,
currentInstanceLabel,
compactCurrentInstanceLabel,
+ currentInstanceIsLocal,
isDesktopServicesOpen,
setIsDesktopServicesOpen,
refreshCurrentInstanceLabel,
@@ -376,6 +386,10 @@ const DesktopServicesMenu = React.memo(function DesktopServicesMenu({
showDevShutdown,
isDevShutdownInFlight,
onDevShutdown,
+ remoteUpdateInfo,
+ remoteUpdateChecking,
+ remoteUpdateError,
+ onOpenRemoteUpdate,
showPredValues,
}: DesktopServicesMenuProps) {
const { t } = useI18n();
@@ -453,12 +467,39 @@ const DesktopServicesMenu = React.memo(function DesktopServicesMenu({
{isDesktopApp && desktopServicesTab === 'instance' ? (
-
+ {!currentInstanceIsLocal ? (
+ {}}
+ onHostSwitched={() => setIsDesktopServicesOpen(false)}
+ />
+
) : null}
{desktopServicesTab === 'mcp' ? (
@@ -889,6 +930,11 @@ export const Header: React.FC
+
+ ) : null}
+
+
+
+
+ {remoteUpdateInfo?.available ? (
+
+ ) : null}
+ {t('header.services.remoteUpdate.title')}
+
+ {remoteUpdateInfo?.available
+ ? t('header.services.remoteUpdate.available', { version: remoteUpdateInfo.version || '' })
+ : remoteUpdateChecking
+ ? t('header.services.remoteUpdate.checking')
+ : remoteUpdateError || t('header.services.remoteUpdate.upToDate')}
+
+
{t('projectEditDialog.field.preview')}
@@ -360,13 +349,25 @@ export const ProjectEditDialog: React.FC = ({
className="inline-flex h-4 w-4 items-center justify-center overflow-hidden rounded-[2px]"
style={iconBackground ? { backgroundColor: iconBackground } : undefined}
>
- 
setPreviewImageFailed(true)}
- />
+ {hasPendingUploadImageIcon && pendingUploadIconPreviewUrl ? (
+ 
setPreviewImageFailed(true)}
+ />
+ ) : (
+ setPreviewImageFailed(true)}
+ />
+ )}
diff --git a/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx b/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx
index b0e98355..adf0e057 100644
--- a/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx
+++ b/packages/ui/src/components/multirun/MultiRunFusionDialog.tsx
@@ -166,21 +166,20 @@ export function MultiRunFusionDialog({
useSessionUIStore.getState().setCurrentSession(fusionSession.id, directory);
onOpenChange(false);
- await opencodeClient.withDirectory(directory ?? opencodeClient.getDirectory(), () =>
- opencodeClient.sendMessage({
- id: fusionSession.id,
- providerID,
- modelID,
- variant: variant || undefined,
- agent: agent || undefined,
- text: visiblePrompt,
- additionalParts: [
- { text: instructionsPrompt, synthetic: true },
- ...usableSources.map((item, index) => ({ text: buildSourcePart(item.source, item.text, index), synthetic: true })),
- { text: '\n\n--- FUSION INPUTS END ---\nNow write the final fused answer.', synthetic: true },
- ],
- })
- );
+ await opencodeClient.sendMessage({
+ id: fusionSession.id,
+ providerID,
+ modelID,
+ variant: variant || undefined,
+ agent: agent || undefined,
+ text: visiblePrompt,
+ additionalParts: [
+ { text: instructionsPrompt, synthetic: true },
+ ...usableSources.map((item, index) => ({ text: buildSourcePart(item.source, item.text, index), synthetic: true })),
+ { text: '\n\n--- FUSION INPUTS END ---\nNow write the final fused answer.', synthetic: true },
+ ],
+ directory: directory ?? opencodeClient.getDirectory(),
+ });
} catch (error) {
console.error('[MultiRunFusion] Failed to start fusion', error);
toast.error(t('multirun.fusion.toast.failed'));
diff --git a/packages/ui/src/components/multirun/MultiRunLauncher.tsx b/packages/ui/src/components/multirun/MultiRunLauncher.tsx
index 8a5ddefc..c56d6c54 100644
--- a/packages/ui/src/components/multirun/MultiRunLauncher.tsx
+++ b/packages/ui/src/components/multirun/MultiRunLauncher.tsx
@@ -26,7 +26,7 @@ import { Icon } from "@/components/icon/Icon";
import { isDesktopShell } from '@/lib/desktop';
import { useTabletStandalonePwaRuntime } from '@/lib/device';
import { useThemeSystem } from '@/contexts/useThemeSystem';
-import { PROJECT_ICON_MAP, PROJECT_COLOR_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
+import { PROJECT_ICON_MAP, PROJECT_COLOR_MAP, ProjectIconImage } from '@/lib/projectMeta';
import type { ProjectEntry } from '@/lib/api/types';
import { startDesktopWindowDrag } from '@/lib/desktopNative';
import { useI18n } from '@/lib/i18n';
@@ -145,30 +145,32 @@ export const MultiRunLauncher: React.FC{t('onboarding.remoteConnection.field.serverAddress')}
{redactSensitiveUrl(hostUrl)}
diff --git a/packages/ui/src/components/onboarding/LocalSetupScreen.tsx b/packages/ui/src/components/onboarding/LocalSetupScreen.tsx
index f33ae588..b04c4246 100644
--- a/packages/ui/src/components/onboarding/LocalSetupScreen.tsx
+++ b/packages/ui/src/components/onboarding/LocalSetupScreen.tsx
@@ -7,6 +7,7 @@ import { updateDesktopSettings } from '@/lib/persistence';
import { copyTextToClipboard } from '@/lib/clipboard';
import { restartDesktopApp } from '@/lib/desktop';
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
const INSTALL_COMMAND = 'curl -fsSL https://opencode.ai/install | bash';
const DOCS_URL = 'https://opencode.ai/docs';
@@ -99,7 +100,7 @@ export function LocalSetupScreen({
let cancelled = false;
void (async () => {
try {
- const response = await fetch('/api/config/settings', { method: 'GET', headers: { Accept: 'application/json' } });
+ const response = await runtimeFetch('/api/config/settings', { method: 'GET', headers: { Accept: 'application/json' } });
if (!response.ok) return;
const data = (await response.json().catch(() => null)) as null | { opencodeBinary?: unknown };
if (!data || cancelled) return;
@@ -134,7 +135,7 @@ export function LocalSetupScreen({
const checkCliAvailability = React.useCallback(async (): Promise
+ {probeMessageKey ? t(probeMessageKey as Parameters[0]) : null}
+
+ )}
+
{/* Blocking errors */}
{probeResult && isBlocking && (
{
expect(config.useRemoteLabel).toBe('Use Remote');
});
+ test('remote-incompatible exposes retry and both actions', () => {
+ const config = getDesktopRecoveryConfig('remote-incompatible', 'Old Server', 'https://old.example');
+
+ expect(config.showRetry).toBe(true);
+ expect(config.showUseLocal).toBe(true);
+ expect(config.showUseRemote).toBe(true);
+ expect(config.titleKey).toBe('onboarding.desktopRecovery.remoteIncompatible.title');
+ });
+
// ---------------------------------------------------------------------------
// 4. missing-default-host: chooser-with-context (both actions, no retry)
// ---------------------------------------------------------------------------
diff --git a/packages/ui/src/components/onboarding/desktopRecoveryConfig.ts b/packages/ui/src/components/onboarding/desktopRecoveryConfig.ts
index bdbaf369..95034a76 100644
--- a/packages/ui/src/components/onboarding/desktopRecoveryConfig.ts
+++ b/packages/ui/src/components/onboarding/desktopRecoveryConfig.ts
@@ -3,6 +3,7 @@ import { redactSensitiveUrl } from '@/lib/desktopHosts';
export type RecoveryVariant =
| 'local-unavailable'
| 'remote-unreachable'
+ | 'remote-incompatible'
| 'remote-wrong-service'
| 'remote-missing'
| 'missing-default-host';
@@ -113,6 +114,27 @@ export function getDesktopRecoveryConfig(
};
}
+ case 'remote-incompatible': {
+ const host = formatHostDisplay(hostLabel, hostUrl);
+ return {
+ title: 'Server Update Required',
+ description: `The OpenChamber server at "${host || 'unknown'}" is not compatible with this app version. Update OpenChamber on the server, then try again.`,
+ titleKey: 'onboarding.desktopRecovery.remoteIncompatible.title',
+ descriptionKey: 'onboarding.desktopRecovery.remoteIncompatible.description',
+ descriptionParams: host ? { host } : undefined,
+ iconKey: 'remote',
+ showRetry: true,
+ retryLabel: 'Retry Connection',
+ retryLabelKey: 'onboarding.desktopRecovery.remoteUnreachable.retry',
+ showUseLocal: true,
+ showUseRemote: true,
+ useLocalLabel: 'Use Local',
+ useLocalLabelKey: 'onboarding.desktopRecovery.common.useLocal',
+ useRemoteLabel: 'Use Remote',
+ useRemoteLabelKey: 'onboarding.desktopRecovery.common.useRemote',
+ };
+ }
+
case 'missing-default-host':
return {
title: 'No Default Connection',
diff --git a/packages/ui/src/components/onboarding/desktopRecoveryRouting.test.ts b/packages/ui/src/components/onboarding/desktopRecoveryRouting.test.ts
index b270f56c..476b7466 100644
--- a/packages/ui/src/components/onboarding/desktopRecoveryRouting.test.ts
+++ b/packages/ui/src/components/onboarding/desktopRecoveryRouting.test.ts
@@ -17,6 +17,10 @@ const EXPECTED_ROUTING: Record = {
};
const saveBehaviorSetting = async (settings: Partial, fallbackError: string) => {
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
@@ -104,12 +105,12 @@ export const BehaviorPage: React.FC = () => {
const load = async () => {
try {
const [settingsRes, agentsMdRes] = await Promise.all([
- fetch('/api/config/settings', {
+ runtimeFetch('/api/config/settings', {
method: 'GET',
headers: { Accept: 'application/json' },
signal: abort.signal,
}),
- fetch('/api/behavior/agents-md', {
+ runtimeFetch('/api/behavior/agents-md', {
method: 'GET',
headers: { Accept: 'application/json' },
signal: abort.signal,
@@ -204,7 +205,7 @@ export const BehaviorPage: React.FC = () => {
setIsSaving(true);
try {
const content = normalizeAgentsMdContent(prompt);
- const response = await fetch('/api/behavior/agents-md', {
+ const response = await runtimeFetch('/api/behavior/agents-md', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
diff --git a/packages/ui/src/components/sections/mcp/McpOAuthCallbackPage.tsx b/packages/ui/src/components/sections/mcp/McpOAuthCallbackPage.tsx
index d6565726..20a998f5 100644
--- a/packages/ui/src/components/sections/mcp/McpOAuthCallbackPage.tsx
+++ b/packages/ui/src/components/sections/mcp/McpOAuthCallbackPage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { Button } from '@/components/ui/button';
import { useMcpStore } from '@/stores/useMcpStore';
import { parseMcpOAuthCallbackContext, parseMcpOAuthCallbackStateKey } from '@/components/sections/mcp/mcpOAuth';
+import { runtimeFetch } from '@/lib/runtime-fetch';
const parseQueryParam = (params: URLSearchParams, key: string): string | null => {
const value = params.get(key);
@@ -42,7 +43,7 @@ export const McpOAuthCallbackPage: React.FC = () => {
if (error) {
if (callbackStateKey) {
- void fetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`, { method: 'DELETE' }).catch(() => undefined);
+ void runtimeFetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`, { method: 'DELETE' }).catch(() => undefined);
}
setStatus('error');
setMessage(errorDescription ?? error);
@@ -57,7 +58,7 @@ export const McpOAuthCallbackPage: React.FC = () => {
let pendingContext = callbackContext;
if (!pendingContext && callbackStateKey) {
- const response = await fetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`);
+ const response = await runtimeFetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`);
if (response.ok) {
const payload = await response.json().catch(() => null) as { name?: string; directory?: string | null } | null;
if (payload?.name?.trim()) {
@@ -75,13 +76,13 @@ export const McpOAuthCallbackPage: React.FC = () => {
await completeAuth(pendingContext.name, code, pendingContext.directory);
if (callbackStateKey) {
- await fetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`, { method: 'DELETE' }).catch(() => undefined);
+ await runtimeFetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`, { method: 'DELETE' }).catch(() => undefined);
}
setStatus('success');
setMessage('Authorization completed. You can close this tab and return to OpenChamber.');
} catch (authError) {
if (callbackStateKey) {
- await fetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`, { method: 'DELETE' }).catch(() => undefined);
+ await runtimeFetch(`/api/mcp/auth/pending?state=${encodeURIComponent(callbackStateKey)}`, { method: 'DELETE' }).catch(() => undefined);
}
setStatus('error');
setMessage(normalizeMcpAuthErrorMessage(authError, 'Failed to complete MCP authorization.'));
diff --git a/packages/ui/src/components/sections/mcp/McpPage.tsx b/packages/ui/src/components/sections/mcp/McpPage.tsx
index 404c9fd6..f98f94a5 100644
--- a/packages/ui/src/components/sections/mcp/McpPage.tsx
+++ b/packages/ui/src/components/sections/mcp/McpPage.tsx
@@ -20,6 +20,8 @@ import {
} from './mcpImport';
import { useMcpStore } from '@/stores/useMcpStore';
import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
import { cn } from '@/lib/utils';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { MCP_OAUTH_CALLBACK_PATH, parseMcpOAuthCallbackContext, parseMcpOAuthCallbackStateKey } from '@/components/sections/mcp/mcpOAuth';
@@ -501,7 +503,7 @@ const buildMcpOAuthRedirectUri = (name?: string | null, directory?: string | nul
return null;
}
- const url = new URL(MCP_OAUTH_CALLBACK_PATH, window.location.origin);
+ const url = new URL(MCP_OAUTH_CALLBACK_PATH, getRuntimeApiBaseUrl() || window.location.origin);
if (typeof name === 'string' && name.trim()) {
url.searchParams.set('server', name.trim());
}
@@ -516,7 +518,7 @@ const queuePendingMcpAuthContext = async (input: {
name: string;
directory?: string | null;
}): Promise => {
- const response = await fetch('/api/mcp/auth/pending', {
+ const response = await runtimeFetch('/api/mcp/auth/pending', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -533,7 +535,7 @@ const queuePendingMcpAuthContext = async (input: {
};
const getPendingMcpAuthContext = async (stateKey: string): Promise<{ name: string; directory: string | null } | null> => {
- const response = await fetch(`/api/mcp/auth/pending?state=${encodeURIComponent(stateKey)}`);
+ const response = await runtimeFetch(`/api/mcp/auth/pending?state=${encodeURIComponent(stateKey)}`);
if (!response.ok) {
return null;
}
@@ -554,7 +556,7 @@ const clearPendingMcpAuthContext = async (stateKey: string | null | undefined):
return;
}
- await fetch(`/api/mcp/auth/pending?state=${encodeURIComponent(stateKey.trim())}`, { method: 'DELETE' }).catch(() => undefined);
+ await runtimeFetch(`/api/mcp/auth/pending?state=${encodeURIComponent(stateKey.trim())}`, { method: 'DELETE' }).catch(() => undefined);
};
const normalizeMcpAuthErrorMessage = (
diff --git a/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx b/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx
index 76d86864..1d60f005 100644
--- a/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/DefaultsSettings.tsx
@@ -10,6 +10,7 @@ import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
import { cn } from '@/lib/utils';
import { useI18n } from '@/lib/i18n';
import { parseModelIdentifier } from '@/lib/modelIdentifier';
+import { runtimeFetch } from '@/lib/runtime-fetch';
const getDisplayModel = (
storedModel: string | undefined
@@ -76,7 +77,7 @@ export const DefaultsSettings: React.FC = () => {
}
if (!data) {
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'GET',
headers: { Accept: 'application/json' },
});
@@ -131,7 +132,7 @@ export const DefaultsSettings: React.FC = () => {
try {
await updateDesktopSettings({ defaultModel: newValue ?? '', defaultVariant: '' });
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ defaultModel: newValue }),
diff --git a/packages/ui/src/components/sections/openchamber/DesktopNetworkSettings.tsx b/packages/ui/src/components/sections/openchamber/DesktopNetworkSettings.tsx
index dc8e8a3a..948a2235 100644
--- a/packages/ui/src/components/sections/openchamber/DesktopNetworkSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/DesktopNetworkSettings.tsx
@@ -12,6 +12,8 @@ import {
setDesktopLaunchAtLogin,
} from '@/lib/desktop';
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
+import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
export const DesktopNetworkSettings: React.FC = () => {
const { t } = useI18n();
@@ -37,7 +39,7 @@ export const DesktopNetworkSettings: React.FC = () => {
let cancelled = false;
void (async () => {
try {
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'GET',
headers: { Accept: 'application/json' },
});
@@ -123,7 +125,14 @@ export const DesktopNetworkSettings: React.FC = () => {
return null;
}
- const parsed = Number(window.location.port);
+ const runtimeApiBaseUrl = getRuntimeApiBaseUrl();
+ const portSource = runtimeApiBaseUrl || window.location.href;
+ let parsed = 0;
+ try {
+ parsed = Number(new URL(portSource).port);
+ } catch {
+ parsed = Number(window.location.port);
+ }
return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
}, []);
const lanUrl = draftValue && lanAddress && currentPort ? `http://${lanAddress}:${currentPort}` : null;
@@ -165,7 +174,7 @@ export const DesktopNetworkSettings: React.FC = () => {
setError(null);
try {
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
diff --git a/packages/ui/src/components/sections/openchamber/GitHubSettings.tsx b/packages/ui/src/components/sections/openchamber/GitHubSettings.tsx
index 6aa19a03..dd7a2398 100644
--- a/packages/ui/src/components/sections/openchamber/GitHubSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/GitHubSettings.tsx
@@ -9,6 +9,7 @@ import { cn } from '@/lib/utils';
import { openExternalUrl } from '@/lib/url';
import { useI18n } from '@/lib/i18n';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { runtimeFetch } from '@/lib/runtime-fetch';
import { Icon } from "@/components/icon/Icon";
type GitHubUser = {
@@ -81,7 +82,7 @@ export const GitHubSettings: React.FC = () => {
const payload = runtimeGitHub
? await runtimeGitHub.authStart()
: await (async () => {
- const response = await fetch('/api/github/auth/start', {
+ const response = await runtimeFetch('/api/github/auth/start', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -114,7 +115,7 @@ export const GitHubSettings: React.FC = () => {
return runtimeGitHub.authComplete(deviceCode) as Promise;
}
- const response = await fetch('/api/github/auth/complete', {
+ const response = await runtimeFetch('/api/github/auth/complete', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@@ -181,7 +182,7 @@ export const GitHubSettings: React.FC = () => {
if (runtimeGitHub) {
await runtimeGitHub.authDisconnect();
} else {
- const response = await fetch('/api/github/auth', {
+ const response = await runtimeFetch('/api/github/auth', {
method: 'DELETE',
headers: { Accept: 'application/json' },
});
@@ -206,7 +207,7 @@ export const GitHubSettings: React.FC = () => {
const payload = runtimeGitHub
? await runtimeGitHub.authActivate(accountId)
: await (async () => {
- const response = await fetch('/api/github/auth/activate', {
+ const response = await runtimeFetch('/api/github/auth/activate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/packages/ui/src/components/sections/openchamber/GitSettings.tsx b/packages/ui/src/components/sections/openchamber/GitSettings.tsx
index beeb9efe..8a9fb78c 100644
--- a/packages/ui/src/components/sections/openchamber/GitSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/GitSettings.tsx
@@ -7,6 +7,7 @@ import { useUIStore } from '@/stores/useUIStore';
import { getRegisteredRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
import { setFilesViewShowGitignored, useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
export const GitSettings: React.FC = () => {
const { t } = useI18n();
@@ -63,7 +64,7 @@ export const GitSettings: React.FC = () => {
// 2. Fetch API (Web/server)
if (!data) {
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'GET',
headers: { Accept: 'application/json' },
});
diff --git a/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx b/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
index 05401002..f1a64b0f 100644
--- a/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
+++ b/packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
@@ -15,8 +15,19 @@ import { KeyboardShortcutsSettings } from './KeyboardShortcutsSettings';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { useDeviceInfo } from '@/lib/device';
import { isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
+import { subscribeRuntimeEndpointChanged } from '@/lib/runtime-switch';
import type { OpenChamberSection } from './types';
+const useRuntimeEndpointEpoch = (): number => {
+ const [epoch, setEpoch] = React.useState(0);
+
+ React.useEffect(() => {
+ return subscribeRuntimeEndpointChanged(() => setEpoch((current) => current + 1));
+ }, []);
+
+ return epoch;
+};
+
interface OpenChamberPageProps {
/** Which section to display. If undefined, shows all sections (mobile/legacy behavior) */
section?: OpenChamberSection;
@@ -24,8 +35,10 @@ interface OpenChamberPageProps {
export const OpenChamberPage: React.FC = ({ section }) => {
const { isMobile } = useDeviceInfo();
+ const runtimeEndpointEpoch = useRuntimeEndpointEpoch();
const showAbout = isMobile && isWebRuntime();
const isVSCode = isVSCodeRuntime();
+ void runtimeEndpointEpoch;
const showDesktopNetworkSettings = isDesktopShell() && isDesktopLocalOriginActive();
// If no section specified, show all (mobile/legacy behavior)
@@ -135,6 +148,8 @@ const ChatSectionContent: React.FC = () => {
// Sessions section: Default model & agent, Session retention
const SessionsSectionContent: React.FC = () => {
const isVSCode = isVSCodeRuntime();
+ const runtimeEndpointEpoch = useRuntimeEndpointEpoch();
+ void runtimeEndpointEpoch;
const showDesktopNetworkSettings = isDesktopShell() && isDesktopLocalOriginActive();
return (
+ {showMobileLayoutSetting && (
+
diff --git a/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx b/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
index 4c3fd11e..f9df4f25 100644
--- a/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { runtimeFetch } from '@/lib/runtime-fetch';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useThemeSystem } from '@/contexts/useThemeSystem';
@@ -27,6 +28,7 @@ import { CODE_FONT_OPTIONS, DEFAULT_MONO_FONT, DEFAULT_UI_FONT, UI_FONT_OPTIONS,
import { useI18n, type Locale } from '@/lib/i18n';
import { useConfigStore } from '@/stores/useConfigStore';
import { normalizeMobileKeyboardMode, supportsMobileKeyboardResizeContent, type MobileKeyboardMode } from '@/lib/mobileKeyboardMode';
+import { getStoredMobileLayoutPreference, setStoredMobileLayoutPreference, type MobileLayoutPreference } from '@/lib/mobileLayoutPreference';
import {
setDirectoryShowHidden,
useDirectoryShowHidden,
@@ -129,6 +131,17 @@ const MOBILE_KEYBOARD_MODE_OPTIONS: Option[] = [
},
];
+const MOBILE_LAYOUT_OPTIONS: Array<{ value: MobileLayoutPreference; labelKey: string }> = [
+ {
+ value: 'default',
+ labelKey: 'settings.openchamber.visual.option.mobileLayout.default',
+ },
+ {
+ value: 'new',
+ labelKey: 'settings.openchamber.visual.option.mobileLayout.new',
+ },
+];
+
type PwaInstallNameWindow = Window & {
__OPENCHAMBER_SET_PWA_INSTALL_NAME__?: (value: string) => string;
__OPENCHAMBER_SET_PWA_ORIENTATION__?: (value: 'system' | 'portrait' | 'landscape') => 'system' | 'portrait' | 'landscape';
@@ -483,9 +496,10 @@ export const OpenChamberVisualSettings: React.FC
const isVSCode = isVSCodeRuntime();
const hasThemeSettings = shouldShow('theme') && !isVSCode;
const hasLocalizationSettings = shouldShow('theme') || shouldShow('timeFormat') || shouldShow('weekStart');
+ const showMobileLayoutSetting = isMobile && isWebRuntime() && !isDesktopShell() && !isVSCode;
const hasAppearanceSettings = isVSCode
? hasLocalizationSettings
- : (shouldShow('theme') || shouldShow('pwaInstallName') || shouldShow('pwaOrientation') || shouldShow('timeFormat') || shouldShow('weekStart'));
+ : (shouldShow('theme') || showMobileLayoutSetting || shouldShow('pwaInstallName') || shouldShow('pwaOrientation') || shouldShow('timeFormat') || shouldShow('weekStart'));
const hasLayoutSettings = shouldShow('fontSize') || shouldShow('terminalFontSize') || shouldShow('spacing') || shouldShow('inputBarOffset');
const hasNavigationSettings = shouldShow('terminalQuickKeys') && !isMobile;
const hasBehaviorSettings = shouldShow('mermaidRendering')
@@ -509,6 +523,7 @@ export const OpenChamberVisualSettings: React.FC
const showPwaInstallNameSetting = shouldShow('pwaInstallName') && isWebRuntime() && browserTab && !isDesktopShell() && !isVSCode;
const showPwaOrientationSetting = shouldShow('pwaOrientation') && isWebRuntime() && !isDesktopShell() && !isVSCode;
const showMobileKeyboardModeSetting = shouldShow('mobileKeyboardMode') && isWebRuntime() && !isDesktopShell() && !isVSCode && supportsMobileKeyboardResizeContent();
+ const [mobileLayoutPreference, setMobileLayoutPreference] = React.useState(() => getStoredMobileLayoutPreference());
const [pwaInstallName, setPwaInstallName] = React.useState('');
const [pwaOrientation, setPwaOrientation] = React.useState<'system' | 'portrait' | 'landscape'>('system');
const selectedTimeFormatLabel = React.useMemo(() => {
@@ -528,6 +543,16 @@ export const OpenChamberVisualSettings: React.FC
return option ? tUnsafe(option.labelKey) : undefined;
}, [mobileKeyboardMode, tUnsafe]);
+ const handleMobileLayoutPreferenceChange = React.useCallback((value: MobileLayoutPreference) => {
+ if (value === mobileLayoutPreference) {
+ return;
+ }
+
+ setMobileLayoutPreference(value);
+ setStoredMobileLayoutPreference(value);
+ window.location.reload();
+ }, [mobileLayoutPreference]);
+
const applyPwaInstallName = React.useCallback(async (value: string) => {
if (typeof window === 'undefined') {
return;
@@ -578,7 +603,7 @@ export const OpenChamberVisualSettings: React.FC
const loadPwaInstallName = async () => {
try {
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'GET',
headers: { Accept: 'application/json' },
cache: 'no-store',
@@ -656,6 +681,26 @@ export const OpenChamberVisualSettings: React.FC
+ {t('settings.openchamber.visual.section.mobileLayout')}
+
+ )}
+
+ {MOBILE_LAYOUT_OPTIONS.map((option) => (
+
+ ))}
+
+
{t('settings.openchamber.visual.field.lightTheme')}
diff --git a/packages/ui/src/components/sections/openchamber/OpenCodeCliSettings.tsx b/packages/ui/src/components/sections/openchamber/OpenCodeCliSettings.tsx
index e78090d3..7feaa686 100644
--- a/packages/ui/src/components/sections/openchamber/OpenCodeCliSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/OpenCodeCliSettings.tsx
@@ -9,6 +9,7 @@ import { updateDesktopSettings } from '@/lib/persistence';
import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
import { useUIStore } from '@/stores/useUIStore';
import { useI18n } from '@/lib/i18n';
+import { runtimeFetch } from '@/lib/runtime-fetch';
export const OpenCodeCliSettings: React.FC = () => {
const { t } = useI18n();
@@ -22,7 +23,7 @@ export const OpenCodeCliSettings: React.FC = () => {
let cancelled = false;
void (async () => {
try {
- const response = await fetch('/api/config/settings', {
+ const response = await runtimeFetch('/api/config/settings', {
method: 'GET',
headers: { Accept: 'application/json' },
});
diff --git a/packages/ui/src/components/sections/openchamber/TunnelSettings.tsx b/packages/ui/src/components/sections/openchamber/TunnelSettings.tsx
index 853144c6..2669a5ad 100644
--- a/packages/ui/src/components/sections/openchamber/TunnelSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/TunnelSettings.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import QRCode from 'qrcode';
import { toast } from '@/components/ui';
+import { runtimeFetch } from '@/lib/runtime-fetch';
import { Button } from '@/components/ui/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Input } from '@/components/ui/input';
@@ -12,6 +13,7 @@ import { updateDesktopSettings } from '@/lib/persistence';
import { useI18n } from '@/lib/i18n';
import { cn } from '@/lib/utils';
import { openExternalUrl } from '@/lib/url';
+import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
type TunnelState =
| 'checking'
@@ -364,7 +366,14 @@ export const TunnelSettings: React.FC = () => {
if (typeof window === 'undefined') {
return null;
}
- const parsed = Number(window.location.port);
+ const runtimeApiBaseUrl = getRuntimeApiBaseUrl();
+ const portSource = runtimeApiBaseUrl || window.location.href;
+ let parsed = 0;
+ try {
+ parsed = Number(new URL(portSource).port);
+ } catch {
+ parsed = Number(window.location.port);
+ }
if (Number.isFinite(parsed) && parsed > 0) {
return parsed;
}
@@ -398,10 +407,10 @@ export const TunnelSettings: React.FC = () => {
const checkAvailabilityAndStatus = React.useCallback(async (signal: AbortSignal) => {
try {
const [checkRes, statusRes, settingsRes, providersRes] = await Promise.all([
- fetch('/api/openchamber/tunnel/check', { signal }),
- fetch('/api/openchamber/tunnel/status', { signal }),
- fetch('/api/config/settings', { signal, headers: { Accept: 'application/json' } }),
- fetch('/api/openchamber/tunnel/providers', { signal }),
+ runtimeFetch('/api/openchamber/tunnel/check', { signal }),
+ runtimeFetch('/api/openchamber/tunnel/status', { signal }),
+ runtimeFetch('/api/config/settings', { signal, headers: { Accept: 'application/json' } }),
+ runtimeFetch('/api/openchamber/tunnel/providers', { signal }),
]);
const checkData = await checkRes.json();
@@ -614,7 +623,7 @@ export const TunnelSettings: React.FC = () => {
let cancelled = false;
const refreshSessions = async () => {
try {
- const statusRes = await fetch('/api/openchamber/tunnel/status');
+ const statusRes = await runtimeFetch('/api/openchamber/tunnel/status');
if (!statusRes.ok || cancelled) {
return;
}
@@ -818,7 +827,7 @@ export const TunnelSettings: React.FC = () => {
});
}
- const res = await fetch('/api/openchamber/tunnel/start', {
+ const res = await runtimeFetch('/api/openchamber/tunnel/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -913,8 +922,8 @@ export const TunnelSettings: React.FC = () => {
setState('stopping');
try {
- await fetch('/api/openchamber/tunnel/stop', { method: 'POST' });
- const statusRes = await fetch('/api/openchamber/tunnel/status');
+ await runtimeFetch('/api/openchamber/tunnel/stop', { method: 'POST' });
+ const statusRes = await runtimeFetch('/api/openchamber/tunnel/status');
if (statusRes.ok) {
const statusData = (await statusRes.json()) as TunnelStatusResponse;
setSessionRecords(Array.isArray(statusData.activeSessions) ? statusData.activeSessions : []);
diff --git a/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx b/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx
index 6beeaf48..8b1bf656 100644
--- a/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx
+++ b/packages/ui/src/components/sections/openchamber/VoiceSettings.tsx
@@ -20,6 +20,7 @@ import { audioStreamService } from '@/lib/voice/audioStreamService';
import { wasmSttService, WASM_MODELS } from '@/lib/voice/wasmSttService';
import type { WasmModelStatus } from '@/lib/voice/wasmSttService';
import { cn } from '@/lib/utils';
+import { runtimeFetch } from '@/lib/runtime-fetch';
import { useI18n } from '@/lib/i18n';
import { disposePreviewAudio } from './voicePreviewAudio';
const LANGUAGE_OPTIONS = [
@@ -278,7 +279,7 @@ export const VoiceSettings: React.FC = () => {
const checkOpenAIAvailability = async () => {
try {
- const response = await fetch('/api/tts/status');
+ const response = await runtimeFetch('/api/tts/status');
const data = await response.json();
const hasServerKey = data.available;
const hasSettingsKey = openaiApiKey.trim().length > 0;
@@ -298,7 +299,7 @@ export const VoiceSettings: React.FC = () => {
return;
}
- fetch('/api/tts/say/status')
+ runtimeFetch('/api/tts/say/status')
.then(res => res.json())
.then(data => {
setIsSayAvailable(data.available);
@@ -327,7 +328,7 @@ export const VoiceSettings: React.FC = () => {
setIsPreviewPlaying(true);
let audio: HTMLAudioElement | null = null;
try {
- const response = await fetch('/api/tts/say/speak', {
+ const response = await runtimeFetch('/api/tts/say/speak', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -381,7 +382,7 @@ export const VoiceSettings: React.FC = () => {
setIsOpenAIPreviewPlaying(true);
let audio: HTMLAudioElement | null = null;
try {
- const response = await fetch('/api/tts/speak', {
+ const response = await runtimeFetch('/api/tts/speak', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -441,7 +442,7 @@ export const VoiceSettings: React.FC = () => {
setIsCompatiblePreviewPlaying(true);
let audio: HTMLAudioElement | null = null;
try {
- const response = await fetch('/api/tts/speak', {
+ const response = await runtimeFetch('/api/tts/speak', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
diff --git a/packages/ui/src/components/sections/projects/ProjectsPage.tsx b/packages/ui/src/components/sections/projects/ProjectsPage.tsx
index ec58255e..3ac2f9c1 100644
--- a/packages/ui/src/components/sections/projects/ProjectsPage.tsx
+++ b/packages/ui/src/components/sections/projects/ProjectsPage.tsx
@@ -6,7 +6,7 @@ import { toast } from '@/components/ui';
import { cn } from '@/lib/utils';
import { useProjectsStore } from '@/stores/useProjectsStore';
import { useUIStore } from '@/stores/useUIStore';
-import { PROJECT_COLORS, PROJECT_ICONS, PROJECT_COLOR_MAP as COLOR_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
+import { PROJECT_COLORS, PROJECT_ICONS, PROJECT_COLOR_MAP as COLOR_MAP, ProjectIconImage } from '@/lib/projectMeta';
import { WorktreeSectionContent } from '@/components/sections/openchamber/WorktreeSectionContent';
import { ProjectActionsSection } from '@/components/sections/projects/ProjectActionsSection';
import { Icon } from "@/components/icon/Icon";
@@ -160,16 +160,8 @@ export const ProjectsPage: React.FC = () => {
const hasCustomIcon = selectedProject?.iconImage?.source === 'custom';
const effectiveHasImageIcon = (hasStoredImageIcon && !pendingRemoveImageIcon) || hasPendingUploadImageIcon;
const hasRemovableImageIcon = effectiveHasImageIcon;
- const iconPreviewUrl = !previewImageFailed
- ? (hasPendingUploadImageIcon
- ? pendingUploadIconPreviewUrl
- : (selectedProject && hasStoredImageIcon && !pendingRemoveImageIcon
- ? getProjectIconImageUrl(selectedProject, {
- themeVariant: currentTheme.metadata.variant,
- iconColor: currentTheme.colors.surface.foreground,
- })
- : null))
- : null;
+ const showStoredImagePreview = Boolean(selectedProject && hasStoredImageIcon && !pendingRemoveImageIcon);
+ const showImagePreview = !previewImageFailed && (hasPendingUploadImageIcon || showStoredImagePreview);
const handleUploadIcon = React.useCallback((file: File | null) => {
if (!selectedProject || !file || isUploadingIcon) {
@@ -368,7 +360,7 @@ export const ProjectsPage: React.FC = () => {
);
})}
- {effectiveHasImageIcon && iconPreviewUrl && (
+ {effectiveHasImageIcon && showImagePreview && (
{t('settings.projects.page.field.preview')}
@@ -376,13 +368,25 @@ export const ProjectsPage: React.FC = () => {
className="inline-flex h-4 w-4 items-center justify-center overflow-hidden rounded-[2px]"
style={iconBackground ? { backgroundColor: iconBackground } : undefined}
>
- setPreviewImageFailed(true)}
- />
+ {hasPendingUploadImageIcon && pendingUploadIconPreviewUrl ? (
+ setPreviewImageFailed(true)}
+ />
+ ) : selectedProject ? (
+ setPreviewImageFailed(true)}
+ />
+ ) : null}
diff --git a/packages/ui/src/components/sections/projects/ProjectsSidebar.tsx b/packages/ui/src/components/sections/projects/ProjectsSidebar.tsx
index 0c0d0b49..bb820307 100644
--- a/packages/ui/src/components/sections/projects/ProjectsSidebar.tsx
+++ b/packages/ui/src/components/sections/projects/ProjectsSidebar.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
import { SettingsSidebarLayout } from '@/components/sections/shared/SettingsSidebarLayout';
import { SettingsSidebarItem } from '@/components/sections/shared/SettingsSidebarItem';
import { Icon } from "@/components/icon/Icon";
-import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, getProjectIconImageUrl } from '@/lib/projectMeta';
+import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, ProjectIconImage } from '@/lib/projectMeta';
import { cn } from '@/lib/utils';
import { isVSCodeRuntime } from '@/lib/desktop';
import { sessionEvents } from '@/lib/sessionEvents';
@@ -18,7 +18,6 @@ export const ProjectsSidebar: React.FC<{ onItemSelect?: () => void }> = ({ onIte
const selectedId = useUIStore((state) => state.settingsProjectsSelectedId);
const setSelectedId = useUIStore((state) => state.setSettingsProjectsSelectedId);
const { currentTheme } = useThemeSystem();
- const [brokenIconIds, setBrokenIconIds] = React.useState
-
-
-
-
+ ) : null}
- {t('settings.remoteInstances.page.title')}
-{t('settings.remoteInstances.page.description')}
+ {clientAuth ? ( +
+
+
-
+
+ {t('settings.remoteInstances.clientAuth.title')}
+{t('settings.remoteInstances.clientAuth.description')}
+
+ setRemoteClientLabel(event.target.value)} placeholder={t('settings.remoteInstances.clientAuth.field.labelPlaceholder')} />
+
+
+
+ {pairingUrl ? (
+
+ {pairingQrDataUrl ? 
: null}
+
+ ) : null}
+ {createdRemoteClientToken ? (
+
+
+ {t('settings.remoteInstances.clientAuth.pairingUrl')}
+{pairingUrl}
+
+
+
+ ) : null}
+ {t('settings.remoteInstances.clientAuth.createdToken')}
+{createdRemoteClientToken}
+
+ {revokedClientCount > 0 ? (
+
+ {remoteClientError ?
+
+
+ ) : null}
+ {remoteClientsLoading ? (
+ {t('settings.remoteInstances.clientAuth.state.loading')}
+ ) : remoteClients.length === 0 ? ( +{t('settings.remoteInstances.clientAuth.state.empty')}
+ ) : remoteClients.map((client) => { + const isLocalDesktopClient = client.clientKind === 'desktop-local'; + return ( +
+
+ );
+ })}
+
+
+
+
+
+ {client.label}
+ {isLocalDesktopClient ? ( + + {t('settings.remoteInstances.clientAuth.state.thisDevice')} + + ) : null} +{client.revokedAt ? t('settings.remoteInstances.clientAuth.state.revoked') : client.lastUsedAt ? t('settings.remoteInstances.clientAuth.lastUsed', { date: client.lastUsedAt }) : t('settings.remoteInstances.clientAuth.neverUsed')}
+{remoteClientError}
: null} +{t('settings.remoteInstances.page.empty.selectInstance')}
-
+ {showInstanceManagement ?
@@ -694,15 +1229,15 @@ export const RemoteInstancesPage: React.FC = () => {
) : importCandidates.length === 0 ? (
+
+
+
: null}
+
+ {showInstanceManagement ? : null}
+
+ {showInstanceManagement ? : null}
+
+ {showInstanceManagement ? : null}
+
+ {showInstanceManagement ?
+
+ {t('settings.remoteInstances.direct.title')}
+{t('settings.remoteInstances.direct.description')}
+
+
+
+ {t('settings.remoteInstances.direct.note')}
+
+
+
+
+
+ {directLoading ? (
+
+
+ {directError ? {t('settings.remoteInstances.direct.state.loading')}
+ ) : directHosts.length === 0 ? ( +{t('settings.remoteInstances.direct.state.empty')}
+ ) : directHosts.map((host) => ( +
+
+ ))}
+
+
+
+
+
+
+ {redactSensitiveUrl(host.label)}
+ {directDefaultHostId === host.id ? {t('desktopHostSwitcher.header.default')} : null} +{redactSensitiveUrl(host.apiUrl || host.url)}
+
+
+
+
+
+ {directError}
: null} +
+
+ {isLoading ? (
+
+
: null}
+
+ {showInstanceManagement ? : null}
+
+ {showInstanceManagement ?
+
+
+
+
+
+
+ {t('settings.remoteInstances.sidebar.title')}
+{t('settings.remoteInstances.sidebar.total', { count: instances.length })}
+{t('settings.remoteInstances.page.import.loading')}
+ ) : instances.length === 0 ? ( +{t('settings.remoteInstances.page.import.noneFound')}
+ ) : instances.map((instance) => { + const instanceStatus = statusesById[instance.id]; + const title = instance.nickname?.trim() || instance.sshParsed?.destination || instance.id; + const phase = instanceStatus?.phase; + const ready = phase === 'ready'; + return ( +
+
+ );
+ })}
+
+
+
+
+
+ {title}
++ {t(phaseLabelKey(phase))}{instanceStatus?.localUrl ? ` · ${instanceStatus.localUrl}` : ''} +
+
+
+
+
+
+ {t('settings.remoteInstances.page.import.sectionTitle')}
{t('settings.remoteInstances.page.import.noneFound')}
) : ( -
+
{importCandidates.map((candidate) => (
-
: null}
+
)}
-
+
-
))}
+
{candidate.host}
{candidate.pattern ? ` ${t('settings.remoteInstances.page.import.patternSuffix')}` : ''}
- {candidate.source} config
+ {candidate.sshCommand}