@stigmer/react 3.9.0 → 3.11.0

package/src/execution/MessageAttachments.tsx

@@ -0,0 +1,364 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@stigmer/theme";
+import { AttachmentImageLightbox } from "../attachment/AttachmentImageLightbox.js";
+import { UNSTYLED_BUTTON } from "../internal/form-primitives.js";
+import { useArtifactDownload } from "./useArtifactDownload.js";
+import { useArtifactDownloadUrl } from "./useArtifactDownloadUrl.js";
+
+/**
+ * The minimal display shape of a submitted attachment.
+ *
+ * Structurally satisfied by BOTH sources a human turn can carry — the
+ * `Attachment` proto on a persisted execution's `spec.attachments` and the
+ * `AttachmentInput` a just-submitted (pending) turn holds — so the thread
+ * renders either without conversion code or a duplicated type (DD-007).
+ */
+export interface MessageAttachmentView {
+  /** Original filename, e.g. `"screenshot.png"`. */
+  readonly filename?: string;
+  /** MIME type, e.g. `"image/png"`. Drives the image-vs-document treatment. */
+  readonly contentType?: string;
+  /** Storage key (`attachments/{ulid}/{filename}`) minted at upload time. */
+  readonly storageKey?: string;
+}
+
+/** Props for {@link MessageAttachments}. */
+export interface MessageAttachmentsProps {
+  /** The turn's submitted attachments, in submission order. */
+  readonly attachments: readonly MessageAttachmentView[];
+  /**
+   * The execution the attachments were submitted to. Enables the byte-backed
+   * affordances — image previews (presigned URL) and document downloads.
+   * Omit for the optimistic pending bubble (no execution record yet) and the
+   * failed-send bubble (no record ever): images render as inert glyph tiles
+   * and documents as inert chips until a real turn brings the presign seam.
+   */
+  readonly executionId?: string;
+  /** Additional CSS class names for the row container. */
+  readonly className?: string;
+}
+
+/**
+ * The attachment row on a human turn: the durable evidence of what files were
+ * sent with the message (stigmer/stigmer#372).
+ *
+ * Image attachments render as preview-only thumbnail tiles — the image IS the
+ * chip, no filename text (the name stays in the tooltip, the accessible
+ * label, and the lightbox header), click-to-open in the shared
+ * {@link AttachmentImageLightbox} — and documents as compact click-to-download
+ * filename chips. Both follow the composer chip grammar
+ * ({@link AttachmentChipList}) so a file looks the same before and after
+ * send, but this is deliberately a separate component: the composer chip is
+ * interactive and upload-phase-bound over a local `File`, while this row is
+ * read-only over the execution record, with bytes resolved on demand from
+ * the stable storage key via presigned URLs (the `OutputRefImage` pattern —
+ * the local `File` is gone after submit).
+ *
+ * Purely presentational plus on-demand URL minting — no required wiring.
+ * All visual properties flow through `--stgm-*` tokens.
+ */
+export function MessageAttachments({
+  attachments,
+  executionId,
+  className,
+}: MessageAttachmentsProps) {
+  // One lightbox instance serves the whole row, tracked by storage key
+  // (direct identity). It mounts OUTSIDE the role="list" container — a
+  // <dialog> is not valid inside the chips' <span> elements, and a
+  // non-listitem child inside the list would break its a11y ownership
+  // (same reasoning as the composer's chip list).
+  const [previewKey, setPreviewKey] = useState<string | null>(null);
+  const previewed =
+    previewKey !== null
+      ? (attachments.find((a) => a.storageKey === previewKey) ?? null)
+      : null;
+
+  if (attachments.length === 0) return null;
+
+  return (
+    <>
+      {/* items-center is load-bearing: image tiles (h-14) and document chips
+          (~h-6) share this row, and flexbox's default stretch alignment
+          would balloon the document chips to tile height. */}
+      <div
+        className={cn("stg:flex stg:flex-wrap stg:items-center stg:gap-1.5", className)}
+        role="list"
+        aria-label="Submitted attachments"
+      >
+        {attachments.map((attachment, i) => {
+          const isImage = attachment.contentType?.startsWith("image/") ?? false;
+          const key = attachment.storageKey ?? `${displayName(attachment)}-${i}`;
+          if (isImage && executionId && attachment.storageKey) {
+            return (
+              <ImagePreviewChip
+                key={key}
+                attachment={attachment}
+                executionId={executionId}
+                onPreview={() => setPreviewKey(attachment.storageKey!)}
+              />
+            );
+          }
+          if (isImage && !executionId) {
+            // No execution record — the optimistic pending bubble or a
+            // failed send. The tile keeps the image grammar but stays
+            // STATIC (a glyph, not a pulse): a failed send never gets an
+            // executionId, so a pulse here would be a permanent false
+            // "loading" signal. On the pending bubble the real turn lands
+            // under the same bridge key and brings the presign seam.
+            return <ImageGlyphTile key={key} name={displayName(attachment)} />;
+          }
+          return (
+            <DocumentChip
+              key={key}
+              attachment={attachment}
+              executionId={executionId}
+            />
+          );
+        })}
+      </div>
+      {previewed && executionId && previewed.storageKey && (
+        <AttachmentPreviewLightbox
+          attachment={previewed}
+          executionId={executionId}
+          onClose={() => setPreviewKey(null)}
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ * Display name for an attachment: the filename, falling back to the storage
+ * key's basename (`attachments/{ulid}/{filename}` always ends in it).
+ */
+function displayName(attachment: MessageAttachmentView): string {
+  if (attachment.filename) return attachment.filename;
+  const key = attachment.storageKey ?? "";
+  const base = key.slice(key.lastIndexOf("/") + 1);
+  return base || "attachment";
+}
+
+// ---------------------------------------------------------------------------
+// Image attachment — a preview-only tile mirroring the composer's grammar
+// ---------------------------------------------------------------------------
+
+/**
+ * The preview-only image tile: the thumbnail IS the chip, minted from the
+ * stable storage key at view time — no filename text (the name stays in the
+ * tooltip, the accessible label, and the lightbox header). If the URL can't
+ * be resolved (revoked storage, transient API failure), the chip degrades to
+ * the document treatment — a generic icon with the download affordance —
+ * never a broken-image glyph.
+ */
+function ImagePreviewChip({
+  attachment,
+  executionId,
+  onPreview,
+}: {
+  readonly attachment: MessageAttachmentView;
+  readonly executionId: string;
+  readonly onPreview: () => void;
+}) {
+  const { url, error } = useArtifactDownloadUrl(
+    executionId,
+    attachment.storageKey ?? null,
+  );
+  const name = displayName(attachment);
+
+  if (error) {
+    return <DocumentChip attachment={attachment} executionId={executionId} />;
+  }
+
+  return (
+    <span role="listitem" aria-label={name} title={name} className="stg:inline-flex">
+      {/* The whole tile is the preview target. UNSTYLED_BUTTON adds the
+          pointer cursor — the image tile carries no other clickability
+          cue. */}
+      <button
+        type="button"
+        onClick={onPreview}
+        aria-label={`Preview ${name}`}
+        className={cn(
+          UNSTYLED_BUTTON,
+          "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+        )}
+      >
+        {url ? (
+          <img
+            src={url}
+            alt=""
+            aria-hidden="true"
+            loading="lazy"
+            className="stg:h-full stg:w-full stg:object-cover"
+          />
+        ) : (
+          // Pulse placeholder while the presigned URL is minted — pulse
+          // means work is genuinely in flight (contrast ImageGlyphTile).
+          // Same footprint as the image, so no layout shift.
+          <span
+            className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
+            aria-hidden="true"
+          />
+        )}
+      </button>
+    </span>
+  );
+}
+
+/**
+ * The inert image tile for a turn with no execution record yet (optimistic
+ * pending bubble) or ever (failed send). Keeps the image grammar — same
+ * footprint as {@link ImagePreviewChip} — but shows a STATIC glyph, not a
+ * pulse: a pulse promises bytes that, on a failed send, will never arrive.
+ */
+function ImageGlyphTile({ name }: { readonly name: string }) {
+  return (
+    <span
+      role="listitem"
+      aria-label={name}
+      title={name}
+      className="stg:inline-flex stg:h-14 stg:w-14 stg:items-center stg:justify-center stg:rounded-md stg:bg-muted-subtle"
+    >
+      <ImageGlyph />
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Document attachment — compact chip, click-to-download
+// ---------------------------------------------------------------------------
+
+/**
+ * The compact treatment for documents (and for any attachment before its
+ * execution record exists). With an execution id, the chip is a download
+ * button — a fresh URL is minted at click time via {@link useArtifactDownload},
+ * saved under the original filename. Without one (pending bubble), it is an
+ * inert label: evidence the file was sent, affordances once the record lands.
+ */
+function DocumentChip({
+  attachment,
+  executionId,
+}: {
+  readonly attachment: MessageAttachmentView;
+  readonly executionId?: string;
+}) {
+  const { download, isDownloading } = useArtifactDownload(executionId ?? null);
+  const name = displayName(attachment);
+  const downloadable = executionId != null && !!attachment.storageKey;
+
+  const content = (
+    <>
+      <FileGlyph />
+      <span className="stg:min-w-0 stg:truncate">{name}</span>
+    </>
+  );
+
+  return (
+    <span
+      role="listitem"
+      aria-label={name}
+      title={name}
+      className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
+    >
+      {downloadable ? (
+        <button
+          type="button"
+          onClick={() => void download(attachment.storageKey!, name)}
+          disabled={isDownloading}
+          aria-label={`Download ${name}`}
+          className={cn(
+            UNSTYLED_BUTTON,
+            "stg:flex stg:min-w-0 stg:items-center stg:gap-1 stg:rounded-sm stg:hover:text-accent-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            isDownloading && "stg:opacity-70",
+          )}
+        >
+          {content}
+        </button>
+      ) : (
+        <span className="stg:flex stg:min-w-0 stg:items-center stg:gap-1">{content}</span>
+      )}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Lightbox bridge
+// ---------------------------------------------------------------------------
+
+/**
+ * Feeds the previewed attachment's presigned URL to the shared
+ * {@link AttachmentImageLightbox}. The URL hook is cross-mount cached by
+ * storage key (DD-014), so opening the lightbox reuses the thumbnail's minted
+ * URL instead of a second RPC; `src` is `null` for at most the first frame.
+ */
+function AttachmentPreviewLightbox({
+  attachment,
+  executionId,
+  onClose,
+}: {
+  readonly attachment: MessageAttachmentView;
+  readonly executionId: string;
+  readonly onClose: () => void;
+}) {
+  const { url } = useArtifactDownloadUrl(
+    executionId,
+    attachment.storageKey ?? null,
+  );
+
+  return (
+    <AttachmentImageLightbox
+      src={url}
+      filename={displayName(attachment)}
+      open
+      onClose={onClose}
+    />
+  );
+}
+
+/** Generic picture glyph for the inert {@link ImageGlyphTile}. */
+function ImageGlyph() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="stg:shrink-0 stg:text-muted-foreground"
+      aria-hidden="true"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <path d="M21 15l-5-5L5 21" />
+    </svg>
+  );
+}
+
+/**
+ * Generic document glyph — the same geometry as the composer chip's icon so
+ * the two surfaces read as one family.
+ */
+function FileGlyph() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="stg:shrink-0 stg:text-muted-foreground"
+      aria-hidden="true"
+    >
+      <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />
+      <path d="M8 1V4H11" />
+    </svg>
+  );
+}

package/src/execution/MessageEntry.tsx

@@ -13,6 +13,10 @@ import {
   unwrapEnclosingMarkdownFence,
 } from "../internal/markdown-components.js";
 import { InteractionModeBadge } from "./InteractionModeBadge.js";
+import {
+  MessageAttachments,
+  type MessageAttachmentView,
+} from "./MessageAttachments.js";
 import { PlanDocumentMessage } from "./PlanDocumentMessage.js";
 import { useRenderTracer } from "../internal/dev/index.js";
 
@@ -48,6 +52,23 @@ export interface MessageEntryProps {
    * non-human messages.
    */
   readonly interactionMode?: InteractionMode;
+  /**
+   * The turn's submitted attachments, stamped by the thread builder on
+   * `MESSAGE_HUMAN` bubbles from the execution's `spec.attachments` (or the
+   * pending submit context). Renders as a {@link MessageAttachments} row
+   * above the prose. Ignored for non-human messages.
+   *
+   * A `MessageEntry` slot override that delegates to the built-in inherits
+   * attachment rendering; one that ignores this prop renders text only.
+   */
+  readonly attachments?: readonly MessageAttachmentView[];
+  /**
+   * The execution the attachments belong to — enables their byte-backed
+   * affordances (image previews, document downloads) via presigned URLs.
+   * Absent on the optimistic pending bubble, where attachments render as
+   * inert chips until the real execution record replaces it.
+   */
+  readonly executionId?: string;
 }
 
 /**
@@ -80,6 +101,8 @@ export const MessageEntry = memo(function MessageEntry({
   onEdit,
   isPlanDocument,
   interactionMode,
+  attachments,
+  executionId,
 }: MessageEntryProps) {
   useRenderTracer("MessageEntry", {
     messageType: message.type,
@@ -95,6 +118,8 @@ export const MessageEntry = memo(function MessageEntry({
           className={className}
           onEdit={onEdit}
           interactionMode={interactionMode}
+          attachments={attachments}
+          executionId={executionId}
         />
       );
     case MessageType.MESSAGE_AI:
@@ -132,27 +157,40 @@ function HumanMessage({
   className,
   onEdit,
   interactionMode,
+  attachments,
+  executionId,
 }: {
   content: string;
   className?: string;
   onEdit?: () => void;
   interactionMode?: InteractionMode;
+  attachments?: readonly MessageAttachmentView[];
+  executionId?: string;
 }) {
   return (
     <div
       role="article"
       aria-label="User message"
       className={cn(
-        "group relative ms-[20%] rounded-lg bg-muted-subtle px-4 py-3",
+        "stg:group stg:relative stg:ms-[20%] stg:rounded-lg stg:bg-muted-subtle stg:px-4 stg:py-3",
         className,
       )}
     >
       {/* The badge renders only for non-default modes (a "Plan" pill), so
           ordinary Agent turns carry no extra chrome. */}
       {interactionMode !== undefined && (
-        <InteractionModeBadge mode={interactionMode} className="mb-1.5" />
+        <InteractionModeBadge mode={interactionMode} className="stg:mb-1.5" />
+      )}
+      {/* The evidence a file rode with this turn (#372) — above the prose,
+          mirroring the composer's chips-above-input layout. */}
+      {attachments && attachments.length > 0 && (
+        <MessageAttachments
+          attachments={attachments}
+          executionId={executionId}
+          className="stg:mb-2"
+        />
       )}
-      <p className="text-sm text-foreground whitespace-pre-wrap">{content}</p>
+      <p className="stg:text-sm stg:text-foreground stg:whitespace-pre-wrap">{content}</p>
       {onEdit && (
         <button
           type="button"
@@ -160,11 +198,11 @@ function HumanMessage({
           aria-label="Edit message"
           title="Edit"
           className={cn(
-            "absolute -top-2.5 -right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full",
-            "border border-border bg-card text-muted-foreground shadow-sm transition",
-            "hover:text-foreground hover:bg-accent-hover",
-            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:absolute stg:-top-2.5 stg:-right-2.5 stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
+            "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
+            "stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           <EditIcon />
@@ -224,7 +262,7 @@ function AiMessage({
       role="article"
       aria-label="AI response"
       aria-busy={isStreaming}
-      className={cn("px-4 py-3", className)}
+      className={cn("stg:px-4 stg:py-3", className)}
     >
       <div className="stgm-prose">
         <Streamdown
@@ -263,19 +301,19 @@ function ThinkingMessage({
     <div
       role="article"
       aria-label="Model thinking"
-      className={cn("px-4 py-1.5", className)}
+      className={cn("stg:px-4 stg:py-1.5", className)}
     >
       <button
         type="button"
         aria-expanded={expanded}
         onClick={() => setExpanded((v) => !v)}
         className={cn(
-          "flex items-center gap-1.5 text-xs text-muted-foreground transition-colors",
-          "hover:text-foreground cursor-pointer",
+          "stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:text-foreground stg:cursor-pointer",
         )}
       >
         <ThinkingIcon isStreaming={isStreaming} />
-        <span className="min-w-0 truncate">
+        <span className="stg:min-w-0 stg:truncate">
           {isStreaming && !hasContent
             ? "Thinking..."
             : expanded
@@ -286,12 +324,12 @@ function ThinkingMessage({
       </button>
 
       {expanded && hasContent && (
-        <div className="mt-1.5 border-l-2 border-muted-foreground/20 pl-3">
-          <p className="text-xs text-muted-foreground whitespace-pre-wrap leading-relaxed">
+        <div className="stg:mt-1.5 stg:border-l-2 stg:border-muted-foreground/20 stg:pl-3">
+          <p className="stg:text-xs stg:text-muted-foreground stg:whitespace-pre-wrap stg:leading-relaxed">
             {content}
             {isStreaming && (
               <span
-                className="inline-block w-[2px] h-[0.8em] bg-muted-foreground align-text-bottom animate-pulse ml-0.5"
+                className="stg:inline-block stg:w-[2px] stg:h-[0.8em] stg:bg-muted-foreground stg:align-text-bottom stg:animate-pulse stg:ml-0.5"
                 aria-hidden="true"
               />
             )}
@@ -313,9 +351,9 @@ function SystemMessage({
     <div
       role="article"
       aria-label="System message"
-      className={cn("px-4 py-2", className)}
+      className={cn("stg:px-4 stg:py-2", className)}
     >
-      <p className="text-xs text-muted-foreground italic">{content}</p>
+      <p className="stg:text-xs stg:text-muted-foreground stg:italic">{content}</p>
     </div>
   );
 }
@@ -330,7 +368,7 @@ function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
         fill="none"
         stroke="currentColor"
         strokeWidth="1.5"
-        className="shrink-0 animate-spin"
+        className="stg:shrink-0 stg:animate-spin"
         aria-hidden="true"
       >
         <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
@@ -347,7 +385,7 @@ function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <circle cx="6" cy="5" r="3.5" />
@@ -370,8 +408,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >