components/session-row/session-row.react.tsx

Functions

Imports

It imports components/session-row/session-row.ts. No module of this repo imports it.

Source

1import { useId, type ReactNode } from "react";
2import { STATES, order, spokenCount, type SessionState } from "./session-row.ts";
3
4export type { SessionState } from "./session-row.ts";
5
6export interface SessionAnswer {
7  id: string;
8  // Names the action: "Approve push", "Decline", "Keep 0007".
9  label: string;
10  variant?: "primary" | "danger";
11}
12
13export interface SessionStep {
14  label: string;
15  count: number;
16}
17
18export interface Session {
19  id: string;
20  agent: string;
21  state: SessionState;
22  // When the session began waiting, failed, started or was last seen, in milliseconds.
23  since: number;
24  // The age in words, as the row shows it: "waiting 3 minutes", "started 18 minutes ago".
25  age: ReactNode;
26  // A plain "now doing" line.
27  now?: ReactNode;
28  // Repeated steps collapsed with a count: { label: "read file", count: 12 }.
29  steps?: SessionStep[];
30  // A sampled stream: { shown: 1, of: 10 }.
31  sampled?: { shown: number; of: number };
32  ask?: {
33    question: string;
34    // The exact command or question, shown mono and sunken.
35    command: string;
36    answers: SessionAnswer[];
37    note?: ReactNode;
38    // The answer in flight, if any.
39    busy?: string;
40  };
41}
42
43export interface SessionListProps {
44  sessions: Session[];
45  // The list's name, usually the panel heading's text.
46  label?: string;
47  labelledBy?: string;
48  onAnswer?: (session: string, answer: string) => void;
49}
50
51const glyphs: Record<string, ReactNode> = {
52  warn: (
53    <>
54      <path fill="currentColor" d="M8 1.2 15.4 14H.6z" />
55      <path fill="var(--surface)" d="M7.3 6h1.4v4H7.3zM7.3 11h1.4v1.4H7.3z" />
56    </>
57  ),
58  crit: (
59    <>
60      <path fill="currentColor" d="M5 1h6l4 4v6l-4 4H5l-4-4V5z" />
61      <path fill="var(--surface)" d="M7.2 4h1.6v5H7.2zM7.2 10.4h1.6V12H7.2z" />
62    </>
63  ),
64  run: (
65    <>
66      <circle cx="8" cy="8" r="6.2" fill="none" stroke="currentColor" strokeWidth="1.6" opacity="0.35" />
67      <path fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" d="M8 1.8a6.2 6.2 0 0 1 6.2 6.2" />
68    </>
69  ),
70  none: <><circle cx="8" cy="8" r="6.2" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M5 8h6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></>,
71  stop: <rect x="3" y="3" width="10" height="10" rx="1.5" fill="currentColor" />,
72  info: (
73    <>
74      <rect x="1.5" y="1.5" width="13" height="13" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6" />
75      <path fill="currentColor" d="M7.2 7h1.6v5H7.2zM7.2 4h1.6v1.7H7.2z" />
76    </>
77  ),
78};
79
80const Glyph = ({ kind }: { kind: string }) => (
81  <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
82    {glyphs[kind]}
83  </svg>
84);
85
86function Steps({ steps }: { steps: SessionStep[] }) {
87  return (
88    <p className="cap-session-steps">
89      Before that:{" "}
90      {steps.map((s, i) => (
91        <span key={`${s.label}-${i}`}>
92          {i > 0 ? ", " : ""}
93          {s.label}
94          <span aria-hidden="true" className="cap-session-count">
95            {` ×${s.count}`}
96          </span>
97          <span className="cap-sr-only">{` ${spokenCount(s.count)}`}</span>
98        </span>
99      ))}
100      .
101    </p>
102  );
103}
104
105function Row({ s, onAnswer }: { s: Session; onAnswer?: SessionListProps["onAnswer"] }) {
106  const qid = useId();
107  const st = STATES[s.state];
108  return (
109    <li className="cap-session" data-session={s.id} data-tone={st.tone === "crit" ? "crit" : undefined}>
110      <div className="cap-session-head">
111        <span className="cap-pill" data-tone={st.tone}>
112          <Glyph kind={st.glyph} />
113          {st.word}
114        </span>
115        <span className="cap-session-agent">{s.agent}</span>
116        <span className="cap-session-age">{s.age}</span>
117      </div>
118      {s.ask && (
119        <div className="cap-session-ask" role="group" aria-labelledby={qid}>
120          <p className="cap-session-question" id={qid}>
121            {s.ask.question}
122          </p>
123          <pre className="cap-session-cmd">
124            <code>{s.ask.command}</code>
125          </pre>
126          <div className="cap-session-answers">
127            {s.ask.answers.map((a) => {
128              const busy = s.ask?.busy === a.id;
129              return (
130                <button
131                  key={a.id}
132                  type="button"
133                  className="cap-btn"
134                  data-variant={a.variant}
135                  data-cap-answer={a.id}
136                  aria-busy={busy ? "true" : undefined}
137                  onClick={() => {
138                    if (!s.ask?.busy) onAnswer?.(s.id, a.id);
139                  }}
140                >
141                  {busy && <span className="cap-btn-spinner" aria-hidden="true" />}
142                  {a.label}
143                </button>
144              );
145            })}
146            {s.ask.note && <span className="cap-session-note">{s.ask.note}</span>}
147          </div>
148        </div>
149      )}
150      {s.now && <p className="cap-session-now">{s.now}</p>}
151      {s.steps && s.steps.length > 0 && <Steps steps={s.steps} />}
152      {s.sampled && (
153        <p className="cap-session-sample">
154          <Glyph kind="info" />
155          {`Showing ${s.sampled.shown} in ${s.sampled.of} steps.`}
156        </p>
157      )}
158    </li>
159  );
160}
161
162// The list, ordered waiting on you first. Put it in a .cap-panel whose source line states
163// the freshness: "Waiting on you first. Updates every 15 seconds".
164export function SessionList({ sessions, label, labelledBy, onAnswer }: SessionListProps) {
165  return (
166    <ul className="cap-session-list" data-cap="session-row" aria-label={labelledBy ? undefined : label} aria-labelledby={labelledBy}>
167      {order(sessions).map((s) => (
168        <Row key={s.id} s={s} onAnswer={onAnswer} />
169      ))}
170    </ul>
171  );
172}