feat(app): add middle truncation for filename in comment card

2 files changed, 16 insertions, 8 deletions

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index b6c4d3c85..86e6c1870 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -39,7 +39,7 @@ import type { IconName } from "@opencode-ai/ui/icons/provider"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
-import { getDirectory, getFilename } from "@opencode-ai/util/path"
+import { getDirectory, getFilename, getFilenameTruncated } from "@opencode-ai/util/path"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
@@ -1691,18 +1691,13 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       tabs().open("review")
                     }}
                   >
-                    <div class="flex items-center gap-2">
+                    <div class="flex items-center gap-1.5">
                       <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-3.5" />
                       <div
                         class="flex-1 flex items-center text-11-regular min-w-0"
                         style={{ "font-weight": "var(--font-weight-medium)" }}
                       >
-                        <span class="truncate min-w-0" style={{ direction: "rtl", "text-align": "left" }}>
-                          <bdi>
-                            <span class="text-text-weak">{getDirectory(item.path)}</span>
-                            <span class="text-text-strong">{getFilename(item.path)}</span>
-                          </bdi>
-                        </span>
+                        <span class="text-text-strong whitespace-nowrap">{getFilenameTruncated(item.path, 18)}</span>
                         <Show when={item.selection}>
                           {(sel) => (
                             <span class="text-text-weak whitespace-nowrap shrink-0">
diff --git a/packages/util/src/path.ts b/packages/util/src/path.ts
index 1ac106f21..8f4f3304a 100644
--- a/packages/util/src/path.ts
+++ b/packages/util/src/path.ts
@@ -17,3 +17,16 @@ export function getFileExtension(path: string | undefined) {
   const parts = path.split(".")
   return parts[parts.length - 1]
 }
+
+export function getFilenameTruncated(path: string | undefined, maxLength: number = 20) {
+  const filename = getFilename(path)
+  if (filename.length <= maxLength) return filename
+  const lastDot = filename.lastIndexOf(".")
+  const name = lastDot <= 0 ? filename : filename.slice(0, lastDot)
+  const ext = lastDot <= 0 ? "" : filename.slice(lastDot)
+  const available = maxLength - ext.length - 1 // -1 for ellipsis
+  if (available <= 0) return filename.slice(0, maxLength - 1) + "…"
+  const start = Math.ceil(available / 2)
+  const end = Math.floor(available / 2)
+  return name.slice(0, start) + "…" + name.slice(-end) + ext
+}