@astra-code/astra-ai 0.1.0

package/src/app/App.tsx

@@ -0,0 +1,1429 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {Box, Text, useApp, useInput} from "ink";
+import Spinner from "ink-spinner";
+import TextInput from "ink-text-input";
+import {spawn} from "child_process";
+import {mkdirSync, unlinkSync, writeFileSync} from "fs";
+import {dirname, join} from "path";
+import {BackendClient, type SessionSummary} from "../lib/backendClient.js";
+import {clearSession, loadSession, saveSession} from "../lib/sessionStore.js";
+import {
+  getBackendUrl,
+  getDefaultClientId,
+  getDefaultModel,
+  getProviderForModel,
+  getRuntimeMode
+} from "../lib/config.js";
+import {runTerminalCommand} from "../lib/terminalBridge.js";
+import {isWorkspaceTrusted, trustWorkspace} from "../lib/trustStore.js";
+import {scanWorkspace} from "../lib/workspaceScanner.js";
+import {speakText, startLiveTranscription, transcribeOnce, type LiveTranscriptionController} from "../lib/voice.js";
+import type {AgentEvent, AuthSession, ChatMessage} from "../types/events.js";
+import type {WorkspaceFile} from "../lib/workspaceScanner.js";
+
+type UiMessage = {
+  kind: "system" | "user" | "assistant" | "tool" | "error";
+  text: string;
+};
+
+type HistoryMode = "picker" | "sessions";
+
+// const ASTRA_ASCII = `
+//  █████╗ ███████╗████████╗██████╗  █████╗      ██████╗ ██████╗ ██████╗ ███████╗
+// ██╔══██╗██╔════╝╚══██╔══╝██╔══██╗██╔══██╗    ██╔════╝██╔═══██╗██╔══██╗██╔════╝
+// ███████║███████╗   ██║   ██████╔╝███████║    ██║     ██║   ██║██║  ██║█████╗
+// ██╔══██║╚════██║   ██║   ██╔══██╗██╔══██║    ██║     ██║   ██║██║  ██║██╔══╝
+// ██║  ██║███████║   ██║   ██║  ██║██║  ██║    ╚██████╗╚██████╔╝██████╔╝███████╗
+// ╚═╝  ╚═╝╚══════╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝     ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
+// by Sean Donovan
+// `;
+
+const ASTRA_ASCII = `
+    :::      :::::::: ::::::::::: :::::::::      :::           ::::::::   ::::::::  :::::::::  :::::::::: 
+  :┼: :┼:   :┼:    :┼:    :┼:     :┼:    :┼:   :┼: :┼:        :┼:    :┼: :┼:    :┼: :┼:    :┼: :┼:        
+ ┼:┼   ┼:┼  ┼:┼           ┼:┼     ┼:┼    ┼:┼  ┼:┼   ┼:┼       ┼:┼        ┼:┼    ┼:┼ ┼:┼    ┼:┼ ┼:┼        
+┼#┼┼:┼┼#┼┼: ┼#┼┼:┼┼#┼┼    ┼#┼     ┼#┼┼:┼┼#:  ┼#┼┼:┼┼#┼┼:      ┼#┼        ┼#┼    ┼:┼ ┼#┼    ┼:┼ ┼#┼┼:┼┼#   
+┼#┼     ┼#┼        ┼#┼    ┼#┼     ┼#┼    ┼#┼ ┼#┼     ┼#┼      ┼#┼        ┼#┼    ┼#┼ ┼#┼    ┼#┼ ┼#┼        
+#┼#     #┼# #┼#    #┼#    #┼#     #┼#    #┼# #┼#     #┼#      #┼#    #┼# #┼#    #┼# #┼#    #┼# #┼#        
+###     ###  ########     ###     ###    ### ###     ###       ########   ########  #########  ########## 
+by Sean Donovan
+`;
+
+const WELCOME_WIDTH = 96;
+
+const centerLine = (text: string, width = WELCOME_WIDTH): string => {
+  const trimmed = text.trim();
+  if (trimmed.length >= width) {
+    return trimmed;
+  }
+  const left = Math.floor((width - trimmed.length) / 2);
+  return `${" ".repeat(left)}${trimmed}`;
+};
+
+const FOUNDER_WELCOME = centerLine("Welcome to Astra from Astra CEO & Founder, Sean Donovan");
+
+const HISTORY_SETTINGS_URL = "https://astra-web-builder.vercel.app/settings";
+
+const eventToToolLine = (event: AgentEvent): string | null => {
+  if (event.type === "tool_start") {
+    const name = event.tool?.name ?? "tool";
+    return `↳ ${name} executing...`;
+  }
+  if (event.type === "tool_result") {
+    const success = Boolean(event.success);
+    const mark = success ? "✓" : "✗";
+    const toolName = event.tool_name ?? "tool";
+    const payload = (event.data ?? {}) as Record<string, unknown>;
+    const output = String(
+      (payload.output as string | undefined) ??
+        (payload.content as string | undefined) ??
+        event.error ??
+        ""
+    );
+    const locality = payload.local === true ? "LOCAL" : "REMOTE";
+    return `[${locality}] ${mark} ${toolName} ${output.slice(0, 240)}`;
+  }
+  if (event.type === "credits_exhausted") {
+    return typeof event.message === "string" ? event.message : "Credits exhausted.";
+  }
+  if (event.type === "error") {
+    const error = typeof event.error === "string" ? event.error : "";
+    const content = typeof event.content === "string" ? event.content : "";
+    return error || content || "Unknown error";
+  }
+  return null;
+};
+
+const looksLikeLocalFilesystemClaim = (text: string): boolean => {
+  const lower = text.toLowerCase();
+  const changeWord =
+    lower.includes("created") ||
+    lower.includes("updated") ||
+    lower.includes("deleted") ||
+    lower.includes("wrote") ||
+    lower.includes("saved");
+  const fsWord =
+    lower.includes("file") ||
+    lower.includes("directory") ||
+    lower.includes("folder") ||
+    lower.includes("workspace");
+  return changeWord && fsWord;
+};
+
+const extractAssistantText = (event: AgentEvent): string | null => {
+  if (event.type === "text") {
+    return typeof event.content === "string" ? event.content : "";
+  }
+
+  const asRecord = event as Record<string, unknown>;
+  const directContent = asRecord.content;
+  if (typeof directContent === "string" && directContent) {
+    return directContent;
+  }
+
+  const delta = asRecord.delta;
+  if (typeof delta === "string" && delta) {
+    return delta;
+  }
+
+  const text = asRecord.text;
+  if (typeof text === "string" && text) {
+    return text;
+  }
+
+  const data = asRecord.data;
+  if (data && typeof data === "object") {
+    const dataRecord = data as Record<string, unknown>;
+    const nestedText = dataRecord.text ?? dataRecord.content ?? dataRecord.delta;
+    if (typeof nestedText === "string" && nestedText) {
+      return nestedText;
+    }
+  }
+
+  return null;
+};
+
+const DIVIDER =
+  "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────";
+
+const LABEL_WIDTH = 10;
+
+type MessageStyle = {
+  label: string;
+  labelColor: string;
+  textColor: string;
+  bold: boolean;
+};
+
+const styleForKind = (kind: UiMessage["kind"]): MessageStyle => {
+  switch (kind) {
+    case "assistant":
+      return {label: "◆ astra", labelColor: "#7aa2ff", textColor: "#dce9ff", bold: false};
+    case "user":
+      return {label: "▸ you", labelColor: "#9ad5ff", textColor: "#c8e0ff", bold: false};
+    case "tool":
+      return {label: "⚙ tool", labelColor: "#5a7a9a", textColor: "#7a9bba", bold: false};
+    case "error":
+      return {label: "✦ error", labelColor: "#ff6b6b", textColor: "#ffaaaa", bold: true};
+    default:
+      return {label: "· note", labelColor: "#506070", textColor: "#8ea1bd", bold: false};
+  }
+};
+
+const formatSessionDate = (dateStr: string): string => {
+  if (!dateStr) {
+    return "unknown";
+  }
+  const d = new Date(dateStr);
+  if (Number.isNaN(d.getTime())) {
+    return dateStr;
+  }
+  const now = new Date();
+  const days = Math.floor((now.getTime() - d.getTime()) / 86400000);
+  if (days <= 0) return "Today";
+  if (days === 1) return "Yesterday";
+  if (days < 7) return `${days}d ago`;
+  return d.toLocaleDateString();
+};
+
+const normalizeAssistantText = (input: string): string => {
+  if (!input) {
+    return "";
+  }
+
+  return input
+    // Remove control chars but preserve newlines/tabs.
+    .replace(/[^\x09\x0A\x0D\x20-\x7E]/g, "")
+    // Trim trailing spaces line-by-line.
+    .replace(/[ \t]+$/gm, "")
+    // Normalize excessive blank lines.
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+};
+
+type InlineToken = {text: string; bold?: boolean; italic?: boolean; code?: boolean};
+
+const parseInline = (line: string): InlineToken[] => {
+  const tokens: InlineToken[] = [];
+  const re = /(`[^`]+`|\*\*[^*]+\*\*|__[^_]+__|\*[^*\n]+\*|_[^_\n]+_)/g;
+  let last = 0;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(line)) !== null) {
+    if (m.index > last) {
+      tokens.push({text: line.slice(last, m.index)});
+    }
+    const seg = m[0];
+    if (seg.startsWith("`")) {
+      tokens.push({text: seg.slice(1, -1), code: true});
+    } else if (seg.startsWith("**") || seg.startsWith("__")) {
+      tokens.push({text: seg.slice(2, -2), bold: true});
+    } else {
+      tokens.push({text: seg.slice(1, -1), italic: true});
+    }
+    last = re.lastIndex;
+  }
+  if (last < line.length) {
+    tokens.push({text: line.slice(last)});
+  }
+  return tokens;
+};
+
+const parseTableRow = (row: string): string[] => {
+  const trimmed = row.trim().replace(/^\|/, "").replace(/\|$/, "");
+  return trimmed.split("|").map((cell) => cell.trim());
+};
+
+const wrapTextToWidth = (text: string, width: number): string[] => {
+  const normalized = text.replace(/\s+/g, " ").trim();
+  if (!normalized) {
+    return [""];
+  }
+  if (normalized.length <= width) {
+    return [normalized];
+  }
+
+  const words = normalized.split(" ");
+  const lines: string[] = [];
+  let current = "";
+
+  for (const word of words) {
+    if (!word) {
+      continue;
+    }
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length <= width) {
+      current = candidate;
+      continue;
+    }
+
+    if (current) {
+      lines.push(current);
+      current = "";
+    }
+
+    if (word.length <= width) {
+      current = word;
+      continue;
+    }
+
+    // Hard-wrap long tokens (e.g. URLs) that exceed column width.
+    for (let i = 0; i < word.length; i += width) {
+      lines.push(word.slice(i, i + width));
+    }
+  }
+
+  if (current) {
+    lines.push(current);
+  }
+  return lines.length > 0 ? lines : [""];
+};
+
+const renderMarkdownContent = (text: string, baseColor: string, keyPrefix: string): React.JSX.Element[] => {
+  const lines = text.split("\n");
+  const out: React.JSX.Element[] = [];
+  let i = 0;
+  let inCode = false;
+
+  while (i < lines.length) {
+    const line = lines[i] ?? "";
+    const trimmed = line.trim();
+
+    if (trimmed.startsWith("```")) {
+      inCode = !inCode;
+      i += 1;
+      continue;
+    }
+
+    if (inCode) {
+      out.push(
+        <Text key={`${keyPrefix}-code-${i}`} color="#9ad5ff">
+          {line}
+        </Text>
+      );
+      i += 1;
+      continue;
+    }
+
+    const next = lines[i + 1] ?? "";
+    const tableSep = /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(next);
+    if (line.includes("|") && tableSep) {
+      const rows: string[][] = [];
+      rows.push(parseTableRow(line));
+      i += 2; // skip header + separator
+      while (i < lines.length) {
+        const current = lines[i] ?? "";
+        if (!current.includes("|")) {
+          break;
+        }
+        rows.push(parseTableRow(current));
+        i += 1;
+      }
+      const colCount = Math.max(...rows.map((r) => r.length));
+      const widths = new Array(colCount).fill(0).map((_, col) => {
+        const longest = Math.max(...rows.map((r) => (r[col] ?? "").length));
+        return Math.max(8, Math.min(24, longest));
+      });
+
+      const renderTableRow = (cells: string[], key: string, color: string, bold = false): void => {
+        const wrapped = widths.map((w, idx) => wrapTextToWidth(cells[idx] ?? "", w));
+        const height = Math.max(...wrapped.map((parts) => parts.length));
+        for (let rowLine = 0; rowLine < height; rowLine += 1) {
+          out.push(
+            <Text key={`${key}-${rowLine}`} color={color} bold={bold}>
+              {`| ${widths
+                .map((w, idx) => (wrapped[idx]?.[rowLine] ?? "").padEnd(w, " "))
+                .join(" | ")} |`}
+            </Text>
+          );
+        }
+      };
+
+      const headerRow = rows[0] ?? [];
+      renderTableRow(headerRow, `${keyPrefix}-table-head-${i}`, "#c8e0ff", true);
+      out.push(
+        <Text key={`${keyPrefix}-table-sep-${i}`} color="#5a7a9a">
+          {`|-${widths.map((w) => "".padEnd(w, "-")).join("-|-")}-|`}
+        </Text>
+      );
+      rows.slice(1).forEach((r, idx) => {
+        renderTableRow(r, `${keyPrefix}-table-row-${i}-${idx}`, baseColor);
+      });
+      continue;
+    }
+
+    let work = line;
+
+    if (/^\s*>\s?/.test(work)) {
+      const quoteText = work.replace(/^\s*>\s?/, "");
+      const quoteTokens = parseInline(quoteText);
+      out.push(
+        <Box key={`${keyPrefix}-quote-${i}`} flexDirection="row">
+          <Text color="#5a7a9a">▎ </Text>
+          <Text color="#a8bad3" italic>
+            {quoteTokens.map((t, idx) => (
+              <Text
+                key={`${keyPrefix}-quote-${i}-tok-${idx}`}
+                bold={Boolean(t.bold)}
+                italic
+                color={t.code ? "#9ad5ff" : "#a8bad3"}
+              >
+                {t.text}
+              </Text>
+            ))}
+          </Text>
+        </Box>
+      );
+      i += 1;
+      continue;
+    }
+
+    const numberedMatch = work.match(/^(\s*)(\d+\.)\s+(.*)$/);
+    if (numberedMatch) {
+      const [, indent, marker, body] = numberedMatch;
+      const tokens = parseInline(body ?? "");
+      out.push(
+        <Text key={`${keyPrefix}-ol-${i}`} color={baseColor}>
+          {indent}
+          <Text color="#9ad5ff" bold>
+            {marker}
+          </Text>
+          {" "}
+          {tokens.map((t, idx) => (
+            <Text
+              key={`${keyPrefix}-ol-${i}-tok-${idx}`}
+              bold={Boolean(t.bold)}
+              italic={Boolean(t.italic)}
+              color={t.code ? "#9ad5ff" : baseColor}
+            >
+              {t.text}
+            </Text>
+          ))}
+        </Text>
+      );
+      i += 1;
+      continue;
+    }
+
+    if (/^\s*[-*]\s+/.test(work)) {
+      const bulletBody = work.replace(/^\s*[-*]\s+/, "");
+      const tokens = parseInline(bulletBody);
+      out.push(
+        <Text key={`${keyPrefix}-ul-${i}`} color={baseColor}>
+          <Text color="#9ad5ff">• </Text>
+          {tokens.map((t, idx) => (
+            <Text
+              key={`${keyPrefix}-ul-${i}-tok-${idx}`}
+              bold={Boolean(t.bold)}
+              italic={Boolean(t.italic)}
+              color={t.code ? "#9ad5ff" : baseColor}
+            >
+              {t.text}
+            </Text>
+          ))}
+        </Text>
+      );
+      i += 1;
+      continue;
+    }
+
+    if (/^\s{0,3}#{1,6}\s+/.test(work)) {
+      work = work.replace(/^\s{0,3}#{1,6}\s+/, "");
+      out.push(
+        <Text key={`${keyPrefix}-h-${i}`} color="#dce9ff" bold>
+          {work}
+        </Text>
+      );
+      i += 1;
+      continue;
+    }
+
+    const tokens = parseInline(work);
+    out.push(
+      <Text key={`${keyPrefix}-line-${i}`} color={baseColor}>
+        {tokens.map((t, idx) => (
+          <Text
+            key={`${keyPrefix}-line-${i}-tok-${idx}`}
+            bold={Boolean(t.bold)}
+            italic={Boolean(t.italic)}
+            color={t.code ? "#9ad5ff" : baseColor}
+          >
+            {t.text}
+          </Text>
+        ))}
+      </Text>
+    );
+    i += 1;
+  }
+
+  return out;
+};
+
+export const AstraApp = (): React.JSX.Element => {
+  const workspaceRoot = useMemo(() => process.cwd(), []);
+  const backend = useMemo(() => new BackendClient(), []);
+  const {exit} = useApp();
+
+  // In-session file cache: tracks files created/edited so subsequent requests
+  // include their latest content in workspaceFiles (VirtualFS stays up to date).
+  const localFileCache = useRef<Map<string, WorkspaceFile>>(new Map());
+
+  const writeLocalFile = useCallback(
+    (relPath: string, content: string, language: string) => {
+      try {
+        const abs = join(workspaceRoot, relPath);
+        mkdirSync(dirname(abs), {recursive: true});
+        writeFileSync(abs, content, "utf-8");
+        localFileCache.current.set(relPath, {path: relPath, content, language});
+      } catch (e) {
+        // Best-effort — App.tsx callers handle the error message separately.
+      }
+    },
+    [workspaceRoot]
+  );
+
+  const deleteLocalFile = useCallback(
+    (relPath: string) => {
+      try {
+        const abs = join(workspaceRoot, relPath);
+        unlinkSync(abs);
+        localFileCache.current.delete(relPath);
+      } catch {
+        // File may not exist; ignore.
+      }
+    },
+    [workspaceRoot]
+  );
+
+  const [trustedWorkspace, setTrustedWorkspace] = useState(() => isWorkspaceTrusted(workspaceRoot));
+  const [trustSelection, setTrustSelection] = useState(0);
+  const [booting, setBooting] = useState(() => isWorkspaceTrusted(workspaceRoot));
+  const [bootError, setBootError] = useState<string | null>(null);
+  const [user, setUser] = useState<AuthSession | null>(null);
+  const [loginMode, setLoginMode] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loginField, setLoginField] = useState<"email" | "password">("email");
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [authBusy, setAuthBusy] = useState(false);
+
+  const [messages, setMessages] = useState<UiMessage[]>([]);
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [activeModel, setActiveModel] = useState(getDefaultModel());
+  const [creditsRemaining, setCreditsRemaining] = useState<number | null>(null);
+  const [lastCreditCost, setLastCreditCost] = useState<number | null>(null);
+  const runtimeMode = getRuntimeMode();
+  const [prompt, setPrompt] = useState("");
+  const [thinking, setThinking] = useState(false);
+  const [streamingText, setStreamingText] = useState("");
+  const [voiceEnabled, setVoiceEnabled] = useState(false);
+  const [voiceListening, setVoiceListening] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [historyMode, setHistoryMode] = useState<HistoryMode>("picker");
+  const [historyPickerIndex, setHistoryPickerIndex] = useState(0);
+  const [historyLoading, setHistoryLoading] = useState(false);
+  const [historyQuery, setHistoryQuery] = useState("");
+  const [historyRows, setHistoryRows] = useState<SessionSummary[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+  const liveVoiceRef = useRef<LiveTranscriptionController | null>(null);
+
+  const pushMessage = useCallback((kind: UiMessage["kind"], text: string) => {
+    setMessages((prev) => [...prev, {kind, text}].slice(-300));
+  }, []);
+
+  const filteredHistory = useMemo(() => {
+    const q = historyQuery.trim().toLowerCase();
+    if (!q) {
+      return historyRows;
+    }
+    return historyRows.filter((s) => s.title.toLowerCase().includes(q));
+  }, [historyQuery, historyRows]);
+
+  const HISTORY_PAGE_SIZE = 10;
+  const historyPage = Math.floor(historyIndex / HISTORY_PAGE_SIZE);
+  const historyPageCount = Math.max(1, Math.ceil(filteredHistory.length / HISTORY_PAGE_SIZE));
+  const pageStart = historyPage * HISTORY_PAGE_SIZE;
+  const pageRows = filteredHistory.slice(pageStart, pageStart + HISTORY_PAGE_SIZE);
+
+  const openExternalUrl = useCallback((url: string): boolean => {
+    try {
+      if (process.platform === "darwin") {
+        spawn("open", [url], {detached: true, stdio: "ignore"}).unref();
+        return true;
+      }
+      if (process.platform === "win32") {
+        spawn("cmd", ["/c", "start", "", url], {detached: true, stdio: "ignore"}).unref();
+        return true;
+      }
+      spawn("xdg-open", [url], {detached: true, stdio: "ignore"}).unref();
+      return true;
+    } catch {
+      return false;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (historyIndex >= filteredHistory.length) {
+      setHistoryIndex(Math.max(filteredHistory.length - 1, 0));
+    }
+  }, [filteredHistory.length, historyIndex]);
+
+  const openHistory = useCallback(async () => {
+    setHistoryOpen(true);
+    setHistoryMode("picker");
+    setHistoryPickerIndex(0);
+    setHistoryQuery("");
+    setHistoryRows([]);
+    setHistoryIndex(0);
+    setHistoryLoading(false);
+  }, []);
+
+  const openChatHistoryList = useCallback(async () => {
+    if (!user) {
+      return;
+    }
+    setHistoryMode("sessions");
+    setHistoryLoading(true);
+    try {
+      const sessions = await backend.listSessions(user, 100);
+      setHistoryRows(sessions);
+      setHistoryIndex(0);
+    } catch (error) {
+      pushMessage("error", `Failed to load history: ${error instanceof Error ? error.message : String(error)}`);
+      setHistoryOpen(false);
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [backend, pushMessage, user]);
+
+  const stopLiveVoice = useCallback(async (): Promise<void> => {
+    const controller = liveVoiceRef.current;
+    if (!controller) {
+      return;
+    }
+    liveVoiceRef.current = null;
+    await controller.stop();
+    setVoiceListening(false);
+  }, []);
+
+  const startLiveVoice = useCallback((): void => {
+    if (liveVoiceRef.current) {
+      return;
+    }
+    setVoiceEnabled(true);
+    setVoiceListening(true);
+    pushMessage("system", "Live transcription started. Speak now…");
+    liveVoiceRef.current = startLiveTranscription({
+      onPartial: (text) => {
+        setPrompt(text);
+      },
+      onFinal: (text) => {
+        setPrompt(text);
+      },
+      onError: (error) => {
+        pushMessage("error", `Voice transcription error: ${error.message}`);
+      }
+    });
+  }, [pushMessage]);
+
+  useEffect(() => {
+    return () => {
+      const controller = liveVoiceRef.current;
+      if (controller) {
+        void controller.stop();
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!trustedWorkspace) {
+      return;
+    }
+    let cancelled = false;
+    const bootstrap = async (): Promise<void> => {
+      const healthy = await backend.healthOk();
+      if (!healthy) {
+        if (!cancelled) {
+          setBootError("Backend is unreachable. Check ASTRA_BACKEND_URL and try again.");
+          setBooting(false);
+        }
+        return;
+      }
+
+      const cached = loadSession();
+      if (!cached) {
+        if (!cancelled) {
+          setBooting(false);
+        }
+        return;
+      }
+
+      const valid = await backend.validateSession(cached);
+      if (!valid) {
+        clearSession();
+      } else if (!cancelled) {
+        setUser(cached);
+        setMessages([
+          {kind: "system", text: "Welcome back. Type a message or /help."},
+          {kind: "system", text: ""}
+        ]);
+      }
+
+      if (!cancelled) {
+        setBooting(false);
+      }
+    };
+
+    void bootstrap();
+    return () => {
+      cancelled = true;
+    };
+  }, [backend, trustedWorkspace]);
+
+  useInput((input, key) => {
+    if (!trustedWorkspace) {
+      if (key.upArrow || input === "k") {
+        setTrustSelection(0);
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setTrustSelection(1);
+        return;
+      }
+      if (key.escape) {
+        exit();
+        return;
+      }
+      if (key.return) {
+        if (trustSelection === 0) {
+          trustWorkspace(workspaceRoot);
+          setTrustedWorkspace(true);
+          setBooting(true);
+          return;
+        }
+        exit();
+      }
+      return;
+    }
+
+    if (key.ctrl && input === "c") {
+      void stopLiveVoice();
+      exit();
+      return;
+    }
+
+    if (historyOpen) {
+      if (key.escape) {
+        if (historyMode === "sessions") {
+          setHistoryMode("picker");
+          setHistoryQuery("");
+        } else {
+          setHistoryOpen(false);
+        }
+        return;
+      }
+
+      if (historyMode === "picker") {
+        if (key.upArrow || input === "k") {
+          setHistoryPickerIndex((prev) => Math.max(prev - 1, 0));
+          return;
+        }
+        if (key.downArrow || input === "j") {
+          setHistoryPickerIndex((prev) => Math.min(prev + 1, 1));
+          return;
+        }
+        if (key.return) {
+          if (historyPickerIndex === 0) {
+            void openChatHistoryList();
+          } else {
+            const ok = openExternalUrl(HISTORY_SETTINGS_URL);
+            if (!ok) {
+              pushMessage("system", `Open this link for credit usage history: ${HISTORY_SETTINGS_URL}`);
+            } else {
+              pushMessage("system", "Opened credit usage history in your browser.");
+            }
+            setHistoryOpen(false);
+            setHistoryPickerIndex(0);
+          }
+          return;
+        }
+        return;
+      }
+
+      if (key.leftArrow || input === "h") {
+        setHistoryIndex((prev) => Math.max(prev - HISTORY_PAGE_SIZE, 0));
+        return;
+      }
+      if (key.rightArrow || input === "l") {
+        setHistoryIndex((prev) => Math.min(prev + HISTORY_PAGE_SIZE, Math.max(filteredHistory.length - 1, 0)));
+        return;
+      }
+      if (key.upArrow || input === "k") {
+        setHistoryIndex((prev) => Math.max(prev - 1, 0));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setHistoryIndex((prev) => Math.min(prev + 1, Math.max(filteredHistory.length - 1, 0)));
+        return;
+      }
+      if (key.return) {
+        const selected = filteredHistory[historyIndex];
+        if (selected) {
+          void (async () => {
+            try {
+              const loaded = await backend.getSessionMessages(selected.id, 200);
+              setSessionId(selected.id);
+              setChatMessages(loaded);
+              setMessages(
+                loaded.flatMap((m) => [{kind: m.role === "user" ? "user" : "assistant", text: m.content}] as UiMessage[])
+              );
+              setHistoryOpen(false);
+              setHistoryQuery("");
+              setHistoryMode("picker");
+              pushMessage("system", "");
+              pushMessage("system", `Loaded "${selected.title}" (${loaded.length} messages).`);
+            } catch (error) {
+              pushMessage("error", `Failed to open session: ${error instanceof Error ? error.message : String(error)}`);
+            }
+          })();
+        }
+        return;
+      }
+      if (input === "d" || input === "x") {
+        const selected = filteredHistory[historyIndex];
+        if (selected) {
+          void (async () => {
+            try {
+              await backend.deleteSession(selected.id);
+              setHistoryRows((prev) => prev.filter((row) => row.id !== selected.id));
+              pushMessage("tool", `Archived session: ${selected.title}`);
+            } catch (error) {
+              pushMessage("error", `Failed to delete session: ${error instanceof Error ? error.message : String(error)}`);
+            }
+          })();
+        }
+      }
+      return;
+    }
+
+    if (!user && key.ctrl && input.toLowerCase() === "t") {
+      setLoginMode((prev) => (prev === "login" ? "signup" : "login"));
+      setLoginError(null);
+      return;
+    }
+  });
+
+  const doAuth = useCallback(async () => {
+    if (!email.trim() || !password.trim()) {
+      setLoginError("Email and password are required.");
+      return;
+    }
+
+    setAuthBusy(true);
+    setLoginError(null);
+    try {
+      const endpoint = loginMode === "login" ? "/api/auth/sign-in" : "/api/auth/sign-up";
+      const data = await backend.post(endpoint, {
+        email: email.trim(),
+        password: password.trim()
+      });
+
+      if (typeof data.error === "string" && data.error) {
+        throw new Error(data.error);
+      }
+
+      const authSession = data as AuthSession;
+      saveSession(authSession);
+      setUser(authSession);
+      setEmail("");
+      setPassword("");
+      setMessages([
+        {kind: "system", text: "Welcome. Type a message or /help."},
+        {kind: "system", text: ""}
+      ]);
+    } catch (error) {
+      setLoginError(error instanceof Error ? error.message : String(error));
+    } finally {
+      setAuthBusy(false);
+    }
+  }, [backend, email, loginMode, password]);
+
+  const handleEvent = useCallback(
+    async (event: AgentEvent, activeSessionId: string): Promise<string | null> => {
+      const assistantPiece = extractAssistantText(event);
+      if (assistantPiece && !["tool_result", "error", "credits_update", "credits_exhausted"].includes(event.type)) {
+        return assistantPiece;
+      }
+
+      if (event.type === "run_in_terminal") {
+        const command = typeof event.command === "string" ? event.command : "";
+        const cwd = typeof event.cwd === "string" ? event.cwd : ".";
+        const blocking = typeof event.blocking === "boolean" ? event.blocking : true;
+        const terminalId = typeof event.terminal_id === "string" ? event.terminal_id : undefined;
+        const result = runTerminalCommand(command, cwd, blocking, process.cwd());
+
+        if (terminalId) {
+          await backend.post("/api/agent/terminal-result", {
+            terminal_id: terminalId,
+            session_id: activeSessionId,
+            exit_code: result.exit_code,
+            output: result.output,
+            cancelled: result.cancelled
+          });
+        }
+
+        pushMessage("tool", `[LOCAL] ▸ ran: ${command.slice(0, 60)}...`);
+        return null;
+      }
+
+      // Apply file operations to the local workspace immediately.
+      if (event.type === "tool_result" && event.success) {
+        const d = (event.data ?? {}) as Record<string, unknown>;
+        const resultType = (event as Record<string, unknown>).result_type as string | undefined;
+        const relPath = typeof d.path === "string" ? d.path : null;
+        const lang = typeof d.language === "string" ? d.language : "plaintext";
+
+        if (relPath) {
+          if (resultType === "file_create") {
+            const content = typeof d.content === "string" ? d.content : "";
+            writeLocalFile(relPath, content, lang);
+            pushMessage("tool", `[LOCAL] ✓ wrote ${relPath}`);
+          } else if (resultType === "file_edit") {
+            const content =
+              typeof d.full_new_content === "string"
+                ? d.full_new_content
+                : typeof d.new_content === "string"
+                ? d.new_content
+                : null;
+            if (content !== null) {
+              writeLocalFile(relPath, content, lang);
+              pushMessage("tool", `[LOCAL] ✓ edited ${relPath}`);
+            }
+          } else if (resultType === "file_delete") {
+            deleteLocalFile(relPath);
+            pushMessage("tool", `[LOCAL] ✓ deleted ${relPath}`);
+          }
+        }
+      }
+
+      if (event.type === "credits_update") {
+        const remaining = Number(event.remaining ?? 0);
+        const cost = Number(event.cost ?? 0);
+        if (!Number.isNaN(remaining)) {
+          setCreditsRemaining(remaining);
+        }
+        if (!Number.isNaN(cost)) {
+          setLastCreditCost(cost);
+        }
+        return null;
+      }
+
+      if (event.type === "credits_exhausted") {
+        setCreditsRemaining(0);
+      }
+
+      const toolLine = eventToToolLine(event);
+      if (toolLine) {
+        if (event.type === "error" || event.type === "credits_exhausted") {
+          pushMessage("error", toolLine);
+        } else {
+          pushMessage("tool", toolLine);
+        }
+      } else if (event.type !== "thinking") {
+        const raw = JSON.stringify(event);
+        pushMessage("tool", `event ${event.type}: ${raw.slice(0, 220)}`);
+      }
+      return null;
+    },
+    [backend, deleteLocalFile, pushMessage, writeLocalFile]
+  );
+
+  const sendPrompt = useCallback(
+    async (rawPrompt: string) => {
+      const text = rawPrompt.trim();
+      if (!text || !user || thinking) {
+        return;
+      }
+
+      if (text === "/help") {
+        pushMessage(
+          "system",
+          "/new  /history  /voice on|off|status|start|stop|input  /settings  /settings model <id>  /logout  /exit"
+        );
+        pushMessage("system", "");
+        return;
+      }
+      if (text === "/settings") {
+        pushMessage(
+          "system",
+          `Settings: mode=${runtimeMode} scope=${workspaceRoot} model=${activeModel} provider=${getProviderForModel(activeModel)} voice=${voiceEnabled ? "on" : "off"} listening=${voiceListening ? "yes" : "no"} client_id=${getDefaultClientId()} backend=${getBackendUrl()}`
+        );
+        pushMessage("system", "");
+        return;
+      }
+      if (text.startsWith("/settings model ")) {
+        const nextModel = text.replace("/settings model ", "").trim();
+        if (!nextModel) {
+          pushMessage("error", "Usage: /settings model <model-id>");
+          return;
+        }
+        setActiveModel(nextModel);
+        setSessionId(null);
+        setChatMessages([]);
+        pushMessage(
+          "system",
+          `Model switched to ${nextModel} (provider ${getProviderForModel(nextModel)}). Started a new chat session.`
+        );
+        pushMessage("system", "");
+        return;
+      }
+      if (text === "/history") {
+        await openHistory();
+        return;
+      }
+      if (text === "/voice status") {
+        pushMessage(
+          "system",
+          `Voice mode is ${voiceEnabled ? "on" : "off"}${voiceListening ? " (live transcription active)" : ""}.`
+        );
+        pushMessage("system", "");
+        return;
+      }
+      if (text === "/voice on") {
+        setVoiceEnabled(true);
+        pushMessage("system", "Voice mode enabled (assistant responses will be spoken).");
+        pushMessage("system", "");
+        return;
+      }
+      if (text === "/voice off") {
+        await stopLiveVoice();
+        setVoiceEnabled(false);
+        pushMessage("system", "Voice mode disabled.");
+        pushMessage("system", "");
+        return;
+      }
+      if (text === "/voice start") {
+        if (voiceListening) {
+          pushMessage("system", "Live transcription is already running.");
+          return;
+        }
+        startLiveVoice();
+        return;
+      }
+      if (text === "/voice stop") {
+        if (!voiceListening) {
+          pushMessage("system", "Live transcription is not running.");
+          return;
+        }
+        await stopLiveVoice();
+        pushMessage("system", "Live transcription stopped. Press Enter to send transcript.");
+        pushMessage("system", "");
+        return;
+      }
+      if (text === "/voice input") {
+        const transcribed = await transcribeOnce();
+        if (!transcribed) {
+          pushMessage(
+            "error",
+            "No speech transcribed. Set ASTRA_STT_COMMAND to a command that prints transcript text to stdout."
+          );
+          return;
+        }
+        pushMessage("tool", `[LOCAL] 🎙 ${transcribed}`);
+        setPrompt(transcribed);
+        pushMessage("system", "Transcribed input ready. Press Enter to send.");
+        return;
+      }
+      if (text === "/new") {
+        setSessionId(null);
+        setChatMessages([]);
+        setStreamingText("");
+        pushMessage("system", "Started new chat.");
+        pushMessage("system", "");
+        return;
+      }
+      if (text === "/logout") {
+        await stopLiveVoice();
+        clearSession();
+        setUser(null);
+        setMessages([]);
+        setChatMessages([]);
+        setSessionId(null);
+        return;
+      }
+      if (text === "/exit" || text === "/quit") {
+        await stopLiveVoice();
+        exit();
+        return;
+      }
+
+      let activeSessionId = sessionId;
+      if (!activeSessionId) {
+        activeSessionId = await backend.ensureSessionId(user, null, activeModel);
+        setSessionId(activeSessionId);
+      }
+
+      const nextChatMessages = [...chatMessages, {role: "user", content: text} as ChatMessage];
+      setChatMessages(nextChatMessages);
+      pushMessage("user", text);
+      setThinking(true);
+      setStreamingText("");
+
+      try {
+        // Scan the local workspace so the backend VirtualFS is populated.
+        // Merge in any files created/edited during this session so edits
+        // persist across agent turns within the same chat.
+        const {workspaceTree, workspaceFiles: scannedFiles} = scanWorkspace(workspaceRoot);
+        const sessionFiles = Array.from(localFileCache.current.values());
+        const seenPaths = new Set(sessionFiles.map((f) => f.path));
+        const mergedFiles = [...sessionFiles, ...scannedFiles.filter((f) => !seenPaths.has(f.path))];
+
+        let assistant = "";
+        let localActionConfirmed = false;
+        for await (const event of backend.streamChat({
+          user,
+          sessionId: activeSessionId,
+          messages: nextChatMessages,
+          workspaceRoot,
+          workspaceTree,
+          workspaceFiles: mergedFiles,
+          model: activeModel
+        })) {
+          if (event.type === "run_in_terminal") {
+            localActionConfirmed = true;
+          }
+          if (event.type === "tool_result") {
+            const payload = (event.data ?? {}) as Record<string, unknown>;
+            if (payload.local === true) {
+              localActionConfirmed = true;
+            }
+          }
+          const piece = await handleEvent(event, activeSessionId);
+          if (piece) {
+            assistant += piece;
+            setStreamingText(normalizeAssistantText(assistant));
+          }
+        }
+
+        setStreamingText("");
+        if (assistant.trim()) {
+          const cleanedAssistant = normalizeAssistantText(assistant);
+          const guardedAssistant =
+            !localActionConfirmed && looksLikeLocalFilesystemClaim(cleanedAssistant)
+              ? `Remote result (not yet confirmed as local filesystem change): ${cleanedAssistant}`
+              : cleanedAssistant;
+          pushMessage("assistant", guardedAssistant);
+          if (voiceEnabled) {
+            speakText(guardedAssistant);
+          }
+          setChatMessages((prev) => [...prev, {role: "assistant", content: cleanedAssistant}]);
+        } else {
+          setChatMessages((prev) => [...prev, {role: "assistant", content: assistant}]);
+        }
+        pushMessage("system", "");
+      } catch (error) {
+        pushMessage("error", `Error: ${error instanceof Error ? error.message : String(error)}`);
+      } finally {
+        setThinking(false);
+      }
+    },
+    [
+      activeModel,
+      backend,
+      chatMessages,
+      exit,
+      handleEvent,
+      localFileCache,
+      openHistory,
+      pushMessage,
+      sessionId,
+      startLiveVoice,
+      stopLiveVoice,
+      thinking,
+      user,
+      voiceEnabled,
+      voiceListening,
+      workspaceRoot
+    ]
+  );
+
+  if (!trustedWorkspace) {
+    return (
+      <Box flexDirection="column">
+        <Text color="#c0c9db">claude</Text>
+        <Text color="#8ea1bd">
+          ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+        </Text>
+        <Box marginTop={1}>
+          <Text color="#f0f4ff">Do you trust the files in this folder?</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color="#c8d5f0">{workspaceRoot}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color="#8ea1bd">
+            Astra Code may read, write, or execute files contained in this directory. This can pose security risks, so only use files from trusted
+            sources.
+          </Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color="#7aa2ff">Learn more</Text>
+        </Box>
+        <Box marginTop={1} flexDirection="column">
+          <Text color={trustSelection === 0 ? "#f0f4ff" : "#8ea1bd"}>
+            {trustSelection === 0 ? "❯ " : "  "}1. Yes, proceed
+          </Text>
+          <Text color={trustSelection === 1 ? "#f0f4ff" : "#8ea1bd"}>
+            {trustSelection === 1 ? "❯ " : "  "}2. No, exit
+          </Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color="#8ea1bd">Enter to confirm · Esc to cancel</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (booting) {
+    return (
+      <Box flexDirection="column">
+        <Text color="#7aa2ff">{ASTRA_ASCII}</Text>
+        <Text color="#8ea1bd">{FOUNDER_WELCOME}</Text>
+        <Text color="#8aa2c9">
+          <Spinner type="dots12" /> Booting Astra terminal shell...
+        </Text>
+      </Box>
+    );
+  }
+
+  if (bootError) {
+    return (
+      <Box flexDirection="column">
+        <Text color="#7aa2ff">{ASTRA_ASCII}</Text>
+        <Text color="#8ea1bd">{FOUNDER_WELCOME}</Text>
+        <Text color="red">{bootError}</Text>
+      </Box>
+    );
+  }
+
+  if (!user) {
+    return (
+      <Box flexDirection="column">
+        <Text color="#7aa2ff">{ASTRA_ASCII}</Text>
+        <Text color="#8ea1bd">{FOUNDER_WELCOME}</Text>
+        <Text color="#b8c8ff">
+          Astra terminal AI pair programmer ({loginMode === "login" ? "Sign in" : "Create account"})
+        </Text>
+        <Text color="#7c8ea8">Press Ctrl+T to toggle Sign in / Create account</Text>
+        <Box marginTop={1}>
+          <Text color="#93a3b8">Email: </Text>
+          <TextInput
+            value={email}
+            onChange={setEmail}
+            focus={loginField === "email"}
+            onSubmit={() => {
+              setLoginField("password");
+            }}
+          />
+        </Box>
+        <Box>
+          <Text color="#93a3b8">Password: </Text>
+          <TextInput
+            value={password}
+            onChange={setPassword}
+            mask="*"
+            focus={loginField === "password"}
+            onSubmit={() => {
+              void doAuth();
+            }}
+          />
+        </Box>
+        {authBusy ? (
+          <Text color="#a5d6ff">
+            <Spinner type="aesthetic" /> Syncing star map...
+          </Text>
+        ) : (
+          <Text color="#7c8ea8">Enter email, press Enter, then submit password.</Text>
+        )}
+        {loginError ? <Text color="red">{loginError}</Text> : null}
+      </Box>
+    );
+  }
+
+  if (historyOpen) {
+    const selected = filteredHistory[historyIndex];
+    return (
+      <Box flexDirection="column">
+        <Text color="#7aa2ff">{ASTRA_ASCII}</Text>
+        <Text color="#8ea1bd">{FOUNDER_WELCOME}</Text>
+        <Text color="#2a3a50">{DIVIDER}</Text>
+        {historyMode === "picker" ? (
+          <Box flexDirection="column">
+            <Box flexDirection="row" justifyContent="space-between">
+              <Text color="#dce9ff">History Picker</Text>
+              <Text color="#5a7a9a">Esc close · Enter select</Text>
+            </Box>
+            <Text color="#2a3a50">{DIVIDER}</Text>
+            <Box marginTop={1} flexDirection="column">
+              <Box flexDirection="row">
+                <Text color={historyPickerIndex === 0 ? "#dce9ff" : "#7a9bba"}>
+                  {historyPickerIndex === 0 ? "❯ " : "  "}View chat history
+                </Text>
+              </Box>
+              <Box marginTop={1} flexDirection="row">
+                <Text color={historyPickerIndex === 1 ? "#dce9ff" : "#7a9bba"}>
+                  {historyPickerIndex === 1 ? "❯ " : "  "}View credit usage history
+                </Text>
+              </Box>
+            </Box>
+            <Text color="#2a3a50">{DIVIDER}</Text>
+            <Text color="#5a7a9a">Credit usage history opens: {HISTORY_SETTINGS_URL}</Text>
+          </Box>
+        ) : (
+          <Box flexDirection="column">
+            <Box flexDirection="row" justifyContent="space-between">
+              <Text color="#dce9ff">Chat History</Text>
+              <Text color="#5a7a9a">Esc back · Enter open · D delete · ←/→ page</Text>
+            </Box>
+            <Box marginTop={1} flexDirection="row">
+              <Text color="#4a6070">search </Text>
+              <TextInput value={historyQuery} onChange={setHistoryQuery} placeholder="Filter chats..." />
+            </Box>
+            <Text color="#2a3a50">{DIVIDER}</Text>
+            {historyLoading ? (
+              <Text color="#8aa2c9">
+                <Spinner type="dots12" /> Loading chat history...
+              </Text>
+            ) : filteredHistory.length === 0 ? (
+              <Text color="#8ea1bd">No sessions found.</Text>
+            ) : (
+              <Box flexDirection="column" marginTop={1}>
+                {pageRows.map((row, localIdx) => {
+                  const idx = pageStart + localIdx;
+                  const active = idx === historyIndex;
+                  return (
+                    <Box key={row.id} flexDirection="row" justifyContent="space-between">
+                      <Text color={active ? "#dce9ff" : "#7a9bba"}>
+                        {active ? "❯ " : "  "}
+                        {(row.title || "Untitled").slice(0, 58).padEnd(60, " ")}
+                      </Text>
+                      <Text color="#5a7a9a">
+                        {String(row.total_messages ?? 0).padStart(3, " ")} msgs · {formatSessionDate(row.updated_at)}
+                      </Text>
+                    </Box>
+                  );
+                })}
+              </Box>
+            )}
+            <Text color="#2a3a50">{DIVIDER}</Text>
+            <Box flexDirection="row" justifyContent="space-between">
+              <Text color="#5a7a9a">
+                Page {historyPage + 1} / {historyPageCount}
+              </Text>
+              <Text color="#5a7a9a">Selected: {selected ? selected.id : "--"}</Text>
+            </Box>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text color="#7aa2ff">{ASTRA_ASCII}</Text>
+      <Text color="#8ea1bd">{FOUNDER_WELCOME}</Text>
+      {/*<Text color="#9aa8c1">Astra Code · {process.cwd()}</Text>*/}
+      <Text color="#2a3a50">{DIVIDER}</Text>
+      <Box flexDirection="row" gap={2}>
+        <Box flexDirection="row">
+          <Text color="#4a6070">mode </Text>
+          <Text color="#9ad5ff">{runtimeMode}</Text>
+        </Box>
+        <Box flexDirection="row">
+          <Text color="#4a6070">scope </Text>
+          <Text color="#7a9bba">{workspaceRoot}</Text>
+        </Box>
+        <Box flexDirection="row">
+          <Text color="#4a6070">provider </Text>
+          <Text color="#9ad5ff">{getProviderForModel(activeModel)}</Text>
+        </Box>
+        <Box flexDirection="row">
+          <Text color="#4a6070">credits </Text>
+          <Text color={creditsRemaining !== null && creditsRemaining < 50 ? "#ffaa55" : "#9ad5ff"}>
+            {creditsRemaining ?? "--"}
+            {lastCreditCost !== null ? (
+              <Text color="#5a7a9a"> (-{lastCreditCost})</Text>
+            ) : null}
+          </Text>
+        </Box>
+        <Box flexDirection="row">
+          <Text color="#4a6070">model </Text>
+          <Text color="#9ad5ff">{activeModel}</Text>
+        </Box>
+        <Box flexDirection="row">
+          <Text color="#4a6070">voice </Text>
+          <Text color={voiceEnabled ? "#9ad5ff" : "#5a7a9a"}>
+            {voiceEnabled ? (voiceListening ? "on/listening" : "on") : "off"}
+          </Text>
+        </Box>
+      </Box>
+      <Text color="#2a3a50">{DIVIDER}</Text>
+      <Text color="#3a5068">/help  /new  /history  /voice on|off|status|start|stop|input  /settings  /logout  /exit</Text>
+      <Text color="#2a3a50">{DIVIDER}</Text>
+      <Box flexDirection="column" marginTop={1}>
+        {messages.map((message, index) => {
+          const style = styleForKind(message.kind);
+          const paddedLabel = style.label.padEnd(LABEL_WIDTH, " ");
+          const isSpacing = message.text === "" && message.kind === "system";
+          if (isSpacing) {
+            return <Box key={`${index}-spacer`} marginTop={0}><Text> </Text></Box>;
+          }
+          return (
+            <Box key={`${index}-${message.kind}`} flexDirection="row">
+              <Text color={style.labelColor} bold={style.bold}>
+                {paddedLabel}
+              </Text>
+              {message.kind === "assistant" ? (
+                <Box flexDirection="column">
+                  {renderMarkdownContent(message.text, style.textColor, `assistant-${index}`)}
+                </Box>
+              ) : (
+                <Text color={style.textColor} bold={style.bold && message.kind === "error"}>
+                  {message.text}
+                </Text>
+              )}
+            </Box>
+          );
+        })}
+        {streamingText ? (
+          <Box flexDirection="row">
+            <Text color="#7aa2ff">{styleForKind("assistant").label.padEnd(LABEL_WIDTH, " ")}</Text>
+            <Box flexDirection="column">{renderMarkdownContent(streamingText, "#dce9ff", "streaming")}</Box>
+          </Box>
+        ) : null}
+      </Box>
+      <Text color="#2a3a50">{DIVIDER}</Text>
+      {thinking ? (
+        <Box flexDirection="row" marginTop={1}>
+          <Text color="#7aa2ff">{"◆ astra".padEnd(LABEL_WIDTH, " ")}</Text>
+          <Text color="#6080a0">
+            <Spinner type="dots2" />
+            <Text color="#8aa2c9"> thinking...</Text>
+          </Text>
+        </Box>
+      ) : null}
+      <Box marginTop={1} flexDirection="row">
+        <Text color="#7aa2ff">❯ </Text>
+        <TextInput
+          value={prompt}
+          onChange={setPrompt}
+          onSubmit={(value) => {
+            setPrompt("");
+            void sendPrompt(value);
+          }}
+          placeholder={voiceEnabled ? "Ask Astra... (/voice start for live transcription)" : "Ask Astra..."}
+        />
+      </Box>
+    </Box>
+  );
+};