components/session-row/session-row.ts

Functions

Imports

It imports no other module of this repo. Imported by components/session-row/session-row.react.tsx.

Source

1// Agent session rows: the order they are shown in (waiting on you first) and the answer
2// buttons of an ask block, which announce a typed event for the app to act on. No framework;
3// the React wrapper uses the same functions.
4
5export type SessionState = "needs" | "failed" | "working" | "idle" | "stopped";
6
7// The word and tone of each state's pill. Stopped shares the no-data tone with Idle and
8// differs from it by its glyph (a filled square) and its word.
9export const STATES: Record<SessionState, { word: string; tone: "warn" | "crit" | "info" | "nodata"; glyph: "warn" | "crit" | "run" | "none" | "stop" }> = {
10  needs: { word: "Needs you", tone: "warn", glyph: "warn" },
11  failed: { word: "Failed", tone: "crit", glyph: "crit" },
12  working: { word: "Working", tone: "info", glyph: "run" },
13  idle: { word: "Idle", tone: "nodata", glyph: "none" },
14  stopped: { word: "Stopped", tone: "nodata", glyph: "stop" },
15};
16
17const RANK: Record<SessionState, number> = { needs: 0, failed: 1, working: 2, idle: 3, stopped: 4 };
18
19// Waiting on you first, the longest wait at the top; then failed, working, idle and
20// stopped, each with the most recent first. `since` is a time in milliseconds: when the
21// session began waiting, failed, started or was last seen. Returns a new array.
22export function order<T extends { state: SessionState; since: number }>(sessions: readonly T[]): T[] {
23  return [...sessions].sort((a, b) => {
24    const r = RANK[a.state] - RANK[b.state];
25    if (r !== 0) return r;
26    return a.state === "needs" ? a.since - b.since : b.since - a.since;
27  });
28}
29
30// How a collapsed run of repeated steps is spoken: "Read file 12 times". The eye reads
31// "Read file ×12".
32export function spokenCount(count: number): string {
33  return count === 1 ? "once" : `${count} times`;
34}
35
36export interface AnswerDetail {
37  session: string;
38  answer: string;
39}
40
41// Attaches to every [data-cap="session-row"] list under root. A click (or Enter or Space)
42// on a button with data-cap-answer inside a row with data-session dispatches a bubbling
43// "cap-answer" event with { session, answer }; the app performs the answer and sets the
44// button's aria-busy while it is in flight. A busy or aria-disabled button does nothing.
45export function enhance(root: ParentNode = document): () => void {
46  const undo: Array<() => void> = [];
47  for (const list of root.querySelectorAll<HTMLElement>("[data-cap='session-row']:not([data-cap-ready])")) {
48    list.dataset.capReady = "";
49    const onClick = (e: MouseEvent) => {
50      const btn = (e.target as Element).closest<HTMLButtonElement>("[data-cap-answer]");
51      if (!btn || !list.contains(btn)) return;
52      if (btn.getAttribute("aria-busy") === "true" || btn.getAttribute("aria-disabled") === "true") return;
53      const row = btn.closest<HTMLElement>("[data-session]");
54      const detail: AnswerDetail = { session: row?.dataset.session ?? "", answer: btn.dataset.capAnswer ?? "" };
55      btn.dispatchEvent(new CustomEvent<AnswerDetail>("cap-answer", { bubbles: true, detail }));
56    };
57    list.addEventListener("click", onClick);
58    undo.push(() => {
59      list.removeEventListener("click", onClick);
60      delete list.dataset.capReady;
61    });
62  }
63  return () => undo.forEach((f) => f());
64}