<Terminal> & provider

TermkitProvider

Mount once near your app root. It creates the session registry, starts the poller, and provides config to everything below.

<TermkitProvider config={config}>{children}</TermkitProvider>

TermkitConfig

Field	Type	Notes
`connectionUrl`	`({ sessionId, params }) => string`	Builds the WebSocket URL for a session. `params` is the opaque metadata bag forwarded to the daemon.
`transport`	`{ list, kill, seen }`	Control plane. `list(): Promise<LiveSession[]>`, `kill(id)`, `seen(id)`.
`pollIntervalMs?`	`number`	How often to poll the live list. Default `2000`.
`terminalOptions?`	`TermkitTerminalOptions`	Visual defaults (see below).

Treat config as stable — define it outside render or memoise it. The store and poller are created from the config captured on first render.

TermkitTerminalOptions

Field	Type	Default
`fontFamily`	`string`	`"IBM Plex Mono", monospace`
`fontSize`	`number`	`13`
`cursorBlink`	`boolean`	`true`
`background`	`string`	Default wrapper background. The xterm surface is transparent, so this fills both terminal cells and leftover space.

Terminal

<Terminal session="global" autoFocus />
<Terminal session={tab.id} params={{ slug: 'myproject' }} />

Prop	Type	Default	Notes
`session`	`string`	—	Required. Stable session id; doubles as the daemon session id, so re-rendering it reattaches.
`params`	`Record<string, string>`	`{}`	Opaque metadata forwarded to the daemon on connect. Read only on first attach.
`autoFocus`	`boolean`	`false`	Take keyboard focus on mount.
`dismissOnView`	`boolean`	`true`	Clear this session's bell when viewed (attach / focus / bell-while-focused).
`pendingCommand`	`string`	—	A command auto-typed once, after the prompt settles on first attach.
`onExitFocus`	`() => void`	—	Called on the Ctrl+Shift+Enter exit chord, after termkit blurs the terminal. Use it to move DOM focus in your UI.
`background`	`string`	`terminalOptions.background`	CSS colour applied to the wrapper. Accepts CSS variables.
`className`	`string`	—	Applied to the full-size wrapper, so Tailwind/background classes theme the terminal surface.
`style`	`CSSProperties`	—	Merged over `{ width: '100%', height: '100%', backgroundColor }`.

Theming

<Terminal> renders xterm transparently inside its wrapper. Theme the wrapper with your host design system:

<Terminal session="global" className="bg-zinc-950" />
<Terminal session="global" background="var(--background)" />
<Terminal session="global" style={{ backgroundColor: "rgb(9 9 11)" }} />

Any leftover space that cannot fit a full row or column uses that same wrapper background.

Sizing

The terminal fills its container (100% width and height) and refits on resize via a ResizeObserver. Give it a sized parent.

autoFocus and the focus/blur actions drive xterm focus through the registry. Inside a focused terminal, Ctrl+Shift+Enter releases focus and calls onExitFocus — handle it to land DOM focus somewhere sensible (a tab, a sidebar item) so your keyboard shortcuts work again.

Auto-typing a command

pendingCommand (or setPendingCommand(id, cmd) before mount) queues a command that runs exactly once, on the session's first attach, after the shell's prompt has finished painting. It is not persisted, so a reload never re-runs it — the daemon already has the shell with whatever's running in it.