@plannotator/ui 0.28.0 → 0.29.0

package/README.md

@@ -24,6 +24,8 @@ configurePlannotatorUI({
   draftTransport,
   externalAnnotationTransport, // live/agent comments
   aiTransport,
+  skillCatalogTransport,       // skill-reference catalog for comment composers
+  skillContentTransport,       // human-only skill contents for feedback injection
   serverSync,
 });
 ```
@@ -78,6 +80,10 @@ Requires `@plannotator/markdown-editor ^0.3.2` and `@plannotator/atomic-editor ^
 
 Requires `@plannotator/markdown-editor ^0.4.0` and `@plannotator/atomic-editor ^0.8.0` (which adds a `@codemirror/merge` peer — declared by this package). See HANDOFF.md § "Frozen markdown diff (0.28.0)".
 
+### Raw-HTML annotation viewer (`HtmlViewer`)
+
+`components/html-viewer` is supported host surface as of 0.29.0: the overlay-projection annotation viewer for raw HTML (placed comment markers, pinpoint element anchors, shift-click multi-target comments). Its contract is **props plus the validated iframe message protocol** — not `configurePlannotatorUI()`, which only governs the backend surfaces around it. Drive the `annotations` prop (marker numbering derives from its array order); `readOnly` keeps markers painted and clickable while disabling all authoring. **0.29.0 also carries a breaking migration:** highlight.js is gone and `.hljs` selectors are inert — style code via the exported `pn-code` class (`CODE_BLOCK_CLASS` in `utils/codeHighlight`). See HANDOFF.md § "Raw-HTML annotation viewer + syntax-highlighting migration (0.29.0)" before upgrading from 0.28.0.
+
 ## Consuming it (e.g. from Workspaces)
 
 ```bash

package/components/AISettingsTab.tsx

@@ -2,7 +2,6 @@ import type React from 'react';
 import { getProviderMeta } from './ProviderIcons';
 import {
   getAIProviderSettings,
-  resolveAIModelForProvider,
   resolveAIProviderSelection,
   saveAIProviderSelection,
   savePreferredModel,
@@ -37,9 +36,11 @@ export const AISettingsTab: React.FC<AISettingsTabProps> = ({
 
   const handleSelectProvider = (providerId: string) => {
     onProviderChange(providerId);
-    const provider = providers.find(p => p.id === providerId) ?? null;
-    const model = resolveAIModelForProvider(provider, getAIProviderSettings().preferredModels);
-    saveAIProviderSelection({ providerId, model, origin });
+    // Persist only the provider choice. Writing the resolved model here would
+    // clobber a saved preference the currently-advertised model list doesn't
+    // include (e.g. before deferred Codex discovery has run) with the static
+    // fallback id — the saved model only changes when the user picks one.
+    saveAIProviderSelection({ providerId, model: null, origin });
   };
 
   const handleModelChange = (providerId: string, modelId: string) => {

package/components/ActionMenu.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 interface ActionMenuProps {
   className?: string;
   panelClassName?: string;
+  panelWidth?: 'default' | 'wide';
   renderTrigger: (props: {
     isOpen: boolean;
     toggleMenu: () => void;
@@ -13,6 +14,7 @@ interface ActionMenuProps {
 export const ActionMenu: React.FC<ActionMenuProps> = ({
   className,
   panelClassName,
+  panelWidth = 'default',
   renderTrigger,
   children,
 }) => {
@@ -50,7 +52,9 @@ export const ActionMenu: React.FC<ActionMenuProps> = ({
       })}
 
       {isOpen && (
-        <div className={panelClassName ?? 'absolute top-full right-0 mt-1 w-56 rounded-lg border border-border bg-popover py-1 shadow-xl z-[70]'}>
+        <div
+          className={panelClassName ?? `absolute top-full right-0 mt-1 ${panelWidth === 'wide' ? 'w-64' : 'w-56'} rounded-lg border border-border bg-popover py-1 shadow-xl z-[70]`}
+        >
           {children({ closeMenu: () => setIsOpen(false) })}
         </div>
       )}

package/components/AgentsTab.tsx

@@ -22,6 +22,7 @@ import { useAgentSettings } from '../hooks/useAgentSettings';
 import type { AgentEngine, AgentMode, ReviewEngine } from '../hooks/useAgentSettings';
 import type { AgentLaunchParams } from '../hooks/useAgentJobs';
 import { ConfigRow, SegmentedPicker, Toggle, SelectMenu } from './AgentControls';
+import { CODEX_MODELS, CODEX_EFFORT_LABELS, codexReasoningOptions } from '../utils/codexModels';
 
 export type { AgentLaunchParams } from '../hooks/useAgentJobs';
 
@@ -29,6 +30,7 @@ export type { AgentLaunchParams } from '../hooks/useAgentJobs';
 
 export const CLAUDE_MODELS: Array<{ value: string; label: string }> = [
   { value: 'claude-fable-5', label: 'Fable 5' },
+  { value: 'claude-opus-5', label: 'Opus 5' },
   { value: 'claude-opus-4-8', label: 'Opus 4.8' },
   { value: 'claude-opus-4-8[1m]', label: 'Opus 4.8 (1M)' },
   { value: 'claude-sonnet-5', label: 'Sonnet 5' },
@@ -49,25 +51,10 @@ export const CLAUDE_EFFORT: Array<{ value: string; label: string }> = [
   { value: 'max', label: 'Max' },
 ];
 
-export const CODEX_MODELS: Array<{ value: string; label: string }> = [
-  { value: 'gpt-5.5', label: 'GPT-5.5' },
-  { value: 'gpt-5.4', label: 'GPT-5.4' },
-  { value: 'gpt-5.3-codex', label: 'GPT-5.3 Codex' },
-  { value: 'gpt-5.3-codex-spark', label: 'GPT-5.3 Codex Spark' },
-  { value: 'gpt-5.2-codex', label: 'GPT-5.2 Codex' },
-  { value: 'gpt-5.2', label: 'GPT-5.2' },
-  { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
-  { value: 'gpt-5.1-codex-mini', label: 'GPT-5.1 Codex Mini' },
-  { value: 'gpt-5.4-mini', label: 'GPT-5.4 Mini' },
-];
-
-export const CODEX_REASONING: Array<{ value: string; label: string }> = [
-  { value: 'minimal', label: 'Minimal' },
-  { value: 'low', label: 'Low' },
-  { value: 'medium', label: 'Medium' },
-  { value: 'high', label: 'High' },
-  { value: 'xhigh', label: 'XHigh' },
-];
+// Codex model catalog + per-model reasoning efforts live in
+// utils/codexModels (useAgentSettings needs them too, for effort clamping);
+// re-exported here so both launch surfaces keep one import site.
+export { CODEX_MODELS, codexReasoningOptions } from '../utils/codexModels';
 
 // Tour/guide Claude catalog: the CLI's latest-resolving aliases on top
 // (verified against `claude --help`: "Provide an alias for the latest model
@@ -270,7 +257,7 @@ function formatEffort(value: string): string {
 }
 
 function formatReasoning(value: string): string {
-  return catalogLabel(CODEX_REASONING, value);
+  return CODEX_EFFORT_LABELS[value] ?? value;
 }
 
 // --- Add-a-review dialog: a type-ahead picker over every discovered skill ---
@@ -1112,7 +1099,7 @@ export const AgentsTab: React.FC<AgentsTabProps> = ({
                       <SelectMenu value={codexModel} options={CODEX_MODELS} onChange={setCodexModel} />
                     </ConfigRow>
                     <ConfigRow label="Reasoning" stacked>
-                      <SegmentedPicker options={CODEX_REASONING} value={codexReasoning} onChange={setCodexReasoning} />
+                      <SegmentedPicker options={codexReasoningOptions(codexModel)} value={codexReasoning} onChange={setCodexReasoning} />
                     </ConfigRow>
                     <ConfigRow label="Fast mode">
                       <Toggle checked={codexFast} onChange={setCodexFast} />
@@ -1155,7 +1142,7 @@ export const AgentsTab: React.FC<AgentsTabProps> = ({
                 {tourEngine === 'codex' && (
                   <>
                     <ConfigRow label="Reasoning" stacked>
-                      <SegmentedPicker options={CODEX_REASONING} value={tourCodexReasoning} onChange={setTourCodexReasoning} />
+                      <SegmentedPicker options={codexReasoningOptions(tourCodexModel)} value={tourCodexReasoning} onChange={setTourCodexReasoning} />
                     </ConfigRow>
                     <ConfigRow label="Fast mode">
                       <Toggle checked={tourCodexFast} onChange={setTourCodexFast} />
@@ -1190,7 +1177,7 @@ export const AgentsTab: React.FC<AgentsTabProps> = ({
                     deliberately not offered for guide. */}
                 {guideEngine === 'codex' && (
                   <ConfigRow label="Reasoning" stacked>
-                    <SegmentedPicker options={CODEX_REASONING} value={guideCodexReasoning} onChange={setGuideCodexReasoning} />
+                    <SegmentedPicker options={codexReasoningOptions(guideCodexModel)} value={guideCodexReasoning} onChange={setGuideCodexReasoning} />
                   </ConfigRow>
                 )}
 

package/components/AnnotationPanel.tsx

@@ -66,7 +66,10 @@ interface PanelProps {
   editorAnnotations?: EditorAnnotation[];
   onDeleteEditorAnnotation?: (id: string) => void;
   onClose?: () => void;
-  onQuickCopy?: () => Promise<void>;
+  /** Copy the full feedback payload. May resolve a success boolean; resolving
+    *  `false` suppresses the "Copied" flash. A void resolution (existing hosts)
+    *  is treated as success, preserving the original behavior. */
+  onQuickCopy?: () => Promise<void | boolean>;
   onShare?: () => void;
   otherFileAnnotations?: { count: number; files: number };
   onOtherFileAnnotationsClick?: () => void;
@@ -77,7 +80,7 @@ interface PanelProps {
     *  resolve UI). The panel stays presentation-only; clicks inside the slot
     *  do not select the card. Default: nothing rendered. */
   renderCardFooter?: (annotation: Annotation) => React.ReactNode;
-  /** Hide every mutation affordance (delete/edit buttons on all card kinds).
+  /** Hide every mutation affordance (delete/edit, direct-edit discard, and host card footers).
     *  Selection and scrolling still work. Default false — today's behavior. */
   readOnly?: boolean;
 }
@@ -178,7 +181,7 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
       <OverlayScrollArea className="flex-1 min-h-0">
         <div ref={listRef} className="p-2 flex flex-col gap-1.5">
         {directEdits?.map((item) => (
-          <DirectEditsCard key={item.id} {...item} />
+          <DirectEditsCard key={item.id} {...item} onDiscard={readOnly ? undefined : item.onDiscard} />
         ))}
         {totalCount === 0 ? (
           (!directEdits || directEdits.length === 0) && (
@@ -204,7 +207,7 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
                   onDelete={() => onDelete(entry.annotation.id)}
                   onEdit={onEdit ? (updates: Partial<Annotation>) => onEdit(entry.annotation.id, updates) : undefined}
                   readOnly={readOnly}
-                  footer={renderCardFooter?.(entry.annotation)}
+                  footer={readOnly ? undefined : renderCardFooter?.(entry.annotation)}
                 />
               ) : (
                 <CodeAnnotationCard
@@ -249,7 +252,8 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
           {onQuickCopy && (
             <button
               onClick={async () => {
-                await onQuickCopy();
+                const result = await onQuickCopy();
+                if (result === false) return;
                 setCopiedText(true);
                 setTimeout(() => setCopiedText(false), 2000);
               }}

package/components/AnnotationToolbar.tsx

@@ -3,6 +3,7 @@ import { AnnotationType } from "../types";
 import { createPortal } from "react-dom";
 import { useDismissOnOutsideAndEscape } from "../hooks/useDismissOnOutsideAndEscape";
 import { type QuickLabel, getQuickLabels } from "../utils/quickLabels";
+import { copyTextToClipboard } from "../utils/clipboard";
 import { FloatingQuickLabelPicker } from "./FloatingQuickLabelPicker";
 
 type PositionMode = 'center-above' | 'top-right';
@@ -72,19 +73,10 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
       const codeEl = element.querySelector('code');
       textToCopy = codeEl?.textContent || element.textContent || '';
     }
-    try {
-      await navigator.clipboard.writeText(textToCopy);
-    } catch {
-      const textarea = document.createElement('textarea');
-      textarea.value = textToCopy;
-      textarea.style.cssText = 'position:fixed;opacity:0';
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand('copy');
-      textarea.remove();
+    if (await copyTextToClipboard(textToCopy)) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
     }
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
   };
 
   // Update position on scroll/resize
@@ -123,7 +115,7 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
   // Type-to-comment + Alt+N / bare digit quick label shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.isComposing) return;
+      if (e.defaultPrevented || e.isComposing) return;
       if (isEditableElement(e.target) || isEditableElement(document.activeElement)) return;
 
       // When picker is open, let FloatingQuickLabelPicker own all keyboard input

package/components/AnnotationToolstrip.tsx

@@ -210,8 +210,8 @@ export const AnnotationToolstrip: React.FC<AnnotationToolstripProps> = ({
                 width="100%"
                 height="100%"
                 src={helpTab === 'selection'
-                  ? 'https://www.youtube.com/embed/ZNt9jtfx9TY?autoplay=1'
-                  : 'https://www.youtube.com/embed/a_AT7cEN_9I?autoplay=1'
+                  ? 'https://www.youtube-nocookie.com/embed/ZNt9jtfx9TY?autoplay=1'
+                  : 'https://www.youtube-nocookie.com/embed/a_AT7cEN_9I?autoplay=1'
                 }
                 title={helpTab === 'selection' ? 'How Selection Modes Work' : 'How Plannotator Works'}
                 frameBorder="0"

package/components/ApproveDropdown.tsx

@@ -36,7 +36,7 @@ export const ApproveDropdown: React.FC<ApproveDropdownProps> = ({
   disabled = false,
   isLoading = false,
 }) => {
-  const [setting, setSetting] = useState<AgentSwitchSettings>(() => getAgentSwitchSettings());
+  const [setting, setSetting] = useState<AgentSwitchSettings>(() => getAgentSwitchSettings('plan'));
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 

package/components/BlockRenderer.tsx

@@ -106,7 +106,7 @@ export const BlockRenderer: React.FC<{
     }
 
     case 'code':
-      return <CodeBlock block={block} onHover={() => {}} onLeave={() => {}} isHovered={false} />;
+      return <CodeBlock block={block} isHovered={false} />;
 
     case 'table':
       return (

package/components/CodeFilePopout.tsx

@@ -6,6 +6,7 @@ import { useTheme } from './ThemeProvider';
 import { CommentPopover } from './CommentPopover';
 import { ImageThumbnail } from './ImageThumbnail';
 import type { CodeAnnotation, ImageAttachment } from '../types';
+import { copyTextToClipboard } from '../utils/clipboard';
 
 export interface CodeFileAnnotationInput {
   filePath: string;
@@ -457,12 +458,11 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
   }, [onAddAnnotation, openCommentForRange]);
 
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(contents);
+    if (await copyTextToClipboard(contents)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
@@ -583,6 +583,7 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
           anchorRect={pendingComment.anchorRect}
           contextText={pendingComment.contextText}
           isGlobal={false}
+          skillReferences
           onSubmit={(text, images) => {
             onAddAnnotation({
               filePath: filepath,