@astra-code/astra-ai 0.1.6 → 0.1.8

package/src/app/App.tsx

@@ -25,6 +25,7 @@ type UiMessage = {
   kind: "system" | "user" | "assistant" | "tool" | "error";
   text: string;
   card?: ToolCard;
+  ts?: number;
 };
 
 type HistoryMode = "picker" | "sessions";
@@ -77,9 +78,29 @@ const FOUNDER_WELCOME = centerLine("Welcome to Astra from Astra CEO & Founder, S
 const HISTORY_SETTINGS_URL = "https://astra-web-builder.vercel.app/settings";
 const VOICE_SILENCE_MS = Number(process.env.ASTRA_VOICE_SILENCE_MS ?? "3000");
 
-const VOICE_MIN_CHARS = Number(process.env.ASTRA_VOICE_MIN_CHARS ?? "4");
+const VOICE_MIN_CHARS = Number(process.env.ASTRA_VOICE_MIN_CHARS ?? "10");
 const VOICE_DUPLICATE_WINDOW_MS = Number(process.env.ASTRA_VOICE_DUPLICATE_WINDOW_MS ?? "10000");
-const VOICE_NOISE_WORDS = new Set(["you", "yes", "yeah", "yep", "ok", "okay", "uh", "um", "hmm"]);
+const VOICE_NOISE_WORDS = new Set([
+  "you", "yes", "yeah", "yep", "ok", "okay", "uh", "um", "hmm", "hm",
+  "oh", "ah", "eh", "the", "a", "an", "and", "or", "is", "it", "in",
+  "to", "for", "of", "on", "at", "by", "with", "that", "this", "so",
+  "right", "like", "just", "hi", "hey", "bye", "no",
+]);
+
+// Known Whisper hallucination phrases triggered by silence/background noise
+const VOICE_HALLUCINATION_PHRASES = [
+  "thank you for watching",
+  "thanks for watching",
+  "please subscribe",
+  "like and subscribe",
+  "click click click",
+  "hallelujah",
+  "subtitles by",
+  "transcribed by",
+  "www.",
+  "www.youtube",
+];
+
 const TOOL_SNIPPET_LINES = 6;
 const NOISY_EVENT_TYPES = new Set([
   "timing",
@@ -198,6 +219,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 +278,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,52 +313,85 @@ 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 => {
   const normalized = text.trim().toLowerCase();
-  if (!normalized) {
-    return true;
-  }
-  if (normalized.length < VOICE_MIN_CHARS) {
-    return true;
-  }
-  const tokens = normalized.split(/\s+/).filter(Boolean);
-  if (tokens.length === 0) {
-    return true;
-  }
-  const nonNoise = tokens.filter((t) => !VOICE_NOISE_WORDS.has(t));
-  if (nonNoise.length === 0) {
-    return true;
+  if (!normalized) return true;
+
+  // Strip leading punctuation/artifacts Whisper adds to silence ". " "- " etc.
+  const cleaned = normalized.replace(/^[\s.,!?…\-–—]+/, "").trim();
+  if (!cleaned || cleaned.length < VOICE_MIN_CHARS) return true;
+
+  // Known Whisper hallucination phrases
+  if (VOICE_HALLUCINATION_PHRASES.some((p) => cleaned.includes(p))) return true;
+
+  // Tokenize stripping punctuation so "okay." isn't treated as non-noise
+  const tokens = cleaned
+    .split(/\s+/)
+    .map((t) => t.replace(/[.,!?;:'"()\-…]+/g, ""))
+    .filter(Boolean);
+  if (tokens.length === 0) return true;
+
+  const nonNoise = tokens.filter((t) => t.length > 1 && !VOICE_NOISE_WORDS.has(t));
+  if (nonNoise.length === 0) return true;
+
+  // Repetition pattern: same short fragment repeated 3+ times = hallucination
+  // e.g. "Thank you. Thank you. Thank you for watching."
+  const wordList = cleaned.split(/\s+/).map((w) => w.replace(/[.,!?]/g, ""));
+  if (wordList.length >= 4) {
+    const uniqueWords = new Set(wordList.filter((w) => w.length > 2));
+    if (uniqueWords.size <= 2) return true;
   }
+
   return false;
 };
 
@@ -602,9 +671,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 +729,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);
@@ -662,6 +741,7 @@ export const AstraApp = (): React.JSX.Element => {
   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);
@@ -677,12 +757,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 &&
@@ -991,6 +1071,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") {
@@ -1323,17 +1410,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;
         }
@@ -1383,6 +1471,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
@@ -1426,12 +1524,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} : {}),
             });
           }
         }
@@ -1443,7 +1542,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(
@@ -1452,6 +1551,7 @@ export const AstraApp = (): React.JSX.Element => {
       if (!text || !user || thinking) {
         return;
       }
+      setPrompt("");
 
       // Mic onboarding: intercept when waiting for device selection.
       if (micSetupDevices !== null) {
@@ -1478,18 +1578,30 @@ export const AstraApp = (): React.JSX.Element => {
       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", "");
@@ -1605,6 +1717,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.
@@ -1615,8 +1731,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,
@@ -1624,7 +1760,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;
@@ -1638,29 +1775,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);
       }
     },
@@ -1689,6 +1832,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;
@@ -1920,7 +2075,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 ${
@@ -1939,7 +2098,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) => {
@@ -1953,12 +2112,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"
@@ -1988,49 +2158,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>
           );
@@ -2043,12 +2228,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}
@@ -2071,7 +2257,6 @@ export const AstraApp = (): React.JSX.Element => {
         <TextInput
           value={prompt}
           onSubmit={(value) => {
-            setPrompt("");
             void sendPrompt(value);
           }}
           onChange={(value) => {