fix: clamp branch preview width

Author: brandonkachen

cli/src/components/branch-item.tsx

@@ -1,4 +1,5 @@
 import { TextAttributes, type BorderCharacters } from '@opentui/core'
+import stringWidth from 'string-width'
 import React, { type ReactNode } from 'react'
 
 const containerBorderChars: BorderCharacters = {
@@ -48,6 +49,7 @@ export const BranchItem = ({
   statusColor,
   statusIndicator = '●',
   theme,
+  availableWidth,
   onToggle,
 }: BranchItemProps) => {
   const resolveFg = (
@@ -90,9 +92,34 @@ export const BranchItem = ({
         ? `${statusLabel} ${statusIndicator}`
         : `${statusIndicator} ${statusLabel}`
       : null
+  const normalizePreview = (value: string): string =>
+    value.replace(/\s+/g, ' ').trim()
+  const ellipsisChar = '…'
+  const ellipsisWidth = stringWidth(ellipsisChar)
+  const maxPreviewWidth = Math.max(1, availableWidth - 4)
+  const clampPreview = (value: string): string => {
+    const normalized = normalizePreview(value)
+    if (!normalized) return ''
+    if (stringWidth(normalized) <= maxPreviewWidth) {
+      return normalized
+    }
+    if (maxPreviewWidth <= ellipsisWidth) {
+      return ellipsisChar
+    }
+    let truncated = ''
+    for (const char of normalized) {
+      if (stringWidth(truncated + char) > maxPreviewWidth - ellipsisWidth) {
+        break
+      }
+      truncated += char
+    }
+    return `${truncated.trimEnd()}${ellipsisChar}`
+  }
+  const collapsedPreviewText = clampPreview(
+    isStreaming ? streamingPreview : finishedPreview,
+  )
   const showCollapsedPreview =
-    (isStreaming && !!streamingPreview) ||
-    (!isStreaming && !!finishedPreview)
+    isCollapsed && collapsedPreviewText.length > 0
 
   const isTextRenderable = (value: ReactNode): boolean => {
     if (value === null || value === undefined || typeof value === 'boolean') {
@@ -282,7 +309,7 @@ export const BranchItem = ({
                 )}
                 attributes={getAttributes(TextAttributes.ITALIC)}
               >
-                {isStreaming ? streamingPreview : finishedPreview}
+                {collapsedPreviewText}
               </text>
             </box>
           ) : null