mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-07-06 21:52:43 +08:00
Compare commits
1 Commits
fix/shell-
...
feat/upgra
| Author | SHA1 | Date | |
|---|---|---|---|
|
9a0c8b20e5 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -134,7 +134,6 @@ tasks/
|
||||
|
||||
# Translations
|
||||
!src/i18n/locales/en/tasks.json
|
||||
!src/i18n/locales/fr/tasks.json
|
||||
!src/i18n/locales/ja/tasks.json
|
||||
!src/i18n/locales/ru/tasks.json
|
||||
!src/i18n/locales/de/tasks.json
|
||||
|
||||
@@ -164,14 +164,6 @@ CloudCLI verfügt über ein Plugin-System, mit dem benutzerdefinierte Tabs mit e
|
||||
| Plugin | Beschreibung |
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Zeigt Dateianzahl, Codezeilen, Dateityp-Aufschlüsselung, größte Dateien und zuletzt geänderte Dateien des aktuellen Projekts |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Vollwertiges xterm.js-Terminal mit Multi-Tab-Unterstützung |
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | Überwacht lange laufende Claude-Code-Sitzungen auf Hänger und stellt Prozesssteuerungen bereit |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | Erstellt arbeitsbereichsbezogene geplante Prompts und führt sie über eine lokale CLI wie Codex, Claude Code oder Gemini CLI aus |
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | Sitzungsintelligenz für Claude Code in CloudCLI, inklusive Sichtbarkeit des Token-Verbrauchs |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | Aktive Claude-Code-Sitzungen anzeigen, verwalten und beenden |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | API-Kosten anhand von Modellpreisen und Token-Nutzung berechnen, mit Unterstützung für Preisvorlagen |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | Task-Queue-Dashboard zum Anzeigen, Filtern und Starten von Agent-Aufgaben |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | Kanban-Board für GitHub Issues mit bidirektionaler TaskMaster-Synchronisierung und automatischer Installation des /github-task CLI-Skills |
|
||||
|
||||
### Eigenes Plugin erstellen
|
||||
|
||||
|
||||
@@ -158,14 +158,6 @@ CloudCLI にはプラグインシステムがあり、独自のフロントエ
|
||||
| プラグイン | 説明 |
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 現在のプロジェクトについて、ファイル数、コード行数、ファイル種別の内訳、最大ファイル、最近変更されたファイルを表示 |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | 複数タブに対応した本格的な xterm.js ターミナル |
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | 長時間実行中の Claude Code セッションのハングを監視し、プロセス操作を提供 |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | ワークスペース単位のスケジュール済みプロンプトを作成し、Codex、Claude Code、Gemini CLI などのローカル CLI で実行 |
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | CloudCLI 内で Claude Code のセッション分析を行い、トークン消費の可視化も提供 |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | アクティブな Claude Code セッションを表示、管理、終了 |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | モデル価格とトークン使用量から API コストを計算し、モデル価格プリセットにも対応 |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | エージェントタスクを表示、フィルタリング、起動するためのタスクキューダッシュボード |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | GitHub Issues 用の Kanban ボード。TaskMaster との双方向同期と /github-task CLI スキルの自動インストールに対応 |
|
||||
|
||||
### 自作する
|
||||
|
||||
|
||||
@@ -158,14 +158,6 @@ CloudCLI는 커스텀 탭과 선택적 Node.js 백엔드가 포함된 플러그
|
||||
| 플러그인 | 설명 |
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 현재 프로젝트의 파일 수, 코드 줄 수, 파일 유형 분포, 가장 큰 파일, 최근 수정 파일을 표시 |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | 다중 탭을 지원하는 전체 xterm.js 터미널 |
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | 장시간 실행 중인 Claude Code 세션의 중단 상태를 감시하고 프로세스 제어를 제공 |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | 워크스페이스 범위 예약 프롬프트를 만들고 Codex, Claude Code, Gemini CLI 같은 로컬 CLI로 실행 |
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | CloudCLI 안에서 Claude Code 세션 인텔리전스와 토큰 소모 가시성을 제공 |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | 활성 Claude Code 세션을 보고, 관리하고, 종료 |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | 모델 가격과 토큰 사용량으로 API 비용을 계산하고 모델 가격 프리셋을 지원 |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | 에이전트 작업을 보고, 필터링하고, 실행하는 작업 큐 대시보드 |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | GitHub Issues용 Kanban 보드. TaskMaster 양방향 동기화와 /github-task CLI 스킬 자동 설치 지원 |
|
||||
|
||||
### 직접 만들기
|
||||
|
||||
|
||||
@@ -164,14 +164,7 @@ CloudCLI has a plugin system that lets you add custom tabs with their own fronte
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Shows file counts, lines of code, file-type breakdown, largest files, and recently modified files for your current project |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Full xterm.js terminal with multi-tab support|
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | Watches long-running Claude Code sessions for hangs and exposes process controls |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | Create workspace-scoped scheduled prompts and execute them through a local CLI such as Codex, Claude Code, or Gemini CLI|
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | Session intelligence for Claude Code inside CloudCLI, including token burn visibility |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | View, manage, and kill active Claude Code sessions |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | Calculate API costs from model prices and token usage, with preset model pricing support |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | Task queue dashboard to view, filter, and launch agent tasks |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | Kanban board for GitHub Issues with bidirectional TaskMaster sync and /github-task CLI skill auto-install |
|
||||
|
||||
### Build Your Own
|
||||
|
||||
**[Plugin Starter Template →](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** — fork this repo to create your own plugin. It includes a working example with frontend rendering, live context updates, and RPC communication to a backend server.
|
||||
|
||||
@@ -164,14 +164,6 @@ CloudCLI UI — это open source UI-слой, на котором постро
|
||||
| Плагин | Описание |
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Показывает количество файлов, строки кода, разбивку по типам файлов, самые большие файлы и недавно изменённые файлы для текущего проекта |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Полноценный терминал xterm.js с поддержкой нескольких вкладок |
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | Отслеживает зависания долгих сессий Claude Code и предоставляет управление процессами |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | Создаёт запланированные промпты для рабочей области и запускает их через локальную CLI, например Codex, Claude Code или Gemini CLI |
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | Аналитика сессий Claude Code внутри CloudCLI, включая видимость расхода токенов |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | Просмотр, управление и завершение активных сессий Claude Code |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | Расчёт стоимости API по ценам моделей и использованию токенов, с поддержкой пресетов цен |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | Дашборд очереди задач для просмотра, фильтрации и запуска агентских задач |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | Kanban-доска для GitHub Issues с двусторонней синхронизацией TaskMaster и автоустановкой CLI-навыка /github-task |
|
||||
|
||||
### Создать свой
|
||||
|
||||
|
||||
@@ -164,13 +164,6 @@ CloudCLI, kendi frontend UI'sı ve isteğe bağlı Node.js arka ucu olan özel s
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | Mevcut projen için dosya sayıları, kod satırları, dosya türü dağılımı, en büyük dosyalar ve son değiştirilen dosyaları gösterir |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | Çoklu sekme destekli tam xterm.js terminali |
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | Uzun süren Claude Code oturumlarını takılmalara karşı izler ve süreç kontrolleri sunar |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | Çalışma alanı kapsamlı zamanlanmış prompt'lar oluşturur ve bunları Codex, Claude Code veya Gemini CLI gibi yerel CLI'larla çalıştırır |
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | CloudCLI içinde Claude Code oturum zekası ve token tüketimi görünürlüğü sağlar |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | Aktif Claude Code oturumlarını görüntülemeni, yönetmeni ve sonlandırmanı sağlar |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | Model fiyatları ve token kullanımından API maliyetlerini hesaplar; model fiyatı hazır ayarlarını destekler |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | Ajan görevlerini görüntülemek, filtrelemek ve başlatmak için görev kuyruğu paneli |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | GitHub Issues için Kanban panosu; çift yönlü TaskMaster senkronizasyonu ve /github-task CLI becerisi otomatik kurulumu içerir |
|
||||
|
||||
### Kendi Eklentini Yaz
|
||||
|
||||
|
||||
@@ -158,14 +158,6 @@ CloudCLI 配备插件系统，允许你添加带自定义前端 UI 和可选 Nod
|
||||
| 插件 | 描述 |
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 展示当前项目的文件数、代码行数、文件类型分布、最大文件以及最近修改的文件 |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | 支持多标签页的完整 xterm.js 终端 |
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | 监控长时间运行的 Claude Code 会话是否卡住，并提供进程控制 |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | 创建工作区范围的定时提示词，并通过 Codex、Claude Code 或 Gemini CLI 等本地 CLI 执行 |
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | 在 CloudCLI 中提供 Claude Code 会话智能分析，包括 token 消耗可视化 |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | 查看、管理并终止活动的 Claude Code 会话 |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | 根据模型价格和 token 用量计算 API 成本，并支持模型价格预设 |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | 用于查看、筛选和启动代理任务的任务队列仪表板 |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | 用于 GitHub Issues 的看板，支持 TaskMaster 双向同步和 /github-task CLI 技能自动安装 |
|
||||
|
||||
### 自行构建
|
||||
|
||||
|
||||
@@ -158,14 +158,6 @@ CloudCLI 配備外掛系統，允許你新增帶有自訂前端 UI 和選用 Nod
|
||||
| 外掛 | 描述 |
|
||||
|---|---|
|
||||
| **[Project Stats](https://github.com/cloudcli-ai/cloudcli-plugin-starter)** | 展示目前專案的檔案數、程式碼行數、檔案類型分佈、最大檔案以及最近修改的檔案 |
|
||||
| **[Web Terminal](https://github.com/cloudcli-ai/cloudcli-plugin-terminal)** | 支援多分頁的完整 xterm.js 終端機 |
|
||||
| **[Claude Watch](https://github.com/satsuki19980613/cloudcli-claude-watch)** | 監控長時間執行的 Claude Code 工作階段是否卡住，並提供程序控制 |
|
||||
| **[CloudCLI Scheduler](https://github.com/grostim/cloudcli-cron)** | 建立工作區範圍的排程提示詞，並透過 Codex、Claude Code 或 Gemini CLI 等本機 CLI 執行 |
|
||||
| **[PRISM CloudCLI](https://github.com/jakeefr/cloudcli-plugin-prism)** | 在 CloudCLI 中提供 Claude Code 工作階段智慧分析，包括 token 消耗可視化 |
|
||||
| **[Sessions](https://github.com/strykereye2/cloudcli-plugin-session-manager)** | 檢視、管理並終止作用中的 Claude Code 工作階段 |
|
||||
| **[Token Cost Calculator](https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator)** | 根據模型價格與 token 用量計算 API 成本，並支援模型價格預設 |
|
||||
| **[Task Queue](https://github.com/TadMSTR/cloudcli-plugin-task-queue)** | 用於檢視、篩選和啟動代理任務的任務佇列儀表板 |
|
||||
| **[GitHub Issues Board](https://github.com/szmidtpiotr/claude-github-issue)** | 用於 GitHub Issues 的看板，支援 TaskMaster 雙向同步和 /github-task CLI 技能自動安裝 |
|
||||
|
||||
### 自行建構
|
||||
|
||||
|
||||
2992
package-lock.json
generated
2992
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
56
package.json
56
package.json
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"name": "@cloudcli-ai/cloudcli",
|
||||
"version": "1.34.0",
|
||||
"productName": "CloudCLI",
|
||||
"description": "A web-based UI for Claude Code CLI",
|
||||
"type": "module",
|
||||
"main": "dist-server/server/index.js",
|
||||
@@ -9,7 +8,6 @@
|
||||
"cloudcli": "dist-server/server/cli.js"
|
||||
},
|
||||
"files": [
|
||||
"electron/",
|
||||
"server/",
|
||||
"shared/",
|
||||
"public/api-docs.html",
|
||||
@@ -32,10 +30,6 @@
|
||||
"server:dev": "tsx --tsconfig server/tsconfig.json server/index.js",
|
||||
"server:dev-watch": "tsx watch --tsconfig server/tsconfig.json server/index.js",
|
||||
"client": "vite",
|
||||
"desktop": "electron electron/main.js",
|
||||
"desktop:dev": "cross-env ELECTRON_DEV_URL=http://127.0.0.1:5173 electron electron/main.js",
|
||||
"desktop:pack": "npm run build && electron-builder --dir",
|
||||
"desktop:dist:mac": "npm run build && electron-builder --mac dmg zip",
|
||||
"build": "npm run build:client && npm run build:server",
|
||||
"build:client": "vite build",
|
||||
"prebuild:server": "node -e \"require('node:fs').rmSync('dist-server', { recursive: true, force: true })\"",
|
||||
@@ -51,53 +45,6 @@
|
||||
"prepare": "husky",
|
||||
"update:platform": "./update-platform.sh"
|
||||
},
|
||||
"build": {
|
||||
"appId": "ai.cloudcli.desktop",
|
||||
"productName": "CloudCLI",
|
||||
"artifactName": "CloudCLI-${version}-${arch}.${ext}",
|
||||
"directories": {
|
||||
"output": "release"
|
||||
},
|
||||
"extraMetadata": {
|
||||
"main": "electron/main.js"
|
||||
},
|
||||
"files": [
|
||||
"electron/",
|
||||
"public/",
|
||||
"dist/",
|
||||
"dist-server/",
|
||||
"shared/",
|
||||
"server/",
|
||||
"package.json"
|
||||
],
|
||||
"protocols": [
|
||||
{
|
||||
"name": "CloudCLI",
|
||||
"schemes": [
|
||||
"cloudcli"
|
||||
]
|
||||
}
|
||||
],
|
||||
"mac": {
|
||||
"category": "public.app-category.developer-tools",
|
||||
"target": [
|
||||
"dmg",
|
||||
"zip"
|
||||
],
|
||||
"extendInfo": {
|
||||
"CFBundleName": "CloudCLI",
|
||||
"CFBundleDisplayName": "CloudCLI",
|
||||
"CFBundleURLTypes": [
|
||||
{
|
||||
"CFBundleURLName": "CloudCLI",
|
||||
"CFBundleURLSchemes": [
|
||||
"cloudcli"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"keywords": [
|
||||
"claude code",
|
||||
"claude-code",
|
||||
@@ -194,9 +141,6 @@
|
||||
"auto-changelog": "^2.5.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"concurrently": "^8.2.2",
|
||||
"cross-env": "^10.1.0",
|
||||
"electron": "^38.0.0",
|
||||
"electron-builder": "^26.15.3",
|
||||
"eslint": "^9.39.3",
|
||||
"eslint-import-resolver-typescript": "^4.4.4",
|
||||
"eslint-plugin-boundaries": "^6.0.2",
|
||||
|
||||
@@ -1,384 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
import './load-env.js';
|
||||
|
||||
type JsonRpcRequest = {
|
||||
jsonrpc: '2.0';
|
||||
id?: string | number | null;
|
||||
method: string;
|
||||
params?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
type ToolDefinition = {
|
||||
name: string;
|
||||
description: string;
|
||||
inputSchema: Record<string, unknown>;
|
||||
};
|
||||
|
||||
const textResponse = (text: string) => ({
|
||||
content: [{ type: 'text', text }],
|
||||
});
|
||||
|
||||
const jsonResponse = (value: unknown) => textResponse(JSON.stringify(value, null, 2));
|
||||
|
||||
const readString = (value: unknown, name: string): string => {
|
||||
if (typeof value !== 'string' || value.trim() === '') {
|
||||
throw new Error(`${name} is required.`);
|
||||
}
|
||||
return value.trim();
|
||||
};
|
||||
|
||||
const readOptionalString = (value: unknown): string | undefined =>
|
||||
typeof value === 'string' && value.trim() ? value.trim() : undefined;
|
||||
|
||||
const readNumber = (value: unknown): number | undefined =>
|
||||
typeof value === 'number' && Number.isFinite(value) ? value : undefined;
|
||||
|
||||
const apiUrl = (process.env.CLOUDCLI_BROWSER_USE_API_URL || 'http://127.0.0.1:3001/api/browser-use-mcp').replace(/\/$/, '');
|
||||
const apiToken = process.env.CLOUDCLI_BROWSER_USE_MCP_TOKEN || '';
|
||||
const API_TIMEOUT_MS = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_API_TIMEOUT_MS || '60000', 10);
|
||||
|
||||
async function callBrowserUseApi(toolName: string, input: Record<string, unknown>) {
|
||||
if (!apiToken) {
|
||||
throw new Error('CLOUDCLI_BROWSER_USE_MCP_TOKEN is not configured.');
|
||||
}
|
||||
|
||||
const response = await fetch(`${apiUrl}/tools/${encodeURIComponent(toolName)}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${apiToken}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(input),
|
||||
signal: AbortSignal.timeout(API_TIMEOUT_MS),
|
||||
});
|
||||
const data = await response.json() as { success?: boolean; data?: unknown; error?: string };
|
||||
if (!response.ok || data.success === false) {
|
||||
throw new Error(data.error || `Browser API request failed (${response.status})`);
|
||||
}
|
||||
return data.data;
|
||||
}
|
||||
|
||||
const sessionIdSchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string', description: 'Browser session id.' },
|
||||
},
|
||||
required: ['sessionId'],
|
||||
};
|
||||
|
||||
const tools: ToolDefinition[] = [
|
||||
{
|
||||
name: 'browser_create_session',
|
||||
description: 'Create a temporary Browser session that the agent can control. Optionally provide a background profileName to reuse cookies and storage.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
profileName: { type: 'string', description: 'Optional background profile name for persistent browser storage.' },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_list_sessions',
|
||||
description: 'List Browser sessions currently available to agents.',
|
||||
inputSchema: { type: 'object', properties: {} },
|
||||
},
|
||||
{
|
||||
name: 'browser_snapshot',
|
||||
description: 'Capture current page metadata, screenshot data URL, and visible body text for a Browser session.',
|
||||
inputSchema: sessionIdSchema,
|
||||
},
|
||||
{
|
||||
name: 'browser_take_screenshot',
|
||||
description: 'Capture the latest screenshot for a Browser session.',
|
||||
inputSchema: sessionIdSchema,
|
||||
},
|
||||
{
|
||||
name: 'browser_navigate',
|
||||
description: 'Navigate a Browser session to an HTTP or HTTPS URL.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
url: { type: 'string' },
|
||||
},
|
||||
required: ['sessionId', 'url'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_click',
|
||||
description: 'Click an element by CSS selector, visible text, or x/y coordinates.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
selector: { type: 'string' },
|
||||
text: { type: 'string' },
|
||||
x: { type: 'number' },
|
||||
y: { type: 'number' },
|
||||
},
|
||||
required: ['sessionId'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_type',
|
||||
description: 'Type text into the focused page or fill a CSS selector. Set submit to press Enter after typing.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
selector: { type: 'string' },
|
||||
text: { type: 'string' },
|
||||
submit: { type: 'boolean' },
|
||||
},
|
||||
required: ['sessionId', 'text'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_fill_form',
|
||||
description: 'Fill multiple form fields using CSS selectors.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
fields: {
|
||||
type: 'array',
|
||||
items: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
selector: { type: 'string' },
|
||||
value: { type: 'string' },
|
||||
},
|
||||
required: ['selector', 'value'],
|
||||
},
|
||||
},
|
||||
},
|
||||
required: ['sessionId', 'fields'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_press_key',
|
||||
description: 'Press a keyboard key, for example Enter, Escape, Tab, or Control+A.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
key: { type: 'string' },
|
||||
},
|
||||
required: ['sessionId', 'key'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_select_option',
|
||||
description: 'Select option values in a select element found by CSS selector.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
selector: { type: 'string' },
|
||||
values: { type: 'array', items: { type: 'string' } },
|
||||
},
|
||||
required: ['sessionId', 'selector', 'values'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_wait_for',
|
||||
description: 'Wait for visible text, a URL pattern, or a short timeout.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
text: { type: 'string' },
|
||||
url: { type: 'string' },
|
||||
timeoutMs: { type: 'number' },
|
||||
},
|
||||
required: ['sessionId'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_tabs',
|
||||
description: 'List, open, select, or close tabs in a Browser session.',
|
||||
inputSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
sessionId: { type: 'string' },
|
||||
action: { type: 'string', enum: ['list', 'new', 'select', 'close'] },
|
||||
index: { type: 'number' },
|
||||
url: { type: 'string' },
|
||||
},
|
||||
required: ['sessionId'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'browser_close_session',
|
||||
description: 'Stop a Browser session controlled by agents.',
|
||||
inputSchema: sessionIdSchema,
|
||||
},
|
||||
];
|
||||
|
||||
async function callTool(name: string, args: Record<string, unknown>) {
|
||||
switch (name) {
|
||||
case 'browser_create_session':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
profileName: readOptionalString(args.profileName),
|
||||
}));
|
||||
case 'browser_list_sessions':
|
||||
return jsonResponse(await callBrowserUseApi(name, {}));
|
||||
case 'browser_snapshot':
|
||||
return jsonResponse(await callBrowserUseApi(name, { sessionId: readString(args.sessionId, 'sessionId') }));
|
||||
case 'browser_take_screenshot': {
|
||||
return jsonResponse(await callBrowserUseApi(name, { sessionId: readString(args.sessionId, 'sessionId') }));
|
||||
}
|
||||
case 'browser_navigate':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
url: readString(args.url, 'url'),
|
||||
}));
|
||||
case 'browser_click':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
selector: readOptionalString(args.selector),
|
||||
text: readOptionalString(args.text),
|
||||
x: readNumber(args.x),
|
||||
y: readNumber(args.y),
|
||||
}));
|
||||
case 'browser_type':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
selector: readOptionalString(args.selector),
|
||||
text: readString(args.text, 'text'),
|
||||
submit: args.submit === true,
|
||||
}));
|
||||
case 'browser_fill_form': {
|
||||
const fields = Array.isArray(args.fields)
|
||||
? args.fields.map((field) => {
|
||||
const record = field as Record<string, unknown>;
|
||||
return {
|
||||
selector: readString(record.selector, 'field.selector'),
|
||||
value: readString(record.value, 'field.value'),
|
||||
};
|
||||
})
|
||||
: [];
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
fields,
|
||||
}));
|
||||
}
|
||||
case 'browser_press_key':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
key: readString(args.key, 'key'),
|
||||
}));
|
||||
case 'browser_select_option':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
selector: readString(args.selector, 'selector'),
|
||||
values: Array.isArray(args.values) ? args.values.filter((value): value is string => typeof value === 'string') : [],
|
||||
}));
|
||||
case 'browser_wait_for':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
text: readOptionalString(args.text),
|
||||
url: readOptionalString(args.url),
|
||||
timeoutMs: readNumber(args.timeoutMs),
|
||||
}));
|
||||
case 'browser_tabs':
|
||||
return jsonResponse(await callBrowserUseApi(name, {
|
||||
sessionId: readString(args.sessionId, 'sessionId'),
|
||||
action: args.action === 'new' || args.action === 'select' || args.action === 'close' || args.action === 'list'
|
||||
? args.action
|
||||
: undefined,
|
||||
index: readNumber(args.index),
|
||||
url: readOptionalString(args.url),
|
||||
}));
|
||||
case 'browser_close_session':
|
||||
return jsonResponse(await callBrowserUseApi(name, { sessionId: readString(args.sessionId, 'sessionId') }));
|
||||
default:
|
||||
throw new Error(`Unknown tool: ${name}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMessage(message: JsonRpcRequest) {
|
||||
if (message.method === 'initialize') {
|
||||
return {
|
||||
protocolVersion: '2024-11-05',
|
||||
capabilities: { tools: {} },
|
||||
serverInfo: { name: 'cloudcli-browser', version: '1.0.0' },
|
||||
};
|
||||
}
|
||||
|
||||
if (message.method === 'tools/list') {
|
||||
return { tools };
|
||||
}
|
||||
|
||||
if (message.method === 'tools/call') {
|
||||
const params = message.params || {};
|
||||
const name = readString(params.name, 'name');
|
||||
const args = (params.arguments && typeof params.arguments === 'object'
|
||||
? params.arguments
|
||||
: {}) as Record<string, unknown>;
|
||||
return callTool(name, args);
|
||||
}
|
||||
|
||||
if (message.method.startsWith('notifications/')) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
throw new Error(`Unsupported method: ${message.method}`);
|
||||
}
|
||||
|
||||
function writeMessage(message: Record<string, unknown>) {
|
||||
// MCP stdio transport uses newline-delimited JSON (one JSON-RPC message per line,
|
||||
// no embedded newlines). This is NOT the LSP Content-Length framing.
|
||||
process.stdout.write(`${JSON.stringify(message)}\n`);
|
||||
}
|
||||
|
||||
function sendResult(id: string | number | null | undefined, result: unknown) {
|
||||
if (id === undefined) {
|
||||
return;
|
||||
}
|
||||
writeMessage({ jsonrpc: '2.0', id, result });
|
||||
}
|
||||
|
||||
function sendError(id: string | number | null | undefined, error: unknown) {
|
||||
if (id === undefined) {
|
||||
return;
|
||||
}
|
||||
writeMessage({
|
||||
jsonrpc: '2.0',
|
||||
id,
|
||||
error: {
|
||||
code: -32000,
|
||||
message: error instanceof Error ? error.message : String(error),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
let buffer = '';
|
||||
|
||||
process.stdin.on('data', (chunk) => {
|
||||
buffer += chunk.toString('utf8');
|
||||
let newlineIndex: number;
|
||||
while ((newlineIndex = buffer.indexOf('\n')) !== -1) {
|
||||
const rawMessage = buffer.slice(0, newlineIndex).trim();
|
||||
buffer = buffer.slice(newlineIndex + 1);
|
||||
if (!rawMessage) {
|
||||
continue;
|
||||
}
|
||||
|
||||
void (async () => {
|
||||
let request: JsonRpcRequest;
|
||||
try {
|
||||
request = JSON.parse(rawMessage) as JsonRpcRequest;
|
||||
} catch (error) {
|
||||
sendError(null, error);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const result = await handleMessage(request);
|
||||
sendResult(request.id, result);
|
||||
} catch (error) {
|
||||
sendError(request.id, error);
|
||||
}
|
||||
})();
|
||||
}
|
||||
});
|
||||
@@ -8,7 +8,6 @@
|
||||
* (no args) - Start the server (default)
|
||||
* start - Start the server
|
||||
* sandbox - Manage Docker sandbox environments
|
||||
* browser-use-mcp - Run Browser MCP stdio server
|
||||
* status - Show configuration and data locations
|
||||
* help - Show help information
|
||||
* version - Show version information
|
||||
@@ -157,7 +156,6 @@ Usage:
|
||||
Commands:
|
||||
start Start the CloudCLI server (default)
|
||||
sandbox Manage Docker sandbox environments
|
||||
browser-use-mcp Run the Browser MCP stdio server
|
||||
status Show configuration and data locations
|
||||
update Update to the latest version
|
||||
help Show this help information
|
||||
@@ -607,10 +605,6 @@ async function startServer() {
|
||||
await import('./index.js');
|
||||
}
|
||||
|
||||
async function startBrowserUseMcp() {
|
||||
await import('./browser-use-mcp.js');
|
||||
}
|
||||
|
||||
// Parse CLI arguments
|
||||
function parseArgs(args) {
|
||||
const parsed = { command: 'start', options: {} };
|
||||
@@ -664,9 +658,6 @@ async function main() {
|
||||
case 'sandbox':
|
||||
await sandboxCommand(remainingArgs || []);
|
||||
break;
|
||||
case 'browser-use-mcp':
|
||||
await startBrowserUseMcp();
|
||||
break;
|
||||
case 'status':
|
||||
case 'info':
|
||||
showStatus();
|
||||
|
||||
@@ -61,9 +61,6 @@ import userRoutes from './routes/user.js';
|
||||
import geminiRoutes from './routes/gemini.js';
|
||||
import pluginsRoutes from './routes/plugins.js';
|
||||
import providerRoutes from './modules/providers/provider.routes.js';
|
||||
import browserUseRoutes from './modules/browser-use/browser-use.routes.js';
|
||||
import browserUseMcpRoutes from './modules/browser-use/browser-use-mcp.routes.js';
|
||||
import { browserUseService } from './modules/browser-use/browser-use.service.js';
|
||||
import { startEnabledPluginServers, stopAllPlugins, getPluginPort } from './utils/plugin-process-manager.js';
|
||||
import { initializeDatabase, projectsDb, sessionsDb } from './modules/database/index.js';
|
||||
import { configureWebPush } from './services/vapid-keys.js';
|
||||
@@ -76,19 +73,6 @@ const __dirname = getModuleDir(import.meta.url);
|
||||
// Resolving the app root once keeps every repo-level lookup below aligned across both layouts.
|
||||
const APP_ROOT = findAppRoot(__dirname);
|
||||
const installMode = fs.existsSync(path.join(APP_ROOT, '.git')) ? 'git' : 'npm';
|
||||
// Version of the code that is actually running, captured once at process
|
||||
// startup. This intentionally does NOT re-read package.json per request: after
|
||||
// an update replaces the files on disk, package.json reflects the NEW version
|
||||
// while this long-lived process still runs the OLD code. The frontend bundle is
|
||||
// rebuilt on update, so a mismatch between this value and the frontend's
|
||||
// build-time version means the server was updated but not restarted.
|
||||
const RUNNING_VERSION = (() => {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(path.join(APP_ROOT, 'package.json'), 'utf8')).version || null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
})();
|
||||
const MAX_FILE_UPLOAD_SIZE_MB = 200;
|
||||
const MAX_FILE_UPLOAD_SIZE_BYTES = MAX_FILE_UPLOAD_SIZE_MB * 1024 * 1024;
|
||||
const MAX_FILE_UPLOAD_COUNT = 20;
|
||||
@@ -128,17 +112,7 @@ const wss = createWebSocketServer(server, {
|
||||
getPendingApprovalsForSession,
|
||||
},
|
||||
shell: {
|
||||
resolveProviderSessionId: (sessionId, provider) => {
|
||||
const dbSession = sessionsDb.getSessionById(sessionId);
|
||||
const legacyGeminiSession =
|
||||
provider === 'gemini' ? sessionManager.getSession(sessionId) : null;
|
||||
|
||||
if (dbSession) {
|
||||
return dbSession.provider_session_id ?? legacyGeminiSession?.cliSessionId ?? null;
|
||||
}
|
||||
|
||||
return legacyGeminiSession?.cliSessionId;
|
||||
},
|
||||
getSessionById: (sessionId) => sessionManager.getSession(sessionId),
|
||||
stripAnsiSequences,
|
||||
normalizeDetectedUrl,
|
||||
extractUrlsFromText,
|
||||
@@ -169,8 +143,7 @@ app.get('/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
timestamp: new Date().toISOString(),
|
||||
installMode,
|
||||
version: RUNNING_VERSION
|
||||
installMode
|
||||
});
|
||||
});
|
||||
|
||||
@@ -210,12 +183,6 @@ app.use('/api/gemini', authenticateToken, geminiRoutes);
|
||||
// Plugins API Routes (protected)
|
||||
app.use('/api/plugins', authenticateToken, pluginsRoutes);
|
||||
|
||||
// Browser MCP bridge API (local token protected)
|
||||
app.use('/api/browser-use-mcp', browserUseMcpRoutes);
|
||||
|
||||
// Browser API Routes (protected)
|
||||
app.use('/api/browser-use', authenticateToken, browserUseRoutes);
|
||||
|
||||
// Unified provider MCP routes (protected)
|
||||
app.use('/api/providers', authenticateToken, providerRoutes);
|
||||
|
||||
@@ -1158,6 +1125,7 @@ app.post('/api/projects/:projectId/upload-images', authenticateToken, async (req
|
||||
app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticateToken, async (req, res) => {
|
||||
try {
|
||||
const { projectId, sessionId } = req.params;
|
||||
const { provider = 'claude' } = req.query;
|
||||
const homeDir = os.homedir();
|
||||
|
||||
// Allow only safe characters in sessionId
|
||||
@@ -1168,14 +1136,8 @@ app.get('/api/projects/:projectId/sessions/:sessionId/token-usage', authenticate
|
||||
|
||||
// Provider artifacts on disk (JSONL file names, OpenCode sqlite rows)
|
||||
// are keyed by the provider-native session id, while the caller sends
|
||||
// the app-facing id. Resolve provider and id mapping from the indexed
|
||||
// session row so the frontend does not choose provider-specific paths.
|
||||
// the app-facing id. Resolve the mapping once for all branches below.
|
||||
const sessionRow = sessionsDb.getSessionById(safeSessionId);
|
||||
if (!sessionRow) {
|
||||
return res.status(404).json({ error: 'Session not found', sessionId: safeSessionId });
|
||||
}
|
||||
|
||||
const provider = sessionRow.provider || 'claude';
|
||||
const providerNativeSessionId = sessionRow?.provider_session_id || safeSessionId;
|
||||
|
||||
// Handle Cursor sessions - they use SQLite and don't have token usage info
|
||||
@@ -1727,21 +1689,12 @@ async function startServer() {
|
||||
|
||||
await closeSessionsWatcher();
|
||||
// Clean up plugin processes on shutdown
|
||||
const shutdownRuntimeServices = async () => {
|
||||
try {
|
||||
await browserUseService.stopAllSessions();
|
||||
} catch (err) {
|
||||
console.error('[Browser] Error stopping sessions during shutdown:', err?.message || err);
|
||||
}
|
||||
try {
|
||||
const shutdownPlugins = async () => {
|
||||
await stopAllPlugins();
|
||||
} catch (err) {
|
||||
console.error('[Plugins] Error stopping plugins during shutdown:', err?.message || err);
|
||||
}
|
||||
process.exit(0);
|
||||
};
|
||||
process.on('SIGTERM', () => void shutdownRuntimeServices());
|
||||
process.on('SIGINT', () => void shutdownRuntimeServices());
|
||||
process.on('SIGTERM', () => void shutdownPlugins());
|
||||
process.on('SIGINT', () => void shutdownPlugins());
|
||||
} catch (error) {
|
||||
console.error('[ERROR] Failed to start server:', error);
|
||||
process.exit(1);
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
import express from 'express';
|
||||
|
||||
import { browserUseService } from '@/modules/browser-use/browser-use.service.js';
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
function readBearerToken(header: unknown): string | null {
|
||||
if (typeof header !== 'string') {
|
||||
return null;
|
||||
}
|
||||
const match = /^Bearer\s+(\S.*)$/i.exec(header.trim());
|
||||
return match?.[1]?.trim() || null;
|
||||
}
|
||||
|
||||
router.use((req, res, next) => {
|
||||
const expected = browserUseService.getMcpToken();
|
||||
const token = readBearerToken(req.headers.authorization) || String(req.headers['x-browser-use-mcp-token'] || '');
|
||||
if (!token || token !== expected) {
|
||||
res.status(401).json({ success: false, error: 'Invalid Browser MCP token.' });
|
||||
return;
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
router.post('/tools/:toolName', async (req, res) => {
|
||||
try {
|
||||
const input = (req.body && typeof req.body === 'object' ? req.body : {}) as Record<string, unknown>;
|
||||
const sessionId = typeof input.sessionId === 'string' ? input.sessionId : '';
|
||||
const toolName = req.params.toolName;
|
||||
let result: unknown;
|
||||
|
||||
switch (toolName) {
|
||||
case 'browser_create_session':
|
||||
result = await browserUseService.createAgentSession({
|
||||
profileName: typeof input.profileName === 'string' ? input.profileName : null,
|
||||
});
|
||||
break;
|
||||
case 'browser_list_sessions':
|
||||
result = await browserUseService.listAgentSessions();
|
||||
break;
|
||||
case 'browser_snapshot':
|
||||
case 'browser_take_screenshot':
|
||||
result = await browserUseService.agentSnapshot(sessionId);
|
||||
break;
|
||||
case 'browser_navigate':
|
||||
result = await browserUseService.agentNavigate(sessionId, String(input.url || ''));
|
||||
break;
|
||||
case 'browser_click':
|
||||
result = await browserUseService.agentClick(sessionId, {
|
||||
selector: typeof input.selector === 'string' ? input.selector : undefined,
|
||||
text: typeof input.text === 'string' ? input.text : undefined,
|
||||
x: typeof input.x === 'number' ? input.x : undefined,
|
||||
y: typeof input.y === 'number' ? input.y : undefined,
|
||||
});
|
||||
break;
|
||||
case 'browser_type':
|
||||
result = await browserUseService.agentType(sessionId, {
|
||||
selector: typeof input.selector === 'string' ? input.selector : undefined,
|
||||
text: String(input.text || ''),
|
||||
submit: input.submit === true,
|
||||
});
|
||||
break;
|
||||
case 'browser_fill_form':
|
||||
result = await browserUseService.agentFillForm(
|
||||
sessionId,
|
||||
Array.isArray(input.fields)
|
||||
? input.fields.map((field) => {
|
||||
const record = field as Record<string, unknown>;
|
||||
return {
|
||||
selector: String(record.selector || ''),
|
||||
value: String(record.value || ''),
|
||||
};
|
||||
})
|
||||
: [],
|
||||
);
|
||||
break;
|
||||
case 'browser_press_key':
|
||||
result = await browserUseService.agentPressKey(sessionId, String(input.key || ''));
|
||||
break;
|
||||
case 'browser_select_option':
|
||||
result = await browserUseService.agentSelectOption(
|
||||
sessionId,
|
||||
String(input.selector || ''),
|
||||
Array.isArray(input.values) ? input.values.filter((value): value is string => typeof value === 'string') : [],
|
||||
);
|
||||
break;
|
||||
case 'browser_wait_for':
|
||||
result = await browserUseService.agentWaitFor(sessionId, {
|
||||
text: typeof input.text === 'string' ? input.text : undefined,
|
||||
url: typeof input.url === 'string' ? input.url : undefined,
|
||||
timeoutMs: typeof input.timeoutMs === 'number' ? input.timeoutMs : undefined,
|
||||
});
|
||||
break;
|
||||
case 'browser_tabs':
|
||||
result = await browserUseService.agentTabs(sessionId, {
|
||||
action: input.action === 'new' || input.action === 'select' || input.action === 'close' || input.action === 'list'
|
||||
? input.action
|
||||
: undefined,
|
||||
index: typeof input.index === 'number' ? input.index : undefined,
|
||||
url: typeof input.url === 'string' ? input.url : undefined,
|
||||
});
|
||||
break;
|
||||
case 'browser_close_session':
|
||||
result = await browserUseService.agentStopSession(sessionId);
|
||||
break;
|
||||
default:
|
||||
res.status(404).json({ success: false, error: `Unknown Browser MCP tool "${toolName}".` });
|
||||
return;
|
||||
}
|
||||
|
||||
res.json({ success: true, data: result });
|
||||
} catch (error) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Browser MCP tool failed.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -1,96 +0,0 @@
|
||||
import express from 'express';
|
||||
|
||||
import { browserUseService } from '@/modules/browser-use/browser-use.service.js';
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
function readParam(value: string | string[] | undefined): string {
|
||||
return Array.isArray(value) ? value[0] || '' : value || '';
|
||||
}
|
||||
|
||||
router.get('/status', async (_req, res) => {
|
||||
try {
|
||||
res.json({ success: true, data: await browserUseService.getStatus() });
|
||||
} catch (error) {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to load Browser status.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/settings', async (_req, res) => {
|
||||
try {
|
||||
res.json({ success: true, data: { settings: await browserUseService.getSettings() } });
|
||||
} catch (error) {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to load Browser settings.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
router.put('/settings', async (req, res) => {
|
||||
try {
|
||||
const settings = await browserUseService.updateSettings(req.body || {});
|
||||
res.json({ success: true, data: { settings } });
|
||||
} catch (error) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to save Browser settings.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/runtime/install', async (_req, res) => {
|
||||
try {
|
||||
const result = await browserUseService.installRuntime();
|
||||
res.status(result.success ? 200 : 500).json({
|
||||
success: result.success,
|
||||
data: result,
|
||||
error: result.success ? undefined : result.message,
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to install Browser runtime.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
router.get('/sessions', async (_req, res) => {
|
||||
try {
|
||||
res.json({ success: true, data: { sessions: await browserUseService.listSessions() } });
|
||||
} catch (error) {
|
||||
res.status(401).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to list browser sessions.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
router.post('/sessions/:sessionId/stop', async (req, res) => {
|
||||
try {
|
||||
const result = await browserUseService.stopSession(readParam(req.params.sessionId));
|
||||
res.json({ success: true, data: result });
|
||||
} catch (error) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to stop browser session.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
router.delete('/sessions/:sessionId', async (req, res) => {
|
||||
try {
|
||||
const result = await browserUseService.deleteSession(readParam(req.params.sessionId));
|
||||
res.json({ success: true, data: result });
|
||||
} catch (error) {
|
||||
res.status(400).json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to delete browser session.',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -1,836 +0,0 @@
|
||||
import { createRequire } from 'node:module';
|
||||
import { randomBytes, randomUUID } from 'node:crypto';
|
||||
import { spawn } from 'node:child_process';
|
||||
import fs from 'node:fs';
|
||||
import os from 'node:os';
|
||||
import path from 'node:path';
|
||||
|
||||
import { appConfigDb } from '@/modules/database/index.js';
|
||||
import { providerMcpService } from '@/modules/providers/index.js';
|
||||
import { getModuleDir } from '@/utils/runtime-paths.js';
|
||||
|
||||
const require = createRequire(import.meta.url);
|
||||
const __dirname = getModuleDir(import.meta.url);
|
||||
const IS_PLATFORM = process.env.VITE_IS_PLATFORM === 'true';
|
||||
const MAX_SESSIONS_PER_OWNER = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_MAX_SESSIONS_PER_OWNER || '3', 10);
|
||||
const SESSION_TTL_MS = Number.parseInt(process.env.CLOUDCLI_BROWSER_USE_SESSION_TTL_MS || String(30 * 60 * 1000), 10);
|
||||
const BROWSER_USE_SETTINGS_KEY = 'browser_use_settings';
|
||||
const BROWSER_USE_MCP_TOKEN_KEY = 'browser_use_mcp_token';
|
||||
|
||||
type BrowserUseRuntime = 'cloud' | 'local';
|
||||
type BrowserUseSessionStatus = 'ready' | 'stopped' | 'unavailable';
|
||||
|
||||
type BrowserUseSession = {
|
||||
id: string;
|
||||
ownerId: string;
|
||||
createdBy: 'agent';
|
||||
runtime: BrowserUseRuntime;
|
||||
status: BrowserUseSessionStatus;
|
||||
url: string | null;
|
||||
title: string | null;
|
||||
screenshotDataUrl: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
lastAction: string | null;
|
||||
message: string | null;
|
||||
profileName: string | null;
|
||||
viewport: {
|
||||
width: number;
|
||||
height: number;
|
||||
} | null;
|
||||
cursor: {
|
||||
x: number;
|
||||
y: number;
|
||||
actor: 'agent';
|
||||
} | null;
|
||||
};
|
||||
|
||||
type PublicBrowserUseSession = Omit<BrowserUseSession, 'ownerId'>;
|
||||
|
||||
type RuntimeHandle = {
|
||||
browser?: any;
|
||||
context?: any;
|
||||
page?: any;
|
||||
};
|
||||
|
||||
type BrowserUseSettings = {
|
||||
enabled: boolean;
|
||||
};
|
||||
|
||||
type RuntimeReadiness = {
|
||||
playwright: any | null;
|
||||
playwrightInstalled: boolean;
|
||||
chromiumInstalled: boolean;
|
||||
chromiumExecutablePath: string | null;
|
||||
installInProgress: boolean;
|
||||
installMessage: string | null;
|
||||
};
|
||||
|
||||
type RuntimeProbe = Omit<RuntimeReadiness, 'installInProgress' | 'installMessage'>;
|
||||
|
||||
const sessions = new Map<string, BrowserUseSession>();
|
||||
const handles = new Map<string, RuntimeHandle>();
|
||||
let installPromise: Promise<{ success: boolean; message: string }> | null = null;
|
||||
let lastInstallMessage: string | null = null;
|
||||
let runtimeProbeCache: { value: RuntimeProbe; updatedAt: number } | null = null;
|
||||
|
||||
const DEFAULT_SETTINGS: BrowserUseSettings = {
|
||||
enabled: false,
|
||||
};
|
||||
const AGENT_OWNER_ID = 'agent';
|
||||
const PROFILE_ROOT = path.join(os.homedir(), '.cloudcli', 'browser-use', 'profiles');
|
||||
const MCP_SERVER_NAME = 'cloudcli-browser';
|
||||
const LEGACY_MCP_SERVER_NAMES = ['cloudcli-browser-use'];
|
||||
const RUNTIME_READINESS_CACHE_TTL_MS = 30_000;
|
||||
|
||||
function getRuntime(): BrowserUseRuntime {
|
||||
return IS_PLATFORM ? 'cloud' : 'local';
|
||||
}
|
||||
|
||||
function readSettings(): BrowserUseSettings {
|
||||
try {
|
||||
const raw = appConfigDb.get(BROWSER_USE_SETTINGS_KEY);
|
||||
if (!raw) {
|
||||
return DEFAULT_SETTINGS;
|
||||
}
|
||||
|
||||
const parsed = JSON.parse(raw) as Partial<BrowserUseSettings>;
|
||||
return {
|
||||
enabled: parsed.enabled === true,
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.warn('[Browser] Failed to read settings:', error?.message || error);
|
||||
return DEFAULT_SETTINGS;
|
||||
}
|
||||
}
|
||||
|
||||
function writeSettings(settings: BrowserUseSettings): BrowserUseSettings {
|
||||
const normalized = {
|
||||
enabled: settings.enabled === true,
|
||||
};
|
||||
|
||||
appConfigDb.set(BROWSER_USE_SETTINGS_KEY, JSON.stringify(normalized));
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function getOrCreateMcpToken(): string {
|
||||
const existing = appConfigDb.get(BROWSER_USE_MCP_TOKEN_KEY);
|
||||
if (existing) {
|
||||
return existing;
|
||||
}
|
||||
const token = randomBytes(32).toString('hex');
|
||||
appConfigDb.set(BROWSER_USE_MCP_TOKEN_KEY, token);
|
||||
return token;
|
||||
}
|
||||
|
||||
function getSetupMessage(settings: BrowserUseSettings, readiness: RuntimeReadiness): string {
|
||||
if (!settings.enabled) {
|
||||
return 'Browser is disabled in settings.';
|
||||
}
|
||||
|
||||
if (!readiness.playwrightInstalled) {
|
||||
return 'Install Playwright and Chromium to use browser sessions.';
|
||||
}
|
||||
|
||||
if (!readiness.chromiumInstalled) {
|
||||
return 'Playwright is installed, but Chromium is missing. Install the Chromium runtime to continue.';
|
||||
}
|
||||
|
||||
return readiness.installMessage || 'Browser runtime is not ready.';
|
||||
}
|
||||
|
||||
function getPlaywright(): any | null {
|
||||
try {
|
||||
return require('playwright');
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getMcpCommand(): { command: string; args: string[] } {
|
||||
const serverDir = path.resolve(__dirname, '..', '..');
|
||||
const mcpScriptPath = path.join(serverDir, 'browser-use-mcp.js');
|
||||
if (fs.existsSync(mcpScriptPath)) {
|
||||
return {
|
||||
command: process.execPath,
|
||||
args: [mcpScriptPath],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
command: 'cloudcli',
|
||||
args: ['browser-use-mcp'],
|
||||
};
|
||||
}
|
||||
|
||||
function getMcpApiUrl(): string {
|
||||
const port = process.env.SERVER_PORT || process.env.PORT || '3001';
|
||||
return `http://127.0.0.1:${port}/api/browser-use-mcp`;
|
||||
}
|
||||
|
||||
async function removeMcpServerFromAllProviders(name: string) {
|
||||
const results = await providerMcpService.removeMcpServerFromAllProviders({
|
||||
name,
|
||||
scope: 'user',
|
||||
});
|
||||
return results.map((result) => ({ ...result, name }));
|
||||
}
|
||||
|
||||
function normalizeProfileName(profileName?: string | null): string | null {
|
||||
const normalized = String(profileName || '').trim();
|
||||
if (!normalized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return normalized.slice(0, 80);
|
||||
}
|
||||
|
||||
function getProfilePath(profileName: string): string {
|
||||
const safeName = profileName
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9._-]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
.slice(0, 80) || 'default';
|
||||
return path.join(PROFILE_ROOT, safeName);
|
||||
}
|
||||
|
||||
function probeRuntime(): RuntimeProbe {
|
||||
const playwright = getPlaywright();
|
||||
const readiness: RuntimeProbe = {
|
||||
playwright,
|
||||
playwrightInstalled: Boolean(playwright),
|
||||
chromiumInstalled: false,
|
||||
chromiumExecutablePath: null,
|
||||
};
|
||||
|
||||
if (!playwright) {
|
||||
return readiness;
|
||||
}
|
||||
|
||||
try {
|
||||
const executablePath = playwright.chromium.executablePath();
|
||||
readiness.chromiumExecutablePath = executablePath;
|
||||
readiness.chromiumInstalled = Boolean(executablePath && fs.existsSync(executablePath));
|
||||
} catch {
|
||||
readiness.chromiumInstalled = false;
|
||||
}
|
||||
|
||||
return readiness;
|
||||
}
|
||||
|
||||
function getRuntimeReadiness(options: { force?: boolean } = {}): RuntimeReadiness {
|
||||
const now = Date.now();
|
||||
const cachedProbe = runtimeProbeCache;
|
||||
const canUseCache = !options.force
|
||||
&& !installPromise
|
||||
&& cachedProbe
|
||||
&& now - cachedProbe.updatedAt < RUNTIME_READINESS_CACHE_TTL_MS;
|
||||
const probe = canUseCache ? cachedProbe.value : probeRuntime();
|
||||
|
||||
if (!canUseCache && !installPromise) {
|
||||
runtimeProbeCache = { value: probe, updatedAt: now };
|
||||
}
|
||||
|
||||
return {
|
||||
...probe,
|
||||
installInProgress: Boolean(installPromise),
|
||||
installMessage: lastInstallMessage,
|
||||
};
|
||||
}
|
||||
|
||||
const INSTALL_COMMAND_TIMEOUT_MS = Number.parseInt(
|
||||
process.env.CLOUDCLI_BROWSER_USE_INSTALL_TIMEOUT_MS || String(10 * 60 * 1000),
|
||||
10,
|
||||
);
|
||||
|
||||
function runCommand(command: string, args: string[]): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const child = spawn(command, args, {
|
||||
cwd: process.cwd(),
|
||||
env: process.env,
|
||||
shell: false,
|
||||
stdio: ['ignore', 'pipe', 'pipe'],
|
||||
});
|
||||
const output: string[] = [];
|
||||
let settled = false;
|
||||
const finish = (fn: () => void) => {
|
||||
if (settled) {
|
||||
return;
|
||||
}
|
||||
settled = true;
|
||||
clearTimeout(timer);
|
||||
fn();
|
||||
};
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
child.kill('SIGKILL');
|
||||
finish(() => reject(new Error(
|
||||
`${command} ${args.join(' ')} timed out after ${INSTALL_COMMAND_TIMEOUT_MS}ms.`,
|
||||
)));
|
||||
}, INSTALL_COMMAND_TIMEOUT_MS);
|
||||
timer.unref?.();
|
||||
|
||||
child.stdout.on('data', (chunk) => output.push(String(chunk)));
|
||||
child.stderr.on('data', (chunk) => output.push(String(chunk)));
|
||||
child.on('error', (error) => finish(() => reject(error)));
|
||||
child.on('close', (code) => finish(() => {
|
||||
if (code === 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
reject(new Error(output.join('').trim() || `${command} ${args.join(' ')} exited with code ${code}`));
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
function formatInstallError(error: unknown): string {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
if (message.includes('sudo') && message.includes('password')) {
|
||||
return 'Installing Chromium system dependencies requires administrator privileges. Run `npx playwright install-deps chromium` on the machine where CloudCLI runs, then try again.';
|
||||
}
|
||||
return message || 'Failed to install Browser runtime.';
|
||||
}
|
||||
|
||||
async function installRuntime(): Promise<{ success: boolean; message: string }> {
|
||||
if (installPromise) {
|
||||
return installPromise;
|
||||
}
|
||||
|
||||
const npmCommand = process.platform === 'win32' ? 'npm.cmd' : 'npm';
|
||||
runtimeProbeCache = null;
|
||||
installPromise = (async () => {
|
||||
try {
|
||||
lastInstallMessage = 'Installing Playwright package...';
|
||||
await runCommand(npmCommand, ['install', '--no-save', '--no-package-lock', 'playwright']);
|
||||
|
||||
if (process.platform === 'linux') {
|
||||
lastInstallMessage = 'Installing Chromium system dependencies...';
|
||||
await runCommand(npmCommand, ['exec', '--', 'playwright', 'install-deps', 'chromium']);
|
||||
}
|
||||
|
||||
lastInstallMessage = 'Installing Chromium runtime...';
|
||||
await runCommand(npmCommand, ['exec', '--', 'playwright', 'install', 'chromium']);
|
||||
|
||||
lastInstallMessage = 'Browser runtime installed.';
|
||||
return { success: true, message: lastInstallMessage };
|
||||
} catch (error) {
|
||||
lastInstallMessage = formatInstallError(error);
|
||||
return { success: false, message: lastInstallMessage };
|
||||
}
|
||||
})();
|
||||
|
||||
try {
|
||||
return await installPromise;
|
||||
} finally {
|
||||
installPromise = null;
|
||||
runtimeProbeCache = null;
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeUrl(rawUrl: string): string {
|
||||
const trimmed = rawUrl.trim();
|
||||
if (!trimmed) {
|
||||
throw new Error('URL is required.');
|
||||
}
|
||||
|
||||
const withProtocol = /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(trimmed)
|
||||
? trimmed
|
||||
: `https://${trimmed}`;
|
||||
const parsed = new URL(withProtocol);
|
||||
if (!['http:', 'https:'].includes(parsed.protocol)) {
|
||||
throw new Error('Only http and https URLs are supported.');
|
||||
}
|
||||
|
||||
return parsed.toString();
|
||||
}
|
||||
|
||||
function publicSession(session: BrowserUseSession): PublicBrowserUseSession {
|
||||
const { ownerId: _ownerId, ...publicFields } = session;
|
||||
return publicFields;
|
||||
}
|
||||
|
||||
function ownerSessions(ownerId: string): BrowserUseSession[] {
|
||||
return [...sessions.values()].filter((session) => session.ownerId === ownerId);
|
||||
}
|
||||
|
||||
async function closeHandle(sessionId: string): Promise<void> {
|
||||
const handle = handles.get(sessionId);
|
||||
handles.delete(sessionId);
|
||||
await handle?.context?.close?.().catch(() => undefined);
|
||||
await handle?.browser?.close().catch(() => undefined);
|
||||
}
|
||||
|
||||
async function expireStaleSessions(now = Date.now()): Promise<void> {
|
||||
await Promise.all([...sessions.values()].map(async (session) => {
|
||||
if (session.status !== 'ready') {
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedAt = Date.parse(session.updatedAt);
|
||||
if (!Number.isFinite(updatedAt) || now - updatedAt <= SESSION_TTL_MS) {
|
||||
return;
|
||||
}
|
||||
|
||||
await closeHandle(session.id);
|
||||
session.status = 'stopped';
|
||||
session.updatedAt = new Date(now).toISOString();
|
||||
session.lastAction = 'expire';
|
||||
session.message = 'Browser session expired after inactivity.';
|
||||
}));
|
||||
}
|
||||
|
||||
async function captureSession(session: BrowserUseSession, page: any): Promise<void> {
|
||||
const screenshot = await page.screenshot({ type: 'jpeg', quality: 72, fullPage: false });
|
||||
session.screenshotDataUrl = `data:image/jpeg;base64,${Buffer.from(screenshot).toString('base64')}`;
|
||||
session.title = await page.title().catch(() => null);
|
||||
session.url = page.url() || session.url;
|
||||
session.viewport = page.viewportSize?.() || session.viewport;
|
||||
session.updatedAt = new Date().toISOString();
|
||||
}
|
||||
|
||||
async function getActionPoint(page: any, input: { selector?: string; text?: string; x?: number; y?: number }) {
|
||||
if (typeof input.x === 'number' && typeof input.y === 'number') {
|
||||
return { x: input.x, y: input.y };
|
||||
}
|
||||
|
||||
const locator = input.selector
|
||||
? page.locator(input.selector).first()
|
||||
: input.text
|
||||
? page.getByText(input.text, { exact: false }).first()
|
||||
: null;
|
||||
|
||||
if (!locator) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const box = await locator.boundingBox().catch(() => null);
|
||||
if (!box) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
x: Math.round(box.x + box.width / 2),
|
||||
y: Math.round(box.y + box.height / 2),
|
||||
};
|
||||
}
|
||||
|
||||
export const browserUseService = {
|
||||
async getSettings() {
|
||||
return readSettings();
|
||||
},
|
||||
|
||||
async updateSettings(settings: Partial<BrowserUseSettings>) {
|
||||
const current = readSettings();
|
||||
const nextSettings = {
|
||||
enabled: typeof settings.enabled === 'boolean' ? settings.enabled : current.enabled,
|
||||
};
|
||||
|
||||
const next = writeSettings(nextSettings);
|
||||
if (next.enabled) {
|
||||
await this.registerAgentMcp();
|
||||
} else if (current.enabled) {
|
||||
await this.unregisterAgentMcp();
|
||||
await this.stopAllSessions();
|
||||
}
|
||||
return next;
|
||||
},
|
||||
|
||||
async getStatus() {
|
||||
const settings = readSettings();
|
||||
const readiness = getRuntimeReadiness();
|
||||
const available = settings.enabled && readiness.playwrightInstalled && readiness.chromiumInstalled;
|
||||
|
||||
return {
|
||||
enabled: settings.enabled,
|
||||
runtime: getRuntime(),
|
||||
available,
|
||||
playwrightInstalled: readiness.playwrightInstalled,
|
||||
chromiumInstalled: readiness.chromiumInstalled,
|
||||
installInProgress: readiness.installInProgress,
|
||||
sessionCount: sessions.size,
|
||||
message: available
|
||||
? 'Browser runtime is available.'
|
||||
: getSetupMessage(settings, readiness),
|
||||
};
|
||||
},
|
||||
|
||||
async registerAgentMcp() {
|
||||
const { command, args } = getMcpCommand();
|
||||
await Promise.all(LEGACY_MCP_SERVER_NAMES.map((name) => removeMcpServerFromAllProviders(name)));
|
||||
const results = await providerMcpService.addMcpServerToAllProviders({
|
||||
name: MCP_SERVER_NAME,
|
||||
scope: 'user',
|
||||
transport: 'stdio',
|
||||
command,
|
||||
args,
|
||||
env: {
|
||||
CLOUDCLI_BROWSER_USE_MCP_TOKEN: getOrCreateMcpToken(),
|
||||
CLOUDCLI_BROWSER_USE_API_URL: getMcpApiUrl(),
|
||||
},
|
||||
});
|
||||
return { name: MCP_SERVER_NAME, command, args, results };
|
||||
},
|
||||
|
||||
getMcpToken() {
|
||||
return getOrCreateMcpToken();
|
||||
},
|
||||
|
||||
async unregisterAgentMcp() {
|
||||
const results = (await Promise.all(
|
||||
[MCP_SERVER_NAME, ...LEGACY_MCP_SERVER_NAMES].map((name) => removeMcpServerFromAllProviders(name)),
|
||||
)).flat();
|
||||
return { name: MCP_SERVER_NAME, results };
|
||||
},
|
||||
|
||||
async installRuntime() {
|
||||
const result = await installRuntime();
|
||||
return {
|
||||
...result,
|
||||
status: await this.getStatus(),
|
||||
};
|
||||
},
|
||||
|
||||
async listSessions() {
|
||||
await expireStaleSessions();
|
||||
return [...sessions.values()]
|
||||
.filter((session) => session.ownerId === AGENT_OWNER_ID)
|
||||
.map(publicSession);
|
||||
},
|
||||
|
||||
async createAgentSession(options?: { profileName?: string | null }) {
|
||||
const settings = readSettings();
|
||||
if (!settings.enabled) {
|
||||
throw new Error('Browser agent tools are disabled.');
|
||||
}
|
||||
|
||||
await expireStaleSessions();
|
||||
const profileName = normalizeProfileName(options?.profileName);
|
||||
|
||||
const now = new Date().toISOString();
|
||||
const session: BrowserUseSession = {
|
||||
id: randomUUID(),
|
||||
ownerId: AGENT_OWNER_ID,
|
||||
createdBy: 'agent',
|
||||
runtime: getRuntime(),
|
||||
status: 'unavailable',
|
||||
url: null,
|
||||
title: null,
|
||||
screenshotDataUrl: null,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
lastAction: 'create',
|
||||
message: null,
|
||||
profileName,
|
||||
viewport: { width: 1440, height: 900 },
|
||||
cursor: null,
|
||||
};
|
||||
|
||||
const activeOwnerSessions = ownerSessions(AGENT_OWNER_ID).filter((item) => item.status === 'ready');
|
||||
if (activeOwnerSessions.length >= MAX_SESSIONS_PER_OWNER) {
|
||||
throw new Error(`Browser is limited to ${MAX_SESSIONS_PER_OWNER} active agent sessions.`);
|
||||
}
|
||||
|
||||
const readiness = getRuntimeReadiness();
|
||||
if (!settings.enabled || !readiness.playwrightInstalled || !readiness.chromiumInstalled || !readiness.playwright) {
|
||||
session.message = getSetupMessage(settings, readiness);
|
||||
sessions.set(session.id, session);
|
||||
return publicSession(session);
|
||||
}
|
||||
|
||||
let browser: any | undefined;
|
||||
let context: any | undefined;
|
||||
let page: any;
|
||||
const launchOptions = {
|
||||
headless: true,
|
||||
args: ['--disable-dev-shm-usage'],
|
||||
};
|
||||
const contextOptions = {
|
||||
viewport: { width: 1440, height: 900 },
|
||||
serviceWorkers: 'block',
|
||||
};
|
||||
|
||||
if (profileName) {
|
||||
fs.mkdirSync(PROFILE_ROOT, { recursive: true });
|
||||
context = await readiness.playwright.chromium.launchPersistentContext(getProfilePath(profileName), {
|
||||
...launchOptions,
|
||||
...contextOptions,
|
||||
});
|
||||
page = context.pages()[0] || await context.newPage();
|
||||
} else {
|
||||
browser = await readiness.playwright.chromium.launch(launchOptions);
|
||||
context = await browser.newContext(contextOptions);
|
||||
page = await context.newPage();
|
||||
}
|
||||
session.status = 'ready';
|
||||
session.message = 'Browser session is ready.';
|
||||
sessions.set(session.id, session);
|
||||
handles.set(session.id, { browser, context, page });
|
||||
await captureSession(session, page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async listAgentSessions() {
|
||||
const settings = readSettings();
|
||||
if (!settings.enabled) {
|
||||
return [];
|
||||
}
|
||||
await expireStaleSessions();
|
||||
return [...sessions.values()]
|
||||
.filter((session) => session.ownerId === AGENT_OWNER_ID)
|
||||
.map(publicSession);
|
||||
},
|
||||
|
||||
async getAgentSession(sessionId: string) {
|
||||
const settings = readSettings();
|
||||
if (!settings.enabled) {
|
||||
throw new Error('Browser agent tools are disabled.');
|
||||
}
|
||||
const session = sessions.get(sessionId);
|
||||
if (!session || session.ownerId !== AGENT_OWNER_ID) {
|
||||
throw new Error('Browser session not found.');
|
||||
}
|
||||
return session;
|
||||
},
|
||||
|
||||
async agentNavigate(sessionId: string, rawUrl: string) {
|
||||
await this.getAgentSession(sessionId);
|
||||
await expireStaleSessions();
|
||||
|
||||
const session = sessions.get(sessionId);
|
||||
if (!session || session.ownerId !== AGENT_OWNER_ID) {
|
||||
throw new Error('Browser session not found.');
|
||||
}
|
||||
|
||||
if (session.status !== 'ready') {
|
||||
throw new Error(session.message || 'Browser session is not available.');
|
||||
}
|
||||
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
|
||||
const url = normalizeUrl(rawUrl);
|
||||
await handle.page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30_000 });
|
||||
session.lastAction = `navigate:${url}`;
|
||||
session.cursor = null;
|
||||
await captureSession(session, handle.page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async agentSnapshot(sessionId: string) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
await captureSession(session, handle.page);
|
||||
const text = await handle.page.locator('body').innerText({ timeout: 5_000 }).catch(() => '');
|
||||
return {
|
||||
session: publicSession(session),
|
||||
text: text.slice(0, 30_000),
|
||||
};
|
||||
},
|
||||
|
||||
async agentClick(sessionId: string, input: { selector?: string; text?: string; x?: number; y?: number }) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
const point = await getActionPoint(handle.page, input);
|
||||
|
||||
if (input.selector) {
|
||||
await handle.page.locator(input.selector).first().click({ timeout: 10_000 });
|
||||
} else if (input.text) {
|
||||
await handle.page.getByText(input.text, { exact: false }).first().click({ timeout: 10_000 });
|
||||
} else if (typeof input.x === 'number' && typeof input.y === 'number') {
|
||||
await handle.page.mouse.click(input.x, input.y);
|
||||
} else {
|
||||
throw new Error('Provide selector, text, or x/y coordinates.');
|
||||
}
|
||||
|
||||
session.lastAction = 'click';
|
||||
session.cursor = point ? { ...point, actor: 'agent' } : null;
|
||||
await captureSession(session, handle.page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async agentType(sessionId: string, input: { selector?: string; text: string; submit?: boolean }) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
|
||||
if (input.selector) {
|
||||
await handle.page.locator(input.selector).first().fill(input.text, { timeout: 10_000 });
|
||||
session.cursor = await getActionPoint(handle.page, input).then((point) => (
|
||||
point ? { ...point, actor: 'agent' as const } : null
|
||||
));
|
||||
} else {
|
||||
await handle.page.keyboard.type(input.text);
|
||||
}
|
||||
if (input.submit) {
|
||||
await handle.page.keyboard.press('Enter');
|
||||
}
|
||||
|
||||
session.lastAction = 'type';
|
||||
await captureSession(session, handle.page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async agentFillForm(sessionId: string, fields: Array<{ selector: string; value: string }>) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
for (const field of fields) {
|
||||
await handle.page.locator(field.selector).first().fill(field.value, { timeout: 10_000 });
|
||||
}
|
||||
session.lastAction = 'fill_form';
|
||||
if (fields[0]) {
|
||||
session.cursor = await getActionPoint(handle.page, { selector: fields[0].selector }).then((point) => (
|
||||
point ? { ...point, actor: 'agent' as const } : null
|
||||
));
|
||||
}
|
||||
await captureSession(session, handle.page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async agentPressKey(sessionId: string, key: string) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
await handle.page.keyboard.press(key);
|
||||
session.lastAction = `press_key:${key}`;
|
||||
await captureSession(session, handle.page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async agentSelectOption(sessionId: string, selector: string, values: string[]) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
await handle.page.locator(selector).first().selectOption(values, { timeout: 10_000 });
|
||||
session.lastAction = 'select_option';
|
||||
session.cursor = await getActionPoint(handle.page, { selector }).then((point) => (
|
||||
point ? { ...point, actor: 'agent' as const } : null
|
||||
));
|
||||
await captureSession(session, handle.page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async agentWaitFor(sessionId: string, input: { text?: string; url?: string; timeoutMs?: number }) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
const timeout = Math.max(250, Math.min(input.timeoutMs || 5_000, 30_000));
|
||||
if (input.text) {
|
||||
await handle.page.getByText(input.text, { exact: false }).first().waitFor({ timeout });
|
||||
} else if (input.url) {
|
||||
await handle.page.waitForURL(input.url, { timeout });
|
||||
} else {
|
||||
await handle.page.waitForTimeout(timeout);
|
||||
}
|
||||
session.lastAction = 'wait_for';
|
||||
await captureSession(session, handle.page);
|
||||
return publicSession(session);
|
||||
},
|
||||
|
||||
async agentTabs(sessionId: string, input: { action?: 'list' | 'new' | 'select' | 'close'; index?: number; url?: string }) {
|
||||
const session = await this.getAgentSession(sessionId);
|
||||
const handle = handles.get(sessionId);
|
||||
if (!handle?.context || !handle?.page) {
|
||||
throw new Error('Browser runtime handle is not available.');
|
||||
}
|
||||
const action = input.action || 'list';
|
||||
if (action === 'new') {
|
||||
const page = await handle.context.newPage();
|
||||
handles.set(sessionId, { ...handle, page });
|
||||
if (input.url) {
|
||||
await this.agentNavigate(sessionId, input.url);
|
||||
}
|
||||
} else if (action === 'select') {
|
||||
const page = handle.context.pages()[input.index || 0];
|
||||
if (!page) {
|
||||
throw new Error('Tab not found.');
|
||||
}
|
||||
handles.set(sessionId, { ...handle, page });
|
||||
} else if (action === 'close') {
|
||||
const pages = handle.context.pages();
|
||||
const page = pages[input.index ?? pages.indexOf(handle.page)];
|
||||
if (!page) {
|
||||
throw new Error('Tab not found.');
|
||||
}
|
||||
await page.close();
|
||||
handles.set(sessionId, { ...handle, page: handle.context.pages()[0] || await handle.context.newPage() });
|
||||
}
|
||||
const updatedHandle = handles.get(sessionId);
|
||||
await captureSession(session, updatedHandle?.page || handle.page);
|
||||
return {
|
||||
session: publicSession(session),
|
||||
tabs: handle.context.pages().map((page: any, index: number) => ({
|
||||
index,
|
||||
url: page.url(),
|
||||
active: page === (updatedHandle?.page || handle.page),
|
||||
})),
|
||||
};
|
||||
},
|
||||
|
||||
async stopSession(sessionId: string) {
|
||||
const session = sessions.get(sessionId);
|
||||
if (!session || session.ownerId !== AGENT_OWNER_ID) {
|
||||
return { stopped: false };
|
||||
}
|
||||
|
||||
await closeHandle(sessionId);
|
||||
|
||||
session.status = 'stopped';
|
||||
session.updatedAt = new Date().toISOString();
|
||||
session.lastAction = 'stop';
|
||||
session.message = 'Browser session stopped. Create a new session to continue browsing.';
|
||||
return { stopped: true, session: publicSession(session) };
|
||||
},
|
||||
|
||||
async deleteSession(sessionId: string) {
|
||||
const session = sessions.get(sessionId);
|
||||
if (!session || session.ownerId !== AGENT_OWNER_ID) {
|
||||
return { deleted: false };
|
||||
}
|
||||
|
||||
await closeHandle(sessionId);
|
||||
sessions.delete(sessionId);
|
||||
return { deleted: true, sessionId };
|
||||
},
|
||||
|
||||
async agentStopSession(sessionId: string) {
|
||||
await this.getAgentSession(sessionId);
|
||||
return this.stopSession(sessionId);
|
||||
},
|
||||
|
||||
async stopAllSessions() {
|
||||
await Promise.all([...sessions.keys()].map(async (sessionId) => {
|
||||
await closeHandle(sessionId);
|
||||
const session = sessions.get(sessionId);
|
||||
if (session) {
|
||||
session.status = 'stopped';
|
||||
session.updatedAt = new Date().toISOString();
|
||||
session.lastAction = 'shutdown';
|
||||
session.message = 'Browser session stopped during server shutdown.';
|
||||
}
|
||||
}));
|
||||
},
|
||||
};
|
||||
|
||||
process.once('beforeExit', () => {
|
||||
void browserUseService.stopAllSessions();
|
||||
});
|
||||
@@ -1,10 +0,0 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import test from 'node:test';
|
||||
|
||||
import { browserUseService } from '@/modules/browser-use/browser-use.service.js';
|
||||
|
||||
test('browser monitor list starts empty without agent sessions', async () => {
|
||||
const sessions = await browserUseService.listSessions();
|
||||
|
||||
assert.deepEqual(sessions, []);
|
||||
});
|
||||
@@ -70,15 +70,3 @@ test('createSession reactivates archived rows when the session becomes active ag
|
||||
assert.equal(restoredSession?.isArchived, 0);
|
||||
});
|
||||
});
|
||||
|
||||
test('repository reads normalize SQLite UTC timestamps to ISO strings', async () => {
|
||||
await withIsolatedDatabase(() => {
|
||||
sessionsDb.createAppSession('session-timezone', 'claude', '/workspace/demo-project');
|
||||
|
||||
const row = sessionsDb.getSessionById('session-timezone');
|
||||
assert.ok(row?.created_at.endsWith('Z'));
|
||||
assert.ok(row?.updated_at.endsWith('Z'));
|
||||
assert.match(row?.created_at ?? '', /^\d{4}-\d{2}-\d{2}T/);
|
||||
assert.match(row?.updated_at ?? '', /^\d{4}-\d{2}-\d{2}T/);
|
||||
});
|
||||
});
|
||||
@@ -17,19 +17,10 @@ type SessionRow = {
|
||||
const SESSION_ROW_COLUMNS =
|
||||
'session_id, provider, provider_session_id, project_path, jsonl_path, custom_name, isArchived, created_at, updated_at';
|
||||
|
||||
const SQLITE_UTC_TIMESTAMP_REGEX = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
|
||||
|
||||
function normalizeTimestamp(value?: string): string | null {
|
||||
if (!value) return null;
|
||||
|
||||
// SQLite CURRENT_TIMESTAMP is stored as UTC without a timezone suffix.
|
||||
// Normalize it here so every session reader returns canonical ISO strings
|
||||
// and the sidebar never interprets fresh rows as local-time "hours old".
|
||||
const normalizedValue = SQLITE_UTC_TIMESTAMP_REGEX.test(value)
|
||||
? `${value.replace(' ', 'T')}Z`
|
||||
: value;
|
||||
|
||||
const parsed = new Date(normalizedValue);
|
||||
const parsed = new Date(value);
|
||||
if (Number.isNaN(parsed.getTime())) {
|
||||
return null;
|
||||
}
|
||||
@@ -37,22 +28,6 @@ function normalizeTimestamp(value?: string): string | null {
|
||||
return parsed.toISOString();
|
||||
}
|
||||
|
||||
function normalizeSessionRow<T extends SessionRow | null | undefined>(row: T): T {
|
||||
if (!row) {
|
||||
return row;
|
||||
}
|
||||
|
||||
return {
|
||||
...row,
|
||||
created_at: normalizeTimestamp(row.created_at) ?? row.created_at,
|
||||
updated_at: normalizeTimestamp(row.updated_at) ?? row.updated_at,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeSessionRows(rows: SessionRow[]): SessionRow[] {
|
||||
return rows.map((row) => normalizeSessionRow(row) as SessionRow);
|
||||
}
|
||||
|
||||
function normalizeProjectPathForProvider(provider: string, projectPath: string): string {
|
||||
void provider;
|
||||
return normalizeProjectPath(projectPath);
|
||||
@@ -232,7 +207,7 @@ export const sessionsDb = {
|
||||
)
|
||||
.get(sessionId) as SessionRow | undefined;
|
||||
|
||||
return normalizeSessionRow(row) ?? null;
|
||||
return row ?? null;
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -254,57 +229,18 @@ export const sessionsDb = {
|
||||
)
|
||||
.get(providerSessionId) as SessionRow | undefined;
|
||||
|
||||
return normalizeSessionRow(row) ?? null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Finds the newest app-created session for a project that is still waiting
|
||||
* for its provider-native id to be recorded.
|
||||
*
|
||||
* Primary intention: OpenCode can expose a new session in its shared
|
||||
* `opencode.db` before the websocket runtime reports that same provider id
|
||||
* back to our app. At that moment the sidebar already has an optimistic
|
||||
* app-owned session row, but the watcher only knows the provider-native id.
|
||||
*
|
||||
* Without this lookup, the synchronizer would insert a second row keyed by
|
||||
* the provider id, then `assignProviderSessionId()` would merge it a moment
|
||||
* later. That eventually self-heals, but on slow networks the user can still
|
||||
* briefly see two sidebar sessions for the same conversation.
|
||||
*
|
||||
* This helper lets the synchronizer claim the pending app row first, so the
|
||||
* provider id is attached before any watcher-created row exists. The result
|
||||
* is simpler than frontend dedupe and keeps the race resolved at the source.
|
||||
*/
|
||||
findLatestPendingAppSession(provider: string, projectPath: string): SessionRow | null {
|
||||
const db = getConnection();
|
||||
const normalizedProjectPath = normalizeProjectPathForProvider(provider, projectPath);
|
||||
const row = db
|
||||
.prepare(
|
||||
`SELECT ${SESSION_ROW_COLUMNS}
|
||||
FROM sessions
|
||||
WHERE provider = ?
|
||||
AND project_path = ?
|
||||
AND provider_session_id IS NULL
|
||||
AND isArchived = 0
|
||||
ORDER BY datetime(COALESCE(updated_at, created_at)) DESC, session_id DESC
|
||||
LIMIT 1`
|
||||
)
|
||||
.get(provider, normalizedProjectPath) as SessionRow | undefined;
|
||||
|
||||
return normalizeSessionRow(row) ?? null;
|
||||
return row ?? null;
|
||||
},
|
||||
|
||||
getAllSessions(): SessionRow[] {
|
||||
const db = getConnection();
|
||||
const rows = db
|
||||
return db
|
||||
.prepare(
|
||||
`SELECT ${SESSION_ROW_COLUMNS}
|
||||
FROM sessions
|
||||
WHERE isArchived = 0`
|
||||
)
|
||||
.all() as SessionRow[];
|
||||
|
||||
return normalizeSessionRows(rows);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -313,7 +249,7 @@ export const sessionsDb = {
|
||||
*/
|
||||
getArchivedSessions(): SessionRow[] {
|
||||
const db = getConnection();
|
||||
const rows = db
|
||||
return db
|
||||
.prepare(
|
||||
`SELECT ${SESSION_ROW_COLUMNS}
|
||||
FROM sessions
|
||||
@@ -321,14 +257,12 @@ export const sessionsDb = {
|
||||
ORDER BY datetime(COALESCE(updated_at, created_at)) DESC, session_id DESC`
|
||||
)
|
||||
.all() as SessionRow[];
|
||||
|
||||
return normalizeSessionRows(rows);
|
||||
},
|
||||
|
||||
getSessionsByProjectPath(projectPath: string): SessionRow[] {
|
||||
const db = getConnection();
|
||||
const normalizedProjectPath = normalizeProjectPath(projectPath);
|
||||
const rows = db
|
||||
return db
|
||||
.prepare(
|
||||
`SELECT ${SESSION_ROW_COLUMNS}
|
||||
FROM sessions
|
||||
@@ -336,8 +270,6 @@ export const sessionsDb = {
|
||||
AND isArchived = 0`
|
||||
)
|
||||
.all(normalizedProjectPath) as SessionRow[];
|
||||
|
||||
return normalizeSessionRows(rows);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -347,21 +279,19 @@ export const sessionsDb = {
|
||||
getSessionsByProjectPathIncludingArchived(projectPath: string): SessionRow[] {
|
||||
const db = getConnection();
|
||||
const normalizedProjectPath = normalizeProjectPath(projectPath);
|
||||
const rows = db
|
||||
return db
|
||||
.prepare(
|
||||
`SELECT ${SESSION_ROW_COLUMNS}
|
||||
FROM sessions
|
||||
WHERE project_path = ?`
|
||||
)
|
||||
.all(normalizedProjectPath) as SessionRow[];
|
||||
|
||||
return normalizeSessionRows(rows);
|
||||
},
|
||||
|
||||
getSessionsByProjectPathPage(projectPath: string, limit: number, offset: number): SessionRow[] {
|
||||
const db = getConnection();
|
||||
const normalizedProjectPath = normalizeProjectPath(projectPath);
|
||||
const rows = db
|
||||
return db
|
||||
.prepare(
|
||||
`SELECT ${SESSION_ROW_COLUMNS}
|
||||
FROM sessions
|
||||
@@ -371,8 +301,6 @@ export const sessionsDb = {
|
||||
LIMIT ? OFFSET ?`
|
||||
)
|
||||
.all(normalizedProjectPath, limit, offset) as SessionRow[];
|
||||
|
||||
return normalizeSessionRows(rows);
|
||||
},
|
||||
|
||||
countSessionsByProjectPath(projectPath: string): number {
|
||||
|
||||
@@ -30,6 +30,10 @@ type ProjectApiView = {
|
||||
isArchived: boolean;
|
||||
isStarred: boolean;
|
||||
sessions: [];
|
||||
cursorSessions: [];
|
||||
codexSessions: [];
|
||||
geminiSessions: [];
|
||||
opencodeSessions: [];
|
||||
sessionMeta: {
|
||||
hasMore: false;
|
||||
total: 0;
|
||||
@@ -78,6 +82,10 @@ function mapProjectRowToApiView(projectRow: ProjectRepositoryRow): ProjectApiVie
|
||||
isArchived: Boolean(projectRow.isArchived),
|
||||
isStarred: Boolean(projectRow.isStarred),
|
||||
sessions: [],
|
||||
cursorSessions: [],
|
||||
codexSessions: [],
|
||||
geminiSessions: [],
|
||||
opencodeSessions: [],
|
||||
sessionMeta: {
|
||||
hasMore: false,
|
||||
total: 0,
|
||||
|
||||
@@ -9,12 +9,13 @@ import { AppError } from '@/shared/utils.js';
|
||||
|
||||
type SessionSummary = {
|
||||
id: string;
|
||||
provider: string;
|
||||
summary: string;
|
||||
messageCount: number;
|
||||
lastActivity: string;
|
||||
};
|
||||
|
||||
type SessionsByProvider = Record<'claude' | 'cursor' | 'codex' | 'gemini' | 'opencode', SessionSummary[]>;
|
||||
|
||||
type SessionRepositoryRow = {
|
||||
provider: string;
|
||||
session_id: string;
|
||||
@@ -30,6 +31,10 @@ export type ProjectListItem = {
|
||||
fullPath: string;
|
||||
isStarred: boolean;
|
||||
sessions: SessionSummary[];
|
||||
cursorSessions: SessionSummary[];
|
||||
codexSessions: SessionSummary[];
|
||||
geminiSessions: SessionSummary[];
|
||||
opencodeSessions: SessionSummary[];
|
||||
sessionMeta: {
|
||||
hasMore: boolean;
|
||||
total: number;
|
||||
@@ -59,7 +64,7 @@ type SessionPaginationOptions = {
|
||||
};
|
||||
|
||||
type ProjectSessionsPageResult = {
|
||||
sessions: SessionSummary[];
|
||||
sessionsByProvider: SessionsByProvider;
|
||||
total: number;
|
||||
hasMore: boolean;
|
||||
};
|
||||
@@ -67,6 +72,10 @@ type ProjectSessionsPageResult = {
|
||||
export type ProjectSessionsPageApiView = {
|
||||
projectId: string;
|
||||
sessions: SessionSummary[];
|
||||
cursorSessions: SessionSummary[];
|
||||
codexSessions: SessionSummary[];
|
||||
geminiSessions: SessionSummary[];
|
||||
opencodeSessions: SessionSummary[];
|
||||
sessionMeta: {
|
||||
hasMore: boolean;
|
||||
total: number;
|
||||
@@ -120,18 +129,39 @@ function normalizeSessionPagination(options: SessionPaginationOptions = {}): { l
|
||||
function mapSessionRowToSummary(row: SessionRepositoryRow): SessionSummary {
|
||||
return {
|
||||
id: row.session_id,
|
||||
provider: row.provider,
|
||||
summary: row.custom_name || '',
|
||||
messageCount: 0,
|
||||
lastActivity: row.updated_at ?? row.created_at ?? new Date().toISOString(),
|
||||
};
|
||||
}
|
||||
|
||||
function bucketSessionRowsByProvider(rows: SessionRepositoryRow[]): SessionsByProvider {
|
||||
const byProvider: SessionsByProvider = {
|
||||
claude: [],
|
||||
cursor: [],
|
||||
codex: [],
|
||||
gemini: [],
|
||||
opencode: [],
|
||||
};
|
||||
|
||||
for (const row of rows) {
|
||||
const provider = row.provider as keyof SessionsByProvider;
|
||||
const bucket = byProvider[provider];
|
||||
if (!bucket) {
|
||||
continue;
|
||||
}
|
||||
|
||||
bucket.push(mapSessionRowToSummary(row));
|
||||
}
|
||||
|
||||
return byProvider;
|
||||
}
|
||||
|
||||
function readProjectSessionsIncludingArchived(projectPath: string): ProjectSessionsPageResult {
|
||||
const rows = sessionsDb.getSessionsByProjectPathIncludingArchived(projectPath) as SessionRepositoryRow[];
|
||||
|
||||
return {
|
||||
sessions: rows.map(mapSessionRowToSummary),
|
||||
sessionsByProvider: bucketSessionRowsByProvider(rows),
|
||||
total: rows.length,
|
||||
hasMore: false,
|
||||
};
|
||||
@@ -153,7 +183,7 @@ function readProjectSessionsPageByPath(
|
||||
const total = sessionsDb.countSessionsByProjectPath(projectPath);
|
||||
|
||||
return {
|
||||
sessions: rows.map(mapSessionRowToSummary),
|
||||
sessionsByProvider: bucketSessionRowsByProvider(rows),
|
||||
total,
|
||||
hasMore: pagination.offset + rows.length < total,
|
||||
};
|
||||
@@ -175,7 +205,7 @@ function broadcastProgress(progress: ProgressUpdate) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads all projects from DB and returns normalized session summaries.
|
||||
* Reads all projects from DB and returns provider-bucketed session summaries.
|
||||
*/
|
||||
export async function getProjectsWithSessions(
|
||||
options: GetProjectsWithSessionsOptions = {}
|
||||
@@ -223,7 +253,11 @@ export async function getProjectsWithSessions(
|
||||
displayName,
|
||||
fullPath: projectPath,
|
||||
isStarred: Boolean(row.isStarred),
|
||||
sessions: sessionsPage.sessions,
|
||||
sessions: sessionsPage.sessionsByProvider.claude,
|
||||
cursorSessions: sessionsPage.sessionsByProvider.cursor,
|
||||
codexSessions: sessionsPage.sessionsByProvider.codex,
|
||||
geminiSessions: sessionsPage.sessionsByProvider.gemini,
|
||||
opencodeSessions: sessionsPage.sessionsByProvider.opencode,
|
||||
sessionMeta: {
|
||||
hasMore: sessionsPage.hasMore,
|
||||
total: sessionsPage.total,
|
||||
@@ -276,7 +310,11 @@ export async function getArchivedProjectsWithSessions(
|
||||
fullPath: row.project_path,
|
||||
isStarred: Boolean(row.isStarred),
|
||||
isArchived: true,
|
||||
sessions: sessionsPage.sessions,
|
||||
sessions: sessionsPage.sessionsByProvider.claude,
|
||||
cursorSessions: sessionsPage.sessionsByProvider.cursor,
|
||||
codexSessions: sessionsPage.sessionsByProvider.codex,
|
||||
geminiSessions: sessionsPage.sessionsByProvider.gemini,
|
||||
opencodeSessions: sessionsPage.sessionsByProvider.opencode,
|
||||
sessionMeta: {
|
||||
hasMore: sessionsPage.hasMore,
|
||||
total: sessionsPage.total,
|
||||
@@ -305,7 +343,11 @@ export async function getProjectSessionsPage(
|
||||
const sessionsPage = readProjectSessionsPageByPath(projectRow.project_path, options);
|
||||
return {
|
||||
projectId: projectRow.project_id,
|
||||
sessions: sessionsPage.sessions,
|
||||
sessions: sessionsPage.sessionsByProvider.claude,
|
||||
cursorSessions: sessionsPage.sessionsByProvider.cursor,
|
||||
codexSessions: sessionsPage.sessionsByProvider.codex,
|
||||
geminiSessions: sessionsPage.sessionsByProvider.gemini,
|
||||
opencodeSessions: sessionsPage.sessionsByProvider.opencode,
|
||||
sessionMeta: {
|
||||
hasMore: sessionsPage.hasMore,
|
||||
total: sessionsPage.total,
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
export { sessionSynchronizerService } from './services/session-synchronizer.service.js';
|
||||
export { providerSkillsService } from './services/skills.service.js';
|
||||
export { providerMcpService } from './services/mcp.service.js';
|
||||
|
||||
export { initializeSessionsWatcher } from './services/sessions-watcher.service.js';
|
||||
export { closeSessionsWatcher } from './services/sessions-watcher.service.js';
|
||||
|
||||
@@ -25,21 +25,6 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
|
||||
private readonly provider = 'claude' as const;
|
||||
private readonly claudeHome = path.join(os.homedir(), '.claude');
|
||||
|
||||
/**
|
||||
* Returns true when a JSONL file is a subagent transcript rather than a
|
||||
* top-level session.
|
||||
*
|
||||
* Claude stores subagent transcripts under a `subagents/` directory, e.g.
|
||||
* `~/.claude/projects/<encoded-cwd>/<session-id>/subagents/agent-<id>.jsonl`.
|
||||
* Those files repeat the parent session's `sessionId`, so indexing them as
|
||||
* standalone sessions overwrites the parent row's `jsonl_path` and corrupts
|
||||
* the main session record. The recursive scan in `synchronize()` reaches
|
||||
* them, so both entry points must skip them.
|
||||
*/
|
||||
private isSubagentTranscript(filePath: string): boolean {
|
||||
return path.normalize(filePath).split(path.sep).includes('subagents');
|
||||
}
|
||||
|
||||
/**
|
||||
* Scans ~/.claude/projects and upserts discovered sessions into DB.
|
||||
*/
|
||||
@@ -53,10 +38,6 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
|
||||
|
||||
let processed = 0;
|
||||
for (const filePath of files) {
|
||||
if (this.isSubagentTranscript(filePath)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const parsed = await this.processSessionFile(filePath, nameMap);
|
||||
if (!parsed) {
|
||||
continue;
|
||||
@@ -85,9 +66,6 @@ export class ClaudeSessionSynchronizer implements IProviderSessionSynchronizer {
|
||||
if (!filePath.endsWith('.jsonl')) {
|
||||
return null;
|
||||
}
|
||||
if (this.isSubagentTranscript(filePath)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nameMap = await buildLookupMap(path.join(this.claudeHome, 'history.jsonl'), 'sessionId', 'display');
|
||||
const parsed = await this.processSessionFile(filePath, nameMap);
|
||||
|
||||
@@ -99,14 +99,6 @@ export class ClaudeSkillsProvider extends SkillsProvider {
|
||||
];
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(getClaudeHomePath(), 'skills'),
|
||||
commandPrefix: '/',
|
||||
};
|
||||
}
|
||||
|
||||
private async listPluginSkills(claudeHomePath: string): Promise<ProviderSkill[]> {
|
||||
const settings = await readJsonConfig(path.join(claudeHomePath, 'settings.json'));
|
||||
const enabledPlugins = readObjectRecord(settings.enabledPlugins);
|
||||
|
||||
@@ -57,12 +57,4 @@ export class CodexSkillsProvider extends SkillsProvider {
|
||||
|
||||
return sources;
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(os.homedir(), '.agents', 'skills'),
|
||||
commandPrefix: '$',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,12 +28,4 @@ export class CursorSkillsProvider extends SkillsProvider {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(os.homedir(), '.cursor', 'skills'),
|
||||
commandPrefix: '/',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,12 +33,4 @@ export class GeminiSkillsProvider extends SkillsProvider {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource> {
|
||||
return {
|
||||
scope: 'user',
|
||||
rootDir: path.join(os.homedir(), '.gemini', 'skills'),
|
||||
commandPrefix: '/',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,17 +112,6 @@ export class OpenCodeSessionSynchronizer implements IProviderSessionSynchronizer
|
||||
}
|
||||
|
||||
const fallbackTitle = 'Untitled OpenCode Session';
|
||||
const pendingAppSession = sessionsDb.getSessionByProviderSessionId(sessionId)
|
||||
?? sessionsDb.getSessionById(sessionId)
|
||||
?? sessionsDb.findLatestPendingAppSession(this.provider, projectPath);
|
||||
if (pendingAppSession && !pendingAppSession.provider_session_id) {
|
||||
// Slow networks can let the sqlite watcher index opencode.db before the
|
||||
// runtime reports its provider id back through the websocket mapping.
|
||||
// Bind that id to the fresh app row first so the watcher does not create
|
||||
// a temporary provider-id sidebar entry for the same session.
|
||||
sessionsDb.assignProviderSessionId(pendingAppSession.session_id, sessionId);
|
||||
}
|
||||
|
||||
// App-created sessions are keyed by an app id, so disk-discovered provider
|
||||
// ids must be resolved through the provider-id mapping first.
|
||||
const existingSession = sessionsDb.getSessionByProviderSessionId(sessionId)
|
||||
@@ -134,9 +123,7 @@ export class OpenCodeSessionSynchronizer implements IProviderSessionSynchronizer
|
||||
|
||||
// OpenCode stores every session in one shared sqlite database, so jsonl_path
|
||||
// must stay null to avoid deleting opencode.db when one app session is removed.
|
||||
// Return the canonical stored row id so watcher-triggered sidebar updates
|
||||
// stay on the app session once provider_session_id has already been mapped.
|
||||
return sessionsDb.createSession(
|
||||
sessionsDb.createSession(
|
||||
sessionId,
|
||||
this.provider,
|
||||
projectPath,
|
||||
@@ -145,6 +132,8 @@ export class OpenCodeSessionSynchronizer implements IProviderSessionSynchronizer
|
||||
normalizeProviderTimestamp(row.time_updated ?? row.time_created),
|
||||
null,
|
||||
);
|
||||
|
||||
return sessionId;
|
||||
}
|
||||
|
||||
private readFirstUserText(db: Database.Database, sessionId: string): string | undefined {
|
||||
|
||||
@@ -12,8 +12,6 @@ import type {
|
||||
McpScope,
|
||||
McpTransport,
|
||||
ProviderChangeActiveModelInput,
|
||||
ProviderSkillCreateFile,
|
||||
ProviderSkillCreateInput,
|
||||
UpsertProviderMcpServerInput,
|
||||
} from '@/shared/types.js';
|
||||
import { AppError, asyncHandler, createApiSuccessResponse } from '@/shared/utils.js';
|
||||
@@ -181,104 +179,6 @@ const parseMcpUpsertPayload = (payload: unknown): UpsertProviderMcpServerInput =
|
||||
};
|
||||
};
|
||||
|
||||
const parseProviderSkillCreatePayload = (payload: unknown): ProviderSkillCreateInput => {
|
||||
if (!payload || typeof payload !== 'object') {
|
||||
throw new AppError('Request body must be an object.', {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const body = payload as Record<string, unknown>;
|
||||
const rawEntries = Array.isArray(body.entries)
|
||||
? body.entries
|
||||
: typeof body.content === 'string'
|
||||
? [{
|
||||
content: body.content,
|
||||
directoryName: body.directoryName,
|
||||
fileName: body.fileName,
|
||||
files: body.files,
|
||||
}]
|
||||
: null;
|
||||
|
||||
if (!rawEntries || rawEntries.length === 0) {
|
||||
throw new AppError('At least one skill entry is required.', {
|
||||
code: 'PROVIDER_SKILLS_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const entries = rawEntries.map((entry, index) => {
|
||||
if (!entry || typeof entry !== 'object') {
|
||||
throw new AppError(`Skill entry ${index + 1} must be an object.`, {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const record = entry as Record<string, unknown>;
|
||||
const content = typeof record.content === 'string' ? record.content : '';
|
||||
const directoryName = readOptionalQueryString(record.directoryName);
|
||||
const fileName = readOptionalQueryString(record.fileName);
|
||||
const rawFiles = record.files;
|
||||
|
||||
if (!content.trim()) {
|
||||
throw new AppError(`Skill entry ${index + 1} must include markdown content.`, {
|
||||
code: 'PROVIDER_SKILL_CONTENT_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
if (rawFiles !== undefined && !Array.isArray(rawFiles)) {
|
||||
throw new AppError(`Skill entry ${index + 1} files must be an array.`, {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const files: ProviderSkillCreateFile[] | undefined = rawFiles?.map((file, fileIndex) => {
|
||||
if (!file || typeof file !== 'object') {
|
||||
throw new AppError(`Skill entry ${index + 1} file ${fileIndex + 1} must be an object.`, {
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const fileRecord = file as Record<string, unknown>;
|
||||
const relativePath = readOptionalQueryString(fileRecord.relativePath);
|
||||
const fileContent = typeof fileRecord.content === 'string' ? fileRecord.content : null;
|
||||
const encoding = fileRecord.encoding === 'utf8' || fileRecord.encoding === 'base64'
|
||||
? fileRecord.encoding
|
||||
: null;
|
||||
|
||||
if (!relativePath || fileContent === null || !encoding) {
|
||||
throw new AppError(
|
||||
`Skill entry ${index + 1} file ${fileIndex + 1} requires relativePath, content, and encoding.`,
|
||||
{
|
||||
code: 'INVALID_REQUEST_BODY',
|
||||
statusCode: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
relativePath,
|
||||
content: fileContent,
|
||||
encoding,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
content,
|
||||
directoryName,
|
||||
fileName,
|
||||
files,
|
||||
};
|
||||
});
|
||||
|
||||
return { entries };
|
||||
};
|
||||
|
||||
const parseProvider = (value: unknown): LLMProvider => {
|
||||
const normalized = normalizeProviderParam(value);
|
||||
if (
|
||||
@@ -420,16 +320,6 @@ router.get(
|
||||
}),
|
||||
);
|
||||
|
||||
router.post(
|
||||
'/:provider/skills',
|
||||
asyncHandler(async (req: Request, res: Response) => {
|
||||
const provider = parseProvider(req.params.provider);
|
||||
const input = parseProviderSkillCreatePayload(req.body);
|
||||
const skills = await providerSkillsService.addProviderSkills(provider, input);
|
||||
res.json(createApiSuccessResponse({ provider, skills }));
|
||||
}),
|
||||
);
|
||||
|
||||
// ----------------- MCP routes -----------------
|
||||
router.get(
|
||||
'/:provider/mcp/servers',
|
||||
|
||||
@@ -80,30 +80,4 @@ export const providerMcpService = {
|
||||
|
||||
return results;
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes one MCP server from every provider. Mirrors `addMcpServerToAllProviders`
|
||||
* by iterating the live provider registry, so callers stay in sync with which
|
||||
* providers exist instead of maintaining their own provider list.
|
||||
*/
|
||||
async removeMcpServerFromAllProviders(
|
||||
input: { name: string; scope?: McpScope; workspacePath?: string },
|
||||
): Promise<Array<{ provider: LLMProvider; removed: boolean; error?: string }>> {
|
||||
const results: Array<{ provider: LLMProvider; removed: boolean; error?: string }> = [];
|
||||
const providers = providerRegistry.listProviders();
|
||||
for (const provider of providers) {
|
||||
try {
|
||||
const result = await provider.mcp.removeServer(input);
|
||||
results.push({ provider: provider.id, removed: result.removed });
|
||||
} catch (error) {
|
||||
results.push({
|
||||
provider: provider.id,
|
||||
removed: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
import { providerRegistry } from '@/modules/providers/provider.registry.js';
|
||||
import type {
|
||||
ProviderSkill,
|
||||
ProviderSkillCreateInput,
|
||||
ProviderSkillListOptions,
|
||||
} from '@/shared/types.js';
|
||||
import type { ProviderSkill, ProviderSkillListOptions } from '@/shared/types.js';
|
||||
|
||||
export const providerSkillsService = {
|
||||
/**
|
||||
@@ -16,15 +12,4 @@ export const providerSkillsService = {
|
||||
const provider = providerRegistry.resolveProvider(providerName);
|
||||
return provider.skills.listSkills(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* Writes one or more global skills for one provider.
|
||||
*/
|
||||
async addProviderSkills(
|
||||
providerName: string,
|
||||
input: ProviderSkillCreateInput,
|
||||
): Promise<ProviderSkill[]> {
|
||||
const provider = providerRegistry.resolveProvider(providerName);
|
||||
return provider.skills.addSkills(input);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,86 +1,20 @@
|
||||
import path from 'node:path';
|
||||
import { mkdir, rm, writeFile } from 'node:fs/promises';
|
||||
|
||||
import type { IProviderSkills } from '@/shared/interfaces.js';
|
||||
import type {
|
||||
LLMProvider,
|
||||
ProviderSkillCreateInput,
|
||||
ProviderSkill,
|
||||
ProviderSkillListOptions,
|
||||
ProviderSkillSource,
|
||||
} from '@/shared/types.js';
|
||||
import {
|
||||
findProviderSkillMarkdownFiles,
|
||||
readOptionalString,
|
||||
readProviderSkillMarkdownDefinitionFromContent,
|
||||
readProviderSkillMarkdownDefinition,
|
||||
AppError,
|
||||
} from '@/shared/utils.js';
|
||||
|
||||
const resolveWorkspacePath = (workspacePath?: string): string =>
|
||||
path.resolve(workspacePath ?? process.cwd());
|
||||
|
||||
const stripMarkdownExtension = (value: string): string => value.replace(/\.md$/i, '');
|
||||
|
||||
const normalizeSkillDirectoryName = (value: string): string => (
|
||||
value
|
||||
.trim()
|
||||
.replace(/[\\/]+/g, '-')
|
||||
.replace(/[<>:"|?*\x00-\x1F]/g, '-')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^\.+|\.+$/g, '')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
);
|
||||
|
||||
type PendingSkillInstall = {
|
||||
skillDirectoryPath: string;
|
||||
skillPath: string;
|
||||
content: string;
|
||||
supportingFiles: Array<{
|
||||
targetPath: string;
|
||||
content: string | Buffer;
|
||||
}>;
|
||||
skill: ProviderSkill;
|
||||
};
|
||||
|
||||
const resolveSkillSupportingFilePath = (
|
||||
skillDirectoryPath: string,
|
||||
relativePath: string,
|
||||
entryIndex: number,
|
||||
): string => {
|
||||
const normalizedRelativePath = relativePath.trim().replace(/\\/g, '/');
|
||||
const pathSegments = normalizedRelativePath.split('/');
|
||||
if (
|
||||
!normalizedRelativePath
|
||||
|| path.isAbsolute(normalizedRelativePath)
|
||||
|| pathSegments.some((segment) => !segment || segment === '.' || segment === '..')
|
||||
|| normalizedRelativePath.toLowerCase() === 'skill.md'
|
||||
) {
|
||||
throw new AppError(
|
||||
`Skill entry ${entryIndex + 1} includes an invalid supporting file path "${relativePath}".`,
|
||||
{
|
||||
code: 'PROVIDER_SKILL_FILE_PATH_INVALID',
|
||||
statusCode: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
const resolvedSkillDirectoryPath = path.resolve(skillDirectoryPath);
|
||||
const resolvedFilePath = path.resolve(resolvedSkillDirectoryPath, ...pathSegments);
|
||||
if (!resolvedFilePath.startsWith(`${resolvedSkillDirectoryPath}${path.sep}`)) {
|
||||
throw new AppError(
|
||||
`Skill entry ${entryIndex + 1} supporting files must stay inside the skill directory.`,
|
||||
{
|
||||
code: 'PROVIDER_SKILL_FILE_PATH_INVALID',
|
||||
statusCode: 400,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return resolvedFilePath;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared skills provider for provider-specific skill source discovery.
|
||||
*/
|
||||
@@ -126,119 +60,5 @@ export abstract class SkillsProvider implements IProviderSkills {
|
||||
return skills;
|
||||
}
|
||||
|
||||
async addSkills(input: ProviderSkillCreateInput): Promise<ProviderSkill[]> {
|
||||
const globalSkillSource = await this.getGlobalSkillSource();
|
||||
if (!globalSkillSource) {
|
||||
throw new AppError(`${this.provider} does not support managed global skills.`, {
|
||||
code: 'PROVIDER_SKILLS_WRITE_UNSUPPORTED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
if (!Array.isArray(input.entries) || input.entries.length === 0) {
|
||||
throw new AppError('At least one skill entry is required.', {
|
||||
code: 'PROVIDER_SKILLS_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const seenSkillPaths = new Set<string>();
|
||||
const pendingInstalls: PendingSkillInstall[] = [];
|
||||
|
||||
for (const [index, entry] of input.entries.entries()) {
|
||||
const content = typeof entry.content === 'string' ? entry.content.trim() : '';
|
||||
if (!content) {
|
||||
throw new AppError(`Skill entry ${index + 1} must include markdown content.`, {
|
||||
code: 'PROVIDER_SKILL_CONTENT_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const fileNameFallback = readOptionalString(entry.fileName);
|
||||
const requestedDirectoryName = readOptionalString(entry.directoryName);
|
||||
const fallbackSkillName = normalizeSkillDirectoryName(
|
||||
requestedDirectoryName
|
||||
?? (fileNameFallback ? stripMarkdownExtension(fileNameFallback) : `skill-${index + 1}`),
|
||||
);
|
||||
const definition = readProviderSkillMarkdownDefinitionFromContent(content, fallbackSkillName);
|
||||
const resolvedDirectoryName = normalizeSkillDirectoryName(
|
||||
requestedDirectoryName ?? definition.name,
|
||||
);
|
||||
|
||||
if (!resolvedDirectoryName) {
|
||||
throw new AppError(`Skill entry ${index + 1} must include a valid skill name.`, {
|
||||
code: 'PROVIDER_SKILL_NAME_REQUIRED',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
const skillDirectoryPath = path.join(globalSkillSource.rootDir, resolvedDirectoryName);
|
||||
const skillPath = path.join(skillDirectoryPath, 'SKILL.md');
|
||||
const normalizedSkillPath = path.resolve(skillPath);
|
||||
if (seenSkillPaths.has(normalizedSkillPath)) {
|
||||
throw new AppError(`Duplicate skill target "${resolvedDirectoryName}" in one request.`, {
|
||||
code: 'PROVIDER_SKILL_DUPLICATE_TARGET',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
|
||||
seenSkillPaths.add(normalizedSkillPath);
|
||||
const supportingFiles = (entry.files ?? []).map((file) => ({
|
||||
targetPath: resolveSkillSupportingFilePath(skillDirectoryPath, file.relativePath, index),
|
||||
content: file.encoding === 'base64'
|
||||
? Buffer.from(file.content, 'base64')
|
||||
: file.content,
|
||||
}));
|
||||
const seenSupportingPaths = new Set<string>();
|
||||
for (const file of supportingFiles) {
|
||||
if (seenSupportingPaths.has(file.targetPath)) {
|
||||
throw new AppError(`Skill entry ${index + 1} includes a duplicate supporting file path.`, {
|
||||
code: 'PROVIDER_SKILL_DUPLICATE_FILE',
|
||||
statusCode: 400,
|
||||
});
|
||||
}
|
||||
seenSupportingPaths.add(file.targetPath);
|
||||
}
|
||||
|
||||
const command = globalSkillSource.commandForSkill
|
||||
? globalSkillSource.commandForSkill(definition.name)
|
||||
: `${globalSkillSource.commandPrefix ?? '/'}${definition.name}`;
|
||||
|
||||
pendingInstalls.push({
|
||||
skillDirectoryPath,
|
||||
skillPath,
|
||||
content,
|
||||
supportingFiles,
|
||||
skill: {
|
||||
provider: this.provider,
|
||||
name: definition.name,
|
||||
description: definition.description,
|
||||
command,
|
||||
scope: globalSkillSource.scope,
|
||||
sourcePath: skillPath,
|
||||
pluginName: globalSkillSource.pluginName,
|
||||
pluginId: globalSkillSource.pluginId,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
for (const install of pendingInstalls) {
|
||||
// Replace the complete skill directory so removed scripts or assets do not remain stale.
|
||||
await rm(install.skillDirectoryPath, { recursive: true, force: true });
|
||||
await mkdir(install.skillDirectoryPath, { recursive: true });
|
||||
await writeFile(install.skillPath, `${install.content}\n`, 'utf8');
|
||||
for (const file of install.supportingFiles) {
|
||||
await mkdir(path.dirname(file.targetPath), { recursive: true });
|
||||
await writeFile(file.targetPath, file.content);
|
||||
}
|
||||
}
|
||||
|
||||
return pendingInstalls.map((install) => install.skill);
|
||||
}
|
||||
|
||||
protected abstract getSkillSources(workspacePath: string): Promise<ProviderSkillSource[]>;
|
||||
|
||||
protected async getGlobalSkillSource(): Promise<ProviderSkillSource | null> {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -272,55 +272,6 @@ test('OpenCode session synchronizer indexes sqlite sessions without deletable tr
|
||||
}
|
||||
});
|
||||
|
||||
test('OpenCode session synchronizer returns the app session id once provider mapping exists', { concurrency: false }, async () => {
|
||||
const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'opencode-session-sync-mapped-'));
|
||||
const workspacePath = path.join(tempRoot, 'workspace');
|
||||
await mkdir(workspacePath, { recursive: true });
|
||||
const restoreHomeDir = patchHomeDir(tempRoot);
|
||||
|
||||
try {
|
||||
await createOpenCodeDatabase(tempRoot, workspacePath);
|
||||
await withIsolatedDatabase(() => {
|
||||
sessionsDb.createAppSession('app-session-1', 'opencode', workspacePath);
|
||||
sessionsDb.assignProviderSessionId('app-session-1', 'open-session-1');
|
||||
|
||||
const synchronizer = new OpenCodeSessionSynchronizer();
|
||||
return synchronizer.synchronizeFile(path.join(tempRoot, '.local', 'share', 'opencode', 'opencode.db')).then((sessionId) => {
|
||||
assert.equal(sessionId, 'app-session-1');
|
||||
assert.equal(sessionsDb.getAllSessions().length, 1);
|
||||
assert.equal(sessionsDb.getSessionById('app-session-1')?.provider_session_id, 'open-session-1');
|
||||
});
|
||||
});
|
||||
} finally {
|
||||
restoreHomeDir();
|
||||
await rm(tempRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
test('OpenCode session synchronizer adopts the pending app session before watcher sync creates a duplicate', { concurrency: false }, async () => {
|
||||
const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'opencode-session-sync-race-'));
|
||||
const workspacePath = path.join(tempRoot, 'workspace');
|
||||
await mkdir(workspacePath, { recursive: true });
|
||||
const restoreHomeDir = patchHomeDir(tempRoot);
|
||||
|
||||
try {
|
||||
await createOpenCodeDatabase(tempRoot, workspacePath);
|
||||
await withIsolatedDatabase(() => {
|
||||
sessionsDb.createAppSession('app-session-race', 'opencode', workspacePath);
|
||||
|
||||
const synchronizer = new OpenCodeSessionSynchronizer();
|
||||
return synchronizer.synchronizeFile(path.join(tempRoot, '.local', 'share', 'opencode', 'opencode.db')).then((sessionId) => {
|
||||
assert.equal(sessionId, 'app-session-race');
|
||||
assert.equal(sessionsDb.getAllSessions().length, 1);
|
||||
assert.equal(sessionsDb.getSessionById('app-session-race')?.provider_session_id, 'open-session-1');
|
||||
});
|
||||
});
|
||||
} finally {
|
||||
restoreHomeDir();
|
||||
await rm(tempRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
test('OpenCode sessions provider normalizes quoted live text and skips user echoes', () => {
|
||||
const provider = new OpenCodeSessionsProvider();
|
||||
const normalized = provider.normalizeMessage({
|
||||
|
||||
@@ -510,195 +510,3 @@ test('providerSkillsService lists gemini and cursor skills from their configured
|
||||
await fs.rm(tempRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* This test covers managed global skill creation for providers that own a
|
||||
* writable user skill directory.
|
||||
*/
|
||||
test('providerSkillsService adds global skills for claude, codex, gemini, and cursor', { concurrency: false }, async () => {
|
||||
const tempRoot = await fs.mkdtemp(path.join(os.tmpdir(), 'llm-skills-create-'));
|
||||
const restoreHomeDir = patchHomeDir(tempRoot);
|
||||
|
||||
try {
|
||||
const createdClaudeSkills = await providerSkillsService.addProviderSkills('claude', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'claude-global-dir',
|
||||
content: '---\nname: claude-global\ndescription: Claude global skill\n---\n\nClaude body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdClaudeSkill = createdClaudeSkills[0];
|
||||
assert.ok(createdClaudeSkill);
|
||||
assert.equal(createdClaudeSkill.command, '/claude-global');
|
||||
assert.equal(
|
||||
createdClaudeSkill.sourcePath.endsWith(path.join('.claude', 'skills', 'claude-global-dir', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
assert.match(
|
||||
await fs.readFile(createdClaudeSkill.sourcePath, 'utf8'),
|
||||
/Claude body\./,
|
||||
);
|
||||
|
||||
const createdCodexSkills = await providerSkillsService.addProviderSkills('codex', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'uploaded-codex-folder',
|
||||
fileName: 'SKILL.md',
|
||||
content: '---\nname: codex-global\ndescription: Codex global skill\n---\n\nCodex body.\n',
|
||||
files: [
|
||||
{
|
||||
relativePath: 'scripts/run.js',
|
||||
content: Buffer.from('console.log("codex skill");\n').toString('base64'),
|
||||
encoding: 'base64',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdCodexSkill = createdCodexSkills[0];
|
||||
assert.ok(createdCodexSkill);
|
||||
assert.equal(createdCodexSkill.command, '$codex-global');
|
||||
assert.equal(
|
||||
createdCodexSkill.sourcePath.endsWith(path.join('.agents', 'skills', 'uploaded-codex-folder', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
assert.equal(
|
||||
await fs.readFile(path.join(path.dirname(createdCodexSkill.sourcePath), 'scripts', 'run.js'), 'utf8'),
|
||||
'console.log("codex skill");\n',
|
||||
);
|
||||
|
||||
const fallbackNamedSkills = await providerSkillsService.addProviderSkills('codex', {
|
||||
entries: [
|
||||
{
|
||||
fileName: 'fallback / skill.md',
|
||||
content: '---\ndescription: Normalized fallback skill\n---\n\nFallback body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
const fallbackNamedSkill = fallbackNamedSkills[0];
|
||||
assert.ok(fallbackNamedSkill);
|
||||
assert.equal(fallbackNamedSkill.name, 'fallback-skill');
|
||||
assert.equal(fallbackNamedSkill.command, '$fallback-skill');
|
||||
assert.equal(
|
||||
fallbackNamedSkill.sourcePath.endsWith(path.join('.agents', 'skills', 'fallback-skill', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
|
||||
const replacedCodexSkills = await providerSkillsService.addProviderSkills('codex', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'uploaded-codex-folder',
|
||||
content: '---\nname: replacement\ndescription: Replacement skill\n---\n\nReplacement body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
assert.equal(replacedCodexSkills[0]?.command, '$replacement');
|
||||
assert.match(await fs.readFile(createdCodexSkill.sourcePath, 'utf8'), /Replacement body\./);
|
||||
await assert.rejects(
|
||||
fs.stat(path.join(path.dirname(createdCodexSkill.sourcePath), 'scripts', 'run.js')),
|
||||
{ code: 'ENOENT' },
|
||||
);
|
||||
|
||||
const pendingBatchSkillPath = path.join(tempRoot, '.agents', 'skills', 'pending-batch', 'SKILL.md');
|
||||
await assert.rejects(
|
||||
providerSkillsService.addProviderSkills('codex', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'pending-batch',
|
||||
content: '---\nname: pending-batch\n---\n\nPending body.\n',
|
||||
},
|
||||
{
|
||||
directoryName: 'pending-batch',
|
||||
content: '---\nname: duplicate-batch\n---\n\nDuplicate body.\n',
|
||||
},
|
||||
],
|
||||
}),
|
||||
/duplicate skill target/i,
|
||||
);
|
||||
await assert.rejects(fs.stat(pendingBatchSkillPath), { code: 'ENOENT' });
|
||||
|
||||
const createdGeminiSkills = await providerSkillsService.addProviderSkills('gemini', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'gemini-global-dir',
|
||||
content: '---\nname: gemini-global\ndescription: Gemini global skill\n---\n\nGemini body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdGeminiSkill = createdGeminiSkills[0];
|
||||
assert.ok(createdGeminiSkill);
|
||||
assert.equal(createdGeminiSkill.command, '/gemini-global');
|
||||
assert.equal(
|
||||
createdGeminiSkill.sourcePath.endsWith(path.join('.gemini', 'skills', 'gemini-global-dir', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
|
||||
const createdCursorSkills = await providerSkillsService.addProviderSkills('cursor', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'cursor-global-dir',
|
||||
content: '---\nname: cursor-global\ndescription: Cursor global skill\n---\n\nCursor body.\n',
|
||||
},
|
||||
],
|
||||
});
|
||||
const createdCursorSkill = createdCursorSkills[0];
|
||||
assert.ok(createdCursorSkill);
|
||||
assert.equal(createdCursorSkill.command, '/cursor-global');
|
||||
assert.equal(
|
||||
createdCursorSkill.sourcePath.endsWith(path.join('.cursor', 'skills', 'cursor-global-dir', 'SKILL.md')),
|
||||
true,
|
||||
);
|
||||
|
||||
const listedClaudeSkills = await providerSkillsService.listProviderSkills('claude');
|
||||
assert.equal(listedClaudeSkills.some((skill) => skill.name === 'claude-global'), true);
|
||||
|
||||
const listedCodexSkills = await providerSkillsService.listProviderSkills('codex');
|
||||
assert.equal(listedCodexSkills.some((skill) => skill.name === 'replacement'), true);
|
||||
|
||||
const listedGeminiSkills = await providerSkillsService.listProviderSkills('gemini');
|
||||
assert.equal(listedGeminiSkills.some((skill) => skill.name === 'gemini-global'), true);
|
||||
|
||||
const listedCursorSkills = await providerSkillsService.listProviderSkills('cursor');
|
||||
assert.equal(listedCursorSkills.some((skill) => skill.name === 'cursor-global'), true);
|
||||
|
||||
await assert.rejects(
|
||||
providerSkillsService.addProviderSkills('codex', {
|
||||
entries: [
|
||||
{
|
||||
content: '---\nname: unsafe-skill\n---\n',
|
||||
files: [
|
||||
{
|
||||
relativePath: '../outside.js',
|
||||
content: '',
|
||||
encoding: 'utf8',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
/invalid supporting file path/i,
|
||||
);
|
||||
} finally {
|
||||
restoreHomeDir();
|
||||
await fs.rm(tempRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* OpenCode reuses other providers' skill folders, so it should not accept
|
||||
* direct skill writes through the managed provider endpoint.
|
||||
*/
|
||||
test('providerSkillsService rejects managed skill creation for opencode', { concurrency: false }, async () => {
|
||||
await assert.rejects(
|
||||
providerSkillsService.addProviderSkills('opencode', {
|
||||
entries: [
|
||||
{
|
||||
directoryName: 'opencode-global-dir',
|
||||
content: '---\nname: opencode-global\ndescription: Unsupported skill\n---\n\nOpenCode body.\n',
|
||||
},
|
||||
],
|
||||
}),
|
||||
/does not support managed global skills/i,
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
import path from 'node:path';
|
||||
|
||||
import { projectsDb, sessionsDb } from '@/modules/database/index.js';
|
||||
import { generateDisplayName } from '@/modules/projects/index.js';
|
||||
import { sessionsDb } from '@/modules/database/index.js';
|
||||
import { ChatSessionWriter } from '@/modules/websocket/services/chat-session-writer.service.js';
|
||||
import { connectedClients, WS_OPEN_STATE } from '@/modules/websocket/services/websocket-state.service.js';
|
||||
import type {
|
||||
LLMProvider,
|
||||
NormalizedMessage,
|
||||
@@ -62,48 +58,6 @@ const MAX_BUFFERED_EVENTS_PER_RUN = 5000;
|
||||
*/
|
||||
const runs = new Map<string, ChatRun>();
|
||||
|
||||
async function broadcastCanonicalSessionUpsert(appSessionId: string): Promise<void> {
|
||||
const row = sessionsDb.getSessionById(appSessionId);
|
||||
if (!row || row.isArchived) {
|
||||
return;
|
||||
}
|
||||
|
||||
const projectPath = row.project_path;
|
||||
const project = projectPath ? projectsDb.getProjectPath(projectPath) : null;
|
||||
const displayName = project?.custom_project_name?.trim()
|
||||
? project.custom_project_name
|
||||
: await generateDisplayName(path.basename(projectPath ?? '') || (projectPath ?? ''), projectPath);
|
||||
|
||||
const payload = JSON.stringify({
|
||||
kind: 'session_upserted',
|
||||
sessionId: row.session_id,
|
||||
providerSessionId: row.provider_session_id,
|
||||
provider: row.provider,
|
||||
session: {
|
||||
id: row.session_id,
|
||||
summary: row.custom_name || '',
|
||||
messageCount: 0,
|
||||
lastActivity: row.updated_at ?? row.created_at ?? new Date().toISOString(),
|
||||
},
|
||||
project: project
|
||||
? {
|
||||
projectId: project.project_id,
|
||||
path: project.project_path,
|
||||
fullPath: project.project_path,
|
||||
displayName,
|
||||
isStarred: Boolean(project.isStarred),
|
||||
}
|
||||
: null,
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
connectedClients.forEach((client) => {
|
||||
if (client.readyState === WS_OPEN_STATE) {
|
||||
client.send(payload);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function evictRunLater(appSessionId: string): void {
|
||||
const timer = setTimeout(() => {
|
||||
const run = runs.get(appSessionId);
|
||||
@@ -178,14 +132,6 @@ function recordProviderSessionId(run: ChatRun, providerSessionId: string): void
|
||||
|
||||
try {
|
||||
sessionsDb.assignProviderSessionId(run.appSessionId, providerSessionId);
|
||||
void broadcastCanonicalSessionUpsert(run.appSessionId).catch((error) => {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
console.error('[ChatRunRegistry] Failed to broadcast canonical session mapping', {
|
||||
appSessionId: run.appSessionId,
|
||||
providerSessionId,
|
||||
error: message,
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
console.error('[ChatRunRegistry] Failed to persist provider session id mapping', {
|
||||
|
||||
@@ -5,6 +5,7 @@ import path from 'node:path';
|
||||
import pty, { type IPty } from 'node-pty';
|
||||
import { WebSocket, type RawData } from 'ws';
|
||||
|
||||
import { sessionsDb } from '@/modules/database/index.js';
|
||||
import { parseIncomingJsonObject } from '@/shared/utils.js';
|
||||
|
||||
type ShellIncomingMessage = {
|
||||
@@ -35,10 +36,7 @@ const PTY_SESSION_TIMEOUT = 30 * 60 * 1000;
|
||||
const SHELL_URL_PARSE_BUFFER_LIMIT = 32768;
|
||||
|
||||
type ShellWebSocketDependencies = {
|
||||
resolveProviderSessionId: (
|
||||
sessionId: string,
|
||||
provider: string,
|
||||
) => string | null | undefined;
|
||||
getSessionById: (sessionId: string) => { cliSessionId?: string } | null | undefined;
|
||||
stripAnsiSequences: (content: string) => string;
|
||||
normalizeDetectedUrl: (url: string) => string | null;
|
||||
extractUrlsFromText: (content: string) => string[];
|
||||
@@ -81,32 +79,36 @@ function parseShellMessage(rawMessage: RawData): ShellIncomingMessage | null {
|
||||
|
||||
const SAFE_SESSION_ID_PATTERN = /^[a-zA-Z0-9_.\-:]+$/;
|
||||
|
||||
/**
|
||||
* Maps the app-facing session id to the provider-native id used by CLIs.
|
||||
*
|
||||
* Chat history and provider artifacts on disk are keyed by the provider id,
|
||||
* while the shell UI sends the stable app id from the session gateway.
|
||||
*/
|
||||
function resolveResumeSessionId(
|
||||
message: ShellIncomingMessage,
|
||||
appSessionId: string,
|
||||
provider: string,
|
||||
dependencies: ShellWebSocketDependencies
|
||||
): string {
|
||||
const hasSession = readBoolean(message.hasSession);
|
||||
const sessionId = readString(message.sessionId);
|
||||
const provider = readString(message.provider, 'claude');
|
||||
|
||||
if (!hasSession || !sessionId) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let resumeSessionId: string | null | undefined;
|
||||
): string | null {
|
||||
try {
|
||||
resumeSessionId = dependencies.resolveProviderSessionId(sessionId, provider);
|
||||
const sessionRow = sessionsDb.getSessionById(appSessionId);
|
||||
const providerSessionId = sessionRow?.provider_session_id;
|
||||
if (providerSessionId && SAFE_SESSION_ID_PATTERN.test(providerSessionId)) {
|
||||
return providerSessionId;
|
||||
}
|
||||
|
||||
if (provider === 'gemini') {
|
||||
const geminiSession = dependencies.getSessionById(appSessionId);
|
||||
const cliSessionId = geminiSession?.cliSessionId;
|
||||
if (cliSessionId && SAFE_SESSION_ID_PATTERN.test(cliSessionId)) {
|
||||
return cliSessionId;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to resolve provider session ID:', error);
|
||||
resumeSessionId = undefined;
|
||||
console.error(`Failed to resolve resume session id for ${provider}:`, error);
|
||||
}
|
||||
|
||||
const resolvedSessionId = resumeSessionId === undefined ? sessionId : resumeSessionId;
|
||||
if (!resolvedSessionId || !SAFE_SESSION_ID_PATTERN.test(resolvedSessionId)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return resolvedSessionId;
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -117,9 +119,9 @@ function buildShellCommand(
|
||||
dependencies: ShellWebSocketDependencies
|
||||
): string {
|
||||
const hasSession = readBoolean(message.hasSession);
|
||||
const sessionId = readString(message.sessionId);
|
||||
const initialCommand = readString(message.initialCommand);
|
||||
const provider = readString(message.provider, 'claude');
|
||||
const resumeSessionId = resolveResumeSessionId(message, dependencies);
|
||||
const isPlainShell =
|
||||
readBoolean(message.isPlainShell) ||
|
||||
(!!initialCommand && !hasSession) ||
|
||||
@@ -129,104 +131,51 @@ function buildShellCommand(
|
||||
return initialCommand;
|
||||
}
|
||||
|
||||
const resumeId =
|
||||
hasSession && sessionId ? resolveResumeSessionId(sessionId, provider, dependencies) : null;
|
||||
|
||||
if (provider === 'cursor') {
|
||||
if (resumeSessionId) {
|
||||
return `cursor-agent --resume="${resumeSessionId}"`;
|
||||
if (resumeId) {
|
||||
return `cursor-agent --resume="${resumeId}"`;
|
||||
}
|
||||
return 'cursor-agent';
|
||||
}
|
||||
|
||||
if (provider === 'codex') {
|
||||
if (resumeSessionId) {
|
||||
if (resumeId) {
|
||||
if (os.platform() === 'win32') {
|
||||
return `codex resume "${resumeSessionId}"; if ($LASTEXITCODE -ne 0) { codex }`;
|
||||
return `codex resume "${resumeId}"; if ($LASTEXITCODE -ne 0) { codex }`;
|
||||
}
|
||||
return `codex resume "${resumeSessionId}" || codex`;
|
||||
return `codex resume "${resumeId}" || codex`;
|
||||
}
|
||||
return 'codex';
|
||||
}
|
||||
|
||||
if (provider === 'gemini') {
|
||||
const command = initialCommand || 'gemini';
|
||||
if (resumeSessionId) {
|
||||
return `${command} --resume "${resumeSessionId}"`;
|
||||
if (resumeId) {
|
||||
return `${command} --resume "${resumeId}"`;
|
||||
}
|
||||
return command;
|
||||
}
|
||||
|
||||
if (provider === 'opencode') {
|
||||
if (resumeSessionId) {
|
||||
return `opencode --session "${resumeSessionId}"`;
|
||||
if (resumeId) {
|
||||
return `opencode --session "${resumeId}"`;
|
||||
}
|
||||
return initialCommand || 'opencode';
|
||||
}
|
||||
|
||||
const command = initialCommand || 'claude';
|
||||
if (resumeSessionId) {
|
||||
if (resumeId) {
|
||||
if (os.platform() === 'win32') {
|
||||
return `claude --resume "${resumeSessionId}"; if ($LASTEXITCODE -ne 0) { claude }`;
|
||||
return `claude --resume "${resumeId}"; if ($LASTEXITCODE -ne 0) { claude }`;
|
||||
}
|
||||
return `claude --resume "${resumeSessionId}" || claude`;
|
||||
return `claude --resume "${resumeId}" || claude`;
|
||||
}
|
||||
return command;
|
||||
}
|
||||
|
||||
function readEnvValue(env: NodeJS.ProcessEnv, key: string): string | undefined {
|
||||
const resolvedKey = Object.keys(env).find((envKey) => envKey.toLowerCase() === key.toLowerCase());
|
||||
return resolvedKey ? env[resolvedKey] : undefined;
|
||||
}
|
||||
|
||||
function getPathEnvKey(env: NodeJS.ProcessEnv): string {
|
||||
return Object.keys(env).find((key) => key.toLowerCase() === 'path') || 'PATH';
|
||||
}
|
||||
|
||||
function prioritizeUserNpmGlobalBin(env: NodeJS.ProcessEnv): { key: string; value: string | undefined } {
|
||||
const pathKey = getPathEnvKey(env);
|
||||
const currentPath = env[pathKey];
|
||||
if (!currentPath) {
|
||||
return { key: pathKey, value: currentPath };
|
||||
}
|
||||
|
||||
const delimiter = path.delimiter;
|
||||
const pathEntries = currentPath.split(delimiter).filter(Boolean);
|
||||
const npmPrefix = readEnvValue(env, 'npm_config_prefix');
|
||||
const appData = readEnvValue(env, 'APPDATA');
|
||||
const candidates = [
|
||||
npmPrefix || '',
|
||||
npmPrefix ? path.join(npmPrefix, 'bin') : '',
|
||||
appData ? path.join(appData, 'npm') : '',
|
||||
path.join(os.homedir(), 'AppData', 'Roaming', 'npm'),
|
||||
path.join(os.homedir(), '.npm-global', 'bin'),
|
||||
].filter(Boolean);
|
||||
|
||||
const normalizedPathEntries = pathEntries.map((entry) => os.platform() === 'win32' ? entry.toLowerCase() : entry);
|
||||
const preferredEntries = candidates.filter((candidate, index) => {
|
||||
const normalizedCandidate = os.platform() === 'win32' ? candidate.toLowerCase() : candidate;
|
||||
return (
|
||||
candidates.indexOf(candidate) === index &&
|
||||
normalizedPathEntries.includes(normalizedCandidate)
|
||||
);
|
||||
});
|
||||
|
||||
if (preferredEntries.length === 0) {
|
||||
return { key: pathKey, value: currentPath };
|
||||
}
|
||||
|
||||
const normalizedPreferredEntries = preferredEntries.map((entry) =>
|
||||
os.platform() === 'win32' ? entry.toLowerCase() : entry
|
||||
);
|
||||
|
||||
const value = [
|
||||
...preferredEntries,
|
||||
...pathEntries.filter((entry) => {
|
||||
const normalizedEntry = os.platform() === 'win32' ? entry.toLowerCase() : entry;
|
||||
return !normalizedPreferredEntries.includes(normalizedEntry);
|
||||
}),
|
||||
].join(delimiter);
|
||||
|
||||
return { key: pathKey, value };
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles websocket connections used by the standalone shell terminal UI.
|
||||
*/
|
||||
@@ -327,20 +276,17 @@ export function handleShellConnection(
|
||||
return;
|
||||
}
|
||||
|
||||
const safeSessionIdPattern = /^[a-zA-Z0-9_.\-:]+$/;
|
||||
if (sessionId && !safeSessionIdPattern.test(sessionId)) {
|
||||
if (sessionId && !SAFE_SESSION_ID_PATTERN.test(sessionId)) {
|
||||
ws.send(JSON.stringify({ type: 'error', message: 'Invalid session ID' }));
|
||||
return;
|
||||
}
|
||||
|
||||
const shellCommand = buildShellCommand(data, dependencies);
|
||||
const resumeSessionId = resolveResumeSessionId(data, dependencies);
|
||||
const shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
|
||||
const shellArgs =
|
||||
os.platform() === 'win32' ? ['-Command', shellCommand] : ['-c', shellCommand];
|
||||
const termCols = readNumber(data.cols, 80);
|
||||
const termRows = readNumber(data.rows, 24);
|
||||
const prioritizedPath = prioritizeUserNpmGlobalBin(process.env);
|
||||
|
||||
shellProcess = pty.spawn(shell, shellArgs, {
|
||||
name: 'xterm-256color',
|
||||
@@ -349,7 +295,6 @@ export function handleShellConnection(
|
||||
cwd: resolvedProjectPath,
|
||||
env: {
|
||||
...process.env,
|
||||
[prioritizedPath.key]: prioritizedPath.value,
|
||||
TERM: 'xterm-256color',
|
||||
COLORTERM: 'truecolor',
|
||||
FORCE_COLOR: '3',
|
||||
@@ -482,8 +427,8 @@ export function handleShellConnection(
|
||||
: provider === 'opencode'
|
||||
? 'OpenCode'
|
||||
: 'Claude';
|
||||
welcomeMsg = hasSession && resumeSessionId
|
||||
? `\x1b[36mResuming ${providerName} session ${resumeSessionId} in: ${projectPath}\x1b[0m\r\n`
|
||||
welcomeMsg = hasSession
|
||||
? `\x1b[36mResuming ${providerName} session ${sessionId} in: ${projectPath}\x1b[0m\r\n`
|
||||
: `\x1b[36mStarting new ${providerName} session in: ${projectPath}\x1b[0m\r\n`;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ import test from 'node:test';
|
||||
|
||||
import { closeConnection, initializeDatabase, sessionsDb } from '@/modules/database/index.js';
|
||||
import { chatRunRegistry } from '@/modules/websocket/services/chat-run-registry.service.js';
|
||||
import { connectedClients } from '@/modules/websocket/services/websocket-state.service.js';
|
||||
import type { NormalizedMessage } from '@/shared/types.js';
|
||||
|
||||
/**
|
||||
* Minimal stand-in for a websocket connection: collects every JSON frame the
|
||||
@@ -14,10 +14,10 @@ import { connectedClients } from '@/modules/websocket/services/websocket-state.s
|
||||
*/
|
||||
class FakeConnection {
|
||||
readyState = 1; // WS_OPEN_STATE
|
||||
frames: Array<Record<string, unknown>> = [];
|
||||
frames: NormalizedMessage[] = [];
|
||||
|
||||
send(data: string): void {
|
||||
this.frames.push(JSON.parse(data) as Record<string, unknown>);
|
||||
this.frames.push(JSON.parse(data) as NormalizedMessage);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,6 @@ async function withIsolatedDatabase(runTest: () => void | Promise<void>): Promis
|
||||
try {
|
||||
await runTest();
|
||||
} finally {
|
||||
connectedClients.clear();
|
||||
chatRunRegistry.clearAll();
|
||||
closeConnection();
|
||||
if (previousDatabasePath === undefined) {
|
||||
@@ -73,7 +72,6 @@ test('session_created is swallowed and persisted as the provider-id mapping', as
|
||||
await withIsolatedDatabase(() => {
|
||||
sessionsDb.createAppSession('app-run-2', 'cursor', '/workspace/demo');
|
||||
const connection = new FakeConnection();
|
||||
connectedClients.add(connection as never);
|
||||
const run = chatRunRegistry.startRun({
|
||||
appSessionId: 'app-run-2',
|
||||
provider: 'cursor',
|
||||
@@ -90,12 +88,9 @@ test('session_created is swallowed and persisted as the provider-id mapping', as
|
||||
newSessionId: 'cursor-native-7',
|
||||
});
|
||||
|
||||
// The provider-native event itself is never forwarded...
|
||||
const sessionUpserts = connection.frames.filter((frame) => frame.kind === 'session_upserted');
|
||||
assert.equal(sessionUpserts.length, 1);
|
||||
assert.equal(sessionUpserts[0]?.sessionId, 'app-run-2');
|
||||
assert.equal(sessionUpserts[0]?.providerSessionId, 'cursor-native-7');
|
||||
// ...but the canonical mapping is recorded and persisted in the database.
|
||||
// Never forwarded to the client...
|
||||
assert.equal(connection.frames.length, 0);
|
||||
// ...but recorded in the registry and persisted in the database.
|
||||
assert.equal(run.providerSessionId, 'cursor-native-7');
|
||||
assert.equal(sessionsDb.getSessionById('app-run-2')?.provider_session_id, 'cursor-native-7');
|
||||
});
|
||||
|
||||
@@ -194,10 +194,6 @@ async function spawnOpenCode(command, options = {}, ws) {
|
||||
|
||||
void providerModelsService.resolveResumeModel('opencode', sessionId, model).then((resolvedModel) => {
|
||||
const args = ['run', '--format', 'json'];
|
||||
// OpenCode's `run` command owns workspace selection through `--dir`.
|
||||
// Relying on the child-process cwd alone is not enough on Linux, where
|
||||
// the CLI can still resolve the session under the server install dir.
|
||||
args.push('--dir', workingDir);
|
||||
if (sessionId) {
|
||||
args.push('--session', sessionId);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import assert from 'node:assert/strict';
|
||||
import { chmod, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
|
||||
import { chmod, mkdtemp, rm, writeFile } from 'node:fs/promises';
|
||||
import os from 'node:os';
|
||||
import path from 'node:path';
|
||||
import test from 'node:test';
|
||||
@@ -12,11 +12,6 @@ const findEnvKey = (name) =>
|
||||
async function createFakeOpenCodeExecutable(binDir) {
|
||||
const scriptPath = path.join(binDir, 'opencode.js');
|
||||
await writeFile(scriptPath, `
|
||||
const capturePath = process.env.OPENCODE_ARGS_CAPTURE;
|
||||
if (capturePath) {
|
||||
require('node:fs').writeFileSync(capturePath, JSON.stringify(process.argv.slice(2)));
|
||||
}
|
||||
|
||||
const events = [
|
||||
{ type: 'text', sessionID: 'open-live-1', text: 'assistant response' },
|
||||
{ type: 'step_finish', sessionID: 'open-live-1' },
|
||||
@@ -40,12 +35,10 @@ for (const event of events) {
|
||||
|
||||
test('spawnOpenCode emits session_created before normalized live messages for new sessions', async () => {
|
||||
const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'opencode-cli-live-'));
|
||||
const argsCapturePath = path.join(tempRoot, 'opencode-args.json');
|
||||
const pathKey = findEnvKey('PATH');
|
||||
const pathExtKey = findEnvKey('PATHEXT');
|
||||
const previousPath = process.env[pathKey];
|
||||
const previousPathExt = process.env[pathExtKey];
|
||||
const previousArgsCapture = process.env.OPENCODE_ARGS_CAPTURE;
|
||||
const messages = [];
|
||||
const writer = {
|
||||
userId: null,
|
||||
@@ -61,7 +54,6 @@ test('spawnOpenCode emits session_created before normalized live messages for ne
|
||||
try {
|
||||
await createFakeOpenCodeExecutable(tempRoot);
|
||||
process.env[pathKey] = `${tempRoot}${path.delimiter}${previousPath || ''}`;
|
||||
process.env.OPENCODE_ARGS_CAPTURE = argsCapturePath;
|
||||
if (process.platform === 'win32') {
|
||||
process.env[pathExtKey] = previousPathExt?.toUpperCase().includes('.CMD')
|
||||
? previousPathExt
|
||||
@@ -85,11 +77,6 @@ test('spawnOpenCode emits session_created before normalized live messages for ne
|
||||
assert.equal(streamEnd?.sessionId, 'open-live-1');
|
||||
assert.equal(complete?.sessionId, 'open-live-1');
|
||||
assert.equal(messages.some((message) => message.kind === 'error'), false);
|
||||
|
||||
const launchedArgs = JSON.parse(await readFile(argsCapturePath, 'utf8'));
|
||||
assert.ok(Array.isArray(launchedArgs));
|
||||
assert.deepEqual(launchedArgs.slice(0, 4), ['run', '--format', 'json', '--dir']);
|
||||
assert.equal(launchedArgs[4], tempRoot);
|
||||
} finally {
|
||||
if (previousPath === undefined) {
|
||||
delete process.env[pathKey];
|
||||
@@ -103,12 +90,6 @@ test('spawnOpenCode emits session_created before normalized live messages for ne
|
||||
process.env[pathExtKey] = previousPathExt;
|
||||
}
|
||||
|
||||
if (previousArgsCapture === undefined) {
|
||||
delete process.env.OPENCODE_ARGS_CAPTURE;
|
||||
} else {
|
||||
process.env.OPENCODE_ARGS_CAPTURE = previousArgsCapture;
|
||||
}
|
||||
|
||||
await rm(tempRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
@@ -12,7 +12,6 @@ import type {
|
||||
ProviderModelsDefinition,
|
||||
ProviderMcpServer,
|
||||
ProviderSessionActiveModelChange,
|
||||
ProviderSkillCreateInput,
|
||||
UpsertProviderMcpServerInput,
|
||||
} from '@/shared/types.js';
|
||||
|
||||
@@ -102,15 +101,6 @@ export interface IProviderSkills {
|
||||
* Lists all skills visible to this provider for the optional workspace.
|
||||
*/
|
||||
listSkills(options?: ProviderSkillListOptions): Promise<ProviderSkill[]>;
|
||||
|
||||
/**
|
||||
* Writes one or more global user-scoped skills for this provider.
|
||||
*
|
||||
* Implementations should install the supplied markdown entries into the
|
||||
* provider's writable user skill folder and return the normalized skill
|
||||
* records that were written.
|
||||
*/
|
||||
addSkills(input: ProviderSkillCreateInput): Promise<ProviderSkill[]>;
|
||||
}
|
||||
|
||||
// ---------------------------
|
||||
|
||||
@@ -320,47 +320,6 @@ export type ProviderSkillListOptions = {
|
||||
workspacePath?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* One supporting file bundled with an uploaded provider skill.
|
||||
*
|
||||
* `relativePath` is resolved below the installed skill directory and must never
|
||||
* be absolute or contain traversal segments. Text files may use `utf8`; binary
|
||||
* scripts and assets should use `base64` so JSON transport does not corrupt
|
||||
* their bytes.
|
||||
*/
|
||||
export type ProviderSkillCreateFile = {
|
||||
relativePath: string;
|
||||
content: string;
|
||||
encoding: 'utf8' | 'base64';
|
||||
};
|
||||
|
||||
/**
|
||||
* One skill markdown payload submitted for provider-managed installation.
|
||||
*
|
||||
* `content` is the raw markdown body that will be written to `SKILL.md`.
|
||||
* `directoryName` lets callers control the target folder name explicitly when
|
||||
* they want stable filesystem paths that differ from the markdown front matter
|
||||
* `name` field. `fileName` is optional upload metadata used only as a final
|
||||
* fallback when no directory name or front matter name is present. `files`
|
||||
* carries scripts, references, and other files from a complete skill folder.
|
||||
*/
|
||||
export type ProviderSkillCreateEntry = {
|
||||
content: string;
|
||||
directoryName?: string;
|
||||
fileName?: string;
|
||||
files?: ProviderSkillCreateFile[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Shared input accepted by provider skill creation operations.
|
||||
*
|
||||
* The service layer batches multiple skill definitions in one request. Each
|
||||
* entry can contain only markdown or a complete skill folder.
|
||||
*/
|
||||
export type ProviderSkillCreateInput = {
|
||||
entries: ProviderSkillCreateEntry[];
|
||||
};
|
||||
|
||||
/**
|
||||
* Normalized skill record returned by provider skill adapters.
|
||||
*
|
||||
|
||||
@@ -957,25 +957,9 @@ export async function readProviderSkillMarkdownDefinition(
|
||||
skillPath: string,
|
||||
): Promise<{ name: string; description: string }> {
|
||||
const content = await readFile(skillPath, 'utf8');
|
||||
return readProviderSkillMarkdownDefinitionFromContent(
|
||||
content,
|
||||
path.basename(path.dirname(skillPath)),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the `name` and `description` fields from raw skill markdown content.
|
||||
*
|
||||
* This keeps filesystem discovery and newly uploaded skill creation aligned on
|
||||
* the same front matter parsing rules. `fallbackName` is used when the markdown
|
||||
* omits a `name` field so callers still get a stable, non-empty skill id.
|
||||
*/
|
||||
export function readProviderSkillMarkdownDefinitionFromContent(
|
||||
content: string,
|
||||
fallbackName: string,
|
||||
): { name: string; description: string } {
|
||||
const parsed = parseFrontMatter(content);
|
||||
const data = readObjectRecord(parsed.data) ?? {};
|
||||
const fallbackName = path.basename(path.dirname(skillPath));
|
||||
|
||||
return {
|
||||
name: readOptionalString(data.name) ?? fallbackName,
|
||||
|
||||
@@ -71,6 +71,7 @@ function AppContentInner() {
|
||||
setActiveTab,
|
||||
setSidebarOpen,
|
||||
setIsInputFocused,
|
||||
setShowSettings,
|
||||
openSettings,
|
||||
refreshProjectsSilently,
|
||||
registerOptimisticSession,
|
||||
@@ -120,12 +121,16 @@ function AppContentInner() {
|
||||
}, [refreshRunningSessions]);
|
||||
|
||||
useEffect(() => {
|
||||
if (processingSessions.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const interval = window.setInterval(() => {
|
||||
void refreshRunningSessions();
|
||||
}, 5000);
|
||||
|
||||
return () => window.clearInterval(interval);
|
||||
}, [refreshRunningSessions]);
|
||||
}, [processingSessions.size, refreshRunningSessions]);
|
||||
|
||||
usePaletteOpsRegister({
|
||||
openSettings,
|
||||
@@ -246,7 +251,7 @@ function AppContentInner() {
|
||||
onSessionEstablished={(targetSessionId, context) =>
|
||||
registerOptimisticSession({ sessionId: targetSessionId, ...context })
|
||||
}
|
||||
onShowSettings={openSettings}
|
||||
onShowSettings={() => setShowSettings(true)}
|
||||
externalMessageUpdate={externalMessageUpdate}
|
||||
newSessionTrigger={newSessionTrigger}
|
||||
/>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default as BrowserUsePanel } from './view/BrowserUsePanel';
|
||||
@@ -1,536 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
Bot,
|
||||
Clock3,
|
||||
Download,
|
||||
Expand,
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
MonitorPlay,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
Square,
|
||||
Trash2,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
import { Badge, Button } from '../../../shared/view/ui';
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
import type { SettingsMainTab } from '../../settings/types/types';
|
||||
|
||||
type BrowserUseStatus = {
|
||||
enabled: boolean;
|
||||
available: boolean;
|
||||
playwrightInstalled: boolean;
|
||||
chromiumInstalled: boolean;
|
||||
installInProgress: boolean;
|
||||
sessionCount: number;
|
||||
message: string;
|
||||
};
|
||||
|
||||
type BrowserUseSession = {
|
||||
id: string;
|
||||
status: 'ready' | 'stopped' | 'unavailable';
|
||||
url: string | null;
|
||||
title: string | null;
|
||||
screenshotDataUrl: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
lastAction: string | null;
|
||||
message: string | null;
|
||||
createdBy: 'agent';
|
||||
profileName: string | null;
|
||||
viewport: {
|
||||
width: number;
|
||||
height: number;
|
||||
} | null;
|
||||
cursor: {
|
||||
x: number;
|
||||
y: number;
|
||||
actor: 'agent';
|
||||
} | null;
|
||||
};
|
||||
|
||||
type BrowserUsePanelProps = {
|
||||
isVisible: boolean;
|
||||
onShowSettings?: (tab?: SettingsMainTab) => void;
|
||||
};
|
||||
|
||||
async function readJson<T>(response: Response): Promise<T> {
|
||||
const data = await response.json();
|
||||
if (!response.ok || data.success === false) {
|
||||
throw new Error(data.error || data.details || `Request failed (${response.status})`);
|
||||
}
|
||||
return data as T;
|
||||
}
|
||||
|
||||
function formatRelativeTime(value: string | null): string {
|
||||
if (!value) return 'Never';
|
||||
|
||||
const timestamp = Date.parse(value);
|
||||
if (!Number.isFinite(timestamp)) return 'Unknown';
|
||||
|
||||
const elapsedSeconds = Math.max(0, Math.round((Date.now() - timestamp) / 1000));
|
||||
if (elapsedSeconds < 10) return 'Just now';
|
||||
if (elapsedSeconds < 60) return `${elapsedSeconds}s ago`;
|
||||
const elapsedMinutes = Math.round(elapsedSeconds / 60);
|
||||
if (elapsedMinutes < 60) return `${elapsedMinutes}m ago`;
|
||||
const elapsedHours = Math.round(elapsedMinutes / 60);
|
||||
if (elapsedHours < 24) return `${elapsedHours}h ago`;
|
||||
return `${Math.round(elapsedHours / 24)}d ago`;
|
||||
}
|
||||
|
||||
function getDomain(url: string | null): string {
|
||||
if (!url) return 'No page loaded';
|
||||
|
||||
try {
|
||||
return new URL(url).hostname;
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
function formatAction(action: string | null): string {
|
||||
if (!action) return 'Waiting';
|
||||
return action.replace(/_/g, ' ').replace(/:/g, ': ');
|
||||
}
|
||||
|
||||
function getStatusTone(status: BrowserUseSession['status']): string {
|
||||
if (status === 'ready') {
|
||||
return 'border-primary/30 bg-primary/5 text-foreground';
|
||||
}
|
||||
if (status === 'stopped') {
|
||||
return 'border-border bg-muted text-muted-foreground';
|
||||
}
|
||||
return 'border-border bg-background text-muted-foreground';
|
||||
}
|
||||
|
||||
function getRuntimeTone(status: BrowserUseStatus | null, installing: boolean): string {
|
||||
if (!status?.enabled) return 'border-border bg-muted text-muted-foreground';
|
||||
if (status.available) return 'border-primary/30 bg-primary/5 text-foreground';
|
||||
if (status.installInProgress || installing) return 'border-primary/30 bg-primary/5 text-foreground';
|
||||
return 'border-border bg-background text-muted-foreground';
|
||||
}
|
||||
|
||||
function getStatusDot(status: BrowserUseSession['status']): string {
|
||||
if (status === 'ready') return 'bg-primary';
|
||||
if (status === 'stopped') return 'bg-muted-foreground/50';
|
||||
return 'bg-border';
|
||||
}
|
||||
|
||||
const PROMPTS = [
|
||||
'Use Browser to inspect the checkout flow and report any broken UI states.',
|
||||
'Open <url> with Browser, interact with the page, and summarize what changed after each step.',
|
||||
];
|
||||
|
||||
export default function BrowserUsePanel({ isVisible, onShowSettings }: BrowserUsePanelProps) {
|
||||
const [status, setStatus] = useState<BrowserUseStatus | null>(null);
|
||||
const [sessions, setSessions] = useState<BrowserUseSession[]>([]);
|
||||
const [selectedSessionId, setSelectedSessionId] = useState<string | null>(null);
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [isBusy, setIsBusy] = useState(false);
|
||||
const [isInstalling, setIsInstalling] = useState(false);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const selectedSession = useMemo(
|
||||
() => sessions.find((session) => session.id === selectedSessionId) || sessions[0] || null,
|
||||
[selectedSessionId, sessions],
|
||||
);
|
||||
|
||||
const activeSessions = sessions.filter((session) => session.status === 'ready');
|
||||
const needsBrowserBinaries = Boolean(status?.enabled && (!status.playwrightInstalled || !status.chromiumInstalled));
|
||||
const runtimeLabel = !status?.enabled
|
||||
? 'Disabled'
|
||||
: status.available
|
||||
? 'Ready'
|
||||
: status.installInProgress || isInstalling
|
||||
? 'Installing'
|
||||
: 'Setup required';
|
||||
|
||||
const cursorStyle = selectedSession?.cursor && selectedSession.viewport
|
||||
? {
|
||||
left: `${(selectedSession.cursor.x / selectedSession.viewport.width) * 100}%`,
|
||||
top: `${(selectedSession.cursor.y / selectedSession.viewport.height) * 100}%`,
|
||||
}
|
||||
: null;
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
try {
|
||||
const [statusResponse, sessionsResponse] = await Promise.all([
|
||||
authenticatedFetch('/api/browser-use/status'),
|
||||
authenticatedFetch('/api/browser-use/sessions'),
|
||||
]);
|
||||
const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
|
||||
const sessionsData = await readJson<{ data: { sessions: BrowserUseSession[] } }>(sessionsResponse);
|
||||
const nextSessions = sessionsData.data.sessions;
|
||||
setStatus(statusData.data);
|
||||
setSessions(nextSessions);
|
||||
setSelectedSessionId((current) => (
|
||||
current && nextSessions.some((session) => session.id === current)
|
||||
? current
|
||||
: nextSessions[0]?.id || null
|
||||
));
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load Browser');
|
||||
} finally {
|
||||
setIsRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisible) return;
|
||||
void refresh();
|
||||
}, [isVisible, refresh]);
|
||||
|
||||
const runAction = useCallback(async (action: () => Promise<void>) => {
|
||||
setIsBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
await action();
|
||||
await refresh();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Browser action failed');
|
||||
} finally {
|
||||
setIsBusy(false);
|
||||
}
|
||||
}, [refresh]);
|
||||
|
||||
const stopSession = () => runAction(async () => {
|
||||
if (!selectedSession) return;
|
||||
const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}/stop`, { method: 'POST' });
|
||||
await readJson(response);
|
||||
});
|
||||
|
||||
const deleteSession = () => runAction(async () => {
|
||||
if (!selectedSession) return;
|
||||
const response = await authenticatedFetch(`/api/browser-use/sessions/${selectedSession.id}`, { method: 'DELETE' });
|
||||
await readJson(response);
|
||||
setIsFullscreen(false);
|
||||
});
|
||||
|
||||
const installBrowserBinaries = () => runAction(async () => {
|
||||
setIsInstalling(true);
|
||||
try {
|
||||
const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
|
||||
await readJson(response);
|
||||
} finally {
|
||||
setIsInstalling(false);
|
||||
}
|
||||
});
|
||||
|
||||
const renderSessionItem = (session: BrowserUseSession) => {
|
||||
const isSelected = selectedSession?.id === session.id;
|
||||
return (
|
||||
<button
|
||||
key={session.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedSessionId(session.id)}
|
||||
className={cn(
|
||||
'group w-full rounded-md border px-3 py-2.5 text-left transition-colors',
|
||||
isSelected
|
||||
? 'border-primary/50 bg-primary/10 text-foreground'
|
||||
: 'border-border/60 bg-card/30 text-muted-foreground hover:bg-muted/50',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className={cn('h-1.5 w-1.5 shrink-0 rounded-full', getStatusDot(session.status))} />
|
||||
<div className="truncate text-sm font-medium">{session.title || getDomain(session.url)}</div>
|
||||
</div>
|
||||
<div className="mt-1 truncate pl-3.5 text-xs text-muted-foreground">{getDomain(session.url)}</div>
|
||||
</div>
|
||||
<Badge variant="outline" className="shrink-0 border-border bg-background text-[10px] text-muted-foreground">
|
||||
{session.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-1.5 text-[11px] text-muted-foreground">
|
||||
<Clock3 className="h-3 w-3" />
|
||||
<span>{formatRelativeTime(session.updatedAt)}</span>
|
||||
<span className="truncate">- {formatAction(session.lastAction)}</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const renderEmptyState = () => (
|
||||
<div className="flex min-h-0 flex-1 items-center justify-center p-6">
|
||||
<div className="w-full max-w-2xl rounded-md border border-border bg-card/40 p-5 shadow-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-background">
|
||||
<MonitorPlay className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-semibold text-foreground">
|
||||
{status?.enabled ? 'No browser sessions yet' : 'Browser is disabled'}
|
||||
</div>
|
||||
<p className="mt-1 max-w-xl text-sm leading-6 text-muted-foreground">
|
||||
{status?.enabled
|
||||
? 'Agent browser sessions appear here while an AI task is using Browser.'
|
||||
: 'Enable Browser in settings to let agents open monitored browser sessions.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{needsBrowserBinaries && (
|
||||
<div className="mt-4 rounded-md border border-border bg-muted/30 p-3">
|
||||
<div className="text-sm font-medium text-foreground">Runtime setup required</div>
|
||||
<p className="mt-1 text-sm text-muted-foreground">{status?.message}</p>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
className="mt-3"
|
||||
onClick={installBrowserBinaries}
|
||||
disabled={isBusy || isInstalling || status?.installInProgress}
|
||||
>
|
||||
{isInstalling || status?.installInProgress ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
{isInstalling || status?.installInProgress ? 'Installing...' : 'Install Runtime'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-5 grid gap-2 sm:grid-cols-2">
|
||||
{PROMPTS.map((prompt) => (
|
||||
<div key={prompt} className="rounded-md border border-border/70 bg-background/70 p-3">
|
||||
<div className="mb-2 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<Bot className="h-3.5 w-3.5" />
|
||||
Prompt
|
||||
</div>
|
||||
<p className="text-sm leading-6 text-foreground">{prompt}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderBrowserSurface = (fullscreen = false) => (
|
||||
<div className={cn('flex flex-1 items-center justify-center bg-neutral-950', fullscreen ? 'min-h-[80vh]' : 'min-h-[420px]')}>
|
||||
{selectedSession?.screenshotDataUrl ? (
|
||||
<div className="relative inline-block max-h-full">
|
||||
<img
|
||||
src={selectedSession.screenshotDataUrl}
|
||||
alt="Browser session screenshot"
|
||||
className={fullscreen ? 'block max-h-[80vh] w-auto max-w-full object-contain' : 'block max-h-[72vh] w-auto max-w-full object-contain'}
|
||||
/>
|
||||
{cursorStyle && (
|
||||
<div
|
||||
className="pointer-events-none absolute h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white/90 bg-primary/80 shadow-[0_0_0_6px_hsl(var(--primary)/0.18)]"
|
||||
style={cursorStyle}
|
||||
>
|
||||
<div className="absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-6 text-center">
|
||||
<MonitorPlay className="mx-auto h-9 w-9 text-neutral-500" />
|
||||
<div className="mt-3 text-sm font-medium text-neutral-100">{selectedSession?.message || 'Waiting for screenshot'}</div>
|
||||
<p className="mt-1 text-xs text-neutral-400">The next agent browser snapshot will render here.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col bg-background">
|
||||
<div className="flex items-center justify-between gap-3 border-b border-border/60 px-4 py-3">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<MonitorPlay className="h-4 w-4 text-primary" />
|
||||
<h3 className="text-sm font-semibold text-foreground">Browser</h3>
|
||||
<Badge variant="outline" className={cn('text-[10px]', getRuntimeTone(status, isInstalling))}>
|
||||
{runtimeLabel}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="mt-0.5 text-xs text-muted-foreground">Monitor browser sessions opened by AI agents.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{onShowSettings && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => onShowSettings('browser')}
|
||||
title="Open Browser settings"
|
||||
aria-label="Open Browser settings"
|
||||
>
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={() => void refresh()}
|
||||
disabled={isRefreshing || isBusy}
|
||||
title="Refresh browser sessions"
|
||||
aria-label="Refresh browser sessions"
|
||||
>
|
||||
<RefreshCw className={cn('h-3.5 w-3.5', isRefreshing && 'animate-spin')} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="border-b border-destructive/20 bg-destructive/10 px-4 py-2 text-sm text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sessions.length > 0 && (
|
||||
<div className="border-b border-border/60 bg-muted/20 px-3 py-2 lg:hidden">
|
||||
<div className="flex gap-2 overflow-x-auto">
|
||||
{sessions.map((session) => (
|
||||
<button
|
||||
key={session.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedSessionId(session.id)}
|
||||
className={cn(
|
||||
'flex min-w-[180px] items-center gap-2 rounded-md border px-2.5 py-2 text-left',
|
||||
selectedSession?.id === session.id
|
||||
? 'border-primary/40 bg-primary/5'
|
||||
: 'border-border bg-background',
|
||||
)}
|
||||
>
|
||||
<span className={cn('h-1.5 w-1.5 shrink-0 rounded-full', getStatusDot(session.status))} />
|
||||
<span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
|
||||
{session.title || getDomain(session.url)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_320px]">
|
||||
<main className="flex min-h-0 flex-col overflow-hidden">
|
||||
<div className="flex items-center justify-between gap-3 border-b border-border/60 bg-muted/20 px-4 py-2.5 text-xs text-muted-foreground">
|
||||
<div className="min-w-0 truncate">
|
||||
{activeSessions.length} active
|
||||
<span className="px-1.5">/</span>
|
||||
{sessions.length} total
|
||||
</div>
|
||||
<div className="min-w-0 truncate">
|
||||
Updated {formatRelativeTime(selectedSession?.updatedAt || null)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sessions.length === 0 ? (
|
||||
renderEmptyState()
|
||||
) : (
|
||||
<div className="min-h-0 flex-1 overflow-auto bg-muted/20 p-4">
|
||||
<div className="mx-auto flex min-h-[500px] max-w-7xl flex-col overflow-hidden rounded-md border border-border bg-background shadow-sm">
|
||||
<div className="flex flex-wrap items-center gap-2 border-b border-border/60 px-3 py-2">
|
||||
<Badge variant="outline" className={selectedSession ? cn('text-[10px]', getStatusTone(selectedSession.status)) : 'text-[10px]'}>
|
||||
{selectedSession?.status || 'empty'}
|
||||
</Badge>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-medium text-foreground">
|
||||
{selectedSession?.title || getDomain(selectedSession?.url || null)}
|
||||
</div>
|
||||
<div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<ExternalLink className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">{selectedSession?.url || 'No page loaded'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden text-xs text-muted-foreground md:block">
|
||||
{formatAction(selectedSession?.lastAction || null)}
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setIsFullscreen(true)} disabled={!selectedSession?.screenshotDataUrl} title="Full screen" aria-label="Full screen">
|
||||
<Expand className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 lg:hidden" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'} title="Stop session" aria-label="Stop session">
|
||||
<Square className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-8 w-8 p-0 lg:hidden" onClick={deleteSession} disabled={isBusy || !selectedSession} title="Delete session" aria-label="Delete session">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{renderBrowserSurface()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<aside className="hidden min-h-0 flex-col border-l border-border/60 bg-background lg:flex">
|
||||
<div className="border-b border-border/60 px-4 py-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-foreground">Sessions</div>
|
||||
<div className="mt-0.5 text-xs text-muted-foreground">{sessions.length} total</div>
|
||||
</div>
|
||||
<Badge variant="outline" className="text-[10px]">{activeSessions.length} active</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
||||
{sessions.length > 0 ? (
|
||||
<div className="space-y-2">{sessions.map(renderSessionItem)}</div>
|
||||
) : (
|
||||
<div className="rounded-md border border-dashed border-border/70 px-3 py-8 text-center text-xs text-muted-foreground">
|
||||
No agent browser sessions.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border/60 p-3">
|
||||
<div className="rounded-md border border-border/70 bg-muted/30 p-3">
|
||||
<div className="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
<Bot className="h-3.5 w-3.5" />
|
||||
Selected
|
||||
</div>
|
||||
<div className="mt-3 space-y-2 text-xs text-muted-foreground">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span>Status</span>
|
||||
<span className="font-medium text-foreground">{selectedSession?.status || 'None'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span>Last action</span>
|
||||
<span className="truncate font-medium text-foreground">{formatAction(selectedSession?.lastAction || null)}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span>Profile</span>
|
||||
<span className="truncate font-medium text-foreground">{selectedSession?.profileName || 'Temporary'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-2 gap-2">
|
||||
<Button variant="outline" size="sm" onClick={stopSession} disabled={isBusy || !selectedSession || selectedSession.status !== 'ready'}>
|
||||
<Square className="h-4 w-4" />
|
||||
Stop
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={deleteSession} disabled={isBusy || !selectedSession}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{isFullscreen && selectedSession && (
|
||||
<div className="fixed inset-0 z-50 bg-black/90 p-6">
|
||||
<div className="flex h-full flex-col rounded-md border border-white/10 bg-black">
|
||||
<div className="flex items-center justify-between border-b border-white/10 px-4 py-3 text-sm text-white/80">
|
||||
<div className="min-w-0 truncate">{selectedSession.title || selectedSession.url || 'Browser session'}</div>
|
||||
<Button variant="outline" size="sm" onClick={() => setIsFullscreen(false)}>
|
||||
<X className="h-4 w-4" />
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
{renderBrowserSurface(true)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -202,9 +202,7 @@ export function useChatRealtimeHandlers({
|
||||
// indicator derives from the processing map, so deleting the entry
|
||||
// hides it immediately and atomically.
|
||||
onSessionIdle?.(sid);
|
||||
if (sid === activeViewSessionId) {
|
||||
setPendingPermissionRequests([]);
|
||||
}
|
||||
|
||||
if (msg.aborted) {
|
||||
// Abort was requested — the complete event confirms it. No
|
||||
@@ -234,7 +232,6 @@ export function useChatRealtimeHandlers({
|
||||
|
||||
case 'permission_request': {
|
||||
if (!msg.requestId) break;
|
||||
if (sid === activeViewSessionId) {
|
||||
setPendingPermissionRequests((prev) => {
|
||||
if (prev.some((r: PendingPermissionRequest) => r.requestId === msg.requestId)) return prev;
|
||||
return [...prev, {
|
||||
@@ -246,7 +243,6 @@ export function useChatRealtimeHandlers({
|
||||
receivedAt: new Date(),
|
||||
}];
|
||||
});
|
||||
}
|
||||
if (sid) {
|
||||
onSessionProcessing?.(sid);
|
||||
}
|
||||
@@ -254,7 +250,7 @@ export function useChatRealtimeHandlers({
|
||||
}
|
||||
|
||||
case 'permission_cancelled': {
|
||||
if (msg.requestId && sid === activeViewSessionId) {
|
||||
if (msg.requestId) {
|
||||
setPendingPermissionRequests((prev) => prev.filter((r: PendingPermissionRequest) => r.requestId !== msg.requestId));
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -5,7 +5,7 @@ import { authenticatedFetch } from '../../../utils/api';
|
||||
import type { MarkSessionIdle, SessionActivityMap } from '../../../hooks/useSessionProtection';
|
||||
import type { Project, ProjectSession, LLMProvider } from '../../../types/app';
|
||||
import type { SessionStore, NormalizedMessage } from '../../../stores/useSessionStore';
|
||||
import type { ChatMessage } from '../types/types';
|
||||
import type { ChatMessage, Provider } from '../types/types';
|
||||
import { createCachedDiffCalculator, type DiffCalculator } from '../utils/messageTransforms';
|
||||
|
||||
import { normalizedToChatMessages } from './useChatMessages';
|
||||
@@ -328,12 +328,18 @@ export function useChatSessionState({
|
||||
if (allMessagesLoadedRef.current) return false;
|
||||
if (!hasMoreMessages || !selectedSession || !selectedProject) return false;
|
||||
|
||||
const sessionProvider = selectedSession.__provider || 'claude';
|
||||
|
||||
isLoadingMoreRef.current = true;
|
||||
const previousScrollHeight = container.scrollHeight;
|
||||
const previousScrollTop = container.scrollTop;
|
||||
|
||||
try {
|
||||
const slot = await sessionStore.fetchMore(selectedSession.id, {
|
||||
provider: sessionProvider as LLMProvider,
|
||||
// DB-assigned projectId replaces the legacy folder-derived name.
|
||||
projectId: selectedProject.projectId,
|
||||
projectPath: selectedProject.fullPath || selectedProject.path || '',
|
||||
limit: MESSAGES_PER_PAGE,
|
||||
});
|
||||
if (!slot || slot.serverMessages.length === 0) return false;
|
||||
@@ -452,31 +458,15 @@ export function useChatSessionState({
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedSessionId = selectedSession.id;
|
||||
const sessionKey = `${selectedSessionId}:${selectedProject.projectId}`;
|
||||
|
||||
const subscribeToSelectedSession = () => {
|
||||
if (!ws) {
|
||||
return;
|
||||
}
|
||||
|
||||
statusCheckSentAtRef.current.set(selectedSessionId, Date.now());
|
||||
sendMessage({
|
||||
type: 'chat.subscribe',
|
||||
sessions: [{
|
||||
sessionId: selectedSessionId,
|
||||
lastSeq: lastSeqRef.current.get(selectedSessionId) ?? 0,
|
||||
}],
|
||||
});
|
||||
};
|
||||
const provider = (selectedSession.__provider || localStorage.getItem('selected-provider') as Provider) || 'claude';
|
||||
const sessionKey = `${selectedSession.id}:${selectedProject.projectId}:${provider}`;
|
||||
|
||||
// Skip if already loaded and fresh
|
||||
if (lastLoadedSessionKeyRef.current === sessionKey && sessionStore.has(selectedSessionId) && !sessionStore.isStale(selectedSessionId)) {
|
||||
subscribeToSelectedSession();
|
||||
if (lastLoadedSessionKeyRef.current === sessionKey && sessionStore.has(selectedSession.id) && !sessionStore.isStale(selectedSession.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sessionChanged = currentSessionId !== null && currentSessionId !== selectedSessionId;
|
||||
const sessionChanged = currentSessionId !== null && currentSessionId !== selectedSession.id;
|
||||
if (sessionChanged) {
|
||||
resetStreamingState();
|
||||
}
|
||||
@@ -499,20 +489,32 @@ export function useChatSessionState({
|
||||
setTokenBudget(null);
|
||||
}
|
||||
|
||||
setCurrentSessionId(selectedSessionId);
|
||||
setCurrentSessionId(selectedSession.id);
|
||||
|
||||
// Subscribe to the session's live run (if any): the ack reconciles the
|
||||
// processing indicator, re-attaches a mid-flight stream to this socket,
|
||||
// and replays any live events missed since `lastSeq`. Recording the send
|
||||
// time lets the ack handler discard idle acks that a newer request has
|
||||
// since outdated.
|
||||
subscribeToSelectedSession();
|
||||
if (ws) {
|
||||
statusCheckSentAtRef.current.set(selectedSession.id, Date.now());
|
||||
sendMessage({
|
||||
type: 'chat.subscribe',
|
||||
sessions: [{
|
||||
sessionId: selectedSession.id,
|
||||
lastSeq: lastSeqRef.current.get(selectedSession.id) ?? 0,
|
||||
}],
|
||||
});
|
||||
}
|
||||
|
||||
lastLoadedSessionKeyRef.current = sessionKey;
|
||||
|
||||
// Fetch from server → store updates → chatMessages re-derives automatically
|
||||
setIsLoadingSessionMessages(true);
|
||||
sessionStore.fetchFromServer(selectedSessionId, {
|
||||
sessionStore.fetchFromServer(selectedSession.id, {
|
||||
provider: (selectedSession.__provider || provider) as LLMProvider,
|
||||
projectId: selectedProject.projectId,
|
||||
projectPath: selectedProject.fullPath || selectedProject.path || '',
|
||||
limit: MESSAGES_PER_PAGE,
|
||||
offset: 0,
|
||||
}).then(slot => {
|
||||
@@ -542,9 +544,15 @@ export function useChatSessionState({
|
||||
|
||||
const reloadExternalMessages = async () => {
|
||||
try {
|
||||
const provider = (localStorage.getItem('selected-provider') as Provider) || 'claude';
|
||||
|
||||
// Skip store refresh during active streaming
|
||||
if (!isProcessing) {
|
||||
await sessionStore.refreshFromServer(selectedSession.id);
|
||||
await sessionStore.refreshFromServer(selectedSession.id, {
|
||||
provider: (selectedSession.__provider || provider) as LLMProvider,
|
||||
projectId: selectedProject.projectId,
|
||||
projectPath: selectedProject.fullPath || selectedProject.path || '',
|
||||
});
|
||||
|
||||
if (Boolean(autoScrollToBottom) && isNearBottom()) {
|
||||
setTimeout(() => scrollToBottom(), 200);
|
||||
@@ -590,9 +598,13 @@ export function useChatSessionState({
|
||||
|
||||
const scrollToTarget = async () => {
|
||||
if (!allMessagesLoadedRef.current && selectedSession && selectedProject) {
|
||||
const sessionProvider = selectedSession.__provider || 'claude';
|
||||
try {
|
||||
// Load all messages into the store for search navigation
|
||||
const slot = await sessionStore.fetchFromServer(selectedSession.id, {
|
||||
provider: sessionProvider as LLMProvider,
|
||||
projectId: selectedProject.projectId,
|
||||
projectPath: selectedProject.fullPath || selectedProject.path || '',
|
||||
limit: null,
|
||||
offset: 0,
|
||||
});
|
||||
@@ -666,10 +678,17 @@ export function useChatSessionState({
|
||||
setTokenBudget(null);
|
||||
return;
|
||||
}
|
||||
const sessionProvider = selectedSession.__provider || 'claude';
|
||||
if (sessionProvider !== 'claude' && sessionProvider !== 'codex' && sessionProvider !== 'gemini' && sessionProvider !== 'opencode') {
|
||||
setTokenBudget(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const fetchInitialTokenUsage = async () => {
|
||||
try {
|
||||
// The backend resolves the provider from the indexed session row.
|
||||
const url = `/api/projects/${selectedProject.projectId}/sessions/${selectedSession.id}/token-usage`;
|
||||
// Token usage endpoint is now keyed by the DB projectId.
|
||||
const params = new URLSearchParams({ provider: sessionProvider });
|
||||
const url = `/api/projects/${selectedProject.projectId}/sessions/${selectedSession.id}/token-usage?${params.toString()}`;
|
||||
const response = await authenticatedFetch(url);
|
||||
if (response.ok) {
|
||||
setTokenBudget(await response.json());
|
||||
@@ -681,7 +700,7 @@ export function useChatSessionState({
|
||||
}
|
||||
};
|
||||
fetchInitialTokenUsage();
|
||||
}, [selectedProject, selectedSession?.id]);
|
||||
}, [selectedProject, selectedSession?.id, selectedSession?.__provider]);
|
||||
|
||||
const visibleMessages = useMemo(() => {
|
||||
if (chatMessages.length <= visibleMessageCount) return chatMessages;
|
||||
@@ -741,6 +760,8 @@ export function useChatSessionState({
|
||||
const loadAllMessages = useCallback(async () => {
|
||||
if (!selectedSession || !selectedProject) return;
|
||||
if (isLoadingAllMessages) return;
|
||||
const sessionProvider = selectedSession.__provider || 'claude';
|
||||
|
||||
const requestSessionId = selectedSession.id;
|
||||
allMessagesLoadedRef.current = true;
|
||||
isLoadingMoreRef.current = true;
|
||||
@@ -753,6 +774,9 @@ export function useChatSessionState({
|
||||
|
||||
try {
|
||||
const slot = await sessionStore.fetchFromServer(requestSessionId, {
|
||||
provider: sessionProvider as LLMProvider,
|
||||
projectId: selectedProject.projectId,
|
||||
projectPath: selectedProject.fullPath || selectedProject.path || '',
|
||||
limit: null,
|
||||
offset: 0,
|
||||
});
|
||||
|
||||
@@ -11,7 +11,7 @@ export function decodeHtmlEntities(text: string) {
|
||||
export function normalizeInlineCodeFences(text: string) {
|
||||
if (!text || typeof text !== 'string') return text;
|
||||
try {
|
||||
return text.replace(/```[ \t]*([^\n\r]+?)[ \t]*```/g, '`$1`');
|
||||
return text.replace(/```\s*([^\n\r]+?)\s*```/g, '`$1`');
|
||||
} catch {
|
||||
return text;
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useWebSocket } from '../../../contexts/WebSocketContext';
|
||||
import PermissionContext from '../../../contexts/PermissionContext';
|
||||
import { QuickSettingsPanel } from '../../quick-settings-panel';
|
||||
import type { ChatInterfaceProps, Provider } from '../types/types';
|
||||
import type { LLMProvider } from '../../../types/app';
|
||||
import { useChatProviderState } from '../hooks/useChatProviderState';
|
||||
import { useChatSessionState } from '../hooks/useChatSessionState';
|
||||
import { useChatRealtimeHandlers } from '../hooks/useChatRealtimeHandlers';
|
||||
@@ -222,7 +223,16 @@ function ChatInterface({
|
||||
// missed live events, and re-attaches a still-running stream to this socket.
|
||||
const handleWebSocketReconnect = useCallback(async () => {
|
||||
if (!selectedProject || !selectedSession) return;
|
||||
await sessionStore.refreshFromServer(selectedSession.id);
|
||||
const providerVal =
|
||||
selectedSession.__provider
|
||||
|| (localStorage.getItem('selected-provider') as LLMProvider)
|
||||
|| 'claude';
|
||||
await sessionStore.refreshFromServer(selectedSession.id, {
|
||||
provider: providerVal as LLMProvider,
|
||||
// Use DB projectId; legacy folder-derived projectName is no longer accepted here.
|
||||
projectId: selectedProject.projectId,
|
||||
projectPath: selectedProject.fullPath || selectedProject.path || '',
|
||||
});
|
||||
statusCheckSentAtRef.current.set(selectedSession.id, Date.now());
|
||||
sendMessage({
|
||||
type: 'chat.subscribe',
|
||||
@@ -315,7 +325,6 @@ function ChatInterface({
|
||||
onWheel={handleScroll}
|
||||
onTouchMove={handleScroll}
|
||||
isLoadingSessionMessages={isLoadingSessionMessages}
|
||||
isProcessing={isProcessing}
|
||||
chatMessages={chatMessages}
|
||||
selectedSession={selectedSession}
|
||||
currentSessionId={currentSessionId}
|
||||
|
||||
@@ -19,8 +19,6 @@ interface ChatMessagesPaneProps {
|
||||
onWheel: () => void;
|
||||
onTouchMove: () => void;
|
||||
isLoadingSessionMessages: boolean;
|
||||
/** True while the viewed session has an active provider run in flight. */
|
||||
isProcessing?: boolean;
|
||||
chatMessages: ChatMessage[];
|
||||
selectedSession: ProjectSession | null;
|
||||
currentSessionId: string | null;
|
||||
@@ -70,7 +68,6 @@ export default function ChatMessagesPane({
|
||||
onWheel,
|
||||
onTouchMove,
|
||||
isLoadingSessionMessages,
|
||||
isProcessing = false,
|
||||
chatMessages,
|
||||
selectedSession,
|
||||
currentSessionId,
|
||||
@@ -150,7 +147,7 @@ export default function ChatMessagesPane({
|
||||
onTouchMove={onTouchMove}
|
||||
className="relative flex-1 space-y-3 overflow-y-auto overflow-x-hidden px-0 py-3 sm:space-y-4 sm:p-4"
|
||||
>
|
||||
{(isLoadingSessionMessages || isProcessing) && chatMessages.length === 0 ? (
|
||||
{isLoadingSessionMessages && chatMessages.length === 0 ? (
|
||||
<div className="mt-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="h-4 w-4 animate-spin rounded-full border-b-2 border-gray-400" />
|
||||
|
||||
@@ -11,6 +11,10 @@ export type SessionResult = {
|
||||
|
||||
interface SessionsResponse {
|
||||
sessions?: ProjectSession[];
|
||||
cursorSessions?: ProjectSession[];
|
||||
codexSessions?: ProjectSession[];
|
||||
geminiSessions?: ProjectSession[];
|
||||
opencodeSessions?: ProjectSession[];
|
||||
}
|
||||
|
||||
export function useSessionsSource(projectId: string | undefined, enabled: boolean) {
|
||||
@@ -25,10 +29,17 @@ export function useSessionsSource(projectId: string | undefined, enabled: boolea
|
||||
);
|
||||
},
|
||||
parse: (data) => {
|
||||
return (data.sessions ?? []).map<SessionResult>((s) => ({
|
||||
const all: ProjectSession[] = [
|
||||
...(data.sessions ?? []),
|
||||
...(data.cursorSessions ?? []),
|
||||
...(data.codexSessions ?? []),
|
||||
...(data.geminiSessions ?? []),
|
||||
...(data.opencodeSessions ?? []),
|
||||
];
|
||||
return all.map<SessionResult>((s) => ({
|
||||
id: s.id,
|
||||
label: (s.title || s.summary || s.name || s.id) as string,
|
||||
provider: (s.__provider || s.provider) as LLMProvider | undefined,
|
||||
provider: s.__provider,
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,27 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
type ClaudeLogoProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const ClaudeLogo = ({ className = 'w-5 h-5' }: ClaudeLogoProps) => (
|
||||
<svg
|
||||
viewBox="0 0 512 509.64"
|
||||
role="img"
|
||||
aria-label="Claude"
|
||||
className={className}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill="#D77655"
|
||||
d="M115.612 0h280.775C459.974 0 512 52.026 512 115.612v278.415c0 63.587-52.026 115.612-115.613 115.612H115.612C52.026 509.639 0 457.614 0 394.027V115.612C0 52.026 52.026 0 115.612 0z"
|
||||
/>
|
||||
<path
|
||||
fill="#FCF2EE"
|
||||
fillRule="nonzero"
|
||||
d="M142.27 316.619l73.655-41.326 1.238-3.589-1.238-1.996-3.589-.001-12.31-.759-42.084-1.138-36.498-1.516-35.361-1.896-8.897-1.895-8.34-10.995.859-5.484 7.482-5.03 10.717.935 23.683 1.617 35.537 2.452 25.782 1.517 38.193 3.968h6.064l.86-2.451-2.073-1.517-1.618-1.517-36.776-24.922-39.81-26.338-20.852-15.166-11.273-7.683-5.687-7.204-2.451-15.721 10.237-11.273 13.75.935 3.513.936 13.928 10.716 29.749 23.027 38.848 28.612 5.687 4.727 2.275-1.617.278-1.138-2.553-4.271-21.13-38.193-22.546-38.848-10.035-16.101-2.654-9.655c-.935-3.968-1.617-7.304-1.617-11.374l11.652-15.823 6.445-2.073 15.545 2.073 6.547 5.687 9.655 22.092 15.646 34.78 24.265 47.291 7.103 14.028 3.791 12.992 1.416 3.968 2.449-.001v-2.275l1.997-26.641 3.69-32.707 3.589-42.084 1.239-11.854 5.863-14.206 11.652-7.683 9.099 4.348 7.482 10.716-1.036 6.926-4.449 28.915-8.72 45.294-5.687 30.331h3.313l3.792-3.791 15.342-20.372 25.782-32.227 11.374-12.789 13.27-14.129 8.517-6.724 16.1-.001 11.854 17.617-5.307 18.199-16.581 21.029-13.75 17.819-19.716 26.54-12.309 21.231 1.138 1.694 2.932-.278 44.536-9.479 24.062-4.347 28.714-4.928 12.992 6.066 1.416 6.167-5.106 12.613-30.71 7.583-36.018 7.204-53.636 12.689-.657.48.758.935 24.164 2.275 10.337.556h25.301l47.114 3.514 12.309 8.139 7.381 9.959-1.238 7.583-18.957 9.655-25.579-6.066-59.702-14.205-20.474-5.106-2.83-.001v1.694l17.061 16.682 31.266 28.233 39.152 36.397 1.997 8.999-5.03 7.102-5.307-.758-34.401-25.883-13.27-11.651-30.053-25.302-1.996-.001v2.654l6.926 10.136 36.574 54.975 1.895 16.859-2.653 5.485-9.479 3.311-10.414-1.895-21.408-30.054-22.092-33.844-17.819-30.331-2.173 1.238-10.515 113.261-4.929 5.788-11.374 4.348-9.478-7.204-5.03-11.652 5.03-23.027 6.066-30.052 4.928-23.886 4.449-29.674 2.654-9.858-.177-.657-2.173.278-22.37 30.71-34.021 45.977-26.919 28.815-6.445 2.553-11.173-5.789 1.037-10.337 6.243-9.2 37.257-47.392 22.47-29.371 14.508-16.961-.101-2.451h-.859l-98.954 64.251-17.618 2.275-7.583-7.103.936-11.652 3.589-3.791 29.749-20.474-.101.102.024.101z"
|
||||
/>
|
||||
</svg>
|
||||
const ClaudeLogo = ({ className = 'w-5 h-5' }: ClaudeLogoProps) => {
|
||||
return (
|
||||
<img src="/icons/claude-ai-icon.svg" alt="Claude" className={className} />
|
||||
);
|
||||
};
|
||||
|
||||
export default ClaudeLogo;
|
||||
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
|
||||
type CodexLogoProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const CodexLogo = ({ className = 'w-5 h-5' }: CodexLogoProps) => (
|
||||
<svg
|
||||
viewBox="100 100 520 520"
|
||||
role="img"
|
||||
aria-label="Codex"
|
||||
const CodexLogo = ({ className = 'w-5 h-5' }: CodexLogoProps) => {
|
||||
const { isDarkMode } = useTheme();
|
||||
|
||||
return (
|
||||
<img
|
||||
src={isDarkMode ? "/icons/codex-white.svg" : "/icons/codex.svg"}
|
||||
alt="Codex"
|
||||
className={className}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M304.246 294.611V249.028C304.246 245.189 305.687 242.309 309.044 240.392L400.692 187.612C413.167 180.415 428.042 177.058 443.394 177.058C500.971 177.058 537.44 221.682 537.44 269.182C537.44 272.54 537.44 276.379 536.959 280.218L441.954 224.558C436.197 221.201 430.437 221.201 424.68 224.558L304.246 294.611ZM518.245 472.145V363.224C518.245 356.505 515.364 351.707 509.608 348.349L389.174 278.296L428.519 255.743C431.877 253.826 434.757 253.826 438.115 255.743L529.762 308.523C556.154 323.879 573.905 356.505 573.905 388.171C573.905 424.636 552.315 458.225 518.245 472.141V472.145ZM275.937 376.182L236.592 353.152C233.235 351.235 231.794 348.354 231.794 344.515V238.956C231.794 187.617 271.139 148.749 324.4 148.749C344.555 148.749 363.264 155.468 379.102 167.463L284.578 222.164C278.822 225.521 275.942 230.319 275.942 237.039V376.186L275.937 376.182ZM360.626 425.122L304.246 393.455V326.283L360.626 294.616L417.002 326.283V393.455L360.626 425.122ZM396.852 570.989C376.698 570.989 357.989 564.27 342.151 552.276L436.674 497.574C442.431 494.217 445.311 489.419 445.311 482.699V343.552L485.138 366.582C488.495 368.499 489.936 371.379 489.936 375.219V480.778C489.936 532.117 450.109 570.985 396.852 570.985V570.989ZM283.134 463.99L191.486 411.211C165.094 395.854 147.343 363.229 147.343 331.562C147.343 294.616 169.415 261.509 203.48 247.593V356.991C203.48 363.71 206.361 368.508 212.117 371.866L332.074 441.437L292.729 463.99C289.372 465.907 286.491 465.907 283.134 463.99ZM277.859 542.68C223.639 542.68 183.813 501.895 183.813 451.514C183.813 447.675 184.294 443.836 184.771 439.997L279.295 494.698C285.051 498.056 290.812 498.056 296.568 494.698L417.002 425.127V470.71C417.002 474.549 415.562 477.429 412.204 479.346L320.557 532.126C308.081 539.323 293.206 542.68 277.854 542.68H277.859ZM396.852 599.776C454.911 599.776 503.37 558.513 514.41 503.812C568.149 489.896 602.696 439.515 602.696 388.176C602.696 354.587 588.303 321.962 562.392 298.45C564.791 288.373 566.231 278.296 566.231 268.224C566.231 199.611 510.571 148.267 446.274 148.267C433.322 148.267 420.846 150.184 408.37 154.505C386.775 133.392 357.026 119.958 324.4 119.958C266.342 119.958 217.883 161.22 206.843 215.921C153.104 229.837 118.557 280.218 118.557 331.557C118.557 365.146 132.95 397.771 158.861 421.283C156.462 431.36 155.022 441.437 155.022 451.51C155.022 520.123 210.682 571.466 274.978 571.466C287.931 571.466 300.407 569.549 312.883 565.228C334.473 586.341 364.222 599.776 396.852 599.776Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodexLogo;
|
||||
|
||||
@@ -1,26 +1,20 @@
|
||||
import React from 'react';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
|
||||
type CursorLogoProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const CursorLogo = ({ className = 'w-5 h-5' }: CursorLogoProps) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-label="Cursor"
|
||||
const CursorLogo = ({ className = 'w-5 h-5' }: CursorLogoProps) => {
|
||||
const { isDarkMode } = useTheme();
|
||||
|
||||
return (
|
||||
<img
|
||||
src={isDarkMode ? "/icons/cursor-white.svg" : "/icons/cursor.svg"}
|
||||
alt="Cursor"
|
||||
className={className}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.925 24l10.425-6-10.425-6L1.5 18l10.425 6z"
|
||||
fill="currentColor"
|
||||
opacity=".39"
|
||||
/>
|
||||
<path d="M22.35 18V6L11.925 0v12l10.425 6z" fill="currentColor" opacity=".8" />
|
||||
<path d="M11.925 0L1.5 6v12l10.425-6V0z" fill="currentColor" opacity=".6" />
|
||||
<path d="M22.35 6L11.925 24V12L22.35 6z" fill="currentColor" opacity=".72" />
|
||||
<path d="M22.35 6l-10.425 6L1.5 6h20.85z" fill="currentColor" opacity=".95" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default CursorLogo;
|
||||
|
||||
@@ -1,262 +1,6 @@
|
||||
import { useId } from 'react';
|
||||
|
||||
type GeminiLogoProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const GeminiLogo = ({ className = 'w-5 h-5' }: GeminiLogoProps) => {
|
||||
const id = useId().replace(/:/g, '');
|
||||
const maskId = `${id}-gemini-mask`;
|
||||
const gradientId = `${id}-gemini-gradient`;
|
||||
const filterIds = Array.from({ length: 11 }, (_, index) => `${id}-gemini-filter-${index}`);
|
||||
|
||||
const GeminiLogo = ({className = 'w-5 h-5'}) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 65 65"
|
||||
role="img"
|
||||
aria-label="Gemini"
|
||||
className={className}
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id={maskId}
|
||||
style={{ maskType: 'alpha' }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="0"
|
||||
width="65"
|
||||
height="65"
|
||||
>
|
||||
<path
|
||||
d="M32.447 0c.68 0 1.273.465 1.439 1.125a38.904 38.904 0 001.999 5.905c2.152 5 5.105 9.376 8.854 13.125 3.751 3.75 8.126 6.703 13.125 8.855a38.98 38.98 0 005.906 1.999c.66.166 1.124.758 1.124 1.438 0 .68-.464 1.273-1.125 1.439a38.902 38.902 0 00-5.905 1.999c-5 2.152-9.375 5.105-13.125 8.854-3.749 3.751-6.702 8.126-8.854 13.125a38.973 38.973 0 00-2 5.906 1.485 1.485 0 01-1.438 1.124c-.68 0-1.272-.464-1.438-1.125a38.913 38.913 0 00-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973 38.973 0 00-5.905-2A1.485 1.485 0 010 32.448c0-.68.465-1.272 1.125-1.438a38.903 38.903 0 005.905-2c5-2.151 9.376-5.104 13.125-8.854 3.75-3.749 6.703-8.125 8.855-13.125a38.972 38.972 0 001.999-5.905A1.485 1.485 0 0132.447 0z"
|
||||
fill="#000"
|
||||
/>
|
||||
<path
|
||||
d="M32.447 0c.68 0 1.273.465 1.439 1.125a38.904 38.904 0 001.999 5.905c2.152 5 5.105 9.376 8.854 13.125 3.751 3.75 8.126 6.703 13.125 8.855a38.98 38.98 0 005.906 1.999c.66.166 1.124.758 1.124 1.438 0 .68-.464 1.273-1.125 1.439a38.902 38.902 0 00-5.905 1.999c-5 2.152-9.375 5.105-13.125 8.854-3.749 3.751-6.702 8.126-8.854 13.125a38.973 38.973 0 00-2 5.906 1.485 1.485 0 01-1.438 1.124c-.68 0-1.272-.464-1.438-1.125a38.913 38.913 0 00-2-5.905c-2.151-5-5.103-9.375-8.854-13.125-3.75-3.749-8.125-6.702-13.125-8.854a38.973 38.973 0 00-5.905-2A1.485 1.485 0 010 32.448c0-.68.465-1.272 1.125-1.438a38.903 38.903 0 005.905-2c5-2.151 9.376-5.104 13.125-8.854 3.75-3.749 6.703-8.125 8.855-13.125a38.972 38.972 0 001.999-5.905A1.485 1.485 0 0132.447 0z"
|
||||
fill={`url(#${gradientId})`}
|
||||
/>
|
||||
</mask>
|
||||
<g mask={`url(#${maskId})`}>
|
||||
<g filter={`url(#${filterIds[0]})`}>
|
||||
<path
|
||||
d="M-5.859 50.734c7.498 2.663 16.116-2.33 19.249-11.152 3.133-8.821-.406-18.131-7.904-20.794-7.498-2.663-16.116 2.33-19.25 11.151-3.132 8.822.407 18.132 7.905 20.795z"
|
||||
fill="#FFE432"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[1]})`}>
|
||||
<path
|
||||
d="M27.433 21.649c10.3 0 18.651-8.535 18.651-19.062 0-10.528-8.35-19.062-18.651-19.062S8.78-7.94 8.78 2.587c0 10.527 8.35 19.062 18.652 19.062z"
|
||||
fill="#FC413D"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[2]})`}>
|
||||
<path
|
||||
d="M20.184 82.608c10.753-.525 18.918-12.244 18.237-26.174-.68-13.93-9.95-24.797-20.703-24.271C6.965 32.689-1.2 44.407-.519 58.337c.681 13.93 9.95 24.797 20.703 24.271z"
|
||||
fill="#00B95C"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[3]})`}>
|
||||
<path
|
||||
d="M20.184 82.608c10.753-.525 18.918-12.244 18.237-26.174-.68-13.93-9.95-24.797-20.703-24.271C6.965 32.689-1.2 44.407-.519 58.337c.681 13.93 9.95 24.797 20.703 24.271z"
|
||||
fill="#00B95C"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[4]})`}>
|
||||
<path
|
||||
d="M30.954 74.181c9.014-5.485 11.427-17.976 5.389-27.9-6.038-9.925-18.241-13.524-27.256-8.04-9.015 5.486-11.428 17.977-5.39 27.902 6.04 9.924 18.242 13.523 27.257 8.038z"
|
||||
fill="#00B95C"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[5]})`}>
|
||||
<path
|
||||
d="M67.391 42.993c10.132 0 18.346-7.91 18.346-17.666 0-9.757-8.214-17.667-18.346-17.667s-18.346 7.91-18.346 17.667c0 9.757 8.214 17.666 18.346 17.666z"
|
||||
fill="#3186FF"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[6]})`}>
|
||||
<path
|
||||
d="M-13.065 40.944c9.33 7.094 22.959 4.869 30.442-4.972 7.483-9.84 5.987-23.569-3.343-30.663C4.704-1.786-8.924.439-16.408 10.28c-7.483 9.84-5.986 23.57 3.343 30.664z"
|
||||
fill="#FBBC04"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[7]})`}>
|
||||
<path
|
||||
d="M34.74 51.43c11.135 7.656 25.896 5.524 32.968-4.764 7.073-10.287 3.779-24.832-7.357-32.488C49.215 6.52 34.455 8.654 27.382 18.94c-7.072 10.288-3.779 24.833 7.357 32.49z"
|
||||
fill="#3186FF"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[8]})`}>
|
||||
<path
|
||||
d="M54.984-2.336c2.833 3.852-.808 11.34-8.131 16.727-7.324 5.387-15.557 6.631-18.39 2.78-2.833-3.853.807-11.342 8.13-16.728 7.324-5.387 15.558-6.631 18.39-2.78z"
|
||||
fill="#749BFF"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[9]})`}>
|
||||
<path
|
||||
d="M31.727 16.104C43.053 5.598 46.94-8.626 40.41-15.666c-6.53-7.04-21.006-4.232-32.332 6.274s-15.214 24.73-8.683 31.77c6.53 7.04 21.006 4.232 32.332-6.274z"
|
||||
fill="#FC413D"
|
||||
/>
|
||||
</g>
|
||||
<g filter={`url(#${filterIds[10]})`}>
|
||||
<path
|
||||
d="M8.51 53.838c6.732 4.818 14.46 5.55 17.262 1.636 2.802-3.915-.384-10.994-7.116-15.812-6.731-4.818-14.46-5.55-17.261-1.636-2.802 3.915.383 10.994 7.115 15.812z"
|
||||
fill="#FFEE48"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id={filterIds[0]}
|
||||
x="-19.824"
|
||||
y="13.152"
|
||||
width="39.274"
|
||||
height="43.217"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="2.46" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[1]}
|
||||
x="-15.001"
|
||||
y="-40.257"
|
||||
width="84.868"
|
||||
height="85.688"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="11.891" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[2]}
|
||||
x="-20.776"
|
||||
y="11.927"
|
||||
width="79.454"
|
||||
height="90.916"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10.109" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[3]}
|
||||
x="-20.776"
|
||||
y="11.927"
|
||||
width="79.454"
|
||||
height="90.916"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10.109" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[4]}
|
||||
x="-19.845"
|
||||
y="15.459"
|
||||
width="79.731"
|
||||
height="81.505"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10.109" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[5]}
|
||||
x="29.832"
|
||||
y="-11.552"
|
||||
width="75.117"
|
||||
height="73.758"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="9.606" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[6]}
|
||||
x="-38.583"
|
||||
y="-16.253"
|
||||
width="78.135"
|
||||
height="78.758"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="8.706" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[7]}
|
||||
x="8.107"
|
||||
y="-5.966"
|
||||
width="78.877"
|
||||
height="77.539"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="7.775" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[8]}
|
||||
x="13.587"
|
||||
y="-18.488"
|
||||
width="56.272"
|
||||
height="51.81"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="6.957" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[9]}
|
||||
x="-15.526"
|
||||
y="-31.297"
|
||||
width="70.856"
|
||||
height="69.306"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="5.876" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<filter
|
||||
id={filterIds[10]}
|
||||
x="-14.168"
|
||||
y="20.964"
|
||||
width="55.501"
|
||||
height="51.571"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="7.273" result="effect1_foregroundBlur_2001_67" />
|
||||
</filter>
|
||||
<linearGradient id={gradientId} x1="18.447" x2="52.153" y1="43.42" y2="15.004" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#4893FC" />
|
||||
<stop offset=".27" stopColor="#4893FC" />
|
||||
<stop offset=".777" stopColor="#969DFF" />
|
||||
<stop offset="1" stopColor="#BD99FE" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<img src="/icons/gemini-ai-icon.svg" alt="Gemini" className={className} />
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -7,7 +7,6 @@ import type {
|
||||
SessionActivityMap,
|
||||
} from '../../../hooks/useSessionProtection';
|
||||
import type { SessionEstablishedContext, SessionNavigationOptions } from '../../chat/types/types';
|
||||
import type { SettingsMainTab } from '../../settings/types/types';
|
||||
|
||||
export type TaskMasterTask = {
|
||||
id: string | number;
|
||||
@@ -54,7 +53,7 @@ export type MainContentProps = {
|
||||
processingSessions: SessionActivityMap;
|
||||
onNavigateToSession: (targetSessionId: string, options?: SessionNavigationOptions) => void;
|
||||
onSessionEstablished: (sessionId: string, context: SessionEstablishedContext) => void;
|
||||
onShowSettings: (tab?: SettingsMainTab) => void;
|
||||
onShowSettings: () => void;
|
||||
externalMessageUpdate: number;
|
||||
newSessionTrigger: number;
|
||||
};
|
||||
@@ -65,7 +64,6 @@ export type MainContentHeaderProps = {
|
||||
selectedProject: Project;
|
||||
selectedSession: ProjectSession | null;
|
||||
shouldShowTasksTab: boolean;
|
||||
shouldShowBrowserTab: boolean;
|
||||
isMobile: boolean;
|
||||
onMenuClick: () => void;
|
||||
};
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
import ChatInterface from '../../chat/view/ChatInterface';
|
||||
import FileTree from '../../file-tree/view/FileTree';
|
||||
import StandaloneShell from '../../standalone-shell/view/StandaloneShell';
|
||||
import GitPanel from '../../git-panel/view/GitPanel';
|
||||
import PluginTabContent from '../../plugins/view/PluginTabContent';
|
||||
import { BrowserUsePanel } from '../../browser-use';
|
||||
import type { MainContentProps } from '../types/types';
|
||||
import { useTaskMaster } from '../../../contexts/TaskMasterContext';
|
||||
import { usePaletteOpsRegister } from '../../../contexts/PaletteOpsContext';
|
||||
import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
|
||||
import { useUiPreferences } from '../../../hooks/useUiPreferences';
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
import { useEditorSidebar } from '../../code-editor/hooks/useEditorSidebar';
|
||||
import EditorSidebar from '../../code-editor/view/EditorSidebar';
|
||||
import type { Project } from '../../../types/app';
|
||||
@@ -57,10 +55,8 @@ function MainContent({
|
||||
|
||||
const { currentProject, setCurrentProject } = useTaskMaster() as TaskMasterContextValue;
|
||||
const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings() as TasksSettingsContextValue;
|
||||
const [browserUseEnabled, setBrowserUseEnabled] = useState(false);
|
||||
|
||||
const shouldShowTasksTab = Boolean(tasksEnabled && isTaskMasterInstalled);
|
||||
const shouldShowBrowserTab = browserUseEnabled;
|
||||
|
||||
const {
|
||||
editingFile,
|
||||
@@ -94,28 +90,6 @@ function MainContent({
|
||||
}
|
||||
}, [shouldShowTasksTab, activeTab, setActiveTab]);
|
||||
|
||||
const loadBrowserUseSettings = useCallback(async () => {
|
||||
try {
|
||||
const response = await authenticatedFetch('/api/browser-use/settings');
|
||||
const data = await response.json();
|
||||
setBrowserUseEnabled(Boolean(response.ok && data?.success !== false && data?.data?.settings?.enabled));
|
||||
} catch {
|
||||
setBrowserUseEnabled(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadBrowserUseSettings();
|
||||
window.addEventListener('browserUseSettingsChanged', loadBrowserUseSettings);
|
||||
return () => window.removeEventListener('browserUseSettingsChanged', loadBrowserUseSettings);
|
||||
}, [loadBrowserUseSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldShowBrowserTab && activeTab === 'browser') {
|
||||
setActiveTab('chat');
|
||||
}
|
||||
}, [shouldShowBrowserTab, activeTab, setActiveTab]);
|
||||
|
||||
usePaletteOpsRegister({
|
||||
openFile: (filePath: string) => {
|
||||
setActiveTab('files');
|
||||
@@ -139,7 +113,6 @@ function MainContent({
|
||||
selectedProject={selectedProject}
|
||||
selectedSession={selectedSession}
|
||||
shouldShowTasksTab={shouldShowTasksTab}
|
||||
shouldShowBrowserTab={shouldShowBrowserTab}
|
||||
isMobile={isMobile}
|
||||
onMenuClick={onMenuClick}
|
||||
/>
|
||||
@@ -198,11 +171,7 @@ function MainContent({
|
||||
|
||||
{shouldShowTasksTab && <TaskMasterPanel isVisible={activeTab === 'tasks'} />}
|
||||
|
||||
{shouldShowBrowserTab && activeTab === 'browser' && (
|
||||
<div className="h-full overflow-hidden">
|
||||
<BrowserUsePanel isVisible={activeTab === 'browser'} onShowSettings={onShowSettings} />
|
||||
</div>
|
||||
)}
|
||||
<div className={`h-full overflow-hidden ${activeTab === 'preview' ? 'block' : 'hidden'}`} />
|
||||
|
||||
{activeTab.startsWith('plugin:') && (
|
||||
<div className="h-full overflow-hidden">
|
||||
|
||||
@@ -10,7 +10,6 @@ export default function MainContentHeader({
|
||||
selectedProject,
|
||||
selectedSession,
|
||||
shouldShowTasksTab,
|
||||
shouldShowBrowserTab,
|
||||
isMobile,
|
||||
onMenuClick,
|
||||
}: MainContentHeaderProps) {
|
||||
@@ -60,7 +59,6 @@ export default function MainContentHeader({
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
shouldShowTasksTab={shouldShowTasksTab}
|
||||
shouldShowBrowserTab={shouldShowBrowserTab}
|
||||
/>
|
||||
</div>
|
||||
{canScrollRight && (
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, MonitorPlay, type LucideIcon } from 'lucide-react';
|
||||
import { MessageSquare, Terminal, Folder, GitBranch, ClipboardCheck, type LucideIcon } from 'lucide-react';
|
||||
import type { Dispatch, SetStateAction } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { Tooltip, PillBar, Pill } from '../../../../shared/view/ui';
|
||||
import type { AppTab } from '../../../../types/app';
|
||||
import { usePlugins } from '../../../../contexts/PluginsContext';
|
||||
@@ -11,7 +10,6 @@ type MainContentTabSwitcherProps = {
|
||||
activeTab: AppTab;
|
||||
setActiveTab: Dispatch<SetStateAction<AppTab>>;
|
||||
shouldShowTasksTab: boolean;
|
||||
shouldShowBrowserTab: boolean;
|
||||
};
|
||||
|
||||
type BuiltInTab = {
|
||||
@@ -38,13 +36,6 @@ const BASE_TABS: BuiltInTab[] = [
|
||||
{ kind: 'builtin', id: 'git', labelKey: 'tabs.git', icon: GitBranch },
|
||||
];
|
||||
|
||||
const BROWSER_TAB: BuiltInTab = {
|
||||
kind: 'builtin',
|
||||
id: 'browser',
|
||||
labelKey: 'tabs.browser',
|
||||
icon: MonitorPlay,
|
||||
};
|
||||
|
||||
const TASKS_TAB: BuiltInTab = {
|
||||
kind: 'builtin',
|
||||
id: 'tasks',
|
||||
@@ -56,16 +47,11 @@ export default function MainContentTabSwitcher({
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
shouldShowTasksTab,
|
||||
shouldShowBrowserTab,
|
||||
}: MainContentTabSwitcherProps) {
|
||||
const { t } = useTranslation();
|
||||
const { plugins } = usePlugins();
|
||||
|
||||
const builtInTabs: BuiltInTab[] = [
|
||||
...BASE_TABS,
|
||||
...(shouldShowBrowserTab ? [BROWSER_TAB] : []),
|
||||
...(shouldShowTasksTab ? [TASKS_TAB] : []),
|
||||
];
|
||||
const builtInTabs: BuiltInTab[] = shouldShowTasksTab ? [...BASE_TABS, TASKS_TAB] : BASE_TABS;
|
||||
|
||||
const pluginTabs: PluginTab[] = plugins
|
||||
.filter((p) => p.enabled)
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import SessionProviderLogo from '../../../llm-logo-provider/SessionProviderLogo';
|
||||
import type { AppTab, Project, ProjectSession } from '../../../../types/app';
|
||||
import { usePlugins } from '../../../../contexts/PluginsContext';
|
||||
@@ -28,10 +27,6 @@ function getTabTitle(activeTab: AppTab, shouldShowTasksTab: boolean, t: (key: st
|
||||
return 'TaskMaster';
|
||||
}
|
||||
|
||||
if (activeTab === 'browser') {
|
||||
return 'Browser';
|
||||
}
|
||||
|
||||
return 'Project';
|
||||
}
|
||||
|
||||
|
||||
@@ -52,11 +52,6 @@ const getServerKey = (server: ProviderMcpServer): string => (
|
||||
`${server.provider}:${server.scope}:${server.workspacePath || 'global'}:${server.name}`
|
||||
);
|
||||
|
||||
// Servers prefixed with `cloudcli-` are written and removed automatically by a
|
||||
// CloudCLI feature toggle (e.g. the Browser tab), not added by the user. They are
|
||||
// shown read-only so users don't edit/delete them out of sync with the feature.
|
||||
const isManagedServer = (server: ProviderMcpServer): boolean => server.name.startsWith('cloudcli-');
|
||||
|
||||
function ConfigLine({ label, children }: { label: string; children: string }) {
|
||||
if (!children) {
|
||||
return null;
|
||||
@@ -182,18 +177,13 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer
|
||||
<div className="py-8 text-center text-muted-foreground">Loading MCP servers...</div>
|
||||
)}
|
||||
|
||||
{servers.map((server) => {
|
||||
const managed = isManagedServer(server);
|
||||
|
||||
return (
|
||||
{servers.map((server) => (
|
||||
<div key={getServerKey(server)} className="rounded-lg border border-border bg-card/50 p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="mb-2 flex flex-wrap items-center gap-2">
|
||||
{!managed && getTransportIcon(server.transport)}
|
||||
{getTransportIcon(server.transport)}
|
||||
<span className="font-medium text-foreground">{server.name}</span>
|
||||
{!managed && (
|
||||
<>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{server.transport || 'stdio'}
|
||||
</Badge>
|
||||
@@ -205,19 +195,9 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer
|
||||
{server.projectDisplayName}
|
||||
</Badge>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{managed && (
|
||||
<Badge variant="outline" className="gap-1 text-xs text-muted-foreground">
|
||||
<Lock className="h-3 w-3" />
|
||||
{t('mcpServers.managed.badge', { defaultValue: 'Managed' })}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 text-sm text-muted-foreground">
|
||||
{!managed && (
|
||||
<>
|
||||
<ConfigLine label={t('mcpServers.config.command')}>{server.command || ''}</ConfigLine>
|
||||
<ConfigLine label={t('mcpServers.config.url')}>{server.url || ''}</ConfigLine>
|
||||
<ConfigLine label={t('mcpServers.config.args')}>{(server.args || []).join(' ')}</ConfigLine>
|
||||
@@ -230,19 +210,9 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer
|
||||
{server.envVars && server.envVars.length > 0 && (
|
||||
<ConfigLine label="Env Vars">{server.envVars.join(', ')}</ConfigLine>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{managed && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{t('mcpServers.managed.hint', {
|
||||
defaultValue: 'Managed by CloudCLI.',
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!managed && (
|
||||
<div className="ml-4 flex items-center gap-2">
|
||||
<Button
|
||||
onClick={() => openForm(server)}
|
||||
@@ -263,11 +233,9 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
|
||||
{!isLoading && !isLoadingProjectScopes && servers.length === 0 && (
|
||||
<div className="py-8 text-center text-muted-foreground">{t('mcpServers.empty')}</div>
|
||||
|
||||
@@ -4,14 +4,11 @@ import {
|
||||
Activity,
|
||||
BarChart3,
|
||||
BookOpen,
|
||||
Calculator,
|
||||
Clock,
|
||||
Download,
|
||||
ExternalLink,
|
||||
Github,
|
||||
GitBranch,
|
||||
Loader2,
|
||||
ListTodo,
|
||||
RefreshCw,
|
||||
ServerCrash,
|
||||
ShieldAlert,
|
||||
@@ -30,10 +27,6 @@ const TERMINAL_PLUGIN_URL = 'https://github.com/cloudcli-ai/cloudcli-plugin-term
|
||||
const SCHEDULED_PROMPT_PLUGIN_URL = 'https://github.com/grostim/cloudcli-cron';
|
||||
const CLAUDE_WATCH_PLUGIN_URL = 'https://github.com/satsuki19980613/cloudcli-claude-watch';
|
||||
const PRISM_CLOUDCLI_PLUGIN_URL = 'https://github.com/jakeefr/cloudcli-plugin-prism';
|
||||
const SESSION_MANAGER_PLUGIN_URL = 'https://github.com/strykereye2/cloudcli-plugin-session-manager';
|
||||
const TOKEN_COST_CALCULATOR_PLUGIN_URL = 'https://github.com/NightmareAway/cloudcli-plugin-token-cost-calculator';
|
||||
const TASK_QUEUE_PLUGIN_URL = 'https://github.com/TadMSTR/cloudcli-plugin-task-queue';
|
||||
const GITHUB_ISSUES_BOARD_PLUGIN_URL = 'https://github.com/szmidtpiotr/claude-github-issue';
|
||||
|
||||
type PluginRecommendation = {
|
||||
id: string;
|
||||
@@ -86,40 +79,8 @@ const UNOFFICIAL_PLUGIN_RECOMMENDATIONS: PluginRecommendation[] = [
|
||||
repoUrl: PRISM_CLOUDCLI_PLUGIN_URL,
|
||||
installedNames: ['prism'],
|
||||
icon: Activity,
|
||||
source: 'unofficial',
|
||||
},
|
||||
{
|
||||
id: 'session-manager',
|
||||
translationKey: 'sessionManagerPlugin',
|
||||
repoUrl: SESSION_MANAGER_PLUGIN_URL,
|
||||
installedNames: ['session-manager'],
|
||||
icon: Activity,
|
||||
source: 'unofficial',
|
||||
},
|
||||
{
|
||||
id: 'token-cost-calculator',
|
||||
translationKey: 'tokenCostCalculatorPlugin',
|
||||
repoUrl: TOKEN_COST_CALCULATOR_PLUGIN_URL,
|
||||
installedNames: ['token-cost-calculator'],
|
||||
icon: Calculator,
|
||||
source: 'unofficial',
|
||||
},
|
||||
{
|
||||
id: 'task-queue',
|
||||
translationKey: 'taskQueuePlugin',
|
||||
repoUrl: TASK_QUEUE_PLUGIN_URL,
|
||||
installedNames: ['task-queue'],
|
||||
icon: ListTodo,
|
||||
source: 'unofficial',
|
||||
},
|
||||
{
|
||||
id: 'claude-github-issue',
|
||||
translationKey: 'githubIssuesBoardPlugin',
|
||||
repoUrl: GITHUB_ISSUES_BOARD_PLUGIN_URL,
|
||||
installedNames: ['claude-github-issue'],
|
||||
icon: Github,
|
||||
source: 'unofficial',
|
||||
},
|
||||
source: 'unofficial'
|
||||
}
|
||||
];
|
||||
|
||||
function repoSlug(repoUrl: string) {
|
||||
|
||||
@@ -6,7 +6,6 @@ import {
|
||||
Info,
|
||||
KeyRound,
|
||||
ListChecks,
|
||||
MonitorPlay,
|
||||
Palette,
|
||||
Plug,
|
||||
} from 'lucide-react';
|
||||
@@ -33,7 +32,6 @@ export const SETTINGS_MAIN_TABS: SettingsMainTabMeta[] = [
|
||||
{ id: 'git', label: 'Git', keywords: 'git github commits', icon: GitBranch },
|
||||
{ id: 'api', label: 'API Tokens', keywords: 'api tokens auth keys', icon: KeyRound },
|
||||
{ id: 'tasks', label: 'Tasks', keywords: 'tasks taskmaster', icon: ListChecks },
|
||||
{ id: 'browser', label: 'Browser', keywords: 'browser playwright chromium automation', icon: MonitorPlay },
|
||||
{ id: 'notifications', label: 'Notifications', keywords: 'notifications alerts push', icon: Bell },
|
||||
{ id: 'plugins', label: 'Plugins', keywords: 'plugins extensions integrations', icon: Plug },
|
||||
{ id: 'about', label: 'About', keywords: 'about version info', icon: Info },
|
||||
|
||||
@@ -54,7 +54,7 @@ type NotificationPreferencesResponse = {
|
||||
|
||||
type ActiveLoginProvider = AgentProvider | '';
|
||||
|
||||
const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'browser', 'notifications', 'plugins', 'about'];
|
||||
const KNOWN_MAIN_TABS: SettingsMainTab[] = ['agents', 'appearance', 'git', 'api', 'tasks', 'notifications', 'plugins'];
|
||||
|
||||
const normalizeMainTab = (tab: string): SettingsMainTab => {
|
||||
// Keep backwards compatibility with older callers that still pass "tools".
|
||||
|
||||
@@ -3,9 +3,9 @@ import type { Dispatch, SetStateAction } from 'react';
|
||||
import type { LLMProvider } from '../../../types/app';
|
||||
import type { ProviderAuthStatus } from '../../provider-auth/types';
|
||||
|
||||
export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'browser' | 'notifications' | 'plugins' | 'about';
|
||||
export type SettingsMainTab = 'agents' | 'appearance' | 'git' | 'api' | 'tasks' | 'notifications' | 'plugins' | 'about';
|
||||
export type AgentProvider = LLMProvider;
|
||||
export type AgentCategory = 'account' | 'permissions' | 'mcp' | 'skills';
|
||||
export type AgentCategory = 'account' | 'permissions' | 'mcp';
|
||||
export type ProjectSortOrder = 'name' | 'date';
|
||||
export type SaveStatus = 'success' | 'error' | null;
|
||||
export type CodexPermissionMode = 'default' | 'acceptEdits' | 'bypassPermissions';
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { X } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import ProviderLoginModal from '../../provider-auth/view/ProviderLoginModal';
|
||||
import { Button } from '../../../shared/view/ui';
|
||||
import SettingsSidebar from '../view/SettingsSidebar';
|
||||
@@ -8,7 +7,6 @@ import AgentsSettingsTab from '../view/tabs/agents-settings/AgentsSettingsTab';
|
||||
import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
|
||||
import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
|
||||
import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
|
||||
import BrowserUseSettingsTab from '../view/tabs/browser-use-settings/BrowserUseSettingsTab';
|
||||
import NotificationsSettingsTab from '../view/tabs/NotificationsSettingsTab';
|
||||
import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
|
||||
import PluginSettingsTab from '../../plugins/view/PluginSettingsTab';
|
||||
@@ -102,12 +100,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
|
||||
</div>
|
||||
|
||||
{/* Body: sidebar + content */}
|
||||
<div className="flex min-h-0 min-w-0 flex-1 flex-col md:flex-row">
|
||||
<div className="flex min-h-0 flex-1 flex-col md:flex-row">
|
||||
<SettingsSidebar activeTab={activeTab} onChange={setActiveTab} />
|
||||
|
||||
{/* Content */}
|
||||
<main className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<div key={activeTab} className="settings-content-enter min-w-0 space-y-6 overflow-x-hidden p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<div key={activeTab} className="settings-content-enter space-y-6 p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
|
||||
{activeTab === 'appearance' && (
|
||||
<AppearanceSettingsTab
|
||||
projectSortOrder={projectSortOrder}
|
||||
@@ -141,8 +139,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
|
||||
|
||||
{activeTab === 'tasks' && <TasksSettingsTab />}
|
||||
|
||||
{activeTab === 'browser' && <BrowserUseSettingsTab />}
|
||||
|
||||
{activeTab === 'notifications' && (
|
||||
<NotificationsSettingsTab
|
||||
notificationPreferences={notificationPreferences}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Bell, Bot, GitBranch, Info, Key, ListChecks, MonitorPlay, Palette, Puzzle } from 'lucide-react';
|
||||
import { Bell, Bot, GitBranch, Info, Key, ListChecks, Palette, Puzzle } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { cn } from '../../../lib/utils';
|
||||
import { PillBar, Pill } from '../../../shared/view/ui';
|
||||
@@ -21,7 +21,6 @@ const NAV_ITEMS: NavItem[] = [
|
||||
{ id: 'git', labelKey: 'mainTabs.git', icon: GitBranch },
|
||||
{ id: 'api', labelKey: 'mainTabs.apiTokens', icon: Key },
|
||||
{ id: 'tasks', labelKey: 'mainTabs.tasks', icon: ListChecks },
|
||||
{ id: 'browser', labelKey: 'mainTabs.browser', icon: MonitorPlay },
|
||||
{ id: 'plugins', labelKey: 'mainTabs.plugins', icon: Puzzle },
|
||||
{ id: 'notifications', labelKey: 'mainTabs.notifications', icon: Bell },
|
||||
{ id: 'about', labelKey: 'mainTabs.about', icon: Info },
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import type { AgentCategory, AgentProvider } from '../../../types/types';
|
||||
|
||||
@@ -22,11 +22,6 @@ export default function AgentsSettingsTab({
|
||||
}: AgentsSettingsTabProps) {
|
||||
const [selectedAgent, setSelectedAgent] = useState<AgentProvider>('claude');
|
||||
const [selectedCategory, setSelectedCategory] = useState<AgentCategory>('account');
|
||||
const visibleCategories = useMemo<AgentCategory[]>(() => (
|
||||
selectedAgent === 'opencode'
|
||||
? ['account', 'permissions', 'mcp']
|
||||
: ['account', 'permissions', 'mcp', 'skills']
|
||||
), [selectedAgent]);
|
||||
|
||||
const visibleAgents = useMemo<AgentProvider[]>(() => {
|
||||
return ['claude', 'cursor', 'codex', 'gemini', 'opencode'];
|
||||
@@ -62,14 +57,8 @@ export default function AgentsSettingsTab({
|
||||
providerAuthStatus.opencode,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visibleCategories.includes(selectedCategory)) {
|
||||
setSelectedCategory(visibleCategories[0] ?? 'account');
|
||||
}
|
||||
}, [selectedCategory, visibleCategories]);
|
||||
|
||||
return (
|
||||
<div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] min-w-0 flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
|
||||
<div className="-mx-4 -mb-4 -mt-2 flex min-h-[300px] flex-col overflow-hidden md:-mx-6 md:-mb-6 md:-mt-2 md:min-h-[500px]">
|
||||
<AgentSelectorSection
|
||||
agents={visibleAgents}
|
||||
selectedAgent={selectedAgent}
|
||||
@@ -77,10 +66,8 @@ export default function AgentsSettingsTab({
|
||||
agentContextById={agentContextById}
|
||||
/>
|
||||
|
||||
<div className="flex min-w-0 flex-1 flex-col overflow-hidden">
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<AgentCategoryTabsSection
|
||||
categories={visibleCategories}
|
||||
selectedAgent={selectedAgent}
|
||||
selectedCategory={selectedCategory}
|
||||
onSelectCategory={setSelectedCategory}
|
||||
/>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import type { AgentCategoryContentSectionProps } from '../types';
|
||||
import type { McpProject } from '../../../../../mcp/types';
|
||||
import { McpServers } from '../../../../../mcp';
|
||||
import type { SkillsProject } from '../../../../../skills/types';
|
||||
import { ProviderSkills } from '../../../../../skills';
|
||||
|
||||
import AccountContent from './content/AccountContent';
|
||||
import PermissionsContent from './content/PermissionsContent';
|
||||
@@ -20,7 +18,7 @@ export default function AgentCategoryContentSection({
|
||||
projects,
|
||||
}: AgentCategoryContentSectionProps) {
|
||||
return (
|
||||
<div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-3 md:p-4">
|
||||
<div className="flex-1 overflow-y-auto p-3 md:p-4">
|
||||
{selectedCategory === 'account' && (
|
||||
<AccountContent
|
||||
agent={selectedAgent}
|
||||
@@ -86,18 +84,6 @@ export default function AgentCategoryContentSection({
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedCategory === 'skills' && selectedAgent !== 'opencode' && (
|
||||
<ProviderSkills
|
||||
selectedProvider={selectedAgent}
|
||||
currentProjects={projects.map<SkillsProject>((project) => ({
|
||||
projectId: project.name,
|
||||
displayName: project.displayName,
|
||||
fullPath: project.fullPath,
|
||||
path: project.path,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { cn } from '../../../../../../lib/utils';
|
||||
import type { AgentCategory } from '../../../../types/types';
|
||||
import type { AgentCategoryTabsSectionProps } from '../types';
|
||||
|
||||
const AGENT_CATEGORIES: AgentCategory[] = ['account', 'permissions', 'mcp'];
|
||||
|
||||
export default function AgentCategoryTabsSection({
|
||||
categories,
|
||||
selectedAgent,
|
||||
selectedCategory,
|
||||
onSelectCategory,
|
||||
}: AgentCategoryTabsSectionProps) {
|
||||
@@ -14,7 +14,7 @@ export default function AgentCategoryTabsSection({
|
||||
return (
|
||||
<div className="flex-shrink-0 border-b border-border">
|
||||
<div role="tablist" className="flex overflow-x-auto px-2 md:px-4">
|
||||
{categories.map((category) => (
|
||||
{AGENT_CATEGORIES.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
role="tab"
|
||||
@@ -30,9 +30,6 @@ export default function AgentCategoryTabsSection({
|
||||
{category === 'account' && t('tabs.account')}
|
||||
{category === 'permissions' && t('tabs.permissions')}
|
||||
{category === 'mcp' && t('tabs.mcpServers')}
|
||||
{category === 'skills' && t('tabs.skills', {
|
||||
defaultValue: selectedAgent === 'opencode' ? 'Shared Skills' : 'Skills',
|
||||
})}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -32,8 +32,6 @@ export type AgentsSettingsTabProps = {
|
||||
};
|
||||
|
||||
export type AgentCategoryTabsSectionProps = {
|
||||
categories: AgentCategory[];
|
||||
selectedAgent: AgentProvider;
|
||||
selectedCategory: AgentCategory;
|
||||
onSelectCategory: (category: AgentCategory) => void;
|
||||
};
|
||||
|
||||
@@ -1,185 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { Download, Loader2 } from 'lucide-react';
|
||||
|
||||
import { Button } from '../../../../../shared/view/ui';
|
||||
import { authenticatedFetch } from '../../../../../utils/api';
|
||||
import SettingsCard from '../../SettingsCard';
|
||||
import SettingsRow from '../../SettingsRow';
|
||||
import SettingsSection from '../../SettingsSection';
|
||||
import SettingsToggle from '../../SettingsToggle';
|
||||
|
||||
type BrowserUseSettings = {
|
||||
enabled: boolean;
|
||||
};
|
||||
|
||||
type BrowserUseStatus = {
|
||||
enabled: boolean;
|
||||
available: boolean;
|
||||
playwrightInstalled: boolean;
|
||||
chromiumInstalled: boolean;
|
||||
installInProgress: boolean;
|
||||
message: string;
|
||||
};
|
||||
|
||||
async function readJson<T>(response: Response): Promise<T> {
|
||||
const data = await response.json();
|
||||
if (!response.ok || data.success === false) {
|
||||
throw new Error(data.error || data.details || `Request failed (${response.status})`);
|
||||
}
|
||||
return data as T;
|
||||
}
|
||||
|
||||
export default function BrowserUseSettingsTab() {
|
||||
const [settings, setSettings] = useState<BrowserUseSettings | null>(null);
|
||||
const [status, setStatus] = useState<BrowserUseStatus | null>(null);
|
||||
const [isSettingsLoading, setIsSettingsLoading] = useState(true);
|
||||
const [isStatusLoading, setIsStatusLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isInstalling, setIsInstalling] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadSettings = useCallback(async () => {
|
||||
const settingsResponse = await authenticatedFetch('/api/browser-use/settings');
|
||||
const settingsData = await readJson<{ data: { settings: BrowserUseSettings } }>(settingsResponse);
|
||||
setSettings(settingsData.data.settings);
|
||||
}, []);
|
||||
|
||||
const loadStatus = useCallback(async () => {
|
||||
const statusResponse = await authenticatedFetch('/api/browser-use/status');
|
||||
const statusData = await readJson<{ data: BrowserUseStatus }>(statusResponse);
|
||||
setStatus(statusData.data);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setError(null);
|
||||
setIsSettingsLoading(true);
|
||||
setIsStatusLoading(true);
|
||||
|
||||
void loadSettings()
|
||||
.catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser settings'))
|
||||
.finally(() => setIsSettingsLoading(false));
|
||||
|
||||
void loadStatus()
|
||||
.catch((err) => setError(err instanceof Error ? err.message : 'Failed to load Browser status'))
|
||||
.finally(() => setIsStatusLoading(false));
|
||||
}, [loadSettings, loadStatus]);
|
||||
|
||||
const updateSettings = async (nextSettings: Partial<BrowserUseSettings>) => {
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await authenticatedFetch('/api/browser-use/settings', {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(nextSettings),
|
||||
});
|
||||
const data = await readJson<{ data: { settings: BrowserUseSettings } }>(response);
|
||||
setSettings(data.data.settings);
|
||||
window.dispatchEvent(new Event('browserUseSettingsChanged'));
|
||||
setIsStatusLoading(true);
|
||||
await loadStatus();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save Browser settings');
|
||||
} finally {
|
||||
setIsStatusLoading(false);
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const installBrowserBinaries = async () => {
|
||||
setIsInstalling(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await authenticatedFetch('/api/browser-use/runtime/install', { method: 'POST' });
|
||||
await readJson(response);
|
||||
setIsStatusLoading(true);
|
||||
await loadStatus();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to install browser runtime');
|
||||
} finally {
|
||||
setIsStatusLoading(false);
|
||||
setIsInstalling(false);
|
||||
}
|
||||
};
|
||||
|
||||
const browserEnabled = settings?.enabled === true;
|
||||
const needsBrowserBinaries = Boolean(browserEnabled && status && (!status.playwrightInstalled || !status.chromiumInstalled));
|
||||
const runtimeLabel = (installed?: boolean) => {
|
||||
if (isStatusLoading && !status) {
|
||||
return 'checking...';
|
||||
}
|
||||
return installed ? 'installed' : 'missing';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<SettingsSection
|
||||
title="Browser"
|
||||
description="Allow agents to create guarded Playwright browser sessions that you can monitor from the Browser tab."
|
||||
>
|
||||
<SettingsCard divided>
|
||||
<SettingsRow
|
||||
label="Enable Browser"
|
||||
description="Registers Browser for supported agents. Agents can create browser sessions; you can watch, stop, and delete them."
|
||||
>
|
||||
{isSettingsLoading && !settings ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
|
||||
) : (
|
||||
<SettingsToggle
|
||||
checked={browserEnabled}
|
||||
onChange={(value) => void updateSettings({ enabled: value })}
|
||||
ariaLabel="Enable Browser"
|
||||
disabled={isSaving}
|
||||
/>
|
||||
)}
|
||||
</SettingsRow>
|
||||
|
||||
<div className="space-y-4 px-4 py-4">
|
||||
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
|
||||
<span className="rounded-md border border-border px-2 py-1">
|
||||
Playwright: {runtimeLabel(status?.playwrightInstalled)}
|
||||
</span>
|
||||
<span className="rounded-md border border-border px-2 py-1">
|
||||
Chromium: {runtimeLabel(status?.chromiumInstalled)}
|
||||
</span>
|
||||
<span className="rounded-md border border-border px-2 py-1">
|
||||
Status: {isStatusLoading && !status ? 'checking...' : status?.available ? 'ready' : browserEnabled ? 'setup required' : 'disabled'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{needsBrowserBinaries && (
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="text-sm font-medium text-foreground">Browser runtime required</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{status?.message || 'Install the browser runtime before agents can create Browser sessions.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={() => void installBrowserBinaries()}
|
||||
disabled={isInstalling || status?.installInProgress}
|
||||
className="flex-shrink-0"
|
||||
>
|
||||
{isInstalling || status?.installInProgress ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-4 w-4" />
|
||||
)}
|
||||
{isInstalling || status?.installInProgress ? 'Installing...' : 'Install Runtime'}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-200">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SettingsCard>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -594,7 +594,16 @@ export function useSidebarController({
|
||||
|
||||
return sortedProjects.reduce<Project[]>((acc, project) => {
|
||||
const sessions = (project.sessions ?? []).filter((session) => activeSessionIds.has(String(session.id)));
|
||||
const runningCount = sessions.length;
|
||||
const cursorSessions = (project.cursorSessions ?? []).filter((session) => activeSessionIds.has(String(session.id)));
|
||||
const codexSessions = (project.codexSessions ?? []).filter((session) => activeSessionIds.has(String(session.id)));
|
||||
const geminiSessions = (project.geminiSessions ?? []).filter((session) => activeSessionIds.has(String(session.id)));
|
||||
const opencodeSessions = (project.opencodeSessions ?? []).filter((session) => activeSessionIds.has(String(session.id)));
|
||||
const runningCount =
|
||||
sessions.length
|
||||
+ cursorSessions.length
|
||||
+ codexSessions.length
|
||||
+ geminiSessions.length
|
||||
+ opencodeSessions.length;
|
||||
|
||||
if (runningCount === 0) {
|
||||
return acc;
|
||||
@@ -603,6 +612,10 @@ export function useSidebarController({
|
||||
acc.push({
|
||||
...project,
|
||||
sessions,
|
||||
cursorSessions,
|
||||
codexSessions,
|
||||
geminiSessions,
|
||||
opencodeSessions,
|
||||
sessionMeta: {
|
||||
...project.sessionMeta,
|
||||
total: runningCount,
|
||||
|
||||
@@ -61,6 +61,10 @@ export type SidebarProps = {
|
||||
};
|
||||
|
||||
export type SessionViewModel = {
|
||||
isCursorSession: boolean;
|
||||
isCodexSession: boolean;
|
||||
isGeminiSession: boolean;
|
||||
isOpenCodeSession: boolean;
|
||||
isActive: boolean;
|
||||
sessionName: string;
|
||||
sessionTime: string;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { TFunction } from 'i18next';
|
||||
|
||||
import type { LLMProvider, Project, ProjectSession } from '../../../types/app';
|
||||
import type { Project } from '../../../types/app';
|
||||
import type { ProjectSortOrder, SettingsProject, SessionViewModel, SessionWithProvider } from '../types/types';
|
||||
|
||||
export const readProjectSortOrder = (): ProjectSortOrder => {
|
||||
@@ -61,13 +61,6 @@ const getUpdatedTimestamp = (session: SessionWithProvider): string => {
|
||||
return String(session.lastActivity || '');
|
||||
};
|
||||
|
||||
const getSessionProvider = (session: ProjectSession): LLMProvider => {
|
||||
const provider = session.__provider ?? session.provider;
|
||||
return typeof provider === 'string' && provider.trim()
|
||||
? provider as LLMProvider
|
||||
: 'claude';
|
||||
};
|
||||
|
||||
export const getSessionDate = (session: SessionWithProvider): Date => {
|
||||
return new Date(getUpdatedTimestamp(session) || getCreatedTimestamp(session) || 0);
|
||||
};
|
||||
@@ -89,6 +82,10 @@ export const createSessionViewModel = (
|
||||
const diffInMinutes = Math.floor((currentTime.getTime() - sessionDate.getTime()) / (1000 * 60));
|
||||
|
||||
return {
|
||||
isCursorSession: session.__provider === 'cursor',
|
||||
isCodexSession: session.__provider === 'codex',
|
||||
isGeminiSession: session.__provider === 'gemini',
|
||||
isOpenCodeSession: session.__provider === 'opencode',
|
||||
isActive: diffInMinutes < 10,
|
||||
sessionName: getSessionName(session, t),
|
||||
sessionTime: getSessionTime(session),
|
||||
@@ -97,10 +94,32 @@ export const createSessionViewModel = (
|
||||
};
|
||||
|
||||
export const getAllSessions = (project: Project): SessionWithProvider[] => {
|
||||
return (project.sessions || []).map((session) => ({
|
||||
const claudeSessions = [...(project.sessions || [])].map((session) => ({
|
||||
...session,
|
||||
__provider: getSessionProvider(session),
|
||||
})).sort(
|
||||
__provider: 'claude' as const,
|
||||
}));
|
||||
|
||||
const cursorSessions = (project.cursorSessions || []).map((session) => ({
|
||||
...session,
|
||||
__provider: 'cursor' as const,
|
||||
}));
|
||||
|
||||
const codexSessions = (project.codexSessions || []).map((session) => ({
|
||||
...session,
|
||||
__provider: 'codex' as const,
|
||||
}));
|
||||
|
||||
const geminiSessions = (project.geminiSessions || []).map((session) => ({
|
||||
...session,
|
||||
__provider: 'gemini' as const,
|
||||
}));
|
||||
|
||||
const opencodeSessions = (project.opencodeSessions || []).map((session) => ({
|
||||
...session,
|
||||
__provider: 'opencode' as const,
|
||||
}));
|
||||
|
||||
return [...claudeSessions, ...cursorSessions, ...codexSessions, ...geminiSessions, ...opencodeSessions].sort(
|
||||
(a, b) => getSessionDate(b).getTime() - getSessionDate(a).getTime(),
|
||||
);
|
||||
};
|
||||
|
||||
@@ -43,7 +43,7 @@ function Sidebar({
|
||||
}: SidebarProps) {
|
||||
const { t } = useTranslation(['sidebar', 'common']);
|
||||
const { isPWA } = useDeviceSettings({ trackMobile: false });
|
||||
const { updateAvailable, restartRequired, latestVersion, currentVersion, releaseInfo, installMode } = useVersionCheck(
|
||||
const { updateAvailable, latestVersion, currentVersion, releaseInfo, installMode } = useVersionCheck(
|
||||
'siteboon',
|
||||
'claudecodeui',
|
||||
);
|
||||
@@ -224,7 +224,6 @@ function Sidebar({
|
||||
onExpand={handleExpandSidebar}
|
||||
onShowSettings={onShowSettings}
|
||||
updateAvailable={updateAvailable}
|
||||
restartRequired={restartRequired}
|
||||
onShowVersionModal={() => setShowVersionModal(true)}
|
||||
t={t}
|
||||
/>
|
||||
@@ -297,7 +296,6 @@ function Sidebar({
|
||||
onCreateProject={() => setShowNewProject(true)}
|
||||
onCollapseSidebar={handleCollapseSidebar}
|
||||
updateAvailable={updateAvailable}
|
||||
restartRequired={restartRequired}
|
||||
releaseInfo={releaseInfo}
|
||||
latestVersion={latestVersion}
|
||||
currentVersion={currentVersion}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Settings, Sparkles, PanelLeftOpen, Bug, AlertTriangle } from 'lucide-react';
|
||||
import { Settings, Sparkles, PanelLeftOpen, Bug } from 'lucide-react';
|
||||
import type { TFunction } from 'i18next';
|
||||
|
||||
const DISCORD_INVITE_URL = 'https://discord.gg/buxwujPNRE';
|
||||
@@ -16,7 +16,6 @@ type SidebarCollapsedProps = {
|
||||
onExpand: () => void;
|
||||
onShowSettings: () => void;
|
||||
updateAvailable: boolean;
|
||||
restartRequired: boolean;
|
||||
onShowVersionModal: () => void;
|
||||
t: TFunction;
|
||||
};
|
||||
@@ -25,7 +24,6 @@ export default function SidebarCollapsed({
|
||||
onExpand,
|
||||
onShowSettings,
|
||||
updateAvailable,
|
||||
restartRequired,
|
||||
onShowVersionModal,
|
||||
t,
|
||||
}: SidebarCollapsedProps) {
|
||||
@@ -77,18 +75,6 @@ export default function SidebarCollapsed({
|
||||
<DiscordIcon className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
|
||||
</a>
|
||||
|
||||
{/* Restart-required indicator */}
|
||||
{restartRequired && (
|
||||
<div
|
||||
className="relative flex h-8 w-8 items-center justify-center rounded-lg"
|
||||
aria-label={t('version.restartRequired')}
|
||||
title={t('version.restartRequired')}
|
||||
>
|
||||
<AlertTriangle className="h-4 w-4 text-amber-500" />
|
||||
<span className="absolute right-1.5 top-1.5 h-1.5 w-1.5 animate-pulse rounded-full bg-amber-500" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Update indicator */}
|
||||
{updateAvailable && (
|
||||
<button
|
||||
|
||||
@@ -141,7 +141,6 @@ type SidebarContentProps = {
|
||||
onCreateProject: () => void;
|
||||
onCollapseSidebar: () => void;
|
||||
updateAvailable: boolean;
|
||||
restartRequired: boolean;
|
||||
releaseInfo: ReleaseInfo | null;
|
||||
latestVersion: string | null;
|
||||
currentVersion: string;
|
||||
@@ -179,7 +178,6 @@ export default function SidebarContent({
|
||||
onCreateProject,
|
||||
onCollapseSidebar,
|
||||
updateAvailable,
|
||||
restartRequired,
|
||||
releaseInfo,
|
||||
latestVersion,
|
||||
currentVersion,
|
||||
@@ -555,7 +553,6 @@ export default function SidebarContent({
|
||||
|
||||
<SidebarFooter
|
||||
updateAvailable={updateAvailable}
|
||||
restartRequired={restartRequired}
|
||||
releaseInfo={releaseInfo}
|
||||
latestVersion={latestVersion}
|
||||
currentVersion={currentVersion}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Settings, ArrowUpCircle, Bug, AlertTriangle } from 'lucide-react';
|
||||
import { Settings, ArrowUpCircle, Bug } from 'lucide-react';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { IS_PLATFORM } from '../../../../constants/config';
|
||||
import type { ReleaseInfo } from '../../../../types/sharedTypes';
|
||||
@@ -18,7 +18,6 @@ function DiscordIcon({ className }: { className?: string }) {
|
||||
|
||||
type SidebarFooterProps = {
|
||||
updateAvailable: boolean;
|
||||
restartRequired: boolean;
|
||||
releaseInfo: ReleaseInfo | null;
|
||||
latestVersion: string | null;
|
||||
currentVersion: string;
|
||||
@@ -29,7 +28,6 @@ type SidebarFooterProps = {
|
||||
|
||||
export default function SidebarFooter({
|
||||
updateAvailable,
|
||||
restartRequired,
|
||||
releaseInfo,
|
||||
latestVersion,
|
||||
currentVersion,
|
||||
@@ -39,22 +37,6 @@ export default function SidebarFooter({
|
||||
}: SidebarFooterProps) {
|
||||
return (
|
||||
<div className="flex-shrink-0" style={{ paddingBottom: 'env(safe-area-inset-bottom, 0)' }}>
|
||||
{/* Restart-required banner: the running server version differs from the
|
||||
installed/frontend version (updated but not restarted). */}
|
||||
{restartRequired && (
|
||||
<>
|
||||
<div className="nav-divider" />
|
||||
<div className="px-2 py-1.5 md:px-2 md:py-1.5">
|
||||
<div className="flex items-center gap-2.5 rounded-lg border border-amber-300/60 bg-amber-50/80 px-2.5 py-2 dark:border-amber-700/40 dark:bg-amber-900/15">
|
||||
<AlertTriangle className="h-4 w-4 flex-shrink-0 text-amber-500 dark:text-amber-400" />
|
||||
<span className="min-w-0 flex-1 text-xs font-medium text-amber-700 dark:text-amber-300">
|
||||
{t('version.restartRequired')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Update banner */}
|
||||
{updateAvailable && (
|
||||
<>
|
||||
@@ -87,7 +69,7 @@ export default function SidebarFooter({
|
||||
onClick={onShowVersionModal}
|
||||
>
|
||||
<div className="relative flex-shrink-0">
|
||||
<ArrowUpCircle className="h-4 w-4 text-blue-500 dark:text-blue-400" />
|
||||
<ArrowUpCircle className="w-4.5 h-4.5 text-blue-500 dark:text-blue-400" />
|
||||
<span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 animate-pulse rounded-full bg-blue-500" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 text-left">
|
||||
@@ -163,12 +145,12 @@ export default function SidebarFooter({
|
||||
href={GITHUB_ISSUES_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
>
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
|
||||
<Bug className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
|
||||
<Bug className="w-4.5 h-4.5 text-muted-foreground" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-foreground">{t('actions.reportIssue')}</span>
|
||||
<span className="text-base font-medium text-foreground">{t('actions.reportIssue')}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -178,25 +160,25 @@ export default function SidebarFooter({
|
||||
href={DISCORD_INVITE_URL}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
>
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
|
||||
<DiscordIcon className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
|
||||
<DiscordIcon className="w-4.5 h-4.5 text-muted-foreground" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-foreground">{t('actions.joinCommunity')}</span>
|
||||
<span className="text-base font-medium text-foreground">{t('actions.joinCommunity')}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Mobile settings */}
|
||||
<div className="px-3 pb-3 pt-2 md:hidden">
|
||||
<button
|
||||
className="flex h-10 w-full items-center gap-3 rounded-xl bg-muted/40 px-3.5 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
|
||||
onClick={onShowSettings}
|
||||
>
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-background/80">
|
||||
<Settings className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
|
||||
<Settings className="w-4.5 h-4.5 text-muted-foreground" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-foreground">{t('actions.settings')}</span>
|
||||
<span className="text-base font-medium text-foreground">{t('actions.settings')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,7 +82,6 @@ export default function SidebarSessionItem({
|
||||
const isEditing = editingSession === session.id;
|
||||
const compactSessionAge = formatCompactSessionAge(sessionView.sessionTime, currentTime);
|
||||
const editingContainerRef = useRef<HTMLDivElement>(null);
|
||||
const showRecentIndicator = !isProcessing && sessionView.isActive;
|
||||
|
||||
// The rename panel sits inside a group-hover opacity wrapper, so leaving the row
|
||||
// would visually hide it. While editing, dismiss only when the user clicks outside
|
||||
@@ -120,7 +119,7 @@ export default function SidebarSessionItem({
|
||||
|
||||
return (
|
||||
<div className="group relative">
|
||||
{showRecentIndicator && (
|
||||
{!isProcessing && sessionView.isActive && (
|
||||
<div className="absolute left-0 top-1/2 -translate-x-1 -translate-y-1/2 transform">
|
||||
<Tooltip content={t('tooltips.activeSessionIndicator')} position="right">
|
||||
<div
|
||||
@@ -157,15 +156,13 @@ export default function SidebarSessionItem({
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
|
||||
<div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
|
||||
{isProcessing ? (
|
||||
<span className="ml-auto flex-shrink-0">
|
||||
<Tooltip content={t('tooltips.processingSessionIndicator', 'Processing session')} position="top">
|
||||
<span className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground">
|
||||
<span className="ml-auto flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-muted-foreground transition-opacity duration-200 group-hover:opacity-0">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
) : compactSessionAge && (
|
||||
<span className="ml-auto flex-shrink-0 text-[11px] text-muted-foreground">{compactSessionAge}</span>
|
||||
)}
|
||||
@@ -179,7 +176,7 @@ export default function SidebarSessionItem({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isProcessing && (
|
||||
{!sessionView.isCursorSession && (
|
||||
<button
|
||||
className="ml-1 flex h-5 w-5 items-center justify-center rounded-md bg-red-50 opacity-70 transition-transform active:scale-95 dark:bg-red-900/20"
|
||||
onClick={(event) => {
|
||||
@@ -198,42 +195,18 @@ export default function SidebarSessionItem({
|
||||
<Button
|
||||
variant="ghost"
|
||||
className={cn(
|
||||
'h-auto w-full justify-start rounded-md border bg-card p-2 text-left font-normal transition-all duration-150',
|
||||
isSelected ? 'border-primary/20 bg-primary/5' : 'border-border/30',
|
||||
!isSelected && isProcessing
|
||||
? 'border-border/60 bg-muted/20 hover:bg-muted/25'
|
||||
: !isSelected && sessionView.isActive
|
||||
? 'border-green-500/30 bg-green-50/5 hover:bg-green-50/10 dark:bg-green-900/5 dark:hover:bg-green-900/10'
|
||||
: 'hover:bg-accent/50',
|
||||
'w-full justify-start p-2 h-auto font-normal text-left hover:bg-accent/50 transition-colors duration-200',
|
||||
isSelected && 'bg-accent text-accent-foreground',
|
||||
!isSelected && isProcessing && 'bg-muted/20 hover:bg-accent/50',
|
||||
)}
|
||||
onClick={() => onSessionSelect(session, project.projectId)}
|
||||
>
|
||||
<div className="flex w-full min-w-0 items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md',
|
||||
isSelected ? 'bg-primary/10' : 'bg-muted/50',
|
||||
)}
|
||||
>
|
||||
<SessionProviderLogo provider={session.__provider} className="h-3 w-3" />
|
||||
</div>
|
||||
<div className="flex w-full min-w-0 items-start gap-2">
|
||||
<SessionProviderLogo provider={session.__provider} className="mt-0.5 h-3 w-3 flex-shrink-0" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
|
||||
{isProcessing ? (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-auto flex-shrink-0 transition-opacity duration-200',
|
||||
isEditing ? 'opacity-0' : 'group-hover:opacity-0',
|
||||
)}
|
||||
>
|
||||
<Tooltip content={t('tooltips.processingSessionIndicator', 'Processing session')} position="top">
|
||||
<span className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground">
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
) : compactSessionAge && (
|
||||
<div className={cn('flex items-center gap-2', isProcessing && 'pr-7')}>
|
||||
<div className="truncate text-xs font-medium text-foreground">{sessionView.sessionName}</div>
|
||||
{!isProcessing && compactSessionAge && (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-auto flex-shrink-0 text-[11px] text-muted-foreground transition-opacity duration-200',
|
||||
@@ -251,6 +224,19 @@ export default function SidebarSessionItem({
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
{isProcessing && (
|
||||
<div
|
||||
role="status"
|
||||
aria-label={t('tooltips.processingSessionIndicator', 'Processing session')}
|
||||
className={cn(
|
||||
'pointer-events-none absolute right-2 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-opacity duration-200',
|
||||
isEditing ? 'opacity-0' : 'group-hover:opacity-0',
|
||||
)}
|
||||
>
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
ref={editingContainerRef}
|
||||
className={cn(
|
||||
@@ -309,7 +295,7 @@ export default function SidebarSessionItem({
|
||||
>
|
||||
<Edit2 className="h-3 w-3 text-gray-600 dark:text-gray-400" />
|
||||
</button>
|
||||
{!isProcessing && (
|
||||
{!sessionView.isCursorSession && (
|
||||
<button
|
||||
className="flex h-6 w-6 items-center justify-center rounded bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/40"
|
||||
onClick={(event) => {
|
||||
|
||||
@@ -1,348 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
import type {
|
||||
ApiResponse,
|
||||
ProviderSkill,
|
||||
ProviderSkillCreatePayload,
|
||||
ProviderSkillsResponse,
|
||||
SkillsProject,
|
||||
SkillsProvider,
|
||||
SkillsScope,
|
||||
} from '../types';
|
||||
|
||||
type SkillsCacheEntry = {
|
||||
skills: ProviderSkill[];
|
||||
updatedAt: number;
|
||||
};
|
||||
|
||||
type ProjectTarget = {
|
||||
projectId: string;
|
||||
displayName: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
const SKILLS_CACHE_TTL_MS = 5 * 60_000;
|
||||
const skillsCache = new Map<string, SkillsCacheEntry>();
|
||||
|
||||
const SKILL_SCOPE_ORDER: Record<SkillsScope, number> = {
|
||||
user: 0,
|
||||
plugin: 1,
|
||||
repo: 2,
|
||||
project: 3,
|
||||
admin: 4,
|
||||
system: 5,
|
||||
};
|
||||
|
||||
const toResponseJson = async <T>(response: Response): Promise<T> => response.json() as Promise<T>;
|
||||
|
||||
const getApiErrorMessage = (payload: unknown, fallback: string): string => {
|
||||
if (!payload || typeof payload !== 'object') {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const record = payload as Record<string, unknown>;
|
||||
const error = record.error;
|
||||
if (error && typeof error === 'object') {
|
||||
const message = (error as Record<string, unknown>).message;
|
||||
if (typeof message === 'string' && message.trim()) {
|
||||
return message;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof error === 'string' && error.trim()) {
|
||||
return error;
|
||||
}
|
||||
|
||||
const details = record.details;
|
||||
if (typeof details === 'string' && details.trim()) {
|
||||
return details;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
};
|
||||
|
||||
const isSkillsScope = (value: unknown): value is SkillsScope => (
|
||||
value === 'user'
|
||||
|| value === 'project'
|
||||
|| value === 'plugin'
|
||||
|| value === 'repo'
|
||||
|| value === 'admin'
|
||||
|| value === 'system'
|
||||
);
|
||||
|
||||
const normalizeScope = (value: unknown): SkillsScope => (
|
||||
isSkillsScope(value) ? value : 'user'
|
||||
);
|
||||
|
||||
const createProjectTargets = (projects: SkillsProject[]): ProjectTarget[] => {
|
||||
const seenPaths = new Set<string>();
|
||||
|
||||
return projects.reduce<ProjectTarget[]>((acc, project) => {
|
||||
const projectPath = project.fullPath || project.path || '';
|
||||
if (!projectPath || seenPaths.has(projectPath)) {
|
||||
return acc;
|
||||
}
|
||||
|
||||
seenPaths.add(projectPath);
|
||||
acc.push({
|
||||
projectId: project.projectId,
|
||||
displayName: project.displayName || project.projectId,
|
||||
path: projectPath,
|
||||
});
|
||||
return acc;
|
||||
}, []);
|
||||
};
|
||||
|
||||
const normalizeSkill = (
|
||||
provider: SkillsProvider,
|
||||
skill: Partial<ProviderSkill>,
|
||||
project?: ProjectTarget,
|
||||
): ProviderSkill => {
|
||||
const scope = normalizeScope(skill.scope);
|
||||
const shouldAttachProject = scope === 'project' || scope === 'repo';
|
||||
|
||||
return {
|
||||
provider,
|
||||
name: String(skill.name ?? ''),
|
||||
description: String(skill.description ?? ''),
|
||||
command: String(skill.command ?? ''),
|
||||
scope,
|
||||
sourcePath: String(skill.sourcePath ?? ''),
|
||||
pluginName: typeof skill.pluginName === 'string' ? skill.pluginName : undefined,
|
||||
pluginId: typeof skill.pluginId === 'string' ? skill.pluginId : undefined,
|
||||
projectDisplayName: shouldAttachProject
|
||||
? project?.displayName ?? skill.projectDisplayName
|
||||
: skill.projectDisplayName,
|
||||
projectPath: shouldAttachProject
|
||||
? project?.path ?? skill.projectPath
|
||||
: skill.projectPath,
|
||||
};
|
||||
};
|
||||
|
||||
const getSkillIdentity = (skill: ProviderSkill): string => (
|
||||
[
|
||||
skill.provider,
|
||||
skill.scope,
|
||||
skill.command,
|
||||
skill.sourcePath || 'no-source-path',
|
||||
skill.projectPath || 'global',
|
||||
].join(':')
|
||||
);
|
||||
|
||||
const sortSkills = (skills: ProviderSkill[]): ProviderSkill[] => (
|
||||
[...skills].sort((left, right) => {
|
||||
const scopeDelta = SKILL_SCOPE_ORDER[left.scope] - SKILL_SCOPE_ORDER[right.scope];
|
||||
if (scopeDelta !== 0) {
|
||||
return scopeDelta;
|
||||
}
|
||||
|
||||
const projectDelta = (left.projectDisplayName || '').localeCompare(right.projectDisplayName || '');
|
||||
if (projectDelta !== 0) {
|
||||
return projectDelta;
|
||||
}
|
||||
|
||||
return left.command.localeCompare(right.command);
|
||||
})
|
||||
);
|
||||
|
||||
const mergeSkills = (
|
||||
existingSkills: ProviderSkill[],
|
||||
incomingSkills: ProviderSkill[],
|
||||
): ProviderSkill[] => {
|
||||
const skillsById = new Map<string, ProviderSkill>();
|
||||
existingSkills.forEach((skill) => {
|
||||
skillsById.set(getSkillIdentity(skill), skill);
|
||||
});
|
||||
incomingSkills.forEach((skill) => {
|
||||
skillsById.set(getSkillIdentity(skill), skill);
|
||||
});
|
||||
|
||||
return sortSkills([...skillsById.values()]);
|
||||
};
|
||||
|
||||
const fetchProviderSkills = async (
|
||||
provider: SkillsProvider,
|
||||
project?: ProjectTarget,
|
||||
): Promise<ProviderSkill[]> => {
|
||||
const params = new URLSearchParams();
|
||||
if (project?.path) {
|
||||
params.set('workspacePath', project.path);
|
||||
}
|
||||
|
||||
const response = await authenticatedFetch(
|
||||
`/api/providers/${provider}/skills${params.toString() ? `?${params.toString()}` : ''}`,
|
||||
);
|
||||
const data = await toResponseJson<ApiResponse<ProviderSkillsResponse>>(response);
|
||||
if (!response.ok || !data.success) {
|
||||
throw new Error(getApiErrorMessage(data, `Failed to load ${provider} skills`));
|
||||
}
|
||||
|
||||
return (data.data.skills || []).map((skill) => normalizeSkill(provider, skill, project));
|
||||
};
|
||||
|
||||
const saveProviderSkills = async (
|
||||
provider: SkillsProvider,
|
||||
payload: ProviderSkillCreatePayload,
|
||||
): Promise<ProviderSkill[]> => {
|
||||
const response = await authenticatedFetch(`/api/providers/${provider}/skills`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await toResponseJson<ApiResponse<ProviderSkillsResponse>>(response);
|
||||
if (!response.ok || !data.success) {
|
||||
throw new Error(getApiErrorMessage(data, 'Failed to save skills'));
|
||||
}
|
||||
|
||||
return (data.data.skills || []).map((skill) => normalizeSkill(provider, skill));
|
||||
};
|
||||
|
||||
const getCacheKey = (provider: SkillsProvider, projects: ProjectTarget[]): string => {
|
||||
const projectKey = projects.map((project) => project.path).sort().join('|');
|
||||
return `${provider}:${projectKey}`;
|
||||
};
|
||||
|
||||
const clearProviderSkillCache = (provider: SkillsProvider): void => {
|
||||
for (const cacheKey of [...skillsCache.keys()]) {
|
||||
if (cacheKey.startsWith(`${provider}:`)) {
|
||||
skillsCache.delete(cacheKey);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
type UseProviderSkillsArgs = {
|
||||
selectedProvider: SkillsProvider;
|
||||
currentProjects: SkillsProject[];
|
||||
};
|
||||
|
||||
export function useProviderSkills({ selectedProvider, currentProjects }: UseProviderSkillsArgs) {
|
||||
const [skills, setSkills] = useState<ProviderSkill[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isLoadingProjectScopes, setIsLoadingProjectScopes] = useState(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [saveStatus, setSaveStatus] = useState<'success' | 'error' | null>(null);
|
||||
const activeLoadIdRef = useRef(0);
|
||||
|
||||
const projectTargets = useMemo(() => createProjectTargets(currentProjects), [currentProjects]);
|
||||
const cacheKey = useMemo(() => getCacheKey(selectedProvider, projectTargets), [projectTargets, selectedProvider]);
|
||||
|
||||
const refreshSkills = useCallback(async (options: { force?: boolean } = {}) => {
|
||||
const loadId = activeLoadIdRef.current + 1;
|
||||
activeLoadIdRef.current = loadId;
|
||||
|
||||
const cachedEntry = skillsCache.get(cacheKey);
|
||||
const canUseCache = !options.force && cachedEntry && Date.now() - cachedEntry.updatedAt < SKILLS_CACHE_TTL_MS;
|
||||
if (canUseCache) {
|
||||
setSkills(cachedEntry.skills);
|
||||
setIsLoading(false);
|
||||
setIsLoadingProjectScopes(false);
|
||||
setLoadError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (cachedEntry && !options.force) {
|
||||
setSkills(cachedEntry.skills);
|
||||
} else {
|
||||
setSkills([]);
|
||||
}
|
||||
|
||||
setIsLoading(!cachedEntry);
|
||||
setIsLoadingProjectScopes(false);
|
||||
setLoadError(null);
|
||||
|
||||
let nextSkills = cachedEntry && !options.force ? cachedEntry.skills : [];
|
||||
let firstError: string | null = null;
|
||||
|
||||
try {
|
||||
const globalSkills = await fetchProviderSkills(selectedProvider);
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
nextSkills = mergeSkills(nextSkills, globalSkills);
|
||||
setSkills(nextSkills);
|
||||
} catch (error) {
|
||||
firstError = error instanceof Error ? error.message : 'Failed to load skills';
|
||||
}
|
||||
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
|
||||
if (projectTargets.length === 0) {
|
||||
const finalSkills = sortSkills(nextSkills);
|
||||
skillsCache.set(cacheKey, { skills: finalSkills, updatedAt: Date.now() });
|
||||
setSkills(finalSkills);
|
||||
setLoadError(firstError);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoadingProjectScopes(true);
|
||||
|
||||
await Promise.all(projectTargets.map(async (project) => {
|
||||
try {
|
||||
const projectSkills = await fetchProviderSkills(selectedProvider, project);
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
nextSkills = mergeSkills(nextSkills, projectSkills);
|
||||
setSkills(nextSkills);
|
||||
} catch (error) {
|
||||
firstError = firstError || (error instanceof Error ? error.message : 'Failed to load skills');
|
||||
}
|
||||
}));
|
||||
|
||||
if (activeLoadIdRef.current !== loadId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const finalSkills = sortSkills(nextSkills);
|
||||
skillsCache.set(cacheKey, { skills: finalSkills, updatedAt: Date.now() });
|
||||
setSkills(finalSkills);
|
||||
setLoadError(firstError);
|
||||
setIsLoadingProjectScopes(false);
|
||||
}, [cacheKey, projectTargets, selectedProvider]);
|
||||
|
||||
const addSkills = useCallback(async (payload: ProviderSkillCreatePayload) => {
|
||||
try {
|
||||
const createdSkills = await saveProviderSkills(selectedProvider, payload);
|
||||
clearProviderSkillCache(selectedProvider);
|
||||
await refreshSkills({ force: true });
|
||||
setSaveStatus('success');
|
||||
return createdSkills;
|
||||
} catch (error) {
|
||||
setSaveStatus('error');
|
||||
throw error;
|
||||
}
|
||||
}, [refreshSkills, selectedProvider]);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshSkills();
|
||||
}, [refreshSkills]);
|
||||
|
||||
useEffect(() => {
|
||||
setSaveStatus(null);
|
||||
}, [selectedProvider]);
|
||||
|
||||
useEffect(() => {
|
||||
if (saveStatus === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timer = window.setTimeout(() => setSaveStatus(null), 6000);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [saveStatus]);
|
||||
|
||||
return {
|
||||
skills,
|
||||
isLoading,
|
||||
isLoadingProjectScopes,
|
||||
loadError,
|
||||
saveStatus,
|
||||
addSkills,
|
||||
refreshSkills,
|
||||
};
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default as ProviderSkills } from './view/ProviderSkills';
|
||||
@@ -1,60 +0,0 @@
|
||||
import type { LLMProvider } from '../../types/app';
|
||||
|
||||
export type SkillsProvider = LLMProvider;
|
||||
export type SkillsScope = 'user' | 'project' | 'plugin' | 'repo' | 'admin' | 'system';
|
||||
|
||||
export type SkillsProject = {
|
||||
projectId: string;
|
||||
displayName?: string;
|
||||
fullPath?: string;
|
||||
path?: string;
|
||||
};
|
||||
|
||||
export type ProviderSkill = {
|
||||
provider: SkillsProvider;
|
||||
name: string;
|
||||
description: string;
|
||||
command: string;
|
||||
scope: SkillsScope;
|
||||
sourcePath: string;
|
||||
pluginName?: string;
|
||||
pluginId?: string;
|
||||
projectDisplayName?: string;
|
||||
projectPath?: string;
|
||||
};
|
||||
|
||||
export type ProviderSkillCreateEntryPayload = {
|
||||
content: string;
|
||||
directoryName?: string;
|
||||
fileName?: string;
|
||||
files?: Array<{
|
||||
relativePath: string;
|
||||
content: string;
|
||||
encoding: 'base64';
|
||||
}>;
|
||||
};
|
||||
|
||||
export type ProviderSkillCreatePayload = {
|
||||
entries: ProviderSkillCreateEntryPayload[];
|
||||
};
|
||||
|
||||
export type ProviderSkillsResponse = {
|
||||
provider: SkillsProvider;
|
||||
skills: Array<Partial<ProviderSkill>>;
|
||||
};
|
||||
|
||||
export type ApiSuccessResponse<T> = {
|
||||
success: true;
|
||||
data: T;
|
||||
};
|
||||
|
||||
export type ApiErrorResponse = {
|
||||
success: false;
|
||||
error?: {
|
||||
code?: string;
|
||||
message?: string;
|
||||
details?: unknown;
|
||||
};
|
||||
};
|
||||
|
||||
export type ApiResponse<T> = ApiSuccessResponse<T> | ApiErrorResponse;
|
||||
@@ -1,654 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import {
|
||||
CheckCircle2,
|
||||
FileCode2,
|
||||
FileText,
|
||||
FileUp,
|
||||
FolderUp,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Search,
|
||||
Upload,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { cn } from '../../../lib/utils';
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Input,
|
||||
} from '../../../shared/view/ui';
|
||||
import { useProviderSkills } from '../hooks/useProviderSkills';
|
||||
import type {
|
||||
ProviderSkill,
|
||||
ProviderSkillCreateEntryPayload,
|
||||
SkillsProject,
|
||||
SkillsProvider,
|
||||
SkillsScope,
|
||||
} from '../types';
|
||||
|
||||
type ProviderSkillsProps = {
|
||||
selectedProvider: SkillsProvider;
|
||||
currentProjects: SkillsProject[];
|
||||
};
|
||||
|
||||
type QueuedSkillSourceFile = {
|
||||
file: File;
|
||||
relativePath: string;
|
||||
};
|
||||
|
||||
type QueuedSkillFile = {
|
||||
id: string;
|
||||
name: string;
|
||||
size: number;
|
||||
kind: 'markdown' | 'folder';
|
||||
skillFile: File;
|
||||
files: QueuedSkillSourceFile[];
|
||||
};
|
||||
|
||||
const MAX_SKILL_FOLDER_FILES = 500;
|
||||
const MAX_SKILL_FOLDER_BYTES = 30 * 1024 * 1024;
|
||||
|
||||
const PROVIDER_NAMES: Record<SkillsProvider, string> = {
|
||||
claude: 'Claude',
|
||||
codex: 'Codex',
|
||||
cursor: 'Cursor',
|
||||
gemini: 'Gemini',
|
||||
opencode: 'OpenCode',
|
||||
};
|
||||
|
||||
const PROVIDER_SKILL_PATHS: Record<Exclude<SkillsProvider, 'opencode'>, string> = {
|
||||
claude: '~/.claude/skills/<skill-name>/SKILL.md',
|
||||
codex: '~/.agents/skills/<skill-name>/SKILL.md',
|
||||
cursor: '~/.cursor/skills/<skill-name>/SKILL.md',
|
||||
gemini: '~/.gemini/skills/<skill-name>/SKILL.md',
|
||||
};
|
||||
|
||||
const SCOPE_LABELS: Record<SkillsScope, string> = {
|
||||
user: 'User',
|
||||
plugin: 'Plugin',
|
||||
repo: 'Repo',
|
||||
project: 'Project',
|
||||
admin: 'Admin',
|
||||
system: 'System',
|
||||
};
|
||||
|
||||
const SCOPE_BADGE_CLASSES: Record<SkillsScope, string> = {
|
||||
user: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
|
||||
plugin: 'border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300',
|
||||
repo: 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300',
|
||||
project: 'border-orange-500/30 bg-orange-500/10 text-orange-700 dark:text-orange-300',
|
||||
admin: 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-300',
|
||||
system: 'border-slate-500/30 bg-slate-500/10 text-slate-700 dark:text-slate-300',
|
||||
};
|
||||
|
||||
const SCOPE_ORDER: SkillsScope[] = ['user', 'plugin', 'repo', 'project', 'admin', 'system'];
|
||||
|
||||
const groupSkillsByScope = (skills: ProviderSkill[]): Array<{ scope: SkillsScope; skills: ProviderSkill[] }> => (
|
||||
SCOPE_ORDER
|
||||
.map((scope) => ({ scope, skills: skills.filter((skill) => skill.scope === scope) }))
|
||||
.filter((group) => group.skills.length > 0)
|
||||
);
|
||||
|
||||
const formatFileSize = (size: number): string => {
|
||||
if (size < 1024) {
|
||||
return `${size} B`;
|
||||
}
|
||||
|
||||
if (size < 1024 * 1024) {
|
||||
return `${(size / 1024).toFixed(1)} KB`;
|
||||
}
|
||||
|
||||
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
|
||||
};
|
||||
|
||||
const getBrowserRelativePath = (file: File): string => {
|
||||
const fileWithRelativePath = file as File & {
|
||||
path?: string;
|
||||
webkitRelativePath?: string;
|
||||
};
|
||||
return (
|
||||
fileWithRelativePath.webkitRelativePath
|
||||
|| fileWithRelativePath.path
|
||||
|| file.name
|
||||
)
|
||||
.replace(/\\/g, '/')
|
||||
.replace(/^\.\/+/, '')
|
||||
.replace(/^\/+/, '');
|
||||
};
|
||||
|
||||
const getParentPath = (filePath: string): string => {
|
||||
const separatorIndex = filePath.lastIndexOf('/');
|
||||
return separatorIndex >= 0 ? filePath.slice(0, separatorIndex) : '';
|
||||
};
|
||||
|
||||
const getBaseName = (filePath: string): string => {
|
||||
const segments = filePath.split('/').filter(Boolean);
|
||||
return segments.at(-1) || 'skill';
|
||||
};
|
||||
|
||||
const readFileAsBase64 = (file: File): Promise<string> => new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = typeof reader.result === 'string' ? reader.result : '';
|
||||
const separatorIndex = result.indexOf(',');
|
||||
resolve(separatorIndex >= 0 ? result.slice(separatorIndex + 1) : result);
|
||||
};
|
||||
reader.onerror = () => reject(reader.error ?? new Error(`Failed to read ${file.name}`));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
const buildQueuedSkillFolders = (selectedFiles: File[]): QueuedSkillFile[] => {
|
||||
if (selectedFiles.length > MAX_SKILL_FOLDER_FILES) {
|
||||
throw new Error(`A skill folder can contain up to ${MAX_SKILL_FOLDER_FILES} files.`);
|
||||
}
|
||||
|
||||
const totalSize = selectedFiles.reduce((size, file) => size + file.size, 0);
|
||||
if (totalSize > MAX_SKILL_FOLDER_BYTES) {
|
||||
throw new Error('Selected skill folders must be smaller than 30 MB in total.');
|
||||
}
|
||||
|
||||
const files = selectedFiles.map((file) => ({
|
||||
file,
|
||||
relativePath: getBrowserRelativePath(file),
|
||||
}));
|
||||
const skillRoots = files
|
||||
.filter(({ relativePath }) => getBaseName(relativePath).toLowerCase() === 'skill.md')
|
||||
.map(({ relativePath }) => getParentPath(relativePath))
|
||||
.sort((left, right) => right.length - left.length);
|
||||
|
||||
if (skillRoots.length === 0) {
|
||||
throw new Error('The selected folder does not contain a SKILL.md file.');
|
||||
}
|
||||
|
||||
return skillRoots.map((skillRoot) => {
|
||||
const skillFiles = files.filter(({ relativePath }) => {
|
||||
const owningRoot = skillRoots.find((candidateRoot) => {
|
||||
const normalizedRelativePath = relativePath.toLowerCase();
|
||||
const normalizedSkillPath = `${candidateRoot}/skill.md`.toLowerCase();
|
||||
return normalizedRelativePath === normalizedSkillPath
|
||||
|| relativePath.startsWith(`${candidateRoot}/`);
|
||||
});
|
||||
return owningRoot === skillRoot;
|
||||
});
|
||||
const skillSourceFile = skillFiles.find(
|
||||
({ relativePath }) => (
|
||||
relativePath.toLowerCase() === `${skillRoot}/skill.md`.toLowerCase()
|
||||
),
|
||||
);
|
||||
if (!skillSourceFile) {
|
||||
throw new Error(`Could not read SKILL.md from ${getBaseName(skillRoot)}.`);
|
||||
}
|
||||
|
||||
return {
|
||||
id: `folder:${skillRoot}:${skillFiles.map(({ file }) => file.lastModified).join(':')}`,
|
||||
name: getBaseName(skillRoot),
|
||||
size: skillFiles.reduce((size, { file }) => size + file.size, 0),
|
||||
kind: 'folder' as const,
|
||||
skillFile: skillSourceFile.file,
|
||||
files: skillFiles.map(({ file, relativePath }) => ({
|
||||
file,
|
||||
relativePath: skillRoot ? relativePath.slice(skillRoot.length + 1) : relativePath,
|
||||
})),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export default function ProviderSkills({ selectedProvider, currentProjects }: ProviderSkillsProps) {
|
||||
const { t } = useTranslation('settings');
|
||||
const {
|
||||
skills,
|
||||
isLoading,
|
||||
isLoadingProjectScopes,
|
||||
loadError,
|
||||
saveStatus,
|
||||
addSkills,
|
||||
refreshSkills,
|
||||
} = useProviderSkills({ selectedProvider, currentProjects });
|
||||
const [queuedFiles, setQueuedFiles] = useState<QueuedSkillFile[]>([]);
|
||||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const folderInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const providerName = PROVIDER_NAMES[selectedProvider];
|
||||
const providerPath = selectedProvider === 'opencode' ? null : PROVIDER_SKILL_PATHS[selectedProvider];
|
||||
|
||||
useEffect(() => {
|
||||
setQueuedFiles([]);
|
||||
setSubmitError(null);
|
||||
setIsSubmitting(false);
|
||||
setSearchQuery('');
|
||||
}, [selectedProvider]);
|
||||
|
||||
useEffect(() => {
|
||||
folderInputRef.current?.setAttribute('webkitdirectory', '');
|
||||
folderInputRef.current?.setAttribute('directory', '');
|
||||
}, []);
|
||||
|
||||
const filteredSkills = useMemo(() => {
|
||||
const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return skills;
|
||||
}
|
||||
|
||||
return skills.filter((skill) => (
|
||||
[
|
||||
skill.command,
|
||||
skill.name,
|
||||
skill.description,
|
||||
skill.scope,
|
||||
skill.pluginName,
|
||||
skill.projectDisplayName,
|
||||
skill.sourcePath,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.some((value) => value?.toLocaleLowerCase().includes(normalizedQuery))
|
||||
));
|
||||
}, [searchQuery, skills]);
|
||||
|
||||
const groupedSkills = useMemo(() => groupSkillsByScope(filteredSkills), [filteredSkills]);
|
||||
|
||||
const queueSkillFolders = useCallback((selectedFiles: File[]) => {
|
||||
const queuedFolders = buildQueuedSkillFolders(selectedFiles);
|
||||
setQueuedFiles((previous) => {
|
||||
const nextMap = new Map(previous.map((file) => [file.id, file]));
|
||||
queuedFolders.forEach((folder) => nextMap.set(folder.id, folder));
|
||||
return [...nextMap.values()].slice(0, 20);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback((files: File[]) => {
|
||||
const includesDirectory = files.some((file) => getBrowserRelativePath(file).includes('/'));
|
||||
if (includesDirectory) {
|
||||
try {
|
||||
queueSkillFolders(files);
|
||||
setSubmitError(null);
|
||||
} catch (error) {
|
||||
setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const acceptedFiles = files
|
||||
.filter((file) => file.name.toLowerCase().endsWith('.md'))
|
||||
.slice(0, 20);
|
||||
|
||||
if (acceptedFiles.length === 0) {
|
||||
setSubmitError('Drop one or more markdown files or a folder containing SKILL.md.');
|
||||
return;
|
||||
}
|
||||
|
||||
setQueuedFiles((previous) => {
|
||||
const nextMap = new Map(previous.map((file) => [file.id, file]));
|
||||
acceptedFiles.forEach((file) => {
|
||||
const id = `${file.name}:${file.size}:${file.lastModified}`;
|
||||
nextMap.set(id, {
|
||||
id,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
kind: 'markdown',
|
||||
skillFile: file,
|
||||
files: [{ file, relativePath: 'SKILL.md' }],
|
||||
});
|
||||
});
|
||||
|
||||
return [...nextMap.values()].slice(0, 20);
|
||||
});
|
||||
setSubmitError(null);
|
||||
}, [queueSkillFolders]);
|
||||
|
||||
const handleFolderSelection = useCallback((selectedFiles: File[]) => {
|
||||
if (selectedFiles.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
queueSkillFolders(selectedFiles);
|
||||
setSubmitError(null);
|
||||
} catch (error) {
|
||||
setSubmitError(error instanceof Error ? error.message : 'Failed to read skill folder');
|
||||
}
|
||||
}, [queueSkillFolders]);
|
||||
|
||||
const { getRootProps, isDragActive } = useDropzone({
|
||||
maxFiles: MAX_SKILL_FOLDER_FILES,
|
||||
noClick: true,
|
||||
noKeyboard: true,
|
||||
onDrop: handleDrop,
|
||||
});
|
||||
|
||||
const handleUploadInstall = useCallback(async () => {
|
||||
if (queuedFiles.length === 0) {
|
||||
setSubmitError('Add one or more markdown files first.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setSubmitError(null);
|
||||
|
||||
try {
|
||||
const entries = await Promise.all<ProviderSkillCreateEntryPayload>(queuedFiles.map(async (queuedFile) => ({
|
||||
fileName: queuedFile.kind === 'folder' ? `${queuedFile.name}.md` : queuedFile.name,
|
||||
directoryName: queuedFile.kind === 'folder' ? queuedFile.name : undefined,
|
||||
content: await queuedFile.skillFile.text(),
|
||||
files: queuedFile.kind === 'folder'
|
||||
? await Promise.all(
|
||||
queuedFile.files
|
||||
.filter(({ relativePath }) => relativePath.toLowerCase() !== 'skill.md')
|
||||
.map(async ({ file, relativePath }) => ({
|
||||
relativePath,
|
||||
content: await readFileAsBase64(file),
|
||||
encoding: 'base64' as const,
|
||||
})),
|
||||
)
|
||||
: undefined,
|
||||
})));
|
||||
await addSkills({ entries });
|
||||
setQueuedFiles([]);
|
||||
} catch (error) {
|
||||
setSubmitError(error instanceof Error ? error.message : 'Failed to import skills');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
}, [addSkills, queuedFiles]);
|
||||
|
||||
return (
|
||||
<div className="min-w-0 space-y-4 overflow-x-hidden">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
<div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-muted/20 text-muted-foreground">
|
||||
<FileCode2 className="h-4 w-4" strokeWidth={1.7} />
|
||||
</div>
|
||||
<div className="min-w-0 space-y-1">
|
||||
<h3 className="text-lg font-medium text-foreground">{t('tabs.skills', { defaultValue: 'Skills' })}</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Install global {providerName} skills from `.md` files or complete skill folders.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={() => void refreshSkills({ force: true })}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full sm:w-auto"
|
||||
disabled={isLoading || isLoadingProjectScopes}
|
||||
>
|
||||
<RefreshCw className={cn('h-4 w-4', (isLoading || isLoadingProjectScopes) && 'animate-spin')} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="min-w-0 overflow-hidden border-border/70 bg-background shadow-sm">
|
||||
<CardHeader className="space-y-3 border-b border-border/60 bg-muted/20">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<div className="text-sm font-medium text-foreground">Upload Skills</div>
|
||||
<div className="min-w-0 rounded-2xl border border-border/60 bg-background/70 p-3">
|
||||
<div className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Install Path</div>
|
||||
<code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{providerPath}</code>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4 p-4">
|
||||
<div className="space-y-4">
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={cn(
|
||||
'rounded-3xl border border-dashed p-4 transition-colors sm:p-5',
|
||||
isDragActive
|
||||
? 'border-foreground/40 bg-muted/35'
|
||||
: 'border-border/70 bg-muted/15 hover:border-foreground/25 hover:bg-muted/25',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".md,text/markdown"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
handleDrop(Array.from(event.target.files ?? []));
|
||||
event.target.value = '';
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
ref={folderInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(event) => {
|
||||
handleFolderSelection(Array.from(event.target.files ?? []));
|
||||
event.target.value = '';
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col items-center justify-center gap-3 py-4 text-center sm:py-6">
|
||||
<FileUp className="h-7 w-7 text-muted-foreground" strokeWidth={1.5} />
|
||||
<div className="space-y-1">
|
||||
<div className="text-sm font-medium text-foreground">Drop `.md` files or skill folders here</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Upload standalone definitions or choose a full folder to include its scripts, references, and assets.
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
<FileUp className="h-4 w-4" />
|
||||
Choose Files
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => folderInputRef.current?.click()}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
<FolderUp className="h-4 w-4" />
|
||||
Choose Folder
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{queuedFiles.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm font-medium text-foreground">Queued Files</div>
|
||||
<div className="grid gap-2">
|
||||
{queuedFiles.map((queuedFile) => (
|
||||
<div
|
||||
key={queuedFile.id}
|
||||
className="flex flex-col gap-3 rounded-2xl border border-border/70 bg-background/70 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-medium text-foreground">{queuedFile.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{queuedFile.kind === 'folder'
|
||||
? `${queuedFile.files.length} files`
|
||||
: 'Markdown file'}
|
||||
{' · '}
|
||||
{formatFileSize(queuedFile.size)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="w-full sm:w-auto"
|
||||
onClick={() => {
|
||||
setQueuedFiles((previous) => previous.filter((file) => file.id !== queuedFile.id));
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => void handleUploadInstall()}
|
||||
disabled={isSubmitting}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
{isSubmitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Upload className="h-4 w-4" />}
|
||||
Install {queuedFiles.length > 0 ? `${queuedFiles.length} Skill${queuedFiles.length === 1 ? '' : 's'}` : 'Skills'}
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Folder uploads keep the selected folder name; standalone files use the `name` in `SKILL.md`.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(submitError || loadError) && (
|
||||
<div className="rounded-2xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-800/60 dark:bg-red-900/20 dark:text-red-200">
|
||||
{submitError || loadError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{saveStatus === 'success' && (
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-3 py-1 text-xs font-medium text-emerald-700 dark:text-emerald-300">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
Skills saved successfully.
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0 border-border/70 bg-background/80 shadow-sm">
|
||||
<CardHeader className="border-b border-border/60">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||||
<div className="min-w-0">
|
||||
<CardTitle>Visible Skills</CardTitle>
|
||||
<CardDescription>
|
||||
The list below comes from the provider skill discovery API and includes global and project-aware locations.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="relative w-full lg:w-72">
|
||||
<Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
placeholder="Search skills..."
|
||||
aria-label="Search visible skills"
|
||||
className="h-9 w-full pl-9 pr-9"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchQuery('')}
|
||||
aria-label="Clear skill search"
|
||||
className="absolute right-1.5 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{isLoadingProjectScopes && (
|
||||
<div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
Scanning project skills…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-5 p-4">
|
||||
{isLoading && skills.length === 0 && (
|
||||
<div className="flex min-h-[180px] items-center justify-center text-sm text-muted-foreground">
|
||||
Loading {providerName} skills…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && skills.length === 0 && (
|
||||
<div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl border border-border/60 bg-background/80 text-muted-foreground">
|
||||
<FileText className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="mt-4 text-sm font-medium text-foreground">No skills discovered yet</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
Add a global skill above or create project-specific skill folders in your workspace.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && skills.length > 0 && filteredSkills.length === 0 && (
|
||||
<div className="rounded-3xl border border-dashed border-border/70 bg-muted/15 px-4 py-10 text-center">
|
||||
<Search className="mx-auto h-6 w-6 text-muted-foreground" />
|
||||
<div className="mt-3 text-sm font-medium text-foreground">No matching skills</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
Try a different command, name, scope, project, or source path.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groupedSkills.map((group) => (
|
||||
<section key={group.scope} className="min-w-0 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className={cn('rounded-full px-2.5 py-1 text-xs', SCOPE_BADGE_CLASSES[group.scope])}>
|
||||
{SCOPE_LABELS[group.scope]}
|
||||
</Badge>
|
||||
<span className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
||||
{group.skills.length} skill{group.skills.length === 1 ? '' : 's'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid min-w-0 gap-3 lg:grid-cols-2">
|
||||
{group.skills.map((skill) => (
|
||||
<div
|
||||
key={`${skill.command}:${skill.sourcePath}:${skill.projectPath || 'global'}`}
|
||||
className="min-w-0 rounded-3xl border border-border/70 bg-gradient-to-br from-background via-background to-muted/25 p-4 shadow-sm"
|
||||
>
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="break-all font-mono text-sm font-semibold text-foreground">{skill.command}</div>
|
||||
<div className="text-sm text-muted-foreground">{skill.name}</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">
|
||||
{skill.description || 'No description provided in the skill front matter.'}
|
||||
</p>
|
||||
|
||||
<div className="mt-4 flex flex-wrap items-center gap-2">
|
||||
{skill.pluginName && (
|
||||
<Badge variant="outline" className="rounded-full bg-background/70">
|
||||
Plugin: {skill.pluginName}
|
||||
</Badge>
|
||||
)}
|
||||
{skill.projectDisplayName && (
|
||||
<Badge variant="outline" className="rounded-full bg-background/70">
|
||||
Project: {skill.projectDisplayName}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 min-w-0 rounded-2xl border border-border/60 bg-muted/20 px-3 py-2">
|
||||
<div className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">Source</div>
|
||||
<code className="mt-1 block whitespace-normal break-all text-xs text-foreground">{skill.sourcePath}</code>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -29,7 +29,6 @@ type UseProjectsStateArgs = {
|
||||
*/
|
||||
type SessionUpsertedEvent = ServerEvent & {
|
||||
sessionId: string;
|
||||
providerSessionId?: string | null;
|
||||
provider: LLMProvider;
|
||||
session: ProjectSession;
|
||||
project: {
|
||||
@@ -52,36 +51,12 @@ type RegisterOptimisticSessionArgs = {
|
||||
summary?: string | null;
|
||||
};
|
||||
|
||||
type ProjectSessionPage = Pick<Project, 'sessions' | 'sessionMeta'>;
|
||||
|
||||
const DEFAULT_PROVIDER: LLMProvider = 'claude';
|
||||
|
||||
const serialize = (value: unknown) => JSON.stringify(value ?? null);
|
||||
|
||||
const readSelectedProvider = (): LLMProvider => {
|
||||
try {
|
||||
const storedProvider = localStorage.getItem('selected-provider');
|
||||
return storedProvider ? storedProvider as LLMProvider : DEFAULT_PROVIDER;
|
||||
} catch {
|
||||
return DEFAULT_PROVIDER;
|
||||
}
|
||||
};
|
||||
|
||||
const getSessionProvider = (session: ProjectSession): LLMProvider => {
|
||||
const provider = session.__provider ?? session.provider;
|
||||
return typeof provider === 'string' && provider.trim()
|
||||
? provider as LLMProvider
|
||||
: DEFAULT_PROVIDER;
|
||||
};
|
||||
|
||||
const normalizeSessionProvider = (session: ProjectSession): ProjectSession => ({
|
||||
...session,
|
||||
__provider: getSessionProvider(session),
|
||||
});
|
||||
|
||||
const projectsHaveChanges = (
|
||||
prevProjects: Project[],
|
||||
nextProjects: Project[],
|
||||
includeExternalSessions: boolean,
|
||||
): boolean => {
|
||||
if (prevProjects.length !== nextProjects.length) {
|
||||
return true;
|
||||
@@ -93,14 +68,28 @@ const projectsHaveChanges = (
|
||||
return true;
|
||||
}
|
||||
|
||||
return (
|
||||
const baseChanged =
|
||||
nextProject.projectId !== prevProject.projectId ||
|
||||
nextProject.displayName !== prevProject.displayName ||
|
||||
nextProject.fullPath !== prevProject.fullPath ||
|
||||
Boolean(nextProject.isStarred) !== Boolean(prevProject.isStarred) ||
|
||||
serialize(nextProject.sessionMeta) !== serialize(prevProject.sessionMeta) ||
|
||||
serialize(nextProject.sessions) !== serialize(prevProject.sessions) ||
|
||||
serialize(nextProject.taskmaster) !== serialize(prevProject.taskmaster)
|
||||
serialize(nextProject.taskmaster) !== serialize(prevProject.taskmaster);
|
||||
|
||||
if (baseChanged) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!includeExternalSessions) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
serialize(nextProject.cursorSessions) !== serialize(prevProject.cursorSessions) ||
|
||||
serialize(nextProject.codexSessions) !== serialize(prevProject.codexSessions) ||
|
||||
serialize(nextProject.geminiSessions) !== serialize(prevProject.geminiSessions) ||
|
||||
serialize(nextProject.opencodeSessions) !== serialize(prevProject.opencodeSessions)
|
||||
);
|
||||
});
|
||||
};
|
||||
@@ -132,7 +121,13 @@ const mergeTaskMasterCache = (nextProjects: Project[], previousProjects: Project
|
||||
};
|
||||
|
||||
const getProjectSessions = (project: Project): ProjectSession[] => {
|
||||
return project.sessions ?? [];
|
||||
return [
|
||||
...(project.sessions ?? []),
|
||||
...(project.codexSessions ?? []),
|
||||
...(project.cursorSessions ?? []),
|
||||
...(project.geminiSessions ?? []),
|
||||
...(project.opencodeSessions ?? []),
|
||||
];
|
||||
};
|
||||
|
||||
const countLoadedProjectSessions = (project: Project): number => getProjectSessions(project).length;
|
||||
@@ -176,6 +171,10 @@ const mergeExpandedSessionPages = (previousProjects: Project[], incomingProjects
|
||||
const mergedProject: Project = {
|
||||
...incomingProject,
|
||||
sessions: mergeSessionProviderLists(incomingProject.sessions ?? [], previousProject.sessions ?? []),
|
||||
cursorSessions: mergeSessionProviderLists(incomingProject.cursorSessions ?? [], previousProject.cursorSessions ?? []),
|
||||
codexSessions: mergeSessionProviderLists(incomingProject.codexSessions ?? [], previousProject.codexSessions ?? []),
|
||||
geminiSessions: mergeSessionProviderLists(incomingProject.geminiSessions ?? [], previousProject.geminiSessions ?? []),
|
||||
opencodeSessions: mergeSessionProviderLists(incomingProject.opencodeSessions ?? [], previousProject.opencodeSessions ?? []),
|
||||
};
|
||||
|
||||
const totalSessions = Number(incomingProject.sessionMeta?.total ?? previousLoadedCount);
|
||||
@@ -191,11 +190,15 @@ const mergeExpandedSessionPages = (previousProjects: Project[], incomingProjects
|
||||
|
||||
const mergeProjectSessionPage = (
|
||||
existingProject: Project,
|
||||
sessionsPage: ProjectSessionPage,
|
||||
sessionsPage: Pick<Project, 'sessions' | 'cursorSessions' | 'codexSessions' | 'geminiSessions' | 'opencodeSessions' | 'sessionMeta'>,
|
||||
): Project => {
|
||||
const mergedProject: Project = {
|
||||
...existingProject,
|
||||
sessions: mergeSessionProviderLists(existingProject.sessions ?? [], sessionsPage.sessions ?? []),
|
||||
cursorSessions: mergeSessionProviderLists(existingProject.cursorSessions ?? [], sessionsPage.cursorSessions ?? []),
|
||||
codexSessions: mergeSessionProviderLists(existingProject.codexSessions ?? [], sessionsPage.codexSessions ?? []),
|
||||
geminiSessions: mergeSessionProviderLists(existingProject.geminiSessions ?? [], sessionsPage.geminiSessions ?? []),
|
||||
opencodeSessions: mergeSessionProviderLists(existingProject.opencodeSessions ?? [], sessionsPage.opencodeSessions ?? []),
|
||||
};
|
||||
|
||||
const totalSessions = Number(sessionsPage.sessionMeta?.total ?? existingProject.sessionMeta?.total ?? 0);
|
||||
@@ -209,77 +212,48 @@ const mergeProjectSessionPage = (
|
||||
return mergedProject;
|
||||
};
|
||||
|
||||
const getSessionAliasIds = (event: SessionUpsertedEvent): Set<string> => {
|
||||
const ids = new Set<string>();
|
||||
const add = (value: unknown) => {
|
||||
if (typeof value !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmed = value.trim();
|
||||
if (trimmed) {
|
||||
ids.add(trimmed);
|
||||
}
|
||||
};
|
||||
|
||||
add(event.sessionId);
|
||||
add(event.providerSessionId);
|
||||
add(event.session?.id);
|
||||
|
||||
return ids;
|
||||
/**
|
||||
* Resolves which provider bucket on a `Project` holds sessions for a provider.
|
||||
* The legacy payload keeps Claude sessions in `sessions` and the other
|
||||
* providers in their own arrays.
|
||||
*/
|
||||
const providerBucketKey = (
|
||||
provider: LLMProvider,
|
||||
): 'sessions' | 'cursorSessions' | 'codexSessions' | 'geminiSessions' | 'opencodeSessions' => {
|
||||
if (provider === 'cursor') return 'cursorSessions';
|
||||
if (provider === 'codex') return 'codexSessions';
|
||||
if (provider === 'gemini') return 'geminiSessions';
|
||||
if (provider === 'opencode') return 'opencodeSessions';
|
||||
return 'sessions';
|
||||
};
|
||||
|
||||
/**
|
||||
* Upserts one session into a project's normalized session list.
|
||||
* Upserts one session into the matching provider bucket of a project.
|
||||
*
|
||||
* Existing rows are updated in place (summary/lastActivity changes from the
|
||||
* watcher); new rows are prepended since the watcher only fires for sessions
|
||||
* with fresh activity. `sessionMeta.total` grows only on insert.
|
||||
*/
|
||||
const upsertSessionIntoProject = (project: Project, event: SessionUpsertedEvent): Project => {
|
||||
const sessions = project.sessions ?? [];
|
||||
const aliasIds = getSessionAliasIds(event);
|
||||
const normalizedSession: ProjectSession = {
|
||||
...event.session,
|
||||
id: event.sessionId,
|
||||
__provider: event.provider,
|
||||
};
|
||||
const existingIndex = sessions.findIndex((session) => aliasIds.has(String(session.id)));
|
||||
const bucketKey = providerBucketKey(event.provider);
|
||||
const bucket = project[bucketKey] ?? [];
|
||||
const existingIndex = bucket.findIndex((session) => session.id === event.sessionId);
|
||||
|
||||
let nextSessions: ProjectSession[];
|
||||
let inserted = false;
|
||||
let nextBucket: ProjectSession[];
|
||||
if (existingIndex >= 0) {
|
||||
let changed = false;
|
||||
nextSessions = [];
|
||||
|
||||
for (const [index, session] of sessions.entries()) {
|
||||
if (index === existingIndex) {
|
||||
const updated = { ...session, ...normalizedSession };
|
||||
if (serialize(session) !== serialize(updated)) {
|
||||
changed = true;
|
||||
}
|
||||
nextSessions.push(updated);
|
||||
continue;
|
||||
}
|
||||
|
||||
if (aliasIds.has(String(session.id))) {
|
||||
changed = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
nextSessions.push(session);
|
||||
}
|
||||
|
||||
if (!changed) {
|
||||
const existing = bucket[existingIndex];
|
||||
const updated = { ...existing, ...event.session };
|
||||
if (serialize(existing) === serialize(updated)) {
|
||||
return project;
|
||||
}
|
||||
nextBucket = [...bucket];
|
||||
nextBucket[existingIndex] = updated;
|
||||
} else {
|
||||
nextSessions = [normalizedSession, ...sessions];
|
||||
inserted = true;
|
||||
nextBucket = [event.session, ...bucket];
|
||||
}
|
||||
|
||||
const next: Project = { ...project, sessions: nextSessions };
|
||||
if (inserted) {
|
||||
const next: Project = { ...project, [bucketKey]: nextBucket };
|
||||
if (existingIndex < 0) {
|
||||
const total = Number(project.sessionMeta?.total ?? 0) + 1;
|
||||
next.sessionMeta = {
|
||||
...project.sessionMeta,
|
||||
@@ -298,33 +272,15 @@ const projectFromRegistration = (project: Project): Project => ({
|
||||
displayName: project.displayName,
|
||||
isStarred: project.isStarred,
|
||||
sessions: project.sessions ?? [],
|
||||
cursorSessions: project.cursorSessions ?? [],
|
||||
codexSessions: project.codexSessions ?? [],
|
||||
geminiSessions: project.geminiSessions ?? [],
|
||||
opencodeSessions: project.opencodeSessions ?? [],
|
||||
sessionMeta: project.sessionMeta ?? { hasMore: false, total: countLoadedProjectSessions(project) },
|
||||
taskmaster: project.taskmaster,
|
||||
});
|
||||
|
||||
const removeSessionFromProject = (project: Project, sessionIdToDelete: string): Project => {
|
||||
const sessions = project.sessions ?? [];
|
||||
const nextSessions = sessions.filter((session) => session.id !== sessionIdToDelete);
|
||||
if (nextSessions.length === sessions.length) {
|
||||
return project;
|
||||
}
|
||||
|
||||
const updatedProject: Project = {
|
||||
...project,
|
||||
sessions: nextSessions,
|
||||
};
|
||||
|
||||
const totalSessions = Math.max(0, Number(project.sessionMeta?.total ?? 0) - 1);
|
||||
updatedProject.sessionMeta = {
|
||||
...project.sessionMeta,
|
||||
total: totalSessions,
|
||||
hasMore: countLoadedProjectSessions(updatedProject) < totalSessions,
|
||||
};
|
||||
|
||||
return updatedProject;
|
||||
};
|
||||
|
||||
const VALID_TABS: Set<string> = new Set(['chat', 'files', 'shell', 'git', 'tasks', 'browser']);
|
||||
const VALID_TABS: Set<string> = new Set(['chat', 'files', 'shell', 'git', 'tasks', 'preview']);
|
||||
|
||||
const isValidTab = (tab: string): tab is AppTab => {
|
||||
return VALID_TABS.has(tab) || tab.startsWith('plugin:');
|
||||
@@ -421,7 +377,7 @@ export function useProjectsState({
|
||||
return mergedProjects;
|
||||
}
|
||||
|
||||
return projectsHaveChanges(prevProjects, mergedProjects)
|
||||
return projectsHaveChanges(prevProjects, mergedProjects, true)
|
||||
? mergedProjects
|
||||
: prevProjects;
|
||||
});
|
||||
@@ -639,6 +595,10 @@ export function useProjectsState({
|
||||
displayName: upsert.project.displayName,
|
||||
isStarred: upsert.project.isStarred,
|
||||
sessions: [],
|
||||
cursorSessions: [],
|
||||
codexSessions: [],
|
||||
geminiSessions: [],
|
||||
opencodeSessions: [],
|
||||
sessionMeta: { hasMore: false, total: 0 },
|
||||
} as Project;
|
||||
|
||||
@@ -669,40 +629,10 @@ export function useProjectsState({
|
||||
const updated = upsertSessionIntoProject(previousProject, upsert);
|
||||
return updated === previousProject ? previousProject : updated;
|
||||
});
|
||||
|
||||
const aliasedSelectedSessionId =
|
||||
typeof upsert.providerSessionId === 'string' && upsert.providerSessionId !== upsert.sessionId
|
||||
? upsert.providerSessionId
|
||||
: null;
|
||||
if (!aliasedSelectedSessionId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const normalizedSelectedSession: ProjectSession = {
|
||||
...upsert.session,
|
||||
id: upsert.sessionId,
|
||||
__provider: upsert.provider,
|
||||
__projectId: upsert.project?.projectId ?? currentSelectedSession?.__projectId,
|
||||
};
|
||||
|
||||
setSelectedSession((previousSession) => {
|
||||
if (previousSession?.id !== aliasedSelectedSessionId) {
|
||||
return previousSession;
|
||||
}
|
||||
|
||||
return {
|
||||
...previousSession,
|
||||
...normalizedSelectedSession,
|
||||
};
|
||||
});
|
||||
|
||||
if (sessionId === aliasedSelectedSessionId) {
|
||||
navigate(`/session/${upsert.sessionId}`);
|
||||
}
|
||||
};
|
||||
|
||||
return subscribe(handleEvent);
|
||||
}, [navigate, sessionId, subscribe]);
|
||||
}, [subscribe]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -720,18 +650,77 @@ export function useProjectsState({
|
||||
|
||||
// Project membership is resolved through `projectId` after the migration.
|
||||
for (const project of projects) {
|
||||
const match = project.sessions?.find((session) => session.id === sessionId);
|
||||
if (match) {
|
||||
const normalizedSession = normalizeSessionProvider(match);
|
||||
const claudeSession = project.sessions?.find((session) => session.id === sessionId);
|
||||
if (claudeSession) {
|
||||
const shouldUpdateProject = selectedProject?.projectId !== project.projectId;
|
||||
const shouldUpdateSession =
|
||||
selectedSession?.id !== sessionId || selectedSession.__provider !== normalizedSession.__provider;
|
||||
selectedSession?.id !== sessionId || selectedSession.__provider !== 'claude';
|
||||
|
||||
if (shouldUpdateProject) {
|
||||
setSelectedProject(project);
|
||||
}
|
||||
if (shouldUpdateSession) {
|
||||
setSelectedSession(normalizedSession);
|
||||
setSelectedSession({ ...claudeSession, __provider: 'claude' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const cursorSession = project.cursorSessions?.find((session) => session.id === sessionId);
|
||||
if (cursorSession) {
|
||||
const shouldUpdateProject = selectedProject?.projectId !== project.projectId;
|
||||
const shouldUpdateSession =
|
||||
selectedSession?.id !== sessionId || selectedSession.__provider !== 'cursor';
|
||||
|
||||
if (shouldUpdateProject) {
|
||||
setSelectedProject(project);
|
||||
}
|
||||
if (shouldUpdateSession) {
|
||||
setSelectedSession({ ...cursorSession, __provider: 'cursor' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const codexSession = project.codexSessions?.find((session) => session.id === sessionId);
|
||||
if (codexSession) {
|
||||
const shouldUpdateProject = selectedProject?.projectId !== project.projectId;
|
||||
const shouldUpdateSession =
|
||||
selectedSession?.id !== sessionId || selectedSession.__provider !== 'codex';
|
||||
|
||||
if (shouldUpdateProject) {
|
||||
setSelectedProject(project);
|
||||
}
|
||||
if (shouldUpdateSession) {
|
||||
setSelectedSession({ ...codexSession, __provider: 'codex' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const geminiSession = project.geminiSessions?.find((session) => session.id === sessionId);
|
||||
if (geminiSession) {
|
||||
const shouldUpdateProject = selectedProject?.projectId !== project.projectId;
|
||||
const shouldUpdateSession =
|
||||
selectedSession?.id !== sessionId || selectedSession.__provider !== 'gemini';
|
||||
|
||||
if (shouldUpdateProject) {
|
||||
setSelectedProject(project);
|
||||
}
|
||||
if (shouldUpdateSession) {
|
||||
setSelectedSession({ ...geminiSession, __provider: 'gemini' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const opencodeSession = project.opencodeSessions?.find((session) => session.id === sessionId);
|
||||
if (opencodeSession) {
|
||||
const shouldUpdateProject = selectedProject?.projectId !== project.projectId;
|
||||
const shouldUpdateSession =
|
||||
selectedSession?.id !== sessionId || selectedSession.__provider !== 'opencode';
|
||||
|
||||
if (shouldUpdateProject) {
|
||||
setSelectedProject(project);
|
||||
}
|
||||
if (shouldUpdateSession) {
|
||||
setSelectedSession({ ...opencodeSession, __provider: 'opencode' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -751,9 +740,27 @@ export function useProjectsState({
|
||||
return;
|
||||
}
|
||||
|
||||
let providerFromStorage: string | null = null;
|
||||
try {
|
||||
providerFromStorage = localStorage.getItem('selected-provider');
|
||||
} catch {
|
||||
providerFromStorage = null;
|
||||
}
|
||||
|
||||
const normalizedProvider: LLMProvider =
|
||||
providerFromStorage === 'cursor'
|
||||
? 'cursor'
|
||||
: providerFromStorage === 'codex'
|
||||
? 'codex'
|
||||
: providerFromStorage === 'gemini'
|
||||
? 'gemini'
|
||||
: providerFromStorage === 'opencode'
|
||||
? 'opencode'
|
||||
: 'claude';
|
||||
|
||||
setSelectedSession({
|
||||
id: sessionId,
|
||||
__provider: readSelectedProvider(),
|
||||
__provider: normalizedProvider,
|
||||
__projectId: selectedProject.projectId,
|
||||
summary: '',
|
||||
});
|
||||
@@ -776,7 +783,7 @@ export function useProjectsState({
|
||||
(session: ProjectSession) => {
|
||||
setSelectedSession(session);
|
||||
|
||||
if (activeTab === 'tasks' || activeTab === 'browser') {
|
||||
if (activeTab === 'tasks' || activeTab === 'preview') {
|
||||
setActiveTab('chat');
|
||||
}
|
||||
|
||||
@@ -821,7 +828,43 @@ export function useProjectsState({
|
||||
}
|
||||
|
||||
setProjects((prevProjects) =>
|
||||
prevProjects.map((project) => removeSessionFromProject(project, sessionIdToDelete)),
|
||||
prevProjects.map((project) => {
|
||||
const sessions = project.sessions?.filter((session) => session.id !== sessionIdToDelete) ?? [];
|
||||
const cursorSessions = project.cursorSessions?.filter((session) => session.id !== sessionIdToDelete) ?? [];
|
||||
const codexSessions = project.codexSessions?.filter((session) => session.id !== sessionIdToDelete) ?? [];
|
||||
const geminiSessions = project.geminiSessions?.filter((session) => session.id !== sessionIdToDelete) ?? [];
|
||||
const opencodeSessions = project.opencodeSessions?.filter((session) => session.id !== sessionIdToDelete) ?? [];
|
||||
|
||||
const removedFromProject = (
|
||||
sessions.length !== (project.sessions?.length ?? 0)
|
||||
|| cursorSessions.length !== (project.cursorSessions?.length ?? 0)
|
||||
|| codexSessions.length !== (project.codexSessions?.length ?? 0)
|
||||
|| geminiSessions.length !== (project.geminiSessions?.length ?? 0)
|
||||
|| opencodeSessions.length !== (project.opencodeSessions?.length ?? 0)
|
||||
);
|
||||
|
||||
if (!removedFromProject) {
|
||||
return project;
|
||||
}
|
||||
|
||||
const updatedProject: Project = {
|
||||
...project,
|
||||
sessions,
|
||||
cursorSessions,
|
||||
codexSessions,
|
||||
geminiSessions,
|
||||
opencodeSessions,
|
||||
};
|
||||
|
||||
const totalSessions = Math.max(0, Number(project.sessionMeta?.total ?? 0) - 1);
|
||||
updatedProject.sessionMeta = {
|
||||
...project.sessionMeta,
|
||||
total: totalSessions,
|
||||
hasMore: countLoadedProjectSessions(updatedProject) < totalSessions,
|
||||
};
|
||||
|
||||
return updatedProject;
|
||||
}),
|
||||
);
|
||||
},
|
||||
[navigate, selectedSession?.id],
|
||||
@@ -835,7 +878,7 @@ export function useProjectsState({
|
||||
const mergedProjects = mergeExpandedSessionPages(projects, projectsWithTaskMaster);
|
||||
|
||||
setProjects((prevProjects) =>
|
||||
projectsHaveChanges(prevProjects, mergedProjects) ? mergedProjects : prevProjects,
|
||||
projectsHaveChanges(prevProjects, mergedProjects, true) ? mergedProjects : prevProjects,
|
||||
);
|
||||
|
||||
if (!selectedProject) {
|
||||
@@ -904,7 +947,7 @@ export function useProjectsState({
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
const sessionsPage = (await response.json()) as ProjectSessionPage;
|
||||
const sessionsPage = (await response.json()) as Pick<Project, 'sessions' | 'cursorSessions' | 'codexSessions' | 'geminiSessions' | 'opencodeSessions' | 'sessionMeta'>;
|
||||
|
||||
let mergedProjectForSelection: Project | null = null;
|
||||
setProjects((previousProjects) =>
|
||||
|
||||
@@ -6,7 +6,7 @@ export interface SessionActivity {
|
||||
canInterrupt: boolean;
|
||||
/**
|
||||
* When this request was first marked as processing (client clock). Drives
|
||||
* the elapsed-time display and the stale `chat_subscribed` idle-ack guard.
|
||||
* the elapsed-time display and the stale `session-status` reply guard.
|
||||
*/
|
||||
startedAt: number;
|
||||
}
|
||||
|
||||
@@ -28,31 +28,20 @@ export const useVersionCheck = (owner: string, repo: string) => {
|
||||
const [latestVersion, setLatestVersion] = useState<string | null>(null);
|
||||
const [releaseInfo, setReleaseInfo] = useState<ReleaseInfo | null>(null);
|
||||
const [installMode, setInstallMode] = useState<InstallMode>('git');
|
||||
const [runningVersion, setRunningVersion] = useState<string | null>(null);
|
||||
const [restartRequired, setRestartRequired] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchHealth = async () => {
|
||||
const fetchInstallMode = async () => {
|
||||
try {
|
||||
const response = await fetch('/health');
|
||||
const data = await response.json();
|
||||
if (data.installMode === 'npm' || data.installMode === 'git') {
|
||||
setInstallMode(data.installMode);
|
||||
}
|
||||
// `data.version` is the version the server process is actually running.
|
||||
// This module's `version` is baked into the frontend bundle at build
|
||||
// time, so it reflects the installed (on-disk) package. If they differ,
|
||||
// the package was updated but the server process was not restarted, and
|
||||
// DB-backed actions may silently fail until it is.
|
||||
if (typeof data.version === 'string' && data.version.length > 0) {
|
||||
setRunningVersion(data.version);
|
||||
setRestartRequired(data.version !== version);
|
||||
}
|
||||
} catch {
|
||||
// Default to git / no restart hint on error
|
||||
// Default to git on error
|
||||
}
|
||||
};
|
||||
fetchHealth();
|
||||
fetchInstallMode();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -95,5 +84,5 @@ export const useVersionCheck = (owner: string, repo: string) => {
|
||||
return () => clearInterval(interval);
|
||||
}, [owner, repo]);
|
||||
|
||||
return { updateAvailable, latestVersion, currentVersion: version, releaseInfo, installMode, runningVersion, restartRequired };
|
||||
return { updateAvailable, latestVersion, currentVersion: version, releaseInfo, installMode };
|
||||
};
|
||||
@@ -14,11 +14,6 @@ export const languages = [
|
||||
label: 'English',
|
||||
nativeName: 'English',
|
||||
},
|
||||
{
|
||||
value: 'fr',
|
||||
label: 'French',
|
||||
nativeName: 'Français',
|
||||
},
|
||||
{
|
||||
value: 'ko',
|
||||
label: 'Korean',
|
||||
@@ -53,8 +48,6 @@ export const languages = [
|
||||
value: 'tr',
|
||||
label: 'Turkish',
|
||||
nativeName: 'Türkçe',
|
||||
},
|
||||
{
|
||||
value: 'it',
|
||||
label: 'Italian',
|
||||
nativeName: 'Italiano',
|
||||
|
||||
@@ -22,8 +22,7 @@
|
||||
"shell": "Terminal",
|
||||
"files": "Dateien",
|
||||
"git": "Quellcodeverwaltung",
|
||||
"tasks": "Aufgaben",
|
||||
"browser": "Browser"
|
||||
"tasks": "Aufgaben"
|
||||
},
|
||||
"status": {
|
||||
"loading": "Lädt...",
|
||||
|
||||
@@ -106,17 +106,10 @@
|
||||
"deleteProjectFailed": "Projekt konnte nicht entfernt werden. Bitte erneut versuchen.",
|
||||
"deleteProjectError": "Fehler beim Entfernen des Projekts. Bitte erneut versuchen.",
|
||||
"createProjectFailed": "Projekt konnte nicht erstellt werden. Bitte erneut versuchen.",
|
||||
"createProjectError": "Fehler beim Erstellen des Projekts. Bitte erneut versuchen.",
|
||||
"updateProjectError": "Fehler beim Aktualisieren des Projekts. Bitte erneut versuchen.",
|
||||
"refreshError": "Aktualisierung fehlgeschlagen. Bitte erneut versuchen.",
|
||||
"restoreProjectFailed": "Projekt konnte nicht wiederhergestellt werden. Bitte erneut versuchen.",
|
||||
"restoreProjectError": "Fehler beim Wiederherstellen des Projekts. Bitte erneut versuchen.",
|
||||
"restoreSessionFailed": "Sitzung konnte nicht wiederhergestellt werden. Bitte erneut versuchen.",
|
||||
"restoreSessionError": "Fehler beim Wiederherstellen der Sitzung. Bitte erneut versuchen."
|
||||
"createProjectError": "Fehler beim Erstellen des Projekts. Bitte erneut versuchen."
|
||||
},
|
||||
"version": {
|
||||
"updateAvailable": "Update verfügbar",
|
||||
"restartRequired": "Update installiert – zum Anwenden Server neu starten"
|
||||
"updateAvailable": "Update verfügbar"
|
||||
},
|
||||
"search": {
|
||||
"modeProjects": "Projekte",
|
||||
|
||||
@@ -22,8 +22,7 @@
|
||||
"shell": "Shell",
|
||||
"files": "Files",
|
||||
"git": "Source Control",
|
||||
"tasks": "Tasks",
|
||||
"browser": "Browser"
|
||||
"tasks": "Tasks"
|
||||
},
|
||||
"status": {
|
||||
"loading": "Loading...",
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
"account": "Account",
|
||||
"permissions": "Permissions",
|
||||
"mcpServers": "MCP Servers",
|
||||
"skills": "Skills",
|
||||
"appearance": "Appearance"
|
||||
},
|
||||
"account": {
|
||||
@@ -95,7 +94,6 @@
|
||||
"git": "Git",
|
||||
"apiTokens": "API & Tokens",
|
||||
"tasks": "Tasks",
|
||||
"browser": "Browser",
|
||||
"notifications": "Notifications",
|
||||
"plugins": "Plugins",
|
||||
"about": "About"
|
||||
@@ -452,10 +450,6 @@
|
||||
"edit": "Edit server",
|
||||
"delete": "Delete server"
|
||||
},
|
||||
"managed": {
|
||||
"badge": "Managed",
|
||||
"hint": "Managed by CloudCLI."
|
||||
},
|
||||
"help": {
|
||||
"title": "About Codex MCP",
|
||||
"description": "Codex supports stdio-based MCP servers. You can add servers that extend Codex's capabilities with additional tools and resources."
|
||||
@@ -520,30 +514,6 @@
|
||||
"description": "Session intelligence for Claude Code, inside CloudCLI. See why your sessions are burning tokens without leaving the browser.",
|
||||
"install": "Install"
|
||||
},
|
||||
"sessionManagerPlugin": {
|
||||
"name": "Sessions",
|
||||
"badge": "unofficial",
|
||||
"description": "View, manage, and kill active Claude Code sessions.",
|
||||
"install": "Install"
|
||||
},
|
||||
"tokenCostCalculatorPlugin": {
|
||||
"name": "Token Cost Calculator",
|
||||
"badge": "unofficial",
|
||||
"description": "Calculate API costs from model prices and token usage, with preset model pricing support.",
|
||||
"install": "Install"
|
||||
},
|
||||
"taskQueuePlugin": {
|
||||
"name": "Task Queue",
|
||||
"badge": "unofficial",
|
||||
"description": "Task queue dashboard to view, filter, and launch agent tasks.",
|
||||
"install": "Install"
|
||||
},
|
||||
"githubIssuesBoardPlugin": {
|
||||
"name": "GitHub Issues Board",
|
||||
"badge": "unofficial",
|
||||
"description": "Kanban board for GitHub Issues with bidirectional TaskMaster sync and /github-task CLI skill auto-install",
|
||||
"install": "Install"
|
||||
},
|
||||
"morePlugins": "More",
|
||||
"enable": "Enable",
|
||||
"disable": "Disable",
|
||||
|
||||
@@ -106,17 +106,10 @@
|
||||
"deleteProjectFailed": "Failed to remove project. Please try again.",
|
||||
"deleteProjectError": "Error removing project. Please try again.",
|
||||
"createProjectFailed": "Failed to create project. Please try again.",
|
||||
"createProjectError": "Error creating project. Please try again.",
|
||||
"updateProjectError": "Error updating project. Please try again.",
|
||||
"refreshError": "Failed to refresh. Please try again.",
|
||||
"restoreProjectFailed": "Failed to restore project. Please try again.",
|
||||
"restoreProjectError": "Error restoring project. Please try again.",
|
||||
"restoreSessionFailed": "Failed to restore session. Please try again.",
|
||||
"restoreSessionError": "Error restoring session. Please try again."
|
||||
"createProjectError": "Error creating project. Please try again."
|
||||
},
|
||||
"version": {
|
||||
"updateAvailable": "Update available",
|
||||
"restartRequired": "Update installed — restart the server to apply"
|
||||
"updateAvailable": "Update available"
|
||||
},
|
||||
"search": {
|
||||
"modeProjects": "Projects",
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"login": {
|
||||
"title": "Bon retour",
|
||||
"description": "Connectez-vous à votre compte CloudCLI auto-hébergé",
|
||||
"username": "Nom d'utilisateur",
|
||||
"password": "Mot de passe",
|
||||
"submit": "Se connecter",
|
||||
"loading": "Connexion en cours...",
|
||||
"errors": {
|
||||
"invalidCredentials": "Nom d'utilisateur ou mot de passe incorrect",
|
||||
"requiredFields": "Veuillez remplir tous les champs",
|
||||
"networkError": "Erreur réseau. Veuillez réessayer."
|
||||
},
|
||||
"placeholders": {
|
||||
"username": "Entrez votre nom d'utilisateur",
|
||||
"password": "Entrez votre mot de passe"
|
||||
}
|
||||
},
|
||||
"register": {
|
||||
"title": "Créer un compte",
|
||||
"username": "Nom d'utilisateur",
|
||||
"password": "Mot de passe",
|
||||
"confirmPassword": "Confirmer le mot de passe",
|
||||
"submit": "Créer le compte",
|
||||
"loading": "Création du compte...",
|
||||
"errors": {
|
||||
"passwordMismatch": "Les mots de passe ne correspondent pas",
|
||||
"usernameTaken": "Ce nom d'utilisateur est déjà pris",
|
||||
"weakPassword": "Le mot de passe est trop faible"
|
||||
}
|
||||
},
|
||||
"logout": {
|
||||
"title": "Se déconnecter",
|
||||
"confirm": "Êtes-vous sûr de vouloir vous déconnecter ?",
|
||||
"button": "Se déconnecter"
|
||||
}
|
||||
}
|
||||
@@ -1,241 +0,0 @@
|
||||
{
|
||||
"codeBlock": {
|
||||
"copy": "Copier",
|
||||
"copied": "Copié",
|
||||
"copyCode": "Copier le code"
|
||||
},
|
||||
"copyMessage": {
|
||||
"copy": "Copier le message",
|
||||
"copied": "Message copié",
|
||||
"selectFormat": "Sélectionner le format de copie",
|
||||
"copyAsMarkdown": "Copier en markdown",
|
||||
"copyAsText": "Copier en texte brut"
|
||||
},
|
||||
"messageTypes": {
|
||||
"user": "U",
|
||||
"error": "Erreur",
|
||||
"tool": "Outil",
|
||||
"claude": "Claude",
|
||||
"cursor": "Cursor",
|
||||
"codex": "Codex",
|
||||
"gemini": "Gemini",
|
||||
"opencode": "OpenCode"
|
||||
},
|
||||
"tools": {
|
||||
"settings": "Paramètres de l'outil",
|
||||
"error": "Erreur de l'outil",
|
||||
"result": "Résultat de l'outil",
|
||||
"viewParams": "Voir les paramètres d'entrée",
|
||||
"viewRawParams": "Voir les paramètres bruts",
|
||||
"viewDiff": "Voir les différences pour",
|
||||
"creatingFile": "Création du fichier :",
|
||||
"updatingTodo": "Mise à jour de la liste de tâches",
|
||||
"read": "Lire",
|
||||
"readFile": "Lire le fichier",
|
||||
"updateTodo": "Mettre à jour la liste de tâches",
|
||||
"readTodo": "Lire la liste de tâches",
|
||||
"searchResults": "résultats"
|
||||
},
|
||||
"search": {
|
||||
"found": "{{count}} {{type}} trouvé(s)",
|
||||
"file": "fichier",
|
||||
"files": "fichiers",
|
||||
"pattern": "motif :",
|
||||
"in": "dans :"
|
||||
},
|
||||
"fileOperations": {
|
||||
"updated": "Fichier mis à jour avec succès",
|
||||
"created": "Fichier créé avec succès",
|
||||
"written": "Fichier écrit avec succès",
|
||||
"diff": "Diff",
|
||||
"newFile": "Nouveau fichier",
|
||||
"viewContent": "Voir le contenu du fichier",
|
||||
"viewFullOutput": "Voir la sortie complète ({{count}} caractères)",
|
||||
"contentDisplayed": "Le contenu du fichier est affiché dans la vue diff ci-dessus"
|
||||
},
|
||||
"interactive": {
|
||||
"title": "Invite interactive",
|
||||
"waiting": "En attente de votre réponse dans le CLI",
|
||||
"instruction": "Veuillez sélectionner une option dans votre terminal où Claude s'exécute.",
|
||||
"selectedOption": "✓ Claude a sélectionné l'option {{number}}",
|
||||
"instructionDetail": "Dans le CLI, vous sélectionneriez cette option de manière interactive avec les touches fléchées ou en tapant le numéro."
|
||||
},
|
||||
"thinking": {
|
||||
"title": "Réflexion...",
|
||||
"emoji": "💭 Réflexion..."
|
||||
},
|
||||
"json": {
|
||||
"response": "Réponse JSON"
|
||||
},
|
||||
"permissions": {
|
||||
"grant": "Autoriser {{tool}}",
|
||||
"added": "Permission ajoutée",
|
||||
"addTo": "Ajoute {{entry}} aux outils autorisés.",
|
||||
"retry": "Permission enregistrée. Relancez la requête pour utiliser l'outil.",
|
||||
"error": "Impossible de mettre à jour les permissions. Veuillez réessayer.",
|
||||
"openSettings": "Ouvrir les paramètres"
|
||||
},
|
||||
"todo": {
|
||||
"updated": "La liste de tâches a été mise à jour avec succès",
|
||||
"current": "Liste de tâches actuelle"
|
||||
},
|
||||
"plan": {
|
||||
"viewPlan": "📋 Voir le plan d'implémentation",
|
||||
"title": "Plan d'implémentation"
|
||||
},
|
||||
"usageLimit": {
|
||||
"resetAt": "Limite d'utilisation Claude atteinte. Votre limite sera réinitialisée à **{{time}} {{timezone}}** - {{date}}"
|
||||
},
|
||||
"codex": {
|
||||
"permissionMode": "Mode de permission",
|
||||
"modes": {
|
||||
"default": "Mode par défaut",
|
||||
"auto": "Mode automatique",
|
||||
"acceptEdits": "Accepter les modifications",
|
||||
"bypassPermissions": "Contourner les permissions",
|
||||
"plan": "Mode planification"
|
||||
},
|
||||
"descriptions": {
|
||||
"default": "Seules les commandes de confiance (ls, cat, grep, git status, etc.) s'exécutent automatiquement. Les autres commandes sont ignorées. Peut écrire dans l'espace de travail.",
|
||||
"auto": "Un classifieur de modèle décide pour chaque appel d'outil d'approuver ou refuser. Mode mains libres, mais plus sûr que le contournement — des refus peuvent toujours se produire.",
|
||||
"acceptEdits": "Toutes les commandes s'exécutent automatiquement dans l'espace de travail. Mode entièrement automatique avec exécution sandboxée.",
|
||||
"bypassPermissions": "Accès système complet sans restrictions. Toutes les commandes s'exécutent automatiquement avec accès disque et réseau complet. À utiliser avec précaution.",
|
||||
"plan": "Mode planification - aucune commande n'est exécutée"
|
||||
},
|
||||
"technicalDetails": "Détails techniques"
|
||||
},
|
||||
"gemini": {
|
||||
"permissionMode": "Mode de permission Gemini",
|
||||
"description": "Contrôlez comment Gemini CLI gère les approbations d'opérations.",
|
||||
"modes": {
|
||||
"default": {
|
||||
"title": "Standard (demander l'approbation)",
|
||||
"description": "Gemini demandera une approbation avant d'exécuter des commandes, d'écrire des fichiers et de récupérer des ressources web."
|
||||
},
|
||||
"autoEdit": {
|
||||
"title": "Modification automatique (ignorer les approbations de fichiers)",
|
||||
"description": "Gemini approuvera automatiquement les modifications de fichiers et les récupérations web, mais demandera toujours pour les commandes shell."
|
||||
},
|
||||
"yolo": {
|
||||
"title": "YOLO (contourner toutes les permissions)",
|
||||
"description": "Gemini exécutera toutes les opérations sans demander d'approbation. Utilisez avec prudence."
|
||||
}
|
||||
}
|
||||
},
|
||||
"input": {
|
||||
"placeholder": "Tapez / pour les commandes, @ pour les fichiers, ou posez une question à {{provider}}...",
|
||||
"placeholderDefault": "Tapez votre message...",
|
||||
"disabled": "Saisie désactivée",
|
||||
"attachFiles": "Joindre des fichiers",
|
||||
"attachImages": "Joindre des images",
|
||||
"send": "Envoyer",
|
||||
"stop": "Arrêter",
|
||||
"hintText": {
|
||||
"ctrlEnter": "Ctrl+Entrée pour envoyer • Maj+Entrée pour nouvelle ligne • Tab pour changer de mode • / pour les commandes slash",
|
||||
"enter": "Entrée pour envoyer • Maj+Entrée pour nouvelle ligne • Tab pour changer de mode • / pour les commandes slash"
|
||||
},
|
||||
"clickToChangeMode": "Cliquez pour changer le mode de permission (ou appuyez sur Tab dans la saisie)",
|
||||
"showAllCommands": "Afficher toutes les commandes",
|
||||
"clearInput": "Effacer la saisie",
|
||||
"scrollToBottom": "Défiler vers le bas"
|
||||
},
|
||||
"providerSelection": {
|
||||
"title": "Choisissez votre assistant IA",
|
||||
"description": "Sélectionnez un fournisseur pour démarrer une nouvelle conversation",
|
||||
"selectModel": "Sélectionner un modèle",
|
||||
"providerInfo": {
|
||||
"anthropic": "par Anthropic",
|
||||
"openai": "par OpenAI",
|
||||
"cursorEditor": "Éditeur de code IA",
|
||||
"google": "par Google"
|
||||
},
|
||||
"readyPrompt": {
|
||||
"claude": "Prêt à utiliser Claude avec {{model}}. Commencez à taper votre message ci-dessous.",
|
||||
"cursor": "Prêt à utiliser Cursor avec {{model}}. Commencez à taper votre message ci-dessous.",
|
||||
"codex": "Prêt à utiliser Codex avec {{model}}. Commencez à taper votre message ci-dessous.",
|
||||
"gemini": "Prêt à utiliser Gemini avec {{model}}. Commencez à taper votre message ci-dessous.",
|
||||
"opencode": "Prêt à utiliser OpenCode avec {{model}}. Commencez à taper votre message ci-dessous.",
|
||||
"default": "Sélectionnez un fournisseur ci-dessus pour commencer"
|
||||
},
|
||||
"pressToSearch": "Appuyez sur <kbd>{{shortcut}}</kbd> pour rechercher sessions, fichiers et commits"
|
||||
},
|
||||
"session": {
|
||||
"continue": {
|
||||
"title": "Continuer votre conversation",
|
||||
"description": "Posez des questions sur votre code, demandez des modifications ou obtenez de l'aide pour vos tâches de développement"
|
||||
},
|
||||
"loading": {
|
||||
"olderMessages": "Chargement des messages précédents...",
|
||||
"sessionMessages": "Chargement des messages de la session..."
|
||||
},
|
||||
"messages": {
|
||||
"showingOf": "Affichage de {{shown}} sur {{total}} messages",
|
||||
"scrollToLoad": "Faites défiler vers le haut pour charger plus",
|
||||
"showingLast": "Affichage des {{count}} derniers messages ({{total}} au total)",
|
||||
"loadEarlier": "Charger les messages précédents",
|
||||
"loadAll": "Charger tous les messages",
|
||||
"loadingAll": "Chargement de tous les messages...",
|
||||
"allLoaded": "Tous les messages chargés",
|
||||
"perfWarning": "Tous les messages chargés — le défilement peut être plus lent. Cliquez sur « Défiler vers le bas » pour rétablir les performances."
|
||||
}
|
||||
},
|
||||
"shell": {
|
||||
"selectProject": {
|
||||
"title": "Sélectionner un projet",
|
||||
"description": "Choisissez un projet pour ouvrir un shell interactif dans ce répertoire"
|
||||
},
|
||||
"status": {
|
||||
"newSession": "Nouvelle session",
|
||||
"initializing": "Initialisation...",
|
||||
"restarting": "Redémarrage..."
|
||||
},
|
||||
"actions": {
|
||||
"disconnect": "Déconnecter",
|
||||
"disconnectTitle": "Se déconnecter du shell",
|
||||
"restart": "Redémarrer",
|
||||
"restartTitle": "Redémarrer le shell",
|
||||
"connect": "Continuer dans le shell",
|
||||
"connectTitle": "Se connecter au shell"
|
||||
},
|
||||
"loading": "Chargement du terminal...",
|
||||
"connecting": "Connexion au shell...",
|
||||
"startSession": "Démarrer une nouvelle session Claude",
|
||||
"resumeSession": "Reprendre la session : {{displayName}}...",
|
||||
"runCommand": "Exécuter {{command}} dans {{projectName}}",
|
||||
"startCli": "Démarrage du CLI Claude dans {{projectName}}",
|
||||
"defaultCommand": "commande"
|
||||
},
|
||||
"claudeStatus": {
|
||||
"actions": {
|
||||
"thinking": "Réflexion",
|
||||
"processing": "Traitement",
|
||||
"analyzing": "Analyse",
|
||||
"working": "Travail",
|
||||
"computing": "Calcul",
|
||||
"reasoning": "Raisonnement"
|
||||
},
|
||||
"state": {
|
||||
"live": "En direct",
|
||||
"paused": "En pause"
|
||||
},
|
||||
"elapsed": {
|
||||
"seconds": "{{count}}s",
|
||||
"minutesSeconds": "{{minutes}}m {{seconds}}s",
|
||||
"label": "{{time}} écoulé",
|
||||
"startingNow": "Démarrage"
|
||||
},
|
||||
"controls": {
|
||||
"stopGeneration": "Arrêter la génération",
|
||||
"pressEscToStop": "Appuyez sur Échap à tout moment pour arrêter"
|
||||
},
|
||||
"providers": {
|
||||
"assistant": "Assistant"
|
||||
}
|
||||
},
|
||||
"projectSelection": {
|
||||
"startChatWithProvider": "Sélectionnez un projet pour commencer à chatter avec {{provider}}"
|
||||
},
|
||||
"tasks": {
|
||||
"nextTaskPrompt": "Commencer la prochaine tâche"
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"toolbar": {
|
||||
"changes": "modifications",
|
||||
"previousChange": "Modification précédente",
|
||||
"nextChange": "Modification suivante",
|
||||
"hideDiff": "Masquer la mise en évidence des différences",
|
||||
"showDiff": "Afficher la mise en évidence des différences",
|
||||
"settings": "Paramètres de l'éditeur",
|
||||
"collapse": "Réduire l'éditeur",
|
||||
"expand": "Étendre l'éditeur en pleine largeur"
|
||||
},
|
||||
"loading": "Chargement de {{fileName}}...",
|
||||
"header": {
|
||||
"showingChanges": "Affichage des modifications"
|
||||
},
|
||||
"actions": {
|
||||
"download": "Télécharger le fichier",
|
||||
"save": "Enregistrer",
|
||||
"saving": "Enregistrement...",
|
||||
"saved": "Enregistré !",
|
||||
"exitFullscreen": "Quitter le plein écran",
|
||||
"fullscreen": "Plein écran",
|
||||
"close": "Fermer",
|
||||
"previewMarkdown": "Aperçu markdown",
|
||||
"editMarkdown": "Modifier le markdown"
|
||||
},
|
||||
"footer": {
|
||||
"lines": "Lignes :",
|
||||
"characters": "Caractères :",
|
||||
"shortcuts": "Ctrl+S pour enregistrer • Échap pour fermer"
|
||||
},
|
||||
"binaryFile": {
|
||||
"title": "Fichier binaire",
|
||||
"message": "Le fichier \"{{fileName}}\" ne peut pas être affiché dans l'éditeur de texte car c'est un fichier binaire."
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user