Agent harness

'use client';
import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
import { cx } from '../lib/cx';
import { useControllable, useCopied, useIsoLayoutEffect, useReducedMotion } from '../lib/hooks';
import { Icon, type IconName } from '../lib/icons';
import { Fold, Spin, Swap, Think, Tip, enter } from '../lib/motion';
import { usePopover } from '../lib/popover';
import { ActionLog, type ActionLogProps } from '../action-log/ActionLog';
import { AgentLanes, type AgentLanesProps } from '../agent-lanes/AgentLanes';
import { ArtifactCard, type ArtifactCardProps } from '../artifact-card/ArtifactCard';
import { ChangeReview, type ChangeReviewProps } from '../change-review/ChangeReview';
import { Composer, type ComposerAttachment, type ComposerProps } from '../composer/Composer';
import { DecisionPrompt, type DecisionPromptProps } from '../decision-prompt/DecisionPrompt';
import { ErrorRecovery, type ErrorRecoveryProps } from '../error-recovery/ErrorRecovery';
import { LiveAnswer, type LiveAnswerProps } from '../live-answer/LiveAnswer';
import { PermissionGate, type PermissionGateProps } from '../permission-gate/PermissionGate';
import { PlanReview, type PlanReviewProps } from '../plan-review/PlanReview';
import { RunSummary, type RunSummaryProps } from '../run-summary/RunSummary';
import { SourceStack, type SourceStackProps } from '../source-stack/SourceStack';
import { StatusPill, type StatusPillProps } from '../status-pill/StatusPill';
import { Thinking, type ThinkingProps } from '../thinking/Thinking';
import { ToolCall, type ToolCallProps } from '../tool-call/ToolCall';
import '../designme.css';
import '../live-answer/live-answer.css';
import '../context-meter/context-meter.css';
import './agent-harness.css';

/** One message in a chat: what the person asked, what the agent said, its work, or one of the components it works through */
export type AgentHarnessBlock = { key: string } & (
  /** The person's message, as a bubble */
  | { kind: 'user'; text: string; files?: string[] }
  /** The agent's words. Pass the text so far and each new word fades in as it arrives */
  | { kind: 'say'; text: string }
  /** A passing line with the thinking mark, while the agent does something quick, like "Reading 8 sources" */
  | { kind: 'working'; text: string }
  /** The agent's work under one line: open while it runs, folded into its label a moment after it is done. The person can open it again */
  | { kind: 'group'; label: string; state: 'running' | 'done'; seconds?: number; blocks: AgentHarnessBlock[] }
  | { kind: 'thinking'; props: ThinkingProps }
  | { kind: 'tool-call'; props: ToolCallProps }
  | { kind: 'permission-gate'; props: PermissionGateProps }
  | { kind: 'plan-review'; props: PlanReviewProps }
  | { kind: 'action-log'; props: ActionLogProps }
  | { kind: 'run-summary'; props: RunSummaryProps }
  | { kind: 'live-answer'; props: LiveAnswerProps }
  | { kind: 'source-stack'; props: SourceStackProps }
  | { kind: 'artifact-card'; props: ArtifactCardProps }
  | { kind: 'error-recovery'; props: ErrorRecoveryProps }
  | { kind: 'decision-prompt'; props: DecisionPromptProps }
  | { kind: 'agent-lanes'; props: AgentLanesProps }
  | { kind: 'change-review'; props: ChangeReviewProps }
  /** Anything else, as it is */
  | { kind: 'node'; node: ReactNode }
);

/** running shows a spinner beside the chat and holds new messages back, waiting an amber dot (the agent needs the person), done nothing */
export type AgentHarnessState = 'idle' | 'running' | 'waiting' | 'done';

/** What the status pill beside the tabs says while the chat is on screen */
export interface AgentHarnessStatus extends Pick<StatusPillProps, 'state' | 'label' | 'meta' | 'action'> {
  /** The key of a block the agent is waiting on. Adds a Review button that scrolls to it */
  review?: string;
}

export interface AgentHarnessConversation {
  id: string;
  title: string;
  state?: AgentHarnessState;
  /** A quiet dot for a chat that changed since it was last open. Clear it when it is opened */
  unread?: boolean;
  status?: AgentHarnessStatus;
  /** How full its context is, 0 to 100, drawn as the ring in the composer */
  context?: number;
  blocks: AgentHarnessBlock[];
  /** Suggested next messages, shown under the last block. Picking one calls onFollowUp */
  followUps?: string[];
}

/** An open tab. Without a chat it is New chat */
export interface AgentHarnessTab {
  key: string;
  chat?: string;
}

/** A suggestion on New chat. Picking it sends its text */
export interface AgentHarnessSuggestion {
  icon: IconName;
  text: string;
}

export interface AgentHarnessWorkspace {
  name: string;
  /** The letter on its tile. Defaults to the name's first letter */
  mark?: string;
  /** The tile's colour. Defaults to ink */
  color?: string;
}

/** What the panel beside the chat shows, like an artifact opened from its card */
export interface AgentHarnessPanel {
  title: string;
  icon?: IconName;
  /** Adds a button that copies this link */
  link?: string;
  children: ReactNode;
}

export interface AgentHarnessProps {
  /** The chats down the side, newest first */
  conversations: AgentHarnessConversation[];
  /** The open tabs, in order. Leave it out to let the harness keep them; it starts with one New chat tab */
  tabs?: AgentHarnessTab[];
  defaultTabs?: AgentHarnessTab[];
  onTabsChange?: (tabs: AgentHarnessTab[]) => void;
  /** The key of the tab on screen */
  tab?: string;
  defaultTab?: string;
  onTabChange?: (tab: string) => void;
  /** New chat's suggestions. Three show at a time, and Shuffle shows the next three */
  suggestions?: AgentHarnessSuggestion[];
  /**
   * Called with what the person sends or the suggestion they pick, the chat it goes to (null from New chat) and the tab.
   * From New chat, return the id of the chat it started and the tab turns into that chat. Nothing is sent while the chat
   * on screen is running
   */
  onSend?: (message: { text: string; attachments: ComposerAttachment[] }, conversation: string | null, tab: string) => string | void;
  /** Called when the person picks one of a chat's follow-ups */
  onFollowUp?: (text: string, conversation: string) => void;
  /** The grey line over New chat's heading. Defaults to good morning, afternoon or evening */
  greeting?: string;
  /** Defaults to "What should the agent work on?" */
  heading?: string;
  /** The workspace switcher at the top of the side */
  workspaces?: AgentHarnessWorkspace[];
  /** The name of the workspace shown. Defaults to the first */
  workspace?: string;
  defaultWorkspace?: string;
  onWorkspaceChange?: (name: string) => void;
  /** Opens the panel beside the chat. On a wide harness the chats fold away while it is open */
  panel?: AgentHarnessPanel | null;
  /** Called by the panel's close button and by Escape */
  onPanelClose?: () => void;
  /** Shown beside the context ring, like the model's name */
  model?: string;
  /** The text in the composer. Leave it out to let the harness keep it; each tab keeps its own draft */
  draft?: string;
  defaultDraft?: string;
  onDraftChange?: (draft: string) => void;
  /** The composer's placeholder on New chat, in a chat, and while the agent works */
  placeholders?: { home?: string; reply?: string; working?: string };
  /** Anything else for the composer: what it works on, its mode, attachments, dictation */
  composer?: Omit<ComposerProps, 'value' | 'defaultValue' | 'onValueChange' | 'onSubmit' | 'thread' | 'tools' | 'className' | 'placeholder'>;
  className?: string;
}

// an artifact and a diff keep their card in the chat; every other component sits on the chat itself
const BOXED = new Set(['artifact-card', 'change-review']);
const IDLE: AgentHarnessStatus = { state: 'idle', label: 'Ready for a task' };
const NARROW = 620;
let made = 0;
const newTab = (): AgentHarnessTab => ({ key: 'tab-' + ++made });

function Message({ b }: { b: AgentHarnessBlock }) {
  switch (b.kind) {
    case 'thinking': return <Thinking {...b.props} />;
    case 'tool-call': return <ToolCall {...b.props} />;
    case 'permission-gate': return <PermissionGate {...b.props} />;
    case 'plan-review': return <PlanReview {...b.props} />;
    case 'action-log': return <ActionLog {...b.props} />;
    case 'run-summary': return <RunSummary {...b.props} />;
    case 'live-answer': return <LiveAnswer {...b.props} />;
    case 'source-stack': return <SourceStack {...b.props} />;
    case 'artifact-card': return <ArtifactCard {...b.props} />;
    case 'error-recovery': return <ErrorRecovery {...b.props} />;
    case 'decision-prompt': return <DecisionPrompt {...b.props} />;
    case 'agent-lanes': return <AgentLanes {...b.props} />;
    case 'change-review': return <ChangeReview {...b.props} />;
    case 'node': return <>{b.node}</>;
    default: return null;
  }
}

/** The agent's work under one line: open while it runs, folded into its summary a moment after, unless the person opened it */
function Group({ b }: { b: Extract<AgentHarnessBlock, { kind: 'group' }> }) {
  const done = b.state === 'done';
  const [open, setOpen] = useState(!done);
  const mine = useRef(false);
  useEffect(() => {
    if (!done) { setOpen(true); return; }
    if (mine.current) return;
    const t = setTimeout(() => setOpen(false), 1200);
    return () => clearTimeout(t);
  }, [done]);
  return (
    <div className="dm-ahx-wk dm-enter" data-block={b.key}>
      <button type="button" className="dm-ahx-wh" aria-expanded={open} onClick={() => { mine.current = true; setOpen(!open); }}>
        <span className="dm-g">{done ? <Icon key="ok" name="check" size="xs" className="dm-enter" /> : <Spin />}</span>
        <Swap className={cx('dm-t', !done && 'dm-shim')}>{b.label}</Swap>
        {done && b.seconds !== undefined && <span className="dm-m dm-num">{b.seconds}s</span>}
        <Icon name="chev-d" size="xs" />
      </button>
      <Fold open={open} className="dm-ahx-wb"><div className="dm-ahx-wl">{b.blocks.map(x => <Block key={x.key} b={x} />)}</div></Fold>
    </div>
  );
}

function Block({ b }: { b: AgentHarnessBlock }) {
  if (b.kind === 'user') return (
    <div className="dm-bub dm-enter" data-block={b.key}>
      {b.files?.length ? <div className="dm-ahx-fs">{b.files.map(f => <span key={f} className="dm-fchip"><Icon name="clip" size="xs" />{f}</span>)}</div> : null}
      {b.text}
    </div>
  );
  if (b.kind === 'say') return <p className="dm-msg dm-ahx-say" data-block={b.key}>{b.text.split(' ').map((w, i) => <span key={i} className="dm-w">{w} </span>)}</p>;
  if (b.kind === 'working') return (
    <div className="dm-lva-th dm-enter" data-block={b.key}><span style={{ color: 'var(--dm-fg2)', display: 'grid' }}><Think /></span><span className="dm-shim">{b.text}</span></div>
  );
  if (b.kind === 'group') return <Group b={b} />;
  return <div className={cx('dm-ahx-msg dm-enter', BOXED.has(b.kind) && 'dm-box')} data-block={b.key}><Message b={b} /></div>;
}

/** The quiet mark on a chat's row and tab: unread, running or waiting on the person */
const Mark = ({ c }: { c?: AgentHarnessConversation }) => (
  <span className="dm-ahx-mk">
    {!c ? null : c.unread ? <span key="u" className="dm-dot dm-enter" style={{ color: 'var(--dm-accent)' }} />
      : c.state === 'running' ? <span key="r" className="dm-spin dm-enter" />
        : c.state === 'waiting' ? <span key="w" className="dm-dot dm-enter" style={{ color: 'var(--dm-warn)' }} /> : null}
  </span>
);

const greet = () => { const h = new Date().getHours(); return h < 5 || h >= 18 ? 'Good evening' : h < 12 ? 'Good morning' : 'Good afternoon'; };

/**
 * An agent app made only of the other components: chats down the side, tabs across the top, and New chat with a greeting,
 * the Composer and a few suggestions. Nothing plays by itself: the person picks a suggestion or sends a message, and the chats
 * are lists of blocks you drive from your own state, each a bubble, the agent's words, its work folded under one line, or one
 * of the components with its own props. A chat opens in a tab, × closes it, + opens New chat. At phone width the chats slide
 * in from the side, and the tabs fold into the chat on screen with a count beside it that lists every open chat. The chat follows new messages until the person scrolls up.
 */
export function AgentHarness({
  conversations, tabs, defaultTabs, onTabsChange, tab, defaultTab, onTabChange, suggestions = [], onSend, onFollowUp,
  greeting, heading = 'What should the agent work on?', workspaces = [], workspace, defaultWorkspace, onWorkspaceChange,
  panel, onPanelClose, model, draft, defaultDraft = '', onDraftChange, placeholders, composer, className
}: AgentHarnessProps) {
  const [first] = useState(() => defaultTabs?.length ? defaultTabs : [newTab()]);
  const [open, setOpen] = useControllable(tabs, first, onTabsChange);
  const [active, setActive] = useControllable(tab, defaultTab ?? first[0].key, onTabChange);
  const [text, setText] = useControllable(draft, defaultDraft, onDraftChange);
  const [ws, setWs] = useControllable(workspace, defaultWorkspace ?? workspaces[0]?.name ?? '', onWorkspaceChange);
  const reduce = useReducedMotion();
  const root = useRef<HTMLDivElement>(null), feed = useRef<HTMLDivElement>(null), tabsEl = useRef<HTMLDivElement>(null);
  const cols = useRef(new Map<string, HTMLDivElement>());
  const wsMenu = usePopover();
  // on a phone the tabs fold into one, and a count of the open chats lists them all
  const tabsMenu = usePopover({ align: 'end' });
  const [side, setSide] = useState(true), [drawer, setDrawer] = useState(false);
  const [search, setSearch] = useState(false), [query, setQuery] = useState('');
  const si = useRef<HTMLInputElement>(null);
  useEffect(() => { if (search) si.current?.focus({ preventScroll: true }); }, [search]);
  const [shift, setShift] = useState(0);
  const [hello, setHello] = useState(greeting ?? '');
  useEffect(() => { if (!greeting) setHello(greet()); }, [greeting]);

  const at = open.find(t => t.key === active) ?? open[0];
  const cur = at?.chat ? conversations.find(c => c.id === at.chat) ?? null : null;
  const home = !at?.chat;
  const status = cur?.status ?? IDLE, ctx = cur ? cur.context ?? 0 : 0, busy = cur?.state === 'running';
  const narrow = () => (root.current?.clientWidth ?? 1000) <= NARROW;

  /* the composer's settings live here, so they stay put when it moves between New chat and the foot of a chat */
  const cp = composer ?? {};
  const [att, setAtt] = useControllable(cp.attachments, cp.defaultAttachments ?? [], cp.onAttachmentsChange);
  const [ctxPick, setCtxPick] = useControllable(cp.context, cp.defaultContext ?? cp.contexts?.[0]?.value ?? '', cp.onContextChange);
  const [mode, setMode] = useControllable(cp.mode, cp.defaultMode ?? cp.modes?.[0]?.value ?? 'ask', cp.onModeChange);

  /* each tab keeps its own draft */
  const drafts = useRef(new Map<string, string>());
  const goTo = (key: string) => {
    if (key === active) return;
    drafts.current.set(active, text); setActive(key); setText(drafts.current.get(key) ?? '');
  };

  /* ---- tabs ---- */
  // a chat comes to the front if it is open, takes over an untouched New chat tab, or opens a tab beside the one on screen
  const openChat = (id: string) => {
    setDrawer(false);
    const has = open.find(t => t.chat === id); if (has) return goTo(has.key);
    if (at && !at.chat && !text.trim()) return setOpen(open.map(t => t.key === at.key ? { ...t, chat: id } : t));
    const t = { ...newTab(), chat: id }, i = open.findIndex(x => x.key === at?.key);
    setOpen([...open.slice(0, i + 1), t, ...open.slice(i + 1)]); goTo(t.key);
  };
  const fresh = () => {
    setDrawer(false);
    const h = open.find(t => !t.chat); if (h) return goTo(h.key);
    const t = newTab(), i = open.findIndex(x => x.key === at?.key);
    setOpen([...open.slice(0, i + 1), t, ...open.slice(i + 1)]); goTo(t.key);
  };
  const close = (key: string) => {
    const i = open.findIndex(t => t.key === key), rest = open.filter(t => t.key !== key);
    drafts.current.delete(key);
    if (!rest.length) { const t = newTab(); setOpen([t]); setActive(t.key); setText(''); return; }
    setOpen(rest);
    if (key === active) { const next = rest[Math.min(i, rest.length - 1)].key; setActive(next); setText(drafts.current.get(next) ?? ''); }
  };
  // on a phone only the tab on screen shows, so the one coming to the front comes in
  const shownTab = useRef(active);
  useIsoLayoutEffect(() => {
    if (shownTab.current === active) return; shownTab.current = active;
    const el = tabsEl.current?.querySelector<HTMLElement>(`[data-tab="${CSS.escape(active)}"]`); if (!el || !narrow()) return;
    el.classList.remove('dm-enter'); void el.offsetWidth; el.classList.add('dm-enter');
  }, [active]);
  // the tab on screen is always in view, also when the status pill beside the tabs grows
  useEffect(() => {
    const box = tabsEl.current; if (!box) return;
    const keep = (now: boolean) => {
      const el = box.querySelector<HTMLElement>(`[data-tab="${CSS.escape(active)}"]`); if (!el) return;
      const l = el.offsetLeft, r = l + el.offsetWidth;
      if (l < box.scrollLeft || r > box.scrollLeft + box.clientWidth) box.scrollTo({ left: l < box.scrollLeft ? l - 4 : r - box.clientWidth + 4, behavior: reduce || now ? 'auto' : 'smooth' });
    };
    keep(false);
    const ro = new ResizeObserver(() => keep(true)); ro.observe(box);
    return () => ro.disconnect();
  }, [active, open.length, reduce]);

  /* ---- sending ---- */
  const send = (message: { text: string; attachments: ComposerAttachment[] }) => {
    if (busy || !at) return;
    setText(''); drafts.current.delete(at.key);
    const id = onSend?.(message, cur?.id ?? null, at.key);
    if (home && typeof id === 'string') setOpen(open.map(t => t.key === at.key ? { ...t, chat: id } : t));
  };
  // Enter does nothing while the agent works in the chat on screen
  const hold = (e: KeyboardEvent) => { if (busy && e.key === 'Enter' && !e.shiftKey && (e.target as HTMLElement).tagName === 'TEXTAREA') { e.preventDefault(); e.stopPropagation(); } };

  /* ---- following the chat: it keeps to the newest message until you scroll up, and picks up again at the bottom ---- */
  const stick = useRef(true), ours = useRef(0), seen = useRef<string | null>(null);
  useEffect(() => {
    const f = feed.current, col = cur ? cols.current.get(cur.id) : null; if (!f || !col) return;
    stick.current = true; f.scrollTop = f.scrollHeight - f.clientHeight; ours.current = f.scrollTop;
    // a chat comes in with the shared entrance when you switch to it
    if (seen.current !== null && seen.current !== cur!.id) { col.classList.remove('dm-enter'); void col.offsetWidth; col.classList.add('dm-enter'); }
    seen.current = cur!.id;
    let raf = 0;
    const step = () => {
      const d = f.scrollHeight - f.clientHeight - f.scrollTop;
      if (!stick.current || d < 1) { raf = 0; return; }
      f.scrollTop += reduce ? d : Math.max(1, Math.ceil(d * .16)); ours.current = f.scrollTop; raf = requestAnimationFrame(step);
    };
    const ro = new ResizeObserver(() => { if (!raf && stick.current) raf = requestAnimationFrame(step); });
    ro.observe(col);
    return () => { ro.disconnect(); cancelAnimationFrame(raf); };
  }, [cur?.id, reduce]); // eslint-disable-line react-hooks/exhaustive-deps
  // the person's own message brings the chat back to the bottom
  const lastUser = cur?.blocks.filter(b => b.kind === 'user').length ?? 0;
  useEffect(() => { stick.current = true; }, [lastUser]);
  const onScroll = () => { const f = feed.current; if (f && Math.abs(f.scrollTop - ours.current) > 2) stick.current = f.scrollHeight - f.clientHeight - f.scrollTop < 40; };
  const look = (key: string) => {
    const f = feed.current, el = cur && cols.current.get(cur.id)?.querySelector(`[data-block="${CSS.escape(key)}"]`); if (!f || !el) return;
    stick.current = false;
    f.scrollTo({ top: f.scrollTop + el.getBoundingClientRect().top - f.getBoundingClientRect().top - 12, behavior: reduce ? 'auto' : 'smooth' });
  };
  const pill: StatusPillProps = { state: status.state, label: status.label, meta: status.meta,
    action: status.action ?? (status.review ? { label: 'Review', onClick: () => look(status.review!) } : undefined) };

  /* ---- the composer glides from the middle of New chat to the foot of the chat it starts ---- */
  const was = useRef<{ tab: string; home: boolean; top: number; left: number } | null>(null);
  useIsoLayoutEffect(() => {
    const r = root.current, el = r?.querySelector<HTMLElement>('.dm-cpx'); if (!r || !el) return;
    const rr = r.getBoundingClientRect(), b = el.getBoundingClientRect(), top = b.top - rr.top, left = b.left - rr.left;
    const w = was.current;
    if (w && w.tab === active && w.home && !home && !reduce && Math.abs(w.top - top) > 2) {
      const bp = getComputedStyle(r).getPropertyValue('--dm-motion').trim() === 'bp';
      el.animate([{ transform: `translate(${w.left - left}px,${w.top - top}px)` }, { transform: 'none' }], { duration: bp ? 360 : 640, easing: bp ? 'cubic-bezier(.65,0,.25,1)' : 'cubic-bezier(.22,1,.36,1)' });
    }
    was.current = { tab: active, home, top, left };
  }, [active, home]);

  /* ---- the panel: it keeps what it showed while it folds shut, and the chats fold away while it is open on a wide harness ---- */
  const kept = useRef<AgentHarnessPanel | null>(null);
  if (panel) kept.current = panel;
  const shown = panel ?? kept.current;
  const folded = useRef(false);
  useEffect(() => {
    if (panel && !narrow() && side) { setSide(false); folded.current = true; }
    if (!panel && folded.current) { setSide(true); folded.current = false; }
  }, [!!panel]); // eslint-disable-line react-hooks/exhaustive-deps
  const [copied, copy] = useCopied();
  // Escape closes the chats on a phone, then the panel
  const escape = (e: KeyboardEvent) => { if (e.key !== 'Escape') return; if (drawer) setDrawer(false); else if (panel) onPanelClose?.(); };

  const q = query.trim().toLowerCase(), listed = conversations.filter(c => !q || c.title.toLowerCase().includes(q));
  const three = suggestions.length ? [0, 1, 2].slice(0, suggestions.length).map(i => suggestions[(shift + i) % suggestions.length]) : [];
  const wsNow = workspaces.find(w => w.name === ws) ?? workspaces[0];
  const tile = (w: AgentHarnessWorkspace) => ({ background: w.color ?? 'var(--dm-primary)', color: w.color ? '#fff' : 'var(--dm-on-ink)' });
  const ph = home ? placeholders?.home ?? 'Ask the agent to do something' : busy ? placeholders?.working ?? 'The agent is working…' : placeholders?.reply ?? 'Reply';
  const box = (
    <Composer {...cp} value={text} onValueChange={setText} onSubmit={send} placeholder={ph}
      attachments={att} onAttachmentsChange={setAtt} context={ctxPick} onContextChange={setCtxPick} mode={mode} onModeChange={setMode}
      tools={
        <div className="dm-ctm-ft">
          {model && <span>{model}</span>}
          <Tip label={`Context ${ctx}% full`}>
            <button type="button" className="dm-ctm-ring" aria-label={`Context, ${ctx}% full`}>
              <svg viewBox="0 0 20 20" aria-hidden="true">
                <circle className="dm-tr" cx="10" cy="10" r="7.5" />
                <circle className="dm-fl" cx="10" cy="10" r="7.5" pathLength={100} style={{ strokeDasharray: `${ctx} 100`, opacity: ctx ? undefined : 0 }} />
              </svg>
            </button>
          </Tip>
        </div>
      } />
  );

  return (
    <div data-dm="" ref={root} onKeyDownCapture={hold} onKeyDown={escape}
      className={cx('dm-ahx dm-panel', !side && 'dm-ns', drawer && 'dm-dr', panel && 'dm-pn', busy && 'dm-busy', className)}>
      <aside className="dm-ahx-side" aria-label="Chats">
        <div className="dm-ahx-ws">
          {wsNow && (
            <button type="button" className="dm-ahx-wsb" {...wsMenu.trigger}>
              <span className="dm-ahx-lg" style={tile(wsNow)}>{wsNow.mark ?? wsNow.name.charAt(0)}</span><Swap className="dm-t">{wsNow.name}</Swap><Icon name="chev-d" size="xs" />
            </button>
          )}
          <Tip label="Hide chats"><button type="button" className="dm-ib dm-ahx-hide" aria-label="Hide chats" onClick={() => narrow() ? setDrawer(false) : setSide(false)}><Icon name="panel" /></button></Tip>
        </div>
        <button type="button" className="dm-ahx-nav dm-ahx-new" onClick={fresh}><Icon name="edit" /><span>New chat</span></button>
        <div className="dm-ahx-lh">
          <span>Chats</span>
          <Tip label="Search chats"><button type="button" className="dm-ib dm-ahx-sb" aria-label="Search chats" onClick={() => { setSearch(!search); if (search) setQuery(''); }}><Icon name="search" /></button></Tip>
        </div>
        <Fold open={search} className="dm-ahx-sf">
          <input className="dm-ahx-si" type="search" placeholder="Search chats" aria-label="Search chats" value={query} onChange={e => setQuery(e.target.value)}
            ref={si}
            onKeyDown={e => { if (e.key === 'Escape') { e.stopPropagation(); setSearch(false); setQuery(''); } }} />
        </Fold>
        <div className="dm-ahx-list">
          {listed.map(c => (
            <button key={c.id} type="button" className="dm-ahx-cv dm-enter" aria-current={c.id === cur?.id} onClick={() => openChat(c.id)}>
              <span className="dm-t">{c.title}</span><Mark c={c} />
            </button>
          ))}
          {!listed.length && <p className="dm-ahx-none">No chats match</p>}
        </div>
      </aside>
      <div className={cx('dm-ahx-main', home && 'dm-home')}>
        <div className="dm-ahx-top">
          <Tip label="Show chats"><button type="button" className="dm-ib dm-ahx-menu" aria-label="Show chats" onClick={() => narrow() ? setDrawer(true) : setSide(true)}><Icon name="panel" /></button></Tip>
          <div ref={tabsEl} className="dm-ahx-tabs" role="tablist" aria-label="Open chats">
            {open.map(t => {
              const c = t.chat ? conversations.find(x => x.id === t.chat) : undefined;
              return (
                <div key={t.key} data-tab={t.key} className={cx('dm-ahx-tab dm-enter', t.key === at?.key && 'dm-on')}>
                  <button type="button" className="dm-ahx-tb" role="tab" aria-selected={t.key === at?.key} onClick={() => goTo(t.key)}>
                    <Mark c={c} /><Swap className="dm-t">{c?.title ?? 'New chat'}</Swap>
                  </button>
                  <Tip label="Close tab"><button type="button" className="dm-ahx-tx" aria-label="Close tab" onClick={() => close(t.key)}><Icon name="x" /></button></Tip>
                </div>
              );
            })}
          </div>
          {open.length > 1 && (
            <Tip label="Open chats" off={tabsMenu.open}>
              <button type="button" className="dm-ahx-tn" aria-label="Open chats" {...tabsMenu.trigger}><span className="dm-num">{open.length}</span></button>
            </Tip>
          )}
          <Tip label="New chat"><button type="button" className="dm-ib dm-ahx-plus" aria-label="New chat" onClick={fresh}><Icon name="plus" /></button></Tip>
          <StatusPill {...pill} className="dm-ahx-spl" />
        </div>
        <div className="dm-ahx-body">
          <div ref={feed} className="dm-ahx-feed" onScroll={onScroll} onWheel={e => { if (e.deltaY < 0) stick.current = false; }}>
            <div className="dm-ahx-cols">
              {/* every chat stays mounted, so its components keep their state; only the one on screen takes up room */}
              {conversations.map(c => (
                <div key={c.id} ref={el => { if (el) cols.current.set(c.id, el); else cols.current.delete(c.id); }}
                  className={cx('dm-ahx-col', c.id !== cur?.id && 'dm-off')} aria-hidden={c.id !== cur?.id} inert={c.id !== cur?.id}>
                  {c.blocks.map(b => <Block key={b.key} b={b} />)}
                  {c.followUps?.length ? (
                    <div className="dm-lva-fu">
                      {c.followUps.map((f, i) => <button type="button" key={f} {...enter(i * 90)} onClick={() => { if (c.state !== 'running') onFollowUp?.(f, c.id); }}><Icon name="chev-r" size="xs" />{f}</button>)}
                    </div>
                  ) : null}
                </div>
              ))}
            </div>
          </div>
          <div className="dm-ahx-bot">{!home && box}</div>
          <div className="dm-ahx-home" inert={!home}>
            <div className="dm-ahx-hw">
              <div className="dm-ahx-hi"><span>{hello}</span><h4>{heading}</h4></div>
              <div className="dm-ahx-slot">{home && box}</div>
              {three.length > 0 && (
                <div className="dm-ahx-sg">
                  {three.map((s, i) => (
                    <button key={shift + ':' + i} type="button" className="dm-ahx-sr dm-enter" style={{ animationDelay: i * 50 + 'ms' }} onClick={() => send({ text: s.text, attachments: [] })}>
                      <Icon name={s.icon} /><span>{s.text}</span>
                    </button>
                  ))}
                </div>
              )}
              {suggestions.length > 3 && (
                <div className="dm-ahx-hf">
                  <button type="button" className="dm-pill dm-ghost dm-sm dm-ahx-shf" onClick={() => setShift((shift + 3) % suggestions.length)}><Icon name="refresh" size="xs" />Shuffle suggestions</button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      <aside className="dm-ahx-pane" aria-label={shown?.title ?? 'Panel'} aria-hidden={!panel} inert={!panel}>
        {shown && (
          <div className="dm-ahx-pi">
            <div className="dm-ahx-ph">
              <Icon name={shown.icon ?? 'file-text'} /><span className="dm-t">{shown.title}</span>
              {shown.link && <Tip label={copied ? 'Copied to clipboard' : 'Copy link'} open={copied || undefined}><button type="button" className={cx('dm-ib', copied && 'dm-copied')} aria-label="Copy link" onClick={() => copy(shown.link!)}><Icon name={copied ? 'check' : 'link'} /></button></Tip>}
              <Tip label="Close"><button type="button" className="dm-ib" aria-label="Close panel" onClick={onPanelClose}><Icon name="x" /></button></Tip>
            </div>
            <div className="dm-ahx-pb">{shown.children}</div>
          </div>
        )}
      </aside>
      <div className="dm-ahx-scrim" onClick={() => setDrawer(false)} />
      <div {...tabsMenu.pop} className={cx(tabsMenu.pop.className, 'dm-ahx-tp')} role="menu" aria-label="Open chats">
        {open.map(t => {
          const c = t.chat ? conversations.find(x => x.id === t.chat) : undefined;
          return (
            <button key={t.key} type="button" className="dm-mi" role="menuitemradio" aria-checked={t.key === at?.key} onClick={() => { if (t.key !== at?.key) goTo(t.key); tabsMenu.closeSoon(); }}>
              <Mark c={c} /><span className="dm-t">{c?.title ?? 'New chat'}</span><span className="dm-ck"><Icon name="check" size="xs" /></span>
            </button>
          );
        })}
      </div>
      <div {...wsMenu.pop} className={cx(wsMenu.pop.className, 'dm-ahx-wsp')} role="menu">
        {workspaces.map(w => (
          <button key={w.name} type="button" className="dm-mi" role="menuitemradio" aria-checked={w.name === wsNow?.name} onClick={() => { setWs(w.name); wsMenu.closeSoon(); }}>
            <span className="dm-ahx-lg" style={tile(w)}>{w.mark ?? w.name.charAt(0)}</span><span>{w.name}</span><span className="dm-ck"><Icon name="check" size="xs" /></span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* Generated from designme.dev by scripts/sync.mjs. Edit the site, then sync. */
/* ---------- Agent harness ---------- */
/* a whole agent app in one card: chats down the side, tabs across the top, a New chat home with suggestions, and the
   conversations themselves, told with the components above */
.dm-card.dm-wide .dm-stage-in:has(>.dm-ahx){max-width:960px}
.dm-ahx{display:flex;height:620px;overflow:hidden;container:ahx/inline-size;text-align:left;position:relative}
.dm-ahx-side{flex:none;width:236px;display:flex;flex-direction:column;gap:2px;padding:10px;background:color-mix(in srgb,var(--dm-surface) 50%,var(--dm-page));border-right:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent);transition:margin-left var(--dm-t) var(--dm-ease),transform var(--dm-t) var(--dm-ease),box-shadow var(--dm-t) var(--dm-ease)}
.dm-ahx.dm-ns .dm-ahx-side{margin-left:-236px}
.dm-ahx-ws{display:flex;align-items:center;gap:2px;margin-bottom:6px}
.dm-ahx-wsb{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:34px;padding:0 var(--dm-s-2) 0 7px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--dm-fg);transition:background var(--dm-t-fast)}
.dm-ahx-wsb[aria-expanded="true"]{background:var(--dm-row)}
@media (hover:hover) and (pointer:fine){.dm-ahx-wsb:hover{background:var(--dm-row)}}
.dm-ahx-wsb .dm-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-ahx-wsb>.dm-i{color:var(--dm-muted);transition:transform var(--dm-t) var(--dm-ease)}
.dm-ahx-wsb[aria-expanded="true"]>.dm-i{transform:rotate(180deg)}
.dm-ahx-lg{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none;background:var(--dm-ink);color:var(--dm-on-ink);font-size:11px;font-weight:500;transition:background var(--dm-t) var(--dm-ease)}
.dm-ahx-ws .dm-ib,.dm-ahx-top>.dm-ib,.dm-ahx-lh .dm-ib{width:28px;height:28px;color:var(--dm-muted)}
@media (hover:hover) and (pointer:fine){.dm-ahx-ws .dm-ib:hover,.dm-ahx-top>.dm-ib:hover,.dm-ahx-lh .dm-ib:hover{color:var(--dm-fg)}}
.dm-ahx-wsp{width:212px}
.dm-ahx-wsp .dm-ahx-lg{width:18px;height:18px;font-size:10px}
.dm-ahx-nav,.dm-ahx-cv{display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:0 9px;border-radius:9px;font-size:13px;text-align:left;color:var(--dm-fg2);transition:background var(--dm-t-fast),box-shadow var(--dm-t-fast),color var(--dm-t-fast)}
.dm-ahx-nav{color:var(--dm-fg);font-weight:500}
.dm-ahx-nav .dm-i{color:var(--dm-fg2)}
@media (hover:hover) and (pointer:fine){.dm-ahx-nav:hover,.dm-ahx-cv:hover{background:var(--dm-row);color:var(--dm-fg)}}
.dm-ahx-cv[aria-current="true"]{background:var(--dm-surface);color:var(--dm-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-rail) 50%,transparent),0 1px 2px rgba(0,0,0,.04)}
.dm-ahx-cv .dm-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the chats fill the scrolling list, and a tab clips its own button: their rings are drawn inside */
.dm-ahx-cv:focus-visible,.dm-ahx-tb:focus-visible{outline-offset:-2px}
.dm-ahx-lh{display:flex;align-items:center;justify-content:space-between;padding:var(--dm-s-3) 1px 2px 9px;font-size:11.5px;color:var(--dm-muted)}
.dm-ahx-lh .dm-ib{width:24px;height:24px}
.dm-ahx-si{display:block;width:100%;height:32px;margin:var(--dm-s-1) 0 6px;padding:0 10px;border:0;border-radius:var(--dm-r-field);background:var(--dm-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-field-line) 50%,transparent);font-size:13px;outline:0;transition:box-shadow var(--dm-t-fast)}
@supports (corner-shape:squircle){.dm-ahx-si{corner-shape:squircle;border-radius:var(--dm-r-field-sq)}}
.dm-ahx-si:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-field-line-strong) 50%,transparent)}
.dm-ahx-si::placeholder{color:var(--dm-muted)}
.dm-ahx-si::-webkit-search-cancel-button{display:none}
.dm-ahx-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none}
.dm-ahx-none{margin:0;padding:6px 9px;font-size:12.5px;color:var(--dm-muted)}
.dm-ahx-mk{display:grid;place-items:center;width:10px;flex:none}
.dm-ahx-mk:empty{display:none}
.dm-ahx-mk .dm-spin{width:10px;height:10px;color:var(--dm-muted)}
.dm-ahx-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;container:ahm/inline-size}
/* the tabs: a chat opens or comes to the front, × closes it, + opens New chat */
.dm-ahx-top{flex:none;display:flex;align-items:center;gap:var(--dm-s-1);height:46px;padding:0 10px 0 var(--dm-s-2);border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent)}
.dm-ahx-menu{display:none}
.dm-ahx.dm-ns .dm-ahx-menu{display:inline-grid}
.dm-ahx-tabs{position:relative;display:flex;align-items:center;gap:2px;min-width:0;padding:2px;overflow-x:auto;scrollbar-width:none}
.dm-ahx-tabs::-webkit-scrollbar{display:none}
.dm-ahx-tab{flex:0 1 164px;min-width:108px;display:flex;align-items:center;height:30px;border-radius:9px;overflow:hidden;color:var(--dm-fg2);transition:background var(--dm-t-fast),box-shadow var(--dm-t-fast),color var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-ahx-tab:hover{background:var(--dm-row);color:var(--dm-fg)}}
.dm-ahx-tab.dm-on{background:var(--dm-surface);color:var(--dm-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-rail) 50%,transparent),0 1px 2px rgba(0,0,0,.04)}
.dm-ahx-tb{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:100%;padding:0 2px 0 10px;font-size:12.5px;text-align:left}
.dm-ahx-tb .dm-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-ahx-tx{width:20px;height:20px;margin-right:5px;border-radius:6px;display:grid;place-items:center;flex:none;color:var(--dm-muted);opacity:0;transition:opacity var(--dm-t-fast),background var(--dm-t-fast),color var(--dm-t-fast)}
.dm-ahx-tx .dm-i{width:12px;height:12px}
.dm-ahx-tab.dm-on .dm-ahx-tx,.dm-ahx-tx:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.dm-ahx-tab:hover .dm-ahx-tx{opacity:1}}
@media (hover:hover) and (pointer:fine){.dm-ahx-tx:hover{background:var(--dm-row);color:var(--dm-fg)}}
.dm-ahx-plus{flex:none}
.dm-ahx-tn{display:none;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--dm-r-sm);color:var(--dm-fg2);transition:background var(--dm-t-fast),color var(--dm-t-fast)}
.dm-ahx-tn[aria-expanded="true"]{background:var(--dm-row);color:var(--dm-fg)}
@media (hover:hover) and (pointer:fine){.dm-ahx-tn:hover{background:var(--dm-row);color:var(--dm-fg)}}
.dm-ahx-tn .dm-num{display:grid;place-items:center;min-width:18px;height:18px;padding:0 var(--dm-s-1);border-radius:5px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:11px;font-weight:500;line-height:1}
.dm-ahx-tp{width:232px}
.dm-ahx-tp .dm-mi .dm-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-ahx-tp .dm-mi .dm-ahx-mk:empty{display:grid}
.dm-ahx-spl{flex:none;margin-left:auto;transition:opacity var(--dm-t) var(--dm-ease)}
.dm-ahx-main.dm-home .dm-ahx-spl{opacity:0;pointer-events:none}
.dm-ahx-spl .dm-spl-pill{height:30px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-line) 50%,transparent)}
.dm-ahx-spl .dm-spl-in{gap:7px;padding:0 var(--dm-s-1) 0 11px;font-size:12.5px}
.dm-ahx-spl .dm-spl-in .dm-g{width:14px}
.dm-ahx-spl .dm-spl-in .dm-pill{height:22px;padding:0 9px;margin-left:1px;font-size:12px}
/* New chat: a greeting, the composer and three suggestions, in the middle of the card */
.dm-ahx-body{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.dm-ahx-home{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:var(--dm-s-5) 28px 44px}
.dm-ahx-main:not(.dm-home) .dm-ahx-home{display:none}
.dm-ahx-main.dm-home :is(.dm-ahx-feed,.dm-ahx-bot){visibility:hidden}
.dm-ahx-hw{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.dm-ahx-hi{display:flex;flex-direction:column;padding:0 var(--dm-s-1);margin-bottom:6px;font-size:14px;font-weight:500;letter-spacing:-.4px;line-height:1.3}
.dm-ahx-hi span{color:var(--dm-muted)}
.dm-ahx-hi h4{margin:0;font:inherit;color:var(--dm-fg)}
.dm-ahx-sg{display:flex;flex-direction:column;gap:1px;margin-top:var(--dm-s-1)}
.dm-ahx-sr{display:flex;align-items:center;gap:11px;width:100%;min-height:36px;padding:0 10px;border-radius:10px;font-size:13.5px;color:var(--dm-fg);text-align:left;transition:background var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-ahx-sr:hover{background:var(--dm-row)}}
.dm-ahx-sr .dm-i{color:var(--dm-muted)}
.dm-ahx-hf{display:flex;padding-left:3px}
.dm-ahx-shf{color:var(--dm-muted)}
.dm-ahx-shf .dm-i{transition:transform .6s var(--dm-ease)}
@media (hover:hover) and (pointer:fine){.dm-ahx-shf:hover .dm-i{transform:rotate(-180deg)}}
/* a chat scrolls inside the card; each one keeps its own column, only the one on screen takes up room */
.dm-ahx-feed{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--dm-line) transparent}
.dm-ahx-cols{flex:1 0 auto;display:grid}
.dm-ahx-col{grid-area:1/1;min-width:0;width:100%;max-width:688px;margin:0 auto;display:flex;flex-direction:column;gap:var(--dm-s-5);padding:var(--dm-s-6) 28px 30px;transition:opacity var(--dm-t) var(--dm-ease)}
.dm-ahx-col.dm-off{visibility:hidden;height:0;padding-block:0;overflow:hidden}
.dm-ahx-col.dm-ff{opacity:0}
.dm-ahx-say .dm-w{animation:dm-lvw .5s var(--dm-ease) both}
.dm-ahx-fs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.dm-ahx-fs:last-child{margin-bottom:0}
.dm-ahx-msg{min-width:0}
/* a component in the chat lines up with the messages on the left, instead of centring itself as it does on its own */
.dm-ahx-col .dm-ahx-msg>*{margin-left:0;margin-right:auto}
/* chat components sit on the chat itself, the way a bare card shows them; an artifact and a diff keep their card */
.dm-ahx-msg:not(.dm-box)>.dm-panel:not(.dm-keep){background:none;box-shadow:none;padding-left:0;padding-right:0;border-radius:0}
/* in the chat a finished question set closes up behind its answers */
.dm-ahx-msg .dm-dpx-body{min-height:0}
.dm-ahx-msg .dm-dpx-f.dm-leave{display:none}
/* the agent's work, gathered under one line that folds away when it is done */
.dm-ahx-wk{display:flex;flex-direction:column;align-items:flex-start}
.dm-ahx-wh{display:inline-flex;align-items:center;gap:var(--dm-s-2);height:28px;padding:0 9px 0 7px;margin-left:-7px;border-radius:var(--dm-r-pill);font-size:13.5px;color:var(--dm-fg2);transition:background var(--dm-t-fast),color var(--dm-t-fast)}
@media (hover:hover) and (pointer:fine){.dm-ahx-wh:hover{background:var(--dm-row);color:var(--dm-fg)}}
.dm-ahx-wh .dm-g{display:grid;place-items:center;width:14px;color:var(--dm-muted)}
.dm-ahx-wh .dm-m{color:var(--dm-muted);font-size:12.5px}
.dm-ahx-wh>.dm-i{color:var(--dm-muted);transition:transform var(--dm-t) var(--dm-ease)}
.dm-ahx-wh[aria-expanded="true"]>.dm-i{transform:rotate(180deg)}
.dm-ahx-wb{align-self:stretch}
.dm-ahx-wl{display:flex;flex-direction:column;gap:var(--dm-s-4);margin:var(--dm-s-2) 0 2px 6px;padding-left:18px;border-left:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent)}
.dm-ahx-bot{flex:none;position:relative;padding:0 var(--dm-s-6) 18px}
.dm-ahx-bot::before{content:"";position:absolute;left:0;right:10px;bottom:100%;height:28px;background:linear-gradient(transparent,var(--dm-surface));pointer-events:none}
.dm-ahx-bot .dm-cpx{max-width:632px;margin:0 auto}
.dm-ahx .dm-cpx-thread{display:none}
.dm-ahx .dm-ctm-ft{gap:2px;margin-right:1px;font-size:12.5px}
.dm-ahx .dm-ctm-ft>span{color:var(--dm-muted);margin-right:2px}
/* while the agent works in the chat on screen, a new message waits */
.dm-ahx.dm-busy .dm-cpx-bar .dm-cpx-send{background:var(--dm-rail);color:var(--dm-surface);pointer-events:none}
/* the panel beside the chat, for an artifact */
/* shut, the panel is hidden as well as narrow, so Tab passes over its buttons */
.dm-ahx-pane{flex:none;width:0;overflow:hidden;background:var(--dm-surface);border-left:1px solid transparent;visibility:hidden;transition:width var(--dm-t) var(--dm-ease),border-color var(--dm-t) var(--dm-ease),visibility 0s var(--dm-t)}
.dm-ahx.dm-pn .dm-ahx-pane{width:300px;border-left-color:color-mix(in srgb,var(--dm-line) 50%,transparent);visibility:visible;transition-delay:0s}
.dm-ahx-pi{width:300px;height:100%;display:flex;flex-direction:column}
.dm-ahx-ph{flex:none;display:flex;align-items:center;gap:var(--dm-s-2);height:46px;padding:0 var(--dm-s-2) 0 14px;border-bottom:1px solid color-mix(in srgb,var(--dm-line) 50%,transparent);font-size:13px;font-weight:500}
.dm-ahx-ph .dm-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-ahx-ph>.dm-i{color:var(--dm-pb)}
.dm-ahx-ph .dm-ib{width:28px;height:28px;color:var(--dm-muted)}
@media (hover:hover) and (pointer:fine){.dm-ahx-ph .dm-ib:hover{color:var(--dm-fg)}}
.dm-ahx-pb{flex:1;min-height:0;overflow-y:auto;padding:var(--dm-s-4);display:flex;flex-direction:column;gap:var(--dm-s-4);scrollbar-width:thin;scrollbar-color:var(--dm-line) transparent}
.dm-ahx-pn{display:flex;flex-direction:column;gap:var(--dm-s-1);font-size:13px;line-height:1.55;color:var(--dm-fg2)}
.dm-ahx-pn b{font-weight:500;color:var(--dm-fg)}
.dm-ahx-pn p{margin:0 0 10px}
/* the report opened in the panel: drawn flat, with the chart it describes */
.dm-ahx-doc{padding:var(--dm-s-4) var(--dm-s-4) var(--dm-s-3)}
.dm-ahx-dh{font-weight:500;font-size:14px}
.dm-ahx-dp{margin-top:var(--dm-s-1);font-size:12.5px;line-height:1.5;color:var(--dm-fg2);min-height:38px;text-wrap:pretty}
.dm-ahx-kp{display:flex;align-items:baseline;gap:var(--dm-s-2);margin-top:10px}
.dm-ahx-kp b{font-size:14px;font-weight:500;letter-spacing:-.02em}
.dm-ahx-dd{font-size:12px;color:var(--dm-ok)}
.dm-ahx-ch{display:block;width:100%;height:56px;margin-top:var(--dm-s-2);overflow:visible}
.dm-ahx-ch .dm-ln{fill:none;stroke:var(--dm-accent-mark,var(--dm-accent));stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dm-ahx-ax{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--dm-muted)}
.dm-ahx-scrim{display:none}
/* a narrow chat, beside the panel or on a phone: the composer keeps only what it needs */
@container ahm (max-width:560px){
  .dm-ahx .dm-ctm-ft>span,.dm-ahx .dm-cpx-bar .dm-cpx-ctx,.dm-ahx-spl .dm-spl-in .dm-m{display:none}
}
/* phone: the chats slide in from the side, the tabs fold into one, the panel covers the chat */
@container ahx (max-width:620px){
  .dm-ahx .dm-ahx-side,.dm-ahx.dm-ns .dm-ahx-side{position:absolute;z-index:6;left:0;top:0;bottom:0;width:244px;margin-left:0;background:var(--dm-surface);transform:translateX(-101%)}
  .dm-ahx.dm-dr .dm-ahx-side{transform:none;box-shadow:var(--dm-shadow-pop)}
  .dm-ahx-scrim{display:block;position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity var(--dm-t) var(--dm-ease)}
  .dm-ahx.dm-dr .dm-ahx-scrim{opacity:1;pointer-events:auto}
  .dm-ahx .dm-ahx-menu{display:inline-grid}
  .dm-ahx-top{padding:0 6px}
  .dm-ahx-spl{display:none}
  /* the tabs fold into one: the chat on screen fills the row, and a count of the open chats lists them all */
  .dm-ahx-tabs{flex:1}
  .dm-ahx-tab:not(.dm-on){display:none}
  .dm-ahx-tab.dm-on{flex:1 1 auto;min-width:0}
  .dm-ahx-tn:not([hidden]){display:grid}
  .dm-ahx-side{visibility:hidden;transition:transform var(--dm-t) var(--dm-ease),box-shadow var(--dm-t) var(--dm-ease),visibility 0s var(--dm-t)}
  .dm-ahx.dm-dr .dm-ahx-side{visibility:visible;transition-delay:0s}
  .dm-ahx-pane{visibility:hidden;transition:width var(--dm-t) var(--dm-ease),visibility 0s var(--dm-t)}
  .dm-ahx.dm-pn .dm-ahx-pane{visibility:visible;transition-delay:0s}
  .dm-ahx-home{padding:var(--dm-s-4) 14px 28px}
  .dm-ahx-hi{font-size:14px}
  .dm-ahx-col{padding:18px var(--dm-s-4) var(--dm-s-6)}
  .dm-ahx-bot{padding:0 10px 10px}
  .dm-ahx-pane{position:absolute;z-index:4;top:0;right:0;bottom:0;border-left:0}
  .dm-ahx.dm-pn .dm-ahx-pane{width:100%}
  .dm-ahx-pi{width:100%}
}

<div class="card wide" data-c="harness">
  <div class="stage-in">
    <div class="ahx panel">
      <aside class="ahx-side" aria-label="Chats">
        <div class="ahx-ws">
          <button class="ahx-wsb" data-pop=".ahx-wsp" aria-haspopup="menu"><span class="ahx-lg">D</span><span class="t">DesignMe Studio</span><svg class="i xs"><use href="#i-chev-d"/></svg></button>
          <button class="ib ahx-hide" aria-label="Hide chats" data-tip="Hide chats"><svg class="i s"><use href="#i-panel"/></svg></button>
        </div>
        <button class="ahx-nav ahx-new"><svg class="i s"><use href="#i-edit"/></svg><span>New chat</span></button>
        <div class="ahx-lh"><span>Chats</span><button class="ib ahx-sb" aria-label="Search chats" data-tip="Search chats"><svg class="i s"><use href="#i-search"/></svg></button></div>
        <div class="fold shut ahx-sf"><div><input class="ahx-si" type="search" placeholder="Search chats" aria-label="Search chats"></div></div>
        <div class="ahx-list"><p class="ahx-none" hidden>No chats match</p></div>
      </aside>
      <div class="ahx-main home">
        <div class="ahx-top">
          <button class="ib ahx-menu" aria-label="Show chats" data-tip="Show chats"><svg class="i s"><use href="#i-panel"/></svg></button>
          <div class="ahx-tabs" role="tablist" aria-label="Open chats"></div>
          <button class="ahx-tn" data-pop=".ahx-tp" data-pop-align="end" aria-haspopup="menu" aria-label="Open chats" data-tip="Open chats" hidden><span class="num">1</span></button>
          <button class="ib ahx-plus" aria-label="New chat" data-tip="New chat"><svg class="i s"><use href="#i-plus"/></svg></button>
          <div class="spl ahx-spl"><div class="spl-pill" aria-live="polite"><div class="spl-in"></div></div></div>
        </div>
        <div class="ahx-body">
          <div class="ahx-feed"><div class="ahx-cols"></div></div>
          <div class="ahx-bot"></div>
          <div class="ahx-home">
            <div class="ahx-hw">
              <div class="ahx-hi"><span>Hello</span><h4>What should the agent work on?</h4></div>
              <div class="ahx-slot"></div>
              <div class="ahx-sg"></div>
              <div class="ahx-hf"><button class="pill ghost sm ahx-shf"><svg class="i xs"><use href="#i-refresh"/></svg>Shuffle suggestions</button></div>
            </div>
          </div>
        </div>
      </div>
      <aside class="ahx-pane" aria-label="Artifact" aria-hidden="true"><div class="ahx-pi">
        <div class="ahx-ph"><svg class="i s"><use href="#i-file-text"/></svg><span class="t"></span><button class="ib ahx-pl" aria-label="Copy link" data-tip="Copy link"><svg class="i s"><use href="#i-link"/></svg></button><button class="ib ahx-px" aria-label="Close panel" data-tip="Close"><svg class="i s"><use href="#i-x"/></svg></button></div>
        <div class="ahx-pb"></div>
      </div></aside>
      <div class="ahx-scrim"></div>
      <div class="pop ahx-wsp" role="menu"></div>
      <div class="pop ahx-tp" role="menu" aria-label="Open chats"></div>
    </div>
  </div>
</div>

/* ---------- Agent harness ---------- */
/* a whole agent app in one card: chats down the side, tabs across the top, a New chat home with suggestions, and the
   conversations themselves, told with the components above */
.card.wide .stage-in:has(>.ahx){max-width:960px}
.ahx{display:flex;height:620px;overflow:hidden;container:ahx/inline-size;text-align:left;position:relative}
.ahx-side{flex:none;width:236px;display:flex;flex-direction:column;gap:2px;padding:10px;background:color-mix(in srgb,var(--surface) 50%,var(--page));border-right:1px solid color-mix(in srgb,var(--line) 50%,transparent);transition:margin-left var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.ahx.ns .ahx-side{margin-left:-236px}
.ahx-ws{display:flex;align-items:center;gap:2px;margin-bottom:6px}
.ahx-wsb{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:34px;padding:0 var(--s-2) 0 7px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--fg);transition:background var(--t-fast)}
.ahx-wsb[aria-expanded="true"]{background:var(--row)}
@media (hover:hover) and (pointer:fine){.ahx-wsb:hover{background:var(--row)}}
.ahx-wsb .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ahx-wsb>.i{color:var(--muted);transition:transform var(--t) var(--ease)}
.ahx-wsb[aria-expanded="true"]>.i{transform:rotate(180deg)}
.ahx-lg{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none;background:var(--ink);color:var(--on-ink);font-size:11px;font-weight:500;transition:background var(--t) var(--ease)}
.ahx-ws .ib,.ahx-top>.ib,.ahx-lh .ib{width:28px;height:28px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.ahx-ws .ib:hover,.ahx-top>.ib:hover,.ahx-lh .ib:hover{color:var(--fg)}}
.ahx-wsp{width:212px}
.ahx-wsp .ahx-lg{width:18px;height:18px;font-size:10px}
.ahx-nav,.ahx-cv{display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:0 9px;border-radius:9px;font-size:13px;text-align:left;color:var(--fg2);transition:background var(--t-fast),box-shadow var(--t-fast),color var(--t-fast)}
.ahx-nav{color:var(--fg);font-weight:500}
.ahx-nav .i{color:var(--fg2)}
@media (hover:hover) and (pointer:fine){.ahx-nav:hover,.ahx-cv:hover{background:var(--row);color:var(--fg)}}
.ahx-cv[aria-current="true"]{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 1px 2px rgba(0,0,0,.04)}
.ahx-cv .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the chats fill the scrolling list, and a tab clips its own button: their rings are drawn inside */
.ahx-cv:focus-visible,.ahx-tb:focus-visible{outline-offset:-2px}
.ahx-lh{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) 1px 2px 9px;font-size:11.5px;color:var(--muted)}
.ahx-lh .ib{width:24px;height:24px}
.ahx-si{display:block;width:100%;height:32px;margin:var(--s-1) 0 6px;padding:0 10px;border:0;border-radius:var(--r-field);background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--field-line) 50%,transparent);font-size:13px;outline:0;transition:box-shadow var(--t-fast)}
@supports (corner-shape:squircle){.ahx-si{corner-shape:squircle;border-radius:var(--r-field-sq)}}
.ahx-si:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--field-line-strong) 50%,transparent)}
.ahx-si::placeholder{color:var(--muted)}
.ahx-si::-webkit-search-cancel-button{display:none}
.ahx-list{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none}
.ahx-none{margin:0;padding:6px 9px;font-size:12.5px;color:var(--muted)}
.ahx-mk{display:grid;place-items:center;width:10px;flex:none}
.ahx-mk:empty{display:none}
.ahx-mk .spin{width:10px;height:10px;color:var(--muted)}
.ahx-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;container:ahm/inline-size}
/* the tabs: a chat opens or comes to the front, × closes it, + opens New chat */
.ahx-top{flex:none;display:flex;align-items:center;gap:var(--s-1);height:46px;padding:0 10px 0 var(--s-2);border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.ahx-menu{display:none}
.ahx.ns .ahx-menu{display:inline-grid}
.ahx-tabs{position:relative;display:flex;align-items:center;gap:2px;min-width:0;padding:2px;overflow-x:auto;scrollbar-width:none}
.ahx-tabs::-webkit-scrollbar{display:none}
.ahx-tab{flex:0 1 164px;min-width:108px;display:flex;align-items:center;height:30px;border-radius:9px;overflow:hidden;color:var(--fg2);transition:background var(--t-fast),box-shadow var(--t-fast),color var(--t-fast)}
@media (hover:hover) and (pointer:fine){.ahx-tab:hover{background:var(--row);color:var(--fg)}}
.ahx-tab.on{background:var(--surface);color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rail) 50%,transparent),0 1px 2px rgba(0,0,0,.04)}
.ahx-tb{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:100%;padding:0 2px 0 10px;font-size:12.5px;text-align:left}
.ahx-tb .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ahx-tx{width:20px;height:20px;margin-right:5px;border-radius:6px;display:grid;place-items:center;flex:none;color:var(--muted);opacity:0;transition:opacity var(--t-fast),background var(--t-fast),color var(--t-fast)}
.ahx-tx .i{width:12px;height:12px}
.ahx-tab.on .ahx-tx,.ahx-tx:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){.ahx-tab:hover .ahx-tx{opacity:1}}
@media (hover:hover) and (pointer:fine){.ahx-tx:hover{background:var(--row);color:var(--fg)}}
.ahx-plus{flex:none}
.ahx-tn{display:none;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--r-sm);color:var(--fg2);transition:background var(--t-fast),color var(--t-fast)}
.ahx-tn[aria-expanded="true"]{background:var(--row);color:var(--fg)}
@media (hover:hover) and (pointer:fine){.ahx-tn:hover{background:var(--row);color:var(--fg)}}
.ahx-tn .num{display:grid;place-items:center;min-width:18px;height:18px;padding:0 var(--s-1);border-radius:5px;box-shadow:inset 0 0 0 1.5px currentColor;font-size:11px;font-weight:500;line-height:1}
.ahx-tp{width:232px}
.ahx-tp .mi .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ahx-tp .mi .ahx-mk:empty{display:grid}
.ahx-spl{flex:none;margin-left:auto;transition:opacity var(--t) var(--ease)}
.ahx-main.home .ahx-spl{opacity:0;pointer-events:none}
.ahx-spl .spl-pill{height:30px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 50%,transparent)}
.ahx-spl .spl-in{gap:7px;padding:0 var(--s-1) 0 11px;font-size:12.5px}
.ahx-spl .spl-in .g{width:14px}
.ahx-spl .spl-in .pill{height:22px;padding:0 9px;margin-left:1px;font-size:12px}
/* New chat: a greeting, the composer and three suggestions, in the middle of the card */
.ahx-body{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.ahx-home{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:var(--s-5) 28px 44px}
.ahx-main:not(.home) .ahx-home{display:none}
.ahx-main.home :is(.ahx-feed,.ahx-bot){visibility:hidden}
.ahx-hw{width:100%;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.ahx-hi{display:flex;flex-direction:column;padding:0 var(--s-1);margin-bottom:6px;font-size:14px;font-weight:500;letter-spacing:-.4px;line-height:1.3}
.ahx-hi span{color:var(--muted)}
.ahx-hi h4{margin:0;font:inherit;color:var(--fg)}
.ahx-sg{display:flex;flex-direction:column;gap:1px;margin-top:var(--s-1)}
.ahx-sr{display:flex;align-items:center;gap:11px;width:100%;min-height:36px;padding:0 10px;border-radius:10px;font-size:13.5px;color:var(--fg);text-align:left;transition:background var(--t-fast)}
@media (hover:hover) and (pointer:fine){.ahx-sr:hover{background:var(--row)}}
.ahx-sr .i{color:var(--muted)}
.ahx-hf{display:flex;padding-left:3px}
.ahx-shf{color:var(--muted)}
.ahx-shf .i{transition:transform .6s var(--ease)}
@media (hover:hover) and (pointer:fine){.ahx-shf:hover .i{transform:rotate(-180deg)}}
/* a chat scrolls inside the card; each one keeps its own column, only the one on screen takes up room */
.ahx-feed{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ahx-cols{flex:1 0 auto;display:grid}
.ahx-col{grid-area:1/1;min-width:0;width:100%;max-width:688px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s-5);padding:var(--s-6) 28px 30px;transition:opacity var(--t) var(--ease)}
.ahx-col.off{visibility:hidden;height:0;padding-block:0;overflow:hidden}
.ahx-col.ff{opacity:0}
.ahx-say .w{animation:lvw .5s var(--ease) both}
.ahx-fs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.ahx-fs:last-child{margin-bottom:0}
.ahx-msg{min-width:0}
/* a component in the chat lines up with the messages on the left, instead of centring itself as it does on its own */
.ahx-col .ahx-msg>*{margin-left:0;margin-right:auto}
/* chat components sit on the chat itself, the way a bare card shows them; an artifact and a diff keep their card */
.ahx-msg:not(.box)>.panel:not(.keep){background:none;box-shadow:none;padding-left:0;padding-right:0;border-radius:0}
/* in the chat a finished question set closes up behind its answers */
.ahx-msg .dpx-body{min-height:0}
.ahx-msg .dpx-f.leave{display:none}
/* the agent's work, gathered under one line that folds away when it is done */
.ahx-wk{display:flex;flex-direction:column;align-items:flex-start}
.ahx-wh{display:inline-flex;align-items:center;gap:var(--s-2);height:28px;padding:0 9px 0 7px;margin-left:-7px;border-radius:var(--r-pill);font-size:13.5px;color:var(--fg2);transition:background var(--t-fast),color var(--t-fast)}
@media (hover:hover) and (pointer:fine){.ahx-wh:hover{background:var(--row);color:var(--fg)}}
.ahx-wh .g{display:grid;place-items:center;width:14px;color:var(--muted)}
.ahx-wh .m{color:var(--muted);font-size:12.5px}
.ahx-wh>.i{color:var(--muted);transition:transform var(--t) var(--ease)}
.ahx-wh[aria-expanded="true"]>.i{transform:rotate(180deg)}
.ahx-wb{align-self:stretch}
.ahx-wl{display:flex;flex-direction:column;gap:var(--s-4);margin:var(--s-2) 0 2px 6px;padding-left:18px;border-left:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.ahx-bot{flex:none;position:relative;padding:0 var(--s-6) 18px}
.ahx-bot::before{content:"";position:absolute;left:0;right:10px;bottom:100%;height:28px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.ahx-bot .cpx{max-width:632px;margin:0 auto}
.ahx .cpx-thread{display:none}
.ahx .ctm-ft{gap:2px;margin-right:1px;font-size:12.5px}
.ahx .ctm-ft>span{color:var(--muted);margin-right:2px}
/* while the agent works in the chat on screen, a new message waits */
.ahx.busy .cpx-bar .cpx-send{background:var(--rail);color:var(--surface);pointer-events:none}
/* the panel beside the chat, for an artifact */
/* shut, the panel is hidden as well as narrow, so Tab passes over its buttons */
.ahx-pane{flex:none;width:0;overflow:hidden;background:var(--surface);border-left:1px solid transparent;visibility:hidden;transition:width var(--t) var(--ease),border-color var(--t) var(--ease),visibility 0s var(--t)}
.ahx.pn .ahx-pane{width:300px;border-left-color:color-mix(in srgb,var(--line) 50%,transparent);visibility:visible;transition-delay:0s}
.ahx-pi{width:300px;height:100%;display:flex;flex-direction:column}
.ahx-ph{flex:none;display:flex;align-items:center;gap:var(--s-2);height:46px;padding:0 var(--s-2) 0 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);font-size:13px;font-weight:500}
.ahx-ph .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ahx-ph>.i{color:var(--pb)}
.ahx-ph .ib{width:28px;height:28px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.ahx-ph .ib:hover{color:var(--fg)}}
.ahx-pb{flex:1;min-height:0;overflow-y:auto;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.ahx-pn{display:flex;flex-direction:column;gap:var(--s-1);font-size:13px;line-height:1.55;color:var(--fg2)}
.ahx-pn b{font-weight:500;color:var(--fg)}
.ahx-pn p{margin:0 0 10px}
/* the report opened in the panel: drawn flat, with the chart it describes */
.ahx-doc{padding:var(--s-4) var(--s-4) var(--s-3)}
.ahx-dh{font-weight:500;font-size:14px}
.ahx-dp{margin-top:var(--s-1);font-size:12.5px;line-height:1.5;color:var(--fg2);min-height:38px;text-wrap:pretty}
.ahx-kp{display:flex;align-items:baseline;gap:var(--s-2);margin-top:10px}
.ahx-kp b{font-size:14px;font-weight:500;letter-spacing:-.02em}
.ahx-dd{font-size:12px;color:var(--ok)}
.ahx-ch{display:block;width:100%;height:56px;margin-top:var(--s-2);overflow:visible}
.ahx-ch .ln{fill:none;stroke:var(--accent-mark,var(--accent));stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ahx-ax{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--muted)}
.ahx-scrim{display:none}
/* a narrow chat, beside the panel or on a phone: the composer keeps only what it needs */
@container ahm (max-width:560px){
  .ahx .ctm-ft>span,.ahx .cpx-bar .cpx-ctx,.ahx-spl .spl-in .m{display:none}
}
/* phone: the chats slide in from the side, the tabs fold into one, the panel covers the chat */
@container ahx (max-width:620px){
  .ahx .ahx-side,.ahx.ns .ahx-side{position:absolute;z-index:6;left:0;top:0;bottom:0;width:244px;margin-left:0;background:var(--surface);transform:translateX(-101%)}
  .ahx.dr .ahx-side{transform:none;box-shadow:var(--shadow-pop)}
  .ahx-scrim{display:block;position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity var(--t) var(--ease)}
  .ahx.dr .ahx-scrim{opacity:1;pointer-events:auto}
  .ahx .ahx-menu{display:inline-grid}
  .ahx-top{padding:0 6px}
  .ahx-spl{display:none}
  /* the tabs fold into one: the chat on screen fills the row, and a count of the open chats lists them all */
  .ahx-tabs{flex:1}
  .ahx-tab:not(.on){display:none}
  .ahx-tab.on{flex:1 1 auto;min-width:0}
  .ahx-tn:not([hidden]){display:grid}
  .ahx-side{visibility:hidden;transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),visibility 0s var(--t)}
  .ahx.dr .ahx-side{visibility:visible;transition-delay:0s}
  .ahx-pane{visibility:hidden;transition:width var(--t) var(--ease),visibility 0s var(--t)}
  .ahx.pn .ahx-pane{visibility:visible;transition-delay:0s}
  .ahx-home{padding:var(--s-4) 14px 28px}
  .ahx-hi{font-size:14px}
  .ahx-col{padding:18px var(--s-4) var(--s-6)}
  .ahx-bot{padding:0 10px 10px}
  .ahx-pane{position:absolute;z-index:4;top:0;right:0;bottom:0;border-left:0}
  .ahx.pn .ahx-pane{width:100%}
  .ahx-pi{width:100%}
}

/* an agent app made only of the components above. Nothing plays by itself: it opens on New chat, a story plays once when
   someone picks a suggestion or sends a message, every approval waits for their click, and a past chat opens on its last state */
DM.def('harness', (r, c) => {
  const IC = { plus:I('plus'), edit:I('edit'), search:I('search'), panel:I('panel'), chev:I('chev-d','xs'), x:I('x'), refresh:I('refresh','xs'), doc:I('file-text'), link:I('link') };
  r.innerHTML = r.innerHTML.replace(/\{(\w+)\}/g, (m, k) => IC[k] || m);
  const root = $('.ahx', r), main = $('.ahx-main', r), list = $('.ahx-list', r), tabsEl = $('.ahx-tabs', r), feed = $('.ahx-feed', r), cols = $('.ahx-cols', r);
  const bot = $('.ahx-bot', r), slot = $('.ahx-slot', r), sg = $('.ahx-sg', r), pane = $('.ahx-pane', r), wsp = $('.ahx-wsp', r);
  const pill = $('.ahx-spl .spl-pill', r), pin = $('.spl-in', pill);
  // the templates live on the components' own cards: here and on designme.dev every card is on the page; on your own page, add the cards it uses
  const tplOf = k => { const card = $(`.card[data-c="${k}"], .comp[data-v2="${k}"]`); return card && DM.tpl(card); };
  const BOXED = ['artifact-card', 'change-review'];
  const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
  /* a clock of its own: a past chat replays at speed out of sight, so opening it shows its end at once.
     The tiny waits of a replay go through a message, which the browser runs at once, where a timer would be held back */
  const mc = new MessageChannel(), q = [];
  mc.port1.onmessage = () => { const f = q.shift(); if (f) f(); };
  const soon = fn => { q.push(fn); mc.port2.postMessage(0); };
  c.offs.push(() => { q.length = 0; mc.port1.close(); });
  const paced = (up, f) => { const s = ctl(up), w = s.wait, l = s.later, e = s.every; s.speed = (up.speed || 1) * f; s.ff = up.ff; s.raw = w;
    s.wait = ms => (ms *= s.speed) < 4 ? new Promise((res, rej) => soon(() => s.gate(() => s.dead ? rej('stop') : res()))) : w(ms);
    s.later = (ms, fn) => (ms *= s.speed) < 4 ? soon(() => s.gate(() => { if (!s.dead) fn(); })) : l(ms, fn);
    s.every = (ms, fn) => e(Math.max(16, ms * s.speed), fn);
    // a component inside stops its own demo when the visitor takes over the harness
    up.offs.push(() => s.stop()); if (up.taken) up.taken(() => { s.mine = true; }); return s; };

  /* ---- the composer, with the model and the context ring in its bar. It sits in the middle of New chat and at the foot of a chat ---- */
  const cpT = tplOf('composer');
  if (cpT){ bot.append(cpT.content.cloneNode(true)); try { DM.defs.composer(bot, c, bot); } catch(e){ console.error('composer', e); } }
  const cpx = $('.cpx', bot), ta = $('.cpx-ta', bot), att = $('.cpx-att', bot);
  // the context ring is the meter's own ring, as a button of its own in the composer's bar, before the mode
  const ctT = tplOf('context-meter'), rs = ctT && ta && $('.ctm-ring svg', ctT.content);
  const ft = rs && html(`<span class="ctm-ft"><button class="ctm-ring" aria-label="Context">${rs.outerHTML}</button></span>`);
  if (ft) $('.cpx-mode', bot).before(ft);
  const ring = v => { if (!ft) return; const rb = $('.ctm-ring', ft), fl = $('.fl', ft); fl.style.strokeDasharray = v + ' 100'; fl.style.opacity = v ? '' : '0';
    rb.dataset.tip = 'Context ' + v + '% full'; rb.setAttribute('aria-label', 'Context, ' + v + '% full'); };
  const input = () => ta && ta.dispatchEvent(new Event('input'));

  /* ---- the status pill beside the tabs says what the chat on screen is doing ---- */
  const G = {
    idle:'<span class="g"><span class="dot" style="color:var(--faint)"></span></span>',
    think:'<span class="g" style="color:var(--fg)"><span class="think on"><i></i><i></i><i></i><i></i></span></span>',
    tool:'<span class="g" style="color:var(--fg)"><span class="radar"></span></span>',
    run:'<span class="g" style="color:var(--fg)"><span class="spin"></span></span>',
    wait:'<span class="g" style="color:var(--warn)"><span class="dot"></span></span>',
    ok:`<span class="g" style="color:var(--ok)">${I('ok')}</span>`
  };
  const fit = () => { pin.style.width = 'max-content'; const w = pin.scrollWidth; pin.style.width = ''; pill.style.width = w + 'px'; };
  let shown = '';
  function showStatus(st, now){
    const key = [st.g, st.t, !!st.act].join('|');
    // a count or a timer ticks over in place, under a steady line
    if (key === shown){ let m = $('.m', pin); if ((m ? m.textContent : '') === (st.m || '')) return;
      if (!m){ m = html('<span class="m"></span>'); pin.lastElementChild.before(m); } else if (!st.m){ m.remove(); return fit(); }
      m.textContent = st.m; return fit(); }
    shown = key;
    const put = () => { pin.innerHTML = G[st.g] + `<span class="${st.g === 'idle' ? 'fg2' : /think|tool|run/.test(st.g) ? 'shim' : ''}">${st.t}</span>`
      + (st.m ? `<span class="m">${st.m}</span>` : '') + (st.act ? '<button class="pill primary sm">Review</button>' : '<span class="end"></span>');
      const b = $('.pill', pin); if (b) b.onclick = () => look(st.act); fit(); };
    if (now || REDUCE) return put();
    pill.style.width = pill.offsetWidth + 'px'; pin.classList.add('out');
    c.later(180, () => { if (shown !== key) return; put(); pin.classList.remove('out'); });
  }

  /* ---- following the chat: it keeps to the newest message until you scroll up, and picks up again at the bottom ---- */
  let stick = true, ours = 0, following = false;
  const bottom = () => feed.scrollHeight - feed.clientHeight;
  c.on(feed, 'scroll', () => { if (Math.abs(feed.scrollTop - ours) > 2) stick = bottom() - feed.scrollTop < 40; });
  c.on(feed, 'wheel', e => { if (e.deltaY < 0) stick = false; }, { passive:true });
  function follow(){
    if (following || !stick) return; following = true;
    c.loop(() => { const d = bottom() - feed.scrollTop; if (!stick || d < 1){ following = false; return false; }
      feed.scrollTop += REDUCE ? d : Math.max(1, Math.ceil(d * .16)); ours = feed.scrollTop; });
  }
  const ro = new ResizeObserver(() => follow()); c.offs.push(() => ro.disconnect());
  const toEnd = () => { stick = true; feed.scrollTop = bottom(); ours = feed.scrollTop; };
  const look = el => { if (!el || !el.isConnected) return; stick = false;
    feed.scrollTo({ top:feed.scrollTop + el.getBoundingClientRect().top - feed.getBoundingClientRect().top - 12, behavior:REDUCE ? 'auto' : 'smooth' }); };

  /* ---- the stories, each told only with the components above. A story waits for every approval; a past chat replays the
     choice that was made back then, so it opens finished ---- */
  const S = {
    pricing:{ ask:'Tighten the spacing and prices on the pricing page', title:'Pricing page fixes', nt:'Pricing spacing and prices', ic:'grid', end:{ g:'ok', t:'Done', m:'6 files changed' }, ctx:46, run:async t => {
      await t.ask(); t.ctx(12);
      const g = t.group('Checking the pricing page');
      const tk = g.comp('thinking', .5);
      await t.until(() => { t.status('think', 'Thinking', $('.tk-time', tk).textContent); return $('.tk-fin', tk); }, 200);
      t.ctx(21); await t.wait(400);
      const tc = g.comp('tool-call');
      await t.until(() => { const on = $$('.tcx-c', tc).find(x => $('.spin', x)); t.status('tool', 'Calling tools', on ? $('.tcx-n b', on).textContent : 'billing'); return $('.tcx-end.in', tc); });
      g.done('Checked 6 frames and 2 plan prices', 11); t.ctx(28); await t.wait(700);
      await t.say('Three cards break the 8px grid, and the Figma frames still show the old prices. To fix them I need edit access to Pricing.fig.');
      const pg = t.comp('permission-gate'); t.hold(pg, 'Needs access', "I can't change the frames without access. Allow it above, or pick Not now and I'll list the fixes here.");
      t.decide(pg, '.pgx-ok');
      await t.until(() => $('.pgx-done', pg));
      if (/skip/.test($('.pgx-done', pg).textContent)){ await t.wait(500); await t.say("No problem. To fix it by hand, move the three cards onto the 8px grid and update the Pro and Team prices."); return t.end('Done', 'Nothing edited'); }
      const g2 = t.group('Applying the fixes');
      const al = g2.comp('action-log', .7);
      await t.until(() => { t.status('run', 'Applying the fixes', 'Step ' + $('.alg-list', al).children.length + ' of 5'); return $('.alg-st .dot', al); });
      g2.done('Edited 6 frames and opened a pull request', 6); t.ctx(36); await t.wait(600);
      await t.say("Here's the plan for the rest of the redesign. Change any step, or approve it and I'll start.");
      const pl = t.comp('plan-review'); t.hold(pl, 'Needs your approval', "Noted. Edit a step above to match, or approve the plan as it is and I'll start."); t.ctx(40);
      t.decide(pl, '.plx-go');
      // the plan's own line says how it ended, once its crossfade has landed
      await t.until(() => { const s = $('.plx-st', pl).textContent; if (/^Step/.test(s)) t.status('run', 'Running the plan', s); return $('.plx-f .pill.soft', pl) && /^(Done|Stopped)/.test(s); });
      if (/Stopped/.test($('.plx-st', pl).textContent)){ await t.say('Stopped. The finished steps are kept.'); return t.end('Stopped', 'Progress kept'); }
      t.ctx(44); await t.wait(600);
      await t.say("All done. Here's what changed.");
      const rs = t.comp('run-summary'); t.ctx(46);
      $('.plx-f .pill.soft', pl).onclick = () => look(rs);
      await t.wait(1200); t.end('Done', '6 files changed', ['What still needs me?', 'Which spacing tokens did you use?']);
    } },
    team:{ ask:'Redesign the pricing page with three agents', title:'Pricing with three agents', nt:'Three agents on pricing', ic:'users', end:{ g:'ok', t:'Ready to review', m:'3 files' }, ctx:58, run:async t => {
      await t.ask(); t.ctx(10);
      await t.say('Three quick questions before I split the work.');
      const dp = t.comp('decision-prompt'); t.hold(dp, 'Needs your answers', "Pick an answer above, or press Skip and I'll decide for you.");
      t.decide(dp, '.dpx-go', 3);
      await t.until(() => $('.dpx-sum', dp));
      t.status('run', 'Starting 3 agents'); t.ctx(18); await t.wait(1400);
      const run = $('.dpx-run', dp); if (run) run.innerHTML = `<span style="color:var(--ok)">${I('check','xs')}</span><span>Started the redesign</span>`;
      await t.say("I've handed the brief to three agents. Each one passes its work to the next.");
      const al = t.comp('agent-lanes', .6);
      await t.until(() => { const s = $('.aln-t', al).textContent; t.status('run', /paused/.test(s) ? 'Agents paused' : 'Agents working', $('.aln-m', al).textContent); return /finished/.test(s); }, 300);
      t.ctx(52); await t.wait(600);
      await t.say('The reviewer signed off. Here are the changes, ready for you to keep or undo.');
      t.comp('change-review'); t.ctx(58);
      await t.wait(800); t.end('Ready to review', '3 files', ['What did the researcher find?', 'Who signed off?']);
    } },
    dropoff:{ ask:'Where are people dropping off in onboarding?', title:'Onboarding drop-off', nt:'Where onboarding loses people', ic:'chart', end:{ g:'ok', t:'Answered', m:'3 sources' }, ctx:24, run:async t => {
      // the live answer brings the question with it, and its own follow-ups
      const la = t.comp('live-answer'), qb = $('.lva-q .bub', la); if (qb) qb.textContent = t.text; t.ctx(9);
      await t.until(() => { t.status(...($('.lva-p', la) ? ['run', 'Answering'] : ['think', 'Thinking'])); return $('.lva-fu', la); });
      t.ctx(19); await t.wait(700);
      await t.say("I also put last quarter's churn numbers in a doc you can share with the team.");
      t.status('run', 'Writing the doc'); t.doc(t.comp('artifact-card')); t.ctx(24);
      await t.wait(4600); t.end('Answered', '3 sources');
    } },
    annual:{ ask:'Why do annual plans convert better for us?', title:'Why annual converts', nt:'Annual vs monthly conversion', ic:'coins', end:{ g:'ok', t:'Answered', m:'8 sources' }, ctx:17, run:async t => {
      await t.ask(); t.ctx(8);
      const w = t.working('Reading 8 sources'); t.status('tool', 'Reading 8 sources');
      await t.wait(1700); w.remove();
      t.comp('source-stack'); t.ctx(17);
      await t.wait(1700);
      await t.say('Want me to try the crossed-out monthly price on the pricing page?');
      t.end('Answered', '8 sources', ['Try it on the pricing page', 'How sure are you?']);
    } },
    sync:{ ask:"Sync this quarter's deals to the pipeline sheet", title:'Sync deals to Sheets', nt:"This quarter's deals to Sheets", ic:'table', end:{ g:'ok', t:'Recovered', m:'1 retry' }, ctx:31, run:async t => {
      await t.ask(); t.ctx(9);
      const w = t.working('Syncing 1,240 deals'); t.status('run', 'Syncing deals');
      await t.wait(1500); w.remove();
      const er = t.comp('error-recovery'); t.hold(er, 'Needs a decision', "Choose how I should carry on above, and I'll pick it up from there."); t.ctx(14);
      t.decide(er, '.erx-go');
      await t.until(() => { const s = $('.erx-s', er).textContent; if (s === 'Recovering') t.status('run', 'Recovering'); return /Recovered|2 of 3|Maya/.test(s); });
      const s = $('.erx-s', er).textContent; t.ctx(31); await t.wait(600);
      if (/Maya/.test(s)){ await t.say("Maya has the error and the logs. I'll pick it up again when she replies."); return t.status('wait', 'Waiting on Maya', '', null, "Maya hasn't replied yet. I'll carry on as soon as she does."); }
      if (/2 of 3/.test(s)){ await t.say('The summary is posted in #sales. The sheet stays as it was until access is back.'); return t.end('Done', '1 step skipped'); }
      await t.say('All 1,240 deals are in the sheet, and the summary is posted in #sales.');
      t.end('Recovered', '1 retry', ['Who can edit the sheet now?', 'Run this every Monday']);
    } }
  };
  const KEYS = Object.keys(S), HUE = ['#3b82f6', '#7a5af8', '#0ea5a4', '#f97316', '#16a34a'];
  // a follow-up gets a short answer with its sources
  const FU = {
    'What still needs me?':['Just the yearly badge. It overlaps the price on mobile [1], and moving it changes the height of every card [2], so I left that call to you.',
      [['F', '#7a5af8', 'Pricing.fig', 'Mobile frame, 390px'], ['T', '#3b82f6', 'PricingCard.tsx', 'src/components']]],
    'Which spacing tokens did you use?':['Three of them: space-4 inside each card [1], space-6 between cards and space-8 around the grid [1]. No frame uses the old 20px gap any more [2].',
      [['T', '#3b82f6', 'tokens.ts', 'src/styles'], ['F', '#7a5af8', 'Pricing.fig', '6 frames']]],
    'What did the researcher find?':['Three patterns across five competitor pages [1]: one plan highlighted, yearly prices shown per month, and a single button on each card [2]. The designer used all three.',
      [['N', '#0ea5a4', 'Research brief', 'Notion'], ['S', '#635bff', 'stripe.com/pricing', 'Web']]],
    'Who signed off?':['The reviewer agent [1]. Contrast passes AA on every card, and it fixed two lines of copy [2]. Merging still needs a person.',
      [['R', '#16a34a', 'Review notes', 'Reviewer agent'], ['C', '#f97316', 'Contrast report', '14 text pairs']]],
    'Try it on the pricing page':['I made a variant with the monthly price crossed out next to the annual one [1], set up as an A/B test for half of your visitors [2]. Nothing goes live until you start it.',
      [['F', '#7a5af8', 'Pricing v5', 'Figma'], ['E', '#f97316', 'Experiment draft', '50/50 split']]],
    'How sure are you?':['Fairly. The CXL study [1] and our Q3 export [2] point the same way, but our sample is small: 312 annual sign-ups. A two-week test would settle it.',
      [['C', '#d9480f', 'Annual vs monthly anchoring', 'cxl.com'], ['Q', '#16a34a', 'Q3 conversion export.csv', 'Drive']]],
    'Who can edit the sheet now?':['You, Maya and the agent can edit it [1]. The 14 people in #sales can view it [2].',
      [['P', '#16a34a', 'Pipeline 2026', 'Sharing settings'], ['#', '#db2777', '#sales', 'Slack, 14 people']]],
    'Run this every Monday':["Scheduled. Every Monday at 9:00 I'll sync the week's deals and post the summary in #sales [1]. You can pause it any time from Automations [2].",
      [['A', '#3b82f6', 'Weekly pipeline sync', 'Automation'], ['#', '#db2777', '#sales', 'Slack, 14 people']]]
  };
  // anything else gets an honest answer: this preview only knows its five example chats
  const GEN = "This preview only runs five example chats, so I can't look into that one for real. I can fix the pricing page [1], split a redesign between three agents [2], find where onboarding loses people [3], explain why annual plans convert [4] or sync deals to a sheet [5].";
  const ROUTE = [['team', /\b(agents?|researchers?|designers?|reviewers?|split)\b/i], ['sync', /\b(sync|deals?|sheets?|pipeline|crm|sales)\b/i],
    ['annual', /\b(annual|yearly|monthly|convert|conversions?)\b/i], ['dropoff', /\b(drop|dropping|onboarding|funnel|leav(e|ing)|activation|sign-?ups?)\b/i],
    ['pricing', /\b(pric(e|es|ing)|spacing|figma|audit|tighten|grid)\b/i]];
  const route = v => KEYS.find(k => S[k].ask === v) || (ROUTE.find(x => x[1].test(v)) || [])[0];

  /* ---- chats and tabs ---- */
  let n = 0, at = null, vis = null, paneFor = null;
  const CV = [], TABS = [];
  const IDLE = { g:'idle', t:'Ready for a task', m:'' };
  const conv = (title, o) => Object.assign({ id:'c' + ++n, title, st:IDLE, ctx:4, state:'idle' }, o);
  const column = cv => { if (!cv.col){ cv.col = html('<div class="ahx-col off" aria-hidden="true"></div>'); cols.appendChild(cv.col); } return cv.col; };
  const stateOf = g => g === 'ok' ? 'done' : g === 'wait' ? 'wait' : g === 'idle' ? 'idle' : 'run';
  const markOf = cv => cv.unread ? '<span class="dot" style="color:var(--accent-mark,var(--accent))"></span>' : cv.state === 'run' ? '<span class="spin"></span>'
    : cv.state === 'wait' ? '<span class="dot" style="color:var(--warn)"></span>' : '';
  // the quiet mark on a chat's row and its tab: unread, working, or waiting on you
  function mark(cv){
    if (cv.k && cv.k.ff && !cv.ready) return;
    const m = markOf(cv);
    [cv.row, ...TABS.filter(x => x.cv === cv).map(x => x.el)].forEach(el => { const mk = el && $('.ahx-mk', el); if (!mk || mk._m === m) return;
      mk._m = m; mk.innerHTML = m; if (m) enter(mk.firstElementChild); });
  }
  function status(cv, g, t, m = '', act, note){
    // a replay out of sight keeps its last word for when it is shown
    if (cv.k && cv.k.ff && !cv.ready){ cv.fst = { g, t, m }; return; }
    cv.st = { g, t, m, act }; cv.state = stateOf(g); cv.note = note;
    mark(cv); if (cv === vis){ showStatus(cv.st); busy(); }
  }
  function busy(){
    const run = !!vis && vis.state === 'run'; root.classList.toggle('busy', run);
    if (ta) ta.placeholder = !vis ? 'Ask the agent to do something' : run ? 'The agent is working…' : 'Reply';
  }

  /* what a story can do: say something, bring in a component, gather work under one line, wait on the person, and keep the header honest */
  function turn(cv, k, text, files){
    const ff = k.ff, add = (el, into = cv.col) => { into.appendChild(el); if (!ff) enter(el); return el; };
    const t = {
      text, ff,
      wait: ms => k.wait(ms),
      until: async (fn, step = 120) => { while (!fn()) await (ff ? k.raw(16) : k.wait(step)); },
      status: (g, tx, m, act, note) => status(cv, g, tx, m, act, note),
      // waiting on the person: the pill offers Review, and a message sent meanwhile gets this note back
      hold: (host, tx, note) => status(cv, 'wait', tx, '', host, note),
      ctx: v => { cv.ctx = v; if (cv === vis && !ff) ring(v); },
      async ask(quiet){
        add(html(`<div class="bub">${files && files.length ? `<div class="ahx-fs">${files.map(f => `<span class="fchip">${I('clip','xs')}${esc(f)}</span>`).join('')}</div>` : ''}${esc(text)}</div>`));
        if (cv === vis && !ff) stick = true;
        if (!quiet){ status(cv, 'think', 'Thinking'); await k.wait(700); }
      },
      async say(tx){
        const p = html('<p class="msg ahx-say"></p>'); cv.col.appendChild(p);
        for (const w of tx.split(' ')){ p.insertAdjacentHTML('beforeend', `<span class="w">${esc(w)} </span>`); await k.wait(26 + Math.random() * 30); }
        await k.wait(260);
      },
      comp(name, f = 1, into = cv.col){
        const tp = tplOf(name), host = html(`<div class="ahx-msg${BOXED.includes(name) ? ' box' : ''}"></div>`);
        if (tp) host.append(tp.content.cloneNode(true));
        into.appendChild(host);
        if (tp && DM.defs[name]) try { DM.defs[name](host, paced(k, f), host); } catch(e){ console.error(name, e); }
        if (!ff) reveal(host);
        return host;
      },
      // the agent's work under one line: open while it runs, folded into a summary when it is done
      group(label){
        const g = add(html(`<div class="ahx-wk"><button class="ahx-wh" aria-expanded="true"><span class="g"><span class="spin"></span></span><span class="t shim">${label}</span><span class="m num"></span>${I('chev-d','xs')}</button><div class="fold ahx-wb"><div><div class="ahx-wl"></div></div></div></div>`));
        const h = $('.ahx-wh', g), fo = $('.ahx-wb', g), body = $('.ahx-wl', g), t0 = performance.now();
        let mine = false;
        const open = o => { fo.classList.toggle('shut', !o); h.setAttribute('aria-expanded', o); };
        h.onclick = () => { mine = true; open(fo.classList.contains('shut')); };
        return { comp:(name, f) => t.comp(name, f, body), done(tx, secs){
          const tt = $('.t', h), gl = $('.g', h); tt.classList.remove('shim'); if (ff) tt.textContent = tx; else swap(tt, tx);
          $('.m', h).textContent = (ff ? secs : Math.max(1, Math.round((performance.now() - t0) / 1000))) + 's';
          gl.innerHTML = I('check','xs'); if (!ff) enter(gl.firstElementChild);
          if (ff) open(false); else k.later(1200, () => { if (!mine) open(false); });
        } };
      },
      working: tx => add(html(`<div class="lva-th"><span class="think on" style="color:var(--fg2)"><i></i><i></i><i></i><i></i></span><span class="shim">${tx}</span></div>`)),
      // a past chat gives the answer it was given back then; a live one leaves it to the person
      decide(host, sel, times = 1){ if (ff) for (let i = 0; i < times; i++){ const b = $(sel, host); if (b && !b.disabled) b.click(); } },
      // the Artifact card shows the churn report, and its Open puts it in the panel beside the chat
      doc(af){ const api = $('.afx', af) && $('.afx', af)._afx; if (!api) return; api.use(CHURN, { open:i => openPane(cv, i), openLabel:'Open beside the chat' }); },
      // a short answer in the Live answer's own shape: a thought you can open, cited words, and the sources under it
      async answer(tx, src, steps, go){
        const box = add(html('<div class="lva-turn"></div>'));
        const th = html(`<div class="lva-th"><span class="think on" style="color:var(--fg2)"><i></i><i></i><i></i><i></i></span><span class="shim">Thinking</span></div>`);
        box.appendChild(th); status(cv, 'think', 'Thinking'); await k.wait(1100);
        const tb = html(`<button class="lva-th lva-tb" aria-expanded="false"><span>${steps.length} steps · 1s</span>${I('chev-d','xs')}</button>`);
        const tl = html(`<div class="fold shut lva-tl"><div><ul class="lva-tlist">${steps.map(x => `<li>${x}</li>`).join('')}</ul></div></div>`);
        th.replaceWith(tb); tb.after(tl);
        tb.onclick = () => { const s = tl.classList.toggle('shut'); tb.setAttribute('aria-expanded', !s); };
        status(cv, 'run', 'Answering');
        const p = html('<p class="lva-p"></p>'); box.appendChild(p);
        for (const tok of tx.split(' ')){
          const m = tok.match(/^\[(\d)\](.*)$/), prev = p.lastElementChild;
          if (m && prev){ prev.textContent = prev.textContent.replace(/ $/, ''); prev.style.whiteSpace = 'nowrap'; prev.insertAdjacentHTML('beforeend', `<span class="cite" data-tip="${esc(src[m[1] - 1][2])}">${m[1]}</span>${esc(m[2])} `); }
          else p.insertAdjacentHTML('beforeend', `<span class="w">${esc(tok)} </span>`);
          await k.wait(40 + Math.random() * 40);
        }
        const sr = html(`<div class="lva-src"><span class="lva-acts"><button class="ib" aria-label="Copy" data-tip="Copy">${I('copy')}</button><button class="ib" aria-label="Good answer" data-tip="Good answer">${I('up-thumb')}</button><button class="ib" aria-label="Bad answer" data-tip="Bad answer">${I('down-thumb')}</button></span><button class="lva-sb" aria-expanded="false"><span class="lva-fav">${src.map(x => `<span style="background-color:${x[1]}">${esc(x[0][0])}</span>`).join('')}</span>${src.length} sources${I('chev-d','xs')}</button></div>`);
        const ls = html(`<div class="fold shut lva-ls"><div><div class="lva-ll">${src.map((x, i) => `<button class="lva-s" data-n="${i + 1}"><span class="n">${i + 1}</span><span class="t">${esc(x[2])}</span><span class="d">${esc(x[3])}</span>${I(go ? 'right' : 'ext','xs')}</button>`).join('')}</div></div></div>`);
        box.append(sr, ls); if (!ff) enter(sr);
        const sb = $('.lva-sb', sr), show = o => { ls.classList.toggle('shut', !o); sb.setAttribute('aria-expanded', o); };
        sb.onclick = () => show(ls.classList.contains('shut'));
        /* hover previews a source, a click pins it; in the honest answer a source is an example chat, and a click opens it */
        let pinned = '';
        const hl = nn => { $$('.cite', p).forEach(x => x.classList.toggle('on', x.textContent === nn)); $$('.lva-s', ls).forEach(x => x.classList.toggle('on', x.dataset.n === nn)); };
        const pick = nn => { pinned = pinned === nn ? '' : nn; if (pinned) show(true); hl(pinned); };
        $$('.lva-s', ls).forEach(x => { x.onmouseenter = () => hl(x.dataset.n); x.onmouseleave = () => hl(pinned); x.onclick = () => go ? go(x.dataset.n - 1) : pick(x.dataset.n); });
        $$('.cite', p).forEach(x => { x.style.cursor = 'pointer'; x.onmouseenter = () => hl(x.textContent); x.onmouseleave = () => hl(pinned); x.onclick = () => pick(x.textContent); });
        const acts = $$('.lva-acts .ib', sr);
        acts[0].onclick = () => { const cl = p.cloneNode(true); $$('.cite', cl).forEach(x => x.remove()); copied(acts[0], cl.textContent.replace(/\s+/g, ' ').trim()); };
        [1, 2].forEach(i => acts[i].onclick = () => { const on = !acts[i].classList.contains('on'); acts[1].classList.remove('on'); acts[2].classList.remove('on'); acts[i].classList.toggle('on', on); });
      },
      end(tx, m, fu){
        status(cv, 'ok', tx, m);
        if (fu){ const el = html(`<div class="lva-fu">${fu.map(x => `<button>${I('chev-r','xs')}${esc(x)}</button>`).join('')}</div>`); cv.col.appendChild(el); cv.fu = el;
          if (!ff) stagger($$('button', el), 90); $$('button', el).forEach(b => b.onclick = () => { if (cv.state !== 'run') converse(cv, b.textContent); }); }
        if (!ff && cv !== vis){ cv.unread = true; mark(cv); }
      }
    };
    return t;
  }
  function play(cv, fn, text, files, ff){
    column(cv); const k = paced(c, ff ? .02 : 1); k.ff = !!ff; cv.k = k;
    if (ff){ cv.ready = false; cv.col.classList.add('ff'); } else status(cv, 'think', 'Thinking');
    k.run(async () => {
      await fn(turn(cv, k, text, files));
      if (!ff) return;
      // the real-time parts (counters, crossfades) settle before the replay is shown
      await new Promise(res => c.later(1300, res));
      cv.ready = true; cv.col.classList.remove('ff'); if (cv.fst){ cv.st = cv.fst; cv.state = stateOf(cv.st.g); } mark(cv);
      if (cv === vis){ showStatus(cv.st); ring(cv.ctx); toEnd(); busy(); }
    });
  }
  // a past chat replays out of sight the first time it could be wanted
  const warm = cv => { if (cv.past && !cv.k) play(cv, S[cv.s].run, S[cv.s].ask, null, true); };
  async function generic(t){
    await t.ask();
    const past = CV.filter(x => x.past);
    await t.answer(GEN, past.map((x, i) => [S[x.s].title[0], HUE[i], x.title, 'Example chat']), ['Read your message', 'Looked through the five example chats', 'None of them covers this yet'], i => open(past[i]));
    t.end('Answered', '5 examples', KEYS.slice().sort(() => Math.random() - .5).slice(0, 2).map(k => S[k].ask));
  }
  // what the person sends in a chat: a follow-up, one of the stories, or anything else
  function converse(cv, text, files){
    if (cv.fu){ cv.fu.remove(); cv.fu = null; }
    // while the agent waits on an answer above, a message gets a short note back and the story keeps waiting
    if (cv.state === 'wait'){ const k = paced(c, 1), t = turn(cv, k, text, files);
      k.run(async () => { await t.ask(true); await k.wait(600); await t.say(cv.note || "I'll pick that up once you've answered above."); }); return; }
    const f = FU[text], s = !f && route(text);
    play(cv, f ? async t => { await t.ask(); await t.answer(f[0], f[1], ['Read the chat so far', 'Checked the sources']); t.end('Answered', f[1].length + ' sources'); }
      : s ? S[s].run : generic, text, files);
  }

  /* ---- the side: chats, search, the workspace ---- */
  function row(cv){
    cv.row = html(`<button class="ahx-cv" aria-current="false"><span class="t">${esc(cv.title)}</span><span class="ahx-mk"></span></button>`);
    cv.row.onclick = () => { open(cv); drawer(false); };
    cv.row.onpointerenter = () => warm(cv);
    mark(cv); return cv.row;
  }
  const sf = $('.ahx-sf', r), si = $('.ahx-si', r), none = $('.ahx-none', r);
  const filter = () => { const v = si.value.trim().toLowerCase(); let k = 0; CV.forEach(cv => { const on = !v || cv.title.toLowerCase().includes(v); cv.row.hidden = !on; k += on; }); none.hidden = k > 0; };
  const search = o => { sf.classList.toggle('shut', !o); if (o) si.focus({ preventScroll:true }); else { si.value = ''; filter(); } };
  $('.ahx-sb', r).onclick = () => search(sf.classList.contains('shut'));
  si.oninput = filter;
  si.onkeydown = e => { if (e.key === 'Escape'){ e.stopPropagation(); search(false); } };
  const WS = [['D', 'DesignMe Studio', 'var(--ink)', 'var(--on-ink)'], ['P', 'Personal', 'var(--pl)', '#fff']];
  wsp.innerHTML = WS.map((w, i) => `<button class="mi" role="menuitemradio" aria-checked="${i === 0}" data-close data-i="${i}"><span class="ahx-lg" style="background:${w[2]};color:${w[3]}">${w[0]}</span><span>${w[1]}</span><span class="ck">${I('check','xs')}</span></button>`).join('');
  $$('.mi', wsp).forEach(b => b.onclick = () => { const w = WS[b.dataset.i], lg = $('.ahx-wsb .ahx-lg', r);
    $$('.mi', wsp).forEach(x => x.setAttribute('aria-checked', x === b)); swap($('.ahx-wsb .t', r), w[1]); lg.textContent = w[0]; lg.style.background = w[2]; lg.style.color = w[3]; });
  // the side folds away on a wide card and slides in over the chat on a narrow one
  const narrow = () => root.clientWidth <= 620;
  const drawer = o => root.classList.toggle('dr', o);
  $('.ahx-menu', r).onclick = () => narrow() ? drawer(true) : root.classList.remove('ns');
  $('.ahx-hide', r).onclick = () => narrow() ? drawer(false) : root.classList.add('ns');
  $('.ahx-scrim', r).onclick = () => drawer(false);

  /* ---- tabs ---- */
  /* on a phone the tabs fold into one: the count beside it lists every open chat, and picking one brings it to the front */
  const tn = $('.ahx-tn', r), tp = $('.ahx-tp', r);
  const count = () => { tn.hidden = TABS.length < 2; $('.num', tn).textContent = TABS.length; };
  tn.onclick = () => {
    tp.innerHTML = TABS.map((x, i) => `<button class="mi" role="menuitemradio" aria-checked="${x === at}" data-close data-i="${i}"><span class="ahx-mk">${x.cv ? markOf(x.cv) : ''}</span><span class="t">${esc(x.cv ? x.cv.title : 'New chat')}</span><span class="ck">${I('check','xs')}</span></button>`).join('');
    $$('.mi', tp).forEach(b => b.onclick = () => { const x = TABS[+b.dataset.i]; if (x && x !== at) activate(x); });
  };
  function tab(cv, after){
    const tb = { cv, draft:'' };
    tb.el = html(`<div class="ahx-tab"><button class="ahx-tb" role="tab" aria-selected="false"><span class="ahx-mk"></span><span class="t"></span></button><button class="ahx-tx" aria-label="Close tab" data-tip="Close tab">${I('x')}</button></div>`);
    $('.t', tb.el).textContent = cv ? cv.title : 'New chat';
    $('.ahx-tb', tb.el).onclick = () => activate(tb);
    $('.ahx-tx', tb.el).onclick = () => close(tb);
    const i = after ? TABS.indexOf(after) + 1 : TABS.length; TABS.splice(i, 0, tb);
    tabsEl.insertBefore(tb.el, TABS[i + 1] ? TABS[i + 1].el : null);
    enter(tb.el); if (cv) mark(cv); count(); return tb;
  }
  function activate(tb, first){
    if (at && at !== tb) at.draft = ta.value;
    // on a phone only the tab on screen shows, so the one coming to the front comes in
    if (at && at !== tb && !first && narrow()) enter(tb.el);
    at = tb;
    TABS.forEach(x => { x.el.classList.toggle('on', x === tb); $('.ahx-tb', x.el).setAttribute('aria-selected', x === tb); });
    view(tb.cv, first);
    if (ta){ ta.value = tb.draft || ''; input(); }
    inView(first);
  }
  // the tab on screen is always in view, also when the status pill beside the tabs grows
  function inView(now){
    if (!at) return; const L = at.el.offsetLeft, R = L + at.el.offsetWidth, sl = tabsEl.scrollLeft, w = tabsEl.clientWidth;
    if (L < sl || R > sl + w) tabsEl.scrollTo({ left:L < sl ? L - 4 : R - w + 4, behavior:REDUCE || now ? 'auto' : 'smooth' });
  }
  const tro = new ResizeObserver(() => inView(true)); tro.observe(tabsEl); c.offs.push(() => tro.disconnect());
  function close(tb){
    const i = TABS.indexOf(tb), el = tb.el; TABS.splice(i, 1); hideTip(); count();
    // the tab folds shut instead of vanishing
    el.style.pointerEvents = 'none';
    if (REDUCE) el.remove(); else el.animate([{ minWidth:el.offsetWidth + 'px', flexBasis:el.offsetWidth + 'px', opacity:1 }, { minWidth:'0px', flexBasis:'0px', opacity:0 }], { duration:220, easing:'cubic-bezier(.22,1,.36,1)', fill:'forwards' }).onfinish = () => el.remove();
    if (!TABS.length) return activate(tab(null));
    if (at === tb){ at = null; activate(TABS[Math.min(i, TABS.length - 1)]); }
  }
  // a chat comes to the front if it is open, takes over an untouched New chat tab, or opens a tab beside the one on screen
  function open(cv){
    const has = TABS.find(x => x.cv === cv); if (has) return activate(has);
    if (at && !at.cv && !(ta && ta.value.trim())){ at.cv = cv; swap($('.t', at.el), cv.title); mark(cv); return view(cv); }
    activate(tab(cv, at));
  }
  const fresh = () => { drawer(false); const h = TABS.find(x => !x.cv); activate(h || tab(null, at)); };
  $('.ahx-new', r).onclick = fresh; $('.ahx-plus', r).onclick = fresh;

  /* ---- what is on screen: New chat, or one chat's column ---- */
  function view(cv, first){
    if (vis && vis !== cv && vis.col){ vis.col.classList.add('off'); vis.col.setAttribute('aria-hidden', 'true'); }
    if (paneFor && paneFor !== cv) shutPane();
    vis = cv; main.classList.toggle('home', !cv);
    if (!cv){
      ro.disconnect(); if (cpx && cpx.parentNode !== slot) slot.appendChild(cpx);
      if (!first) stagger([$('.ahx-hi', r), cpx, ...$$('.ahx-sr', sg), $('.ahx-shf', r)].filter(Boolean), 45);
    } else {
      if (cpx && cpx.parentNode !== bot) bot.appendChild(cpx);
      column(cv); warm(cv);
      const was = cv.col.classList.contains('off');
      cv.col.classList.remove('off'); cv.col.removeAttribute('aria-hidden');
      cv.unread = false; mark(cv);
      ro.disconnect(); ro.observe(cv.col); toEnd();
      if (was && !first) enter(cv.col);
    }
    CV.forEach(x => x.row && x.row.setAttribute('aria-current', x === cv));
    showStatus(cv ? cv.st : IDLE, first); ring(cv ? cv.ctx : 0); busy();
  }

  /* ---- New chat: a greeting, the composer and three suggestions; picking one, or sending, turns the tab into that chat ---- */
  const hr = new Date().getHours();
  $('.ahx-hi span', r).textContent = hr < 5 || hr >= 18 ? 'Good evening' : hr < 12 ? 'Good morning' : 'Good afternoon';
  let off = 0;
  function suggest(anim){
    sg.innerHTML = [0, 1, 2].map(i => KEYS[(off + i) % KEYS.length]).map(k => `<button class="ahx-sr" data-s="${k}">${I(S[k].ic)}<span>${esc(S[k].ask)}</span></button>`).join('');
    $$('.ahx-sr', sg).forEach(b => b.onclick = () => start(S[b.dataset.s].ask, [], b.dataset.s));
    if (anim) stagger($$('.ahx-sr', sg), 50);
  }
  $('.ahx-shf', r).onclick = () => { off = (off + 3) % KEYS.length; suggest(true); };
  function start(text, files, s){
    if (!at || at.cv) return;
    // a chat started now gets a title of its own, beside the past chat of the same story
    const title = s ? S[s].nt : (w => w ? w[0].toUpperCase() + w.slice(1) : 'New chat')(text.replace(/[.?!][\s\S]*$/, '').split(/\s+/).slice(0, 5).join(' '));
    const cv = conv(title, { state:'run' });
    CV.unshift(cv); list.prepend(row(cv)); enter(cv.row); filter();
    // the composer glides from the middle of New chat down to the foot of the new chat
    const from = cpx.getBoundingClientRect();
    at.cv = cv; swap($('.t', at.el), title); view(cv);
    const to = cpx.getBoundingClientRect(), bp = getComputedStyle(root).getPropertyValue('--motion').trim() === 'bp';
    if (!REDUCE && Math.abs(from.top - to.top) > 2) cpx.animate([{ transform:`translate(${from.left - to.left}px,${from.top - to.top}px)` }, { transform:'none' }],
      { duration:bp ? 360 : 640, easing:bp ? 'cubic-bezier(.65,0,.25,1)' : 'cubic-bezier(.22,1,.36,1)' });
    converse(cv, text, files);
  }
  // a message goes to the chat on screen, or starts one from New chat, instead of the composer's own little thread
  function sendNow(){
    const v = ta.value.trim(), files = $$('.fchip', att).map(f => f.textContent.trim());
    if (!v && !files.length) return;
    if (vis && vis.state === 'run') return;
    att.innerHTML = ''; ta.value = ''; input(); if (at) at.draft = '';
    if (!vis) start(v || 'Have a look at these files.', files);
    else converse(vis, v || 'Have a look at these files.', files);
  }
  if (ta){
    c.on(root, 'keydown', e => { if (e.target === ta && e.key === 'Enter' && !e.shiftKey && $('.cpx-box', root).dataset.mode === 'idle'){ e.preventDefault(); e.stopPropagation(); sendNow(); } }, true);
    c.on(root, 'click', e => { if (e.target.closest('.cpx-bar .cpx-send')){ e.stopPropagation(); sendNow(); } }, true);
  }
  c.on(root, 'keydown', e => { if (e.key !== 'Escape') return; if (root.classList.contains('dr')) drawer(false); else if (root.classList.contains('pn')) shutPane(); });

  /* ---- the panel beside the chat: an artifact opened from its card. On a wide card the chats fold away to make room ---- */
  let folded = false;
  // the report the dropoff chat writes, in three versions, and the monthly churn each one charts
  const CHURN = { title:'Churn analysis, Q3', kind:'Report', icon:'file-text', file:'churn-analysis-q3', ext:'md', mime:'text/markdown',
    steps:['Reading the billing export…', 'Charting churn by month…', 'Checking the July spike…'], versions:[
    { ago:'yesterday', when:'edited yesterday', note:'First draft', summary:'First pass at churn by month, sources still to check.',
      findings:['Churn peaked at 4.3% in June and eased to 3.6% by September.'], changes:['Charted churn by month, April to September'], b:[3.4,3.9,4.3,4.1,3.8,3.6] },
    { ago:'1 hour ago', when:'edited 1 hour ago', note:'Added the July spike', summary:'Churn rose in July, the spike lines up with the pricing change.',
      findings:['Churn jumped to 5.8% in July, the month the new prices went live.', 'It eased to 3.9% by September.'], changes:['Checked the billing export against Amplitude', 'Added the July spike'], b:[3.4,3.9,4.1,5.8,4.7,3.9] },
    { ago:'2 min ago', when:'edited 2 min ago', note:'Final, with your fixes', summary:'Churn rose in July, then settled once onboarding emails went out.',
      findings:['Churn jumped to 5.8% in July, the month the new prices went live.', 'It fell to 3.1% in September, after the onboarding emails went out in August.'], changes:['Added the onboarding emails', 'Applied your fixes'], b:[3.4,3.9,4.1,5.8,4.5,3.1] }
  ] };
  // the report drawn flat: its title, the version's line, the latest month against the peak, and a smooth line through the months
  function churnDoc(i){
    const v = CHURN.versions[i], M = ['April','May','June','July','August','September'], last = v.b[v.b.length - 1], top = Math.max(...v.b), id = 'ahx-g' + Math.random().toString(36).slice(2, 8);
    const p = v.b.map((x, k) => [k / (v.b.length - 1) * 300, 52 - (x - 2.6) / 3.6 * 46]);
    const d = p.reduce((s, q, k, a) => { if (!k) return `M${q[0]} ${q[1]}`; const p0 = a[k - 2] || a[k - 1], p1 = a[k - 1], p3 = a[k + 1] || q, t = .18; return s + ` C${p1[0] + (q[0] - p0[0]) * t} ${p1[1] + (q[1] - p0[1]) * t} ${q[0] - (p3[0] - p1[0]) * t} ${q[1] - (p3[1] - p1[1]) * t} ${q[0]} ${q[1]}`; }, '');
    return html(`<div class="ahx-doc"><div class="ahx-dh">${CHURN.title}</div><div class="ahx-dp">${v.summary}</div><div class="ahx-kp"><b class="num">${last.toFixed(1)}%</b><span class="ahx-dd">−${(top - last).toFixed(1)} pts since ${M[v.b.indexOf(top)]}</span></div>`
      + `<svg class="ahx-ch" viewBox="0 0 300 56" preserveAspectRatio="none" aria-hidden="true"><defs><linearGradient id="${id}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" style="stop-color:var(--accent-mark,var(--accent));stop-opacity:.16"/><stop offset="1" style="stop-color:var(--accent-mark,var(--accent));stop-opacity:0"/></linearGradient></defs><path fill="url(#${id})" d="${d} L300 56 L0 56 Z"/><path class="ln" d="${d}"/></svg>`
      + `<div class="ahx-ax"><span>Apr</span><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span></div></div>`);
  }
  let paneFrom = null;
  function openPane(cv, i){
    if (root.contains(document.activeElement) && !pane.contains(document.activeElement)) paneFrom = document.activeElement;
    paneFor = cv;
    if (!narrow() && !root.classList.contains('ns')){ root.classList.add('ns'); folded = true; }
    const pb = $('.ahx-pb', pane), doc = churnDoc(i);
    $('.ahx-ph .t', pane).textContent = CHURN.title;
    pb.innerHTML = ''; pb.append(doc, html(`<div class="ahx-pn"><b>What moved it</b><p>The July spike lines up with the pricing change on July 3. Churn settled once the onboarding emails went out in August.</p><b>Sources</b><p>Billing export for Q3, retention in Amplitude, and the onboarding email stats.</p></div>`));
    root.classList.add('pn'); pane.removeAttribute('aria-hidden');
    if (!REDUCE) stagger([...pb.children], 70, 140);
  }
  // closing it with the focus inside gives the focus back to what opened it, or to the message box
  function shutPane(){ const back = pane.contains(document.activeElement); paneFor = null; root.classList.remove('pn'); pane.setAttribute('aria-hidden', 'true'); if (folded){ root.classList.remove('ns'); folded = false; }
    if (back){ const to = paneFrom && paneFrom.isConnected && paneFrom.getClientRects().length ? paneFrom : ta; if (to) to.focus({ preventScroll:true }); } }
  $('.ahx-px', r).onclick = shutPane;
  $('.ahx-pl', r).onclick = e => copied(e.currentTarget, 'https://designme.dev/a/churn-q3');

  /* ---- the five example chats, finished; New chat on screen, and nothing plays until someone starts it ---- */
  KEYS.forEach(s => { const cv = conv(S[s].title, { s, past:true, st:S[s].end, ctx:S[s].ctx, state:'done', unread:s === 'sync' }); CV.push(cv); list.appendChild(row(cv)); });
  suggest(false);
  activate(tab(null), true);
  CV.forEach((cv, i) => c.later(400 + i * 140, () => warm(cv)));
});