sideby 0.11.0 → 0.12.0

package/dist/src/desktop/icon.js

@@ -1,81 +1,312 @@
-// The sideby mark drawn without dependencies: the Panel header's logo (two faces side by side on a light rounded
-// tile, core/brand-mark.ts) rasterised with analytic antialiasing and encoded as PNG, SVG or ICNS.
+// The sideby mark drawn without dependencies: the two buddies of core/brand-mark.ts on a light rounded tile,
+// rasterised in pure Node and encoded as PNG, SVG or ICNS. Curves are flattened to polylines; fills use the nonzero
+// rule with exact horizontal coverage on 16 sub-rows per pixel, outlines are round-capped, round-joined thick
+// polylines (distance to a segment), ellipses use an analytic distance. Each shape is computed only inside its own
+// bounding box and composited back to front, fill before outline, as an SVG renderer would.
 import { deflateSync } from 'node:zlib';
-import { MARK, MARK_COLORS, MARK_TILE_VIEWBOX, markSvgBody } from '../core/brand-mark.js';
+import { BUDDY, highlights, MARK, MARK_COLORS, MARK_VIEWBOX, markSvgBody, } from '../core/brand-mark.js';
 /** Text stored in every generated file, so `sideby app uninstall` deletes only what it wrote. */
 export const APP_MARKER = 'sideby-app-install';
-// The Panel's logo tile (page-styles.ts: .logo 40×40, radius 10), with the mark in MARK_TILE_VIEWBOX units on it.
+// The Panel's logo tile (page-styles.ts: .logo 40×40, radius 10); MARK_VIEWBOX maps onto the whole tile square.
 const TILE = { size: 40, radius: 10, color: [0xe5, 0xf2, 0xfb] };
 // The tile sits on the macOS icon grid: 824 of 1024 units, centred.
 const GRID = { canvas: 1024, tile: 824 };
+// Sub-rows per pixel row for fills.
+const SUB_ROWS = 16;
 const rgb = (hex) => [1, 3, 5].map((i) => Number.parseInt(hex.slice(i, i + 2), 16));
-function shapes(size) {
-    const tilePx = (size * GRID.tile) / GRID.canvas;
-    const off = (size - tilePx) / 2;
-    const u = tilePx / MARK_TILE_VIEWBOX.size;
-    const place = ([x, y, w, h, r]) => ({
-        x: off + (x - MARK_TILE_VIEWBOX.x) * u,
-        y: off + (y - MARK_TILE_VIEWBOX.y) * u,
-        w: w * u,
-        h: h * u,
-        r: r * u,
-    });
+function tileRect(size) {
+    const w = (size * GRID.tile) / GRID.canvas;
+    const off = (size - w) / 2;
+    return { x: off, y: off, w, h: w, r: (TILE.radius * w) / TILE.size };
+}
+/** Pixels per mark unit and the map from a buddy's 64-unit grid to pixels. */
+function placement(size, b) {
+    const tile = tileRect(size);
+    const u = tile.w / MARK_VIEWBOX.size;
+    const k = b.scale * u;
     return {
-        tile: { x: off, y: off, w: tilePx, h: tilePx, r: (TILE.radius * tilePx) / TILE.size },
-        back: place(MARK.back),
-        front: place(MARK.front),
-        gap: place(MARK.gap),
-        backEyes: MARK.backEyes.map(place),
-        frontEyes: MARK.frontEyes.map(place),
+        k,
+        map: (gx, gy) => [
+            tile.x + (b.x + b.scale * gx - MARK_VIEWBOX.x) * u,
+            tile.y + (b.y + b.scale * gy - MARK_VIEWBOX.y) * u,
+        ],
+    };
+}
+/** Parses absolute M, L, H, Q, C, Z path data and flattens it to pixel polylines. */
+function flatten(d, map) {
+    const tokens = d.match(/[MLHQCZ]|-?\d*\.?\d+(?:e-?\d+)?/gi) ?? [];
+    const polys = [];
+    let cur = null;
+    let gx = 0;
+    let gy = 0;
+    let start = [0, 0];
+    let i = 0;
+    const num = () => Number(tokens[i++]);
+    const isNum = () => i < tokens.length && !/^[A-Za-z]$/.test(tokens[i]);
+    const lineTo = (x, y) => {
+        gx = x;
+        gy = y;
+        cur.pts.push(map(x, y));
+    };
+    const curve = (ctrl, end) => {
+        const all = [map(gx, gy), ...ctrl.map(([x, y]) => map(x, y)), map(end[0], end[1])];
+        let len = 0;
+        for (let j = 1; j < all.length; j++)
+            len += Math.hypot(all[j][0] - all[j - 1][0], all[j][1] - all[j - 1][1]);
+        const n = Math.max(4, Math.ceil(len / 2));
+        for (let s = 1; s <= n; s++) {
+            const t = s / n;
+            // De Casteljau on the pixel control points.
+            let p = all.map((q) => [q[0], q[1]]);
+            while (p.length > 1)
+                p = p.slice(1).map((q, j) => [p[j][0] + (q[0] - p[j][0]) * t, p[j][1] + (q[1] - p[j][1]) * t]);
+            cur.pts.push([p[0][0], p[0][1]]);
+        }
+        gx = end[0];
+        gy = end[1];
     };
+    let cmd = '';
+    while (i < tokens.length) {
+        if (!isNum())
+            cmd = tokens[i++].toUpperCase();
+        switch (cmd) {
+            case 'M':
+                gx = num();
+                gy = num();
+                start = [gx, gy];
+                cur = { pts: [map(gx, gy)], closed: false };
+                polys.push(cur);
+                cmd = 'L'; // further pairs after M are lines
+                break;
+            case 'L':
+                lineTo(num(), num());
+                break;
+            case 'H':
+                lineTo(num(), gy);
+                break;
+            case 'Q': {
+                const c = [num(), num()];
+                curve([c], [num(), num()]);
+                break;
+            }
+            case 'C': {
+                const c1 = [num(), num()];
+                const c2 = [num(), num()];
+                curve([c1, c2], [num(), num()]);
+                break;
+            }
+            case 'Z':
+                cur.closed = true;
+                gx = start[0];
+                gy = start[1];
+                break;
+            default:
+                throw new Error(`icon: unsupported path command ${cmd}`);
+        }
+    }
+    return polys;
+}
+function box(size, x0, y0, x1, y1) {
+    const bx0 = Math.max(0, Math.floor(x0));
+    const by0 = Math.max(0, Math.floor(y0));
+    const bx1 = Math.min(size, Math.ceil(x1));
+    const by1 = Math.min(size, Math.ceil(y1));
+    if (bx1 <= bx0 || by1 <= by0)
+        return null;
+    const w = bx1 - bx0;
+    const h = by1 - by0;
+    return { x0: bx0, y0: by0, w, h, a: new Float32Array(w * h) };
+}
+/** Nonzero fill of the polylines (each closed implicitly), exact in x and sampled on SUB_ROWS rows per pixel. */
+function fillMask(size, polys) {
+    const edges = [];
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (const { pts } of polys)
+        for (let j = 0; j < pts.length; j++) {
+            const p = pts[j];
+            const q = pts[(j + 1) % pts.length];
+            if (p[1] !== q[1])
+                edges.push([p[0], p[1], q[0], q[1]]);
+            x0 = Math.min(x0, p[0]);
+            y0 = Math.min(y0, p[1]);
+            x1 = Math.max(x1, p[0]);
+            y1 = Math.max(y1, p[1]);
+        }
+    const m = box(size, x0, y0, x1, y1);
+    if (!m)
+        return null;
+    const hits = [];
+    for (let row = 0; row < m.h; row++)
+        for (let s = 0; s < SUB_ROWS; s++) {
+            const sy = m.y0 + row + (s + 0.5) / SUB_ROWS;
+            hits.length = 0;
+            for (const [ax, ay, bx, by] of edges) {
+                if (sy < Math.min(ay, by) || sy >= Math.max(ay, by))
+                    continue;
+                hits.push([ax + ((sy - ay) * (bx - ax)) / (by - ay), by > ay ? 1 : -1]);
+            }
+            if (hits.length < 2)
+                continue;
+            hits.sort((p, q) => p[0] - q[0]);
+            let wind = 0;
+            for (let h = 0; h < hits.length - 1; h++) {
+                wind += hits[h][1];
+                if (wind === 0)
+                    continue;
+                const xa = Math.max(hits[h][0], m.x0);
+                const xb = Math.min(hits[h + 1][0], m.x0 + m.w);
+                for (let px = Math.floor(xa); px < xb; px++) {
+                    const cover = Math.min(xb, px + 1) - Math.max(xa, px);
+                    if (cover > 0)
+                        m.a[row * m.w + px - m.x0] += cover / SUB_ROWS;
+                }
+            }
+        }
+    return m;
+}
+/** Round-capped, round-joined line of width `w` along the polylines: distance to the nearest segment ≤ w/2. */
+function strokeMask(size, polys, w) {
+    const r = w / 2;
+    const segs = [];
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (const { pts, closed } of polys) {
+        const n = closed ? pts.length : pts.length - 1;
+        for (let j = 0; j < Math.max(n, 1); j++) {
+            const p = pts[j];
+            const q = pts[(j + 1) % pts.length] ?? p;
+            segs.push([p[0], p[1], q[0], q[1]]);
+            x0 = Math.min(x0, p[0], q[0]);
+            y0 = Math.min(y0, p[1], q[1]);
+            x1 = Math.max(x1, p[0], q[0]);
+            y1 = Math.max(y1, p[1], q[1]);
+        }
+    }
+    const m = box(size, x0 - r - 1, y0 - r - 1, x1 + r + 1, y1 + r + 1);
+    if (!m)
+        return null;
+    const dist = new Float32Array(m.w * m.h).fill(Infinity);
+    for (const [ax, ay, bx, by] of segs) {
+        const dx = bx - ax;
+        const dy = by - ay;
+        const len2 = dx * dx + dy * dy;
+        const sx0 = Math.max(m.x0, Math.floor(Math.min(ax, bx) - r - 1));
+        const sx1 = Math.min(m.x0 + m.w, Math.ceil(Math.max(ax, bx) + r + 1));
+        const sy0 = Math.max(m.y0, Math.floor(Math.min(ay, by) - r - 1));
+        const sy1 = Math.min(m.y0 + m.h, Math.ceil(Math.max(ay, by) + r + 1));
+        for (let py = sy0; py < sy1; py++)
+            for (let px = sx0; px < sx1; px++) {
+                const cx = px + 0.5 - ax;
+                const cy = py + 0.5 - ay;
+                const t = len2 === 0 ? 0 : Math.min(1, Math.max(0, (cx * dx + cy * dy) / len2));
+                const d = Math.hypot(cx - t * dx, cy - t * dy);
+                const i = (py - m.y0) * m.w + px - m.x0;
+                if (d < dist[i])
+                    dist[i] = d;
+            }
+    }
+    for (let i = 0; i < dist.length; i++)
+        m.a[i] = Math.min(1, Math.max(0, r + 0.5 - dist[i]));
+    return m;
+}
+/** Filled ellipse with an approximate signed distance (exact on the axes, good near the edge). */
+function ellipseMask(size, cx, cy, rx, ry) {
+    const m = box(size, cx - rx - 1, cy - ry - 1, cx + rx + 1, cy + ry + 1);
+    if (!m)
+        return null;
+    for (let py = 0; py < m.h; py++)
+        for (let px = 0; px < m.w; px++) {
+            const x = m.x0 + px + 0.5 - cx;
+            const y = m.y0 + py + 0.5 - cy;
+            const k0 = Math.hypot(x / rx, y / ry);
+            const k1 = Math.hypot(x / (rx * rx), y / (ry * ry));
+            const d = k1 === 0 ? -Math.min(rx, ry) : (k0 * (k0 - 1)) / k1;
+            m.a[py * m.w + px] = Math.min(1, Math.max(0, 0.5 - d));
+        }
+    return m;
 }
 /** Signed distance from (px, py) to a rounded rectangle; negative inside. */
-function roundedRectDistance(px, py, s) {
+function roundedRectMask(size, s) {
+    const m = box(size, s.x - 1, s.y - 1, s.x + s.w + 1, s.y + s.h + 1);
+    if (!m)
+        return null;
     const hx = s.w / 2;
     const hy = s.h / 2;
-    const qx = Math.abs(px - (s.x + hx)) - (hx - s.r);
-    const qy = Math.abs(py - (s.y + hy)) - (hy - s.r);
-    const outside = Math.hypot(Math.max(qx, 0), Math.max(qy, 0));
-    return outside + Math.min(Math.max(qx, qy), 0) - s.r;
+    for (let py = 0; py < m.h; py++)
+        for (let px = 0; px < m.w; px++) {
+            const qx = Math.abs(m.x0 + px + 0.5 - (s.x + hx)) - (hx - s.r);
+            const qy = Math.abs(m.y0 + py + 0.5 - (s.y + hy)) - (hy - s.r);
+            const d = Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - s.r;
+            m.a[py * m.w + px] = Math.min(1, Math.max(0, 0.5 - d));
+        }
+    return m;
+}
+/** The shapes of one placed buddy, back to front, each with its colour. */
+function buddyLayers(size, b) {
+    const { k, map } = placement(size, b);
+    const ink = rgb(MARK_COLORS.ink);
+    const fills = {
+        body: b.colors.body,
+        shade: b.colors.shade,
+    };
+    const layers = [];
+    for (const p of BUDDY.paths) {
+        const polys = flatten(p.d, map);
+        if (p.fill !== 'none')
+            layers.push({ mask: fillMask(size, polys), color: rgb(fills[p.fill]) });
+        const stroke = p.stroke === 'chevron' ? rgb(b.colors.chevron) : ink;
+        layers.push({ mask: strokeMask(size, polys, (p.width ?? MARK.placedLine) * k), color: stroke });
+    }
+    const dots = [...BUDDY.eyes, ...highlights(b.look)];
+    for (const e of dots) {
+        const [cx, cy] = map(e.cx, e.cy);
+        layers.push({
+            mask: ellipseMask(size, cx, cy, e.rx * k, e.ry * k),
+            color: rgb(e.fill === 'ink' ? MARK_COLORS.ink : MARK_COLORS.light),
+        });
+    }
+    return layers;
 }
 /** RGBA pixels (straight alpha) of the icon at `size`×`size`. */
 export function renderIcon(size) {
-    const sh = shapes(size);
-    const d = (r) => (x, y) => roundedRectDistance(x, y, r);
-    // Inside `r` and outside the gap around the front face.
-    const cut = (r) => (x, y) => Math.max(roundedRectDistance(x, y, r), -roundedRectDistance(x, y, sh.gap));
     const layers = [
-        { dist: d(sh.tile), color: TILE.color },
-        { dist: cut(sh.back), color: rgb(MARK_COLORS.back) },
-        ...sh.backEyes.map((e) => ({ dist: cut(e), color: rgb(MARK_COLORS.eye) })),
-        { dist: d(sh.front), color: rgb(MARK_COLORS.front) },
-        ...sh.frontEyes.map((e) => ({ dist: d(e), color: rgb(MARK_COLORS.eye) })),
+        { mask: roundedRectMask(size, tileRect(size)), color: TILE.color },
+        ...buddyLayers(size, MARK.back),
+        ...buddyLayers(size, { ...MARK.front, colors: { ...MARK.front.colors, body: MARK_COLORS.blue.body } }),
     ];
-    const px = new Uint8Array(size * size * 4);
-    for (let y = 0; y < size; y++)
-        for (let x = 0; x < size; x++) {
-            // Premultiplied "over" compositing; coverage from the distance at the pixel centre.
-            let r = 0;
-            let g = 0;
-            let b = 0;
-            let a = 0;
-            for (const l of layers) {
-                const la = Math.min(1, Math.max(0, 0.5 - l.dist(x + 0.5, y + 0.5)));
-                if (la === 0)
+    // Premultiplied "over" compositing, layer by layer inside each mask's box.
+    const acc = new Float32Array(size * size * 4);
+    for (const { mask: m, color } of layers) {
+        if (!m)
+            continue;
+        const [cr, cg, cb] = color.map((c) => c / 255);
+        for (let y = 0; y < m.h; y++)
+            for (let x = 0; x < m.w; x++) {
+                const la = Math.min(1, m.a[y * m.w + x]);
+                if (la <= 0)
                     continue;
-                r = (l.color[0] / 255) * la + r * (1 - la);
-                g = (l.color[1] / 255) * la + g * (1 - la);
-                b = (l.color[2] / 255) * la + b * (1 - la);
-                a = la + a * (1 - la);
+                const i = ((m.y0 + y) * size + m.x0 + x) * 4;
+                acc[i] = cr * la + acc[i] * (1 - la);
+                acc[i + 1] = cg * la + acc[i + 1] * (1 - la);
+                acc[i + 2] = cb * la + acc[i + 2] * (1 - la);
+                acc[i + 3] = la + acc[i + 3] * (1 - la);
             }
-            const i = (y * size + x) * 4;
-            if (a > 0) {
-                px[i] = Math.round((r / a) * 255);
-                px[i + 1] = Math.round((g / a) * 255);
-                px[i + 2] = Math.round((b / a) * 255);
-                px[i + 3] = Math.round(a * 255);
-            }
-        }
+    }
+    const px = new Uint8Array(size * size * 4);
+    for (let i = 0; i < px.length; i += 4) {
+        const a = acc[i + 3];
+        if (a <= 0)
+            continue;
+        px[i] = Math.round((acc[i] / a) * 255);
+        px[i + 1] = Math.round((acc[i + 1] / a) * 255);
+        px[i + 2] = Math.round((acc[i + 2] / a) * 255);
+        px[i + 3] = Math.round(a * 255);
+    }
     return px;
 }
 const CRC_TABLE = (() => {
@@ -160,14 +391,14 @@ export function encodeIcns(pngs) {
 }
 /** The same mark as an SVG (1024-unit canvas), for Linux icon themes. */
 export function iconSvg() {
-    const { tile } = shapes(GRID.canvas);
+    const tile = tileRect(GRID.canvas);
     const hex = (c) => `#${c.map((v) => v.toString(16).padStart(2, '0')).join('')}`;
-    const V = MARK_TILE_VIEWBOX;
+    const V = MARK_VIEWBOX;
     return [
         `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${GRID.canvas} ${GRID.canvas}" width="${GRID.canvas}" height="${GRID.canvas}">`,
         `  <!-- ${APP_MARKER} -->`,
         `  <rect x="${tile.x}" y="${tile.y}" width="${tile.w}" height="${tile.h}" rx="${tile.r}" fill="${hex(TILE.color)}"/>`,
-        `  <svg x="${tile.x}" y="${tile.y}" width="${tile.w}" height="${tile.h}" viewBox="${V.x} ${V.y} ${V.size} ${V.size}">${markSvgBody('gap', MARK_COLORS.front)}</svg>`,
+        `  <svg x="${tile.x}" y="${tile.y}" width="${tile.w}" height="${tile.h}" viewBox="${V.x} ${V.y} ${V.size} ${V.size}">${markSvgBody(MARK_COLORS.blue.body)}</svg>`,
         '</svg>',
         '',
     ].join('\n');

package/dist/src/panel/background.d.ts

@@ -16,6 +16,8 @@ export declare const logFilePath: (p: Paths) => string;
 export declare function readPidFile(p: Paths): Promise<PanelPidFile | undefined>;
 /** When `pid` started, as `ps` prints it; with the pid it names one process, which a reused pid does not match. */
 export declare const processStartTime: (pid: number) => Promise<string | undefined>;
+/** The port of this state directory's background Panel when it runs and answers as itself, else null. */
+export declare function backgroundPanelPort(p: Paths): Promise<number | null>;
 /** URL of a running background Panel, or of any sideby Panel on `port`; removes a stale pid file. */
 export declare function findRunningPanel(p: Paths, port: number): Promise<string | undefined>;
 export interface StartBackgroundOptions {

package/dist/src/panel/background.js

@@ -68,6 +68,13 @@ async function checkPanel(rec) {
         return stale(`the panel on port ${rec.port} is not the one it names`);
     return { status: 'ours', ...(id.build ? { build: id.build } : {}) };
 }
+/** The port of this state directory's background Panel when it runs and answers as itself, else null. */
+export async function backgroundPanelPort(p) {
+    const rec = await readPidFile(p);
+    if (!rec)
+        return null;
+    return (await checkPanel(rec)).status === 'ours' ? rec.port : null;
+}
 /** URL of a running background Panel, or of any sideby Panel on `port`; removes a stale pid file. */
 export async function findRunningPanel(p, port) {
     const rec = await readPidFile(p);

package/dist/src/panel/handler.d.ts

@@ -3,6 +3,7 @@ import { type AppProfileStatus } from '../core/app-profiles.ts';
 import { type HandoffSettings } from '../core/config.ts';
 import { type AccountModel } from '../core/model-choice.ts';
 import type { RemoteControlGroup } from '../core/remote-control.ts';
+import * as update from '../core/update.ts';
 import type { AccountStatus, DoctorHistory, FamilyInfo, Runtime } from '../runtime.ts';
 import type { Account, FamilyLogo, QuotaResult, QuotaSetupPlan, UsageResult } from '../types.ts';
 import { type PanelTheme } from './theme.ts';
@@ -31,6 +32,12 @@ export interface PanelHandlerOptions {
      * any other value throws a TypeError. A Portal that changes language creates the handler again.
      */
     lang?: 'auto' | 'en' | 'zh';
+    /**
+     * Whether the Panel offers sideby updates (spec §3.23, ADR-0021): the "new version" label, the Update button and
+     * the Auto Update switch. Default true; a Portal that manages sideby's version itself passes false, and the
+     * Panel then refuses `/api/update*` with 403.
+     */
+    updates?: boolean;
 }
 export type PanelHandler = ((req: IncomingMessage, res: ServerResponse) => Promise<boolean>) & {
     /** Per-instance secret the page sends as `x-sideby-token`. */
@@ -64,6 +71,29 @@ export declare function healthByAccount(history: DoctorHistory | undefined): Map
 export type PanelFamily = FamilyInfo & {
     logo?: FamilyLogo;
 };
+/** What the Panel shows about updates (spec §3.23); absent when the handler was created with `updates: false`. */
+export interface PanelUpdate {
+    current: string;
+    /** The newest version the last Update Check saw; absent before the first one. */
+    latest?: string;
+    available: boolean;
+    checkedAt?: string;
+    /** Why Update Checks are off; absent when they are on. */
+    checksOff?: string;
+    /** Config `update.auto`. */
+    auto: boolean;
+    method: {
+        kind: update.InstallKind;
+        canUpdate: boolean;
+        reason?: string;
+    };
+    /** The command an Update runs, or the one to run by hand when `canRun` is false. */
+    command?: string;
+    canRun: boolean;
+    releaseNotes?: string;
+    /** The command that updates the sideby skill, which sideby never runs itself. */
+    skill: string;
+}
 export interface PanelState {
     schemaVersion: 1;
     version: string;
@@ -100,6 +130,8 @@ export interface PanelState {
     remoteControl?: RemoteControlView[];
     /** Grok Bot windows (ADR-0019), data folders shown as `~/…`; absent when there are none to show. */
     appProfiles?: AppProfileStatus[];
+    /** Update Check result and Auto Update setting (spec §3.23); absent with `updates: false`. */
+    update?: PanelUpdate;
 }
 /** The `handoff` map of the Panel state, from the statuses and Quota already read for the page. */
 export declare function handoffByFamily(rt: Runtime, accounts: readonly PanelAccount[], now: Date): Record<string, string>;

package/dist/src/panel/handler.js

@@ -2,7 +2,8 @@
 import { randomBytes, timingSafeEqual } from 'node:crypto';
 import { aliasesByAccount } from '../core/accounts.js';
 import { listAppProfiles, openAppProfile, removeAppProfile, } from '../core/app-profiles.js';
-import { aliasArgs, aliasRefs } from '../core/config.js';
+import { FAVICON_SVG, ICON_SVG } from '../core/brand-mark.js';
+import { aliasArgs, aliasRefs, editConfigUpdate } from '../core/config.js';
 import { openDesktopApp, withDesktopApps } from '../core/desktop-app.js';
 import { UserError } from '../core/errors.js';
 import { planHandoff } from '../core/handoff.js';
@@ -11,7 +12,9 @@ import { handoffOverview } from '../core/handoff-overview.js';
 import { configureHandoff, handoffStatus } from '../core/handoff-status.js';
 import { accountModel, setAccountModel } from '../core/model-choice.js';
 import { tildify } from '../core/paths.js';
+import { SKILL_INSTALL } from '../core/skill-check.js';
 import { MIN_CALLS } from '../core/tuning.js';
+import * as update from '../core/update.js';
 import { buildId, packageVersion } from '../core/version.js';
 import { HOOK_FAMILIES } from '../handoff/hook.js';
 import { renderPage } from './page.js';
@@ -40,6 +43,36 @@ export function healthByAccount(history) {
         });
     return out;
 }
+// One Update Check at a time per process, started by a state read when one is due (the cache also keeps a failed
+// one from being tried again within the hour, though the page asks every 20 s).
+let checking = null;
+/**
+ * The `update` part of the state. A Panel that may write starts an Update Check in the background when one is due;
+ * a read-only one only shows what the cache holds.
+ */
+async function updateState(rt, readOnly) {
+    const current = packageVersion();
+    const off = update.checksOff(rt.env, rt.config);
+    const cache = await update.readUpdateCache(rt.paths);
+    if (!off && !readOnly && !checking && update.checkDue(cache, new Date()))
+        checking = update.refreshUpdateCheck(rt.paths, rt.env).finally(() => {
+            checking = null;
+        });
+    const method = await update.installMethod(rt.env);
+    const plan = cache.latest ? update.shownPlan(update.planFrom(method, current, cache.latest, rt.env)) : null;
+    return {
+        current,
+        ...(cache.latest ? { latest: cache.latest } : {}),
+        available: Boolean(plan?.available),
+        ...(cache.checkedAt ? { checkedAt: cache.checkedAt } : {}),
+        ...(off ? { checksOff: off } : {}),
+        auto: rt.config.update?.auto === true,
+        method: update.shownMethod(method),
+        ...(plan ? { command: plan.command, releaseNotes: plan.releaseNotes } : {}),
+        canRun: Boolean(plan?.canRun),
+        skill: SKILL_INSTALL,
+    };
+}
 /** The `handoff` map of the Panel state, from the statuses and Quota already read for the page. */
 export function handoffByFamily(rt, accounts, now) {
     const out = {};
@@ -203,12 +236,13 @@ function rcView(groups, home) {
 }
 async function buildState(rt, opts) {
     const ctx = rt.readContext();
-    const [families, accounts, history, quotaSetups, remoteControl] = await Promise.all([
+    const [families, accounts, history, quotaSetups, remoteControl, upd] = await Promise.all([
         rt.familyInfo(),
         rt.accounts(),
         rt.doctorHistory(),
         rt.quotaSetups(),
         rt.remoteControl(),
+        opts.updates ? updateState(rt, opts.readOnly).catch(() => undefined) : Promise.resolve(undefined),
     ]);
     const health = healthByAccount(history);
     const aliases = aliasesByAccount(aliasRefs(rt.config.aliases), accounts);
@@ -259,6 +293,7 @@ async function buildState(rt, opts) {
                 .filter((f) => f.handoff?.starts.length && HOOK_FAMILIES.includes(f.id))
                 .map((f) => f.id),
         },
+        ...(upd ? { update: upd } : {}),
     };
 }
 /** The `change` of a /api/handoff/configure body, with every field checked; unknown fields are refused. */
@@ -318,6 +353,7 @@ export function createPanelHandler(opts) {
     const build = buildId();
     const theme = resolveTheme(opts.theme);
     const lang = resolveLang(opts.lang);
+    const updates = opts.updates !== false;
     const token = randomBytes(32).toString('base64url');
     const serial = writeQueue();
     const getRuntime = typeof opts.runtime === 'function' ? opts.runtime : async () => opts.runtime;
@@ -543,7 +579,51 @@ export function createPanelHandler(opts) {
                 return { ...r, plan: show(r.plan) };
             },
         },
-        // Undo for the setup above; the Runtime turns a teardown that throws into `{ ok: false, message }`.
+        // Update (spec §3.23, ADR-0021): asks the registry, and runs the plan only with `confirm` and the `version` the
+        // person saw. When the registry names another version now, nothing runs and the new plan comes back (`changed`).
+        // It writes the cache even without `confirm`, so a read-only Panel refuses it (writes defaults to true).
+        '/api/update': {
+            async run(body) {
+                if (!updates)
+                    throw new HttpError(403, 'updates are managed by the page that shows this panel');
+                const rt = await getRuntime();
+                const plan = await update.planUpdate(rt.paths, rt.env);
+                const shown = update.shownPlan(plan);
+                if (!optBool(body, 'confirm'))
+                    return { ...shown, updated: false };
+                // A confirmation that runs nothing always says why: the registry names another version (or none newer) now.
+                if (body.version !== plan.latest || !plan.available)
+                    return { ...shown, updated: false, changed: true };
+                const { backgroundPanelPort } = await import('./background.js');
+                const r = await update.applyUpdate(rt.paths, plan, rt.env, {
+                    panelPort: () => backgroundPanelPort(rt.paths),
+                });
+                if (!r.ok)
+                    throw new UserError(r.message);
+                return { ...shown, updated: true, message: r.message, restartedPanel: r.restartedPanel };
+            },
+        },
+        // The Auto Update switch: config `update.auto`, shown as a diff first like every config change.
+        '/api/update/settings': {
+            writes: (body) => body.confirm === true,
+            async run(body) {
+                if (!updates)
+                    throw new HttpError(403, 'updates are managed by the page that shows this panel');
+                if (typeof body.auto !== 'boolean')
+                    throw new HttpError(400, '"auto" must be true or false');
+                const auto = body.auto;
+                const rt = await getRuntime();
+                const r = await editConfigUpdate(rt.paths.configFile, (cur) => ({ ...cur, auto }), {
+                    dryRun: !optBool(body, 'confirm'),
+                });
+                return {
+                    ...r,
+                    applied: optBool(body, 'confirm') && r.changed,
+                    file: tildify(rt.paths.configFile, rt.paths.home),
+                };
+            },
+        },
+        // Undo for the quota setup above; the Runtime turns a teardown that throws into `{ ok: false, message }`.
         '/api/quota/teardown': {
             async run(body) {
                 const family = optString(body, 'family');
@@ -591,7 +671,17 @@ export function createPanelHandler(opts) {
                     });
                     res.end(method === 'HEAD'
                         ? undefined
-                        : renderPage({ basePath, token, nonce, version, build, readOnly, theme, lang }));
+                        : renderPage({ basePath, token, nonce, version, build, readOnly, theme, lang, updates }));
+                    return true;
+                }
+                // The mark, for a Portal's tab and for this page's favicon (ADR-0006 amendment).
+                if (sub === '/icon.svg' || sub === '/favicon.svg') {
+                    res.writeHead(200, {
+                        'content-type': 'image/svg+xml; charset=utf-8',
+                        'cache-control': 'no-cache',
+                        'x-content-type-options': 'nosniff',
+                    });
+                    res.end(method === 'HEAD' ? undefined : sub === '/icon.svg' ? ICON_SVG : FAVICON_SVG);
                     return true;
                 }
                 if (sub === '/api/health') {
@@ -607,7 +697,7 @@ export function createPanelHandler(opts) {
                     return true;
                 }
                 if (sub === '/api/state') {
-                    send(res, 200, await buildState(await getRuntime(), { version, build, readOnly }));
+                    send(res, 200, await buildState(await getRuntime(), { version, build, readOnly, updates }));
                     return true;
                 }
                 if (Object.hasOwn(routes, sub))