@hienlh/ppm 0.23.12 → 0.23.13

package/src/web/components/editor/diff-viewer.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, useMemo, useRef } from "react";
-import { DiffEditor } from "@monaco-editor/react";
+import { useEffect, useLayoutEffect, useState, useMemo, useRef, type ComponentProps } from "react";
+import { DiffEditor as MonacoDiffEditor } from "@monaco-editor/react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -20,6 +20,37 @@ import {
 } from "./binary-diff-view";
 import type { FileFullDiff } from "../../../types/git";
 
+/**
+ * `@monaco-editor/react` 4.7 disposes the two models on unmount *before* the diff editor still
+ * showing them, and Monaco 0.55 reports that as "TextModel got disposed before DiffEditorWidget
+ * model got reset" — an uncaught error every time a diff closes, which a review stepping through
+ * files does once per file. This wrapper is the library component's parent, and React runs a
+ * removed subtree's cleanups parent before child, every layout one before any passive one — so
+ * the models are detached and disposed here first and the library is left only the editor to
+ * dispose. A layout effect is margin, not the fix: React 19.2 runs a removed subtree's passive
+ * cleanups parent-first too, so a passive one here would also run before the library's.
+ */
+function DiffEditor({ onMount, ...props }: ComponentProps<typeof MonacoDiffEditor>) {
+  const editorRef = useRef<Parameters<NonNullable<typeof onMount>>[0] | null>(null);
+  useLayoutEffect(() => () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const model = editor.getModel();
+    editor.setModel(null);
+    model?.original.dispose();
+    model?.modified.dispose();
+  }, []);
+  return (
+    <MonacoDiffEditor
+      {...props}
+      onMount={(editor, monaco) => {
+        editorRef.current = editor;
+        onMount?.(editor, monaco);
+      }}
+    />
+  );
+}
+
 function getMonacoLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
   const map: Record<string, string> = {
@@ -242,14 +273,19 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   // wordWrapOverride2='off' on the original editor. When side-by-side resumes,
   // wordWrapOverride2 is never cleared, permanently blocking word wrap on the
   // left side. We disable that option and also force wordWrapOverride2 to clear it.
+  //
+  // Inline (a phone) is the exception: there the original editor is a hidden 35px
+  // column, and wrapped at that width every line is many rows tall — which the inline
+  // view then pads the modified side to match, drawing one changed line between
+  // screens of hatching. Monaco keeps it unwrapped itself in that mode; so do we.
   useEffect(() => {
     const editor = diffEditorRef.current;
     if (!editor) return;
     const val: "on" | "off" = wrapOn ? "on" : "off";
     editor.updateOptions({ diffWordWrap: val });
-    editor.getOriginalEditor().updateOptions({ wordWrapOverride2: val } as any);
+    editor.getOriginalEditor().updateOptions({ wordWrapOverride2: renderSideBySide ? val : "off" } as any);
     editor.getModifiedEditor().updateOptions({ wordWrapOverride2: val } as any);
-  }, [wrapOn, editorReady]);
+  }, [wrapOn, editorReady, renderSideBySide]);
 
   if (!projectName && !isInline) {
     return (

package/src/web/components/editor/editor-fix-with-ai.tsx

@@ -0,0 +1,111 @@
+import { useEffect } from "react";
+import type * as Monaco from "monaco-editor";
+import { sendToChat } from "@/lib/send-to-chat";
+import { codeFence } from "@/lib/code-fence";
+
+/** Global to the page, like every command in Monaco's standalone registry. */
+export const ASK_AI_COMMAND = "ppm.problems.askAi";
+
+/** Lines quoted either side of the problems, so the request reads on its own in the transcript. */
+const CONTEXT_LINES = 3;
+
+type AskRequest = { text: string; label: string; projectName?: string };
+
+/**
+ * The requests "Fix with AI" and "Explain with AI" send: the errors and warnings among the
+ * markers Monaco handed the provider (those touching the range the bulb or the hover is for), and
+ * the code around them as the editor has it. Hints and infos are nothing anyone asked to have
+ * fixed, and Copilot leaves them out too.
+ */
+export function readProblemsContext(
+  model: Monaco.editor.ITextModel,
+  markers: Monaco.editor.IMarkerData[],
+  filePath: string,
+  severity: typeof Monaco.MarkerSeverity,
+) {
+  const problems = markers
+    .filter((marker) => marker.severity >= severity.Warning)
+    // Monaco hands them over by owner, then as each owner published them; the reader wants file order.
+    .sort((a, b) => a.startLineNumber - b.startLineNumber || a.startColumn - b.startColumn);
+  if (problems.length === 0) return null;
+  let first = Infinity;
+  let last = 0;
+  for (const marker of problems) {
+    first = Math.min(first, marker.startLineNumber);
+    last = Math.max(last, marker.endLineNumber);
+  }
+  const from = Math.max(1, first - CONTEXT_LINES);
+  const to = Math.min(model.getLineCount(), last + CONTEXT_LINES);
+  const code = model.getValueInRange({ startLineNumber: from, startColumn: 1, endLineNumber: to, endColumn: model.getLineMaxColumn(to) });
+  const fence = codeFence(code);
+  const list = problems.map((marker) => {
+    const id = typeof marker.code === "string" ? marker.code : marker.code?.value;
+    const tag = `${marker.source ?? ""}${id ? `(${id})` : ""}`;
+    const kind = marker.severity === severity.Error ? "error" : "warning";
+    // A multi-line message (a type mismatch's elaboration) stays inside its bullet.
+    return `- ${marker.startLineNumber}:${marker.startColumn} ${kind}: ${marker.message.replace(/\n/g, "\n  ")}${tag ? ` ${tag}` : ""}`;
+  });
+  const body = [...list, "", `Code from ${filePath}:${from}-${to}`, `${fence}${model.getLanguageId()}`, code, fence];
+  const these = problems.length === 1 ? "this problem" : "these problems";
+  return {
+    markers: problems,
+    label: `Problems in ${filePath}:${first}`,
+    fix: [`Fix ${these} in ${filePath}:`, ...body].join("\n"),
+    // Said outright: the chat it lands in may edit files, and an explanation is all that was asked for.
+    explain: [`Explain ${these} in ${filePath}, without changing any files:`, ...body].join("\n"),
+  };
+}
+
+/**
+ * "Fix with AI" and "Explain with AI" on every error and warning, Copilot's pair (Cursor has the
+ * first as Fix in Chat). Both are quick fixes flagged `isAI`, so Monaco does the rest: a sparkle
+ * beside each in its own menu, the first as a one-click action in the problem's hover — Monaco
+ * shows one there, which is why Fix is listed first — and a sparkle for the bulb. Monaco would run
+ * a lone AI action straight from the bulb; with two on offer the bulb opens its menu, as VS Code's
+ * does with Copilot's.
+ *
+ * Each request opens a new chat and is sent at once, as Cursor's is: the turn is the whole point,
+ * and a fresh conversation keeps it out of whatever the selected chat is about.
+ */
+export function EditorFixWithAi({ editor, monaco, filePath, projectName }: {
+  editor: Monaco.editor.IStandaloneCodeEditor;
+  monaco: typeof Monaco;
+  filePath: string;
+  projectName?: string;
+}) {
+  useEffect(() => {
+    // Registered by every mounted editor under one id: the registry stacks them,
+    // so closing one editor leaves the command to the others.
+    const command = monaco.editor.registerCommand(ASK_AI_COMMAND,
+      (_accessor, request: AskRequest) => sendToChat({ ...request, newTab: true, autoSend: true }));
+    const provider = monaco.languages.registerCodeActionProvider("*", {
+      provideCodeActions(model, _range, context) {
+        // Providers are global too; this one answers only for its own editor.
+        if (model !== editor.getModel()) return undefined;
+        // Snapshot now: the request describes the problems the action was offered for.
+        const problems = readProblemsContext(model, context.markers, filePath, monaco.MarkerSeverity);
+        if (!problems) return undefined;
+        const asks = [["Fix with AI", problems.fix], ["Explain with AI", problems.explain]] as const;
+        return {
+          actions: asks.map(([title, text]) => ({
+            title,
+            kind: "quickfix",
+            isAI: true,
+            diagnostics: problems.markers,
+            command: {
+              id: ASK_AI_COMMAND,
+              title,
+              arguments: [{ text, label: problems.label, projectName } satisfies AskRequest],
+            },
+          })),
+          dispose() {},
+        };
+      },
+    });
+    return () => {
+      provider.dispose();
+      command.dispose();
+    };
+  }, [editor, monaco, filePath, projectName]);
+  return null;
+}

package/src/web/components/editor/editor-selection-context.tsx

@@ -0,0 +1,70 @@
+import { useEffect } from "react";
+import type * as Monaco from "monaco-editor";
+import { sendToChat } from "@/lib/send-to-chat";
+import { codeFence } from "@/lib/code-fence";
+
+/** Global to the page, like every command in Monaco's standalone registry. */
+export const ADD_SELECTION_TO_CHAT_COMMAND = "ppm.selection.addToChat";
+
+const CHAT_TARGETS = [
+  { title: "Add to current chat", newTab: false },
+  { title: "Add to new chat", newTab: true },
+] as const;
+
+type SelectionChatRequest = { text: string; label: string; projectName?: string; newTab: boolean };
+
+export function readSelectionContext(model: Monaco.editor.ITextModel, range: Monaco.IRange, filePath: string) {
+  if (range.startLineNumber === range.endLineNumber && range.startColumn === range.endColumn) return null;
+  const text = model.getValueInRange(range);
+  if (!text.trim()) return null;
+  const endLine = range.endColumn === 1 && range.endLineNumber > range.startLineNumber
+    ? range.endLineNumber - 1 : range.endLineNumber;
+  const label = `${filePath}:${range.startLineNumber}${endLine === range.startLineNumber ? "" : `-${endLine}`}`;
+  const fence = codeFence(text);
+  return { label, text: `Selected code from ${label}\n${fence}${model.getLanguageId()}\n${text}\n${fence}` };
+}
+
+/**
+ * Offers the selection to chat as two code actions, so they appear under Monaco's
+ * own lightbulb, in Monaco's own menu, beside whatever a language server offers.
+ * Nothing is drawn here: where the bulb goes (on the line, or in the glyph margin
+ * left of the line numbers when the line has no room) is Monaco's decision.
+ */
+export function EditorSelectionContext({ editor, monaco, filePath, projectName }: {
+  editor: Monaco.editor.IStandaloneCodeEditor;
+  monaco: typeof Monaco;
+  filePath: string;
+  projectName?: string;
+}) {
+  useEffect(() => {
+    // Registered by every mounted editor under one id: the registry stacks them,
+    // so closing one editor leaves the command to the others.
+    const command = monaco.editor.registerCommand(ADD_SELECTION_TO_CHAT_COMMAND,
+      (_accessor, request: SelectionChatRequest) => sendToChat({ ...request, asContext: true }));
+    const provider = monaco.languages.registerCodeActionProvider("*", {
+      provideCodeActions(model, range) {
+        // Providers are global too; this one answers only for its own editor.
+        if (model !== editor.getModel()) return undefined;
+        // Snapshot now: the menu's range is the one the bulb was shown for.
+        const context = readSelectionContext(model, range, filePath);
+        if (!context) return undefined;
+        return {
+          actions: CHAT_TARGETS.map(({ title, newTab }) => ({
+            title,
+            command: {
+              id: ADD_SELECTION_TO_CHAT_COMMAND,
+              title,
+              arguments: [{ ...context, projectName, newTab } satisfies SelectionChatRequest],
+            },
+          })),
+          dispose() {},
+        };
+      },
+    });
+    return () => {
+      provider.dispose();
+      command.dispose();
+    };
+  }, [editor, monaco, filePath, projectName]);
+  return null;
+}

package/src/web/components/editor/html-preview.tsx

@@ -1,30 +1,69 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { api } from "@/lib/api-client";
 import { Loader2 } from "@/lib/icons";
+import { beginPreviewLoad, endPreviewLoads, finishPreviewLoad, previewKey } from "@/lib/html-preview-loads";
+import { MAX_BRIDGE_ISSUES } from "../../../shared/design-bridge-protocol";
+import { newBridgeNonce, useDesignBridge } from "../design/canvas/use-design-bridge";
+import { runCanvasCheck } from "../design/canvas/use-design-canvas-check";
+import type { CanvasIssue } from "../design/canvas/design-issues-badge";
 
-/** The server also enforces the sandbox, including when a preview URL is opened directly. */
+/** A preview whose page went quiet (it followed a link, say) is left alone: Refresh brings it back. */
+const ignoreDeadFrame = () => {};
+
+/**
+ * The server also enforces the sandbox, including when a preview URL is opened directly.
+ *
+ * Every load gets a fresh nonce (`?n=`) for the bridge the server puts in the page, which
+ * reports the page's errors and failed loads here and answers the self-check that the AI's
+ * `open_preview` tool asks for through `html-preview-loads.ts`.
+ */
 export function HtmlPreview({ filePath, projectName, revision }: {
   filePath: string;
   projectName?: string;
   revision: number;
 }) {
-  const [url, setUrl] = useState<string>();
+  const [load, setLoad] = useState<{ url: string; nonce: string; seq: number }>();
   const [error, setError] = useState<string>();
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const issues = useRef<CanvasIssue[]>([]);
+  const bridge = useDesignBridge(iframeRef, load?.nonce ?? null, ignoreDeadFrame);
+  // The check runs long after the load that registered it; it must use the bridge as it is then.
+  const bridgeRef = useRef(bridge);
+  bridgeRef.current = bridge;
+  const key = previewKey(projectName, filePath);
+
   useEffect(() => {
     const controller = new AbortController();
-    setUrl(undefined);
+    setLoad(undefined);
     setError(undefined);
     const timeout = setTimeout(() => controller.abort(new Error("Preview request timed out. Try Refresh.")), 30_000);
     let active = true;
     api.post<{ url: string }>("/api/html-preview", { filePath, projectName }, { signal: controller.signal })
-      .then((data) => { if (active) setUrl(data.url); })
+      .then((data) => {
+        if (!active) return;
+        issues.current = [];
+        const seq = beginPreviewLoad(key, (opts) =>
+          runCanvasCheck(bridgeRef.current, { issues: issues.current, frame: opts.frame }, { screenshot: opts.screenshot }));
+        setLoad({ url: data.url, nonce: newBridgeNonce(), seq });
+      })
       .catch((reason: unknown) => { if (active) setError(reason instanceof Error ? reason.message : "Could not open HTML preview"); })
       .finally(() => clearTimeout(timeout));
     return () => { active = false; clearTimeout(timeout); controller.abort(); };
-  }, [filePath, projectName, revision]);
+  }, [filePath, projectName, revision, key]);
+
+  useEffect(() => {
+    if (!load) return;
+    const { seq } = load;
+    return () => endPreviewLoads(key, seq);
+  }, [key, load]);
+
+  useEffect(() => bridge.on("issue", (m) => {
+    if (issues.current.length < MAX_BRIDGE_ISSUES) issues.current.push({ kind: m.kind, message: m.message, source: m.source, line: m.line });
+  }), [bridge.on]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (error) return <div role="alert" className="p-4 text-sm text-destructive">{error}. Use Refresh to retry.</div>;
-  if (!url) return <div role="status" className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground"><Loader2 className="size-5 animate-spin" />Loading preview…</div>;
-  return <iframe title="HTML preview" src={url} sandbox="allow-scripts" referrerPolicy="no-referrer"
-    className="flex-1 min-h-0 w-full border-0 bg-white" />;
+  if (!load) return <div role="status" className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground"><Loader2 className="size-5 animate-spin" />Loading preview…</div>;
+  return <iframe ref={iframeRef} title="HTML preview" src={`${load.url}?n=${encodeURIComponent(load.nonce)}`}
+    sandbox="allow-scripts" referrerPolicy="no-referrer" className="flex-1 min-h-0 w-full border-0 bg-white"
+    onLoad={() => { bridge.frameLoaded(); finishPreviewLoad(key, load.seq); }} />;
 }

package/src/web/components/editor/lsp-status.tsx

@@ -237,7 +237,7 @@ function LspStatusBody({
 /**
  * What pressing Install will actually do.
  *
- * Worth saying, because the three are not the same promise: two of them leave the machine's own
+ * Worth saying, because the plans are not the same promise: all but one leave the machine's own
  * tools untouched, and the rustup one deliberately does not — a rust-analyzer belongs to a
  * toolchain, so PPM adds the component rather than keeping a copy that would be the wrong one
  * for a project pinning another toolchain.
@@ -250,13 +250,19 @@ function installNote(installWith: LspMissingServer["installWith"]): string {
     case "rustup":
       return "PPM asks rustup to add the component to the toolchain this project uses — the same"
         + " as running the command below yourself.";
+    case "download":
+      return "PPM downloads the server's own release, checks it against a pinned checksum and keeps"
+        + " it in its own folder. Nothing on your system changes.";
+    case "gem":
+      return "PPM installs the gem with the Ruby on this machine into its own folder, leaving your"
+        + " gems alone. It takes a minute or so.";
     default:
       return "PPM downloads it from npm into its own folder. Nothing you installed globally"
         + " changes, and this file picks it up without being reopened.";
   }
 }
 
-/** Why there is no button: either PPM has no toolchain to do it with, or it is a system package. */
+/** Why there is no button: PPM has no toolchain to do it with, or no build to download. */
 function cannotInstallNote(installWith: LspMissingServer["installWith"]): string {
   switch (installWith) {
     case "go":
@@ -265,9 +271,17 @@ function cannotInstallNote(installWith: LspMissingServer["installWith"]): string
     case "rustup":
       return "Install it, then reopen this file. PPM installs language servers but never toolchains,"
         + " and it cannot find rustup on this host.";
+    case "gem":
+      return "Install it, then reopen this file. PPM installs this one with the machine's Ruby, and"
+        + " it cannot use one on this host.";
+    case "download":
+      return "Install it, then reopen this file. Its project publishes no build for this machine,"
+        + " or there is no unzip here to unpack one.";
+    case "bun":
+      return "Install it, then reopen this file. PPM installs this one with bun, and it cannot find"
+        + " bun on this host.";
     default:
-      return "Install it, then reopen this file. This one comes from a system package manager,"
-        + " which PPM will not run on your behalf.";
+      return "Install it, then reopen this file.";
   }
 }
 

package/src/web/components/editor/video-player/video-player-controls.tsx

@@ -13,7 +13,7 @@ interface Props {
   transform: VideoTransform;
   fullscreen: boolean;
   onTogglePlay: () => void;
-  /** Live value while the thumb is dragged (updates the clock only). */
+  /** Live value while the thumb is dragged. */
   onScrub: (t: number) => void;
   /** Final value when the drag ends. */
   onSeek: (t: number) => void;
@@ -27,6 +27,19 @@ interface Props {
   onToggleFullscreen: () => void;
 }
 
+const SEEK_STEPS_PER_SECOND = 10;
+
+/**
+ * The seek slider's value, already on its step grid. A range input snaps its value to
+ * `step`, while React remembers the unsnapped number it rendered — so the `change` event
+ * the browser fires when a drag ends looked like a new value to React, and `onChange`
+ * reported the position from before the drag. That froze the bar and the clock there while
+ * the video played on from where the thumb was dropped.
+ */
+export function seekBarValue(position: number, duration: number): number {
+  return Math.floor(Math.min(position, duration) * SEEK_STEPS_PER_SECOND) / SEEK_STEPS_PER_SECOND;
+}
+
 /** Bottom bar: 44px targets, primary actions in thumb reach on phones. */
 export function VideoPlayerControls(p: Props) {
   const VolumeIcon = p.muted || p.volume === 0 ? VolumeX : p.volume < 0.5 ? Volume1 : Volume2;
@@ -47,14 +60,17 @@ export function VideoPlayerControls(p: Props) {
           type="range"
           min={0}
           max={p.duration}
-          step={0.1}
-          value={Math.min(p.position, p.duration)}
+          step={1 / SEEK_STEPS_PER_SECOND}
+          value={seekBarValue(p.position, p.duration)}
           aria-label="Seek"
           className="flex-1 h-11 accent-primary cursor-pointer min-w-0"
           onChange={(e) => p.onScrub(Number(e.target.value))}
           onPointerUp={commit}
           onKeyUp={commit}
           onTouchEnd={commit}
+          // A drag the browser takes over for scrolling ends here, with no pointerup.
+          onPointerCancel={commit}
+          onTouchCancel={commit}
         />
       ) : <div className="flex-1" />}
 

package/src/web/components/editor/video-player/video-player.tsx

@@ -9,6 +9,14 @@ import {
   IDENTITY_TRANSFORM, fittedMaxSize, rotateClockwise, rotateCounterClockwise, toCssTransform, type VideoTransform,
 } from "./video-transform";
 
+/** `HTMLMediaElement.readyState` levels. */
+const HAVE_METADATA = 1;
+const HAVE_FUTURE_DATA = 3;
+
+function clampSeek(t: number, duration: number | null): number {
+  return Math.max(0, duration ? Math.min(t, duration - 0.5) : t);
+}
+
 interface Props {
   filePath: string;
   projectName: string;
@@ -34,6 +42,8 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   // resuming and staying paused; derived from user actions, not `video.paused`, because
   // the element reports paused while a fresh stream is still loading.
   const wantPlayRef = useRef(true);
+  // Set while a drag holds a playing video still, so the release knows to play it again.
+  const resumeAfterScrubRef = useRef(false);
   // One id per mounted player: the server replaces (kills) this player's previous
   // ffmpeg job on every seek and stops it when told the player is gone.
   const [sessionId] = useState(newMediaSessionId);
@@ -61,6 +71,29 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
   useEffect(() => { setElapsed(0); setWaiting(true); setError(null); }, [src]);
   useEffect(() => { setStart(0); setNativeDuration(null); setTransform(IDENTITY_TRANSFORM); }, [filePath, mode]);
 
+  const applyMetadata = (v: HTMLVideoElement) => {
+    // Re-apply user settings: a fresh load (seek restart, retry) resets the element.
+    v.playbackRate = speed;
+    v.volume = volume;
+    v.muted = muted;
+    if (!isTranscode && Number.isFinite(v.duration)) setNativeDuration(v.duration);
+    if (isTranscode && !wantPlayRef.current) v.pause();
+  };
+
+  // React sets `src` while it renders, before the element is in the page, and the browser
+  // starts loading right then — so a file already in its media cache fires `loadedmetadata`,
+  // `canplay` and `play` before React commits the element, and React drops events aimed at an
+  // element it has not committed. None of them fires again, which left the seek bar (drawn
+  // only once the duration is known) missing. Read what the element already knows instead;
+  // declared after the resets above so that it, not they, has the last word.
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    if (v.readyState >= HAVE_METADATA) applyMetadata(v);
+    if (v.readyState >= HAVE_FUTURE_DATA) setWaiting(false);
+    setPlaying(!v.paused);
+  }, [src]);
+
   // Element properties survive src changes but not a remount; keep them in sync with state.
   useEffect(() => { const v = videoRef.current; if (v) { v.volume = volume; v.muted = muted; } }, [volume, muted]);
   useEffect(() => { const v = videoRef.current; if (v) v.playbackRate = speed; }, [speed, src]);
@@ -101,11 +134,34 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
     return () => ro.disconnect();
   }, []);
 
+  // A drag seeks as it goes, the way other players do, and holds a playing video still
+  // meanwhile: otherwise it plays on from each frame the drag reaches and the picture runs
+  // away from the thumb. A transcoded stream waits for the release — each seek there is a
+  // new ffmpeg job.
+  const scrubTo = useCallback((t: number) => {
+    setScrub(t);
+    const v = videoRef.current;
+    if (isTranscode || !v) return;
+    if (!v.paused) { resumeAfterScrubRef.current = true; v.pause(); }
+    v.currentTime = clampSeek(t, duration);
+  }, [duration, isTranscode]);
+
   const seekTo = useCallback((t: number) => {
     const v = videoRef.current;
-    const clamped = Math.max(0, duration ? Math.min(t, duration - 0.5) : t);
+    const clamped = clampSeek(t, duration);
     setScrub(null);
-    if (!isTranscode) { if (v) v.currentTime = clamped; return; }
+    if (!isTranscode) {
+      if (!v) return;
+      v.currentTime = clamped;
+      // `timeupdate` reports the new position only once the seek has decoded, and until
+      // then the thumb went back to where it had been.
+      setElapsed(clamped);
+      if (resumeAfterScrubRef.current) {
+        resumeAfterScrubRef.current = false;
+        void v.play().catch(() => {});
+      }
+      return;
+    }
     // Restarting ffmpeg for a sub-second nudge is wasteful.
     if (Math.abs(clamped - (start + (v?.currentTime ?? 0))) < 0.5) return;
     setStart(clamped);
@@ -160,17 +216,10 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
           playsInline
           preload={isTranscode ? "auto" : "metadata"}
           style={{ transform: toCssTransform(transform), maxWidth: fitted.maxWidth || undefined, maxHeight: fitted.maxHeight || undefined }}
-          onLoadedMetadata={(e) => {
-            // Re-apply user settings: a fresh load (seek restart, retry) resets the element.
-            const v = e.currentTarget;
-            v.playbackRate = speed;
-            v.volume = volume;
-            v.muted = muted;
-            if (!isTranscode && Number.isFinite(v.duration)) setNativeDuration(v.duration);
-            if (isTranscode && !wantPlayRef.current) v.pause();
-          }}
+          onLoadedMetadata={(e) => applyMetadata(e.currentTarget)}
           onPlay={() => setPlaying(true)}
-          onPause={() => setPlaying(false)}
+          // The button keeps saying what the release will do, not flicker for the drag.
+          onPause={() => { if (!resumeAfterScrubRef.current) setPlaying(false); }}
           onWaiting={() => setWaiting(true)}
           onPlaying={() => setWaiting(false)}
           onCanPlay={() => setWaiting(false)}
@@ -181,7 +230,11 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
             else setError("Transcoding failed. ffmpeg may have stopped or the file is corrupt.");
           }}
         />
-        {waiting && !error && <Loader2 className="absolute size-8 animate-spin text-white/80 pointer-events-none" />}
+        {/* Fades in only after 300 ms: a seek that decodes sooner would otherwise flash it
+            over the picture for a frame or two, on every release and every arrow key. */}
+        {waiting && !error && (
+          <Loader2 className="absolute size-8 animate-spin text-white/80 pointer-events-none transition-opacity delay-300 starting:opacity-0" />
+        )}
         {/* Overlay rather than a replacement tree: the <video> stays mounted so volume,
             mute and speed survive a retry. */}
         {error && (
@@ -206,7 +259,7 @@ export function VideoPlayer({ filePath, projectName, mode, probeDuration = null,
         transform={transform}
         fullscreen={fullscreen}
         onTogglePlay={actions.togglePlay}
-        onScrub={setScrub}
+        onScrub={scrubTo}
         onSeek={seekTo}
         onVolume={(v) => { setVolume(v); setMuted(v === 0); }}
         onToggleMute={actions.toggleMute}

package/src/web/components/extensions/extension-webview.tsx

@@ -3,10 +3,25 @@ import { useExtensionStore } from "@/stores/extension-store";
 import { getAuthToken } from "@/lib/api-client";
 import { THEME_CHANGE_EVENT } from "@/theme/apply-theme";
 import { HOST_THEME_MESSAGE, injectHostTheme, readHostTheme } from "./webview-theme";
+import { externalLinkRequest } from "./webview-external-link";
+import { type IconRuleIndex, fileIconsAnswer, fileIconsRequest, indexIconRules } from "./webview-file-icons";
+import { iconStylesheet } from "@/lib/file-icons";
+import { useProjectFrameworkStore } from "@/stores/project-framework-store";
 import { commandRunsGit } from "@/lib/git-repo-scope";
 import { resolveGitRoot } from "@/stores/git-repo-store";
 import { Loader2 } from "@/lib/icons";
 
+/** The icon rules by class, read once from the stylesheet the app's own trees load. */
+let iconRules: Promise<IconRuleIndex> | null = null;
+function webviewIconRules(): Promise<IconRuleIndex> {
+  iconRules ??= iconStylesheet().then((sheet) => {
+    // Not kept when the stylesheet failed, so the next panel to ask tries again.
+    if (!sheet) iconRules = null;
+    return indexIconRules(sheet ? Array.from(sheet.cssRules) : []);
+  });
+  return iconRules;
+}
+
 /** Inject acquireVsCodeApi() shim so extension webviews can postMessage to parent */
 const VSCODE_API_SHIM = `<script>
 function acquireVsCodeApi(){return{postMessage:function(m){window.parent.postMessage(m,"*")},getState:function(){try{return JSON.parse(sessionStorage.getItem("vscode-state")||"null")}catch{return null}},setState:function(s){sessionStorage.setItem("vscode-state",JSON.stringify(s));return s}}}
@@ -89,7 +104,7 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   // Seeded with the theme so the panel's first paint is already the right one.
   // Deliberately not a dependency of this memo: srcDoc is what mounts the
   // iframe, so recomputing it on a theme change would reload the panel. Later
-  // changes are posted in below instead.
+  // changes are posted in below instead, and so is the theme at every load.
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const html = useMemo(
     () => injectHostTheme(injectVscodeApiShim(rawHtml), readHostTheme(document.documentElement)),
@@ -202,6 +217,21 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     if (!resolvedPanelId) return;
     const handler = (event: MessageEvent) => {
       if (iframeRef.current && event.source === iframeRef.current.contentWindow) {
+        const link = externalLinkRequest(event.data);
+        if (link !== undefined) {
+          if (link) window.open(link, "_blank", "noopener,noreferrer");
+          return;
+        }
+        const iconNames = fileIconsRequest(event.data);
+        if (iconNames !== undefined) {
+          const frame = iframeRef.current.contentWindow;
+          if (iconNames.length) {
+            void webviewIconRules().then((index) => {
+              frame?.postMessage(fileIconsAnswer(iconNames, useProjectFrameworkStore.getState().framework, index), "*");
+            });
+          }
+          return;
+        }
         window.dispatchEvent(new CustomEvent("ext:webview:send", {
           detail: { panelId: resolvedPanelId, message: event.data },
         }));
@@ -224,15 +254,19 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     return () => window.removeEventListener("ext:webview:message", handler);
   }, [resolvedPanelId]);
 
-  // Forward theme changes to the iframe (see the srcDoc memo above)
-  useEffect(() => {
-    const handler = () => {
-      const { mode, css } = readHostTheme(document.documentElement);
-      iframeRef.current?.contentWindow?.postMessage({ command: HOST_THEME_MESSAGE, mode, css }, "*");
-    };
-    window.addEventListener(THEME_CHANGE_EVENT, handler);
-    return () => window.removeEventListener(THEME_CHANGE_EVENT, handler);
+  // Tell the iframe which theme is on (see the srcDoc memo above): on every
+  // change, and on every load. The tab pool moves a tab with appendChild — a
+  // split, a tab dragged to another panel, the switch between the desktop and
+  // phone layouts — and a moved iframe loads its document again from the same
+  // srcDoc, whose seed is the theme of the moment the HTML arrived.
+  const postTheme = useCallback(() => {
+    const { mode, css } = readHostTheme(document.documentElement);
+    iframeRef.current?.contentWindow?.postMessage({ command: HOST_THEME_MESSAGE, mode, css }, "*");
   }, []);
+  useEffect(() => {
+    window.addEventListener(THEME_CHANGE_EVENT, postTheme);
+    return () => window.removeEventListener(THEME_CHANGE_EVENT, postTheme);
+  }, [postTheme]);
 
   // Loading state — waiting for extension to create the panel AND deliver HTML.
   // We must wait for HTML before mounting the iframe because browsers don't
@@ -269,6 +303,7 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
         ref={iframeRef}
         key={resolvedPanelId}
         srcDoc={html}
+        onLoad={postTheme}
         sandbox="allow-scripts"
         className="w-full h-full border-0 bg-white dark:bg-bg"
         title={panel.title}