@plannotator/ui 0.49.0 → 0.50.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/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/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/Viewer.tsx

@@ -1,6 +1,7 @@
 import { generateId } from '../utils/generateId';
 import React, { useRef, useState, useEffect, useLayoutEffect, useMemo, forwardRef, useImperativeHandle, useCallback, lazy, Suspense } from 'react';
 import { createPortal } from 'react-dom';
+import { ImageLightbox } from './ImageLightbox';
 import { AnnotationType, type Block, type Annotation, type EditorMode, type InputMethod, type ImageAttachment, type ActionsLabelMode } from '../types';
 import { applyHighlight, codeBlockClassName, onCodeHighlightSwap } from '../utils/codeHighlight';
 import { paintCodeBlockMark } from '../utils/codeBlockMark';
@@ -1780,31 +1781,3 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     </CodePathValidationContext.Provider>
   );
 });
-
-/** Simple lightbox overlay for enlarged image viewing. */
-const ImageLightbox: React.FC<{ src: string; alt: string; onClose: () => void }> = ({ src, alt, onClose }) => {
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
-
-  return (
-    <div
-      className="fixed inset-0 z-[200] flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm cursor-zoom-out"
-      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/ai/AIProviderBar.tsx

@@ -37,7 +37,7 @@ export const AIProviderBar: React.FC<AIProviderBarProps> = ({
   const effectiveModel = selectedModel ?? defaultModel?.id ?? '';
   const currentModel = models.find(m => m.id === effectiveModel) ?? defaultModel;
   const reasoningEfforts = currentModel?.reasoningEfforts ?? [];
-  const meta = getProviderMeta(currentProvider?.name ?? 'AI');
+  const meta = getProviderMeta(currentProvider?.name ?? 'AI', currentProvider?.label);
   const Icon = meta.icon;
   // Show only when the selected model actually reports reasoning efforts.
   const showReasoningEffort = !!onReasoningEffortChange && reasoningEfforts.length > 0;
@@ -53,7 +53,7 @@ export const AIProviderBar: React.FC<AIProviderBarProps> = ({
         aria-label="AI provider"
       >
         {providers.map(provider => {
-          const providerMeta = getProviderMeta(provider.name);
+          const providerMeta = getProviderMeta(provider.name, provider.label);
           return (
             <option key={provider.id} value={provider.id}>
               {providerMeta.label}

package/components/ai/DocumentAIChatPanel.tsx

@@ -5,6 +5,7 @@ import { formatRelativeTime, renderChatMarkdown } from '../../utils/aiChatFormat
 import { OverlayScrollArea } from '../OverlayScrollArea';
 import { SparklesIcon } from '../SparklesIcon';
 import { AIProviderBar } from './AIProviderBar';
+import { SessionAskActions, SessionAskStatus, sessionAskErrorTone, type SessionAskAction } from './SessionAskNotice';
 import { submitHint } from '../../utils/platform';
 
 interface DocumentAIChatPanelProps {
@@ -19,6 +20,10 @@ interface DocumentAIChatPanelProps {
   aiProviders?: AIProviderOption[];
   aiConfig?: { providerId: string | null; model: string | null; reasoningEffort?: string | null };
   onAIConfigChange?: (config: { providerId?: string | null; model?: string | null; reasoningEffort?: string | null }) => void;
+  /** "Ask this session": the reviewer's choice on a busy/gone/blocked answer. */
+  onSessionAskAction?: (questionId: string, action: SessionAskAction) => void;
+  /** Label of the provider "Ask a separate AI instead" would use; null hides it. */
+  sessionAskFallbackLabel?: string | null;
 }
 
 function truncate(text: string, max = 180): string {
@@ -64,6 +69,8 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
   aiProviders = [],
   aiConfig,
   onAIConfigChange,
+  onSessionAskAction,
+  sessionAskFallbackLabel,
 }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [generalInput, setGeneralInput] = useState('');
@@ -109,7 +116,12 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
           )}
 
           {messages.map(entry => (
-            <DocumentQAPair key={entry.question.id} entry={entry} />
+            <DocumentQAPair
+              key={entry.question.id}
+              entry={entry}
+              onSessionAskAction={onSessionAskAction}
+              sessionAskFallbackLabel={sessionAskFallbackLabel}
+            />
           ))}
         </div>
       </OverlayScrollArea>
@@ -152,7 +164,11 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
   );
 };
 
-const DocumentQAPair = memo<{ entry: AIChatEntry }>(({ entry }) => {
+const DocumentQAPair = memo<{
+  entry: AIChatEntry;
+  onSessionAskAction?: (questionId: string, action: SessionAskAction) => void;
+  sessionAskFallbackLabel?: string | null;
+}>(({ entry, onSessionAskAction, sessionAskFallbackLabel }) => {
   const { question, response } = entry;
   const renderedResponse = useMemo(
     () => response.text ? renderChatMarkdown(response.text) : null,
@@ -190,12 +206,21 @@ const DocumentQAPair = memo<{ entry: AIChatEntry }>(({ entry }) => {
 
       <div className="group relative p-2.5 rounded-lg border border-border/50 bg-popover/50 hover:bg-muted/30 transition-colors">
         {response.error ? (
-          <p className="text-xs text-destructive">{response.error}</p>
+          <>
+            <p className={`text-xs ${sessionAskErrorTone(response)}`}>{response.error}</p>
+            <SessionAskActions
+              response={response}
+              fallbackLabel={sessionAskFallbackLabel}
+              onAction={onSessionAskAction ? (action) => onSessionAskAction(question.id, action) : undefined}
+            />
+          </>
         ) : response.text ? (
           <div className="text-xs">
             {renderedResponse}
             {response.isStreaming && <span className="ai-streaming-cursor inline-block ml-0.5" />}
           </div>
+        ) : response.status ? (
+          <SessionAskStatus response={response} />
         ) : response.isStreaming ? (
           <span className="text-xs text-muted-foreground">
             <span className="ai-streaming-cursor" /> Thinking...