@hienlh/ppm 0.21.0 → 0.22.1

package/src/web/components/explorer/tree-node.tsx

@@ -13,17 +13,11 @@ import { useShallow } from "zustand/react/shallow";
 import { useFileStore, getVisiblePaths, absoluteProjectPath, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
-import { useCompareStore } from "@/stores/compare-store";
 import { useGitStatusStore, GIT_STATUS_COLORS, type GitFileStatus } from "@/stores/git-status-store";
 import { cn } from "@/lib/utils";
-import {
-  ContextMenu,
-  ContextMenuTrigger,
-} from "@/components/ui/adaptive-context-menu";
 import { DROP_TARGET_CLASS } from "@/components/os-explorer/dnd/drop-target-style";
 import type { DropRunner } from "@/components/os-explorer/dnd/entry-drop-executor";
 import { FileIcon } from "@/lib/file-icons";
-import { TreeNodeContextMenu } from "./tree-node-context-menu";
 import { useTreeRowDnd } from "./use-tree-row-dnd";
 import type { NodeRow } from "./flatten-visible-tree";
 
@@ -39,7 +33,7 @@ export interface TreeRowProps {
 }
 
 export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFileDrop, onFileOpen, transferRun }: TreeRowProps) {
-  const { node, effectiveNode, displayName, depth } = row;
+  const { node, depth } = row;
   const { expandedPaths, loadedPaths, inflight, toggleExpand, selectedFiles, toggleFileSelect, clipboard, focusedPath, setFocusedPath } = useFileStore(
     useShallow((s) => ({
       expandedPaths: s.expandedPaths,
@@ -55,7 +49,6 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
   );
   const openTab = useTabStore((s) => s.openTab);
   const projectRoot = useProjectStore((s) => s.activeProject?.path);
-  const compareSelection = useCompareStore((s) => s.selection);
   const isDir = node.type === "directory";
   // Git decoration: per-file and per-folder status
   const gitStatus: GitFileStatus | undefined = useGitStatusStore((s) => {
@@ -72,8 +65,8 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     clipboard?.operation === "cut" &&
     projectRoot != null &&
     clipboard.paths.includes(absoluteProjectPath(projectRoot, node.path));
-  const isFocused = focusedPath === node.path || focusedPath === effectiveNode.path;
-  const isLoadingChildren = isDir && isExpanded && !loadedPaths.has(effectiveNode.path) && inflight.has(effectiveNode.path);
+  const isFocused = focusedPath === node.path;
+  const isLoadingChildren = isDir && isExpanded && !loadedPaths.has(node.path) && inflight.has(node.path);
   const rowRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -93,7 +86,7 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     if (e.shiftKey && focusedPath != null) {
       const paths = getVisiblePaths();
       const fromIdx = paths.indexOf(focusedPath);
-      const toIdx = paths.indexOf(effectiveNode.path);
+      const toIdx = paths.indexOf(node.path);
       if (fromIdx >= 0 && toIdx >= 0) {
         const start = Math.min(fromIdx, toIdx);
         const end = Math.max(fromIdx, toIdx);
@@ -124,7 +117,6 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     path: node.path,
     name: node.name,
     isDir,
-    effectivePath: effectiveNode.path,
     isSelected,
     selectedFiles,
     isExpanded,
@@ -137,64 +129,72 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
 
   return (
     <div {...dnd.containerHandlers}>
-      <ContextMenu>
-        <ContextMenuTrigger asChild>
-          <button
-            ref={rowRef}
-            {...dnd.entrySource}
-            onClick={handleClick}
-            className={cn(
-              "flex items-center w-full gap-1.5 px-2 py-1 rounded-[var(--rad-sm)] text-[13px]",
-              "min-h-[32px] md:min-h-[26px] hover:bg-surface-elevated transition-colors text-left",
-              "select-none",
-              (isIgnored || isCut) && "opacity-40",
-              isFocused && "bg-surface-elevated",
-              isSelected && "bg-accent-wash",
-              dnd.isDragOver && DROP_TARGET_CLASS,
-            )}
-            style={{ paddingLeft: `${depth * 16 + 8}px` }}
-          >
-            {isDir ? (
-              isLoadingChildren ? (
-                <Loader2 className="size-3.5 shrink-0 text-text-subtle animate-spin" />
-              ) : isExpanded ? (
-                <ChevronDown className="size-3.5 shrink-0 text-text-subtle" />
-              ) : (
-                <ChevronRight className="size-3.5 shrink-0 text-text-subtle" />
-              )
-            ) : (
-              <span className="w-3.5 shrink-0" />
-            )}
-            <FileIcon
-              name={node.name}
-              kind={isDir ? "directory" : "file"}
-              open={isExpanded}
-            />
-            <span
-              className={cn(
-                "truncate",
-                gitColor ?? (isSelected ? "text-text" : isDir && isExpanded ? "text-text font-medium" : "text-text-2"),
-              )}
-            >
-              {displayName}
-            </span>
-            {gitStatus && !isDir && (
-              <span className={cn("text-[10px] ml-auto shrink-0 font-mono", gitColor)}>
-                {gitStatus}
-              </span>
-            )}
-          </button>
-        </ContextMenuTrigger>
-        <TreeNodeContextMenu
-          node={node}
-          isDir={isDir}
-          projectName={projectName}
-          selectedFiles={selectedFiles}
-          compareSelection={compareSelection}
-          clipboard={clipboard}
-          onAction={onAction}
+      <button
+        ref={rowRef}
+        {...dnd.entrySource}
+        onClick={handleClick}
+        className={cn(
+          // `leading-[18px]` is what makes the row exactly as tall as the
+          // virtualizer's `estimateSize` says it is. Without it the 13px text
+          // inherits line-height 1.5 — a 19.5px line box, so the row measured
+          // 27.5px against an estimate of 26, and every row scrolling into
+          // view corrected the total size underneath the scrollbar.
+          "flex items-center w-full gap-1.5 px-2 py-1 rounded-[var(--rad-sm)] text-[13px] leading-[18px]",
+          "min-h-[32px] md:min-h-[26px] hover:bg-surface-elevated transition-colors text-left",
+          "select-none",
+          // A gitignored row is dimmed by `text-text-dim` on its label, not by
+          // fading the whole row: an alpha blend is not symmetric between light
+          // and dark, and at 40% a gitignored name measured 1.72–1.89:1 against
+          // the panel on the three light themes (2.07–2.23:1 on the dark ones) —
+          // under a 3:1 floor either way, and on light past the point where it
+          // can be read at all. The icon keeps its colours for the same reason:
+          // it is full-colour artwork with no `currentColor`, so an opacity on it
+          // is that same fade to the background. `cut` is a momentary state and
+          // stays a fade.
+          isCut && "opacity-40",
+          isFocused && "bg-surface-elevated",
+          isSelected && "bg-accent-wash",
+          dnd.isDragOver && DROP_TARGET_CLASS,
+        )}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+      >
+        {isDir ? (
+          isLoadingChildren ? (
+            <Loader2 className="size-3.5 shrink-0 text-text-subtle animate-spin" />
+          ) : isExpanded ? (
+            <ChevronDown className="size-3.5 shrink-0 text-text-subtle" />
+          ) : (
+            <ChevronRight className="size-3.5 shrink-0 text-text-subtle" />
+          )
+        ) : (
+          <span className="w-3.5 shrink-0" />
+        )}
+        <FileIcon
+          name={node.name}
+          kind={isDir ? "directory" : "file"}
+          open={isExpanded}
         />
-      </ContextMenu>
+        <span
+          className={cn(
+            "truncate",
+            gitColor ??
+              (isSelected
+                ? "text-text"
+                : isIgnored
+                  ? "text-text-dim"
+                  : isDir && isExpanded
+                    ? "text-text font-medium"
+                    : "text-text-2"),
+          )}
+        >
+          {node.name}
+        </span>
+        {gitStatus && !isDir && (
+          <span className={cn("text-[10px] ml-auto shrink-0 font-mono", gitColor)}>
+            {gitStatus}
+          </span>
+        )}
+  </button>
     </div>
   );
 });

package/src/web/components/explorer/use-tree-row-dnd.ts

@@ -61,8 +61,6 @@ export interface TreeRowDndOptions {
   path: string;
   name: string;
   isDir: boolean;
-  /** Flat rows: dropping on a file targets its parent directory. */
-  effectivePath: string;
   isSelected: boolean;
   selectedFiles: string[];
   isExpanded: boolean;
@@ -88,7 +86,7 @@ export interface TreeRowDnd {
 
 export function useTreeRowDnd(options: TreeRowDndOptions): TreeRowDnd {
   const {
-    path, name, isDir, effectivePath, isSelected, selectedFiles, isExpanded,
+    path, name, isDir, isSelected, selectedFiles, isExpanded,
     projectName, projectRoot, toggleExpand, onFileDrop, transferRun,
   } = options;
 
@@ -111,7 +109,8 @@ export function useTreeRowDnd(options: TreeRowDndOptions): TreeRowDnd {
     extraData: { [TREE_LEGACY_DRAG_MIME]: isDir ? `${path}/` : path },
   });
 
-  const dropTargetDir = isDir ? effectivePath : parentDirOf(path);
+  // Dropping on a file targets its parent directory.
+  const dropTargetDir = isDir ? path : parentDirOf(path);
   const dropTargetAbsolute = isDir && projectRoot ? absoluteProjectPath(projectRoot, dropTargetDir) : null;
 
   const entryTarget = useEntryDropTarget({

package/src/web/components/extensions/extension-tree-view.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState, useRef, useMemo } from "react";
-import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Plus, Search } from "@/lib/icons";
+import { ChevronRight, ChevronDown, RefreshCw } from "@/lib/icons";
 import { useExtensionStore, type TreeItemUI, type TreeItemAction } from "@/stores/extension-store";
+import { extensionIcon } from "@/lib/extension-icons";
 import { cn } from "@/lib/utils";
 
 interface ExtensionTreeViewProps {
@@ -22,14 +23,6 @@ function executeCommand(command: string, args?: unknown[]) {
   }));
 }
 
-const ACTION_ICONS: Record<string, React.ElementType> = {
-  refresh: RefreshCw,
-  edit: Pencil,
-  trash: Trash2,
-  plus: Plus,
-  search: Search,
-};
-
 /** Generic TreeView renderer for extension-contributed tree data */
 export function ExtensionTreeView({ viewId, className }: ExtensionTreeViewProps) {
   const items = useExtensionStore((s) => s.treeViews[viewId]) ?? [];
@@ -75,7 +68,7 @@ export function ExtensionTreeView({ viewId, className }: ExtensionTreeViewProps)
         <div className="flex items-center gap-0.5">
           {viewMeta.headerActions.map((action) => {
             const iconName = action.icon ?? inferIcon(action.command);
-            const Icon = ACTION_ICONS[iconName] ?? RefreshCw;
+            const Icon = extensionIcon(iconName) ?? RefreshCw;
             return (
               <button
                 key={action.command}
@@ -213,7 +206,7 @@ function TreeNode({ item, depth, viewId }: { item: TreeItemUI; depth: number; vi
 
 function ActionButton({ action }: { action: TreeItemAction }) {
   const [spinning, setSpinning] = useState(false);
-  const Icon = ACTION_ICONS[action.icon] ?? RefreshCw;
+  const Icon = extensionIcon(action.icon) ?? RefreshCw;
   const isTrash = action.icon === "trash";
 
   const handleClick = useCallback((e: React.MouseEvent) => {

package/src/web/components/git/git-status-panel.tsx

@@ -16,6 +16,7 @@ import {
   GitBranch,
   Check,
   SquareDashedMousePointer,
+  FileDiff,
 } from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { api, projectUrl } from "@/lib/api-client";
@@ -506,6 +507,30 @@ export function GitStatusPanel({ metadata, tabId, onNavigate }: GitStatusPanelPr
         >
           <GitBranch className="size-3.5" />
         </Button>
+        {/*
+          Review the whole branch at once, rather than one commit at a time.
+          Core rather than the Git Graph extension's compare panel: a review is
+          the one git surface that wants Monaco, and a webview cannot have it.
+          The tab picks its own defaults — main/master against the current
+          branch — so there is nothing to pass here.
+        */}
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          onClick={() => {
+            openTab({
+              type: "branch-review",
+              title: "Branch Review",
+              projectId: projectName ?? null,
+              closable: true,
+              metadata: { projectName },
+            });
+            onNavigate?.();
+          }}
+          title="Review this branch against another"
+        >
+          <FileDiff className="size-3.5" />
+        </Button>
         <Button
           variant="ghost"
           size="icon-xs"

package/src/web/components/layout/command-palette.tsx

@@ -3,19 +3,15 @@ import {
   Terminal,
   MessageSquare,
   GitCommitHorizontal,
-  GitBranch,
   Puzzle,
   Settings,
   Database,
   Search,
-  FileCode,
   FilePlus,
   FolderOpen,
   Loader2,
   Globe,
   Mic,
-  RefreshCw,
-  Plus,
   Columns2,
   Cloud,
   AppWindow,
@@ -33,6 +29,7 @@ import { useIsTouchOnly } from "@/hooks/use-is-touch-only";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { useFileStore, type FileNode } from "@/stores/file-store";
 import { useExtensionStore } from "@/stores/extension-store";
+import { extensionIcon } from "@/lib/extension-icons";
 import { useCompareStore } from "@/stores/compare-store";
 import { usePanelStore } from "@/stores/panel-store";
 import { api } from "@/lib/api-client";
@@ -61,19 +58,6 @@ interface CommandItem {
 
 const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
 
-/** Map extension icon string names to lucide components */
-const EXT_ICON_MAP: Record<string, React.ElementType> = {
-  "git-branch": GitBranch,
-  "database": Database,
-  "refresh": RefreshCw,
-  "plus": Plus,
-  "terminal": Terminal,
-  "settings": Settings,
-  "search": Search,
-  "file-code": FileCode,
-  "globe": Globe,
-};
-
 /** Format a keybinding combo for display (e.g. "Mod+G" → "⌘G" on Mac, "Ctrl+G" on others) */
 function formatShortcut(combo: string): string {
   if (!combo) return "";
@@ -296,7 +280,7 @@ export function CommandPalette({ open, onClose, initialQuery = "" }: { open: boo
         id: `ext:${cmd.command}`,
         label: cmd.title,
         hint: cmd.category,
-        icon: (cmd.icon && EXT_ICON_MAP[cmd.icon]) || Puzzle,
+        icon: extensionIcon(cmd.icon) ?? Puzzle,
         group: "action" as const,
         keywords: `extension ${cmd.command} ${cmd.category ?? ""}`,
         shortcut: shortcutCombo ? formatShortcut(shortcutCombo) : undefined,

package/src/web/components/layout/draggable-tab.tsx

@@ -119,8 +119,10 @@ export function DraggableTab({
          * an indicator that looked broken rather than animated. `MessageCircle` is
          * `chat-empty`: the same bubble, nothing in it. Safe to swap unconditionally
          * because `isStreaming` is only ever set for a chat tab (both tab-bar.tsx and
-         * mobile-tab-switcher-sheet.tsx read `sessionId` only when `type === "chat"`),
-         * whose icon is that same bubble.
+         * mobile-tab-switcher-sheet.tsx read `sessionId` only when `type === "chat"`).
+         * A chat tab at rest now shows its provider's logo, so this is a visible
+         * change of shape — deliberately so: the dots can no more sit on a logo
+         * than they could sit on `chat`'s message lines.
          */}
         {isStreaming ? <MessageCircle className="size-4" /> : <Icon className="size-4" />}
         {isStreaming ? (

package/src/web/components/layout/nav-section-rail.tsx

@@ -22,6 +22,15 @@ import { openBugReportPopup } from "@/lib/report-bug";
 import { isMobileDevice } from "@/hooks/use-is-mobile";
 import { cn } from "@/lib/utils";
 
+/**
+ * The rail's own hover label, standing in for a tooltip on an icon-only button.
+ *
+ * `hover-label-delayed` (globals.css) is what keeps it from firing as the pointer merely
+ * sweeps down the rail, the same wait the shared tooltip takes.
+ */
+const HOVER_LABEL_CLASS =
+  "pointer-events-none absolute left-[calc(100%+8px)] z-50 hidden can-hover:group-hover:block hover-label-delayed whitespace-nowrap rounded-md border border-border bg-surface-elevated px-2 py-1 text-xs font-medium text-foreground shadow-[0_4px_12px_rgba(0,0,0,.4)]";
+
 function Badge({ count }: { count: number }) {
   return (
     <span className="absolute top-1 right-1 min-w-[16px] h-4 px-1 flex items-center justify-center rounded-full bg-primary text-primary-foreground text-[10px] font-medium leading-none">
@@ -60,7 +69,7 @@ function NavItem({ icon: Icon, label, active, badge, featureBadge, onClick, drag
       {badge != null && badge > 0 && <Badge count={badge} />}
       <FeatureBadge id={featureBadge} variant="corner" />
       {/* hover tooltip (pointer devices only) */}
-      <span className="pointer-events-none absolute left-[calc(100%+8px)] z-50 hidden can-hover:group-hover:block whitespace-nowrap rounded-md border border-border bg-surface-elevated px-2 py-1 text-xs font-medium text-foreground shadow-[0_4px_12px_rgba(0,0,0,.4)]">
+      <span className={HOVER_LABEL_CLASS}>
         {label}
       </span>
     </button>
@@ -84,7 +93,7 @@ function FooterUtil({ icon: Icon, label, onClick, active, featureBadge }: {
     >
       <Icon className="size-4" />
       <FeatureBadge id={featureBadge} variant="corner" />
-      <span className="pointer-events-none absolute left-[calc(100%+8px)] z-50 hidden can-hover:group-hover:block whitespace-nowrap rounded-md border border-border bg-surface-elevated px-2 py-1 text-xs font-medium text-foreground shadow-[0_4px_12px_rgba(0,0,0,.4)]">
+      <span className={HOVER_LABEL_CLASS}>
         {label}
       </span>
     </button>
@@ -202,7 +211,7 @@ export const NavSectionRail = memo(function NavSectionRail({ className }: { clas
           )}
         >
           <Cloud className="size-4" />
-          <span className="pointer-events-none absolute left-[calc(100%+8px)] z-50 hidden can-hover:group-hover:block whitespace-nowrap rounded-md border border-border bg-surface-elevated px-2 py-1 text-xs font-medium text-foreground shadow-[0_4px_12px_rgba(0,0,0,.4)]">
+          <span className={HOVER_LABEL_CLASS}>
             Cloud &amp; Share
           </span>
         </button>

package/src/web/components/layout/status-bar.tsx

@@ -27,8 +27,10 @@ export const StatusBar = memo(function StatusBar() {
     .sort((a, b) => b.priority - a.priority);
 
   return (
-    <div className="hidden md:flex items-center justify-between h-[26px] px-3.5 bg-panel border-t border-border-soft text-[11px] font-mono text-text-3 select-none shrink-0">
-      <div className="flex items-center gap-3 min-w-0">
+    // `@container`: items compact on the bar's own width, which the sidebar decides, not the viewport.
+    <div className="@container hidden md:flex items-center justify-between gap-3 h-[26px] px-3.5 bg-panel border-t border-border-soft text-[11px] font-mono text-text-3 select-none shrink-0">
+      {/* The side that gives way: the branch name ellipsizes, then the group clips — never paints over the right. */}
+      <div className="flex items-center gap-3 min-w-0 overflow-hidden">
         {/* Git: branch · ahead/behind · synced (design status bar). */}
         <GitStatus />
         {/* Errors/warnings across every open file — VS Code's leftmost item. */}
@@ -39,7 +41,8 @@ export const StatusBar = memo(function StatusBar() {
         {/* Native panel toggle — the sole dock toggle (sidebar/tab-bar toggles removed). */}
         <DockToggle />
       </div>
-      <div className="flex items-center gap-3 min-w-0">
+      {/* Never shrinks: squeezed, CPU/MEM was its only shrinkable item and wrapped onto two lines. */}
+      <div className="flex items-center gap-3 shrink-0">
         {/* Screen-awake marker — only while a wake lock is actually held. */}
         <WakeLockStatusBarItem />
         {/* CPU/MEM moved here from the sidebar resource strip. */}
@@ -66,19 +69,20 @@ const GitStatus = memo(function GitStatus() {
   const synced = !!tracking && ahead === 0 && behind === 0;
 
   return (
-    <span className="flex items-center gap-2 min-w-0 shrink-0">
+    <span className="flex items-center gap-2 min-w-0">
       <span className="flex items-center gap-1 text-primary min-w-0" title={tracking ? `Tracking ${tracking}` : "No upstream"}>
         <GitBranch className="size-3 shrink-0" />
         <span className="truncate max-w-[140px]">{branch}</span>
       </span>
+      {/* On a bar under 36rem the counts give way, so the branch name stays readable. */}
       {(ahead > 0 || behind > 0) && (
-        <span className="flex items-center gap-1.5 shrink-0">
+        <span className="flex items-center gap-1.5 shrink-0 @max-xl:hidden">
           {ahead > 0 && <span className="flex items-center gap-0.5"><ArrowUp className="size-3" />{ahead}</span>}
           {behind > 0 && <span className="flex items-center gap-0.5"><ArrowDown className="size-3" />{behind}</span>}
         </span>
       )}
       {synced && (
-        <span className="flex items-center gap-1 text-success shrink-0">
+        <span className="flex items-center gap-1 text-success shrink-0 @max-xl:hidden">
           <Check className="size-3" />synced
         </span>
       )}

package/src/web/components/layout/tab-content.tsx

@@ -39,6 +39,11 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
       default: m.DiffViewer,
     })),
   ),
+  "branch-review": lazy(() =>
+    import("@/components/branch-review/branch-review-tab").then((m) => ({
+      default: m.BranchReviewTab,
+    })),
+  ),
   settings: lazy(() =>
     import("@/components/settings/settings-tab").then((m) => ({
       default: m.SettingsTab,

package/src/web/components/layout/tab-pool.tsx

@@ -34,6 +34,7 @@ const TAB_COMPONENTS: Record<TabType, React.LazyExoticComponent<React.ComponentT
   sqlite: lazy(() => import("@/components/sqlite/sqlite-viewer").then((m) => ({ default: m.SqliteViewer }))),
   postgres: lazy(() => import("@/components/postgres/postgres-viewer").then((m) => ({ default: m.PostgresViewer }))),
   "git-diff": lazy(() => import("@/components/editor/diff-viewer").then((m) => ({ default: m.DiffViewer }))),
+  "branch-review": lazy(() => import("@/components/branch-review/branch-review-tab").then((m) => ({ default: m.BranchReviewTab }))),
   settings: lazy(() => import("@/components/settings/settings-tab").then((m) => ({ default: m.SettingsTab }))),
   extension: lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),
   "extension-webview": lazy(() => import("@/components/extensions/extension-webview").then((m) => ({ default: m.ExtensionWebview }))),

package/src/web/components/layout/upgrade-button.tsx

@@ -281,7 +281,11 @@ export function UpgradeButton({ align = "right" }: { align?: "left" | "right" })
         )}
       >
         {hasUpdate && <ArrowUpCircle className="size-3" />}
-        <span>{hasUpdate ? `New version · v${effectiveAvailable}` : `v${current}`}</span>
+        <span>
+          {/* Dropped on a status bar under 48rem (its `@container`); the icon and colour still say "update". */}
+          {hasUpdate && <span className="@max-3xl:hidden">New version · </span>}
+          v{hasUpdate ? effectiveAvailable : current}
+        </span>
       </button>
 
       {open && current && (

package/src/web/components/remote-desktop/remote-desktop-clipboard-client.ts

@@ -0,0 +1,67 @@
+/**
+ * The browser half of clipboard sync: which key combos mean copy/paste, and how to put text on
+ * the *client's* clipboard when `navigator.clipboard` is not there.
+ *
+ * `navigator.clipboard` is **secure-context only**, and PPM is routinely reached over plain HTTP
+ * on a LAN — so on the common deployment the async clipboard API does not exist at all and the
+ * host→client direction has to fall back to a real user gesture. Even in a secure context
+ * `writeText` rejects when the document is not focused, so the fallback is not dead code there.
+ */
+
+/** Ctrl/Cmd+V. This is the one keydown the input capture must *not* `preventDefault()`:
+ *  cancelling that keydown cancels the browser's paste default action, and with it the `paste`
+ *  event — measured, not assumed (with the guard removed the event simply never fires). */
+export function isPasteCombo(e: Pick<KeyboardEvent, "code" | "ctrlKey" | "metaKey">): boolean {
+  return e.code === "KeyV" && (e.ctrlKey || e.metaKey);
+}
+
+/** Ctrl/Cmd+C or +X — forwarded to the host normally; the client only uses this as the cue to
+ *  ask for the host's clipboard a moment later. */
+export function isCopyCombo(e: Pick<KeyboardEvent, "code" | "ctrlKey" | "metaKey">): boolean {
+  return (e.code === "KeyC" || e.code === "KeyX") && (e.ctrlKey || e.metaKey);
+}
+
+/** How long to wait after forwarding a copy combo before asking the host for its clipboard.
+ *  The keystroke still has to reach the host, be handled by the focused app, and land on the
+ *  X/Win32 clipboard; reading too early just reads the previous contents. */
+export const CLIPBOARD_READ_DELAY_MS = 350;
+
+/** Put `text` on the client's clipboard from inside a click handler, without a secure context.
+ *  Must be called synchronously from a user gesture — `execCommand` is ignored otherwise. */
+export function copyTextWithGesture(text: string): boolean {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  // Off-screen but still rendered and selectable: `display:none` / `visibility:hidden` give an
+  // empty selection, and `execCommand("copy")` then copies *nothing* and still returns true.
+  ta.style.cssText = "position:fixed;top:0;left:-9999px;opacity:0";
+  // iOS Safari refuses to select a readonly textarea, so it is left writable and made
+  // non-editable via `inputMode`/`readOnly`-free selection instead of a `readonly` attribute.
+  ta.setAttribute("aria-hidden", "true");
+  document.body.appendChild(ta);
+  const previous = document.activeElement as HTMLElement | null;
+  let ok = false;
+  try {
+    ta.focus({ preventScroll: true });
+    ta.setSelectionRange(0, text.length); // iOS: `select()` alone is not enough
+    ta.select();
+    ok = document.execCommand("copy");
+  } catch {
+    ok = false;
+  }
+  ta.remove();
+  // Give focus back, or the remote viewer stops receiving keystrokes after one manual copy.
+  try { previous?.focus({ preventScroll: true }); } catch { /* element went away */ }
+  return ok;
+}
+
+/** Try the modern API first, falling back to reporting "needs a gesture" to the caller so it can
+ *  show a button. Never throws. */
+export async function writeClientClipboard(text: string): Promise<boolean> {
+  try {
+    if (!navigator.clipboard?.writeText) return false;
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false; // insecure origin, denied permission, or an unfocused document
+  }
+}