@hienlh/ppm 0.21.0 → 0.22.0

package/src/web/components/chat/provider-selector.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
 import { Check } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
+import { PROVIDER_LOGOS } from "@/lib/provider-logos";
+import { cn } from "@/lib/utils";
 
 interface ProviderInfo {
   id: string;
@@ -13,12 +15,26 @@ interface ProviderSelectorProps {
   projectName: string;
 }
 
-const PROVIDER_ICONS: Record<string, string> = {
-  claude: "C",
-  cursor: "▶",
-  codex: "◆",
-  gemini: "G",
-};
+/**
+ * The provider's own logo. An id with no artwork — or no id at all, which is a
+ * real case, since a chat search result carries no provider — keeps the lettered
+ * tile these all used to be, so it still reads as a provider rather than as a
+ * gap in the row.
+ */
+function ProviderIcon({ providerId, className }: { providerId: string | undefined; className: string }) {
+  const Logo = providerId ? PROVIDER_LOGOS[providerId] : undefined;
+  if (Logo) return <Logo className={cn("shrink-0", className)} />;
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center rounded bg-surface-elevated text-[10px] font-bold text-text-subtle shrink-0",
+        className,
+      )}
+    >
+      ?
+    </span>
+  );
+}
 
 /**
  * Provider selector chip + popup — matches ModeSelector style.
@@ -79,7 +95,6 @@ export function ProviderSelector({ value, onChange, projectName }: ProviderSelec
   if (providers.length <= 1) return null;
 
   const current = providers.find((p) => p.id === value);
-  const icon = PROVIDER_ICONS[value] || "?";
 
   return (
     <div className="relative">
@@ -90,9 +105,7 @@ export function ProviderSelector({ value, onChange, projectName }: ProviderSelec
         className="inline-flex items-center gap-1.5 px-[9px] py-1 rounded-full text-[11.5px] text-text-2 bg-panel-2 border border-border-soft hover:text-text-primary hover:border-border transition-colors"
         aria-label={`AI Provider: ${current?.name ?? value}`}
       >
-        <span className="inline-flex h-3.5 w-3.5 items-center justify-center rounded text-[9px] font-bold bg-surface-elevated shrink-0">
-          {icon}
-        </span>
+        <ProviderIcon providerId={value} className="size-3.5" />
         <span className="max-w-[80px] truncate capitalize">{current?.name ?? value}</span>
       </button>
 
@@ -112,7 +125,6 @@ export function ProviderSelector({ value, onChange, projectName }: ProviderSelec
           </div>
           <div className="py-1">
             {providers.map((p, idx) => {
-              const pIcon = PROVIDER_ICONS[p.id] || "?";
               const isActive = p.id === value;
               return (
                 <button
@@ -124,9 +136,7 @@ export function ProviderSelector({ value, onChange, projectName }: ProviderSelec
                   onClick={() => { onChange(p.id); setOpen(false); }}
                   className={`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-elevated focus:bg-surface-elevated focus:outline-none ${isActive ? "bg-surface-elevated" : ""}`}
                 >
-                  <span className="inline-flex h-5 w-5 items-center justify-center rounded text-[11px] font-bold bg-surface-elevated text-text-subtle shrink-0">
-                    {pIcon}
-                  </span>
+                  <ProviderIcon providerId={p.id} className="size-4" />
                   <span className="flex-1 text-sm font-medium text-text-primary capitalize">{p.name}</span>
                   {isActive && <Check className="size-4 shrink-0 text-primary" />}
                 </button>
@@ -139,15 +149,13 @@ export function ProviderSelector({ value, onChange, projectName }: ProviderSelec
   );
 }
 
-/** Small provider badge for session lists */
-export function ProviderBadge({ providerId }: { providerId: string }) {
-  const icon = PROVIDER_ICONS[providerId] || "?";
+/** Small provider badge for session lists. */
+export function ProviderBadge({ providerId }: { providerId: string | undefined }) {
+  // The tooltip sits on a wrapper on purpose: a `title` *attribute* on an `<svg>`
+  // draws nothing (SVG wants a `<title>` child), so the name would be lost.
   return (
-    <span
-      className="inline-flex h-4 w-4 items-center justify-center rounded text-[10px] font-bold bg-surface-elevated text-text-subtle shrink-0"
-      title={providerId}
-    >
-      {icon}
+    <span className="inline-flex shrink-0" title={providerId}>
+      <ProviderIcon providerId={providerId} className="size-4" />
     </span>
   );
 }

package/src/web/components/chat/session-history-list.tsx

@@ -1,4 +1,4 @@
-import { Loader2, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Bot, Tags, CalendarX2, MessageSquare, BotMessageSquare } from "@/lib/icons";
+import { Loader2, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Bot, Tags, CalendarX2, BotMessageSquare } from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { cn } from "@/lib/utils";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";
@@ -34,7 +34,7 @@ function SearchResultsList({ search, onOpen }: { search: ReturnType<typeof useCh
             onClick={() => onOpen(r)}
             className="group relative flex w-full items-center gap-2 px-2 py-1.5 text-left hover:bg-surface-elevated transition-colors"
           >
-            <MessageSquare className="size-4 shrink-0 text-text-subtle" />
+            <ProviderBadge providerId={r.providerId} />
             <span className="min-w-0 flex-1">
               <span className="flex items-center gap-1.5">
                 <span className="truncate text-[13px] font-medium">{r.title || "Untitled"}</span>

package/src/web/components/chat/session-list-panel.tsx

@@ -1,10 +1,11 @@
 import { useState, useEffect, useCallback } from "react";
-import { ChevronDown, ChevronUp, MessageSquare, Pin, PinOff, Search, X } from "@/lib/icons";
+import { ChevronDown, ChevronUp, Pin, PinOff, Search, X } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { formatRelativeDate } from "@/lib/format-date";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useProjectTags, TagChipBar } from "./tag-filter-chips";
 import { SessionContextMenu } from "./session-context-menu";
+import { ProviderBadge } from "./provider-selector";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
 import type { SessionInfo, ProjectTag } from "../../../types/chat";
@@ -170,7 +171,7 @@ function SessionRow({ session, projectName, projectTags, onSelect, onTogglePin,
           notif && notificationTint(notif.type),
         )}
       >
-        <MessageSquare className="size-3.5 shrink-0 text-text-subtle" />
+        <ProviderBadge providerId={session.providerId} />
         {session.tag && (
           <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: session.tag.color }} title={session.tag.name} />
         )}

package/src/web/components/editor/binary-diff-view.tsx

@@ -0,0 +1,212 @@
+/**
+ * The diff of a file the text editor cannot show.
+ *
+ * VS Code's behaviour, in three shapes. An image with two versions is drawn on
+ * both sides; an image with *one* — added, or deleted — is drawn alone and full
+ * width, because there is nothing to compare and a pane captioned "not in HEAD"
+ * is chrome around an empty box; anything else gets the placeholder, since the
+ * only honest thing to say about two blobs of bytes is that they are not text.
+ *
+ * Choosing the text editor is not the same as asking for the bytes. VS Code
+ * answers that choice with the placeholder too, and only "Open Anyway" prints
+ * the file — which is the point of the gate: a megabyte of U+FFFD is what you
+ * get, and nobody means to ask for it twice. So `mode` decides which of the two
+ * views is on, and the confirmation belongs to the caller.
+ *
+ * No store is imported on purpose. The decisions here are asserted by rendering
+ * the component, and a zustand store reads localStorage at module scope, which
+ * throws under bun:test.
+ */
+import { useEffect, useRef, useState } from "react";
+import { AlertTriangle, FileWarning, Loader2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
+import { getAuthToken } from "@/lib/api-client";
+import { extensionOf, IMAGE_EXTS } from "@/components/os-explorer/can-open-in-ppm";
+import { formatBytes } from "@/components/chat/image-preview-geometry";
+
+/** One version of the file — the left pane is a revision, the right usually the disk. */
+export interface BinaryDiffSide {
+  /** Where its bytes are; null when the file does not exist on this side. */
+  url: string | null;
+  /** What this version is called: "HEAD", a short hash, "Working Tree". */
+  label: string;
+  /** Null when the file does not exist on this side — an addition or a deletion. */
+  size: number | null;
+}
+
+/** A side that exists, which is the only kind that can be drawn. */
+type PresentSide = BinaryDiffSide & { url: string };
+
+export type BinaryViewMode = "preview" | "text";
+
+/** True when the versions are worth drawing rather than describing. */
+export function canPreviewBinary(filePath: string): boolean {
+  return IMAGE_EXTS.has(extensionOf(filePath));
+}
+
+/** A full hash is unreadable as a column header; anything else is already a name. */
+export function shortRef(ref: string): string {
+  return /^[0-9a-f]{40}$/i.test(ref) ? ref.slice(0, 7) : ref;
+}
+
+/**
+ * VS Code's "Reopen Editor With…", narrowed to the two editors that apply here.
+ *
+ * A native `<select>` rather than a dropdown: the design guidelines ask for one
+ * on mobile, and it is the control `editor-language-picker` already uses. It is
+ * offered only for a file that *has* both views — a woff2 has only the text one,
+ * which is why the placeholder keeps its own button instead.
+ */
+export function BinaryViewSwitcher({
+  mode,
+  onChange,
+}: {
+  mode: BinaryViewMode;
+  onChange: (mode: BinaryViewMode) => void;
+}) {
+  return (
+    <select
+      value={mode}
+      onChange={(e) => onChange(e.target.value as BinaryViewMode)}
+      title="Show this file as an image or as text"
+      aria-label="Reopen editor with"
+      className="h-11 rounded border border-border bg-transparent px-1 text-xs text-foreground outline-none md:h-6"
+    >
+      <option value="preview">Image Preview</option>
+      <option value="text">Text Editor</option>
+    </select>
+  );
+}
+
+export function BinaryDiffView({
+  filePath,
+  mode,
+  original,
+  modified,
+  onOpenAnyway,
+}: {
+  filePath: string;
+  /** Which view the switcher is on; a file with no preview is always text. */
+  mode: BinaryViewMode;
+  original: BinaryDiffSide;
+  modified: BinaryDiffSide;
+  onOpenAnyway: () => void;
+}) {
+  if (mode === "text" || !canPreviewBinary(filePath)) {
+    return <BinaryPlaceholder onOpenAnyway={onOpenAnyway} />;
+  }
+
+  const present = [original, modified].filter((s): s is PresentSide => s.url !== null);
+  if (present.length < 2) {
+    const only = present[0];
+    // Neither side exists only if the file is gone from both, which leaves
+    // nothing to draw — the placeholder is then the honest answer.
+    return only ? <ImageSide side={only} /> : <BinaryPlaceholder onOpenAnyway={onOpenAnyway} />;
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col md:flex-row">
+      <ImageSide side={present[0]!} />
+      <div className="shrink-0 border-b border-border md:border-b-0 md:border-r" />
+      <ImageSide side={present[1]!} />
+    </div>
+  );
+}
+
+function BinaryPlaceholder({ onOpenAnyway }: { onOpenAnyway: () => void }) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-4 p-6 text-center">
+      <AlertTriangle className="size-10 text-warning" />
+      <p className="max-w-md text-sm leading-relaxed text-text-secondary">
+        The file is not displayed in the text editor because it is either binary or uses an
+        unsupported text encoding.
+      </p>
+      {/* `mt-auto` drops the button into the thumb zone on a phone — an auto
+          margin eats the free space the centring would have split — and `md:mt-0`
+          hands it back to the centred group on a desktop. */}
+      <Button onClick={onOpenAnyway} className="mt-auto h-11 w-full max-w-xs md:mt-0 md:w-auto md:px-5">
+        Open Anyway
+      </Button>
+    </div>
+  );
+}
+
+function ImageSide({ side }: { side: PresentSide }) {
+  return (
+    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <div className="flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-1.5">
+        <span className="truncate text-xs font-medium text-text-secondary">{side.label}</span>
+        {side.size !== null && (
+          <span className="shrink-0 text-xs text-text-subtle">{formatBytes(side.size)}</span>
+        )}
+      </div>
+      <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto bg-surface p-4">
+        <BlobImage url={side.url} />
+      </div>
+    </div>
+  );
+}
+
+function BlobImage({ url }: { url: string }) {
+  const { blobUrl, failed } = useAuthedBlob(url);
+
+  if (failed) {
+    return (
+      <div className="flex flex-col items-center gap-2 text-text-subtle">
+        <FileWarning className="size-8" />
+        <p className="text-xs">Failed to load.</p>
+      </div>
+    );
+  }
+  if (!blobUrl) return <Loader2 className="size-5 animate-spin text-text-subtle" />;
+  return <img src={blobUrl} alt="" className="max-h-full max-w-full object-contain" />;
+}
+
+/**
+ * The bytes at `url`, as a blob URL.
+ *
+ * `useBlobUrl` cannot serve this: it builds its own `/files/raw` URL from a
+ * project-relative path, and one of these panes is a *revision*, which only
+ * `/git/file-blob` can answer. An `<img src>` carries no Authorization header
+ * either, so the fetch happens here and the element gets a blob URL. The old
+ * URL is revoked only once the new one exists — revoking one still on screen
+ * renders a broken image with no error anywhere.
+ */
+function useAuthedBlob(url: string) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  const urlRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setFailed(false);
+    const token = getAuthToken();
+    fetch(url, { headers: token ? { Authorization: `Bearer ${token}` } : {} })
+      .then((r) => {
+        if (!r.ok) throw new Error(String(r.status));
+        return r.blob();
+      })
+      .then((blob) => {
+        if (cancelled) return;
+        const next = URL.createObjectURL(blob);
+        if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+        urlRef.current = next;
+        setBlobUrl(next);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  useEffect(
+    () => () => {
+      if (urlRef.current) URL.revokeObjectURL(urlRef.current);
+    },
+    [],
+  );
+
+  return { blobUrl, failed };
+}

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

@@ -10,6 +10,14 @@ import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal
 import { Loader2, FileCode, WrapText, UserRound } from "@/lib/icons";
 import { useInlineBlame } from "@/hooks/use-inline-blame";
 import { DOTENV_LANGUAGE_ID, isDotenvFile, registerDotenvLanguage } from "@/lib/monaco-dotenv-language";
+import {
+  BinaryDiffView,
+  BinaryViewSwitcher,
+  canPreviewBinary,
+  shortRef,
+  type BinaryViewMode,
+} from "./binary-diff-view";
+import type { FileFullDiff } from "../../../types/git";
 
 function getMonacoLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
@@ -43,7 +51,18 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
 
   const [diffText, setDiffText] = useState<string | null>(null);
   const [fileContents, setFileContents] = useState<{ original: string; modified: string } | null>(null);
-  const [fullFileDiff, setFullFileDiff] = useState<{ original: string; modified: string } | null>(null);
+  const [fullFileDiff, setFullFileDiff] = useState<FileFullDiff | null>(null);
+  // Two separate things, as in VS Code: which view the switcher is on, and
+  // whether "Open Anyway" has been pressed. Picking the text editor only gets
+  // you the warning — printing a megabyte of U+FFFD is the confirmed answer.
+  const [binaryMode, setBinaryMode] = useState<BinaryViewMode>("preview");
+  const [openAsText, setOpenAsText] = useState(false);
+  const chooseBinaryMode = (mode: BinaryViewMode) => {
+    setBinaryMode(mode);
+    // Going back to the image drops the confirmation, so choosing the text
+    // editor again asks again rather than dumping the bytes.
+    if (mode === "preview") setOpenAsText(false);
+  };
   const [loading, setLoading] = useState(!isInline);
   const [error, setError] = useState<string | null>(null);
   const { wordWrap, toggleWordWrap, mobileWordWrap, toggleMobileWordWrap } = useSettingsStore(
@@ -125,8 +144,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
       const params = new URLSearchParams({ file: inRepo });
       if (ref1) params.set("ref", ref1);
       if (ref2) params.set("ref2", ref2);
+      // A binary file answers with its sides empty unless they are asked for.
+      if (openAsText) params.set("text", "1");
       api
-        .get<{ original: string; modified: string }>(
+        .get<FileFullDiff>(
           gitRepo.gitUrl(`/file-full-diff?${params}`),
         )
         .then((data) => { setFullFileDiff(data); setLoading(false); })
@@ -148,7 +169,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
       .get<{ diff: string }>(url)
       .then((data) => { setDiffText(data.diff); setLoading(false); })
       .catch((err) => { setError(err instanceof Error ? err.message : "Failed to load diff"); setLoading(false); });
-  }, [filePath, projectName, ref1, ref2, file1, file2, isInline, gitRepo]);
+  }, [filePath, projectName, ref1, ref2, file1, file2, isInline, gitRepo, openAsText]);
+
+  // A different file starts as a preview again, whatever the last one chose.
+  useEffect(() => { setOpenAsText(false); setBinaryMode("preview"); }, [filePath, ref1, ref2]);
 
   const { original, modified } = useMemo(() => {
     if (isInline) return { original: inlineOriginal ?? "", modified: inlineModified ?? "" };
@@ -249,6 +273,52 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     );
   }
 
+  // A file the text editor cannot show. An image is drawn on both sides, and
+  // anything else says so in VS Code's words; "Open Anyway" asks the route for
+  // the same bytes decoded. `repoFile` is non-null by construction here — the
+  // fetch above returns early without it — but the URL builder has to say so.
+  if (fullFileDiff?.binary && !openAsText && filePath && projectName) {
+    const repoFile = gitRepo.repoPath(filePath);
+    const blobUrl = (rev: string) =>
+      repoFile == null
+        ? null
+        : gitRepo.gitUrl(`/file-blob?file=${encodeURIComponent(repoFile)}&ref=${encodeURIComponent(rev)}`);
+    return (
+      <div className="flex flex-col h-full">
+        {canPreviewBinary(filePath) && (
+          <div className="flex items-center justify-end gap-0.5 px-2 py-0.5 border-b border-border shrink-0">
+            <BinaryViewSwitcher mode={binaryMode} onChange={chooseBinaryMode} />
+          </div>
+        )}
+        <div className="flex-1 min-h-0">
+          <BinaryDiffView
+            filePath={filePath}
+            mode={binaryMode}
+            original={{
+              url: fullFileDiff.originalSize === null ? null : blobUrl(ref1 || "HEAD"),
+              label: shortRef(ref1 || "HEAD"),
+              size: fullFileDiff.originalSize,
+            }}
+            modified={{
+              // No `ref2` means the right-hand side is the file on disk, which
+              // `/files/raw` already serves — addressed from the *project*, not the
+              // repository, unlike everything git is asked about.
+              url:
+                fullFileDiff.modifiedSize === null
+                  ? null
+                  : ref2
+                    ? blobUrl(ref2)
+                    : `${projectUrl(projectName)}/files/raw?path=${encodeURIComponent(filePath)}`,
+              label: ref2 ? shortRef(ref2) : "Working Tree",
+              size: fullFileDiff.modifiedSize,
+            }}
+            onOpenAnyway={() => setOpenAsText(true)}
+          />
+        </div>
+      </div>
+    );
+  }
+
   // Catch diffs with metadata-only changes (mode, rename) where parseDiff returns empty
   if (!isInline && !isFileCompare && !fullFileDiff && !original && !modified) {
     return (
@@ -264,6 +334,9 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     <div className="flex flex-col h-full">
       {/* Toolbar */}
       <div className="flex items-center justify-end gap-0.5 px-2 py-0.5 border-b border-border shrink-0">
+        {fullFileDiff?.binary && filePath && canPreviewBinary(filePath) && (
+          <BinaryViewSwitcher mode="text" onChange={chooseBinaryMode} />
+        )}
         {canBlame && (
           <button type="button" onClick={toggleInlineBlame}
             title="Inline blame (Alt+B) — who last touched the cursor's line. Click a pane to annotate that side."