@hienlh/ppm 0.21.0 → 0.22.0

package/src/web/components/remote-desktop/use-remote-input-capture.ts

@@ -2,16 +2,31 @@
  * Captures pointer + keyboard on the canvas and forwards them as JSON over the caller's WS.
  * `code` (physical key, layout-independent) is sent for keys, never `key` — the host maps
  * `code` → VK, so a client-side layout mismatch can't inject the wrong character.
+ *
+ * Clipboard is the one exception to "forward every key": Ctrl/Cmd+V is swallowed here and
+ * replaced by the `paste` event, because `preventDefault()` on that keydown is exactly what
+ * cancels the browser's paste default action — so forwarding it would deliver the keystroke to
+ * the host with the host's *old* clipboard and never yield the client's text at all.
  */
 import { useEffect, useCallback } from "react";
 import { fractionFromPoint } from "./remote-desktop-coords";
+import { isCopyCombo, isPasteCombo } from "./remote-desktop-clipboard-client";
 
 type PointerButton = "left" | "right" | null;
 
+export interface RemoteInputClipboardHooks {
+  /** Client text to put on the host clipboard and paste there. `shift` is true for
+   *  Ctrl+Shift+V, which is how a terminal pastes. */
+  onPasteText: (text: string, shift: boolean) => void;
+  /** The user pressed a copy/cut combo on the host — a cue to fetch the host clipboard. */
+  onCopyCombo: () => void;
+}
+
 export function useRemoteInputCapture(
   canvasRef: React.RefObject<HTMLCanvasElement | null>,
   sendMessage: (msg: Record<string, unknown>) => void,
   enabled: boolean,
+  clipboard?: RemoteInputClipboardHooks,
 ): void {
   const sendPointer = useCallback((clientX: number, clientY: number, button: PointerButton, down: boolean | null) => {
     const canvas = canvasRef.current;
@@ -63,8 +78,28 @@ export function useRemoteInputCapture(
       sendPointer(e.clientX, e.clientY, toButton(e.button), false);
     };
     const onContextMenu = (e: MouseEvent) => e.preventDefault();
-    const onKeyDown = (e: KeyboardEvent) => { e.preventDefault(); sendMessage({ type: "key", code: e.code, down: true }); };
-    const onKeyUp = (e: KeyboardEvent) => { e.preventDefault(); sendMessage({ type: "key", code: e.code, down: false }); };
+    // The `paste` event carries no modifier state, and the distinction matters (Ctrl+V vs a
+    // terminal's Ctrl+Shift+V), so it is taken from the keydown that is about to produce it.
+    let pasteWithShift = false;
+    // Both halves of the paste combo are dropped: the keydown so the browser still fires
+    // `paste`, the keyup so the host never sees a V release it was never given a press for.
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (clipboard && isPasteCombo(e)) { pasteWithShift = e.shiftKey; return; }
+      e.preventDefault();
+      sendMessage({ type: "key", code: e.code, down: true });
+      if (clipboard && isCopyCombo(e)) clipboard.onCopyCombo();
+    };
+    const onKeyUp = (e: KeyboardEvent) => {
+      if (clipboard && isPasteCombo(e)) return;
+      e.preventDefault();
+      sendMessage({ type: "key", code: e.code, down: false });
+    };
+    const onPaste = (e: ClipboardEvent) => {
+      e.preventDefault();
+      const text = e.clipboardData?.getData("text/plain");
+      if (text) clipboard?.onPasteText(text, pasteWithShift);
+      pasteWithShift = false; // a paste from any other route must not inherit it
+    };
     const onVisibilityChange = () => { if (document.hidden) releaseAll(); };
 
     canvas.tabIndex = 0; // focusable so it can receive keydown/keyup at all
@@ -74,6 +109,7 @@ export function useRemoteInputCapture(
     canvas.addEventListener("contextmenu", onContextMenu);
     canvas.addEventListener("keydown", onKeyDown);
     canvas.addEventListener("keyup", onKeyUp);
+    canvas.addEventListener("paste", onPaste);
     canvas.addEventListener("blur", releaseAll);
     document.addEventListener("visibilitychange", onVisibilityChange);
 
@@ -88,5 +124,5 @@ export function useRemoteInputCapture(
       canvas.removeEventListener("blur", releaseAll);
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
-  }, [canvasRef, enabled, sendPointer, sendMessage]);
+  }, [canvasRef, enabled, sendPointer, sendMessage, clipboard]);
 }

package/src/web/components/settings/theme-picker.tsx

@@ -41,7 +41,8 @@ export const ThemePicker = memo(function ThemePicker() {
           className="flex items-center gap-1 px-1 rounded-sm transition-colors hover:bg-accent/40 hover:text-text-primary"
         >
           <Palette className="size-[11px]" />
-          <span className="truncate max-w-[90px]">{active.name}</span>
+          {/* Icon only on a status bar under 48rem (the bar is the `@container`). */}
+          <span className="truncate max-w-[90px] @max-3xl:hidden">{active.name}</span>
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent side="top" align="end" className="w-56">

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

@@ -6,14 +6,27 @@ import { Tooltip as TooltipPrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 import { usePortalContainer } from "./portal-container-context"
 
+/**
+ * The pointer has to rest on a trigger before anything opens.
+ *
+ * With no delay a tooltip fires while the pointer is merely passing over a toolbar, and one
+ * that opens under the pointer then owns the wheel: the panel beneath it stops scrolling
+ * until the pointer leaves. `disableHoverableContent` closes it the moment the trigger is
+ * left, which the content's own `pointer-events-none` makes free — nothing in these tooltips
+ * is interactive, so there is no reason to let the pointer enter one.
+ */
+const TOOLTIP_DELAY_MS = 500
+
 function TooltipProvider({
-  delayDuration = 0,
+  delayDuration = TOOLTIP_DELAY_MS,
+  disableHoverableContent = true,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
   return (
     <TooltipPrimitive.Provider
       data-slot="tooltip-provider"
       delayDuration={delayDuration}
+      disableHoverableContent={disableHoverableContent}
       {...props}
     />
   )
@@ -57,7 +70,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "pointer-events-none z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           className
         )}
         {...props}

package/src/web/hooks/use-delayed-flag.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Reports `active` only once it has held for `delayMs`, so a condition that
+ * resolves quickly never paints at all.
+ *
+ * The countdown restarts whenever the tab returns to the foreground: a phone
+ * that suspended the page runs its frozen timers the moment it wakes, which
+ * would otherwise flash the indicator before whatever it waits on has had any
+ * chance to finish.
+ */
+export function useDelayedFlag(active: boolean, delayMs: number): boolean {
+  const [elapsed, setElapsed] = useState(false);
+
+  useEffect(() => {
+    if (!active) {
+      setElapsed(false);
+      return;
+    }
+    let timer = setTimeout(() => setElapsed(true), delayMs);
+    const restart = () => {
+      if (document.visibilityState !== "visible") return;
+      clearTimeout(timer);
+      setElapsed(false);
+      timer = setTimeout(() => setElapsed(true), delayMs);
+    };
+    document.addEventListener("visibilitychange", restart);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("visibilitychange", restart);
+    };
+  }, [active, delayMs]);
+
+  return elapsed;
+}

package/src/web/lib/branch-review-state.ts

@@ -0,0 +1,175 @@
+/**
+ * Which files of a branch review have already been looked at.
+ *
+ * Stored per device in `localStorage` and never on the server: this is "where
+ * had I got to", which belongs to the screen the reading happened on, not to
+ * the project. A phone that opened the same branch has its own progress.
+ *
+ * The value stored per path is the file's **head-side blob id**, not `true`.
+ * A branch under review keeps growing, and the two obvious alternatives both
+ * fail: keying the whole record by the head commit throws the entire progress
+ * away on every new commit, while a plain boolean keeps a file ticked after it
+ * has been rewritten — silently marking unreviewed code as reviewed, which is
+ * the worse of the two. Comparing blob ids clears exactly the files that
+ * actually changed and leaves the rest alone.
+ *
+ * The storage calls are the only impure part, and they are at the edges:
+ * everything that decides anything is a pure function, so it is testable
+ * without a DOM (importing a zustand store instead would read `localStorage` at
+ * module scope and throw under `bun:test`).
+ */
+import type { BranchDiffFile } from "../../types/git";
+
+const PREFIX = "ppm:branch-review";
+
+/** Where the list of comparisons that have progress stored is kept. */
+const RECENT_KEY = `${PREFIX}:recent`;
+
+/**
+ * How many comparisons keep their progress.
+ *
+ * One `localStorage` key per ref pair ever compared, and `pruneReviewed` only
+ * prunes *within* a key — so comparing twenty branches against main left twenty
+ * records, none of which anything would ever delete. Twenty is well past what a
+ * person has open reviews of, and the cost of falling off the end is a list of
+ * ticks, not work.
+ */
+const MAX_REMEMBERED = 20;
+
+/** path → blob id the file had when it was marked reviewed. */
+export type ReviewState = Record<string, string>;
+
+/**
+ * Keyed by ref *names*, so progress survives new commits on either side —
+ * whether a given file is still reviewed is then decided by its blob id.
+ */
+export function reviewKey(projectName: string, base: string, head: string): string {
+  return `${PREFIX}:${projectName}:${base}:${head}`;
+}
+
+export function isReviewed(state: ReviewState, file: BranchDiffFile): boolean {
+  return state[file.path] === file.blob;
+}
+
+export function toggleReviewed(state: ReviewState, file: BranchDiffFile): ReviewState {
+  const next = { ...state };
+  if (isReviewed(state, file)) delete next[file.path];
+  else next[file.path] = file.blob;
+  return next;
+}
+
+export function setAllReviewed(state: ReviewState, files: BranchDiffFile[], reviewed: boolean): ReviewState {
+  if (!reviewed) return {};
+  const next = { ...state };
+  for (const file of files) next[file.path] = file.blob;
+  return next;
+}
+
+export function reviewedCount(state: ReviewState, files: BranchDiffFile[]): number {
+  return files.reduce((n, file) => n + (isReviewed(state, file) ? 1 : 0), 0);
+}
+
+/**
+ * Drop entries for files the diff no longer contains.
+ *
+ * Without this the record only ever grows: every path ever touched on a
+ * long-lived branch stays in `localStorage` after the commit that touched it is
+ * amended or rebased away.
+ */
+export function pruneReviewed(state: ReviewState, files: BranchDiffFile[]): ReviewState {
+  const live = new Set(files.map((f) => f.path));
+  const next: ReviewState = {};
+  for (const [path, blob] of Object.entries(state)) {
+    if (live.has(path)) next[path] = blob;
+  }
+  return next;
+}
+
+/**
+ * The file a review should open on.
+ *
+ * Not simply the first: the list is sorted by path, so a repository whose first
+ * changed file is an image opens on a binary placeholder where the code should
+ * be. Falls back to the first entry when every changed file is binary.
+ */
+export function firstReviewable(files: BranchDiffFile[]): BranchDiffFile | null {
+  return files.find((f) => !f.binary) ?? files[0] ?? null;
+}
+
+/** The next file still needing review, wrapping around from `fromPath`. */
+export function nextUnreviewed(
+  state: ReviewState,
+  files: BranchDiffFile[],
+  fromPath: string | null,
+): BranchDiffFile | null {
+  if (files.length === 0) return null;
+  const start = fromPath ? files.findIndex((f) => f.path === fromPath) + 1 : 0;
+  for (let i = 0; i < files.length; i++) {
+    const file = files[(start + i) % files.length];
+    if (file && !isReviewed(state, file)) return file;
+  }
+  return null;
+}
+
+export function loadReviewed(key: string): ReviewState {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as unknown;
+    // Anything could be under this key — it is a device-local string the user
+    // can edit. Only string values survive, so a tampered entry cannot make
+    // `isReviewed` compare against a non-string and throw during render.
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    const state: ReviewState = {};
+    for (const [path, blob] of Object.entries(parsed as Record<string, unknown>)) {
+      if (typeof blob === "string") state[path] = blob;
+    }
+    return state;
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * `recent` with `key` moved to the front, capped at `max`.
+ *
+ * Returns the surviving order and the keys that fell off, so the caller can
+ * delete exactly those — pure, because deciding what to evict is the part worth
+ * testing and `localStorage` is not available under `bun:test`.
+ */
+export function nextRecent(
+  recent: readonly string[],
+  key: string,
+  max = MAX_REMEMBERED,
+): { recent: string[]; evicted: string[] } {
+  const moved = [key, ...recent.filter((k) => k !== key)];
+  return { recent: moved.slice(0, max), evicted: moved.slice(max) };
+}
+
+/** The stored order, with anything that is not a string dropped. */
+function readRecent(): string[] {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(RECENT_KEY) ?? "[]") as unknown;
+    return Array.isArray(parsed) ? parsed.filter((k): k is string => typeof k === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveReviewed(key: string, state: ReviewState): void {
+  try {
+    if (Object.keys(state).length === 0) {
+      localStorage.removeItem(key);
+      const kept = readRecent().filter((k) => k !== key);
+      localStorage.setItem(RECENT_KEY, JSON.stringify(kept));
+      return;
+    }
+    localStorage.setItem(key, JSON.stringify(state));
+    const { recent, evicted } = nextRecent(readRecent(), key);
+    for (const stale of evicted) localStorage.removeItem(stale);
+    localStorage.setItem(RECENT_KEY, JSON.stringify(recent));
+  } catch {
+    // Private browsing, or the quota is full. Losing review progress is not
+    // worth failing the render over.
+  }
+}

package/src/web/lib/file-icon-name.ts

@@ -0,0 +1,62 @@
+/**
+ * Which glyph of the vscode-icons theme a file or folder name resolves to.
+ *
+ * Split out of `file-icons.tsx` rather than living beside the component,
+ * because the component reaches `project-framework-store` and through it the
+ * whole api-client/React graph — the same reason `git-file-tree.ts` sits apart
+ * from the Source Control panel. This half is pure and has a test; that half
+ * draws.
+ */
+import { basename } from "@/lib/utils";
+import {
+  DEFAULT_FILE_ICON,
+  DEFAULT_FOLDER_ICON,
+  DEFAULT_FOLDER_OPEN_ICON,
+  EXTENSION_ICONS,
+  FILENAME_ICONS,
+  FOLDER_ICONS,
+  FOLDER_OPEN_ICONS,
+  FRAMEWORK_EXTENSION_ICONS,
+  FRAMEWORK_FILENAME_ICONS,
+  MAX_EXTENSION_SEGMENTS,
+  type IconFramework,
+} from "./file-icons.generated";
+
+/**
+ * The icon name for a file, by name alone.
+ *
+ * Resolution is the theme's own: the whole filename first, then each dotted
+ * suffix from the longest — `foo.app-routing.module.ts` tries
+ * `app-routing.module.ts`, then `module.ts`, then `ts`. Matching only the last
+ * two segments, which is what this did while the mapping came from
+ * `vscode-icons-js`, loses every three-segment pattern the real manifest has
+ * (`buf.gen.yaml`, `.php-cs-fixer.dist.php`, `.cspell.config.mts`).
+ *
+ * `framework` is the project's preset, and it is consulted at each suffix
+ * length rather than only at the end: `.controller.ts` has to beat plain `.ts`
+ * whichever table it comes from.
+ */
+export function fileIconName(path: string, framework?: IconFramework | null): string {
+  const name = basename(path).toLowerCase();
+  const overlayNames = framework ? FRAMEWORK_FILENAME_ICONS[framework] : undefined;
+  const byName = overlayNames?.[name] ?? FILENAME_ICONS[name];
+  if (byName) return byName;
+
+  const overlayExtensions = framework ? FRAMEWORK_EXTENSION_ICONS[framework] : undefined;
+  const parts = name.split(".");
+  // A leading dot makes `parts[0]` empty, so `.npmrc` enters the loop at
+  // `npmrc` and needs no case of its own.
+  for (let i = Math.max(1, parts.length - MAX_EXTENSION_SEGMENTS); i < parts.length; i++) {
+    const suffix = parts.slice(i).join(".");
+    const hit = overlayExtensions?.[suffix] ?? EXTENSION_ICONS[suffix];
+    if (hit) return hit;
+  }
+  return DEFAULT_FILE_ICON;
+}
+
+/** The icon name for a folder, open or closed. */
+export function folderIconName(path: string, open = false): string {
+  const name = basename(path).toLowerCase();
+  const table = open ? FOLDER_OPEN_ICONS : FOLDER_ICONS;
+  return table[name] ?? (open ? DEFAULT_FOLDER_OPEN_ICON : DEFAULT_FOLDER_ICON);
+}