@hienlh/ppm 0.18.9 → 0.18.11

package/src/web/components/system/use-column-widths.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { clampColumnWidth, columnWidthPx, type ColumnWidths, type ResizableColumnKey } from "./process-columns-grid";
+
+/** One entry for the whole app: column widths are a per-device preference, not
+ *  per-window state, so they survive reloads and apply to the mobile tab too. */
+export const COLUMN_WIDTHS_STORAGE_KEY = "ppm-sysmon-col-widths";
+
+function loadWidths(): ColumnWidths {
+  try {
+    const raw = localStorage.getItem(COLUMN_WIDTHS_STORAGE_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    const out: ColumnWidths = {};
+    for (const k of ["cpu", "ram", "disk", "gpu", "net"] as ResizableColumnKey[]) {
+      const v = parsed[k];
+      if (typeof v === "number" && Number.isFinite(v)) out[k] = clampColumnWidth(v);
+    }
+    return out;
+  } catch {
+    return {};
+  }
+}
+
+function saveWidths(widths: ColumnWidths): void {
+  try {
+    if (Object.keys(widths).length === 0) localStorage.removeItem(COLUMN_WIDTHS_STORAGE_KEY);
+    else localStorage.setItem(COLUMN_WIDTHS_STORAGE_KEY, JSON.stringify(widths));
+  } catch {
+    /* private mode / quota — widths just don't persist */
+  }
+}
+
+/**
+ * Drag-to-resize state for the process table's fixed-width columns.
+ *
+ * `begin(key, event)` is wired to `pointerdown` on a header's right-edge handle;
+ * the drag then follows `pointermove`/`pointerup` on `window`, so the pointer may
+ * leave the handle (or the window body) without dropping the drag. Widths persist
+ * on release, not on every move. `reset(key)` (double-click) returns one column
+ * to its default.
+ */
+export function useColumnWidths() {
+  const [widths, setWidths] = useState<ColumnWidths>(() => (typeof localStorage === "undefined" ? {} : loadWidths()));
+  const drag = useRef<{ key: ResizableColumnKey; startX: number; startWidth: number } | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: PointerEvent) => {
+      const d = drag.current;
+      if (!d) return;
+      const next = clampColumnWidth(d.startWidth + (e.clientX - d.startX));
+      setWidths((prev) => (prev[d.key] === next ? prev : { ...prev, [d.key]: next }));
+    };
+    const onUp = () => {
+      if (!drag.current) return;
+      drag.current = null;
+      document.body.style.cursor = "";
+      setWidths((prev) => {
+        saveWidths(prev);
+        return prev;
+      });
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, []);
+
+  const begin = useCallback(
+    (key: ResizableColumnKey, e: { clientX: number; preventDefault: () => void }) => {
+      e.preventDefault(); // no text selection while dragging
+      drag.current = { key, startX: e.clientX, startWidth: columnWidthPx(key, widths) };
+      document.body.style.cursor = "col-resize";
+    },
+    [widths],
+  );
+
+  const reset = useCallback((key: ResizableColumnKey) => {
+    setWidths((prev) => {
+      if (!(key in prev)) return prev;
+      const { [key]: _dropped, ...rest } = prev;
+      saveWidths(rest);
+      return rest;
+    });
+  }, []);
+
+  return { widths, begin, reset };
+}

package/src/web/components/system/use-process-kill.ts

@@ -0,0 +1,100 @@
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { getAuthToken } from "@/lib/api-client";
+import { buildGroupKillRequests, buildKillRequest, isGroupProtected, type KillTarget } from "./build-kill-request";
+import type {
+  KillProcessRequest,
+  KillProcessResult,
+  MetricsSnapshot,
+  ProcessGroup,
+  ProcessInfo,
+} from "../../../types/system-metrics";
+
+/** `api.post` (src/web/lib/api-client.ts) has no way to add a bespoke header, and the
+ *  kill route requires `X-PPM-Request: 1` — CSRF hardening, since a cross-origin HTML
+ *  form cannot set a custom header, so a preflight becomes mandatory. A raw fetch here
+ *  mirrors `handleResponse`'s single-Error-on-any-failure contract exactly, so the
+ *  caller still has exactly one catch path. */
+export async function killProcess(request: KillProcessRequest): Promise<KillProcessResult> {
+  const token = getAuthToken();
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+    "X-PPM-Request": "1",
+  };
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const res = await fetch("/api/system/resources/kill", {
+    method: "POST",
+    headers,
+    body: JSON.stringify(request),
+  });
+
+  let json: { ok: boolean; data?: KillProcessResult; error?: string };
+  try {
+    json = await res.json();
+  } catch {
+    throw new Error(res.ok ? "Empty response from server" : `Server error (HTTP ${res.status})`);
+  }
+  if (json.ok === false) throw new Error(json.error ?? `HTTP ${res.status}`);
+  return json.data as KillProcessResult;
+}
+
+/**
+ * Pending-kill state plus the confirm handler for single processes and whole app
+ * groups. Members are resolved against the CURRENT snapshot at click time, so a
+ * helper that exited since the row was drawn is simply not in the list.
+ */
+export function useProcessKill(snapshot: MetricsSnapshot) {
+  const [pendingKill, setPendingKill] = useState<KillTarget | null>(null);
+
+  const membersOf = useCallback(
+    (group: ProcessGroup): ProcessInfo[] => {
+      const byPid = new Map(snapshot.processes.map((p) => [p.pid, p]));
+      return group.pids.map((pid) => byPid.get(pid)).filter((p): p is ProcessInfo => !!p);
+    },
+    [snapshot.processes],
+  );
+
+  /** group key → true when any member is refused by the guard (button disabled). */
+  const groupProtected = useMemo(
+    () => new Map(snapshot.groups.map((g) => [g.key, isGroupProtected(membersOf(g))])),
+    [snapshot.groups, membersOf],
+  );
+
+  const requestKillProcess = useCallback((proc: ProcessInfo) => setPendingKill({ kind: "process", proc }), []);
+  const requestKillGroup = useCallback(
+    (group: ProcessGroup) => setPendingKill({ kind: "group", group, members: membersOf(group) }),
+    [membersOf],
+  );
+  const cancelKill = useCallback(() => setPendingKill(null), []);
+
+  const confirmKill = useCallback(async (target: KillTarget, tree: boolean) => {
+    setPendingKill(null);
+    if (target.kind === "process") {
+      const { proc } = target;
+      try {
+        await killProcess(buildKillRequest(proc, tree));
+        toast.success(`Ended ${proc.name} (${proc.pid})`);
+      } catch (e) {
+        toast.error(e instanceof Error ? e.message : `Failed to end ${proc.name}`);
+      }
+      return;
+    }
+    // Whole app: one tree kill on the root when it exists, else one per member.
+    // Requests run sequentially so the guard's 403/409 for one member is reported,
+    // not lost in a Promise.all rejection.
+    const { group, members } = target;
+    const failures: string[] = [];
+    for (const req of buildGroupKillRequests(group, members)) {
+      try {
+        await killProcess(req);
+      } catch (e) {
+        failures.push(e instanceof Error ? e.message : `pid ${req.pid}`);
+      }
+    }
+    if (failures.length === 0) toast.success(`Ended ${group.label} (${members.length} processes)`);
+    else toast.error(`${group.label}: ${failures.length} of ${members.length} could not be ended — ${failures[0]}`);
+  }, []);
+
+  return { pendingKill, groupProtected, requestKillProcess, requestKillGroup, confirmKill, cancelKill };
+}

package/src/web/components/ui/context-menu.tsx

@@ -3,6 +3,7 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { usePortalContainer } from "./portal-container-context"
 
 function ContextMenu({
   ...props
@@ -27,10 +28,16 @@ function ContextMenuGroup({
 }
 
 function ContextMenuPortal({
+  container,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  const contextContainer = usePortalContainer()
   return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+    <ContextMenuPrimitive.Portal
+      data-slot="context-menu-portal"
+      container={container ?? contextContainer}
+      {...props}
+    />
   )
 }
 
@@ -96,7 +103,7 @@ function ContextMenuContent({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
   return (
-    <ContextMenuPrimitive.Portal>
+    <ContextMenuPortal>
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
@@ -105,7 +112,7 @@ function ContextMenuContent({
         )}
         {...props}
       />
-    </ContextMenuPrimitive.Portal>
+    </ContextMenuPortal>
   )
 }
 

package/src/web/components/ui/dialog.tsx

@@ -4,6 +4,7 @@ import { Dialog as DialogPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { usePortalContainer } from "./portal-container-context"
 
 function Dialog({
   ...props
@@ -18,9 +19,17 @@ function DialogTrigger({
 }
 
 function DialogPortal({
+  container,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  const contextContainer = usePortalContainer()
+  return (
+    <DialogPrimitive.Portal
+      data-slot="dialog-portal"
+      container={container ?? contextContainer}
+      {...props}
+    />
+  )
 }
 
 function DialogClose({

package/src/web/components/ui/dropdown-menu.tsx

@@ -5,6 +5,7 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { usePortalContainer } from "./portal-container-context"
 
 function DropdownMenu({
   ...props
@@ -13,10 +14,16 @@ function DropdownMenu({
 }
 
 function DropdownMenuPortal({
+  container,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  const contextContainer = usePortalContainer()
   return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+    <DropdownMenuPrimitive.Portal
+      data-slot="dropdown-menu-portal"
+      container={container ?? contextContainer}
+      {...props}
+    />
   )
 }
 
@@ -37,7 +44,7 @@ function DropdownMenuContent({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
-    <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPortal>
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
@@ -47,7 +54,7 @@ function DropdownMenuContent({
         )}
         {...props}
       />
-    </DropdownMenuPrimitive.Portal>
+    </DropdownMenuPortal>
   )
 }
 

package/src/web/components/ui/mobile-bottom-sheet.tsx

@@ -11,6 +11,7 @@ import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
 import { useSwipeToDismiss } from "@/hooks/use-swipe-to-dismiss";
 import { useVisualViewport } from "@/hooks/use-visual-viewport";
+import { usePortalContainer } from "./portal-container-context";
 
 /* ------------------------------------------------------------------ */
 /*  Core BottomSheet — reusable everywhere                             */
@@ -33,6 +34,7 @@ interface BottomSheetProps {
 export function BottomSheet({ open, onClose, children, className, zIndex = 50 }: BottomSheetProps) {
   const { dragY, swipeHandlers, dragStyle, backdropOpacity, isDragging } =
     useSwipeToDismiss(onClose);
+  const portalContainer = usePortalContainer();
 
   // Keyboard-aware geometry. The backdrop deliberately keeps covering the whole
   // layout viewport while only the panel tracks the keyboard: if the two ever
@@ -89,7 +91,7 @@ export function BottomSheet({ open, onClose, children, className, zIndex = 50 }:
         {children}
       </div>
     </div>,
-    sheetPortalTarget(),
+    sheetPortalTarget(portalContainer),
   );
 }
 
@@ -103,10 +105,11 @@ export function BottomSheet({ open, onClose, children, className, zIndex = 50 }:
  * the event fired on (`body`), finds no match, and drops the event — every
  * button inside a dock tab goes dead while native listeners still fire.
  * `#root` carries no styles, so keeping the portal inside it leaves stacking
- * order untouched.
+ * order untouched. A caller-supplied `container` (`PortalContainerProvider`)
+ * wins over both fallbacks.
  */
-function sheetPortalTarget(): HTMLElement {
-  return document.getElementById("root") ?? document.body;
+function sheetPortalTarget(container?: HTMLElement): HTMLElement {
+  return container ?? document.getElementById("root") ?? document.body;
 }
 
 /* ------------------------------------------------------------------ */

package/src/web/components/ui/portal-container-context.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+/**
+ * Shared portal target for every Radix/portal-based primitive under
+ * `components/ui/`. `undefined` means "the document's default target" — Radix
+ * primitives fall back to `document.body`, `mobile-bottom-sheet.tsx` falls
+ * back to `#root`. Never pass `null`: Radix's `container` prop only applies
+ * its own default when the value is `undefined`, and `null` renders no
+ * portal at all.
+ *
+ * With no provider mounted, `usePortalContainer()` returns `undefined` and
+ * every primitive behaves exactly as it did before this context existed.
+ */
+const PortalContainerContext = createContext<HTMLElement | undefined>(
+  undefined,
+);
+
+/**
+ * Mounts a portal target for all descendant Radix primitives. Pass
+ * `undefined` to explicitly restore the document default (e.g. once a
+ * picture-in-picture window closes).
+ */
+export function PortalContainerProvider({
+  container,
+  children,
+}: {
+  container: HTMLElement | undefined;
+  children: ReactNode;
+}) {
+  return (
+    <PortalContainerContext.Provider value={container}>
+      {children}
+    </PortalContainerContext.Provider>
+  );
+}
+
+/** The caller-supplied portal container, or `undefined` outside any provider. */
+export function usePortalContainer(): HTMLElement | undefined {
+  return useContext(PortalContainerContext);
+}

package/src/web/components/ui/select.tsx

@@ -3,6 +3,7 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { Select as SelectPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { usePortalContainer } from "./portal-container-context"
 
 function Select({
   ...props
@@ -55,8 +56,9 @@ function SelectContent({
   align = "center",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  const container = usePortalContainer()
   return (
-    <SelectPrimitive.Portal>
+    <SelectPrimitive.Portal container={container}>
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(

package/src/web/components/ui/tooltip.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Tooltip as TooltipPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { usePortalContainer } from "./portal-container-context"
 
 function TooltipProvider({
   delayDuration = 0,
@@ -36,8 +37,9 @@ function TooltipContent({
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const container = usePortalContainer()
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container}>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}

package/src/web/hooks/use-terminal.ts

@@ -8,6 +8,7 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { buildXtermTheme } from "@/theme/adapters/xterm-adapter";
 import { resolveTheme as resolvePpmTheme } from "@/theme/resolve-theme";
 import { getCurrentAppliedTheme, THEME_CHANGE_EVENT } from "@/theme/apply-theme";
+import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
 import type { PpmTheme } from "@/theme/types";
 
 /** Current active PpmTheme → xterm ITheme (prefers the live applied theme). */
@@ -400,10 +401,17 @@ export function useTerminal(
 
     // Keepalive heartbeat + zombie detection (covers suspend/sleep/network drop)
     const heartbeatInterval = setInterval(checkConnection, HEARTBEAT_INTERVAL_MS);
+    // Always the main document: a tab mounts there and is only moved into a
+    // picture-in-picture window afterwards, and this is resolved once at mount.
+    // So a terminal that is visible in PiP while the main tab is hidden is still
+    // treated as hidden and does not reconnect until the main tab comes back —
+    // checkConnection() reads the main document's visibility directly too, so
+    // re-resolving this one would not change that on its own.
+    const hostDoc = container.ownerDocument;
     const onVisibility = () => {
-      if (document.visibilityState === "visible") checkConnection();
+      if (hostDoc.visibilityState === "visible") checkConnection();
     };
-    document.addEventListener("visibilitychange", onVisibility);
+    hostDoc.addEventListener("visibilitychange", onVisibility);
 
     // ResizeObserver for auto-fit — skip when tab is hidden (0 dimensions).
     // Debounced: an on-screen keyboard resizes the container many times as it
@@ -426,6 +434,18 @@ export function useTerminal(
     });
     resizeObserver.observe(container);
 
+    // Host-driven resize (picture-in-picture): the ResizeObserver above only
+    // reports a PiP-driven size seconds later, so refit as soon as the host says
+    // its size changed.
+    const unsubHostResize = onHostResize(container, () => {
+      try {
+        fitAddon.fit();
+        sendResize();
+      } catch {
+        // Ignore fit errors while the tab is detached or tearing down
+      }
+    });
+
     // React to theme changes — the theme-change event fires after CSS vars are
     // applied, covering style, mode, system-OS, and imported-theme swaps.
     const onThemeChange = () => { term.options.theme = currentXtermTheme(); };
@@ -434,10 +454,11 @@ export function useTerminal(
 
     return () => {
       unsubTheme();
+      unsubHostResize();
       if (fitTimer) clearTimeout(fitTimer);
       resizeObserver.disconnect();
       clearInterval(heartbeatInterval);
-      document.removeEventListener("visibilitychange", onVisibility);
+      hostDoc.removeEventListener("visibilitychange", onVisibility);
       if (reconnectTimer.current) clearTimeout(reconnectTimer.current);
       if (readyQuietTimer.current) clearTimeout(readyQuietTimer.current);
       if (readyMaxTimer.current) clearTimeout(readyMaxTimer.current);

package/src/web/stores/panel-store.ts

@@ -17,7 +17,17 @@ import {
   deriveTabId,
   visibleTabs,
   DOCK_PANEL_ID,
+  isWindowPanelId,
 } from "./panel-utils";
+import {
+  makePopOutTab,
+  makeRedockFromWindow,
+  hydrateWindowPanels,
+  stripProjectFromWindowPanels,
+  syncWindowPanel,
+} from "./window-panel-actions";
+import { saveWindowPanels } from "./window-panel-persistence";
+import { useWindowStore } from "@/components/floating-window/window-store";
 import {
   makeToggleDock,
   makeSetDockVisible,
@@ -120,6 +130,16 @@ export interface PanelStore {
   /** Park a terminal from a grid panel into __dock__ without killing the PTY session. */
   redockTab: (tabId: string, fromPanelId: string) => void;
 
+  // Floating-window actions
+  /**
+   * Detach a tab into a floating window, returning the window id — or null when the
+   * request is rejected (mobile, a tab type that cannot detach, or the window cap),
+   * in which case nothing changed and the caller reports it.
+   */
+  popOutTab: (tabId: string, fromPanelId: string) => string | null;
+  /** Send a window's tabs back to the grid and drop its panel. Runs on window close. */
+  redockFromWindow: (windowId: string, originPanelId?: string | null) => void;
+
   // Helpers
   getPanelForTab: (tabId: string) => Panel | undefined;
   isMobile: () => boolean;
@@ -171,6 +191,22 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
     return panelId ?? get().focusedPanelId;
   }
 
+  /**
+   * The focus to commit when a tab was activated in `pid`.
+   *
+   * Focus decides where the next `openTab()` with no explicit panel lands, and a
+   * floating window renders no tab bar — a tab opened inside one would be unreachable
+   * until the window closes, and the id would be persisted with the layout. So
+   * activating a tab that lives in a window leaves focus where it was: the window is
+   * already in front of the user, nothing more is needed to "focus" it.
+   *
+   * Every caller here picks `pid` by scanning the whole `panels` map, which includes
+   * the off-grid window panels.
+   */
+  function focusAfterActivate(pid: string): string {
+    return isWindowPanelId(pid) ? get().focusedPanelId : pid;
+  }
+
   return {
     ...defaultLayout(),
     currentProject: null,
@@ -188,8 +224,13 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
     toggleDockExpanded: () => set((s) => ({ dockExpanded: !s.dockExpanded })),
     openInDock: makeOpenInDock(set, get),
     redockTab: makeRedockTab(set, get),
+    popOutTab: makePopOutTab(set, get),
+    redockFromWindow: makeRedockFromWindow(set, get),
 
     switchProject: (projectName) => {
+      // Window panels are global, not part of any project's layout blob, so they are
+      // merged into the flat map once — before the first project reads it.
+      hydrateWindowPanels(set, get);
       const { currentProject, panels, grid, focusedPanelId, projectGrids, projectFocused, dock, projectDock } = get();
 
       // No-op if same project
@@ -401,18 +442,26 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         };
       }
 
+      // A window panel is off-grid, so the loop above never reaches it: a floating
+      // window would keep showing a tab of a project that no longer exists.
+      const stripped = stripProjectFromWindowPanels(cleanedPanels, projectName);
+
       set({
         projectGrids: newGrids,
         projectFocused: newFocused,
         projectDock: newProjectDock,
-        panels: cleanedPanels,
+        panels: stripped.panels,
         currentProject: null,
       });
+      saveWindowPanels(stripped.panels);
+      for (const windowId of stripped.windowIdsToClose) useWindowStore.getState().close(windowId);
       // Re-trigger full load from localStorage
       get().switchProject(projectName);
     },
 
     setFocusedPanel: (panelId) => {
+      // Focus drives where the next tab opens, so it must stay on a real, on-grid panel.
+      if (isWindowPanelId(panelId)) return;
       if (get().panels[panelId]) set({ focusedPanelId: panelId });
     },
 
@@ -451,7 +500,7 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
           const existing = p.tabs.find((t) => t.type === "chat" && t.metadata?.sessionId === sid);
           if (existing) {
             set((s) => ({
-              focusedPanelId: p.id,
+              focusedPanelId: focusAfterActivate(p.id),
               panels: {
                 ...s.panels,
                 [p.id]: { ...p, tabs: stampActive(p.tabs, existing.id), activeTabId: existing.id, tabHistory: pushHistory(p.tabHistory, existing.id) },
@@ -469,7 +518,7 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
           const existing = p.tabs.find((t) => t.id === baseId);
           if (existing) {
             set((s) => ({
-              focusedPanelId: p.id,
+              focusedPanelId: focusAfterActivate(p.id),
               panels: {
                 ...s.panels,
                 [p.id]: {
@@ -581,8 +630,12 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         // no-op for it) so the map-delete would destroy the reserved dock panel, and a
         // later redock (moveTab → __dock__) would silently no-op (to === undefined),
         // leaving the terminal stuck in the grid while an empty dock opens.
+        // A window panel is exempt from the "keep the last panel" rule: that rule
+        // protects the grid from ending up with nothing to render, and a window panel
+        // is not in the grid. Leaving it behind would strand an empty floating window.
         const gridPanelCount = s.grid.flat().length;
-        if (newTabs.length === 0 && gridPanelCount > 1 && pid !== DOCK_PANEL_ID) {
+        const removable = isWindowPanelId(pid) || (gridPanelCount > 1 && pid !== DOCK_PANEL_ID);
+        if (newTabs.length === 0 && removable) {
           const { [pid]: _, ...rest } = s.panels;
           const newGrid = gridRemovePanel(s.grid, pid);
           // Focus must land on a panel still in the grid — Object.keys(rest)
@@ -603,6 +656,9 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       if (pid === DOCK_PANEL_ID && activeProjectDockTabCount(get) === 0) {
         get().setDockVisible(false);
       }
+
+      // A window that lost its last tab closes with it — it can never show anything again.
+      if (isWindowPanelId(pid)) syncWindowPanel(set, get, pid);
     },
 
     setActiveTab: (tabId, panelId?) => {
@@ -612,7 +668,7 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
       set((s) => {
         const p = s.panels[pid]!;
         return {
-          focusedPanelId: pid,
+          focusedPanelId: focusAfterActivate(pid),
           panels: { ...s.panels, [pid]: { ...p, tabs: stampActive(p.tabs, tabId), activeTabId: tabId, tabHistory: pushHistory(p.tabHistory, tabId) } },
         };
       });
@@ -667,8 +723,13 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         // Auto-close empty source panel if not last in current grid.
         // Guard: never attempt to remove __dock__ from the grid — it is intentionally
         // absent from grid and gridRemovePanel would be a no-op, but the panels-map
-        // delete would destroy the dock panel entirely.
-        if (fromTabs.length === 0 && gridPanelCount > 1 && fromPanelId !== DOCK_PANEL_ID) {
+        // delete would destroy the dock panel entirely. The dock is reserved and outlives
+        // its tabs; only its visibility follows them.
+        // A window panel is skipped for a different reason: its lifetime belongs to the
+        // floating window, so syncWindowPanel below drops it together with the window
+        // rather than leaving an open, empty one behind.
+        const offGridSource = fromPanelId === DOCK_PANEL_ID || isWindowPanelId(fromPanelId);
+        if (fromTabs.length === 0 && gridPanelCount > 1 && !offGridSource) {
           const { [fromPanelId]: _, ...rest } = s.panels;
           return {
             panels: {
@@ -690,6 +751,10 @@ export const usePanelStore = create<PanelStore>()((set, get) => {
         };
       });
       persist();
+
+      // Moving the last tab out of a window empties it exactly as closing that tab would,
+      // and the window has no tab bar to fill itself from — same owner, same outcome.
+      if (isWindowPanelId(fromPanelId)) syncWindowPanel(set, get, fromPanelId);
     },
 
     splitPanel: (direction, tabId, sourcePanelId, targetPanelId?) => {