@sixb/desktop 0.1.0 → 0.2.1

package/src/generate.ts

@@ -5,7 +5,7 @@ import { readAppIdentity } from "./identity"
 import { drawMacIcon } from "./mac-icon"
 import { run } from "./run"
 import type { ShellConfig } from "./shell/navigation"
-import { HIDDEN_TITLE_BAR_PRELOAD } from "./shell/window"
+import { RUNNER_BINARY } from "./shell/runner"
 
 export interface DesktopAppOptions {
   /** The Sixb project. The desktop app is generated under its `.sixb/desktop`. */
@@ -14,6 +14,11 @@ export interface DesktopAppOptions {
   readonly appUrl: string
   /** The project's API. Its sign-in pages are where the window is approved. */
   readonly apiOrigin: string
+  /**
+   * What the app compiles to run the agent on this computer: the CLI names its own, as this package
+   * doesn't depend on it. Without one, the app has no way to run the agent here: see `writeRunner`.
+   */
+  readonly runnerEntry?: string
 }
 
 /** The Electron app `writeDesktopApp` generated, and what it is called. */
@@ -28,8 +33,11 @@ export interface GeneratedApp {
 // Read from the package's `src`, which ships, whether this module runs from `src` or `dist`.
 const SHELL_SOURCE_DIR = fileURLToPath(new URL("../src/shell", import.meta.url))
 
-/** Where a project's desktop app is generated (`app`) and packaged (`dist`). */
-export function desktopDir(projectRoot: string, part: "app" | "dist"): string {
+/**
+ * Where a project's desktop app is generated (`app`), what runs the agent is compiled (`runner`, beside
+ * the app as everything in the app's directory ships inside its archive), and it's packaged (`dist`).
+ */
+export function desktopDir(projectRoot: string, part: "app" | "dist" | "runner"): string {
   return join(projectRoot, ".sixb", "desktop", part)
 }
 
@@ -62,7 +70,6 @@ export async function writeDesktopApp(options: DesktopAppOptions): Promise<Gener
   await Promise.all([
     writeFile(join(dir, "package.json"), `${JSON.stringify(manifest, null, 2)}\n`),
     writeFile(join(dir, "shell.json"), `${JSON.stringify(config, null, 2)}\n`),
-    writeFile(join(dir, "preload.js"), HIDDEN_TITLE_BAR_PRELOAD),
     writeFile(join(dir, "index.html"), renderShellPage(template, { ...config, icon: !!icon })),
   ])
 
@@ -73,16 +80,46 @@ export async function writeDesktopApp(options: DesktopAppOptions): Promise<Gener
       process.execPath,
       "build",
       join(SHELL_SOURCE_DIR, "main.ts"),
+      join(SHELL_SOURCE_DIR, "preload.ts"),
       "--target=node",
       "--format=cjs",
       "--external=electron",
-      `--outfile=${join(dir, "main.js")}`,
+      `--outdir=${dir}`,
     ],
     "Could not compile the desktop shell."
   )
   return { dir, name: identity.name, version, icon }
 }
 
+/**
+ * Compiles what runs the agent into one program, so that the app needs nothing installed, and a `bun`
+ * beside it. The agent's own `sixb` runs on Bun or Node, which a person may have neither of, and the
+ * program can stand in for Bun: last on the PATH the shell gives it, after any they have. Returns its
+ * directory: null with no entry, and on Windows, which has no local sandbox to run the agent in.
+ */
+export async function writeRunner(options: DesktopAppOptions): Promise<string | null> {
+  const dir = desktopDir(options.projectRoot, "runner")
+  await rm(dir, { recursive: true, force: true })
+  if (!options.runnerEntry || process.platform === "win32") return null
+  await mkdir(dir, { recursive: true })
+  await run(
+    [
+      process.execPath,
+      "build",
+      "--compile",
+      options.runnerEntry,
+      `--outfile=${join(dir, RUNNER_BINARY)}`,
+    ],
+    "Could not compile what runs the agent."
+  )
+  await writeFile(
+    join(dir, "bun"),
+    `#!/bin/sh\nBUN_BE_BUN=1 exec "$(dirname "$0")/${RUNNER_BINARY}" "$@"\n`,
+    { mode: 0o755 }
+  )
+  return dir
+}
+
 /** The page the window shows while the app loads, and when it cannot reach the app. */
 export function renderShellPage(
   template: string,

package/src/index.ts

@@ -2,7 +2,7 @@ import { mkdir, readdir, rm } from "node:fs/promises"
 import { createRequire } from "node:module"
 import { dirname, join } from "node:path"
 import { fileURLToPath } from "node:url"
-import { type DesktopAppOptions, desktopDir, writeDesktopApp } from "./generate"
+import { type DesktopAppOptions, desktopDir, writeDesktopApp, writeRunner } from "./generate"
 import { bundleIdentifier } from "./identity"
 import { run } from "./run"
 
@@ -28,6 +28,11 @@ const PACKAGER_SCRIPT = fileURLToPath(new URL("../src/packager.mjs", import.meta
 /** Opens the app in a desktop window. `sixb dev --desktop` calls this. */
 export async function openDesktopApp(options: DesktopAppOptions): Promise<DesktopWindow> {
   const app = await writeDesktopApp(options)
+  // The window is still worth opening without it, for a project not using the agent: conversations
+  // run in the cloud. A build, which people get, fails instead.
+  await writeRunner(options).catch((error: unknown) => {
+    console.error("[SixbDesktop] Conversations will run in the cloud.", error)
+  })
   // Chromium writes plenty to stderr when all is well, so it goes to a file, named if the window
   // quits on its own with an error.
   const log = join(dirname(app.dir), "electron.log")
@@ -53,6 +58,7 @@ export async function openDesktopApp(options: DesktopAppOptions): Promise<Deskto
 /** Packages the app for this machine's platform. `sixb desktop build` calls this. */
 export async function buildDesktopApp(options: DesktopAppOptions): Promise<DesktopBuild> {
   const app = await writeDesktopApp(options)
+  const runner = await writeRunner(options)
   const out = desktopDir(options.projectRoot, "dist")
   await rm(out, { recursive: true, force: true })
 
@@ -67,6 +73,8 @@ export async function buildDesktopApp(options: DesktopAppOptions): Promise<Deskt
     electronVersion: (packageRequire("electron/package.json") as { readonly version: string })
       .version,
     ...(mac && app.icon ? { icon: await macIcon(app.icon) } : {}),
+    // Beside the app's archive, not in it: a program has to be a file of its own to run.
+    ...(runner ? { extraResource: [runner] } : {}),
     // Signs with the Developer ID certificate in the keychain, which notarization requires.
     ...(notarize ? { osxSign: {}, osxNotarize: notarize } : {}),
   })
@@ -171,7 +179,7 @@ function electronBinary(): string {
     const electronDir = dirname(packageRequire.resolve("electron/package.json"))
     throw new Error(
       "[SixbDesktop] Electron's binary is missing: its install script did not run. " +
-        `Run \`bun run --cwd ${electronDir} postinstall\`, then try again.`
+        `Run \`bun ${join(electronDir, "install.js")}\`, then try again.`
     )
   }
 }

package/src/shell/bridge.ts

@@ -0,0 +1,41 @@
+/** The name a page finds the desktop app under, through `useDesktop` in `@sixb/client/hooks`. */
+export const DESKTOP_BRIDGE_NAME = "sixbDesktop"
+
+/** How the page's `computer` methods reach the main process. */
+export const COMPUTER_CHANNELS = {
+  about: "sixb:computer:about",
+  folders: "sixb:computer:folders",
+  pickFolder: "sixb:computer:pick-folder",
+  allowFolder: "sixb:computer:allow-folder",
+  forgetFolder: "sixb:computer:forget-folder",
+} as const
+
+// Typed by `SixbDesktop` in `@sixb/client`, which the page reads: an `any` that a test holds to it.
+// biome-ignore lint/suspicious/noExplicitAny: each channel answers its own type.
+type Invoke = (channel: string, ...args: unknown[]) => Promise<any>
+
+/**
+ * What the shell offers the page. `SixbDesktop` in `@sixb/client` is the page's view of this, and
+ * `tests/app.test.ts` holds the two together.
+ *
+ * The page is remote, and anything here is open to whatever runs in it. To offer more:
+ *  1. Add one narrow method here, calling `ipcRenderer.invoke`, never a general way to run a command
+ *     or read a file. The page asks; the person decides, in a native dialog, what it gets.
+ *  2. Handle it in `main.ts`, refusing any sender that `isAppUrl` does not accept.
+ *  3. Add it to `SixbDesktop` as optional, because a page can outlive the shell it runs in.
+ */
+export function desktopBridge<const Platform extends NodeJS.Platform>(
+  platform: Platform,
+  invoke: Invoke
+) {
+  return {
+    platform,
+    computer: {
+      about: () => invoke(COMPUTER_CHANNELS.about),
+      folders: () => invoke(COMPUTER_CHANNELS.folders),
+      pickFolder: () => invoke(COMPUTER_CHANNELS.pickFolder),
+      allowFolder: (folder: string) => invoke(COMPUTER_CHANNELS.allowFolder, folder),
+      forgetFolder: (folder: string) => invoke(COMPUTER_CHANNELS.forgetFolder, folder),
+    },
+  }
+}

package/src/shell/main.ts

@@ -1,10 +1,33 @@
 // The desktop shell's main process. `writeDesktopApp` compiles this file into the generated
 // Electron app; nothing imports it.
 import { existsSync, readFileSync } from "node:fs"
-import { join } from "node:path"
-import { app, BrowserWindow, type Event, nativeTheme, session, shell } from "electron"
+import { realpath, stat } from "node:fs/promises"
+import { hostname } from "node:os"
+import { isAbsolute, join } from "node:path"
+import {
+  app,
+  BrowserWindow,
+  dialog,
+  type Event,
+  type IpcMainInvokeEvent,
+  ipcMain,
+  type MessageBoxOptions,
+  nativeTheme,
+  session,
+  shell,
+} from "electron"
+import { COMPUTER_CHANNELS } from "./bridge"
 import { createNavigationState, isWebUrl, nextNavigationStep, type ShellConfig } from "./navigation"
-import { HIDDEN_TITLE_BAR_CSS, isAppUrl, mayNavigate, WINDOW_BACKGROUND } from "./window"
+import { DesktopRunner, RUNNER_BINARY, runnerEnvironment, startRunnerProcess } from "./runner"
+import {
+  HIDDEN_TITLE_BAR_CSS,
+  hasHiddenTitleBar,
+  isApiPage,
+  isAppUrl,
+  mayNavigate,
+  pageWebPreferences,
+  WINDOW_BACKGROUND,
+} from "./window"
 
 // Chromium's code for a load that was replaced by another one, which is not a failure.
 const ERR_ABORTED = -3
@@ -15,8 +38,7 @@ const appDir = app.getAppPath()
 const config = JSON.parse(readFileSync(join(appDir, "shell.json"), "utf-8")) as ShellConfig
 const loadingPage = join(appDir, "index.html")
 const icon = existsSync(join(appDir, "icon.png")) ? join(appDir, "icon.png") : undefined
-// Only macOS draws window controls over the page; elsewhere the title bar stays.
-const inset = process.platform === "darwin"
+const inset = hasHiddenTitleBar(process.platform)
 const state = createNavigationState()
 
 app.setName(config.name)
@@ -33,13 +55,7 @@ function createWindow(): void {
     backgroundColor: nativeTheme.shouldUseDarkColors
       ? WINDOW_BACKGROUND.dark
       : WINDOW_BACKGROUND.light,
-    webPreferences: {
-      // The window shows a remote page: it gets no Node, and a world apart from the preload's.
-      sandbox: true,
-      contextIsolation: true,
-      nodeIntegration: false,
-      preload: inset ? join(appDir, "preload.js") : undefined,
-    },
+    webPreferences: pageWebPreferences(join(appDir, "preload.js")),
   })
   const contents = win.webContents
   win.once("ready-to-show", () => win.show())
@@ -85,6 +101,109 @@ function createWindow(): void {
   void win.loadFile(loadingPage).then(() => load(config.appUrl))
 }
 
+/** Beside the app's archive once packaged, and beside the generated app before that. */
+const runnerDir = app.isPackaged
+  ? join(process.resourcesPath, "runner")
+  : join(appDir, "..", "runner")
+const runnerProgram = join(runnerDir, RUNNER_BINARY)
+let runnerEnv: NodeJS.ProcessEnv = process.env
+const runner = existsSync(runnerProgram)
+  ? new DesktopRunner({
+      start: () =>
+        startRunnerProcess(
+          // Its data: the window's sign-in is in there, as cookies the agent's commands mustn't read.
+          [
+            runnerProgram,
+            config.apiOrigin,
+            `${config.name} on ${hostname()}`,
+            app.getPath("userData"),
+          ],
+          runnerEnv
+        ),
+      // The runner holds the sign-in, and only says where to approve it: on the API, as the window's.
+      onSignIn: (url) => {
+        if (isApiPage(config, url)) void shell.openExternal(url)
+        else console.error(`[SixbDesktop] Refused to open a sign-in away from the API: ${url}`)
+      },
+      onProblem: (message) => console.error(`[SixbDesktop] ${message}`),
+    })
+  : null
+
+/** Answer the page's `computer` methods, asking whoever calls for the app's own origin first. */
+function answerComputer(
+  channel: string,
+  answer: (event: IpcMainInvokeEvent, ...args: unknown[]) => unknown
+): void {
+  ipcMain.handle(channel, (event, ...args) => {
+    if (!isAppUrl(config, event.senderFrame?.url ?? "")) {
+      throw new Error("[SixbDesktop] Only the app may ask for this.")
+    }
+    return answer(event, ...args)
+  })
+}
+
+/** What a page named as a folder: it gets here unchecked, so nothing is taken on its word. */
+async function namedFolder(value: unknown): Promise<string | null> {
+  if (typeof value !== "string" || !isAbsolute(value)) return null
+  const folder = await realpath(value).catch(() => null)
+  if (!folder) return null
+  return (await stat(folder)).isDirectory() ? folder : null
+}
+
+function installComputerAccess(running: DesktopRunner): void {
+  answerComputer(COMPUTER_CHANNELS.about, () => running.about())
+  answerComputer(COMPUTER_CHANNELS.folders, () => running.folders())
+  answerComputer(COMPUTER_CHANNELS.pickFolder, async (event) => {
+    const options = {
+      title: "Choose a folder",
+      message:
+        "Choose where the agent works. Messages you send from here or the web run in this folder, " +
+        "as you, and its commands run without asking.",
+      buttonLabel: "Work Here",
+      properties: ["openDirectory", "createDirectory"] as ("openDirectory" | "createDirectory")[],
+    }
+    const owner = BrowserWindow.fromWebContents(event.sender)
+    const { canceled, filePaths } = owner
+      ? await dialog.showOpenDialog(owner, options)
+      : await dialog.showOpenDialog(options)
+    const folder = canceled ? null : await namedFolder(filePaths[0])
+    if (folder) running.allow(folder)
+    return folder
+  })
+  answerComputer(COMPUTER_CHANNELS.allowFolder, async (event, value) => {
+    const owner = BrowserWindow.fromWebContents(event.sender)
+    const ask = (options: MessageBoxOptions) =>
+      owner ? dialog.showMessageBox(owner, options) : dialog.showMessageBox(options)
+    const folder = await namedFolder(value)
+    if (!folder) {
+      // Its button would otherwise do nothing, with nothing to say why.
+      await ask({
+        type: "warning",
+        message: "That folder isn't on this computer now.",
+        detail: "Put it back, or continue in the cloud.",
+      })
+      return false
+    }
+    const { response } = await ask({
+      type: "question",
+      message: `Let the agent work in ${folder}?`,
+      detail:
+        "Messages you send from here or the web, in any conversation in this folder, run on this " +
+        "computer, as you. The agent's commands run there without asking.",
+      buttons: ["Allow", "Cancel"],
+      // A page can ask at any moment: the Return they were about to press isn't their answer.
+      defaultId: 1,
+      cancelId: 1,
+    })
+    if (response !== 0) return false
+    running.allow(folder)
+    return true
+  })
+  answerComputer(COMPUTER_CHANNELS.forgetFolder, async (_event, value) => {
+    if (typeof value === "string") running.forget(value)
+  })
+}
+
 void app.whenReady().then(() => {
   // A packaged app carries its icon in its bundle. Run from source, it would show Electron's.
   if (icon && !app.isPackaged) app.dock?.setIcon(icon)
@@ -96,12 +215,34 @@ void app.whenReady().then(() => {
     }
   )
 
+  if (runner) {
+    installComputerAccess(runner)
+    void runnerEnvironment(runnerDir, process.env).then((env) => {
+      runnerEnv = env
+      runner.start()
+    })
+  } else {
+    answerComputer(COMPUTER_CHANNELS.about, () => null)
+    answerComputer(COMPUTER_CHANNELS.folders, () => [])
+  }
+
   createWindow()
   app.on("activate", () => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
   })
 })
 
+// Waits for the runner, so that a turn running here records its end before the app is gone.
+let runnerStopped = false
+app.on("before-quit", (event) => {
+  if (!runner || runnerStopped) return
+  event.preventDefault()
+  void runner.stop().finally(() => {
+    runnerStopped = true
+    app.quit()
+  })
+})
+
 app.on("window-all-closed", () => {
   if (process.platform !== "darwin") app.quit()
 })

package/src/shell/preload.ts

@@ -0,0 +1,47 @@
+// Runs in every page the window shows, before the page's own scripts, in a world of its own. Electron
+// sandboxes it: of what it imports, only `electron` may remain once compiled.
+import { contextBridge, ipcRenderer } from "electron"
+import { DESKTOP_BRIDGE_NAME, desktopBridge } from "./bridge"
+import { CONTROLS_HEIGHT_PX, hasHiddenTitleBar } from "./window"
+
+contextBridge.exposeInMainWorld(
+  DESKTOP_BRIDGE_NAME,
+  desktopBridge(process.platform, (channel, ...args) => ipcRenderer.invoke(channel, ...args))
+)
+
+if (hasHiddenTitleBar(process.platform)) installHiddenTitleBar()
+
+/**
+ * Marks `<html>` the moment the element exists, so an app can read the mark on its first render,
+ * and adds the drag handle once there is a body to hold it.
+ */
+function installHiddenTitleBar(): void {
+  const mark = () => {
+    const root = document.documentElement
+    if (!root) return false
+    root.dataset.sixbDesktop = "inset"
+    root.style.setProperty("--sixb-desktop-controls-height", `${CONTROLS_HEIGHT_PX}px`)
+    return true
+  }
+  if (!mark()) {
+    const observer = new MutationObserver(() => {
+      if (mark()) observer.disconnect()
+    })
+    observer.observe(document, { childList: true })
+  }
+
+  const addHandle = () => {
+    if (!document.body || document.getElementById("sixb-desktop-drag")) return
+    const handle = document.createElement("div")
+    handle.id = "sixb-desktop-drag"
+    handle.setAttribute("aria-hidden", "true")
+    // First in the body, not last: the draggable area is built in document order, so a control
+    // is only cut out of it if it comes after the handle.
+    document.body.prepend(handle)
+  }
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", addHandle, { once: true })
+  } else {
+    addHandle()
+  }
+}