my-durable 0.0.7 → 0.0.9

package/apps/dpi-tui/src/hub-feed.ts

@@ -0,0 +1,71 @@
+/**
+ * Multi-host display feed: the hub's /api/network is the same source of truth
+ * the web UI renders. The TUI polls it (no local registry sqlite needed — the
+ * TUI's dpiHome() default differs from the hub's, which starved the network
+ * view to a single adhoc row) and maps NetworkDevice rows into the DeviceRow
+ * shape the network view already renders: devices with live status dots and
+ * their session trees, exactly like the web sidebar.
+ *
+ * Attaching still needs a reachable endpoint: LAN rows carry url+token and
+ * switch directly; tunnel rows have url null and honestly say so (full tunnel
+ * attach rides the hub's /api/stream mux — a later step, same as the web).
+ */
+import type { DeviceRow } from "../../dpi-sdk/src/node/registry.ts";
+
+/** The subset of the hub's NetworkDevice DTO the feed maps into DeviceRow. */
+export interface HubNetworkDevice {
+  id: string;
+  name: string;
+  kind: string;
+  transport: string;
+  url: string | null;
+  source: string;
+  deviceUid?: string | null;
+  status?: string;
+  error?: string | null;
+  lastSeenAt?: number;
+  info?: unknown;
+  tree?: { sessions?: { id: string; name: string }[] } | null;
+}
+
+export function toDeviceRows(devices: HubNetworkDevice[]): DeviceRow[] {
+  return devices.map(
+    (d): DeviceRow => ({
+      id: d.id,
+      name: d.name,
+      kind: "url",
+      transport: d.transport === "tunnel" ? "tunnel" : "lan",
+      url: d.url ?? null,
+      token: null,
+      source: d.source === "config" ? "config" : "ui",
+      position: 0,
+      deviceUid: d.deviceUid ?? null,
+      lastStatus: (d.status ?? "offline") as DeviceRow["lastStatus"],
+      lastError: d.error ?? null,
+      lastSeenAt: d.lastSeenAt ?? null,
+      lastInfo: (d.info ?? null) as DeviceRow["lastInfo"],
+      lastTree: (d.tree ?? null) as DeviceRow["lastTree"],
+      createdAt: 0,
+      updatedAt: 0,
+    }),
+  );
+}
+
+/** Fetch the hub network once; returns null on any failure (caller keeps the last good rows). */
+export async function fetchHubNetwork(
+  url: string,
+  token: string,
+  signal?: AbortSignal,
+): Promise<DeviceRow[] | null> {
+  try {
+    const res = await fetch(new URL("api/network", url), {
+      headers: { authorization: `Bearer ${token}` },
+      signal,
+    });
+    if (!res.ok) return null;
+    const body = (await res.json()) as { devices?: HubNetworkDevice[] };
+    return toDeviceRows(body.devices ?? []);
+  } catch {
+    return null;
+  }
+}

package/apps/dpi-tui/src/hub-mux.ts

@@ -0,0 +1,168 @@
+/**
+ * Node client for the hub's /api/stream mux — the same transport the web FE
+ * rides. One SSE connection; subscription keys (<device>/agent/<s>/<a> etc.)
+ * open one authenticated upstream per key on the HUB, so every subscribe
+ * restarts from the device's snapshot, exactly like a direct device stream.
+ *
+ * This is what lets the TUI ATTACH to tunnel devices: REST flows through the
+ * hub proxy (DpiClient baseUrl = <hub>/api/devices/<id>), events flow here.
+ */
+import { readSse } from "../../dpi-sdk/src/sse.js";
+import { Backoff, type BackoffPolicy } from "../../dpi-sdk/src/protocol/backoff.js";
+import type { Frame, MuxFrame } from "../../dpi-sdk/src/api.ts";
+
+export type MuxState = "connecting" | "live" | "offline";
+
+const RECONNECT: BackoffPolicy = { initS: 1, capS: 30 };
+
+interface Subscriber {
+  push: (frame: Frame) => void;
+}
+
+export class HubMux {
+  private streamId = "";
+  private wanted = new Set<string>();
+  private listeners = new Map<string, Set<Subscriber>>();
+  private source?: AbortController;
+  private state: MuxState = "connecting";
+
+  constructor(
+    private readonly hub: { url: string; token: string },
+    private readonly onState?: (state: MuxState) => void,
+  ) {}
+
+  get live() {
+    return this.state === "live";
+  }
+
+  private setState(state: MuxState) {
+    if (state === this.state) return;
+    this.state = state;
+    this.onState?.(state);
+  }
+
+  private auth(): Record<string, string> {
+    return { authorization: `Bearer ${this.hub.token}` };
+  }
+
+  private started(): Promise<void> {
+    if (this.source) return Promise.resolve();
+    void this.run();
+    return Promise.resolve();
+  }
+
+  private async run() {
+    const ctl = (this.source = new AbortController());
+    const backoff = new Backoff(RECONNECT);
+    while (!ctl.signal.aborted) {
+      this.setState("connecting");
+      try {
+        const res = await fetch(new URL("api/stream", this.hub.url), {
+          headers: { ...this.auth(), accept: "text/event-stream" },
+          signal: ctl.signal,
+        });
+        if (!res.ok || !res.body) throw Error(`hub stream ${res.status}`);
+        for await (const message of readSse(res.body)) {
+          const mux = JSON.parse(message.data) as MuxFrame;
+          if (mux.sub === "hello" && mux.frame.type === "stream") {
+            this.streamId = mux.frame.streamId;
+            this.setState("live");
+            backoff.reset();
+            // Reconnects reopen fresh upstreams: resubscribe everything.
+            await this.put([...this.wanted]);
+            continue;
+          }
+          if (mux.sub === "hello" || mux.sub === "network") continue;
+          if (mux.frame.type === "stream" || mux.frame.type === "network") continue;
+          for (const sub of this.listeners.get(mux.sub) ?? []) sub.push(mux.frame);
+        }
+        if (ctl.signal.aborted) return;
+        this.setState("offline");
+      } catch {
+        if (ctl.signal.aborted) return;
+        this.setState("offline");
+      }
+      await new Promise((resolve) => setTimeout(resolve, backoff.ms));
+      backoff.advance();
+    }
+  }
+
+  private async put(subs: string[]) {
+    const streamId = this.streamId;
+    // An EMPTY list is meaningful: it closes every upstream the hub holds for
+    // this stream (that is how leaving a session frees the device reader).
+    if (!streamId) return;
+    try {
+      await fetch(new URL(`api/stream/${streamId}`, this.hub.url), {
+        method: "PUT",
+        headers: { ...this.auth(), "content-type": "application/json" },
+        body: JSON.stringify({ subs }),
+        signal: AbortSignal.timeout(10_000),
+      });
+    } catch {
+      // The SSE loop reconnects and resubscribes; a lost PUT is not fatal.
+    }
+  }
+
+  /**
+   * Frames for one subscription key. Subscribing on the hub opens a fresh
+   * upstream whose first frame is the device hello — the same contract as a
+   * direct device stream, so `follow()` works unchanged.
+   */
+  async *events(key: string, signal: AbortSignal): AsyncGenerator<Frame> {
+    await this.started();
+    const queue: Frame[] = [];
+    let wake: () => void = () => {};
+    const sub: Subscriber = {
+      push: (frame) => {
+        queue.push(frame);
+        wake();
+      },
+    };
+    const set = this.listeners.get(key) ?? new Set();
+    set.add(sub);
+    this.listeners.set(key, set);
+    const known = this.wanted.has(key);
+    this.wanted.add(key);
+    if (!known) void this.put([...this.wanted]);
+    // Cleanup runs on abort AND on consumer return, and is idempotent: a
+    // consumer that simply stops reading (no next() call) must still release
+    // the hub upstream, or the device keeps a reader forever.
+    let released = false;
+    const release = () => {
+      if (released) return;
+      released = true;
+      signal.removeEventListener("abort", onAbort);
+      set.delete(sub);
+      if (set.size) return;
+      this.listeners.delete(key);
+      this.wanted.delete(key);
+      void this.put([...this.wanted]);
+    };
+    function onAbort() {
+      release();
+      wake();
+    }
+    signal.addEventListener("abort", onAbort, { once: true });
+    try {
+      while (!signal.aborted) {
+        while (queue.length && !signal.aborted) yield queue.shift()!;
+        if (signal.aborted) break;
+        await new Promise<void>((resolve) => {
+          wake = resolve;
+        });
+      }
+    } finally {
+      release();
+    }
+  }
+
+  stop() {
+    this.source?.abort();
+    this.source = undefined;
+    this.streamId = "";
+    this.listeners.clear();
+    this.wanted.clear();
+    this.setState("offline");
+  }
+}

package/apps/dpi-tui/src/main.ts

@@ -48,6 +48,8 @@ const { values, positionals } = parseArgs({
     model: { type: "string" },
     pair: { type: "string" },
     hub: { type: "string" },
+    "hub-url": { type: "string" },
+    "hub-token": { type: "string" },
     force: { type: "boolean" },
     help: { type: "boolean", short: "h" },
   },
@@ -84,7 +86,9 @@ async function start(device: DeviceRef, client: DpiClient, info: DeviceInfo, opt
     session = created.id;
   }
 
-  const app = new App(device, client, info, registry);
+  const hubUrl = values["hub-url"] ?? process.env.DPI_HUB_URL;
+  const hubToken = values["hub-token"] ?? process.env.DPI_HUB_TOKEN;
+  const app = new App(device, client, info, registry, hubUrl && hubToken ? { url: hubUrl, token: hubToken } : undefined);
 
   // Bootstrap local pairing (--pair CODE --hub ORIGIN [--force]): runs the same
   // controller as /pair, against the LOCAL backend, before the UI opens. A bare

package/apps/dpi-tui/src/theme.ts

@@ -27,6 +27,20 @@ export const c = {
   underline: wrap("4", "24"),
   strike: wrap("9", "29"),
   userBg: (s: string) => `\x1b[48;2;42;32;33m${s}\x1b[49m`,
+  inverse: wrap("7", "27"),
+  accentBg: (s: string) => `\x1b[48;2;255;137;151;38;2;26;20;21m${s}\x1b[49;39m`,
+};
+
+// herdr-style chrome tokens (apps/tui/src/theme.ts of the reference), mapped onto
+// this project's brand palette. STATE_* drives every agent/session glyph row.
+export const box = { tl: "┌", tr: "┐", bl: "└", br: "┘", h: "─", v: "│" } as const;
+
+export type RowState = "busy" | "idle" | "error";
+export const STATE_GLYPH: Record<RowState, string> = { busy: "●", idle: "·", error: "✗" };
+export const STATE_COLOR: Record<RowState, (s: string) => string> = {
+  busy: c.accent,
+  idle: c.muted,
+  error: c.err,
 };
 
 export const markdownTheme: MarkdownTheme = {

package/apps/dpi-tui/src/views.ts

@@ -0,0 +1,311 @@
+// herdr-style dashboard views (reference: herdr-0.4.0 apps/tui/src/app.ts),
+// fed from THIS project's real data: SessionSummary[], DeviceRow[] and the
+// App chrome. Pure string builders — no TTY, no timers — so every line is
+// unit-testable exactly like the reference's frame(w, h).
+import { truncateToWidth, visibleWidth, type Component } from "@earendil-works/pi-tui";
+import type { SessionSummary } from "../../dpi-sdk/src/api.ts";
+import type { DeviceRow } from "../../dpi-sdk/src/node/registry.ts";
+import { c, STATE_COLOR, STATE_GLYPH, type RowState } from "./theme.ts";
+
+export type View = "herd" | "network" | "agent" | "log";
+
+export const VIEW_TABS: { id: View; label: string }[] = [
+  { id: "herd", label: "herd" },
+  { id: "network", label: "network" },
+  { id: "agent", label: "agent" },
+  { id: "log", label: "log" },
+];
+
+const rep = (ch: string, n: number) => ch.repeat(Math.max(0, n));
+
+/** A one-line component whose text is computed at render time, with the real width. */
+export class DynamicLine implements Component {
+  constructor(public fn: (width: number) => string) {}
+  render(width: number) {
+    return [truncateToWidth(this.fn(width), width)];
+  }
+  invalidate() {}
+}
+
+/** A multi-line component whose body is computed at render time, with the real width. */
+export class DynamicBlock implements Component {
+  constructor(public fn: (width: number) => string[]) {}
+  render(width: number) {
+    return this.fn(width);
+  }
+  invalidate() {}
+}
+const padTo = (s: string, w: number) => s + rep(" ", Math.max(0, w - visibleWidth(s)));
+const fit = (s: string, w: number) =>
+  padTo(truncateToWidth(s, Math.max(0, w), "…"), Math.max(0, w));
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+const compact = (n: number) =>
+  Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 }).format(n);
+const basename = (p: string) => p.replace(/\/+$/, "").split("/").pop() || p;
+export const ageOf = (createdAt: number, now = Date.now()) => {
+  const s = Math.max(0, Math.floor((now - createdAt) / 1000));
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.floor(s / 60)}m`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h`;
+  return `${Math.floor(s / 86400)}d`;
+};
+
+export const sessionState = (s: SessionSummary): RowState =>
+  s.error ? "error" : s.busy ? "busy" : "idle";
+export const deviceState = (d: DeviceRow): RowState =>
+  d.lastStatus === "online"
+    ? "busy"
+    : d.lastStatus === "checking"
+      ? "idle"
+      : d.lastStatus === "offline"
+        ? "idle"
+        : "error";
+
+export interface HerdRow {
+  kind: "group" | "session";
+  label: string;
+  sessionId?: string;
+}
+
+/** Group sessions by working directory (herdr groups by repo) and apply the / filter. */
+export function herdRows(sessions: SessionSummary[], filter = ""): HerdRow[] {
+  const needle = filter.trim().toLowerCase();
+  const kept = needle
+    ? sessions.filter((s) =>
+        [s.name, s.cwd, s.model, s.busy ? "busy" : "idle"].some((v) =>
+          v.toLowerCase().includes(needle),
+        ),
+      )
+    : sessions;
+  const out: HerdRow[] = [];
+  const groups = new Map<string, SessionSummary[]>();
+  for (const s of kept) {
+    const key = basename(s.cwd);
+    const list = groups.get(key) ?? [];
+    list.push(s);
+    groups.set(key, list);
+  }
+  for (const [dir, list] of groups) {
+    out.push({ kind: "group", label: dir });
+    for (const s of list) out.push({ kind: "session", label: s.name, sessionId: s.id });
+  }
+  return out;
+}
+
+/** The herd table: NAME · STATE · MODEL · AGENTS · AGE, grouped by directory. */
+export function renderHerd(
+  w: number,
+  rows: HerdRow[],
+  sessions: SessionSummary[],
+  opts: { selectedId?: string; cursor?: number; filter?: string } = {},
+): string[] {
+  const showAge = w >= 72;
+  const showModel = w >= 84;
+  const cols = {
+    name: clamp(w - (showModel ? 44 : 34) - (showAge ? 8 : 0), 12, 30),
+    state: 9,
+    model: 18,
+    agents: 7,
+    age: 6,
+  };
+  const lines: string[] = [
+    c.muted(
+      `  ${fit("NAME", cols.name)}  ${fit("STATE", cols.state)}` +
+        (showModel ? `  ${fit("MODEL", cols.model)}` : "") +
+        `  ${fit("AGENTS", cols.agents)}` +
+        (showAge ? `  ${fit("AGE", cols.age)}` : ""),
+    ),
+  ];
+  const cursorRow = rows[opts.cursor ?? 0];
+  for (const row of rows) {
+    if (row.kind === "group") {
+      const group = sessions.filter((s) => basename(s.cwd) === row.label);
+      const busy = group.filter((s) => s.busy).length;
+      lines.push(
+        `${c.muted("~/")}${c.text(row.label)}${c.muted("/")}  ${c.muted(`· ${group.length} agent${group.length === 1 ? "" : "s"} · ${busy} busy`)}`,
+      );
+      continue;
+    }
+    const s = sessions.find((x) => x.id === row.sessionId);
+    if (!s) continue;
+    const selected = s.id === opts.selectedId;
+    const atCursor = cursorRow?.sessionId === s.id;
+    const marker = selected ? c.accent("▌ ") : "  ";
+    const state = `${STATE_COLOR[sessionState(s)](STATE_GLYPH[sessionState(s)])} ${c.muted(fit(sessionState(s), 7))}`;
+    const forks = s.agents.filter((a) => a.kind === "fork").length;
+    const subs = s.agents.filter((a) => a.kind === "subagent").length;
+    const agents = `${s.agents.length}${forks ? `⑂${forks}` : ""}${subs ? `↳${subs}` : ""}`;
+    let line =
+      `${marker}${fit(selected ? c.bold(s.name) : s.name, cols.name)}  ${fit(state, cols.state)}` +
+      (showModel ? `  ${fit(c.muted(basename(s.model) || s.model), cols.model)}` : "") +
+      `  ${fit(c.muted(agents), cols.agents)}`;
+    if (showAge) line += `  ${fit(c.muted(ageOf(s.createdAt)), cols.age)}`;
+    lines.push(atCursor && !selected ? c.inverse(fit(line, w)) : fit(line, w));
+  }
+  if (opts.filter) lines.push(c.warn(`filter: ${opts.filter}`));
+  // herdr frames pad EVERY line to the exact width — the caller paints rows as-is.
+  return lines.map((l) => fit(l, w));
+}
+
+export interface NetRow {
+  kind: "device" | "session";
+  label: string;
+  deviceId?: string;
+  sessionId?: string;
+  current?: boolean;
+}
+
+/** The network tree: every registry device, its sessions underneath (herdr: device › repo › agent). */
+export function networkRows(devices: DeviceRow[], currentDeviceId: string, filter = ""): NetRow[] {
+  const needle = filter.trim().toLowerCase();
+  const out: NetRow[] = [];
+  for (const d of devices) {
+    if (needle && !`${d.name} ${d.id} ${d.kind} ${d.transport}`.toLowerCase().includes(needle))
+      continue;
+    out.push({
+      kind: "device",
+      label: d.name || d.id,
+      deviceId: d.id,
+      current: d.id === currentDeviceId,
+    });
+    for (const s of d.lastTree?.sessions ?? [])
+      out.push({ kind: "session", label: s.name, deviceId: d.id, sessionId: s.id });
+  }
+  return out;
+}
+
+export function renderNetwork(
+  w: number,
+  rows: NetRow[],
+  devices: DeviceRow[],
+  opts: { cursor?: number; currentSessionId?: string; filter?: string } = {},
+): string[] {
+  const lines: string[] = [];
+  for (const [index, row] of rows.entries()) {
+    const atCursor = index === (opts.cursor ?? 0);
+    let label: string;
+    if (row.kind === "device") {
+      const d = devices.find((x) => x.id === row.deviceId)!;
+      const dot =
+        d.lastStatus === "online"
+          ? c.ok("●")
+          : d.lastStatus === "checking"
+            ? c.warn("◌")
+            : c.muted("○");
+      const seen = d.lastSeenAt ? ageOf(d.lastSeenAt) : "never";
+      label =
+        `${dot} ${c.bold(row.label)}${row.current ? c.accent(" ▌") : ""} ${c.muted(`[${d.kind}]`)} ` +
+        `${c.muted(d.transport === "tunnel" ? "tunnel" : "lan")} ${c.muted(d.lastStatus === "online" ? seen : `${d.lastStatus} · ${seen}`)}`;
+    } else {
+      const selected = row.sessionId === opts.currentSessionId;
+      const marker = selected ? c.accent("▌") : " ";
+      const session = devices
+        .find((d) => d.id === row.deviceId)
+        ?.lastTree?.sessions.find((s) => s.id === row.sessionId);
+      const glyph = session?.busy ? c.accent("●") : c.muted("·");
+      label = `   ${c.muted("└─")} ${marker} ${glyph} ${fit(row.label, Math.max(8, w - 30))}`;
+    }
+    lines.push(atCursor ? c.inverse(fit(label, w)) : fit(label, w));
+  }
+  if (opts.filter) lines.push(c.warn(`filter: ${opts.filter}`));
+  return lines.map((l) => fit(l, w));
+}
+
+/** The one-line viewbar under the header: active tab inverse + a right-aligned hint. */
+export function renderViewbar(w: number, view: View, right: string): string {
+  const tabs = VIEW_TABS.map((t) =>
+    t.id === view ? c.inverse(c.bold(` ${t.label} `)) : c.muted(` ${t.label} `),
+  ).join(c.muted("│"));
+  const gap = Math.max(1, w - visibleWidth(tabs) - visibleWidth(right) - 1);
+  return fit(`${tabs}${rep(" ", gap)}${c.muted(right)}`, w);
+}
+
+/** The inverse status bar: mode chip + per-view keymap + right context. */
+export function renderStatusbar(
+  w: number,
+  opts: { view: View; device: string; ctxLeft?: number; background?: number; mode?: "NORMAL" | "INSERT" },
+): string {
+  const insert = opts.mode === "INSERT";
+  const chip = insert ? c.warn(" INSERT ") : c.accentBg(c.bold(" NORMAL "));
+  const keys = insert
+    ? ["tab complete", "↑ history", "enter send", "esc cancel"]
+    : opts.view === "agent"
+      ? ["g herd", "N network", "L log", "[ ] tabs", "m message"]
+      : ["j/k move", "↵ open", "1-9 jump", "g/N/L views", "esc agent"];
+  const right = `${c.muted("ctx")} ${opts.ctxLeft === undefined ? c.muted("—") : c.text(`${opts.ctxLeft}%`)}${opts.background ? c.muted(` · ${opts.background} bg`) : ""}  ${c.muted("dev")} ${c.text(fit(opts.device, 18))}`;
+  const left = `${chip} ${keys.map((k) => c.muted(k)).join(c.muted(" • "))}`;
+  const gap = Math.max(1, w - visibleWidth(left) - visibleWidth(right));
+  return c.inverse(padTo(fit(`${left}${rep(" ", gap)}${right}`, w), w));
+}
+
+/** The top header line: brand + device + counters + connection, right-aligned hints. */
+export function renderHeader(
+  w: number,
+  opts: {
+    device: string;
+    sessions: number;
+    devicesOnline?: number;
+    devicesTotal?: number;
+    conn: string;
+    connOk: boolean;
+  },
+): string {
+  const left = [
+    `${c.accent("▲")} ${c.bold("dpi")}`,
+    c.muted("tui"),
+    c.muted("│"),
+    `${opts.connOk ? c.ok("●") : c.err("○")} ${c.text(opts.conn)}`,
+    c.muted(`${opts.sessions} session${opts.sessions === 1 ? "" : "s"}`),
+    opts.devicesTotal !== undefined
+      ? c.muted(`${opts.devicesOnline ?? 0}/${opts.devicesTotal} devices`)
+      : "",
+  ]
+    .filter(Boolean)
+    .join("  ");
+  const right = c.muted("? help  : palette  q quit");
+  const gap = Math.max(1, w - visibleWidth(left) - visibleWidth(right));
+  return fit(`${left}${rep(" ", gap)}${right}`, w);
+}
+
+/** The herd overview panel (wide terminals): selected session at a glance. */
+export function renderHerdPanel(
+  w: number,
+  h: number,
+  s: SessionSummary | undefined,
+  ctxLeft?: number,
+): string[] {
+  if (!s) return Array.from({ length: Math.max(0, h) }, () => rep(" ", w));
+  const agents = s.agents.map((a) =>
+    a.kind === "fork" ? `⑂ ${a.name}` : a.kind === "subagent" ? `↳ ${a.name}` : `● ${a.name}`,
+  );
+  const lines = [
+    c.muted(" OVERVIEW"),
+    ` ${c.bold(s.name)}`,
+    ` ${c.muted(basename(s.cwd))} ${c.muted("·")} ${c.text(basename(s.model) || s.model)}`,
+    "",
+    ` ${c.muted("state")}   ${STATE_COLOR[sessionState(s)](sessionState(s))}`,
+    ` ${c.muted("agents")}  ${agents.length ? agents[0] : "—"}`,
+    ...agents.slice(1, 8).map((a) => `          ${c.muted(a)}`),
+    "",
+    ` ${c.muted("ctx")}     ${ctxLeft === undefined ? c.muted("—") : c.text(`${ctxLeft}% left`)}`,
+    ` ${c.muted("age")}     ${c.muted(ageOf(s.createdAt))}`,
+    ` ${c.muted("tokens")}  ${c.muted(compact(s.agents.reduce((n, a) => n + a.background, 0)) + " bg")}`,
+  ];
+  return lines.slice(0, h).map((l) => fit(l, w));
+}
+
+/** Join table + panel columns herdr-style: `table │ panel` — tableW is the table column's exact width. */
+export function joinPanel(
+  table: string[],
+  panel: string[],
+  tableW: number,
+  w: number,
+  h: number,
+): string[] {
+  const out: string[] = [];
+  for (let i = 0; i < h; i += 1)
+    out.push(
+      `${padTo(table[i] ?? "", tableW)}${c.muted("│")}${panel[i] ?? rep(" ", Math.max(0, w - tableW - 1))}`,
+    );
+  return out;
+}

package/bin/dpi.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // `dpi` — one command for the Durable Pi stack.
 //   dpi hub    [--port N] [--host H] [--public-host H]   web UI + device tunnel server
-//   dpi device                                            device-side daemon
+//   dpi device [start|stop|status|install|uninstall]     device-side daemon
 //   dpi tui                                               terminal admin client
 // Every subcommand runs the TypeScript entry through tsx, so no build step is needed.
 import { access } from "node:fs/promises";
@@ -19,8 +19,10 @@ const HELP = `dpi — Durable Pi (bare "dpi" opens the TUI)
 Usage:
   dpi hub [--port 4781] [--host 127.0.0.1] [--public-host <host>]
       Web UI + device tunnel server (devices dial this).
-  dpi device
-      Device-side daemon (pairs to a hub, serves one machine's agents).
+  dpi device                                          run the device daemon (foreground)
+  dpi device start | stop | status                    background daemon without a terminal
+  dpi device install | uninstall                      OS service (systemd/launchd); Windows: no
+                                                      autostart — run "dpi device start" after login
   dpi tui
       Terminal admin client.
   dpi help | dpi --help | dpi -h
@@ -98,6 +100,10 @@ if (command === "update" || command === "upgrade") {
     });
     if (!res.ok) throw new Error(`registry responded ${res.status}`);
     latest = (await res.json()).version;
+    // This string is later interpolated into a command line (shell on Windows):
+    // anything that is not a plain semver must stop the update, not run.
+    if (!/^\d+\.\d+\.\d+(-[0-9A-Za-z.]+)?$/.test(String(latest)))
+      throw new Error(`registry returned a malformed version: ${latest}`);
   } catch (error) {
     process.stderr.write(`dpi update: cannot reach the npm registry (${error.message})\n`);
     process.exit(1);
@@ -130,7 +136,15 @@ if (command === "update" || command === "upgrade") {
     process.exit(0);
   }
 
-  const child = spawn("npm", ["install", "-g", `my-durable@${latest}`], { stdio: "inherit" });
+  // Windows: npm is npm.cmd and cmd.exe only executes batch files through a
+  // shell — a bare spawn("npm") dies with ENOENT (CreateProcess does no
+  // PATHEXT resolution). Args are literals plus the strictly-validated
+  // version above, so shell: true has no injection surface here.
+  const onWindows = process.platform === "win32";
+  const child = spawn(onWindows ? "npm.cmd" : "npm", ["install", "-g", `my-durable@${latest}`], {
+    stdio: "inherit",
+    shell: onWindows,
+  });
   child.on("error", (error) => {
     process.stderr.write(`dpi update: cannot run npm (${error.message})\n`);
     process.exit(1);
@@ -149,6 +163,9 @@ if (command === "update" || command === "upgrade") {
 } else {
   // The entries parse process.argv.slice(2) themselves: hand them their own args.
   process.argv = [process.argv[0], process.argv[1], ...commandRest];
+  // The device daemon respawns and installs services through this launcher:
+  // hand it the absolute path before the module loads.
+  process.env.DPI_BIN = fileURLToPath(import.meta.url);
   const { register } = await loadTsx();
   register();
   await import(COMMANDS[command]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-durable",
-  "version": "0.0.7",
-  "description": "Durable Pi — the durable agent network: hub web UI, device backend daemon, TUI admin and the shared SDK, packaged as one runnable monorepo install",
+  "version": "0.0.9",
+  "description": "Durable Pi \u2014 the durable agent network: hub web UI, device backend daemon, TUI admin and the shared SDK, packaged as one runnable monorepo install",
   "license": "MIT",
   "repository": {
     "type": "git",