A terminal is where humans and agents do real work — run a command, watch the output, decide what's next. Most apps embed xterm.js raw: an uncontrolled DOM widget an embedded agent can only read by scraping pixels and only drive by faking keystrokes. Terminal makes it a proper Human+ surface — controlled, themeable, and bridgeable — with the trust-but-verify loop a terminal demands (an agent proposes a command, a human confirms before it runs).

A React <Terminal> wrapping xterm.js. Controlled output — output delta-appends as it grows (stream from React state, e.g. fancy-query's useFancyStream); onData forwards keystrokes. A stable data-fancy-terminal handle + a ref exposing TerminalHandle (write / clear / reset / fit / focus / getBuffer() / getSelection() / .xterm). Hooks: useTerminal, useTerminalFit (0×0-guarded), useTerminalSession (streamed PTY backend). xterm + @xterm/addon-fit are peers; a Fancy dark theme is the default.

Install @particle-academy/fancy-term @xterm/xterm @xterm/addon-fit + import @xterm/xterm/css/xterm.css. Give the parent a height: <div style={{height:360}}><Terminal output={out} onData={send} /></div>. Make it inhabitable with registerTerminalBridge(server, { adapter }) (agent-integrations) — terminal_read / terminal_write / terminal_run, with pendingMode staging destructive commands for human confirmation.