@hienlh/ppm 0.20.10 → 0.21.0

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

@@ -0,0 +1,241 @@
+/**
+ * What the language server is doing, in the editor toolbar.
+ *
+ * This exists because the alternative was shipping a feature that is invisible
+ * when it works and silent when it does not. On a machine with no language
+ * server installed — the default state of a fresh PPM — completions simply do
+ * not appear, which is indistinguishable from a bug. So the indicator is
+ * always present for a file a server *could* serve, and says which of the
+ * three things is true: it is working, it is starting, or it is not installed
+ * and here is the one command that fixes that.
+ *
+ * Nothing here installs anything. The command is shown to be copied and run
+ * deliberately; an editor that reaches out to the network and installs a
+ * binary because a file was opened is doing something the user did not ask for.
+ *
+ * The same argument is why the *off* state has a chip. A language server is a
+ * real process on the host — one was 854 MB resident — so PPM keeps it off
+ * until asked, and a feature that is off with nothing on screen to say so is
+ * the same invisible failure as a feature that is missing. So: one chip that
+ * says "off" and turns it on, and the switch to turn it back off in the panel
+ * the on-state chip opens.
+ */
+import { useState } from "react";
+import { AlertTriangle, Check, Copy, Loader2, Zap, ZapOff } from "@/lib/icons";
+import { Switch } from "@/components/ui/switch";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import type { LspDocumentStatus } from "@/lib/lsp/lsp-client";
+import type { LspDiagnostic } from "@/hooks/use-lsp";
+
+interface LspStatusProps {
+  /** The setting, for this device. False renders the chip that turns it on. */
+  enabled: boolean;
+  onToggle: (enabled: boolean) => void;
+  status: LspDocumentStatus | null;
+  diagnostics: LspDiagnostic[];
+}
+
+export function LspStatus({ enabled, onToggle, status, diagnostics }: LspStatusProps) {
+  const [open, setOpen] = useState(false);
+  const isMobile = useIsMobile();
+
+  if (!enabled) {
+    return (
+      <button
+        type="button"
+        onClick={() => onToggle(true)}
+        title={
+          "Language server: off. Turn it on for completions, hover, go to definition, "
+          + "rename and quick fix from a real server. It runs as a process on the host."
+        }
+        className={`flex items-center gap-1 rounded px-1.5 text-xs text-muted-foreground hover:bg-muted active:scale-95 transition-colors ${
+          isMobile ? "min-h-11" : "py-0.5"
+        }`}
+      >
+        <ZapOff className="size-3 shrink-0" />
+        <span>LSP off</span>
+      </button>
+    );
+  }
+
+  if (!status) return null;
+
+  const errors = diagnostics.filter((d) => d.severity === 1).length;
+  const warnings = diagnostics.filter((d) => d.severity === 2).length;
+
+  const label =
+    status.state === "ready" ? status.server.displayName
+    : status.state === "opening" ? "Starting…"
+    : status.server?.displayName ?? "No server";
+
+  const missing = status.state === "unavailable" && status.reason === "not-installed";
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        title={
+          status.state === "ready"
+            ? `${status.server.displayName} — rooted at ${status.server.rootPath}`
+            : status.state === "unavailable" ? status.message : "Starting the language server"
+        }
+        className={`flex items-center gap-1 rounded px-1.5 hover:bg-muted active:scale-95 transition-colors text-xs ${
+          // 44px on touch, per the mobile rules; compact on a pointer device.
+          isMobile ? "min-h-11" : "py-0.5"
+        } ${missing ? "text-amber-500" : "text-muted-foreground"}`}
+      >
+        {status.state === "opening" ? (
+          <Loader2 className="size-3 animate-spin shrink-0" />
+        ) : missing ? (
+          <AlertTriangle className="size-3 shrink-0" />
+        ) : (
+          <Zap className="size-3 shrink-0" />
+        )}
+        <span className="max-w-24 truncate">{label}</span>
+        {errors > 0 && <span className="text-red-500">{errors}</span>}
+        {errors === 0 && warnings > 0 && <span className="text-amber-500">{warnings}</span>}
+      </button>
+
+      {open && (
+        <LspStatusDetails
+          status={status}
+          errors={errors}
+          warnings={warnings}
+          isMobile={isMobile}
+          onToggle={onToggle}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+
+function LspStatusDetails({
+  status, errors, warnings, isMobile, onToggle, onClose,
+}: {
+  status: LspDocumentStatus;
+  errors: number;
+  warnings: number;
+  isMobile: boolean;
+  onToggle: (enabled: boolean) => void;
+  onClose: () => void;
+}) {
+  const body = (
+    <LspStatusBody status={status} errors={errors} warnings={warnings} isMobile={isMobile} onToggle={onToggle} />
+  );
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onClose} className="popover-solid max-h-[85dvh] flex flex-col">
+        {body}
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogTitle>Language server</DialogTitle>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function LspStatusBody({
+  status, errors, warnings, isMobile, onToggle,
+}: {
+  status: LspDocumentStatus;
+  errors: number;
+  warnings: number;
+  isMobile: boolean;
+  onToggle: (enabled: boolean) => void;
+}) {
+  return (
+    <div className="p-4 space-y-4 overflow-y-auto text-sm leading-relaxed">
+      {status.state === "ready" && (
+        <>
+          <Row label="Server" value={status.server.displayName} />
+          <Row label="Language" value={status.languageId} />
+          <Row label="Project root" value={status.server.rootPath} mono />
+          <Row label="Problems" value={`${errors} error${errors === 1 ? "" : "s"}, ${warnings} warning${warnings === 1 ? "" : "s"}`} />
+          <p className="text-xs text-muted-foreground">
+            Completions, hover, go to definition (F12), find references (Shift+F12), rename (F2),
+            quick fix (Ctrl+.) and format (Shift+Alt+F) all come from this server.
+          </p>
+        </>
+      )}
+
+      {status.state === "opening" && (
+        <p className="text-muted-foreground">
+          Starting the language server. A cold start reads the project's dependencies, so the first
+          completion in a large project can take a few seconds.
+        </p>
+      )}
+
+      {status.state === "unavailable" && (
+        <>
+          <p>{status.message}</p>
+          {status.server && (
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">
+                Install it, then reopen this file. PPM does not install it for you — that would mean
+                fetching and running a binary because you opened a file.
+              </p>
+              <CopyableCommand command={status.server.installHint} isMobile={isMobile} />
+            </div>
+          )}
+          {status.reason === "no-language" && (
+            <p className="text-xs text-muted-foreground">
+              No language server is registered for this file type.
+            </p>
+          )}
+        </>
+      )}
+
+      {/* Symmetry with the chip that turned it on. The setting is per-device:
+          a phone has no business starting a server because a desktop did. */}
+      <div className="flex items-center justify-between gap-3 border-t border-border pt-3">
+        <div>
+          <p className="text-xs font-medium">Language server</p>
+          <p className="text-[11px] text-muted-foreground">On for this device. Turning it off stops the process.</p>
+        </div>
+        <Switch checked onCheckedChange={(v) => onToggle(v)} />
+      </div>
+    </div>
+  );
+}
+
+function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
+  return (
+    <div className="flex gap-2 items-baseline">
+      <span className="text-muted-foreground shrink-0 w-24 text-xs">{label}</span>
+      <span className={`min-w-0 break-all ${mono ? "font-mono text-xs" : ""}`}>{value}</span>
+    </div>
+  );
+}
+
+function CopyableCommand({ command, isMobile }: { command: string; isMobile: boolean }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        void navigator.clipboard?.writeText(command).then(() => {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1500);
+        });
+      }}
+      className={`w-full flex items-center gap-2 rounded border border-border bg-muted/40 px-3 text-left font-mono text-xs hover:bg-muted active:scale-[0.99] transition ${
+        isMobile ? "min-h-11 py-3" : "py-2"
+      }`}
+    >
+      <span className="flex-1 break-all">{command}</span>
+      {copied ? <Check className="size-3.5 shrink-0 text-green-500" /> : <Copy className="size-3.5 shrink-0 opacity-60" />}
+    </button>
+  );
+}

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Loader2, FileWarning, ExternalLink } from "lucide-react";
+import { Loader2, FileWarning, ExternalLink } from "@/lib/icons";
 import { projectUrl, getAuthToken } from "@/lib/api-client";
 
 export function PdfPreview({ filePath, projectName }: { filePath: string; projectName: string }) {

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

@@ -1,4 +1,4 @@
-import { Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "lucide-react";
+import { Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { VideoSettingsMenu } from "./video-settings-menu";
 import type { VideoTransform } from "./video-transform";

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { newMediaSessionId, rawMediaUrl, stopTranscode, transcodeMediaUrl } from "@/lib/media-url";
 import { VideoPlayerControls } from "./video-player-controls";

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

@@ -1,4 +1,4 @@
-import { FlipHorizontal2, FlipVertical2, RotateCcw, RotateCw, Settings, Undo2 } from "lucide-react";
+import { FlipHorizontal2, FlipVertical2, RotateCcw, RotateCw, Settings, Undo2 } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Download, FileWarning, Loader2 } from "lucide-react";
+import { Download, FileWarning, Loader2 } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
 import { extensionOf } from "@/components/os-explorer/can-open-in-ppm";
 import { probeMedia, rawMediaUrl, type MediaProbeInfo } from "@/lib/media-url";

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

@@ -12,7 +12,7 @@ import {
   ChevronsDownUp,
   Crosshair,
   Loader2,
-} from "lucide-react";
+} from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { copyToClipboard } from "@/lib/clipboard";
 import { useShallow } from "zustand/react/shallow";

package/src/web/components/explorer/inline-tree-input.tsx

@@ -4,7 +4,7 @@
  * Blur or Enter confirms, Escape cancels.
  */
 import { useState, useRef, useEffect, useCallback } from "react";
-import { File, Folder } from "lucide-react";
+import { File, Folder } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 
 interface InlineTreeInputProps {

package/src/web/components/explorer/search-panel.tsx

@@ -1,10 +1,11 @@
 import { useState, useRef, useCallback, useEffect } from "react";
-import { Search, CaseSensitive, ChevronRight, ChevronDown, FileText, X, Loader2, WholeWord, Regex, ReplaceAll } from "lucide-react";
+import { Search, CaseSensitive, ChevronRight, ChevronDown, X, Loader2, WholeWord, Regex, ReplaceAll } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
 import { projectUrl, api } from "@/lib/api-client";
 import { cn } from "@/lib/utils";
+import { FileIcon } from "@/lib/file-icons";
 
 interface SearchMatch {
   lineNum: number;
@@ -284,7 +285,7 @@ export function SearchPanel() {
                 className="w-full flex items-center gap-1 px-2 py-1 hover:bg-muted/50 text-left"
               >
                 {isCollapsed ? <ChevronRight className="size-3 shrink-0 text-text-subtle" /> : <ChevronDown className="size-3 shrink-0 text-text-subtle" />}
-                <FileText className="size-3 shrink-0 text-text-subtle" />
+                <FileIcon name={fileName} className="size-3.5" />
                 <span className="text-xs font-medium text-foreground truncate">{fileName}</span>
                 <span className="text-[10px] text-text-subtle truncate flex-1 min-w-0 ml-1">{dirPath}</span>
                 <span className="text-[10px] text-text-subtle shrink-0 ml-1 bg-muted px-1 rounded">{r.matches.length}</span>

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

@@ -1,7 +1,7 @@
 /**
  * Context menu items for a tree node (file or folder).
  */
-import { Download, FolderOpen, TerminalSquare } from "lucide-react";
+import { Download, FolderOpen, TerminalSquare } from "@/lib/icons";
 import type { FileNode, ClipboardState } from "@/stores/file-store";
 import {
   ContextMenuContent,

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

@@ -5,12 +5,10 @@
  */
 import { useRef, useEffect, memo } from "react";
 import {
-  Folder,
-  FolderOpen,
   ChevronRight,
   ChevronDown,
   Loader2,
-} from "lucide-react";
+} from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { useFileStore, getVisiblePaths, absoluteProjectPath, type FileNode } from "@/stores/file-store";
 import { useProjectStore } from "@/stores/project-store";
@@ -24,7 +22,7 @@ import {
 } 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 { getFileIcon } from "./file-icon-map";
+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";
@@ -137,10 +135,6 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
     transferRun,
   });
 
-  const { icon: FileIcon, color: fileIconColor } = isDir
-    ? { icon: isExpanded ? FolderOpen : Folder, color: isExpanded ? "text-primary" : "text-text-3" }
-    : getFileIcon(node.name);
-
   return (
     <div {...dnd.containerHandlers}>
       <ContextMenu>
@@ -172,10 +166,9 @@ export const TreeRow = memo(function TreeRow({ row, projectName, onAction, onFil
               <span className="w-3.5 shrink-0" />
             )}
             <FileIcon
-              className={cn(
-                "size-4 shrink-0",
-                fileIconColor ?? "text-text-secondary",
-              )}
+              name={node.name}
+              kind={isDir ? "directory" : "file"}
+              open={isExpanded}
             />
             <span
               className={cn(

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

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
-import { Check, Search } from "lucide-react";
+import { Check, Search } from "@/lib/icons";
 import { useExtensionStore, type QuickPickItemUI } from "@/stores/extension-store";
 import { cn } from "@/lib/utils";
 

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

@@ -1,5 +1,5 @@
 import { useCallback, useState, useRef, useMemo } from "react";
-import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Plus, Search } from "lucide-react";
+import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Plus, Search } from "@/lib/icons";
 import { useExtensionStore, type TreeItemUI, type TreeItemAction } from "@/stores/extension-store";
 import { cn } from "@/lib/utils";
 

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

@@ -1,7 +1,11 @@
-import { useRef, useEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useState, useCallback, useMemo } from "react";
 import { useExtensionStore } from "@/stores/extension-store";
 import { getAuthToken } from "@/lib/api-client";
-import { Loader2 } from "lucide-react";
+import { THEME_CHANGE_EVENT } from "@/theme/apply-theme";
+import { HOST_THEME_MESSAGE, injectHostTheme, readHostTheme } from "./webview-theme";
+import { commandRunsGit } from "@/lib/git-repo-scope";
+import { resolveGitRoot } from "@/stores/git-repo-store";
+import { Loader2 } from "@/lib/icons";
 
 /** Inject acquireVsCodeApi() shim so extension webviews can postMessage to parent */
 const VSCODE_API_SHIM = `<script>
@@ -18,6 +22,28 @@ function injectVscodeApiShim(html: string): string {
   return VSCODE_API_SHIM + html;
 }
 
+/**
+ * The path the recovery dispatch should hand the command.
+ *
+ * Fetched rather than read from the project store because a panel can be
+ * restored before the store has anything in it. A git view is then re-pointed
+ * at the repository the user chose, exactly as the live dispatch sites do —
+ * otherwise a reload reopens the graph on the container folder and it reports
+ * no repository.
+ */
+async function resolveDispatchPath(projectName: string, command: string): Promise<string | undefined> {
+  try {
+    const token = getAuthToken();
+    const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
+    const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
+    const match = json.data?.find((p) => p.name === projectName);
+    if (!match) return undefined;
+    return commandRunsGit(command) ? await resolveGitRoot(projectName, match.path) : match.path;
+  } catch {
+    return undefined;
+  }
+}
+
 interface ExtensionWebviewProps {
   metadata?: Record<string, unknown>;
 }
@@ -60,7 +86,15 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
 
   // Inject acquireVsCodeApi shim + write HTML into iframe via srcdoc
   const rawHtml = panel?.html ?? "";
-  const html = injectVscodeApiShim(rawHtml);
+  // 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.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const html = useMemo(
+    () => injectHostTheme(injectVscodeApiShim(rawHtml), readHostTheme(document.documentElement)),
+    [rawHtml],
+  );
 
   // Track which project was last dispatched to prevent duplicate dispatches
   const prevProjectRef = useRef<string | null>(null);
@@ -78,13 +112,8 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     async function dispatch() {
       let args: unknown[] = [];
       if (projectName) {
-        try {
-          const token = getAuthToken();
-          const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
-          const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
-          const match = json.data?.find((p) => p.name === projectName);
-          if (match) args = [match.path];
-        } catch {}
+        const path = await resolveDispatchPath(projectName, command);
+        if (path) args = [path];
       }
       if (cancelled) return;
       window.dispatchEvent(new CustomEvent("ext:command:execute", {
@@ -115,16 +144,10 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     if (!viewType) return;
     const command = viewType.includes(".") ? viewType : `${viewType}.view`;
     (async () => {
-      try {
-        const token = getAuthToken();
-        const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
-        const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
-        const match = json.data?.find((p) => p.name === projectName);
-        const args = match ? [match.path] : [];
-        window.dispatchEvent(new CustomEvent("ext:command:execute", {
-          detail: { command, args, recovery: true },
-        }));
-      } catch {}
+      const path = projectName ? await resolveDispatchPath(projectName, command) : undefined;
+      window.dispatchEvent(new CustomEvent("ext:command:execute", {
+        detail: { command, args: path ? [path] : [], recovery: true },
+      }));
     })();
   }, [viewType, projectName]);
 
@@ -201,6 +224,16 @@ 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);
+  }, []);
+
   // 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
   // re-execute scripts when React updates the srcDoc attribute from "" to content.

package/src/web/components/extensions/webview-theme.ts

@@ -0,0 +1,121 @@
+/**
+ * Hand PPM's active theme to an extension webview.
+ *
+ * A webview is a sandboxed iframe with its own document, so it inherits nothing
+ * from the app: no CSS vars, no `.dark` class on `<html>`. Left to itself the
+ * only thing it can ask is `prefers-color-scheme`, which is the *OS* setting —
+ * so a phone or laptop in dark mode rendered every panel dark while the app
+ * around it was light. The host has to say which theme is on, and in what
+ * colours.
+ *
+ * Both halves matter: the mode drives the panels' own dark rules, and the token
+ * block makes a panel use the same surfaces as the app rather than its own
+ * near-black stand-in palette.
+ */
+
+/**
+ * Webview var ← app var.
+ *
+ * Values are read from the live `<html>` rather than from a `PpmTheme` object so
+ * that mobile overrides and imported VSCode themes come through with no second
+ * mapping to keep in sync. Two deliberate omissions: `--surface-hover` (the app
+ * has no hover token, and `--panel-2` equals `--panel` in some themes, which
+ * would make row hover invisible — the panels derive it from `--text` instead)
+ * and the decorative `--purple` / `--orange`, which have no app equivalent and
+ * only ever colour graph lanes and ref badges.
+ */
+const VAR_MAP: [webviewVar: string, appVar: string][] = [
+  ["--bg", "--bg-solid"],
+  ["--surface", "--panel"],
+  ["--selected", "--accent-wash"],
+  ["--text", "--text"],
+  ["--subtext", "--text-2"],
+  ["--subtle", "--text-3"],
+  // The app's faint divider becomes the panels' hairline and its hairline
+  // becomes their stronger border, keeping the two-tier structure they expect.
+  ["--border", "--border-soft"],
+  ["--border2", "--border"],
+  ["--blue", "--accent"],
+  ["--green", "--success"],
+  ["--yellow", "--warning"],
+  ["--red", "--error"],
+];
+
+export interface HostTheme {
+  mode: "dark" | "light";
+  /** A `:root[data-ppm-theme]` block, or "" when no tokens could be read. */
+  css: string;
+}
+
+/**
+ * Build the token block from a var reader.
+ *
+ * The selector carries an attribute so it ties with the panels' own
+ * `:root[data-ppm-theme="dark"]` rules on specificity; being injected last is
+ * what makes it win.
+ */
+export function hostThemeCss(readVar: (name: string) => string): string {
+  const decls: string[] = [];
+  for (const [webviewVar, appVar] of VAR_MAP) {
+    // The values land inside a `<style>` element in `srcDoc`, where a `<` or a
+    // `>` would end the element and start markup. Nothing can currently put one
+    // there — `validate-theme.ts` refuses a token that is not a colour — but
+    // that is a guard in another subsystem, two imports away, and this one is a
+    // character class. An angle bracket has no meaning in a custom property
+    // value, so dropping it costs nothing it could have meant.
+    const value = readVar(appVar).replace(/[<>]/g, "").trim();
+    if (value) decls.push(`${webviewVar}: ${value};`);
+  }
+  if (!decls.length) return "";
+  return `:root[data-ppm-theme] { ${decls.join(" ")} }`;
+}
+
+/** Read the mode and tokens the app has actually applied to `<html>`. */
+export function readHostTheme(root: HTMLElement): HostTheme {
+  const computed = getComputedStyle(root);
+  return {
+    mode: root.classList.contains("dark") ? "dark" : "light",
+    css: hostThemeCss((name) => computed.getPropertyValue(name)),
+  };
+}
+
+/** Message the host posts into the iframe when the theme changes. */
+export const HOST_THEME_MESSAGE = "ppm:theme";
+
+/**
+ * Applies a `ppm:theme` message inside the iframe.
+ *
+ * Live updates arrive this way rather than by rewriting `srcDoc`, which would
+ * reload the panel — a graph would refetch every commit and lose its scroll
+ * position because the user switched themes.
+ */
+const HOST_THEME_SHIM = `<script>
+window.addEventListener("message",function(e){
+  if(e.source!==window.parent)return;
+  var m=e.data;
+  if(!m||m.command!=="${HOST_THEME_MESSAGE}")return;
+  document.documentElement.setAttribute("data-ppm-theme",m.mode==="dark"?"dark":"light");
+  var el=document.getElementById("ppm-theme-vars");
+  if(el)el.textContent=m.css||"";
+});
+</script>`;
+
+const HTML_TAG = /<html(\s[^>]*)?>/i;
+
+/**
+ * Seed the theme into a panel's HTML.
+ *
+ * The style element goes last in `<head>`, after the panel's own stylesheet, so
+ * equal specificity resolves in the host's favour.
+ */
+export function injectHostTheme(html: string, theme: HostTheme): string {
+  if (!html) return html;
+  const withMode = html.replace(
+    HTML_TAG,
+    (tag, attrs: string | undefined) => `<html${attrs ?? ""} data-ppm-theme="${theme.mode}">`,
+  );
+  const block = `<style id="ppm-theme-vars">${theme.css}</style>${HOST_THEME_SHIM}`;
+  const headEnd = withMode.toLowerCase().indexOf("</head>");
+  if (headEnd !== -1) return withMode.slice(0, headEnd) + block + withMode.slice(headEnd);
+  return withMode + block;
+}

package/src/web/components/floating-window/pip/pip-caption-button.tsx

@@ -23,7 +23,7 @@
  *    afterwards (a chat acquiring a name) keeps the old caption until it is popped out again.
  */
 
-import { PictureInPicture2 } from "lucide-react";
+import { PictureInPicture2 } from "@/lib/icons";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { TITLEBAR_HEIGHT } from "../window-chrome-contract";