@hienlh/ppm 0.18.10 → 0.18.11

package/src/web/components/floating-window/pip/pip-host.ts

@@ -0,0 +1,156 @@
+/**
+ * Moves an existing DOM subtree (a TabPool panel slot) into a Document
+ * Picture-in-Picture window and puts it back.
+ *
+ * The slot is *moved*, never cloned or remounted: TabPool keeps moving its tab
+ * wrapper into whatever element is registered for that panel id, so moving the
+ * slot itself leaves that invariant intact and needs no store awareness here.
+ * This module imports no store.
+ */
+
+import { documentPipApi } from "./pip-support";
+import { clampPipSize } from "./pip-geometry";
+import { copyDocumentStyles, syncThemeToPip, watchStyleInjection } from "./pip-style-copy";
+import { forwardKeyEvents } from "./pip-key-forward";
+import { signalHostResize } from "./pip-resize-signal";
+
+export interface PipHostOptions {
+  /** Requested inner size in CSS px; clamped by clampPipSize(). */
+  width: number;
+  height: number;
+  /** Called after the slot has been restored, for any reason (user close, replacement, error). */
+  onDetach(): void;
+}
+
+export interface PipHandle {
+  detach(): void;
+  readonly pipWindow: Window;
+}
+
+/** One PiP window per page — the browser allows no more. */
+let activeHandle: PipHandle | null = null;
+
+/** The host currently holding a slot, or null. */
+export function activePipHost(): PipHandle | null {
+  return activeHandle;
+}
+
+function setUpHost(
+  slotEl: HTMLElement,
+  origin: HTMLElement,
+  pipWindow: Window,
+  opts: PipHostOptions,
+): PipHandle {
+  const disposers: Array<() => void> = [];
+  let detached = false;
+
+  const restore = () => {
+    if (detached) return;
+    detached = true;
+    if (activeHandle === handle) activeHandle = null;
+    for (const dispose of disposers) {
+      try {
+        dispose();
+      } catch {
+        // Keep tearing down — a failed disposer must not strand the slot.
+      }
+    }
+    // Synchronous on purpose: letting the PiP document close with the subtree
+    // still inside strips every DOM listener in it recursively, which kills a
+    // live terminal for good. No await, no rAF between here and the move.
+    if (origin.isConnected) {
+      origin.append(slotEl);
+      signalHostResize(slotEl);
+    }
+    try {
+      pipWindow.close();
+    } catch {
+      // Already closing.
+    }
+    opts.onDetach();
+  };
+
+  const handle: PipHandle = { detach: restore, pipWindow };
+
+  try {
+    const doc = pipWindow.document;
+    copyDocumentStyles(document, doc);
+    disposers.push(syncThemeToPip(document, doc));
+    disposers.push(watchStyleInjection(document, doc));
+
+    doc.body.append(slotEl);
+    signalHostResize(slotEl);
+
+    // The PiP window's own resize fires immediately, unlike the main window's
+    // ResizeObservers for a PiP-driven size.
+    const onPipResize = () => signalHostResize(slotEl);
+    pipWindow.addEventListener("resize", onPipResize);
+    disposers.push(() => pipWindow.removeEventListener("resize", onPipResize));
+
+    pipWindow.addEventListener("pagehide", restore);
+    disposers.push(() => pipWindow.removeEventListener("pagehide", restore));
+
+    disposers.push(forwardKeyEvents(pipWindow, window));
+
+    // The main window going away must not leave the slot in a dying document.
+    window.addEventListener("pagehide", restore);
+    window.addEventListener("beforeunload", restore);
+    disposers.push(() => {
+      window.removeEventListener("pagehide", restore);
+      window.removeEventListener("beforeunload", restore);
+    });
+  } catch (err) {
+    restore();
+    throw err;
+  }
+
+  return handle;
+}
+
+/**
+ * Open a PiP window and move `slotEl` into it.
+ *
+ * `requestWindow()` needs transient activation, and it is the first async call
+ * here — call this synchronously from a click handler, with nothing awaited
+ * before it.
+ *
+ * Resolves to `null` when the slot went away while the request was in flight;
+ * that is the user closing the window mid-request, not a failure.
+ */
+export async function attachPipHost(slotEl: HTMLElement, opts: PipHostOptions): Promise<PipHandle | null> {
+  const api = documentPipApi();
+  if (!api) throw new Error("Document Picture-in-Picture is not supported in this browser");
+  const origin = slotEl.parentElement;
+  if (!origin) throw new Error("attachPipHost: slot element must be in the document");
+
+  // One PiP at a time: the previous tab goes back to its floating window first.
+  activeHandle?.detach();
+
+  let pipWindow: Window;
+  try {
+    pipWindow = await api.requestWindow(clampPipSize({ width: opts.width, height: opts.height }));
+  } catch (err) {
+    // Rejected (usually: no transient activation left). Nothing moved, but the
+    // caller still has to drop the "in PiP" state it optimistically set.
+    opts.onDetach();
+    throw err;
+  }
+
+  // The window can close while the request is pending: its body unmounts, the tab is
+  // re-docked and the slot is dropped from the document. Moving it now would hand an
+  // orphaned subtree to a PiP window nobody owns, and register a handle under a dead
+  // window id. Proceed only if the slot is still exactly where it was.
+  if (!slotEl.isConnected || slotEl.parentElement !== origin) {
+    try {
+      pipWindow.close();
+    } catch {
+      // Already closing.
+    }
+    opts.onDetach();
+    return null;
+  }
+
+  const handle = setUpHost(slotEl, origin, pipWindow, opts);
+  activeHandle = handle;
+  return handle;
+}

package/src/web/components/floating-window/pip/pip-key-forward.ts

@@ -0,0 +1,59 @@
+/**
+ * Forward keyboard events from a PiP window to the main window.
+ *
+ * The app's global shortcuts are bound once on the main `window` and cannot be
+ * re-bound from outside, so events that originate in the PiP document are
+ * cloned and re-dispatched there.
+ *
+ * Two limits are deliberate:
+ * - `preventDefault()` on the clone does NOT suppress the original event's
+ *   browser default inside the PiP. Forwarding is one-way; never rely on the
+ *   clone to cancel anything.
+ * - Targets that own their keyboard handling are skipped, so a shortcut does
+ *   not fire while the user is typing. Monaco's EditContext host is a `div`
+ *   (`.native-edit-context`), not an input, and xterm listens on its helper
+ *   textarea — both must be in the skip list.
+ */
+
+export const SKIP_SELECTOR = [
+  "input",
+  "textarea",
+  "select",
+  "[contenteditable]",
+  ".native-edit-context",
+  ".monaco-editor",
+  ".xterm-helper-textarea",
+].join(", ");
+
+/**
+ * Whether the event's target owns its own keyboard input, in which case the event is
+ * the user typing and must not be forwarded as a shortcut.
+ *
+ * PiP-created nodes live in another realm, so `instanceof Element` is unsafe; the
+ * duck-typed `closest` is the check. A target that cannot answer is not editable —
+ * the PiP `window` itself is the common one.
+ */
+export function isEditableTarget(target: EventTarget | null): boolean {
+  const el = target as Element | null;
+  if (!el || typeof el.closest !== "function") return false;
+  return el.closest(SKIP_SELECTOR) !== null;
+}
+
+/**
+ * Clone `keydown`/`keyup` from `from` onto `to`. Returns an unsubscribe.
+ * Only events originating in `from` are forwarded, so the main window never
+ * sees its own events twice.
+ */
+export function forwardKeyEvents(from: Window, to: Window): () => void {
+  const handler = (event: Event) => {
+    const keyEvent = event as KeyboardEvent;
+    if (isEditableTarget(keyEvent.target)) return;
+    to.dispatchEvent(new KeyboardEvent(keyEvent.type, keyEvent));
+  };
+  from.addEventListener("keydown", handler);
+  from.addEventListener("keyup", handler);
+  return () => {
+    from.removeEventListener("keydown", handler);
+    from.removeEventListener("keyup", handler);
+  };
+}

package/src/web/components/floating-window/pip/pip-resize-signal.ts

@@ -0,0 +1,33 @@
+/**
+ * Resize signal for tabs whose host document changed size.
+ *
+ * Main-window `ResizeObserver`s are late (xterm: seconds) or silent (Monaco
+ * `automaticLayout`) for sizes driven by a PiP window, so the host tells the
+ * tabs directly instead of waiting for an observer.
+ *
+ * The event does NOT bubble: it is dispatched on every tab wrapper inside the
+ * slot, and the slot is an *ancestor* of those wrappers — an upward-bubbling
+ * event dispatched on the slot would never reach them.
+ */
+
+export const HOST_RESIZE_EVENT = "ppm:host-resize";
+
+/** Tell every tab inside `slotEl` that its host size changed. */
+export function signalHostResize(slotEl: Element | null | undefined): void {
+  if (!slotEl) return;
+  for (const wrapper of slotEl.querySelectorAll("[data-tab-pool-id]")) {
+    wrapper.dispatchEvent(new CustomEvent(HOST_RESIZE_EVENT, { bubbles: false }));
+  }
+}
+
+/**
+ * Subscribe a tab surface to the signal. `containerEl` is any node inside the
+ * tab; the listener lands on its `[data-tab-pool-id]` wrapper. Returns an
+ * unsubscribe (a no-op when the element is not inside a pooled tab).
+ */
+export function onHostResize(containerEl: Element | null | undefined, handler: () => void): () => void {
+  const wrapper = containerEl?.closest("[data-tab-pool-id]");
+  if (!wrapper) return () => {};
+  wrapper.addEventListener(HOST_RESIZE_EVENT, handler);
+  return () => wrapper.removeEventListener(HOST_RESIZE_EVENT, handler);
+}

package/src/web/components/floating-window/pip/pip-style-copy.ts

@@ -0,0 +1,108 @@
+/**
+ * Style/theme bootstrap for a PiP document.
+ *
+ * A PiP window is a separate document: it inherits no stylesheet and no theme.
+ * Copying `styleSheets` alone still yields an unthemed window, because the
+ * theme is written as inline CSS custom properties on `<html>` — the class and
+ * the inline `cssText` must both be mirrored, and re-mirrored on every theme
+ * change.
+ */
+
+import { THEME_CHANGE_EVENT } from "@/theme/apply-theme";
+
+const STYLE_NODE_SELECTOR = 'style, link[rel="stylesheet"]';
+
+/** Body/slot layout for the PiP document — the slot is the only child. */
+const PIP_BASE_CSS = `html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
+body>*{position:relative;width:100%;height:100%}`;
+
+/** Minimal document shape needed to enumerate style nodes (keeps this pure). */
+export interface StyleNodeSource {
+  querySelectorAll(selectors: string): ArrayLike<Element>;
+}
+
+/** Ordered list of the `<style>` / `<link rel=stylesheet>` nodes to mirror. */
+export function collectStyleNodes(doc: StyleNodeSource): Element[] {
+  return Array.from(doc.querySelectorAll(STYLE_NODE_SELECTOR));
+}
+
+/**
+ * Mirror one style node into `dst`. Same-origin sheets are inlined from their
+ * parsed rules (no refetch); a cross-origin sheet throws on `cssRules`, so the
+ * `<link>` is cloned and the PiP window fetches it itself.
+ */
+function mirrorStyleNode(node: Element, dst: Document): void {
+  const sheet = (node as HTMLStyleElement | HTMLLinkElement).sheet;
+  try {
+    const rules = sheet?.cssRules;
+    if (rules && rules.length > 0) {
+      const style = dst.createElement("style");
+      style.textContent = Array.from(rules, (rule) => rule.cssText).join("\n");
+      dst.head.append(style);
+      return;
+    }
+  } catch {
+    // Cross-origin sheet — fall through to cloning the element.
+  }
+  dst.head.append(node.cloneNode(true));
+}
+
+/** Copy every stylesheet of `src` into `dst`, plus the PiP base layout. */
+export function copyDocumentStyles(src: Document, dst: Document): void {
+  try {
+    // Constructed sheets are per-document; adopting a foreign one can throw.
+    dst.adoptedStyleSheets = [...src.adoptedStyleSheets];
+  } catch {
+    // Ignore — the cloned nodes below still carry the app's CSS.
+  }
+  for (const node of collectStyleNodes(src)) mirrorStyleNode(node, dst);
+  const base = dst.createElement("style");
+  base.textContent = PIP_BASE_CSS;
+  dst.head.append(base);
+}
+
+/**
+ * Copy `<html>` class + inline theme vars and `<body>` class + inline style, once.
+ * The page background is an inline `background: var(--bg)` on `<body>` (index.html),
+ * not a class — without it the PiP body stays browser-default white and every
+ * transparent region of the moved tab shows through as light.
+ */
+function copyThemeOnce(src: Document, dst: Document): void {
+  dst.documentElement.className = src.documentElement.className;
+  dst.documentElement.style.cssText = src.documentElement.style.cssText;
+  dst.body.className = src.body.className;
+  dst.body.style.cssText = src.body.style.cssText;
+}
+
+/**
+ * Mirror the theme now and on every theme change. Returns a disposer that
+ * unsubscribes.
+ */
+export function syncThemeToPip(src: Document, dst: Document): () => void {
+  copyThemeOnce(src, dst);
+  const view = src.defaultView;
+  if (!view) return () => {};
+  const onThemeChange = () => copyThemeOnce(src, dst);
+  view.addEventListener(THEME_CHANGE_EVENT, onThemeChange);
+  return () => view.removeEventListener(THEME_CHANGE_EVENT, onThemeChange);
+}
+
+/**
+ * Mirror stylesheets injected into `src.head` after the copy — Vite dev/HMR
+ * appends a new `<style>` on every edit, which the PiP copy would otherwise
+ * never see. Harmless in production. Returns a disposer.
+ */
+export function watchStyleInjection(src: Document, dst: Document): () => void {
+  if (typeof MutationObserver === "undefined") return () => {};
+  const observer = new MutationObserver((records) => {
+    for (const record of records) {
+      for (const added of record.addedNodes) {
+        if (added instanceof Element && added.matches(STYLE_NODE_SELECTOR)) {
+          dst.head.append(added.cloneNode(true));
+        }
+      }
+    }
+  });
+  observer.observe(src.head, { childList: true });
+  return () => observer.disconnect();
+}

package/src/web/components/floating-window/pip/pip-support.ts

@@ -0,0 +1,33 @@
+/**
+ * Feature probe for the Document Picture-in-Picture API.
+ *
+ * `lib.dom` does not type `documentPictureInPicture` yet, so the minimal shape
+ * the host actually uses is declared here and nowhere else.
+ */
+
+export interface DocumentPictureInPictureOptions {
+  width?: number;
+  height?: number;
+}
+
+export interface DocumentPictureInPictureApi {
+  requestWindow(options?: DocumentPictureInPictureOptions): Promise<Window>;
+  readonly window: Window | null;
+}
+
+declare global {
+  interface Window {
+    documentPictureInPicture?: DocumentPictureInPictureApi;
+  }
+}
+
+/** True when this browser can open a Document PiP window (Chromium >= 116). */
+export function isDocumentPipSupported(): boolean {
+  return typeof window !== "undefined" && "documentPictureInPicture" in window;
+}
+
+/** The API object, or null when unsupported — keeps the cast in one place. */
+export function documentPipApi(): DocumentPictureInPictureApi | null {
+  if (!isDocumentPipSupported()) return null;
+  return window.documentPictureInPicture ?? null;
+}

package/src/web/components/floating-window/tab-host-window-content.tsx

@@ -0,0 +1,80 @@
+/**
+ * Floating-window body that hosts a detached tab.
+ *
+ * It renders no tab of its own: it publishes a TabPool slot, and TabPool moves the tab's
+ * live DOM node into it. That is the whole point — the terminal keeps its PTY, the editor
+ * its undo stack, the chat its stream, because nothing remounts.
+ *
+ * Picture-in-picture is not handled here: the frame publishes its own body element as the
+ * PiP slot and owns the placeholder, so this file only has to hand the tab back when it
+ * goes away.
+ */
+import { useCallback, useLayoutEffect, useRef } from "react";
+import { usePanelStore } from "@/stores/panel-store";
+import { windowPanelId } from "@/stores/panel-utils";
+import { registerPanelSlot } from "@/components/layout/tab-pool";
+import type { WindowContentProps } from "./window-content-registry";
+
+export default function TabHostWindowContent({ id, payload }: WindowContentProps) {
+  // Derived, never passed in: the window id is minted by the store's open() call, so the
+  // panel id cannot exist before the window does.
+  const panelId = windowPanelId(id);
+  const panel = usePanelStore((s) => s.panels[panelId]);
+  const hasTabs = (panel?.tabs.length ?? 0) > 0;
+
+  // A window restored from a previous session exists before the project layout finishes
+  // loading. Remembering that a tab was once here keeps the placeholder from flashing
+  // back when the tab is legitimately on its way out.
+  const everHadTabs = useRef(false);
+  if (hasTabs) everHadTabs.current = true;
+
+  const originPanelId = typeof payload?.originPanelId === "string" ? payload.originPanelId : null;
+  const originRef = useRef(originPanelId);
+  originRef.current = originPanelId;
+
+  const slotRef = useCallback(
+    (el: HTMLDivElement | null) => registerPanelSlot(panelId, el),
+    [panelId],
+  );
+
+  // Re-dock when this body goes away. Every close path (titlebar ×, keyboard, a
+  // programmatic close, the window layer unmounting below the desktop breakpoint) unmounts
+  // this body, so they all route through here. The frame's own layout cleanup has already
+  // taken the body out of any PiP document by this point — React destroys a parent's layout
+  // effects before its children's — so the tab is back in the main document to be moved.
+  //
+  // The hand-back is deferred by one microtask on purpose: React StrictMode (and Offscreen /
+  // Activity subtrees) run a layout cleanup and then immediately re-run the setup on the
+  // SAME instance. Re-docking synchronously in that simulated cleanup pulled the tab back
+  // to the grid a moment after every pop-out and left the window empty. A re-run setup
+  // cancels the pending hand-back; a real unmount has no re-run, so the microtask fires.
+  // Deferring is safe for the DOM: React only detaches this body's root node, the slot and
+  // the tab inside it stay intact until the microtask runs.
+  const pendingRedock = useRef<object | null>(null);
+  useLayoutEffect(() => {
+    pendingRedock.current = null;
+    return () => {
+      const token = {};
+      pendingRedock.current = token;
+      queueMicrotask(() => {
+        if (pendingRedock.current !== token) return;
+        pendingRedock.current = null;
+        usePanelStore.getState().redockFromWindow(id, originRef.current);
+      });
+    };
+  }, [id]);
+
+  return (
+    <div className="relative h-full w-full">
+      {/* Always mounted, never swapped for a placeholder: the slot may currently hold a
+          reparented tab (or live in another document), and unmounting it would make React
+          remove a node whose parent is no longer this tree. */}
+      <div ref={slotRef} className="absolute inset-0" />
+      {!hasTabs && !everHadTabs.current && (
+        <div className="absolute inset-0 flex items-center justify-center text-xs text-text-2 pointer-events-none">
+          Loading…
+        </div>
+      )}
+    </div>
+  );
+}

package/src/web/components/floating-window/use-window-body-element.ts

@@ -0,0 +1,67 @@
+/**
+ * The body element every floating window renders its content into, and its picture-in-picture
+ * lifecycle. Owned by the frame, so PiP is a capability of the window rather than of any one
+ * kind.
+ *
+ * The element is created imperatively and never re-created, and the content reaches it
+ * through a portal. That is what makes it portable: React attaches its delegated listeners
+ * to a portal container, and they travel with the node into another document — a normally
+ * rendered subtree goes dead (no clicks, no menus) the moment it is moved into a PiP
+ * document.
+ */
+
+import { useLayoutEffect, useState, type RefObject } from "react";
+import { activePipHost, type PipHandle } from "./pip/pip-host";
+import { publishWindowSlot, useWindowPip, windowPip } from "./window-pip-registry";
+
+const BODY_CLASS = "relative flex-1 min-h-0 overflow-hidden rounded-b-[8px] bg-panel";
+
+export interface WindowBodyElement {
+  /** Portal target for the window's content. */
+  body: HTMLElement;
+  /** The PiP handle this window's body currently lives in, or null. */
+  pip: PipHandle | null;
+}
+
+export function useWindowBodyElement(
+  windowId: string,
+  rootRef: RefObject<HTMLElement | null>,
+  minimized: boolean,
+): WindowBodyElement {
+  const pip = useWindowPip(windowId);
+  const [body] = useState(() => {
+    const el = document.createElement("div");
+    el.className = BODY_CLASS;
+    return el;
+  });
+
+  // Mount the body and publish it as this window's PiP slot.
+  //
+  // The cleanup is the window's teardown order, and it must run BEFORE the content's own
+  // cleanups: React destroys a parent's layout effects before its children's when a subtree
+  // is deleted (commitDeletionEffectsOnFiber runs the fiber's own destroys, then recurses
+  // into children). So PiP is detached — moving the body out of a document about to close —
+  // while the content below is still mounted, and a tab-host body's deferred re-dock still
+  // gets to run afterwards on a subtree that is back in the main document.
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    root.append(body);
+    publishWindowSlot(windowId, body);
+    return () => {
+      const handle = windowPip(windowId);
+      if (handle && activePipHost() === handle) handle.detach();
+      publishWindowSlot(windowId, null);
+      body.remove();
+    };
+  }, [body, rootRef, windowId]);
+
+  // Minimising hides the body via CSS rather than unmounting it — content owns per-window
+  // state (explorer history, selection, filter) that a remount would wipe. Never while PiP
+  // is active: the body is in the PiP document then, and `hidden` would blank it there.
+  useLayoutEffect(() => {
+    body.classList.toggle("hidden", minimized && !pip);
+  }, [body, minimized, pip]);
+
+  return { body, pip };
+}

package/src/web/components/floating-window/use-window-drag.ts

@@ -3,6 +3,7 @@
 import { useDrag } from "@use-gesture/react";
 import { clampRect, type Rect } from "./window-geometry";
 import {
+  gestureAbandoned,
   gestureDisplacement,
   WINDOW_DRAG_CONFIG,
   type WindowGestureContext,
@@ -11,6 +12,10 @@ import {
 export function useWindowDrag(ctx: WindowGestureContext) {
   return useDrag(
     ({ xy, initial, first, last, memo }) => {
+      if (gestureAbandoned(first, memo)) {
+        if (last) ctx.onGestureActive(false);
+        return;
+      }
       // The rect is captured once per gesture: the displacement is cumulative from the
       // start, so re-reading a rect that we ourselves are mutating would compound it.
       const base: Rect = first ? { ...ctx.getRect() } : (memo as Rect);

package/src/web/components/floating-window/use-window-gesture-context.ts

@@ -25,6 +25,20 @@ export const WINDOW_DRAG_CONFIG = {
   pointer: { capture: true },
 } as const;
 
+/**
+ * True when a gesture event arrives with no rect to work from.
+ *
+ * A gesture can outlive the window it started on: pressing a caption button (close, or
+ * anything that unmounts the frame) begins a drag on the titlebar, and @use-gesture still
+ * delivers a terminating event afterwards — with `first` false and `memo` undefined, because
+ * the frame that would have captured the rect is gone. Reading `memo.x` there is a
+ * `TypeError` on every window close. Nothing is left to move or resize, so the gesture is
+ * abandoned; the caller must still lower the layer's capture overlay on a `last` event.
+ */
+export function gestureAbandoned(first: boolean, memo: unknown): boolean {
+  return !first && memo === undefined;
+}
+
 /**
  * Pointer displacement since the gesture started, corrected for layer scale.
  *

package/src/web/components/floating-window/use-window-resize.ts

@@ -6,6 +6,7 @@
 import { useDrag } from "@use-gesture/react";
 import { applyResize, clampRect, type Rect, type ResizeHandle } from "./window-geometry";
 import {
+  gestureAbandoned,
   gestureDisplacement,
   WINDOW_DRAG_CONFIG,
   type WindowGestureContext,
@@ -14,6 +15,10 @@ import {
 export function useWindowResize(ctx: WindowGestureContext) {
   return useDrag(
     ({ args, xy, initial, first, last, memo }) => {
+      if (gestureAbandoned(first, memo)) {
+        if (last) ctx.onGestureActive(false);
+        return;
+      }
       const handle = args[0] as ResizeHandle;
       const base: Rect = first ? { ...ctx.getRect() } : (memo as Rect);
       if (first) ctx.onGestureActive(true);

package/src/web/components/floating-window/window-content-registry.ts

@@ -8,8 +8,6 @@
  */
 
 import { lazy, type ComponentType, type LazyExoticComponent } from "react";
-import { ExplorerSkinChrome } from "@/components/os-explorer/skins/explorer-skin-chrome";
-import type { WindowChrome } from "./window-chrome-contract";
 import type { WindowKind } from "./window-store-types";
 
 export interface WindowContentProps {
@@ -23,22 +21,9 @@ export const WINDOW_CONTENT: Record<WindowKind, LazyExoticComponent<ComponentTyp
   explorer: lazy(() => import("@/components/os-explorer/explorer-window-content")),
   "team-member": lazy(() => import("@/components/chat/team-member-window-content")),
   "system-monitor": lazy(() => import("@/components/system/system-monitor-window-content")),
+  "tab-host": lazy(() => import("./tab-host-window-content")),
 };
 
-/**
- * Per-kind titlebar chrome. `FloatingWindow` renders `chrome` directly with no
- * `<Suspense>` around it, so — unlike `WINDOW_CONTENT` — entries here must be plain,
- * synchronously-renderable components, not `lazy()`.
- */
-export const WINDOW_CHROME: Partial<Record<WindowKind, WindowChrome>> = {
-  explorer: ExplorerSkinChrome,
-};
-
-/** Chrome for a window kind, or `undefined` to fall back to `DefaultWindowChrome`. */
-export function chromeFor(kind: WindowKind): WindowChrome | undefined {
-  return WINDOW_CHROME[kind];
-}
-
 /** Titlebar text for a window. Falls back to the kind's generic name. */
 export function windowTitle(kind: WindowKind, payload?: Record<string, unknown>): string {
   const explicit = payload?.title;
@@ -48,6 +33,9 @@ export function windowTitle(kind: WindowKind, payload?: Record<string, unknown>)
     return typeof member === "string" && member ? `Session — ${member}` : "Team member";
   }
   if (kind === "system-monitor") return "System Monitor";
+  // A detached tab carries its title in the payload; the generic name only shows for a
+  // window whose tab has not been resolved yet (restore before the layout is loaded).
+  if (kind === "tab-host") return "Tab";
   const path = payload?.path;
   if (kind === "explorer" && typeof path === "string" && path) {
     const segments = path.split(/[\\/]/).filter(Boolean);

package/src/web/components/floating-window/window-layer.tsx

@@ -13,7 +13,7 @@
 import { Suspense, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { FloatingWindow } from "./floating-window";
-import { chromeFor, WINDOW_CONTENT, windowTitle } from "./window-content-registry";
+import { WINDOW_CONTENT, windowTitle } from "./window-content-registry";
 import { Z_BASE, MAX_WINDOWS } from "./window-geometry";
 import { useWindowStore, windowsInRankOrder } from "./window-store";
 
@@ -72,7 +72,6 @@ function DesktopWindowLayer() {
             focused={win.id === frontId}
             getScale={getScale}
             onGestureActive={setCapturing}
-            chrome={chromeFor(win.kind)}
           >
             <Suspense fallback={<div className="p-3 text-xs text-text-2">Loading…</div>}>
               <Content id={win.id} payload={win.payload} />