The tmux-ide dashboard uses a hybrid architecture to manage different UI frameworks (React, Solid, xterm.js, etc.) without performance degradation or state loss.
Core Abstractions
- RSC (React Server Components): Used for the dashboard shell, static pages, and navigation. These render on the server to avoid hydration overhead.
- React Client Components: Used for interactive elements requiring
useState, useEffect, or browser APIs (e.g., form widgets, command palettes). - Silos: Independent UI packages (e.g.,
@tmux-ide/chat-solid) built in foreign frameworks. They own their own DOM subtree. - Bridge Components: The only authorized way to mount a Silo into the React dashboard. Bridges translate React props into imperative calls on the Silo's mounting handle.
The Data Contract
Silos do not receive live React state. Instead, they implement a mount function that returns a MountHandle. Communication happens via imperative setter methods on this handle, ensuring the Silo is not re-mounted (and thus its internal state is preserved) when props change.
// The Silo public API contract
export interface SiloMountHandle {
/** Tear down the silo and release every DOM/event/network resource it owns. */
unmount(): void;
/** One typed setter per prop the bridge needs to update.
* Setters MUST be idempotent. */
// setX(value: T): void;
}
export function mount(el: HTMLElement, initial: InitialProps): SiloMountHandle;
