From 5df4953782b1c6ec406f3d5c19d930d31bfb91d0 Mon Sep 17 00:00:00 2001
From: CasualDeveloper <10153929+CasualDeveloper@users.noreply.github.com>
Date: Fri, 26 Dec 2025 00:06:09 +0800
Subject: [PATCH] feat(tui): allow session names to wrap to two lines in dialog

- Replace overflow hidden with wrapMode word to enable text wrapping
- Add maxHeight=2 to limit to two lines
- Add flexWrap=wrap on option container to allow content flow
- Change truncation from 61 to 122 chars (~2 lines worth)
---
 packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
index 1e764d66bba..62f182a5201 100644
--- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
+++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
@@ -1,6 +1,6 @@
 import { InputRenderable, RGBA, ScrollBoxRenderable, TextAttributes } from "@opentui/core"
 import { useTheme, selectedForeground } from "@tui/context/theme"
-import { entries, filter, flatMap, groupBy, pipe, take } from "remeda"
+import { entries, filter, flatMap, groupBy, pipe } from "remeda"
 import { batch, createEffect, createMemo, For, Show, type JSX, on } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
@@ -238,6 +238,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                     <box
                       id={JSON.stringify(option.value)}
                       flexDirection="row"
+                      flexWrap="wrap"
                       onMouseUp={() => {
                         option.onSelect?.(dialog)
                         props.onSelect?.(option)
@@ -314,10 +315,11 @@ function Option(props: {
         flexGrow={1}
         fg={props.active ? fg : props.current ? theme.primary : theme.text}
         attributes={props.active ? TextAttributes.BOLD : undefined}
-        overflow="hidden"
+        wrapMode="word"
+        maxHeight={2}
         paddingLeft={3}
       >
-        {Locale.truncate(props.title, 61)}
+        {Locale.truncate(props.title, 122)}
         <Show when={props.description}>
           <span style={{ fg: props.active ? fg : theme.textMuted }}> {props.description}</span>
         </Show>