@hienlh/ppm 0.17.57 → 0.18.0

package/src/web/components/os-explorer/explorer-sidebar.tsx

@@ -0,0 +1,198 @@
+/**
+ * Places sidebar: PPM pins, the OS's own pinned folders, the known folders, and the
+ * drives.
+ *
+ * Host-info provider failures arrive as `warnings[]` rather than as an error — a Mac
+ * without Full Disk Access still has drives and known folders — so they render as a muted
+ * hint row instead of replacing the sidebar.
+ */
+
+import type { ComponentType } from "react";
+import { AlertTriangle, HardDrive, Pin, Usb, Network } from "lucide-react";
+import type { HostInfo, Drive } from "../../../types/system";
+import { cn } from "@/lib/utils";
+import { DROP_TARGET_CLASS } from "./dnd/drop-target-style";
+import type { DropRunner } from "./dnd/entry-drop-executor";
+import { usePathDropTarget } from "./dnd/use-path-drop-target";
+import { useDropTransfer } from "./dnd/use-drop-transfer";
+import { useExplorerPinsStore } from "./explorer-pins-store";
+import { FileTypeIcon } from "./icons/file-type-icon";
+import type { SkinVocab } from "./skins/skin-types";
+import { usePrefersCoarsePointer } from "./use-coarse-long-press";
+
+/** A folder-type place row draws the current skin's folder glyph via `FileTypeIcon`'s context. */
+function FolderPlaceIcon({ className }: { className?: string }) {
+  return <FileTypeIcon name="" kind="directory" className={cn("size-4 shrink-0", className)} />;
+}
+
+const DRIVE_ICON: Record<Drive["kind"], typeof HardDrive> = {
+  fixed: HardDrive,
+  removable: Usb,
+  network: Network,
+  unknown: HardDrive,
+};
+
+type PlaceIcon = ComponentType<{ className?: string }>;
+
+interface PlaceProps {
+  label: string;
+  path: string;
+  active: boolean;
+  icon: PlaceIcon;
+  onNavigate(path: string): void;
+  onUnpin?(): void;
+  /** Every place is a directory, so a drop always has somewhere valid to land. */
+  run: DropRunner;
+}
+
+function Place({ label, path, active, icon: Icon, onNavigate, onUnpin, run }: PlaceProps) {
+  // Gated on real pointer coarseness, not a `md:` breakpoint — an iPad is ≥768px but has no
+  // mouse, so a breakpoint-only rule was silently dropping the 44px minimum for it.
+  const coarse = usePrefersCoarsePointer();
+  const drop = usePathDropTarget({ targetDir: path, run });
+  return (
+    <div className="group/place relative flex items-center">
+      <button
+        type="button"
+        title={path}
+        onClick={() => onNavigate(path)}
+        className={cn(
+          "flex w-full items-center gap-2 rounded px-2 py-1 text-left text-[13px]",
+          coarse ? "min-h-[44px]" : "min-h-0",
+          "can-hover:hover:bg-surface-elevated",
+          active ? "bg-accent-wash text-text" : "text-text-2",
+          drop.isOver && DROP_TARGET_CLASS,
+        )}
+        {...drop.handlers}
+      >
+        <Icon className="size-4 shrink-0 text-text-subtle" />
+        <span className="truncate">{label}</span>
+      </button>
+      {onUnpin && (
+        <button
+          type="button"
+          aria-label={`Unpin ${label}`}
+          title="Unpin"
+          onClick={onUnpin}
+          // Always reachable on touch; only revealed on hover where hovering exists.
+          className="absolute right-1 rounded p-1 text-text-subtle can-hover:opacity-0 can-hover:group-hover/place:opacity-100 can-hover:hover:text-text"
+        >
+          <Pin className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="pb-2">
+      <p className="px-2 pb-0.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-text-subtle">
+        {title}
+      </p>
+      {children}
+    </div>
+  );
+}
+
+/** Used when a caller renders the sidebar without a resolved skin (defensive default). */
+const DEFAULT_VOCAB: SkinVocab = { home: "Home", pinned: "Quick access", known: "Folders", drives: "Drives" };
+
+export interface ExplorerSidebarProps {
+  host: HostInfo | null;
+  currentPath: string;
+  onNavigate(path: string): void;
+  /** Section labels for the current OS skin — Finder says "Favorites"/"Locations". */
+  vocab?: SkinVocab;
+}
+
+export function ExplorerSidebar({ host, currentPath, onNavigate, vocab = DEFAULT_VOCAB }: ExplorerSidebarProps) {
+  const pins = useExplorerPinsStore((s) => s.pins);
+  const unpin = useExplorerPinsStore((s) => s.unpin);
+  const isActive = (path: string) => path === currentPath;
+  // One drop-transfer context for the whole sidebar — every place lands through the same
+  // collision prompt rather than each row owning its own dialog state.
+  const { run, prompts } = useDropTransfer(host?.sep ?? "/", host?.platform);
+
+  return (
+    <aside
+      aria-label="Places"
+      data-testid="explorer-sidebar"
+      className="hidden w-44 shrink-0 overflow-y-auto border-r border-border bg-[var(--x-sidebar-bg,var(--panel-2))] px-1 py-1 sm:block"
+    >
+      {pins.length > 0 && (
+        <Section title="Pinned">
+          {pins.map((pin) => (
+            <Place
+              key={pin.path}
+              label={pin.name}
+              path={pin.path}
+              icon={Pin}
+              active={isActive(pin.path)}
+              onNavigate={onNavigate}
+              onUnpin={() => unpin(pin.path)}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host && host.pinned.length > 0 && (
+        <Section title={vocab.pinned}>
+          {host.pinned.map((entry) => (
+            <Place
+              key={entry.path}
+              label={entry.name}
+              path={entry.path}
+              icon={FolderPlaceIcon}
+              active={isActive(entry.path)}
+              onNavigate={onNavigate}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host && (
+        <Section title={vocab.known}>
+          <Place label={vocab.home} path={host.homedir} icon={FolderPlaceIcon} active={isActive(host.homedir)} onNavigate={onNavigate} run={run} />
+          {host.knownFolders.map((folder) => (
+            <Place
+              key={folder.path}
+              label={folder.name}
+              path={folder.path}
+              icon={FolderPlaceIcon}
+              active={isActive(folder.path)}
+              onNavigate={onNavigate}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host && host.drives.length > 0 && (
+        <Section title={vocab.drives}>
+          {host.drives.map((drive) => (
+            <Place
+              key={drive.path}
+              label={drive.label ? `${drive.label} (${drive.name})` : drive.name}
+              path={drive.path}
+              icon={DRIVE_ICON[drive.kind]}
+              active={isActive(drive.path)}
+              onNavigate={onNavigate}
+              run={run}
+            />
+          ))}
+        </Section>
+      )}
+
+      {host?.warnings.map((warning) => (
+        <p key={warning} className="flex gap-1.5 px-2 py-1 text-[11px] leading-snug text-text-subtle">
+          <AlertTriangle className="mt-0.5 size-3 shrink-0" />
+          <span>{warning}</span>
+        </p>
+      ))}
+      {prompts}
+    </aside>
+  );
+}

package/src/web/components/os-explorer/explorer-sort-menu.tsx

@@ -0,0 +1,68 @@
+/**
+ * Toolbar "Sort" menu: the only sort control reachable from Icons and Column view, which
+ * have no clickable column header of their own (List view keeps that shortcut too — see
+ * `views/list-view.tsx`). Backed by the same `prefs.sort` every view already reads.
+ */
+
+import { ArrowUpDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useExplorerStore, type SortDir, type SortKey } from "./explorer-store";
+import { SORT_DIR_OPTIONS, SORT_KEY_OPTIONS, sortDirLabel, sortKeyLabel } from "./sort-options";
+import { toolbarButtonClass } from "./toolbar-icon-button";
+
+export interface ExplorerSortMenuProps {
+  coarse: boolean;
+}
+
+export function ExplorerSortMenu({ coarse }: ExplorerSortMenuProps) {
+  const sort = useExplorerStore((s) => s.sort);
+  const setPrefs = useExplorerStore((s) => s.setPrefs);
+
+  // No skin currently defines a `vocab` slot for this label, so both the Windows and
+  // macOS chrome fall back to the same plain word.
+  const label = "Sort";
+  const title = `${label}: ${sortKeyLabel(sort.key)}, ${sortDirLabel(sort.dir)}`;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button type="button" aria-label={label} title={title} className={toolbarButtonClass(coarse)}>
+          <ArrowUpDown className="size-4" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Sort by</DropdownMenuLabel>
+        <DropdownMenuRadioGroup
+          value={sort.key}
+          onValueChange={(key) => setPrefs({ sort: { key: key as SortKey, dir: sort.dir } })}
+        >
+          {SORT_KEY_OPTIONS.map(({ key, label: keyLabel }) => (
+            <DropdownMenuRadioItem key={key} value={key}>
+              {keyLabel}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>Order</DropdownMenuLabel>
+        <DropdownMenuRadioGroup
+          value={sort.dir}
+          onValueChange={(dir) => setPrefs({ sort: { key: sort.key, dir: dir as SortDir } })}
+        >
+          {SORT_DIR_OPTIONS.map(({ dir, label: dirLabel }) => (
+            <DropdownMenuRadioItem key={dir} value={dir}>
+              {dirLabel}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/web/components/os-explorer/explorer-status-bar.tsx

@@ -0,0 +1,35 @@
+/** Item count, selection count and the selected size — the strip along the window's foot. */
+
+import type { FsEntry } from "@/lib/fs-api";
+import { formatSize } from "./format-file-meta";
+import { totalSize } from "./sort-and-filter-entries";
+
+export interface ExplorerStatusBarProps {
+  /** Rows currently visible (after filtering). */
+  entries: FsEntry[];
+  selection: Set<string>;
+  /** True when the server capped the listing, so the counts are a lower bound. */
+  truncated: boolean;
+}
+
+export function ExplorerStatusBar({ entries, selection, truncated }: ExplorerStatusBarProps) {
+  const selected = entries.filter((e) => selection.has(e.path));
+  const parts = [`${entries.length}${truncated ? "+" : ""} item${entries.length === 1 ? "" : "s"}`];
+  if (selected.length > 0) {
+    parts.push(`${selected.length} selected`);
+    const bytes = totalSize(selected);
+    if (bytes > 0) parts.push(formatSize(bytes));
+  }
+
+  return (
+    <div
+      data-testid="explorer-status"
+      className="flex shrink-0 items-center gap-2 border-t border-border bg-panel-2 px-2 py-1 text-[11px] text-text-subtle"
+    >
+      {parts.join(" · ")}
+      {truncated && (
+        <span className="ml-auto">Listing capped — narrow the filter to see the rest.</span>
+      )}
+    </div>
+  );
+}

package/src/web/components/os-explorer/explorer-store.ts

@@ -0,0 +1,179 @@
+/**
+ * Per-window explorer state, keyed by floating-window id.
+ *
+ * Each window browses independently (own path, history, selection, filter), so the state
+ * cannot live in a single global slice. View preferences are the exception: sort, view
+ * mode and the hidden-files toggle are user settings and are shared plus persisted.
+ *
+ * Windows also have to agree about the disk. After any mutation the acting window calls
+ * `fsChanged(dir)` and every window currently showing that directory refetches, which is
+ * what makes "cut here, paste there" look instantaneous in both frames.
+ */
+
+import { create } from "zustand";
+import type { FsBreadcrumb, FsEntry } from "@/lib/fs-api";
+
+export type SortKey = "name" | "size" | "modified" | "kind";
+export type SortDir = "asc" | "desc";
+export type ViewMode = "list" | "icons" | "columns";
+
+export interface ExplorerError {
+  message: string;
+  code: string;
+  hint?: string;
+}
+
+/** Inline editing state: renaming an existing entry, or naming a new one. */
+export type InlineEdit =
+  | { kind: "rename"; path: string; initial: string }
+  | { kind: "new-file" | "new-folder"; initial: string };
+
+export interface ExplorerSlice {
+  path: string;
+  /** Visited paths; `historyIndex` points at the current one. */
+  history: string[];
+  historyIndex: number;
+  entries: FsEntry[];
+  breadcrumbs: FsBreadcrumb[];
+  parent: string | null;
+  sep: string;
+  truncated: boolean;
+  loading: boolean;
+  error: ExplorerError | null;
+  selection: Set<string>;
+  /** Range-selection anchor; shift-click extends from here. */
+  anchor: string | null;
+  filter: string;
+  inlineEdit: InlineEdit | null;
+}
+
+export interface ExplorerViewPrefs {
+  sort: { key: SortKey; dir: SortDir };
+  viewMode: ViewMode;
+  showHidden: boolean;
+}
+
+const VIEW_PREFS_KEY = "ppm-explorer-view";
+
+const DEFAULT_PREFS: ExplorerViewPrefs = {
+  sort: { key: "name", dir: "asc" },
+  viewMode: "list",
+  showHidden: false,
+};
+
+function loadPrefs(): ExplorerViewPrefs {
+  try {
+    const raw = localStorage.getItem(VIEW_PREFS_KEY);
+    if (!raw) return DEFAULT_PREFS;
+    const parsed = JSON.parse(raw) as Partial<ExplorerViewPrefs>;
+    return {
+      sort: parsed.sort?.key ? parsed.sort : DEFAULT_PREFS.sort,
+      viewMode: parsed.viewMode ?? DEFAULT_PREFS.viewMode,
+      showHidden: parsed.showHidden ?? DEFAULT_PREFS.showHidden,
+    };
+  } catch {
+    return DEFAULT_PREFS;
+  }
+}
+
+function savePrefs(prefs: ExplorerViewPrefs): void {
+  try {
+    localStorage.setItem(VIEW_PREFS_KEY, JSON.stringify(prefs));
+  } catch {
+    /* quota or private mode — preferences simply do not persist */
+  }
+}
+
+function emptySlice(path: string): ExplorerSlice {
+  return {
+    path,
+    history: [path],
+    historyIndex: 0,
+    entries: [],
+    breadcrumbs: [],
+    parent: null,
+    sep: "/",
+    truncated: false,
+    loading: true,
+    error: null,
+    selection: new Set(),
+    anchor: null,
+    filter: "",
+    inlineEdit: null,
+  };
+}
+
+interface ExplorerStore extends ExplorerViewPrefs {
+  slices: Record<string, ExplorerSlice>;
+  /** Create the slice for a window if it does not exist yet. */
+  ensure(id: string, path: string): void;
+  /** Drop a window's slice when it closes. */
+  discard(id: string): void;
+  patch(id: string, partial: Partial<ExplorerSlice>): void;
+  setPrefs(partial: Partial<ExplorerViewPrefs>): void;
+}
+
+export const useExplorerStore = create<ExplorerStore>((set, get) => ({
+  ...loadPrefs(),
+  slices: {},
+
+  ensure: (id, path) => {
+    if (get().slices[id]) return;
+    set((s) => ({ slices: { ...s.slices, [id]: emptySlice(path) } }));
+  },
+
+  discard: (id) => {
+    set((s) => {
+      if (!s.slices[id]) return s;
+      const slices = { ...s.slices };
+      delete slices[id];
+      return { slices };
+    });
+  },
+
+  patch: (id, partial) => {
+    set((s) => {
+      const current = s.slices[id];
+      if (!current) return s;
+      return { slices: { ...s.slices, [id]: { ...current, ...partial } } };
+    });
+  },
+
+  setPrefs: (partial) => {
+    set((s) => {
+      const next: ExplorerViewPrefs = {
+        sort: partial.sort ?? s.sort,
+        viewMode: partial.viewMode ?? s.viewMode,
+        showHidden: partial.showHidden ?? s.showHidden,
+      };
+      savePrefs(next);
+      return next;
+    });
+  },
+}));
+
+/** Read a window's slice outside React (action modules, keyboard handlers). */
+export function sliceOf(id: string): ExplorerSlice | undefined {
+  return useExplorerStore.getState().slices[id];
+}
+
+// ── Cross-window refresh ───────────────────────────────────────────
+
+type DirListener = (dir: string) => void;
+const dirListeners = new Set<DirListener>();
+
+/**
+ * Announce that `dir`'s contents changed on disk. Every window showing that
+ * directory — including the one that caused the change — refetches.
+ */
+export function fsChanged(...dirs: (string | null | undefined)[]): void {
+  for (const dir of dirs) {
+    if (!dir) continue;
+    for (const listener of dirListeners) listener(dir);
+  }
+}
+
+export function onFsChanged(listener: DirListener): () => void {
+  dirListeners.add(listener);
+  return () => dirListeners.delete(listener);
+}

package/src/web/components/os-explorer/explorer-toolbar.tsx

@@ -0,0 +1,139 @@
+/**
+ * Window toolbar: history navigation, the breadcrumb (switchable to a raw path field),
+ * a name filter, the view switch and the hidden-files toggle.
+ *
+ * The path field is a deliberate toggle rather than a click-to-edit breadcrumb: pasting a
+ * path is the fastest way to reach a deep folder, and a breadcrumb that turns into a field
+ * on click makes the crumbs themselves hard to hit.
+ */
+
+import { useEffect, useState } from "react";
+import {
+  ArrowLeft, ArrowRight, ArrowUp, Columns3, Eye, EyeOff, LayoutGrid, List, PencilLine, RefreshCw, Search, X,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ExplorerBreadcrumb } from "./explorer-breadcrumb";
+import { ExplorerSortMenu } from "./explorer-sort-menu";
+import { useExplorerStore, type ExplorerSlice, type ViewMode } from "./explorer-store";
+import { toolbarButtonClass as buttonClass } from "./toolbar-icon-button";
+import { usePrefersCoarsePointer } from "./use-coarse-long-press";
+import type { ExplorerNavigation } from "./use-explorer-navigation";
+import { AVAILABLE_VIEW_MODES } from "./views/explorer-view-registry";
+
+const VIEW_ICON: Record<ViewMode, typeof List> = { list: List, icons: LayoutGrid, columns: Columns3 };
+const VIEW_LABEL: Record<ViewMode, string> = { list: "List view", icons: "Icons view", columns: "Column view" };
+
+export interface ExplorerToolbarProps {
+  windowId: string;
+  slice: ExplorerSlice;
+  nav: ExplorerNavigation;
+}
+
+export function ExplorerToolbar({ windowId, slice, nav }: ExplorerToolbarProps) {
+  const patch = useExplorerStore((s) => s.patch);
+  const showHidden = useExplorerStore((s) => s.showHidden);
+  const viewMode = useExplorerStore((s) => s.viewMode);
+  const setPrefs = useExplorerStore((s) => s.setPrefs);
+
+  const [editingPath, setEditingPath] = useState(false);
+  const [draftPath, setDraftPath] = useState(slice.path);
+  useEffect(() => setDraftPath(slice.path), [slice.path]);
+  const coarse = usePrefersCoarsePointer();
+
+  return (
+    <div className="flex shrink-0 flex-wrap items-center gap-1 border-b border-border bg-[var(--x-toolbar-bg,var(--panel-2))] px-1.5 py-1">
+      <button type="button" aria-label="Back" title="Back" disabled={!nav.canGoBack} onClick={nav.back} className={buttonClass(coarse)}>
+        <ArrowLeft className="size-4" />
+      </button>
+      <button type="button" aria-label="Forward" title="Forward" disabled={!nav.canGoForward} onClick={nav.forward} className={buttonClass(coarse)}>
+        <ArrowRight className="size-4" />
+      </button>
+      <button type="button" aria-label="Up one level" title="Up" disabled={!slice.parent} onClick={nav.up} className={buttonClass(coarse)}>
+        <ArrowUp className="size-4" />
+      </button>
+      <button type="button" aria-label="Refresh" title="Refresh" onClick={nav.refresh} className={buttonClass(coarse)}>
+        <RefreshCw className={cn("size-4", slice.loading && "animate-spin")} />
+      </button>
+
+      <div className="flex min-w-[8rem] flex-1 items-center gap-1 rounded border border-border bg-panel px-1">
+        {editingPath ? (
+          <input
+            autoFocus
+            aria-label="Path"
+            value={draftPath}
+            onChange={(e) => setDraftPath(e.target.value)}
+            onBlur={() => setEditingPath(false)}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === "Enter") { nav.go(draftPath.trim()); setEditingPath(false); }
+              else if (e.key === "Escape") { setDraftPath(slice.path); setEditingPath(false); }
+            }}
+            className="min-w-0 flex-1 bg-transparent py-1 font-mono text-xs text-text outline-none"
+          />
+        ) : (
+          <ExplorerBreadcrumb crumbs={slice.breadcrumbs} onNavigate={nav.go} sep={slice.sep} className="flex-1 overflow-hidden py-0.5" />
+        )}
+        <button
+          type="button"
+          aria-label={editingPath ? "Show breadcrumb" : "Edit path"}
+          title={editingPath ? "Show breadcrumb" : "Edit path"}
+          onClick={() => setEditingPath((v) => !v)}
+          className={buttonClass(coarse)}
+        >
+          <PencilLine className="size-3.5" />
+        </button>
+      </div>
+
+      <div className="flex items-center gap-1 rounded border border-border bg-panel px-1">
+        <Search className="size-3.5 shrink-0 text-text-subtle" />
+        <input
+          aria-label="Filter entries"
+          placeholder="Filter"
+          value={slice.filter}
+          onChange={(e) => patch(windowId, { filter: e.target.value })}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Escape") patch(windowId, { filter: "" });
+          }}
+          className="w-24 min-w-0 bg-transparent py-1 text-xs text-text outline-none placeholder:text-text-subtle"
+        />
+        {slice.filter && (
+          <button type="button" aria-label="Clear filter" onClick={() => patch(windowId, { filter: "" })} className={buttonClass(coarse)}>
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+
+      {AVAILABLE_VIEW_MODES.length > 1 &&
+        AVAILABLE_VIEW_MODES.map((mode) => {
+          const Icon = VIEW_ICON[mode];
+          return (
+            <button
+              key={mode}
+              type="button"
+              aria-label={VIEW_LABEL[mode]}
+              title={VIEW_LABEL[mode]}
+              aria-pressed={viewMode === mode}
+              onClick={() => setPrefs({ viewMode: mode })}
+              className={cn(buttonClass(coarse), viewMode === mode && "bg-accent-wash text-primary")}
+            >
+              <Icon className="size-4" />
+            </button>
+          );
+        })}
+
+      <ExplorerSortMenu coarse={coarse} />
+
+      <button
+        type="button"
+        aria-label={showHidden ? "Hide hidden files" : "Show hidden files"}
+        title={showHidden ? "Hide hidden files" : "Show hidden files"}
+        aria-pressed={showHidden}
+        onClick={() => setPrefs({ showHidden: !showHidden })}
+        className={cn(buttonClass(coarse), showHidden && "bg-accent-wash text-primary")}
+      >
+        {showHidden ? <Eye className="size-4" /> : <EyeOff className="size-4" />}
+      </button>
+    </div>
+  );
+}

package/src/web/components/os-explorer/explorer-window-content.tsx

@@ -0,0 +1,36 @@
+/**
+ * `WINDOW_CONTENT["explorer"]` — the adapter between the generic floating-window frame and
+ * the explorer body.
+ *
+ * It owns only two things the body should not care about: turning the window payload into
+ * a starting path, and dropping the window's slice when the window closes.
+ */
+
+import { useEffect } from "react";
+import type { WindowContentProps } from "@/components/floating-window/window-content-registry";
+import { ExplorerBody } from "./explorer-body";
+import { useExplorerStore } from "./explorer-store";
+import { cachedHomedir, useHostInfo } from "./use-host-info";
+
+export default function ExplorerWindowContent({ id, payload }: WindowContentProps) {
+  const { host, error } = useHostInfo();
+  const discard = useExplorerStore((s) => s.discard);
+
+  // A window's state is per-window; leaving it behind would leak one slice per open.
+  useEffect(() => () => discard(id), [id, discard]);
+
+  const requested = typeof payload?.path === "string" ? payload.path : "";
+  // Without a path (or before host info lands) there is nothing safe to browse: "/" does
+  // not exist on Windows, so wait for the home directory rather than showing a bogus error.
+  const initialPath = requested || cachedHomedir() || host?.homedir || "";
+
+  if (!initialPath) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-xs text-text-2">
+        {error ? `Could not reach the host: ${error}` : "Loading…"}
+      </div>
+    );
+  }
+
+  return <ExplorerBody windowId={id} initialPath={initialPath} />;
+}