();
+ private readonly hidden: HTMLElement;
+ private activeId: Uuid | null = null;
+ private onActiveChange?: (id: Uuid | null) => void;
+
+ constructor(opts: { onActiveChange?: (id: Uuid | null) => void } = {}) {
+ this.onActiveChange = opts.onActiveChange;
+ // Off-screen home for parked, still-connected terminals.
+ this.hidden = document.createElement("div");
+ this.hidden.className = "conn-cache";
+ this.hidden.setAttribute("aria-hidden", "true");
+ document.body.appendChild(this.hidden);
+ }
+
+ /** Currently-mounted session, or null when showing the welcome pane. */
+ active(): Uuid | null {
+ return this.activeId;
+ }
+
+ /**
+ * Show `id` in `pane`, reusing its live connection if one exists. The
+ * previously-active view is parked (kept connected) in the hidden cache.
+ */
+ activate(id: Uuid, pane: HTMLElement): void {
+ if (this.activeId && this.activeId !== id) this.park(this.activeId);
+
+ let conn = this.cache.get(id);
+ if (conn) {
+ // Refresh LRU recency.
+ this.cache.delete(id);
+ this.cache.set(id, conn);
+ } else {
+ conn = createAttachConnection(id, {
+ onRequestClose: (sid) => this.requestClose(sid),
+ });
+ this.cache.set(id, conn);
+ this.evict(id);
+ }
+
+ pane.replaceChildren(conn.el);
+ conn.onMount();
+ this.activeId = id;
+ this.onActiveChange?.(id);
+ }
+
+ /** Detach the active view back to the cache (still connected) — e.g. when
+ * navigating to the welcome pane. */
+ parkActive(): void {
+ if (this.activeId) {
+ this.park(this.activeId);
+ this.activeId = null;
+ this.onActiveChange?.(null);
+ }
+ }
+
+ /** Fully disconnect + forget a session. */
+ close(id: Uuid): void {
+ const conn = this.cache.get(id);
+ if (!conn) return;
+ conn.dispose();
+ this.cache.delete(id);
+ if (this.activeId === id) {
+ this.activeId = null;
+ this.onActiveChange?.(null);
+ }
+ }
+
+ dispose(): void {
+ for (const conn of this.cache.values()) conn.dispose();
+ this.cache.clear();
+ this.hidden.remove();
+ }
+
+ private park(id: Uuid): void {
+ const conn = this.cache.get(id);
+ if (!conn) return;
+ this.hidden.appendChild(conn.el); // stays alive, just off-screen
+ conn.onUnmount();
+ }
+
+ /** Drop least-recently-viewed connections beyond the cap (never `keep`). */
+ private evict(keep: Uuid): void {
+ while (this.cache.size > MAX_LIVE) {
+ let victim: Uuid | null = null;
+ for (const id of this.cache.keys()) {
+ if (id !== keep && id !== this.activeId) {
+ victim = id;
+ break;
+ }
+ }
+ if (!victim) break;
+ this.close(victim);
+ }
+ }
+
+ private requestClose(id: Uuid): void {
+ this.close(id);
+ // Drop back to the welcome pane via the router.
+ if (location.hash !== "#/" && location.hash !== "") location.hash = "#/";
+ }
+}
diff --git a/web/src/main.ts b/web/src/main.ts
index 886f67a..97caa3e 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -1,5 +1,5 @@
-import { renderAttach } from "./attach.js";
-import { renderCatalog } from "./catalog.js";
+import { renderSidebar, renderTopbar } from "./catalog.js";
+import { ConnectionPool } from "./connections.js";
import { CatalogStore } from "./events.js";
import { initTheme } from "./theme.js";
import "./styles.css";
@@ -20,6 +20,48 @@ if (import.meta.env.DEV && location.search.includes("mock")) {
void import("./mock.js").then((m) => m.seedMock(store));
}
+// ---- persistent shell: sidebar (list) + content (welcome | attach) ----
+
+const shellEl = document.createElement("div");
+shellEl.className = "app-shell";
+shellEl.dataset.route = "catalog";
+
+const sidebar = renderSidebar(store);
+const content = document.createElement("section");
+content.className = "content";
+
+shellEl.append(sidebar.el, content);
+root.replaceChildren(renderTopbar(store), shellEl);
+
+// The pool owns attach connections independently of the route: navigating away
+// parks a session (keeps it streaming); navigating back re-mounts it instantly.
+const pool = new ConnectionPool({
+ onActiveChange: (id) => sidebar.setActive(id),
+});
+
+function renderWelcome(): HTMLElement {
+ const el = document.createElement("div");
+ el.className = "empty content-welcome";
+ el.innerHTML = `
+ ⌘
+ No session open
+
+ Pick a session from the list, or press + Spawn to start one.
+ Open sessions keep streaming in the background — switching back is instant.
+
`;
+ return el;
+}
+
+function renderNotFound(raw: string): HTMLElement {
+ const el = document.createElement("div");
+ el.className = "not-found";
+ el.innerHTML = `
+ Unknown route
+ #${raw.replace(/[<&]/g, "")} doesn't match anything.
+ Back to catalog`;
+ return el;
+}
+
type Route =
| { kind: "catalog" }
| { kind: "attach"; sessionId: string }
@@ -33,44 +75,25 @@ function parseRoute(): Route {
return { kind: "not-found", raw: hash };
}
-let currentTeardown: (() => void) | (() => Promise) | null = null;
-
-async function dispatch() {
- if (currentTeardown) {
- try {
- await Promise.resolve(currentTeardown());
- } catch {
- // ignore
- }
- currentTeardown = null;
- }
+function dispatch(): void {
const route = parseRoute();
switch (route.kind) {
- case "catalog": {
- const teardown = renderCatalog(root!, store);
- currentTeardown = teardown;
+ case "attach":
+ shellEl.dataset.route = "attach";
+ pool.activate(route.sessionId, content);
return;
- }
- case "attach": {
- const handle = await renderAttach(root!, route.sessionId);
- currentTeardown = () => handle.dispose();
+ case "not-found":
+ shellEl.dataset.route = "notfound";
+ pool.parkActive();
+ content.replaceChildren(renderNotFound(route.raw));
return;
- }
- case "not-found": {
- root!.innerHTML = `
-
-
Unknown route
-
#${route.raw} doesn't match anything.
-
Back to catalog
-