@abide/abide 0.101.0 → 0.103.0

package/src/server/iconAccent.ts

@@ -0,0 +1,191 @@
+// 38.101 — THE LAUNCHER'S ACCENT, TAKEN FROM THE APP'S ICON. The icon is the one thing every desktop
+// app already has that says what it looks like, so the launcher reads its color off it rather than
+// asking for a theme. Read once by `abide bundle`, from the icon drawn small, and carried in the
+// executable as a color.
+//
+// THE MOST SATURATED HUE, NOT THE AVERAGE: an icon is usually a mark on a ground, and the mean of a
+// teal stroke on a near-black square is a muddy gray neither of them is.
+
+const SIGNATURE = [137, 80, 78, 71, 13, 10, 26, 10]
+const HUE_BINS = 24
+
+/**
+ * The accent color of the PNG `png`, as `#rrggbb`, or `undefined` where it has no color to give —
+ * a gray icon, or a PNG this reads no pixels of (8-bit RGB or RGBA, not interlaced).
+ */
+export function iconAccent(png: Uint8Array): string | undefined {
+    const pixels = decoded(png)
+    if (pixels === undefined) return undefined
+    const weights = new Float64Array(HUE_BINS)
+    const sums = new Float64Array(HUE_BINS * 3)
+    for (let at = 0; at < pixels.data.length; at += pixels.channels) {
+        const alpha =
+            pixels.channels === 4 ? (pixels.data[at + 3] as number) : 255
+        if (alpha < 128) continue
+        const red = pixels.data[at] as number
+        const green = pixels.data[at + 1] as number
+        const blue = pixels.data[at + 2] as number
+        const [hue, saturation, lightness] = hsl(red, green, blue)
+        if (saturation < 0.25 || lightness < 0.12 || lightness > 0.92) continue
+        const bin = Math.floor((hue / 360) * HUE_BINS) % HUE_BINS
+        const weight = saturation * (alpha / 255)
+        weights[bin] = (weights[bin] as number) + weight
+        sums[bin * 3] = (sums[bin * 3] as number) + red * weight
+        sums[bin * 3 + 1] = (sums[bin * 3 + 1] as number) + green * weight
+        sums[bin * 3 + 2] = (sums[bin * 3 + 2] as number) + blue * weight
+    }
+    let best = -1
+    for (let bin = 0; bin < HUE_BINS; bin += 1)
+        if (
+            (weights[bin] as number) > 0 &&
+            (best === -1 ||
+                (weights[bin] as number) > (weights[best] as number))
+        )
+            best = bin
+    if (best === -1) return undefined
+    const weight = weights[best] as number
+    const [hue, saturation, lightness] = hsl(
+        (sums[best * 3] as number) / weight,
+        (sums[best * 3 + 1] as number) / weight,
+        (sums[best * 3 + 2] as number) / weight,
+    )
+    // A button's fill: dark enough to carry white text, light enough to read as a color.
+    return hex(
+        hue,
+        Math.min(saturation, 0.85),
+        Math.min(Math.max(lightness, 0.32), 0.5),
+    )
+}
+
+/** `#rrggbb` text that reads on `accent`: near-black on a light one, white on a dark one. */
+export function inkOn(accent: string): string {
+    const channel = (offset: number): number => {
+        const value =
+            Number.parseInt(accent.slice(offset, offset + 2), 16) / 255
+        return value <= 0.04045
+            ? value / 12.92
+            : ((value + 0.055) / 1.055) ** 2.4
+    }
+    const luminance =
+        0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5)
+    return luminance > 0.4 ? '#1d1d1f' : '#ffffff'
+}
+
+function decoded(
+    png: Uint8Array,
+): { data: Uint8Array; channels: number } | undefined {
+    for (let at = 0; at < SIGNATURE.length; at += 1)
+        if (png[at] !== SIGNATURE[at]) return undefined
+    const view = new DataView(png.buffer, png.byteOffset, png.byteLength)
+    let width = 0
+    let height = 0
+    let channels = 0
+    const compressed: Uint8Array[] = []
+    let length = 0
+    for (let at = 8; at + 8 <= png.length; ) {
+        const size = view.getUint32(at)
+        const type = String.fromCharCode(...png.subarray(at + 4, at + 8))
+        const body = png.subarray(at + 8, at + 8 + size)
+        if (type === 'IHDR') {
+            width = view.getUint32(at + 8)
+            height = view.getUint32(at + 12)
+            const depth = body[8]
+            const color = body[9]
+            const interlaced = body[12]
+            if (depth !== 8 || interlaced !== 0) return undefined
+            if (color === 6) channels = 4
+            else if (color === 2) channels = 3
+            else return undefined
+        } else if (type === 'IDAT') {
+            compressed.push(body)
+            length += body.length
+        } else if (type === 'IEND') break
+        at += 12 + size
+    }
+    if (channels === 0) return undefined
+    const joined = new Uint8Array(length)
+    let offset = 0
+    for (const part of compressed) {
+        joined.set(part, offset)
+        offset += part.length
+    }
+    const raw = Bun.inflateSync(joined, { windowBits: 15 })
+    const stride = width * channels
+    const data = new Uint8Array(stride * height)
+    for (let row = 0; row < height; row += 1) {
+        const filter = raw[row * (stride + 1)] as number
+        const from = row * (stride + 1) + 1
+        const to = row * stride
+        for (let column = 0; column < stride; column += 1) {
+            const value = raw[from + column] as number
+            const left =
+                column >= channels
+                    ? (data[to + column - channels] as number)
+                    : 0
+            const up = row > 0 ? (data[to - stride + column] as number) : 0
+            const corner =
+                row > 0 && column >= channels
+                    ? (data[to - stride + column - channels] as number)
+                    : 0
+            let predicted = 0
+            if (filter === 1) predicted = left
+            else if (filter === 2) predicted = up
+            else if (filter === 3) predicted = (left + up) >> 1
+            else if (filter === 4) predicted = paeth(left, up, corner)
+            data[to + column] = (value + predicted) & 255
+        }
+    }
+    return { data, channels }
+}
+
+function paeth(left: number, up: number, corner: number): number {
+    const estimate = left + up - corner
+    const toLeft = Math.abs(estimate - left)
+    const toUp = Math.abs(estimate - up)
+    const toCorner = Math.abs(estimate - corner)
+    if (toLeft <= toUp && toLeft <= toCorner) return left
+    return toUp <= toCorner ? up : corner
+}
+
+function hsl(
+    red: number,
+    green: number,
+    blue: number,
+): [number, number, number] {
+    const r = red / 255
+    const g = green / 255
+    const b = blue / 255
+    const max = Math.max(r, g, b)
+    const min = Math.min(r, g, b)
+    const lightness = (max + min) / 2
+    if (max === min) return [0, 0, lightness]
+    const delta = max - min
+    const saturation =
+        lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min)
+    let hue: number
+    if (max === r) hue = (g - b) / delta + (g < b ? 6 : 0)
+    else if (max === g) hue = (b - r) / delta + 2
+    else hue = (r - g) / delta + 4
+    return [hue * 60, saturation, lightness]
+}
+
+function hex(hue: number, saturation: number, lightness: number): string {
+    const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation
+    const part = chroma * (1 - Math.abs(((hue / 60) % 2) - 1))
+    const base = lightness - chroma / 2
+    const sector = Math.floor(hue / 60) % 6
+    const [r, g, b] = [
+        [chroma, part, 0],
+        [part, chroma, 0],
+        [0, chroma, part],
+        [0, part, chroma],
+        [part, 0, chroma],
+        [chroma, 0, part],
+    ][sector] as [number, number, number]
+    let out = '#'
+    for (const channel of [r, g, b])
+        out += Math.round((channel + base) * 255)
+            .toString(16)
+            .padStart(2, '0')
+    return out
+}

package/src/server/index.ts

@@ -13,6 +13,8 @@ import { installServer } from './installServer.ts'
 // emitted module reaches through here: 32.1's escaping and 32.2's `raw`, which both sides render
 // markup with, 32.20's `safeUrl`, and 31.8's `writePath`.
 export * from '#shared'
+// 18.11 — one write a patch made, as a followed `GET`'s `patch` carries it.
+export type { PatchOp } from '#shared/reactive/PATCH_SINKS.ts'
 export {
     type Clients,
     DELETE,
@@ -23,8 +25,6 @@ export {
     type Rpc,
     type RpcOptions,
 } from '#shared/rpc.ts'
-// 18.11 — one write a patch made, as a followed `GET`'s `patch` carries it.
-export type { PatchOp } from '#shared/reactive/PATCH_SINKS.ts'
 // 45 — a conversation with a model, piped through a handler, and the two providers abide ships.
 export {
     type AssistantEvent,
@@ -43,26 +43,31 @@ export {
 } from './claudeCode.ts'
 // 27 — the resolved configuration.
 export { type Config, config } from './config.ts'
-// 42 — the app object, and 37's hooks an `src/server/app.ts` calls.
+// 38.82 — the props `src/launcher.abide` is rendered with.
+export type { ConfigField } from './configFields.ts'
+// 42 — the app object, and 37's hooks a `<script server>` calls.
 export { type App, createApp } from './createApp.ts'
+// 37.1's run-time half: what a compiled server module calls around its `<script server>`, so the
+// hooks it makes are filed at its route.
 export {
     type ConfigDefaults,
     type ConfigOptions,
     type Env,
+    fileRoute,
     middleware,
     onConfig,
     onError,
     onHealth,
+    onLauncher,
     onPrincipal,
     onStart,
     onStop,
 } from './hooks.ts'
+export type { LauncherOptions } from './launcherOptions.ts'
+export type { Launch } from './launcherPage.ts'
 // 23.10 — whether a host answers, asked before a call to it.
 export { reachable } from './reachable.ts'
-export { type Component, render, type Shell } from './render.ts'
-// 38.83 — the props `src/bundle/launch.abide` is rendered with.
-export type { ConfigField } from './configFields.ts'
-export type { Launch } from './launcherPage.ts'
+export { type Component, render } from './render.ts'
 // 32.17's run-time half: one invocation, rendered where it stands, with the anchors that make the
 // child's markup one thing for the client to walk to.
 export { renderComponent } from './renderComponent.ts'

package/src/server/installSourceMaps.ts

@@ -0,0 +1,93 @@
+// 38.97 — A STACK FRAME IN A MODULE COMPILED FROM A `.abide` NAMES THE `.abide`. Bun reads no
+// source map it is handed — not inline in a module a plugin serves, not on disk, not in the
+// bundler — so the frame is placed here, through `Error.prepareStackTrace`, which bun calls for
+// every `stack` read. Every other frame is written as bun writes it.
+//
+// INSTALLED ONCE PER PROCESS, the maps added to as apps boot: `abide dev` boots one worker per
+// rebuild, and a test boots several apps in one process.
+
+import { resolve } from 'node:path' // bun exposes no path helpers of its own
+import { HANDLER_FACE } from './MODULE_QUERIES.ts'
+import { decodeMappings, placeAt, type Segment } from './sourceMappings.ts'
+
+/** Per `.abide` below the root, as its server module is served there: the file, and its `mappings`. */
+export type SourceMaps = Record<string, readonly [string, string]>
+
+type Registered = {
+    source: string
+    mappings: string
+    lines: Segment[][] | undefined
+}
+
+/** By the `.abide`'s path, which a frame in its served module names. */
+const REGISTERED = new Map<string, Registered>()
+/** An executable's files by their path below the root, for its frames, whose directory is not known. */
+const BELOW = new Map<string, Registered>()
+
+/**
+ * Registers `maps`, the files below `base`, and places frames in them from now on.
+ *
+ * `base` is `undefined` for an executable, whose frames name each file as it was bundled.
+ */
+export function installSourceMaps(
+    maps: SourceMaps,
+    base: string | undefined,
+): void {
+    for (const [module, [source, mappings]] of Object.entries(maps)) {
+        const registered = { source, mappings, lines: undefined }
+        if (base !== undefined)
+            REGISTERED.set(resolve(base, module), registered)
+        else BELOW.set(module, registered)
+    }
+    if (Error.prepareStackTrace !== placeFrames)
+        Error.prepareStackTrace = placeFrames
+}
+
+type CallSite = {
+    getFileName(): string | undefined | null
+    getLineNumber(): number | null
+    getColumnNumber(): number | null
+    getFunctionName(): string | null
+    isAsync?(): boolean
+}
+
+function placeFrames(error: Error, frames: CallSite[]): string {
+    let out = `${error.name}: ${error.message}`
+    if (error.message === '' || error.message === undefined) out = error.name
+    for (const frame of frames) {
+        const name = frame.getFunctionName()
+        const where = placed(frame)
+        out += `\n    at ${frame.isAsync?.() ? 'async ' : ''}${name ? `${name} (${where})` : where}`
+    }
+    return out
+}
+
+// A call site's column counts from 0 where the stack bun writes counts from 1.
+function placed(frame: CallSite): string {
+    // A handler file's frames name the file the author wrote, not the face it is served as.
+    const file = (frame.getFileName() ?? '<anonymous>').replace(
+        HANDLER_FACE,
+        '',
+    )
+    const line = frame.getLineNumber() ?? 0
+    const column = frame.getColumnNumber() ?? 0
+    const registered = registeredFor(file)
+    if (registered !== undefined && line > 0) {
+        registered.lines ??= decodeMappings(registered.mappings)
+        const place = placeAt(registered.lines, line - 1, column)
+        if (place !== undefined)
+            return `${registered.source}:${place[0] + 1}:${place[1] + 1}`
+    }
+    return `${file}:${line}:${column + 1}`
+}
+
+function registeredFor(path: string): Registered | undefined {
+    const found = REGISTERED.get(path)
+    if (found !== undefined) return found
+    // An executable's frames name the file as bun's own map does, relative to where it was
+    // bundled from — so it is found by the path below the root it ends with.
+    if (path.startsWith('/')) return undefined
+    for (const [module, registered] of BELOW)
+        if (path === module || path.endsWith(`/${module}`)) return registered
+    return undefined
+}

package/src/server/launcherOptions.ts

@@ -1,10 +1,21 @@
-// 38.81 — `src/bundle/launcher.json`: the window the desktop app opens and the forms its launcher
-// offers. Read when `abide bundle` runs and carried in the executable, which reads nothing from the
-// source tree when it starts (38.45).
+// 38.80 — WHAT THE `onLauncher` A `src/launcher.abide` CALLS ANSWERS: the window the desktop app opens
+// and the forms its launcher offers, read as the app launches.
 
-/** What `src/bundle/launcher.json` may set, each with its default filled in. */
+import { isRecord } from '#shared/isRecord.ts'
+
+/**
+ * What `onLauncher` may answer. 38.81 — turning off both forms is not one of them, so the checker
+ * refuses it where the answer is typed.
+ */
 export type LauncherOptions = {
-    name: string | undefined
+    width?: number
+    height?: number
+    minWidth?: number
+    minHeight?: number
+} & ({ start?: true; connect?: boolean } | { start: false; connect?: true })
+
+/** The options with each default filled in. */
+export type Launcher = {
     width: number
     height: number
     minWidth: number
@@ -16,12 +27,12 @@ export type LauncherOptions = {
 const SIZES = ['width', 'height', 'minWidth', 'minHeight'] as const
 const FORMS = ['start', 'connect'] as const
 
-/** The launcher options under `root`, or the refusal naming what is wrong with them. */
-export async function launcherOptionsUnder(
-    root: string,
-): Promise<LauncherOptions | string> {
-    const options: LauncherOptions = {
-        name: undefined,
+/**
+ * The launcher what `onLauncher` answered sets, or the refusal naming what is wrong with it — read
+ * at run time, where an untyped answer can still name a key it does not take.
+ */
+export function launcherOf(answered: unknown): Launcher | string {
+    const launcher: Launcher = {
         width: 1100,
         height: 760,
         minWidth: 480,
@@ -29,34 +40,25 @@ export async function launcherOptionsUnder(
         start: true,
         connect: true,
     }
-    const file = Bun.file(`${root}/bundle/launcher.json`)
-    if (!(await file.exists())) return options
-    let given: unknown
-    try {
-        given = await file.json()
-    } catch (thrown) {
-        return `src/bundle/launcher.json is not JSON — ${(thrown as Error).message}`
-    }
-    if (given === null || typeof given !== 'object' || Array.isArray(given))
-        return 'src/bundle/launcher.json holds an object'
-    for (const [key, value] of Object.entries(given)) {
-        if (key === 'name' && typeof value === 'string') options.name = value
-        else if (
+    if (answered === undefined) return launcher
+    if (!isRecord(answered)) return '`onLauncher` answers an object'
+    for (const [key, value] of Object.entries(answered)) {
+        if (
             (SIZES as readonly string[]).includes(key) &&
             typeof value === 'number' &&
             value > 0
         )
-            options[key as (typeof SIZES)[number]] = value
+            launcher[key as (typeof SIZES)[number]] = value
         else if (
             (FORMS as readonly string[]).includes(key) &&
             typeof value === 'boolean'
         )
-            options[key as (typeof FORMS)[number]] = value
+            launcher[key as (typeof FORMS)[number]] = value
         else
-            return `src/bundle/launcher.json: \`${key}\` is not a launcher option, or ${JSON.stringify(value)} is not a value it takes`
+            return `\`${key}\` is not a launcher option, or ${JSON.stringify(value)} is not a value it takes`
     }
-    // 38.82.
-    if (!options.start && !options.connect)
-        return 'src/bundle/launcher.json turns off both start and connect, which leaves the launcher nothing to do'
-    return options
+    // 38.81.
+    if (!launcher.start && !launcher.connect)
+        return '`onLauncher` turns off both start and connect, which leaves the launcher nothing to do'
+    return launcher
 }

package/src/server/launcherPage.ts

@@ -1,21 +1,29 @@
-// 38.72 — THE DESKTOP LAUNCHER'S OWN PAGE: start the app here, under the configuration the form
+// 38.71 — THE DESKTOP LAUNCHER'S OWN PAGE: start the app here, under the configuration the form
 // holds, or connect to one running elsewhere. The app's own screen and not abide's, so it speaks
-// the platform's look rather than the docs site's.
+// the platform's look rather than the docs site's — and the app's color, read off its icon (38.101).
+//
+// TWO BUTTONS AND A DIALOG EACH (38.102): the page is the app's icon, its name and what can be done,
+// and a form opens only once it is asked for. `…` on a button is the platform's own sign that it
+// asks something first, so a Start with no configuration to ask for has none and starts at once.
 
 import { escapeAttribute, escapeText } from '#shared/escapeText.ts'
 import type { ConfigField } from './configFields.ts'
+import { inkOn } from './iconAccent.ts'
+
+// 38.101 — the accent where the app has no icon to take one from.
+const SYSTEM_ACCENT = '#0a84ff'
 
 /**
- * What a launch page is rendered with: `src/bundle/launch.abide`'s props, and the built-in page's.
+ * What a launch page is rendered with: `src/launcher.abide`'s props, and the built-in page's.
  *
- * 38.84 — a form the launcher does not offer has no address to post to.
+ * 38.83 — a form the launcher does not offer has no address to post to.
  */
 export type Launch = {
-    /** The app's name, as `launcher.json` gives it or as its package does. */
+    /** The app's name, as its package gives it. */
     name: string
-    /** Where the start form posts, or `undefined` where `launcher.json` turns starting off. */
+    /** Where the start form posts, or `undefined` where what `onLauncher` answers turns starting off. */
     start: string | undefined
-    /** Where the connect form posts, or `undefined` where `launcher.json` turns connecting off. */
+    /** Where the connect form posts, or `undefined` where what `onLauncher` answers turns connecting off. */
     connect: string | undefined
     fields: ConfigField[]
     /** The URL the last connect was given. */
@@ -28,8 +36,12 @@ export type Launch = {
               issues: Record<string, string[]>
           }
         | undefined
-    /** The form the page opens on. */
-    focus: 'start' | 'connect'
+    /** 38.102 — the form the page opens on: the one refused, or the one the menu asked for. */
+    focus: 'start' | 'connect' | undefined
+    /** 38.101 — the app's icon, as a data URL, where it has one. */
+    icon: string | undefined
+    /** 38.101 — the color taken from the icon, as `#rrggbb`, where it gives one. */
+    accent: string | undefined
 }
 
 /** The built-in launcher page as markup. */
@@ -74,81 +86,112 @@ export function launcherPage(page: Launch): string {
             line += `<p class="issue">${escapeText(issue)}</p>`
         return line
     }
+    const accent = page.accent ?? SYSTEM_ACCENT
+    const name = escapeText(page.name)
+    // A START WITH NOTHING TO ASK posts from the page itself; one with fields opens its dialog.
+    const asks = inputs !== '' || startFailure !== undefined
+    // A refused form opens on its refusal; a start that asks for nothing has no dialog to open.
+    const focus = page.failure?.form ?? page.focus
+    const opened =
+        focus === undefined || (focus === 'start' && !asks)
+            ? ''
+            : `${focus}-dialog`
+    let buttons = ''
+    let dialogs = ''
+    if (page.start !== undefined) {
+        buttons += asks
+            ? '<button class="primary" type="button" data-opens="start-dialog">Start…</button>'
+            : `<form method="post" action="${escapeAttribute(page.start)}"><button class="primary" type="submit">Start</button></form>`
+        if (asks)
+            dialogs += `
+<dialog id="start-dialog" aria-labelledby="start-title">
+    <form method="post" action="${escapeAttribute(page.start)}">
+        <h2 id="start-title">Start ${name}</h2>
+        <p class="about">Runs ${name} on this computer.</p>
+        ${failureLine(startFailure)}
+        ${inputs}
+        <div class="actions">
+            <button type="button" data-closes>Cancel</button>
+            <button class="primary" type="submit">Start</button>
+        </div>
+    </form>
+</dialog>`
+    }
+    if (page.connect !== undefined) {
+        buttons += `<button${page.start === undefined ? ' class="primary"' : ''} type="button" data-opens="connect-dialog">Connect…</button>`
+        dialogs += `
+<dialog id="connect-dialog" aria-labelledby="connect-title">
+    <form method="post" action="${escapeAttribute(page.connect)}">
+        <h2 id="connect-title">Connect to ${name}</h2>
+        <p class="about">Opens ${name} where it is already running.</p>
+        ${failureLine(connectFailure)}
+        <div class="field${connectFailure === undefined ? '' : ' invalid'}">
+            <label for="connect-url">URL</label>
+            <input id="connect-url" type="url" name="url" value="${escapeAttribute(page.url)}" placeholder="https://" required autocomplete="off" spellcheck="false">
+        </div>
+        <div class="actions">
+            <button type="button" data-closes>Cancel</button>
+            <button class="primary" type="submit">Connect</button>
+        </div>
+    </form>
+</dialog>`
+    }
     return `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escapeText(page.name)}</title>
+<title>${name}</title>
 <style>
-:root { color-scheme: light dark; --ground: #f5f5f7; --card: #fff; --ink: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --accent: #0a84ff; --bad: #d70015; }
-@media (prefers-color-scheme: dark) { :root { --ground: #1c1c1e; --card: #2c2c2e; --ink: #f5f5f7; --muted: #98989d; --line: #3a3a3c; --bad: #ff6961; } }
+:root { color-scheme: light dark; --accent: ${accent}; --accent-ink: ${inkOn(accent)}; --ground: color-mix(in srgb, var(--accent) 7%, #f7f7f8); --card: #fff; --ink: #1d1d1f; --muted: #6e6e73; --line: color-mix(in srgb, var(--ink) 14%, transparent); --field: #fff; --bad: #d70015; --ring: color-mix(in srgb, var(--accent) 40%, transparent); }
+@media (prefers-color-scheme: dark) { :root { --ground: color-mix(in srgb, var(--accent) 10%, #161618); --card: #232325; --ink: #f5f5f7; --muted: #98989d; --field: #1b1b1d; --bad: #ff6961; --ring: color-mix(in srgb, var(--accent) 55%, transparent); } }
 * { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; }
-body { font: 13px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--ground); color: var(--ink); display: flex; align-items: flex-start; justify-content: center; padding: 48px 24px; overflow-y: auto; -webkit-user-select: none; user-select: none; }
-main { width: 100%; max-width: 440px; }
-h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
-.lede { color: var(--muted); margin: 0 0 24px; }
-section { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
-section.focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
-h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
-section > p.about { color: var(--muted); margin: 0 0 16px; }
+body { font: 13px/1.45 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--ground); color: var(--ink); display: grid; place-items: center; padding: 32px; -webkit-user-select: none; user-select: none; }
+main { display: grid; justify-items: center; text-align: center; margin-top: -4vh; }
+.icon { width: 128px; height: 128px; margin-bottom: 12px; }
+.mark { display: grid; place-items: center; width: 104px; height: 104px; margin: 12px 0 24px; border-radius: 24px; background: linear-gradient(color-mix(in srgb, var(--accent) 82%, white), var(--accent)); color: var(--accent-ink); font-size: 52px; font-weight: 600; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent); }
+h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 28px; }
+.buttons { display: flex; gap: 10px; }
+.buttons form { display: contents; }
+button { font: inherit; font-weight: 500; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 16px; min-width: 96px; cursor: default; }
+main button { font-size: 14px; padding: 8px 20px; min-width: 128px; }
+button.primary { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
+button:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
+button:active { filter: brightness(0.92); }
+button[disabled] { opacity: 0.6; }
+dialog { width: min(400px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 0 24px 64px rgb(0 0 0 / 0.28); text-align: left; }
+dialog::backdrop { background: rgb(0 0 0 / 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
+h2 { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
+.about { color: var(--muted); margin: 0 0 18px; }
 .field { display: grid; gap: 4px; margin-bottom: 12px; }
 .field.check { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
 .field.check label { order: 2; }
-.field.check input[type=checkbox] { order: 1; margin: 0; }
+.field.check input[type=checkbox] { order: 1; margin: 0; accent-color: var(--accent); }
 .field.check .hint, .field.check .issue { grid-column: 1 / -1; order: 3; }
-label { font-weight: 500; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
-input[type=text], input[type=number], input[type=password], input[type=url], select { font: inherit; color: inherit; background: var(--ground); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: 100%; -webkit-user-select: text; user-select: text; }
-input:focus, select:focus { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 0; border-color: var(--accent); }
+label { font-weight: 500; font-size: 12px; }
+input[type=text], input[type=number], input[type=password], input[type=url], select { font: inherit; color: inherit; background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: 100%; -webkit-user-select: text; user-select: text; }
+input:focus, select:focus { outline: 3px solid var(--ring); outline-offset: 0; border-color: var(--accent); }
 .invalid input, .invalid select { border-color: var(--bad); }
 .hint { color: var(--muted); margin: 0; font-size: 12px; }
 .issue, .failure { color: var(--bad); margin: 0; font-size: 12px; }
-.failure { margin-bottom: 12px; -webkit-user-select: text; user-select: text; }
-.actions { display: flex; justify-content: flex-end; margin-top: 16px; }
-button { font: inherit; font-weight: 500; color: #fff; background: var(--accent); border: 0; border-radius: 6px; padding: 6px 16px; cursor: default; }
-button:active { filter: brightness(0.9); }
-button[disabled] { opacity: 0.6; }
-.empty { color: var(--muted); margin: 0; }
+.failure { margin-bottom: 14px; -webkit-user-select: text; user-select: text; }
+.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
 </style>
 </head>
 <body>
 <main>
-    <h1>${escapeText(page.name)}</h1>
-    <p class="lede">${page.start === undefined ? 'Connect to the app where it is running.' : page.connect === undefined ? 'Start the app on this computer.' : 'Start the app on this computer, or connect to one already running.'}</p>
-${
-    page.start === undefined
-        ? ''
-        : `    <section id="start"${page.focus === 'start' ? ' class="focus"' : ''}>
-        <h2>Start</h2>
-        <p class="about">Runs the app here, with this configuration.</p>
-        <form method="post" action="${escapeAttribute(page.start)}">
-            ${failureLine(startFailure)}
-            ${inputs === '' ? '<p class="empty">This app takes no configuration.</p>' : inputs}
-            <div class="actions"><button type="submit">Start</button></div>
-        </form>
-    </section>`
-}
-    ${
-        page.connect === undefined
-            ? ''
-            : `    <section id="connect"${page.focus === 'connect' ? ' class="focus"' : ''}>
-        <h2>Connect</h2>
-        <p class="about">Opens the app running at another address.</p>
-        <form method="post" action="${escapeAttribute(page.connect)}">
-            ${failureLine(connectFailure)}
-            <div class="field${connectFailure === undefined ? '' : ' invalid'}">
-                <label for="connect-url">URL</label>
-                <input id="connect-url" type="url" name="url" value="${escapeAttribute(page.url)}" placeholder="https://" required autocomplete="off" spellcheck="false">
-            </div>
-            <div class="actions"><button type="submit">Connect</button></div>
-        </form>
-    </section>`
-    }
-</main>
+    ${page.icon === undefined ? `<div class="mark" aria-hidden="true">${escapeText(page.name.charAt(0).toUpperCase())}</div>` : `<img class="icon" src="${escapeAttribute(page.icon)}" alt="">`}
+    <h1>${name}</h1>
+    <div class="buttons">${buttons}</div>
+</main>${dialogs}
 <script>
-for (const form of document.forms) form.addEventListener('submit', () => { for (const button of form.querySelectorAll('button')) { button.disabled = true; button.textContent = button.textContent === 'Start' ? 'Starting…' : 'Connecting…' } })
-document.querySelector('${page.focus === 'connect' ? '#connect-url' : '#start input:not([type=hidden]), #start select'}')?.focus()
+for (const opener of document.querySelectorAll('[data-opens]')) opener.addEventListener('click', () => open(opener.dataset.opens))
+for (const closer of document.querySelectorAll('[data-closes]')) closer.addEventListener('click', () => closer.closest('dialog').close())
+for (const dialog of document.querySelectorAll('dialog')) dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close() })
+for (const form of document.forms) form.addEventListener('submit', () => { for (const button of form.querySelectorAll('button')) { button.disabled = true; if (button.type === 'submit') button.textContent = button.textContent === 'Start' ? 'Starting…' : 'Connecting…' } })
+function open(id) { const dialog = document.getElementById(id); dialog.showModal(); (dialog.querySelector('.invalid input:not([type=hidden]), .invalid select') ?? dialog.querySelector('input:not([type=hidden]), select'))?.focus() }
+${opened === '' ? '' : `open('${opened}')`}
 </script>
 </body>
 </html>