Truncate form text by display width and keep box width inside the terminal

fitTrailingText was using string length, so CJK and emoji overran the pane.
Also drop the forced 16-column box floor so margin plus width cannot exceed tiny terminals.

Author: TheGreatAxios

src/tui/components/agent-modal.tsx

@@ -834,7 +834,7 @@ export function AgentModal({
       paddingY={1}
       marginX={1}
       marginY={1}
-      width={Math.max(16, columns - 2)}
+      width={Math.max(1, columns - 2)}
     >
       <Text bold color={color("accent")}>
         Agent Configuration

src/tui/components/form-reflow.test.ts

@@ -23,6 +23,27 @@ describe("fitTrailingText", () => {
     expect(fitTrailingText("x", 0)).toBe("");
     expect(fitTrailingText("x", -3)).toBe("");
   });
+
+  test("truncates by display width for CJK (two cells each)", () => {
+    // "你好世界" is 8 cells; budget 5 → "…" (1) + last two chars (4) = 5
+    expect(fitTrailingText("你好世界", 5)).toBe("…世界");
+  });
+
+  test("truncates by display width for emoji", () => {
+    // each rocket is 2 cells; budget 5 → "…" (1) + two rockets (4) = 5
+    expect(fitTrailingText("🚀🚀🚀🚀", 5)).toBe("…🚀🚀");
+  });
+
+  test("never exceeds the column budget after truncation", () => {
+    const samples = ["hello world", "你好世界测试", "a🚀b🚀c🚀d", "abcdefghijklmnopqrstuvwxyz"];
+    for (const text of samples) {
+      for (const width of [1, 2, 3, 5, 8, 10]) {
+        const out = fitTrailingText(text, width);
+        // stringWidth is exercised via the public API; Bun.stringWidth matches.
+        expect(Bun.stringWidth(out)).toBeLessThanOrEqual(Math.max(0, width));
+      }
+    }
+  });
 });
 
 describe("wrapHelpSegments", () => {
@@ -43,7 +64,7 @@ describe("wrapHelpSegments", () => {
     const lines = wrapHelpSegments(formHelp, 40);
     expect(lines.length).toBeGreaterThan(1);
     for (const line of lines) {
-      expect(line.length).toBeLessThanOrEqual(40);
+      expect(Bun.stringWidth(line)).toBeLessThanOrEqual(40);
     }
     expect(lines.join(" · ")).toContain("Up/Down fields");
     expect(lines.join(" · ")).toContain("Esc cancel");
@@ -54,7 +75,7 @@ describe("wrapHelpSegments", () => {
       const lines = wrapHelpSegments(formHelp, width);
       expect(lines.length).toBeGreaterThan(0);
       for (const line of lines) {
-        expect(line.length).toBeLessThanOrEqual(Math.max(8, width));
+        expect(Bun.stringWidth(line)).toBeLessThanOrEqual(Math.max(8, width));
       }
     }
   });

src/tui/components/form-reflow.ts

@@ -1,5 +1,7 @@
 // Shared layout helpers for settings / agent forms on narrow terminals.
 
+import { stringWidth } from "../view/height.js";
+
 /** Stack labels above values below this terminal width. */
 export const STACK_FORM_COLUMNS = 56;
 
@@ -12,12 +14,27 @@ export function formContentWidth(columns: number, narrow: boolean): number {
 /**
  * Caret sits at the end of append-only fields; keep the trailing slice so the
  * insertion point stays on-screen when the value is longer than the pane.
+ * Budget is terminal columns (display width), not UTF-16 length — CJK and
+ * emoji are two cells each.
  */
 export function fitTrailingText(text: string, maxWidth: number): string {
   if (maxWidth <= 0) return "";
-  if (text.length <= maxWidth) return text;
+  if (stringWidth(text) <= maxWidth) return text;
   if (maxWidth === 1) return "…";
-  return `…${text.slice(-(maxWidth - 1))}`;
+
+  // Walk code points from the end until the trailing slice fills maxWidth - 1
+  // (one cell reserved for the leading ellipsis).
+  const budget = maxWidth - 1;
+  const units = Array.from(text);
+  let used = 0;
+  let start = units.length;
+  for (let i = units.length - 1; i >= 0; i--) {
+    const cw = stringWidth(units[i]!);
+    if (used + cw > budget) break;
+    used += cw;
+    start = i;
+  }
+  return `…${units.slice(start).join("")}`;
 }
 
 /** Pack " · "-separated help segments into lines that fit the pane. */
@@ -29,16 +46,16 @@ export function wrapHelpSegments(segments: readonly string[], maxWidth: number):
   for (const segment of segments) {
     if (segment.length === 0) continue;
     if (current.length === 0) {
-      current = segment.length > width ? fitTrailingText(segment, width) : segment;
+      current = stringWidth(segment) > width ? fitTrailingText(segment, width) : segment;
       continue;
     }
     const candidate = `${current} · ${segment}`;
-    if (candidate.length <= width) {
+    if (stringWidth(candidate) <= width) {
       current = candidate;
       continue;
     }
     lines.push(current);
-    current = segment.length > width ? fitTrailingText(segment, width) : segment;
+    current = stringWidth(segment) > width ? fitTrailingText(segment, width) : segment;
   }
   if (current.length > 0) lines.push(current);
   return lines;

src/tui/components/settings-overlay.tsx

@@ -546,7 +546,7 @@ export function SettingsOverlay({
       paddingY={1}
       marginX={1}
       marginY={1}
-      width={Math.max(16, columns - 2)}
+      width={Math.max(1, columns - 2)}
     >
       <Text bold color={color("accent")}>Settings</Text>
       <TabBar activeTab={activeTab} onSwitch={setActiveTab} stack={stack} />