tui: make remove buttons on comment chips and image attachments more visible with solid background and border

packages/app/src/components/comment-chip.tsx

@@ -0,0 +1,85 @@
+import { Show, type Component } from "solid-js"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+
+type Range = {
+  start: number
+  end: number
+}
+
+type CommentChipProps = {
+  variant?: "preview" | "full"
+  path: string
+  label: string
+  selection?: Range
+  comment?: string
+  class?: string
+  onOpen?: () => void
+  onRemove?: () => void
+  removeLabel?: string
+}
+
+const removeClass =
+  "absolute top-0 right-0 size-6 opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
+const removeIconClass =
+  "absolute top-1 right-1 size-4 rounded-[var(--radius-sm)] border border-border-weak-base flex items-center justify-center bg-[var(--surface-raised-stronger-non-alpha)] group-active/remove:bg-surface-base-active"
+
+export const CommentChip: Component<CommentChipProps> = (props) => {
+  const variant = () => props.variant ?? "preview"
+  const range = () => {
+    const sel = props.selection
+    if (!sel) return
+    const start = Math.min(sel.start, sel.end)
+    const end = Math.max(sel.start, sel.end)
+    return { start, end }
+  }
+
+  const pad = () => (props.onRemove ? "pr-7" : "pr-2")
+
+  return (
+    <div
+      class={`group relative flex flex-col rounded-[6px] cursor-default bg-background-stronger border border-border-weak-base ${
+        variant() === "full" ? `pl-2 py-1 ${pad()}` : `pl-2 py-1 h-12 ${pad()}`
+      } ${props.class ?? ""}`}
+      onClick={() => props.onOpen?.()}
+    >
+      <div class="flex items-center gap-1.5 min-w-0">
+        <FileIcon node={{ path: props.path, type: "file" }} class="shrink-0 size-3.5" />
+        <div class="flex items-center text-11-regular min-w-0 font-medium">
+          <span class="text-text-strong whitespace-nowrap">{props.label}</span>
+          <Show when={range()}>
+            {(sel) => (
+              <span class="text-text-weak whitespace-nowrap shrink-0">
+                {sel().start === sel().end ? `:${sel().start}` : `:${sel().start}-${sel().end}`}
+              </span>
+            )}
+          </Show>
+        </div>
+      </div>
+      <Show when={(props.comment ?? "").trim().length > 0}>
+        <div
+          class={`text-base text-text-strong ml-5 ${
+            variant() === "full" ? "whitespace-pre-wrap break-words" : "truncate"
+          }`}
+        >
+          {props.comment}
+        </div>
+      </Show>
+      <Show when={props.onRemove}>
+        <button
+          type="button"
+          class={`${removeClass} group/remove`}
+          onClick={(e) => {
+            e.stopPropagation()
+            props.onRemove?.()
+          }}
+          aria-label={props.removeLabel}
+        >
+          <span class={removeIconClass}>
+            <Icon name="close-small" size="small" class="text-text-weak group-hover/remove:text-text-strong" />
+          </span>
+        </button>
+      </Show>
+    </div>
+  )
+}

packages/app/src/components/prompt-input.tsx

@@ -52,7 +52,6 @@ import {
 import { createPromptSubmit, type FollowupDraft } from "./prompt-input/submit"
 import { PromptPopover, type AtOption, type SlashCommand } from "./prompt-input/slash-popover"
 import { PromptContextItems } from "./prompt-input/context-items"
-import { PromptImageAttachments } from "./prompt-input/image-attachments"
 import { PromptDragOverlay } from "./prompt-input/drag-overlay"
 import { promptPlaceholder } from "./prompt-input/placeholder"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
@@ -1291,6 +1290,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         />
         <PromptContextItems
           items={contextItems()}
+          images={imageAttachments()}
           active={(item) => {
             const active = comments.active()
             return !!item.commentID && item.commentID === active?.id && item.path === active?.file
@@ -1300,15 +1300,12 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             if (item.commentID) comments.remove(item.path, item.commentID)
             prompt.context.remove(item.key)
           }}
-          t={(key) => language.t(key as Parameters<typeof language.t>[0])}
+          openImage={(attachment) =>
-        />
-        <PromptImageAttachments
-          attachments={imageAttachments()}
-          onOpen={(attachment) =>
             dialog.show(() => <ImagePreview src={attachment.dataUrl} alt={attachment.filename} />)
           }
-          onRemove={removeAttachment}
+          removeImage={removeAttachment}
-          removeLabel={language.t("prompt.attachment.remove")}
+          imageRemoveLabel={language.t("prompt.attachment.remove")}
+          t={(key) => language.t(key as Parameters<typeof language.t>[0])}
         />
         <div
           class="relative"

packages/app/src/components/prompt-input/context-items.tsx

@@ -1,30 +1,62 @@
-import { Component, For, Show } from "solid-js"
+import { Component, For, Show, createMemo } from "solid-js"
-import { FileIcon } from "@opencode-ai/ui/file-icon"
-import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/util/path"
-import type { ContextItem } from "@/context/prompt"
+import type { ContextItem, ImageAttachmentPart } from "@/context/prompt"
+import { PromptImageAttachment } from "./image-attachments"
+import { CommentChip } from "@/components/comment-chip"
 
 type PromptContextItem = ContextItem & { key: string }
 
 type ContextItemsProps = {
   items: PromptContextItem[]
+  images: ImageAttachmentPart[]
   active: (item: PromptContextItem) => boolean
   openComment: (item: PromptContextItem) => void
   remove: (item: PromptContextItem) => void
+  openImage: (attachment: ImageAttachmentPart) => void
+  removeImage: (id: string) => void
+  imageRemoveLabel: string
   t: (key: string) => string
 }
 
 export const PromptContextItems: Component<ContextItemsProps> = (props) => {
+  const seen = new Map<string, number>()
+  let seq = 0
+
+  const rows = createMemo(() => {
+    const all = [
+      ...props.items.map((item) => ({ type: "ctx" as const, key: `ctx:${item.key}`, item })),
+      ...props.images.map((attachment) => ({ type: "img" as const, key: `img:${attachment.id}`, attachment })),
+    ]
+
+    for (const row of all) {
+      if (seen.has(row.key)) continue
+      seen.set(row.key, seq)
+      seq += 1
+    }
+
+    return all.slice().sort((a, b) => (seen.get(a.key) ?? 0) - (seen.get(b.key) ?? 0))
+  })
+
   return (
-    <Show when={props.items.length > 0}>
+    <Show when={rows().length > 0}>
       <div class="flex flex-nowrap items-start gap-2 p-2 overflow-x-auto no-scrollbar">
-        <For each={props.items}>
+        <For each={rows()}>
-          {(item) => {
+          {(row) => {
-            const directory = getDirectory(item.path)
+            if (row.type === "img") {
-            const filename = getFilename(item.path)
+              return (
-            const label = getFilenameTruncated(item.path, 14)
+                <PromptImageAttachment
-            const selected = props.active(item)
+                  attachment={row.attachment}
+                  onOpen={props.openImage}
+                  onRemove={props.removeImage}
+                  removeLabel={props.imageRemoveLabel}
+                />
+              )
+            }
+
+            const directory = getDirectory(row.item.path)
+            const filename = getFilename(row.item.path)
+            const label = getFilenameTruncated(row.item.path, 14)
 
             return (
               <Tooltip
@@ -38,46 +70,26 @@ export const PromptContextItems: Component<ContextItemsProps> = (props) => {
                 }
                 placement="top"
                 openDelay={2000}
+                class="shrink-0"
               >
-                <div
+                <CommentChip
-                  classList={{
+                  variant="preview"
-                    "group shrink-0 flex flex-col rounded-[6px] pl-2 pr-1 py-1 max-w-[200px] h-12 cursor-default transition-all transition-transform shadow-xs-border hover:shadow-xs-border-hover": true,
+                  path={row.item.path}
-                    "hover:bg-surface-interactive-weak": !!item.commentID && !selected,
+                  label={label}
-                    "bg-surface-interactive-hover hover:bg-surface-interactive-hover shadow-xs-border-hover": selected,
+                  selection={
-                    "bg-background-stronger": !selected,
+                    row.item.selection
-                  }}
+                      ? {
-                  onClick={() => props.openComment(item)}
+                          start: row.item.selection.startLine,
-                >
+                          end: row.item.selection.endLine,
-                  <div class="flex items-center gap-1.5">
+                        }
-                    <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
+                      : undefined
-                    <div class="flex items-center text-11-regular min-w-0 font-medium">
+                  }
-                      <span class="text-text-strong whitespace-nowrap">{label}</span>
+                  comment={row.item.comment}
-                      <Show when={item.selection}>
+                  class="max-w-[200px]"
-                        {(sel) => (
+                  onOpen={() => props.openComment(row.item)}
-                          <span class="text-text-weak whitespace-nowrap shrink-0">
+                  onRemove={() => props.remove(row.item)}
-                            {sel().startLine === sel().endLine
+                  removeLabel={props.t("prompt.context.removeFile")}
-                              ? `:${sel().startLine}`
+                />
-                              : `:${sel().startLine}-${sel().endLine}`}
-                          </span>
-                        )}
-                      </Show>
-                    </div>
-                    <IconButton
-                      type="button"
-                      icon="close-small"
-                      variant="ghost"
-                      class="ml-auto size-3.5 text-text-weak hover:text-text-strong transition-all"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        props.remove(item)
-                      }}
-                      aria-label={props.t("prompt.context.removeFile")}
-                    />
-                  </div>
-                  <Show when={item.comment}>
-                    {(comment) => <div class="text-12-regular text-text-strong ml-5 pr-1 truncate">{comment()}</div>}
-                  </Show>
-                </div>
               </Tooltip>
             )
           }}

packages/app/src/components/prompt-input/image-attachments.tsx

@@ -1,5 +1,7 @@
-import { Component, For, Show } from "solid-js"
+import { Component, Show } from "solid-js"
 import { Icon } from "@opencode-ai/ui/icon"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 import type { ImageAttachmentPart } from "@/context/prompt"
 
 type PromptImageAttachmentsProps = {
@@ -9,50 +11,68 @@ type PromptImageAttachmentsProps = {
   removeLabel: string
 }
 
-const fallbackClass = "size-16 rounded-md bg-surface-base flex items-center justify-center border border-border-base"
+type PromptImageAttachmentProps = {
-const imageClass =
+  attachment: ImageAttachmentPart
-  "size-16 rounded-md object-cover border border-border-base hover:border-border-strong-base transition-colors"
+  onOpen: (attachment: ImageAttachmentPart) => void
+  onRemove: (id: string) => void
+  removeLabel: string
+}
+
+const fallbackClass =
+  "size-12 rounded-[6px] bg-background-stronger flex items-center justify-center border border-border-weak-base cursor-default"
+const imageClass = "size-12 rounded-[6px] object-cover border border-border-weak-base"
 const removeClass =
-  "absolute -top-1.5 -right-1.5 size-5 rounded-full bg-surface-raised-stronger-non-alpha border border-border-base flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-surface-raised-base-hover"
+  "absolute top-0 right-0 size-6 opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto"
-const nameClass = "absolute bottom-0 left-0 right-0 px-1 py-0.5 bg-black/50 rounded-b-md"
+const removeIconClass =
+  "absolute top-1 right-1 size-4 rounded-[var(--radius-sm)] border border-border-weak-base flex items-center justify-center bg-[var(--surface-raised-stronger-non-alpha)] group-active/remove:bg-surface-base-active"
 
 export const PromptImageAttachments: Component<PromptImageAttachmentsProps> = (props) => {
   return (
     <Show when={props.attachments.length > 0}>
-      <div class="flex flex-wrap gap-2 px-3 pt-3">
+      <>
-        <For each={props.attachments}>
+        {props.attachments.map((attachment) => (
-          {(attachment) => (
+          <PromptImageAttachment
-            <div class="relative group">
+            attachment={attachment}
-              <Show
+            onOpen={props.onOpen}
-                when={attachment.mime.startsWith("image/")}
+            onRemove={props.onRemove}
-                fallback={
+            removeLabel={props.removeLabel}
-                  <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>
-          )}
-        </For>
-      </div>
     </Show>
   )
 }
+
+export const PromptImageAttachment: Component<PromptImageAttachmentProps> = (props) => {
+  return (
+    <Tooltip value={props.attachment.filename} placement="top" gutter={6} class="shrink-0">
+      <div class="relative group">
+        <Show
+          when={props.attachment.mime.startsWith("image/")}
+          fallback={
+            <div class={fallbackClass}>
+              <FileIcon node={{ path: props.attachment.filename, type: "file" }} class="size-5" />
+            </div>
+          }
+        >
+          <img
+            src={props.attachment.dataUrl}
+            alt={props.attachment.filename}
+            class={imageClass}
+            onClick={() => props.onOpen(props.attachment)}
+          />
+        </Show>
+        <button
+          type="button"
+          class={`${removeClass} group/remove`}
+          onClick={() => props.onRemove(props.attachment.id)}
+          aria-label={props.removeLabel}
+        >
+          <span class={removeIconClass}>
+            <Icon name="close-small" size="small" class="text-text-weak group-hover/remove:text-text-strong" />
+          </span>
+        </button>
+      </div>
+    </Tooltip>
+  )
+}

packages/app/src/i18n/ar.ts

@@ -477,7 +477,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} رسائل تم التراجع عنها",
   "session.revertDock.collapse": "طي الرسائل التي تم التراجع عنها",
   "session.revertDock.expand": "توسيع الرسائل التي تم التراجع عنها",
-  "session.revertDock.restore": "استعادة الرسالة",
+  "session.revertDock.restore": "استعادة",
   "session.new.title": "ابنِ أي شيء",
   "session.new.worktree.main": "الفرع الرئيسي",
   "session.new.worktree.mainWithBranch": "الفرع الرئيسي ({{branch}})",

packages/app/src/i18n/br.ts

@@ -481,7 +481,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} mensagens revertidas",
   "session.revertDock.collapse": "Recolher mensagens revertidas",
   "session.revertDock.expand": "Expandir mensagens revertidas",
-  "session.revertDock.restore": "Restaurar mensagem",
+  "session.revertDock.restore": "Restaurar",
   "session.new.title": "Crie qualquer coisa",
   "session.new.worktree.main": "Branch principal",
   "session.new.worktree.mainWithBranch": "Branch principal ({{branch}})",

packages/app/src/i18n/bs.ts

@@ -536,7 +536,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} vraćenih poruka",
   "session.revertDock.collapse": "Sažmi vraćene poruke",
   "session.revertDock.expand": "Proširi vraćene poruke",
-  "session.revertDock.restore": "Vrati poruku",
+  "session.revertDock.restore": "Vrati",
 
   "session.new.title": "Napravi bilo šta",
   "session.new.worktree.main": "Glavna grana",

packages/app/src/i18n/da.ts

@@ -531,7 +531,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} tilbagerullede beskeder",
   "session.revertDock.collapse": "Skjul tilbagerullede beskeder",
   "session.revertDock.expand": "Udvid tilbagerullede beskeder",
-  "session.revertDock.restore": "Gendan besked",
+  "session.revertDock.restore": "Gendan",
 
   "session.new.title": "Byg hvad som helst",
   "session.new.worktree.main": "Hovedgren",

packages/app/src/i18n/de.ts

@@ -489,7 +489,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} zurückgesetzte Nachrichten",
   "session.revertDock.collapse": "Zurückgesetzte Nachrichten einklappen",
   "session.revertDock.expand": "Zurückgesetzte Nachrichten ausklappen",
-  "session.revertDock.restore": "Nachricht wiederherstellen",
+  "session.revertDock.restore": "Wiederherstellen",
   "session.new.title": "Baue, was du willst",
   "session.new.worktree.main": "Haupt-Branch",
   "session.new.worktree.mainWithBranch": "Haupt-Branch ({{branch}})",

packages/app/src/i18n/en.ts

@@ -561,7 +561,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} rolled back messages",
   "session.revertDock.collapse": "Collapse rolled back messages",
   "session.revertDock.expand": "Expand rolled back messages",
-  "session.revertDock.restore": "Restore message",
+  "session.revertDock.restore": "Restore",
 
   "session.new.title": "Build anything",
   "session.new.worktree.main": "Main branch",

packages/app/src/i18n/es.ts

@@ -537,7 +537,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} mensajes revertidos",
   "session.revertDock.collapse": "Contraer mensajes revertidos",
   "session.revertDock.expand": "Expandir mensajes revertidos",
-  "session.revertDock.restore": "Restaurar mensaje",
+  "session.revertDock.restore": "Restaurar",
 
   "session.new.title": "Construye lo que quieras",
   "session.new.worktree.main": "Rama principal",

packages/app/src/i18n/fr.ts

@@ -486,7 +486,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} messages annulés",
   "session.revertDock.collapse": "Réduire les messages annulés",
   "session.revertDock.expand": "Développer les messages annulés",
-  "session.revertDock.restore": "Restaurer le message",
+  "session.revertDock.restore": "Restaurer",
   "session.new.title": "Créez ce que vous voulez",
   "session.new.worktree.main": "Branche principale",
   "session.new.worktree.mainWithBranch": "Branche principale ({{branch}})",

packages/app/src/i18n/ja.ts

@@ -478,7 +478,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} 件のロールバックされたメッセージ",
   "session.revertDock.collapse": "ロールバックされたメッセージを折りたたむ",
   "session.revertDock.expand": "ロールバックされたメッセージを展開",
-  "session.revertDock.restore": "メッセージを復元",
+  "session.revertDock.restore": "復元",
   "session.new.title": "何でも作る",
   "session.new.worktree.main": "メインブランチ",
   "session.new.worktree.mainWithBranch": "メインブランチ ({{branch}})",

packages/app/src/i18n/ko.ts

@@ -480,7 +480,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}}개의 롤백된 메시지",
   "session.revertDock.collapse": "롤백된 메시지 접기",
   "session.revertDock.expand": "롤백된 메시지 펼치기",
-  "session.revertDock.restore": "메시지 복원",
+  "session.revertDock.restore": "복원",
   "session.new.title": "무엇이든 만들기",
   "session.new.worktree.main": "메인 브랜치",
   "session.new.worktree.mainWithBranch": "메인 브랜치 ({{branch}})",

packages/app/src/i18n/no.ts

@@ -537,7 +537,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} tilbakestilte meldinger",
   "session.revertDock.collapse": "Skjul tilbakestilte meldinger",
   "session.revertDock.expand": "Utvid tilbakestilte meldinger",
-  "session.revertDock.restore": "Gjenopprett melding",
+  "session.revertDock.restore": "Gjenopprett",
 
   "session.new.title": "Bygg hva som helst",
   "session.new.worktree.main": "Hovedgren",

packages/app/src/i18n/pl.ts

@@ -479,7 +479,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} cofnięte wiadomości",
   "session.revertDock.collapse": "Zwiń cofnięte wiadomości",
   "session.revertDock.expand": "Rozwiń cofnięte wiadomości",
-  "session.revertDock.restore": "Przywróć wiadomość",
+  "session.revertDock.restore": "Przywróć",
   "session.new.title": "Zbuduj cokolwiek",
   "session.new.worktree.main": "Główna gałąź",
   "session.new.worktree.mainWithBranch": "Główna gałąź ({{branch}})",

packages/app/src/i18n/ru.ts

@@ -534,7 +534,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} сообщений возвращено",
   "session.revertDock.collapse": "Свернуть возвращённые сообщения",
   "session.revertDock.expand": "Развернуть возвращённые сообщения",
-  "session.revertDock.restore": "Восстановить сообщение",
+  "session.revertDock.restore": "Восстановить",
 
   "session.new.title": "Создавайте что угодно",
   "session.new.worktree.main": "Основная ветка",

packages/app/src/i18n/th.ts

@@ -531,7 +531,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} ข้อความที่ถูกย้อนกลับ",
   "session.revertDock.collapse": "ย่อข้อความที่ถูกย้อนกลับ",
   "session.revertDock.expand": "ขยายข้อความที่ถูกย้อนกลับ",
-  "session.revertDock.restore": "กู้คืนข้อความ",
+  "session.revertDock.restore": "กู้คืน",
 
   "session.new.title": "สร้างอะไรก็ได้",
   "session.new.worktree.main": "สาขาหลัก",

packages/app/src/i18n/tr.ts

@@ -541,7 +541,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} geri alınan mesaj",
   "session.revertDock.collapse": "Geri alınan mesajları daralt",
   "session.revertDock.expand": "Geri alınan mesajları genişlet",
-  "session.revertDock.restore": "Mesajı geri yükle",
+  "session.revertDock.restore": "Geri yükle",
 
   "session.new.title": "İstediğini yap",
   "session.new.worktree.main": "Ana dal",

packages/app/src/i18n/zh.ts

@@ -531,7 +531,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} 条已回滚消息",
   "session.revertDock.collapse": "折叠已回滚消息",
   "session.revertDock.expand": "展开已回滚消息",
-  "session.revertDock.restore": "恢复消息",
+  "session.revertDock.restore": "恢复",
   "session.new.title": "构建任何东西",
   "session.new.worktree.main": "主分支",
   "session.new.worktree.mainWithBranch": "主分支（{{branch}}）",

packages/app/src/i18n/zht.ts

@@ -527,7 +527,7 @@ export const dict = {
   "session.revertDock.summary.other": "{{count}} 則已回復訊息",
   "session.revertDock.collapse": "收合已回復訊息",
   "session.revertDock.expand": "展開已回復訊息",
-  "session.revertDock.restore": "還原訊息",
+  "session.revertDock.restore": "還原",
 
   "session.new.title": "建構任何東西",
   "session.new.worktree.main": "主分支",

packages/app/src/pages/session.tsx

@@ -1324,9 +1324,22 @@ export default function Page() {
       attachmentName: language.t("common.attachment"),
     })
 
+  const tag = (mime: string | undefined) => {
+    if (mime === "application/pdf") return "pdf"
+    if (mime?.startsWith("image/")) return "image"
+    return "file"
+  }
+
+  const chip = (part: { filename: string; mime: string }) => `[${tag(part.mime)}:${part.filename}]`
+
   const line = (id: string) => {
     const text = draft(id)
-      .map((part) => (part.type === "image" ? `[image:${part.filename}]` : part.content))
+      .map((part) => {
+        if (part.type === "image") return chip(part)
+        if (part.type === "file") return `[file:${part.path}]`
+        if (part.type === "agent") return `@${part.name}`
+        return part.content
+      })
       .join("")
       .replace(/\s+/g, " ")
       .trim()
@@ -1394,7 +1407,7 @@ export default function Page() {
   const followupText = (item: FollowupDraft) => {
     const text = item.prompt
       .map((part) => {
-        if (part.type === "image") return `[image:${part.filename}]`
+        if (part.type === "image") return chip(part)
         if (part.type === "file") return `[file:${part.path}]`
         if (part.type === "agent") return `@${part.name}`
         return part.content

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -46,6 +46,14 @@ export function SessionComposerRegion(props: {
   const language = useLanguage()
   const route = useSessionKey()
 
+  const tag = (mime: string) => {
+    if (mime === "application/pdf") return "pdf"
+    if (mime.startsWith("image/")) return "image"
+    return "file"
+  }
+
+  const chip = (part: { filename: string; mime: string }) => `[${tag(part.mime)}:${part.filename}]`
+
   const handoffPrompt = createMemo(() => getSessionHandoff(route.sessionKey())?.prompt)
 
   const previewPrompt = () =>
@@ -54,7 +62,7 @@ export function SessionComposerRegion(props: {
       .map((part) => {
         if (part.type === "file") return `[file:${part.path}]`
         if (part.type === "agent") return `@${part.name}`
-        if (part.type === "image") return `[image:${part.filename}]`
+        if (part.type === "image") return chip(part)
         return part.content
       })
       .join("")

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -259,24 +259,26 @@ export const SessionQuestionDock: Component<{ request: QuestionRequest; onSubmit
       header={
         <>
           <div data-slot="question-header-title">{summary()}</div>
-          <div data-slot="question-progress">
+          <Show when={total() > 1}>
-            <For each={questions()}>
+            <div data-slot="question-progress">
-              {(_, i) => (
+              <For each={questions()}>
-                <button
+                {(_, i) => (
-                  type="button"
+                  <button
-                  data-slot="question-progress-segment"
+                    type="button"
-                  data-active={i() === store.tab}
+                    data-slot="question-progress-segment"
-                  data-answered={
+                    data-active={i() === store.tab}
-                    (store.answers[i()]?.length ?? 0) > 0 ||
+                    data-answered={
-                    (store.customOn[i()] === true && (store.custom[i()] ?? "").trim().length > 0)
+                      (store.answers[i()]?.length ?? 0) > 0 ||
-                  }
+                      (store.customOn[i()] === true && (store.custom[i()] ?? "").trim().length > 0)
-                  disabled={store.sending}
+                    }
-                  onClick={() => jump(i())}
+                    disabled={store.sending}
-                  aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
+                    onClick={() => jump(i())}
-                />
+                    aria-label={`${language.t("ui.tool.questions")} ${i() + 1}`}
-              )}
+                  />
-            </For>
+                )}
-          </div>
+              </For>
+            </div>
+          </Show>
         </>
       }
       footer={

packages/app/src/pages/session/message-timeline.tsx

@@ -2,7 +2,6 @@ import { For, createEffect, createMemo, on, onCleanup, Show, Index, type JSX } f
 import { createStore, produce } from "solid-js/store"
 import { useNavigate } from "@solidjs/router"
 import { Button } from "@opencode-ai/ui/button"
-import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
@@ -15,7 +14,7 @@ import { TextField } from "@opencode-ai/ui/text-field"
 import type { AssistantMessage, Message as MessageType, Part, TextPart, UserMessage } from "@opencode-ai/sdk/v2"
 import { showToast } from "@opencode-ai/ui/toast"
 import { Binary } from "@opencode-ai/util/binary"
-import { getFilename } from "@opencode-ai/util/path"
+import { getFilenameTruncated } from "@opencode-ai/util/path"
 import { Popover as KobaltePopover } from "@kobalte/core/popover"
 import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
 import { SessionContextUsage } from "@/components/session-context-usage"
@@ -29,6 +28,7 @@ import { useSDK } from "@/context/sdk"
 import { useSync } from "@/context/sync"
 import { messageAgentColor } from "@/utils/agent"
 import { parseCommentNote, readCommentMetadata } from "@/utils/comment-note"
+import { CommentChip } from "@/components/comment-chip"
 
 type MessageComment = {
   path: string
@@ -960,40 +960,36 @@ export function MessageTimeline(props: {
                     >
                       <Show when={commentCount() > 0}>
                         <div class="w-full px-4 md:px-5 pb-2">
-                          <div class="ml-auto max-w-[82%] overflow-x-auto no-scrollbar">
+                          <div class="w-full overflow-visible">
-                            <div class="flex w-max min-w-full justify-end gap-2">
+                            <div class="overflow-x-auto no-scrollbar">
-                              <Index each={comments()}>
+                              <div class="flex w-max min-w-full justify-end gap-2">
-                                {(commentAccessor: () => MessageComment) => {
+                                <Index each={comments()}>
-                                  const comment = createMemo(() => commentAccessor())
+                                  {(commentAccessor: () => MessageComment) => {
-                                  return (
+                                    const comment = createMemo(() => commentAccessor())
-                                    <Show when={comment()}>
+                                    return (
-                                      {(c) => (
+                                      <Show when={comment()}>
-                                        <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
+                                        {(c) => (
-                                          <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
+                                          <CommentChip
-                                            <FileIcon
+                                            variant="full"
-                                              node={{ path: c().path, type: "file" }}
+                                            path={c().path}
-                                              class="size-3.5 shrink-0"
+                                            label={getFilenameTruncated(c().path, 14)}
-                                            />
+                                            selection={
-                                            <span class="truncate">{getFilename(c().path)}</span>
+                                              c().selection
-                                            <Show when={c().selection}>
+                                                ? {
-                                              {(selection) => (
+                                                    start: c().selection!.startLine,
-                                                <span class="shrink-0 text-text-weak">
+                                                    end: c().selection!.endLine,
-                                                  {selection().startLine === selection().endLine
+                                                  }
-                                                    ? `:${selection().startLine}`
+                                                : undefined
-                                                    : `:${selection().startLine}-${selection().endLine}`}
+                                            }
-                                                </span>
+                                            comment={c().comment}
-                                              )}
+                                            class="max-w-[260px]"
-                                            </Show>
+                                          />
-                                          </div>
+                                        )}
-                                          <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words">
+                                      </Show>
-                                            {c().comment}
+                                    )
-                                          </div>
+                                  }}
-                                        </div>
+                                </Index>
-                                      )}
+                              </div>
-                                    </Show>
-                                  )
-                                }}
-                              </Index>
                             </div>
                           </div>
                         </div>

packages/ui/src/components/message-part.css

@@ -49,7 +49,7 @@
       opacity 0.3s ease;
 
     &:hover {
-      border-color: var(--border-strong-base);
+      border-color: var(--border-weak-base);
     }
 
     &[data-clickable] {
@@ -62,9 +62,11 @@
     }
 
     &[data-type="file"] {
-      width: min(220px, 100%);
+      width: fit-content;
+      max-width: min(260px, 100%);
       height: 48px;
-      padding: 0 10px;
+      padding: 0 18px 0 10px;
+      background: var(--background-stronger);
     }
   }
 
@@ -89,7 +91,8 @@
   }
 
   [data-slot="user-message-attachment-file"] {
-    width: 100%;
+    width: fit-content;
+    max-width: 100%;
     min-width: 0;
     display: flex;
     align-items: center;
@@ -104,10 +107,12 @@
 
   [data-slot="user-message-attachment-name"] {
     min-width: 0;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--text-base);
+    color: var(--text-strong);
+    font-weight: var(--font-weight-medium);
     font-size: var(--font-size-small);
     line-height: var(--line-height-large);
   }

packages/ui/src/components/message-part.tsx

@@ -900,6 +900,12 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
 
   const text = createMemo(() => textPart()?.text || "")
 
+  const shown = createMemo(() => {
+    const value = text()
+    if (!value.trim()) return ""
+    return value
+  })
+
   const files = createMemo(() => (props.parts?.filter((p) => p.type === "file") as FilePart[]) ?? [])
 
   const attachments = createMemo(() => files().filter(attached))
@@ -995,11 +1001,11 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
           </For>
         </div>
       </Show>
-      <Show when={text()}>
+      <Show when={shown()}>
         <>
           <div data-slot="user-message-body">
             <div data-slot="user-message-text">
-              <HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
+              <HighlightedText text={shown()} references={inlineFiles()} agents={agents()} />
             </div>
           </div>
           <div data-slot="user-message-copy-wrapper">