From 3a1ec27feba5129623f2c916f6de31ddb43e535e Mon Sep 17 00:00:00 2001
From: Shoubhit Dash <shoubhit2005@gmail.com>
Date: Tue, 7 Apr 2026 15:45:22 +0530
Subject: [PATCH] feat(app): show full names on composer attachment chips
 (#21306)

---
 .../prompt-input/image-attachments.tsx        | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/packages/app/src/components/prompt-input/image-attachments.tsx b/packages/app/src/components/prompt-input/image-attachments.tsx
index 835fddc307..dd8138e5a4 100644
--- a/packages/app/src/components/prompt-input/image-attachments.tsx
+++ b/packages/app/src/components/prompt-input/image-attachments.tsx
@@ -1,5 +1,6 @@
 import { Component, For, Show } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { ImageAttachmentPart } from "@/context/prompt"
 
 type PromptImageAttachmentsProps = {
@@ -22,34 +23,36 @@ export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (p
       <div class="flex flex-wrap gap-2 px-3 pt-3">
         <For each={props.attachments}>
           {(attachment) => (
-            <div class="relative group">
-              <Show
-                when={attachment.mime.startsWith("image/")}
-                fallback={
-                  <div class={fallbackClass}>
-                    <Icon name="folder" class="size-6 text-text-weak" />
-                  </div>
-                }
-              >
-                <img
-                  src={attachment.dataUrl}
-                  alt={attachment.filename}
-                  class={imageClass}
-                  onClick={() => props.onOpen(attachment)}
-                />
-              </Show>
-              <button
-                type="button"
-                onClick={() => props.onRemove(attachment.id)}
-                class={removeClass}
-                aria-label={props.removeLabel}
-              >
-                <Icon name="close" class="size-3 text-text-weak" />
-              </button>
-              <div class={nameClass}>
-                <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
+            <Tooltip value={attachment.filename} placement="top" contentClass="break-all">
+              <div class="relative group">
+                <Show
+                  when={attachment.mime.startsWith("image/")}
+                  fallback={
+                    <div class={fallbackClass}>
+                      <Icon name="folder" class="size-6 text-text-weak" />
+                    </div>
+                  }
+                >
+                  <img
+                    src={attachment.dataUrl}
+                    alt={attachment.filename}
+                    class={imageClass}
+                    onClick={() => props.onOpen(attachment)}
+                  />
+                </Show>
+                <button
+                  type="button"
+                  onClick={() => props.onRemove(attachment.id)}
+                  class={removeClass}
+                  aria-label={props.removeLabel}
+                >
+                  <Icon name="close" class="size-3 text-text-weak" />
+                </button>
+                <div class={nameClass}>
+                  <span class="text-10-regular text-white truncate block">{attachment.filename}</span>
+                </div>
               </div>
-            </div>
+            </Tooltip>
           )}
         </For>
       </div>