Run drawer

'use client';
import { useEffect, useRef, useState, type ReactNode } from 'react';
import { cx } from '../lib/cx';
import { useControllable, useIsoLayoutEffect, useReducedMotion } from '../lib/hooks';
import { Icon, type IconName } from '../lib/icons';
import { Seg, Spin, Tip } from '../lib/motion';
import '../designme.css';
import './run-drawer.css';

/** The kinds of step, each with its colour: the trigger orange, AI steps and their model calls violet, tools teal, app steps
    and outputs blue, a branch yellow, a wait pink, an approval green; a wait before a retry is amber and hatched */
export type RunKind = 'trigger' | 'ai' | 'model' | 'tool' | 'app' | 'output' | 'branch' | 'wait' | 'approval' | 'retry';
/** The run's state, in colour: running in the accent, waiting amber, passed green, failed red, stopped grey */
export type RunDrawerState = 'running' | 'waiting' | 'passed' | 'failed' | 'stopped';
export interface RunDrawerStep {
  id: string;
  title: string;
  kind: RunKind;
  icon?: IconName;
  /** What the step took in and handed on, shown as JSON in Data */
  input?: unknown;
  output?: unknown;
}
/** A bar on the timeline: a step (level 0) or a model or tool call inside it (level 1), in seconds from the start */
export interface RunSpan {
  id: string;
  /** The step it belongs to */
  step: string;
  name: string;
  kind: RunKind;
  icon?: IconName;
  level?: 0 | 1;
  start: number;
  /** Left out while it runs */
  end?: number;
  /** 'bad' for a failed try, 'wait' for a step waiting on a person, 'stop' for one cut short */
  state?: 'ok' | 'bad' | 'wait' | 'stop';
}
export type RunLevel = 'debug' | 'info' | 'warn' | 'error';
export interface RunLogLine { at: number; level: RunLevel; title: string; message?: string }
export type RunTab = 'steps' | 'log' | 'data';

export interface RunDrawerProps {
  /** Shown after the label, like 2088 */
  runId: string | number;
  /** "Test run" by default */
  label?: string;
  state: RunDrawerState;
  /** Seconds since the run started */
  time: number;
  tokens?: number;
  /** In dollars */
  cost?: number;
  /** The workflow's steps, in order, for the strip over the drawer and for Data */
  steps: RunDrawerStep[];
  spans: RunSpan[];
  log: RunLogLine[];
  /** The step a run waits on for a person: shows its question with Approve and Reject */
  waiting?: { step: string; title: string; detail?: string };
  onApprove?: () => void;
  onReject?: () => void;
  /** Adds Stop while the run is running or waiting */
  onStop?: () => void;
  /** Adds Run again once it has ended */
  onRunAgain?: () => void;
  tab?: RunTab;
  defaultTab?: RunTab;
  onTabChange?: (tab: RunTab) => void;
  /** The log's level filter */
  level?: 'all' | 'warn' | 'error';
  defaultLevel?: 'all' | 'warn' | 'error';
  onLevelChange?: (level: 'all' | 'warn' | 'error') => void;
  /** Whether the newest row stays in view as the run goes */
  follow?: boolean;
  defaultFollow?: boolean;
  onFollowChange?: (follow: boolean) => void;
  /** Whether the drawer is open, or folded down to its head */
  expanded?: boolean;
  defaultExpanded?: boolean;
  onExpandedChange?: (expanded: boolean) => void;
  /** The drawer's height when open, in pixels */
  height?: number;
  defaultHeight?: number;
  onHeightChange?: (height: number) => void;
  /** The step picked on the strip, the timeline or Data */
  selected?: string | null;
  defaultSelected?: string | null;
  onSelectedChange?: (step: string | null) => void;
  /** What sits over the drawer. Left out, the workflow's steps as a strip of tiles; null leaves the drawer on its own */
  canvas?: ReactNode;
  className?: string;
}

const KIND_ICON: Record<RunKind, IconName> = { trigger: 'bolt', ai: 'spark', model: 'spark', tool: 'globe', app: 'send', output: 'hash', branch: 'branch', wait: 'clock', approval: 'user', retry: 'refresh' };
const secs = (v: number) => (v < 10 ? v.toFixed(1) : String(Math.round(v))) + 's';
const stamp = (v: number) => { const m = Math.floor(v / 60), s = v - m * 60; return String(m).padStart(2, '0') + ':' + s.toFixed(2).padStart(5, '0'); };
const Tile = ({ kind, icon }: { kind: RunKind; icon?: IconName }) => <span className="dm-rdr-ti" data-k={kind} aria-hidden="true"><Icon name={icon ?? KIND_ICON[kind]} size="xs" /></span>;
const TAG: Record<RunDrawerState, [string, string]> = { running: ['dm-run', 'Running'], waiting: ['dm-warn', 'Waiting'], passed: ['dm-ok', 'Passed'], failed: ['dm-bad', 'Failed'], stopped: ['', 'Stopped'] };
function Json({ value, label }: { value: unknown; label: string }) {
  const text = JSON.stringify(value ?? {}, null, 2) ?? '';
  const parts: ReactNode[] = []; let last = 0, i = 0;
  for (const m of text.matchAll(/("[^"]*")(\s*:)?|\b(-?\d+(?:\.\d+)?|true|false|null)\b/g)) {
    parts.push(text.slice(last, m.index));
    parts.push(m[1] ? (m[2] ? <span key={i++}><span className="dm-k">{m[1]}</span>{m[2]}</span> : <span key={i++} className="dm-s">{m[1]}</span>) : <span key={i++} className="dm-n">{m[3]}</span>);
    last = (m.index ?? 0) + m[0].length;
  }
  parts.push(text.slice(last));
  return <pre className="dm-rdr-json" tabIndex={0} aria-label={label}>{parts}</pre>;
}

/** A workflow's run in a drawer under its canvas: its state, time, tokens and cost, then a timeline of its steps with their
    model and tool calls nested, the log with its levels, and each step's data; Stop, Follow the run, a fold and a drag. */
export function RunDrawer({ runId, label = 'Test run', state, time, tokens, cost, steps, spans, log, waiting, onApprove, onReject, onStop, onRunAgain,
  tab, defaultTab = 'steps', onTabChange, level, defaultLevel = 'all', onLevelChange, follow, defaultFollow = true, onFollowChange,
  expanded, defaultExpanded = true, onExpandedChange, height, defaultHeight = 312, onHeightChange, selected, defaultSelected = null, onSelectedChange, canvas, className }: RunDrawerProps) {
  const [view, setView] = useControllable(tab, defaultTab, onTabChange);
  const [lvl, setLvl] = useControllable(level, defaultLevel, onLevelChange);
  const [fol, setFol] = useControllable(follow, defaultFollow, onFollowChange);
  const [open, setOpen] = useControllable(expanded, defaultExpanded, onExpandedChange);
  const [h, setH] = useControllable(height, defaultHeight, onHeightChange);
  const [pick, setPick] = useControllable(selected, defaultSelected, onSelectedChange);
  const reduce = useReducedMotion();
  const frame = useRef<HTMLDivElement>(null), body = useRef<HTMLDivElement>(null), rows = useRef<HTMLDivElement>(null), axis = useRef<HTMLSpanElement>(null), flow = useRef<HTMLDivElement>(null);
  const [anim, setAnim] = useState(false), [drag, setDrag] = useState<{ y: number; h: number } | null>(null), [axW, setAxW] = useState(240);
  const [uid] = useState(() => 'rdr' + Math.random().toString(36).slice(2, 7));
  const live = state === 'running' || state === 'waiting';
  const maxH = () => Math.max(160, (frame.current?.clientHeight ?? 472) - 64);
  const size = (v: number) => setH(Math.round(Math.max(120, Math.min(maxH(), v))));
  const fold = (o: boolean) => { setAnim(true); setOpen(o); setTimeout(() => setAnim(false), reduce ? 0 : 500); };

  // the axis grows with the run; its ticks and the tracks' lines share one step
  useIsoLayoutEffect(() => { const el = axis.current; if (!el) return; const ro = new ResizeObserver(() => setAxW(el.clientWidth || 240)); ro.observe(el); return () => ro.disconnect(); }, []);
  const span = Math.max(10, Math.ceil((time + .5) / 2) * 2), tick = [2, 5, 10, 20].find(x => span / x * 34 <= axW) ?? 20;
  const shown = spans.filter(s => s.start <= time + 1e-6);
  const stOf = (s: RunSpan) => s.end == null ? (state === 'stopped' ? 'stop' : s.state === 'wait' ? 'wait' : 'run') : time < s.end ? (s.kind === 'retry' ? 'retry' : 'run') : (s.state ?? 'ok');
  // the steps on the strip: the one under way ringed, a retry or a wait amber, done ones ticked
  const stepState = (id: string) => {
    const mine = shown.filter(s => s.step === id), main = mine.find(s => !s.level); if (!main) return '';
    const st = stOf(main); if (st !== 'run') return st;
    const cur = mine.filter(s => s.level).pop(); return cur && (cur.kind === 'retry' || (cur.state === 'bad' && cur.end != null && time >= cur.end)) ? 'retry' : 'run';
  };
  const lines = log.filter(l => l.at <= time + 1e-6).sort((a, b) => a.at - b.at), seen = lines.filter(l => lvl === 'all' || l.level === lvl);
  const done = steps.filter(x => shown.some(s => s.step === x.id && !s.level && s.end != null && s.end <= time + 1e-6 && (s.state ?? 'ok') === 'ok'));
  const cur = done.find(x => x.id === pick) ?? done[done.length - 1];

  // the newest row stays in view while the run is followed
  useEffect(() => {
    const b = body.current; if (!b || !fol || !live) return;
    if (view === 'steps') { const last = rows.current?.lastElementChild as HTMLElement | null; if (last && last.offsetTop + last.offsetHeight > b.scrollTop + b.clientHeight) b.scrollTop = last.offsetTop + last.offsetHeight - b.clientHeight + 6; }
    if (view === 'log') b.scrollTop = b.scrollHeight;
  }, [shown.length, lines.length, waiting, view, fol, live]);
  const running = steps.find(x => stepState(x.id) === 'run');
  useEffect(() => { const el = running && flow.current?.querySelector<HTMLElement>(`[data-s="${CSS.escape(running.id)}"]`); if (el && fol && flow.current) flow.current.scrollTo({ left: el.offsetLeft - flow.current.clientWidth / 2 + el.offsetWidth / 2, behavior: reduce ? 'auto' : 'smooth' }); }, [running?.id]); // eslint-disable-line react-hooks/exhaustive-deps

  const tag = TAG[state];
  const meta = [secs(time), tokens ? `${(tokens / 1000).toFixed(1)}k tokens` : '', cost != null && tokens ? `$${cost.toFixed(3)}` : ''].filter(Boolean).join(', ');
  const strip = canvas !== undefined ? canvas : (
    <div className="dm-rdr-flow" role="group" aria-label="Steps of the workflow" ref={flow}>
      {steps.map((x, i) => [
        i > 0 && <span key={x.id + 'w'} className={cx('dm-rdr-wire', shown.some(s => s.step === x.id) && 'dm-done')} aria-hidden="true" />,
        <Tip key={x.id} label={x.title}><button type="button" className="dm-rdr-nd" data-s={x.id} data-st={stepState(x.id) || undefined} aria-pressed={pick === x.id} aria-label={x.title} onClick={() => setPick(x.id)}>
          <Tile kind={x.kind} icon={x.icon} /><span className="dm-t">{x.title}</span><span className="dm-rdr-ns" aria-hidden="true"><Icon name="check" size="xs" /></span>
        </button></Tip>
      ])}
    </div>
  );

  const drawer = (
    <div className={cx('dm-rdr-dw', !open && 'dm-shut', anim && 'dm-anim', drag && 'dm-drag')} role="region" aria-label="Run" style={{ ['--dm-rdr-h' as string]: h + 'px' }}>
      <div className={cx('dm-rdr-grip', drag && 'dm-on')} role="separator" aria-orientation="horizontal" aria-label="Resize the run drawer" tabIndex={0} aria-valuemin={120} aria-valuemax={maxH()} aria-valuenow={h}
        onPointerDown={e => { e.currentTarget.setPointerCapture(e.pointerId); setDrag({ y: e.clientY, h: open ? h : 45 }); if (!open) setOpen(true); }}
        onPointerMove={e => { if (drag) size(drag.h - (e.clientY - drag.y)); }}
        onPointerUp={() => setDrag(null)} onPointerCancel={() => setDrag(null)}
        onKeyDown={e => { const d = ({ ArrowUp: 24, ArrowDown: -24 } as Record<string, number>)[e.key]; let v: number | null = d ? h + d : null; if (e.key === 'Home') v = 120; if (e.key === 'End') v = maxH(); if (v == null) return; e.preventDefault(); if (!open) fold(true); size(v); }}><i /></div>
      <div className="dm-rdr-h">
        <button type="button" className="dm-rdr-tg" aria-expanded={open} aria-controls={uid + '-b'} onClick={() => fold(!open)}>
          <Icon name="chev-u" size="xs" /><span><span className="dm-w">{label} </span><span className="dm-num">#{runId}</span></span>
          <span className={cx('dm-rdr-st dm-tag', tag[0])}>{state === 'running' && <Spin />}{tag[1]}</span>
        </button>
        <span className="dm-rdr-meta dm-num">{meta}</span>
        <span className="dm-rdr-sp" />
        <Seg className="dm-rdr-tabs" label="Show" value={view} onChange={setView} options={[{ value: 'steps', label: 'Steps' }, { value: 'log', label: 'Log' }, { value: 'data', label: 'Data' }]} />
        {live && onStop && <Tip label="Stop the run"><button type="button" className="dm-pill dm-ghost dm-sm dm-rdr-stop" aria-label="Stop the run" onClick={onStop}><Icon name="stop" size="xs" /><span>Stop</span></button></Tip>}
        {!live && onRunAgain && <Tip label="Run again"><button type="button" className="dm-pill dm-ghost dm-sm dm-rdr-again" aria-label="Run again" onClick={onRunAgain}><Icon name="refresh" size="xs" /><span>Run again</span></button></Tip>}
        <Tip label={fol ? 'Follow the run' : 'Stay put'}><button type="button" className="dm-ib dm-rdr-follow" aria-pressed={fol} aria-label="Follow the run" onClick={() => setFol(!fol)}><Icon name="target" /></button></Tip>
      </div>
      <div className="dm-rdr-b" id={uid + '-b'} ref={body}>
        <div className="dm-rdr-v" data-v="steps" hidden={view !== 'steps'}>
          <div className="dm-rdr-ax" aria-hidden="true"><span>Step</span><span className="dm-rdr-sc" ref={axis}>{Array.from({ length: Math.floor(span / tick) }, (_, i) => <span key={i} style={{ left: `${i * tick / span * 100}%` }}>{i * tick}s</span>)}</span><span className="dm-ms">Time</span></div>
          <div className="dm-rdr-rows" role="group" aria-label="Steps of the run" ref={rows} style={{ ['--dm-rdr-g' as string]: `${tick / span * 100}%` }}>
            {shown.map(s => {
              const st = stOf(s), e = s.end == null ? time : Math.min(s.end, time);
              return [
                <button type="button" key={s.id} className={cx('dm-rdr-r', !reduce && 'dm-in', st === 'run' && 'dm-run')} data-k={s.kind} data-lv={s.level ?? 0} data-st={st} style={{ ['--dm-lv' as string]: s.level ?? 0 }} aria-pressed={pick === s.step}
                  aria-label={`${s.name}, ${({ run: 'running', retry: 'waiting to try again', wait: 'waiting for approval', bad: 'failed', stop: 'stopped', ok: 'done' } as Record<string, string>)[st]}, ${secs(e - s.start)}`} onClick={() => setPick(s.step)}>
                  <span className="dm-rdr-n"><Tile kind={s.kind} icon={s.icon} /><span className="dm-rdr-nm">{s.name}</span></span>
                  <span className="dm-rdr-bt"><i style={{ left: `${s.start / span * 100}%`, width: `${Math.max(.6, (e - s.start) / span * 100)}%` }} /></span>
                  <span className="dm-rdr-ms dm-num">{st === 'wait' ? 'Waiting' : st === 'bad' ? 'Failed' : st === 'stop' ? 'Stopped' : secs(e - s.start)}</span>
                </button>,
                waiting && state === 'waiting' && waiting.step === s.step && !s.level && (
                  <div key={s.id + 'ask'} className={cx('dm-rdr-ask', !reduce && 'dm-in')} role="group" aria-label={`${waiting.title} waits for you`}>
                    <Tile kind="approval" icon="user" />
                    <span className="dm-tx"><b>{waiting.title}</b>{waiting.detail && <span>{waiting.detail}</span>}</span>
                    <span className="dm-acts">
                      {onApprove && <button type="button" className="dm-pill dm-primary dm-sm" data-a="yes" onClick={onApprove}><Icon name="check" size="xs" />Approve</button>}
                      {onReject && <button type="button" className="dm-pill dm-line dm-sm" data-a="no" onClick={onReject}>Reject</button>}
                    </span>
                  </div>
                )
              ];
            })}
          </div>
        </div>
        <div className="dm-rdr-v" data-v="log" hidden={view !== 'log'}>
          <div className="dm-rdr-lf">
            <Seg className="dm-rdr-lvs" label="Level" value={lvl} onChange={setLvl} options={[{ value: 'all', label: 'All' }, { value: 'warn', label: 'Warnings' }, { value: 'error', label: 'Errors' }]} />
            <span className="dm-n dm-num">{seen.length} {seen.length === 1 ? 'line' : 'lines'}</span>
          </div>
          {seen.length ? <ol className="dm-rdr-log" aria-label="Run log">
            {seen.map((l, i) => <li key={l.at + l.title + i} className={cx('dm-rdr-l', !reduce && 'dm-in')} data-l={l.level}><span className="dm-t dm-num">{stamp(l.at)}</span><span className="dm-lv dm-tag" data-l={l.level}>{l.level}</span><span className="dm-m"><b>{l.title}</b> {l.message && <span>{l.message}</span>}</span></li>)}
          </ol> : <p className="dm-rdr-le">No {lvl === 'warn' ? 'warnings' : lvl === 'error' ? 'errors' : 'lines'} in this run yet.</p>}
        </div>
        <div className="dm-rdr-v" data-v="data" hidden={view !== 'data'}>
          {cur ? <div className="dm-rdr-data">
            <div className="dm-rdr-ds" role="group" aria-label="Steps">
              {done.map(x => <button type="button" key={x.id} aria-pressed={x === cur} onClick={() => setPick(x.id)}><Tile kind={x.kind} icon={x.icon} /><span>{x.title}</span></button>)}
            </div>
            <div className="dm-rdr-io"><h4>Input</h4><Json value={cur.input} label={`${cur.title} input`} /><h4>Output</h4><Json value={cur.output} label={`${cur.title} output`} /></div>
          </div> : <p className="dm-rdr-de">No step has finished yet.</p>}
        </div>
      </div>
    </div>
  );
  if (canvas === null) return <div data-dm="" className={className}>{drawer}</div>;
  return (
    <div data-dm="" ref={frame} className={cx('dm-rdr', className)}>
      <div className="dm-rdr-cv">{strip}</div>
      {drawer}
    </div>
  );
}

/* Generated from designme.dev by scripts/sync.mjs. Edit the site, then sync. */
/* ---------- Run drawer ---------- */
/* the run of a workflow, in a drawer under its canvas that folds down to one line and drags taller. Its head says the run's
   state in colour (running in the accent, waiting amber, passed green, failed red, stopped grey), the time, the tokens and the
   cost, then Steps, Log and Data, Stop and Follow the run. Steps is a timeline with each step's model and tool calls nested
   under it, each bar in its kind's colour, a failed try red and the wait before a retry hatched amber. Log is the run's lines
   with their levels in colour, filtered by level. Data is what each step took in and handed on, as JSON */
.dm-rdr{position:relative;width:100%;height:472px;container:rdrf/inline-size;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--dm-r-card);background:var(--dm-surface);box-shadow:var(--dm-shadow);text-align:left}
.dm-rdr-cv{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:var(--dm-s-4) var(--dm-s-3);background:var(--dm-stage);background-image:radial-gradient(circle at center,color-mix(in srgb,var(--dm-fg) 9%,transparent) 1px,transparent 1.5px);background-size:16px 16px;overflow:hidden}
.dm-rdr-flow{position:relative;display:flex;align-items:center;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:6px}
.dm-rdr-flow::-webkit-scrollbar{display:none}
.dm-rdr-wire{flex:none;width:14px;height:1.5px;background:var(--dm-faint);transition:background .4s var(--dm-ease)}
.dm-rdr-wire.dm-done{background:color-mix(in srgb,var(--dm-fg) 40%,var(--dm-faint))}
.dm-rdr-nd{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 7px;border-radius:calc(10px * var(--dm-rk));background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 80%,transparent);font-size:12px;white-space:nowrap;transition:box-shadow .3s,opacity .3s}
@media (hover:hover) and (pointer:fine){.dm-rdr-nd:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line-strong) 50%,transparent)}}
.dm-rdr-nd .dm-t{max-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;transition:max-width var(--dm-t) var(--dm-ease),opacity var(--dm-t) var(--dm-ease)}
.dm-rdr-nd:is([data-st="run"],[data-st="retry"],[data-st="wait"],[data-st="bad"],[aria-pressed="true"]) .dm-t{max-width:132px;opacity:1}
.dm-rdr-nd[aria-pressed="true"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-pick-on) 75%,transparent),var(--dm-shadow-pop)}
.dm-rdr-nd[data-st="run"]{box-shadow:0 0 0 1.5px var(--dm-accent-mark,var(--dm-accent))}
.dm-rdr-nd[data-st="bad"]{box-shadow:0 0 0 1.5px var(--dm-bad)}
.dm-rdr-nd:is([data-st="retry"],[data-st="wait"]){box-shadow:0 0 0 1.5px var(--dm-warn-mark)}
.dm-rdr-nd[data-st="skip"]{opacity:.5}
.dm-rdr-ns{display:none;width:14px;height:14px;place-items:center;color:var(--dm-ok)}
.dm-rdr-nd[data-st="ok"] .dm-rdr-ns{display:grid;margin-left:-2px}
.dm-rdr-nd[data-st="ok"] .dm-rdr-ns .dm-i{width:12px;height:12px}
.dm-rdr-ti{width:18px;height:18px;flex:none;display:grid;place-items:center;border-radius:calc(5px * var(--dm-rk));background:var(--dm-rdr-kb,var(--dm-chip));color:var(--dm-rdr-kf,var(--dm-fg2))}
.dm-rdr-ti .dm-i{width:11px;height:11px}
.dm-rdr [data-k],.dm-rdr-dw [data-k]{--dm-rdr-kb:var(--dm-chip);--dm-rdr-kf:var(--dm-fg2);--dm-rdr-kc:var(--dm-faint)}
.dm-rdr [data-k="trigger"],.dm-rdr-dw [data-k="trigger"]{--dm-rdr-kb:var(--dm-pp-bg);--dm-rdr-kf:var(--dm-pp);--dm-rdr-kc:var(--dm-pp)}
.dm-rdr [data-k="ai"],.dm-rdr-dw [data-k="ai"]{--dm-rdr-kb:var(--dm-pl-bg);--dm-rdr-kf:var(--dm-pl);--dm-rdr-kc:var(--dm-pl)}
.dm-rdr [data-k="model"],.dm-rdr-dw [data-k="model"]{--dm-rdr-kb:var(--dm-pl-bg);--dm-rdr-kf:var(--dm-pl);--dm-rdr-kc:color-mix(in srgb,var(--dm-pl) 75%,var(--dm-surface))}
.dm-rdr [data-k="tool"],.dm-rdr-dw [data-k="tool"]{--dm-rdr-kb:var(--dm-pt-bg);--dm-rdr-kf:var(--dm-pt);--dm-rdr-kc:var(--dm-pt)}
.dm-rdr :is([data-k="app"],[data-k="output"]),.dm-rdr-dw :is([data-k="app"],[data-k="output"]){--dm-rdr-kb:var(--dm-pb-bg);--dm-rdr-kf:var(--dm-pb);--dm-rdr-kc:var(--dm-pb)}
.dm-rdr [data-k="branch"],.dm-rdr-dw [data-k="branch"]{--dm-rdr-kb:var(--dm-py-bg);--dm-rdr-kf:var(--dm-py);--dm-rdr-kc:var(--dm-py)}
.dm-rdr [data-k="wait"],.dm-rdr-dw [data-k="wait"]{--dm-rdr-kb:var(--dm-pk-bg);--dm-rdr-kf:var(--dm-pk);--dm-rdr-kc:var(--dm-pk)}
.dm-rdr [data-k="approval"],.dm-rdr-dw [data-k="approval"]{--dm-rdr-kb:var(--dm-pm-bg);--dm-rdr-kf:var(--dm-pm);--dm-rdr-kc:var(--dm-pm)}
.dm-rdr [data-k="retry"],.dm-rdr-dw [data-k="retry"]{--dm-rdr-kb:var(--dm-warn-bg);--dm-rdr-kf:var(--dm-warn);--dm-rdr-kc:var(--dm-warn-mark)}
/* the drawer */
.dm-rdr-dw{position:relative;flex:none;height:var(--dm-rdr-h,312px);display:flex;flex-direction:column;background:var(--dm-surface);border-top:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent);container:rdr/inline-size}
.dm-rdr-dw.dm-shut{height:45px}
.dm-rdr-dw.dm-anim{transition:height var(--dm-t) var(--dm-ease)}
.dm-rdr-grip{position:absolute;left:0;right:0;top:-6px;z-index:3;height:12px;display:grid;place-items:center;cursor:ns-resize;touch-action:none;outline:0}
.dm-rdr-grip i{display:block;width:32px;height:4px;border-radius:2px;background:var(--dm-rail);opacity:0;transition:opacity var(--dm-t-fast),background var(--dm-t-fast)}
.dm-rdr-grip.dm-on i{opacity:1}
@media (hover:hover) and (pointer:fine){.dm-rdr-grip:hover i{opacity:1}}
.dm-rdr-grip:focus-visible i{opacity:1;background:var(--dm-line-strong)}
.dm-rdr-dw.dm-drag{user-select:none}
.dm-rdr-h{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);height:44px;padding:0 var(--dm-s-2) 0 6px}
.dm-rdr-tg{flex:none;display:inline-flex;align-items:center;gap:var(--dm-s-2);min-width:0;height:30px;padding:0 var(--dm-s-2);border-radius:var(--dm-r-sm);font-size:13px;font-weight:500;white-space:nowrap;transition:background var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-rdr-tg:hover{background:var(--dm-row)}}
.dm-rdr-tg>.dm-i{color:var(--dm-muted);transform:rotate(180deg);transition:transform var(--dm-t) var(--dm-ease)}
.dm-rdr-dw.dm-shut .dm-rdr-tg>.dm-i{transform:none}
.dm-rdr-st.dm-tag .dm-spin{width:9px;height:9px;border-width:1.5px}
.dm-rdr-st.dm-run{background:var(--dm-accent-bg);color:var(--dm-accent-fg,var(--dm-accent))}
.dm-rdr-meta{min-width:0;font-size:12.5px;color:var(--dm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-rdr-sp{flex:1}
.dm-rdr-tabs{flex:none}
.dm-rdr-tabs button{padding:0 10px}
.dm-rdr-stop,.dm-rdr-again{flex:none}
.dm-rdr-follow{width:28px;height:28px;flex:none;color:var(--dm-muted)}
.dm-rdr-follow[aria-pressed="true"]{background:var(--dm-row);color:var(--dm-fg)}
.dm-rdr-dw.dm-shut :is(.dm-rdr-tabs,.dm-rdr-follow){display:none}
.dm-rdr-b{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--dm-rail) transparent;padding:0 var(--dm-s-3) var(--dm-s-3)}
.dm-rdr-dw.dm-shut .dm-rdr-b{display:none}
.dm-rdr-v[hidden]{display:none}
/* Steps: the timeline */
.dm-rdr-ax,.dm-rdr-r{display:grid;grid-template-columns:minmax(0,15fr) minmax(0,14fr) 56px;align-items:center;gap:var(--dm-s-2);padding:0 var(--dm-s-2)}
.dm-rdr-ax{position:sticky;top:0;z-index:2;height:28px;background:var(--dm-surface);box-shadow:0 1px 0 color-mix(in srgb,var(--dm-line) 50%,transparent);font-size:12px;color:var(--dm-muted)}
.dm-rdr-ax .dm-ms{text-align:right}
.dm-rdr-sc{position:relative;height:16px}
.dm-rdr-sc span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.dm-rdr-sc span:first-child{transform:none}
.dm-rdr-rows{display:flex;flex-direction:column;padding-top:var(--dm-s-1)}
.dm-rdr-r{width:100%;min-height:30px;border-radius:calc(8px * var(--dm-rk));font-size:12.5px;text-align:left;transition:background .16s}
@media (hover:hover) and (pointer:fine){.dm-rdr-r:hover{background:var(--dm-row)}}
.dm-rdr-r[aria-pressed="true"]{background:var(--dm-sel)}
.dm-rdr-r.dm-in{animation:dm-enter var(--dm-t) var(--dm-ease) backwards}
.dm-rdr-n{display:flex;align-items:center;gap:6px;min-width:0;padding-left:calc(var(--dm-lv,0) * 18px)}
.dm-rdr-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-rdr-r[data-lv="0"] .dm-rdr-nm{font-weight:500}
.dm-rdr-bt{position:relative;height:18px;background:linear-gradient(to right,color-mix(in srgb,var(--dm-line) 70%,transparent) 1px,transparent 1px) 0 0/var(--dm-rdr-g,20%) 100%}
.dm-rdr-bt i{position:absolute;top:5px;height:8px;min-width:3px;border-radius:calc(2.5px * var(--dm-rk));background:var(--dm-rdr-kc)}
.dm-rdr-r.dm-run .dm-rdr-bt i{animation:dm-rdrrun 1.2s var(--dm-ease-io) infinite}
@keyframes dm-rdrrun{50%{opacity:.55}}
.dm-rdr-r[data-st="bad"] .dm-rdr-bt i{background:var(--dm-bad-mark)}
.dm-rdr-r[data-st="stop"] .dm-rdr-bt i{background:var(--dm-faint)}
.dm-rdr-r[data-k="retry"] .dm-rdr-bt i,.dm-rdr-r[data-st="wait"] .dm-rdr-bt i{background:repeating-linear-gradient(135deg,var(--dm-warn-mark) 0 3px,color-mix(in srgb,var(--dm-warn-mark) 45%,var(--dm-surface)) 3px 6px)}
.dm-rdr-ms{text-align:right;font-size:12px;color:var(--dm-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-rdr-r[data-st="bad"] .dm-rdr-ms{color:var(--dm-bad)}
.dm-rdr-r:is([data-k="retry"],[data-st="wait"]) .dm-rdr-ms{color:var(--dm-warn)}
/* what the run waits for: a person's yes */
.dm-rdr-ask{display:flex;align-items:center;flex-wrap:wrap;width:100%;box-sizing:border-box;gap:var(--dm-s-2) var(--dm-s-3);margin:6px 0 var(--dm-s-1);padding:10px var(--dm-s-3);border-radius:var(--dm-r-in);background:var(--dm-warn-bg);font-size:12.5px}
.dm-rdr-ask.dm-in{animation:dm-enter var(--dm-t) var(--dm-ease) backwards}
.dm-rdr-ask .dm-tx{flex:1;min-width:min(200px,100%);display:flex;flex-direction:column;line-height:1.4}
.dm-rdr-ask .dm-tx b{font-weight:500;color:var(--dm-fg)}
.dm-rdr-ask .dm-tx span{color:var(--dm-fg2)}
.dm-rdr-ask .dm-acts{display:flex;gap:6px}
.dm-rdr-ask .dm-pill.dm-line{background:var(--dm-surface)}
/* Log: the lines, their levels in colour */
.dm-rdr-lf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--dm-s-2);padding:var(--dm-s-2) 0 6px;background:var(--dm-surface)}
.dm-rdr-lf .dm-n{margin-left:auto;font-size:12px;color:var(--dm-muted)}
.dm-rdr-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dm-rdr-l{display:grid;grid-template-columns:62px 56px minmax(0,1fr);align-items:baseline;gap:var(--dm-s-2);padding:5px var(--dm-s-2);border-radius:calc(8px * var(--dm-rk));font-size:12.5px;line-height:1.45}
.dm-rdr-l.dm-in{animation:dm-enter var(--dm-t) var(--dm-ease) backwards}
.dm-rdr-l .dm-t{font-size:12px;color:var(--dm-muted)}
.dm-rdr-l .dm-lv{justify-self:start;height:18px;padding:0 6px;font-size:11px}
.dm-rdr-l .dm-lv[data-l="debug"]{background:var(--dm-chip);color:var(--dm-fg2)}
.dm-rdr-l .dm-lv[data-l="info"]{background:var(--dm-pb-bg);color:var(--dm-pb)}
.dm-rdr-l .dm-lv[data-l="warn"]{background:var(--dm-warn-bg);color:var(--dm-warn)}
.dm-rdr-l .dm-lv[data-l="error"]{background:var(--dm-bad-bg);color:var(--dm-bad)}
.dm-rdr-l .dm-m{min-width:0}
.dm-rdr-l .dm-m b{font-weight:500}
.dm-rdr-l .dm-m span{color:var(--dm-fg2)}
.dm-rdr-l[data-l="error"]{background:color-mix(in srgb,var(--dm-bad-bg) 45%,transparent)}
.dm-rdr-le{margin:0;padding:var(--dm-s-4) var(--dm-s-2);font-size:12.5px;color:var(--dm-muted)}
/* Data: each step's input and output */
.dm-rdr-data{display:grid;grid-template-columns:176px minmax(0,1fr);gap:var(--dm-s-3);padding-top:var(--dm-s-2)}
.dm-rdr-ds{display:flex;flex-direction:column;gap:2px;min-width:0}
.dm-rdr-ds button{display:flex;align-items:center;gap:var(--dm-s-2);width:100%;min-width:0;height:30px;padding:0 var(--dm-s-2);border-radius:var(--dm-r-sm);font-size:12.5px;text-align:left;transition:background var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-rdr-ds button:hover{background:var(--dm-row)}}
.dm-rdr-ds button[aria-pressed="true"]{background:var(--dm-sel);font-weight:500}
.dm-rdr-ds button span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-rdr-io{display:flex;flex-direction:column;gap:var(--dm-s-2);min-width:0}
.dm-rdr-io h4{margin:0;font-size:12px;font-weight:500;color:var(--dm-muted)}
.dm-rdr-json{margin:0;padding:var(--dm-s-2) 10px;border-radius:var(--dm-r-in);background:var(--dm-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent);font-family:var(--dm-mono);font-size:12px;line-height:1.6;color:var(--dm-fg);white-space:pre;overflow-x:auto;scrollbar-width:thin}
.dm-rdr-json .dm-k{color:var(--dm-pb)}
.dm-rdr-json .dm-s{color:var(--dm-pm)}
.dm-rdr-json .dm-n{color:var(--dm-pl)}
.dm-rdr-de{margin:0;padding:var(--dm-s-4) var(--dm-s-2);font-size:12.5px;color:var(--dm-muted)}
.dm-rdr-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a narrow drawer keeps the run's state and its switch, and gives up the details */
@container rdr (max-width:620px){
  .dm-rdr-meta,.dm-rdr-tg .dm-w{display:none}
  .dm-rdr-stop span,.dm-rdr-again span{display:none}
  .dm-rdr-stop,.dm-rdr-again{width:28px;padding:0}
  .dm-rdr-ax,.dm-rdr-r{grid-template-columns:minmax(0,1fr) 30% 48px;padding:0 6px}
  .dm-rdr-data{grid-template-columns:minmax(0,1fr)}
  .dm-rdr-ds{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .dm-rdr-ds button{flex:none;width:auto}
  .dm-rdr-l{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  .dm-rdr-l .dm-t{grid-column:1}
  .dm-rdr-l .dm-m{grid-column:1/-1}
}
@container rdr (max-width:440px){.dm-rdr-tabs button{padding:0 8px}.dm-rdr-follow,.dm-rdr-tg>span:not(.dm-rdr-st){display:none}.dm-rdr-h{gap:6px}}
@container rdrf (max-width:400px){.dm-rdr-nd:not([aria-pressed="true"]) .dm-t{max-width:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.dm-rdr-r.dm-in,.dm-rdr-l.dm-in,.dm-rdr-ask.dm-in,.dm-rdr-r.dm-run .dm-rdr-bt i{animation:none!important}.dm-rdr-dw.dm-anim,.dm-rdr-nd .dm-t{transition:none}}
:root:not([data-style="soft"]) .dm-rdr-ti:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-rdr-kf,var(--dm-rail)) 30%,transparent)}
:root:not([data-style="soft"]) .dm-rdr-r.dm-run .dm-rdr-bt i:not(:where([data-style="soft"],[data-style="soft"] *)){animation:none;background:repeating-linear-gradient(90deg,var(--dm-rdr-kc) 0 4px,color-mix(in srgb,var(--dm-rdr-kc) 50%,var(--dm-surface)) 4px 6px)}
:root:not([data-style="soft"]) .dm-rdr-ask:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-warn-mark) 45%,transparent)}

---
// Generated from designme.dev by scripts/sync.mjs. Edit the site, then sync.
// Run drawer: A workflow's run under its canvas: the steps, the log and the data.
// The markup, CSS and script are designme.dev's own, run by the shared core in ../core, which mounts the component when it scrolls
// into view and plays its demo. To show your own data, change run-drawer.js. The markup is kept exactly as it is (is:raw).
import type { HTMLAttributes } from 'astro/types';
import '../core/designme.css';
import './run-drawer.css';

export interface Props extends HTMLAttributes<'div'> {
  /** "soft" draws it in the Soft style. Leave it out for Blueprint, or for the style set on <html> (data-style="soft") */
  'data-style'?: 'soft';
}
const { class: className, ...rest } = Astro.props;
---
<div class:list={['card', 'wide', className]} data-c="run-drawer" {...rest}>
  <div class="stage-in"><Fragment is:raw>
<div class="rdr" data-reveal="flat">
  <div class="rdr-cv"><div class="rdr-flow" role="group" aria-label="Steps of the workflow"></div></div>
  <div class="rdr-dw" role="region" aria-label="Run">
    <div class="rdr-grip" role="separator" aria-orientation="horizontal" aria-label="Resize the run drawer" tabindex="0" aria-valuemin="120" aria-valuemax="408" aria-valuenow="312"><i></i></div>
    <div class="rdr-h">
      <button class="rdr-tg" aria-expanded="true"><svg class="i xs"><use href="#i-chev-u"/></svg><span><span class="w">Test run </span><span class="rdr-id num">#2088</span></span><span class="rdr-st tag run"><span class="spin"></span>Running</span></button>
      <span class="rdr-meta num"></span>
      <span class="rdr-sp"></span>
      <div class="seg2 rdr-tabs" role="group" aria-label="Show"><button aria-pressed="true" data-v="steps">Steps</button><button aria-pressed="false" data-v="log">Log</button><button aria-pressed="false" data-v="data">Data</button></div>
      <button class="pill ghost sm rdr-stop" aria-label="Stop the run" data-tip="Stop the run"><svg class="i xs"><use href="#i-stop"/></svg><span>Stop</span></button>
      <button class="pill ghost sm rdr-again" aria-label="Run again" data-tip="Run again" hidden><svg class="i xs"><use href="#i-refresh"/></svg><span>Run again</span></button>
      <button class="ib rdr-follow" aria-pressed="true" aria-label="Follow the run" data-tip="Follow the run"><svg class="i s"><use href="#i-target"/></svg></button>
    </div>
    <div class="rdr-b">
      <div class="rdr-v" data-v="steps"><div class="rdr-ax" aria-hidden="true"><span>Step</span><span class="rdr-sc"></span><span class="ms">Time</span></div><div class="rdr-rows" role="group" aria-label="Steps of the run"></div></div>
      <div class="rdr-v" data-v="log" hidden><div class="rdr-lf"><div class="seg2 rdr-lvs" role="group" aria-label="Level"><button aria-pressed="true" data-v="all">All</button><button aria-pressed="false" data-v="warn">Warnings</button><button aria-pressed="false" data-v="error">Errors</button></div><span class="n num"></span></div><ol class="rdr-log" aria-label="Run log"></ol></div>
      <div class="rdr-v" data-v="data" hidden><div class="rdr-data"><div class="rdr-ds" role="group" aria-label="Steps"></div><div class="rdr-io"></div></div></div>
    </div>
    <p class="rdr-live" aria-live="polite"></p>
  </div>
</div>
  </Fragment></div>
</div>
<script>
  import './run-drawer.js';
</script>

<div class="card wide" data-c="run-drawer">
  <div class="stage-in">
    <div class="rdr" data-reveal="flat">
      <div class="rdr-cv"><div class="rdr-flow" role="group" aria-label="Steps of the workflow"></div></div>
      <div class="rdr-dw" role="region" aria-label="Run">
        <div class="rdr-grip" role="separator" aria-orientation="horizontal" aria-label="Resize the run drawer" tabindex="0" aria-valuemin="120" aria-valuemax="408" aria-valuenow="312"><i></i></div>
        <div class="rdr-h">
          <button class="rdr-tg" aria-expanded="true"><svg class="i xs"><use href="#i-chev-u"/></svg><span><span class="w">Test run </span><span class="rdr-id num">#2088</span></span><span class="rdr-st tag run"><span class="spin"></span>Running</span></button>
          <span class="rdr-meta num"></span>
          <span class="rdr-sp"></span>
          <div class="seg2 rdr-tabs" role="group" aria-label="Show"><button aria-pressed="true" data-v="steps">Steps</button><button aria-pressed="false" data-v="log">Log</button><button aria-pressed="false" data-v="data">Data</button></div>
          <button class="pill ghost sm rdr-stop" aria-label="Stop the run" data-tip="Stop the run"><svg class="i xs"><use href="#i-stop"/></svg><span>Stop</span></button>
          <button class="pill ghost sm rdr-again" aria-label="Run again" data-tip="Run again" hidden><svg class="i xs"><use href="#i-refresh"/></svg><span>Run again</span></button>
          <button class="ib rdr-follow" aria-pressed="true" aria-label="Follow the run" data-tip="Follow the run"><svg class="i s"><use href="#i-target"/></svg></button>
        </div>
        <div class="rdr-b">
          <div class="rdr-v" data-v="steps"><div class="rdr-ax" aria-hidden="true"><span>Step</span><span class="rdr-sc"></span><span class="ms">Time</span></div><div class="rdr-rows" role="group" aria-label="Steps of the run"></div></div>
          <div class="rdr-v" data-v="log" hidden><div class="rdr-lf"><div class="seg2 rdr-lvs" role="group" aria-label="Level"><button aria-pressed="true" data-v="all">All</button><button aria-pressed="false" data-v="warn">Warnings</button><button aria-pressed="false" data-v="error">Errors</button></div><span class="n num"></span></div><ol class="rdr-log" aria-label="Run log"></ol></div>
          <div class="rdr-v" data-v="data" hidden><div class="rdr-data"><div class="rdr-ds" role="group" aria-label="Steps"></div><div class="rdr-io"></div></div></div>
        </div>
        <p class="rdr-live" aria-live="polite"></p>
      </div>
    </div>
  </div>
</div>

/* ---------- Run drawer ---------- */
/* the run of a workflow, in a drawer under its canvas that folds down to one line and drags taller. Its head says the run's
   state in colour (running in the accent, waiting amber, passed green, failed red, stopped grey), the time, the tokens and the
   cost, then Steps, Log and Data, Stop and Follow the run. Steps is a timeline with each step's model and tool calls nested
   under it, each bar in its kind's colour, a failed try red and the wait before a retry hatched amber. Log is the run's lines
   with their levels in colour, filtered by level. Data is what each step took in and handed on, as JSON */
.rdr{position:relative;width:100%;height:472px;container:rdrf/inline-size;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--dm-r-card);background:var(--dm-surface);box-shadow:var(--dm-shadow);text-align:left}
.rdr-cv{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:var(--dm-s-4) var(--dm-s-3);background:var(--dm-stage);background-image:radial-gradient(circle at center,color-mix(in srgb,var(--dm-fg) 9%,transparent) 1px,transparent 1.5px);background-size:16px 16px;overflow:hidden}
.rdr-flow{position:relative;display:flex;align-items:center;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:6px}
.rdr-flow::-webkit-scrollbar{display:none}
.rdr-wire{flex:none;width:14px;height:1.5px;background:var(--dm-faint);transition:background .4s var(--dm-ease)}
.rdr-wire.done{background:color-mix(in srgb,var(--dm-fg) 40%,var(--dm-faint))}
.rdr-nd{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 7px;border-radius:calc(10px * var(--dm-rk));background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 80%,transparent);font-size:12px;white-space:nowrap;transition:box-shadow .3s,opacity .3s}
@media (hover:hover) and (pointer:fine){.rdr-nd:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line-strong) 50%,transparent)}}
.rdr-nd .t{max-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;transition:max-width var(--dm-t) var(--dm-ease),opacity var(--dm-t) var(--dm-ease)}
.rdr-nd:is([data-st="run"],[data-st="retry"],[data-st="wait"],[data-st="bad"],[aria-pressed="true"]) .t{max-width:132px;opacity:1}
.rdr-nd[aria-pressed="true"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-pick-on) 75%,transparent),var(--dm-shadow-pop)}
.rdr-nd[data-st="run"]{box-shadow:0 0 0 1.5px var(--dm-accent-mark,var(--dm-accent))}
.rdr-nd[data-st="bad"]{box-shadow:0 0 0 1.5px var(--dm-bad)}
.rdr-nd:is([data-st="retry"],[data-st="wait"]){box-shadow:0 0 0 1.5px var(--dm-warn-mark)}
.rdr-nd[data-st="skip"]{opacity:.5}
.rdr-ns{display:none;width:14px;height:14px;place-items:center;color:var(--dm-ok)}
.rdr-nd[data-st="ok"] .rdr-ns{display:grid;margin-left:-2px}
.rdr-nd[data-st="ok"] .rdr-ns .i{width:12px;height:12px}
.rdr-ti{width:18px;height:18px;flex:none;display:grid;place-items:center;border-radius:calc(5px * var(--dm-rk));background:var(--dm-rdr-kb,var(--dm-chip));color:var(--dm-rdr-kf,var(--dm-fg2))}
.rdr-ti .i{width:11px;height:11px}
.rdr [data-k],.rdr-dw [data-k]{--dm-rdr-kb:var(--dm-chip);--dm-rdr-kf:var(--dm-fg2);--dm-rdr-kc:var(--dm-faint)}
.rdr [data-k="trigger"],.rdr-dw [data-k="trigger"]{--dm-rdr-kb:var(--dm-pp-bg);--dm-rdr-kf:var(--dm-pp);--dm-rdr-kc:var(--dm-pp)}
.rdr [data-k="ai"],.rdr-dw [data-k="ai"]{--dm-rdr-kb:var(--dm-pl-bg);--dm-rdr-kf:var(--dm-pl);--dm-rdr-kc:var(--dm-pl)}
.rdr [data-k="model"],.rdr-dw [data-k="model"]{--dm-rdr-kb:var(--dm-pl-bg);--dm-rdr-kf:var(--dm-pl);--dm-rdr-kc:color-mix(in srgb,var(--dm-pl) 75%,var(--dm-surface))}
.rdr [data-k="tool"],.rdr-dw [data-k="tool"]{--dm-rdr-kb:var(--dm-pt-bg);--dm-rdr-kf:var(--dm-pt);--dm-rdr-kc:var(--dm-pt)}
.rdr :is([data-k="app"],[data-k="output"]),.rdr-dw :is([data-k="app"],[data-k="output"]){--dm-rdr-kb:var(--dm-pb-bg);--dm-rdr-kf:var(--dm-pb);--dm-rdr-kc:var(--dm-pb)}
.rdr [data-k="branch"],.rdr-dw [data-k="branch"]{--dm-rdr-kb:var(--dm-py-bg);--dm-rdr-kf:var(--dm-py);--dm-rdr-kc:var(--dm-py)}
.rdr [data-k="wait"],.rdr-dw [data-k="wait"]{--dm-rdr-kb:var(--dm-pk-bg);--dm-rdr-kf:var(--dm-pk);--dm-rdr-kc:var(--dm-pk)}
.rdr [data-k="approval"],.rdr-dw [data-k="approval"]{--dm-rdr-kb:var(--dm-pm-bg);--dm-rdr-kf:var(--dm-pm);--dm-rdr-kc:var(--dm-pm)}
.rdr [data-k="retry"],.rdr-dw [data-k="retry"]{--dm-rdr-kb:var(--dm-warn-bg);--dm-rdr-kf:var(--dm-warn);--dm-rdr-kc:var(--dm-warn-mark)}
/* the drawer */
.rdr-dw{position:relative;flex:none;height:var(--dm-rdr-h,312px);display:flex;flex-direction:column;background:var(--dm-surface);border-top:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent);container:rdr/inline-size}
.rdr-dw.shut{height:45px}
.rdr-dw.anim{transition:height var(--dm-t) var(--dm-ease)}
.rdr-grip{position:absolute;left:0;right:0;top:-6px;z-index:3;height:12px;display:grid;place-items:center;cursor:ns-resize;touch-action:none;outline:0}
.rdr-grip i{display:block;width:32px;height:4px;border-radius:2px;background:var(--dm-rail);opacity:0;transition:opacity var(--dm-t-fast),background var(--dm-t-fast)}
.rdr-grip.on i{opacity:1}
@media (hover:hover) and (pointer:fine){.rdr-grip:hover i{opacity:1}}
.rdr-grip:focus-visible i{opacity:1;background:var(--dm-line-strong)}
.rdr-dw.drag{user-select:none}
.rdr-h{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);height:44px;padding:0 var(--dm-s-2) 0 6px}
.rdr-tg{flex:none;display:inline-flex;align-items:center;gap:var(--dm-s-2);min-width:0;height:30px;padding:0 var(--dm-s-2);border-radius:var(--dm-r-sm);font-size:13px;font-weight:500;white-space:nowrap;transition:background var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.rdr-tg:hover{background:var(--dm-row)}}
.rdr-tg>.i{color:var(--dm-muted);transform:rotate(180deg);transition:transform var(--dm-t) var(--dm-ease)}
.rdr-dw.shut .rdr-tg>.i{transform:none}
.rdr-st.tag .spin{width:9px;height:9px;border-width:1.5px}
.rdr-st.run{background:var(--dm-accent-bg);color:var(--dm-accent-fg,var(--dm-accent))}
.rdr-meta{min-width:0;font-size:12.5px;color:var(--dm-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdr-sp{flex:1}
.rdr-tabs{flex:none}
.rdr-tabs button{padding:0 10px}
.rdr-stop,.rdr-again{flex:none}
.rdr-follow{width:28px;height:28px;flex:none;color:var(--dm-muted)}
.rdr-follow[aria-pressed="true"]{background:var(--dm-row);color:var(--dm-fg)}
.rdr-dw.shut :is(.rdr-tabs,.rdr-follow){display:none}
.rdr-b{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--dm-rail) transparent;padding:0 var(--dm-s-3) var(--dm-s-3)}
.rdr-dw.shut .rdr-b{display:none}
.rdr-v[hidden]{display:none}
/* Steps: the timeline */
.rdr-ax,.rdr-r{display:grid;grid-template-columns:minmax(0,15fr) minmax(0,14fr) 56px;align-items:center;gap:var(--dm-s-2);padding:0 var(--dm-s-2)}
.rdr-ax{position:sticky;top:0;z-index:2;height:28px;background:var(--dm-surface);box-shadow:0 1px 0 color-mix(in srgb,var(--dm-line) 50%,transparent);font-size:12px;color:var(--dm-muted)}
.rdr-ax .ms{text-align:right}
.rdr-sc{position:relative;height:16px}
.rdr-sc span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.rdr-sc span:first-child{transform:none}
.rdr-rows{display:flex;flex-direction:column;padding-top:var(--dm-s-1)}
.rdr-r{width:100%;min-height:30px;border-radius:calc(8px * var(--dm-rk));font-size:12.5px;text-align:left;transition:background .16s}
@media (hover:hover) and (pointer:fine){.rdr-r:hover{background:var(--dm-row)}}
.rdr-r[aria-pressed="true"]{background:var(--dm-sel)}
.rdr-r.in{animation:enter var(--dm-t) var(--dm-ease) backwards}
.rdr-n{display:flex;align-items:center;gap:6px;min-width:0;padding-left:calc(var(--dm-lv,0) * 18px)}
.rdr-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdr-r[data-lv="0"] .rdr-nm{font-weight:500}
.rdr-bt{position:relative;height:18px;background:linear-gradient(to right,color-mix(in srgb,var(--dm-line) 70%,transparent) 1px,transparent 1px) 0 0/var(--dm-rdr-g,20%) 100%}
.rdr-bt i{position:absolute;top:5px;height:8px;min-width:3px;border-radius:calc(2.5px * var(--dm-rk));background:var(--dm-rdr-kc)}
.rdr-r.run .rdr-bt i{animation:rdrrun 1.2s var(--dm-ease-io) infinite}
@keyframes rdrrun{50%{opacity:.55}}
.rdr-r[data-st="bad"] .rdr-bt i{background:var(--dm-bad-mark)}
.rdr-r[data-st="stop"] .rdr-bt i{background:var(--dm-faint)}
.rdr-r[data-k="retry"] .rdr-bt i,.rdr-r[data-st="wait"] .rdr-bt i{background:repeating-linear-gradient(135deg,var(--dm-warn-mark) 0 3px,color-mix(in srgb,var(--dm-warn-mark) 45%,var(--dm-surface)) 3px 6px)}
.rdr-ms{text-align:right;font-size:12px;color:var(--dm-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdr-r[data-st="bad"] .rdr-ms{color:var(--dm-bad)}
.rdr-r:is([data-k="retry"],[data-st="wait"]) .rdr-ms{color:var(--dm-warn)}
/* what the run waits for: a person's yes */
.rdr-ask{display:flex;align-items:center;flex-wrap:wrap;width:100%;box-sizing:border-box;gap:var(--dm-s-2) var(--dm-s-3);margin:6px 0 var(--dm-s-1);padding:10px var(--dm-s-3);border-radius:var(--dm-r-in);background:var(--dm-warn-bg);font-size:12.5px}
.rdr-ask.in{animation:enter var(--dm-t) var(--dm-ease) backwards}
.rdr-ask .tx{flex:1;min-width:min(200px,100%);display:flex;flex-direction:column;line-height:1.4}
.rdr-ask .tx b{font-weight:500;color:var(--dm-fg)}
.rdr-ask .tx span{color:var(--dm-fg2)}
.rdr-ask .acts{display:flex;gap:6px}
.rdr-ask .pill.line{background:var(--dm-surface)}
/* Log: the lines, their levels in colour */
.rdr-lf{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--dm-s-2);padding:var(--dm-s-2) 0 6px;background:var(--dm-surface)}
.rdr-lf .n{margin-left:auto;font-size:12px;color:var(--dm-muted)}
.rdr-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rdr-l{display:grid;grid-template-columns:62px 56px minmax(0,1fr);align-items:baseline;gap:var(--dm-s-2);padding:5px var(--dm-s-2);border-radius:calc(8px * var(--dm-rk));font-size:12.5px;line-height:1.45}
.rdr-l.in{animation:enter var(--dm-t) var(--dm-ease) backwards}
.rdr-l .t{font-size:12px;color:var(--dm-muted)}
.rdr-l .lv{justify-self:start;height:18px;padding:0 6px;font-size:11px}
.rdr-l .lv[data-l="debug"]{background:var(--dm-chip);color:var(--dm-fg2)}
.rdr-l .lv[data-l="info"]{background:var(--dm-pb-bg);color:var(--dm-pb)}
.rdr-l .lv[data-l="warn"]{background:var(--dm-warn-bg);color:var(--dm-warn)}
.rdr-l .lv[data-l="error"]{background:var(--dm-bad-bg);color:var(--dm-bad)}
.rdr-l .m{min-width:0}
.rdr-l .m b{font-weight:500}
.rdr-l .m span{color:var(--dm-fg2)}
.rdr-l[data-l="error"]{background:color-mix(in srgb,var(--dm-bad-bg) 45%,transparent)}
.rdr-le{margin:0;padding:var(--dm-s-4) var(--dm-s-2);font-size:12.5px;color:var(--dm-muted)}
/* Data: each step's input and output */
.rdr-data{display:grid;grid-template-columns:176px minmax(0,1fr);gap:var(--dm-s-3);padding-top:var(--dm-s-2)}
.rdr-ds{display:flex;flex-direction:column;gap:2px;min-width:0}
.rdr-ds button{display:flex;align-items:center;gap:var(--dm-s-2);width:100%;min-width:0;height:30px;padding:0 var(--dm-s-2);border-radius:var(--dm-r-sm);font-size:12.5px;text-align:left;transition:background var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.rdr-ds button:hover{background:var(--dm-row)}}
.rdr-ds button[aria-pressed="true"]{background:var(--dm-sel);font-weight:500}
.rdr-ds button span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdr-io{display:flex;flex-direction:column;gap:var(--dm-s-2);min-width:0}
.rdr-io h4{margin:0;font-size:12px;font-weight:500;color:var(--dm-muted)}
.rdr-json{margin:0;padding:var(--dm-s-2) 10px;border-radius:var(--dm-r-in);background:var(--dm-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent);font-family:var(--dm-mono);font-size:12px;line-height:1.6;color:var(--dm-fg);white-space:pre;overflow-x:auto;scrollbar-width:thin}
.rdr-json .k{color:var(--dm-pb)}
.rdr-json .s{color:var(--dm-pm)}
.rdr-json .n{color:var(--dm-pl)}
.rdr-de{margin:0;padding:var(--dm-s-4) var(--dm-s-2);font-size:12.5px;color:var(--dm-muted)}
.rdr-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a narrow drawer keeps the run's state and its switch, and gives up the details */
@container rdr (max-width:620px){
  .rdr-meta,.rdr-tg .w{display:none}
  .rdr-stop span,.rdr-again span{display:none}
  .rdr-stop,.rdr-again{width:28px;padding:0}
  .rdr-ax,.rdr-r{grid-template-columns:minmax(0,1fr) 30% 48px;padding:0 6px}
  .rdr-data{grid-template-columns:minmax(0,1fr)}
  .rdr-ds{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .rdr-ds button{flex:none;width:auto}
  .rdr-l{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  .rdr-l .t{grid-column:1}
  .rdr-l .m{grid-column:1/-1}
}
@container rdr (max-width:440px){.rdr-tabs button{padding:0 8px}.rdr-follow,.rdr-tg>span:not(.rdr-st){display:none}.rdr-h{gap:6px}}
@container rdrf (max-width:400px){.rdr-nd:not([aria-pressed="true"]) .t{max-width:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.rdr-r.in,.rdr-l.in,.rdr-ask.in,.rdr-r.run .rdr-bt i{animation:none!important}.rdr-dw.anim,.rdr-nd .t{transition:none}}
:root:not([data-style="soft"]) .rdr-ti:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-rdr-kf,var(--dm-rail)) 30%,transparent)}
:root:not([data-style="soft"]) .rdr-r.run .rdr-bt i:not(:where([data-style="soft"],[data-style="soft"] *)){animation:none;background:repeating-linear-gradient(90deg,var(--dm-rdr-kc) 0 4px,color-mix(in srgb,var(--dm-rdr-kc) 50%,var(--dm-surface)) 4px 6px)}
:root:not([data-style="soft"]) .rdr-ask:not(:where([data-style="soft"],[data-style="soft"] *)){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-warn-mark) 45%,transparent)}

DM.def('run-drawer', (r, c) => {
  r.innerHTML = r.innerHTML.replace(/\{([\w-]+)(?:\.(xs))?\}/g, (m, k, z) => I(k, z || 's'));
  const uid = 'rdr' + Math.random().toString(36).slice(2, 7);
  const frame = $('.rdr', r), dw = $('.rdr-dw', r), flow = $('.rdr-flow', r), tg = $('.rdr-tg', r), stT = $('.rdr-st', r), idT = $('.rdr-id', r), meta = $('.rdr-meta', r);
  const bd = $('.rdr-b', r), rowsEl = $('.rdr-rows', r), sc = $('.rdr-sc', r), logEl = $('.rdr-log', r), cnt = $('.rdr-lf .n', r), ds = $('.rdr-ds', r), io = $('.rdr-io', r);
  const stopB = $('.rdr-stop', r), againB = $('.rdr-again', r), followB = $('.rdr-follow', r), grip = $('.rdr-grip', r), live = $('.rdr-live', r);
  bd.id = uid + '-b'; tg.setAttribute('aria-controls', bd.id);
  // the workflow: each step with what it took in and handed on; an AI step's model and tool calls are its kids, as
  // [kind, name, icon, seconds, tokens, error]; the lookup is rate limited once, so it waits and tries again
  const STEPS = [
    { id:'form', t:'Demo request form', k:'trigger', ic:'file-text', d:.25, in:{ source:'Website form', form:'Book a demo' }, out:{ name:'Priya Shah', email:'[email protected]', company:'Corvid Analytics', seats:240 }, log:['debug', 'New submission from [email protected]'] },
    { id:'research', t:'Research and score', k:'ai', ic:'spark', in:{ company:'Corvid Analytics', email:'[email protected]', seats:240 }, out:{ score:84, tier:'Enterprise', reasons:['Asked for 240 seats', 'Support team use case', 'Series B and hiring'] }, log:['info', 'Scored 84, Enterprise'],
      kids:[['model', 'Sonnet 5.5, reads the input', 'spark', .6, 380], ['tool', 'Company lookup', 'globe', 1.5, 0, '429 Too many requests'], ['retry', 'Wait 2s, then try again', 'refresh', 2], ['tool', 'Company lookup, try 2', 'globe', .7], ['model', 'Sonnet 5.5, writes the score', 'spark', 1.25, 1240]] },
    { id:'fit', t:'Good fit?', k:'branch', ic:'branch', d:.1, in:{ score:84, rule:'score is at least 70' }, out:{ path:'Yes' }, log:['info', 'score is 84, at least 70, so it took Yes'] },
    { id:'reply', t:'Draft a reply', k:'ai', ic:'edit', in:{ name:'Priya Shah', reasons:'3 reasons' }, out:{ subject:'Your demo with Fernhill', body:'Hi Priya, thanks for reaching out about 240 seats.' }, log:['info', 'Drafted "Your demo with Fernhill"'],
      kids:[['model', 'Sonnet 5.5, writes the reply', 'spark', 1.2, 980]] },
    { id:'approve', t:'Rep approves', k:'approval', ic:'user', ask:'Maya Kim or Theo Reed', in:{ ask:['Maya Kim', 'Theo Reed'], via:'Slack message', shows:'reply.body' }, out:{ decision:'Approved', by:'You' } },
    { id:'send', t:'Send the reply', k:'app', ic:'mail', d:.55, in:{ to:'[email protected]', subject:'Your demo with Fernhill' }, out:{ message_id:'msg_8f2c41', sent:true }, log:['info', 'Sent to [email protected]'] },
    { id:'post', t:'Post to Slack', k:'output', ic:'hash', d:.4, in:{ channel:'#inbound-leads', text:'Priya Shah at Corvid Analytics scored 84' }, out:{ ts:'1731062520.4' }, log:['info', 'Posted to #inbound-leads'] }
  ];
  const byId = id => STEPS.find(x => x.id === id);
  flow.innerHTML = STEPS.map((x, i) => (i ? '<span class="rdr-wire" aria-hidden="true"></span>' : '') + `<button class="rdr-nd" data-s="${x.id}" aria-pressed="false" aria-label="${x.t}" data-tip="${x.t}"><span class="rdr-ti" data-k="${x.k}" aria-hidden="true">${I(x.ic, 'xs')}</span><span class="t">${x.t}</span><span class="rdr-ns" aria-hidden="true">${I('check', 'xs')}</span></button>`).join('');
  let run = 2087, R = null, tab = 'steps', lvl = 'all', follow = true, picked = null, last = 0;
  const say = t => { live.textContent = ''; c.later(40, () => { live.textContent = t; }); };
  const secs = v => (v < 10 ? v.toFixed(1) : Math.round(v)) + 's';
  const stamp = v => { const m = Math.floor(v / 60), s = v - m * 60; return String(m).padStart(2, '0') + ':' + s.toFixed(2).padStart(5, '0'); };
  // a run: its spans (one per step and per model or tool call) and its log, planned up to the step that waits for a person
  function plan(from, t0){
    for (let i = from; i < STEPS.length; i++){
      const x = STEPS[i];
      if (x.ask){ R.sp.push({ s:x.id, t:x.t, k:x.k, ic:x.ic, lv:0, a:t0, e:null, st:'wait' }); R.log.push({ at:t0, l:'warn', b:x.t, m:`Waiting for ${x.ask}` }); R.pause = { i, at:t0 }; return; }
      if (!x.kids){ R.sp.push({ s:x.id, t:x.t, k:x.k, ic:x.ic, lv:0, a:t0, e:t0 + x.d, st:'ok' }); t0 += x.d; R.log.push({ at:t0, l:x.log[0], b:x.t, m:x.log[1] }); continue; }
      const p = { s:x.id, t:x.t, k:x.k, ic:x.ic, lv:0, a:t0, e:null, st:'ok' }; R.sp.push(p);
      for (const [k, t, ic, d, tok, err] of x.kids){
        R.sp.push({ s:x.id, t, k, ic, lv:1, a:t0, e:t0 + d, st:err ? 'bad' : 'ok', tok, err });
        if (k === 'model') R.log.push({ at:t0 + d, l:'debug', b:t, m:`${tok.toLocaleString('en-US')} tokens` });
        if (err) R.log.push({ at:t0 + d, l:'error', b:t, m:err });
        if (k === 'retry') R.log.push({ at:t0, l:'warn', b:'Company lookup', m:'Trying again in 2s, try 2 of 2' });
        if (k === 'tool' && !err) R.log.push({ at:t0 + d, l:'info', b:'Company lookup', m:'Found Corvid Analytics on try 2' });
        t0 += d;
      }
      p.e = t0; R.log.push({ at:t0, l:x.log[0], b:x.t, m:x.log[1] });
    }
    R.end = t0; R.log.push({ at:t0, l:'info', b:'Run passed', m:`${secs(t0)}, 1 retry` });
  }
  function start(){
    R = { id:++run, t:0, st:'run', sp:[], log:[], pause:null, end:null, rows:new Map(), logN:0 };
    R.log.push({ at:0, l:'info', b:'Run started', m:'Test run with Priya Shah, Corvid Analytics' });
    plan(0, 0); rowsEl.innerHTML = ''; logEl.innerHTML = ''; picked = null; idT.textContent = '#' + R.id;
    stopB.hidden = false; againB.hidden = true; paint(true); say(`Test run #${R.id} started`);
  }
  const node = id => $(`.rdr-nd[data-s="${id}"]`, flow);
  function stateOf(sp, t){ if (sp.st === 'stop') return 'stop'; if (sp.e == null) return R.st === 'stopped' ? 'stop' : sp.st; return t < sp.e ? (sp.k === 'retry' ? 'retry' : 'run') : sp.st; }
  // the canvas, the timeline, the log, the data and the head all follow the run's clock
  function paint(force){
    const t = R.t, sps = R.sp.filter(x => x.a <= t + 1e-6);
    // the steps on the canvas: the one under way ringed, a retry or a wait amber, done ones ticked
    STEPS.forEach((x, i) => {
      const mine = sps.filter(p => p.s === x.id), main = mine.find(p => p.lv === 0);
      let st = '';
      if (main){ const ms = stateOf(main, t);
        if (ms === 'run'){ const cur = mine.filter(p => p.lv === 1).pop(); st = cur && (cur.k === 'retry' || (cur.st === 'bad' && t >= cur.e)) ? 'retry' : 'run'; } else st = ms; }
      const el = node(x.id); if (el.dataset.st !== st){ el.dataset.st = st; if (st === 'run' && follow && R.st === 'run'){ const l = el.offsetLeft - flow.clientWidth / 2 + el.offsetWidth / 2; flow.scrollTo({ left:l, behavior:REDUCE ? 'auto' : 'smooth' }); } }
      const w = el.previousElementSibling; if (w) w.classList.toggle('done', !!main);
    });
    // the timeline's axis grows with the run
    const span = Math.max(10, Math.ceil((t + .5) / 2) * 2), wpx = sc.clientWidth || 240, step = [2, 5, 10, 20].find(x => span / x * 34 <= wpx) || 20;
    const key = span * 100 + step; if (key !== R.ax){ R.ax = key; rowsEl.style.setProperty('--dm-rdr-g', (step / span * 100) + '%'); sc.innerHTML = Array.from({ length:Math.floor(span / step) }, (_, i) => `<span style="left:${i * step / span * 100}%">${i * step}s</span>`).join(''); }
    sps.forEach(p => {
      let el = R.rows.get(p);
      if (!el){
        el = html(`<button class="rdr-r" data-s="${p.s}" data-k="${p.k}" data-lv="${p.lv}" style="--dm-lv:${p.lv}" aria-pressed="${p.s === picked}"><span class="rdr-n"><span class="rdr-ti" data-k="${p.k}" aria-hidden="true">${I(p.ic, 'xs')}</span><span class="rdr-nm">${p.t}</span></span><span class="rdr-bt"><i></i></span><span class="rdr-ms num"></span></button>`);
        R.rows.set(p, el); rowsEl.appendChild(el); if (!force && !REDUCE) el.classList.add('in');
      }
      const st = stateOf(p, t), e = p.e == null ? t : Math.min(p.e, t);
      el.dataset.st = st; el.classList.toggle('run', st === 'run');
      const i = $('.rdr-bt i', el); i.style.left = (p.a / span * 100) + '%'; i.style.width = Math.max(.6, (e - p.a) / span * 100) + '%';
      $('.rdr-ms', el).textContent = st === 'wait' ? 'Waiting' : st === 'bad' && p.e != null ? 'Failed' : st === 'stop' ? 'Stopped' : secs(e - p.a);
      el.setAttribute('aria-label', `${p.t}, ${{ run:'running', retry:'waiting to try again', wait:'waiting for approval', bad:'failed', stop:'stopped', ok:'done' }[st]}, ${secs(e - p.a)}`);
    });
    // a person's yes, under the step that waits for it
    const ask = $('.rdr-ask', rowsEl);
    if (R.st === 'wait' && !ask){ const p = R.sp[R.sp.length - 1], x = byId(p.s), el = R.rows.get(p);
      if (el) el.insertAdjacentHTML('afterend', `<div class="rdr-ask${REDUCE ? '' : ' in'}" role="group" aria-label="${x.t} waits for you"><span class="rdr-ti" data-k="approval" aria-hidden="true">${I('user', 'xs')}</span><span class="tx"><b>${x.t} is waiting for you</b><span>Live runs ask ${x.ask} in Slack. In a test, you decide.</span></span><span class="acts"><button class="pill primary sm" data-a="yes">${I('check', 'xs')}Approve</button><button class="pill line sm" data-a="no">Reject</button></span></div>`); }
    if (R.st !== 'wait' && ask) ask.remove();
    // the log, a line at a time, its levels in colour
    const L = R.log.filter(l => l.at <= t + 1e-6).sort((a, b) => a.at - b.at);
    for (; R.logN < L.length; R.logN++){ const l = L[R.logN];
      const li = html(`<li class="rdr-l" data-l="${l.l}"><span class="t num">${stamp(l.at)}</span><span class="lv tag" data-l="${l.l}">${l.l}</span><span class="m"><b>${l.b}</b> <span>${l.m}</span></span></li>`);
      li.hidden = lvl !== 'all' && l.l !== lvl; logEl.appendChild(li); if (!force && !REDUCE && !li.hidden) li.classList.add('in'); }
    filterLog(false);
    // the newest line in view while the run is followed
    if (follow && (R.st === 'run' || R.st === 'wait' || force)){ if (tab === 'steps'){ const b = rowsEl.lastElementChild; if (b && b.offsetTop + b.offsetHeight > bd.scrollTop + bd.clientHeight) bd.scrollTop = b.offsetTop + b.offsetHeight - bd.clientHeight + 6; } if (tab === 'log') bd.scrollTop = bd.scrollHeight; }
    // the head: the run's state, its time, tokens and cost
    const tag = { run:['run', '<span class="spin"></span>Running'], wait:['warn', 'Waiting'], ok:['ok', 'Passed'], bad:['bad', 'Failed'], stopped:['', 'Stopped'] }[R.st];
    if (stT.dataset.s !== R.st){ stT.dataset.s = R.st; stT.className = 'rdr-st tag ' + tag[0]; stT.innerHTML = tag[1]; }
    const tok = Math.round(R.sp.filter(p => p.tok && p.a <= t).reduce((n, p) => n + p.tok * Math.min(1, (t - p.a) / (p.e - p.a)), 0));
    meta.textContent = [secs(t), tok ? `${(tok / 1000).toFixed(1)}k tokens` : '', tok ? `$${(tok * .0000045).toFixed(3)}` : ''].filter(Boolean).join(', ');
    if (tab === 'data' && (force || Math.floor(t * 2) !== R.dq)){ R.dq = Math.floor(t * 2); paintData(); }
  }
  function filterLog(anim){ let n = 0; $$('.rdr-l', logEl).forEach(li => { const show = lvl === 'all' || li.dataset.l === lvl; if (li.hidden === show){ li.hidden = !show; if (show && anim && !REDUCE){ li.classList.remove('in'); void li.offsetWidth; li.classList.add('in'); } } if (show) n++; });
    cnt.textContent = `${n} ${n === 1 ? 'line' : 'lines'}`;
    let e = $('.rdr-le', logEl.parentElement); if (!n && !e){ logEl.insertAdjacentHTML('afterend', `<p class="rdr-le">No ${lvl === 'warn' ? 'warnings' : 'errors'} in this run.</p>`); } if (n && e) e.remove(); }
  // the data each finished step took in and handed on, as JSON
  const json = o => JSON.stringify(o, null, 2).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/("[^"]*")(\s*:)?|\b(-?\d+(?:\.\d+)?|true|false|null)\b/g, (m, s, colon, n) => s ? (colon ? `<span class="k">${s}</span>${colon}` : `<span class="s">${s}</span>`) : `<span class="n">${n}</span>`);
  function paintData(){
    const t = R.t, done = STEPS.filter(x => R.sp.some(p => p.s === x.id && p.lv === 0 && p.e != null && p.e <= t + 1e-6 && p.st === 'ok'));
    if (!done.length){ ds.innerHTML = ''; io.innerHTML = '<p class="rdr-de">No step has finished yet.</p>'; return; }
    const cur = done.find(x => x.id === picked) || done[done.length - 1];
    ds.innerHTML = done.map(x => `<button data-s="${x.id}" aria-pressed="${x === cur}"><span class="rdr-ti" data-k="${x.k}" aria-hidden="true">${I(x.ic, 'xs')}</span><span>${x.t}</span></button>`).join('');
    const out = x => x.id === 'approve' ? { decision:R.ok === false ? 'Rejected' : 'Approved', by:'You' } : x.out;
    io.innerHTML = `<h4>Input</h4><pre class="rdr-json" tabindex="0" aria-label="${cur.t} input">${json(cur.in)}</pre><h4>Output</h4><pre class="rdr-json" tabindex="0" aria-label="${cur.t} output">${json(out(cur))}</pre>`;
  }
  const pick = id => { picked = id; $$('.rdr-r', rowsEl).forEach(b => b.setAttribute('aria-pressed', String(b.dataset.s === id))); $$('.rdr-nd', flow).forEach(b => b.setAttribute('aria-pressed', String(b.dataset.s === id))); if (tab === 'data') paintData(); };
  function decide(ok){
    if (!R || R.st !== 'wait') return; const p = R.sp[R.sp.length - 1], x = byId(p.s); p.e = R.t; p.st = ok ? 'ok' : 'bad';
    if (ok){ R.log.push({ at:R.t, l:'info', b:x.t, m:'Approved by you' }); R.st = 'run'; R.ok = true; plan(R.pause.i + 1, R.t); R.pause = null; say(`${x.t}: approved. The run carries on`); }
    else { R.ok = false; R.log.push({ at:R.t, l:'error', b:x.t, m:'Rejected by you. Nothing was sent' }); R.st = 'bad'; R.end = R.t; finish(); }
    paint();
  }
  function finish(){ stopB.hidden = true; againB.hidden = false; say(R.st === 'ok' ? `Test run passed in ${secs(R.t)}` : R.st === 'bad' ? 'Test run failed' : 'Run stopped'); }
  // the run's clock, at the pace of a real one; while a step waits for a person the clock runs on and its bar grows
  c.loop(ts => {
    const dt = last ? Math.min(.1, (ts - last) / 1000) : 0; last = ts;
    if (!R || (R.st !== 'run' && R.st !== 'wait')) return;
    R.t += dt;
    if (R.st === 'wait'){ paint(); return; }
    if (R.pause && R.t >= R.pause.at){ R.t = R.pause.at; R.st = 'wait'; say(`${byId(R.sp[R.sp.length - 1].s).t} is waiting for you to approve`); }
    if (R.end != null && R.t >= R.end){ R.t = R.end; R.st = 'ok'; paint(); finish(); return; }
    paint();
  });
  c.on(stopB, 'click', () => { if (!R || (R.st !== 'run' && R.st !== 'wait')) return;
    R.sp = R.sp.filter(p => p.a <= R.t); R.sp.forEach(p => { if (p.e == null || p.e > R.t){ p.e = R.t; p.st = 'stop'; } });
    R.log = R.log.filter(l => l.at <= R.t); R.log.push({ at:R.t, l:'warn', b:'Run stopped', m:`You stopped it at ${secs(R.t)}` }); R.st = 'stopped'; R.pause = null; R.end = R.t; paint(); finish(); if (againB) againB.focus({ preventScroll:true }); });
  c.on(againB, 'click', e => { start(); if (e.isTrusted) stopB.focus({ preventScroll:true }); });
  c.on(r, 'click', e => {
    const a = e.target.closest('.rdr-ask [data-a]'); if (a) return decide(a.dataset.a === 'yes');
    const b = e.target.closest('.rdr-r, .rdr-nd, .rdr-ds button'); if (!b) return;
    pick(b.dataset.s);
    if (b.matches('.rdr-nd') && tab === 'steps'){ const row = $(`.rdr-r[data-s="${b.dataset.s}"]`, rowsEl); if (row) bd.scrollTop = Math.max(0, row.offsetTop - 34); }
  });
  // Steps, Log and Data; the log's level filter
  const tabs = seg($('.rdr-tabs', r), v => { tab = v; $$('.rdr-v', r).forEach(x => x.hidden = x.dataset.v !== v); bd.scrollTop = 0; if (v === 'data') paintData(); if (v === 'log' && follow && R.st === 'run') bd.scrollTop = bd.scrollHeight; });
  seg($('.rdr-lvs', r), v => { lvl = v; filterLog(true); });
  c.on(followB, 'click', () => { follow = !follow; followB.setAttribute('aria-pressed', String(follow)); followB.dataset.tip = follow ? 'Follow the run' : 'Stay put'; say(follow ? 'Following the run' : 'Staying put'); });
  // the drawer folds down to its head, and drags taller from its top edge (or the arrow keys on it)
  const maxH = () => Math.max(160, frame.clientHeight - 64);
  const setH = h => { h = Math.round(Math.max(120, Math.min(maxH(), h))); dw.style.setProperty('--dm-rdr-h', h + 'px'); grip.setAttribute('aria-valuenow', h); grip.setAttribute('aria-valuemax', maxH()); };
  const fold = open => { dw.classList.add('anim'); dw.classList.toggle('shut', !open); tg.setAttribute('aria-expanded', String(open)); c.later(REDUCE ? 0 : 500, () => dw.classList.remove('anim')); };
  c.on(tg, 'click', () => fold(dw.classList.contains('shut')));
  let g = null;
  c.on(grip, 'pointerdown', e => { g = { y:e.clientY, h:dw.classList.contains('shut') ? 45 : dw.getBoundingClientRect().height }; grip.setPointerCapture(e.pointerId); grip.classList.add('on'); dw.classList.add('drag'); if (dw.classList.contains('shut')){ dw.classList.remove('shut'); tg.setAttribute('aria-expanded', 'true'); } });
  c.on(grip, 'pointermove', e => { if (g) setH(g.h - (e.clientY - g.y)); });
  const up = () => { g = null; grip.classList.remove('on'); dw.classList.remove('drag'); }; c.on(grip, 'pointerup', up); c.on(grip, 'pointercancel', up);
  c.on(grip, 'keydown', e => { const cur = dw.getBoundingClientRect().height, d = { ArrowUp:24, ArrowDown:-24 }[e.key]; let h = null;
    if (d) h = cur + d; if (e.key === 'Home') h = 120; if (e.key === 'End') h = maxH(); if (h == null) return; e.preventDefault(); if (dw.classList.contains('shut')) fold(true); setH(h); });
  setH(312);
  start();
  // the preview's story: approve the step the run waits on, then read the log, its errors, and what the research handed on
  c.story(async s => {
    await s.until(() => R.st === 'wait'); await s.beat(2.4);
    await s.tap($('.rdr-ask [data-a="yes"]', r));
    await s.until(() => R.st === 'ok'); await s.beat(1.6);
    await s.tap($('.rdr-tabs [data-v="log"]', r)); await s.beat(2.4);
    await s.tap($('.rdr-lvs [data-v="error"]', r)); await s.beat(2.4);
    await s.tap($('.rdr-tabs [data-v="data"]', r)); await s.beat(1.4);
    await s.tap($('.rdr-ds [data-s="research"]', r)); await s.beat(3);
  });
});