@kirosnn/mosaic 0.71.0 → 0.74.0

package/src/components/Main.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef } from "react";
-import type { ImagePart, TextPart, UserContent } from "ai";
+import { useState, useEffect, useRef } from "react";
+import type { ImagePart, TextPart, UserContent } from "ai";
 import { useKeyboard } from "@opentui/react";
 import { Agent } from "../agent";
 import { saveConversation, addInputToHistory, type ConversationHistory, type ConversationStep } from "../utils/history";
@@ -9,19 +9,20 @@ import { initializeCommands, isCommand, executeCommand } from '../utils/commands
 import type { InputSubmitMeta } from './CustomInput';
 
 import { subscribeQuestion, type QuestionRequest } from "../utils/questionBridge";
-import { subscribeApprovalAccepted, type ApprovalAccepted } from "../utils/approvalBridge";
-import { subscribeUndoRedo } from "../utils/undoRedoBridge";
-import { setExploreAbortController, setExploreToolCallback, abortExplore } from "../utils/exploreBridge";
-import { initializeSession, saveState } from "../utils/undoRedo";
-import { resetFileChanges } from "../utils/fileChangeTracker";
-import { getCurrentQuestion, cancelQuestion } from "../utils/questionBridge";
-import { getCurrentApproval, cancelApproval } from "../utils/approvalBridge";
-import { BLEND_WORDS, type MainProps, type Message } from "./main/types";
-import { HomePage } from './main/HomePage';
-import { ChatPage } from './main/ChatPage';
-import type { ImageAttachment } from "../utils/images";
-import { subscribeImageCommand, setImageSupport } from "../utils/imageBridge";
-import { findModelsDevModelById, modelAcceptsImages } from "../utils/models";
+import { subscribeApprovalAccepted } from "../utils/approvalBridge";
+import { setExploreAbortController, setExploreToolCallback } from "../utils/exploreBridge";
+import { getCurrentQuestion, cancelQuestion } from "../utils/questionBridge";
+import { getCurrentApproval, cancelApproval } from "../utils/approvalBridge";
+import { BLEND_WORDS, type MainProps, type Message } from "./main/types";
+import { HomePage } from './main/HomePage';
+import { ChatPage } from './main/ChatPage';
+import type { ImageAttachment } from "../utils/images";
+import { subscribeImageCommand, setImageSupport } from "../utils/imageBridge";
+import { findModelsDevModelById, modelAcceptsImages, getModelsDevContextLimit } from "../utils/models";
+import { DEFAULT_SYSTEM_PROMPT, processSystemPrompt } from "../agent/prompts/systemPrompt";
+import { estimateTokensFromText, estimateTokensForContent, getDefaultContextBudget } from "../utils/tokenEstimator";
+
+type CompactableMessage = Pick<Message, "role" | "content" | "thinkingContent" | "toolName">;
 
 function extractTitle(content: string, alreadyResolved: boolean): { title: string | null; cleanContent: string; isPending: boolean; noTitle: boolean } {
   const trimmed = content.trimStart();
@@ -49,6 +50,147 @@ function setTerminalTitle(title: string) {
   process.title = `⁘ ${title}`;
 }
 
+export function normalizeWhitespace(text: string): string {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+export function truncateText(text: string, maxChars: number): string {
+  if (text.length <= maxChars) return text;
+  return text.slice(0, Math.max(0, maxChars - 3)) + "...";
+}
+
+export function estimateTokensForMessage(message: CompactableMessage): number {
+  return estimateTokensForContent(message.content || "", message.thinkingContent || undefined);
+}
+
+export function estimateTokensForMessages(messages: CompactableMessage[]): number {
+  return messages.reduce((sum, message) => sum + estimateTokensForMessage(message), 0);
+}
+
+export function estimateTotalTokens(messages: CompactableMessage[], systemPrompt: string): number {
+  const systemTokens = estimateTokensFromText(systemPrompt) + 8;
+  return systemTokens + estimateTokensForMessages(messages);
+}
+
+export function shouldAutoCompact(totalTokens: number, maxContextTokens: number): boolean {
+  if (!Number.isFinite(maxContextTokens) || maxContextTokens <= 0) return false;
+  const threshold = Math.floor(maxContextTokens * 0.95);
+  return totalTokens >= threshold;
+}
+
+export function summarizeMessage(message: CompactableMessage, isLastUser: boolean): string {
+  if (message.role === "tool") {
+    const name = message.toolName || "tool";
+    const text = message.content || "";
+    const isError = text.toLowerCase().includes('error') || text.toLowerCase().includes('failed');
+    const status = isError ? 'FAILED' : 'OK';
+    const cleaned = normalizeWhitespace(text);
+    return `[tool:${name} ${status}] ${truncateText(cleaned, 120)}`;
+  }
+
+  if (message.role === "assistant") {
+    const cleaned = normalizeWhitespace(message.content || "");
+    const sentenceMatch = cleaned.match(/^[^.!?\n]{10,}[.!?]/);
+    const summary = sentenceMatch ? sentenceMatch[0] : cleaned;
+    return `assistant: ${truncateText(summary, 200)}`;
+  }
+
+  const cleaned = normalizeWhitespace(message.content || "");
+  const limit = isLastUser ? cleaned.length : 400;
+  return `user: ${truncateText(cleaned, limit)}`;
+}
+
+export function buildSummary(messages: CompactableMessage[], maxTokens: number): string {
+  const maxChars = Math.max(0, maxTokens * 3);
+  const header = "Résumé de conversation (compact):";
+  let charCount = header.length + 1;
+  const lines: string[] = [];
+
+  let lastUserIndex = -1;
+  for (let i = messages.length - 1; i >= 0; i--) {
+    if (messages[i]!.role === 'user') { lastUserIndex = i; break; }
+  }
+
+  for (let i = 0; i < messages.length; i++) {
+    if (charCount >= maxChars) break;
+    const line = `- ${summarizeMessage(messages[i]!, i === lastUserIndex)}`;
+    charCount += line.length + 1;
+    lines.push(line);
+  }
+  const body = lines.join("\n");
+  const full = `${header}\n${body}`.trim();
+  return truncateText(full, maxChars);
+}
+
+export function collectContextFiles(messages: Message[]): string[] {
+  const files = new Set<string>();
+  for (const message of messages) {
+    if (message.role !== "tool") continue;
+    if (!message.toolArgs) continue;
+    const toolName = message.toolName || "";
+    if (!["read", "write", "edit", "list", "grep"].includes(toolName)) continue;
+    const path = message.toolArgs.path;
+    if (typeof path === "string" && path.trim()) {
+      files.add(path.trim());
+    }
+    const pattern = message.toolArgs.pattern;
+    if (toolName === "grep" && typeof pattern === "string" && pattern.trim()) {
+      files.add(pattern.trim());
+    }
+  }
+  return Array.from(files.values()).sort((a, b) => a.localeCompare(b));
+}
+
+export function appendContextFiles(summary: string, files: string[], maxTokens: number): string {
+  if (files.length === 0) return summary;
+  const maxChars = Math.max(0, maxTokens * 4);
+  const list = files.map(f => `- ${f}`).join("\n");
+  const block = `\n\nFichiers conservés après compaction:\n${list}`;
+  return truncateText(`${summary}${block}`, maxChars);
+}
+
+export function compactMessagesForUi(
+  messages: Message[],
+  systemPrompt: string,
+  maxContextTokens: number,
+  createId: () => string,
+  summaryOnly: boolean
+): { messages: Message[]; estimatedTokens: number; didCompact: boolean } {
+  const systemTokens = estimateTokensFromText(systemPrompt) + 8;
+  const totalTokens = systemTokens + estimateTokensForMessages(messages);
+  if (totalTokens <= maxContextTokens && !summaryOnly) {
+    return { messages, estimatedTokens: totalTokens - systemTokens, didCompact: false };
+  }
+
+  const summaryTokens = Math.min(2000, Math.max(400, Math.floor(maxContextTokens * 0.2)));
+  const recentBudget = Math.max(500, maxContextTokens - summaryTokens);
+
+  let recentTokens = 0;
+  const recent: Message[] = [];
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const message = messages[i]!;
+    const msgTokens = estimateTokensForMessage(message);
+    if (recentTokens + msgTokens > recentBudget && recent.length > 0) break;
+    recent.unshift(message);
+    recentTokens += msgTokens;
+  }
+
+  const cutoff = messages.length - recent.length;
+  const older = cutoff > 0 ? messages.slice(0, cutoff) : [];
+  const files = collectContextFiles(messages);
+  const summaryBase = buildSummary(summaryOnly ? messages : (older.length > 0 ? older : messages), summaryTokens);
+  const summary = appendContextFiles(summaryBase, files, summaryTokens);
+  const summaryMessage: Message = {
+    id: createId(),
+    role: "assistant",
+    content: summary
+  };
+
+  const nextMessages = summaryOnly ? [summaryMessage] : [summaryMessage, ...recent];
+  const estimatedTokens = estimateTokensForMessages(nextMessages);
+  return { messages: nextMessages, estimatedTokens, didCompact: true };
+}
+
 export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsOpen = false, commandsOpen = false, initialMessage }: MainProps) {
   const [currentPage, setCurrentPage] = useState<"home" | "chat">(initialMessage ? "chat" : "home");
   const [messages, setMessages] = useState<Message[]>([]);
@@ -58,10 +200,10 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
   const [scrollOffset, setScrollOffset] = useState(0);
   const [terminalHeight, setTerminalHeight] = useState(process.stdout.rows || 24);
   const [terminalWidth, setTerminalWidth] = useState(process.stdout.columns || 80);
-  const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
-  const [currentTitle, setCurrentTitle] = useState<string | null>(null);
-  const [pendingImages, setPendingImages] = useState<ImageAttachment[]>([]);
-  const [imagesSupported, setImagesSupported] = useState(false);
+  const [questionRequest, setQuestionRequest] = useState<QuestionRequest | null>(null);
+  const [currentTitle, setCurrentTitle] = useState<string | null>(null);
+  const [pendingImages, setPendingImages] = useState<ImageAttachment[]>([]);
+  const [imagesSupported, setImagesSupported] = useState(false);
   const currentTitleRef = useRef<string | null>(null);
   const titleExtractedRef = useRef(false);
   const shouldAutoScroll = useRef(true);
@@ -71,37 +213,37 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
   const commandsOpenRef = useRef(commandsOpen);
   const questionRequestRef = useRef<QuestionRequest | null>(questionRequest);
   const initialMessageProcessed = useRef(false);
+  const lastPromptTokensRef = useRef<number>(0);
   const exploreMessageIdRef = useRef<string | null>(null);
   const exploreToolsRef = useRef<Array<{ tool: string; info: string; success: boolean }>>([]);
   const explorePurposeRef = useRef<string>('');
 
   const createId = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 
-  useEffect(() => {
-    initializeCommands();
-    initializeSession();
-  }, []);
-
-  useEffect(() => {
-    const loadSupport = async () => {
-      const config = readConfig();
-      if (!config.model) {
-        setImagesSupported(false);
-        setImageSupport(false);
-        return;
-      }
-      try {
-        const result = await findModelsDevModelById(config.model);
-        const supported = Boolean(result && result.model && modelAcceptsImages(result.model));
-        setImagesSupported(supported);
-        setImageSupport(supported);
-      } catch {
-        setImagesSupported(false);
-        setImageSupport(false);
-      }
-    };
-    loadSupport();
-  }, []);
+  useEffect(() => {
+    initializeCommands();
+  }, []);
+
+  useEffect(() => {
+    const loadSupport = async () => {
+      const config = readConfig();
+      if (!config.model) {
+        setImagesSupported(false);
+        setImageSupport(false);
+        return;
+      }
+      try {
+        const result = await findModelsDevModelById(config.model);
+        const supported = Boolean(result && result.model && modelAcceptsImages(result.model));
+        setImagesSupported(supported);
+        setImageSupport(supported);
+      } catch {
+        setImagesSupported(false);
+        setImageSupport(false);
+      }
+    };
+    loadSupport();
+  }, []);
 
   useEffect(() => {
     let lastExploreTokens = 0;
@@ -139,41 +281,31 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
     };
   }, []);
 
-  useEffect(() => {
-    return subscribeUndoRedo((state, action) => {
-      if (state) {
-        setMessages(state.messages);
-        resetFileChanges();
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    return subscribeImageCommand((event) => {
-      if (event.type === "clear") {
-        setPendingImages([]);
-        return;
-      }
-      if (event.type === "remove") {
-        setPendingImages((prev) => prev.filter((img) => img.id !== event.id));
-        return;
-      }
-      if (!imagesSupported) return;
-      setPendingImages((prev) => [...prev, event.image]);
-    });
-  }, [imagesSupported]);
-
-  useEffect(() => {
-    if (!imagesSupported) {
-      setPendingImages([]);
-    }
-  }, [imagesSupported]);
+  useEffect(() => {
+    return subscribeImageCommand((event) => {
+      if (event.type === "clear") {
+        setPendingImages([]);
+        return;
+      }
+      if (event.type === "remove") {
+        setPendingImages((prev) => prev.filter((img) => img.id !== event.id));
+        return;
+      }
+      if (!imagesSupported) return;
+      setPendingImages((prev) => [...prev, event.image]);
+    });
+  }, [imagesSupported]);
+
+  useEffect(() => {
+    if (!imagesSupported) {
+      setPendingImages([]);
+    }
+  }, [imagesSupported]);
 
   useEffect(() => {
     const handleResize = () => {
       const newWidth = process.stdout.columns || 80;
       const newHeight = process.stdout.rows || 24;
-      const oldWidth = terminalWidth;
       const oldHeight = terminalHeight;
 
       setTerminalWidth(newWidth);
@@ -199,13 +331,27 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
   useEffect(() => {
     return subscribeApprovalAccepted((accepted) => {
       const isBashTool = accepted.toolName === 'bash';
+      const isMcpTool = accepted.toolName.startsWith('mcp__');
 
-      if (isBashTool) {
+      if (isBashTool || isMcpTool) {
         const { name: toolDisplayName, info: toolInfo } = parseToolHeader(accepted.toolName, accepted.args);
         const runningContent = toolInfo ? `${toolDisplayName} (${toolInfo})` : toolDisplayName;
 
         setMessages((prev: Message[]) => {
           const newMessages = [...prev];
+
+          if (isMcpTool) {
+            const existingIdx = newMessages.findIndex(m => m.isRunning && m.toolName === accepted.toolName);
+            if (existingIdx !== -1) {
+              newMessages[existingIdx] = {
+                ...newMessages[existingIdx]!,
+                content: runningContent,
+                runningStartTime: Date.now()
+              };
+              return newMessages;
+            }
+          }
+
           newMessages.push({
             id: createId(),
             role: "tool",
@@ -308,67 +454,98 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
     }
   }, [copyRequestId, onCopy, messages]);
 
-  useKeyboard((key) => {
-    if ((key.name === 'c' && key.ctrl) || key.sequence === '\x03') {
-      if (getCurrentQuestion()) {
-        cancelQuestion();
-      }
-      if (getCurrentApproval()) {
-        cancelApproval();
-      }
-      abortControllerRef.current?.abort();
-      return;
-    }
-
-    if (key.name === 'escape') {
-      if (getCurrentQuestion()) {
-        cancelQuestion();
-      }
+  useKeyboard((key) => {
+    if ((key.name === 'c' && key.ctrl) || key.sequence === '\x03') {
+      if (getCurrentQuestion()) {
+        cancelQuestion();
+      }
+      if (getCurrentApproval()) {
+        cancelApproval();
+      }
+      abortControllerRef.current?.abort();
+      return;
+    }
+
+    if (key.name === 'escape') {
+      if (getCurrentQuestion()) {
+        cancelQuestion();
+      }
       if (getCurrentApproval()) {
         cancelApproval();
       }
       abortControllerRef.current?.abort();
       return;
-    }
-  });
-
-  const buildUserContent = (text: string, images?: ImageAttachment[]): UserContent => {
-    if (!images || images.length === 0) return text;
-    const parts: Array<TextPart | ImagePart> = [];
-    parts.push({ type: "text", text });
-    for (const img of images) {
-      parts.push({ type: "image", image: img.data, mimeType: img.mimeType });
-    }
-    return parts;
-  };
-
-  const buildConversationHistory = (base: Message[], includeImages: boolean) => {
-    return base
-      .filter((m): m is Message & { role: "user" | "assistant" } => m.role === "user" || m.role === "assistant")
-      .map((m) => {
-        if (m.role === "user") {
-          const content = includeImages ? buildUserContent(m.content, m.images) : m.content;
-          return { role: "user" as const, content };
-        }
-        return { role: "assistant" as const, content: m.content };
-      });
-  };
-
-  const handleSubmit = async (value: string, meta?: InputSubmitMeta) => {
-    if (isProcessing) return;
-
-    const hasPastedContent = Boolean(meta?.isPaste && meta.pastedContent);
-    const hasImages = imagesSupported && pendingImages.length > 0;
-    if (!value.trim() && !hasPastedContent && !hasImages) return;
+    }
+  });
+
+  const buildUserContent = (text: string, images?: ImageAttachment[]): UserContent => {
+    if (!images || images.length === 0) return text;
+    const parts: Array<TextPart | ImagePart> = [];
+    parts.push({ type: "text", text });
+    for (const img of images) {
+      parts.push({ type: "image", image: img.data, mimeType: img.mimeType });
+    }
+    return parts;
+  };
+
+  const buildConversationHistory = (base: Message[], includeImages: boolean) => {
+    return base
+      .filter((m): m is Message & { role: "user" | "assistant" } => m.role === "user" || m.role === "assistant")
+      .map((m) => {
+        if (m.role === "user") {
+          const content = includeImages ? buildUserContent(m.content, m.images) : m.content;
+          return { role: "user" as const, content };
+        }
+        return { role: "assistant" as const, content: m.content };
+      });
+  };
+
+  const handleSubmit = async (value: string, meta?: InputSubmitMeta) => {
+    if (isProcessing) return;
+
+    const hasPastedContent = Boolean(meta?.isPaste && meta.pastedContent);
+    const hasImages = imagesSupported && pendingImages.length > 0;
+    if (!value.trim() && !hasPastedContent && !hasImages) return;
 
     if (isCommand(value)) {
       const result = await executeCommand(value);
       if (result) {
+        if (result.shouldClearMessages === true) {
+          const commandMessage: Message = {
+            id: createId(),
+            role: "slash",
+            content: result.content,
+            isError: !result.success
+          };
+          setMessages([commandMessage]);
+          return;
+        }
+
+        if (result.shouldCompactMessages === true) {
+          const config = readConfig();
+          const rawSystemPrompt = config.systemPrompt || DEFAULT_SYSTEM_PROMPT;
+          const systemPrompt = processSystemPrompt(rawSystemPrompt, true);
+          let maxContextTokens = result.compactMaxTokens ?? config.maxContextTokens;
+          if (!maxContextTokens && config.provider && config.model) {
+            const resolved = await getModelsDevContextLimit(config.provider, config.model);
+            if (typeof resolved === "number") {
+              maxContextTokens = resolved;
+            }
+          }
+          const targetTokens = maxContextTokens ?? getDefaultContextBudget(config.provider);
+          let nextTokens = currentTokens;
+          setMessages(prev => {
+            const compacted = compactMessagesForUi(prev, systemPrompt, targetTokens, createId, true);
+            nextTokens = compacted.estimatedTokens;
+            return compacted.messages;
+          });
+          setCurrentTokens(nextTokens);
+          return;
+        }
+        
         if (result.shouldAddToHistory === true) {
           addInputToHistory(value.trim());
 
-          saveState(messages);
-
           const userMessage: Message = {
             id: createId(),
             role: "user",
@@ -381,6 +558,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
           const localStartTime = Date.now();
           setProcessingStartTime(localStartTime);
           setCurrentTokens(0);
+          lastPromptTokensRef.current = 0;
           shouldAutoScroll.current = true;
 
           const conversationId = createId();
@@ -424,12 +602,12 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             timestamp: Date.now()
           });
 
-          let responseDuration: number | null = null;
-          let responseBlendWord: string | null = null;
-
-          try {
-            const providerStatus = await Agent.ensureProviderReady();
-            if (!providerStatus.ready) {
+          let responseDuration: number | null = null;
+          let responseBlendWord: string | undefined = undefined;
+
+          try {
+            const providerStatus = await Agent.ensureProviderReady();
+            if (!providerStatus.ready) {
               setMessages((prev: Message[]) => {
                 const newMessages = [...prev];
                 newMessages.push({
@@ -445,7 +623,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             }
 
             const agent = new Agent();
-            const conversationHistory = buildConversationHistory([...messages, userMessage], imagesSupported);
+            const conversationHistory = buildConversationHistory([...messages, userMessage], imagesSupported);
             let assistantChunk = '';
             let thinkingChunk = '';
             const pendingToolCalls = new Map<string, { toolName: string; args: Record<string, unknown>; messageId?: string }>();
@@ -524,7 +702,8 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
 
                 const needsApproval = event.toolName === 'write' || event.toolName === 'edit' || event.toolName === 'bash';
                 const isExploreTool = event.toolName === 'explore';
-                const showRunning = event.toolName === 'bash';
+                const isMcpTool = event.toolName.startsWith('mcp__');
+                const showRunning = event.toolName === 'bash' || isMcpTool;
                 let runningMessageId: string | undefined;
 
                 if (isExploreTool) {
@@ -611,8 +790,8 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
                   let runningIndex = -1;
                   if (runningMessageId) {
                     runningIndex = newMessages.findIndex(m => m.id === runningMessageId);
-                  } else if (toolName === 'bash' || toolName === 'explore') {
-                    runningIndex = newMessages.findIndex(m => m.toolName === toolName && m.isRunning === true);
+                  } else if (toolName === 'bash' || toolName === 'explore' || toolName.startsWith('mcp__')) {
+                    runningIndex = newMessages.findIndex(m => m.isRunning && m.toolName === toolName);
                   }
 
                   if (runningIndex !== -1) {
@@ -687,6 +866,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
                     completion: event.usage.completionTokens,
                     total: event.usage.totalTokens
                   };
+                  lastPromptTokensRef.current = event.usage.promptTokens;
                   setCurrentTokens(event.usage.totalTokens);
                 }
               }
@@ -697,44 +877,44 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
               return;
             }
 
-            if (!streamHadError && assistantChunk.trim()) {
-              conversationSteps.push({
-                type: 'assistant',
-                content: assistantChunk,
-                timestamp: Date.now()
-              });
-            }
-
-            responseDuration = Date.now() - localStartTime;
-            if (responseDuration >= 60000) {
-              responseBlendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
-              for (let i = conversationSteps.length - 1; i >= 0; i--) {
-                if (conversationSteps[i]?.type === 'assistant') {
-                  conversationSteps[i] = {
-                    ...conversationSteps[i]!,
-                    responseDuration,
-                    blendWord: responseBlendWord
-                  };
-                  break;
-                }
-              }
-            }
-
-            const conversationData: ConversationHistory = {
-              id: conversationId,
-              timestamp: Date.now(),
-              steps: conversationSteps,
-              totalSteps: stepCount,
-              title: currentTitleRef.current ?? currentTitle ?? null,
-              workspace: process.cwd(),
-              totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
-              model: config.model,
-              provider: config.provider
-            };
-
-            saveConversation(conversationData);
-
-          } catch (error) {
+            if (!streamHadError && assistantChunk.trim()) {
+              conversationSteps.push({
+                type: 'assistant',
+                content: assistantChunk,
+                timestamp: Date.now()
+              });
+            }
+
+            responseDuration = Date.now() - localStartTime;
+            if (responseDuration >= 60000) {
+              responseBlendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+              for (let i = conversationSteps.length - 1; i >= 0; i--) {
+                if (conversationSteps[i]?.type === 'assistant') {
+                  conversationSteps[i] = {
+                    ...conversationSteps[i]!,
+                    responseDuration,
+                    blendWord: responseBlendWord
+                  };
+                  break;
+                }
+              }
+            }
+
+            const conversationData: ConversationHistory = {
+              id: conversationId,
+              timestamp: Date.now(),
+              steps: conversationSteps,
+              totalSteps: stepCount,
+              title: currentTitleRef.current ?? currentTitle ?? null,
+              workspace: process.cwd(),
+              totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
+              model: config.model,
+              provider: config.provider
+            };
+
+            saveConversation(conversationData);
+
+          } catch (error) {
             if (abortController.signal.aborted) {
               notifyAbort();
               return;
@@ -764,14 +944,14 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             if (abortControllerRef.current === abortController) {
               abortControllerRef.current = null;
             }
-            const duration = responseDuration ?? (Date.now() - localStartTime);
-            if (duration >= 60000) {
-              const blendWord = responseBlendWord ?? BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
-              setMessages((prev: Message[]) => {
-                const newMessages = [...prev];
-                for (let i = newMessages.length - 1; i >= 0; i--) {
-                  if (newMessages[i]?.role === 'assistant') {
-                    newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
+            const duration = responseDuration ?? (Date.now() - localStartTime);
+            if (duration >= 60000) {
+              const blendWord = responseBlendWord ?? BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+              setMessages((prev: Message[]) => {
+                const newMessages = [...prev];
+                for (let i = newMessages.length - 1; i >= 0; i--) {
+                  if (newMessages[i]?.role === 'assistant') {
+                    newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
                     break;
                   }
                 }
@@ -806,29 +986,28 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       ? `${meta!.pastedContent!}${value.trim() ? `\n\n${value}` : ''}`
       : value;
 
-    addInputToHistory(value.trim() || (hasPastedContent ? '[Pasted text]' : (hasImages ? '[Image]' : value)));
-
-    saveState(messages);
-
-    const imagesForMessage = imagesSupported ? pendingImages : [];
-
-    const userMessage: Message = {
-      id: createId(),
-      role: "user",
-      content: composedContent,
-      displayContent: meta?.isPaste ? '[Pasted text]' : undefined,
-      images: imagesForMessage.length > 0 ? imagesForMessage : undefined,
-    };
-
-    if (imagesForMessage.length > 0) {
-      setPendingImages([]);
-    }
-
+    addInputToHistory(value.trim() || (hasPastedContent ? '[Pasted text]' : (hasImages ? '[Image]' : value)));
+
+    const imagesForMessage = imagesSupported ? pendingImages : [];
+
+    const userMessage: Message = {
+      id: createId(),
+      role: "user",
+      content: composedContent,
+      displayContent: meta?.isPaste ? '[Pasted text]' : undefined,
+      images: imagesForMessage.length > 0 ? imagesForMessage : undefined,
+    };
+
+    if (imagesForMessage.length > 0) {
+      setPendingImages([]);
+    }
+
     setMessages((prev: Message[]) => [...prev, userMessage]);
     setIsProcessing(true);
     const localStartTime = Date.now();
     setProcessingStartTime(localStartTime);
     setCurrentTokens(0);
+    lastPromptTokensRef.current = 0;
     shouldAutoScroll.current = true;
 
     const conversationId = createId();
@@ -848,6 +1027,18 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
     const estimateTokens = () => Math.ceil(totalChars / 4);
     setCurrentTokens(estimateTokens());
     const config = readConfig();
+    const resolveMaxContextTokens = async () => {
+      if (config.maxContextTokens) return config.maxContextTokens;
+      if (config.provider && config.model) {
+        const resolved = await getModelsDevContextLimit(config.provider, config.model);
+        if (typeof resolved === "number") return resolved;
+      }
+      return undefined;
+    };
+    const buildSystemPrompt = () => {
+      const rawSystemPrompt = config.systemPrompt || DEFAULT_SYSTEM_PROMPT;
+      return processSystemPrompt(rawSystemPrompt, true);
+    };
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
     let abortNotified = false;
@@ -866,19 +1057,19 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       });
     };
 
-    conversationSteps.push({
-      type: 'user',
-      content: composedContent,
-      timestamp: Date.now(),
-      images: imagesForMessage.length > 0 ? imagesForMessage : undefined
-    });
-
-          let responseDuration: number | null = null;
-          let responseBlendWord: string | null = null;
-
-          try {
-            const providerStatus = await Agent.ensureProviderReady();
-            if (!providerStatus.ready) {
+    conversationSteps.push({
+      type: 'user',
+      content: composedContent,
+      timestamp: Date.now(),
+      images: imagesForMessage.length > 0 ? imagesForMessage : undefined
+    });
+
+          let responseDuration: number | null = null;
+          let responseBlendWord: string | undefined = undefined;
+
+          try {
+            const providerStatus = await Agent.ensureProviderReady();
+            if (!providerStatus.ready) {
         setMessages((prev: Message[]) => {
           const newMessages = [...prev];
           newMessages.push({
@@ -894,43 +1085,43 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       }
 
       const agent = new Agent();
-      const conversationHistory = buildConversationHistory([...messages, userMessage], imagesSupported);
-      let assistantChunk = '';
-      let thinkingChunk = '';
-      const pendingToolCalls = new Map<string, { toolName: string; args: Record<string, unknown>; messageId?: string }>();
-      let assistantMessageId: string | null = null;
-      let streamHadError = false;
-      titleExtractedRef.current = false;
-
-      for await (const event of agent.streamMessages(conversationHistory, { abortSignal: abortController.signal })) {
-        if (event.type === 'reasoning-delta') {
-          thinkingChunk += event.content;
-          totalChars += event.content.length;
-          setCurrentTokens(estimateTokens());
-
-          if (assistantMessageId === null) {
-            assistantMessageId = createId();
-          }
-
-          const currentMessageId = assistantMessageId;
-          setMessages((prev: Message[]) => {
-            const newMessages = [...prev];
-            const messageIndex = newMessages.findIndex(m => m.id === currentMessageId);
-
-            if (messageIndex === -1) {
-              newMessages.push({ id: currentMessageId, role: "assistant", content: '', thinkingContent: thinkingChunk });
-            } else {
-              newMessages[messageIndex] = {
-                ...newMessages[messageIndex]!,
-                thinkingContent: thinkingChunk
-              };
-            }
-            return newMessages;
-          });
-        } else if (event.type === 'text-delta') {
-          assistantChunk += event.content;
-          totalChars += event.content.length;
-          setCurrentTokens(estimateTokens());
+      const conversationHistory = buildConversationHistory([...messages, userMessage], imagesSupported);
+      let assistantChunk = '';
+      let thinkingChunk = '';
+      const pendingToolCalls = new Map<string, { toolName: string; args: Record<string, unknown>; messageId?: string }>();
+      let assistantMessageId: string | null = null;
+      let streamHadError = false;
+      titleExtractedRef.current = false;
+
+      for await (const event of agent.streamMessages(conversationHistory, { abortSignal: abortController.signal })) {
+        if (event.type === 'reasoning-delta') {
+          thinkingChunk += event.content;
+          totalChars += event.content.length;
+          setCurrentTokens(estimateTokens());
+
+          if (assistantMessageId === null) {
+            assistantMessageId = createId();
+          }
+
+          const currentMessageId = assistantMessageId;
+          setMessages((prev: Message[]) => {
+            const newMessages = [...prev];
+            const messageIndex = newMessages.findIndex(m => m.id === currentMessageId);
+
+            if (messageIndex === -1) {
+              newMessages.push({ id: currentMessageId, role: "assistant", content: '', thinkingContent: thinkingChunk });
+            } else {
+              newMessages[messageIndex] = {
+                ...newMessages[messageIndex]!,
+                thinkingContent: thinkingChunk
+              };
+            }
+            return newMessages;
+          });
+        } else if (event.type === 'text-delta') {
+          assistantChunk += event.content;
+          totalChars += event.content.length;
+          setCurrentTokens(estimateTokens());
 
           const { title, cleanContent, isPending, noTitle } = extractTitle(assistantChunk, titleExtractedRef.current);
 
@@ -950,22 +1141,22 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
           }
 
           const displayContent = cleanContent;
-          const currentMessageId = assistantMessageId;
-          setMessages((prev: Message[]) => {
-            const newMessages = [...prev];
-            const messageIndex = newMessages.findIndex(m => m.id === currentMessageId);
-
-            if (messageIndex === -1) {
-              newMessages.push({ id: currentMessageId, role: "assistant", content: displayContent, thinkingContent: thinkingChunk });
-            } else {
-              newMessages[messageIndex] = {
-                ...newMessages[messageIndex]!,
-                content: displayContent,
-                thinkingContent: thinkingChunk
-              };
-            }
-            return newMessages;
-          });
+          const currentMessageId = assistantMessageId;
+          setMessages((prev: Message[]) => {
+            const newMessages = [...prev];
+            const messageIndex = newMessages.findIndex(m => m.id === currentMessageId);
+
+            if (messageIndex === -1) {
+              newMessages.push({ id: currentMessageId, role: "assistant", content: displayContent, thinkingContent: thinkingChunk });
+            } else {
+              newMessages[messageIndex] = {
+                ...newMessages[messageIndex]!,
+                content: displayContent,
+                thinkingContent: thinkingChunk
+              };
+            }
+            return newMessages;
+          });
         } else if (event.type === 'step-start') {
           stepCount++;
         } else if (event.type === 'tool-call-end') {
@@ -973,6 +1164,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
           setCurrentTokens(estimateTokens());
 
           const isExploreTool = event.toolName === 'explore';
+          const isMcpTool = event.toolName.startsWith('mcp__');
           let runningMessageId: string | undefined;
 
           if (isExploreTool) {
@@ -980,8 +1172,13 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             exploreToolsRef.current = [];
             const purpose = (event.args.purpose as string) || 'exploring...';
             explorePurposeRef.current = purpose;
+          }
+
+          if (isExploreTool || isMcpTool) {
             runningMessageId = createId();
-            exploreMessageIdRef.current = runningMessageId;
+            if (isExploreTool) {
+              exploreMessageIdRef.current = runningMessageId;
+            }
             const { name: toolDisplayName, info: toolInfo } = parseToolHeader(event.toolName, event.args);
             const runningContent = toolInfo ? `${toolDisplayName} (${toolInfo})` : toolDisplayName;
 
@@ -1053,7 +1250,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             let runningIndex = -1;
             if (runningMessageId) {
               runningIndex = newMessages.findIndex(m => m.id === runningMessageId);
-            } else if (toolName === 'bash' || toolName === 'explore') {
+            } else if (toolName === 'bash' || toolName === 'explore' || toolName.startsWith('mcp__')) {
               runningIndex = newMessages.findIndex(m => m.isRunning && m.toolName === toolName);
             }
 
@@ -1082,15 +1279,15 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             return newMessages;
           });
 
-          assistantChunk = '';
-          thinkingChunk = '';
-          assistantMessageId = null;
-        } else if (event.type === 'error') {
-          if (abortController.signal.aborted) {
-            notifyAbort();
-            streamHadError = true;
-            break;
-          }
+          assistantChunk = '';
+          thinkingChunk = '';
+          assistantMessageId = null;
+        } else if (event.type === 'error') {
+          if (abortController.signal.aborted) {
+            notifyAbort();
+            streamHadError = true;
+            break;
+          }
           if (assistantChunk.trim()) {
             conversationSteps.push({
               type: 'assistant',
@@ -1117,11 +1314,11 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
             return newMessages;
           });
 
-          assistantChunk = '';
-          thinkingChunk = '';
-          assistantMessageId = null;
-          streamHadError = true;
-          break;
+          assistantChunk = '';
+          thinkingChunk = '';
+          assistantMessageId = null;
+          streamHadError = true;
+          break;
         } else if (event.type === 'finish') {
           if (event.usage && event.usage.totalTokens > 0) {
             totalTokens = {
@@ -1129,6 +1326,7 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
               completion: event.usage.completionTokens,
               total: event.usage.totalTokens
             };
+            lastPromptTokensRef.current = event.usage.promptTokens;
             setCurrentTokens(event.usage.totalTokens);
           }
         }
@@ -1139,42 +1337,57 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
         return;
       }
 
-          if (!streamHadError && assistantChunk.trim()) {
-            conversationSteps.push({
-              type: 'assistant',
-              content: assistantChunk,
-              timestamp: Date.now()
-            });
-          }
-
-          responseDuration = Date.now() - localStartTime;
-          if (responseDuration >= 60000) {
-            responseBlendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
-            for (let i = conversationSteps.length - 1; i >= 0; i--) {
-              if (conversationSteps[i]?.type === 'assistant') {
-                conversationSteps[i] = {
-                  ...conversationSteps[i]!,
-                  responseDuration,
-                  blendWord: responseBlendWord
-                };
-                break;
-              }
-            }
-          }
-
-          const conversationData: ConversationHistory = {
-            id: conversationId,
-            timestamp: Date.now(),
-            steps: conversationSteps,
-            totalSteps: stepCount,
-            title: currentTitleRef.current ?? currentTitle ?? null,
-            workspace: process.cwd(),
-            totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
-            model: config.model,
-            provider: config.provider
-          };
-
-          saveConversation(conversationData);
+          if (!streamHadError && assistantChunk.trim()) {
+            conversationSteps.push({
+              type: 'assistant',
+              content: assistantChunk,
+              timestamp: Date.now()
+            });
+          }
+
+          responseDuration = Date.now() - localStartTime;
+          if (responseDuration >= 60000) {
+            responseBlendWord = BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+            for (let i = conversationSteps.length - 1; i >= 0; i--) {
+              if (conversationSteps[i]?.type === 'assistant') {
+                conversationSteps[i] = {
+                  ...conversationSteps[i]!,
+                  responseDuration,
+                  blendWord: responseBlendWord
+                };
+                break;
+              }
+            }
+          }
+
+          const conversationData: ConversationHistory = {
+            id: conversationId,
+            timestamp: Date.now(),
+            steps: conversationSteps,
+            totalSteps: stepCount,
+            title: currentTitleRef.current ?? currentTitle ?? null,
+            workspace: process.cwd(),
+            totalTokens: totalTokens.total > 0 ? totalTokens : undefined,
+            model: config.model,
+            provider: config.provider
+          };
+
+          saveConversation(conversationData);
+          const resolvedMax = await resolveMaxContextTokens();
+          const maxContextTokens = resolvedMax ?? getDefaultContextBudget(config.provider);
+          if (!abortController.signal.aborted) {
+            const realPromptTokens = lastPromptTokensRef.current;
+            const systemPrompt = buildSystemPrompt();
+            setMessages(prev => {
+              const usedTokens = realPromptTokens > 0
+                ? realPromptTokens
+                : estimateTotalTokens(prev, systemPrompt);
+              if (!shouldAutoCompact(usedTokens, maxContextTokens)) return prev;
+              const compacted = compactMessagesForUi(prev, systemPrompt, maxContextTokens, createId, true);
+              setCurrentTokens(compacted.estimatedTokens);
+              return compacted.messages;
+            });
+          }
 
     } catch (error) {
       if (abortController.signal.aborted) {
@@ -1206,14 +1419,14 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
       if (abortControllerRef.current === abortController) {
         abortControllerRef.current = null;
       }
-      const duration = responseDuration ?? (Date.now() - localStartTime);
-      if (duration >= 60000) {
-        const blendWord = responseBlendWord ?? BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
-        setMessages((prev: Message[]) => {
-          const newMessages = [...prev];
-          for (let i = newMessages.length - 1; i >= 0; i--) {
-            if (newMessages[i]?.role === 'assistant') {
-              newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
+      const duration = responseDuration ?? (Date.now() - localStartTime);
+      if (duration >= 60000) {
+        const blendWord = responseBlendWord ?? BLEND_WORDS[Math.floor(Math.random() * BLEND_WORDS.length)];
+        setMessages((prev: Message[]) => {
+          const newMessages = [...prev];
+          for (let i = newMessages.length - 1; i >= 0; i--) {
+            if (newMessages[i]?.role === 'assistant') {
+              newMessages[i] = { ...newMessages[i]!, responseDuration: duration, blendWord };
               break;
             }
           }
@@ -1250,18 +1463,18 @@ export function Main({ pasteRequestId = 0, copyRequestId = 0, onCopy, shortcutsO
   }
 
   return (
-    <ChatPage
-      messages={messages}
-      isProcessing={isProcessing}
-      processingStartTime={processingStartTime}
-      currentTokens={currentTokens}
-      scrollOffset={scrollOffset}
-      terminalHeight={terminalHeight}
-      terminalWidth={terminalWidth}
-      pasteRequestId={pasteRequestId}
-      shortcutsOpen={shortcutsOpen}
-      onSubmit={handleSubmit}
-      pendingImages={pendingImages}
-    />
-  );
-}
+    <ChatPage
+      messages={messages}
+      isProcessing={isProcessing}
+      processingStartTime={processingStartTime}
+      currentTokens={currentTokens}
+      scrollOffset={scrollOffset}
+      terminalHeight={terminalHeight}
+      terminalWidth={terminalWidth}
+      pasteRequestId={pasteRequestId}
+      shortcutsOpen={shortcutsOpen}
+      onSubmit={handleSubmit}
+      pendingImages={pendingImages}
+    />
+  );
+}