fix(chat): make attachment tiles read on every surface they render on

The sent-message tile went icon-only, which made its fill the whole
affordance — and against the workflow chat panel's --surface-1 that fill is
~8/255 away in light mode. Adds the border the user message bubble already
pairs with --surface-5 for the same reason.

- Restore an accessible name to the sent tiles: an icon-only div with a title
  attribute announces as nothing.
- Step the composer icon badge on hover; the chip's hover fill closed to
  within 7/255 of it in light mode.
- Extension label moves to --text-icon/text-caption; --text-muted was 2.4:1
  on this fill in dark mode, well under AA.
- Tooltip.Content no longer re-declares the width and truncation it owns —
  it was truncating the very name it exists to reveal.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments/chat-message-attachments.tsx

@@ -2,12 +2,35 @@ import { cn } from '@sim/emcn'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { ChatMessageAttachment } from '@/app/workspace/[workspaceId]/home/types'
 
-function FileAttachmentPill(props: { mediaType: string; filename: string }) {
+/**
+ * Tile geometry shared with the thumbnail branches so a mixed row stays uniform.
+ *
+ * The border is load-bearing, not decoration: this renders on both the home transcript
+ * (`--bg`) and the workflow chat panel (`--surface-1`), and against the latter the fill
+ * is only ~8/255 away in light mode. With an icon-only tile the surface *is* the
+ * affordance, so it needs an edge — the same reason the user message bubble pairs
+ * `--surface-5` with a border.
+ */
+const ATTACHMENT_TILE =
+  'size-[56px] overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-5)]'
+
+/**
+ * A sent document shows only its type icon. The filename was already read in the
+ * composer before sending, so repeating it here costs a wide pill in the transcript
+ * for information the hover title still carries.
+ */
+function FileAttachmentTile(props: { mediaType: string; filename: string }) {
   const Icon = getDocumentIcon(props.mediaType, props.filename)
   return (
-    <div className='flex max-w-[140px] items-center gap-[5px] rounded-[10px] bg-[var(--surface-5)] px-[6px] py-[3px]'>
-      <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
-      <span className='truncate text-[11px] text-[var(--text-body)]'>{props.filename}</span>
+    <div
+      title={props.filename}
+      // The icon carries no accessible name on its own, so without these the tile is
+      // announced as nothing at all — the filename used to be real text.
+      role='img'
+      aria-label={props.filename}
+      className={cn(ATTACHMENT_TILE, 'flex items-center justify-center text-[var(--text-icon)]')}
+    >
+      <Icon className='size-[18px]' />
     </div>
   )
 }
@@ -32,7 +55,7 @@ export function ChatMessageAttachments(props: {
       {attachments.map((att) => {
         if (!att.previewUrl) {
           return (
-            <FileAttachmentPill key={att.id} mediaType={att.media_type} filename={att.filename} />
+            <FileAttachmentTile key={att.id} mediaType={att.media_type} filename={att.filename} />
           )
         }
         const isVideo = att.media_type.startsWith('video/')
@@ -41,7 +64,10 @@ export function ChatMessageAttachments(props: {
           return (
             <div
               key={att.id}
-              className='relative size-[56px] overflow-hidden rounded-[8px] bg-[var(--surface-5)]'
+              title={att.filename}
+              role='img'
+              aria-label={att.filename}
+              className={cn(ATTACHMENT_TILE, 'relative')}
             >
               <div className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
                 <Icon className='size-[18px]' />
@@ -51,14 +77,14 @@ export function ChatMessageAttachments(props: {
                 muted
                 playsInline
                 preload='metadata'
-                className='relative h-full w-full object-cover'
+                className='relative size-full object-cover'
               />
             </div>
           )
         }
         return (
-          <div key={att.id} className='size-[56px] overflow-hidden rounded-[8px]'>
-            <img src={att.previewUrl} alt={att.filename} className='h-full w-full object-cover' />
+          <div key={att.id} className={ATTACHMENT_TILE} title={att.filename}>
+            <img src={att.previewUrl} alt={att.filename} className='size-full object-cover' />
           </div>
         )
       })}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx

@@ -18,7 +18,10 @@ import type { AttachedFile } from '@/app/workspace/[workspaceId]/w/[workflowId]/
  * hover steps further away in the direction each theme reads as "raised".
  */
 const CHIP_SURFACE =
-  'relative h-[48px] cursor-pointer rounded-[10px] border border-[var(--border)] bg-[var(--surface-5)] transition-colors hover-hover:bg-[var(--surface-active)] dark:hover-hover:bg-[var(--surface-6)]'
+  'relative cursor-pointer rounded-[10px] border border-[var(--border)] bg-[var(--surface-5)] transition-colors hover-hover:bg-[var(--surface-active)] dark:hover-hover:bg-[var(--surface-6)]'
+
+/** Height lives on the wrapper so both shapes are the same size by construction. */
+const CHIP_HEIGHT = 'h-[48px]'
 
 interface AttachedFilesListProps {
   attachedFiles: AttachedFile[]
@@ -54,25 +57,27 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
 
   return (
     <Tooltip.Root>
-      {/* The width cap lives here, not on the button: this wrapper anchors the remove
-          badge, and sizing it to the button's uncapped max-content width would strand
-          the badge far to the right of a long filename. */}
+      {/* Both the size and the width cap live here, not on the button: this wrapper
+          anchors the remove badge, so sizing it to the button's uncapped max-content
+          width would strand the badge far to the right of a long filename. */}
       <div
         className={cn(
           'group relative',
-          isMedia ? 'flex-shrink-0' : 'min-w-0 max-w-[min(220px,100%)]'
+          CHIP_HEIGHT,
+          isMedia ? 'w-[48px] shrink-0' : 'min-w-0 max-w-[min(220px,100%)]'
         )}
       >
         <Tooltip.Trigger asChild>
           <button
             type='button'
             className={cn(
               CHIP_SURFACE,
+              'size-full',
               isMedia
-                ? 'w-[48px] overflow-hidden'
-                : // Fills the capped wrapper, so the filename truncates rather than
-                  // widening the card past the badge it is anchored to.
-                  'flex w-full items-center gap-2 py-2 pr-3 pl-2'
+                ? 'overflow-hidden'
+                : // `pr-5` reserves room for the remove badge so it never sits over the
+                  // filename.
+                  'flex items-center gap-2 py-2 pr-5 pl-2'
             )}
             onClick={() => onFileClick(file)}
           >
@@ -105,17 +110,24 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
               </>
             ) : (
               <>
-                <span className='flex size-[32px] shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-6)] text-[var(--text-icon)] dark:bg-[var(--surface-3)]'>
+                {/* Steps again on hover: the chip's own hover fill closes to within
+                    7/255 of this badge in light mode, which would erase it during the
+                    one interaction where it is being looked at. */}
+                <span className='flex size-[32px] shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-6)] text-[var(--text-icon)] transition-colors group-hover:bg-[var(--surface-7)] dark:bg-[var(--surface-3)] dark:group-hover:bg-[var(--surface-3)]'>
                   <Icon className='size-[16px]' />
                 </span>
                 <span className='flex min-w-0 flex-col items-start'>
-                  <span className='w-full truncate text-[var(--text-body)] text-small'>
+                  <span className='w-full truncate text-[var(--text-body)] text-small leading-tight'>
                     {file.name}
                   </span>
-                  {/* The name truncates, so the extension is genuinely not readable from
-                      it — this is the format, not a restatement of the label. */}
+                  {/* The name truncates from the tail, so the extension is often not
+                      readable from it — this is the format, not a restatement.
+                      `--text-icon`, not `--text-muted`: muted lands at 2.4:1 on this
+                      fill in dark mode, well under AA. */}
                   {extension && (
-                    <span className='text-[var(--text-muted)] text-xs uppercase'>{extension}</span>
+                    <span className='text-[var(--text-icon)] text-caption uppercase leading-tight'>
+                      {extension}
+                    </span>
                   )}
                 </span>
               </>
@@ -135,18 +147,18 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
               onRemoveFile(file.id)
             }}
             aria-label={`Remove ${file.name}`}
-            // Overhangs the chip by 5px, which the composer's `py-2` absorbs. `--surface-6`
-            // (not the chip's own fill) because this badge sits on the composer shell —
-            // white in light mode, `--surface-4` in dark — and must read against both.
-            className='-top-[5px] -right-[5px] absolute flex size-[16px] items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-6)] text-[var(--text-icon)] opacity-0 transition-opacity group-hover:opacity-100'
+            // Sits inside the chip's top-right corner. A fixed dark scrim rather than a
+            // surface token: it overlays arbitrary photo content on the thumbnail shape,
+            // where no theme token can guarantee contrast.
+            className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100'
           >
             <X className='size-[9px]' />
           </button>
         )}
       </div>
-      <Tooltip.Content side='top'>
-        <p className='max-w-[200px] truncate'>{file.name}</p>
-      </Tooltip.Content>
+      {/* No width or truncation here — Tooltip.Content already caps and wraps, and this
+          exists precisely to reveal the name the card truncated. */}
+      <Tooltip.Content>{file.name}</Tooltip.Content>
     </Tooltip.Root>
   )
 })