fix/perf: elide chat history when too long

Author: ammario

src/components/AIView.tsx

@@ -17,6 +17,7 @@ import { getModelName } from "@/utils/ai/models";
 import { GitStatusIndicator } from "./GitStatusIndicator";
 import type { GitStatus } from "@/types/workspace";
 import { TooltipWrapper, Tooltip } from "./Tooltip";
+import type { DisplayedMessage } from "@/types/message";
 
 const ViewContainer = styled.div`
   flex: 1;
@@ -223,7 +224,10 @@ const AIViewInner: React.FC<AIViewProps> = ({
 
   // When editing, find the cutoff point
   const editCutoffHistoryId = editingMessage
-    ? messages.find((msg) => msg.historyId === editingMessage.id)?.historyId
+    ? messages.find(
+        (msg): msg is Exclude<DisplayedMessage, { type: "history-hidden" }> =>
+          msg.type !== "history-hidden" && msg.historyId === editingMessage.id
+      )?.historyId
     : undefined;
 
   const handleMessageSent = useCallback(() => {
@@ -361,7 +365,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
                 <>
                   {messages.map((msg) => {
                     const isAtCutoff =
-                      editCutoffHistoryId !== undefined && msg.historyId === editCutoffHistoryId;
+                      editCutoffHistoryId !== undefined &&
+                      msg.type !== "history-hidden" &&
+                      msg.historyId === editCutoffHistoryId;
 
                     return (
                       <React.Fragment key={msg.id}>

src/components/Messages/HistoryHiddenMessage.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "@emotion/styled";
+import type { DisplayedMessage } from "@/types/message";
+
+const HiddenIndicator = styled.div`
+  margin: 20px 0;
+  padding: 12px 15px;
+  background: rgba(255, 255, 255, 0.03);
+  border-left: 3px solid #569cd6;
+  border-radius: 3px;
+  color: #888888;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+  font-family: var(--font-primary);
+`;
+
+interface HistoryHiddenMessageProps {
+  message: DisplayedMessage & { type: "history-hidden" };
+  className?: string;
+}
+
+export const HistoryHiddenMessage: React.FC<HistoryHiddenMessageProps> = ({
+  message,
+  className,
+}) => {
+  return (
+    <HiddenIndicator className={className}>
+      {message.hiddenCount} older message{message.hiddenCount !== 1 ? "s" : ""} hidden for
+      performance
+    </HiddenIndicator>
+  );
+};

src/components/Messages/MessageRenderer.tsx

@@ -5,6 +5,7 @@ import { AssistantMessage } from "./AssistantMessage";
 import { ToolMessage } from "./ToolMessage";
 import { ReasoningMessage } from "./ReasoningMessage";
 import { StreamErrorMessage } from "./StreamErrorMessage";
+import { HistoryHiddenMessage } from "./HistoryHiddenMessage";
 
 interface MessageRendererProps {
   message: DisplayedMessage;
@@ -29,6 +30,8 @@ export const MessageRenderer: React.FC<MessageRendererProps> = ({
       return <ReasoningMessage message={message} className={className} />;
     case "stream-error":
       return <StreamErrorMessage message={message} className={className} />;
+    case "history-hidden":
+      return <HistoryHiddenMessage message={message} className={className} />;
     default:
       console.error("don't know how to render message", message);
       return null;

src/components/Messages/MessageWindow.tsx

@@ -1,8 +1,9 @@
 import type { ReactNode } from "react";
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import styled from "@emotion/styled";
 import type { CmuxMessage, DisplayedMessage } from "@/types/message";
 import { HeaderButton } from "../tools/shared/ToolPrimitives";
+import { formatTimestamp } from "@/utils/ui/dateTime";
 
 const MessageBlock = styled.div<{ borderColor: string; backgroundColor?: string }>`
   margin-bottom: 15px;
@@ -25,11 +26,23 @@ const MessageHeader = styled.div`
   font-weight: 500;
 `;
 
+const LeftSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
 const MessageTypeLabel = styled.div`
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
 
+const TimestampText = styled.span`
+  font-size: 10px;
+  color: var(--color-text-secondary);
+  font-weight: 400;
+`;
+
 const ButtonGroup = styled.div`
   display: flex;
   gap: 6px;
@@ -81,10 +94,23 @@ export const MessageWindow: React.FC<MessageWindowProps> = ({
 }) => {
   const [showJson, setShowJson] = useState(false);
 
+  // Get timestamp from message if available
+  const timestamp =
+    "timestamp" in message && typeof message.timestamp === "number" ? message.timestamp : null;
+
+  // Memoize formatted timestamp to avoid recalculating on every render
+  const formattedTimestamp = useMemo(
+    () => (timestamp ? formatTimestamp(timestamp) : null),
+    [timestamp]
+  );
+
   return (
     <MessageBlock borderColor={borderColor} backgroundColor={backgroundColor} className={className}>
       <MessageHeader>
-        <MessageTypeLabel>{label}</MessageTypeLabel>
+        <LeftSection>
+          <MessageTypeLabel>{label}</MessageTypeLabel>
+          {formattedTimestamp && <TimestampText>{formattedTimestamp}</TimestampText>}
+        </LeftSection>
         <ButtonGroup>
           {rightLabel}
           {buttons.map((button, index) => (

src/types/message.ts

@@ -112,6 +112,12 @@ export type DisplayedMessage =
       historySequence: number; // Global ordering across all messages
       timestamp?: number;
       model?: string;
+    }
+  | {
+      type: "history-hidden";
+      id: string; // Display ID for UI/React keys
+      hiddenCount: number; // Number of messages hidden
+      historySequence: number; // Global ordering across all messages
     };
 
 // Helper to create a simple text message

src/utils/messages/StreamingMessageAggregator.ts

@@ -19,6 +19,10 @@ import type {
 } from "@/types/toolParts";
 import { isDynamicToolPart } from "@/types/toolParts";
 
+// Maximum number of messages to display in the DOM for performance
+// Full history is still maintained internally for token counting and stats
+const MAX_DISPLAYED_MESSAGES = 128;
+
 interface StreamingContext {
   startTime: number;
   isComplete: boolean;
@@ -554,6 +558,23 @@ export class StreamingMessageAggregator {
       }
     }
 
+    // Limit to last N messages for DOM performance
+    // Full history is still maintained internally for token counting
+    if (displayedMessages.length > MAX_DISPLAYED_MESSAGES) {
+      const hiddenCount = displayedMessages.length - MAX_DISPLAYED_MESSAGES;
+      const slicedMessages = displayedMessages.slice(-MAX_DISPLAYED_MESSAGES);
+
+      // Add history-hidden indicator as the first message
+      const historyHiddenMessage: DisplayedMessage = {
+        type: "history-hidden",
+        id: "history-hidden",
+        hiddenCount,
+        historySequence: -1, // Place it before all messages
+      };
+
+      return [historyHiddenMessage, ...slicedMessages];
+    }
+
     return displayedMessages;
   }
 }

src/utils/messages/messageUtils.ts

@@ -18,7 +18,8 @@ export function extractTextContent(message: CmuxMessage): string {
  * - For multi-part messages, only show on the last part
  */
 export function shouldShowInterruptedBarrier(msg: DisplayedMessage): boolean {
-  if (msg.type === "user" || msg.type === "stream-error") return false;
+  if (msg.type === "user" || msg.type === "stream-error" || msg.type === "history-hidden")
+    return false;
 
   // Only show on the last part of multi-part messages
   if (!msg.isLastPartOfMessage) return false;

src/utils/ui/dateTime.ts

@@ -0,0 +1,56 @@
+/**
+ * Formats a Unix timestamp (milliseconds) into a "kitchen" format:
+ * - "8:13 PM" if the timestamp is from today
+ * - "Oct 23, 8:13 PM" if the timestamp is from a different day
+ *
+ * @param timestamp Unix timestamp in milliseconds
+ * @returns Formatted time string
+ */
+export function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+
+  // Check if the timestamp is from today
+  const isToday =
+    date.getDate() === now.getDate() &&
+    date.getMonth() === now.getMonth() &&
+    date.getFullYear() === now.getFullYear();
+
+  if (isToday) {
+    // Format: "8:13 PM"
+    return date.toLocaleTimeString("en-US", {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true,
+    });
+  } else {
+    // Format: "Oct 23, 8:13 PM"
+    return date.toLocaleTimeString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true,
+    });
+  }
+}
+
+/**
+ * Formats a Unix timestamp (milliseconds) into a full date/time string with high precision.
+ * Used for tooltips and detailed views.
+ *
+ * @param timestamp Unix timestamp in milliseconds
+ * @returns Formatted full timestamp string (e.g., "October 23, 2025, 8:13:42 PM")
+ */
+export function formatFullTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
+  });
+}