fix: add browser folder picker for scoped Skiller

Author: skulidropek

docs/integrations/skiller.md

@@ -57,6 +57,7 @@ The latest Playwright proof screenshots are checked in under `docs/screenshots/i
 - `pr238-proof-27-terminal-skiller-same-session.png` shows the attached terminal with the `Skiller` button.
 - `pr238-proof-28-skiller-session-scoped-ui.png` shows the real Skiller UI opened from that button.
 - `pr238-proof-29-skiller-codex-container-skill.png` shows a Codex skill discovered from the selected container's `/home/dev/.codex/skills` tree.
+- `pr238-proof-30-skiller-add-project-folder-browser-picker.png` shows the browser-visible project folder picker opened from `Add project folder...` with selected-container paths.
 
 ## Updating the Pin
 

docs/screenshots/issue-237/proof/pr238-proof-30-skiller-add-project-folder-browser-picker.png

@@ -26,10 +26,10 @@
     "clone": "bash -lc 'bun run --cwd packages/app build:docker-git && bun ./packages/app/dist/src/docker-git/main.js clone \"$@\"' --",
     "open": "bash -lc 'bun run --cwd packages/app build:docker-git && bun ./packages/app/dist/src/docker-git/main.js open \"$@\"' --",
     "docker-git": "bash -lc 'bun run --cwd packages/app build:docker-git && bun ./packages/app/dist/src/docker-git/main.js \"$@\"' --",
-    "skiller:init": "git submodule update --init --checkout third_party/skiller-desktop-skills-manager",
+    "skiller:init": "git submodule update --init --checkout third_party/skiller-desktop-skills-manager && bun scripts/skiller-apply-docker-git-patches.mjs",
     "skiller:install": "bun install --cwd third_party/skiller-desktop-skills-manager --frozen-lockfile",
     "skiller:dev": "bun run --cwd third_party/skiller-desktop-skills-manager dev",
-    "skiller:check": "bun run --cwd third_party/skiller-desktop-skills-manager typecheck && bun run --cwd third_party/skiller-desktop-skills-manager test",
+    "skiller:check": "bun scripts/skiller-apply-docker-git-patches.mjs && bun run --cwd third_party/skiller-desktop-skills-manager typecheck && bun run --cwd third_party/skiller-desktop-skills-manager test",
     "e2e": "bash scripts/e2e/run-all.sh",
     "e2e:clone-cache": "bash scripts/e2e/clone-cache.sh",
     "e2e:browser-command": "bash scripts/e2e/browser-command.sh",

package.json

@@ -62,10 +62,12 @@ RUN set -eu; \
     exit 1
 RUN bun run --cwd packages/lib build
 RUN bun run --cwd packages/api build
+RUN bun scripts/skiller-apply-docker-git-patches.mjs
 RUN test -f third_party/skiller-desktop-skills-manager/package.json \
  && cd third_party/skiller-desktop-skills-manager \
  && bun install --frozen-lockfile --silent \
  && bun run build \
+ && touch out/.docker-git-browser-folder-picker.patch \
  && mkdir -p out/preload \
  && ln -sf index.mjs out/preload/index.js
 

packages/api/Dockerfile

@@ -19,6 +19,21 @@ export type SkillerContainerScope = {
   readonly sshUser: string
 }
 
+export type SkillerBrowserPathRoot = {
+  readonly containerPath: string
+  readonly hostPath: string
+  readonly id: "project" | "home" | "codexSkills"
+  readonly label: string
+}
+
+export type SkillerBrowserScope = {
+  readonly containerName: string
+  readonly currentProject: SkillerBrowserPathRoot
+  readonly projectKey: string
+  readonly roots: ReadonlyArray<SkillerBrowserPathRoot>
+  readonly sessionId: string
+}
+
 export const parseDockerMountLines = (output: string): ReadonlyArray<DockerContainerMount> =>
   output
     .split(/\r?\n/u)
@@ -49,6 +64,15 @@ export const containerCodexSkillsPath = (containerHomePath: string): string =>
 const isPathInside = (basePath: string, targetPath: string): boolean =>
   targetPath === basePath || targetPath.startsWith(`${basePath}/`)
 
+const normalizeHostPath = (path: string): string =>
+  join(path, ".")
+
+const isHostPathInside = (basePath: string, targetPath: string): boolean => {
+  const base = normalizeHostPath(basePath)
+  const target = normalizeHostPath(targetPath)
+  return target === base || target.startsWith(`${base}/`)
+}
+
 const mountedPathDepth = (mount: DockerContainerMount): number =>
   mount.destination.split("/").filter((part) => part.length > 0).length
 
@@ -91,3 +115,80 @@ export const sameSkillerScope = (
     left.hostHomePath === right.hostHomePath &&
     left.hostProjectPath === right.hostProjectPath
 }
+
+const skillerBrowserRoots = (scope: SkillerContainerScope): ReadonlyArray<SkillerBrowserPathRoot> => [
+  {
+    containerPath: normalizeContainerPath(scope.containerProjectPath),
+    hostPath: scope.hostProjectPath,
+    id: "project",
+    label: "Current project"
+  },
+  {
+    containerPath: normalizeContainerPath(scope.containerHomePath),
+    hostPath: scope.hostHomePath,
+    id: "home",
+    label: "Home"
+  },
+  {
+    containerPath: normalizeContainerPath(scope.containerCodexSkillsPath),
+    hostPath: scope.hostCodexSkillsPath,
+    id: "codexSkills",
+    label: "Codex skills"
+  }
+]
+
+const rootDepth = (root: Pick<SkillerBrowserPathRoot, "containerPath" | "hostPath">, key: "containerPath" | "hostPath"): number =>
+  root[key].split("/").filter((part) => part.length > 0).length
+
+export const skillerBrowserScopeForContainer = (
+  scope: SkillerContainerScope,
+  sessionId: string
+): SkillerBrowserScope => {
+  const roots = skillerBrowserRoots(scope)
+  return {
+    containerName: scope.containerName,
+    currentProject: roots[0] ?? {
+      containerPath: normalizeContainerPath(scope.containerProjectPath),
+      hostPath: scope.hostProjectPath,
+      id: "project",
+      label: "Current project"
+    },
+    projectKey: scope.projectKey,
+    roots,
+    sessionId
+  }
+}
+
+export const remapSkillerBrowserContainerPath = (
+  browserScope: SkillerBrowserScope,
+  containerPath: string
+): string | null => {
+  const normalizedPath = normalizeContainerPath(containerPath)
+  const root = [...browserScope.roots]
+    .filter((candidate) => isPathInside(normalizeContainerPath(candidate.containerPath), normalizedPath))
+    .sort((left, right) => rootDepth(right, "containerPath") - rootDepth(left, "containerPath"))[0]
+  if (root === undefined) {
+    return null
+  }
+  const relativePath = posix.relative(normalizeContainerPath(root.containerPath), normalizedPath)
+  return relativePath.length === 0
+    ? root.hostPath
+    : join(root.hostPath, ...relativePath.split(posix.sep))
+}
+
+export const remapSkillerBrowserHostPath = (
+  browserScope: SkillerBrowserScope,
+  hostPath: string
+): string => {
+  const normalizedHostPath = normalizeHostPath(hostPath)
+  const root = [...browserScope.roots]
+    .filter((candidate) => isHostPathInside(candidate.hostPath, normalizedHostPath))
+    .sort((left, right) => rootDepth(right, "hostPath") - rootDepth(left, "hostPath"))[0]
+  if (root === undefined) {
+    return hostPath
+  }
+  const relativePath = normalizedHostPath.slice(normalizeHostPath(root.hostPath).length).replace(/^\/+/u, "")
+  return relativePath.length === 0
+    ? normalizeContainerPath(root.containerPath)
+    : posix.join(normalizeContainerPath(root.containerPath), ...relativePath.split("/"))
+}

packages/api/src/services/skiller-core.ts

@@ -21,6 +21,7 @@ import {
   parseDockerMountLines,
   remapContainerPathToMountedHost,
   sameSkillerScope,
+  skillerBrowserScopeForContainer,
   type SkillerContainerScope
 } from "./skiller-core.js"
 import { getProjectItemByKey } from "./projects.js"
@@ -53,7 +54,7 @@ type SkillerProcessUser = {
 }
 
 type SkillerRoute =
-  | { readonly _tag: "App"; readonly relativePath: string }
+  | { readonly _tag: "App"; readonly relativePath: string; readonly sessionId: string | null }
   | { readonly _tag: "Trpc"; readonly sessionId: string | null; readonly upstreamPath: string }
 
 const submoduleRelativePath = join("third_party", "skiller-desktop-skills-manager")
@@ -279,8 +280,15 @@ const waitForSkillerReady = (trpcPort: number): Effect.Effect<void, ApiInternalE
 
 const launchScript = [
   "set -euo pipefail",
+  "DOCKER_GIT_SKILLER_PATCH=../../patches/skiller/docker-git-browser-folder-picker.patch",
+  "DOCKER_GIT_SKILLER_PATCH_MARKER=out/.docker-git-browser-folder-picker.patch",
+  "if [ -f ../../scripts/skiller-apply-docker-git-patches.mjs ]; then bun ../../scripts/skiller-apply-docker-git-patches.mjs; fi",
   "if [ ! -d node_modules ]; then bun install --frozen-lockfile; fi",
-  "if [ ! -f out/main/index.js ] || [ ! -f out/renderer/index.html ]; then bun run build; fi",
+  "if [ ! -f out/main/index.js ] || [ ! -f out/renderer/index.html ] || { [ -f \"$DOCKER_GIT_SKILLER_PATCH\" ] && [ ! -f \"$DOCKER_GIT_SKILLER_PATCH_MARKER\" ]; } || { [ -f \"$DOCKER_GIT_SKILLER_PATCH\" ] && [ \"$DOCKER_GIT_SKILLER_PATCH\" -nt \"$DOCKER_GIT_SKILLER_PATCH_MARKER\" ]; }; then",
+  "  bun run build",
+  "  mkdir -p out",
+  "  touch \"$DOCKER_GIT_SKILLER_PATCH_MARKER\"",
+  "fi",
   "if [ ! -e out/preload/index.js ]; then ln -sf index.mjs out/preload/index.js; fi",
   "if [ -z \"${DISPLAY:-}\" ] && command -v xvfb-run >/dev/null 2>&1; then",
   "  exec xvfb-run -a ./node_modules/electron/dist/electron --no-sandbox out/main/index.js",
@@ -522,17 +530,17 @@ export const parseSkillerRoute = (pathname: string): SkillerRoute | null => {
     const routeKind = sessionMatch[2] ?? ""
     const tail = sessionMatch[3] ?? ""
     if (routeKind === "app" || routeKind === "") {
-      return { _tag: "App", relativePath: tail.length === 0 ? "/" : tail }
+      return { _tag: "App", relativePath: tail.length === 0 ? "/" : tail, sessionId }
     }
     if (routeKind === "trpc") {
       return { _tag: "Trpc", sessionId, upstreamPath: `/trpc${tail}` }
     }
   }
   if (normalized === "/skiller/app" || normalized === "/skiller/app/") {
-    return { _tag: "App", relativePath: "/" }
+    return { _tag: "App", relativePath: "/", sessionId: null }
   }
   if (normalized.startsWith("/skiller/app/")) {
-    return { _tag: "App", relativePath: normalized.slice("/skiller/app".length) }
+    return { _tag: "App", relativePath: normalized.slice("/skiller/app".length), sessionId: null }
   }
   if (normalized === "/skiller/trpc" || normalized.startsWith("/skiller/trpc/")) {
     return { _tag: "Trpc", sessionId: null, upstreamPath: normalized.slice("/skiller".length) || "/trpc" }
@@ -575,10 +583,35 @@ const browserTrpcBaseBootstrap = [
   "</script>"
 ].join("")
 
-const injectBrowserTrpcBase = (html: string): string =>
-  html.includes("<head>")
-    ? html.replace("<head>", `<head>${browserTrpcBaseBootstrap}`)
-    : `${browserTrpcBaseBootstrap}${html}`
+const scriptJson = (value: unknown): string =>
+  JSON.stringify(value).replaceAll("<", "\\u003c")
+
+const browserDockerGitScopeBootstrap = (
+  route: Extract<SkillerRoute, { readonly _tag: "App" }>
+): string => {
+  if (route.sessionId === null) {
+    return ""
+  }
+  const scope = sessionScopes.get(route.sessionId)
+  if (scope === undefined || scope === null) {
+    return ""
+  }
+  return [
+    "<script>",
+    `window.__DOCKER_GIT_SKILLER_SCOPE__=${scriptJson(skillerBrowserScopeForContainer(scope, route.sessionId))};`,
+    "</script>"
+  ].join("")
+}
+
+const injectBrowserBootstrap = (
+  html: string,
+  route: Extract<SkillerRoute, { readonly _tag: "App" }>
+): string => {
+  const bootstrap = `${browserTrpcBaseBootstrap}${browserDockerGitScopeBootstrap(route)}`
+  return html.includes("<head>")
+    ? html.replace("<head>", `<head>${bootstrap}`)
+    : `${bootstrap}${html}`
+}
 
 const safeRendererPath = (skillerDir: string, relativePath: string): string => {
   const rendererDir = resolve(skillerDir, "out", "renderer")
@@ -611,7 +644,7 @@ export const serveSkillerApp = (
       try: () => readFileSync(filePath)
     }))
     if (filePath.endsWith(".html")) {
-      return HttpServerResponse.text(injectBrowserTrpcBase(content.toString("utf8")), {
+      return HttpServerResponse.text(injectBrowserBootstrap(content.toString("utf8"), route), {
         contentType: "text/html; charset=utf-8",
         headers: { "cache-control": "no-store" }
       })

packages/api/src/services/skiller.ts

@@ -4,7 +4,10 @@ import {
   containerCodexSkillsPath,
   parseDockerMountLines,
   remapContainerPathToMountedHost,
-  sameSkillerScope
+  remapSkillerBrowserContainerPath,
+  remapSkillerBrowserHostPath,
+  sameSkillerScope,
+  skillerBrowserScopeForContainer
 } from "../src/services/skiller-core.js"
 
 describe("skiller container filesystem mapping", () => {
@@ -50,4 +53,32 @@ describe("skiller container filesystem mapping", () => {
     expect(sameSkillerScope(scope, null)).toBe(false)
     expect(sameSkillerScope(null, null)).toBe(true)
   })
+
+  it("builds a browser picker scope that remaps selected container paths to host volume paths", () => {
+    const browserScope = skillerBrowserScopeForContainer({
+      containerCodexSkillsPath: "/home/dev/.codex/skills",
+      containerHomePath: "/home/dev",
+      containerName: "dg-project",
+      containerProjectPath: "/home/dev/app",
+      hostCodexSkillsPath: "/var/lib/docker/volumes/project-home/_data/.codex/skills",
+      hostHomePath: "/var/lib/docker/volumes/project-home/_data",
+      hostProjectPath: "/var/lib/docker/volumes/project-home/_data/app",
+      projectId: "/home/dev/.docker-git/project",
+      projectKey: "abc123",
+      sshUser: "dev"
+    }, "terminal-session")
+
+    expect(browserScope.currentProject.containerPath).toBe("/home/dev/app")
+    expect(remapSkillerBrowserContainerPath(browserScope, "/home/dev/app/packages")).toBe(
+      "/var/lib/docker/volumes/project-home/_data/app/packages"
+    )
+    expect(remapSkillerBrowserContainerPath(browserScope, "/home/dev/.codex/skills/demo")).toBe(
+      "/var/lib/docker/volumes/project-home/_data/.codex/skills/demo"
+    )
+    expect(remapSkillerBrowserContainerPath(browserScope, "/tmp/outside")).toBeNull()
+    expect(remapSkillerBrowserHostPath(
+      browserScope,
+      "/var/lib/docker/volumes/project-home/_data/app/packages"
+    )).toBe("/home/dev/app/packages")
+  })
 })

packages/api/tests/skiller-core.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "@effect/vitest"
+
+import { parseSkillerRoute } from "../src/services/skiller.js"
+
+describe("skiller routes", () => {
+  it("keeps the terminal session id on session-scoped app routes", () => {
+    expect(parseSkillerRoute("/api/ssh/session/terminal-proof/skiller/app/")).toEqual({
+      _tag: "App",
+      relativePath: "/",
+      sessionId: "terminal-proof"
+    })
+    expect(parseSkillerRoute("/ssh/session/terminal-proof/skiller/trpc/list_projects")).toEqual({
+      _tag: "Trpc",
+      sessionId: "terminal-proof",
+      upstreamPath: "/trpc/list_projects"
+    })
+    expect(parseSkillerRoute("/api/skiller/app/")).toEqual({
+      _tag: "App",
+      relativePath: "/",
+      sessionId: null
+    })
+  })
+})