@plannotator/ui 0.52.1 → 0.53.1

package/components/ai/AskSessionSetupHint.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ * The muted line under an Ask AI provider bar that says how to get "Ask this
+ * session" (text from askSessionSetupHint). Renders nothing without text.
+ */
+export const AskSessionSetupHint: React.FC<{ text?: string | null }> = ({ text }) =>
+  text ? (
+    <div className="-mt-1 px-2 pb-1.5 text-[10px] text-muted-foreground/70" data-ai-ask-session-setup-hint>
+      {text}
+    </div>
+  ) : null;

package/components/ai/DocumentAIChatPanel.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { AIChatEntry, PendingPermission } from '../../hooks/useAIChat';
-import type { AIProviderOption } from '../../utils/aiProvider';
+import { hasNonInterruptibleSession, type AIProviderOption } from '../../utils/aiProvider';
 import { formatRelativeTime, renderChatMarkdown } from '../../utils/aiChatFormat';
 import { OverlayScrollArea } from '../OverlayScrollArea';
 import { SparklesIcon } from '../SparklesIcon';
@@ -22,6 +22,8 @@ interface DocumentAIChatPanelProps {
   onAIConfigChange?: (config: { providerId?: string | null; model?: string | null; reasoningEffort?: string | null }) => void;
   /** "Ask this session": the reviewer's choice on a busy answer. */
   onSessionAskAction?: (questionId: string, action: SessionAskAction) => void;
+  /** Optional note under the provider bar on how to get "Ask this session" (askSessionSetupHint). */
+  askSessionSetupHint?: string | null;
 }
 
 function truncate(text: string, max = 180): string {
@@ -68,7 +70,10 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
   aiConfig,
   onAIConfigChange,
   onSessionAskAction,
+  askSessionSetupHint,
 }) => {
+  // A session that is never interrupted (T3 Code): Stop only stops listening.
+  const listenOnly = hasNonInterruptibleSession(aiProviders);
   const scrollRef = useRef<HTMLDivElement>(null);
   const [generalInput, setGeneralInput] = useState('');
   const latestMessage = messages[messages.length - 1];
@@ -116,6 +121,7 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
             <DocumentQAPair
               key={entry.question.id}
               entry={entry}
+              canInterrupt={!listenOnly}
               onSessionAskAction={onSessionAskAction}
             />
           ))}
@@ -144,6 +150,7 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
         onProviderChange={(providerId) => onAIConfigChange?.({ providerId })}
         onModelChange={(model) => onAIConfigChange?.({ model })}
         onReasoningEffortChange={(reasoningEffort) => onAIConfigChange?.({ reasoningEffort })}
+        setupHint={askSessionSetupHint}
       />
 
       {onAskGeneral && (
@@ -154,6 +161,7 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
           disabled={isStreaming}
           isStreaming={isStreaming}
           onStop={onStop}
+          observationOnly={listenOnly}
         />
       )}
     </div>
@@ -163,7 +171,8 @@ export const DocumentAIChatPanel: React.FC<DocumentAIChatPanelProps> = ({
 const DocumentQAPair = memo<{
   entry: AIChatEntry;
   onSessionAskAction?: (questionId: string, action: SessionAskAction) => void;
-}>(({ entry, onSessionAskAction }) => {
+  canInterrupt?: boolean;
+}>(({ entry, onSessionAskAction, canInterrupt }) => {
   const { question, response } = entry;
   const renderedResponse = useMemo(
     () => response.text ? renderChatMarkdown(response.text) : null,
@@ -205,6 +214,7 @@ const DocumentQAPair = memo<{
             <p className={`text-xs ${sessionAskErrorTone(response)}`}>{response.error}</p>
             <SessionAskActions
               response={response}
+              canInterrupt={canInterrupt}
               onAction={onSessionAskAction ? (action) => onSessionAskAction(question.id, action) : undefined}
             />
           </>
@@ -274,7 +284,8 @@ const GeneralInput: React.FC<{
   disabled?: boolean;
   isStreaming?: boolean;
   onStop?: () => void;
-}> = ({ value, onChange, onSubmit, disabled, isStreaming, onStop }) => {
+  observationOnly?: boolean;
+}> = ({ value, onChange, onSubmit, disabled, isStreaming, onStop, observationOnly = false }) => {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -308,9 +319,10 @@ const GeneralInput: React.FC<{
           <button
             onClick={onStop}
             className="p-1.5 mb-px rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors flex-shrink-0"
-            title="Stop generating"
-            aria-label="Stop generating"
+            title={observationOnly ? 'Stop listening; the question keeps running in the session' : 'Stop generating'}
+            aria-label={observationOnly ? 'Stop listening' : 'Stop generating'}
           >
+            {observationOnly && <span className="text-[10px] mr-1">Stop listening</span>}
             <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
               <rect x="6" y="6" width="12" height="12" rx="2" />
             </svg>

package/components/ai/SessionAskNotice.tsx

@@ -42,7 +42,8 @@ const buttonClass =
 export const SessionAskActions: React.FC<{
   response: AIResponse;
   onAction?: (action: SessionAskAction) => void;
-}> = ({ response, onAction }) => {
+  canInterrupt?: boolean;
+}> = ({ response, onAction, canInterrupt = true }) => {
   if (!response.errorCode) return null;
 
   if (response.errorCode === SESSION_ASK_ERROR_CODES.agentBusy) {
@@ -56,14 +57,14 @@ export const SessionAskActions: React.FC<{
         >
           Ask when it finishes
         </button>
-        <button
+        {canInterrupt && <button
           type="button"
           onClick={() => onAction('interrupt')}
           className={`${buttonClass} bg-muted text-foreground hover:bg-muted/80`}
           title="Stops the session's current work, then asks your question"
         >
           Interrupt and ask now
-        </button>
+        </button>}
       </div>
     );
   }

package/components/blocks/BlockquoteBlock.tsx

@@ -0,0 +1,159 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { Block } from '../../types';
+import { computeListIndices, groupBlocks, parseMarkdownToBlocks } from '../../utils/parser';
+import { isQuestionDirectiveKind } from '@plannotator/core/question-block';
+import { InlineMarkdown } from '../InlineMarkdown';
+import { Callout } from './Callout';
+// BlockRenderer renders this, and this renders the quote's inner blocks with
+// BlockRenderer: a cycle that only meets at render time, after both modules
+// have loaded (the QuestionContext precedent).
+import { BlockRenderer } from '../BlockRenderer';
+
+/** The quote's look. Shared by both render paths so they cannot drift. */
+export const BLOCKQUOTE_CLASS_NAME = 'border-l-2 border-primary/50 pl-4 my-4 text-muted-foreground italic';
+
+/**
+ * Spacing and tone for a quote whose content has block structure. A
+ * stylesheet rather than Tailwind arbitrary variants for the reason
+ * QuestionContext gives: no new utilities in every bundle that scans
+ * `packages/ui/components`, and a host gets the rules without Tailwind setup.
+ * Unlayered, so it outranks the inner renderers' own margins (a code block's
+ * `my-5`, a nested quote's `my-4`): children sit flush with the bar's ends
+ * and half a line apart, like the paragraphs of a prose quote.
+ */
+const QUOTE_BODY_CSS = `
+.pn-quote-body > * { margin-top: 0; margin-bottom: 0; }
+.pn-quote-body > * + * { margin-top: 0.5rem; }
+.pn-quote-body pre, .pn-quote-body table { font-style: normal; }
+.pn-quote-body [data-quote-list] span { color: inherit; }
+`;
+
+/** The quote's inner markdown, split the way the document is split. */
+export const parseQuoteBody = (content: string): Block[] =>
+  parseMarkdownToBlocks(content, { frontmatter: false });
+
+/**
+ * Whether a quote's inner blocks are only paragraphs. Such a quote renders
+ * exactly as quotes always have (one `<p>` per paragraph, nothing else); any
+ * other block (a code fence, a list, a nested quote, a table, a heading…)
+ * takes the structured path.
+ */
+export const isProseQuote = (inner: readonly Block[]): boolean =>
+  inner.every((block) => block.type === 'paragraph');
+
+/**
+ * How deep quotes may nest before the rest renders as text. Each level is a
+ * component and a parse of its own, so `>>>>…` thousands deep (a third-party
+ * PR comment can hold anything) would otherwise overflow the stack and
+ * unmount the tree. GitHub stops drawing distinct levels long before this.
+ */
+export const MAX_QUOTE_DEPTH = 12;
+
+/** The number of quotes around the one rendering (0 at the top). */
+const QuoteDepthContext = createContext(0);
+
+export interface BlockquoteBlockProps {
+  block: Block;
+  onOpenLinkedDoc?: (path: string) => void;
+  onOpenCodeFile?: (path: string) => void;
+  imageBaseDir?: string;
+  onImageClick?: (src: string, alt: string) => void;
+  githubRepo?: string;
+  repoHost?: string;
+  onNavigateAnchor?: (hash: string) => void;
+}
+
+/**
+ * A (non-alert) blockquote: one `<blockquote>` with one bar, carrying the
+ * block's id, whatever its content holds.
+ *
+ * The inner blocks belong to the quote. They render through the document's
+ * own renderers but carry no `data-block-id`, so a selection, a pinpoint, a
+ * restore or an export inside them resolves to the quote block (the
+ * QuestionContext rule). A `:::question` written inside a quote is not a
+ * question block (`findQuestionBlocks` agrees): it renders as a callout.
+ */
+export const BlockquoteBlock: React.FC<BlockquoteBlockProps> = ({ block, ...inlineProps }) => {
+  const depth = useContext(QuoteDepthContext);
+  // Past the cap the content is not parsed again: it renders as prose text,
+  // its remaining `>` markers included.
+  const atCap = depth + 1 >= MAX_QUOTE_DEPTH;
+  const inner = useMemo(() => (atCap ? [] : parseQuoteBody(block.content)), [atCap, block.content]);
+
+  if (atCap || isProseQuote(inner)) {
+    // The prose quote, unchanged: split on blank-line paragraph breaks so
+    // `> a\n>\n> b` renders as two <p> children. Lines are trimmed as the
+    // parser used to trim them, so the text is what it always was.
+    const paragraphs = block.content
+      .split('\n')
+      .map((line) => line.trim())
+      .join('\n')
+      .split(/\n\n+/);
+    return (
+      <blockquote className={BLOCKQUOTE_CLASS_NAME} data-block-id={block.id}>
+        {paragraphs.map((para, i) => (
+          <p key={i} className={i > 0 ? 'mt-2' : ''}>
+            <InlineMarkdown text={para} {...inlineProps} />
+          </p>
+        ))}
+      </blockquote>
+    );
+  }
+
+  return (
+    <blockquote className={`${BLOCKQUOTE_CLASS_NAME} pn-quote-body`} data-block-id={block.id}>
+      {/* React hoists this into <head> once for every quote. */}
+      <style href="plannotator-quote-body" precedence="default">{QUOTE_BODY_CSS}</style>
+      <QuoteDepthContext.Provider value={depth + 1}>
+        <QuoteBody inner={inner} {...inlineProps} />
+      </QuoteDepthContext.Provider>
+    </blockquote>
+  );
+};
+
+/** Ids leave after grouping (grouping keys on them); undefined makes the
+ *  renderers omit `data-block-id`. */
+const anonymous = (block: Block): Block => ({ ...block, id: undefined as unknown as string });
+
+const QuoteBody: React.FC<Omit<BlockquoteBlockProps, 'block'> & { inner: Block[] }> = ({ inner, ...inlineProps }) => (
+  <>
+    {groupBlocks(inner).map((group, i) => {
+      if (group.type === 'list-group') {
+        const indices = computeListIndices(group.blocks);
+        return (
+          <div key={`l-${i}`} data-quote-list="">
+            {group.blocks.map((block, j) => (
+              <BlockRenderer key={j} block={anonymous(block)} orderedIndex={indices[j]} {...inlineProps} />
+            ))}
+          </div>
+        );
+      }
+      const block = group.block;
+      if (block.type === 'paragraph') {
+        // The prose quote's paragraph, so text reads the same with or
+        // without a fence beside it.
+        return (
+          <p key={`b-${i}`}>
+            <InlineMarkdown text={block.content} {...inlineProps} />
+          </p>
+        );
+      }
+      if (block.type === 'directive' && isQuestionDirectiveKind(block.directiveKind)) {
+        const kind = block.directiveKind || 'note';
+        return (
+          <Callout
+            key={`b-${i}`}
+            blockId={undefined as unknown as string}
+            kind={kind}
+            body={block.content}
+            containerClassName={`directive directive-${kind} my-4 px-4 py-3 rounded-md border`}
+            blockType="directive"
+            kindAttribute={kind}
+            {...inlineProps}
+          />
+        );
+      }
+      return <BlockRenderer key={`b-${i}`} block={anonymous(block)} {...inlineProps} />;
+    })}
+  </>
+);

package/components/blocks/HtmlBlock.tsx

@@ -3,6 +3,8 @@ import { isCodeFilePath } from "@plannotator/core/code-file";
 import type { Block } from "../../types";
 import { sanitizeBlockHtml } from "../../utils/sanitizeHtml";
 import { getImageSrc } from "../ImageThumbnail";
+import { UNAVAILABLE_IMAGE_CLASS, useImageResolver, type ImageResolver } from "../ImageResolverContext";
+import { isLocalLinkTarget, isNewTabClick, useLocalLinkResolver, type LocalLinkResolver } from "../LocalLinkContext";
 
 interface HtmlBlockProps {
   block: Block;
@@ -12,6 +14,56 @@ interface HtmlBlockProps {
   onNavigateAnchor?: (hash: string) => void;
 }
 
+function unavailableMedia(doc: Document, label: string, title: string): HTMLSpanElement {
+  const placeholder = doc.createElement('span');
+  placeholder.className = UNAVAILABLE_IMAGE_CLASS;
+  placeholder.title = title;
+  placeholder.setAttribute('data-image-unavailable', '');
+  placeholder.textContent = label;
+  return placeholder;
+}
+
+/**
+ * With a host image resolver (RenderedMarkdown `resolveImage`), every media
+ * URL is the host's call, decided on an INERT copy before anything is in the
+ * document, so nothing is fetched from the page origin first:
+ * - `<img src>` goes through the resolver (`src`, or a placeholder); its
+ *   `srcset` / `sizes` are dropped, so the browser cannot pick a candidate
+ *   the host never saw.
+ * - `<picture><source>` is dropped; the `<img>` inside is the fallback.
+ * - `<video>` (with its `src`, `poster` and `<source>`s) becomes a
+ *   placeholder: the resolver speaks for images only.
+ */
+function resolveHostMedia(root: DocumentFragment, doc: Document, resolveImage: ImageResolver): void {
+  root.querySelectorAll('video').forEach((video) => {
+    video.replaceWith(unavailableMedia(doc, 'Video', 'Videos are not shown here'));
+  });
+  root.querySelectorAll('picture source').forEach((source) => source.remove());
+  root.querySelectorAll('img').forEach((img) => {
+    img.removeAttribute('srcset');
+    img.removeAttribute('sizes');
+    const src = img.getAttribute('src');
+    const alt = img.getAttribute('alt') || 'Image';
+    if (!src) {
+      img.replaceWith(unavailableMedia(doc, alt, 'Image has no source'));
+      return;
+    }
+    const resolved = resolveImage(src);
+    if (resolved?.kind === 'unavailable') {
+      img.replaceWith(unavailableMedia(doc, alt, resolved.title));
+      return;
+    }
+    if (resolved?.kind === 'src') {
+      img.setAttribute('src', resolved.src);
+    } else if (!/^(https?:|data:|blob:)/i.test(src)) {
+      img.setAttribute('src', getImageSrc(src));
+    }
+    img.setAttribute('data-host-image', '');
+  });
+}
+
+const IMAGE_NOT_FOUND_TITLE = 'Image could not be loaded';
+
 // Walks the sanitized DOM and rewrites relative <img src> / <a href> so they
 // behave the same as their markdown counterparts:
 // - Relative image paths route through /api/image?path=... so they load from
@@ -25,15 +77,27 @@ function rewriteRelativeRefs(
   onOpenLinkedDoc?: (path: string) => void,
   onOpenCodeFile?: (path: string) => void,
   onNavigateAnchor?: (hash: string) => void,
+  resolveLocalLink?: LocalLinkResolver | null,
+  resolveImage?: ImageResolver | null,
 ): (() => void) {
   const cleanups: (() => void)[] = [];
 
-  root.querySelectorAll('img').forEach((img) => {
-    const src = img.getAttribute('src');
-    if (!src) return;
-    if (/^(https?:|data:|blob:)/i.test(src)) return;
-    img.setAttribute('src', getImageSrc(src, imageBaseDir));
-  });
+  if (resolveImage) {
+    // Media was already decided by the host before insertion (see
+    // resolveHostMedia); only the load-failure fallback is wired here.
+    root.querySelectorAll<HTMLImageElement>('img[data-host-image]').forEach((img) => {
+      const onError = () => img.replaceWith(unavailableMedia(img.ownerDocument, img.getAttribute('alt') || 'Image', IMAGE_NOT_FOUND_TITLE));
+      img.addEventListener('error', onError);
+      cleanups.push(() => img.removeEventListener('error', onError));
+    });
+  } else {
+    root.querySelectorAll('img').forEach((img) => {
+      const src = img.getAttribute('src');
+      if (!src) return;
+      if (/^(https?:|data:|blob:)/i.test(src)) return;
+      img.setAttribute('src', getImageSrc(src, imageBaseDir));
+    });
+  }
 
   root.querySelectorAll('a').forEach((a) => {
     const href = a.getAttribute('href');
@@ -59,6 +123,45 @@ function rewriteRelativeRefs(
       cleanups.push(() => a.removeEventListener('click', handler));
       return;
     }
+    // A host's resolver (Viewer `resolveLocalLink`) decides local paths
+    // first, as InlineMarkdown does; null keeps the rules below.
+    const localLink = resolveLocalLink && isLocalLinkTarget(href) ? resolveLocalLink(href) : null;
+    if (localLink?.kind === 'open') {
+      const openLink = localLink.open;
+      const hostHref = localLink.href;
+      const handler = (e: Event) => {
+        // With the host's own address, a new-tab click goes there.
+        if (hostHref && e instanceof MouseEvent && isNewTabClick(e)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        openLink();
+      };
+      if (hostHref) {
+        a.setAttribute('href', hostHref);
+        a.removeAttribute('target');
+      }
+      if (localLink.title) a.setAttribute('title', localLink.title);
+      a.setAttribute('data-local-link', 'open');
+      // Without it, a middle click would open the path on the host's own origin.
+      const aux = (e: Event) => {
+        if (!hostHref) e.preventDefault();
+      };
+      a.addEventListener('click', handler);
+      a.addEventListener('auxclick', aux);
+      cleanups.push(() => {
+        a.removeEventListener('click', handler);
+        a.removeEventListener('auxclick', aux);
+      });
+      return;
+    }
+    if (localLink?.kind === 'unavailable') {
+      // Inert: without an href the browser neither follows nor fetches it.
+      a.removeAttribute('href');
+      a.removeAttribute('target');
+      a.setAttribute('title', localLink.title);
+      a.setAttribute('data-local-link', 'unavailable');
+      return;
+    }
     if (onOpenCodeFile && isCodeFilePath(href)) {
       const handler = (e: Event) => {
         e.preventDefault();
@@ -89,18 +192,27 @@ function rewriteRelativeRefs(
 // stops re-rendering unless the block content actually changes.
 const HtmlBlockImpl: React.FC<HtmlBlockProps> = ({ block, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor }) => {
   const ref = useRef<HTMLDivElement>(null);
+  const resolveLocalLink = useLocalLinkResolver();
+  const resolveImage = useImageResolver();
   const sanitized = React.useMemo(
     () => sanitizeBlockHtml(block.content),
     [block.content],
   );
   useEffect(() => {
     if (!ref.current) return;
-    if (ref.current.innerHTML !== sanitized) {
+    if (resolveImage) {
+      // Decide every media URL on an inert template first (nothing loads
+      // there), then insert the result.
+      const template = ref.current.ownerDocument.createElement('template');
+      template.innerHTML = sanitized;
+      resolveHostMedia(template.content, ref.current.ownerDocument, resolveImage);
+      ref.current.replaceChildren(template.content);
+    } else if (ref.current.innerHTML !== sanitized) {
       ref.current.innerHTML = sanitized;
     }
-    const cleanup = rewriteRelativeRefs(ref.current, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor);
+    const cleanup = rewriteRelativeRefs(ref.current, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor, resolveLocalLink, resolveImage);
     return cleanup;
-  }, [sanitized, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor]);
+  }, [sanitized, imageBaseDir, onOpenLinkedDoc, onOpenCodeFile, onNavigateAnchor, resolveLocalLink, resolveImage]);
   return (
     <div
       ref={ref}