fix: resize input (#6)

src/cli/components/AdvancedDiffRenderer.tsx

@@ -7,6 +7,7 @@ import {
   type AdvancedDiffSuccess,
   computeAdvancedDiff,
 } from "../helpers/diff";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { colors } from "./colors";
 import { EditRenderer, MultiEditRenderer, WriteRenderer } from "./DiffRenderer";
 
@@ -196,6 +197,9 @@ function Line({
 export function AdvancedDiffRenderer(
   props: Props & { precomputed?: AdvancedDiffSuccess },
 ) {
+  // Must call hooks at top level before any early returns
+  const columns = useTerminalWidth();
+
   const result = useMemo(() => {
     if (props.precomputed) return props.precomputed;
     if (props.kind === "write") {
@@ -350,12 +354,6 @@ export function AdvancedDiffRenderer(
       : `Updated ${relative}`;
 
   // Best-effort width clamp for rendering inside approval panel (border + padding + indent ~ 8 cols)
-  const columns =
-    typeof process !== "undefined" &&
-    process.stdout &&
-    "columns" in process.stdout
-      ? (process.stdout as NodeJS.WriteStream & { columns: number }).columns
-      : 80;
   const panelInnerWidth = Math.max(20, columns - 8); // keep a reasonable minimum
 
   return (

src/cli/components/AssistantMessageRich.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { memo } from "react";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { MarkdownDisplay } from "./MarkdownDisplay.js";
 
 // Helper function to normalize text - copied from old codebase
@@ -28,12 +29,7 @@ type AssistantLine = {
  * - Support for markdown rendering (when MarkdownDisplay is available)
  */
 export const AssistantMessage = memo(({ line }: { line: AssistantLine }) => {
-  const columns =
-    typeof process !== "undefined" &&
-    process.stdout &&
-    "columns" in process.stdout
-      ? ((process.stdout as { columns?: number }).columns ?? 80)
-      : 80;
+  const columns = useTerminalWidth();
   const contentWidth = Math.max(0, columns - 2);
 
   const normalizedText = normalize(line.text);

src/cli/components/CommandMessage.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { memo, useEffect, useState } from "react";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { colors } from "./colors.js";
 import { MarkdownDisplay } from "./MarkdownDisplay.js";
 
@@ -34,13 +35,7 @@ const BlinkDot: React.FC<{ color?: string }> = ({ color = "yellow" }) => {
  * - Consistent symbols (● for command, ⎿ for result)
  */
 export const CommandMessage = memo(({ line }: { line: CommandLine }) => {
-  const columns =
-    typeof process !== "undefined" &&
-    process.stdout &&
-    "columns" in process.stdout
-      ? ((process.stdout as { columns?: number }).columns ?? 80)
-      : 80;
-
+  const columns = useTerminalWidth();
   const rightWidth = Math.max(0, columns - 2); // gutter is 2 cols
 
   // Determine dot state based on phase and success

src/cli/components/InputRich.tsx

@@ -5,6 +5,7 @@ import type { ComponentType } from "react";
 import { useEffect, useRef, useState } from "react";
 import type { PermissionMode } from "../../permissions/mode";
 import { permissionMode } from "../../permissions/mode";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { CommandPreview } from "./CommandPreview";
 import { colors } from "./colors";
 import { PasteAwareTextInput } from "./PasteAwareTextInput";
@@ -55,13 +56,8 @@ export function Input({
   // Shimmer animation state
   const [shimmerOffset, setShimmerOffset] = useState(-3);
 
-  // Get terminal width for proper column sizing
-  const columns =
-    typeof process !== "undefined" &&
-    process.stdout &&
-    "columns" in process.stdout
-      ? ((process.stdout as { columns?: number }).columns ?? 80)
-      : 80;
+  // Terminal width (reactive to window resizing)
+  const columns = useTerminalWidth();
   const contentWidth = Math.max(0, columns - 2);
 
   // Handle escape key for double-escape-to-clear

src/cli/components/ReasoningMessageRich.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { memo } from "react";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { MarkdownDisplay } from "./MarkdownDisplay.js";
 
 // Helper function to normalize text - copied from old codebase
@@ -28,12 +29,7 @@ type ReasoningLine = {
  * - Proper text normalization
  */
 export const ReasoningMessage = memo(({ line }: { line: ReasoningLine }) => {
-  const columns =
-    typeof process !== "undefined" &&
-    process.stdout &&
-    "columns" in process.stdout
-      ? ((process.stdout as { columns?: number }).columns ?? 80)
-      : 80;
+  const columns = useTerminalWidth();
   const contentWidth = Math.max(0, columns - 2);
 
   const normalizedText = normalize(line.text);

src/cli/components/ToolCallMessageRich.tsx

@@ -2,6 +2,7 @@ import { Box, Text } from "ink";
 import { memo, useEffect, useState } from "react";
 import { clipToolReturn } from "../../tools/manager.js";
 import { formatArgsDisplay } from "../helpers/formatArgsDisplay.js";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { colors } from "./colors.js";
 import { MarkdownDisplay } from "./MarkdownDisplay.js";
 import { TodoRenderer } from "./TodoRenderer.js";
@@ -41,12 +42,7 @@ const BlinkDot: React.FC<{ color?: string }> = ({
  * - Result shown with ⎿ prefix underneath
  */
 export const ToolCallMessage = memo(({ line }: { line: ToolCallLine }) => {
-  const columns =
-    typeof process !== "undefined" &&
-    process.stdout &&
-    "columns" in process.stdout
-      ? ((process.stdout as { columns?: number }).columns ?? 80)
-      : 80;
+  const columns = useTerminalWidth();
 
   // Parse and format the tool call
   const rawName = line.name ?? "?";

src/cli/components/UserMessageRich.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { memo } from "react";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 import { MarkdownDisplay } from "./MarkdownDisplay.js";
 
 type UserLine = {
@@ -18,12 +19,7 @@ type UserLine = {
  * - Full markdown rendering support
  */
 export const UserMessage = memo(({ line }: { line: UserLine }) => {
-  const columns =
-    typeof process !== "undefined" &&
-    process.stdout &&
-    "columns" in process.stdout
-      ? ((process.stdout as { columns?: number }).columns ?? 80)
-      : 80;
+  const columns = useTerminalWidth();
   const contentWidth = Math.max(0, columns - 2);
 
   return (