@hienlh/ppm 0.21.0 → 0.22.0

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/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/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
+  }
+}

package/src/web/components/remote-desktop/remote-desktop-clipboard-notice.tsx

@@ -0,0 +1,127 @@
+/**
+ * The one piece of clipboard UI, shared by the desktop window and the mobile viewer.
+ *
+ * It exists because both failure modes of clipboard sync are otherwise *silent*: text the host
+ * copied cannot be written to this device without a secure context (PPM is usually plain HTTP on
+ * a LAN), and a host with no `xclip`/`wl-copy` installed simply does nothing. One is fixed by a
+ * click, the other by a command — so this renders whichever applies and nothing at all when
+ * sync is working.
+ */
+import { useState } from "react";
+import { Clipboard, ClipboardCheck, TerminalSquare, X } from "@/lib/icons";
+import { runInTerminal } from "@/lib/run-in-terminal";
+import { cn } from "@/lib/utils";
+import { copyTextWithGesture } from "./remote-desktop-clipboard-client";
+import type { RequirementAction } from "./use-remote-desktop-readiness";
+
+export interface RemoteDesktopClipboardNoticeProps {
+  /** Host text that needs a real click to reach this device's clipboard. */
+  pendingText: string | null;
+  onDismiss: () => void;
+  /** Set when the user tried to paste and the *host* has no clipboard tool. */
+  missingToolAction?: RequirementAction | null;
+  onDismissMissingTool?: () => void;
+  /** Override the bar's placement. The desktop window floats it over the video; the mobile
+   *  viewer puts it in normal flow above the toolbar, which the on-screen keyboard already
+   *  lifts — floating it there would land it behind the toolbar instead. */
+  positionClassName?: string;
+}
+
+export function RemoteDesktopClipboardNotice({
+  pendingText,
+  onDismiss,
+  missingToolAction,
+  onDismissMissingTool,
+  positionClassName = "absolute bottom-2 left-1/2 max-w-[92%] -translate-x-1/2",
+}: RemoteDesktopClipboardNoticeProps) {
+  const [copyFailed, setCopyFailed] = useState(false);
+
+  if (pendingText !== null) {
+    const onCopy = () => {
+      // Synchronous inside the click: `execCommand` is ignored outside a user gesture.
+      if (copyTextWithGesture(pendingText)) onDismiss();
+      else setCopyFailed(true);
+    };
+    return (
+      <NoticeBar onDismiss={onDismiss} testId="remote-desktop-clipboard-pending" positionClassName={positionClassName}>
+        <ClipboardCheck className="size-4 shrink-0 text-emerald-400" />
+        <span className="min-w-0 flex-1 truncate">
+          {copyFailed ? "Could not copy — select the text manually:" : "Copied on the host:"}
+          <span className="ml-1 text-white/60">{preview(pendingText)}</span>
+        </span>
+        <button
+          type="button"
+          onClick={onCopy}
+          className="min-h-8 shrink-0 rounded bg-white/15 px-2.5 text-xs hover:bg-white/25"
+          data-testid="remote-desktop-clipboard-copy"
+        >
+          Copy here
+        </button>
+      </NoticeBar>
+    );
+  }
+
+  if (missingToolAction !== undefined && missingToolAction !== null) {
+    return (
+      <NoticeBar
+        onDismiss={onDismissMissingTool ?? (() => {})}
+        testId="remote-desktop-clipboard-missing-tool"
+        positionClassName={positionClassName}
+      >
+        <Clipboard className="size-4 shrink-0 text-amber-300" />
+        <span className="min-w-0 flex-1">The host has no clipboard tool installed.</span>
+        {missingToolAction.kind === "terminal" && (
+          <button
+            type="button"
+            onClick={() => runInTerminal(missingToolAction.command)}
+            title={missingToolAction.command}
+            className="inline-flex min-h-8 shrink-0 items-center gap-1.5 rounded bg-white/15 px-2.5 text-xs hover:bg-white/25"
+          >
+            <TerminalSquare className="size-3.5" /> {missingToolAction.label}
+          </button>
+        )}
+      </NoticeBar>
+    );
+  }
+
+  return null;
+}
+
+/** Bottom-centre by default, so it never covers the corner controls. */
+function NoticeBar({
+  children,
+  onDismiss,
+  testId,
+  positionClassName,
+}: {
+  children: React.ReactNode;
+  onDismiss: () => void;
+  testId: string;
+  positionClassName: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "z-50 flex items-center gap-2 rounded-lg border border-white/10 bg-black/85 px-3 py-2 text-xs text-white shadow-lg",
+        positionClassName,
+      )}
+      data-testid={testId}
+    >
+      {children}
+      <button
+        type="button"
+        onClick={onDismiss}
+        aria-label="Dismiss"
+        className="flex size-8 shrink-0 items-center justify-center rounded text-white/60 hover:bg-white/10 hover:text-white"
+      >
+        <X className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+/** Enough to recognise the text, on one line — a pasted stack trace must not take the screen. */
+function preview(text: string): string {
+  const oneLine = text.replace(/\s+/g, " ").trim();
+  return oneLine.length > 60 ? `${oneLine.slice(0, 60)}…` : oneLine;
+}

package/src/web/components/remote-desktop/remote-desktop-codec-labels.ts

@@ -0,0 +1,28 @@
+/**
+ * Human names for ffmpeg's H.264 encoders, for the codec picker.
+ *
+ * The wire values are ffmpeg's own encoder names, because that is what the host probes and
+ * spawns — but `h264_qsv` says nothing to anyone who has not read the capture code, and the
+ * choice a user is actually making is "the GPU or the CPU". Unknown names are shown verbatim
+ * rather than hidden: a newer ffmpeg gaining an encoder should add a row here, and until it
+ * does the picker must still be able to name what the host is running.
+ */
+const CODEC_LABELS: Record<string, string> = {
+  h264_nvenc: "NVIDIA NVENC",
+  h264_qsv: "Intel QuickSync",
+  h264_vaapi: "VAAPI (GPU)",
+  h264_amf: "AMD AMF",
+  h264_videotoolbox: "Apple VideoToolbox",
+  libx264: "Software (x264)",
+};
+
+export function codecLabel(encoder: string): string {
+  return Object.hasOwn(CODEC_LABELS, encoder) ? CODEC_LABELS[encoder]! : encoder;
+}
+
+/** Whether this encoder runs on the GPU — the part that matters for "why is my CPU at 100%".
+ *  Everything except libx264 is hardware; the list is the encoders, not a name pattern, so a
+ *  future software encoder cannot be mislabelled by matching `h264_*`. */
+export function isHardwareCodec(encoder: string): boolean {
+  return encoder !== "libx264" && Object.hasOwn(CODEC_LABELS, encoder);
+}