improvement(chat): tighten composer chip markup and tokens

- Remove the chip tooltips: the document card already shows its filename, so
  the tooltip mostly restated it.
- Collapse the single-use height constant and use size-[48px] on the media
  branch, which was h-[48px] + w-[48px] split across two class strings.
- Remove badge moves to --surface-2; --surface-1 sat 8/255 from the chip fill
  in light mode, reachable on a coarse pointer where the chip's hover-hover
  fill never applies. Its hover gating now matches the chip's.
- py-[7px] so the 32px icon badge fits the 48px box instead of overflowing it.
- Trim comments to TSDoc or one-line rationale per the repo rule.

Author: waleedlatif1

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

@@ -6,7 +6,7 @@ function FileAttachmentPill(props: { mediaType: string; filename: string }) {
   const Icon = getDocumentIcon(props.mediaType, props.filename)
   return (
     <div className='flex max-w-[140px] items-center gap-[5px] rounded-lg bg-[var(--surface-5)] px-[6px] py-[3px]'>
-      <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+      <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />
       <span className='truncate text-[var(--text-body)] text-xs'>{props.filename}</span>
     </div>
   )

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

@@ -58,23 +58,19 @@ describe('AttachedFilesList', () => {
   })
 
   it('keeps a HEIC on the thumbnail shape while it has no preview yet', () => {
-    // The shape is keyed off the type, not the preview: a HEIC gets its preview only
-    // once the server derivative exists, and switching shape mid-upload would jump the
-    // layout. It must not fall back to the document card.
     render([file({ name: 'photo.heic', type: 'image/heic' })])
 
     expect(container.textContent).not.toContain('photo.heic')
     expect(container.querySelector('img')).toBeNull()
   })
 
   it('caps the card wrapper so a long filename cannot strand the remove badge', () => {
-    // The badge is positioned against this wrapper. Without a cap here the wrapper
-    // stretches to the filename's max-content width while the card stays 220px, and
-    // the badge drifts off to the right of the card.
     render([file({ name: '9bacf973-cd64-437b-be12-58be9f2c1a4d-very-long-name.pdf' })])
 
+    // jsdom does no layout, so the cap can only be asserted structurally: it has to sit
+    // on the wrapper the badge is positioned against, not on the button.
     const wrapper = container.querySelector('button')?.parentElement
-    expect(wrapper?.className).toContain('max-w-[min(220px,100%)]')
+    expect(wrapper?.className).toMatch(/max-w-/)
   })
 
   it('drops the image and reveals the type icon when the preview fails to decode', () => {

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

@@ -1,28 +1,19 @@
 'use client'
 
 import React, { useState } from 'react'
-import { cn, Loader, Tooltip } from '@sim/emcn'
+import { cn, Loader } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
 import type { AttachedFile } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments'
 
 /**
- * Chrome shared by both chip shapes. Both stand 48px tall so a row mixing thumbnails
- * and documents sits on one baseline.
- *
- * Deliberately NOT `chipFilledFillTokens` (`--surface-5` / `dark:--surface-4`): that
- * pair assumes a page background, but this chip sits inside the composer, which is
- * already `--surface-4` in dark mode — reusing it would make the chip invisible against
- * its own container. `--surface-5` steps away from the composer in both themes, and
- * hover steps further away in the direction each theme reads as "raised".
+ * Chrome shared by both chip shapes. Not `chipFilledFillTokens` — its dark fill is
+ * `--surface-4`, which is the composer's own background.
  */
 const CHIP_SURFACE =
   'relative cursor-pointer rounded-lg 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[]
   onFileClick: (file: AttachedFile) => void
@@ -36,11 +27,9 @@ interface AttachedFileChipProps {
 }
 
 /**
- * One attachment.
- *
- * Media renders as a thumbnail; everything else renders as a labelled card — icon
- * badge, filename, file type. A document has no thumbnail worth showing, and the
- * filename is the thing worth reading.
+ * One attachment: media renders as a thumbnail, anything else as a labelled card.
+ * Shape keys off the media type, not preview presence — a HEIC has no preview until its
+ * server derivative lands, and flipping shape mid-upload would jump the layout.
  */
 const AttachedFileChip = React.memo(function AttachedFileChip({
   file,
@@ -49,118 +38,89 @@ const AttachedFileChip = React.memo(function AttachedFileChip({
 }: AttachedFileChipProps) {
   const Icon = getDocumentIcon(file.type, file.name)
   const isVideo = file.type.startsWith('video/')
-  // Keyed off the type, not the presence of a preview: a HEIC has no preview until its
-  // upload finishes, and flipping shape mid-upload would jump the layout.
   const isMedia = isVideo || file.type.startsWith('image/')
   const extension = getFileExtension(file.name)
   const [previewFailed, setPreviewFailed] = useState(false)
 
   return (
-    <Tooltip.Root>
-      {/* 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
+    /* Owns the width cap: it anchors the remove badge, which a max-content button would strand. */
+    <div
+      className={cn(
+        'group relative',
+        isMedia ? 'size-[48px] shrink-0' : 'h-[48px] min-w-0 max-w-[min(220px,100%)]'
+      )}
+    >
+      <button
+        type='button'
         className={cn(
-          'group relative',
-          CHIP_HEIGHT,
-          isMedia ? 'w-[48px] shrink-0' : 'min-w-0 max-w-[min(220px,100%)]'
+          CHIP_SURFACE,
+          'size-full',
+          isMedia ? 'overflow-hidden' : 'flex items-center gap-2 py-[7px] pr-5 pl-2'
         )}
+        onClick={() => onFileClick(file)}
       >
-        <Tooltip.Trigger asChild>
-          <button
-            type='button'
-            className={cn(
-              CHIP_SURFACE,
-              'size-full',
-              isMedia
-                ? '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)}
-          >
-            {isMedia ? (
-              <>
-                <span className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
-                  <Icon className='size-[18px]' />
-                </span>
-                {file.previewUrl &&
-                  !previewFailed &&
-                  (isVideo ? (
-                    <video
-                      src={file.previewUrl}
-                      muted
-                      playsInline
-                      preload='metadata'
-                      className='relative size-full object-cover'
-                    />
-                  ) : (
-                    <img
-                      src={file.previewUrl}
-                      alt={file.name}
-                      // A HEIC whose server-side transcode failed comes back as bytes the
-                      // browser still cannot decode. Dropping the image reveals the type
-                      // icon beneath instead of a broken glyph.
-                      onError={() => setPreviewFailed(true)}
-                      className='relative size-full object-cover'
-                    />
-                  ))}
-              </>
-            ) : (
-              <>
-                {/* 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-md 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 leading-tight'>
-                    {file.name}
-                  </span>
-                  {/* 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-icon)] text-caption uppercase leading-tight'>
-                      {extension}
-                    </span>
-                  )}
-                </span>
-              </>
-            )}
-            {file.uploading && (
-              <span className='absolute inset-0 flex items-center justify-center rounded-[inherit] bg-[var(--surface-5)]/70 dark:bg-[var(--surface-4)]/70'>
-                <Loader className='size-[14px] text-[var(--text-icon)]' animate />
+        {isMedia ? (
+          <>
+            <span className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
+              <Icon className='size-[18px]' />
+            </span>
+            {file.previewUrl &&
+              !previewFailed &&
+              (isVideo ? (
+                <video
+                  src={file.previewUrl}
+                  muted
+                  playsInline
+                  preload='metadata'
+                  className='relative size-full object-cover'
+                />
+              ) : (
+                <img
+                  src={file.previewUrl}
+                  alt={file.name}
+                  onError={() => setPreviewFailed(true)}
+                  className='relative size-full object-cover'
+                />
+              ))}
+          </>
+        ) : (
+          <>
+            {/* Hover steps too: --surface-active is within 7/255 of --surface-6 in light mode. */}
+            <span className='flex size-[32px] shrink-0 items-center justify-center rounded-md bg-[var(--surface-6)] text-[var(--text-icon)] transition-colors hover-hover:group-hover:bg-[var(--surface-7)] dark: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 leading-tight'>
+                {file.name}
               </span>
-            )}
-          </button>
-        </Tooltip.Trigger>
-        {!file.uploading && (
-          <button
-            type='button'
-            onClick={(e) => {
-              e.stopPropagation()
-              onRemoveFile(file.id)
-            }}
-            aria-label={`Remove ${file.name}`}
-            // Opaque, not a translucent scrim: a semi-transparent fill composites with
-            // whatever sits under it, so the same badge reads differently over a light
-            // card than over a photo. An opaque surface plus a border keeps the glyph
-            // contrast fixed and gives the badge an edge against any thumbnail.
-            className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-1)] text-[var(--text-body)] opacity-0 transition-opacity group-hover:opacity-100'
-          >
-            <X className='size-[9px]' />
-          </button>
+              {extension && (
+                <span className='text-[var(--text-icon)] text-caption uppercase leading-tight'>
+                  {extension}
+                </span>
+              )}
+            </span>
+          </>
+        )}
+        {file.uploading && (
+          <span className='absolute inset-0 flex items-center justify-center rounded-[inherit] bg-[var(--surface-5)]/70 dark:bg-[var(--surface-4)]/70'>
+            <Loader className='size-[14px] text-[var(--text-icon)]' animate />
+          </span>
         )}
-      </div>
-      {/* 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>
+      </button>
+      {!file.uploading && (
+        <button
+          type='button'
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemoveFile(file.id)
+          }}
+          aria-label={`Remove ${file.name}`}
+          className='absolute top-[2px] right-[2px] flex size-[16px] items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-body)] opacity-0 transition-opacity group-hover:opacity-100'
+        >
+          <X className='size-[10px]' />
+        </button>
+      )}
+    </div>
   )
 })
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts

@@ -159,8 +159,8 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
       if (files.length === 0) return
 
       const placeholders: AttachedFile[] = files.map((file) => {
-        // Resolve once: the browser reports `application/octet-stream` (or nothing) for
-        // plenty of files, and both the chip and the preview decision key off the type.
+        /** Resolved once: browsers report `application/octet-stream` (or nothing) for
+         *  plenty of files, and both the chip and the preview decision key off it. */
         const type = resolveFileType(file)
         return {
           id: generateId(),
@@ -211,10 +211,9 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
                       path: result.path,
                       key: result.key,
                       uploading: false,
-                      // A format the browser cannot decode has no local preview; now that
-                      // the bytes are stored, the serve route can hand back a renderable
-                      // derivative. Anything already previewing keeps its blob URL rather
-                      // than paying a round trip for a thumbnail it can draw locally.
+                      /** A format the browser cannot decode has no local preview; the
+                       *  stored bytes now have a renderable derivative. Anything already
+                       *  previewing keeps its blob URL. */
                       previewUrl:
                         f.previewUrl ??
                         getMothershipAttachmentPreviewUrl({
@@ -352,12 +351,11 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
   }, [])
 
   /**
-   * Replaces the current attached files with a given set.
-   * Cleans up preview URLs from the prior set before replacing.
+   * Replaces the current attached files with a given set, revoking the prior set's
+   * preview URLs first. Revoked outside the updater, which must stay pure — React
+   * double-invokes updaters in StrictMode and may replay them.
    */
   const restoreAttachedFiles = useCallback((files: AttachedFile[]) => {
-    // Revoked outside the updater: React double-invokes updaters in StrictMode and may
-    // replay them, so they have to stay pure.
     attachedFilesRef.current.forEach((f) => revokePreviewUrl(f.previewUrl))
     setAttachedFiles(files)
   }, [])