opencode-courier 0.7.2 → 0.7.3

package/dist/tui.js

@@ -797,7 +797,154 @@ import { createTextNode as _$createTextNode } from "@opentui/solid";
 import { insertNode as _$insertNode } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
-import { createEffect, createMemo, createResource, createRoot, createSignal, For, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { MouseButton, RGBA, Timeline } from "@opentui/core";
+import { batch, createEffect, createMemo, createResource, createRoot, createSignal, For, Index, on, onCleanup, onMount, Show, untrack } from "solid-js";
+
+// src/tree/mascot.ts
+var MASCOT_EVERY = 5;
+var BLINK_EVERY = 11;
+var GLYPH = {
+  idle: [["........", "........", "..gggg..", "gggggggg"]],
+  spawn: [
+    ["........", "...bb...", "g.bbbb.g", "gggggggg"],
+    [".g....g.", "...bb...", "ggbbbbgg", "gggggggg"]
+  ],
+  running: [
+    ["..g..g..", "...bb...", ".gbbbbg.", "gggggggg"],
+    [".g....g.", "........", ".gbbbbg.", "gggggggg"]
+  ],
+  waiting: [
+    [".bbbbbbw", ".bkbbkbw", ".bbaabbm", "ggggggg."],
+    [".bbbbbbb", ".bkbbkbb", ".bbaabbm", "ggggggg."]
+  ],
+  stalled: [
+    ["..e.....", ".bbbbbb.", ".bkbbkb.", "gbbaabbg"],
+    ["..e.e...", ".bbbbbb.", ".bkbbkb.", "gbbaabbg"],
+    ["..e.e.e.", ".bbbbbb.", ".bkbbkb.", "gbbaabbg"]
+  ],
+  report: [
+    ["......aa", "bbbbbbaa", "bkbbkbm.", "bbaabbm."],
+    ["s.....aa", "bbbbbbaa", "bkbbkbm.", "bbaabbm."]
+  ],
+  gone: [["........", ".mmmmmm.", ".mkmmkm.", "mmmmmmmm"]]
+};
+var OPEN_EYES = new Set(["waiting", "report"]);
+function glyph(state, frame) {
+  const frames = GLYPH[state];
+  const pixels = frames[(frame ?? 0) % frames.length];
+  if (frame === undefined)
+    return pixels;
+  if (state === "idle" && breathesOut(frame))
+    return [...pixels.slice(0, 2), ".gggggg.", ...pixels.slice(3)];
+  return OPEN_EYES.has(state) && blinks(frame) ? pixels.map((row) => row.replaceAll("k", "b")) : pixels;
+}
+var breathesOut = (frame) => Math.floor(frame / 2) % 2 === 1;
+var blinks = (frame) => frame % BLINK_EVERY === BLINK_EVERY - 1;
+function cells(pixels) {
+  const lines = [];
+  for (let row = 0;row < pixels.length; row += 2) {
+    const top = pixels[row];
+    const bottom = pixels[row + 1] ?? "";
+    lines.push([...top].map((pixel, column) => cell(token(pixel), token(bottom[column]))));
+  }
+  return lines;
+}
+var token = (pixel) => pixel && pixel !== "." ? pixel : undefined;
+function cell(top, bottom) {
+  if (!top && !bottom)
+    return { char: " " };
+  if (!top)
+    return { char: "\u2584", fg: bottom };
+  if (top === bottom)
+    return { char: "\u2588", fg: top };
+  return bottom ? { char: "\u2580", fg: top, bg: bottom } : { char: "\u2580", fg: top };
+}
+var SIZE = 16;
+var SLUMP = [2, 2, 2, 1, 1, 0, 0];
+function digby(rise, { top = 6, eyes = "open", slump = false, shift = 0, mound = "g" } = {}) {
+  const grid = Array.from({ length: SIZE }, () => new Array(SIZE).fill("."));
+  const span = (row, width, pixel, skip = (_column) => false, by = 0) => {
+    if (row < 0 || row >= SIZE)
+      return;
+    for (let column = (SIZE - width) / 2;column < (SIZE + width) / 2; column++)
+      if (!skip(column))
+        grid[row][column + by] = pixel;
+  };
+  const head = Math.round(10 - 8 * rise);
+  const lean = (at) => slump ? SLUMP[at] : 0;
+  [4, 6, 8, 8, 8, 6, 4].forEach((width, at) => span(head + at, width, "b", undefined, lean(at)));
+  for (let row = head + 7;row <= 11; row++)
+    span(row, 4, "b");
+  const eyeColumns = eyes === "shut" ? [5, 6, 9, 10] : [6, 9];
+  if (eyes !== "none")
+    span(head + 3, 8, "k", (column) => !eyeColumns.includes(column), lean(3));
+  if (eyes === "wide")
+    span(head + 2, 8, "k", (column) => !eyeColumns.includes(column), lean(2));
+  span(head + 4, 2, "a", undefined, lean(4));
+  span(10, SIZE, ".", (column) => column >= 6 && column <= 9);
+  span(10, top, mound, (column) => column >= 6 && column <= 9, shift);
+  span(11, 10, mound, undefined, shift);
+  span(12, 12, mound, undefined, shift);
+  for (const row of [13, 14, 15])
+    span(row, SIZE, mound);
+  return grid.map((row) => row.join(""));
+}
+function paint(pixels, spots) {
+  const grid = pixels.map((row) => [...row]);
+  for (const [row, column, drawn] of spots)
+    [...drawn].forEach((pixel, at) => {
+      if (pixel !== "." && grid[row]?.[column + at] !== undefined)
+        grid[row][column + at] = pixel;
+    });
+  return grid.map((row) => row.join(""));
+}
+var post = (row, column, length, pixel) => Array.from({ length }, (_, at) => [row + at, column, pixel]);
+var headTop = (rise) => Math.round(10 - 8 * rise);
+var running = (rise, shift, dirt) => paint(digby(rise, { shift }), [[headTop(rise), 7, "aa"], ...dirt]);
+var peek = (column, up) => [
+  ...up ? [[8, column, ".b."], [9, column, "bkb"]] : [[9, column, ".b."]],
+  [10, column, "gbg"],
+  [11, column, "ggg"]
+];
+var spawn = (up, dirt) => paint(digby(0.1), [...peek(0, up), ...peek(13, up), [12, 0, "gg"], [12, 14, "gg"], ...dirt]);
+var sign = (shown) => [...shown ? [[2, 13, "www"], [3, 13, "wkw"], [4, 13, "www"]] : [], ...post(5, 14, 7, "m")];
+var waiting = (shown) => (open) => paint(digby(1, { eyes: open ? "wide" : "none" }), [[8, 4, "mm"], [8, 10, "mm"], ...sign(shown)]);
+var stalled = (dots) => () => paint(digby(0.7, { eyes: "shut", slump: true }), [[5, 0, dots]]);
+var report = (rise, spark) => (open) => paint(digby(rise, { eyes: open ? "open" : "none" }), [
+  [0, 12, "aaaa"],
+  [1, 12, "akka"],
+  [2, 12, "aaaa"],
+  ...post(3, 13, 8, "m"),
+  ...spark.map((row, at) => [1 + at, 0, row])
+]);
+var ART = {
+  spawn: [
+    () => spawn(true, [[3, 1, "m"], [5, 3, "m"], [2, 14, "m"], [5, 12, "m"]]),
+    () => spawn(false, [[1, 0, "m"], [4, 2, "m"], [3, 15, "m"], [6, 13, "m"]])
+  ],
+  running: [
+    () => running(0.22, 0, [[5, 2, "m"], [7, 1, "m"], [4, 13, "m"], [6, 14, "m"]]),
+    () => running(0.12, 1, [[3, 1, "m"], [6, 3, "m"], [5, 12, "m"], [3, 15, "m"]])
+  ],
+  waiting: [waiting(true), waiting(false)],
+  stalled: [stalled("e.e.e"), stalled("e"), stalled("e.e")],
+  report: [report(1, [".s.", "sss", ".s."]), report(1.25, ["s.s", ".s.", "s.s"]), report(1.1, [".s.", "sss", ".s."])],
+  gone: [() => digby(-0.3, { mound: "m" })]
+};
+var Z_LINES = [3, 2, 1, undefined];
+function idleArt(frame) {
+  const lines = cells(digby(-0.3, { top: frame !== undefined && breathesOut(frame) ? 8 : 6 }));
+  const line = Z_LINES[(frame ?? 0) % Z_LINES.length];
+  if (line === undefined)
+    return lines;
+  return lines.map((cellsOf, at) => at === line ? cellsOf.map((one, column) => column === 13 ? { char: "z", fg: "m" } : one) : cellsOf);
+}
+function art(state, frame) {
+  if (state === "idle")
+    return idleArt(frame);
+  const frames = ART[state];
+  return cells(frames[(frame ?? 0) % frames.length](!(frame !== undefined && OPEN_EYES.has(state) && blinks(frame))));
+}
 
 // src/tree/rpc.ts
 import { Rpc as Rpc2 } from "@opencode/plugin/rpc";
@@ -831,6 +978,7 @@ var Row = Schema2.Struct({
   created: Schema2.Number,
   idle: Schema2.optionalKey(Schema2.Number),
   cost: Schema2.optionalKey(Schema2.Number),
+  context: Schema2.optionalKey(Schema2.Number),
   tool: Schema2.optionalKey(Schema2.Struct({ name: Schema2.String, at: Schema2.Number })),
   waits: Schema2.Array(Wait)
 });
@@ -879,6 +1027,176 @@ var SETTLE_MS2 = 250;
 var PANEL_SETTLE_MS = 1000;
 var PANEL = "courier-tree";
 var TICK_MS = 1000;
+var FRAME_MS = 90;
+var FLASH_MS = 1500;
+var BAR_MS = 450;
+function animationsOn(options) {
+  return options?.animations !== false;
+}
+function createMotion(enabled) {
+  const [frame, setFrame] = createSignal(0);
+  const [keepers, setKeepers] = createSignal([]);
+  const [moving, setMoving] = createSignal([]);
+  const cadence = createMemo(() => {
+    if (!enabled)
+      return;
+    if (moving().length)
+      return 1;
+    const wanted = keepers().filter((one) => one.when());
+    return wanted.length ? Math.min(...wanted.map((one) => one.every)) : undefined;
+  });
+  createEffect(() => {
+    const every = cadence();
+    if (every === undefined)
+      return;
+    const timer = setInterval(() => batch(() => {
+      const now = untrack(moving);
+      for (const one of now)
+        one.step(FRAME_MS * every);
+      setFrame((count) => count + every);
+      const left = now.filter((one) => !one.done());
+      if (left.length !== now.length)
+        setMoving(left);
+    }), FRAME_MS * every);
+    onCleanup(() => clearInterval(timer));
+  });
+  const tween = (from, to, duration, ease) => {
+    if (!enabled || from === to)
+      return {
+        value: () => to,
+        done: () => true
+      };
+    const target = {
+      value: from
+    };
+    const timeline = new Timeline({
+      duration,
+      autoplay: false
+    });
+    timeline.add(target, {
+      duration,
+      ease,
+      value: to
+    });
+    timeline.play();
+    let elapsed = 0;
+    const one = {
+      value: () => {
+        frame();
+        return target.value;
+      },
+      done: () => {
+        frame();
+        return elapsed >= duration;
+      },
+      step: (ms) => {
+        elapsed += ms;
+        timeline.update(ms);
+      }
+    };
+    setMoving((all) => [...all, one]);
+    return one;
+  };
+  return {
+    enabled,
+    frame,
+    animates: (when, every = 1) => setKeepers((all) => [...all, {
+      when,
+      every
+    }]),
+    tween
+  };
+}
+function createFlashes(motion, rows) {
+  const [flashes, setFlashes] = createSignal(new Map);
+  let seen;
+  createEffect(() => {
+    const read = rows();
+    const before = seen;
+    seen = new Map(read.map((row) => [row.sessionID, row.report?.state]));
+    if (!before || !motion.enabled)
+      return;
+    const arrived = read.filter((row) => row.report?.state === "reported" && before.has(row.sessionID) && before.get(row.sessionID) !== "reported");
+    if (!arrived.length)
+      return;
+    const next = new Map([...untrack(flashes)].filter(([, one]) => !untrack(one.done)));
+    for (const row of arrived)
+      next.set(row.sessionID, motion.tween(1, 0, FLASH_MS, "outQuad"));
+    setFlashes(next);
+  });
+  const strength = (sessionID) => {
+    const one = flashes().get(sessionID);
+    return one && !one.done() ? one.value() : 0;
+  };
+  const reported = () => [...flashes().values()].some((one) => !one.done());
+  return {
+    strength,
+    reported
+  };
+}
+function createBarFill(motion, counts) {
+  const target = createMemo(() => filledCells(counts()));
+  const [easing, setEasing] = createSignal();
+  let last;
+  createEffect(() => {
+    const cells2 = target();
+    const shown = counts().started > 0;
+    if (last && cells2 !== last.cells) {
+      const from = untrack(() => easing()?.value()) ?? last.cells;
+      setEasing(last.shown ? motion.tween(from, cells2, BAR_MS, "outQuad") : undefined);
+    }
+    last = {
+      cells: cells2,
+      shown
+    };
+  });
+  return () => easing()?.value() ?? target();
+}
+function createSpawns(motion, rows) {
+  const [hold, setHold] = createSignal();
+  let seen;
+  createEffect(() => {
+    const read = rows();
+    if (!read)
+      return;
+    const before = seen;
+    seen = new Set(read.map((row) => row.sessionID));
+    if (before && motion.enabled && read.some((row) => !before.has(row.sessionID)))
+      setHold(motion.tween(1, 0, FLASH_MS, "linear"));
+  });
+  return () => {
+    const one = hold();
+    return one !== undefined && !one.done();
+  };
+}
+function mascotState(rows, {
+  reported = false,
+  spawned = false
+} = {}) {
+  if (reported)
+    return "report";
+  if (spawned)
+    return "spawn";
+  if (rows.some((row) => row.state === "waiting"))
+    return "waiting";
+  if (rows.some((row) => row.state === "stalled"))
+    return "stalled";
+  if (rows.some((row) => row.state === "running"))
+    return "running";
+  return rows.length && rows.every((row) => row.state === "gone") ? "gone" : "idle";
+}
+function countsLine(rows) {
+  const count = (state) => rows.filter((row) => row.state === state).length;
+  return [count("waiting") ? `${count("waiting")} waiting on you` : "", count("stalled") ? `${count("stalled")} stalled` : "", count("running") ? `${count("running")} running` : "", count("idle") ? `${count("idle")} idle` : ""].filter(Boolean).join(" \xB7 ");
+}
+var GLYPH_ROWS = 12;
+var GLYPH_COLUMNS = 54;
+var ART_ROWS = 14;
+var BELOW_ROWS = 10;
+function blend(tint, rest, amount) {
+  const mix = (a, b) => b + (a - b) * amount;
+  return RGBA.fromValues(mix(tint.r, rest.r), mix(tint.g, rest.g), mix(tint.b, rest.b), mix(tint.a, rest.a));
+}
 function summaryLine(summary, maxWidth = Infinity) {
   const groups = summary.groups.map((group) => `group ${group.name} ${group.reported}/${group.members}`);
   const parts = [summary.waiting ? `${summary.waiting} waiting on you` : "", summary.stalled ? `${summary.stalled} stalled` : "", summary.running ? `${summary.running} running` : "", ...groups, summary.idle ? `${summary.idle} idle` : ""].filter(Boolean);
@@ -909,12 +1227,15 @@ function parts(rows, parentID) {
     started: children.length
   };
 }
-function bar({
+function filledCells({
   reported,
   started
 }, width = 10) {
-  const filled = started ? Math.round(reported / started * width) : 0;
-  return `[${"\u2588".repeat(filled)}${"\u2591".repeat(width - filled)}] ${reported}/${started} reported`;
+  return started ? Math.round(reported / started * width) : 0;
+}
+function bar(counts, width = 10, filled = filledCells(counts, width)) {
+  const cells2 = Math.max(0, Math.min(width, Math.round(filled)));
+  return `[${"\u2588".repeat(cells2)}${"\u2591".repeat(width - cells2)}] ${counts.reported}/${counts.started} reported`;
 }
 function waitLine(wait) {
   if (wait.type === "permission")
@@ -922,7 +1243,66 @@ function waitLine(wait) {
   return wait.type === "form" ? `shows a form: ${wait.title}` : `asks: ${wait.question}`;
 }
 function statusLine(row) {
-  return [stateWord(row), reportWords(row.report, row.stopped), row.group ? `group ${row.group.name} ${row.group.standing}` : "", row.isolated ? "isolated" : ""].filter(Boolean).join(" \xB7 ");
+  return statusParts(row).map((part) => part.text).join(" \xB7 ");
+}
+function statusParts(row) {
+  const parts2 = [{
+    text: stateWord(row),
+    kind: "state"
+  }, {
+    text: reportWords(row.report, row.stopped),
+    kind: "report"
+  }, {
+    text: row.group ? `group ${row.group.name} ${row.group.standing}` : "",
+    kind: "plain"
+  }, {
+    text: row.isolated ? "isolated" : "",
+    kind: "plain"
+  }];
+  return parts2.filter((part) => part.text);
+}
+var SPINNER = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+function rowMark(row, theme, frame) {
+  const {
+    error,
+    warning,
+    success,
+    info
+  } = theme.text.feedback;
+  if (row.state === "gone")
+    return {
+      mark: " ",
+      color: undefined
+    };
+  if (row.state === "stalled")
+    return {
+      mark: "!",
+      color: error.base
+    };
+  if (row.state === "waiting")
+    return {
+      mark: "\u25CF",
+      color: warning.base
+    };
+  if (row.state === "running")
+    return {
+      mark: frame === undefined ? "\u2022" : SPINNER[frame % SPINNER.length],
+      color: info.base
+    };
+  if (!row.stopped && (row.outcome === "failed" || row.outcome === "interrupted"))
+    return {
+      mark: "\u2717",
+      color: error.base
+    };
+  if (row.report?.state === "reported")
+    return {
+      mark: "\u2713",
+      color: success.base
+    };
+  return {
+    mark: " ",
+    color: undefined
+  };
 }
 function stateWord(row) {
   if (row.state === "waiting")
@@ -935,19 +1315,21 @@ function stateWord(row) {
     return row.outcome;
   return row.state;
 }
-function reportWords(report, stopped) {
-  if (!report)
+function reportWords(report2, stopped) {
+  if (!report2)
     return "";
-  if (report.state === "owed")
+  if (report2.state === "owed")
     return "owes a report";
-  if (report.state === "ended")
+  if (report2.state === "ended")
     return stopped ? "" : "ended without a report";
-  return ["reported", report.status].filter(Boolean).join(" ");
+  return ["reported", report2.status].filter(Boolean).join(" ");
 }
 var counted = (count, noun) => `${count} ${noun}${count === 1 ? "" : "s"}`;
-function activityLine(row, now) {
-  return [`ran ${duration((row.idle ?? now) - row.created)}`, row.tool ? `last ${row.tool.name} ${duration(now - row.tool.at)} ago` : "no tool call yet", row.cost !== undefined ? `$${row.cost.toFixed(2)}` : ""].filter(Boolean).join(" \xB7 ");
+var CONTEXT_WARN = 0.8;
+function activityParts(row, now) {
+  return [`ran ${duration((row.idle ?? now) - row.created)}`, row.tool ? `last ${row.tool.name} ${duration(now - row.tool.at)} ago` : "no tool call yet", row.context !== undefined ? `ctx ${Math.round(row.context * 100)}%` : "", row.cost !== undefined ? `$${row.cost.toFixed(2)}` : ""].filter(Boolean);
 }
+var activityLine = (row, now) => activityParts(row, now).join(" \xB7 ");
 function stalledLine(since, now) {
   return `a message waits in its inbox since ${duration(now - since)}, woken again in vain`;
 }
@@ -1153,6 +1535,24 @@ async function confirmForget(ctx, courier, location, by, target, done) {
 var FOCUS_PROMPT = "pane.focus.left";
 var SPLIT_WIDTH = 108;
 var oneLine = (title) => title.replace(/[\r\n]+/g, " ");
+var digbyColours = (theme) => ({
+  b: theme.text.base,
+  k: theme.background.base,
+  g: theme.background.raised.max,
+  m: theme.text.muted,
+  a: theme.text.action.primary.selected,
+  w: theme.text.feedback.warning.base,
+  e: theme.text.feedback.error.base,
+  s: theme.text.feedback.success.base
+});
+function restBackground(theme, {
+  selected,
+  hovered
+}) {
+  if (selected)
+    return theme.background.raised.high;
+  return hovered ? theme.background.raised.base : undefined;
+}
 function TreePanel(props) {
   const {
     ctx,
@@ -1246,13 +1646,25 @@ function TreePanel(props) {
     if (next)
       setSelectedID(next.sessionID);
   };
+  const openRow = (row) => ctx.ui.router.navigate({
+    type: "session",
+    sessionID: row.sessionID
+  });
   const open = () => {
     const row = current();
     if (row)
-      ctx.ui.router.navigate({
-        type: "session",
-        sessionID: row.sessionID
-      });
+      openRow(row);
+  };
+  const [hovered, setHovered] = createSignal();
+  createEffect(() => {
+    const id = hovered();
+    if (id !== undefined && !rows().some((row) => row.sessionID === id))
+      setHovered(undefined);
+  });
+  let pressed;
+  const click = (row) => {
+    setSelectedID(row.sessionID);
+    openRow(row);
   };
   const stopSelected = () => {
     const row = current();
@@ -1335,6 +1747,61 @@ function TreePanel(props) {
     }]
   }));
   const root = () => parts(rows(), view.root);
+  const motion = createMotion(props.animations);
+  motion.animates(() => rows().some((row) => row.state === "running"));
+  const flashes = createFlashes(motion, rows);
+  const filled = createBarFill(motion, root);
+  const frame = () => motion.enabled ? motion.frame() : undefined;
+  const spawned = createSpawns(motion, () => latest()?.tree?.rows);
+  const [size, setSize] = createSignal({
+    width: 0,
+    height: 0
+  });
+  const height = () => size().height;
+  const empty = () => Boolean(latest()?.tree && !rows().length);
+  const glyphShown = () => height() >= GLYPH_ROWS && size().width >= GLYPH_COLUMNS;
+  const artShown = () => empty() && height() >= ART_ROWS;
+  const [listHeight, setListHeight] = createSignal(0);
+  const treeLines = () => rows().reduce((lines, row) => lines + 1 + detailLines(row, rows(), now()).length, 0);
+  const belowShown = () => rows().length > 0 && listHeight() - treeLines() >= BELOW_ROWS;
+  const headerGlyph = () => glyphShown() && !artShown() && !belowShown();
+  const mascot = createMemo(() => mascotState(rows(), {
+    reported: flashes.reported(),
+    spawned: spawned()
+  }));
+  motion.animates(() => (glyphShown() || artShown() || belowShown()) && mascot() !== "gone", MASCOT_EVERY);
+  const mascotFrame = () => motion.enabled ? Math.floor(motion.frame() / MASCOT_EVERY) : undefined;
+  const header = createMemo(() => cells(glyph(mascot(), mascotFrame())));
+  const art2 = createMemo(() => art(mascot(), mascotFrame()));
+  const tokens = digbyColours(theme);
+  const drawn = (line) => (() => {
+    var _el$4 = _$createElement("text");
+    _$setProp(_el$4, "wrapMode", "none");
+    _$setProp(_el$4, "flexShrink", 0);
+    _$insert(_el$4, _$createComponent(Index, {
+      get each() {
+        return line();
+      },
+      children: (one) => (() => {
+        var _el$5 = _$createElement("span");
+        _$insert(_el$5, () => one().char);
+        _$effect((_$p) => _$setProp(_el$5, "style", {
+          fg: one().fg && tokens[one().fg],
+          bg: one().bg && tokens[one().bg]
+        }, _$p));
+        return _el$5;
+      })()
+    }));
+    return _el$4;
+  })();
+  const rowBackground = (row, chosen) => {
+    const rest = restBackground(theme, {
+      selected: chosen && input.focused,
+      hovered: hovered() === row.sessionID
+    });
+    const strength = flashes.strength(row.sessionID);
+    return strength > 0 ? blend(theme.background.feedback.success.base, rest ?? theme.background.base, strength) : rest;
+  };
   const rowColor = (row) => {
     if (row.state === "stalled")
       return theme.text.feedback.error.base;
@@ -1342,84 +1809,153 @@ function TreePanel(props) {
       return theme.text.feedback.warning.base;
     return row.state === "gone" ? theme.text.muted : theme.text.base;
   };
+  const partColor = (row, kind) => {
+    const marked = rowMark(row, theme);
+    if (kind === "state" && row.state === "running")
+      return marked.color;
+    if (kind === "report" && row.report?.state === "reported")
+      return theme.text.feedback.success.base;
+    return theme.text.muted;
+  };
   return (() => {
-    var _el$4 = _$createElement("box"), _el$5 = _$createElement("box"), _el$6 = _$createElement("text"), _el$15 = _$createElement("scrollbox"), _el$16 = _$createElement("text");
-    _$insertNode(_el$4, _el$5);
-    _$insertNode(_el$4, _el$15);
-    _$insertNode(_el$4, _el$16);
-    _$setProp(_el$4, "flexDirection", "column");
-    _$setProp(_el$4, "flexGrow", 1);
-    _$setProp(_el$4, "paddingLeft", 1);
-    _$setProp(_el$4, "paddingRight", 1);
-    _$insertNode(_el$5, _el$6);
-    _$setProp(_el$5, "flexDirection", "row");
-    _$setProp(_el$5, "flexShrink", 0);
-    _$setProp(_el$5, "gap", 2);
-    _$insertNode(_el$6, _$createTextNode(`courier tree`));
-    _$setProp(_el$6, "wrapMode", "none");
-    _$insert(_el$5, _$createComponent(Show, {
+    var _el$6 = _$createElement("box"), _el$7 = _$createElement("box"), _el$8 = _$createElement("text"), _el$20 = _$createElement("scrollbox"), _el$22 = _$createElement("text");
+    _$insertNode(_el$6, _el$7);
+    _$insertNode(_el$6, _el$20);
+    _$insertNode(_el$6, _el$22);
+    _$setProp(_el$6, "flexDirection", "column");
+    _$setProp(_el$6, "flexGrow", 1);
+    _$setProp(_el$6, "paddingLeft", 1);
+    _$setProp(_el$6, "paddingRight", 1);
+    _$setProp(_el$6, "onSizeChange", function() {
+      setSize({
+        width: this.width,
+        height: this.height
+      });
+    });
+    _$setProp(_el$6, "onMouseDrag", () => pressed = undefined);
+    _$insertNode(_el$7, _el$8);
+    _$setProp(_el$7, "flexDirection", "row");
+    _$setProp(_el$7, "flexShrink", 0);
+    _$setProp(_el$7, "gap", 2);
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return headerGlyph();
+      },
+      get children() {
+        return drawn(() => header()[0]);
+      }
+    }), _el$8);
+    _$insertNode(_el$8, _$createTextNode(`courier tree`));
+    _$setProp(_el$8, "wrapMode", "none");
+    _$insert(_el$7, _$createComponent(Show, {
       get when() {
         return root().started;
       },
       get children() {
-        var _el$8 = _$createElement("text");
-        _$setProp(_el$8, "wrapMode", "none");
-        _$insert(_el$8, () => bar(root()));
-        _$effect((_$p) => _$setProp(_el$8, "fg", theme.text.muted, _$p));
-        return _el$8;
+        var _el$0 = _$createElement("text");
+        _$setProp(_el$0, "wrapMode", "none");
+        _$insert(_el$0, () => bar(root(), 10, filled()));
+        _$effect((_$p) => _$setProp(_el$0, "fg", tokens.a, _$p));
+        return _el$0;
       }
     }), null);
-    _$insert(_el$5, _$createComponent(Show, {
+    _$insert(_el$7, _$createComponent(Show, {
       get when() {
         return latest()?.tree?.truncated;
       },
       get children() {
-        var _el$9 = _$createElement("text"), _el$0 = _$createTextNode(` older left out`);
-        _$insertNode(_el$9, _el$0);
-        _$setProp(_el$9, "wrapMode", "none");
-        _$insert(_el$9, () => latest()?.tree?.truncated, _el$0);
-        _$effect((_$p) => _$setProp(_el$9, "fg", theme.text.feedback.warning.base, _$p));
-        return _el$9;
+        var _el$1 = _$createElement("text"), _el$10 = _$createTextNode(` older left out`);
+        _$insertNode(_el$1, _el$10);
+        _$setProp(_el$1, "wrapMode", "none");
+        _$insert(_el$1, () => latest()?.tree?.truncated, _el$10);
+        _$effect((_$p) => _$setProp(_el$1, "fg", theme.text.feedback.warning.base, _$p));
+        return _el$1;
       }
     }), null);
-    _$insert(_el$4, _$createComponent(Show, {
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return glyphShown();
+      },
+      get children() {
+        var _el$11 = _$createElement("box"), _el$12 = _$createElement("text");
+        _$insertNode(_el$11, _el$12);
+        _$setProp(_el$11, "flexDirection", "row");
+        _$setProp(_el$11, "flexShrink", 0);
+        _$setProp(_el$11, "gap", 2);
+        _$insert(_el$11, _$createComponent(Show, {
+          get when() {
+            return headerGlyph();
+          },
+          get children() {
+            return drawn(() => header()[1]);
+          }
+        }), _el$12);
+        _$setProp(_el$12, "wrapMode", "none");
+        _$insert(_el$12, () => countsLine(rows()));
+        _$effect((_$p) => _$setProp(_el$12, "fg", theme.text.muted, _$p));
+        return _el$11;
+      }
+    }), _el$20);
+    _$insert(_el$6, _$createComponent(Show, {
       get when() {
         return latest()?.error;
       },
       get children() {
-        var _el$1 = _$createElement("text"), _el$10 = _$createTextNode(`courier RPC failed: `);
-        _$insertNode(_el$1, _el$10);
-        _$insert(_el$1, () => latest()?.error, null);
-        _$effect((_$p) => _$setProp(_el$1, "fg", theme.text.feedback.error.base, _$p));
-        return _el$1;
+        var _el$13 = _$createElement("text"), _el$14 = _$createTextNode(`courier RPC failed: `);
+        _$insertNode(_el$13, _el$14);
+        _$insert(_el$13, () => latest()?.error, null);
+        _$effect((_$p) => _$setProp(_el$13, "fg", theme.text.feedback.error.base, _$p));
+        return _el$13;
       }
-    }), _el$15);
-    _$insert(_el$4, _$createComponent(Show, {
+    }), _el$20);
+    _$insert(_el$6, _$createComponent(Show, {
       get when() {
         return latest()?.tree?.stalled;
       },
       get children() {
-        var _el$11 = _$createElement("text"), _el$12 = _$createTextNode(`This session is stalled: `);
-        _$insertNode(_el$11, _el$12);
-        _$insert(_el$11, () => stalledLine(latest().tree.stalled, now()), null);
-        _$effect((_$p) => _$setProp(_el$11, "fg", theme.text.feedback.error.base, _$p));
-        return _el$11;
+        var _el$15 = _$createElement("text"), _el$16 = _$createTextNode(`This session is stalled: `);
+        _$insertNode(_el$15, _el$16);
+        _$insert(_el$15, () => stalledLine(latest().tree.stalled, now()), null);
+        _$effect((_$p) => _$setProp(_el$15, "fg", theme.text.feedback.error.base, _$p));
+        return _el$15;
       }
-    }), _el$15);
-    _$insert(_el$4, _$createComponent(Show, {
+    }), _el$20);
+    _$insert(_el$6, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!latest()?.tree)() && !rows().length;
       },
       get children() {
-        var _el$13 = _$createElement("text");
-        _$insertNode(_el$13, _$createTextNode(`No session started with courier_spawn under this one.`));
-        _$effect((_$p) => _$setProp(_el$13, "fg", theme.text.muted, _$p));
-        return _el$13;
+        return [(() => {
+          var _el$17 = _$createElement("text");
+          _$insertNode(_el$17, _$createTextNode(`No session started with courier_spawn under this one.`));
+          _$effect((_$p) => _$setProp(_el$17, "fg", theme.text.muted, _$p));
+          return _el$17;
+        })(), _$createComponent(Show, {
+          get when() {
+            return artShown();
+          },
+          get children() {
+            var _el$19 = _$createElement("box");
+            _$setProp(_el$19, "flexDirection", "column");
+            _$setProp(_el$19, "flexShrink", 0);
+            _$setProp(_el$19, "paddingTop", 1);
+            _$insert(_el$19, _$createComponent(Index, {
+              get each() {
+                return art2();
+              },
+              children: (line) => drawn(line)
+            }));
+            return _el$19;
+          }
+        })];
       }
-    }), _el$15);
-    _$use((value) => scroll = value, _el$15);
-    _$setProp(_el$15, "flexGrow", 1);
-    _$insert(_el$15, _$createComponent(For, {
+    }), _el$20);
+    _$use((value) => scroll = value, _el$20);
+    _$setProp(_el$20, "flexGrow", 1);
+    _$setProp(_el$20, "onSizeChange", function() {
+      setListHeight(this.height);
+    });
+    _$insert(_el$20, _$createComponent(For, {
       get each() {
         return rows();
       },
@@ -1427,69 +1963,155 @@ function TreePanel(props) {
         const chosen = () => index() === selected();
         const indent = "  ".repeat(row.depth - 1);
         return (() => {
-          var _el$18 = _$createElement("box"), _el$19 = _$createElement("box"), _el$20 = _$createElement("text"), _el$21 = _$createElement("text"), _el$22 = _$createTextNode(`  `);
-          _$insertNode(_el$18, _el$19);
-          _$setProp(_el$18, "flexDirection", "column");
-          _$setProp(_el$18, "flexShrink", 0);
-          _$insertNode(_el$19, _el$20);
-          _$insertNode(_el$19, _el$21);
-          _$setProp(_el$19, "flexDirection", "row");
-          _$setProp(_el$19, "flexShrink", 0);
-          _$setProp(_el$20, "wrapMode", "none");
-          _$setProp(_el$20, "flexShrink", 1);
-          _$setProp(_el$20, "minWidth", 0);
-          _$insert(_el$20, indent, null);
-          _$insert(_el$20, () => chosen() ? "\u25B8 " : "  ", null);
-          _$insert(_el$20, () => oneLine(row.title), null);
-          _$insert(_el$20, () => row.sessionID === input.sessionID ? " (on screen)" : "", null);
-          _$insertNode(_el$21, _el$22);
-          _$setProp(_el$21, "wrapMode", "none");
-          _$setProp(_el$21, "flexShrink", 0);
-          _$insert(_el$21, () => statusLine(row), null);
-          _$insert(_el$18, _$createComponent(For, {
+          var _el$24 = _$createElement("box"), _el$25 = _$createElement("box"), _el$26 = _$createElement("text"), _el$27 = _$createElement("text"), _el$28 = _$createTextNode(` `), _el$29 = _$createElement("text"), _el$30 = _$createElement("text");
+          _$insertNode(_el$24, _el$25);
+          _$setProp(_el$24, "flexDirection", "column");
+          _$setProp(_el$24, "flexShrink", 0);
+          _$setProp(_el$24, "onMouseOver", () => setHovered(row.sessionID));
+          _$setProp(_el$24, "onMouseOut", () => setHovered((id) => id === row.sessionID ? undefined : id));
+          _$setProp(_el$24, "onMouseDown", (event) => pressed = event.button === MouseButton.LEFT ? row.sessionID : undefined);
+          _$setProp(_el$24, "onMouseUp", (event) => {
+            if (event.button !== MouseButton.LEFT)
+              return;
+            event.stopPropagation();
+            const down = pressed;
+            pressed = undefined;
+            if (down === row.sessionID)
+              click(row);
+          });
+          _$insertNode(_el$25, _el$26);
+          _$insertNode(_el$25, _el$27);
+          _$insertNode(_el$25, _el$29);
+          _$insertNode(_el$25, _el$30);
+          _$setProp(_el$25, "flexDirection", "row");
+          _$setProp(_el$25, "flexShrink", 0);
+          _$setProp(_el$26, "wrapMode", "none");
+          _$setProp(_el$26, "flexShrink", 0);
+          _$insert(_el$26, indent, null);
+          _$insert(_el$26, () => chosen() ? "\u25B8 " : "  ", null);
+          _$insertNode(_el$27, _el$28);
+          _$setProp(_el$27, "wrapMode", "none");
+          _$setProp(_el$27, "flexShrink", 0);
+          _$insert(_el$27, () => rowMark(row, theme, frame()).mark, _el$28);
+          _$setProp(_el$29, "wrapMode", "none");
+          _$setProp(_el$29, "flexShrink", 1);
+          _$setProp(_el$29, "minWidth", 0);
+          _$insert(_el$29, () => oneLine(row.title), null);
+          _$insert(_el$29, () => row.sessionID === input.sessionID ? " (on screen)" : "", null);
+          _$insertNode(_el$30, _$createTextNode(`  `));
+          _$setProp(_el$30, "wrapMode", "none");
+          _$setProp(_el$30, "flexShrink", 0);
+          _$insert(_el$25, _$createComponent(For, {
+            get each() {
+              return statusParts(row);
+            },
+            children: (part, at2) => [_$createComponent(Show, {
+              get when() {
+                return at2();
+              },
+              get children() {
+                var _el$32 = _$createElement("text");
+                _$insertNode(_el$32, _$createTextNode(` \xB7 `));
+                _$setProp(_el$32, "wrapMode", "none");
+                _$setProp(_el$32, "flexShrink", 0);
+                _$effect((_$p) => _$setProp(_el$32, "fg", theme.text.muted, _$p));
+                return _el$32;
+              }
+            }), (() => {
+              var _el$34 = _$createElement("text");
+              _$setProp(_el$34, "wrapMode", "none");
+              _$setProp(_el$34, "flexShrink", 0);
+              _$insert(_el$34, () => part.text);
+              _$effect((_$p) => _$setProp(_el$34, "fg", partColor(row, part.kind), _$p));
+              return _el$34;
+            })()]
+          }), null);
+          _$insert(_el$24, _$createComponent(For, {
             get each() {
               return detailLines(row, rows(), now());
             },
             children: (line) => (() => {
-              var _el$23 = _$createElement("text"), _el$24 = _$createTextNode(`    `);
-              _$insertNode(_el$23, _el$24);
-              _$setProp(_el$23, "wrapMode", "none");
-              _$insert(_el$23, indent, _el$24);
-              _$insert(_el$23, line, null);
-              _$effect((_$p) => _$setProp(_el$23, "fg", theme.text.muted, _$p));
-              return _el$23;
+              var _el$35 = _$createElement("text"), _el$36 = _$createTextNode(`    `);
+              _$insertNode(_el$35, _el$36);
+              _$setProp(_el$35, "wrapMode", "none");
+              _$insert(_el$35, indent, _el$36);
+              _$insert(_el$35, _$createComponent(Show, {
+                get when() {
+                  return _$memo(() => row.context !== undefined)() && Math.round(row.context * 100) > CONTEXT_WARN * 100;
+                },
+                fallback: line,
+                get children() {
+                  return _$createComponent(For, {
+                    get each() {
+                      return line.split(" \xB7 ");
+                    },
+                    children: (part, at2) => [_$memo(() => at2() ? " \xB7 " : ""), _$memo(() => _$memo(() => part === `ctx ${Math.round(row.context * 100)}%`)() ? (() => {
+                      var _el$37 = _$createElement("span");
+                      _$insert(_el$37, part);
+                      _$effect((_$p) => _$setProp(_el$37, "style", {
+                        fg: theme.text.feedback.warning.base
+                      }, _$p));
+                      return _el$37;
+                    })() : part)]
+                  });
+                }
+              }), null);
+              _$effect((_$p) => _$setProp(_el$35, "fg", theme.text.muted, _$p));
+              return _el$35;
             })()
           }), null);
           _$effect((_p$) => {
-            var _v$3 = `courier-row-${index()}`, _v$4 = chosen() && input.focused ? theme.background.raised.high : undefined, _v$5 = rowColor(row), _v$6 = theme.text.muted;
-            _v$3 !== _p$.e && (_p$.e = _$setProp(_el$18, "id", _v$3, _p$.e));
-            _v$4 !== _p$.t && (_p$.t = _$setProp(_el$18, "backgroundColor", _v$4, _p$.t));
-            _v$5 !== _p$.a && (_p$.a = _$setProp(_el$20, "fg", _v$5, _p$.a));
-            _v$6 !== _p$.o && (_p$.o = _$setProp(_el$21, "fg", _v$6, _p$.o));
+            var _v$3 = `courier-row-${index()}`, _v$4 = rowBackground(row, chosen()), _v$5 = rowColor(row), _v$6 = rowMark(row, theme).color, _v$7 = rowColor(row), _v$8 = theme.text.muted;
+            _v$3 !== _p$.e && (_p$.e = _$setProp(_el$24, "id", _v$3, _p$.e));
+            _v$4 !== _p$.t && (_p$.t = _$setProp(_el$24, "backgroundColor", _v$4, _p$.t));
+            _v$5 !== _p$.a && (_p$.a = _$setProp(_el$26, "fg", _v$5, _p$.a));
+            _v$6 !== _p$.o && (_p$.o = _$setProp(_el$27, "fg", _v$6, _p$.o));
+            _v$7 !== _p$.i && (_p$.i = _$setProp(_el$29, "fg", _v$7, _p$.i));
+            _v$8 !== _p$.n && (_p$.n = _$setProp(_el$30, "fg", _v$8, _p$.n));
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined,
-            o: undefined
+            o: undefined,
+            i: undefined,
+            n: undefined
           });
-          return _el$18;
+          return _el$24;
         })();
       }
-    }));
-    _$insertNode(_el$16, _$createTextNode(`\u2191\u2193 select \xB7 enter open \xB7 s stop \xB7 x forget \xB7 r refresh \xB7 f fullscreen \xB7 q close`));
-    _$setProp(_el$16, "wrapMode", "none");
-    _$setProp(_el$16, "flexShrink", 0);
+    }), null);
+    _$insert(_el$20, _$createComponent(Show, {
+      get when() {
+        return belowShown();
+      },
+      get children() {
+        var _el$21 = _$createElement("box");
+        _$setProp(_el$21, "flexDirection", "column");
+        _$setProp(_el$21, "flexShrink", 0);
+        _$setProp(_el$21, "paddingTop", 1);
+        _$insert(_el$21, _$createComponent(Index, {
+          get each() {
+            return art2();
+          },
+          children: (line) => drawn(line)
+        }));
+        return _el$21;
+      }
+    }), null);
+    _$insertNode(_el$22, _$createTextNode(`\u2191\u2193 select \xB7 enter open \xB7 s stop \xB7 x forget \xB7 r refresh \xB7 f fullscreen \xB7 q close`));
+    _$setProp(_el$22, "wrapMode", "none");
+    _$setProp(_el$22, "flexShrink", 0);
     _$effect((_p$) => {
-      var _v$ = theme.text.base, _v$2 = theme.text.muted;
-      _v$ !== _p$.e && (_p$.e = _$setProp(_el$6, "fg", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$16, "fg", _v$2, _p$.t));
+      var _v$ = tokens.a, _v$2 = theme.text.muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp(_el$8, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp(_el$22, "fg", _v$2, _p$.t));
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$4;
+    return _el$6;
   })();
 }
 var USAGE = "/courier tree opens the session tree; /courier stop [session] stops a session and those under it";
@@ -1498,6 +2120,7 @@ function addTreePanel(ctx) {
     courier,
     location
   } = courierOf(ctx);
+  const animations = animationsOn(ctx.options);
   const [changed, stopListening] = changes(ctx, PANEL_CHANGES, PANEL_SETTLE_MS);
   let following;
   let attempt = 0;
@@ -1531,7 +2154,8 @@ function addTreePanel(ctx) {
           },
           courier,
           location,
-          changed
+          changed,
+          animations
         });
       }
     })
@@ -1557,7 +2181,7 @@ function addTreePanel(ctx) {
     return;
   });
   const follow = (from, sessionID) => {
-    const token = ++attempt;
+    const token2 = ++attempt;
     const under = (tree) => tree?.rows.some((row) => row.sessionID === sessionID) === true;
     Object.assign(from, {
       at: undefined,
@@ -1568,7 +2192,7 @@ function addTreePanel(ctx) {
     (async () => {
       const inside = await treeOf(from.root);
       const own = under(inside) ? undefined : await treeOf(sessionID);
-      if (token !== attempt || following !== from)
+      if (token2 !== attempt || following !== from)
         return;
       if (under(inside))
         show(from, sessionID, from.root, inside);