@hraness/dawg 0.2.0 → 0.4.0

package/tui/app.ts

@@ -24,8 +24,15 @@ import {
   resolveBeat,
   type TrackScoreSnapshot,
 } from "./highway.ts";
+import { asciiHint, fitHint, HINTS } from "./grammar.ts";
 import { classifyKey, overlayKey, type UiCommand } from "./keys.ts";
 import { PromptModel, type PromptAction, type PromptMode } from "./prompt.ts";
+import {
+  paintChordLegend,
+  paintPlayHeader,
+  paintPlayStrip,
+  type PlayHeaderView,
+} from "./play-strip.ts";
 import { CellBuffer, ScreenWriter, type CursorPosition } from "./screen.ts";
 import { displayWidth, truncate } from "./text.ts";
 import {
@@ -54,18 +61,45 @@ export interface AppView {
   sessionName?: string | undefined;
   /** Live windows on this session (presence); shown when more than one. */
   windows?: number | undefined;
+  /** Project typecheck result; `types ✓` or `types ✗ N` beside sync. */
+  types?: TypesIndicator | undefined;
+  /**
+   * The line under the prompt: `$0.12 session · $0.48 today · opus-5.5 ·
+   * gateway`, or `no model · dawg login`. The caller sizes it to the width.
+   */
+  spend?: string | undefined;
+  /** No agent provider: the placeholder teaches commands, no STEER pill. */
+  agentOffline?: boolean | undefined;
+  /** Play mode: replaces the header and adds the keyboard strip row. */
+  play?: PlayHeaderView | undefined;
 }
 
+export type TypesIndicator = Readonly<{ ok: boolean; errors: number }>;
+
 export interface UiState {
   prompt: PromptModel;
   activity: ActivityFeed;
   theme: Theme;
   capabilities: TerminalCapabilities;
   reducedMotion: boolean;
-  overlay: "log" | "picker" | undefined;
+  overlay: Overlay;
   /** Transcript scroll (entries up from the newest) and filter. */
   log?: LogView | undefined;
   picker?: PickerState | undefined;
+  text?: TextView | undefined;
+  /** The `?` panel: keys for the screen underneath, drawn over it. */
+  keys?: TextView | undefined;
+}
+
+/** `log` is the transcript, `picker` an arrow-key list, `text` static lines. */
+export type Overlay = "log" | "picker" | "text" | undefined;
+
+/** A scrollable read-only panel (`/help`, `/sessions`, `/tracks`). */
+export interface TextView {
+  title: string;
+  lines: readonly string[];
+  /** Rows scrolled down from the top. */
+  scroll: number;
 }
 
 export type LogFilter = "all" | "requests" | "ops" | "errors";
@@ -88,6 +122,22 @@ export interface PickerState {
   title: string;
   items: readonly PickerItem[];
   index: number;
+  /** Type-to-filter on label and detail (`/model`). */
+  filterable?: boolean | undefined;
+  /** Current filter text; `items` is then the matching subset of `all`. */
+  query?: string | undefined;
+  /** `/` was pressed: printable keys type into the filter. */
+  filtering?: boolean | undefined;
+  all?: readonly PickerItem[] | undefined;
+  /** Footer keys, replacing the default move/choose/cancel hint. */
+  hint?: string | undefined;
+  /** A dim line under the rows: what the focused row does. */
+  note?: string | undefined;
+  /**
+   * Hosts the audition loop (src/tui/audition.ts): Space, `a` and `c` are
+   * returned as `pick-audition` instead of being swallowed.
+   */
+  audition?: boolean | undefined;
 }
 
 export interface PickerItem {
@@ -95,6 +145,8 @@ export interface PickerItem {
   /** Opaque value returned on Enter. */
   value: string;
   detail?: string | undefined;
+  /** Marked with ● (the current model). */
+  current?: boolean | undefined;
 }
 
 /** Most picker rows kept; longer lists are truncated by the caller's order. */
@@ -350,6 +402,14 @@ function paintHeader(
       style: roles.text,
       priority: 1,
     });
+  if (view.types)
+    right.push({
+      text: view.types.ok
+        ? `types ${unicode ? "✓" : "ok"}`
+        : `types ${unicode ? "✗" : "x"} ${view.types.errors}`,
+      style: view.types.ok ? roles.success : roles.error,
+      priority: 4,
+    });
   const sync = syncSegment(view.sync, theme, unicode);
   if (sync) right.push(sync);
   paintSegments(buffer, 0, left, width, " · ", roles.faint, roles.panel, right);
@@ -500,9 +560,14 @@ function paintPrompt(
   const mode = prompt.snapshot.mode;
   const pillStyle = mode === "queue" ? roles.pillQueue : roles.pillSteer;
   let x = 2;
-  x += buffer.text(x, top, pill(mode), pillStyle);
+  if (!view.agentOffline) x += buffer.text(x, top, pill(mode), pillStyle);
   const status: string[] = [];
-  if (view.model) status.push(view.model);
+  // The model shows once, in the header; the spend line carries it here.
+  // Views without a spend line (embedders such as the site demo) keep the
+  // model label.
+  if (view.spend) {
+    if (!layout.footer) status.push(view.spend);
+  } else if (view.model) status.push(view.model);
   if (activity.queueDepth > 0) status.push(`queue ${activity.queueDepth}`);
   const layoutInfo = prompt.layout(rows);
   if (layoutInfo.total > rows)
@@ -541,8 +606,9 @@ function paintPrompt(
       buffer.text(width - 3, y, capabilities.unicode ? "↓" : "v", faint);
   }
   if (prompt.value.length === 0) {
-    const placeholder =
-      mode === "queue"
+    const placeholder = view.agentOffline
+      ? "try: tempo 96 · add C4 at 0 · /help  (dawg login enables the agent)"
+      : mode === "queue"
         ? "queue a request for after the current one…"
         : "describe a change — “add a walking bass in A minor”";
     buffer.text(5, top + 1, truncate(placeholder, editorWidth - 1), faint);
@@ -563,8 +629,19 @@ function paintPrompt(
           : width >= 44
             ? " enter · ^q queue · ^z undo · ^o log "
             : "";
-    const shown = hints;
+    const spend = view.spend ? ` ${view.spend} ` : "";
+    const spendWidth = displayWidth(spend);
+    // Spend wins over hints when both do not fit.
+    const shown =
+      hints && displayWidth(hints) + spendWidth + 6 <= width ? hints : "";
     if (shown) buffer.text(2, y, shown, onBackground(roles.muted, panel));
+    if (spend && spendWidth + 4 <= width)
+      buffer.text(
+        width - 2 - spendWidth,
+        y,
+        spend,
+        onBackground(roles.muted, panel),
+      );
   }
 
   // Cursor: shown as a reverse cell and as the real terminal cursor.
@@ -637,11 +714,10 @@ function paintOverlay(
     onBackground({ ...roles.text, bold: true }, panel),
     boxWidth - 4,
   );
-  const hint = " ↑↓ pgup pgdn scroll · / filter · esc close ";
-  const hintText = capabilities.unicode ? hint : hint.replace("↑↓", "up dn");
-  if (boxWidth > hintText.length + 4)
+  const hintText = footerHint(HINTS.log, boxWidth - 4, capabilities.unicode);
+  if (hintText)
     buffer.text(
-      left + boxWidth - 2 - hintText.length,
+      left + boxWidth - 2 - displayWidth(hintText),
       top + height - 1,
       hintText,
       onBackground(roles.muted, panel),
@@ -678,6 +754,70 @@ function paintOverlay(
   });
 }
 
+/** Static lines in a bordered panel; the title sits on the top border. */
+function paintText(
+  buffer: CellBuffer,
+  ui: UiState,
+  region: { y: number; height: number },
+  width: number,
+  options: { text?: TextView | undefined; hint?: string } = {},
+): void {
+  const text = options.text ?? ui.text;
+  if (!text) return;
+  const roles = ui.theme.roles;
+  const left = width >= 60 ? 2 : 0;
+  const boxWidth = width - left * 2;
+  const height = region.height;
+  if (height < 3 || boxWidth < 10) return;
+  const panel = paintBox(buffer, ui, {
+    left,
+    top: region.y,
+    width: boxWidth,
+    height,
+  });
+  const inner = height - 2;
+  const maxScroll = Math.max(0, text.lines.length - inner);
+  const scroll = Math.max(0, Math.min(maxScroll, text.scroll));
+  const position =
+    maxScroll > 0
+      ? ` · ${scroll + 1}-${scroll + inner}/${text.lines.length}`
+      : "";
+  buffer.text(
+    left + 2,
+    region.y,
+    ` ${text.title}${position} `,
+    onBackground({ ...roles.text, bold: true }, panel),
+    boxWidth - 4,
+  );
+  const hint = footerHint(
+    options.hint ?? HINTS.text,
+    boxWidth - 4,
+    ui.capabilities.unicode,
+  );
+  if (hint)
+    buffer.text(
+      left + boxWidth - 2 - displayWidth(hint),
+      region.y + height - 1,
+      hint,
+      onBackground(roles.muted, panel),
+    );
+  text.lines.slice(scroll, scroll + inner).forEach((line, index) => {
+    const heading = line.startsWith("── ");
+    buffer.text(
+      left + 2,
+      region.y + 1 + index,
+      truncate(
+        heading && !ui.capabilities.unicode ? line.replace("── ", "-- ") : line,
+        boxWidth - 4,
+      ),
+      onBackground(
+        heading ? { ...roles.borderFocus, bold: true } : roles.text,
+        panel,
+      ),
+    );
+  });
+}
+
 function paintBox(
   buffer: CellBuffer,
   ui: UiState,
@@ -715,7 +855,11 @@ function paintPicker(
   const roles = ui.theme.roles;
   const left = width >= 60 ? 2 : 0;
   const boxWidth = width - left * 2;
-  const height = Math.min(region.height, picker.items.length + 2);
+  const noteRows = picker.note && region.height >= 6 ? 1 : 0;
+  const height = Math.min(
+    region.height,
+    Math.max(1, picker.items.length) + 2 + noteRows,
+  );
   if (height < 3 || boxWidth < 10) return;
   const panel = paintBox(buffer, ui, {
     left,
@@ -726,25 +870,49 @@ function paintPicker(
   buffer.text(
     left + 2,
     region.y,
-    ` ${picker.title} `,
+    ` ${picker.title}${picker.filtering || picker.query ? ` · /${picker.query ?? ""}${picker.filtering ? "▏" : ""}` : ""} `,
     onBackground({ ...roles.text, bold: true }, panel),
     boxWidth - 4,
   );
-  const hint = ui.capabilities.unicode
-    ? " ↑↓ move · enter choose · esc cancel "
-    : " up/dn move · enter choose · esc cancel ";
-  if (boxWidth > hint.length + 4)
+  const hint = footerHint(
+    picker.filtering
+      ? HINTS.filtering
+      : (picker.hint ??
+          (picker.filterable
+            ? HINTS.list
+            : HINTS.list.replace(" · / filter", ""))),
+    boxWidth - 4,
+    ui.capabilities.unicode,
+  );
+  if (hint)
     buffer.text(
-      left + boxWidth - 2 - hint.length,
+      left + boxWidth - 2 - displayWidth(hint),
       region.y + height - 1,
       hint,
       onBackground(roles.muted, panel),
     );
-  const inner = height - 2;
+  const inner = height - 2 - noteRows;
+  if (noteRows && picker.note)
+    buffer.text(
+      left + 2,
+      region.y + height - 2,
+      truncate(picker.note, boxWidth - 4),
+      onBackground(roles.muted, panel),
+    );
   const first = Math.max(
     0,
     Math.min(picker.items.length - inner, picker.index - inner + 1),
   );
+  const marks = (picker.all ?? picker.items).some(
+    (item) => item.current !== undefined,
+  );
+  if (picker.items.length === 0)
+    buffer.text(
+      left + 4,
+      region.y + 1,
+      "no matches",
+      onBackground(roles.muted, panel),
+    );
   picker.items.slice(first, first + inner).forEach((item, offset) => {
     const index = first + offset;
     const y = region.y + 1 + offset;
@@ -754,11 +922,25 @@ function paintPicker(
       ? onBackground({ ...roles.borderFocus, bold: true }, panel)
       : onBackground(roles.text, panel);
     buffer.text(left + 2, y, marker, style);
-    const room = boxWidth - 6;
-    const used = buffer.text(left + 4, y, truncate(item.label, room), style);
+    // A column for the current-item mark only when the picker uses one.
+    const pad = marks ? 2 : 0;
+    if (item.current)
+      buffer.text(
+        left + 4,
+        y,
+        ui.capabilities.unicode ? "●" : "*",
+        onBackground(roles.success, panel),
+      );
+    const room = boxWidth - 6 - pad;
+    const used = buffer.text(
+      left + 4 + pad,
+      y,
+      truncate(item.label, room),
+      style,
+    );
     if (item.detail && used + 3 < room)
       buffer.text(
-        left + 4 + used + 2,
+        left + 4 + pad + used + 2,
         y,
         truncate(item.detail, room - used - 2),
         onBackground(roles.muted, panel),
@@ -766,6 +948,24 @@ function paintPicker(
   });
 }
 
+/** The `?` panel sits at the bottom of the highway, as tall as it needs. */
+function keysRegion(
+  region: { y: number; height: number },
+  keys: TextView,
+): { y: number; height: number } {
+  const height = Math.min(region.height, keys.lines.length + 2);
+  return { y: region.y + region.height - height, height };
+}
+
+/** A footer hint fitted to `width`, spelled in ASCII when needed. */
+export function footerHint(
+  hint: string,
+  width: number,
+  unicode: boolean,
+): string {
+  return fitHint(unicode ? hint : asciiHint(hint), width);
+}
+
 // ---------------------------------------------------------------------------
 
 function paintTooSmall(buffer: CellBuffer, ui: UiState, size: FrameSize): void {
@@ -802,12 +1002,43 @@ export function composeFrame(
     paintTooSmall(buffer, ui, { width, height });
     return { buffer, cursor: undefined, promptRows: 0, layout };
   }
-  paintHeader(buffer, view, ui, width);
+  if (view.play) {
+    paintPlayHeader(
+      buffer,
+      layout.header,
+      width,
+      view.play,
+      ui.theme,
+      ui.capabilities.unicode,
+    );
+    if (layout.highway.height > 1) {
+      paintPlayStrip(buffer, layout.highway.y, width, view.play.keys, ui.theme);
+      layout.highway = {
+        y: layout.highway.y + 1,
+        height: layout.highway.height - 1,
+      };
+    }
+    if (view.play.legend && layout.highway.height > 4) {
+      paintChordLegend(
+        buffer,
+        layout.highway.y,
+        width,
+        view.play.legend,
+        ui.theme,
+      );
+      layout.highway = {
+        y: layout.highway.y + 1,
+        height: layout.highway.height - 1,
+      };
+    }
+  } else paintHeader(buffer, view, ui, width);
   const beat = view.beat ?? resolveBeat(view.score, nowMs);
   if (layout.highway.height > 0) {
     if (ui.overlay === "log") paintOverlay(buffer, ui, layout.highway, width);
     else if (ui.overlay === "picker" && ui.picker)
       paintPicker(buffer, ui, layout.highway, width);
+    else if (ui.overlay === "text" && ui.text)
+      paintText(buffer, ui, layout.highway, width);
     else
       paintHighway(
         buffer,
@@ -821,6 +1052,11 @@ export function composeFrame(
         },
       );
   }
+  if (ui.keys && layout.highway.height > 0)
+    paintText(buffer, ui, keysRegion(layout.highway, ui.keys), width, {
+      text: ui.keys,
+      hint: HINTS.keys,
+    });
   paintActivity(buffer, layout.activity, ui, width, nowMs);
   const prompt = paintPrompt(buffer, view, ui, layout, width);
   return { buffer, cursor: prompt.cursor, promptRows: prompt.rows, layout };
@@ -852,6 +1088,14 @@ export type AppInput =
   | { type: "pick"; picker: string; value: string }
   /** Esc on a picker. */
   | { type: "pick-cancel"; picker: string }
+  /**
+   * The highlighted row changed (move, page, filter): the hook for live
+   * previews (/pattern today; an audition controller can listen here too).
+   * Pickers raise `pick-move` → `pick` (commit) or `pick-cancel` (cancel).
+   */
+  | { type: "pick-move"; picker: string; value: string }
+  /** Space, `a` or `c` on a picker that hosts the audition loop. */
+  | { type: "pick-audition"; picker: string; key: "loop" | "ab" | "context" }
   /** Consumed by an overlay (scroll, filter, move). */
   | { type: "overlay" }
   | { type: "none" };
@@ -864,9 +1108,10 @@ export class TuiApp {
   capabilities: TerminalCapabilities;
   themeName: ThemeName;
   reducedMotion: boolean;
-  overlay: "log" | "picker" | undefined;
+  overlay: Overlay;
   log: LogView = { scroll: 0, filter: "all" };
   picker: PickerState | undefined;
+  text: TextView | undefined;
   /** `/view all` overlays every unmuted track; `/view focus` shows one. */
   highwayView: "all" | "focus" = "all";
   private writer: ScreenWriter;
@@ -902,6 +1147,8 @@ export class TuiApp {
       overlay: this.overlay,
       log: this.log,
       picker: this.picker,
+      text: this.text,
+      keys: this.keys,
     };
   }
 
@@ -950,15 +1197,17 @@ export class TuiApp {
       if (nav === "up" || nav === "down" || nav === "pgup" || nav === "pgdn") {
         const step =
           nav === "up" ? -1 : nav === "down" ? 1 : nav === "pgup" ? -8 : 8;
+        // Moving ends typing into the filter; the filter itself stays.
+        picker.filtering = false;
         picker.index = Math.max(
           0,
           Math.min(picker.items.length - 1, picker.index + step),
         );
-        return { type: "overlay" };
+        return this.pickerMoved(picker);
       }
       if (nav === "home" || nav === "end") {
         picker.index = nav === "home" ? 0 : picker.items.length - 1;
-        return { type: "overlay" };
+        return this.pickerMoved(picker);
       }
       if (nav === "enter") {
         const item = picker.items[picker.index];
@@ -968,18 +1217,51 @@ export class TuiApp {
           : { type: "pick-cancel", picker: picker.id };
       }
       if (key.type === "ui" && key.command === "close-overlay") {
+        // Esc clears the filter first, then closes.
+        if (picker.query || picker.filtering) {
+          this.filterPicker("");
+          if (this.picker) this.picker.filtering = false;
+          return { type: "overlay" };
+        }
         this.closePicker();
         return { type: "pick-cancel", picker: picker.id };
       }
-      if (key.type === "text" && /^[1-9]$/.test(key.text)) {
-        const index = Number(key.text) - 1;
-        if (index < picker.items.length) {
-          const item = picker.items[index]!;
-          this.closePicker();
-          return { type: "pick", picker: picker.id, value: item.value };
+      if (picker.filterable && picker.filtering) {
+        if (value === "\u007f" || value === "\b") {
+          const query = (picker.query ?? "").slice(0, -1);
+          this.filterPicker(query);
+          if (!query && this.picker) this.picker.filtering = false;
+          return { type: "overlay" };
+        }
+        if (key.type === "text") {
+          this.filterPicker(((picker.query ?? "") + key.text).slice(0, 40));
+          return { type: "overlay" };
         }
+      }
+      if (picker.audition && !picker.filtering) {
+        const audition =
+          value === " "
+            ? "loop"
+            : value === "a"
+              ? "ab"
+              : value === "c"
+                ? "context"
+                : undefined;
+        if (audition)
+          return { type: "pick-audition", picker: picker.id, key: audition };
+      }
+      if (picker.filterable && key.type === "text" && key.text === "/") {
+        picker.filtering = true;
         return { type: "overlay" };
       }
+      if (key.type === "text" && (key.text === "j" || key.text === "k")) {
+        const step = key.text === "k" ? -1 : 1;
+        picker.index = Math.max(
+          0,
+          Math.min(picker.items.length - 1, picker.index + step),
+        );
+        return this.pickerMoved(picker);
+      }
       // Quit and redraw still work; everything else is swallowed.
       if (
         key.type === "ui" &&
@@ -990,6 +1272,30 @@ export class TuiApp {
       }
       return { type: "overlay" };
     }
+    if (this.overlay === "text" && this.text) {
+      const nav = overlayKey(value);
+      const page = Math.max(1, this.io.rows() - 10);
+      if (nav && nav !== "enter") {
+        const step =
+          nav === "down"
+            ? 1
+            : nav === "up"
+              ? -1
+              : nav === "pgdn"
+                ? page
+                : nav === "pgup"
+                  ? -page
+                  : 0;
+        const total = this.text.lines.length;
+        this.text.scroll =
+          nav === "home"
+            ? 0
+            : nav === "end"
+              ? total
+              : Math.max(0, Math.min(total, this.text.scroll + step));
+        return { type: "overlay" };
+      }
+    }
     if (this.overlay === "log") {
       const nav = overlayKey(value);
       const page = Math.max(1, this.io.rows() - 10);
@@ -1041,8 +1347,13 @@ export class TuiApp {
         }
         if (key.command === "redraw") this.invalidate();
         return { type: "ui", command: key.command };
-      case "prompt":
-        return { type: "action", action: this.prompt.handle(key.key) };
+      case "prompt": {
+        const action = this.prompt.handle(key.key);
+        // Submitting from under a text panel closes it so the receipt shows.
+        if (action.kind === "submit" && this.overlay === "text")
+          this.closeText();
+        return { type: "action", action };
+      }
       case "text": {
         let action: PromptAction = {
           kind: "noop",
@@ -1058,6 +1369,14 @@ export class TuiApp {
   }
 
   /** Show an arrow-key picker over the highway; replaces any overlay. */
+  /** `pick-move` for the row now highlighted, or a plain overlay input. */
+  private pickerMoved(picker: PickerState): AppInput {
+    const item = picker.items[picker.index];
+    return item
+      ? { type: "pick-move", picker: picker.id, value: item.value }
+      : { type: "overlay" };
+  }
+
   openPicker(picker: Omit<PickerState, "index"> & { index?: number }): void {
     const items = picker.items.slice(0, MAX_PICKER_ITEMS);
     if (items.length === 0) return;
@@ -1069,11 +1388,57 @@ export class TuiApp {
     this.overlay = "picker";
   }
 
+  /** Narrow a filterable picker to rows matching `query`. */
+  private filterPicker(query: string): void {
+    const picker = this.picker;
+    if (!picker) return;
+    const all = picker.all ?? picker.items;
+    const needle = query.toLowerCase();
+    const items = all.filter(
+      (item) =>
+        !needle ||
+        item.label.toLowerCase().includes(needle) ||
+        (item.detail ?? "").toLowerCase().includes(needle),
+    );
+    const keep = picker.items[picker.index]?.value;
+    const index = Math.max(
+      0,
+      items.findIndex((item) => item.value === keep),
+    );
+    this.picker = { ...picker, all, query, items, index };
+  }
+
   closePicker(): void {
     this.picker = undefined;
     if (this.overlay === "picker") this.overlay = undefined;
   }
 
+  /** Show static lines over the highway (`/help`, lists); replaces any overlay. */
+  openText(title: string, lines: readonly string[]): void {
+    this.text = { title, lines: lines.slice(0, 512), scroll: 0 };
+    this.overlay = "text";
+  }
+
+  /** The `?` panel over the current screen; any key closes it. */
+  keys: TextView | undefined;
+  showKeys(title: string, lines: readonly string[]): void {
+    this.keys = { title, lines, scroll: 0 };
+  }
+
+  closeKeys(): void {
+    this.keys = undefined;
+  }
+
+  /** True while a picker's `/` filter is taking typed text. */
+  get pickerTyping(): boolean {
+    return this.overlay === "picker" && this.picker?.filtering === true;
+  }
+
+  closeText(): void {
+    this.text = undefined;
+    if (this.overlay === "text") this.overlay = undefined;
+  }
+
   /**
    * Handle TUI-local slash commands (`/log`, `/theme`, `/motion`).
    * Returns a receipt, or undefined when the command is not a UI command.