@opengeni/react 6.1.0 → 7.0.0-canary.35625901699001

package/src/components/artifacts/presentation-editor.tsx

@@ -44,6 +44,9 @@ const MAX_ZOOM = 4;
 const RAIL_ITEM_HEIGHT = 116;
 const RAIL_OVERSCAN = 3;
 const DEFAULT_RAIL_HEIGHT = 640;
+const MOBILE_RAIL_ITEM_HEIGHT = 44;
+const MOBILE_RAIL_OVERSCAN = 3;
+const DEFAULT_MOBILE_LIST_HEIGHT = 264;
 const DEFAULT_VIEWPORT = { width: 960, height: 640 };
 const SPATIAL_TILE = 256;
 const MAX_SPATIAL_BUCKETS_PER_OBJECT = 1_024;
@@ -450,6 +453,15 @@ export function PresentationProjectionEditor({
   );
 }
 
+function nextSlideIndexFromKey(key: string, activeIndex: number, length: number): number | null {
+  if (length === 0) return null;
+  if (key === "ArrowDown") return Math.min(length - 1, activeIndex + 1);
+  if (key === "ArrowUp") return Math.max(0, activeIndex - 1);
+  if (key === "Home") return 0;
+  if (key === "End") return length - 1;
+  return null;
+}
+
 function PresentationEditorCore({
   presentation,
   revision,
@@ -492,6 +504,11 @@ function PresentationEditorCore({
     scrollTop: 0,
     height: DEFAULT_RAIL_HEIGHT,
   });
+  const [mobileSelectorOpen, setMobileSelectorOpen] = useState(false);
+  const [mobileRail, setMobileRail] = useState({
+    scrollTop: 0,
+    height: DEFAULT_MOBILE_LIST_HEIGHT,
+  });
   const [viewport, setViewport] = useState<ViewportMetrics>({
     scrollLeft: 0,
     scrollTop: 0,
@@ -504,6 +521,9 @@ function PresentationEditorCore({
   const [textDraft, setTextDraft] = useState("");
   const [paintEpoch, setPaintEpoch] = useState(0);
   const railRef = useRef<HTMLDivElement>(null);
+  const mobileSelectorTriggerRef = useRef<HTMLButtonElement>(null);
+  const mobileSelectorPanelRef = useRef<HTMLDivElement>(null);
+  const mobileRailRef = useRef<HTMLDivElement>(null);
   const viewportRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -517,6 +537,7 @@ function PresentationEditorCore({
   const commandVersionsRef = useRef(new Map<string, number>());
   const pendingSlideIdRef = useRef<string | null>(null);
   const pendingObjectIdRef = useRef<string | null>(null);
+  const mobileRailScrollOnOpenRef = useRef(0);
   const domId = useId().replaceAll(":", "");
   const selectionProxyId = `${domId}-presentation-selection`;
   const instructionsId = `${domId}-presentation-instructions`;
@@ -596,6 +617,47 @@ function PresentationEditorCore({
     return () => observer.disconnect();
   }, []);
 
+  useLayoutEffect(() => {
+    if (!mobileSelectorOpen) return;
+    const element = mobileRailRef.current;
+    if (!element) return;
+    element.scrollTop = mobileRailScrollOnOpenRef.current;
+    element.focus();
+    const measure = () =>
+      setMobileRail((current) => ({
+        scrollTop: element.scrollTop,
+        height: element.clientHeight || current.height,
+      }));
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [mobileSelectorOpen]);
+
+  useEffect(() => {
+    if (!mobileSelectorOpen) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (mobileSelectorTriggerRef.current?.contains(target)) return;
+      if (mobileSelectorPanelRef.current?.contains(target)) return;
+      setMobileSelectorOpen(false);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      setMobileSelectorOpen(false);
+      mobileSelectorTriggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [mobileSelectorOpen]);
+
   useLayoutEffect(() => {
     const element = viewportRef.current;
     if (!element) return;
@@ -1058,6 +1120,34 @@ function PresentationEditorCore({
     [activeIndex, activeSlide, selectSlide, slides],
   );
 
+  const toggleMobileSlideSelector = useCallback(() => {
+    setMobileSelectorOpen((open) => {
+      if (open) return false;
+      const index = Math.max(0, activeIndex);
+      const height = DEFAULT_MOBILE_LIST_HEIGHT;
+      const maxScroll = Math.max(0, slides.length * MOBILE_RAIL_ITEM_HEIGHT - height);
+      const scrollTop = Math.max(
+        0,
+        Math.min(
+          maxScroll,
+          index * MOBILE_RAIL_ITEM_HEIGHT - height / 2 + MOBILE_RAIL_ITEM_HEIGHT / 2,
+        ),
+      );
+      mobileRailScrollOnOpenRef.current = scrollTop;
+      setMobileRail({ scrollTop, height });
+      return true;
+    });
+  }, [activeIndex, slides.length]);
+
+  const chooseMobileSlide = useCallback(
+    (slide: Slide, index: number) => {
+      if (slide !== activeSlide) selectSlide(slide, index);
+      setMobileSelectorOpen(false);
+      mobileSelectorTriggerRef.current?.focus();
+    },
+    [activeSlide, selectSlide],
+  );
+
   const handleCanvasKeyDown = useCallback(
     (event: ReactKeyboardEvent<SVGSVGElement>) => {
       if (event.metaKey || event.ctrlKey) {
@@ -1229,6 +1319,17 @@ function PresentationEditorCore({
     slides.length,
     Math.ceil((rail.scrollTop + rail.height) / RAIL_ITEM_HEIGHT) + RAIL_OVERSCAN,
   );
+  const mobileRailStart = Math.max(
+    0,
+    Math.floor(mobileRail.scrollTop / MOBILE_RAIL_ITEM_HEIGHT) - MOBILE_RAIL_OVERSCAN,
+  );
+  const mobileRailEnd = Math.min(
+    slides.length,
+    Math.ceil((mobileRail.scrollTop + mobileRail.height) / MOBILE_RAIL_ITEM_HEIGHT) +
+      MOBILE_RAIL_OVERSCAN,
+  );
+  const slideCountLabel =
+    activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}`;
   const stageWidth = presentation.slideSize.width * zoom;
   const stageHeight = presentation.slideSize.height * zoom;
 
@@ -1256,8 +1357,22 @@ function PresentationEditorCore({
           >
             <ChevronLeftIcon />
           </button>
-          <span className="min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted">
-            {activeIndex >= 0 ? `${activeIndex + 1} / ${slides.length}` : `0 / ${slides.length}`}
+          <button
+            ref={mobileSelectorTriggerRef}
+            type="button"
+            aria-label="Choose slide"
+            aria-haspopup="listbox"
+            aria-expanded={mobileSelectorOpen}
+            aria-controls={mobileSelectorOpen ? `${domId}-mobile-slides` : undefined}
+            disabled={slides.length === 0}
+            data-og-mobile-slide-selector
+            onClick={toggleMobileSlideSelector}
+            className="inline-flex min-h-11 min-w-16 shrink-0 items-center justify-center rounded-og-sm px-2 text-og-xs tabular-nums text-og-fg-muted hover:bg-og-surface-3 hover:text-og-fg disabled:opacity-35 sm:hidden"
+          >
+            <span>{slideCountLabel}</span>
+          </button>
+          <span className="hidden min-w-16 shrink-0 text-center text-og-xs tabular-nums text-og-fg-muted sm:inline">
+            {slideCountLabel}
           </span>
           <button
             type="button"
@@ -1364,7 +1479,7 @@ function PresentationEditorCore({
         {commandFailure?.message ?? (pendingCommands > 0 ? "Saving presentation changes" : "")}
       </div>
 
-      <div className="flex min-h-0 min-w-0 flex-1">
+      <div className="relative flex min-h-0 min-w-0 flex-1">
         <div
           ref={railRef}
           role="listbox"
@@ -1389,12 +1504,7 @@ function PresentationEditorCore({
             }));
           }}
           onKeyDown={(event) => {
-            if (slides.length === 0) return;
-            let nextIndex: number | null = null;
-            if (event.key === "ArrowDown") nextIndex = Math.min(slides.length - 1, activeIndex + 1);
-            else if (event.key === "ArrowUp") nextIndex = Math.max(0, activeIndex - 1);
-            else if (event.key === "Home") nextIndex = 0;
-            else if (event.key === "End") nextIndex = slides.length - 1;
+            const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
             if (nextIndex === null) return;
             event.preventDefault();
             const next = slides[nextIndex];
@@ -1447,6 +1557,101 @@ function PresentationEditorCore({
           </div>
         </div>
 
+        {mobileSelectorOpen ? (
+          <div
+            ref={mobileSelectorPanelRef}
+            className="absolute left-2 top-2 z-40 max-w-56 overflow-hidden rounded-og-md border border-og-border bg-og-surface-1 shadow-og-md sm:hidden"
+            style={{ width: "calc(100% - 1rem)" }}
+          >
+            <div
+              ref={mobileRailRef}
+              id={`${domId}-mobile-slides`}
+              role="listbox"
+              tabIndex={0}
+              aria-label="Slides"
+              aria-orientation="vertical"
+              aria-activedescendant={
+                activeSlide && activeIndex >= mobileRailStart && activeIndex < mobileRailEnd
+                  ? `${domId}-mobile-slide-${safeDomId(activeSlide.id)}`
+                  : undefined
+              }
+              className="max-h-72 overflow-y-auto outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-og-accent"
+              data-og-mobile-slide-list
+              data-og-window-start={mobileRailStart}
+              data-og-window-end={mobileRailEnd}
+              onScroll={(event) => {
+                const scrollTop = event.currentTarget.scrollTop;
+                const height = event.currentTarget.clientHeight;
+                setMobileRail((current) => ({
+                  scrollTop,
+                  height: height || current.height,
+                }));
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setMobileSelectorOpen(false);
+                  mobileSelectorTriggerRef.current?.focus();
+                  return;
+                }
+                const nextIndex = nextSlideIndexFromKey(event.key, activeIndex, slides.length);
+                if (nextIndex === null) return;
+                event.preventDefault();
+                const next = slides[nextIndex];
+                if (!next) return;
+                if (next !== activeSlide) selectSlide(next, nextIndex);
+                const list = event.currentTarget;
+                const top = nextIndex * MOBILE_RAIL_ITEM_HEIGHT;
+                const bottom = top + MOBILE_RAIL_ITEM_HEIGHT;
+                if (top < list.scrollTop) list.scrollTop = top;
+                else if (bottom > list.scrollTop + list.clientHeight) {
+                  list.scrollTop = bottom - list.clientHeight;
+                }
+              }}
+            >
+              <div
+                className="relative w-full"
+                style={{ height: slides.length * MOBILE_RAIL_ITEM_HEIGHT }}
+              >
+                {slides.slice(mobileRailStart, mobileRailEnd).map((slide, offset) => {
+                  const index = mobileRailStart + offset;
+                  const active = slide === activeSlide;
+                  return (
+                    <button
+                      key={slide.id}
+                      id={`${domId}-mobile-slide-${safeDomId(slide.id)}`}
+                      type="button"
+                      role="option"
+                      tabIndex={-1}
+                      aria-selected={active}
+                      aria-label={`Slide ${index + 1}${slide.title ? `: ${slide.title}` : ""}`}
+                      onClick={() => chooseMobileSlide(slide, index)}
+                      className={cn(
+                        "absolute left-0 flex min-h-11 w-full items-center gap-2 px-2 text-left",
+                        active
+                          ? "bg-og-surface-3 text-og-fg"
+                          : "text-og-fg-muted hover:bg-og-surface-3/70",
+                      )}
+                      style={{
+                        top: index * MOBILE_RAIL_ITEM_HEIGHT,
+                        height: MOBILE_RAIL_ITEM_HEIGHT,
+                      }}
+                      data-og-mobile-slide-index={index}
+                    >
+                      <span className="w-7 shrink-0 text-right text-og-xs tabular-nums text-og-fg-subtle">
+                        {index + 1}
+                      </span>
+                      <span className="min-w-0 flex-1 truncate text-og-sm">
+                        {slide.title || `Slide ${index + 1}`}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        ) : null}
+
         <div
           ref={viewportRef}
           className="relative min-h-0 min-w-0 flex-1 overflow-auto bg-og-surface-3/60 p-6"

package/src/components/artifacts/spreadsheet-canvas.ts

@@ -1,3 +1,5 @@
+import { formatSpreadsheetGeneralDisplay } from "./spreadsheet-general-display";
+
 const TILE_SIZE = 256;
 const MAX_CACHE_PHYSICAL_PIXELS = 32_000_000;
 const MAX_CACHE_TILES = 96;
@@ -430,7 +432,7 @@ export class SpreadsheetCanvasRenderer {
 
     for (const cell of cells) {
       const value = input.projection.valueAt(cell);
-      const text = displayValue(value);
+      const text = formatSpreadsheetGeneralDisplay(value);
       if (!text) continue;
       paintCellText(context, input, cell, text, tileLeft, tileTop);
     }
@@ -776,13 +778,6 @@ function finitePositive(value: number | undefined, fallback: number): number {
   return value !== undefined && Number.isFinite(value) && value > 0 ? value : fallback;
 }
 
-function displayValue(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
-  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
-  return String(value);
-}
-
 function columnName(index: number): string {
   let value = index + 1;
   let result = "";

package/src/components/artifacts/spreadsheet-general-display.ts

@@ -0,0 +1,43 @@
+/**
+ * DISPLAY-ONLY General number formatting for spreadsheet canvas and a11y
+ * labels. This is not numeric arithmetic and must never feed formula-bar /
+ * cell-edit `input`, stored cells, formula results, or serialized exports.
+ *
+ * Policy for independent review:
+ * IEEE-754 cannot represent many decimal fractions exactly, so values such as
+ * `110.00000000000001` and `0.1 + 0.2` leak binary residue through `String(n)`.
+ * General display therefore collapses a finite number to 15 significant decimal
+ * digits — the same bound spreadsheet General uses — via
+ * `String(Number(value.toPrecision(15)))`.
+ *
+ * That mapping yields `110` / `220` / `0.3` for the noisy cases while keeping
+ * exponent-scale values (`1e-20`, `1e21`) and ~15-digit legitimate precision.
+ * Integers stringify without a decimal; `-0` displays as `0`; non-finite
+ * numbers, dates, booleans, errors, and strings keep their existing labels.
+ *
+ * Do not reuse `Intl.NumberFormat({ maximumFractionDigits: 12 })` from the
+ * artifact-tool renderer: 12 fraction digits rounds `1e-20` to `0` and truncates
+ * high-precision values that General should still show.
+ */
+export function formatSpreadsheetGeneralDisplay(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  if (typeof value === "number") {
+    if (Object.is(value, -0) || value === 0) return "0";
+    if (!Number.isFinite(value)) return String(value);
+    const rounded = Number(value.toPrecision(15));
+    // Rounding at the finite IEEE-754 boundary can overflow. A display policy
+    // must not turn a finite source into an infinity label.
+    return String(Number.isFinite(rounded) ? rounded : value);
+  }
+  return String(value);
+}
+
+/** Exact edit/formula-bar source. Numbers stay `String(value)` with no General collapse. */
+export function spreadsheetCellEditSource(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
+  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
+  return String(value);
+}

package/src/components/artifacts/spreadsheet-grid.tsx

@@ -26,6 +26,10 @@ import {
   type SpreadsheetCanvasProjection,
   type SpreadsheetCanvasTheme,
 } from "./spreadsheet-canvas";
+import {
+  formatSpreadsheetGeneralDisplay,
+  spreadsheetCellEditSource,
+} from "./spreadsheet-general-display";
 
 const MAX_ROWS = 1_048_576;
 const MAX_COLUMNS = 16_384;
@@ -494,13 +498,6 @@ function isCellSelected(selection: SpreadsheetSelection, row: number, col: numbe
   );
 }
 
-function displayValue(value: unknown): string {
-  if (value === null || value === undefined) return "";
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toLocaleDateString();
-  if (typeof value === "boolean") return value ? "TRUE" : "FALSE";
-  return String(value);
-}
-
 function parseCellInput(input: string): string | number | boolean | null {
   if (input === "") return null;
   const normalized = input.trim();
@@ -906,7 +903,7 @@ export function SpreadsheetGrid({
         const data = worksheet.cellData(row, col);
         return {
           value: data.formula ? workbook.valueAt(worksheet, { row, col }) : data.value,
-          input: data.formula ?? displayValue(data.value),
+          input: data.formula ?? spreadsheetCellEditSource(data.value),
           format: data.format,
         };
       },
@@ -2059,7 +2056,7 @@ export function SpreadsheetProjectionGrid({
                       role="gridcell"
                       aria-colindex={col + 1}
                       aria-selected={selected}
-                      aria-label={`${address}${value === null ? "" : `, ${displayValue(value)}`}`}
+                      aria-label={`${address}${value === null ? "" : `, ${formatSpreadsheetGeneralDisplay(value)}`}`}
                       data-og-cell={address}
                       className={cn(
                         "pointer-events-none absolute top-0 flex h-full min-w-0 overflow-hidden border-b border-r border-og-border px-1.5 text-og-fg",
@@ -2099,7 +2096,7 @@ export function SpreadsheetProjectionGrid({
                         />
                       ) : (
                         <span className="block min-w-0 overflow-hidden text-ellipsis">
-                          {displayValue(value)}
+                          {formatSpreadsheetGeneralDisplay(value)}
                         </span>
                       )}
                     </div>
@@ -2117,7 +2114,9 @@ export function SpreadsheetProjectionGrid({
                 aria-colindex={selection.focus.col + 1}
                 aria-selected="true"
                 aria-label={`${cellName(selection.focus)}${
-                  hiddenActiveValue == null ? "" : `, ${displayValue(hiddenActiveValue)}`
+                  hiddenActiveValue == null
+                    ? ""
+                    : `, ${formatSpreadsheetGeneralDisplay(hiddenActiveValue)}`
                 }`}
               />
             </div>

package/src/components/chat-composer.tsx

@@ -1,6 +1,12 @@
 import type { ClientModel, EffectiveSessionControl } from "@opengeni/sdk";
 import { LayoutGroup, motion } from "motion/react";
-import type { ClipboardEvent, ReactNode } from "react";
+import {
+  useImperativeHandle,
+  type ClipboardEvent,
+  type ComponentProps,
+  type ReactNode,
+  type Ref,
+} from "react";
 import type { SlashCommand } from "../commands/types";
 import type { ComposerState } from "../hooks/use-composer";
 import type { UseFileAttachmentsResult } from "../hooks/use-file-attachments";
@@ -41,6 +47,14 @@ export { OPEN_WORKSTREAM_CONTROL_EVENT };
 
 export type ChatComposerProps = {
   composer: ComposerState;
+  /** Replace only the normal footer, inside the shared composer context.
+   * Confirmation, drafts, annotations and attachments remain native. */
+  footer?: ReactNode;
+  focusRef?: Ref<{ focusInput: () => void }>;
+  inputProps?: ComponentProps<typeof Input> & {
+    [attribute: `data-${string}`]: string | number | boolean | undefined;
+  };
+  surfaceClassName?: string;
   /**
    * Measurement surface for responsive chrome. Defaults to the historical
    * viewport breakpoints; opt into `container` for narrow embedded panels.
@@ -125,6 +139,10 @@ export function ChatComposer({
   commandContext,
   onClearView,
   messages,
+  footer,
+  focusRef,
+  inputProps,
+  surfaceClassName,
 }: ChatComposerProps) {
   const controller = useChatComposerController({
     delivery: composer,
@@ -146,13 +164,16 @@ export function ChatComposer({
     attachments || models || controlsLeading || controlsStart || transcription,
   );
   const stackActions = hasControls && Boolean(actionsStart);
+  useImperativeHandle(focusRef, () => ({ focusInput: controller.focusInput }), [
+    controller.focusInput,
+  ]);
 
   return (
     <>
       <Root controller={controller} responsiveBasis={responsiveBasis} className={className}>
         <Frame>
           <CommandPalette />
-          <Surface>
+          <Surface className={surfaceClassName}>
             <PausedState />
             <RestoredResources />
             <Attachments />
@@ -172,9 +193,11 @@ export function ChatComposer({
                 />
               </div>
             ) : null}
-            <Input placeholder={placeholder} autoFocus={autoFocus} />
+            <Input {...inputProps} placeholder={placeholder} autoFocus={autoFocus} />
             {controller.confirmState ? (
               <Confirmation />
+            ) : footer !== undefined ? (
+              footer
             ) : (
               <Footer
                 data-og-stack-actions={stackActions ? "" : undefined}

package/src/components/composer.tsx

@@ -449,7 +449,6 @@ export function useChatComposerController({
   }, [id, paused]);
 
   const blockedByAttachment = attachments?.hasUnresolved === true;
-  const hasReadyAttachment = (attachments?.readyResources.length ?? 0) > 0;
 
   const [dragging, setDragging] = useState(false);
   const dragCarriesFiles = (event: { dataTransfer: DataTransfer | null }): boolean =>
@@ -573,7 +572,7 @@ export function useChatComposerController({
           ? "command"
           : annotationsIncomplete
             ? "annotations"
-            : delivery.canSend || hasReadyAttachment
+            : delivery.canSend
               ? null
               : "empty";
   const canSubmit = submitBlocker === null;
@@ -593,7 +592,7 @@ export function useChatComposerController({
         delivery.requestAnnotationReview?.();
         return false;
       }
-      if (!delivery.canSend && !hasReadyAttachment) return false;
+      if (!delivery.canSend) return false;
       submittingRef.current = true;
       setSubmitting(true);
       try {
@@ -609,7 +608,6 @@ export function useChatComposerController({
       commandDraftBlocked,
       delivery,
       disabled,
-      hasReadyAttachment,
       messages.annotationNotesRequired,
       messages.slashCommandBlocked,
     ],
@@ -1015,6 +1013,14 @@ export const Input = forwardRef<HTMLTextAreaElement, ComposerInputProps>(functio
       const textarea = controller.textareaRef.current;
       if (!textarea || textarea.disabled) return;
       autoFocusedRef.current = true;
+      // Draft hydration may finish after the user has started editing another
+      // field. Initial focus is a convenience, not authority to take their caret.
+      const active = textarea.ownerDocument.activeElement;
+      if (
+        active !== textarea &&
+        active?.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]')
+      )
+        return;
       textarea.focus();
     });
     return () => window.cancelAnimationFrame(frame);

package/src/components/human-input-form.tsx

@@ -159,6 +159,9 @@ function HumanInputRequestForm({
           revisionId: question.skillReview!.revisionId,
           expectedRevisionId: question.skillReview!.expectedRevisionId,
           expectedScopeVersion: question.skillReview!.expectedScopeVersion,
+          ...(question.skillReview!.removalOperationId
+            ? { removalOperationId: question.skillReview!.removalOperationId }
+            : {}),
         },
       })),
   );
@@ -188,6 +191,7 @@ function HumanInputRequestForm({
         if (
           record.id !== reference.skillId ||
           record.revisionId !== reference.revisionId ||
+          (record.removalOperationId ?? undefined) !== reference.removalOperationId ||
           !record.files.some((file) => file.path === "SKILL.md")
         ) {
           throw new Error("The requested Skill revision could not be verified.");
@@ -230,7 +234,9 @@ function HumanInputRequestForm({
               {record.title ?? "Skill"} · {record.scope} · {record.files.length} files
             </p>
             <p className="text-og-xs text-og-fg-muted">
-              Saving activates these exact files. No additional review is required.
+              {question.skillReview.removalOperationId
+                ? "Permanently deletes this Skill and all stored revisions. This cannot be undone; conversations remain unchanged."
+                : "Saving activates these exact files. No additional review is required."}
             </p>
             {record.files.map((file) => (
               <details key={file.path} open={file.path === "SKILL.md"}>
@@ -357,7 +363,11 @@ function HumanInputRequestForm({
         ),
     );
     if (unreviewedSave) {
-      setValidationErrors({ [unreviewedSave.id]: "Load the exact Skill files before saving." });
+      setValidationErrors({
+        [unreviewedSave.id]: unreviewedSave.skillReview?.removalOperationId
+          ? "Load the exact Skill proposal before approving permanent deletion."
+          : "Load the exact Skill files before saving.",
+      });
       return;
     }
     await submitResponse({ outcome: "answered", answers: result.answers });