@hienlh/ppm 0.21.0 → 0.22.1

package/src/web/components/branch-review/branch-review-tab.tsx

@@ -0,0 +1,360 @@
+/**
+ * Branch Review — a whole branch's changes as one reviewable list.
+ *
+ * The surface this exists for: a feature branch with a dozen commits, where
+ * opening each commit in turn shows the same file several times in states that
+ * were never meant to be read on their own. This shows the end state of every
+ * file against where the branch left the base, once.
+ *
+ * Two things are load-bearing and easy to get wrong:
+ *
+ * - Every file is opened at `mergeBase`, the commit the server measured the
+ *   list against — never at `base` itself. The base branch keeps moving while a
+ *   branch is in review, and diffing against its tip renders the base's own
+ *   later commits as deletions inside the branch's review.
+ * - Paths from the git API are **repository**-relative, and `DiffViewer` takes
+ *   **project**-relative ones (it rebases them back itself). A project whose
+ *   root is a container of checkouts is where those differ, and handing the
+ *   viewer the wrong one shows an empty diff for a file that plainly exists.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { api } from "@/lib/api-client";
+import { useGitRepo } from "@/hooks/use-git-repo";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { DiffViewer } from "@/components/editor/diff-viewer";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { GitRepoBar, GitRepoChoice, GitNoRepo } from "@/components/git/git-repo-picker";
+import { FileIcon } from "@/lib/file-icons";
+import { buildTree, compactTree } from "@/lib/git-file-tree";
+import { StartEllipsis, TreeRow } from "./branch-review-tree-row";
+import {
+  Check, ChevronDown, ChevronRight, FileText, Loader2, RefreshCw, ListChecks, ArrowRight,
+} from "@/lib/icons";
+import {
+  firstReviewable, isReviewed, loadReviewed, nextUnreviewed, pruneReviewed, reviewKey, reviewedCount,
+  saveReviewed, setAllReviewed, toggleReviewed, type ReviewState,
+} from "@/lib/branch-review-state";
+import type { BranchDiff, BranchDiffFile, GitBranch } from "../../../types/git";
+
+/** The base a review defaults to: the branch a feature is normally cut from. */
+function defaultBase(branches: GitBranch[], current: string | undefined): string {
+  const local = branches.filter((b) => !b.remote && b.name !== current);
+  return (
+    local.find((b) => b.name === "main")?.name ??
+    local.find((b) => b.name === "master")?.name ??
+    local[0]?.name ??
+    ""
+  );
+}
+
+interface BranchReviewTabProps {
+  metadata?: Record<string, unknown>;
+}
+
+export function BranchReviewTab({ metadata }: BranchReviewTabProps) {
+  const projectName = metadata?.projectName as string | undefined;
+  const gitRepo = useGitRepo(projectName);
+  const isMobile = useIsMobile();
+
+  const [branches, setBranches] = useState<GitBranch[]>([]);
+  const [base, setBase] = useState("");
+  const [head, setHead] = useState("");
+  const [diff, setDiff] = useState<BranchDiff | null>(null);
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const [reviewed, setReviewed] = useState<ReviewState>({});
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [listOpen, setListOpen] = useState(false);
+
+  // Branch list → the two pickers, and the defaults a review opens on.
+  useEffect(() => {
+    if (!projectName || !gitRepo.repo) return;
+    let cancelled = false;
+    api
+      .get<GitBranch[]>(gitRepo.gitUrl("/branches"))
+      .then((list) => {
+        if (cancelled) return;
+        setBranches(list);
+        const current = list.find((b) => b.current)?.name;
+        setHead((h) => h || current || "");
+        setBase((b) => b || defaultBase(list, current));
+      })
+      .catch((e) => !cancelled && setError(e instanceof Error ? e.message : "Could not list branches"));
+    return () => { cancelled = true; };
+  }, [projectName, gitRepo]);
+
+  /**
+   * The comparison currently allowed to write. Change a picker twice on a large
+   * repository and two requests are in flight: the slower one answering last
+   * would put the previous pair's file list under the new pair's pickers, and
+   * `stateKey` below is derived from `base`/`head` — so review ticks would be
+   * read and written against a key that does not describe the list on screen.
+   * Its stale `setLoading(false)` also clears the spinner while the real request
+   * is still running.
+   *
+   * A ref rather than a flag in the effect's cleanup, because the Reload button
+   * calls `loadDiff` outside the effect and races exactly the same way.
+   */
+  const diffRequest = useRef<AbortController | null>(null);
+
+  const loadDiff = useCallback(async () => {
+    if (!projectName || !gitRepo.repo || !base || !head) return;
+    diffRequest.current?.abort();
+    const request = new AbortController();
+    diffRequest.current = request;
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams({ base, head });
+      const result = await api.get<BranchDiff>(gitRepo.gitUrl(`/branch-diff?${params}`), {
+        signal: request.signal,
+      });
+      if (request.signal.aborted) return;
+      setDiff(result);
+      setSelectedPath((current) =>
+        current && result.files.some((f) => f.path === current)
+          ? current
+          : firstReviewable(result.files)?.path ?? null,
+      );
+    } catch (e) {
+      if (request.signal.aborted) return;
+      setDiff(null);
+      setError(e instanceof Error ? e.message : "Could not compare these branches");
+    } finally {
+      if (!request.signal.aborted) setLoading(false);
+    }
+  }, [projectName, gitRepo, base, head]);
+
+  useEffect(() => {
+    void loadDiff();
+    return () => diffRequest.current?.abort();
+  }, [loadDiff]);
+
+  // Review progress is keyed by ref names, so it survives new commits; which
+  // files are *still* reviewed is decided per file by the blob id.
+  const stateKey = projectName && base && head ? reviewKey(projectName, base, head) : null;
+
+  // Which directories are folded describes one file tree. Carrying it into the
+  // next comparison collapses paths that are not the same paths, so a review
+  // opens with folders shut for reasons belonging to the review before it.
+  useEffect(() => { setCollapsed(new Set()); }, [stateKey]);
+  useEffect(() => {
+    setReviewed(stateKey ? loadReviewed(stateKey) : {});
+  }, [stateKey]);
+
+  /**
+   * The diff for the pair that is selected *now*, or null while one is being fetched.
+   *
+   * `stateKey` changes with the picker; `diff` only changes when a fetch lands. For the turns
+   * in between they describe two different comparisons, and everything downstream would be
+   * reading one pair's file list under the other pair's key — the prune below would keep only
+   * the paths the two happen to share and write that back, silently deleting review progress
+   * that had been recorded against the pair just switched to.
+   */
+  const currentDiff = diff && diff.base === base && diff.head === head ? diff : null;
+
+  // Prune once the file list arrives: paths a rebase removed would otherwise
+  // stay in localStorage forever.
+  useEffect(() => {
+    if (!stateKey || !currentDiff) return;
+    setReviewed((current) => {
+      const pruned = pruneReviewed(current, currentDiff.files);
+      if (Object.keys(pruned).length !== Object.keys(current).length) saveReviewed(stateKey, pruned);
+      return pruned;
+    });
+  }, [stateKey, currentDiff]);
+
+  const commitReviewed = useCallback((next: ReviewState) => {
+    setReviewed(next);
+    if (stateKey) saveReviewed(stateKey, next);
+  }, [stateKey]);
+
+  // The stale list is not rendered either: a tick on it would write the old pair's path and
+  // blob id under the new pair's key, which is the same bug seen from the other end.
+  const files = currentDiff?.files ?? [];
+  const byPath = useMemo(() => new Map(files.map((f) => [f.path, f])), [files]);
+  const doneCount = useMemo(() => reviewedCount(reviewed, files), [reviewed, files]);
+
+  // `buildTree` speaks the Source Control panel's shape; only path and status
+  // are read from it, and `T` (a mode-only change) has no equivalent there.
+  const tree = useMemo(
+    () => compactTree(buildTree(files.map((f) => ({
+      path: f.path,
+      status: f.status === "T" ? "M" : f.status,
+    })))),
+    [files],
+  );
+
+  const selected = selectedPath ? byPath.get(selectedPath) ?? null : null;
+
+  const goToNextUnreviewed = useCallback(() => {
+    const next = nextUnreviewed(reviewed, files, selectedPath);
+    if (next) {
+      setSelectedPath(next.path);
+      setListOpen(false);
+    }
+  }, [reviewed, files, selectedPath]);
+
+  if (gitRepo.noRepo) return <GitNoRepo onReload={gitRepo.reload} />;
+  if (gitRepo.needsPick) return <GitRepoChoice repos={gitRepo.repos} onChoose={gitRepo.choose} />;
+
+  const fileList = (
+    <ScrollArea className="h-full">
+      <div className="py-1">
+        {files.length === 0 && !loading && (
+          <div className="px-3 py-6 text-center text-xs text-text-3">
+            {error ? "—" : "These branches have identical trees."}
+          </div>
+        )}
+        {tree.map((node) => (
+          <TreeRow
+            key={node.fullPath}
+            node={node}
+            depth={0}
+            byPath={byPath}
+            reviewed={reviewed}
+            selectedPath={selectedPath}
+            collapsed={collapsed}
+            onToggleCollapse={(path) => setCollapsed((c) => {
+              const next = new Set(c);
+              if (next.has(path)) next.delete(path); else next.add(path);
+              return next;
+            })}
+            onSelect={(path) => { setSelectedPath(path); setListOpen(false); }}
+            onToggleReviewed={(file) => commitReviewed(toggleReviewed(reviewed, file))}
+          />
+        ))}
+        {!!currentDiff?.omitted && (
+          // Said rather than silently dropped: a list that simply ends looks
+          // like a branch with fewer changes than it has, and the count is the
+          // only clue that reviewing this one file-by-file is the wrong tool.
+          <div className="px-3 py-3 text-center text-xs text-text-3">
+            {currentDiff.omitted.toLocaleString()} more {currentDiff.omitted === 1 ? "file" : "files"} not listed.
+          </div>
+        )}
+      </div>
+    </ScrollArea>
+  );
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden bg-bg">
+      {gitRepo.isNested && gitRepo.repo && (
+        <GitRepoBar repo={gitRepo.repo} repos={gitRepo.repos} onChoose={gitRepo.choose} />
+      )}
+
+      {/*
+        Native selects rather than the shadcn one: a repository can have
+        hundreds of branches, and the OS picker is both scrollable and a far
+        better touch target than a rendered popover on a phone.
+      */}
+      <div className="flex items-center gap-2 px-2 py-1.5 border-b border-border shrink-0 flex-wrap">
+        <select
+          value={base}
+          onChange={(e) => setBase(e.target.value)}
+          aria-label="Base branch"
+          data-testid="branch-review-base"
+          className="h-7 max-w-[38%] rounded-md border border-border bg-panel px-2 text-xs min-w-0"
+        >
+          {branches.map((b) => <option key={b.name} value={b.name}>{b.name}</option>)}
+        </select>
+        <ArrowRight className="size-3.5 text-text-3 shrink-0" />
+        <select
+          value={head}
+          onChange={(e) => setHead(e.target.value)}
+          aria-label="Branch to review"
+          data-testid="branch-review-head"
+          className="h-7 max-w-[38%] rounded-md border border-border bg-panel px-2 text-xs min-w-0"
+        >
+          {branches.map((b) => <option key={b.name} value={b.name}>{b.name}</option>)}
+        </select>
+
+        <div className="ml-auto flex items-center gap-2">
+          <span className="text-xs text-text-2 tabular-nums" data-testid="branch-review-progress">
+            {doneCount}/{files.length} reviewed
+          </span>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            title={doneCount === files.length && files.length > 0 ? "Clear all" : "Mark all reviewed"}
+            disabled={files.length === 0}
+            onClick={() => commitReviewed(setAllReviewed(reviewed, files, doneCount !== files.length))}
+          >
+            <ListChecks className="size-3.5" />
+          </Button>
+          <Button variant="ghost" size="icon-xs" title="Reload" onClick={() => void loadDiff()}>
+            <RefreshCw className={loading ? "animate-spin" : ""} />
+          </Button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="px-3 py-1.5 text-xs text-destructive bg-destructive/10 shrink-0">{error}</div>
+      )}
+
+      <div className="flex-1 flex min-h-0">
+        {!isMobile && (
+          <div className="w-72 shrink-0 border-r border-border flex flex-col min-h-0">
+            {fileList}
+          </div>
+        )}
+
+        <div className="flex-1 min-w-0 flex flex-col">
+          {selected ? (
+            <DiffViewer
+              // Remount per file: the viewer keys its fetch off the props it was
+              // mounted with, and a shared instance would keep the previous
+              // file's contents while the next one loads.
+              key={`${selected.path}:${currentDiff?.mergeBase}:${currentDiff?.headCommit}`}
+              metadata={{
+                filePath: gitRepo.projectFile(selected.path),
+                projectName,
+                ref1: currentDiff?.mergeBase,
+                // The resolved commit, never `head` itself: a ref name moves,
+                // and a commit landing mid-review would show the new tip beside
+                // a row whose counts and blob id describe the old one.
+                ref2: currentDiff?.headCommit,
+              }}
+            />
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-xs text-text-3">
+              {loading ? <Loader2 className="size-4 animate-spin" /> : "Nothing to review."}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Thumb zone: on a phone the file list and "next" are the two controls
+          used constantly, so they sit at the bottom rather than in the header. */}
+      {isMobile && (
+        <div className="flex items-center gap-2 border-t border-border p-2 shrink-0">
+          <Button variant="secondary" size="sm" className="flex-1 min-h-11" onClick={() => setListOpen(true)}>
+            <FileText className="size-4" />
+            {files.length} files
+          </Button>
+          <Button variant="secondary" size="sm" className="flex-1 min-h-11" onClick={goToNextUnreviewed}>
+            Next unreviewed
+          </Button>
+        </div>
+      )}
+
+      {isMobile && (
+        <BottomSheet open={listOpen} onClose={() => setListOpen(false)}>
+          <div className="max-h-[70vh] overflow-hidden flex flex-col">{fileList}</div>
+        </BottomSheet>
+      )}
+
+      {!isMobile && selected && (
+        <div className="flex items-center gap-2 border-t border-border px-2 py-1 shrink-0">
+          <StartEllipsis>{selected.path}</StartEllipsis>
+          <Button variant="ghost" size="xs" onClick={goToNextUnreviewed}>
+            Next unreviewed
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/web/components/branch-review/branch-review-tree-row.tsx

@@ -0,0 +1,138 @@
+/**
+ * One row of the branch review tree — a directory or a file.
+ *
+ * Its own file so it can be *rendered* in a test. Asserting these classes by
+ * reading the source back with `readFileSync` passes equally well against a
+ * component that never renders at all, and breaks on a `cn()` refactor that
+ * changes nothing a user sees; a mounted row survives both.
+ *
+ * What is pinned here was measured in a real browser at 390x844 before it was:
+ * each row came out **24px** tall with a **16px** checkbox, against the 44x44
+ * minimum in `docs/design-guidelines.md`. Nothing about that is visible in
+ * review — the rows look right on a desktop, which is where the classes were
+ * written. Missing the checkbox is worse than missing an ordinary control: the
+ * tap falls through to the row and *selects* the file instead of marking it
+ * reviewed, which is the opposite action.
+ */
+import { Check, ChevronDown, ChevronRight } from "@/lib/icons";
+import { FileIcon } from "@/lib/file-icons";
+import { isReviewed, type ReviewState } from "@/lib/branch-review-state";
+import type { TreeNode } from "@/lib/git-file-tree";
+import type { BranchDiffFile } from "../../../types/git";
+
+export const STATUS_COLORS: Record<BranchDiffFile["status"], string> = {
+  M: "text-warning",
+  A: "text-success",
+  D: "text-error",
+  R: "text-primary",
+  C: "text-accent-2",
+  T: "text-text-3",
+};
+
+/** Indent per nesting level, matching the Source Control tree. */
+export const TREE_INDENT = 14;
+
+/**
+ * Ellipsize from the start, so the end of a path — the part that differs —
+ * survives. Same trick as the Source Control panel: a right-to-left box cuts at
+ * its left edge, and `<bdi>` keeps the name itself reading left to right.
+ */
+export function StartEllipsis({ children }: { children: string }) {
+  return (
+    <span dir="rtl" className="truncate text-left min-w-0 flex-1">
+      <bdi>{children}</bdi>
+    </span>
+  );
+}
+
+export interface TreeRowProps {
+  node: TreeNode;
+  depth: number;
+  byPath: Map<string, BranchDiffFile>;
+  reviewed: ReviewState;
+  selectedPath: string | null;
+  collapsed: Set<string>;
+  onToggleCollapse: (path: string) => void;
+  onSelect: (path: string) => void;
+  onToggleReviewed: (file: BranchDiffFile) => void;
+}
+
+export function TreeRow(props: TreeRowProps) {
+  const { node, depth, byPath, reviewed, selectedPath, collapsed, onToggleCollapse, onSelect, onToggleReviewed } = props;
+  const file = node.file ? byPath.get(node.fullPath) : undefined;
+
+  if (!file) {
+    const isCollapsed = collapsed.has(node.fullPath);
+    return (
+      <>
+        <button
+          type="button"
+          data-testid="branch-review-folder"
+          className="w-full flex items-center gap-1 px-2 py-1 text-xs min-h-11 md:min-h-0 hover:bg-surface-hover text-left"
+          style={{ paddingLeft: depth * TREE_INDENT + 8 }}
+          onClick={() => onToggleCollapse(node.fullPath)}
+        >
+          {isCollapsed ? <ChevronRight className="size-3 shrink-0" /> : <ChevronDown className="size-3 shrink-0" />}
+          <span className="truncate text-text-2">{node.name}</span>
+        </button>
+        {!isCollapsed && node.children.map((child) => (
+          <TreeRow key={child.fullPath} {...props} node={child} depth={depth + 1} />
+        ))}
+      </>
+    );
+  }
+
+  const done = isReviewed(reviewed, file);
+  const isSelected = selectedPath === file.path;
+  return (
+    <div
+      // The selected row may not share `--surface-hover` with the hover state:
+      // on a pointer device every row looks selected while the cursor is over
+      // it, and which file the diff pane is actually showing becomes a guess.
+      // `aria-current` carries the same fact for anything not reading colour.
+      className={`flex items-center gap-1.5 pr-2 py-1 text-xs cursor-pointer border-l-2 min-h-11 md:min-h-0 hover:bg-surface-hover ${
+        isSelected ? "bg-primary/10 border-primary" : "border-transparent"
+      }`}
+      style={{ paddingLeft: depth * TREE_INDENT + 6 }}
+      onClick={() => onSelect(file.path)}
+      aria-current={isSelected ? "true" : undefined}
+      data-testid="branch-review-file"
+      data-path={file.path}
+      data-selected={isSelected ? "true" : "false"}
+      data-reviewed={done ? "true" : "false"}
+    >
+      {/* A real button inside the row, so the tap that reviews a file and the
+          tap that opens it never have to be told apart by a timer. */}
+      <button
+        type="button"
+        aria-label={done ? `Mark ${file.path} unreviewed` : `Mark ${file.path} reviewed`}
+        data-testid="branch-review-check"
+        // The tap area is 44px on touch and the drawn box stays 16px: a
+        // checkbox the size of the glyph is the control most often missed, and
+        // missing it here selects the file instead — the opposite action.
+        className="size-11 md:size-4 shrink-0 flex items-center justify-center"
+        onClick={(e) => { e.stopPropagation(); onToggleReviewed(file); }}
+      >
+        <span
+          data-testid="branch-review-check-box"
+          className={`size-4 rounded border flex items-center justify-center ${
+            done ? "bg-primary border-primary text-primary-foreground" : "border-border"
+          }`}
+        >
+          {done && <Check className="size-3" />}
+        </span>
+      </button>
+      <FileIcon name={node.name} className="size-3.5 shrink-0" />
+      <StartEllipsis>{node.name}</StartEllipsis>
+      <span className={`shrink-0 font-mono ${STATUS_COLORS[file.status]}`}>{file.status}</span>
+      {file.binary ? (
+        <span className="shrink-0 text-text-3 italic">bin</span>
+      ) : (
+        <span className="shrink-0 tabular-nums text-[10px]">
+          <span className="text-success">+{file.additions}</span>{" "}
+          <span className="text-error">-{file.deletions}</span>
+        </span>
+      )}
+    </div>
+  );
+}

package/src/web/components/chat/attachment-chips.tsx

@@ -11,6 +11,23 @@ interface AttachmentChipsProps {
   onRemove: (id: string) => void;
 }
 
+/**
+ * What a click on the chip *body* should do.
+ *
+ * A named function rather than an inline condition because the bug it fixes was
+ * the condition itself: the handler asked only about `textContent`, which an
+ * image never has, so the chip did nothing for exactly the attachment you most
+ * want to look at before sending. This suite has no DOM renderer, so a decision
+ * left inline here is untestable by construction.
+ *
+ * The remove button is not a case: it stops the event before it gets here.
+ */
+export function chipBodyAction(att: ChatAttachment): "expand" | "preview" | "none" {
+  if (att.textContent) return "expand";
+  if (att.previewUrl) return "preview";
+  return "none";
+}
+
 export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps) {
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const coarse = usePrefersCoarsePointer();
@@ -82,18 +99,25 @@ export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps)
             key={att.id}
             className={cn(
               "flex items-center gap-1.5 rounded-md border border-border bg-surface px-2 py-1 text-xs text-text-secondary max-w-48",
-              att.textContent && "cursor-pointer hover:border-primary/50",
+              chipBodyAction(att) !== "none" && "cursor-pointer hover:border-primary/50",
               expandedId === att.id && "border-primary/50 bg-surface-elevated",
             )}
-            onClick={() => {
-              if (att.textContent) setExpandedId(expandedId === att.id ? null : att.id);
+            // The whole chip opens the preview, not just the 20px thumbnail — the
+            // filename beside it is most of the chip's width and reads as part of
+            // the same control, so clicking it doing nothing is the bug. Only the
+            // remove button opts out, which it already does by stopping the event.
+            onClick={(e) => {
+              const action = chipBodyAction(att);
+              if (action === "expand") setExpandedId(expandedId === att.id ? null : att.id);
+              else if (action === "preview") preview(att, e.currentTarget);
             }}
           >
             {/* Thumbnail or icon */}
             {att.previewUrl ? (
-              // A real button, not a click handler on the chip: the chip already carries the
-              // remove button, and a button inside a button is invalid. It also means the
-              // preview is reachable by keyboard, which the chip never was.
+              // Still a real button even though the chip around it now opens the same
+              // preview, and for the one thing the chip cannot do: reach it by keyboard.
+              // The chip has to stay a `div` — it carries the remove button, and a button
+              // inside a button is invalid — so this is the only focusable way in.
               //
               // The visible thumbnail stays 20px and only the tap-registering area grows,
               // through the same invisible `::before` the explorer toolbar uses — a chip

package/src/web/components/chat/chat-tab.tsx

@@ -125,6 +125,17 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     });
   }, [sessionId, providerId, permissionMode]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  /**
+   * The tab's icon is this provider's logo, and the effect above only persists
+   * the provider once a session exists — which is after the provider can no
+   * longer be changed. Without this, a Codex or Cursor chat wears the Claude
+   * logo for as long as its first message is being written.
+   */
+  const handleProviderChange = useCallback((id: string) => {
+    setProviderId(id);
+    if (tabId) updateTab(tabId, { metadata: { ...metadata, providerId: id } });
+  }, [tabId, metadata, updateTab]);
+
   /** The account this tab claimed while it had no session yet, and who it was claimed from. */
   const pickedAccountId = metadata?.pickedAccountId as string | undefined;
   const pickedAccountLabel = metadata?.pickedAccountLabel as string | undefined;
@@ -900,7 +911,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             onModeChange={setPermissionMode}
             providerId={providerId}
             sessionId={sessionId ?? undefined}
-            onProviderChange={!sessionId ? setProviderId : undefined}
+            onProviderChange={!sessionId ? handleProviderChange : undefined}
             model={model}
             onModelChange={setModel}
             effort={effort}