feat(tui): implemented top border truncation and exported rule module

- Add top border truncation in renderTopRule to handle narrow terminals gracefully.
- Export rule module consistently in index.

packages/tui/src/components/composer/claude.ts

@@ -4,8 +4,9 @@
  * bg chip near the right edge (`─────── hi ─`); the left group renders as a
  * plain standalone bottom bar that yields its row to the autocomplete menu.
  */
-import type { ComposerChromeContext, ComposerRowContext, ComposerStyle } from "./types";
+
 import { renderTopRule } from "./rule";
+import type { ComposerChromeContext, ComposerRowContext, ComposerStyle } from "./types";
 
 export const claudeComposerStyle: ComposerStyle = {
 	id: "claude",

packages/tui/src/components/composer/index.ts

@@ -4,6 +4,6 @@ export * from "./claude";
 export * from "./field";
 export * from "./pi";
 export * from "./rail";
-export * from "./rule";
 export * from "./registry";
+export * from "./rule";
 export * from "./types";

packages/tui/src/components/composer/rule.ts

@@ -3,14 +3,22 @@
  * right status group rides the rule while the left group remains below the
  * editor, preserving the compact status split without a closing rule.
  */
+import { truncateToWidth, visibleWidth } from "../../utils";
 import type { ComposerChromeContext, ComposerRowContext, ComposerStyle } from "./types";
 
-/** Draw a full-width rule with optional status content docked at its right edge. */
+/** Draw a full-width rule with status content docked at its right edge.
+ * Over-wide content is truncated (keeping one rule cell on each side) rather
+ * than dropped, so the chip survives narrow terminals and previews. */
 export function renderTopRule(ctx: ComposerChromeContext): string {
 	const { box, width, borderColor, topBorder } = ctx;
-	if (topBorder && topBorder.width > 0 && topBorder.width <= width - 2) {
-		const leftFill = Math.max(0, width - topBorder.width - 1);
-		return borderColor(box.horizontal.repeat(leftFill)) + topBorder.content + borderColor(box.horizontal);
+	if (topBorder && topBorder.width > 0 && width > 2) {
+		let { content, width: chipWidth } = topBorder;
+		if (chipWidth > width - 2) {
+			content = truncateToWidth(content, width - 2);
+			chipWidth = visibleWidth(content);
+		}
+		const leftFill = Math.max(0, width - chipWidth - 1);
+		return borderColor(box.horizontal.repeat(leftFill)) + content + borderColor(box.horizontal);
 	}
 	return borderColor(box.horizontal.repeat(width));
 }