-
{t("instanceShell.filesShell.mobileSelectorLabel")}
-
+
+
+
+ {(item) => (
+
+ )}
+
+
-
+
+
-
+
= (props) => {
}
>
{(file) => (
-
-
{file().file}
-
{t("instanceShell.filesShell.viewerPlaceholder")}
-
+ }
+ >
+
+
)}
@@ -1123,8 +1309,44 @@ const InstanceShell2: Component
= (props) => {
-
+
= (props) => {
}
>
{(file) => (
-
-
{file().file}
-
{t("instanceShell.filesShell.viewerPlaceholder")}
+
+ Binary file cannot be displayed
+
+ )}
+
+
+
+
+ )
+ }
+
+ const renderBrowserTabContent = () => {
+ if (browserLoading() && browserEntries() === null) {
+ return (
+
+ Loading files...
+
+ )
+ }
+
+ const entries = browserEntries() || []
+ const sorted = [...entries].sort((a, b) => {
+ const aDir = a.type === "directory" ? 0 : 1
+ const bDir = b.type === "directory" ? 0 : 1
+ if (aDir !== bDir) return aDir - bDir
+ return String(a.name || "").localeCompare(String(b.name || ""))
+ })
+
+ const parent = getParentPath(browserPath())
+ const scopeKey = `${props.instance.id}:${worktreeSlugForViewer()}`
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Select a file to preview
+
+ }
+ >
+ {(payload) => (
+
+ )}
+
+ }
+ >
+ {(err) => (
+
+ {err()}
+
+ )}
+
+ }
+ >
+
+ Loading…
+
+
@@ -1470,6 +1837,15 @@ const InstanceShell2: Component
= (props) => {
>
{t("instanceShell.rightPanel.tabs.changes")}
+
diff --git a/packages/ui/src/lib/i18n/messages/en/instance.ts b/packages/ui/src/lib/i18n/messages/en/instance.ts
index b50ca49c..7cd2ef5b 100644
--- a/packages/ui/src/lib/i18n/messages/en/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/en/instance.ts
@@ -87,6 +87,7 @@ export const instanceMessages = {
"instanceShell.rightPanel.title": "Status Panel",
"instanceShell.rightPanel.tabs.changes": "Changes",
+ "instanceShell.rightPanel.tabs.files": "Files",
"instanceShell.rightPanel.tabs.status": "Status",
"instanceShell.rightPanel.tabs.ariaLabel": "Right panel tabs",
"instanceShell.rightPanel.sections.sessionChanges": "Session Changes",
diff --git a/packages/ui/src/lib/i18n/messages/es/instance.ts b/packages/ui/src/lib/i18n/messages/es/instance.ts
index c9617774..b88d99bf 100644
--- a/packages/ui/src/lib/i18n/messages/es/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/es/instance.ts
@@ -87,6 +87,7 @@ export const instanceMessages = {
"instanceShell.rightPanel.title": "Panel de estado",
"instanceShell.rightPanel.tabs.changes": "Cambios",
+ "instanceShell.rightPanel.tabs.files": "Archivos",
"instanceShell.rightPanel.tabs.status": "Estado",
"instanceShell.rightPanel.tabs.ariaLabel": "Pestañas del panel derecho",
"instanceShell.rightPanel.sections.sessionChanges": "Cambios de sesion",
diff --git a/packages/ui/src/lib/i18n/messages/fr/instance.ts b/packages/ui/src/lib/i18n/messages/fr/instance.ts
index 45be98b0..09f2ee28 100644
--- a/packages/ui/src/lib/i18n/messages/fr/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/instance.ts
@@ -87,6 +87,7 @@ export const instanceMessages = {
"instanceShell.rightPanel.title": "Panneau d'état",
"instanceShell.rightPanel.tabs.changes": "Modifications",
+ "instanceShell.rightPanel.tabs.files": "Fichiers",
"instanceShell.rightPanel.tabs.status": "Statut",
"instanceShell.rightPanel.tabs.ariaLabel": "Onglets du panneau droit",
"instanceShell.rightPanel.sections.sessionChanges": "Changements de session",
diff --git a/packages/ui/src/lib/i18n/messages/ja/instance.ts b/packages/ui/src/lib/i18n/messages/ja/instance.ts
index 2f70bf2a..04a48938 100644
--- a/packages/ui/src/lib/i18n/messages/ja/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/instance.ts
@@ -87,6 +87,7 @@ export const instanceMessages = {
"instanceShell.rightPanel.title": "ステータスパネル",
"instanceShell.rightPanel.tabs.changes": "変更",
+ "instanceShell.rightPanel.tabs.files": "ファイル",
"instanceShell.rightPanel.tabs.status": "ステータス",
"instanceShell.rightPanel.tabs.ariaLabel": "右パネルのタブ",
"instanceShell.rightPanel.sections.sessionChanges": "セッション変更",
diff --git a/packages/ui/src/lib/i18n/messages/ru/instance.ts b/packages/ui/src/lib/i18n/messages/ru/instance.ts
index e1f33b67..17d4ec36 100644
--- a/packages/ui/src/lib/i18n/messages/ru/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/instance.ts
@@ -87,6 +87,7 @@ export const instanceMessages = {
"instanceShell.rightPanel.title": "Панель состояния",
"instanceShell.rightPanel.tabs.changes": "Изменения",
+ "instanceShell.rightPanel.tabs.files": "Файлы",
"instanceShell.rightPanel.tabs.status": "Статус",
"instanceShell.rightPanel.tabs.ariaLabel": "Вкладки правой панели",
"instanceShell.rightPanel.sections.sessionChanges": "Изменения сессии",
diff --git a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
index a37f5861..a978e220 100644
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
@@ -87,6 +87,7 @@ export const instanceMessages = {
"instanceShell.rightPanel.title": "状态面板",
"instanceShell.rightPanel.tabs.changes": "更改",
+ "instanceShell.rightPanel.tabs.files": "文件",
"instanceShell.rightPanel.tabs.status": "状态",
"instanceShell.rightPanel.tabs.ariaLabel": "右侧面板标签页",
"instanceShell.rightPanel.sections.sessionChanges": "会话更改",
diff --git a/packages/ui/src/lib/monaco/language.ts b/packages/ui/src/lib/monaco/language.ts
new file mode 100644
index 00000000..98d1b908
--- /dev/null
+++ b/packages/ui/src/lib/monaco/language.ts
@@ -0,0 +1,70 @@
+type MonacoApi = any
+
+let cachedLanguageMaps:
+ | {
+ fileNameToId: Map
+ extToId: Map
+ }
+ | null = null
+
+function buildLanguageMaps(monaco: MonacoApi) {
+ if (cachedLanguageMaps) return cachedLanguageMaps
+
+ const fileNameToId = new Map()
+ const extToId = new Map()
+
+ const languages = typeof monaco?.languages?.getLanguages === "function" ? monaco.languages.getLanguages() : []
+ if (Array.isArray(languages)) {
+ for (const lang of languages) {
+ const id = typeof lang?.id === "string" ? lang.id : null
+ if (!id) continue
+
+ const filenames = Array.isArray(lang?.filenames) ? lang.filenames : []
+ for (const name of filenames) {
+ if (typeof name !== "string") continue
+ if (!fileNameToId.has(name)) fileNameToId.set(name, id)
+ }
+
+ const extensions = Array.isArray(lang?.extensions) ? lang.extensions : []
+ for (const ext of extensions) {
+ if (typeof ext !== "string") continue
+ // Monaco uses leading dots for extensions (e.g. ".ts").
+ if (!extToId.has(ext)) extToId.set(ext, id)
+ }
+ }
+ }
+
+ cachedLanguageMaps = { fileNameToId, extToId }
+ return cachedLanguageMaps
+}
+
+function overrideLanguageId(fileName: string): string | null {
+ // Git-style ignore/config files: treat as shell-like.
+ if (fileName === ".gitignore" || fileName === ".gitattributes" || fileName === ".gitmodules") return "shell"
+
+ // Monaco doesn't ship a dedicated Makefile tokenizer in our baseline.
+ if (fileName === "Makefile" || fileName.startsWith("Makefile.")) return "shell"
+
+ return null
+}
+
+export function inferMonacoLanguageId(monaco: MonacoApi, path: string | undefined | null): string {
+ const raw = String(path || "").trim()
+ const fileName = raw.split("/").pop() || raw
+
+ const override = overrideLanguageId(fileName)
+ if (override) return override
+
+ const maps = buildLanguageMaps(monaco)
+ const byName = maps.fileNameToId.get(fileName)
+ if (byName) return byName
+
+ const dot = fileName.lastIndexOf(".")
+ if (dot > 0) {
+ const ext = fileName.slice(dot)
+ const byExt = maps.extToId.get(ext)
+ if (byExt) return byExt
+ }
+
+ return "plaintext"
+}
diff --git a/packages/ui/src/lib/monaco/model-cache.ts b/packages/ui/src/lib/monaco/model-cache.ts
new file mode 100644
index 00000000..f90d75fd
--- /dev/null
+++ b/packages/ui/src/lib/monaco/model-cache.ts
@@ -0,0 +1,53 @@
+type MonacoApi = any
+
+type CachedModel = {
+ model: any
+}
+
+const MAX_MODELS = 5
+
+// LRU map: newest at the end.
+const models = new Map()
+
+function touch(key: string, entry: CachedModel) {
+ models.delete(key)
+ models.set(key, entry)
+}
+
+function evictIfNeeded() {
+ while (models.size > MAX_MODELS) {
+ const oldestKey = models.keys().next().value as string | undefined
+ if (!oldestKey) return
+ const entry = models.get(oldestKey)
+ models.delete(oldestKey)
+ try {
+ entry?.model.dispose()
+ } catch {
+ // ignore
+ }
+ }
+}
+
+export function getOrCreateTextModel(params: {
+ monaco: MonacoApi
+ cacheKey: string
+ value: string
+ languageId: string
+}): any {
+ const existing = models.get(params.cacheKey)
+ if (existing) {
+ touch(params.cacheKey, existing)
+ if (existing.model.getValue() !== params.value) {
+ existing.model.setValue(params.value)
+ }
+ return existing.model
+ }
+
+ const uri = params.monaco.Uri.parse(`opencode://model/${encodeURIComponent(params.cacheKey)}`)
+ // Create as plaintext. We'll set the final language after its contribution is loaded.
+ const model = params.monaco.editor.createModel(params.value, "plaintext", uri)
+ const entry = { model }
+ models.set(params.cacheKey, entry)
+ evictIfNeeded()
+ return model
+}
diff --git a/packages/ui/src/lib/monaco/setup.ts b/packages/ui/src/lib/monaco/setup.ts
new file mode 100644
index 00000000..6411dfba
--- /dev/null
+++ b/packages/ui/src/lib/monaco/setup.ts
@@ -0,0 +1,180 @@
+type RequireFn = (deps: string[], callback: (...args: any[]) => void, errback?: (err: any) => void) => void
+type MonacoApi = any
+
+const MONACO_VERSION = "0.52.2"
+const CDN_VS_ROOT = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}/min/vs`
+const LOCAL_VS_ROOT = "/monaco/vs"
+
+let monacoPromise: Promise | null = null
+
+function withTimeout(promise: Promise, ms: number): Promise {
+ return new Promise((resolve, reject) => {
+ const id = setTimeout(() => reject(new Error("timeout")), ms)
+ promise
+ .then((value) => {
+ clearTimeout(id)
+ resolve(value)
+ })
+ .catch((err) => {
+ clearTimeout(id)
+ reject(err)
+ })
+ })
+}
+
+async function canReachCdn(): Promise {
+ if (typeof fetch === "undefined") return false
+ try {
+ const controller = new AbortController()
+ const task = fetch(`${CDN_VS_ROOT}/loader.js`, { method: "HEAD", signal: controller.signal })
+ const response = await withTimeout(task, 1200)
+ controller.abort()
+ return response.ok
+ } catch {
+ return false
+ }
+}
+
+function ensureLoaderScript(): Promise {
+ if (typeof document === "undefined") return Promise.resolve()
+ const existing = document.querySelector('script[data-monaco-loader="true"]')
+ if (existing) return Promise.resolve()
+
+ return new Promise((resolve, reject) => {
+ const script = document.createElement("script")
+ script.dataset.monacoLoader = "true"
+ script.src = `${LOCAL_VS_ROOT}/loader.js`
+ script.async = true
+ script.onload = () => resolve()
+ script.onerror = () => reject(new Error("Failed to load Monaco AMD loader"))
+ document.head.appendChild(script)
+ })
+}
+
+function configureWorkers() {
+ const globalAny = globalThis as any
+ if (globalAny.MonacoEnvironment?.getWorkerUrl) return
+
+ globalAny.MonacoEnvironment = {
+ getWorkerUrl(_moduleId: string, label: string) {
+ if (label === "json") return `${LOCAL_VS_ROOT}/language/json/json.worker.js`
+ if (label === "css" || label === "scss" || label === "less") return `${LOCAL_VS_ROOT}/language/css/css.worker.js`
+ if (label === "html" || label === "handlebars" || label === "razor") return `${LOCAL_VS_ROOT}/language/html/html.worker.js`
+ if (label === "typescript" || label === "javascript") return `${LOCAL_VS_ROOT}/language/typescript/ts.worker.js`
+ return `${LOCAL_VS_ROOT}/editor/editor.worker.js`
+ },
+ }
+}
+
+function getRequire(): RequireFn {
+ const req = (globalThis as any).require as RequireFn | undefined
+ if (!req) throw new Error("Monaco AMD loader is not available")
+ return req
+}
+
+function getRequireConfig(): ((config: any) => void) {
+ const req = getRequire() as any
+ const cfg = req.config as ((config: any) => void) | undefined
+ if (!cfg) throw new Error("require.config is not available")
+ return cfg
+}
+
+function requireAsync(deps: string[]): Promise {
+ const req = getRequire()
+ return new Promise((resolve, reject) => {
+ req(deps, (...args: any[]) => resolve(args), (err: any) => reject(err))
+ })
+}
+
+function getContributionModuleId(languageId: string): string | null {
+ const id = String(languageId || "plaintext")
+ if (!id || id === "plaintext") return null
+
+ // Rich contributions
+ if (id === "typescript" || id === "javascript") return "vs/language/typescript/monaco.contribution"
+ if (id === "json") return "vs/language/json/monaco.contribution"
+ if (id === "css" || id === "scss" || id === "less") return "vs/language/css/monaco.contribution"
+ if (id === "html") return "vs/language/html/monaco.contribution"
+
+ // Basic tokenizers
+ if (id === "toml") return "vs/basic-languages/toml/toml.contribution"
+ return `vs/basic-languages/${id}/${id}.contribution`
+}
+
+const loadedContributions = new Set()
+const pendingContributions = new Map>()
+
+export async function ensureMonacoLanguageLoaded(languageId: string): Promise {
+ const moduleId = getContributionModuleId(languageId)
+ if (!moduleId) return
+
+ if (loadedContributions.has(moduleId)) return
+ const pending = pendingContributions.get(moduleId)
+ if (pending) return pending
+
+ const task = (async () => {
+ try {
+ await requireAsync([moduleId])
+ } catch {
+ // ignore
+ } finally {
+ loadedContributions.add(moduleId)
+ pendingContributions.delete(moduleId)
+ }
+ })()
+
+ pendingContributions.set(moduleId, task)
+ return task
+}
+
+export async function loadMonaco(): Promise {
+ if (monacoPromise) return monacoPromise
+
+ monacoPromise = (async () => {
+ await ensureLoaderScript()
+ configureWorkers()
+
+ const online = await canReachCdn()
+ const requireConfig = getRequireConfig()
+
+ const paths: Record = {
+ vs: LOCAL_VS_ROOT,
+ }
+
+ if (online) {
+ paths["vs/basic-languages"] = `${CDN_VS_ROOT}/basic-languages`
+ paths["vs/language"] = `${CDN_VS_ROOT}/language`
+
+ // Keep Monaco's language metadata available offline.
+ paths["vs/basic-languages/monaco.contribution"] = `${LOCAL_VS_ROOT}/basic-languages/monaco.contribution`
+ paths["vs/basic-languages/_.contribution"] = `${LOCAL_VS_ROOT}/basic-languages/_.contribution`
+
+ // Baseline languages should remain available offline too.
+ paths["vs/basic-languages/python"] = `${LOCAL_VS_ROOT}/basic-languages/python`
+ paths["vs/basic-languages/markdown"] = `${LOCAL_VS_ROOT}/basic-languages/markdown`
+ paths["vs/basic-languages/cpp"] = `${LOCAL_VS_ROOT}/basic-languages/cpp`
+ paths["vs/basic-languages/kotlin"] = `${LOCAL_VS_ROOT}/basic-languages/kotlin`
+
+ paths["vs/language/typescript"] = `${LOCAL_VS_ROOT}/language/typescript`
+ paths["vs/language/html"] = `${LOCAL_VS_ROOT}/language/html`
+ paths["vs/language/json"] = `${LOCAL_VS_ROOT}/language/json`
+ paths["vs/language/css"] = `${LOCAL_VS_ROOT}/language/css`
+ }
+
+ requireConfig({
+ paths,
+ ignoreDuplicateModules: ["vs/editor/editor.main"],
+ })
+
+ // Load editor core.
+ const [monaco] = await requireAsync(["vs/editor/editor.main"])
+
+ // Load language metadata so we can infer language IDs from paths.
+ // (This is small and should remain local for offline support.)
+ await requireAsync(["vs/basic-languages/monaco.contribution", "vs/basic-languages/_.contribution"]).catch(() => [])
+
+ return (globalThis as any).monaco ?? monaco
+ })()
+
+ return monacoPromise
+}
diff --git a/packages/ui/src/styles/panels/right-panel.css b/packages/ui/src/styles/panels/right-panel.css
index c51a1ff5..391b6738 100644
--- a/packages/ui/src/styles/panels/right-panel.css
+++ b/packages/ui/src/styles/panels/right-panel.css
@@ -184,6 +184,26 @@
background-color: var(--surface-secondary);
}
+.file-viewer-toolbar {
+ @apply ml-auto flex items-center gap-1;
+}
+
+.file-viewer-toolbar-button {
+ @apply text-[11px] px-2 py-1 rounded border border-base transition-colors;
+ background-color: var(--surface-base);
+ color: var(--text-secondary);
+}
+
+.file-viewer-toolbar-button:hover {
+ background-color: var(--surface-hover);
+ color: var(--text-primary);
+}
+
+.file-viewer-toolbar-button.active {
+ color: var(--text-primary);
+ box-shadow: inset 0 0 0 1px var(--accent-primary);
+}
+
.file-viewer-title {
@apply text-[11px] font-semibold uppercase tracking-wide;
color: var(--text-muted);
@@ -193,6 +213,16 @@
@apply flex-1 p-4 overflow-auto min-h-0;
}
+.file-viewer-content--monaco {
+ @apply flex-1 overflow-hidden min-h-0;
+ padding: 0;
+}
+
+.monaco-viewer {
+ width: 100%;
+ height: 100%;
+}
+
.file-viewer-empty {
@apply flex flex-col items-center justify-center h-full gap-3 text-center;
color: var(--text-muted);
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 6e231b07..b0e1150c 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -11,6 +11,81 @@ export default defineConfig({
root: "./src/renderer",
plugins: [
solid(),
+ {
+ name: "prepare-monaco-public-assets",
+ buildStart() {
+ const publicDir = resolve(__dirname, "src/renderer/public")
+ const destRoot = resolve(publicDir, "monaco/vs")
+
+ const candidates = [
+ resolve(__dirname, "../../node_modules/monaco-editor/min/vs"),
+ resolve(__dirname, "node_modules/monaco-editor/min/vs"),
+ ]
+ const sourceRoot = candidates.find((p) => fs.existsSync(resolve(p, "loader.js")))
+ if (!sourceRoot) {
+ this.warn("Monaco source directory not found; skipping copy")
+ return
+ }
+
+ fs.mkdirSync(destRoot, { recursive: true })
+
+ const copyRecursive = (src: string, dest: string) => {
+ const stat = fs.statSync(src)
+ if (stat.isDirectory()) {
+ fs.mkdirSync(dest, { recursive: true })
+ for (const entry of fs.readdirSync(src)) {
+ copyRecursive(resolve(src, entry), resolve(dest, entry))
+ }
+ return
+ }
+ fs.copyFileSync(src, dest)
+ }
+
+ // Keep the working tree clean; these assets are generated.
+ try {
+ fs.rmSync(destRoot, { recursive: true, force: true })
+ } catch {
+ // ignore
+ }
+ fs.mkdirSync(destRoot, { recursive: true })
+
+ // Copy core Monaco runtime.
+ for (const dir of ["base", "editor", "platform"] as const) {
+ const src = resolve(sourceRoot, dir)
+ if (fs.existsSync(src)) {
+ copyRecursive(src, resolve(destRoot, dir))
+ }
+ }
+ // loader.js is required.
+ copyRecursive(resolve(sourceRoot, "loader.js"), resolve(destRoot, "loader.js"))
+
+ // Copy baseline rich language packages + workers.
+ for (const lang of ["typescript", "html", "json", "css"] as const) {
+ const src = resolve(sourceRoot, "language", lang)
+ if (fs.existsSync(src)) {
+ copyRecursive(src, resolve(destRoot, "language", lang))
+ }
+ }
+
+ // Copy baseline basic tokenizers.
+ for (const lang of ["python", "markdown", "cpp", "kotlin"] as const) {
+ const src = resolve(sourceRoot, "basic-languages", lang)
+ if (fs.existsSync(src)) {
+ copyRecursive(src, resolve(destRoot, "basic-languages", lang))
+ }
+ }
+
+ // Copy monaco.contribution.js entrypoints (needed by some loads).
+ const monacoContribution = resolve(sourceRoot, "basic-languages", "monaco.contribution.js")
+ if (fs.existsSync(monacoContribution)) {
+ copyRecursive(monacoContribution, resolve(destRoot, "basic-languages", "monaco.contribution.js"))
+ }
+ const underscoreContribution = resolve(sourceRoot, "basic-languages", "_.contribution.js")
+ if (fs.existsSync(underscoreContribution)) {
+ copyRecursive(underscoreContribution, resolve(destRoot, "basic-languages", "_.contribution.js"))
+ }
+ },
+ },
{
name: "emit-ui-version",
generateBundle() {
@@ -51,14 +126,20 @@ export default defineConfig({
theme_color: "#1a1a1a",
},
workbox: {
- // Preserve server-side auth redirects (e.g., /login) instead of serving cached index.html.
- navigateFallback: null,
- // Only precache static assets (avoid caching HTML documents / routes).
- globPatterns: ["**/*.{js,css,png,jpg,jpeg,svg,webp,ico,woff,woff2,ttf,eot,json,webmanifest}"],
- globIgnores: ["**/*.html"],
- // Only cache static UI assets; never cache API traffic.
- runtimeCaching: [
- {
+ // Preserve server-side auth redirects (e.g., /login) instead of serving cached index.html.
+ navigateFallback: null,
+ // Only precache static assets (avoid caching HTML documents / routes).
+ globPatterns: ["**/*.{js,css,png,jpg,jpeg,svg,webp,ico,woff,woff2,ttf,eot,json,webmanifest}"],
+ // Monaco assets can be large; cache them at runtime instead.
+ globIgnores: [
+ "**/*.html",
+ "**/assets/*worker-*.js",
+ "**/assets/editor.api-*.js",
+ "**/monaco/vs/**/*",
+ ],
+ // Only cache static UI assets; never cache API traffic.
+ runtimeCaching: [
+ {
urlPattern: ({ url, request }) => {
if (url.pathname.startsWith("/api/")) return false
if (request.destination === "document") return false