more work on comic breakup, models

Author: hatton

AGENTS.md

@@ -45,7 +45,7 @@ Use the chrome-devtools in a terminal to drive and probe the running app.
    - Composed from repeated **ImagePanel** instances to normalize uploads, drag/drop, and clearing.
 4. **Supporting Panels**
    - `HistoryStrip` (and `ImageSlot` thumbnails) keep recent generations accessible for drag-over to the main panels.
-   - `CapabilityPanel`, `ToolPanel`, and files under components/tools describe the registry-driven tool controls.
+   - `ToolModelPicker`, `ToolPanel`, and files under components/tools describe the registry-driven tool controls (each tool picks its own model + reasoning).
    - `ReferenceImagesPanel`, `ImageInfoPanel`, and `ImageToolsPanel` subcomponents round out auxiliary UI.
 
 ## UI

components/CapabilityPanel.tsx

@@ -59,12 +59,18 @@ const resolveStyleSummary = (item: ImageRecord): string | null => {
   return `${style.name} (${styleId})`;
 };
 
+// Prompts longer than this are collapsed by default so the info panel doesn't
+// grow taller than the viewport and run off the screen.
+const PROMPT_COLLAPSE_THRESHOLD = 280;
+
 export const ImageInfoPanel: React.FC<ImageInfoPanelProps> = ({ item }) => {
   const tool = TOOLS.find((t) => t.id === item.toolId);
   const promptContent =
     item.promptUsed && item.promptUsed.length ? item.promptUsed : "Prompt unavailable.";
+  const isPromptLong = promptContent.length > PROMPT_COLLAPSE_THRESHOLD;
 
   const [promptCopied, setPromptCopied] = React.useState(false);
+  const [promptExpanded, setPromptExpanded] = React.useState(false);
   const copyResetTimeoutRef = React.useRef<number | null>(null);
 
   React.useEffect(() => {
@@ -155,6 +161,37 @@ export const ImageInfoPanel: React.FC<ImageInfoPanelProps> = ({ item }) => {
         gap: "6px",
       }}
     >
+      {item.caption && item.caption.trim().length > 0 && (
+        <div
+          style={{
+            marginBottom: 8,
+            paddingBottom: 8,
+            borderBottom: `1px solid ${theme.colors.border}`,
+          }}
+        >
+          <span
+            style={{
+              display: "block",
+              marginBottom: 4,
+              color: theme.colors.textMuted,
+            }}
+          >
+            Associated text:
+          </span>
+          <div
+            data-testid="image-caption"
+            style={{
+              color: theme.colors.textPrimary,
+              fontSize: "12px",
+              whiteSpace: "pre-wrap",
+              lineHeight: 1.4,
+            }}
+          >
+            {item.caption}
+          </div>
+        </div>
+      )}
+
       <div style={rowStyle}>
         <span style={{ color: theme.colors.textMuted }}>Tool:</span>
         <span
@@ -218,24 +255,53 @@ export const ImageInfoPanel: React.FC<ImageInfoPanelProps> = ({ item }) => {
           }}
         >
           <span style={{ display: "block" }}>Full Prompt:</span>
-          <Tooltip title={promptCopied ? "Copied" : "Copy prompt"}>
-            <IconButton
-              aria-label="Copy full prompt"
-              onClick={handleCopyPrompt}
-              size="small"
-              data-testid="copy-full-prompt"
-              sx={{ color: theme.colors.textMuted }}
-            >
-              <ContentCopyIcon fontSize="inherit" />
-            </IconButton>
-          </Tooltip>
+          <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+            {isPromptLong && (
+              <button
+                type="button"
+                onClick={() => setPromptExpanded((prev) => !prev)}
+                data-testid="toggle-full-prompt"
+                aria-expanded={promptExpanded}
+                style={{
+                  background: "none",
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer",
+                  color: theme.colors.textSecondary,
+                  fontSize: "11px",
+                  textDecoration: "underline",
+                }}
+              >
+                {promptExpanded ? "Show less" : "Show more"}
+              </button>
+            )}
+            <Tooltip title={promptCopied ? "Copied" : "Copy prompt"}>
+              <IconButton
+                aria-label="Copy full prompt"
+                onClick={handleCopyPrompt}
+                size="small"
+                data-testid="copy-full-prompt"
+                sx={{ color: theme.colors.textMuted }}
+              >
+                <ContentCopyIcon fontSize="inherit" />
+              </IconButton>
+            </Tooltip>
+          </div>
         </div>
         <div
           style={{
             color: theme.colors.textPrimary,
             fontSize: "11px",
             whiteSpace: "pre-wrap",
             lineHeight: 1.4,
+            ...(isPromptLong && !promptExpanded
+              ? {
+                  maxHeight: "7.5em",
+                  overflow: "hidden",
+                  maskImage: "linear-gradient(to bottom, black 60%, transparent 100%)",
+                  WebkitMaskImage: "linear-gradient(to bottom, black 60%, transparent 100%)",
+                }
+              : {}),
           }}
         >
           {promptContent}

components/ImageInfoPanel.tsx

@@ -23,16 +23,11 @@ import {
   setInternalImageDragData,
 } from "./dragConstants";
 import { recordDragDelayMs } from "./dndDragState";
-import {
-  getTypeFromFileName,
-  getTypeFromMime,
-  handleCopy as copyImageToClipboard,
-  handlePaste as pasteImageFromClipboard,
-} from "../lib/clipboardUtils";
+import { getTypeFromFileName, handlePaste as pasteImageFromClipboard } from "../lib/clipboardUtils";
 import { getImageFileExtensionFromMimeType, getMimeTypeFromUrl } from "../lib/imageUtils";
 import { hasImageFilePayload, getImageFileFromDataTransfer } from "../lib/dragUtils";
-import { TOOLS } from "./tools/tools-registry";
-import { getModelNameById } from "../lib/modelsCatalog";
+import { copyImageRecordWithFeedback } from "./copyImageRecordToClipboard";
+import { subscribeToImageCopyFeedback } from "../lib/imageCopyFeedback";
 
 let transparentDragImage: HTMLImageElement | null = null;
 const getTransparentDragImage = (): HTMLImageElement | null => {
@@ -347,6 +342,35 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
     }
   }, [image, disabled]);
 
+  // Surface the "Copied!" status badge whenever this image is copied — whether
+  // from this slot's own copy button or from the global Ctrl/Cmd+C shortcut.
+  const imageId = image?.id;
+  React.useEffect(() => {
+    if (!imageId) return;
+    let resetTimeout: number | null = null;
+    const clearReset = () => {
+      if (resetTimeout !== null) {
+        window.clearTimeout(resetTimeout);
+        resetTimeout = null;
+      }
+    };
+
+    const unsubscribe = subscribeToImageCopyFeedback(imageId, (status) => {
+      clearReset();
+      setThumbnailStatus(status);
+      if (status === "copied") {
+        resetTimeout = window.setTimeout(() => setThumbnailStatus("idle"), 1500);
+      } else if (status === "copyError") {
+        resetTimeout = window.setTimeout(() => setThumbnailStatus("idle"), 3000);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+      clearReset();
+    };
+  }, [imageId]);
+
   const openFilePicker = () => {
     if (!onUpload || disabled) return;
     fileInputRef.current?.click();
@@ -377,37 +401,9 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
 
   const handleCopy = async () => {
     if (!image || !mergedControls.copy) return;
-
-    try {
-      setThumbnailStatus("copying");
-
-      const tool = TOOLS.find((t) => t.id === image.toolId) || null;
-      const isNewImageTool = tool?.editImage === false;
-      const modelId = (image.model || "").trim();
-      const modelName = getModelNameById(modelId) || modelId;
-      const reasoningLevel = (image.reasoningLevel || "").trim();
-      const pngMetadata = modelId
-        ? isNewImageTool
-          ? {
-              IllustratorModel: modelName,
-              IllustratorModelId: modelId,
-              IllustratorReasoningLevel: reasoningLevel,
-            }
-          : {
-              EditorModel: modelName,
-              EditorModelId: modelId,
-              EditorReasoningLevel: reasoningLevel,
-            }
-        : undefined;
-
-      await copyImageToClipboard(image.imageData, pngMetadata);
-      setThumbnailStatus("copied");
-      setTimeout(() => setThumbnailStatus("idle"), 1500);
-    } catch (err) {
-      console.error("Failed to copy image:", err);
-      setThumbnailStatus("copyError");
-      setTimeout(() => setThumbnailStatus("idle"), 3000);
-    }
+    // Status badge ("Copying..." → "Copied!") is driven by the copy-feedback
+    // subscription below, so a copy started here OR via Ctrl+C looks identical.
+    await copyImageRecordWithFeedback(image);
   };
 
   const handleDownload = () => {

components/ImageSlot.tsx

@@ -450,9 +450,15 @@ export const ImageSlotActions = React.forwardRef<ImageSlotActionsHandle, ImageSl
       if (!image || disabled || orderedActions.length === 0) return null;
 
       const removeAction = orderedActions.find((action) => action.key === "remove");
-      const overflowActions = orderedActions.filter((action) => action.key !== "remove");
+      // Surface copy as a dedicated, always-on-hover button (rather than burying
+      // it in the "..." overflow) so a single hover-click copies the thumbnail.
+      const copyAction = orderedActions.find((action) => action.key === "copy");
+      const overflowActions = orderedActions.filter(
+        (action) => action.key !== "remove" && action.key !== "copy",
+      );
 
       const showRemove = isHovered;
+      const showCopy = isHovered;
       const showMoreTrigger =
         overflowActions.length > 0 && ((isHovered && isThumbMoreReady) || isThumbOverflowOpen);
 
@@ -477,6 +483,25 @@ export const ImageSlotActions = React.forwardRef<ImageSlotActionsHandle, ImageSl
             </div>
           ) : null}
 
+          {copyAction ? (
+            <div
+              style={{
+                position: "absolute",
+                bottom: cornerOffset,
+                right: cornerOffset,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+                zIndex: 20,
+                opacity: showCopy ? 1 : 0,
+                pointerEvents: disabled ? "none" : showCopy ? "auto" : "none",
+                transition: "opacity 120ms ease",
+              }}
+            >
+              {renderActionButton(copyAction)}
+            </div>
+          ) : null}
+
           {overflowActions.length > 0 ? (
             <div
               style={{