@sealant/mend 0.29.2 → 0.30.0

package/dist/{dashboard-AREQGMNK.js → dashboard-OF5UXII2.js}

@@ -2,13 +2,15 @@ import {
   HARNESS_COMMANDS,
   LIVE_STATUSES,
   RepositoryCloneUrl,
+  createSseParser,
   cwdFacts,
+  eventFamilies,
   isPendingId,
   matchProjectByCwd,
   normalizeProjectName,
   pendingId,
   repositoryCloneUrlIssue
-} from "./chunk-AIW6XFT5.js";
+} from "./chunk-BMFB2UN7.js";
 
 // src/dashboard.tsx
 import { CliRenderEvents, createCliRenderer } from "@opentui/core";
@@ -20,7 +22,7 @@ import {
   useQuery as useQuery2,
   useQueryClient as useQueryClient2
 } from "@tanstack/react-query";
-import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3, useSyncExternalStore } from "react";
 
 // src/dashboard-adoption.ts
 var deriveAdoptOffer = (facts) => {
@@ -1948,56 +1950,181 @@ function ReviewScreen({
   );
 }
 
-// src/workbench-events.ts
-var createSseParser = () => {
-  let buffer = "";
+// src/snake.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/snake-game.ts
+var OPPOSITE = {
+  up: "down",
+  down: "up",
+  left: "right",
+  right: "left"
+};
+var STEP = {
+  up: { x: 0, y: -1 },
+  down: { x: 0, y: 1 },
+  left: { x: -1, y: 0 },
+  right: { x: 1, y: 0 }
+};
+var same = (a, b) => a.x === b.x && a.y === b.y;
+var placeFood = (width, height, snake, random) => {
+  const free = [];
+  for (let y = 0; y < height; y += 1)
+    for (let x = 0; x < width; x += 1)
+      if (!snake.some((cell) => cell.x === x && cell.y === y)) free.push({ x, y });
+  if (free.length === 0) return snake[0] ?? { x: 0, y: 0 };
+  return free[Math.min(free.length - 1, Math.floor(random() * free.length))] ?? free[0];
+};
+var newSnakeGame = (width, height, random) => {
+  const w = Math.max(8, width);
+  const h = Math.max(4, height);
+  const y = Math.floor(h / 2);
+  const x = Math.floor(w / 2);
+  const snake = [
+    { x, y },
+    { x: x - 1, y },
+    { x: x - 2, y }
+  ];
   return {
-    push: (chunk) => {
-      buffer += chunk;
-      const payloads = [];
-      for (; ; ) {
-        const boundary = buffer.indexOf("\n\n");
-        if (boundary === -1) break;
-        const frame = buffer.slice(0, boundary);
-        buffer = buffer.slice(boundary + 2);
-        const data = frame.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice("data:".length).replace(/^ /, "")).join("\n");
-        if (data !== "") payloads.push(data);
-      }
-      return payloads;
-    }
+    width: w,
+    height: h,
+    snake,
+    direction: "right",
+    pending: null,
+    food: placeFood(w, h, snake, random),
+    score: 0,
+    over: false
   };
 };
-var eventFamilies = (payload) => {
-  let parsed;
-  try {
-    parsed = JSON.parse(payload);
-  } catch {
-    return [];
-  }
-  if (typeof parsed !== "object" || parsed === null || !("type" in parsed)) return [];
-  switch (parsed.type) {
-    case "project":
-    case "worktree":
-    case "session-process":
-      return ["workbench"];
-    // Settlement refreshes the final transcript immediately. Conversation
-    // items can arrive many times per second; the live preview's bounded
-    // polling reads those instead of repeatedly fetching the whole record.
-    case "session":
-      return ["workbench", "review", "transcript"];
-    case "agent-conversation":
-      return ["workbench", "review"];
-    // A comment moves the review AND the dashboard's open-comment counts.
-    case "session-change":
-    case "review-comment":
-      return ["workbench", "review"];
-    default:
-      return [];
+var turn = (game, direction) => {
+  if (game.over) return game;
+  if (direction === OPPOSITE[game.direction] || direction === game.direction) return game;
+  return { ...game, pending: direction };
+};
+var tick = (game, random) => {
+  if (game.over) return game;
+  const direction = game.pending ?? game.direction;
+  const head = game.snake[0];
+  const next = {
+    x: (head.x + STEP[direction].x + game.width) % game.width,
+    y: (head.y + STEP[direction].y + game.height) % game.height
+  };
+  const eats = same(next, game.food);
+  const body = eats ? game.snake : game.snake.slice(0, -1);
+  if (body.some((cell) => same(cell, next))) {
+    return { ...game, direction, pending: null, over: true };
   }
+  const snake = [next, ...body];
+  return {
+    ...game,
+    snake,
+    direction,
+    pending: null,
+    score: eats ? game.score + 1 : game.score,
+    food: eats ? placeFood(game.width, game.height, snake, random) : game.food
+  };
+};
+var render = (game) => {
+  const rows = [];
+  for (let y = 0; y < game.height; y += 1) rows.push(Array.from({ length: game.width }, () => "\xB7"));
+  rows[game.food.y][game.food.x] = "\u25CF";
+  game.snake.forEach((cell, index) => {
+    rows[cell.y][cell.x] = index === 0 ? "\u25C6" : "\u2588";
+  });
+  return rows.map((row) => row.join(""));
 };
 
-// src/dashboard.tsx
+// src/snake.tsx
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "@opentui/react/jsx-runtime";
+var TICK_MS = 140;
+var useSnake = (options) => {
+  const { width, height, enabled } = options;
+  const [game, setGame] = useState2(() => newSnakeGame(width, height, Math.random));
+  const [paused, setPaused] = useState2(false);
+  useEffect2(() => {
+    if (enabled) {
+      setGame(newSnakeGame(width, height, Math.random));
+      setPaused(false);
+    }
+  }, [width, height, enabled]);
+  useEffect2(() => {
+    if (!enabled || paused) return;
+    const timer = setInterval(() => setGame((current) => tick(current, Math.random)), TICK_MS);
+    return () => clearInterval(timer);
+  }, [enabled, paused]);
+  const steer = (direction) => {
+    setPaused(false);
+    setGame(
+      (current) => current.over ? newSnakeGame(current.width, current.height, Math.random) : turn(current, direction)
+    );
+  };
+  const togglePause = () => setPaused((current) => !current);
+  return { game, paused, steer, togglePause };
+};
+var SnakeHeading = ({
+  handle,
+  hint
+}) => {
+  const { game, paused } = handle;
+  const state = game.over ? "over \xB7 any arrow starts again" : paused ? "paused" : null;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx2("span", { children: "  " }),
+      /* @__PURE__ */ jsx2("span", { fg: INK, children: "play snake while you wait" }),
+      /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 score " }),
+      /* @__PURE__ */ jsx2("span", { fg: game.over ? MUTED : ACCENT, children: String(game.score) }),
+      state === null ? null : /* @__PURE__ */ jsx2("span", { fg: FAINT, children: ` \xB7 ${state}` })
+    ] }),
+    /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", fg: FAINT, children: `  ${hint}` })
+  ] });
+};
+var SnakeBoard = ({
+  handle,
+  focused
+}) => {
+  const { game } = handle;
+  const rows = render(game);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      SnakeHeading,
+      {
+        handle,
+        hint: focused ? "arrows steer \xB7 space pauses \xB7 esc puts it away" : "focus this pane to play \xB7 esc puts it away"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "box",
+      {
+        border: true,
+        borderStyle: "rounded",
+        borderColor: focused ? ACCENT : RULE,
+        width: game.width + 2,
+        height: game.height + 2,
+        flexShrink: 0,
+        marginLeft: 2,
+        children: rows.map((row, index) => /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", children: [...row].map((cell, x) => /* @__PURE__ */ jsx2(
+          "span",
+          {
+            fg: cell === "\u25C6" ? ACCENT : cell === "\u2588" ? GREEN : cell === "\u25CF" ? INK : FAINT,
+            children: cell === "\xB7" ? " " : cell
+          },
+          x
+        )) }, index))
+      }
+    )
+  ] });
+};
+var SnakeRows = ({ game }) => /* @__PURE__ */ jsx2(Fragment2, { children: render(game).map((row, index) => /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", children: [...row].map((cell, x) => /* @__PURE__ */ jsx2(
+  "span",
+  {
+    fg: cell === "\u25C6" ? ACCENT : cell === "\u2588" ? GREEN : cell === "\u25CF" ? INK : FAINT,
+    children: cell === "\xB7" ? " " : cell
+  },
+  x
+)) }, index)) });
+
+// src/dashboard.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "@opentui/react/jsx-runtime";
 var STATUS_COLOR = {
   starting: INK_2,
   running: INK,
@@ -2028,7 +2155,7 @@ var COLUMN_TITLE = {
 };
 var WORKTREE_ROW_HEIGHT = 2;
 var SESSION_ROW_HEIGHT = 2;
-var Gutter = ({ selected }) => /* @__PURE__ */ jsx2("span", { fg: selected ? ACCENT : FAINT, children: selected ? "\u258C " : "  " });
+var Gutter = ({ selected }) => /* @__PURE__ */ jsx3("span", { fg: selected ? ACCENT : FAINT, children: selected ? "\u258C " : "  " });
 var Pane = ({
   title,
   focused,
@@ -2036,7 +2163,7 @@ var Pane = ({
   width,
   height,
   grow
-}) => /* @__PURE__ */ jsx2(
+}) => /* @__PURE__ */ jsx3(
   "box",
   {
     border: true,
@@ -2062,10 +2189,10 @@ var SummaryRow = ({
 }) => {
   const factWidth = fact === "" ? 0 : Math.min(fact.length, Math.max(0, width - 8));
   const nameWidth = Math.max(4, width - factWidth - 3);
-  return /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-    /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "  " }),
-    /* @__PURE__ */ jsx2("span", { fg: empty ? FAINT : INK_2, children: fit(name, nameWidth - 1).padEnd(nameWidth) }),
-    factWidth === 0 ? null : /* @__PURE__ */ jsx2("span", { fg: FAINT, children: fit(fact, factWidth) })
+  return /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+    /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "  " }),
+    /* @__PURE__ */ jsx3("span", { fg: empty ? FAINT : INK_2, children: fit(name, nameWidth - 1).padEnd(nameWidth) }),
+    factWidth === 0 ? null : /* @__PURE__ */ jsx3("span", { fg: FAINT, children: fit(fact, factWidth) })
   ] });
 };
 var paneScrollStyle = {
@@ -2074,17 +2201,17 @@ var paneScrollStyle = {
   viewportOptions: { backgroundColor: "transparent" },
   contentOptions: { backgroundColor: "transparent" }
 };
-var EmptyNote = ({ text }) => /* @__PURE__ */ jsx2("text", { height: 1, fg: FAINT, bg: "transparent", children: `  ${text}` });
+var EmptyNote = ({ text }) => /* @__PURE__ */ jsx3("text", { height: 1, fg: FAINT, bg: "transparent", children: `  ${text}` });
 var ProjectRow = ({
   item,
   selected,
   width
 }) => {
   const nameWidth = Math.max(6, width - 9);
-  return /* @__PURE__ */ jsx2("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : "transparent", children: /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-    /* @__PURE__ */ jsx2(Gutter, { selected }),
-    /* @__PURE__ */ jsx2("span", { fg: INK, children: fit(item.project.name, nameWidth).padEnd(nameWidth + 1) }),
-    /* @__PURE__ */ jsx2("span", { fg: item.live > 0 ? MUTED : FAINT, children: item.live > 0 ? `${item.live}/${item.total}` : String(item.total) })
+  return /* @__PURE__ */ jsx3("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : "transparent", children: /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+    /* @__PURE__ */ jsx3(Gutter, { selected }),
+    /* @__PURE__ */ jsx3("span", { fg: INK, children: fit(item.project.name, nameWidth).padEnd(nameWidth + 1) }),
+    /* @__PURE__ */ jsx3("span", { fg: item.live > 0 ? MUTED : FAINT, children: item.live > 0 ? `${item.live}/${item.total}` : String(item.total) })
   ] }) });
 };
 var WorktreeRow = ({
@@ -2109,13 +2236,13 @@ var WorktreeRow = ({
     ],
     factWidth
   );
-  return /* @__PURE__ */ jsxs2("box", { flexShrink: 0, flexDirection: "column", backgroundColor: selected ? WASH : "transparent", children: [
-    /* @__PURE__ */ jsx2("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-      /* @__PURE__ */ jsx2(Gutter, { selected }),
-      /* @__PURE__ */ jsx2("span", { fg: INK, children: fit(group.name, nameWidth - 1).padEnd(nameWidth) }),
-      /* @__PURE__ */ jsx2("span", { fg: color, children: status })
+  return /* @__PURE__ */ jsxs3("box", { flexShrink: 0, flexDirection: "column", backgroundColor: selected ? WASH : "transparent", children: [
+    /* @__PURE__ */ jsx3("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx3(Gutter, { selected }),
+      /* @__PURE__ */ jsx3("span", { fg: INK, children: fit(group.name, nameWidth - 1).padEnd(nameWidth) }),
+      /* @__PURE__ */ jsx3("span", { fg: color, children: status })
     ] }) }),
-    /* @__PURE__ */ jsx2("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", fg: FAINT, children: `  ${facts}` }) })
+    /* @__PURE__ */ jsx3("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsx3("text", { height: 1, bg: "transparent", fg: FAINT, children: `  ${facts}` }) })
   ] });
 };
 var SessionRow = ({
@@ -2140,23 +2267,23 @@ var SessionRow = ({
     ],
     factWidth
   );
-  return /* @__PURE__ */ jsxs2("box", { flexShrink: 0, flexDirection: "column", backgroundColor: selected ? WASH : "transparent", children: [
-    /* @__PURE__ */ jsx2("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-      /* @__PURE__ */ jsx2(Gutter, { selected }),
-      /* @__PURE__ */ jsx2("span", { fg: INK, children: fit(sessionDisplayName(session), nameWidth - 1).padEnd(nameWidth) }),
-      /* @__PURE__ */ jsx2("span", { fg: color, children: status })
+  return /* @__PURE__ */ jsxs3("box", { flexShrink: 0, flexDirection: "column", backgroundColor: selected ? WASH : "transparent", children: [
+    /* @__PURE__ */ jsx3("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx3(Gutter, { selected }),
+      /* @__PURE__ */ jsx3("span", { fg: INK, children: fit(sessionDisplayName(session), nameWidth - 1).padEnd(nameWidth) }),
+      /* @__PURE__ */ jsx3("span", { fg: color, children: status })
     ] }) }),
-    /* @__PURE__ */ jsx2("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", fg: FAINT, children: `  ${facts}` }) })
+    /* @__PURE__ */ jsx3("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsx3("text", { height: 1, bg: "transparent", fg: FAINT, children: `  ${facts}` }) })
   ] });
 };
 var HarnessRow = ({
   item,
   selected,
   background
-}) => /* @__PURE__ */ jsx2("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : background, children: /* @__PURE__ */ jsxs2("text", { height: 1, bg: selected ? WASH : background, children: [
-  /* @__PURE__ */ jsx2(Gutter, { selected }),
-  /* @__PURE__ */ jsx2("span", { fg: INK, children: item.label.padEnd(12) }),
-  /* @__PURE__ */ jsx2("span", { fg: FAINT, children: item.hint })
+}) => /* @__PURE__ */ jsx3("box", { height: 1, flexShrink: 0, backgroundColor: selected ? WASH : background, children: /* @__PURE__ */ jsxs3("text", { height: 1, bg: selected ? WASH : background, children: [
+  /* @__PURE__ */ jsx3(Gutter, { selected }),
+  /* @__PURE__ */ jsx3("span", { fg: INK, children: item.label.padEnd(12) }),
+  /* @__PURE__ */ jsx3("span", { fg: FAINT, children: item.hint })
 ] }) });
 var PREVIEW_GLYPH = {
   user: "\u203A ",
@@ -2176,68 +2303,72 @@ var PREVIEW_COLOR = {
   meta: FAINT,
   blank: FAINT
 };
-var PreviewRow = ({ line }) => /* @__PURE__ */ jsx2("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-  /* @__PURE__ */ jsx2("span", { fg: FAINT, children: line.lead ? PREVIEW_GLYPH[line.kind] : "  " }),
-  /* @__PURE__ */ jsx2("span", { fg: PREVIEW_COLOR[line.kind], children: line.text })
+var PreviewRow = ({ line }) => /* @__PURE__ */ jsx3("box", { height: 1, flexShrink: 0, backgroundColor: "transparent", children: /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+  /* @__PURE__ */ jsx3("span", { fg: FAINT, children: line.lead ? PREVIEW_GLYPH[line.kind] : "  " }),
+  /* @__PURE__ */ jsx3("span", { fg: PREVIEW_COLOR[line.kind], children: line.text })
 ] }) });
 var SessionFacts = ({
   group,
   item,
-  rows
+  rows,
+  tunnels
 }) => {
   const { session, annotation, services } = item;
   const color = STATUS_COLOR[session.status] ?? MUTED;
   const summary = session.summary?.split("\n")[0] ?? null;
   const change = annotation ?? group?.annotation;
   const lines = [
-    /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-      /* @__PURE__ */ jsx2("span", { children: "  " }),
-      /* @__PURE__ */ jsx2("span", { fg: INK, children: sessionDisplayName(session) }),
-      /* @__PURE__ */ jsx2("span", { fg: FAINT, children: ` \xB7 ${session.harness}` })
+    /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx3("span", { children: "  " }),
+      /* @__PURE__ */ jsx3("span", { fg: INK, children: sessionDisplayName(session) }),
+      /* @__PURE__ */ jsx3("span", { fg: FAINT, children: ` \xB7 ${session.harness}` })
     ] }, "name"),
-    /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-      /* @__PURE__ */ jsx2("span", { children: "  " }),
-      /* @__PURE__ */ jsx2("span", { fg: color, children: session.status }),
-      /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }),
-      /* @__PURE__ */ jsx2("span", { fg: MUTED, children: session.branch }),
-      /* @__PURE__ */ jsx2("span", { fg: FAINT, children: session.baseSha === "" ? "" : ` vs ${session.baseRef ?? session.baseSha.slice(0, 12)}` })
+    /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx3("span", { children: "  " }),
+      /* @__PURE__ */ jsx3("span", { fg: color, children: session.status }),
+      /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }),
+      /* @__PURE__ */ jsx3("span", { fg: MUTED, children: session.branch }),
+      /* @__PURE__ */ jsx3("span", { fg: FAINT, children: session.baseSha === "" ? "" : ` vs ${session.baseRef ?? session.baseSha.slice(0, 12)}` })
     ] }, "status"),
-    /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", fg: FAINT, children: `  started ${timeAgo(session.createdAt)} \xB7 ${isPendingId(session.id) ? "provisioning" : session.id.slice(0, 8)}` }, "started"),
-    /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-      /* @__PURE__ */ jsx2("span", { children: "  " }),
-      services.length === 0 ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "no services running" }) : services.slice(0, 2).map((service, index) => /* @__PURE__ */ jsxs2("span", { children: [
-        index > 0 ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }) : null,
-        /* @__PURE__ */ jsx2("span", { fg: service.status === "reachable" ? INK_2 : MUTED, children: `${service.label ?? service.id.slice(0, 6)} :${service.workspacePort ?? "?"}${service.protocol === "udp" ? "u" : ""}\u2192${service.hostPort ?? "?"} ${service.status}` })
-      ] }, service.id)),
-      services.length > 2 ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: ` \xB7 +${services.length - 2} more` }) : null
+    /* @__PURE__ */ jsx3("text", { height: 1, bg: "transparent", fg: FAINT, children: `  started ${timeAgo(session.createdAt)} \xB7 ${isPendingId(session.id) ? "provisioning" : session.id.slice(0, 8)}` }, "started"),
+    /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx3("span", { children: "  " }),
+      services.length === 0 ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "no services running" }) : services.slice(0, 2).map((service, index) => {
+        const tunnel = tunnels.find((candidate) => candidate.service.id === service.id);
+        return /* @__PURE__ */ jsxs3("span", { children: [
+          index > 0 ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }) : null,
+          /* @__PURE__ */ jsx3("span", { fg: service.status === "reachable" ? INK_2 : MUTED, children: tunnel === void 0 ? `${service.label ?? service.id.slice(0, 6)} :${service.workspacePort ?? "?"}${service.protocol === "udp" ? "u" : ""}\u2192${service.hostPort ?? "?"} ${service.status}` : tunnel.line })
+        ] }, service.id);
+      }),
+      services.length > 2 ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: ` \xB7 +${services.length - 2} more` }) : null
     ] }, "services"),
-    /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-      /* @__PURE__ */ jsx2("span", { children: "  " }),
-      change === void 0 || change.openComments === 0 ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "no open review comments" }) : /* @__PURE__ */ jsxs2("span", { fg: INK_2, children: [
+    /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx3("span", { children: "  " }),
+      change === void 0 || change.openComments === 0 ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "no open review comments" }) : /* @__PURE__ */ jsxs3("span", { fg: INK_2, children: [
         change.openComments,
         " open comment",
         change.openComments === 1 ? "" : "s"
       ] }),
-      change?.pendingFollowUp === true ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }),
-        /* @__PURE__ */ jsx2("span", { fg: INK_2, children: "follow-up pending" })
+      change?.pendingFollowUp === true ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }),
+        /* @__PURE__ */ jsx3("span", { fg: INK_2, children: "follow-up pending" })
       ] }) : null,
-      change?.changeId == null ? null : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }),
-        /* @__PURE__ */ jsx2("span", { fg: MUTED, children: "v reviews the change" })
+      change?.changeId == null ? null : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }),
+        /* @__PURE__ */ jsx3("span", { fg: MUTED, children: "v reviews the change" })
       ] })
     ] }, "comments"),
-    /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", fg: summary === null ? FAINT : MUTED, children: `  ${fit(summary ?? "no summary yet", 200)}` }, "summary")
+    /* @__PURE__ */ jsx3("text", { height: 1, bg: "transparent", fg: summary === null ? FAINT : MUTED, children: `  ${fit(summary ?? "no summary yet", 200)}` }, "summary")
   ];
-  return /* @__PURE__ */ jsx2("box", { flexShrink: 0, flexDirection: "column", backgroundColor: "transparent", children: lines.slice(0, Math.max(0, rows)) });
+  return /* @__PURE__ */ jsx3("box", { flexShrink: 0, flexDirection: "column", backgroundColor: "transparent", children: lines.slice(0, Math.max(0, rows)) });
 };
 var StatusLine = ({
   busy,
   busyStarted,
   status
 }) => {
-  const [now, setNow] = useState2(() => Date.now());
-  useEffect2(() => {
+  const [now, setNow] = useState3(() => Date.now());
+  useEffect3(() => {
     if (busy !== null) {
       const timer = setInterval(() => setNow(Date.now()), 1e3);
       return () => clearInterval(timer);
@@ -2249,7 +2380,7 @@ var StatusLine = ({
     return void 0;
   }, [busy, status]);
   const text = busy === null ? status !== null && Date.now() - status.at < 5e3 ? ` ${status.text}` : "" : ` ${busy} ${Math.max(0, Math.round((now - busyStarted) / 1e3))}s`;
-  return /* @__PURE__ */ jsx2("text", { height: 1, fg: INK_2, bg: "transparent", children: text });
+  return /* @__PURE__ */ jsx3("text", { height: 1, fg: INK_2, bg: "transparent", children: text });
 };
 var errorText = (error) => error instanceof Error ? error.message : String(error);
 var keepSpanVisible = (scroll, top, height, viewRows) => {
@@ -2261,6 +2392,8 @@ var keepSpanVisible = (scroll, top, height, viewRows) => {
 var PREVIEW_MAX_LINES = 300;
 var SESSION_FACT_ROWS = 6;
 var noShare = () => "off";
+var NO_TUNNELS = [];
+var noTunnels = () => NO_TUNNELS;
 var App = ({ ctx, onQuit }) => {
   const renderer = useRenderer();
   const queryClient = useQueryClient2();
@@ -2271,30 +2404,35 @@ var App = ({ ctx, onQuit }) => {
     retry: true,
     retryDelay: 1e3
   });
-  const [focus, setFocusState] = useState2("sessions");
-  const [lastNav, setLastNav] = useState2("sessions");
-  const [projectKey, setProjectKey] = useState2(null);
-  const [worktreeKey, setWorktreeKey] = useState2(null);
-  const [sessionKey, setSessionKey] = useState2(null);
-  const [picker, setPicker] = useState2(null);
-  const [pickerIndex, setPickerIndex] = useState2(0);
-  const [busy, setBusy] = useState2(null);
-  const [busyStarted, setBusyStarted] = useState2(0);
-  const [status, setStatus] = useState2(null);
+  const [focus, setFocusState] = useState3("sessions");
+  const [lastNav, setLastNav] = useState3("sessions");
+  const [projectKey, setProjectKey] = useState3(null);
+  const [worktreeKey, setWorktreeKey] = useState3(null);
+  const [sessionKey, setSessionKey] = useState3(null);
+  const [picker, setPicker] = useState3(null);
+  const [pickerIndex, setPickerIndex] = useState3(0);
+  const [busy, setBusy] = useState3(null);
+  const [busyStarted, setBusyStarted] = useState3(0);
+  const [status, setStatus] = useState3(null);
   const shareState = useSyncExternalStore(
     (onChange) => ctx.agentShare?.subscribe(() => onChange()) ?? (() => {
     }),
     ctx.agentShare === null ? noShare : ctx.agentShare.snapshot
   );
-  const [editing, setEditing] = useState2(null);
-  const [stopArmed, setStopArmed] = useState2(null);
-  const [removeArmed, setRemoveArmed] = useState2(null);
-  const [creating, setCreating] = useState2(null);
-  const [adoptOffer, setAdoptOffer] = useState2(null);
+  const openTunnels = useSyncExternalStore(
+    (onChange) => ctx.tunnels?.subscribe(onChange) ?? (() => {
+    }),
+    ctx.tunnels === null ? noTunnels : ctx.tunnels.current
+  );
+  const [editing, setEditing] = useState3(null);
+  const [stopArmed, setStopArmed] = useState3(null);
+  const [removeArmed, setRemoveArmed] = useState3(null);
+  const [creating, setCreating] = useState3(null);
+  const [adoptOffer, setAdoptOffer] = useState3(null);
   const adoptOfferDecided = useRef2(false);
-  const [reviewing, setReviewing] = useState2(null);
+  const [reviewing, setReviewing] = useState3(null);
   const lockRef = useRef2(false);
-  const [gate] = useState2(createLaunchGate);
+  const [gate] = useState3(createLaunchGate);
   const creatingRef = useRef2(creating);
   creatingRef.current = creating;
   const branchRequest = useRef2(0);
@@ -2325,6 +2463,12 @@ var App = ({ ctx, onQuit }) => {
   const sectionRows = (section) => layout.sections.find((entry) => entry.section === section)?.rows ?? 0;
   const previewSessionId = selectedSession !== null && !isPendingId(selectedSession.id) ? selectedSession.id : null;
   const previewLive = selectedSession !== null && LIVE_STATUSES.has(selectedSession.status);
+  useEffect3(() => {
+    const tunnels = ctx.tunnels;
+    if (tunnels === null) return;
+    const timer = setTimeout(() => void tunnels.focus(previewSessionId), 600);
+    return () => clearTimeout(timer);
+  }, [ctx.tunnels, previewSessionId]);
   const transcript = useQuery2({
     queryKey: TRANSCRIPT_KEY(previewSessionId ?? "none"),
     queryFn: () => fetchTranscript(ctx.api, previewSessionId ?? ""),
@@ -2342,9 +2486,26 @@ var App = ({ ctx, onQuit }) => {
     }),
     [transcript.data, detailWidth]
   );
-  const [previewOffset, setPreviewOffset] = useState2(0);
+  const [previewOffset, setPreviewOffset] = useState3(0);
   const factRows = Math.max(0, Math.min(SESSION_FACT_ROWS, layout.detailRows - 2));
   const showFactRule = factRows > 0 && layout.detailRows - factRows > 1;
+  const waiting = selectedSession !== null && (selectedSession.status === "starting" || isPendingId(selectedSession.id));
+  const snake = useSnake({
+    width: Math.max(8, Math.min(40, detailWidth - 4)),
+    // The pane minus the facts, the rule, the starting line, two lines of hints and the border.
+    height: Math.max(4, Math.min(14, layout.detailRows - factRows - 8)),
+    enabled: waiting
+  });
+  const [snakeAwayFor, setSnakeAwayFor] = useState3(null);
+  const snakeShown = waiting && snakeAwayFor !== selectedSession?.id;
+  const [snakeOverlay, setSnakeOverlay] = useState3(ctx.openSnake === true);
+  const overlayWidth = Math.max(16, Math.min(60, terminalCols - 8));
+  const overlayHeight = Math.max(6, Math.min(20, terminalRows - 10));
+  const overlaySnake = useSnake({
+    width: overlayWidth,
+    height: overlayHeight,
+    enabled: snakeOverlay
+  });
   const previewRows = Math.max(1, layout.detailRows - factRows - (showFactRule ? 1 : 0));
   const previewView = previewWindow(preview, previewRows, previewOffset);
   const setFocus = (column) => {
@@ -2357,7 +2518,7 @@ var App = ({ ctx, onQuit }) => {
   };
   const say = (text) => setStatus({ text, at: Date.now() });
   const refetch = () => void queryClient.invalidateQueries({ queryKey: WORKBENCH_KEY });
-  useEffect2(() => {
+  useEffect3(() => {
     const share = ctx.agentShare;
     if (share === null) return;
     return share.subscribe((event) => {
@@ -2368,7 +2529,7 @@ var App = ({ ctx, onQuit }) => {
       else if (event.kind === "not-signed") say(`\u2717 not signed \u2014 ${event.message}`);
     });
   }, [ctx.agentShare]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (data === void 0 || adoptOfferDecided.current) return;
     if (homeProject !== void 0) return;
     adoptOfferDecided.current = true;
@@ -2380,10 +2541,10 @@ var App = ({ ctx, onQuit }) => {
   const projectRows = sectionRows("projects");
   const worktreeRows = sectionRows("worktrees");
   const sessionRows = sectionRows("sessions");
-  useEffect2(() => {
+  useEffect3(() => {
     keepSpanVisible(projectScrollRef.current, projectIndex, 1, projectRows);
   }, [projectIndex, projectRows]);
-  useEffect2(() => {
+  useEffect3(() => {
     keepSpanVisible(
       worktreeScrollRef.current,
       worktreeIndex * WORKTREE_ROW_HEIGHT,
@@ -2391,7 +2552,7 @@ var App = ({ ctx, onQuit }) => {
       worktreeRows
     );
   }, [worktreeIndex, worktreeRows]);
-  useEffect2(() => {
+  useEffect3(() => {
     keepSpanVisible(
       sessionScrollRef.current,
       sessionIndex * SESSION_ROW_HEIGHT,
@@ -2403,10 +2564,14 @@ var App = ({ ctx, onQuit }) => {
     const short = session.id.slice(0, 8);
     lockRef.current = true;
     renderer.suspend();
-    process.stdout.write(`
+    const tunneled = openTunnels.filter((tunnel) => tunnel.service.sessionId === session.id).map((tunnel) => `\u25CF ${tunnel.line} \xB7 tunnel
+`).join("");
+    process.stdout.write(
+      `
 attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
-
-`);
+${tunneled}
+`
+    );
     let outcome;
     try {
       outcome = await ctx.attachTty(session.id, session.harness);
@@ -3022,6 +3187,28 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
     if (reviewing !== null) return;
     if (lockRef.current) return;
     if (key.ctrl && key.name === "c") return onQuit();
+    if (snakeOverlay) {
+      if (key.name === "up" || key.name === "down" || key.name === "left" || key.name === "right") {
+        overlaySnake.steer(key.name);
+      } else if (key.name === "space") {
+        overlaySnake.togglePause();
+      } else if (key.name === "escape" || key.name === "q") {
+        setSnakeOverlay(false);
+      }
+      return;
+    }
+    if (waiting && focus === "detail" && picker === null && editing === null && creating === null) {
+      if (snakeShown) {
+        if (key.name === "up" || key.name === "down" || key.name === "left" || key.name === "right") {
+          snake.steer(key.name);
+          return;
+        }
+        if (key.name === "space") return snake.togglePause();
+        if (key.name === "escape") return setSnakeAwayFor(selectedSession?.id ?? null);
+      } else if (key.name === "space") {
+        return setSnakeAwayFor(null);
+      }
+    }
     const verb = verbForKey(key.name ?? "", key.shift === true);
     if (verb !== "stop") setStopArmed(null);
     if (verb !== "remove") setRemoveArmed(null);
@@ -3222,7 +3409,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
   const footerText = adoptOffer === null ? editing === null ? creating === null ? picker === null ? ` ${fitHints(verbHints(focus), Math.max(12, terminalCols - 2))}` : " \u2191\u2193 move \xB7 enter start \xB7 esc cancel" : creating.step === "name" ? " enter continue \xB7 esc cancel" : creating.step === "base" ? " type to filter \xB7 \u2191\u2193 move \xB7 enter choose base \xB7 esc back" : " \u2191\u2193 move \xB7 enter launch \xB7 esc back" : " enter save \xB7 esc cancel" : " enter adopt \xB7 \u2190\u2192 auth mode \xB7 esc not now";
   const loadFailure = data === void 0 && failureReason !== null ? errorText(failureReason) : null;
   if (reviewing !== null) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       ReviewScreen,
       {
         ctx,
@@ -3258,13 +3445,13 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
   const renderSection = (entry) => {
     const inner = Math.max(4, layout.sidebarWidth - 2);
     if (!entry.expanded) {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         Pane,
         {
           title: paneTitle(entry.section, layout.sidebarWidth),
           focused: false,
           height: entry.height,
-          children: /* @__PURE__ */ jsx2(
+          children: /* @__PURE__ */ jsx3(
             SummaryRow,
             {
               name: breadcrumbValue(entry.section),
@@ -3280,13 +3467,13 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
     const focused = focus === entry.section;
     switch (entry.section) {
       case "projects":
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3(
           Pane,
           {
             title: paneTitle("projects", layout.sidebarWidth),
             focused,
             grow: true,
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs3(
               "scrollbox",
               {
                 ref: projectScrollRef,
@@ -3295,7 +3482,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
                 minHeight: 0,
                 style: paneScrollStyle,
                 children: [
-                  projectItems.map((item, index) => /* @__PURE__ */ jsx2(
+                  projectItems.map((item, index) => /* @__PURE__ */ jsx3(
                     ProjectRow,
                     {
                       item,
@@ -3304,7 +3491,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
                     },
                     item.project.id
                   )),
-                  data !== void 0 && projectItems.length === 0 ? /* @__PURE__ */ jsx2(EmptyNote, { text: "none adopted yet" }) : null
+                  data !== void 0 && projectItems.length === 0 ? /* @__PURE__ */ jsx3(EmptyNote, { text: "none adopted yet" }) : null
                 ]
               }
             )
@@ -3312,13 +3499,13 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
           entry.section
         );
       case "worktrees":
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3(
           Pane,
           {
             title: paneTitle("worktrees", layout.sidebarWidth),
             focused,
             grow: true,
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs3(
               "scrollbox",
               {
                 ref: worktreeScrollRef,
@@ -3327,7 +3514,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
                 minHeight: 0,
                 style: paneScrollStyle,
                 children: [
-                  worktreeGroups.map((group, index) => /* @__PURE__ */ jsx2(
+                  worktreeGroups.map((group, index) => /* @__PURE__ */ jsx3(
                     WorktreeRow,
                     {
                       group,
@@ -3336,7 +3523,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
                     },
                     group.key
                   )),
-                  data !== void 0 && worktreeGroups.length === 0 ? /* @__PURE__ */ jsx2(EmptyNote, { text: "no worktrees \u2014 w starts one" }) : null
+                  data !== void 0 && worktreeGroups.length === 0 ? /* @__PURE__ */ jsx3(EmptyNote, { text: "no worktrees \u2014 w starts one" }) : null
                 ]
               }
             )
@@ -3344,13 +3531,13 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
           entry.section
         );
       case "sessions":
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx3(
           Pane,
           {
             title: paneTitle("sessions", layout.sidebarWidth),
             focused,
             grow: true,
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs3(
               "scrollbox",
               {
                 ref: sessionScrollRef,
@@ -3359,7 +3546,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
                 minHeight: 0,
                 style: paneScrollStyle,
                 children: [
-                  sessionItems.map((item, index) => /* @__PURE__ */ jsx2(
+                  sessionItems.map((item, index) => /* @__PURE__ */ jsx3(
                     SessionRow,
                     {
                       item,
@@ -3368,13 +3555,13 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
                     },
                     item.session.id
                   )),
-                  data !== void 0 && sessionItems.length === 0 ? /* @__PURE__ */ jsx2(
+                  data !== void 0 && sessionItems.length === 0 ? /* @__PURE__ */ jsx3(
                     EmptyNote,
                     {
                       text: selectedGroup === null ? "no worktree selected" : "no sessions \u2014 n starts one"
                     }
                   ) : null,
-                  loadFailure === null ? null : /* @__PURE__ */ jsx2("text", { height: 1, fg: INK_2, bg: "transparent", children: `  ${loadFailure} \u2014 retrying` })
+                  loadFailure === null ? null : /* @__PURE__ */ jsx3("text", { height: 1, fg: INK_2, bg: "transparent", children: `  ${loadFailure} \u2014 retrying` })
                 ]
               }
             )
@@ -3383,52 +3570,67 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         );
     }
   };
-  const renderDetail = () => /* @__PURE__ */ jsx2(Pane, { title: paneTitle("detail", detailWidth + 2), focused: focus === "detail", grow: true, children: selectedItem === null ? /* @__PURE__ */ jsx2(EmptyNote, { text: "no session selected \u2014 n starts one" }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(SessionFacts, { group: selectedGroup, item: selectedItem, rows: factRows }),
-    showFactRule ? /* @__PURE__ */ jsx2("text", { height: 1, bg: "transparent", fg: FAINT, children: `  ${"\u2500".repeat(Math.max(4, detailWidth - 4))}` }) : null,
-    /* @__PURE__ */ jsx2("box", { flexGrow: 1, flexShrink: 1, minHeight: 0, flexDirection: "column", children: previewSessionId === null ? /* @__PURE__ */ jsx2(EmptyNote, { text: "provisioning \u2014 no record yet" }) : selectedSession?.harness === "shell" ? /* @__PURE__ */ jsx2(EmptyNote, { text: "shell \u2014 no conversation record; a attaches if live" }) : transcript.isPending ? /* @__PURE__ */ jsx2(EmptyNote, { text: "reading the record\u2026" }) : transcript.error === null ? previewView.lines.length === 0 ? /* @__PURE__ */ jsx2(EmptyNote, { text: "no conversation recorded yet" }) : previewView.lines.map((line, index) => /* @__PURE__ */ jsx2(PreviewRow, { line }, `${index}-${line.kind}`)) : /* @__PURE__ */ jsx2("text", { height: 1, fg: INK_2, bg: "transparent", children: `  could not read the record \u2014 ${errorText(transcript.error)}` }) })
+  const renderDetail = () => /* @__PURE__ */ jsx3(Pane, { title: paneTitle("detail", detailWidth + 2), focused: focus === "detail", grow: true, children: selectedItem === null ? /* @__PURE__ */ jsx3(EmptyNote, { text: "no session selected \u2014 n starts one" }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(
+      SessionFacts,
+      {
+        group: selectedGroup,
+        item: selectedItem,
+        rows: factRows,
+        tunnels: openTunnels
+      }
+    ),
+    showFactRule ? /* @__PURE__ */ jsx3("text", { height: 1, bg: "transparent", fg: FAINT, children: `  ${"\u2500".repeat(Math.max(4, detailWidth - 4))}` }) : null,
+    /* @__PURE__ */ jsx3("box", { flexGrow: 1, flexShrink: 1, minHeight: 0, flexDirection: "column", children: waiting ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+        /* @__PURE__ */ jsx3("span", { children: "  " }),
+        /* @__PURE__ */ jsx3("span", { fg: INK_2, children: "starting" }),
+        /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 the image builds, then the session boots \xB7 a first build on a new setup takes about 7 minutes" })
+      ] }),
+      snakeShown ? /* @__PURE__ */ jsx3(SnakeBoard, { handle: snake, focused: focus === "detail" }) : /* @__PURE__ */ jsx3(EmptyNote, { text: "snake is put away \xB7 space brings it back" })
+    ] }) : previewSessionId === null ? /* @__PURE__ */ jsx3(EmptyNote, { text: "provisioning \u2014 no record yet" }) : selectedSession?.harness === "shell" ? /* @__PURE__ */ jsx3(EmptyNote, { text: "shell \u2014 no conversation record; a attaches if live" }) : transcript.isPending ? /* @__PURE__ */ jsx3(EmptyNote, { text: "reading the record\u2026" }) : transcript.error === null ? previewView.lines.length === 0 ? /* @__PURE__ */ jsx3(EmptyNote, { text: "no conversation recorded yet" }) : previewView.lines.map((line, index) => /* @__PURE__ */ jsx3(PreviewRow, { line }, `${index}-${line.kind}`)) : /* @__PURE__ */ jsx3("text", { height: 1, fg: INK_2, bg: "transparent", children: `  could not read the record \u2014 ${errorText(transcript.error)}` }) })
   ] }) });
   const offNav = layout.offscreen.filter(isNavSection);
   const detailOffscreen = layout.offscreen.includes("detail");
-  return /* @__PURE__ */ jsxs2("box", { flexGrow: 1, flexDirection: "column", backgroundColor: CANVAS, children: [
-    /* @__PURE__ */ jsxs2("box", { height: 1, flexDirection: "row", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-        /* @__PURE__ */ jsx2("span", { fg: INK, children: " mend" }),
-        /* @__PURE__ */ jsxs2("span", { fg: MUTED, children: [
+  return /* @__PURE__ */ jsxs3("box", { flexGrow: 1, flexDirection: "column", backgroundColor: CANVAS, children: [
+    /* @__PURE__ */ jsxs3("box", { height: 1, flexDirection: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+        /* @__PURE__ */ jsx3("span", { fg: INK, children: " mend" }),
+        /* @__PURE__ */ jsxs3("span", { fg: MUTED, children: [
           "  ",
           projectItems.length,
           " project",
           projectItems.length === 1 ? "" : "s"
         ] }),
-        /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }),
-        /* @__PURE__ */ jsxs2("span", { fg: liveTotal > 0 ? MUTED : FAINT, children: [
+        /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }),
+        /* @__PURE__ */ jsxs3("span", { fg: liveTotal > 0 ? MUTED : FAINT, children: [
           liveTotal,
           " live"
         ] }),
-        gate.count() > 0 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }),
-          /* @__PURE__ */ jsxs2("span", { fg: INK_2, children: [
+        gate.count() > 0 ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+          /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }),
+          /* @__PURE__ */ jsxs3("span", { fg: INK_2, children: [
             gate.count(),
             " starting"
           ] })
         ] }) : null,
-        shareState === "off" ? null : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }),
-          /* @__PURE__ */ jsx2("span", { fg: shareState === "connected" ? MUTED : FAINT, children: shareState === "connected" ? "agent shared" : "agent share reconnecting" })
+        shareState === "off" ? null : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+          /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }),
+          /* @__PURE__ */ jsx3("span", { fg: shareState === "connected" ? MUTED : FAINT, children: shareState === "connected" ? "agent shared" : "agent share reconnecting" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx2("text", { height: 1, fg: FAINT, bg: "transparent", children: `${ctx.config.url}  ` })
+      /* @__PURE__ */ jsx3("text", { height: 1, fg: FAINT, bg: "transparent", children: `${ctx.config.url}  ` })
     ] }),
-    !layout.breadcrumb ? null : /* @__PURE__ */ jsxs2("text", { height: 1, bg: "transparent", children: [
-      /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "  " }),
-      offNav.map((column, index) => /* @__PURE__ */ jsxs2("span", { children: [
-        index > 0 ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \u25B8 " }) : null,
-        /* @__PURE__ */ jsx2("span", { fg: index === offNav.length - 1 ? INK_2 : MUTED, children: fit(breadcrumbValue(column), 28) })
+    !layout.breadcrumb ? null : /* @__PURE__ */ jsxs3("text", { height: 1, bg: "transparent", children: [
+      /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "  " }),
+      offNav.map((column, index) => /* @__PURE__ */ jsxs3("span", { children: [
+        index > 0 ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \u25B8 " }) : null,
+        /* @__PURE__ */ jsx3("span", { fg: index === offNav.length - 1 ? INK_2 : MUTED, children: fit(breadcrumbValue(column), 28) })
       ] }, column)),
-      /* @__PURE__ */ jsx2("span", { fg: FAINT, children: detailOffscreen ? `${offNav.length > 0 ? " \xB7 " : ""}record hidden \xB7 \u2192 opens it` : " \u25B8" })
+      /* @__PURE__ */ jsx3("span", { fg: FAINT, children: detailOffscreen ? `${offNav.length > 0 ? " \xB7 " : ""}record hidden \xB7 \u2192 opens it` : " \u25B8" })
     ] }),
-    /* @__PURE__ */ jsxs2("box", { flexGrow: 1, flexShrink: 1, minHeight: 0, flexDirection: "row", children: [
-      layout.sidebarWidth === 0 ? null : /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs3("box", { flexGrow: 1, flexShrink: 1, minHeight: 0, flexDirection: "row", children: [
+      layout.sidebarWidth === 0 ? null : /* @__PURE__ */ jsx3(
         "box",
         {
           width: layout.sidebarWidth,
@@ -3441,7 +3643,29 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
       ),
       detailWidth === 0 ? null : renderDetail()
     ] }),
-    picker === null ? null : /* @__PURE__ */ jsx2(
+    snakeOverlay ? /* @__PURE__ */ jsxs3(
+      "box",
+      {
+        position: "absolute",
+        zIndex: 13,
+        left: Math.max(1, Math.floor((terminalCols - (overlayWidth + 4)) / 2)),
+        top: Math.max(1, Math.floor((terminalRows - (overlayHeight + 5)) / 2)),
+        width: overlayWidth + 4,
+        height: overlayHeight + 5,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: ACCENT,
+        title: " snake ",
+        titleAlignment: "left",
+        backgroundColor: SURFACE,
+        flexDirection: "column",
+        children: [
+          /* @__PURE__ */ jsx3(SnakeHeading, { handle: overlaySnake, hint: "arrows steer \xB7 space pauses \xB7 esc closes" }),
+          /* @__PURE__ */ jsx3("box", { marginLeft: 1, flexDirection: "column", children: /* @__PURE__ */ jsx3(SnakeRows, { game: overlaySnake.game }) })
+        ]
+      }
+    ) : null,
+    picker === null ? null : /* @__PURE__ */ jsx3(
       "box",
       {
         position: "absolute",
@@ -3457,7 +3681,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         titleAlignment: "left",
         backgroundColor: SURFACE,
         flexDirection: "column",
-        children: pickerItems.map((item, index) => /* @__PURE__ */ jsx2(
+        children: pickerItems.map((item, index) => /* @__PURE__ */ jsx3(
           HarnessRow,
           {
             item,
@@ -3468,7 +3692,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         ))
       }
     ),
-    editing === null ? null : /* @__PURE__ */ jsx2(
+    editing === null ? null : /* @__PURE__ */ jsx3(
       "box",
       {
         position: "absolute",
@@ -3484,7 +3708,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         backgroundColor: SURFACE,
         height: 3,
         flexShrink: 0,
-        children: /* @__PURE__ */ jsx2(
+        children: /* @__PURE__ */ jsx3(
           "input",
           {
             focused: true,
@@ -3504,7 +3728,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         )
       }
     ),
-    adoptOffer === null ? null : /* @__PURE__ */ jsxs2(
+    adoptOffer === null ? null : /* @__PURE__ */ jsxs3(
       "box",
       {
         position: "absolute",
@@ -3521,25 +3745,25 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         backgroundColor: SURFACE,
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsxs2("text", { height: 1, bg: SURFACE, children: [
-            /* @__PURE__ */ jsx2("span", { children: "  " }),
-            /* @__PURE__ */ jsx2("span", { fg: INK, children: adoptOffer.name }),
-            /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 not in the store yet" })
+          /* @__PURE__ */ jsxs3("text", { height: 1, bg: SURFACE, children: [
+            /* @__PURE__ */ jsx3("span", { children: "  " }),
+            /* @__PURE__ */ jsx3("span", { fg: INK, children: adoptOffer.name }),
+            /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 not in the store yet" })
           ] }),
-          /* @__PURE__ */ jsx2("text", { height: 1, bg: SURFACE, fg: MUTED, children: `  ${adoptOffer.source}` }),
-          /* @__PURE__ */ jsxs2("text", { height: 1, bg: SURFACE, children: [
-            /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "  auth  " }),
-            ADOPT_AUTH_MODES.map((candidate, index) => /* @__PURE__ */ jsxs2("span", { children: [
-              index > 0 ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: " \xB7 " }) : null,
-              /* @__PURE__ */ jsx2("span", { fg: index === adoptOffer.modeIndex ? ACCENT : FAINT, children: index === adoptOffer.modeIndex ? `\u25B8 ${candidate.label}` : candidate.label })
+          /* @__PURE__ */ jsx3("text", { height: 1, bg: SURFACE, fg: MUTED, children: `  ${adoptOffer.source}` }),
+          /* @__PURE__ */ jsxs3("text", { height: 1, bg: SURFACE, children: [
+            /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "  auth  " }),
+            ADOPT_AUTH_MODES.map((candidate, index) => /* @__PURE__ */ jsxs3("span", { children: [
+              index > 0 ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: " \xB7 " }) : null,
+              /* @__PURE__ */ jsx3("span", { fg: index === adoptOffer.modeIndex ? ACCENT : FAINT, children: index === adoptOffer.modeIndex ? `\u25B8 ${candidate.label}` : candidate.label })
             ] }, candidate.mode))
           ] }),
-          /* @__PURE__ */ jsx2("text", { height: 1, bg: SURFACE, fg: FAINT, children: `        ${ADOPT_AUTH_MODES[adoptOffer.modeIndex]?.hint ?? ""}` }),
-          /* @__PURE__ */ jsx2("text", { height: 1, bg: SURFACE, fg: FAINT, children: "  enter adopt \xB7 \u2190\u2192 auth mode \xB7 esc not now" })
+          /* @__PURE__ */ jsx3("text", { height: 1, bg: SURFACE, fg: FAINT, children: `        ${ADOPT_AUTH_MODES[adoptOffer.modeIndex]?.hint ?? ""}` }),
+          /* @__PURE__ */ jsx3("text", { height: 1, bg: SURFACE, fg: FAINT, children: "  enter adopt \xB7 \u2190\u2192 auth mode \xB7 esc not now" })
         ]
       }
     ),
-    creating === null ? null : /* @__PURE__ */ jsxs2(
+    creating === null ? null : /* @__PURE__ */ jsxs3(
       "box",
       {
         position: "absolute",
@@ -3556,14 +3780,14 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         backgroundColor: SURFACE,
         flexDirection: "column",
         children: [
-          /* @__PURE__ */ jsxs2("box", { height: 1, flexShrink: 0, flexDirection: "row", backgroundColor: SURFACE, children: [
-            /* @__PURE__ */ jsxs2("text", { height: 1, bg: SURFACE, children: [
-              /* @__PURE__ */ jsx2(Gutter, { selected: creating.step === "name" }),
-              /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "name     " }),
-              creating.step === "name" ? null : /* @__PURE__ */ jsx2("span", { fg: INK, children: creating.name === "" ? "auto" : creating.name }),
-              creating.joins ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "  \xB7 joins the existing worktree" }) : null
+          /* @__PURE__ */ jsxs3("box", { height: 1, flexShrink: 0, flexDirection: "row", backgroundColor: SURFACE, children: [
+            /* @__PURE__ */ jsxs3("text", { height: 1, bg: SURFACE, children: [
+              /* @__PURE__ */ jsx3(Gutter, { selected: creating.step === "name" }),
+              /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "name     " }),
+              creating.step === "name" ? null : /* @__PURE__ */ jsx3("span", { fg: INK, children: creating.name === "" ? "auto" : creating.name }),
+              creating.joins ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "  \xB7 joins the existing worktree" }) : null
             ] }),
-            creating.step === "name" ? /* @__PURE__ */ jsx2(
+            creating.step === "name" ? /* @__PURE__ */ jsx3(
               "input",
               {
                 focused: true,
@@ -3588,13 +3812,13 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
               }
             ) : null
           ] }),
-          /* @__PURE__ */ jsxs2("box", { height: 1, flexShrink: 0, flexDirection: "row", backgroundColor: SURFACE, children: [
-            /* @__PURE__ */ jsxs2("text", { height: 1, bg: SURFACE, children: [
-              /* @__PURE__ */ jsx2(Gutter, { selected: creating.step === "base" }),
-              /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "base     " }),
-              creating.step === "base" ? null : /* @__PURE__ */ jsx2("span", { fg: creating.step === "name" && !creating.joins ? FAINT : INK, children: creating.joins ? "fixed by the existing worktree" : creating.base ?? "default branch" })
+          /* @__PURE__ */ jsxs3("box", { height: 1, flexShrink: 0, flexDirection: "row", backgroundColor: SURFACE, children: [
+            /* @__PURE__ */ jsxs3("text", { height: 1, bg: SURFACE, children: [
+              /* @__PURE__ */ jsx3(Gutter, { selected: creating.step === "base" }),
+              /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "base     " }),
+              creating.step === "base" ? null : /* @__PURE__ */ jsx3("span", { fg: creating.step === "name" && !creating.joins ? FAINT : INK, children: creating.joins ? "fixed by the existing worktree" : creating.base ?? "default branch" })
             ] }),
-            creating.step === "base" && creating.branches !== null ? /* @__PURE__ */ jsx2(
+            creating.step === "base" && creating.branches !== null ? /* @__PURE__ */ jsx3(
               "input",
               {
                 focused: true,
@@ -3622,7 +3846,7 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
             const active = creating.step === "base";
             if (branch === void 0) {
               const notice = creating.joins ? null : baseStepNotice(creating);
-              return /* @__PURE__ */ jsx2(
+              return /* @__PURE__ */ jsx3(
                 "text",
                 {
                   height: 1,
@@ -3634,42 +3858,42 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
               );
             }
             const highlighted = active && index === creating.baseIndex;
-            return /* @__PURE__ */ jsx2(
+            return /* @__PURE__ */ jsx3(
               "box",
               {
                 height: 1,
                 flexShrink: 0,
                 backgroundColor: highlighted ? WASH : SURFACE,
-                children: /* @__PURE__ */ jsxs2("text", { height: 1, bg: highlighted ? WASH : SURFACE, children: [
-                  /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "   " }),
-                  /* @__PURE__ */ jsx2(Gutter, { selected: highlighted }),
-                  /* @__PURE__ */ jsx2("span", { fg: active ? INK : FAINT, children: branch.name.slice(0, 40).padEnd(41) }),
-                  /* @__PURE__ */ jsx2("span", { fg: FAINT, children: branch.sha.slice(0, 8).padEnd(10) }),
-                  /* @__PURE__ */ jsx2("span", { fg: active ? MUTED : FAINT, children: shortAge(branch.committedAt).padEnd(6) }),
-                  branch.isDefault ? /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "default" }) : null
+                children: /* @__PURE__ */ jsxs3("text", { height: 1, bg: highlighted ? WASH : SURFACE, children: [
+                  /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "   " }),
+                  /* @__PURE__ */ jsx3(Gutter, { selected: highlighted }),
+                  /* @__PURE__ */ jsx3("span", { fg: active ? INK : FAINT, children: branch.name.slice(0, 40).padEnd(41) }),
+                  /* @__PURE__ */ jsx3("span", { fg: FAINT, children: branch.sha.slice(0, 8).padEnd(10) }),
+                  /* @__PURE__ */ jsx3("span", { fg: active ? MUTED : FAINT, children: shortAge(branch.committedAt).padEnd(6) }),
+                  branch.isDefault ? /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "default" }) : null
                 ] })
               },
               branch.name
             );
           }),
-          /* @__PURE__ */ jsxs2("text", { height: 1, bg: SURFACE, children: [
-            /* @__PURE__ */ jsx2(Gutter, { selected: creating.step === "harness" }),
-            /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "harness" })
+          /* @__PURE__ */ jsxs3("text", { height: 1, bg: SURFACE, children: [
+            /* @__PURE__ */ jsx3(Gutter, { selected: creating.step === "harness" }),
+            /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "harness" })
           ] }),
           deriveHarnesses(null).map((item, index) => {
             const active = creating.step === "harness";
             const highlighted = active && index === creating.harnessIndex;
-            return /* @__PURE__ */ jsx2(
+            return /* @__PURE__ */ jsx3(
               "box",
               {
                 height: 1,
                 flexShrink: 0,
                 backgroundColor: highlighted ? WASH : SURFACE,
-                children: /* @__PURE__ */ jsxs2("text", { height: 1, bg: highlighted ? WASH : SURFACE, children: [
-                  /* @__PURE__ */ jsx2("span", { fg: FAINT, children: "   " }),
-                  /* @__PURE__ */ jsx2(Gutter, { selected: highlighted }),
-                  /* @__PURE__ */ jsx2("span", { fg: active ? INK : FAINT, children: item.label.padEnd(12) }),
-                  /* @__PURE__ */ jsx2("span", { fg: FAINT, children: active ? item.hint : "" })
+                children: /* @__PURE__ */ jsxs3("text", { height: 1, bg: highlighted ? WASH : SURFACE, children: [
+                  /* @__PURE__ */ jsx3("span", { fg: FAINT, children: "   " }),
+                  /* @__PURE__ */ jsx3(Gutter, { selected: highlighted }),
+                  /* @__PURE__ */ jsx3("span", { fg: active ? INK : FAINT, children: item.label.padEnd(12) }),
+                  /* @__PURE__ */ jsx3("span", { fg: FAINT, children: active ? item.hint : "" })
                 ] })
               },
               String(item.harness)
@@ -3678,8 +3902,8 @@ attached \xB7 ${session.harness} \xB7 ${short} \xB7 detach: Ctrl+]
         ]
       }
     ),
-    loadFailure === null ? /* @__PURE__ */ jsx2(StatusLine, { busy, busyStarted, status }) : /* @__PURE__ */ jsx2("text", { height: 1, fg: ERROR, bg: "transparent", children: ` could not load workbench \u2014 ${loadFailure} \xB7 retrying` }),
-    /* @__PURE__ */ jsx2("text", { height: 1, fg: FAINT, bg: "transparent", children: footerText })
+    loadFailure === null ? /* @__PURE__ */ jsx3(StatusLine, { busy, busyStarted, status }) : /* @__PURE__ */ jsx3("text", { height: 1, fg: ERROR, bg: "transparent", children: ` could not load workbench \u2014 ${loadFailure} \xB7 retrying` }),
+    /* @__PURE__ */ jsx3("text", { height: 1, fg: FAINT, bg: "transparent", children: footerText })
   ] });
 };
 var runDashboard = async (ctx) => {
@@ -3743,7 +3967,7 @@ var runDashboard = async (ctx) => {
   };
   void watch();
   createRoot(renderer).render(
-    /* @__PURE__ */ jsx2(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx2(App, { ctx, onQuit: quit }) })
+    /* @__PURE__ */ jsx3(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx3(App, { ctx, onQuit: quit }) })
   );
   await new Promise((resolve) => {
     renderer.once(CliRenderEvents.DESTROY, () => resolve());