feat(web,mobile): image-only messages show a quiet caption instead of the agent prompt

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -50,6 +50,7 @@ import {
   parseComposerContextHref,
   collectComposerContextReferences,
   replaceComposerContextReferences,
+  isAttachmentOnlyBootstrapText,
   formatComposerContextReference,
 } from "@t3tools/shared/composerContextReferences";
 import { ComposerContextSheet } from "../../components/ComposerContextSheet";
@@ -1407,6 +1408,10 @@ function renderFeedEntry(
       const foldExpanded = foldRowId !== null && (props.expandedWorkRows[foldRowId] ?? false);
       const bubbleBodyVisible = foldRowId === null || foldExpanded;
       const intentBadge = resolveUserMessageIntentBadge(message.inputIntent);
+      // The bootstrap prompt is for the agent, not the reader: a person's photo-only message shows a
+      // caption instead. Messages from other agents keep their folded rendering.
+      const attachmentOnly =
+        presentation.attribution !== "agent" && isAttachmentOnlyBootstrapText(message.text);
       const referenceIds = new Set(
         collectComposerContextReferences(message.text).map((reference) => reference.contextId),
       );
@@ -1527,7 +1532,13 @@ function renderFeedEntry(
                     })}
                   </View>
                 ) : null}
-                {message.text.trim().length > 0 ? (
+                {attachmentOnly ? (
+                  <AttachmentOnlyCaption
+                    label={attachments.every(isImageAttachment) ? "Image only" : "Attachment only"}
+                    instruction={message.text.trim()}
+                  />
+                ) : null}
+                {message.text.trim().length > 0 && !attachmentOnly ? (
                   <MarkdownImageAvailableWidthContext
                     value={props.userBubbleMaxWidth - USER_BUBBLE_HORIZONTAL_PADDING * 2}
                   >
@@ -1598,7 +1609,7 @@ function renderFeedEntry(
                   <SymbolView name="pencil" size={14} tintColor={iconSubtleColor} />
                 </Pressable>
               ) : null}
-              {presentation.text.trim().length > 0 ? (
+              {presentation.text.trim().length > 0 && !attachmentOnly ? (
                 <UserMessageCopyButton
                   text={presentation.text}
                   onCopy={
@@ -1764,6 +1775,31 @@ type UserMessageContentProps = {
   readonly renderImage: MarkdownImageRenderer;
 };
 
+/** Sent with no text: a quiet caption stands in for the agent's bootstrap prompt, and a tap reveals it. */
+function AttachmentOnlyCaption(props: { readonly label: string; readonly instruction: string }) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <View className="gap-1">
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={expanded ? "Hide agent instruction" : props.label}
+        accessibilityState={{ expanded }}
+        hitSlop={8}
+        onPress={() => setExpanded((value) => !value)}
+      >
+        <Text className="text-xs italic text-user-bubble-foreground-muted">
+          {expanded ? "Hide" : props.label}
+        </Text>
+      </Pressable>
+      {expanded ? (
+        <Text className="text-xs leading-relaxed text-user-bubble-foreground-muted">
+          {props.instruction}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
 function UserMessageContent(props: UserMessageContentProps) {
   const [selected, setSelected] = useState<{ contextId: string; label: string } | null>(null);
   const navigation = useNavigation();

apps/web/src/components/chat/MessagesTimeline.browser.test.tsx

@@ -1,4 +1,11 @@
-import { EnvironmentId, MessageId, RunId, ScheduledTaskId, ThreadId } from "@t3tools/contracts";
+import {
+  ChatAttachmentId,
+  EnvironmentId,
+  MessageId,
+  RunId,
+  ScheduledTaskId,
+  ThreadId,
+} from "@t3tools/contracts";
 import type { LegendListRef } from "@legendapp/list/react";
 import { createRef, Profiler, type ComponentProps, type ReactElement } from "react";
 import { describe, expect, it, vi } from "vite-plus/test";
@@ -9,6 +16,7 @@ import { act, render } from "../../../test/render";
 import { MessagesTimeline } from "./MessagesTimeline";
 import { remarkThoughtPreview } from "./TimelineWorkEntryRow.logic";
 import { parseMarkdownWithMath } from "@t3tools/shared/markdownMath";
+import { ATTACHMENT_ONLY_BOOTSTRAP_PROMPT } from "@t3tools/shared/composerContextReferences";
 import { collectThreadFindRanges } from "./threadFindHighlights";
 
 const environmentQuery = vi.hoisted(() => ({
@@ -310,6 +318,87 @@ describe("MessagesTimeline automation prompts", () => {
   });
 });
 
+describe("MessagesTimeline attachment-only messages", () => {
+  const photo = {
+    type: "image" as const,
+    id: ChatAttachmentId.make("attachment-1"),
+    name: "photo.png",
+    mimeType: "image/png",
+    sizeBytes: 1024,
+    previewUrl:
+      "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='180'><rect width='240' height='180' fill='%23888'/></svg>",
+  };
+
+  it("stands in for the bootstrap prompt with a caption that reveals it on click", async () => {
+    setup();
+    await using screen = await renderTimeline([
+      message(ATTACHMENT_ONLY_BOOTSTRAP_PROMPT, { attachments: [photo] }),
+    ]);
+    expect(screen.text()).not.toContain("without additional text");
+    expect(screen.container.querySelector("[data-user-message-body]")).toBeNull();
+    expect(screen.buttons(/^Copy message$/i)).toHaveLength(0);
+    expect(screen.buttons(/^Copy prompt link$/)).toHaveLength(0);
+
+    const caption = screen.button("Image only");
+    expect(caption.getAttribute("aria-expanded")).toBe("false");
+    const photoRight = () => screen.container.querySelector("img")?.getBoundingClientRect().right;
+    const rightBefore = photoRight();
+    expect(rightBefore).toBeDefined();
+    await click(caption);
+    // The bubble grows with the text, but the photo stays where it was.
+    expect(photoRight()).toBe(rightBefore);
+    expect(screen.text()).toContain(ATTACHMENT_ONLY_BOOTSTRAP_PROMPT);
+    await click(screen.button("Hide"));
+    expect(screen.text()).not.toContain("without additional text");
+    expect(screen.buttons("Image only")).toHaveLength(1);
+  });
+
+  it("labels a message without any image as attachment only", async () => {
+    setup();
+    await using screen = await renderTimeline([
+      message(ATTACHMENT_ONLY_BOOTSTRAP_PROMPT, {
+        attachments: [
+          {
+            type: "file" as const,
+            id: ChatAttachmentId.make("attachment-video"),
+            name: "clip.mp4",
+            mimeType: "video/mp4",
+            sizeBytes: 1024,
+          },
+        ],
+      }),
+    ]);
+    expect(screen.buttons("Attachment only")).toHaveLength(1);
+    expect(screen.buttons("Image only")).toHaveLength(0);
+  });
+
+  it("leaves a photo-only message from another agent as a folded message", async () => {
+    setup();
+    await using screen = await renderTimeline([
+      message(ATTACHMENT_ONLY_BOOTSTRAP_PROMPT, {
+        attachments: [photo],
+        createdBy: "agent",
+        senderThreadId: ThreadId.make("thread-sender"),
+      }),
+    ]);
+    expect(screen.button(/^Agent/).textContent).toContain("without additional text");
+    await click(screen.button(/^Agent/));
+    expect(screen.buttons("Image only")).toHaveLength(0);
+    expect(screen.text()).toContain(ATTACHMENT_ONLY_BOOTSTRAP_PROMPT);
+  });
+
+  it("keeps a message that adds text to the bootstrap prompt as a full bubble", async () => {
+    setup();
+    await using screen = await renderTimeline([
+      message(`${ATTACHMENT_ONLY_BOOTSTRAP_PROMPT} Also check the colors.`, {
+        attachments: [photo],
+      }),
+    ]);
+    expect(screen.text()).not.toContain("Sent without text");
+    expect(screen.text()).toContain("Also check the colors.");
+  });
+});
+
 const SENDER_THREAD_ID = ThreadId.make("thread-sender");
 const AGENT_MESSAGE = "Review finished\n\nThe migration drops the index before backfilling it.";
 

apps/web/src/components/chat/TimelineUserMessageRow.tsx

@@ -52,7 +52,10 @@ import {
   resolveUserMessageContext,
   selectedMessageContextFragment,
 } from "~/lib/composerContextRecords";
-import { collectComposerContextReferences } from "@t3tools/shared/composerContextReferences";
+import {
+  collectComposerContextReferences,
+  isAttachmentOnlyBootstrapText,
+} from "@t3tools/shared/composerContextReferences";
 import {
   COMPOSER_CONTEXT_CLIPBOARD_MIME,
   encodeComposerContextClipboardHtml,
@@ -304,6 +307,10 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
       : null,
   );
   const resolvedContext = resolveUserMessageContext(row.message);
+  // The bootstrap prompt is for the agent, not the reader: a person's photo-only message shows a
+  // caption instead. Messages from other agents keep their folded rendering.
+  const attachmentOnly = !folded && isAttachmentOnlyBootstrapText(resolvedContext.text);
+  const bodyText = attachmentOnly ? "" : resolvedContext.text;
   const previewImages = userImages.filter((image) => image.name.startsWith("preview-annotation-"));
   const revertTurnCount = row.revertTurnCount;
   const chippedAttachmentIds = new Set(
@@ -321,7 +328,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
     resolvedContext.text,
     (reference) => reference.label,
   );
-  const promptLink = promptLinkFor(plainText);
+  const promptLink = attachmentOnly ? null : promptLinkFor(plainText);
   const foldSummary =
     plainText
       .split(/\r?\n/)
@@ -459,7 +466,17 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
           >
             <MessageAuthorHeading>You</MessageAuthorHeading>
             {(regularImages.length > 0 || userVideos.length > 0) && (
-              <div className="mb-2 grid max-w-[210px] grid-cols-2 gap-2">
+              <div
+                className={cn(
+                  "mb-2 grid gap-2",
+                  // A lone photo sent without text fills its bubble instead of leaving half of it empty.
+                  // It sits at the bubble's right edge so opening the caption grows the bubble leftward
+                  // without moving the photo.
+                  attachmentOnly && regularImages.length + userVideos.length === 1
+                    ? "ms-auto max-w-[240px] grid-cols-1"
+                    : "max-w-[210px] grid-cols-2",
+                )}
+              >
                 {regularImages.map((image) => (
                   <div
                     key={image.id}
@@ -567,9 +584,19 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
                 ))}
               </div>
             ) : null}
+            {attachmentOnly ? (
+              <AttachmentOnlyCaption
+                label={
+                  userVideos.length + unchippedFiles.length + unknownAttachments.length > 0
+                    ? "Attachment only"
+                    : "Image only"
+                }
+                instruction={resolvedContext.text}
+              />
+            ) : null}
             <div onCopyCapture={onBodyCopyCapture}>
               <CollapsibleUserMessageBody
-                text={resolvedContext.text}
+                text={bodyText}
                 renderContextReference={renderContextReference}
                 skills={ctx.skills}
                 markdownCwd={ctx.markdownCwd}
@@ -600,7 +627,7 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
               {typeof revertTurnCount === "number" && (
                 <RevertUserMessageButton turnCount={revertTurnCount} messageId={row.message.id} />
               )}
-              {resolvedContext.text && (
+              {bodyText && (
                 <MessageCopyButton
                   text={contextClipboardFragment ? resolvedContext.text : plainText}
                   {...(contextClipboardFragment
@@ -629,6 +656,31 @@ function UserTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message"
   );
 }
 
+/** Sent with no text: a quiet caption stands in for the agent's bootstrap prompt, and a click reveals it. */
+function AttachmentOnlyCaption({
+  label,
+  instruction,
+}: {
+  readonly label: string;
+  readonly instruction: string;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div className="text-xs text-muted-foreground" data-user-message-attachment-only="true">
+      <button
+        type="button"
+        aria-expanded={expanded}
+        data-scroll-anchor-ignore
+        onClick={() => setExpanded((value) => !value)}
+        className="cursor-pointer rounded-sm italic hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+      >
+        {expanded ? "Hide" : label}
+      </button>
+      {expanded ? <p className="mt-1 leading-relaxed">{instruction}</p> : null}
+    </div>
+  );
+}
+
 function UserMessageIntentMarker({
   intent,
 }: {

packages/shared/src/composerContextReferences.test.ts

@@ -9,6 +9,8 @@ import { describe, expect, it } from "vite-plus/test";
 import {
   collectComposerContextReferences,
   formatComposerContextHref,
+  ATTACHMENT_ONLY_BOOTSTRAP_PROMPT,
+  isAttachmentOnlyBootstrapText,
   isImageReferencesOnly,
   parseComposerContextHref,
   projectComposerContextForProvider,
@@ -81,6 +83,15 @@ describe("labels and reference links", () => {
     expect(isImageReferencesOnly(`${image} ${file}`)).toBe(false);
     expect(isImageReferencesOnly("  ")).toBe(false);
   });
+
+  it("recognizes the stored bootstrap prompt for an attachment-only message", () => {
+    expect(isAttachmentOnlyBootstrapText(ATTACHMENT_ONLY_BOOTSTRAP_PROMPT)).toBe(true);
+    expect(isAttachmentOnlyBootstrapText(`  ${ATTACHMENT_ONLY_BOOTSTRAP_PROMPT}\n`)).toBe(true);
+    expect(isAttachmentOnlyBootstrapText(`${ATTACHMENT_ONLY_BOOTSTRAP_PROMPT} look at this`)).toBe(
+      false,
+    );
+    expect(isAttachmentOnlyBootstrapText("")).toBe(false);
+  });
 });
 
 describe("provider projection", () => {

packages/shared/src/composerContextReferences.ts

@@ -120,6 +120,15 @@ export function collectComposerContextReferences(
 export const ATTACHMENT_ONLY_BOOTSTRAP_PROMPT =
   "[User attached one or more files without additional text. Respond using the conversation context and the attached files.]";
 
+/**
+ * True when a stored user message is only the bootstrap prompt T3 Code sends in place of
+ * empty text. Clients hide that prompt in the chat and show a status line instead; the
+ * message itself, and what the agent received, stay untouched.
+ */
+export function isAttachmentOnlyBootstrapText(text: string): boolean {
+  return text.trim() === ATTACHMENT_ONLY_BOOTSTRAP_PROMPT;
+}
+
 export function isImageReferencesOnly(text: string): boolean {
   const references = collectComposerContextReferences(text);
   return (