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)

Author: CasualDeveloper

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,10 @@ function Option(props: {
         flexGrow={1}
         fg={props.active ? fg : props.current ? theme.primary : theme.text}
         attributes={props.active ? TextAttributes.BOLD : undefined}
-        overflow="hidden"
-        paddingLeft={3}
+        wrapMode="word"
+        maxHeight={2}
       >
-        {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>

packages/plugin/package.json

@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
+}

packages/sdk/js/package.json

@@ -29,4 +29,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
+}