@plannotator/ui 0.49.0 → 0.51.0

package/components/DiffFileTree.tsx

@@ -0,0 +1,363 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  buildDiffFileTree,
+  type DiffFileTreeFile,
+  type DiffFileTreeNode,
+  type DiffFileTreeStatus,
+} from '../utils/diffFileTree';
+import { useDiffFileTreeExpansion, type DiffFileTreeDefaultExpanded } from '../hooks/useDiffFileTreeExpansion';
+
+export type { DiffFileTreeFile, DiffFileTreeNode, DiffFileTreeStatus } from '../utils/diffFileTree';
+export type { DiffFileTreeDefaultExpanded } from '../hooks/useDiffFileTreeExpansion';
+
+/*
+ * The diff file tree's presentational parts. Plannotator's code review renders
+ * its tree rows from the atoms below (folder row, file-row content, change
+ * letter, +/- counts, indentation), adding its review-only decorations
+ * (viewed/stage controls, annotation badge, context menu) around them; the
+ * `DiffFileTree` component at the bottom is the read-only, embeddable tree a
+ * host drops beside its own diff list.
+ */
+
+/** Left padding of a row at `depth` (px). */
+export function diffFileTreeIndent(depth: number): number {
+  return 4 + depth * 8;
+}
+
+/** Leading change-type letter — A/D/R/U carry weight and color; modified gets
+ * a whisper-quiet M so the column has no holes. Fixed slot keeps names aligned. */
+export const ChangeTypeLetter: React.FC<{
+  status: DiffFileTreeStatus;
+  oldPath?: string;
+  untracked?: boolean;
+}> = ({ status, oldPath, untracked }) => (
+  <span className="w-3 text-center text-[10px] flex-shrink-0">
+    {untracked ? (
+      <span className="font-semibold text-muted-foreground/70" title="Untracked file">U</span>
+    ) : status === 'added' ? (
+      <span className="font-semibold text-success" title="Added file">A</span>
+    ) : status === 'deleted' ? (
+      <span className="font-semibold text-destructive" title="Deleted file">D</span>
+    ) : status === 'renamed' ? (
+      <span className="font-semibold text-[#007aff]" title={oldPath ? `Renamed from ${oldPath}` : 'Renamed file'}>R</span>
+    ) : status === 'binary' ? (
+      <span className="font-semibold text-muted-foreground/70" title="Binary file">B</span>
+    ) : (
+      <span className="text-muted-foreground/40" title="Modified file">M</span>
+    )}
+  </span>
+);
+
+/** Right-anchored +/- pair — one fixed-width block so the numbers always end
+ * flush at the row edge, stay tight together, and add-only rows leave no
+ * phantom gap. */
+export const DiffCounts: React.FC<{ additions: number; deletions: number }> = ({ additions, deletions }) => (
+  <span className="min-w-[7ch] text-right whitespace-nowrap flex-shrink-0 text-[10px] tabular-nums">
+    {additions > 0 && <span className="additions">+{additions}</span>}
+    {additions > 0 && deletions > 0 && <span> </span>}
+    {deletions > 0 && <span className="deletions">-{deletions}</span>}
+  </span>
+);
+
+type FolderRowProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'className' | 'style' | 'children'> & {
+  node: Pick<DiffFileTreeNode, 'name' | 'depth' | 'additions' | 'deletions'>;
+  isExpanded: boolean;
+  onToggle: () => void;
+  ref?: React.Ref<HTMLButtonElement>;
+};
+
+/** A folder row: chevron, (possibly merged) folder name, summed +/- counts. */
+export const DiffFileTreeFolderRow: React.FC<FolderRowProps> = ({ node, isExpanded, onToggle, ...buttonProps }) => (
+  <button
+    {...buttonProps}
+    onClick={onToggle}
+    className="w-full flex items-center gap-1.5 py-1 px-2 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors rounded-sm"
+    style={{ paddingLeft: diffFileTreeIndent(node.depth) }}
+  >
+    <svg
+      className={`w-3 h-3 flex-shrink-0 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+    </svg>
+    <span className="truncate">{node.name}</span>
+    {(node.additions > 0 || node.deletions > 0) && (
+      <div className="flex items-center gap-1.5 ml-auto flex-shrink-0 text-[10px]">
+        {node.additions > 0 && (
+          <span className="additions">+{node.additions}</span>
+        )}
+        {node.deletions > 0 && (
+          <span className="deletions">-{node.deletions}</span>
+        )}
+      </div>
+    )}
+  </button>
+);
+
+/**
+ * The inside of a file row (render it in a `file-tree-item` row element):
+ * `[leading][letter][name][afterName]` then the right-anchored counts.
+ * `leading` and `afterName` are where the review puts its viewed/stage
+ * controls and annotation badge.
+ */
+export const DiffFileTreeFileRowContent: React.FC<{
+  file: Pick<DiffFileTreeFile, 'status' | 'oldPath' | 'additions' | 'deletions'>;
+  name: string;
+  untracked?: boolean;
+  leading?: React.ReactNode;
+  afterName?: React.ReactNode;
+}> = ({ file, name, untracked, leading, afterName }) => (
+  <>
+    <div className="flex items-center gap-1.5 flex-1 min-w-0">
+      {leading}
+      <ChangeTypeLetter status={file.status} oldPath={file.oldPath} untracked={untracked} />
+      <span className="truncate">{name}</span>
+      {afterName}
+    </div>
+    <DiffCounts additions={file.additions} deletions={file.deletions} />
+  </>
+);
+
+// --- Embeddable read-only tree ---
+
+export interface DiffFileTreeProps {
+  /** The changed files. Order does not matter; the tree sorts. */
+  files: readonly DiffFileTreeFile[];
+  /** Path of the selected file (controlled), or null. */
+  selectedPath: string | null;
+  /** Called with a file's `path` on click, Enter/Space, or arrow/j/k/Home/End. */
+  onSelect: (path: string) => void;
+  /** Which folders start open; re-applied when the set of files changes. Default 'all'. */
+  defaultExpanded?: DiffFileTreeDefaultExpanded;
+  /** Accessible name of the tree. Default "Changed files". */
+  label?: string;
+  className?: string;
+}
+
+interface VisibleRow {
+  key: string;
+  node: DiffFileTreeNode;
+  parentKey: string | null;
+}
+
+function rowKey(node: DiffFileTreeNode): string {
+  return node.type === 'file' ? `file:${node.path}` : `folder:${node.path}`;
+}
+
+function collectVisibleRows(
+  nodes: DiffFileTreeNode[],
+  expanded: Set<string>,
+  parentKey: string | null,
+  out: VisibleRow[],
+): VisibleRow[] {
+  for (const node of nodes) {
+    const key = rowKey(node);
+    out.push({ key, node, parentKey });
+    if (node.type === 'folder' && expanded.has(node.path) && node.children) {
+      collectVisibleRows(node.children, expanded, key, out);
+    }
+  }
+  return out;
+}
+
+/** File paths in the order the tree renders them (collapse state ignored). */
+function visualFilePaths(nodes: DiffFileTreeNode[], out: string[] = []): string[] {
+  for (const node of nodes) {
+    if (node.type === 'file') out.push(node.path);
+    else if (node.children) visualFilePaths(node.children, out);
+  }
+  return out;
+}
+
+/** Content signature, so a host that rebuilds an equal `files` array each
+ * render does not reset the folders it opened or closed. */
+function filesSignature(files: readonly DiffFileTreeFile[]): string {
+  return files.map((f) => `${f.path}\u0000${f.oldPath ?? ''}\u0000${f.status}\u0000${f.additions}\u0000${f.deletions}`).join('\u0001');
+}
+
+/**
+ * Read-only diff file tree: the same folder collapsing, change letters, +/-
+ * counts, icons and indentation as Plannotator's code-review tree, with WAI-ARIA
+ * tree semantics. Keyboard (while focus is in the tree, never window-wide):
+ * ArrowDown/`j` and ArrowUp/`k` select the next/previous file in tree order,
+ * Home/End the first/last (the review's keys); ArrowRight/ArrowLeft open/close
+ * a focused folder, and ArrowLeft from a file moves focus to its folder.
+ * Theme comes from the ThemeProvider tokens via `@plannotator/ui/styles.css`.
+ */
+export const DiffFileTree: React.FC<DiffFileTreeProps> = ({
+  files,
+  selectedPath,
+  onSelect,
+  defaultExpanded = 'all',
+  label = 'Changed files',
+  className,
+}) => {
+  const signature = filesSignature(files);
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on content, not identity
+  const tree = useMemo(() => buildDiffFileTree(files), [signature]);
+  const filesInOrder = useMemo(() => visualFilePaths(tree), [tree]);
+
+  const { expandedFolders, setFolderExpanded, toggleFolder } = useDiffFileTreeExpansion(tree, selectedPath, defaultExpanded);
+  const rows = useMemo(() => collectVisibleRows(tree, expandedFolders, null, []), [tree, expandedFolders]);
+
+  const [focusedKey, setFocusedKey] = useState<string | null>(null);
+  const pendingFocus = useRef<string | null>(null);
+  const rowRefs = useRef(new Map<string, HTMLButtonElement>());
+
+  const selectedKey = selectedPath ? `file:${selectedPath}` : null;
+  const rowKeys = useMemo(() => new Set(rows.map((r) => r.key)), [rows]);
+  const tabStopKey =
+    focusedKey && rowKeys.has(focusedKey)
+      ? focusedKey
+      : selectedKey && rowKeys.has(selectedKey)
+        ? selectedKey
+        : rows[0]?.key ?? null;
+
+  // Move DOM focus once the target row exists (selecting a file inside a
+  // collapsed folder opens the folder first, one render later).
+  useEffect(() => {
+    const key = pendingFocus.current;
+    if (!key) return;
+    const el = rowRefs.current.get(key);
+    if (el) {
+      pendingFocus.current = null;
+      el.focus();
+    }
+  });
+
+  const focusRow = useCallback((key: string) => {
+    setFocusedKey(key);
+    pendingFocus.current = key;
+    const el = rowRefs.current.get(key);
+    if (el) {
+      pendingFocus.current = null;
+      el.focus();
+    }
+  }, []);
+
+  const selectFile = useCallback(
+    (path: string) => {
+      onSelect(path);
+      focusRow(`file:${path}`);
+    },
+    [onSelect, focusRow],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
+      if (filesInOrder.length === 0) return;
+      const pos = selectedPath ? filesInOrder.indexOf(selectedPath) : -1;
+
+      if (e.key === 'j' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (pos < filesInOrder.length - 1) selectFile(filesInOrder[pos + 1]);
+        return;
+      }
+      if (e.key === 'k' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (pos > 0) selectFile(filesInOrder[pos - 1]);
+        return;
+      }
+      if (e.key === 'Home') {
+        e.preventDefault();
+        selectFile(filesInOrder[0]);
+        return;
+      }
+      if (e.key === 'End') {
+        e.preventDefault();
+        selectFile(filesInOrder[filesInOrder.length - 1]);
+        return;
+      }
+      if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+
+      const current = rows.find((r) => r.key === tabStopKey);
+      if (!current) return;
+      e.preventDefault();
+      const { node } = current;
+      if (e.key === 'ArrowRight') {
+        if (node.type !== 'folder') return;
+        if (!expandedFolders.has(node.path)) {
+          setFolderExpanded(node.path, true);
+        } else {
+          const index = rows.indexOf(current);
+          const child = rows[index + 1];
+          if (child && child.parentKey === current.key) focusRow(child.key);
+        }
+        return;
+      }
+      if (node.type === 'folder' && expandedFolders.has(node.path)) {
+        setFolderExpanded(node.path, false);
+      } else if (current.parentKey) {
+        focusRow(current.parentKey);
+      }
+    },
+    [filesInOrder, selectedPath, selectFile, rows, tabStopKey, expandedFolders, setFolderExpanded, focusRow],
+  );
+
+  const setRef = (key: string) => (el: HTMLButtonElement | null) => {
+    if (el) rowRefs.current.set(key, el);
+    else rowRefs.current.delete(key);
+  };
+
+  return (
+    <div
+      role="tree"
+      aria-label={label}
+      className={className ? `px-1 py-1 ${className}` : 'px-1 py-1'}
+      onKeyDown={handleKeyDown}
+      data-diff-file-tree=""
+    >
+      {rows.map(({ key, node }) => {
+        const level = node.depth + 1;
+        const tabIndex = key === tabStopKey ? 0 : -1;
+        if (node.type === 'folder') {
+          const isExpanded = expandedFolders.has(node.path);
+          return (
+            <DiffFileTreeFolderRow
+              key={key}
+              ref={setRef(key)}
+              type="button"
+              role="treeitem"
+              aria-level={level}
+              aria-expanded={isExpanded}
+              tabIndex={tabIndex}
+              data-path={node.path}
+              onFocus={() => setFocusedKey(key)}
+              node={node}
+              isExpanded={isExpanded}
+              onToggle={() => {
+                toggleFolder(node.path);
+                setFocusedKey(key);
+              }}
+            />
+          );
+        }
+        const file = node.file!;
+        const isActive = node.path === selectedPath;
+        return (
+          <button
+            key={key}
+            ref={setRef(key)}
+            type="button"
+            role="treeitem"
+            aria-level={level}
+            aria-selected={isActive}
+            tabIndex={tabIndex}
+            data-path={node.path}
+            title={node.path}
+            onFocus={() => setFocusedKey(key)}
+            onClick={() => selectFile(node.path)}
+            className={`file-tree-item w-full text-left group${isActive ? ' active' : ''}`}
+            style={{ paddingLeft: diffFileTreeIndent(node.depth) }}
+          >
+            <DiffFileTreeFileRowContent file={file} name={node.name} />
+          </button>
+        );
+      })}
+    </div>
+  );
+};

package/components/DocBadges.tsx

@@ -23,7 +23,9 @@ import { OpenInAppButton } from './OpenInAppButton';
 
 export interface LinkedDocBadgeInfo {
   filepath: string;
-  onBack: () => void;
+  /** Leave the document. Optional for `folder-file`: absent shows no Close
+   *  (a file of a review of several files, which the switcher moves between). */
+  onBack?: () => void;
   label?: string;
   backLabel?: string;
   variant?: 'breadcrumb' | 'folder-file';
@@ -198,13 +200,15 @@ export const DocBadges: React.FC<DocBadgesProps> = ({
       {!isRow && linkedDocInfo && (
         linkedDocInfo.variant === 'folder-file' ? (
           <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={linkedDocInfo.onBack}
-              className="rounded-sm text-[9px] font-medium text-primary transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-            >
-              Close
-            </button>
+            {linkedDocInfo.onBack && (
+              <button
+                type="button"
+                onClick={linkedDocInfo.onBack}
+                className="rounded-sm text-[9px] font-medium text-primary transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              >
+                Close
+              </button>
+            )}
             <span
               className="truncate rounded bg-muted/50 px-1.5 py-0.5 text-[9px] text-muted-foreground max-w-[220px]"
               title={linkedDocInfo.filepath}

package/components/ImageLightbox.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef } from 'react';
+
+/**
+ * Overlay for viewing one image enlarged. Shared by the markdown Viewer
+ * (clicking an image in a document) and the raw-HTML surface (a link to a
+ * local image inside the annotated page).
+ *
+ * The image is only ever shown through `<img src>`, so an SVG runs no script
+ * and cannot reach the page.
+ *
+ * It is modal for the keyboard. Its keydown listener runs on the CAPTURE phase
+ * at the window and stops every key there, so nothing behind it reacts:
+ * Escape closes the lightbox before the HTML surface's Esc ladder sees it,
+ * and Mod+Enter cannot submit a decision behind it. Focus moves to the
+ * overlay when it opens, which also pulls focus out of an HTML page's iframe
+ * (whose keys the parent would otherwise never see), and goes back to where
+ * it was when it closes.
+ */
+export const ImageLightbox: React.FC<{ src: string; alt: string; onClose: () => void }> = ({ src, alt, onClose }) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlayRef.current?.focus({ preventScroll: true });
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Tab stays native: the overlay is the only focusable thing that matters
+      // here, and trapping it buys nothing for a click-to-close surface.
+      if (e.key === 'Tab') return;
+      e.stopImmediatePropagation();
+      if (e.key === 'Escape' || (e.key === 'Enter' && (e.metaKey || e.ctrlKey))) {
+        e.preventDefault();
+      }
+      if (e.key === 'Escape') onCloseRef.current();
+    };
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+      if (previous && previous.isConnected) previous.focus({ preventScroll: true });
+    };
+  }, []);
+
+  return (
+    <div
+      ref={overlayRef}
+      tabIndex={-1}
+      role="dialog"
+      aria-modal="true"
+      aria-label={alt || 'Image'}
+      data-image-lightbox=""
+      className="fixed inset-0 z-[200] flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm cursor-zoom-out outline-none"
+      onClick={onClose}
+    >
+      <img
+        src={src}
+        alt={alt}
+        className="max-w-[90vw] max-h-[85vh] object-contain rounded-lg shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      />
+      {alt && (
+        <div className="mt-3 text-sm text-white/70 max-w-[90vw] text-center truncate">{alt}</div>
+      )}
+    </div>
+  );
+};

package/components/PlanHeaderMenu.tsx

@@ -40,7 +40,7 @@ interface PlanHeaderMenuProps {
 }
 
 export interface CompactPlanAction {
-  id: 'exit' | 'feedback' | 'approve' | 'copy' | 'done' | 'edit' | 'tools' | 'annotate' | 'refresh' | 'annotations' | 'ai' | 'review' | 'note' | 'discard-finish';
+  id: 'exit' | 'feedback' | 'approve' | 'copy' | 'done' | 'edit' | 'tools' | 'annotate' | 'refresh' | 'annotations' | 'ai' | 'review' | 'note' | 'discard-finish' | 'bundle-previous' | 'bundle-next';
   label: string;
   subtitle?: string;
   onSelect: () => void;

package/components/ProviderIcons.tsx

@@ -37,15 +37,27 @@ const GenericProviderIcon: React.FC<{ className?: string }> = ({ className = 'w-
   </svg>
 );
 
+/** "Ask this session": a speech bubble, since the answer comes from the agent session itself. */
+const SessionIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8 10h8M8 14h5m-7 6 2.5-3H18a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H6a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3z" />
+  </svg>
+);
+
 /** Provider metadata: maps provider type name to display label and icon component. */
 export const PROVIDER_META: Record<string, { label: string; icon: React.FC<{ className?: string }> }> = {
   'claude-agent-sdk': { label: 'Claude', icon: ClaudeIcon },
   'codex-sdk': { label: 'Codex', icon: CodexIcon },
   'pi-sdk': { label: 'Pi', icon: PiIcon },
   'opencode-sdk': { label: 'OpenCode', icon: OpenCodeIcon },
+  'session-bridge': { label: 'Ask this session', icon: SessionIcon },
 };
 
-/** Get provider metadata, with fallback for unknown providers. */
-export function getProviderMeta(providerName: string): { label: string; icon: React.FC<{ className?: string }> } {
-  return PROVIDER_META[providerName] ?? { label: providerName, icon: GenericProviderIcon };
+/**
+ * Get provider metadata, with fallback for unknown providers. A server-sent
+ * `label` (e.g. "Ask this session · Pi") overrides the name lookup.
+ */
+export function getProviderMeta(providerName: string, label?: string): { label: string; icon: React.FC<{ className?: string }> } {
+  const meta = PROVIDER_META[providerName] ?? { label: providerName, icon: GenericProviderIcon };
+  return label ? { ...meta, label } : meta;
 }

package/components/Settings.tsx

@@ -7,6 +7,12 @@ import type { TokenHoverDelay } from '@plannotator/core/token-hover';
 import { configStore, useConfigValue, setReviewPanelView, setReviewDefaultDiffType, setReviewAutoViewed } from '../config';
 import { setWebMcpToolsEnabled, useWebMcpToolsEnabled } from '../webmcp/preference';
 import { DIAGRAM_SHADOW_OPTIONS } from '../utils/diagramShadow';
+import {
+  agentToolAppliesWhen,
+  agentToolCostNote,
+  agentToolHostName,
+  type AgentToolSetting,
+} from '../utils/agentToolSetting';
 import { loadDiffFont } from '../utils/diffFonts';
 import { TaterSpritePullup } from './TaterSpritePullup';
 import { getIdentity, regenerateIdentity, setCustomIdentity, isIdentityEditable } from '../utils/identity';
@@ -106,6 +112,14 @@ interface SettingsProps {
    *  `env` is PLANNOTATOR_AUTO_UPDATE when it overrides the config file.
    *  Hosts that omit it get no toggle. */
   autoUpdateSetting?: { env?: boolean };
+  /** The `plannotator` agent tool switch, as the server reports it
+   *  (parseAgentToolSetting of serverConfig: present only when the session's
+   *  host registers the tool). Shown only together with onAgentToolChange;
+   *  hosts that omit them get no row. */
+  agentToolSetting?: AgentToolSetting;
+  /** Saves the agent tool switch (saveAgentToolSetting); rejects with a
+   *  readable Error, which the row shows. */
+  onAgentToolChange?: (enabled: boolean) => Promise<void>;
   /** Current session is a local git review where since-base ISN'T offered
    *  (base ref unresolvable) — the Git tab shows a note that the Git-status
    *  preference can't take effect in THIS repo. */
@@ -269,6 +283,53 @@ function ToggleSwitch({ checked, onChange, label, description, disabled = false
   );
 }
 
+/**
+ * The `plannotator` agent tool switch. The value is the one the NEXT session
+ * uses (the tool list is part of the model's prompt, so a running session
+ * never changes it). Writes go straight to POST /api/config and wait for the
+ * answer, so a failed save is reported and the switch stays where it was.
+ */
+function AgentToolSettingRow({ setting, onChange }: {
+  readonly setting: AgentToolSetting;
+  readonly onChange: (enabled: boolean) => Promise<void>;
+}) {
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const locked = setting.env !== undefined;
+  const change = async (next: boolean) => {
+    if (saving || locked) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await onChange(next);
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : 'Could not save the setting.');
+    } finally {
+      setSaving(false);
+    }
+  };
+  return (
+    <div data-agent-tool-setting={setting.host} aria-busy={saving}>
+      <ToggleSwitch
+        checked={setting.enabled}
+        onChange={(next) => void change(next)}
+        disabled={locked}
+        label="Let the agent open reviews (plannotator tool)"
+        description={
+          locked
+            ? `Set by PLANNOTATOR_AGENT_TOOL in your environment, so it is ${setting.enabled ? 'on' : 'off'} here.`
+            : `${agentToolHostName(setting.host)} can open reviews itself and keep working. ${agentToolCostNote(setting.host)} Applies from ${agentToolAppliesWhen(setting.host)}.`
+        }
+      />
+      {error && (
+        <p role="alert" data-agent-tool-setting-error className="mt-1 text-xs text-destructive">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
 interface VimSettingsTabProps {
   readonly vimModeEnabled: boolean;
   readonly vimHudEnabled: boolean;
@@ -941,7 +1002,7 @@ const CommentsTab: React.FC = () => {
   );
 };
 
-export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', annotateParity = false, onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, autoUpdateSetting, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false }) => {
+export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange, onIdentityChange, origin, mode = 'plan', annotateParity = false, onUIPreferencesChange, externalOpen, onExternalClose, aiProviders = [], gitUser, autoUpdateSetting, agentToolSetting, onAgentToolChange, sinceBaseUnavailable, isCompactTouchLayout = false, onDetectObsidianVaults, agentTerminalAvailable = false, webmcpAvailable = false }) => {
   const webmcpTools = useWebMcpToolsEnabled();
   const autoUpdate = useConfigValue('autoUpdate');
   const [showDialog, setShowDialog] = useState(false);
@@ -1403,6 +1464,17 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
                       </>
                     )}
 
+                    {/* The `plannotator` agent tool switch: only where the
+                        server reports a tool host (Claude Code mod, Pi,
+                        OpenCode 2). Writes agentTool to config.json; applies
+                        to the next session. */}
+                    {agentToolSetting && onAgentToolChange && (
+                      <>
+                        <div className="border-t border-border" />
+                        <AgentToolSettingRow setting={agentToolSetting} onChange={onAgentToolChange} />
+                      </>
+                    )}
+
                     {/* Agent tools (WebMCP). Shown only when the browser
                         exposes document.modelContext; off unregisters the
                         tools for this browser. Cookie-only and idle at its

package/components/TerminalToolsAnnouncementDialog.tsx

@@ -107,7 +107,7 @@ function GitHubMark({ className }: { readonly className?: string }) {
   );
 }
 
-function XMark({ className }: { readonly className?: string }) {
+export function XMark({ className }: { readonly className?: string }) {
   return (
     <svg viewBox="0 0 24 24" className={className} aria-hidden="true" focusable="false">
       <path