redkite 0.1.8 → 0.1.10

package/src/cli/config.ts

@@ -16,8 +16,16 @@ const EXTENSIONS = ["ts", "mts", "js", "mjs"] as const;
 
 const CANDIDATES = EXTENSIONS.map((extension) => `redkite.config.${extension}`);
 
-// redkite.<environment>.config.<extension>, beside the deployment it belongs to
-const PER_ENVIRONMENT = /^redkite\.([a-z0-9-]+)\.config\.(ts|mts|js|mjs)$/;
+// Anything beside the deployment that starts with redkite and is a module it
+// could read. The .config in the middle is what people write and what the docs
+// say, and it is optional here because a file that was meant to be an
+// environment and is named slightly differently should be read and refused
+// rather than passed over as though it were not there
+const PER_ENVIRONMENT = /^redkite[.\-_](.+?)(?:\.config)?\.(?:ts|mts|cts|js|mjs|cjs)$/;
+
+// What an environment may be called. It becomes part of an image tag, and an
+// image tag cannot hold a capital, so this is docker's limit rather than ours
+const ENVIRONMENT_NAME = /^[a-z0-9][a-z0-9._-]*$/;
 
 // Node strips types itself from 22.18 on, which is what lets redkite ship with
 // no dependencies. These are the ways that can fail on a config it cannot read.
@@ -34,26 +42,46 @@ export async function loadConfig(explicit?: string): Promise<Deployment> {
   const path = explicit ? resolve(explicit) : discover(process.cwd());
   const config = defaultOf(await load(path), path) as Deployment;
 
+  const manifest = manifestOf(explicit ? dirname(path) : process.cwd());
   const beside = await loadEnvironments(dirname(path));
-  const named = await loadNamed(manifestOf(explicit ? dirname(path) : process.cwd()));
 
-  for (const name of Object.keys(named)) {
+  // The directory package.json names is read whether or not the deployment
+  // turned out to be in it, so environments may sit together under one roof
+  // with the deployment at the root above them
+  const declared = directoryOf(manifest);
+  const under = declared && declared !== dirname(path) ? await loadEnvironments(declared) : {};
+
+  const named = await loadNamed(manifest);
+  const found = { ...beside, ...under };
+
+  for (const name of Object.keys(under)) {
     if (!beside[name]) continue;
 
+    throw new Error(
+      `${name} sits both beside the deployment and in ${declared}, ` +
+        "and an environment comes from one place or the other",
+    );
+  }
+
+  for (const name of Object.keys(named)) {
+    if (!found[name]) continue;
+
     throw new Error(
       `${name} is named by package.json and also sits beside the deployment. ` +
         "An environment comes from one place or the other",
     );
   }
 
-  return { ...rooted(config, dirname(path)), environments: { ...beside, ...named } };
+  return { ...rooted(config, dirname(path)), environments: { ...found, ...named } };
 }
 
 // A source path belongs to the file that named it, not to wherever the command
 // was run. Resolving it here is what lets a deploy from a workspace and one
 // from the root build the same tree
 function rooted(config: Deployment, directory: string): Deployment {
-  if (!config.apps.some((app) => app.path)) return config;
+  // A file that never called defineDeployment can export anything, and the
+  // message worth getting is the one topologyFor gives rather than a TypeError
+  if (!(config.apps ?? []).some((app) => app.path)) return config;
 
   return {
     ...config,
@@ -91,23 +119,43 @@ async function loadNamed(manifest: Manifest | undefined) {
 // likely to be run from a workspace inside it as from there
 export function discover(from: string): string {
   let directory = from;
+  // Where something addressed to redkite was seen but no deployment. Naming it
+  // is the difference between "there is nothing here" and "the file you have
+  // is an environment, and an environment is not a deployment"
+  const nearby: string[] = [];
 
   for (;;) {
     const declared = directoryFrom(directory);
 
-    // Saying where the files are and not putting them there is a mistake worth
-    // stopping for, rather than a reason to keep looking further up
-    if (declared) return found(declared) ?? missing(declared, directory);
+    // Naming a directory that is not there is a mistake worth stopping for.
+    // One that is there and holds no deployment is not: it may hold only the
+    // environments, and the deployment may sit at the root above them
+    if (declared && !existsSync(declared)) missing(declared, directory);
+
+    const there = declared && found(declared);
+    if (there) return there;
 
     const here = found(directory);
     if (here) return here;
 
+    for (const place of declared ? [declared, directory] : [directory]) {
+      for (const entry of environmentsAt(place)) nearby.push(join(place, entry));
+    }
+
     const parent = dirname(directory);
     if (parent === directory) break;
 
     directory = parent;
   }
 
+  if (nearby.length > 0) {
+    throw new Error(
+      `No deployment found, but ${nearby.join(" and ")} reads as an environment. ` +
+        "An environment says which branch and which subnet; the deployment says " +
+        "the project, the apps and the services, and is redkite.config.ts",
+    );
+  }
+
   throw new Error(
     `No redkite.config.ts found in ${from} or any directory above it. A deployment ` +
       'is one file at the root of the project, or wherever package.json\'s ' +
@@ -115,15 +163,35 @@ export function discover(from: string): string {
   );
 }
 
+// The names beside a deployment that would be read as environments, for a
+// message that can say what was there instead of what was not
+function environmentsAt(directory: string) {
+  if (!existsSync(directory)) return [];
+
+  return readdirSync(directory)
+    .filter((entry) => !CANDIDATES.includes(entry))
+    .filter((entry) => PER_ENVIRONMENT.test(entry))
+    .sort();
+}
+
 // Every environment that lives in a file of its own, keyed by the name in it
 export async function loadEnvironments(directory: string) {
   const environments: Record<string, Environment> = {};
   const seen: Record<string, string> = {};
 
   for (const entry of readdirSync(directory).sort()) {
+    if (CANDIDATES.includes(entry)) continue;
+
     const name = PER_ENVIRONMENT.exec(entry)?.[1];
     if (!name) continue;
 
+    if (!ENVIRONMENT_NAME.test(name)) {
+      throw new Error(
+        `${join(directory, entry)} reads as the environment ${name}, which cannot ` +
+          "name one: it becomes part of an image tag, and a tag is lower case",
+      );
+    }
+
     const first = seen[name];
     if (first) {
       throw new Error(`${name} is defined by both ${first} and ${entry}`);
@@ -148,8 +216,7 @@ function found(directory: string) {
 
 function missing(declared: string, from: string): never {
   throw new Error(
-    `${join(from, "package.json")} points redkite at ${declared}, which holds no ` +
-      `redkite.config.${EXTENSIONS.join(", redkite.config.")}`,
+    `${join(from, "package.json")} points redkite at ${declared}, which is not there`,
   );
 }
 
@@ -176,6 +243,14 @@ function manifestAt(directory: string): Manifest | undefined {
   }
 }
 
+// Where the project starts, which is where a .env belongs. The nearest
+// package.json above wherever this was run, and the directory itself when
+// there is none
+export function projectRoot(explicit?: string) {
+  const from = explicit ? dirname(resolve(explicit)) : process.cwd();
+  return manifestOf(from)?.root ?? from;
+}
+
 // The nearest one above wherever this was run, which is the same walk the
 // config itself is found by
 function manifestOf(from: string) {
@@ -192,11 +267,17 @@ function manifestOf(from: string) {
   }
 }
 
-// package.json says where the deployment files live, for a repository that
-// would rather not keep them at its root
+// package.json says where redkite's files live, for a repository that would
+// rather not keep them at its root
 function directoryFrom(directory: string) {
-  const declared = manifestAt(directory)?.redkite.directory;
-  return typeof declared === "string" ? resolve(directory, declared) : undefined;
+  return directoryOf(manifestAt(directory));
+}
+
+function directoryOf(manifest: Manifest | undefined) {
+  if (!manifest) return undefined;
+
+  const declared = manifest.redkite.directory;
+  return typeof declared === "string" ? resolve(manifest.root, declared) : undefined;
 }
 
 function defaultOf(module: unknown, path: string) {

package/src/cli/dotenv.ts

@@ -0,0 +1,35 @@
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+import { parseEnv } from "../environment.js";
+
+// The credentials a deploy needs are the one thing that cannot live in the
+// config, so they live beside it. Read here rather than by a plugin, because
+// which file answers depends on the environment being deployed and a plugin
+// is handed neither the directory nor the name.
+
+// Most specific first. A deploy file is for what only a deploy needs, and it
+// wins over the one the application itself reads
+const NAMES = (environment: string) => [
+  `.env.${environment}.deploy`,
+  `.env.${environment}`,
+  ".env",
+];
+
+// Only what is missing. Anything already in the environment was set by the
+// person running this or by the job, and neither should be talked over
+export function loadDotenv(directory: string, environment: string) {
+  const read: string[] = [];
+
+  for (const name of NAMES(environment)) {
+    const path = join(directory, name);
+    if (!existsSync(path)) continue;
+
+    read.push(name);
+    for (const [key, value] of Object.entries(parseEnv(readFileSync(path, "utf8")))) {
+      process.env[key] ??= value;
+    }
+  }
+
+  return read;
+}

package/src/cli/index.ts

@@ -4,7 +4,7 @@ import { Docker } from "../docker.js";
 import type { Host } from "../host.js";
 import { localHost } from "../localHost.js";
 import { silent, type Log } from "../log.js";
-import { renderNginx } from "../nginx.js";
+import { renderProxy } from "../services/proxy.js";
 import { addressOf, RUNS, SLOTS, type Run } from "../pipeline.js";
 import { listRefs, type SecretStores } from "../secrets/refs.js";
 import { pluginSteps, storeFor } from "../plugin.js";
@@ -15,7 +15,8 @@ import { topologyFor, type Topology } from "../topology.js";
 import type { Deployment, DeployHost } from "../types.js";
 
 import { needsAgent, requireAgent } from "./agent.js";
-import { loadConfig } from "./config.js";
+import { loadConfig, projectRoot } from "./config.js";
+import { loadDotenv } from "./dotenv.js";
 import { createLog, describeFailure } from "./log.js";
 
 // One command that reads the config and does everything under it: the agent,
@@ -146,7 +147,11 @@ async function dispatch(argv: string[]) {
 
   const configPath = flag(argv, "--config");
 
-  if (command === "plan") return await plan(environment, configPath);
+  // Before anything reads a credential out of the environment, and only where
+  // the environment does not already say. What the job set wins over a file
+  const read = loadDotenv(projectRoot(configPath), environment);
+
+  if (command === "plan") return await plan(environment, configPath, read);
   if (command === "rollback" || command === "down") {
     return await recover(command, environment, configPath);
   }
@@ -205,13 +210,14 @@ function asLog(say: (message: string) => void): Log {
   return Object.assign(say, { warn: say, fail: say, done: say, step: () => silent.step("") });
 }
 
-async function plan(environment: string, configPath?: string) {
+async function plan(environment: string, configPath?: string, read: string[] = []) {
   const config = await loadConfig(configPath);
   const topology = topologyFor(config, environment);
 
   const say = (message = "") => process.stdout.write(`${message}\n`);
 
   say(`# ${config.project} · ${environment}\n`);
+  if (read.length > 0) say(`read      ${read.join(", ")}`);
   say(`network   ${topology.network}  ${topology.cidr}`);
   say(`branch    ${topology.branch}`);
   // A verify environment publishes nothing, because nothing in one serves
@@ -260,7 +266,7 @@ async function plan(environment: string, configPath?: string) {
   if (!serves) return;
 
   say(`\n# rendered nginx ${"-".repeat(44)}\n`);
-  say(renderNginx(topology, config.maxBodySize));
+  say(renderProxy(topology, config.proxy));
 }
 
 // What is running against what this file says should be. Services outlive a

package/src/cli/screen.ts

@@ -14,6 +14,9 @@ export type Step = {
   note?: string;
   detail?: string;
   lines: string[];
+  // When it last said anything. A step that is working and one that is wedged
+  // look identical without it, which is the whole reason for the spinner
+  spoke?: number;
   expanded: boolean;
   // Opened by hand, so finishing does not shut it under the reader
   held: boolean;
@@ -21,14 +24,24 @@ export type Step = {
   offset: number;
 };
 
+// Said outside a step, carrying the moment it was said so its row stops
+// ticking the way a finished step's does
+export type Message = { text: string; at: number };
+
 export type Model = {
   steps: Step[];
-  messages: string[];
+  messages: Message[];
   cursor: number;
   // The cursor follows the newest step until the reader moves it
   following: boolean;
   // Nothing opens on its own, including the step that is running
   minimal: boolean;
+  // Long lines wrap rather than being cut. Off by default: one row per line is
+  // what keeps a frame countable, and this is for reading an error
+  wrapped: boolean;
+  // Every point the run will walk, known before it starts. What has not begun
+  // is drawn under what has, so the end is visible from the start
+  planned: string[];
   rows: number;
   columns: number;
   started: number;
@@ -43,6 +56,7 @@ export type Key =
   | "toggle"
   | "expand"
   | "collapse"
+  | "wrap"
   | "quit";
 
 export function emptyModel(rows: number, columns: number, now: number): Model {
@@ -52,6 +66,8 @@ export function emptyModel(rows: number, columns: number, now: number): Model {
     cursor: 0,
     following: true,
     minimal: false,
+    wrapped: false,
+    planned: [],
     rows,
     columns,
     started: now,
@@ -91,6 +107,7 @@ export function keyOf(data: string): Key | undefined {
   if (data === "\r" || data === "\n") return "toggle";
   if (data === "+" || data === "=") return "expand";
   if (data === "-" || data === "_") return "collapse";
+  if (data === "w") return "wrap";
   if (data === "q" || data === INTERRUPT) return "quit";
 
   return undefined;
@@ -106,6 +123,7 @@ export function apply(model: Model, key: Key): Model {
   }
 
   if (key === "first") return { ...model, cursor: 0, following: false };
+  if (key === "wrap") return { ...model, wrapped: !model.wrapped };
 
   if (key === "up") {
     if (step?.expanded && step.offset < Math.max(0, step.lines.length - 1)) {
@@ -223,50 +241,132 @@ const FLOOR = 3;
 // the view closes, and a list that only grows crowds every log off the screen
 const MESSAGES = 6;
 
+// Every key, inside eighty columns. One too wide is a row that wraps, and a
+// wrapped footer costs the frame a line it counted on
 export const HELP =
-  "\u2191\u2193 move \u00b7 enter open \u00b7 shift+\u2191 latest \u00b7 + open \u00b7 - collapse all \u00b7 q quit";
+  "\u2191\u2193 move \u00b7 enter open \u00b7 shift+\u2191 latest \u00b7 +/- all \u00b7 w wrap \u00b7 q quit";
+
+// Turns on the frame the clock is in, so the view is a pure function of now
+const SPINNER = "\u280b\u2819\u2839\u2838\u283c\u2834\u2826\u2827\u2807\u280f";
+const SPIN_MS = 80;
+
+// How long a running step may say nothing before the frame says so. Short
+// enough to catch a wedge, long enough that an ordinary pause is not one
+const QUIET_MS = 8000;
 
 export function render(model: Model, colour = false): string[] {
   const body = Math.max(1, model.rows - FOOTER);
   const rows: string[] = [];
   const messages = model.messages.slice(-MESSAGES);
+  const budget = Math.max(1, body - messages.length);
+
+  // What the step being read keeps whatever else wants the room. A frame of
+  // titles with no output says nothing the last line of output would not, so
+  // the list is what gives way rather than the log
+  const focused = model.steps[model.cursor];
+  const floor = focused?.expanded ? Math.min(FLOOR, rowsOf(model, focused)) : 0;
+
+  // More than the terminal has room for, so the list itself scrolls and only
+  // the step under the cursor keeps a log
+  if (model.steps.length + floor > budget) {
+    const room = Math.max(1, budget - floor);
+    const start = Math.max(0, Math.min(model.cursor - room + 1, model.steps.length - room));
+
+    for (const entry of ordered(model, messages)) {
+      if (rows.length >= budget) break;
+
+      if (entry.kind === "message") {
+        rows.push(said(model, entry.message, colour));
+        continue;
+      }
 
-  // More titles than the terminal has lines, so nothing can be open and the
-  // list itself is what scrolls
-  if (model.steps.length + messages.length > body) {
-    const start = Math.max(0, Math.min(model.cursor, model.steps.length - body));
+      if (entry.index < start) continue;
 
-    for (const [index, step] of model.steps.entries()) {
-      if (index >= start && rows.length < body) {
-        rows.push(title(model, step, index, colour));
-      }
+      rows.push(title(model, entry.step, entry.index, colour));
+      if (entry.index === model.cursor) rows.push(...logs(model, entry.step, floor, colour));
     }
 
-    return finish(rows, body, colour);
+    return finish(model, rows, body, colour);
   }
 
-  const shown = share(model, body - model.steps.length - messages.length);
+  const shown = share(model, budget - model.steps.length);
 
-  for (const [index, step] of model.steps.entries()) {
-    rows.push(title(model, step, index, colour));
-    rows.push(...logs(model, step, shown.get(index) ?? 0, colour));
+  for (const entry of ordered(model, messages)) {
+    if (entry.kind === "message") {
+      rows.push(said(model, entry.message, colour));
+      continue;
+    }
+
+    rows.push(title(model, entry.step, entry.index, colour));
+    rows.push(...logs(model, entry.step, shown.get(entry.index) ?? 0, colour));
   }
 
-  for (const message of messages) {
-    rows.push(
-      clipped(
-        [
-          { text: gutter(model), colour: DIM },
-          { text: "   " },
-          { text: message, colour: WARN },
-        ],
-        Math.max(24, model.columns),
-        colour,
-      ),
-    );
+  for (const point of remaining(model)) {
+    if (rows.length >= budget) break;
+    rows.push(waiting(model, point, colour));
   }
 
-  return finish(rows, body, colour);
+  return finish(model, rows, body, colour);
+}
+
+// Every point the run will walk that has not started. Drawn under what has, so
+// how much is left is visible from the first frame rather than at the end
+function remaining(model: Model) {
+  const started = new Set(model.steps.map((step) => step.label));
+  return model.planned.filter((point) => !started.has(point));
+}
+
+function waiting(model: Model, point: string, colour: boolean) {
+  const head: Piece[] = [
+    { text: " ".repeat(gutter(model).length), colour: DIM },
+    { text: "   " },
+    { text: "\u00b7", colour: DIM },
+    { text: " " },
+    { text: point, colour: DIM },
+  ];
+
+  return fit(model, head, "", colour);
+}
+
+type Row =
+  | { kind: "step"; at: number; step: Step; index: number }
+  | { kind: "message"; at: number; message: Message };
+
+// Everything the run has said, in the order it said it. Messages used to be
+// printed after every step, which put one from the first ten seconds below a
+// build still running half an hour later
+function ordered(model: Model, messages: Message[]): Row[] {
+  const steps: Row[] = model.steps.map((step, index) => ({
+    kind: "step",
+    at: step.started,
+    step,
+    index,
+  }));
+
+  const said: Row[] = messages.map((message) => ({
+    kind: "message",
+    at: message.at,
+    message,
+  }));
+
+  // A step announced in the same millisecond as a message leads it: the
+  // message is usually about what the step then went and did. Everything else
+  // ties to nothing, and a stable sort leaves it where it was
+  const rank = (row: Row) => (row.kind === "step" ? 0 : 1);
+
+  return [...steps, ...said].sort((a, b) => a.at - b.at || rank(a) - rank(b));
+}
+
+function said(model: Model, message: Message, colour: boolean) {
+  return clipped(
+    [
+      { text: gutter(model, message.at), colour: DIM },
+      { text: "   " },
+      { text: message.text, colour: WARN },
+    ],
+    Math.max(24, model.columns),
+    colour,
+  );
 }
 
 // The focused step is the one being read, so it is served first and every other
@@ -287,19 +387,19 @@ function share(model: Model, budget: number) {
     // printed nothing reserves nothing, and served last the focused step used
     // to be left with whatever the others happened not to want
     const glances = others.reduce(
-      (total, item) => total + Math.min(GLANCE, item.step.lines.length),
+      (total, item) => total + Math.min(GLANCE, rowsOf(model, item.step)),
       0,
     );
 
     const reserve = Math.min(glances, Math.max(0, left - FLOOR));
-    const take = Math.min(left - reserve, focused.step.lines.length);
+    const take = Math.min(left - reserve, rowsOf(model, focused.step));
 
     shown.set(focused.index, take);
     left -= take;
   }
 
   for (const item of others) {
-    const take = Math.min(GLANCE, item.step.lines.length, Math.max(0, left));
+    const take = Math.min(GLANCE, rowsOf(model, item.step), Math.max(0, left));
 
     shown.set(item.index, take);
     left -= take;
@@ -308,6 +408,15 @@ function share(model: Model, budget: number) {
   return shown;
 }
 
+// How many rows a step's log would fill. One per line until they are wrapped,
+// and then as many as each line needs
+function rowsOf(model: Model, step: Step) {
+  if (!model.wrapped) return step.lines.length;
+
+  const room = Math.max(8, model.columns - RULE.length);
+  return step.lines.reduce((total, line) => total + wrapped(line, room).length, 0);
+}
+
 const RULE = "        \u2502 ";
 
 // The newest lines, less whatever the reader has scrolled back past. One line
@@ -317,10 +426,26 @@ function logs(model: Model, step: Step, take: number, colour: boolean) {
 
   const end = Math.max(1, step.lines.length - step.offset);
   const room = Math.max(8, model.columns - RULE.length);
+  const lines = step.lines.slice(Math.max(0, end - take), end);
+
+  // Wrapped, one line is several rows, so what is taken is counted in rows
+  // after the wrapping rather than in lines before it
+  const rows = lines.flatMap((line) =>
+    model.wrapped ? wrapped(line, room) : [clip(line, room)],
+  );
 
-  return step.lines
-    .slice(Math.max(0, end - take), end)
-    .map((line) => `${paint(RULE, DIM, colour)}${clip(line, room)}`);
+  return rows.slice(-take).map((row) => `${paint(RULE, DIM, colour)}${row}`);
+}
+
+// Cut on width alone. A build's output is not prose, and breaking a path or a
+// stack frame on a space would put half of it where nothing can find it
+function wrapped(line: string, room: number) {
+  if (line.length <= room) return [line];
+
+  const rows: string[] = [];
+  for (let at = 0; at < line.length; at += room) rows.push(line.slice(at, at + room));
+
+  return rows;
 }
 
 // The ellipsis is the whole point: a line that was cut has to say so
@@ -329,36 +454,60 @@ export function clip(text: string, room: number) {
   return `${text.slice(0, room - 1)}\u2026`;
 }
 
-function finish(rows: string[], body: number, colour: boolean) {
+// Padded above rather than below, so the newest row sits against the footer
+// and the frame fills upwards the way a terminal's own output does. The footer
+// is cut like any other row: one too wide wraps, and a wrapped row costs two
+function finish(model: Model, rows: string[], body: number, colour: boolean) {
   const filled = rows.slice(0, body);
-  while (filled.length < body) filled.push("");
+  const blanks = Array.from({ length: Math.max(0, body - filled.length) }, () => "");
+  const help = clip(HELP, Math.max(24, model.columns));
 
-  return [...filled, "", paint(HELP, DIM, colour)];
+  return [...blanks, ...filled, "", paint(help, DIM, colour)];
 }
 
 function title(model: Model, step: Step, index: number, colour: boolean) {
   const selected = index === model.cursor;
-  const caret = selected ? "\u276f" : " ";
+  const running = step.state === "running";
   const arrow = step.expanded ? "\u25be" : "\u25b8";
   const glyph = step.state === "done" ? "\u2714" : step.state === "failed" ? "\u2718" : arrow;
 
   const said = step.note ? `: ${step.note}` : step.detail ? `  ${step.detail}` : "";
 
   const head: Piece[] = [
-    { text: gutter(model), colour: DIM },
+    // The run clock as this row stood: still moving while the step is, and
+    // stopped at the moment it finished
+    { text: gutter(model, step.ended), colour: DIM },
     { text: " " },
-    { text: caret, colour: selected ? CURSOR : undefined },
+    // Turning while the step is working, blank when it is not. A step that has
+    // stopped saying anything still turns, which is what quiet then says
+    { text: running ? spinner(model.now) : " ", colour: RUNNING },
     { text: " " },
     { text: glyph, colour: stateColour(step) },
     { text: " " },
     { text: step.label, colour: labelColour(step, selected) },
     { text: said, colour: DIM },
+    { text: quiet(model, step), colour: WARN },
   ];
 
   // Frozen at what it cost the moment it finished, still counting until then
   return fit(model, head, elapsed(step.ended ?? model.now, step.started), colour);
 }
 
+function spinner(now: number) {
+  return SPINNER[Math.floor(now / SPIN_MS) % SPINNER.length] ?? " ";
+}
+
+// How long a running step has said nothing. The difference between a build
+// that is working and one that is wedged, which nothing else on the row shows
+function quiet(model: Model, step: Step) {
+  if (step.state !== "running") return "";
+
+  const since = model.now - (step.spoke ?? step.started);
+  if (since < QUIET_MS) return "";
+
+  return `  quiet ${elapsed(model.now, step.spoke ?? step.started)}`;
+}
+
 function stateColour(step: Step) {
   if (step.state === "done") return DONE;
   if (step.state === "failed") return FAILED;
@@ -375,9 +524,10 @@ function labelColour(step: Step, selected: boolean) {
   return undefined;
 }
 
-// The stamp is the whole run, and it keeps counting for every row a step adds
-function gutter(model: Model) {
-  return `[${elapsed(model.now, model.started, true)}]`;
+// How far into the run this row belongs. Given a moment it stops there, which
+// is what keeps a finished row from ticking along with the one still running
+function gutter(model: Model, at?: number) {
+  return elapsed(at ?? model.now, model.started, true);
 }
 
 export function elapsed(now: number, started: number, clock = false) {