Terminal stream

'use client';
import { useEffect, useRef, useState } from 'react';
import { cx } from '../lib/cx';
import { useCopied } from '../lib/hooks';
import { Icon } from '../lib/icons';
import { enter, Fold, Spin, Tip } from '../lib/motion';
import '../designme.css';
import './terminal-stream.css';

/** ok is green, bad is red, muted is grey */
export type TerminalTone = 'ok' | 'bad' | 'muted';
/** A line of output, or { text, tone } to colour it */
export type TerminalLine = string | { text: string; tone?: TerminalTone };

export interface TerminalCommand {
  kind?: 'command';
  /** Like "npm run build" */
  command: string;
  /** What it printed so far. Longer than `tail` + 1 lines, all but the last `tail` fold behind "Show N more lines" */
  output?: TerminalLine[];
  /** running shows a spinner; ok a check; failed its exit code in red; stopped a Stopped tag */
  status: 'running' | 'ok' | 'failed' | 'stopped';
  /** Shown when it failed, as "Exit 1" */
  exitCode?: number;
  /** How long it has taken, like "6.1 s" */
  duration?: string;
}

/** A line from the agent between commands, like what went wrong and what it will do about it */
export interface TerminalNote {
  kind: 'note';
  text: string;
}

/** A file the agent edits between commands */
export interface TerminalEdit {
  kind: 'edit';
  file: string;
  /** Lines added and removed, shown once it is done */
  added?: number;
  removed?: number;
  /** The changed lines, each starting with "-" (removed, in red) or "+" (added, in green), shown under it once it is done */
  diff?: string[];
  status?: 'running' | 'done' | 'stopped';
}

export type TerminalEntry = TerminalCommand | TerminalNote | TerminalEdit;
export type TerminalStatus = 'running' | 'passed' | 'failed' | 'stopped';

export interface TerminalStreamProps {
  /** The working directory, shown in the header, like "~/acme/web" */
  cwd: string;
  /** Commands, notes and edits, oldest first */
  entries: TerminalEntry[];
  /** The run as a whole. Left out, it is running while any entry runs, then failed if the last command failed, else passed */
  status?: TerminalStatus;
  /** How long the run has taken, like "0:18". Shown beside Running in the header and in the summary */
  elapsed?: string;
  /** The line at the foot once the run is over. Defaults to "3 commands · 0:18 · passed", counting each command once
      however many times it ran; false hides it */
  summary?: string | false;
  /** How many lines a folded output keeps showing */
  tail?: number;
  /** Adds the Stop button while the run is going */
  onStop?: () => void;
  /** Called with the whole run as text when it is copied */
  onCopy?: (text: string) => void;
  labels?: { running?: string; passed?: string; failed?: string; stopped?: string; stop?: string; copy?: string; copied?: string; more?: (n: number) => string; fewer?: string; edit?: string };
  className?: string;
}

const lineOf = (l: TerminalLine) => (typeof l === 'string' ? { text: l, tone: undefined } : l);
const TONE: Record<TerminalTone, string> = { ok: 'dm-ok', bad: 'dm-bad', muted: 'dm-mu' };
const isNote = (e: TerminalEntry): e is TerminalNote => e.kind === 'note';
const isEdit = (e: TerminalEntry): e is TerminalEdit => e.kind === 'edit';

function Lines({ lines }: { lines: TerminalLine[] }) {
  return <div className="dm-tmx-o">{lines.map((l, i) => { const { text, tone } = lineOf(l); return <div key={i} className={cx('dm-tmx-l', tone && TONE[tone])}>{text}</div>; })}</div>;
}

/** The shell commands an agent runs, as a compact terminal: the working directory and how the run is going in the header,
    each command with its output streaming in under it and an exit code or a check with how long it took, and a summary
    at the foot once it is over. Long output folds to its last lines. The terminal keeps one height (420px; set `height`
    on it to change that) and its output scrolls, staying on the newest line unless the reader has scrolled up. */
export function TerminalStream({ cwd, entries, status, elapsed, summary, tail = 4, onStop, onCopy, labels = {}, className }: TerminalStreamProps) {
  const L = { running: 'Running', passed: 'Passed', failed: 'Failed', stopped: 'Stopped', stop: 'Stop', copy: 'Copy', copied: 'Copied to clipboard',
    more: (n: number) => `Show ${n} more line${n === 1 ? '' : 's'}`, fewer: 'Show fewer lines', edit: 'Edit', ...labels };
  const [open, setOpen] = useState<Set<number>>(() => new Set());
  const [copied, copy] = useCopied();
  const cmds = entries.filter((e): e is TerminalCommand => !isNote(e) && !isEdit(e));
  const busy = entries.some(e => !isNote(e) && e.status === 'running');
  const last = cmds[cmds.length - 1];
  const state: TerminalStatus = status ?? (busy ? 'running' : last?.status === 'failed' ? 'failed' : last?.status === 'stopped' ? 'stopped' : 'passed');
  const running = state === 'running';
  const n = new Set(cmds.map(c => c.command)).size;
  const foot = summary !== undefined ? summary : [`${n} command${n === 1 ? '' : 's'}`, elapsed, state].filter(Boolean).join(' · ');
  const toggle = (i: number) => setOpen(s => { const t = new Set(s); if (t.has(i)) t.delete(i); else t.add(i); return t; });
  // new output keeps the log on its newest line, unless the reader has scrolled up; then it stays where they are
  const log = useRef<HTMLDivElement>(null), pinned = useRef(true);
  useEffect(() => {
    const el = log.current; if (!el) return;
    const stick = () => { if (pinned.current) el.scrollTop = el.scrollHeight; };
    const mo = new MutationObserver(stick); mo.observe(el, { childList: true, subtree: true, characterData: true });
    const ro = new ResizeObserver(stick); ro.observe(el);
    stick();
    return () => { mo.disconnect(); ro.disconnect(); };
  }, []);

  const text = () => entries.flatMap(e => isNote(e) ? ['# ' + e.text]
    : isEdit(e) ? [`# ${L.edit} ${e.file}${e.added !== undefined || e.removed !== undefined ? ` (+${e.added ?? 0} −${e.removed ?? 0})` : ''}`, ...(e.status === 'done' || e.status === undefined ? e.diff ?? [] : [])]
    : ['$ ' + e.command, ...(e.output ?? []).map(l => lineOf(l).text)]).join('\n');
  const copyAll = () => { const t = text(); copy(t); onCopy?.(t); };

  return (
    <div data-dm="" className={cx('dm-tmx dm-panel', running && 'dm-live', className)} style={{ containerType: 'inline-size' }}>
      <div className="dm-tmx-h">
        <span className="dm-tmx-ic"><Icon name="term" /></span>
        <span className="dm-tmx-cwd">{cwd}</span>
        <span className={cx('dm-tmx-st', state === 'passed' && 'dm-ok', state === 'failed' && 'dm-bad')}>
          <span className="dm-g">{running ? <Spin /> : <Icon name={state === 'passed' ? 'check' : 'stop'} size="xs" />}</span>
          <span className="dm-tmx-sv dm-num">{running ? (elapsed ? `${L.running} · ${elapsed}` : L.running) : L[state]}</span>
        </span>
        <span className="dm-sp" />
        {running && onStop && <button type="button" className="dm-pill dm-ghost dm-sm dm-tmx-stop" aria-label="Stop the running command" onClick={onStop}><Icon name="stop" size="xs" />{L.stop}</button>}
        <Tip label={copied ? L.copied : L.copy} open={copied}>
          <button type="button" className={cx('dm-ib dm-tmx-cp', copied && 'dm-copied')} aria-label="Copy the output" onClick={copyAll}><Icon name={copied ? 'check' : 'copy'} /></button>
        </Tip>
      </div>
      <div ref={log} className="dm-tmx-body" role="log" aria-label="Terminal output" tabIndex={0}
        onScroll={e => { const el = e.currentTarget; pinned.current = el.scrollTop + el.clientHeight >= el.scrollHeight - 24; }}>
        {entries.map((e, i) => {
          const e0 = enter();
          // the agent's newest note shimmers while the run goes on: it is still working it out
          if (isNote(e)) return <div key={i} className={cx('dm-tmx-note', e0.className)} style={e0.style}><Icon name="spark" size="xs" /><span className={cx(running && i === entries.length - 1 && 'dm-shim')}>{e.text}</span></div>;
          if (isEdit(e)) return (
            <div key={i} className={cx('dm-tmx-blk', e0.className)} style={e0.style} data-s={e.status === 'stopped' ? 'stop' : 'edit'}>
              <div className="dm-tmx-cmd"><span className="dm-tmx-p"><Icon name="edit" size="xs" /></span><span className="dm-tmx-c">{L.edit} {e.file}</span>
                <span className="dm-tmx-m">{e.status === 'running' ? <span className="dm-g"><Spin /></span>
                  : e.status === 'stopped' ? <span className="dm-g"><span className="dm-tag">{L.stopped}</span></span>
                  : <>{e.added !== undefined && <span className="dm-add">+{e.added}</span>}{e.removed !== undefined && <span className="dm-del">−{e.removed}</span>}</>}</span>
              </div>
              {e.status !== 'running' && e.status !== 'stopped' && e.diff && e.diff.length > 0 && (
                <div className="dm-tmx-df">{e.diff.map((d, j) => { const x = enter(j * 90); return <div key={j} className={cx(d[0] === '+' && 'dm-a', d[0] === '-' && 'dm-d', x.className)} style={x.style}>{d}</div>; })}</div>
              )}
            </div>
          );
          const out = e.output ?? [], fold = out.length > tail + 1, hidden = fold ? out.slice(0, out.length - tail) : [], shown = fold ? out.slice(out.length - tail) : out, isOpen = open.has(i);
          return (
            <div key={i} className={cx('dm-tmx-blk', e0.className)} style={e0.style} data-s={e.status === 'running' ? 'run' : e.status === 'ok' ? 'ok' : e.status === 'failed' ? 'bad' : 'stop'}>
              <div className="dm-tmx-cmd">
                <span className="dm-tmx-p">$</span><span className="dm-tmx-c">{e.command}</span>
                <span className="dm-tmx-m">
                  <span className="dm-g">{e.status === 'running' ? <Spin /> : e.status === 'ok' ? <span className="dm-ok"><Icon name="check" size="xs" /></span>
                    : e.status === 'failed' ? <span className="dm-tag dm-bad">Exit {e.exitCode ?? 1}</span> : <span className="dm-tag">{L.stopped}</span>}</span>
                  {e.duration && <span className="dm-t dm-num">{e.duration}</span>}
                </span>
              </div>
              {fold && <button type="button" className="dm-tmx-more" aria-expanded={isOpen} onClick={() => toggle(i)}><Icon name="chev-d" size="xs" /><span>{isOpen ? L.fewer : L.more(hidden.length)}</span></button>}
              {fold && <Fold open={isOpen}><Lines lines={hidden} /></Fold>}
              {shown.length > 0 && <Lines lines={shown} />}
            </div>
          );
        })}
      </div>
      <Fold open={!running && foot !== false} className="dm-tmx-ff">
        <div className={cx('dm-tmx-f', state === 'stopped' && 'dm-stop', state === 'failed' && 'dm-bad')}>
          <span className="dm-g"><Icon name={state === 'passed' ? 'ok' : state === 'failed' ? 'alert' : 'stop'} /></span>
          <span className="dm-tmx-fs dm-num">{foot || ''}</span>
        </div>
      </Fold>
    </div>
  );
}

/* Generated from designme.dev by scripts/sync.mjs. Edit the site, then sync. */
/* ---------- Terminal stream ---------- */
/* the shell commands the agent runs, as a compact terminal: where it runs and how it is going in the header, then each
   command with its output streaming in under it, and an exit code or a check with how long it took. Output longer than
   five lines folds to its last four. The type and rhythm are Code viewer's: 12px mono on a 1.8 line height */
/* a terminal of a set height: the output scrolls under the header and keeps to its newest line, so the card is the same
   size from the first command to the last */
.dm-tmx{overflow:hidden;display:flex;flex-direction:column;height:420px}
.dm-tmx-h{display:flex;align-items:center;gap:var(--dm-s-2);height:44px;padding:0 var(--dm-s-2) 0 14px;border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent)}
.dm-tmx-ic{display:grid;place-items:center;color:var(--dm-fg2);flex:none}
.dm-tmx-cwd{min-width:0;flex:0 1 auto;font-family:var(--dm-mono);font-size:12px;color:var(--dm-fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-tmx-st{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--dm-muted);white-space:nowrap}
.dm-tmx-st .dm-g{display:grid;place-items:center;flex:none}
.dm-tmx-st .dm-spin{width:10px;height:10px}
.dm-tmx-st.dm-ok .dm-g{color:var(--dm-ok)}
.dm-tmx-h .dm-sp{flex:1}
.dm-tmx-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--dm-s-2) 0;font-family:var(--dm-mono);font-size:12px;line-height:1.8;scrollbar-width:thin;scrollbar-color:var(--dm-rail) transparent}
.dm-tmx-body::-webkit-scrollbar{width:8px}
.dm-tmx-body::-webkit-scrollbar-track{background:transparent}
.dm-tmx-body::-webkit-scrollbar-thumb{background:var(--dm-rail);border:2px solid transparent;background-clip:padding-box;border-radius:var(--dm-r-pill)}
:root:not([data-style="soft"]) .dm-tmx-body:not(:where([data-style="soft"],[data-style="soft"] *))::-webkit-scrollbar-thumb{border-radius:0}
.dm-tmx-blk+.dm-tmx-blk{margin-top:var(--dm-s-1)}
.dm-tmx-cmd{display:flex;align-items:center;gap:var(--dm-s-2);padding:0 14px}
.dm-tmx-p{width:12px;flex:none;display:grid;place-items:center;color:var(--dm-muted)}
.dm-tmx-c{flex:1;min-width:0;font-weight:500;color:var(--dm-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-tmx-m{display:inline-flex;align-items:center;gap:6px;font-family:var(--dm-sans);font-size:12px;color:var(--dm-muted);white-space:nowrap;flex:none}
.dm-tmx-m .dm-g{display:grid;place-items:center}
.dm-tmx-m .dm-spin{width:10px;height:10px}
.dm-tmx-m .dm-ok{color:var(--dm-ok)}
.dm-tmx-m .dm-add{color:var(--dm-add)}.dm-tmx-m .dm-del{color:var(--dm-del)}
/* the output wraps inside the panel, so a long line never pushes the page sideways */
.dm-tmx-o{padding:0 14px 0 34px;color:var(--dm-fg2);white-space:pre-wrap;overflow-wrap:anywhere}
.dm-tmx-l.dm-ok{color:var(--dm-ok)}.dm-tmx-l.dm-bad{color:var(--dm-bad)}.dm-tmx-l.dm-mu{color:var(--dm-muted)}
.dm-tmx-more{display:flex;align-items:center;gap:6px;margin-left:34px;font-family:var(--dm-sans);font-size:12px;line-height:inherit;color:var(--dm-muted);transition:color var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-tmx-more:hover{color:var(--dm-fg)}}
.dm-tmx-more svg{transition:transform var(--dm-t) var(--dm-ease)}
.dm-tmx-more[aria-expanded="true"] svg{transform:rotate(180deg)}
/* folded lines are hidden once they have folded away, so nothing measures the clipped part as if it were drawn */
.dm-tmx-blk .dm-fold.dm-shut>div{visibility:hidden;transition:visibility 0s var(--dm-t)}
/* what the agent says between commands: its spark in the accent and its words, which shimmer while it is still working it out */
.dm-tmx-note{margin:var(--dm-s-2) 14px;padding-left:20px;font-family:var(--dm-sans);font-size:12.5px;line-height:1.5;color:var(--dm-fg2);display:flex;gap:var(--dm-s-2)}
.dm-tmx-note>svg{color:var(--dm-accent-fg,var(--dm-accent));flex:none;margin-top:3px}
.dm-tmx-note .dm-shim{font-size:inherit}
.dm-tmx-f{display:flex;align-items:center;gap:var(--dm-s-2);padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent);font-size:13px}
.dm-tmx-f .dm-g{display:grid;place-items:center;flex:none;color:var(--dm-ok)}
.dm-tmx-f.dm-stop .dm-g{color:var(--dm-muted)}.dm-tmx-f.dm-bad .dm-g{color:var(--dm-bad)}
/* the run's state in the header is a tag in its colour: the accent while it runs, green once it passes, red if it failed */
.dm-tmx-st{height:22px;padding:0 var(--dm-s-2);border-radius:var(--dm-r-tag);background:var(--dm-chip);color:var(--dm-fg2);transition:background .3s,color .3s}
.dm-tmx.dm-live .dm-tmx-st{background:var(--dm-accent-bg);color:var(--dm-accent-fg,var(--dm-fg))}
.dm-tmx-st.dm-ok,.dm-tmx-st.dm-ok .dm-g{background:var(--dm-ok-bg);color:var(--dm-ok)}
.dm-tmx-st.dm-bad,.dm-tmx-st.dm-bad .dm-g{background:var(--dm-bad-bg);color:var(--dm-bad)}
/* while it runs, a light sweeps along the header's lower edge */
.dm-tmx-h{position:relative}
.dm-tmx-h::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--dm-accent-mark,var(--dm-accent)),transparent) 0 0/40% 100% no-repeat;opacity:0;transition:opacity .4s;pointer-events:none}
.dm-tmx.dm-live .dm-tmx-h::after{opacity:1;animation:dm-tmxsweep 1.8s var(--dm-ease-io) infinite}
@keyframes dm-tmxsweep{from{background-position:-60% 0}to{background-position:160% 0}}
/* the output sits on a faint code surface */
/* each command and edit has a line down its left in how it went: the accent while it runs, green, red, grey once stopped */
.dm-tmx-blk{position:relative}
.dm-tmx-blk::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;border-radius:1px;background:var(--dm-rail);transition:background .3s}
.dm-tmx-blk[data-s="run"]::before{background:var(--dm-accent-mark,var(--dm-accent));animation:dm-tmxpulse 1.4s var(--dm-ease-io) infinite}
.dm-tmx-blk[data-s="ok"]::before{background:color-mix(in srgb,var(--dm-ok) 70%,transparent)}
.dm-tmx-blk[data-s="bad"]::before{background:var(--dm-bad)}
.dm-tmx-blk[data-s="edit"]::before{background:var(--dm-merge)}
@keyframes dm-tmxpulse{50%{opacity:.35}}
.dm-tmx-p{color:var(--dm-accent-fg,var(--dm-fg));font-weight:500}
.dm-tmx-blk[data-s="edit"] .dm-tmx-p{color:var(--dm-merge)}
/* an edit shows the lines it changed, removed in red and added in green, each on its own tint */
.dm-tmx-df{margin:2px 14px var(--dm-s-1) 34px;border-radius:var(--dm-r-sm);overflow:hidden}
.dm-tmx-df div{padding:0 var(--dm-s-2);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--dm-fg2)}
.dm-tmx-df .dm-a{background:color-mix(in srgb,var(--dm-add) 10%,transparent)}.dm-tmx-df .dm-a::first-letter{color:var(--dm-add)}
.dm-tmx-df .dm-d{background:color-mix(in srgb,var(--dm-del) 10%,transparent)}.dm-tmx-df .dm-d::first-letter{color:var(--dm-del)}
/* a block cursor blinks after the newest line while the run goes on */
.dm-tmx.dm-live .dm-tmx-body::after{content:"";display:block;width:7px;height:14px;margin:var(--dm-s-1) 0 0 34px;background:var(--dm-fg2);animation:dm-bpblink 1.1s steps(1,end) infinite}
:root:not([data-style="soft"]) .dm-tmx-h:not(:where([data-style="soft"],[data-style="soft"] *))::after{background:repeating-linear-gradient(90deg,var(--dm-accent-mark) 0 6px,transparent 6px 12px);animation:dm-tmxmarch .6s steps(4) infinite}
@keyframes dm-tmxmarch{to{background-position:12px 0}}
:root:not([data-style="soft"]) .dm-tmx-blk:not(:where([data-style="soft"],[data-style="soft"] *))::before{width:1px}
:root:not([data-style="soft"]) .dm-tmx-blk[data-s="run"]:not(:where([data-style="soft"],[data-style="soft"] *))::before{animation:dm-bpblink 1.1s steps(1,end) infinite}
@container (max-width:420px){.dm-tmx-ic{display:none}.dm-tmx-h{padding-left:var(--dm-s-3)}.dm-tmx-cmd{padding:0 var(--dm-s-3)}.dm-tmx-o{padding:0 var(--dm-s-3)}.dm-tmx-more{margin-left:var(--dm-s-3)}.dm-tmx-note{margin-inline:var(--dm-s-3)}.dm-tmx-f{padding-inline:var(--dm-s-3)}.dm-tmx-df{margin-left:var(--dm-s-3);margin-right:var(--dm-s-3)}.dm-tmx-blk::before{left:3px}.dm-tmx.dm-live .dm-tmx-body::after{margin-left:var(--dm-s-3)}}

<div class="card wide" data-c="terminal-stream">
  <div class="stage-in">
    <div class="tmx panel" data-reveal="flat">
      <div class="tmx-h"><span class="tmx-ic"><svg class="i s"><use href="#i-term"/></svg></span><span class="tmx-cwd">~/acme/web</span><span class="tmx-st"><span class="g"><span class="spin"></span></span><span class="tmx-sv num">Starting</span></span><span class="sp"></span><button class="pill ghost sm tmx-stop" aria-label="Stop the running command"><svg class="i xs"><use href="#i-stop"/></svg>Stop</button><button class="ib tmx-cp" aria-label="Copy the output" data-tip="Copy"><svg class="i s"><use href="#i-copy"/></svg></button></div>
      <div class="tmx-body" role="log" aria-label="Terminal output" tabindex="0"></div>
      <div class="fold shut tmx-ff"><div><div class="tmx-f"><span class="g"></span><span class="tmx-fs num"></span></div></div></div>
    </div>
  </div>
</div>

/* ---------- Terminal stream ---------- */
/* the shell commands the agent runs, as a compact terminal: where it runs and how it is going in the header, then each
   command with its output streaming in under it, and an exit code or a check with how long it took. Output longer than
   five lines folds to its last four. The type and rhythm are Code viewer's: 12px mono on a 1.8 line height */
/* a terminal of a set height: the output scrolls under the header and keeps to its newest line, so the card is the same
   size from the first command to the last */
.tmx{overflow:hidden;display:flex;flex-direction:column;height:420px}
.tmx-h{display:flex;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-2) 0 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.tmx-ic{display:grid;place-items:center;color:var(--fg2);flex:none}
.tmx-cwd{min-width:0;flex:0 1 auto;font-family:var(--mono);font-size:12px;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmx-st{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap}
.tmx-st .g{display:grid;place-items:center;flex:none}
.tmx-st .spin{width:10px;height:10px}
.tmx-st.ok .g{color:var(--ok)}
.tmx-h .sp{flex:1}
.tmx-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s-2) 0;font-family:var(--mono);font-size:12px;line-height:1.8;scrollbar-width:thin;scrollbar-color:var(--rail) transparent}
.tmx-body::-webkit-scrollbar{width:8px}
.tmx-body::-webkit-scrollbar-track{background:transparent}
.tmx-body::-webkit-scrollbar-thumb{background:var(--rail);border:2px solid transparent;background-clip:padding-box;border-radius:var(--r-pill)}
:root:not([data-style="soft"]) .tmx-body:not(:where([data-style="soft"],[data-style="soft"] *))::-webkit-scrollbar-thumb{border-radius:0}
.tmx-blk+.tmx-blk{margin-top:var(--s-1)}
.tmx-cmd{display:flex;align-items:center;gap:var(--s-2);padding:0 14px}
.tmx-p{width:12px;flex:none;display:grid;place-items:center;color:var(--muted)}
.tmx-c{flex:1;min-width:0;font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmx-m{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.tmx-m .g{display:grid;place-items:center}
.tmx-m .spin{width:10px;height:10px}
.tmx-m .ok{color:var(--ok)}
.tmx-m .add{color:var(--add)}.tmx-m .del{color:var(--del)}
/* the output wraps inside the panel, so a long line never pushes the page sideways */
.tmx-o{padding:0 14px 0 34px;color:var(--fg2);white-space:pre-wrap;overflow-wrap:anywhere}
.tmx-l.ok{color:var(--ok)}.tmx-l.bad{color:var(--bad)}.tmx-l.mu{color:var(--muted)}
.tmx-more{display:flex;align-items:center;gap:6px;margin-left:34px;font-family:var(--sans);font-size:12px;line-height:inherit;color:var(--muted);transition:color var(--t-fast)}
@media (hover:hover) and (pointer:fine){.tmx-more:hover{color:var(--fg)}}
.tmx-more svg{transition:transform var(--t) var(--ease)}
.tmx-more[aria-expanded="true"] svg{transform:rotate(180deg)}
/* folded lines are hidden once they have folded away, so nothing measures the clipped part as if it were drawn */
.tmx-blk .fold.shut>div{visibility:hidden;transition:visibility 0s var(--t)}
/* what the agent says between commands: its spark in the accent and its words, which shimmer while it is still working it out */
.tmx-note{margin:var(--s-2) 14px;padding-left:20px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--fg2);display:flex;gap:var(--s-2)}
.tmx-note>svg{color:var(--accent-fg,var(--accent));flex:none;margin-top:3px}
.tmx-note .shim{font-size:inherit}
.tmx-f{display:flex;align-items:center;gap:var(--s-2);padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--line) 50%,transparent);font-size:13px}
.tmx-f .g{display:grid;place-items:center;flex:none;color:var(--ok)}
.tmx-f.stop .g{color:var(--muted)}.tmx-f.bad .g{color:var(--bad)}
/* the run's state in the header is a tag in its colour: the accent while it runs, green once it passes, red if it failed */
.tmx-st{height:22px;padding:0 var(--s-2);border-radius:var(--r-tag);background:var(--chip);color:var(--fg2);transition:background .3s,color .3s}
.tmx.live .tmx-st{background:var(--accent-bg);color:var(--accent-fg,var(--fg))}
.tmx-st.ok,.tmx-st.ok .g{background:var(--ok-bg);color:var(--ok)}
.tmx-st.bad,.tmx-st.bad .g{background:var(--bad-bg);color:var(--bad)}
/* while it runs, a light sweeps along the header's lower edge */
.tmx-h{position:relative}
.tmx-h::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent-mark,var(--accent)),transparent) 0 0/40% 100% no-repeat;opacity:0;transition:opacity .4s;pointer-events:none}
.tmx.live .tmx-h::after{opacity:1;animation:tmxsweep 1.8s var(--ease-io) infinite}
@keyframes tmxsweep{from{background-position:-60% 0}to{background-position:160% 0}}
/* the output sits on a faint code surface */
/* each command and edit has a line down its left in how it went: the accent while it runs, green, red, grey once stopped */
.tmx-blk{position:relative}
.tmx-blk::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;border-radius:1px;background:var(--rail);transition:background .3s}
.tmx-blk[data-s="run"]::before{background:var(--accent-mark,var(--accent));animation:tmxpulse 1.4s var(--ease-io) infinite}
.tmx-blk[data-s="ok"]::before{background:color-mix(in srgb,var(--ok) 70%,transparent)}
.tmx-blk[data-s="bad"]::before{background:var(--bad)}
.tmx-blk[data-s="edit"]::before{background:var(--merge)}
@keyframes tmxpulse{50%{opacity:.35}}
.tmx-p{color:var(--accent-fg,var(--fg));font-weight:500}
.tmx-blk[data-s="edit"] .tmx-p{color:var(--merge)}
/* an edit shows the lines it changed, removed in red and added in green, each on its own tint */
.tmx-df{margin:2px 14px var(--s-1) 34px;border-radius:var(--r-sm);overflow:hidden}
.tmx-df div{padding:0 var(--s-2);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--fg2)}
.tmx-df .a{background:color-mix(in srgb,var(--add) 10%,transparent)}.tmx-df .a::first-letter{color:var(--add)}
.tmx-df .d{background:color-mix(in srgb,var(--del) 10%,transparent)}.tmx-df .d::first-letter{color:var(--del)}
/* a block cursor blinks after the newest line while the run goes on */
.tmx.live .tmx-body::after{content:"";display:block;width:7px;height:14px;margin:var(--s-1) 0 0 34px;background:var(--fg2);animation:bpblink 1.1s steps(1,end) infinite}
:root:not([data-style="soft"]) .tmx-h:not(:where([data-style="soft"],[data-style="soft"] *))::after{background:repeating-linear-gradient(90deg,var(--accent-mark) 0 6px,transparent 6px 12px);animation:tmxmarch .6s steps(4) infinite}
@keyframes tmxmarch{to{background-position:12px 0}}
:root:not([data-style="soft"]) .tmx-blk:not(:where([data-style="soft"],[data-style="soft"] *))::before{width:1px}
:root:not([data-style="soft"]) .tmx-blk[data-s="run"]:not(:where([data-style="soft"],[data-style="soft"] *))::before{animation:bpblink 1.1s steps(1,end) infinite}
@container (max-width:420px){.tmx-ic{display:none}.tmx-h{padding-left:var(--s-3)}.tmx-cmd{padding:0 var(--s-3)}.tmx-o{padding:0 var(--s-3)}.tmx-more{margin-left:var(--s-3)}.tmx-note{margin-inline:var(--s-3)}.tmx-f{padding-inline:var(--s-3)}.tmx-df{margin-left:var(--s-3);margin-right:var(--s-3)}.tmx-blk::before{left:3px}.tmx.live .tmx-body::after{margin-left:var(--s-3)}}

DM.def('terminal-stream', (r, c) => {
  const IC = { term:I('term'), stop:I('stop','xs'), copy:I('copy') };
  r.innerHTML = r.innerHTML.replace(/\{(\w+)\}/g, (m, k) => IC[k] || m);
  const root = $('.tmx', r), body = $('.tmx-body', r), st = $('.tmx-st', r), sv = $('.tmx-sv', r), stop = $('.tmx-stop', r), cp = $('.tmx-cp', r), ff = $('.tmx-ff', r), foot = $('.tmx-f', r);
  // what the agent does: each command with the lines it prints and how long it takes, then the one line where it says what
  // went wrong and the edit that fixes it. [text, tone] marks a line ok (green), bad (red) or mu (grey)
  const F = (n, kb) => 'dist/' + n.padEnd(22) + kb.padStart(6) + ' kB';
  const BUILD = [['> [email protected] build', 'mu'], ['> vite build', 'mu'], 'vite v6.2.1 building for production...', 'transforming...', ['✓ 1284 modules transformed.', 'ok'], 'rendering chunks...', 'computing gzip size...',
    ...[['index.html', '0.46'], ['assets/Home-1c9e.js', '3.12'], ['assets/Pricing-3f9a.js', '12.40'], ['assets/Cart-7b21.js', '9.86'], ['assets/Account-a04d.js', '7.31'], ['assets/Billing-52ce.js', '6.94'],
      ['assets/Bills-e8f3.js', '5.27'], ['assets/Team-0d6a.js', '4.88'], ['assets/Prefs-9a1b.js', '6.02'], ['assets/Docs-44f0.js', '8.15'], ['assets/Search-b7c2.js', '2.96'], ['assets/Modal-61de.js', '1.84'],
      ['assets/Chart-ef09.js', '21.73'], ['assets/Table-3a7e.js', '11.09'], ['assets/Form-c1d4.js', '4.41'], ['assets/Toast-8e2f.js', '1.12'], ['assets/dates-29bb.js', '18.30'], ['assets/vendor-8c1e.js', '98.12'],
      ['assets/index-4f2a.js', '42.31'], ['assets/index-9b7d.css', '18.92']].map(([n, kb]) => F(n, kb)), ['✓ built in 6.1s', 'ok']];
  const S = [
    { cmd:'npm install', ms:1900, out:['added 412 packages in 1.9s', 'found 0 vulnerabilities'] },
    { cmd:'npm run build', ms:6100, out:BUILD },
    { cmd:'npm test', ms:3400, exit:1, out:[['RUN  v3.0.5 ~/acme/web', 'mu'], ['✓ src/lib/cart.test.ts (14 tests)', 'ok'], ['× src/lib/price.test.ts (1 failed)', 'bad'], ['  × formats a yearly price', 'bad'],
      ['    Expected: "$240/yr"', 'ok'], ['    Received: "$240.00/yr"', 'bad'], ['Tests  1 failed | 23 passed (24)', 'bad']] },
    { note:'The test expects whole dollars, but formatPrice always adds cents. Dropping them for round amounts.', ms:1500 },
    { edit:'src/lib/price.ts', add:2, del:1, ms:1500, diff:["- return `$${n.toFixed(2)}/${per}`", '+ const v = Number.isInteger(n) ? String(n) : n.toFixed(2)', '+ return `$${v}/${per}`'] },
    { cmd:'npm test', ms:2900, out:[['✓ src/lib/cart.test.ts (14 tests)', 'ok'], ['✓ src/lib/price.test.ts (10 tests)', 'ok'], ['Tests  24 passed (24)', 'ok']] }
  ];
  // output longer than five lines folds to its last four, behind a button that says how many are hidden
  const TAIL = 4, GAP = 200;
  let vt = 0, halt = false, over = false;
  const log = [], ran = [];
  const clock = ms => { const s = Math.floor(ms / 1000); return Math.floor(s / 60) + ':' + String(s % 60).padStart(2, '0'); };
  const sec = ms => (ms / 1000).toFixed(1) + ' s';
  // time passes in steps of a quarter second at most, so the clock in the header keeps up; false once Stop is pressed
  const pass = async (ms, each) => {
    for (let t = 0; t < ms;){ if (halt) return false; const d = Math.min(250, ms - t); await c.wait(d); t += d; vt += d; if (!over) sv.textContent = 'Running · ' + clock(vt); each && each(t); }
    return !halt;
  };
  // a command or an edit: what it is on the left, a spinner and its time on the right
  function row(mark, text){
    const el = html(`<div class="tmx-blk" data-s="run"><div class="tmx-cmd"><span class="tmx-p">${mark}</span><span class="tmx-c"></span><span class="tmx-m"><span class="g"><span class="spin"></span></span><span class="t num"></span></span></div></div>`);
    $('.tmx-c', el).textContent = text; body.appendChild(el); enter(el); return el;
  }
  function lines(el){
    const more = html(`<button class="tmx-more" aria-expanded="false" hidden>${I('chev-d','xs')}<span></span></button>`), hid = html('<div class="fold shut"><div class="tmx-o"></div></div>'), tail = html('<div class="tmx-o"></div>');
    const inner = hid.firstElementChild; hid.inert = true; el.append(more, hid, tail);
    const label = () => { const n = inner.children.length, open = !hid.classList.contains('shut'); $('span', more).textContent = open ? 'Show fewer lines' : `Show ${n} more line${n > 1 ? 's' : ''}`; more.setAttribute('aria-expanded', open); };
    more.onclick = () => { hid.inert = hid.classList.toggle('shut'); label(); };
    return ([text, tone]) => {
      const l = document.createElement('div'); l.className = 'tmx-l' + (tone ? ' ' + tone : ''); l.textContent = text; tail.appendChild(l);
      if (inner.children.length + tail.children.length > TAIL + 1) while (tail.children.length > TAIL) inner.appendChild(tail.firstElementChild);
      if (inner.children.length){ more.hidden = false; label(); }
    };
  }
  const halted = el => { $('.tmx-m .g', el).innerHTML = '<span class="tag">Stopped</span>'; el.dataset.s = 'stop'; };
  function finish(how){
    over = true; stop.hidden = true; root.classList.remove('live');
    st.classList.toggle('ok', how === 'passed'); st.classList.toggle('bad', how === 'failed'); $('.g', st).innerHTML = I(how === 'passed' ? 'check' : 'stop', 'xs'); sv.textContent = how === 'passed' ? 'Passed' : how === 'failed' ? 'Failed' : 'Stopped';
    // each command counts once, however many times it ran
    const n = new Set(ran).size;
    $('.tmx-fs', foot).textContent = `${n} command${n === 1 ? '' : 's'} · ${clock(vt)} · ${how}`;
    foot.className = 'tmx-f' + (how === 'stopped' ? ' stop' : how === 'failed' ? ' bad' : ''); $('.g', foot).innerHTML = I(how === 'passed' ? 'ok' : how === 'failed' ? 'alert' : 'stop');
    ff.classList.remove('shut');
  }
  // new output keeps the log on its newest line, unless the person has scrolled up to read; then it stays where they are
  let pinned = true;
  const stick = () => { if (pinned) body.scrollTop = body.scrollHeight; };
  c.on(body, 'scroll', () => { pinned = body.scrollTop + body.clientHeight >= body.scrollHeight - 24; });
  const mo = new MutationObserver(stick); mo.observe(body, { childList:true, subtree:true }); c.offs.push(() => mo.disconnect());
  const ro = new ResizeObserver(stick); ro.observe(body); c.offs.push(() => ro.disconnect());
  stop.onclick = () => { halt = true; };
  cp.onclick = () => copied(cp, log.join('\n'));
  root.classList.add('live');
  c.run(async () => {
    let last = 0;
    for (const k of S){
      if (!await pass(GAP)) return finish('stopped');
      if (k.note){
        const n = html(`<div class="tmx-note">${I('spark','xs')}<span class="shim"></span></div>`), w = $('span', n); w.textContent = k.note; body.appendChild(n); enter(n); log.push('# ' + k.note);
        const ok = await pass(k.ms); w.classList.remove('shim');
        if (!ok) return finish('stopped');
        continue;
      }
      if (k.edit){
        const el = row(I('edit','xs'), 'Edit ' + k.edit); el.dataset.s = 'edit';
        if (!await pass(k.ms)){ halted(el); return finish('stopped'); }
        $('.tmx-m', el).innerHTML = `<span class="add">+${k.add}</span><span class="del">−${k.del}</span>`; log.push(`# Edited ${k.edit} (+${k.add} −${k.del})`);
        const df = document.createElement('div'); df.className = 'tmx-df';
        k.diff.forEach((d, i) => { const l = document.createElement('div'); l.className = d[0] === '+' ? 'a' : d[0] === '-' ? 'd' : ''; l.textContent = d; df.appendChild(l); enter(l, i * 90); });
        el.appendChild(df); log.push(...k.diff);
        continue;
      }
      const el = row('$', k.cmd), t = $('.tmx-m .t', el), add = lines(el), per = k.ms / k.out.length;
      ran.push(k.cmd); log.push('$ ' + k.cmd); t.textContent = sec(0);
      let at = 0;
      for (const ln of k.out){
        const ok = await pass(per, d => { t.textContent = sec(at + d); }); at += per;
        if (!ok){ add(['^C', 'mu']); log.push('^C'); halted(el); return finish('stopped'); }
        const pair = Array.isArray(ln) ? ln : [ln, '']; add(pair); log.push(pair[0]);
      }
      t.textContent = sec(k.ms); last = k.exit || 0;
      $('.tmx-m .g', el).innerHTML = k.exit ? `<span class="tag bad">Exit ${k.exit}</span>` : `<span class="ok">${I('check','xs')}</span>`; el.dataset.s = k.exit ? 'bad' : 'ok';
    }
    finish(last ? 'failed' : 'passed');
  });
  // the preview's story: the agent runs, fails a test, fixes it and passes; then the person copies the whole run
  c.story(async s => {
    await s.until(() => over);
    await s.beat(2);
    await s.tap(cp); await s.beat(3);
  });
});