codeply-cli 0.1.0

package/lib/tui.mjs

@@ -0,0 +1,899 @@
+/**
+ * Codeply TUI — Google-brand interactive shell.
+ *
+ * Rendering model (important):
+ *   Everything that is *finished* (banner + past messages + tool activity) is
+ *   emitted through Ink's <Static>, which writes each item to stdout exactly
+ *   once and never touches it again. Only the live area — spinner, approval
+ *   prompt, command palette, composer, hints — lives in the re-rendered frame.
+ *
+ *   This is what kills the flicker/duplicate-screen bug: Ink redraws a frame by
+ *   erasing the previous one, but it can only erase lines still on screen. Once
+ *   the frame grows taller than the terminal, the erase is incomplete and the
+ *   frame gets appended instead of replaced — you see the conversation twice.
+ *   Keeping the live frame a handful of lines tall makes the redraw exact.
+ *
+ *   Rule for future edits: nothing tall goes outside <Static>.
+ *
+ *   ┌ scrollback (banner + conversation, via <Static>) ──┐
+ *   ├ live frame ────────────────────────────────────────┤
+ *   │ spinner · approval · palette · composer · hints    │
+ *   └────────────────────────────────────────────────────┘
+ */
+import React from 'react';
+import { Box, Text, Static, useInput, useApp, useStdout } from 'ink';
+import Spinner from 'ink-spinner';
+import { createRequire } from 'module';
+import path from 'path';
+import os from 'os';
+
+const require = createRequire(import.meta.url);
+const auth = require('../lib/auth.js');
+const appConfig = require('../lib/config.js');
+const VERSION = require('../package.json').version;
+import {
+  renderMarkdown, Panel, hexToAnsi, hexToAnsiBg, fillRow, SURFACE,
+  ANSI_RESET, ANSI_BOLD, ANSI_DIM,
+} from '../lib/render-md.mjs';
+import { runAgent } from '../lib/agent.mjs';
+import { TOOL_DISPLAY } from '../lib/tools.mjs';
+import TextArea, { enableModifiedEnter, isTerminalReport } from '../lib/textarea.mjs';
+
+// ─── Theme (Google brand) ───────────────────────────────────────────────────
+const G = {
+  blue: '#4285F4',
+  red: '#EA4335',
+  yellow: '#FBBC05',
+  green: '#34A853',
+};
+
+const T = {
+  accent: G.blue,
+  text: '#e8eaed',
+  secondary: '#9aa0a6',
+  dim: '#80868b',
+  muted: '#5f6368',
+  faint: '#3c4043',
+  border: '#3c4043',
+  cycle: [G.blue, G.red, G.yellow, G.green],
+};
+
+const MODES = ['Build', 'Plan', 'Ask'];
+const MODE_COLOR = { Build: G.blue, Plan: G.yellow, Ask: G.green };
+const MODE_HINT = {
+  Build: 'reads, edits and verifies files',
+  Plan: 'investigates, then writes a plan',
+  Ask: 'answers from the codebase, read-only',
+};
+
+// CODEPLY block letters — fixed per-letter widths, one Google color each.
+// C=blue O=red D=yellow E=green P=blue L=red Y=yellow
+const LOGO_SEGMENTS = [
+  [
+    { t: ' ██████╗ ', c: G.blue }, { t: ' ██████╗ ', c: G.red },
+    { t: '██████╗  ', c: G.yellow }, { t: '███████╗ ', c: G.green },
+    { t: '██████╗  ', c: G.blue }, { t: '██╗      ', c: G.red },
+    { t: '██╗   ██╗', c: G.yellow },
+  ],
+  [
+    { t: '██╔════╝ ', c: G.blue }, { t: '██╔═══██╗', c: G.red },
+    { t: '██╔══██╗ ', c: G.yellow }, { t: '██╔════╝ ', c: G.green },
+    { t: '██╔══██╗ ', c: G.blue }, { t: '██║      ', c: G.red },
+    { t: '╚██╗ ██╔╝', c: G.yellow },
+  ],
+  [
+    { t: '██║      ', c: G.blue }, { t: '██║   ██║', c: G.red },
+    { t: '██║  ██║ ', c: G.yellow }, { t: '█████╗   ', c: G.green },
+    { t: '██████╔╝ ', c: G.blue }, { t: '██║      ', c: G.red },
+    { t: ' ╚████╔╝ ', c: G.yellow },
+  ],
+  [
+    { t: '██║      ', c: G.blue }, { t: '██║   ██║', c: G.red },
+    { t: '██║  ██║ ', c: G.yellow }, { t: '██╔══╝   ', c: G.green },
+    { t: '██╔═══╝  ', c: G.blue }, { t: '██║      ', c: G.red },
+    { t: '  ╚██╔╝  ', c: G.yellow },
+  ],
+  [
+    { t: '╚██████╗ ', c: G.blue }, { t: '╚██████╔╝', c: G.red },
+    { t: '██████╔╝ ', c: G.yellow }, { t: '███████╗ ', c: G.green },
+    { t: '██║      ', c: G.blue }, { t: '███████╗ ', c: G.red },
+    { t: '   ██║   ', c: G.yellow },
+  ],
+  [
+    { t: ' ╚═════╝ ', c: G.blue }, { t: ' ╚═════╝ ', c: G.red },
+    { t: '╚═════╝  ', c: G.yellow }, { t: '╚══════╝ ', c: G.green },
+    { t: '╚═╝      ', c: G.blue }, { t: '╚══════╝ ', c: G.red },
+    { t: '   ╚═╝   ', c: G.yellow },
+  ],
+];
+
+// Pre-flattened to one ANSI string per row: 6 <Text> nodes instead of 42.
+const LOGO_ROWS = LOGO_SEGMENTS.map((row) =>
+  row.map((s) => hexToAnsi(s.c) + ANSI_BOLD + s.t + ANSI_RESET).join('')
+);
+const LOGO_WIDTH = LOGO_SEGMENTS[0].reduce((n, s) => n + s.t.length, 0);
+
+const WORDMARK = hexToAnsi(G.yellow) + ANSI_BOLD + 'codeply' + ANSI_RESET;
+
+const COMMANDS = [
+  { name: '/login', description: 'Sign in with your Codeply account' },
+  { name: '/logout', description: 'Sign out of current session' },
+  { name: '/whoami', description: 'Show currently signed-in account' },
+  { name: '/help', description: 'Show available commands' },
+  { name: '/clear', description: 'Clear conversation and context' },
+  { name: '/mode', description: 'Cycle Build → Plan → Ask' },
+  { name: '/keys', description: 'Show what your terminal sends for a key' },
+  { name: '/quit', description: 'Exit Codeply' },
+];
+
+const TIPS = [
+  ['ctrl+j', 'inserts a new line — or end a line with \\ and press enter'],
+  ['Press tab', 'to cycle Build → Plan → Ask without leaving the composer'],
+  ['Press esc', 'while it is working to interrupt the run'],
+  ['Ask it to fix a failing test', 'it can run commands and iterate on the output'],
+  ['Run /keys', 'to see exactly what your terminal sends for a key'],
+];
+
+function homePath(cwd) {
+  const home = os.homedir();
+  if (cwd.startsWith(home)) return '~' + cwd.slice(home.length);
+  return cwd;
+}
+
+/** Shorten a path from the left so it never blows out the footer. */
+function fitPath(p, max) {
+  if (p.length <= max) return p;
+  return '…' + p.slice(p.length - max + 1);
+}
+
+// ─── Decorative starfield ───────────────────────────────────────────────────
+
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function () {
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+const SPARKS = ['✦', '✧', '·', '✦'];
+const SPARK_COLORS = [T.faint, T.faint, T.muted, '#4a3b1a'];
+
+/** One row of scattered sparkles as a single ANSI string. */
+function sparkleRow(width, count, rnd) {
+  const cells = new Array(width).fill(null);
+  for (let i = 0; i < count; i++) {
+    const col = Math.floor(rnd() * width);
+    if (cells[col]) continue;
+    cells[col] = {
+      ch: SPARKS[Math.floor(rnd() * SPARKS.length)],
+      c: SPARK_COLORS[Math.floor(rnd() * SPARK_COLORS.length)],
+    };
+  }
+  let out = '';
+  for (const cell of cells) {
+    out += cell ? hexToAnsi(cell.c) + cell.ch + ANSI_RESET : ' ';
+  }
+  return out.replace(/\s+$/, '');
+}
+
+// ─── Home screen ────────────────────────────────────────────────────────────
+
+const LOGO_BLOCK_HEIGHT = LOGO_ROWS.length + 3; // logo + gap + two tagline lines
+const COMPOSER_BLOCK_HEIGHT = 7;                // gap + input + meta + gap + hints + tip
+
+/**
+ * The full-viewport splash.
+ *
+ * Deliberately sized to the terminal so the app owns the screen instead of
+ * looking like output that happened to land in a shell. This is the ONE place a
+ * tall live frame is allowed: it only renders while the scrollback is empty, so
+ * the frame is still the entire output and Ink's erase stays exact. The moment
+ * a message exists we drop to the compact layout — see the note at the top of
+ * this file for why that matters.
+ */
+/**
+ * `n` rows of starfield.
+ *
+ * Blank rows carry a single space rather than an empty string: Ink measures
+ * '' as zero height, so empty sky silently collapses and the screen never
+ * fills.
+ */
+function SkyField({ cols, n, seed, keyPrefix }) {
+  const rnd = mulberry32(seed);
+  return Array.from({ length: Math.max(0, n) }, (_, i) =>
+    React.createElement(
+      Text,
+      { key: `${keyPrefix}-${i}` },
+      rnd() > 0.55 ? sparkleRow(cols, rnd() > 0.75 ? 2 : 1, rnd) : ' '
+    )
+  );
+}
+
+function HomeScreen({ cols, skyRows }) {
+  const wide = cols >= LOGO_WIDTH + 4;
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column', width: cols, alignItems: 'center' },
+
+    ...SkyField({ cols, n: skyRows, seed: 0xc0de91, keyPrefix: 'sky-top' }),
+
+    wide
+      ? LOGO_ROWS.map((row, i) => React.createElement(Text, { key: `lg-${i}` }, row))
+      : React.createElement(Text, { key: 'lg' }, WORDMARK),
+
+    React.createElement(
+      Box,
+      { key: 'tag', marginTop: 1, flexDirection: 'column', alignItems: 'center' },
+      React.createElement(
+        Text,
+        null,
+        hexToAnsi(T.secondary) + 'An agent that reads your code, edits it, and checks its work.' + ANSI_RESET
+      ),
+      React.createElement(
+        Text,
+        null,
+        hexToAnsi(T.muted) + 'interactive shell' + ANSI_RESET +
+          hexToAnsi(T.faint) + '  ·  ' + ANSI_RESET +
+          hexToAnsi(T.muted) + 'v' + VERSION + ANSI_RESET
+      )
+    )
+  );
+}
+
+// ─── Message blocks ─────────────────────────────────────────────────────────
+
+/** One line of tool activity in the transcript. */
+function ToolLine({ msg }) {
+  const display = TOOL_DISPLAY[msg.name] || { verb: msg.name, icon: '▸' };
+  const failed = !msg.ok;
+  const wrote = msg.name === 'write_file' || msg.name === 'edit_file';
+  const ran = msg.name === 'run';
+
+  const iconColor = failed ? G.red : wrote ? G.yellow : ran ? G.green : G.blue;
+  const detail = [msg.label, msg.detail].filter(Boolean).join('  ·  ');
+
+  return React.createElement(
+    Text,
+    { wrap: 'truncate-end' },
+    hexToAnsi(iconColor) + display.icon + ' ' + ANSI_RESET +
+      hexToAnsi(failed ? G.red : T.secondary) + display.verb.padEnd(6) + ANSI_RESET +
+      hexToAnsi(T.dim) + ' ' + detail + ANSI_RESET
+  );
+}
+
+function MessageBlock({ msg, cols }) {
+  if (msg.role === 'user') {
+    return React.createElement(
+      Box,
+      { flexDirection: 'row', marginBottom: 1, gap: 1 },
+      React.createElement(Text, { color: G.blue }, '▌'),
+      React.createElement(
+        Box,
+        { flexDirection: 'column', flexGrow: 1 },
+        React.createElement(Text, null, hexToAnsi(T.dim) + ANSI_DIM + 'you' + ANSI_RESET),
+        React.createElement(Text, { color: T.text, wrap: 'wrap' }, msg.content)
+      )
+    );
+  }
+
+  if (msg.role === 'assistant') {
+    // A plan is a deliverable, not chatter — give it its own panel so it stands
+    // apart from the running commentary above and below it.
+    if (msg.plan) {
+      return React.createElement(
+        Box,
+        { flexDirection: 'row', marginBottom: 1, gap: 1 },
+        React.createElement(Text, { color: G.yellow }, '▌'),
+        React.createElement(
+          Box,
+          { flexDirection: 'column', flexGrow: 1 },
+          React.createElement(Panel, {
+            title: 'plan',
+            lines: msg.content.split('\n'),
+            width: cols - 4,
+            accent: G.yellow,
+          })
+        )
+      );
+    }
+    return React.createElement(
+      Box,
+      { flexDirection: 'row', marginBottom: 1, gap: 1 },
+      React.createElement(Text, { color: G.green }, '▌'),
+      React.createElement(
+        Box,
+        { flexDirection: 'column', flexGrow: 1 },
+        React.createElement(Text, null, WORDMARK),
+        ...renderMarkdown(msg.content, cols - 4)
+      )
+    );
+  }
+
+  if (msg.role === 'tool') {
+    return React.createElement(
+      Box,
+      { flexDirection: 'row', marginBottom: 0, paddingLeft: 2 },
+      React.createElement(ToolLine, { msg })
+    );
+  }
+
+  if (msg.role === 'system') {
+    return React.createElement(
+      Box,
+      { flexDirection: 'row', marginBottom: 1, gap: 1 },
+      React.createElement(Text, { color: G.yellow }, '◆'),
+      React.createElement(Text, { color: T.secondary, wrap: 'wrap' }, msg.content)
+    );
+  }
+
+  if (msg.role === 'error') {
+    return React.createElement(
+      Box,
+      { flexDirection: 'row', marginBottom: 1, gap: 1 },
+      React.createElement(Text, { color: G.red }, '✗'),
+      React.createElement(Text, { color: G.red, wrap: 'wrap' }, msg.content)
+    );
+  }
+
+  return null;
+}
+
+// ─── Command palette ────────────────────────────────────────────────────────
+
+function CommandsMenu({ commands, selectedIndex }) {
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      borderStyle: 'round',
+      borderColor: T.border,
+      paddingX: 1,
+      marginBottom: 1,
+      flexShrink: 0,
+    },
+    React.createElement(
+      Text,
+      null,
+      hexToAnsi(T.muted) + '↑↓' + ANSI_RESET + hexToAnsi(T.faint) + ' select   ' + ANSI_RESET +
+        hexToAnsi(T.muted) + 'tab' + ANSI_RESET + hexToAnsi(T.faint) + ' complete   ' + ANSI_RESET +
+        hexToAnsi(T.muted) + 'esc' + ANSI_RESET + hexToAnsi(T.faint) + ' dismiss' + ANSI_RESET
+    ),
+    ...commands.map((cmd, i) => {
+      const selected = i === selectedIndex;
+      const nameColor = selected ? T.cycle[i % T.cycle.length] : T.secondary;
+      return React.createElement(
+        Text,
+        { key: cmd.name, wrap: 'truncate-end' },
+        (selected ? hexToAnsi(G.blue) + '› ' + ANSI_RESET : '  ') +
+          hexToAnsi(nameColor) + (selected ? ANSI_BOLD : '') + cmd.name.padEnd(10) + ANSI_RESET +
+          hexToAnsi(selected ? T.dim : T.faint) + ' ' + cmd.description + ANSI_RESET
+      );
+    })
+  );
+}
+
+// ─── Approval prompt ────────────────────────────────────────────────────────
+
+function ApprovalPrompt({ request }) {
+  const accent = request.danger ? G.red : G.yellow;
+  const lines = [];
+
+  if (request.diff) {
+    const removed = request.diff.search.split('\n').slice(0, 6);
+    const added = request.diff.replace.split('\n').slice(0, 6);
+    for (const l of removed) lines.push(hexToAnsi(G.red) + '- ' + l + ANSI_RESET);
+    for (const l of added) lines.push(hexToAnsi(G.green) + '+ ' + l + ANSI_RESET);
+  }
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      borderStyle: 'round',
+      borderColor: accent,
+      paddingX: 1,
+      marginBottom: 1,
+      flexShrink: 0,
+    },
+    React.createElement(
+      Text,
+      { wrap: 'truncate-end' },
+      hexToAnsi(accent) + ANSI_BOLD + request.title + ANSI_RESET +
+        (request.danger ? hexToAnsi(G.red) + '   ⚠ looks destructive' + ANSI_RESET : '')
+    ),
+    request.detail && React.createElement(
+      Text,
+      { wrap: 'truncate-end' },
+      hexToAnsi(T.secondary) + request.detail + ANSI_RESET
+    ),
+    ...lines.map((l, i) => React.createElement(Text, { key: i, wrap: 'truncate-end' }, l)),
+    React.createElement(
+      Text,
+      null,
+      hexToAnsi(G.green) + 'y' + ANSI_RESET + hexToAnsi(T.faint) + ' approve   ' + ANSI_RESET +
+        hexToAnsi(G.blue) + 'a' + ANSI_RESET + hexToAnsi(T.faint) + ' approve all this session   ' + ANSI_RESET +
+        hexToAnsi(G.red) + 'n' + ANSI_RESET + hexToAnsi(T.faint) + ' decline' + ANSI_RESET
+    )
+  );
+}
+
+// ─── App ────────────────────────────────────────────────────────────────────
+
+const App = () => {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [cols, setCols] = React.useState(stdout?.columns || 80);
+  const [rows, setRows] = React.useState(stdout?.rows || 24);
+
+  const [input, setInput] = React.useState('');
+  const [modeIndex, setModeIndex] = React.useState(0);
+  const [session, setSession] = React.useState(null);
+  const [running, setRunning] = React.useState(false);
+  const [statusLine, setStatusLine] = React.useState('');
+  const [elapsed, setElapsed] = React.useState(0);
+  const [steps, setSteps] = React.useState(0);
+  const [chatHistory, setChatHistory] = React.useState([]);
+  const [staticKey, setStaticKey] = React.useState(0);
+  const [showCommands, setShowCommands] = React.useState(false);
+  const [selectedCommand, setSelectedCommand] = React.useState(0);
+  const [filteredCommands, setFilteredCommands] = React.useState(COMMANDS);
+  const [escArmed, setEscArmed] = React.useState(false);
+  const [approval, setApproval] = React.useState(null);
+  // Only true once the terminal answers our capability query. Windows Terminal
+  // never does, so there we advertise ctrl+j instead of lying about shift+enter.
+  const [modifiedEnterWorks, setModifiedEnterWorks] = React.useState(false);
+  const [keyProbe, setKeyProbe] = React.useState(false);
+
+  const nextId = React.useRef(1);
+  const abortRef = React.useRef({ aborted: false });
+  const alwaysAllow = React.useRef(new Set());
+  const convo = React.useRef([]); // {role,content} pairs handed to the agent
+
+  const cwd = process.cwd();
+  const mode = MODES[modeIndex];
+  const modeColor = MODE_COLOR[mode];
+  const tip = React.useMemo(() => TIPS[Math.floor(Math.random() * TIPS.length)], []);
+
+  const push = React.useCallback((msg) => {
+    setChatHistory((prev) => [...prev, { id: `m-${nextId.current++}`, ...msg }]);
+  }, []);
+
+  React.useEffect(() => {
+    auth.getSession().then((s) => setSession(s)).catch(() => {});
+  }, []);
+
+  // Ask the terminal to disambiguate shift+enter from enter (see textarea.mjs).
+  React.useEffect(() => enableModifiedEnter(stdout), [stdout]);
+
+  React.useEffect(() => {
+    if (!stdout) return;
+    const onResize = () => { setCols(stdout.columns || 80); setRows(stdout.rows || 24); };
+    stdout.on('resize', onResize);
+    return () => stdout.off('resize', onResize);
+  }, [stdout]);
+
+  React.useEffect(() => {
+    if (input.startsWith('/') && !input.includes('\n')) {
+      const query = input.toLowerCase().split(/\s/)[0];
+      const filtered = COMMANDS.filter((cmd) => cmd.name.startsWith(query));
+      setFilteredCommands(filtered);
+      setShowCommands(filtered.length > 0);
+      setSelectedCommand(0);
+    } else {
+      setShowCommands(false);
+    }
+  }, [input]);
+
+  React.useEffect(() => {
+    if (!escArmed) return;
+    const t = setTimeout(() => setEscArmed(false), 1500);
+    return () => clearTimeout(t);
+  }, [escArmed]);
+
+  // Elapsed counter while the agent works. The spinner already repaints the
+  // live frame several times a second, so this ticker costs nothing extra.
+  React.useEffect(() => {
+    if (!running) { setElapsed(0); return; }
+    const startedAt = Date.now();
+    const t = setInterval(() => setElapsed(Math.floor((Date.now() - startedAt) / 1000)), 1000);
+    return () => clearInterval(t);
+  }, [running]);
+
+  // ── approval bridge: tools await this promise, the keypress handler settles it ──
+  const requestApproval = React.useCallback((request) => {
+    if (alwaysAllow.current.has(request.tool)) return Promise.resolve('always');
+    return new Promise((resolve) => {
+      setApproval({ request, resolve });
+    });
+  }, []);
+
+  const settleApproval = React.useCallback((verdict) => {
+    setApproval((current) => {
+      if (!current) return null;
+      if (verdict === 'always') alwaysAllow.current.add(current.request.tool);
+      current.resolve(verdict);
+      return null;
+    });
+  }, []);
+
+  useInput((char, key) => {
+    // The terminal's answer to our kitty query — proof that modified enter is
+    // really distinguishable here. Swallow it so it never reaches the draft.
+    if (isTerminalReport(char)) { setModifiedEnterWorks(true); return; }
+
+    // /keys diagnostic: report exactly what the terminal sent for one keypress.
+    if (keyProbe) {
+      setKeyProbe(false);
+      const seq = JSON.stringify(char);
+      const flags = ['ctrl', 'shift', 'meta', 'return', 'tab', 'escape', 'backspace', 'delete']
+        .filter((f) => key[f]).join(', ') || 'none';
+      push({ role: 'system', content: `Key sent: ${seq}\nFlags: ${flags}` });
+      return;
+    }
+
+    // The approval prompt owns the keyboard while it is up.
+    if (approval) {
+      if (char === 'y' || key.return) { settleApproval('once'); return; }
+      if (char === 'a') { settleApproval('always'); return; }
+      if (char === 'n' || key.escape) { settleApproval('reject'); return; }
+      return;
+    }
+
+    if (key.escape) {
+      if (running) { abortRef.current.aborted = true; setStatusLine('interrupting…'); return; }
+      if (showCommands) { setShowCommands(false); return; }
+      if (input.length > 0) {
+        if (escArmed) { setInput(''); setEscArmed(false); }
+        else { setEscArmed(true); }
+        return;
+      }
+      if (escArmed) { exit(); } else { setEscArmed(true); }
+      return;
+    }
+
+    if (key.ctrl && char === 'c') {
+      if (running) { abortRef.current.aborted = true; return; }
+      if (input.length > 0) { setInput(''); return; }
+      exit();
+      return;
+    }
+
+    if (key.tab) {
+      if (showCommands && filteredCommands.length > 0) {
+        const sel = filteredCommands[selectedCommand];
+        if (sel) { setInput(sel.name + ' '); setShowCommands(false); }
+        return;
+      }
+      setModeIndex((i) => (i + 1) % MODES.length);
+      return;
+    }
+
+    if (showCommands) {
+      if (key.upArrow) { setSelectedCommand((p) => (p > 0 ? p - 1 : filteredCommands.length - 1)); return; }
+      if (key.downArrow) { setSelectedCommand((p) => (p < filteredCommands.length - 1 ? p + 1 : 0)); return; }
+    }
+  });
+
+  // ── slash commands ──
+  const runCommand = async (cmd) => {
+    if (cmd === '/login') {
+      push({ role: 'system', content: 'Opening sign-in…' });
+      try {
+        await auth.login();
+        const s = await auth.getSession();
+        setSession(s);
+        push({ role: 'system', content: s ? `Signed in as ${s.user.email}` : 'Login cancelled or failed' });
+      } catch (e) {
+        push({ role: 'error', content: e.message || 'Login failed' });
+      }
+    } else if (cmd === '/logout') {
+      await auth.logout();
+      setSession(null);
+      push({ role: 'system', content: 'Signed out' });
+    } else if (cmd === '/whoami') {
+      const s = await auth.getSession();
+      push({ role: 'system', content: s ? s.user.email : 'Not signed in' });
+    } else if (cmd === '/help') {
+      push({
+        role: 'system',
+        content: 'Commands\n' + COMMANDS.map((c) => `${c.name.padEnd(10)} ${c.description}`).join('\n') +
+          '\n\nKeys\nshift+enter / ctrl+j   new line\ntab                    switch mode\nesc                    interrupt a run\n' +
+          `\nModel\n${appConfig.describeProvider()}  —  change with \`codeply provider\`\n`,
+      });
+    } else if (cmd === '/clear') {
+      // <Static> never re-renders what it already printed, so a clear means
+      // wiping the terminal and remounting it with a fresh key. Empty history
+      // also drops us back to the home splash.
+      convo.current = [];
+      if (stdout) stdout.write('\x1b[2J\x1b[3J\x1b[H');
+      setChatHistory([]);
+      setStaticKey((k) => k + 1);
+    } else if (cmd === '/mode') {
+      const next = (modeIndex + 1) % MODES.length;
+      setModeIndex(next);
+      push({ role: 'system', content: `Mode → ${MODES[next]} — ${MODE_HINT[MODES[next]]}` });
+    } else if (cmd === '/quit' || cmd === '/exit') {
+      exit();
+    } else {
+      push({ role: 'error', content: `Unknown command: ${cmd}. Type /help for available commands.` });
+    }
+  };
+
+  // ── main turn ──
+  const handleSubmit = async (value) => {
+    const text = value.trim();
+    if (!text || running) return;
+
+    let submitValue = text;
+    if (showCommands && filteredCommands[selectedCommand]) {
+      const raw = text.split(/\s+/)[0].toLowerCase();
+      if (!COMMANDS.some((c) => c.name === raw)) {
+        submitValue = filteredCommands[selectedCommand].name;
+      }
+    }
+    setShowCommands(false);
+    setInput('');
+
+    if (submitValue.startsWith('/')) {
+      await runCommand(submitValue.split(/\s+/)[0].toLowerCase());
+      return;
+    }
+
+    push({ role: 'user', content: submitValue });
+    setRunning(true);
+    setStatusLine('thinking…');
+    setSteps(0);
+    abortRef.current = { aborted: false };
+
+    const turn = [];
+    try {
+      const stream = runAgent({
+        userMessage: submitValue,
+        history: convo.current.slice(-20),
+        mode,
+        cwd,
+        approve: requestApproval,
+        signal: abortRef.current,
+      });
+
+      for await (const event of stream) {
+        if (event.type === 'text') {
+          // In Plan mode the substantial reply is the plan itself; short
+          // interstitial notes ("let me check X") stay as ordinary prose.
+          const isPlan = mode === 'Plan' && event.text.split('\n').length >= 3;
+          push({ role: 'assistant', content: event.text, plan: isPlan });
+          turn.push({ role: 'assistant', content: event.text });
+          setStatusLine('working…');
+        } else if (event.type === 'tool_start') {
+          const display = TOOL_DISPLAY[event.name] || { verb: event.name };
+          setSteps((n) => n + 1);
+          setStatusLine(`${display.verb} ${event.args.path || event.args.command || event.args.pattern || ''}`.trim());
+        } else if (event.type === 'tool_end') {
+          const meta = event.meta || {};
+          const unit = event.name === 'search' ? 'matches'
+            : event.name === 'list_dir' ? 'entries'
+            : 'lines';
+          let detail = '';
+          if (meta.count != null) detail = `${meta.count} ${unit}`;
+          if (meta.added != null) detail = `-${meta.removed || 0} +${meta.added}`;
+          if (meta.exitCode != null) detail = `exit ${meta.exitCode}`;
+          if (meta.noop) detail = 'no change';
+          if (meta.rejected) detail = 'declined';
+          push({
+            role: 'tool',
+            name: event.name,
+            ok: event.ok && !meta.rejected && (meta.exitCode == null || meta.exitCode === 0),
+            label: event.summary || '',
+            detail,
+          });
+          setStatusLine('thinking…');
+        } else if (event.type === 'aborted') {
+          push({ role: 'system', content: 'Interrupted.' });
+        } else if (event.type === 'error') {
+          push({ role: 'error', content: event.error });
+        }
+      }
+    } catch (e) {
+      push({ role: 'error', content: e.message });
+    } finally {
+      convo.current = [...convo.current, { role: 'user', content: submitValue }, ...turn];
+      setRunning(false);
+      setStatusLine('');
+      // A run that ended while a prompt was up must not leave a dangling promise.
+      setApproval((current) => { if (current) current.resolve('reject'); return null; });
+    }
+  };
+
+  // Ollama needs no Codeply sign-in, so showing "not signed in" there would be
+  // a false alarm — surface the model that is actually answering instead.
+  const provider = React.useMemo(() => appConfig.getConfig(), []);
+  const usingOllama = provider.provider === 'ollama';
+  const account = usingOllama
+    ? appConfig.describeProvider(provider)
+    : session ? session.user.email : 'not signed in';
+
+  // Advertise the key that actually inserts a newline in THIS terminal.
+  const newlineKey = modifiedEnterWorks ? 'shift+enter' : 'ctrl+j';
+
+  const isHome = chatHistory.length === 0;
+  // The splash needs real estate; in a short or narrow window fall straight
+  // through to the compact layout rather than rendering a cramped one.
+  const showSplash = isHome && rows >= 22 && cols >= 44;
+
+  // On home the composer is a centred column like an app window; in
+  // conversation it spans the width so long messages have room.
+  const shellWidth = showSplash ? Math.min(cols - 4, 92) : cols - 2;
+  const inner = Math.max(20, shellWidth);
+
+  // Two-column rows are laid out by hand: Ink truncates each child against the
+  // width it was given, so without explicit widths the columns run into each
+  // other on narrow terminals instead of truncating cleanly.
+  const rightHint = escArmed
+    ? `esc again to ${input.length > 0 ? 'clear' : 'quit'}`
+    : running ? 'esc interrupts' : 'enter to send';
+  const footRight = fitPath(homePath(cwd), Math.max(12, Math.floor(inner * 0.45))) + '  codeply ' + VERSION;
+  const hintsWidth = Math.max(10, inner - rightHint.length - 2);
+  const tipWidth = inner - footRight.length - 2;
+  const showTip = tipWidth >= 24;
+
+  const composer = React.createElement(
+    Box,
+    {
+      key: 'composer',
+      flexDirection: 'column',
+      borderStyle: 'bold',
+      borderTop: false,
+      borderRight: false,
+      borderBottom: false,
+      borderLeftColor: running ? T.muted : modeColor,
+      paddingLeft: 1,
+      width: shellWidth,
+      marginTop: showSplash ? 2 : 0,
+      flexShrink: 0,
+    },
+    React.createElement(TextArea, {
+      value: input,
+      onChange: setInput,
+      onSubmit: handleSubmit,
+      width: inner - 3,
+      focus: !running && !approval,
+      allowVertical: !showCommands,
+      placeholder: running
+        ? 'working — esc to interrupt'
+        : 'Ask for a change, a fix, or an explanation…  (/ for commands)',
+    }),
+    React.createElement(
+      Text,
+      { wrap: 'truncate-end' },
+      hexToAnsi(modeColor) + ANSI_BOLD + mode + ANSI_RESET +
+        hexToAnsi(T.faint) + '  ·  ' + ANSI_RESET +
+        hexToAnsi(T.muted) + MODE_HINT[mode] + ANSI_RESET +
+        hexToAnsi(T.faint) + '  ·  ' + ANSI_RESET +
+        hexToAnsi(usingOllama || session ? T.dim : G.yellow) + account + ANSI_RESET
+    )
+  );
+
+  const hints = React.createElement(
+    Box,
+    { key: 'hints', flexDirection: 'row', justifyContent: 'space-between', width: shellWidth, marginTop: 1, flexShrink: 0 },
+    React.createElement(
+      Box,
+      { width: hintsWidth, flexShrink: 0 },
+      React.createElement(
+        Text,
+        { wrap: 'truncate-end' },
+        hexToAnsi(G.blue) + 'tab' + ANSI_RESET + hexToAnsi(T.faint) + ' mode   ' + ANSI_RESET +
+          hexToAnsi(G.red) + newlineKey + ANSI_RESET + hexToAnsi(T.faint) + ' newline   ' + ANSI_RESET +
+          hexToAnsi(G.yellow) + '/' + ANSI_RESET + hexToAnsi(T.faint) + ' commands   ' + ANSI_RESET +
+          hexToAnsi(G.green) + 'esc' + ANSI_RESET + hexToAnsi(T.faint) + ' interrupt' + ANSI_RESET
+      )
+    ),
+    React.createElement(
+      Text,
+      null,
+      (escArmed ? hexToAnsi(G.yellow) : hexToAnsi(T.faint)) + rightHint + ANSI_RESET
+    )
+  );
+
+  const tipLine = React.createElement(
+    Box,
+    { key: 'tip', width: shellWidth, flexShrink: 0 },
+    showTip && React.createElement(
+      Text,
+      { wrap: 'truncate-end' },
+      hexToAnsi(G.yellow) + '• ' + ANSI_RESET +
+        hexToAnsi(T.muted) + tip[0] + ANSI_RESET +
+        hexToAnsi(T.faint) + ' ' + tip[1] + ANSI_RESET
+    )
+  );
+
+  const footer = React.createElement(
+    Box,
+    { key: 'footer', flexDirection: 'row', justifyContent: 'space-between', width: shellWidth, flexShrink: 0 },
+    React.createElement(
+      Box,
+      { width: Math.max(0, tipWidth), flexShrink: 0 },
+      showTip && React.createElement(
+        Text,
+        { wrap: 'truncate-end' },
+        hexToAnsi(G.yellow) + '• ' + ANSI_RESET +
+          hexToAnsi(T.muted) + tip[0] + ANSI_RESET +
+          hexToAnsi(T.faint) + ' ' + tip[1] + ANSI_RESET
+      )
+    ),
+    React.createElement(Text, null, hexToAnsi(T.faint) + footRight + ANSI_RESET)
+  );
+
+  // ── Home: one full-viewport screen, centred like an app ──
+  if (showSplash) {
+    const avail = rows - 1;
+    // Sky is whatever the logo, composer and the pinned bottom bar don't use,
+    // split so the logo sits a little above centre — the same weighting the
+    // reference app uses.
+    const free = Math.max(0, avail - LOGO_BLOCK_HEIGHT - COMPOSER_BLOCK_HEIGHT - 1);
+    const skyTop = Math.round(free * 0.42);
+    const skyBottom = free - skyTop;
+
+    return React.createElement(
+      Box,
+      { flexDirection: 'column', width: cols, height: avail, alignItems: 'center' },
+      React.createElement(HomeScreen, { key: 'home', cols, skyRows: skyTop }),
+      composer,
+      hints,
+      tipLine,
+      ...SkyField({ cols, n: skyBottom, seed: 0x5eed17, keyPrefix: 'sky-bot' }),
+      // Pinned to the last row, like a status bar.
+      React.createElement(
+        Box,
+        { key: 'bar', flexDirection: 'row', justifyContent: 'space-between', width: cols - 2 },
+        React.createElement(Text, null, hexToAnsi(T.faint) + fitPath(homePath(cwd), Math.max(12, cols - 24)) + ANSI_RESET),
+        React.createElement(Text, null, hexToAnsi(T.faint) + 'codeply ' + VERSION + ANSI_RESET)
+      )
+    );
+  }
+
+  // ── Conversation: scrollback + a deliberately short live frame ──
+  return React.createElement(
+    Box,
+    { flexDirection: 'column', width: cols, paddingX: 1 },
+
+    // ── Scrollback: printed once, never redrawn. Keeps the live frame short. ──
+    React.createElement(
+      Static,
+      { key: staticKey, items: chatHistory },
+      (msg) => React.createElement(MessageBlock, { key: msg.id, msg, cols: cols - 2 })
+    ),
+
+    // ── Live frame below ──
+
+    running && React.createElement(
+      Box,
+      { flexDirection: 'row', gap: 1, marginBottom: 1, flexShrink: 0 },
+      React.createElement(Text, { color: T.accent }, React.createElement(Spinner, { type: 'dots' })),
+      React.createElement(
+        Text,
+        { wrap: 'truncate-end' },
+        hexToAnsi(T.dim) + (statusLine || 'working…') + ANSI_RESET +
+          hexToAnsi(T.faint) + '   ' + elapsed + 's' + ANSI_RESET +
+          (steps > 0 ? hexToAnsi(T.faint) + '  ·  step ' + steps + ANSI_RESET : '')
+      )
+    ),
+
+    approval && React.createElement(ApprovalPrompt, { request: approval.request }),
+
+    showCommands && React.createElement(CommandsMenu, {
+      commands: filteredCommands,
+      selectedIndex: selectedCommand,
+    }),
+
+    composer,
+    hints,
+    footer
+  );
+};
+
+export default App;