@astra-code/astra-ai 0.1.6 → 0.1.8

package/dist/app/App.js

@@ -45,9 +45,27 @@ const centerLine = (text, width = WELCOME_WIDTH) => {
 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 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",
@@ -151,6 +169,14 @@ const extractAssistantText = (event) => {
 };
 const LABEL_WIDTH = 10;
 const HEADER_PATH_MAX = Number(process.env.ASTRA_HEADER_PATH_MAX ?? "42");
+const formatTime = (ts) => {
+    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;
 const styleForKind = (kind) => {
@@ -193,7 +219,13 @@ const normalizeAssistantText = (input) => {
         // 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")
@@ -220,50 +252,85 @@ const normalizeAssistantText = (input) => {
     }
     return deduped.join("\n\n").trim();
 };
+const guessDevUrl = (command) => {
+    // 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, data, success) => {
     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: 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) => {
     const normalized = text.trim().toLowerCase();
-    if (!normalized) {
+    if (!normalized)
         return true;
-    }
-    if (normalized.length < VOICE_MIN_CHARS) {
+    // Strip leading punctuation/artifacts Whisper adds to silence ". " "- " etc.
+    const cleaned = normalized.replace(/^[\s.,!?…\-–—]+/, "").trim();
+    if (!cleaned || cleaned.length < VOICE_MIN_CHARS)
         return true;
-    }
-    const tokens = normalized.split(/\s+/).filter(Boolean);
-    if (tokens.length === 0) {
+    // Known Whisper hallucination phrases
+    if (VOICE_HALLUCINATION_PHRASES.some((p) => cleaned.includes(p)))
         return true;
-    }
-    const nonNoise = tokens.filter((t) => !VOICE_NOISE_WORDS.has(t));
-    if (nonNoise.length === 0) {
+    // 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;
 };
@@ -442,9 +509,17 @@ export const AstraApp = () => {
     const welcomeLine = dividerWidth < 96 ? "Welcome to Astra" : FOUNDER_WELCOME;
     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(new Map());
+    const abortRunRef = useRef(null);
     const writeLocalFile = useCallback((relPath, content, language) => {
         try {
             const abs = join(workspaceRoot, relPath);
@@ -483,6 +558,7 @@ export const AstraApp = () => {
     const [activeModel, setActiveModel] = useState(getDefaultModel());
     const [creditsRemaining, setCreditsRemaining] = useState(null);
     const [lastCreditCost, setLastCreditCost] = useState(null);
+    const [loopCtx, setLoopCtx] = useState(null);
     const runtimeMode = getRuntimeMode();
     const [prompt, setPrompt] = useState("");
     const [thinking, setThinking] = useState(false);
@@ -494,6 +570,7 @@ export const AstraApp = () => {
     const [voiceQueuedPrompt, setVoiceQueuedPrompt] = useState(null);
     const [micSetupDevices, setMicSetupDevices] = useState(null);
     const [toolFeedMode, setToolFeedMode] = useState("compact");
+    const [thinkingColorIdx, setThinkingColorIdx] = useState(0);
     const [historyOpen, setHistoryOpen] = useState(false);
     const [historyMode, setHistoryMode] = useState("picker");
     const [historyPickerIndex, setHistoryPickerIndex] = useState(0);
@@ -508,11 +585,11 @@ export const AstraApp = () => {
     const fileEditBuffersRef = useRef(new Map());
     const isSuperAdmin = user?.role === "super_admin";
     const pushMessage = useCallback((kind, text) => {
-        setMessages((prev) => [...prev, { kind, text }].slice(-300));
+        setMessages((prev) => [...prev, { kind, text, ts: Date.now() }].slice(-300));
     }, []);
     const pushToolCard = useCallback((card) => {
         setMessages((prev) => {
-            const nextEntry = { kind: "tool", text: card.summary, card };
+            const nextEntry = { kind: "tool", text: card.summary, card, ts: Date.now() };
             const last = prev[prev.length - 1];
             if (last &&
                 last.kind === "tool" &&
@@ -806,6 +883,12 @@ export const AstraApp = () => {
             exit();
             return;
         }
+        if (key.escape && thinking) {
+            abortRunRef.current?.abort();
+            pushMessage("system", "Cancelled.");
+            pushMessage("system", "");
+            return;
+        }
         if (historyOpen) {
             if (key.escape) {
                 if (historyMode === "sessions") {
@@ -1122,16 +1205,18 @@ export const AstraApp = () => {
                 }
             }
             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;
             }
@@ -1176,6 +1261,16 @@ export const AstraApp = () => {
                 pushMessage("system", "");
             }
         }
+        if (event.type === "timing") {
+            const ev = event;
+            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
                 ? event.recommendation
@@ -1213,12 +1308,13 @@ export const AstraApp = () => {
                     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 } : {}),
                     });
                 }
             }
@@ -1230,12 +1326,13 @@ export const AstraApp = () => {
             }
         }
         return null;
-    }, [backend, deleteLocalFile, isSuperAdmin, pushMessage, pushToolCard, stopLiveVoice, voiceEnabled, writeLocalFile]);
+    }, [backend, deleteLocalFile, isSuperAdmin, pushMessage, pushToolCard, setLoopCtx, stopLiveVoice, voiceEnabled, writeLocalFile]);
     const sendPrompt = useCallback(async (rawPrompt) => {
         const text = rawPrompt.trim();
         if (!text || !user || thinking) {
             return;
         }
+        setPrompt("");
         // Mic onboarding: intercept when waiting for device selection.
         if (micSetupDevices !== null) {
             const idx = parseInt(text, 10);
@@ -1258,17 +1355,29 @@ export const AstraApp = () => {
             return;
         }
         if (text === "/help") {
-            pushMessage("system", "/new  /history  /voice  /dictate on|off|status  /tools compact|expanded  /settings  /settings model <id>  /logout  /exit");
+            pushMessage("system", 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", "");
@@ -1367,6 +1476,9 @@ export const AstraApp = () => {
         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.
             // Merge in any files created/edited during this session so edits
@@ -1375,8 +1487,25 @@ export const AstraApp = () => {
             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 = "";
+            // `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,
@@ -1384,7 +1513,8 @@ export const AstraApp = () => {
                 workspaceRoot,
                 workspaceTree,
                 workspaceFiles: mergedFiles,
-                model: activeModel
+                model: activeModel,
+                signal: abortController.signal
             })) {
                 if (event.type === "run_in_terminal") {
                     localActionConfirmed = true;
@@ -1398,30 +1528,37 @@ export const AstraApp = () => {
                 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);
         }
     }, [
@@ -1447,6 +1584,17 @@ export const AstraApp = () => {
         voiceWaitingForSilence,
         workspaceRoot
     ]);
+    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;
@@ -1509,7 +1657,9 @@ export const AstraApp = () => {
                                 return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Text, { color: active ? "#dce9ff" : "#7a9bba", children: [active ? "❯ " : "  ", (row.title || "Untitled").slice(0, 58).padEnd(60, " ")] }), _jsxs(Text, { color: "#5a7a9a", children: [String(row.total_messages ?? 0).padStart(3, " "), " msgs \u00B7 ", formatSessionDate(row.updated_at)] })] }, row.id));
                             }) })), _jsx(Text, { color: "#2a3a50", children: divider }), _jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Text, { color: "#5a7a9a", children: ["Page ", historyPage + 1, " / ", historyPageCount] }), _jsxs(Text, { color: "#5a7a9a", children: ["Selected: ", selected ? selected.id : "--"] })] })] }))] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "#7aa2ff", children: brand }), _jsx(Text, { color: "#8ea1bd", children: welcomeLine }), _jsx(Text, { color: "#2a3a50", children: divider }), _jsx(Text, { color: "#7a9bba", children: `mode ${runtimeMode} · provider ${getProviderForModel(activeModel)} · model ${activeModel} · credits ${creditsRemaining ?? "--"}${lastCreditCost !== null ? ` (-${lastCreditCost})` : ""}` }), _jsx(Text, { color: "#6c88a8", children: `scope ${workspaceRoot.length > HEADER_PATH_MAX ? `…${workspaceRoot.slice(-(HEADER_PATH_MAX - 1))}` : workspaceRoot} · voice ${voiceEnabled
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "#7aa2ff", children: brand }), _jsx(Text, { color: "#8ea1bd", children: welcomeLine }), _jsx(Text, { color: "#2a3a50", children: divider }), _jsx(Text, { color: "#7a9bba", children: `mode ${runtimeMode} · provider ${getProviderForModel(activeModel)} · model ${activeModel} · credits ${creditsRemaining ?? "--"}${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}`
+                    : ""}` }), _jsx(Text, { color: "#6c88a8", children: `scope ${workspaceRoot.length > HEADER_PATH_MAX ? `…${workspaceRoot.slice(-(HEADER_PATH_MAX - 1))}` : workspaceRoot} · voice ${voiceEnabled
                     ? voicePreparing
                         ? "on/preparing"
                         : voiceListening
@@ -1517,7 +1667,7 @@ export const AstraApp = () => {
                                 ? "on/waiting"
                                 : "on/listening"
                             : "on/standby"
-                    : "off"}` }), _jsx(Text, { color: "#2a3a50", children: divider }), _jsx(Text, { color: "#3a5068", children: "/help  /new  /history  /voice  /dictate on|off|status" }), _jsx(Text, { color: "#3a5068", children: "/tools compact|expanded  /settings  /logout  /exit" }), _jsx(Text, { color: "#2a3a50", children: divider }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [messages.map((message, index) => {
+                    : "off"}` }), _jsx(Text, { color: "#2a3a50", children: divider }), _jsx(Text, { color: "#3a5068", children: "/help  /new  /history  /voice  /dictate on|off|status" }), _jsx(Text, { color: "#3a5068", children: isSuperAdmin ? "/tools compact|expanded  /settings  /logout  /exit" : "/settings  /logout  /exit" }), _jsx(Text, { color: "#2a3a50", children: divider }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [messages.map((message, index) => {
                         const prev = index > 0 ? messages[index - 1] : null;
                         const style = styleForKind(message.kind);
                         const paddedLabel = style.label.padEnd(LABEL_WIDTH, " ");
@@ -1527,11 +1677,21 @@ export const AstraApp = () => {
                             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 _jsx(Box, { marginTop: 0, children: _jsx(Text, { children: " " }) }, `${index}-spacer`);
                         }
                         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"
                                 ? "✕"
@@ -1559,11 +1719,16 @@ export const AstraApp = () => {
                                             : card.kind === "preview"
                                                 ? "#9ad5ff"
                                                 : "#9bc5ff";
-                            return (_jsxs(React.Fragment, { children: [needsGroupGap ? _jsx(Text, { children: " " }) : null, _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: style.labelColor, children: paddedLabel }), _jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: accent, children: [icon, " ", card.summary, card.count && card.count > 1 ? _jsxs(Text, { color: "#9cb8d8", children: [" (x", card.count, ")"] }) : null, _jsxs(Text, { color: "#5a7a9a", children: [" \u00B7 ", localityLabel] })] }), toolFeedMode === "expanded" ? (_jsxs(_Fragment, { children: [card.path ? _jsxs(Text, { color: "#6c88a8", children: ["path: ", card.path] }) : null, (card.snippetLines ?? []).slice(0, TOOL_SNIPPET_LINES).map((line, idx) => (_jsx(Text, { color: "#8ea1bd", children: line }, `${index}-snippet-${idx}`)))] })) : null] })] })] }, `${index}-${message.kind}`));
+                            // 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 (_jsxs(React.Fragment, { children: [needsTurnSeparator ? _jsx(Text, { color: "#1e2e40", children: "─".repeat(48) }) : needsGroupGap ? _jsx(Text, { children: " " }) : null, _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: style.labelColor, children: paddedLabel }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsxs(Text, { color: accent, children: [icon, " ", card.summary, card.path ? _jsxs(Text, { color: "#ffffff", children: [" ", card.path] }) : null, card.count && card.count > 1 ? _jsxs(Text, { color: "#9cb8d8", children: [" (x", card.count, ")"] }) : null, _jsxs(Text, { color: "#5a7a9a", children: [" \u00B7 ", localityLabel] })] }), toolFeedMode === "expanded" ? (_jsxs(_Fragment, { children: [card.path ? _jsxs(Text, { color: "#6c88a8", children: ["path: ", card.path] }) : null, (card.snippetLines ?? []).slice(0, TOOL_SNIPPET_LINES).map((line, idx) => (_jsx(Text, { color: "#8ea1bd", children: line }, `${index}-snippet-${idx}`)))] })) : null] }), message.ts ? _jsxs(Text, { color: tsColor, children: [" ", formatTime(message.ts)] }) : null] })] })] }, `${index}-${message.kind}`));
                         }
-                        return (_jsxs(React.Fragment, { children: [needsGroupGap ? _jsx(Text, { children: " " }) : null, _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: style.labelColor, bold: style.bold, children: paddedLabel }), message.kind === "assistant" ? (_jsx(Box, { flexDirection: "column", children: renderMarkdownContent(message.text, style.textColor, `assistant-${index}`) })) : (_jsx(Text, { color: style.textColor, bold: style.bold && message.kind === "error", children: message.text }))] })] }, `${index}-${message.kind}`));
-                    }), streamingText ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "#7aa2ff", children: styleForKind("assistant").label.padEnd(LABEL_WIDTH, " ") }), _jsx(Box, { flexDirection: "column", children: renderMarkdownContent(streamingText, "#dce9ff", "streaming") })] })) : null] }), _jsx(Text, { color: "#2a3a50", children: divider }), thinking ? (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { color: "#7aa2ff", children: "◆ astra".padEnd(LABEL_WIDTH, " ") }), _jsxs(Text, { color: "#6080a0", children: [_jsx(Spinner, { type: "dots2" }), _jsx(Text, { color: "#8aa2c9", children: " thinking..." })] })] })) : null, voiceEnabled && !thinking ? (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { color: "#9ad5ff", children: "🎤 voice".padEnd(LABEL_WIDTH, " ") }), voicePreparing ? (_jsx(Text, { color: "#f4d58a", children: "\uD83D\uDFE1 preparing microphone..." })) : voiceListening && !voiceWaitingForSilence ? (_jsx(Text, { color: "#9de3b4", children: "\uD83D\uDFE2 listening now - speak clearly" })) : voiceWaitingForSilence ? (_jsx(Text, { color: "#b7c4d8", children: "\u23F3 speech detected - waiting for silence to send" })) : (_jsx(Text, { color: "#6f8199", children: "\u26AA voice armed - preparing next listen window" }))] })) : null, _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(Text, { color: "#7aa2ff", children: "\u276F " }), _jsx(TextInput, { value: prompt, onSubmit: (value) => {
-                            setPrompt("");
+                        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 (_jsxs(React.Fragment, { children: [needsTurnSeparator ? _jsx(Text, { color: "#1e2e40", children: "─".repeat(48) }) : needsGroupGap ? _jsx(Text, { children: " " }) : null, _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: style.labelColor, bold: style.bold, children: paddedLabel }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [message.kind === "assistant" ? (_jsx(Box, { flexGrow: 1, flexDirection: "column", children: renderMarkdownContent(message.text, style.textColor, `assistant-${index}`) })) : (_jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: style.textColor, bold: style.bold && message.kind === "error", children: message.text }) })), showTs ? _jsxs(Text, { color: tsColor2, children: [" ", formatTime(message.ts)] }) : null] })] })] }, `${index}-${message.kind}`));
+                    }), streamingText ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "#7aa2ff", children: styleForKind("assistant").label.padEnd(LABEL_WIDTH, " ") }), _jsx(Box, { flexDirection: "column", children: renderMarkdownContent(streamingText, "#dce9ff", "streaming") })] })) : null] }), _jsx(Text, { color: "#2a3a50", children: divider }), thinking && !streamingText ? (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { color: "#7aa2ff", children: "◆ astra".padEnd(LABEL_WIDTH, " ") }), _jsxs(Text, { color: (THINKING_COLORS[thinkingColorIdx] ?? "#7aa2ff"), children: [_jsx(Spinner, { type: "dots2" }), _jsx(Text, { color: (THINKING_COLORS[thinkingColorIdx] ?? "#7aa2ff"), children: " Working..." }), _jsx(Text, { color: "#2a4060", children: "  esc to cancel" })] })] })) : null, voiceEnabled && !thinking ? (_jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(Text, { color: "#9ad5ff", children: "🎤 voice".padEnd(LABEL_WIDTH, " ") }), voicePreparing ? (_jsx(Text, { color: "#f4d58a", children: "\uD83D\uDFE1 preparing microphone..." })) : voiceListening && !voiceWaitingForSilence ? (_jsx(Text, { color: "#9de3b4", children: "\uD83D\uDFE2 listening now - speak clearly" })) : voiceWaitingForSilence ? (_jsx(Text, { color: "#b7c4d8", children: "\u23F3 speech detected - waiting for silence to send" })) : (_jsx(Text, { color: "#6f8199", children: "\u26AA voice armed - preparing next listen window" }))] })) : null, _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(Text, { color: "#7aa2ff", children: "\u276F " }), _jsx(TextInput, { value: prompt, onSubmit: (value) => {
                             void sendPrompt(value);
                         }, onChange: (value) => {
                             if (!voiceListening) {