diff --git a/ui/text/src/app.tsx b/ui/text/src/app.tsx
index 135ccae9c5af..3125d097b630 100644
--- a/ui/text/src/app.tsx
+++ b/ui/text/src/app.tsx
@@ -15,16 +15,15 @@ interface PendingPermission {
   resolve: (response: RequestPermissionResponse) => void;
 }
 
-const CRANBERRY_BRIGHT = "#C0354A";
-const HARBOR_NAVY = "#1B2A4A";
-const DEEP_SLATE = "#3A4F6F";
-const SLATE = "#6B7F99";
-const LIGHT_SLATE = "#8FA4BD";
-const AUTUMN_GOLD = "#C4883A";
-const OCEAN_TEAL = "#3A7D7B";
-const CEDAR_BROWN = "#6B5344";
-const FOG_WHITE = "#E8E4DF";
-const PARCHMENT = "#D4CFC8";
+const CRANBERRY = "#C0354A";
+const TEAL = "#3A7D7B";
+const GOLD = "#C4883A";
+const CEDAR = "#6B5344";
+
+const TEXT_PRIMARY = "#E8E4DF";
+const TEXT_SECONDARY = "#8FA4BD";
+const TEXT_DIM = "#5A6D84";
+const RULE_COLOR = "#2E3D54";
 
 const GOOSE_FRAMES = [
   [
@@ -65,8 +64,6 @@ const GOOSE_FRAMES = [
   ],
 ];
 
-const TITLE_TEXT = "goose";
-
 const GREETING_MESSAGES = [
   "What would you like to work on?",
   "Ready to build something amazing?",
@@ -107,120 +104,120 @@ const PERMISSION_KEYS: Record<string, string> = {
   reject_always: "N",
 };
 
-interface TextMessage {
-  kind: "text";
-  role: "user" | "agent";
-  text: string;
+interface Turn {
+  userText: string;
+  toolCalls: string[];
+  agentText: string;
 }
 
-interface ToolCallMessage {
-  kind: "tool_call";
-  title: string;
-}
+// ─── Layout constants ───────────────────────────────────────────────────────
+//
+// Every element indents by a multiple of INDENT (3 spaces). This keeps the
+// left edge of user prompts, agent prose, and tool-call badges on a
+// predictable grid so the eye can scan vertically without friction.
+//
+//   col 0   rule / header
+//   col 3   user prompt caret + text, input caret + text
+//   col 5   agent prose, tool badges, loading spinner, permission dialog
 
-type Message = TextMessage | ToolCallMessage;
+const INDENT = 3;
+const CONTENT_INDENT = 5;
+const MAX_PROSE_WIDTH = 76;
 
-function HRule({ width, color }: { width: number; color?: string }) {
+function Rule({ width }: { width: number }) {
   return (
-    <Box>
-      <Text color={color ?? DEEP_SLATE} dimColor>
-        {"─".repeat(Math.max(width, 1))}
-      </Text>
-    </Box>
+    <Text color={RULE_COLOR}>{"─".repeat(Math.max(width, 1))}</Text>
   );
 }
 
-function HeaderBar({
+function Spinner({ idx }: { idx: number }) {
+  return (
+    <Text color={CRANBERRY}>
+      {SPINNER_FRAMES[idx % SPINNER_FRAMES.length]}
+    </Text>
+  );
+}
+
+function Header({
   width,
   status,
   loading,
   spinIdx,
   hasPendingPermission,
+  turnInfo,
 }: {
   width: number;
   status: string;
   loading: boolean;
   spinIdx: number;
   hasPendingPermission: boolean;
+  turnInfo?: { current: number; total: number };
 }) {
-  const statusColor =
-    status === "ready"
-      ? OCEAN_TEAL
-      : status.startsWith("error") || status.startsWith("failed")
-        ? CRANBERRY_BRIGHT
-        : SLATE;
-
-  const leftContent = ` ${TITLE_TEXT} `;
-  const spinner =
-    loading && !hasPendingPermission
-      ? ` ${SPINNER_FRAMES[spinIdx % SPINNER_FRAMES.length]} `
-      : "";
+  const isError =
+    status.startsWith("error") || status.startsWith("failed");
+  const statusColor = status === "ready" ? TEAL : isError ? CRANBERRY : TEXT_DIM;
 
   return (
     <Box flexDirection="column" width={width}>
       <Box justifyContent="space-between" width={width}>
         <Box>
-          <Text color={FOG_WHITE} bold>
-            {leftContent}
+          <Text color={TEXT_PRIMARY} bold>
+            goose
           </Text>
-          <Text color={DEEP_SLATE}>│</Text>
-          <Text color={statusColor}> {status}</Text>
-          {spinner && <Text color={CRANBERRY_BRIGHT}>{spinner}</Text>}
+          <Text color={RULE_COLOR}> · </Text>
+          <Text color={statusColor}>{status}</Text>
+          {loading && !hasPendingPermission && (
+            <Text> <Spinner idx={spinIdx} /></Text>
+          )}
         </Box>
         <Box>
-          <Text color={DEEP_SLATE} dimColor>
-            ctrl+c to exit{" "}
-          </Text>
+          {turnInfo && turnInfo.total > 1 && (
+            <Text color={TEXT_DIM}>
+              {turnInfo.current}/{turnInfo.total}
+              {"  "}
+            </Text>
+          )}
+          <Text color={TEXT_DIM}>^C exit</Text>
         </Box>
       </Box>
-      <HRule width={width} color={DEEP_SLATE} />
+      <Rule width={width} />
+    </Box>
+  );
+}
+
+function UserPrompt({ text }: { text: string }) {
+  return (
+    <Box paddingLeft={INDENT} paddingTop={1}>
+      <Text color={CRANBERRY} bold>
+        {"❯ "}
+      </Text>
+      <Text color={TEXT_PRIMARY} bold>
+        {text}
+      </Text>
     </Box>
   );
 }
 
-function ToolCallBlock({ title, width }: { title: string; width: number }) {
+function ToolBadge({ title, width }: { title: string; width: number }) {
+  const badgeWidth = Math.min(width - CONTENT_INDENT - 2, 68);
   return (
     <Box
-      marginLeft={3}
-      marginY={0}
+      marginLeft={CONTENT_INDENT}
       paddingX={1}
       borderStyle="round"
-      borderColor={CEDAR_BROWN}
+      borderColor={CEDAR}
       borderDimColor
-      width={Math.min(width - 6, 72)}
+      width={badgeWidth}
     >
-      <Text color={OCEAN_TEAL}>⚙ </Text>
-      <Text color={LIGHT_SLATE} italic>
+      <Text color={TEAL}>⚙ </Text>
+      <Text color={TEXT_SECONDARY} italic>
         {title}
       </Text>
     </Box>
   );
 }
 
-function UserMessage({ text, width }: { text: string; width: number }) {
-  return (
-    <Box flexDirection="column" width={width}>
-      <Box paddingLeft={1} paddingY={0}>
-        <Text color={CRANBERRY_BRIGHT} bold>
-          {"❯ "}
-        </Text>
-        <Text color={FOG_WHITE} bold>
-          {text}
-        </Text>
-      </Box>
-    </Box>
-  );
-}
-
-function AgentMessage({ text, width }: { text: string; width: number }) {
-  return (
-    <Box paddingLeft={3} paddingRight={2} width={width}>
-      <Text color={PARCHMENT}>{text}</Text>
-    </Box>
-  );
-}
-
-function PermissionPrompt({
+function PermissionDialog({
   toolTitle,
   options,
   selectedIdx,
@@ -231,32 +228,38 @@ function PermissionPrompt({
   selectedIdx: number;
   width: number;
 }) {
+  const dialogWidth = Math.min(width - CONTENT_INDENT - 2, 58);
   return (
     <Box
       flexDirection="column"
-      marginLeft={3}
-      marginY={0}
+      marginLeft={CONTENT_INDENT}
+      marginTop={1}
       paddingX={2}
       paddingY={1}
       borderStyle="round"
-      borderColor={AUTUMN_GOLD}
-      width={Math.min(width - 6, 64)}
+      borderColor={GOLD}
+      width={dialogWidth}
     >
-      <Text color={AUTUMN_GOLD} bold>
+      <Text color={GOLD} bold>
         🔒 Permission required
       </Text>
-      <Text color={FOG_WHITE}>{toolTitle}</Text>
+      <Box marginTop={1}>
+        <Text color={TEXT_PRIMARY}>{toolTitle}</Text>
+      </Box>
       <Box marginTop={1} flexDirection="column">
         {options.map((opt, i) => {
           const key = PERMISSION_KEYS[opt.kind] ?? String(i + 1);
           const label = PERMISSION_LABELS[opt.kind] ?? opt.name;
-          const selected = i === selectedIdx;
+          const active = i === selectedIdx;
           return (
             <Box key={opt.optionId}>
-              <Text color={selected ? AUTUMN_GOLD : DEEP_SLATE}>
-                {selected ? " ▸ " : "   "}
+              <Text color={active ? GOLD : RULE_COLOR}>
+                {active ? " ▸ " : "   "}
               </Text>
-              <Text color={selected ? FOG_WHITE : LIGHT_SLATE} bold={selected}>
+              <Text
+                color={active ? TEXT_PRIMARY : TEXT_SECONDARY}
+                bold={active}
+              >
                 [{key}] {label}
               </Text>
             </Box>
@@ -264,14 +267,199 @@ function PermissionPrompt({
         })}
       </Box>
       <Box marginTop={1}>
-        <Text color={SLATE} dimColor>
-          ↑↓ select · enter confirm · esc cancel
-        </Text>
+        <Text color={TEXT_DIM}>↑↓ select · enter confirm · esc cancel</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function QueuedMessage({ text }: { text: string }) {
+  return (
+    <Box paddingLeft={INDENT}>
+      <Text color={TEXT_DIM}>❯ </Text>
+      <Text color={TEXT_DIM}>{text}</Text>
+      <Text color={GOLD} dimColor>
+        {" "}
+        (queued)
+      </Text>
+    </Box>
+  );
+}
+
+function inputBarHeight(input: string, width: number, queued: boolean): number {
+  // Inner text width: width minus border (2), paddingX (2), prompt "❯ " (2)
+  const textWidth = Math.max(width - 2 - 2 - 2, 1);
+  // +1 for the trailing cursor character
+  const contentLen = input.length + 1;
+  const wrappedLines = Math.max(Math.ceil(contentLen / textWidth), 1);
+  const queuedLine = queued ? 1 : 0;
+  return 2 + wrappedLines + queuedLine + 1;
+}
+
+function InputBar({
+  width,
+  input,
+  onChange,
+  onSubmit,
+  queued,
+  scrollHint,
+}: {
+  width: number;
+  input: string;
+  onChange: (v: string) => void;
+  onSubmit: (v: string) => void;
+  queued: boolean;
+  scrollHint: boolean;
+}) {
+  return (
+    <Box flexDirection="column" width={width} marginBottom={1}>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={RULE_COLOR}
+        paddingX={1}
+        width={width}
+      >
+        <Box justifyContent="space-between">
+          <Box flexGrow={1}>
+            <Text color={CRANBERRY} bold>
+              {"❯ "}
+            </Text>
+            <TextInput value={input} onChange={onChange} onSubmit={onSubmit} />
+          </Box>
+          {scrollHint && (
+            <Text color={TEXT_DIM}>shift+↑↓ history</Text>
+          )}
+        </Box>
+        {queued && (
+          <Box>
+            <Text color={GOLD} dimColor italic>
+              message queued — will send when goose finishes
+            </Text>
+          </Box>
+        )}
       </Box>
     </Box>
   );
 }
 
+function wrapText(text: string, width: number): string[] {
+  if (width <= 0) return [text];
+  const result: string[] = [];
+  for (const rawLine of text.split("\n")) {
+    if (rawLine.length === 0) {
+      result.push("");
+      continue;
+    }
+    let remaining = rawLine;
+    while (remaining.length > width) {
+      let breakAt = remaining.lastIndexOf(" ", width);
+      if (breakAt <= 0) breakAt = width;
+      result.push(remaining.slice(0, breakAt));
+      remaining = remaining.slice(breakAt).replace(/^ /, "");
+    }
+    result.push(remaining);
+  }
+  return result;
+}
+
+function TurnResponseBody({
+  turn,
+  width,
+  height,
+  scrollOffset,
+  loading,
+  status,
+  spinIdx,
+  pendingPermission,
+  permissionIdx,
+}: {
+  turn: Turn;
+  width: number;
+  height: number;
+  scrollOffset: number;
+  loading: boolean;
+  status: string;
+  spinIdx: number;
+  pendingPermission: PendingPermission | null;
+  permissionIdx: number;
+}) {
+  const allLines: React.ReactNode[] = [];
+  const proseWidth = Math.min(width - CONTENT_INDENT - 1, MAX_PROSE_WIDTH);
+
+  // blank line between user prompt and response content
+  allLines.push(<Box key="gap-top" height={1} />);
+
+  for (const tc of turn.toolCalls) {
+    allLines.push(
+      <ToolBadge key={`tc-${allLines.length}`} title={tc} width={width} />,
+    );
+  }
+
+  if (turn.agentText) {
+    // visual break between tool calls and prose
+    if (turn.toolCalls.length > 0) {
+      allLines.push(<Box key="gap-tools" height={1} />);
+    }
+    const wrapped = wrapText(turn.agentText, proseWidth);
+    for (const line of wrapped) {
+      allLines.push(
+        <Box key={`al-${allLines.length}`} paddingLeft={CONTENT_INDENT}>
+          <Text color={TEXT_PRIMARY}>{line}</Text>
+        </Box>,
+      );
+    }
+  }
+
+  if (loading && !pendingPermission) {
+    allLines.push(
+      <Box key={`load-${allLines.length}`} paddingLeft={CONTENT_INDENT} marginTop={turn.agentText ? 0 : 0}>
+        <Spinner idx={spinIdx} />
+        <Text color={TEXT_DIM} italic>
+          {" "}
+          {status}
+        </Text>
+      </Box>,
+    );
+  }
+
+  if (pendingPermission) {
+    allLines.push(
+      <PermissionDialog
+        key={`perm-${allLines.length}`}
+        toolTitle={pendingPermission.toolTitle}
+        options={pendingPermission.options}
+        selectedIdx={permissionIdx}
+        width={width}
+      />,
+    );
+  }
+
+  const totalLines = allLines.length;
+  const visibleCount = Math.max(height, 1);
+  const maxOffset = Math.max(totalLines - visibleCount, 0);
+  const offset = Math.min(Math.max(scrollOffset, 0), maxOffset);
+  const visible = allLines.slice(offset, offset + visibleCount);
+  const hasAbove = offset > 0;
+  const hasBelow = offset + visibleCount < totalLines;
+
+  return (
+    <Box flexDirection="column" height={height} overflowY="hidden">
+      {hasAbove && (
+        <Box justifyContent="center" width={width}>
+          <Text color={TEXT_DIM}>▲ more</Text>
+        </Box>
+      )}
+      {visible}
+      {hasBelow && !hasAbove && visible.length > 1 && (
+        <Box justifyContent="center" width={width}>
+          <Text color={TEXT_DIM}>▼ more</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
 function SplashScreen({
   animFrame,
   width,
@@ -296,14 +484,10 @@ function SplashScreen({
   onInputSubmit: (v: string) => void;
 }) {
   const frame = GOOSE_FRAMES[animFrame % GOOSE_FRAMES.length]!;
-  const statusColor =
-    status === "ready"
-      ? OCEAN_TEAL
-      : status.startsWith("error") || status.startsWith("failed")
-        ? CRANBERRY_BRIGHT
-        : SLATE;
-
-  const inputWidth = Math.min(60, width - 8);
+  const isError =
+    status.startsWith("error") || status.startsWith("failed");
+  const statusColor = status === "ready" ? TEAL : isError ? CRANBERRY : TEXT_DIM;
+  const inputWidth = Math.min(56, width - 8);
 
   return (
     <Box
@@ -313,29 +497,31 @@ function SplashScreen({
       width={width}
       height={height}
     >
+      {/* Goose art */}
       <Box flexDirection="column" alignItems="center">
         {frame.map((line, i) => (
-          <Text key={i} color={FOG_WHITE}>
+          <Text key={i} color={TEXT_PRIMARY}>
             {line}
           </Text>
         ))}
       </Box>
+
+      {/* Title + subtitle */}
       <Box marginTop={1}>
-        <Text color={FOG_WHITE} bold>
-          {TITLE_TEXT}
+        <Text color={TEXT_PRIMARY} bold>
+          goose
         </Text>
       </Box>
-      <Box marginTop={0}>
-        <Text color={SLATE}>your on-machine AI agent</Text>
-      </Box>
+      <Text color={TEXT_DIM}>your on-machine AI agent</Text>
 
+      {/* Input or status */}
       {showInput ? (
-        <>
-          <Box marginTop={2}>
-            <HRule width={inputWidth} color={DEEP_SLATE} />
+        <Box flexDirection="column" alignItems="center" marginTop={2}>
+          <Box width={inputWidth}>
+            <Rule width={inputWidth} />
           </Box>
-          <Box marginTop={0}>
-            <Text color={CRANBERRY_BRIGHT} bold>
+          <Box>
+            <Text color={CRANBERRY} bold>
               {"❯ "}
             </Text>
             <TextInput
@@ -346,72 +532,20 @@ function SplashScreen({
               showCursor
             />
           </Box>
-          <Box marginTop={0}>
-            <HRule width={inputWidth} color={DEEP_SLATE} />
+          <Box width={inputWidth}>
+            <Rule width={inputWidth} />
           </Box>
-        </>
+        </Box>
       ) : (
-        <>
-          <Box marginTop={2}>
-            <HRule width={Math.min(40, width - 4)} color={DEEP_SLATE} />
-          </Box>
-          <Box marginTop={1}>
-            {loading && (
-              <Text color={CRANBERRY_BRIGHT}>
-                {SPINNER_FRAMES[spinIdx % SPINNER_FRAMES.length]}{" "}
-              </Text>
-            )}
-            <Text color={statusColor}>{status}</Text>
-          </Box>
-        </>
+        <Box marginTop={2} gap={1}>
+          {loading && <Spinner idx={spinIdx} />}
+          <Text color={statusColor}>{status}</Text>
+        </Box>
       )}
     </Box>
   );
 }
 
-function InputBar({
-  width,
-  input,
-  onChange,
-  onSubmit,
-}: {
-  width: number;
-  input: string;
-  onChange: (v: string) => void;
-  onSubmit: (v: string) => void;
-}) {
-  return (
-    <Box flexDirection="column" width={width}>
-      <HRule width={width} color={DEEP_SLATE} />
-      <Box paddingLeft={1} paddingY={0}>
-        <Text color={CRANBERRY_BRIGHT} bold>
-          {"❯ "}
-        </Text>
-        <TextInput value={input} onChange={onChange} onSubmit={onSubmit} />
-      </Box>
-    </Box>
-  );
-}
-
-function LoadingIndicator({
-  status,
-  spinIdx,
-}: {
-  status: string;
-  spinIdx: number;
-}) {
-  return (
-    <Box paddingLeft={3} marginTop={0}>
-      <Text color={CRANBERRY_BRIGHT}>
-        {SPINNER_FRAMES[spinIdx % SPINNER_FRAMES.length]}{" "}
-      </Text>
-      <Text color={SLATE} italic>
-        {status}
-      </Text>
-    </Box>
-  );
-}
-
 export default function App({
   serverUrl,
   initialPrompt,
@@ -424,20 +558,27 @@ export default function App({
   const termWidth = stdout?.columns ?? 80;
   const termHeight = stdout?.rows ?? 24;
 
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [turns, setTurns] = useState<Turn[]>([]);
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(true);
-  const [status, setStatus] = useState("connecting...");
+  const [status, setStatus] = useState("connecting…");
   const [spinIdx, setSpinIdx] = useState(0);
   const [gooseFrame, setGooseFrame] = useState(0);
   const [bannerVisible, setBannerVisible] = useState(true);
   const [pendingPermission, setPendingPermission] =
     useState<PendingPermission | null>(null);
   const [permissionIdx, setPermissionIdx] = useState(0);
+  const [queuedMessages, setQueuedMessages] = useState<string[]>([]);
+
+  const [viewTurnIdx, setViewTurnIdx] = useState(-1);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
   const clientRef = useRef<GooseClient | null>(null);
   const sessionIdRef = useRef<string | null>(null);
   const streamBuf = useRef("");
   const sentInitialPrompt = useRef(false);
+  const queueRef = useRef<string[]>([]);
+  const isProcessingRef = useRef(false);
 
   useEffect(() => {
     const t = setInterval(() => {
@@ -448,30 +589,39 @@ export default function App({
   }, []);
 
   useEffect(() => {
-    if (messages.length > 0) {
-      setBannerVisible(false);
-    }
-  }, [messages]);
+    if (turns.length > 0) setBannerVisible(false);
+  }, [turns]);
+
+  const turnsLen = turns.length;
+  useEffect(() => {
+    if (viewTurnIdx === -1) setScrollOffset(0);
+  }, [turnsLen, viewTurnIdx]);
 
   const appendAgent = useCallback((text: string) => {
-    setMessages((prev) => {
-      const last = prev[prev.length - 1];
-      if (last && last.kind === "text" && last.role === "agent") {
-        return [
-          ...prev.slice(0, -1),
-          {
-            kind: "text" as const,
-            role: "agent" as const,
-            text: last.text + text,
-          },
-        ];
-      }
-      return [...prev, { kind: "text" as const, role: "agent" as const, text }];
+    setTurns((prev) => {
+      if (prev.length === 0) return prev;
+      const last = { ...prev[prev.length - 1]! };
+      last.agentText = last.agentText + text;
+      return [...prev.slice(0, -1), last];
     });
   }, []);
 
   const appendToolCall = useCallback((title: string) => {
-    setMessages((prev) => [...prev, { kind: "tool_call" as const, title }]);
+    setTurns((prev) => {
+      if (prev.length === 0) return prev;
+      const last = { ...prev[prev.length - 1]! };
+      last.toolCalls = [...last.toolCalls, title];
+      return [...prev.slice(0, -1), last];
+    });
+  }, []);
+
+  const addUserTurn = useCallback((text: string) => {
+    setTurns((prev) => [
+      ...prev,
+      { userText: text, toolCalls: [], agentText: "" },
+    ]);
+    setViewTurnIdx(-1);
+    setScrollOffset(0);
   }, []);
 
   const resolvePermission = useCallback(
@@ -491,18 +641,56 @@ export default function App({
     [pendingPermission],
   );
 
+  const processQueue = useCallback(async () => {
+    if (isProcessingRef.current) return;
+    isProcessingRef.current = true;
+
+    while (queueRef.current.length > 0) {
+      const next = queueRef.current.shift()!;
+      setQueuedMessages([...queueRef.current]);
+
+      const client = clientRef.current;
+      const sid = sessionIdRef.current;
+      if (!client || !sid) break;
+
+      addUserTurn(next);
+      setLoading(true);
+      setStatus("thinking…");
+      streamBuf.current = "";
+
+      try {
+        const result = await client.prompt({
+          sessionId: sid,
+          prompt: [{ type: "text", text: next }],
+        });
+
+        if (streamBuf.current) appendAgent("");
+
+        setStatus(
+          result.stopReason === "end_turn"
+            ? "ready"
+            : `stopped: ${result.stopReason}`,
+        );
+      } catch (e: unknown) {
+        const errMsg = e instanceof Error ? e.message : String(e);
+        setStatus(`error: ${errMsg}`);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    isProcessingRef.current = false;
+  }, [appendAgent, addUserTurn]);
+
   const sendPrompt = useCallback(
     async (text: string) => {
       const client = clientRef.current;
       const sid = sessionIdRef.current;
       if (!client || !sid) return;
 
-      setMessages((prev) => [
-        ...prev,
-        { kind: "text" as const, role: "user" as const, text },
-      ]);
+      addUserTurn(text);
       setLoading(true);
-      setStatus("thinking...");
+      setStatus("thinking…");
       streamBuf.current = "";
 
       try {
@@ -511,9 +699,7 @@ export default function App({
           prompt: [{ type: "text", text }],
         });
 
-        if (streamBuf.current) {
-          appendAgent("");
-        }
+        if (streamBuf.current) appendAgent("");
 
         setStatus(
           result.stopReason === "end_turn"
@@ -525,9 +711,10 @@ export default function App({
         setStatus(`error: ${errMsg}`);
       } finally {
         setLoading(false);
+        if (queueRef.current.length > 0) processQueue();
       }
     },
-    [appendAgent],
+    [appendAgent, addUserTurn, processQueue],
   );
 
   useEffect(() => {
@@ -535,7 +722,7 @@ export default function App({
 
     (async () => {
       try {
-        setStatus("initializing...");
+        setStatus("initializing…");
         const stream = createHttpStream(serverUrl);
 
         const client = new GooseClient(
@@ -573,7 +760,7 @@ export default function App({
         if (cancelled) return;
         clientRef.current = client;
 
-        setStatus("handshaking...");
+        setStatus("handshaking…");
         await client.initialize({
           protocolVersion: 0,
           clientInfo: { name: "goose-text", version: "0.1.0" },
@@ -582,7 +769,7 @@ export default function App({
 
         if (cancelled) return;
 
-        setStatus("creating session...");
+        setStatus("creating session…");
         const session = await client.newSession({
           cwd: process.cwd(),
           mcpServers: [],
@@ -596,9 +783,7 @@ export default function App({
         if (initialPrompt && !sentInitialPrompt.current) {
           sentInitialPrompt.current = true;
           await sendPrompt(initialPrompt);
-          if (initialPrompt) {
-            setTimeout(() => exit(), 100);
-          }
+          if (initialPrompt) setTimeout(() => exit(), 100);
         }
       } catch (e: unknown) {
         if (cancelled) return;
@@ -616,9 +801,17 @@ export default function App({
   const handleSubmit = useCallback(
     (value: string) => {
       const trimmed = value.trim();
-      if (!trimmed || loading) return;
+      if (!trimmed) return;
       setInput("");
-      sendPrompt(trimmed);
+      setViewTurnIdx(-1);
+      setScrollOffset(0);
+
+      if (loading || isProcessingRef.current) {
+        queueRef.current.push(trimmed);
+        setQueuedMessages([...queueRef.current]);
+      } else {
+        sendPrompt(trimmed);
+      }
     },
     [loading, sendPrompt],
   );
@@ -632,6 +825,7 @@ export default function App({
       exit();
     }
 
+    // Permission navigation
     if (pendingPermission) {
       const opts = pendingPermission.options;
 
@@ -645,9 +839,7 @@ export default function App({
       }
       if (key.return) {
         const selected = opts[permissionIdx];
-        if (selected) {
-          resolvePermission({ optionId: selected.optionId });
-        }
+        if (selected) resolvePermission({ optionId: selected.optionId });
         return;
       }
 
@@ -660,28 +852,72 @@ export default function App({
       const targetKind = keyMap[ch];
       if (targetKind) {
         const match = opts.find((o) => o.kind === targetKind);
-        if (match) {
-          resolvePermission({ optionId: match.optionId });
-          return;
-        }
+        if (match) resolvePermission({ optionId: match.optionId });
       }
+      return;
+    }
+
+    // Turn navigation: shift+arrow
+    if (key.upArrow && key.shift) {
+      setTurns((currentTurns) => {
+        if (currentTurns.length <= 1) return currentTurns;
+        setViewTurnIdx((prev) => {
+          const effectiveIdx = prev === -1 ? currentTurns.length - 1 : prev;
+          setScrollOffset(0);
+          return Math.max(effectiveIdx - 1, 0);
+        });
+        return currentTurns;
+      });
+      return;
+    }
+    if (key.downArrow && key.shift) {
+      setTurns((currentTurns) => {
+        if (currentTurns.length <= 1) return currentTurns;
+        setViewTurnIdx((prev) => {
+          if (prev === -1) return -1;
+          const next = prev + 1;
+          setScrollOffset(0);
+          return next >= currentTurns.length ? -1 : next;
+        });
+        return currentTurns;
+      });
+      return;
+    }
+
+    // Scroll within turn
+    if (key.pageUp || (key.upArrow && key.meta)) {
+      setScrollOffset((prev) => Math.max(prev - 5, 0));
+      return;
+    }
+    if (key.pageDown || (key.downArrow && key.meta)) {
+      setScrollOffset((prev) => prev + 5);
+      return;
     }
   });
 
-  const PAD_X = 2;
-  const PAD_BOTTOM = 1;
-  const innerWidth = Math.max(termWidth - PAD_X * 2, 20);
-  const headerHeight = 2;
-  const inputBarHeight = initialPrompt ? 0 : 2;
-  const bodyHeight = Math.max(termHeight - headerHeight - inputBarHeight - PAD_BOTTOM, 3);
+  // ── Layout math ───────────────────────────────────────────────────────
+  //
+  // The vertical budget is:
+  //   header (2 lines: title row + rule)
+  //   user prompt (2 lines: blank line above + prompt text)
+  //   body (flex: remaining space)
+  //   input bar (dynamic: border top/bottom + wrapped content lines + margin bottom) — absent in pipe mode
+
+  const GUTTER = 2;
+  const innerWidth = Math.max(termWidth - GUTTER * 2, 20);
+  const headerLines = 2;
+  const userPromptLines = 2;
+  const inputLines = initialPrompt
+    ? 0
+    : inputBarHeight(input, innerWidth, queuedMessages.length > 0);
+  const bodyHeight = Math.max(
+    termHeight - headerLines - userPromptLines - inputLines - 1,
+    3,
+  );
 
   if (bannerVisible) {
     return (
-      <Box
-        flexDirection="column"
-        width={termWidth}
-        height={termHeight}
-      >
+      <Box flexDirection="column" width={termWidth} height={termHeight}>
         <SplashScreen
           animFrame={gooseFrame}
           width={termWidth}
@@ -698,65 +934,89 @@ export default function App({
     );
   }
 
+  const effectiveTurnIdx =
+    viewTurnIdx === -1 ? turns.length - 1 : viewTurnIdx;
+  const currentTurn = turns[effectiveTurnIdx];
+  const isViewingHistory =
+    viewTurnIdx !== -1 && viewTurnIdx < turns.length - 1;
+  const isLatest = !isViewingHistory;
+
   return (
     <Box
       flexDirection="column"
       width={termWidth}
       height={termHeight}
-      paddingX={PAD_X}
-      paddingBottom={PAD_BOTTOM}
+      paddingX={GUTTER}
     >
-      <HeaderBar
+      <Header
         width={innerWidth}
         status={status}
         loading={loading}
         spinIdx={spinIdx}
         hasPendingPermission={!!pendingPermission}
+        turnInfo={
+          turns.length > 1
+            ? { current: effectiveTurnIdx + 1, total: turns.length }
+            : undefined
+        }
       />
 
-      <Box
-        flexDirection="column"
-        flexGrow={1}
-        height={bodyHeight}
-        overflowY="hidden"
-        paddingY={0}
-      >
-        {messages.map((msg, i) => {
-          if (msg.kind === "tool_call") {
-            return <ToolCallBlock key={i} title={msg.title} width={innerWidth} />;
-          }
-          if (msg.role === "user") {
-            return (
-              <React.Fragment key={i}>
-                {i > 0 && <Box height={1} />}
-                <UserMessage text={msg.text} width={innerWidth} />
-                <HRule width={innerWidth} color={HARBOR_NAVY} />
-              </React.Fragment>
-            );
-          }
-          return <AgentMessage key={i} text={msg.text} width={innerWidth} />;
-        })}
+      {currentTurn ? (
+        <>
+          <UserPrompt text={currentTurn.userText} />
 
-        {pendingPermission && (
-          <PermissionPrompt
-            toolTitle={pendingPermission.toolTitle}
-            options={pendingPermission.options}
-            selectedIdx={permissionIdx}
-            width={innerWidth}
-          />
-        )}
+          <Box flexDirection="column" flexGrow={1} height={bodyHeight}>
+            <TurnResponseBody
+              turn={currentTurn}
+              width={innerWidth}
+              height={
+                bodyHeight -
+                (isLatest && queuedMessages.length > 0
+                  ? queuedMessages.length
+                  : 0)
+              }
+              scrollOffset={scrollOffset}
+              loading={isLatest && loading}
+              status={status}
+              spinIdx={spinIdx}
+              pendingPermission={isLatest ? pendingPermission : null}
+              permissionIdx={permissionIdx}
+            />
 
-        {loading && !pendingPermission && messages.length > 0 && (
-          <LoadingIndicator status={status} spinIdx={spinIdx} />
-        )}
-      </Box>
+            {isLatest &&
+              queuedMessages.map((text, i) => (
+                <QueuedMessage key={`q-${i}`} text={text} />
+              ))}
+          </Box>
+        </>
+      ) : (
+        <Box
+          flexDirection="column"
+          flexGrow={1}
+          height={bodyHeight + userPromptLines}
+        />
+      )}
+
+      {isViewingHistory && (
+        <Box flexDirection="column" width={innerWidth}>
+          <Rule width={innerWidth} />
+          <Box justifyContent="center" width={innerWidth}>
+            <Text color={GOLD}>
+              turn {effectiveTurnIdx + 1}/{turns.length}
+            </Text>
+            <Text color={TEXT_DIM}> — shift+↓ to return</Text>
+          </Box>
+        </Box>
+      )}
 
-      {!loading && !pendingPermission && !initialPrompt && (
+      {!isViewingHistory && !pendingPermission && !initialPrompt && (
         <InputBar
           width={innerWidth}
           input={input}
           onChange={setInput}
           onSubmit={handleSubmit}
+          queued={queuedMessages.length > 0}
+          scrollHint={turns.length > 1}
         />
       )}
     </Box>