@astra-code/astra-ai 0.1.5 → 0.1.7

package/src/app/App.tsx

@@ -3,7 +3,7 @@ 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 {existsSync, 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";
@@ -17,7 +17,7 @@ import {
 import {runTerminalCommand} from "../lib/terminalBridge.js";
 import {isWorkspaceTrusted, trustWorkspace} from "../lib/trustStore.js";
 import {scanWorkspace} from "../lib/workspaceScanner.js";
-import {startLiveTranscription, transcribeOnce, type LiveTranscriptionController} from "../lib/voice.js";
+import {startLiveTranscription, transcribeOnce, resolveAudioDevice, setAudioDevice, listAvfAudioDevices, writeAstraKey, type LiveTranscriptionController} from "../lib/voice.js";
 import type {AgentEvent, AuthSession, ChatMessage} from "../types/events.js";
 import type {WorkspaceFile} from "../lib/workspaceScanner.js";
 
@@ -25,6 +25,7 @@ type UiMessage = {
   kind: "system" | "user" | "assistant" | "tool" | "error";
   text: string;
   card?: ToolCard;
+  ts?: number;
 };
 
 type HistoryMode = "picker" | "sessions";
@@ -198,6 +199,15 @@ const extractAssistantText = (event: AgentEvent): string | null => {
 
 const LABEL_WIDTH = 10;
 const HEADER_PATH_MAX = Number(process.env.ASTRA_HEADER_PATH_MAX ?? "42");
+
+const formatTime = (ts: number): string => {
+  const d = new Date(ts);
+  const raw = d.getHours();
+  const ampm = raw >= 12 ? "pm" : "am";
+  const h = raw % 12 === 0 ? 12 : raw % 12;
+  const m = d.getMinutes().toString().padStart(2, "0");
+  return `${h}:${m} ${ampm}`;
+};
 const MIN_DIVIDER = 64;
 const MAX_DIVIDER = 120;
 
@@ -248,7 +258,13 @@ const normalizeAssistantText = (input: string): string => {
     // Remove control chars but preserve newlines/tabs.
     .replace(/[^\x09\x0A\x0D\x20-\x7E]/g, "")
     .replace(/([a-z0-9/])([A-Z])/g, "$1 $2")
-    .replace(/([.!?])([A-Za-z])/g, "$1 $2")
+    // Add space after sentence-ending punctuation only when followed by an
+    // uppercase letter (sentence start).  Using [A-Za-z] here would break
+    // file extensions like .css, .json, .jsx, .tsx — those always start with
+    // a lowercase letter.
+    .replace(/([.!?])([A-Z])/g, "$1 $2")
+    // For ! and ? followed by lowercase, also add a space (natural English).
+    .replace(/([!?])([a-z])/g, "$1 $2")
     .replace(/([a-z])(\u2022)/g, "$1\n$2")
     .replace(/([^\n])(Summary:|Next:|Tests:)/g, "$1\n\n$2")
     .replace(/([A-Za-z0-9_/-]+)\.\s+md\b/g, "$1.md")
@@ -277,34 +293,54 @@ const normalizeAssistantText = (input: string): string => {
   return deduped.join("\n\n").trim();
 };
 
-const summarizeToolResult = (toolName: string, data: Record<string, unknown>, success: boolean): string => {
+const guessDevUrl = (command: string): string | null => {
+  // Extract an explicit --port or -p value from the command.
+  const portMatch = command.match(/(?:--port|-p)\s+(\d+)/) ?? command.match(/(?:--port=|-p=)(\d+)/);
+  if (portMatch) {
+    return `http://localhost:${portMatch[1]}`;
+  }
+  // Default ports by framework.
+  if (/next/.test(command)) return "http://localhost:3000";
+  if (/vite|vue/.test(command)) return "http://localhost:5173";
+  if (/remix/.test(command)) return "http://localhost:3000";
+  if (/astro/.test(command)) return "http://localhost:4321";
+  if (/angular|ng\s+serve/.test(command)) return "http://localhost:4200";
+  if (/npm\s+run\s+dev|npm\s+start|npx\s+react-scripts/.test(command)) return "http://localhost:3000";
+  return null;
+};
+
+const summarizeToolResult = (
+  toolName: string,
+  data: Record<string, unknown>,
+  success: boolean
+): {summary: string; path?: string} => {
   if (!success) {
-    return `${toolName} failed`;
+    return {summary: `${toolName} failed`};
   }
   const path = typeof data.path === "string" ? data.path : "";
   const totalLines = typeof data.total_lines === "number" ? data.total_lines : null;
   if (toolName === "view_file") {
-    if (totalLines !== null && path) {
-      return `Read ${totalLines} lines of <${path}>`;
-    }
-    if (path) {
-      return `Read <${path}>`;
-    }
+    const result: {summary: string; path?: string} = {
+      summary: totalLines !== null ? `Read ${totalLines} lines` : "Read file",
+    };
+    if (path) result.path = path;
+    return result;
   }
   if (toolName === "list_directory") {
-    const dir = path || ".";
-    if (totalLines !== null) {
-      return `Listed ${totalLines} entries in <${dir}>`;
-    }
-    return `Listed <${dir}>`;
+    return {
+      summary: totalLines !== null ? `Listed ${totalLines} entries` : "Listed directory",
+      path: path || ".",
+    };
   }
   if (toolName === "semantic_search") {
-    return "Searched codebase context";
+    return {summary: "Searched codebase context"};
   }
   if (toolName === "search_files") {
-    return totalLines !== null ? `Found ${totalLines} matching paths` : "Searched file paths";
+    return {
+      summary: totalLines !== null ? `Found ${totalLines} matching paths` : "Searched file paths",
+    };
   }
-  return `${toolName} completed`;
+  return {summary: `${toolName} completed`};
 };
 
 const isLikelyVoiceNoise = (text: string): boolean => {
@@ -602,9 +638,18 @@ export const AstraApp = (): React.JSX.Element => {
   const backend = useMemo(() => new BackendClient(), []);
   const {exit} = useApp();
 
+  // Keep backend token fresh: when the client auto-refreshes on 401, persist and update state.
+  useEffect(() => {
+    backend.setOnTokenRefreshed((refreshed) => {
+      saveSession(refreshed);
+      setUser(refreshed);
+    });
+  }, [backend]);
+
   // 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 abortRunRef = useRef<AbortController | null>(null);
 
   const writeLocalFile = useCallback(
     (relPath: string, content: string, language: string) => {
@@ -651,6 +696,7 @@ export const AstraApp = (): React.JSX.Element => {
   const [activeModel, setActiveModel] = useState(getDefaultModel());
   const [creditsRemaining, setCreditsRemaining] = useState<number | null>(null);
   const [lastCreditCost, setLastCreditCost] = useState<number | null>(null);
+  const [loopCtx, setLoopCtx] = useState<{in: number; out: number} | null>(null);
   const runtimeMode = getRuntimeMode();
   const [prompt, setPrompt] = useState("");
   const [thinking, setThinking] = useState(false);
@@ -660,7 +706,9 @@ export const AstraApp = (): React.JSX.Element => {
   const [voicePreparing, setVoicePreparing] = useState(false);
   const [voiceWaitingForSilence, setVoiceWaitingForSilence] = useState(false);
   const [voiceQueuedPrompt, setVoiceQueuedPrompt] = useState<string | null>(null);
+  const [micSetupDevices, setMicSetupDevices] = useState<Array<{index: number; name: string}> | null>(null);
   const [toolFeedMode, setToolFeedMode] = useState<"compact" | "expanded">("compact");
+  const [thinkingColorIdx, setThinkingColorIdx] = useState(0);
   const [historyOpen, setHistoryOpen] = useState(false);
   const [historyMode, setHistoryMode] = useState<HistoryMode>("picker");
   const [historyPickerIndex, setHistoryPickerIndex] = useState(0);
@@ -676,12 +724,12 @@ export const AstraApp = (): React.JSX.Element => {
   const isSuperAdmin = user?.role === "super_admin";
 
   const pushMessage = useCallback((kind: UiMessage["kind"], text: string) => {
-    setMessages((prev) => [...prev, {kind, text}].slice(-300));
+    setMessages((prev) => [...prev, {kind, text, ts: Date.now()}].slice(-300));
   }, []);
 
   const pushToolCard = useCallback((card: ToolCard) => {
     setMessages((prev) => {
-      const nextEntry = {kind: "tool", text: card.summary, card} satisfies UiMessage;
+      const nextEntry = {kind: "tool", text: card.summary, card, ts: Date.now()} satisfies UiMessage;
       const last = prev[prev.length - 1];
       if (
         last &&
@@ -801,7 +849,29 @@ export const AstraApp = (): React.JSX.Element => {
     if (announce) {
       pushMessage("system", "Voice input armed. Preparing microphone...");
     }
-    liveVoiceRef.current = startLiveTranscription({
+
+    // Resolve mic device before starting — triggers onboarding if not configured.
+    void resolveAudioDevice(workspaceRoot).then((device) => {
+      if (device === null) {
+        // No device configured — run onboarding inline.
+        setVoicePreparing(false);
+        const devices = listAvfAudioDevices();
+        if (!devices.length) {
+          pushMessage("error", "No audio devices found. Install ffmpeg: brew install ffmpeg");
+          setVoiceEnabled(false);
+          return;
+        }
+        setMicSetupDevices(devices);
+        const lines = [
+          "Let's set up your microphone first.",
+          ...devices.map(d => `  [${d.index}] ${d.name}`),
+          "Type the number for your mic and press Enter:"
+        ];
+        pushMessage("system", lines.join("\n"));
+        return;
+      }
+      // Device resolved — start transcription.
+      liveVoiceRef.current = startLiveTranscription({
       onPartial: (text) => {
         setVoicePreparing(false);
         setVoiceListening(true);
@@ -857,8 +927,9 @@ export const AstraApp = (): React.JSX.Element => {
         fetch('http://127.0.0.1:7573/ingest/fdd4f018-1ba3-4303-b1bb-375443267476',{method:'POST',headers:{'Content-Type':'application/json','X-Debug-Session-Id':'17f1ea'},body:JSON.stringify({sessionId:'17f1ea',runId:'voice_run_1',hypothesisId:'H4',location:'App.tsx:startLiveVoice.onError',message:'voice transcription error',data:{error:error.message},timestamp:Date.now()})}).catch(()=>{});
         // #endregion
       }
-    });
-  }, [pushMessage, stopLiveVoice]);
+      });
+    }); // end resolveAudioDevice.then
+  }, [pushMessage, stopLiveVoice, workspaceRoot]);
 
   useEffect(() => {
     return () => {
@@ -947,6 +1018,11 @@ export const AstraApp = (): React.JSX.Element => {
       if (key.return) {
         if (trustSelection === 0) {
           trustWorkspace(workspaceRoot);
+          // Create .astra settings file at workspace root if it doesn't exist yet.
+          try {
+            const astraPath = join(workspaceRoot, ".astra");
+            if (!existsSync(astraPath)) writeFileSync(astraPath, "");
+          } catch { /* non-fatal */ }
           setTrustedWorkspace(true);
           setBooting(true);
           return;
@@ -962,6 +1038,13 @@ export const AstraApp = (): React.JSX.Element => {
       return;
     }
 
+    if (key.escape && thinking) {
+      abortRunRef.current?.abort();
+      pushMessage("system", "Cancelled.");
+      pushMessage("system", "");
+      return;
+    }
+
     if (historyOpen) {
       if (key.escape) {
         if (historyMode === "sessions") {
@@ -1294,17 +1377,18 @@ export const AstraApp = (): React.JSX.Element => {
         }
 
         if (!isSuperAdmin && event.tool_name === "start_preview") {
-          const message =
-            typeof d.message === "string"
-              ? d.message
-              : typeof d.preview_url === "string"
-              ? `Preview: ${d.preview_url}`
-              : "Local preview started.";
+          // Server mode returns preview_url (tunnel). Desktop mode returns a
+          // plain message — try to guess the local URL from the command.
+          const tunnelUrl = typeof d.preview_url === "string" ? d.preview_url : null;
+          const command = typeof d.command === "string" ? d.command : "";
+          const localUrl = !tunnelUrl ? guessDevUrl(command) : null;
+          const displayUrl = tunnelUrl ?? localUrl;
           pushToolCard({
             kind: "preview",
             toolName: "start_preview",
             locality,
-            summary: message
+            summary: "Dev server running",
+            ...(displayUrl ? {path: displayUrl} : {}),
           });
           return null;
         }
@@ -1354,6 +1438,16 @@ export const AstraApp = (): React.JSX.Element => {
         }
       }
 
+      if (event.type === "timing") {
+        const ev = event as Record<string, unknown>;
+        if (ev.phase === "llm_done") {
+          const inTok = Number(ev.input_tokens ?? 0);
+          const outTok = Number(ev.output_tokens ?? 0);
+          if (inTok > 0 || outTok > 0) setLoopCtx({in: inTok, out: outTok});
+        }
+        return null;
+      }
+
       if (event.type === "continuation_check") {
         const recommendation =
           typeof event.recommendation === "string" && event.recommendation
@@ -1397,12 +1491,13 @@ export const AstraApp = (): React.JSX.Element => {
             if (alreadyRepresented) {
               return null;
             }
-            const summary = summarizeToolResult(toolName, payload, Boolean(event.success));
+            const {summary, path: summaryPath} = summarizeToolResult(toolName, payload, Boolean(event.success));
             pushToolCard({
               kind: event.success ? "success" : "error",
               toolName,
               locality: payload.local === true ? "LOCAL" : "REMOTE",
-              summary: event.success ? summary : `${toolName} ${mark}`
+              summary: event.success ? summary : `${toolName} ${mark}`,
+              ...(summaryPath ? {path: summaryPath} : {}),
             });
           }
         }
@@ -1414,7 +1509,7 @@ export const AstraApp = (): React.JSX.Element => {
       }
       return null;
     },
-    [backend, deleteLocalFile, isSuperAdmin, pushMessage, pushToolCard, stopLiveVoice, voiceEnabled, writeLocalFile]
+    [backend, deleteLocalFile, isSuperAdmin, pushMessage, pushToolCard, setLoopCtx, stopLiveVoice, voiceEnabled, writeLocalFile]
   );
 
   const sendPrompt = useCallback(
@@ -1423,22 +1518,57 @@ export const AstraApp = (): React.JSX.Element => {
       if (!text || !user || thinking) {
         return;
       }
+      setPrompt("");
+
+      // Mic onboarding: intercept when waiting for device selection.
+      if (micSetupDevices !== null) {
+        const idx = parseInt(text, 10);
+        const valid = !isNaN(idx) && idx >= 0 && micSetupDevices.some(d => d.index === idx);
+        if (!valid) {
+          pushMessage("error", `Please type one of: ${micSetupDevices.map(d => d.index).join(", ")}`);
+          return;
+        }
+        const device = `:${idx}`;
+        // Write to .astra local cache
+        writeAstraKey(workspaceRoot, "ASTRA_STT_DEVICE", device);
+        // Persist to backend
+        void backend.updateCliSettings({audio_device_index: idx});
+        // Update in-process cache
+        setAudioDevice(device);
+        setMicSetupDevices(null);
+        pushMessage("system", `Mic set to [${idx}] ${micSetupDevices.find(d => d.index === idx)?.name ?? ""}. Starting voice...`);
+        pushMessage("system", "");
+        startLiveVoice(false);
+        return;
+      }
 
       if (text === "/help") {
         pushMessage(
           "system",
-          "/new  /history  /voice  /dictate on|off|status  /tools compact|expanded  /settings  /settings model <id>  /logout  /exit"
+          isSuperAdmin
+            ? "/new  /history  /voice  /dictate on|off|status  /tools compact|expanded  /settings  /settings model <id>  /logout  /exit"
+            : "/new  /history  /voice  /dictate on|off|status  /settings  /settings model <id>  /logout  /exit"
         );
         pushMessage("system", "");
         return;
       }
       if (text === "/tools compact") {
+        if (!isSuperAdmin) {
+          pushMessage("system", "Unknown command. Type /help for available commands.");
+          pushMessage("system", "");
+          return;
+        }
         setToolFeedMode("compact");
         pushMessage("system", "Tool feed set to compact.");
         pushMessage("system", "");
         return;
       }
       if (text === "/tools expanded") {
+        if (!isSuperAdmin) {
+          pushMessage("system", "Unknown command. Type /help for available commands.");
+          pushMessage("system", "");
+          return;
+        }
         setToolFeedMode("expanded");
         pushMessage("system", "Tool feed set to expanded.");
         pushMessage("system", "");
@@ -1554,6 +1684,10 @@ export const AstraApp = (): React.JSX.Element => {
       pushMessage("user", text);
       setThinking(true);
       setStreamingText("");
+      setLoopCtx(null);
+
+      const abortController = new AbortController();
+      abortRunRef.current = abortController;
 
       try {
         // Scan the local workspace so the backend VirtualFS is populated.
@@ -1564,8 +1698,28 @@ export const AstraApp = (): React.JSX.Element => {
         const seenPaths = new Set(sessionFiles.map((f) => f.path));
         const mergedFiles = [...sessionFiles, ...scannedFiles.filter((f) => !seenPaths.has(f.path))];
 
-        let assistant = "";
+        // `pendingText` is text received since the last committed block.
+        // It gets flushed to the messages list whenever tool activity starts,
+        // keeping text and tool cards in the exact order they were emitted.
+        let pendingText = "";
+        let allAssistantText = "";
         let localActionConfirmed = false;
+
+        const commitPending = (applyGuard = false) => {
+          if (!pendingText.trim()) {
+            pendingText = "";
+            return;
+          }
+          const clean = normalizeAssistantText(pendingText);
+          const msg =
+            applyGuard && !localActionConfirmed && looksLikeLocalFilesystemClaim(clean)
+              ? `Remote result (not yet confirmed as local filesystem change): ${clean}`
+              : clean;
+          pushMessage("assistant", msg);
+          pendingText = "";
+          setStreamingText("");
+        };
+
         for await (const event of backend.streamChat({
           user,
           sessionId: activeSessionId,
@@ -1573,7 +1727,8 @@ export const AstraApp = (): React.JSX.Element => {
           workspaceRoot,
           workspaceTree,
           workspaceFiles: mergedFiles,
-          model: activeModel
+          model: activeModel,
+          signal: abortController.signal
         })) {
           if (event.type === "run_in_terminal") {
             localActionConfirmed = true;
@@ -1587,29 +1742,35 @@ export const AstraApp = (): React.JSX.Element => {
           if (event.type === "done") {
             break;
           }
+          // Flush any accumulated text before the first tool event so that text
+          // appears above the tool cards that follow it — preserving order.
+          if (event.type === "tool_start" || event.type === "run_in_terminal") {
+            commitPending();
+          }
           const piece = await handleEvent(event, activeSessionId);
           if (piece) {
-            assistant += piece;
-            setStreamingText(normalizeAssistantText(assistant));
+            pendingText += piece;
+            allAssistantText += piece;
+            setStreamingText(normalizeAssistantText(pendingText));
           }
         }
 
         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);
-          setChatMessages((prev) => [...prev, {role: "assistant", content: cleanedAssistant}]);
+        commitPending(true);
+        // Update conversation history for the backend with the full combined text.
+        if (allAssistantText.trim()) {
+          setChatMessages((prev) => [...prev, {role: "assistant", content: normalizeAssistantText(allAssistantText)}]);
         } else {
-          setChatMessages((prev) => [...prev, {role: "assistant", content: assistant}]);
+          setChatMessages((prev) => [...prev, {role: "assistant", content: allAssistantText}]);
         }
         pushMessage("system", "");
       } catch (error) {
-        pushMessage("error", `Error: ${error instanceof Error ? error.message : String(error)}`);
+        // AbortError fires when user cancels — don't show as an error
+        if (error instanceof Error && error.name !== "AbortError") {
+          pushMessage("error", `Error: ${error.message}`);
+        }
       } finally {
+        abortRunRef.current = null;
         setThinking(false);
       }
     },
@@ -1620,9 +1781,11 @@ export const AstraApp = (): React.JSX.Element => {
       exit,
       handleEvent,
       localFileCache,
+      micSetupDevices,
       openHistory,
       pushMessage,
       sessionId,
+      setMicSetupDevices,
       startLiveVoice,
       stopLiveVoice,
       thinking,
@@ -1636,6 +1799,18 @@ export const AstraApp = (): React.JSX.Element => {
     ]
   );
 
+  const THINKING_COLORS = ["#6a94f5", "#7aa2ff", "#88b4ff", "#99c4ff", "#aad0ff", "#99c4ff", "#88b4ff", "#7aa2ff"];
+  useEffect(() => {
+    if (!thinking) {
+      setThinkingColorIdx(0);
+      return;
+    }
+    const interval = setInterval(() => {
+      setThinkingColorIdx((prev) => (prev + 1) % THINKING_COLORS.length);
+    }, 120);
+    return () => clearInterval(interval);
+  }, [thinking]);
+
   useEffect(() => {
     if (!voiceQueuedPrompt || !user || thinking) {
       return;
@@ -1867,7 +2042,11 @@ export const AstraApp = (): React.JSX.Element => {
       <Text color="#7a9bba">
         {`mode ${runtimeMode} · provider ${getProviderForModel(activeModel)} · model ${activeModel} · credits ${
           creditsRemaining ?? "--"
-        }${lastCreditCost !== null ? ` (-${lastCreditCost})` : ""}`}
+        }${lastCreditCost !== null ? ` (-${lastCreditCost})` : ""}${
+          loopCtx
+            ? ` · context: ${loopCtx.in >= 1000 ? `${(loopCtx.in / 1000).toFixed(1)}K` : loopCtx.in} / ${loopCtx.out >= 1000 ? `${(loopCtx.out / 1000).toFixed(1)}K` : loopCtx.out}`
+            : ""
+        }`}
       </Text>
       <Text color="#6c88a8">
         {`scope ${
@@ -1886,7 +2065,7 @@ export const AstraApp = (): React.JSX.Element => {
       </Text>
       <Text color="#2a3a50">{divider}</Text>
       <Text color="#3a5068">/help  /new  /history  /voice  /dictate on|off|status</Text>
-      <Text color="#3a5068">/tools compact|expanded  /settings  /logout  /exit</Text>
+      <Text color="#3a5068">{isSuperAdmin ? "/tools compact|expanded  /settings  /logout  /exit" : "/settings  /logout  /exit"}</Text>
       <Text color="#2a3a50">{divider}</Text>
       <Box flexDirection="column" marginTop={1}>
         {messages.map((message, index) => {
@@ -1900,12 +2079,23 @@ export const AstraApp = (): React.JSX.Element => {
             message.kind !== "system" &&
             prev?.kind !== message.kind &&
             (message.kind === "assistant" || message.kind === "tool");
+          // Show a subtle turn separator before each assistant response that
+          // follows a tool block — makes it easy to see where one turn ends.
+          const needsTurnSeparator =
+            message.kind === "assistant" &&
+            Boolean(prev) &&
+            prev?.kind === "tool";
           if (isSpacing) {
             return <Box key={`${index}-spacer`} marginTop={0}><Text> </Text></Box>;
           }
 
           if (message.kind === "tool" && message.card && !isSuperAdmin) {
             const card = message.card;
+            // In compact mode, hide "start" spinner cards — they create noise
+            // (one per tool call) without adding signal after the run completes.
+            if (toolFeedMode === "compact" && card.kind === "start") {
+              return null;
+            }
             const localityLabel = card.locality === "LOCAL" ? "local" : "cloud";
             const icon =
               card.kind === "error"
@@ -1935,49 +2125,64 @@ export const AstraApp = (): React.JSX.Element => {
                 : card.kind === "preview"
                 ? "#9ad5ff"
                 : "#9bc5ff";
+            // Timestamps fade with age: bright for recent, dim for older
+            const tsAge = message.ts ? Date.now() - message.ts : Infinity;
+            const tsColor = tsAge < 120000 ? "#68d5c8" : tsAge < 600000 ? "#3d8a82" : "#2a5a55";
             return (
               <React.Fragment key={`${index}-${message.kind}`}>
-                {needsGroupGap ? <Text> </Text> : null}
+                {needsTurnSeparator ? <Text color="#1e2e40">{"─".repeat(48)}</Text> : needsGroupGap ? <Text> </Text> : null}
                 <Box flexDirection="row">
                   <Text color={style.labelColor}>{paddedLabel}</Text>
-                  <Box flexDirection="column">
-                    <Text color={accent}>
-                      {icon} {card.summary}
-                      {card.count && card.count > 1 ? <Text color="#9cb8d8"> (x{card.count})</Text> : null}
-                      <Text color="#5a7a9a"> · {localityLabel}</Text>
-                    </Text>
-                    {toolFeedMode === "expanded" ? (
-                      <>
-                        {card.path ? <Text color="#6c88a8">path: {card.path}</Text> : null}
-                        {(card.snippetLines ?? []).slice(0, TOOL_SNIPPET_LINES).map((line, idx) => (
-                          <Text key={`${index}-snippet-${idx}`} color="#8ea1bd">
-                            {line}
-                          </Text>
-                        ))}
-                      </>
-                    ) : null}
+                  <Box flexDirection="row" flexGrow={1}>
+                    <Box flexGrow={1} flexDirection="column">
+                      <Text color={accent}>
+                        {icon} {card.summary}
+                        {card.path ? <Text color="#ffffff"> {card.path}</Text> : null}
+                        {card.count && card.count > 1 ? <Text color="#9cb8d8"> (x{card.count})</Text> : null}
+                        <Text color="#5a7a9a"> · {localityLabel}</Text>
+                      </Text>
+                      {toolFeedMode === "expanded" ? (
+                        <>
+                          {card.path ? <Text color="#6c88a8">path: {card.path}</Text> : null}
+                          {(card.snippetLines ?? []).slice(0, TOOL_SNIPPET_LINES).map((line, idx) => (
+                            <Text key={`${index}-snippet-${idx}`} color="#8ea1bd">
+                              {line}
+                            </Text>
+                          ))}
+                        </>
+                      ) : null}
+                    </Box>
+                    {message.ts ? <Text color={tsColor}> {formatTime(message.ts)}</Text> : null}
                   </Box>
                 </Box>
               </React.Fragment>
             );
           }
 
+          const showTs = Boolean(message.ts) && (message.kind === "user" || message.kind === "assistant");
+          const tsAge2 = message.ts ? Date.now() - message.ts : Infinity;
+          const tsColor2 = tsAge2 < 120000 ? "#68d5c8" : tsAge2 < 600000 ? "#3d8a82" : "#2a5a55";
           return (
             <React.Fragment key={`${index}-${message.kind}`}>
-              {needsGroupGap ? <Text> </Text> : null}
+              {needsTurnSeparator ? <Text color="#1e2e40">{"─".repeat(48)}</Text> : needsGroupGap ? <Text> </Text> : null}
               <Box 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 flexDirection="row" flexGrow={1}>
+                  {message.kind === "assistant" ? (
+                    <Box flexGrow={1} flexDirection="column">
+                      {renderMarkdownContent(message.text, style.textColor, `assistant-${index}`)}
+                    </Box>
+                  ) : (
+                    <Box flexGrow={1}>
+                      <Text color={style.textColor} bold={style.bold && message.kind === "error"}>
+                        {message.text}
+                      </Text>
+                    </Box>
+                  )}
+                  {showTs ? <Text color={tsColor2}> {formatTime(message.ts as number)}</Text> : null}
+                </Box>
               </Box>
             </React.Fragment>
           );
@@ -1990,12 +2195,13 @@ export const AstraApp = (): React.JSX.Element => {
         ) : null}
       </Box>
       <Text color="#2a3a50">{divider}</Text>
-      {thinking ? (
+      {thinking && !streamingText ? (
         <Box flexDirection="row" marginTop={1}>
           <Text color="#7aa2ff">{"◆ astra".padEnd(LABEL_WIDTH, " ")}</Text>
-          <Text color="#6080a0">
+          <Text color={(THINKING_COLORS[thinkingColorIdx] ?? "#7aa2ff") as string}>
             <Spinner type="dots2" />
-            <Text color="#8aa2c9"> thinking...</Text>
+            <Text color={(THINKING_COLORS[thinkingColorIdx] ?? "#7aa2ff") as string}> Working...</Text>
+            <Text color="#2a4060">  esc to cancel</Text>
           </Text>
         </Box>
       ) : null}
@@ -2018,7 +2224,6 @@ export const AstraApp = (): React.JSX.Element => {
         <TextInput
           value={prompt}
           onSubmit={(value) => {
-            setPrompt("");
             void sendPrompt(value);
           }}
           onChange={(value) => {