@abide/abide 0.28.0

package/src/discoveryEntry.ts

@@ -0,0 +1,81 @@
+// @ts-expect-error virtual module resolved by abideResolverPlugin
+import { rpc } from './_virtual/rpc.ts'
+// @ts-expect-error virtual module resolved by abideResolverPlugin
+import { sockets } from './_virtual/sockets.ts'
+import type { CliManifestEntry } from './lib/cli/types/CliManifestEntry.ts'
+import { verbRegistry } from './lib/server/rpc/verbRegistry.ts'
+import { socketOperations } from './lib/server/sockets/socketOperations.ts'
+import { socketRegistry } from './lib/server/sockets/socketRegistry.ts'
+import { commandNameForUrl } from './lib/shared/commandNameForUrl.ts'
+import { jsonSchemaForSchema } from './lib/shared/jsonSchemaForSchema.ts'
+
+/*
+One-shot script that imports every rpc + socket module so defineVerb /
+defineSocket populate the process-wide registries, then prints the CLI
+manifest to stdout as JSON. Used by buildCli to bake the manifest into
+the standalone binary at build time without resorting to static source
+parsing (which can't see toJsonSchema()/toJSONSchema() at compile time).
+*/
+await Promise.all([
+    ...Object.values(rpc).map((loader) => (loader as () => Promise<unknown>)()),
+    ...Object.values(sockets).map((loader) => (loader as () => Promise<unknown>)()),
+])
+
+const manifest: Record<string, CliManifestEntry> = {}
+
+for (const entry of verbRegistry.values()) {
+    if (!entry.clients.cli) {
+        continue
+    }
+    manifest[commandNameForUrl(entry.remote.url)] = {
+        method: entry.remote.method,
+        url: entry.remote.url,
+        jsonSchema: jsonSchemaForSchema(entry.inputSchema),
+    }
+}
+
+/*
+Sockets advertised to the CLI become commands against the socket's HTTP
+face (see socketOperations): `<base>-tail` streams live (GET +
+text/event-stream, with an optional --tail N to seed from the retained
+tail first) and, when clientPublish is set, `<base>-publish` sends the args bag
+as a message (POST).
+*/
+for (const entry of socketRegistry.values()) {
+    if (!entry.clients.cli) {
+        continue
+    }
+    for (const operation of socketOperations(entry)) {
+        if (operation.kind === 'tail') {
+            manifest[operation.name] = {
+                method: operation.method,
+                url: operation.restUrl,
+                accept: 'text/event-stream',
+                jsonSchema: {
+                    type: 'object',
+                    description: `tail the "${operation.socketName}" socket`,
+                    properties: {
+                        tail: {
+                            type: 'number',
+                            description: 'replay last N messages before tailing live',
+                        },
+                    },
+                },
+            }
+            continue
+        }
+        const payloadSchema = jsonSchemaForSchema(entry.schema)
+        manifest[operation.name] = {
+            method: operation.method,
+            url: operation.restUrl,
+            jsonSchema: {
+                ...payloadSchema,
+                description:
+                    (payloadSchema.description as string | undefined) ??
+                    `publish a message to the "${operation.socketName}" socket`,
+            },
+        }
+    }
+}
+
+process.stdout.write(JSON.stringify(manifest))

package/src/lib/bundle/BundleMenu.ts

@@ -0,0 +1,12 @@
+import type { BundleMenuItem } from './BundleMenuItem.ts'
+
+/*
+A top-level bundle menu, inserted into the macOS menu bar between the standard
+Edit and Window menus. `label` titles the menu; `items` are its entries top to
+bottom.
+*/
+// @readme bundle
+export type BundleMenu = {
+    label: string
+    items: BundleMenuItem[]
+}

package/src/lib/bundle/BundleMenuItem.ts

@@ -0,0 +1,25 @@
+/*
+A single entry in a bundle menu. Serializable data — the native shim builds the
+matching NSMenuItem. Either a divider or a clickable item that dispatches a
+`abide:menu` CustomEvent into the page (detail `{ name }`); the app's own code
+handles it:
+
+    window.addEventListener('abide:menu', (event) => {
+        if (event.detail.name === 'sync') syncNow()
+    })
+
+Emitting an event (rather than calling a verb directly) is what lets a menu
+drive parameterised work: a click carries no arguments, so the app computes
+them and makes the call itself. `shortcut` is the key for the Cmd-based
+equivalent (e.g. `'r'` → Cmd-R).
+
+A `navigate` item moves the window instead of talking to the page: clicking it
+calls `webview_navigate` with the given URL (the native side, on the UI thread).
+That's how the built-in Server menu drives the connect screen — `emit` reaches
+the loaded page, `navigate` repoints the window itself.
+*/
+// @readme bundle
+export type BundleMenuItem =
+    | { separator: true }
+    | { label: string; shortcut?: string; emit: string }
+    | { label: string; shortcut?: string; navigate: string }

package/src/lib/bundle/BundleWindow.ts

@@ -0,0 +1,37 @@
+import type { StandardSchemaV1 } from '../shared/types/StandardSchemaV1.ts'
+import type { BundleMenu } from './BundleMenu.ts'
+
+/*
+User-authored bundle window configuration, default-exported from an
+optional `src/bundle/window.ts`. Baked into the launcher at build time
+(via the `abide:bundle-window` virtual) and read directly in dev. Every
+field is optional — the launcher falls back to the program name for the
+title and to openWebview's defaults for size.
+
+The standard App/Edit/Window menus (Quit, copy/paste, minimize/close) plus the
+built-in File menu (Start server / Connect / Disconnect) are always installed.
+`menu` adds custom top-level menus between the Edit and Window menus; their items
+emit `abide:menu` events the app handles. See BundleMenuItem.
+*/
+// @readme bundle
+export type BundleWindow = {
+    title?: string
+    width?: number
+    height?: number
+    menu?: BundleMenu[]
+    /*
+    Overrides the bundle setup form's schema. By default the form is derived from
+    src/server/config.ts's env schema, so one declaration drives both boot
+    validation and the form — set this only when the bundle form should differ
+    from the env schema (it replaces, not merges; compose with the env schema
+    yourself via its `.extend(...)` if you want both).
+
+    A Standard Schema (the same kind abide accepts for RPC/MCP). Its JSON Schema
+    drives the connect screen's first-run form, shown as a modal when Start is
+    clicked with a required key still unset; the user's answers persist to the
+    data-dir `.env` the server loads at boot. Each property maps to one env var of
+    the same name; `title` is the field label, `description` the hint,
+    `format: 'password'` masks the input, and `default` pre-fills it.
+    */
+    config?: StandardSchemaV1
+}

package/src/lib/bundle/WEBVIEW_BUILD_REVISION.ts

@@ -0,0 +1,9 @@
+/*
+Revision of abide's own contribution to the compiled webview library — the
+native shim sources linked in beside the vendored header (e.g. abideMenu.mm)
+and the flags buildWebviewLib compiles them with. It participates in the build
+cache key alongside the upstream version, so changing abide's native build
+selects a fresh cache path and bypasses any library built before the change.
+Bump this whenever the shim sources or their compile invocation change.
+*/
+export const WEBVIEW_BUILD_REVISION = 9

package/src/lib/bundle/WEBVIEW_VERSION.ts

@@ -0,0 +1,7 @@
+/*
+Upstream `webview/webview` release the vendored `native/webview.h` is taken
+from (https://github.com/webview/webview, MIT). Used to namespace the build
+cache so bumping the header naturally bypasses any previously built library.
+Bump this whenever `native/webview.h` is re-vendored.
+*/
+export const WEBVIEW_VERSION = '0.12.0'

package/src/lib/bundle/bindConnectedFlag.ts

@@ -0,0 +1,29 @@
+import { dlopen, FFIType } from 'bun:ffi'
+
+/*
+Binds abide_set_connected — the native flag the macOS Server menu's
+validateMenuItem: reads to enable/disable Start/Disconnect. The symbol is
+compiled only into the macOS lib (the Cocoa menu shim), so a failed lookup
+degrades to a no-op setter rather than throwing on Linux/Windows.
+
+The flag is a process-global, which is what lets the bundle's control server set
+it from off the main thread: that server runs in a Worker because `webview_run`
+blocks the main thread's JS event loop, yet the main-thread menu still reads the
+same value through the shared dylib image. The returned close releases the handle.
+*/
+export function bindConnectedFlag(libPath: string): {
+    setConnected: (connected: boolean) => void
+    close: () => void
+} {
+    try {
+        const lib = dlopen(libPath, {
+            abide_set_connected: { args: [FFIType.i32], returns: FFIType.void },
+        })
+        return {
+            setConnected: (connected) => lib.symbols.abide_set_connected(connected ? 1 : 0),
+            close: () => lib.close(),
+        }
+    } catch {
+        return { setConnected: () => {}, close: () => {} }
+    }
+}

package/src/lib/bundle/bindRequestNavigate.ts

@@ -0,0 +1,34 @@
+import { dlopen, FFIType, type Pointer } from 'bun:ffi'
+
+/*
+Binds abide_request_navigate — points the live webview window at a URL from any
+thread by hopping onto the UI thread via webview_dispatch. The launcher's control
+server runs in a Worker (off the main thread that webview_run blocks), so when it
+detects the connected server has died it uses this to bounce the window back to the
+connect screen. macOS-only symbol (the Cocoa shim), so a failed lookup degrades to
+a no-op — elsewhere the worker can still correct the menu flag, just not the window.
+
+`handle` is the webview pointer created on the main thread, forwarded to the worker
+as a number; bun:ffi accepts it for a ptr argument from either thread because the
+pointer addresses the same process heap.
+*/
+export function bindRequestNavigate(libPath: string): {
+    requestNavigate: (handle: number, url: string) => void
+    close: () => void
+} {
+    try {
+        const lib = dlopen(libPath, {
+            abide_request_navigate: { args: [FFIType.ptr, FFIType.ptr], returns: FFIType.void },
+        })
+        return {
+            requestNavigate: (handle, url) =>
+                lib.symbols.abide_request_navigate(
+                    handle as Pointer,
+                    new TextEncoder().encode(`${url}\0`),
+                ),
+            close: () => lib.close(),
+        }
+    } catch {
+        return { requestNavigate: () => {}, close: () => {} }
+    }
+}

package/src/lib/bundle/buildWebviewLib.ts

@@ -0,0 +1,111 @@
+import { dirname } from 'node:path'
+import { abideLog } from '../shared/abideLog.ts'
+import { WEBVIEW_VERSION } from './WEBVIEW_VERSION.ts'
+import { webviewCachePath } from './webviewCachePath.ts'
+
+// Vendored upstream amalgamation; the host compiler turns it into a lib.
+const HEADER = new URL('./native/webview.h', import.meta.url).pathname
+
+// abide's own native shim, linked into the same dylib on macOS to add the
+// standard application menu bar the upstream webview omits.
+const MAC_MENU_SOURCE = new URL('./native/abideMenu.mm', import.meta.url).pathname
+
+/*
+Linux GTK/WebKit pkg-config module sets, newest first. The vendored header
+auto-selects the GTK4 or GTK3 backend from GTK_MAJOR_VERSION in the include
+path, so supplying the right cflags/libs is all that's needed — no backend
+macro. The first set whose packages are installed wins.
+*/
+const LINUX_PKG_SETS = [
+    ['gtk4', 'webkitgtk-6.0'],
+    ['gtk+-3.0', 'webkit2gtk-4.1'],
+    ['gtk+-3.0', 'webkit2gtk-4.0'],
+]
+
+/*
+Compiles the vendored webview header into a native shared library for the
+host platform and caches it (webviewCachePath), so `abide bundle` needs
+no prebuilt binary and no third-party webview package — just
+the platform's C++ toolchain. Returns the cached path. Throws actionable
+guidance when the toolchain or native webview dev packages are missing,
+rather than letting the compiler fail opaquely.
+*/
+export async function buildWebviewLib(): Promise<string> {
+    const outfile = webviewCachePath()
+    await Bun.$`mkdir -p ${dirname(outfile)}`.quiet()
+    abideLog.info(`building webview ${WEBVIEW_VERSION} for ${process.platform}-${process.arch}…`)
+
+    if (process.platform === 'darwin') {
+        await compileDarwin(outfile)
+    } else if (process.platform === 'linux') {
+        await compileLinux(outfile)
+    } else {
+        /*
+        Windows needs MSVC + the WebView2 SDK header (WebView2.h), which
+        isn't a turnkey shell invocation. Until that build path lands,
+        point Windows users at the explicit-path escape hatch.
+        */
+        throw new Error(
+            `[abide] building the webview library on ${process.platform} isn't supported yet. ` +
+                'Set ABIDE_WEBVIEW_LIB to a prebuilt webview library to continue.',
+        )
+    }
+
+    abideLog.success(`built webview library: ${outfile}`)
+    return outfile
+}
+
+// macOS: clang against the WebKit + Cocoa frameworks (always present with the
+// Command Line Tools), linking abide's Objective-C++ menu shim into the same
+// dylib. The `-x` flags switch the input language per file: the vendored
+// header compiles as C++ (it uses the C objc runtime, not objc syntax), the
+// shim as Objective-C++. Maps a missing compiler to the install hint.
+async function compileDarwin(outfile: string): Promise<void> {
+    try {
+        await Bun.$`clang++ -std=c++17 -DWEBVIEW_BUILD_SHARED -fvisibility=hidden -shared -framework WebKit -framework Cocoa -x c++ ${HEADER} -x objective-c++ ${MAC_MENU_SOURCE} -o ${outfile}`.quiet()
+    } catch (error) {
+        throw new Error(
+            '[abide] failed to compile the webview library. Install the Xcode Command ' +
+                'Line Tools with `xcode-select --install` and try again.\n' +
+                describeShellError(error),
+        )
+    }
+}
+
+// Linux: detect an installed GTK/WebKit set via pkg-config, then compile a
+// position-independent shared object. Maps missing packages to install hints.
+async function compileLinux(outfile: string): Promise<void> {
+    const flags = await linuxPkgFlags()
+    try {
+        await Bun.$`c++ -std=c++17 -DWEBVIEW_BUILD_SHARED -fvisibility=hidden -fPIC -shared -x c++ ${HEADER} ${flags} -o ${outfile}`.quiet()
+    } catch (error) {
+        throw new Error(
+            '[abide] failed to compile the webview library. Ensure a C++ compiler ' +
+                '(e.g. `build-essential`) is installed.\n' +
+                describeShellError(error),
+        )
+    }
+}
+
+// Returns combined cflags + libs for the first available GTK/WebKit set, or
+// throws with the package names to install when none resolve.
+async function linuxPkgFlags(): Promise<string[]> {
+    for (const modules of LINUX_PKG_SETS) {
+        const probe = await Bun.$`pkg-config --exists ${modules}`.nothrow().quiet()
+        if (probe.exitCode === 0) {
+            const flags = await Bun.$`pkg-config --cflags --libs ${modules}`.quiet().text()
+            return flags.trim().split(/\s+/)
+        }
+    }
+    throw new Error(
+        '[abide] no GTK/WebKit development packages found. Install one set, e.g. ' +
+            '`libgtk-4-dev libwebkitgtk-6.0-dev` or `libgtk-3-dev libwebkit2gtk-4.1-dev`, ' +
+            'or set ABIDE_WEBVIEW_LIB to a prebuilt webview library.',
+    )
+}
+
+// Surfaces the compiler's own stderr when a Bun shell command throws.
+function describeShellError(error: unknown): string {
+    const stderr = (error as { stderr?: Uint8Array }).stderr
+    return stderr ? new TextDecoder().decode(stderr) : String(error)
+}

package/src/lib/bundle/bundled.ts

@@ -0,0 +1,35 @@
+declare global {
+    interface Window {
+        // Set by the native webview's init script (openWebview) on every document
+        // it loads — local or remote. Absent in a plain browser tab.
+        __ABIDE_BUNDLE__?: boolean
+    }
+}
+
+/*
+True when this code runs inside the abide desktop bundle rather than a plain web
+app in a browser. Isomorphic: one name, same meaning on both sides — "am I part of
+the bundle" — though each side detects it differently.
+
+Client: the native webview runs an init script on every document it loads
+(openWebview's webview_init), so the flag is present whether the page came from the
+bundle's own embedded server or a *remote* one. A plain browser tab never runs that
+script — even when it hits the embedded localhost server — so it reads false there.
+This is the "in a webview" signal, robust to local-or-remote.
+
+Server: the launcher sets ABIDE_PARENT_PID when it spawns the embedded server (see
+spawnEmbeddedServer), so its presence marks "I am the bundle's embedded server
+process." A remote server is never part of a bundle, so it reads false — matching
+the client view that a remote page's *data source* is outside the bundle even while
+its *rendering context* (the webview) is inside it.
+
+Distinct from runningAsStandaloneBinary(), which is also true for a plain compiled
+(install-tarball) server binary — still a web app, not a bundle.
+*/
+// @readme bundle
+export function bundled(): boolean {
+    if (typeof window === 'undefined') {
+        return Boolean(Bun.env.ABIDE_PARENT_PID)
+    }
+    return window.__ABIDE_BUNDLE__ === true
+}

package/src/lib/bundle/disconnected.abide

@@ -0,0 +1,236 @@
+<script>
+  /*
+  Default bundle connect screen (abide-ui). The launcher serves this (logo baked in
+  at build time, app title injected at runtime) instead of a blank window; override
+  it by dropping a `src/bundle/disconnected.abide`. It connects to a remote server
+  by URL and boots the embedded server, talking to the launcher's in-process control
+  server: POST /connect and POST /start each reply with a `{ redirect }` to follow.
+  */
+  const LAST_URL_KEY = 'abide:last-server-url'
+
+  const heading = globalThis.__ABIDE_TITLE__ ?? 'abide app'
+  const logo = globalThis.__ABIDE_LOGO__
+  const placeholder = 'https://example.com'
+
+  let url = state(localStorage.getItem(LAST_URL_KEY) ?? '')
+  let error = state('')
+
+  const launchAction = new URLSearchParams(location.search).get('action')
+
+  /* Two phases so the screen never flashes before a redirect. */
+  let phase = state(launchAction === 'start' ? 'splash' : 'connect')
+
+  let configFields = state([])
+  let configValues = state({})
+  let showConfig = state(false)
+  let savingConfig = state(false)
+
+  /* Interpret the boot intent once on load. */
+  effect(() => {
+    if (launchAction === 'start') {
+      void start()
+      return
+    }
+    if (launchAction === 'lost') {
+      error = 'The server stopped responding.'
+      return
+    }
+    if (launchAction === 'disconnect') {
+      void fetch('/__abide/disconnect').catch(() => {})
+    }
+  })
+
+  async function connect() {
+    const cleaned = url.trim()
+    if (!cleaned) {
+      return
+    }
+    await postAndFollow('/connect', { url: cleaned }, 'Could not connect', () => {
+      localStorage.setItem(LAST_URL_KEY, cleaned)
+    })
+  }
+
+  async function postAndFollow(path, body, failure, onSuccess) {
+    error = ''
+    phase = 'splash'
+    try {
+      const response = await fetch(path, {
+        method: 'POST',
+        ...(body === undefined
+          ? {}
+          : { headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) }),
+      })
+      if (!response.ok) {
+        const reply = await response.json()
+        throw new Error(reply.error ?? `${path.slice(1)} failed (${response.status})`)
+      }
+      const { redirect } = await response.json()
+      onSuccess?.()
+      location.href = redirect
+    } catch (cause) {
+      error = `${failure}: ${String(cause)}`
+      phase = 'connect'
+    }
+  }
+
+  async function start() {
+    error = ''
+    const config = await loadConfig().catch(() => undefined)
+    if (config) {
+      configFields = config.fields
+      configValues = { ...config.values }
+      phase = 'connect'
+      showConfig = true
+      return
+    }
+    await boot()
+  }
+
+  async function boot() {
+    await postAndFollow('/start', undefined, 'Could not start the server')
+  }
+
+  async function loadConfig() {
+    const response = await fetch('/__abide/config')
+    const { schema, values } = await response.json()
+    if (!schema) {
+      return undefined
+    }
+    return { fields: fieldsFromSchema(schema), values: values ?? {} }
+  }
+
+  function fieldsFromSchema(schema) {
+    const properties = schema.properties ?? {}
+    const required = new Set(schema.required ?? [])
+    return Object.entries(properties).map(([key, property]) => ({
+      key,
+      label: property.title ?? key,
+      description: property.description,
+      inputType: inputType(property),
+      required: required.has(key),
+    }))
+  }
+
+  function inputType(property) {
+    if (property.type === 'boolean') {
+      return 'checkbox'
+    }
+    if (property.type === 'number' || property.type === 'integer') {
+      return 'number'
+    }
+    if (property.format === 'password') {
+      return 'password'
+    }
+    return 'text'
+  }
+
+  async function saveConfig() {
+    error = ''
+    savingConfig = true
+    try {
+      const response = await fetch('/__abide/config', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ values: configValues }),
+      })
+      if (!response.ok) {
+        throw new Error(`save failed (${response.status})`)
+      }
+      showConfig = false
+      savingConfig = false
+      await boot()
+    } catch (cause) {
+      error = `Could not save settings: ${String(cause)}`
+      savingConfig = false
+    }
+  }
+</script>
+
+<template if={phase === 'splash'}>
+  <div class="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
+    <template if={logo}>
+      <img src={logo} alt="" class="h-16 w-16 rounded-xl object-contain opacity-90">
+    </template>
+  </div>
+  <template else>
+    <main class="flex min-h-screen items-center justify-center bg-gray-50 p-6 text-gray-900 dark:bg-gray-950 dark:text-gray-100">
+      <div class="w-full max-w-sm rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-800">
+        <template if={logo}>
+          <img src={logo} alt="" class="mx-auto mb-5 h-16 w-16 rounded-xl object-contain">
+        </template>
+        <h1 class="mb-6 text-center text-xl font-semibold tracking-tight">{heading}</h1>
+
+        <form class="flex flex-col gap-3" onsubmit={(event) => { event.preventDefault(); void connect() }}>
+          <input type="url" bind:value={url} placeholder={placeholder} autocomplete="url"
+            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:focus:border-gray-100 dark:focus:ring-gray-100">
+          <button type="submit"
+            class="w-full rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300">
+            Connect
+          </button>
+        </form>
+
+        <div class="my-5 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
+          <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
+          or
+          <span class="h-px flex-1 bg-gray-200 dark:bg-gray-800"></span>
+        </div>
+
+        <button type="button" onclick={() => void start()}
+          class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800">
+          Start server
+        </button>
+
+        <template if={error}>
+          <p class="mt-4 text-center text-sm text-red-600 dark:text-red-400">{error}</p>
+        </template>
+
+        <p class="mt-8 text-center text-xs text-gray-400 dark:text-gray-500">
+          made with
+          <a href="https://github.com/briancray/abide" class="underline hover:text-gray-600 dark:hover:text-gray-300">abide</a>
+        </p>
+      </div>
+    </main>
+  </template>
+</template>
+
+<template if={showConfig}>
+  <div class="fixed inset-0 z-10 flex items-center justify-center bg-black/40 p-6 text-gray-900 dark:text-gray-100">
+    <div class="w-full max-w-sm rounded-2xl bg-white p-8 shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-800">
+      <h2 class="mb-5 text-lg font-semibold tracking-tight">Set up {heading}</h2>
+
+      <form class="flex flex-col gap-4" onsubmit={(event) => { event.preventDefault(); void saveConfig() }}>
+        <template each={configFields} as="field" key="field.key">
+          <label class="flex flex-col gap-1 text-sm">
+            <span class="font-medium">{field.label}</span>
+            <template if={field.inputType === 'checkbox'}>
+              <input type="checkbox" onchange={(event) => { configValues[field.key] = event.currentTarget.checked ? 'true' : 'false' }}
+                class="mt-1 size-4 self-start rounded border-gray-300 dark:border-gray-700">
+              <template else>
+                <input type={field.inputType} value={configValues[field.key]} oninput={(event) => { configValues[field.key] = event.currentTarget.value }}
+                  class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-gray-900 focus:ring-1 focus:ring-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:focus:border-gray-100 dark:focus:ring-gray-100">
+              </template>
+            </template>
+            <template if={field.description}>
+              <span class="text-xs text-gray-400 dark:text-gray-500">{field.description}</span>
+            </template>
+          </label>
+        </template>
+
+        <div class="mt-1 flex gap-3">
+          <button type="button" onclick={() => { showConfig = false }}
+            class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800">
+            Cancel
+          </button>
+          <button type="submit"
+            class="flex-1 rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white hover:bg-gray-700 disabled:opacity-60 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300">
+            Save &amp; start
+          </button>
+        </div>
+      </form>
+
+      <template if={error}>
+        <p class="mt-4 text-center text-sm text-red-600 dark:text-red-400">{error}</p>
+      </template>
+    </div>
+  </div>
+</template>

package/src/lib/bundle/disconnected.css

@@ -0,0 +1,9 @@
+/*
+Tailwind entry for the bundle connect screen. `@import "tailwindcss"` pulls the
+engine in; the explicit `@source` guarantees the default component is scanned for
+utility classes even if automatic source detection misses it. bun-plugin-tailwind
+compiles this at build time; buildDisconnected inlines the result into the served
+HTML so the screen needs zero external requests.
+*/
+@import 'tailwindcss';
+@source './disconnected.abide';

package/src/lib/bundle/ensureWebviewLib.ts

@@ -0,0 +1,20 @@
+import { buildWebviewLib } from './buildWebviewLib.ts'
+import { resolveWebviewLib } from './resolveWebviewLib.ts'
+
+/*
+Build-time guarantee that a webview library exists, returning its path.
+Tries plain resolution first (an explicit ABIDE_WEBVIEW_LIB, a bundle-local
+copy, or a previously built cache); on a miss it compiles the vendored
+header for the host (buildWebviewLib) and caches the result.
+
+Used by `abide bundle` (bundleApp), which runs under bun on a developer's
+machine — never by the compiled launcher, which only ever resolves the copy
+shipped beside it and must not invoke a compiler on an end user's machine.
+*/
+export async function ensureWebviewLib(cwd: string = process.cwd()): Promise<string> {
+    try {
+        return await resolveWebviewLib(cwd)
+    } catch {
+        return await buildWebviewLib()
+    }
+}