feat: polish tui step progress

src/devloop.ts

@@ -252,7 +252,7 @@ export async function runDevloop(
   await sink.event({
     type: "step",
     id: namingId,
-    title: "derive work name",
+    title: "derive branch name",
   });
   let namingLog = "";
   let namingError = "";
@@ -294,7 +294,7 @@ export async function runDevloop(
     await sink.event({
       type: "step",
       id: worktreeId,
-      title: "create isolated worktree",
+      title: "create worktree",
     });
     repo = await createWorktree(sourceRepo, work);
     await sink.event({

src/tui-view.ts

@@ -6,12 +6,13 @@ import {
 } from "./devloop.ts";
 
 export type Row = { id: string; title: string; status: "run" | "ok" | "fail"; detail: string; lines: string[]; open: boolean };
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 
-export function view(rows: Row[], selected: number, result?: Result) {
+export function view(rows: Row[], selected: number, result?: Result, spinnerFrame = 0) {
   const body = rows.flatMap((item, i) => {
     const mark = i === selected ? ">" : " ";
     const fold = item.lines.length ? (item.open ? "[-]" : "[+]") : "   ";
-    const head = `${mark} ${icon(item.status)} ${fold} ${item.title} - ${item.detail}`;
+    const head = `${mark} ${icon(item.status, spinnerFrame)} ${fold} ${item.title} - ${item.detail}`;
     return item.open ? [head, ...item.lines.slice(-80).map((line) => `      ${line}`)] : [head];
   });
   const tail = result
@@ -25,10 +26,12 @@ export function view(rows: Row[], selected: number, result?: Result) {
         `report:  ${resultPath(result, result.report)}`,
         `track:   ${resultPath(result, result.track)}`,
       ]
-    : ["", "enter toggles logs, j/k moves"];
+    : ["", "enter toggles logs, ↑/↓ moves"];
   return [LOGO, "", ...body, ...tail].join("\n");
 }
 
-function icon(status: Row["status"]) {
-  return status === "ok" ? "ok" : status === "fail" ? "!!" : "..";
+function icon(status: Row["status"], spinnerFrame: number) {
+  if (status === "ok") return "ok";
+  if (status === "fail") return "!!";
+  return SPINNER_FRAMES[Math.abs(spinnerFrame) % SPINNER_FRAMES.length]!;
 }

src/tui.ts

@@ -7,18 +7,24 @@ export async function createTuiSink(): Promise<Sink> {
   const text = new TextRenderable(renderer, { id: "devloop", width: "100%", height: "100%", content: "" });
   const rows: Row[] = [];
   let selected = 0;
+  let spinnerFrame = 0;
   let result: Result | undefined;
+  const spinner = setInterval(() => {
+    if (!rows.some((item) => item.status === "run")) return;
+    spinnerFrame++;
+    render();
+  }, 120);
 
   renderer.root.add(text);
   renderer.keyInput.on("keypress", (key) => {
-    if (key.name === "up" || key.name === "k") selected = Math.max(0, selected - 1);
-    else if (key.name === "down" || key.name === "j") selected = Math.min(rows.length - 1, selected + 1);
+    if (key.name === "up") selected = Math.max(0, selected - 1);
+    else if (key.name === "down") selected = Math.min(rows.length - 1, selected + 1);
     else if (rows.length && (key.name === "return" || key.name === "space")) rows[selected]!.open = !rows[selected]!.open;
     render();
   });
 
   function render() {
-    text.content = view(rows, selected, result);
+    text.content = view(rows, selected, result, spinnerFrame);
     renderer.requestRender();
   }
 
@@ -34,6 +40,7 @@ export async function createTuiSink(): Promise<Sink> {
       render();
     },
     close() {
+      clearInterval(spinner);
       renderer.destroy();
     },
   };

tests/tui-view.test.ts

@@ -15,20 +15,26 @@ describe("tui view", () => {
     const output = view([], 0);
 
     expect(output).toContain("____/ /__");
-    expect(output).toContain("enter toggles logs, j/k moves");
+    expect(output).toContain("enter toggles logs, ↑/↓ moves");
   });
 
   test("renders closed and open rows", () => {
     const closed = view([{ ...baseRow, lines: ["hidden"] }], 0);
     const open = view([{ ...baseRow, status: "ok", detail: "completed", lines: Array.from({ length: 82 }, (_, i) => `line-${i}`), open: true }], 0);
 
-    expect(closed).toContain("> .. [+] run tests - running");
+    expect(closed).toContain("> ⠋ [+] run tests - running");
     expect(closed).not.toContain("hidden");
     expect(open).toContain("> ok [-] run tests - completed");
     expect(open).not.toContain("line-0");
     expect(open).toContain("line-81");
   });
 
+  test("animates running rows with a spinner frame", () => {
+    const output = view([{ ...baseRow }], 0, undefined, 3);
+
+    expect(output).toContain("> ⠸     run tests - running");
+  });
+
   test("renders failed rows and result details", () => {
     const output = view([{ ...baseRow, status: "fail", detail: "failed" }], 0, {
       status: "commit-error",