@hienlh/ppm 0.21.0 → 0.22.1

package/src/web/lib/file-icons.tsx

@@ -14,25 +14,21 @@
  * nodes for React to reconcile on every expand. And a row is draggable — an
  * inner `<img>` supplies its own drag image and has to be talked out of it.
  *
- * Resolution order is the extension theme's own: whole filename, then double
- * extension (`.spec.ts`), then extension. `fileIconElement` is for the slots
- * that want a component rather than an element — the tab bar and the palette
- * both take an `icon: ElementType`.
+ * Name resolution is next door in `file-icon-name.ts`, which is pure and
+ * testable; this file is the drawing and the one subscription that decides
+ * whether `.service.ts` is a Nest provider or an Angular service.
+ * `fileIconElement` is for the slots that want a component rather than an
+ * element — the tab bar and the palette both take an `icon: ElementType`.
  */
 import type { FC } from "react";
 // `?url` gives the built stylesheet's address without putting it on the module
 // graph: nothing is fetched until the `<link>` below is appended.
 import ICON_CSS_URL from "@/styles/file-icons.generated.css?url";
 import { basename, cn } from "@/lib/utils";
-import {
-  DEFAULT_FILE_ICON,
-  DEFAULT_FOLDER_ICON,
-  DEFAULT_FOLDER_OPEN_ICON,
-  EXTENSION_ICONS,
-  FILENAME_ICONS,
-  FOLDER_ICONS,
-  FOLDER_OPEN_ICONS,
-} from "./file-icons.generated";
+import { fileIconName, folderIconName } from "./file-icon-name";
+import { useIconFramework } from "@/stores/project-framework-store";
+
+export { fileIconName, folderIconName };
 
 /**
  * The artwork is fetched when something first asks for an icon, not before.
@@ -40,10 +36,16 @@ import {
  * Imported at module scope it was not lazy in any useful sense: this module is
  * reached from `tab-type-icons.ts`, which the tab bar, the mobile nav and the
  * dock header all import eagerly, so Vite hoisted the stylesheet into a
- * `<link rel="stylesheet">` in `index.html` — render-blocking on every load,
- * measured at 499,375 bytes raw / 127,333 gzip / 79,836 brotli. The app's
- * entire other stylesheet is 25,956 gzip, so the icons were 4.9x everything
- * else put together, in front of the first paint.
+ * `<link rel="stylesheet">` in `index.html` — render-blocking on every load.
+ * Re-measured against this branch's full 1193-glyph port rather than the 224 it
+ * was first written for: **1,952,181 bytes raw / 535,335 gzip / 391,418 brotli**
+ * against the app's entire other stylesheet at 26,340 gzip, so the icons are
+ * **20x** everything else put together. (The figure quoted here used to be
+ * 499,375 raw / 4.9x, which was the truth at 224 glyphs and is a quarter of the
+ * truth now.) It is a first-*use* cost rather than a first-load one, which is
+ * the whole point of the boundary — but a phone that opens one file listing
+ * downloads 382 KiB of artwork to do it, and that number belongs in the comment
+ * rather than in someone's memory.
  *
  * So it is fetched at runtime by a `<link>` this function appends. The cost is
  * honest and visible: an icon that renders before the stylesheet lands is a
@@ -84,40 +86,6 @@ function requestIconCss(): void {
   document.head.appendChild(link);
 }
 
-/** The icon name for a file, by name alone. */
-export function fileIconName(path: string): string {
-  const name = basename(path).toLowerCase();
-  const byName = FILENAME_ICONS[name];
-  if (byName) return byName;
-
-  const parts = name.split(".");
-  if (parts.length > 2) {
-    // `.spec.ts`, `.d.ts`, `.config.js` — the theme gives these their own
-    // glyphs, and matching only the last extension would lose them.
-    const double = `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
-    const byDouble = EXTENSION_ICONS[double];
-    if (byDouble) return byDouble;
-  }
-  if (parts.length > 1) {
-    const byExt = EXTENSION_ICONS[parts[parts.length - 1]!];
-    if (byExt) return byExt;
-  }
-  // A dotfile with no extension (`.gitignore` handled above, `.foorc` not) has
-  // its name as its only extension.
-  if (name.startsWith(".")) {
-    const byDot = EXTENSION_ICONS[name.slice(1)];
-    if (byDot) return byDot;
-  }
-  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);
-}
-
 export type FileIconKind = "file" | "directory";
 
 export interface FileIconProps {
@@ -140,19 +108,28 @@ export interface FileIconProps {
  * blockify it for free; the tab strip wraps its icon in a `<span class="relative">`
  * for the notification dot, and there the icon simply did not render — the one
  * place an inline `<svg>` would have worked without saying so.
+ *
+ * The framework overlay is read here rather than threaded through as a prop
+ * because there are eight call sites and two of them — the tab bar and the
+ * command palette — go through `fileIconElement`, which hands out a *component*
+ * and has no project in scope at all. The subscription costs nothing: the tree
+ * is virtualised, so only the ~40 visible rows are mounted, and `TreeRow`
+ * already reads four stores.
  */
-function iconClass(icon: string, className?: string): string {
-  return cn(
-    "inline-block shrink-0 size-4 bg-center bg-no-repeat bg-contain",
-    `vsi-${icon}`,
-    className,
-  );
-}
-
 export function FileIcon({ name, kind = "file", open, className }: FileIconProps) {
   requestIconCss();
-  const icon = kind === "directory" ? folderIconName(name, open) : fileIconName(name);
-  return <span aria-hidden="true" className={iconClass(icon, className)} />;
+  const framework = useIconFramework();
+  const icon = kind === "directory" ? folderIconName(name, open) : fileIconName(name, framework);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-block shrink-0 size-4 bg-center bg-no-repeat bg-contain",
+        `vsi-${icon}`,
+        className,
+      )}
+    />
+  );
 }
 
 /**
@@ -163,14 +140,29 @@ export function FileIcon({ name, kind = "file", open, className }: FileIconProps
  * function per render would unmount and remount the node on every keystroke in
  * the palette's filter.
  *
- * Keyed by the resolved glyph rather than by the path that resolved to it. A
- * path key is wrong twice over: `src/a/index.ts` and `src/b/index.ts` are two
- * entries rendering the same span, and a repository indexed by the palette has
- * as many keys as it has files — which is why the old key needed an eviction
- * rule, and why that rule was `clear()`, remounting every icon on screen at the
- * 501st distinct path. There are 224 glyphs, so keying on those makes the cache
- * bounded by construction and eviction unnecessary.
+ * Keyed by the *basename*, not the whole path, because the basename is all
+ * `fileIconName` reads. A path key made `src/a/index.ts` and `src/b/index.ts`
+ * two entries rendering the same span, so a repository indexed by the palette
+ * had as many keys as it had files — which is why the key needed an eviction
+ * rule at all. It cannot be keyed by the resolved glyph: `FileIcon` subscribes
+ * to the project's framework preset, so the glyph a name resolves to changes
+ * under it and a precomputed one would stop following.
+ *
+ * Eviction drops the oldest quarter rather than calling `clear()`. A `Map`
+ * keeps insertion order, and clearing hands every caller a new component type
+ * at once — remounting every icon on screen, which is the one thing this cache
+ * exists to prevent.
+ *
+ * Insertion order, not recency: this is deliberately *not* an LRU, and the
+ * difference is visible exactly once. Scrolling back through a tree with more
+ * than 2000 distinct basenames can evict a name that is still on screen —
+ * whichever was cached first, however recently it was used — and remount those
+ * icons one time. Re-entering them puts them back at the end of the order.
+ * Keeping a real LRU would mean touching the Map on every `fileIconElement`
+ * call, which the palette makes hundreds of per keystroke, to avoid one
+ * remount in a tree that size.
  */
+const ELEMENT_CACHE_MAX = 2000;
 const elementCache = new Map<string, FC<{ className?: string }>>();
 
 export function fileIconElement(
@@ -180,13 +172,19 @@ export function fileIconElement(
   // The palette asks for hundreds of these before any of them renders, so the
   // fetch starts here too rather than waiting for the first mount.
   requestIconCss();
-  const icon = kind === "directory" ? folderIconName(name) : fileIconName(name);
-  const cached = elementCache.get(icon);
+  const base = basename(name).toLowerCase();
+  const key = `${kind}:${base}`;
+  const cached = elementCache.get(key);
   if (cached) return cached;
   const Bound: FC<{ className?: string }> = ({ className }) => (
-    <span aria-hidden="true" className={iconClass(icon, className)} />
+    <FileIcon name={name} kind={kind} className={className} />
   );
-  Bound.displayName = `FileIcon(${icon})`;
-  elementCache.set(icon, Bound);
+  Bound.displayName = `FileIcon(${base})`;
+  if (elementCache.size >= ELEMENT_CACHE_MAX) {
+    for (const stale of [...elementCache.keys()].slice(0, ELEMENT_CACHE_MAX >> 2)) {
+      elementCache.delete(stale);
+    }
+  }
+  elementCache.set(key, Bound);
   return Bound;
 }

package/src/web/lib/flatten-expansions.ts

@@ -27,10 +27,23 @@ export function flattenWithExpansions(
 ): ChatMessage[] {
   if (expansions.size === 0) return messages;
   const out: ChatMessage[] = [];
-  for (const m of messages) {
-    const pre = m.id ? expansions.get(m.id) : undefined;
-    if (pre && pre.length > 0) out.push(...pre);
-    out.push(m);
-  }
+  // Recursive, because each expansion now arrives as one compaction segment
+  // headed by the summary *before* it — so expanding that one puts its messages
+  // under a key that only appears inside another expansion. A flat pass would
+  // fetch them and render nothing, which looks exactly like the load failing.
+  const seen = new Set<string>();
+  const visit = (list: ChatMessage[]): void => {
+    for (const m of list) {
+      const pre = m.id ? expansions.get(m.id) : undefined;
+      // `seen` guards the walk: a key that somehow resolved to a list
+      // containing itself would otherwise recurse until the stack gave out.
+      if (pre && pre.length > 0 && m.id && !seen.has(m.id)) {
+        seen.add(m.id);
+        visit(pre);
+      }
+      out.push(m);
+    }
+  };
+  visit(messages);
   return out;
 }

package/src/web/lib/message-ordinals.ts

@@ -0,0 +1,23 @@
+import type { ChatMessage } from "../../types/chat";
+
+/**
+ * The 1-based position of each user message among the user messages, with 0 for
+ * every other role. It is the stable anchor a version group is keyed on, so a
+ * fork keeps pointing at the same turn.
+ *
+ * Counted in one pass and kept here rather than in the transcript component:
+ * the obvious per-row form is a prefix `slice().reduce()`, which is O(n²) and
+ * costs nothing at the couple of hundred messages a live session shows — then
+ * roughly six million operations per render once a long session's history has
+ * been lazily scrolled in, which is precisely when it must not.
+ */
+export function userMessageOrdinals(messages: Pick<ChatMessage, "role">[]): number[] {
+  const out = new Array<number>(messages.length);
+  let seen = 0;
+  for (let i = 0; i < messages.length; i++) {
+    const isUser = messages[i]!.role === "user";
+    if (isUser) seen++;
+    out[i] = isUser ? seen : 0;
+  }
+  return out;
+}

package/src/web/lib/provider-logos.tsx

@@ -0,0 +1,143 @@
+/**
+ * The AI providers' own logos, for every surface that marks a chat with the
+ * provider running it.
+ *
+ * Artwork from `@lobehub/icons-static-svg@1.95.0` (MIT, © LobeHub —
+ * github.com/lobehub/lobe-icons), copied in rather than depended on: four
+ * glyphs do not carry a package of a thousand SVGs. To change one, re-fetch
+ * that exact version. This is brand artwork and a third system beside the two
+ * that already exist — the app's own chrome is `@/lib/icons` (Fluent) and file
+ * artwork is `@/lib/file-icons` (vscode-icons).
+ *
+ * Two things here are load-bearing rather than stylistic.
+ *
+ * A gradient is referenced by id, and every copy of a logo would otherwise
+ * declare the *same* id. `url(#id)` resolves against the first such element in
+ * the document, and a gradient defined inside a `display: none` subtree paints
+ * nothing — which in PPM is the normal case, because hidden tabs stay mounted.
+ * One chat tab in the background is enough to blank the Codex and Gemini marks
+ * everywhere else on the page, with no error anywhere. So every instance mints
+ * its own ids with `useId` (React 19.2 returns `_r_0_`-shaped ids, which are
+ * valid inside `url(#…)`).
+ *
+ * Codex's *colour* file is an app tile — a white rounded square with the mark
+ * inset at 75% — and a white square is a hole punched in every dark theme. The
+ * tile is dropped; the mono file's full-size geometry takes the tile's gradient
+ * instead, so the mark fills the same box as its neighbours.
+ */
+import { useId, type ReactElement, type SVGProps } from "react";
+
+export type ProviderLogoProps = SVGProps<SVGSVGElement>;
+export type ProviderLogo = (props: ProviderLogoProps) => ReactElement;
+
+function Logo({ name, children, ...rest }: ProviderLogoProps & { name: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={24}
+      height={24}
+      aria-hidden="true"
+      focusable="false"
+      // Which logo this is, readable from rendered markup and in devtools —
+      // the same hook `fluent-icon.tsx` gives the product icons via `data-icon`,
+      // and for the same reason: no class name for stylesheets to depend on.
+      data-provider-logo={name}
+      {...rest}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function ClaudeLogo(props: ProviderLogoProps) {
+  return (
+    <Logo name="claude" {...props}>
+      <path
+        d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
+        fill="#D97757"
+      />
+    </Logo>
+  );
+}
+
+export function CodexLogo(props: ProviderLogoProps) {
+  const gradient = `${useId()}codex`;
+  return (
+    <Logo name="codex" {...props}>
+      <defs>
+        <linearGradient id={gradient} gradientUnits="userSpaceOnUse" x1="12" x2="12" y1="0" y2="24">
+          <stop stopColor="#B1A7FF" />
+          <stop offset=".5" stopColor="#7A9DFF" />
+          <stop offset="1" stopColor="#3941FF" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z"
+        fill={`url(#${gradient})`}
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </Logo>
+  );
+}
+
+/** Cursor publishes no colour variant — the mark is monochrome by design. */
+export function CursorLogo(props: ProviderLogoProps) {
+  return (
+    <Logo name="cursor" fill="currentColor" {...props}>
+      <path
+        d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z"
+        fillRule="evenodd"
+      />
+    </Logo>
+  );
+}
+
+export function GeminiLogo(props: ProviderLogoProps) {
+  const id = useId();
+  // One silhouette painted five times: a blue base and three colour washes that
+  // fade out, which is how the upstream mark gets its gradient.
+  const fills = [
+    "#3186FF",
+    `url(#${id}green)`,
+    `url(#${id}red)`,
+    `url(#${id}yellow)`,
+  ];
+  return (
+    <Logo name="gemini" {...props}>
+      <defs>
+        <linearGradient id={`${id}green`} gradientUnits="userSpaceOnUse" x1="7" x2="11" y1="15.5" y2="12">
+          <stop stopColor="#08B962" />
+          <stop offset="1" stopColor="#08B962" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient id={`${id}red`} gradientUnits="userSpaceOnUse" x1="8" x2="11.5" y1="5.5" y2="11">
+          <stop stopColor="#F94543" />
+          <stop offset="1" stopColor="#F94543" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient id={`${id}yellow`} gradientUnits="userSpaceOnUse" x1="3.5" x2="17.5" y1="13.5" y2="12">
+          <stop stopColor="#FABC12" />
+          <stop offset=".46" stopColor="#FABC12" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      {fills.map((fill) => (
+        <path
+          key={fill}
+          d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"
+          fill={fill}
+        />
+      ))}
+    </Logo>
+  );
+}
+
+/**
+ * Provider id → logo. An id absent here has no artwork and callers fall back:
+ * the tab strip to its generic chat glyph, the pickers to a lettered tile.
+ */
+export const PROVIDER_LOGOS: Record<string, ProviderLogo> = {
+  claude: ClaudeLogo,
+  codex: CodexLogo,
+  cursor: CursorLogo,
+  gemini: GeminiLogo,
+};

package/src/web/lib/tab-type-icons.ts

@@ -13,6 +13,9 @@ import {
 import type { ElementType } from "react";
 import type { TabType } from "@/stores/tab-store";
 import { fileIconElement } from "@/lib/file-icons";
+import { PROVIDER_LOGOS } from "@/lib/provider-logos";
+import { viewTypeIcon } from "@/lib/extension-icons";
+import { useExtensionStore } from "@/stores/extension-store";
 
 export const TAB_TYPE_ICONS: Record<TabType, LucideIcon> = {
   terminal: Terminal,
@@ -22,6 +25,7 @@ export const TAB_TYPE_ICONS: Record<TabType, LucideIcon> = {
   sqlite: Database,
   postgres: Database,
   "git-diff": FileDiff,
+  "branch-review": FileDiff,
   settings: Settings,
   extension: Puzzle,
   "extension-webview": Puzzle,
@@ -53,11 +57,32 @@ export interface TabIconSubject {
  * which tab is which, and that is just as true of the dock header and the mobile
  * tab switcher as it is of the desktop strip. The tab's own metadata is
  * preferred over its title, which a rename or a "(hash)" suffix can have edited.
+ *
+ * A chat tab is labelled the same way and for the same reason, with the logo of
+ * the provider running it. A tab carrying no provider is a chat that has not
+ * started yet, and one of those runs Claude — `ChatTab`'s own default — so it is
+ * drawn as one rather than as a question mark.
  */
 export function getTabIcon(tab: TabIconSubject): ElementType {
   if (FILE_TAB_TYPES.has(tab.type)) {
     const path = (tab.metadata?.filePath as string | undefined) || tab.title;
     if (path) return fileIconElement(path);
   }
+  if (tab.type === "chat") {
+    const logo = PROVIDER_LOGOS[(tab.metadata?.providerId as string | undefined) ?? "claude"];
+    if (logo) return logo;
+  }
+  // A panel an extension opened is labelled with the icon its manifest gave the
+  // command that opens it — read here rather than stored on the tab, so a tab
+  // that was already open when the extension declared one picks it up too.
+  // Falls back to the puzzle piece, which is the honest answer for a panel
+  // whose extension has not said what it is.
+  if (tab.type === "extension" || tab.type === "extension-webview") {
+    const contributed = viewTypeIcon(
+      useExtensionStore.getState().contributions,
+      tab.metadata?.viewType as string | undefined,
+    );
+    if (contributed) return contributed;
+  }
   return getTabTypeIcon(tab.type);
 }

package/src/web/stores/file-store.ts

@@ -77,8 +77,12 @@ interface FileStore {
   error: string | null;
   expandedPaths: Set<string>;
   loadedPaths: Set<string>;
-  /** In-flight AbortControllers keyed by folder path */
-  inflight: Map<string, AbortController>;
+  /**
+   * Directory loads on their way, by path. The promise is held alongside the
+   * controller so a second caller for the same path can wait for the answer
+   * already coming rather than asking for it again.
+   */
+  inflight: Map<string, InflightLoad>;
   indexStatus: "idle" | "loading" | "ready" | "error";
   selectedFiles: string[];
   inlineAction: InlineAction | null;
@@ -131,6 +135,13 @@ function queuePrefetchFor(
   );
 }
 
+interface InflightLoad {
+  controller: AbortController;
+  promise: Promise<void>;
+  /** Whether this load still counts as a prefetch — see the join in `loadChildren`. */
+  prefetch: boolean;
+}
+
 export const useFileStore = create<FileStore>((set, get) => ({
   tree: [],
   fileIndex: [],
@@ -138,7 +149,7 @@ export const useFileStore = create<FileStore>((set, get) => ({
   error: null,
   expandedPaths: new Set<string>(),
   loadedPaths: new Set<string>(),
-  inflight: new Map<string, AbortController>(),
+  inflight: new Map<string, InflightLoad>(),
   indexStatus: "idle",
   selectedFiles: [],
   inlineAction: null,
@@ -174,45 +185,72 @@ export const useFileStore = create<FileStore>((set, get) => ({
 
     // Idempotent guard — skip if already loaded
     if (state.loadedPaths.has(folderPath)) return;
-    // Prefetch never preempts an in-flight user-initiated request
-    if (opts?.prefetch && state.inflight.has(folderPath)) return;
 
-    // Abort any existing in-flight request for this path
+    // A request for this path is already on its way, and it is the same URL
+    // carrying the same answer — so wait for it. It used to be aborted and
+    // reissued, which meant clicking a folder while its prefetch was still in
+    // flight threw that work away and paid the round trip a second time. The
+    // prefetch exists to hide exactly that round trip, so the click that
+    // benefits most from it was the one that cancelled it.
     const existing = state.inflight.get(folderPath);
-    if (existing) existing.abort();
+    if (existing) {
+      // Joining is not the same as inheriting. A prefetch deliberately does not cascade — one
+      // level ahead only — so a *click* that joined one used to end the chain at exactly the
+      // folder the user just opened, which is the folder whose children are most likely to be
+      // wanted next. The load has not resolved yet and the flag is read when it does, so
+      // upgrading it here is enough.
+      if (!opts?.prefetch) existing.prefetch = false;
+      return existing.promise;
+    }
 
     const controller = new AbortController();
+    // The entry goes into the map before the request starts, so anything asking
+    // for this path finds it; `promise` is filled in on the next line, and no
+    // other code can run in between.
+    const load: InflightLoad = {
+      controller,
+      promise: undefined as unknown as Promise<void>,
+      prefetch: !!opts?.prefetch,
+    };
     const inflight = new Map(state.inflight);
-    inflight.set(folderPath, controller);
+    inflight.set(folderPath, load);
     set({ inflight });
 
-    try {
-      const encodedPath = encodeURIComponent(folderPath);
-      const data = await api.get<FileDirEntry[]>(
-        `${projectUrl(projectName)}/files/list?path=${encodedPath}`,
-        { signal: controller.signal },
-      );
+    const clearInflight = () => {
+      const next = new Map(get().inflight);
+      // Only our own entry — a reset may already have replaced the map.
+      if (next.get(folderPath) === load) next.delete(folderPath);
+      return next;
+    };
+
+    load.promise = (async () => {
+      try {
+        const encodedPath = encodeURIComponent(folderPath);
+        const data = await api.get<FileDirEntry[]>(
+          `${projectUrl(projectName)}/files/list?path=${encodedPath}`,
+          { signal: controller.signal },
+        );
+
+        // Check if aborted between request start and completion (defense in depth)
+        if (controller.signal.aborted) return;
+
+        const children = entriesToNodes(data, folderPath);
+        const currentState = get();
+        const newTree = mergeChildren(currentState.tree, folderPath, children);
+        const newLoadedPaths = new Set(currentState.loadedPaths);
+        newLoadedPaths.add(folderPath);
+        set({ tree: newTree, loadedPaths: newLoadedPaths, inflight: clearInflight() });
+        // One level ahead only: prefetched loads don't cascade further. Read off the load
+        // rather than off `opts`, because a click that joined this request has already said
+        // it is no longer only a prefetch.
+        if (!load.prefetch) queuePrefetchFor(get, projectName, children);
+      } catch (err) {
+        set({ inflight: clearInflight() });
+        if (err instanceof Error && err.name === "AbortError") return;
+      }
+    })();
 
-      // Check if aborted between request start and completion (defense in depth)
-      if (controller.signal.aborted) return;
-
-      const children = entriesToNodes(data, folderPath);
-      const currentState = get();
-      const newTree = mergeChildren(currentState.tree, folderPath, children);
-      const newLoadedPaths = new Set(currentState.loadedPaths);
-      newLoadedPaths.add(folderPath);
-      const newInflight = new Map(currentState.inflight);
-      newInflight.delete(folderPath);
-      set({ tree: newTree, loadedPaths: newLoadedPaths, inflight: newInflight });
-      // One level ahead only: prefetched loads don't cascade further
-      if (!opts?.prefetch) queuePrefetchFor(get, projectName, children);
-    } catch (err) {
-      if (err instanceof Error && err.name === "AbortError") return;
-      // Remove from inflight on error
-      const newInflight = new Map(get().inflight);
-      newInflight.delete(folderPath);
-      set({ inflight: newInflight });
-    }
+    return load.promise;
   },
 
   loadPathsBatch: async (projectName: string, paths: string[]) => {
@@ -334,7 +372,7 @@ export const useFileStore = create<FileStore>((set, get) => ({
   reset: () => {
     cancelPrefetch();
     // Abort all in-flight requests
-    for (const ctrl of get().inflight.values()) ctrl.abort();
+    for (const load of get().inflight.values()) load.controller.abort();
     set({
       tree: [],
       fileIndex: [],

package/src/web/stores/panel-utils.ts

@@ -218,6 +218,11 @@ export function deriveTabId(type: TabType, metadata?: Record<string, unknown>):
     }
     case "git-diff":
       return `git-diff:${metadata?.filePath ?? "unknown"}`;
+    // One review per project: the tab carries its own base/head pickers, so
+    // keying by the ref pair would leave a second tab unreachable the moment
+    // someone changed them.
+    case "branch-review":
+      return `branch-review:${metadata?.projectName ?? "unknown"}`;
     case "conflict-editor":
       return `conflict-editor:${metadata?.filePath ?? "unknown"}`;
     case "settings":