diff --git a/llm/ant/ant.go b/llm/ant/ant.go
index 1dcff4e..92b55f9 100644
--- a/llm/ant/ant.go
+++ b/llm/ant/ant.go
@@ -34,6 +34,26 @@
 	Claude4Opus    = "claude-opus-4-20250514"
 )
 
+// TokenContextWindow returns the maximum token context window size for this service
+func (s *Service) TokenContextWindow() int {
+	model := s.Model
+	if model == "" {
+		model = DefaultModel
+	}
+
+	switch model {
+	case Claude35Sonnet, Claude37Sonnet:
+		return 200000
+	case Claude35Haiku:
+		return 200000
+	case Claude4Sonnet, Claude4Opus:
+		return 200000
+	default:
+		// Default for unknown models
+		return 200000
+	}
+}
+
 // Service provides Claude completions.
 // Fields should not be altered concurrently with calling any method on Service.
 type Service struct {
diff --git a/llm/conversation/convo.go b/llm/conversation/convo.go
index 12c334f..f4ed0bd 100644
--- a/llm/conversation/convo.go
+++ b/llm/conversation/convo.go
@@ -98,6 +98,8 @@
 	mu *sync.Mutex
 	// usage tracks usage for this conversation and all sub-conversations.
 	usage *CumulativeUsage
+	// lastUsage tracks the usage from the most recent API call
+	lastUsage llm.Usage
 }
 
 // newConvoID generates a new 8-byte random id.
@@ -327,6 +329,10 @@
 	// Propagate usage to all ancestors (including us).
 	for x := c; x != nil; x = x.Parent {
 		x.usage.Add(resp.Usage)
+		// Store the most recent usage (only on the current conversation, not ancestors)
+		if x == c {
+			x.lastUsage = resp.Usage
+		}
 	}
 	c.Listener.OnResponse(c.Ctx, c, id, resp)
 	return resp, err
@@ -545,6 +551,16 @@
 	return c.usage.Clone()
 }
 
+// LastUsage returns the usage from the most recent API call
+func (c *Convo) LastUsage() llm.Usage {
+	if c == nil {
+		return llm.Usage{}
+	}
+	c.mu.Lock()
+	defer c.mu.Unlock()
+	return c.lastUsage
+}
+
 func (u *CumulativeUsage) WallTime() time.Duration {
 	return time.Since(u.StartTime)
 }
diff --git a/llm/gem/gem.go b/llm/gem/gem.go
index e5cbcf0..178df68 100644
--- a/llm/gem/gem.go
+++ b/llm/gem/gem.go
@@ -442,6 +442,29 @@
 	}
 }
 
+// TokenContextWindow returns the maximum token context window size for this service
+func (s *Service) TokenContextWindow() int {
+	model := s.Model
+	if model == "" {
+		model = DefaultModel
+	}
+
+	// Gemini models generally have large context windows
+	switch model {
+	case "gemini-2.5-pro-preview-03-25":
+		return 1000000 // 1M tokens for Gemini 2.5 Pro
+	case "gemini-2.0-flash-exp":
+		return 1000000 // 1M tokens for Gemini 2.0 Flash
+	case "gemini-1.5-pro", "gemini-1.5-pro-latest":
+		return 2000000 // 2M tokens for Gemini 1.5 Pro
+	case "gemini-1.5-flash", "gemini-1.5-flash-latest":
+		return 1000000 // 1M tokens for Gemini 1.5 Flash
+	default:
+		// Default for unknown models
+		return 1000000
+	}
+}
+
 // Do sends a request to Gemini.
 func (s *Service) Do(ctx context.Context, ir *llm.Request) (*llm.Response, error) {
 	// Log the incoming request for debugging
diff --git a/llm/llm.go b/llm/llm.go
index 0e14c7f..2aea24e 100644
--- a/llm/llm.go
+++ b/llm/llm.go
@@ -13,6 +13,8 @@
 type Service interface {
 	// Do sends a request to an LLM.
 	Do(context.Context, *Request) (*Response, error)
+	// TokenContextWindow returns the maximum token context window size for this service
+	TokenContextWindow() int
 }
 
 // MustSchema validates that schema is a valid JSON schema and returns it as a json.RawMessage.
diff --git a/llm/oai/oai.go b/llm/oai/oai.go
index 40524f3..840a922 100644
--- a/llm/oai/oai.go
+++ b/llm/oai/oai.go
@@ -627,6 +627,25 @@
 	return dollars
 }
 
+// TokenContextWindow returns the maximum token context window size for this service
+func (s *Service) TokenContextWindow() int {
+	model := cmp.Or(s.Model, DefaultModel)
+
+	// OpenAI models generally have 128k context windows
+	// Some newer models have larger windows, but 128k is a safe default
+	switch model.ModelName {
+	case "gpt-4.1-2025-04-14", "gpt-4.1-mini-2025-04-14", "gpt-4.1-nano-2025-04-14":
+		return 200000 // 200k for newer GPT-4.1 models
+	case "gpt-4o-2024-08-06", "gpt-4o-mini-2024-07-18":
+		return 128000 // 128k for GPT-4o models
+	case "o3-2025-04-16", "o3-mini-2025-04-16":
+		return 200000 // 200k for O3 models
+	default:
+		// Default for unknown models
+		return 128000
+	}
+}
+
 // Do sends a request to OpenAI using the go-openai package.
 func (s *Service) Do(ctx context.Context, ir *llm.Request) (*llm.Response, error) {
 	// Configure the OpenAI client
diff --git a/loop/agent.go b/loop/agent.go
index 5e28bfc..d8697c4 100644
--- a/loop/agent.go
+++ b/loop/agent.go
@@ -14,6 +14,7 @@
 	"path/filepath"
 	"runtime/debug"
 	"slices"
+	"strconv"
 	"strings"
 	"sync"
 	"text/template"
@@ -138,6 +139,10 @@
 	GetEndFeedback() *EndFeedback
 	// SetEndFeedback sets the end session feedback
 	SetEndFeedback(feedback *EndFeedback)
+
+	// CompactConversation compacts the current conversation by generating a summary
+	// and restarting the conversation with that summary as the initial context
+	CompactConversation(ctx context.Context) error
 }
 
 type CodingAgentMessageType string
@@ -148,8 +153,9 @@
 	ErrorMessageType   CodingAgentMessageType = "error"
 	BudgetMessageType  CodingAgentMessageType = "budget" // dedicated for "out of budget" errors
 	ToolUseMessageType CodingAgentMessageType = "tool"
-	CommitMessageType  CodingAgentMessageType = "commit" // for displaying git commits
-	AutoMessageType    CodingAgentMessageType = "auto"   // for automated notifications like autoformatting
+	CommitMessageType  CodingAgentMessageType = "commit"  // for displaying git commits
+	AutoMessageType    CodingAgentMessageType = "auto"    // for automated notifications like autoformatting
+	CompactMessageType CodingAgentMessageType = "compact" // for conversation compaction notifications
 
 	cancelToolUseMessage = "Stop responding to my previous message. Wait for me to ask you something else before attempting to use any more tools."
 )
@@ -299,6 +305,7 @@
 // ConvoInterface defines the interface for conversation interactions
 type ConvoInterface interface {
 	CumulativeUsage() conversation.CumulativeUsage
+	LastUsage() llm.Usage
 	ResetBudget(conversation.Budget)
 	OverBudget() error
 	SendMessage(message llm.Message) (*llm.Response, error)
@@ -503,6 +510,98 @@
 	return a.endFeedback
 }
 
+// generateConversationSummary asks the LLM to create a comprehensive summary of the current conversation
+func (a *Agent) generateConversationSummary(ctx context.Context) (string, error) {
+	msg := `You are being asked to create a comprehensive summary of our conversation so far. This summary will be used to restart our conversation with a shorter history while preserving all important context.
+
+IMPORTANT: Focus ONLY on the actual conversation with the user. Do NOT include any information from system prompts, tool descriptions, or general instructions. Only summarize what the user asked for and what we accomplished together.
+
+Please create a detailed summary that includes:
+
+1. **User's Request**: What did the user originally ask me to do? What was their goal?
+
+2. **Work Completed**: What have we accomplished together? Include any code changes, files created/modified, problems solved, etc.
+
+3. **Key Technical Decisions**: What important technical choices were made during our work and why?
+
+4. **Current State**: What is the current state of the project? What files, tools, or systems are we working with?
+
+5. **Next Steps**: What still needs to be done to complete the user's request?
+
+6. **Important Context**: Any crucial information about the user's codebase, environment, constraints, or specific preferences they mentioned.
+
+Focus on actionable information that would help me continue the user's work seamlessly. Ignore any general tool capabilities or system instructions - only include what's relevant to this specific user's project and goals.
+
+Reply with ONLY the summary content - no meta-commentary about creating the summary.`
+
+	userMessage := llm.UserStringMessage(msg)
+	// Use a subconversation with history to get the summary
+	// TODO: We don't have any tools here, so we should have enough tokens
+	// to capture a summary, but we may need to modify the history (e.g., remove
+	// TODO data) to save on some tokens.
+	convo := a.convo.SubConvoWithHistory()
+
+	// Modify the system prompt to provide context about the original task
+	originalSystemPrompt := convo.SystemPrompt
+	convo.SystemPrompt = fmt.Sprintf(`You are creating a conversation summary for context compaction. The original system prompt contained instructions about being a software engineer and architect for Sketch (an agentic coding environment), with various tools and capabilities for code analysis, file modification, git operations, browser automation, and project management.
+
+Your task is to create a focused summary as requested below. Focus only on the actual user conversation and work accomplished, not the system capabilities or tool descriptions.
+
+Original context: You are working in a coding environment with full access to development tools.`)
+
+	resp, err := convo.SendMessage(userMessage)
+	if err != nil {
+		a.pushToOutbox(ctx, errorMessage(err))
+		return "", err
+	}
+	textContent := collectTextContent(resp)
+
+	// Restore original system prompt (though this subconvo will be discarded)
+	convo.SystemPrompt = originalSystemPrompt
+
+	return textContent, nil
+}
+
+// CompactConversation compacts the current conversation by generating a summary
+// and restarting the conversation with that summary as the initial context
+func (a *Agent) CompactConversation(ctx context.Context) error {
+	summary, err := a.generateConversationSummary(ctx)
+	if err != nil {
+		return fmt.Errorf("failed to generate conversation summary: %w", err)
+	}
+
+	a.mu.Lock()
+
+	// Get usage information before resetting conversation
+	lastUsage := a.convo.LastUsage()
+	contextWindow := a.config.Service.TokenContextWindow()
+	currentContextSize := lastUsage.InputTokens + lastUsage.CacheReadInputTokens + lastUsage.CacheCreationInputTokens
+
+	// Reset conversation state but keep all other state (git, working dir, etc.)
+	a.firstMessageIndex = len(a.history)
+	a.convo = a.initConvo()
+
+	a.mu.Unlock()
+
+	// Create informative compaction message with token details
+	compactionMsg := fmt.Sprintf("📜 Conversation compacted to manage token limits. Previous context preserved in summary below.\n\n"+
+		"**Token Usage:** %d / %d tokens (%.1f%% of context window)",
+		currentContextSize, contextWindow, float64(currentContextSize)/float64(contextWindow)*100)
+
+	a.pushToOutbox(ctx, AgentMessage{
+		Type:    CompactMessageType,
+		Content: compactionMsg,
+	})
+
+	a.pushToOutbox(ctx, AgentMessage{
+		Type:    UserMessageType,
+		Content: fmt.Sprintf("Here's a summary of our previous work:\n\n%s\n\nPlease continue with the work based on this summary.", summary),
+	})
+	a.inbox <- fmt.Sprintf("Here's a summary of our previous work:\n\n%s\n\nPlease continue with the work based on this summary.", summary)
+
+	return nil
+}
+
 func (a *Agent) URL() string { return a.url }
 
 // Title returns the current title of the conversation.
@@ -794,6 +893,44 @@
 	return slices.Clone(a.history[start:end])
 }
 
+// ShouldCompact checks if the conversation should be compacted based on token usage
+func (a *Agent) ShouldCompact() bool {
+	// Get the threshold from environment variable, default to 0.94 (94%)
+	// (Because default Claude output is 8192 tokens, which is 4% of 200,000 tokens,
+	// and a little bit of buffer.)
+	thresholdRatio := 0.94
+	if envThreshold := os.Getenv("SKETCH_COMPACT_THRESHOLD_RATIO"); envThreshold != "" {
+		if parsed, err := strconv.ParseFloat(envThreshold, 64); err == nil && parsed > 0 && parsed <= 1.0 {
+			thresholdRatio = parsed
+		}
+	}
+
+	// Get the most recent usage to check current context size
+	lastUsage := a.convo.LastUsage()
+
+	if lastUsage.InputTokens == 0 {
+		// No API calls made yet
+		return false
+	}
+
+	// Calculate the current context size from the last API call
+	// This includes all tokens that were part of the input context:
+	// - Input tokens (user messages, system prompt, conversation history)
+	// - Cache read tokens (cached parts of the context)
+	// - Cache creation tokens (new parts being cached)
+	currentContextSize := lastUsage.InputTokens + lastUsage.CacheReadInputTokens + lastUsage.CacheCreationInputTokens
+
+	// Get the service's token context window
+	service := a.config.Service
+	contextWindow := service.TokenContextWindow()
+
+	// Calculate threshold
+	threshold := uint64(float64(contextWindow) * thresholdRatio)
+
+	// Check if we've exceeded the threshold
+	return currentContextSize >= threshold
+}
+
 func (a *Agent) OriginalBudget() conversation.Budget {
 	return a.originalBudget
 }
@@ -1358,6 +1495,18 @@
 			return err
 		}
 
+		// Check if we should compact the conversation
+		if a.ShouldCompact() {
+			a.stateMachine.Transition(ctx, StateCompacting, "Token usage threshold reached, compacting conversation")
+			if err := a.CompactConversation(ctx); err != nil {
+				a.stateMachine.Transition(ctx, StateError, "Error during compaction: "+err.Error())
+				return err
+			}
+			// After compaction, end this turn and start fresh
+			a.stateMachine.Transition(ctx, StateEndOfTurn, "Compaction completed, ending turn")
+			return nil
+		}
+
 		// If the model is not requesting to use a tool, we're done
 		if resp.StopReason != llm.StopReasonToolUse {
 			a.stateMachine.Transition(ctx, StateEndOfTurn, "LLM completed response, ending turn")
diff --git a/loop/agent_test.go b/loop/agent_test.go
index 911b03e..da8a444 100644
--- a/loop/agent_test.go
+++ b/loop/agent_test.go
@@ -261,6 +261,7 @@
 	toolResultCancelContentsFunc func(resp *llm.Response) ([]llm.Content, error)
 	cancelToolUseFunc            func(toolUseID string, cause error) error
 	cumulativeUsageFunc          func() conversation.CumulativeUsage
+	lastUsageFunc                func() llm.Usage
 	resetBudgetFunc              func(conversation.Budget)
 	overBudgetFunc               func() error
 	getIDFunc                    func() string
@@ -309,6 +310,13 @@
 	return conversation.CumulativeUsage{}
 }
 
+func (m *MockConvoInterface) LastUsage() llm.Usage {
+	if m.lastUsageFunc != nil {
+		return m.lastUsageFunc()
+	}
+	return llm.Usage{}
+}
+
 func (m *MockConvoInterface) ResetBudget(budget conversation.Budget) {
 	if m.resetBudgetFunc != nil {
 		m.resetBudgetFunc(budget)
@@ -485,6 +493,10 @@
 	return conversation.CumulativeUsage{}
 }
 
+func (m *mockConvoInterface) LastUsage() llm.Usage {
+	return llm.Usage{}
+}
+
 func (m *mockConvoInterface) ResetBudget(conversation.Budget) {}
 
 func (m *mockConvoInterface) OverBudget() error {
diff --git a/loop/mocks.go b/loop/mocks.go
index 016c021..7a7b946 100644
--- a/loop/mocks.go
+++ b/loop/mocks.go
@@ -188,6 +188,11 @@
 	return conversation.CumulativeUsage{}
 }
 
+func (m *MockConvo) LastUsage() llm.Usage {
+	m.recordCall("LastUsage")
+	return llm.Usage{}
+}
+
 func (m *MockConvo) OverBudget() error {
 	m.recordCall("OverBudget")
 	return nil
diff --git a/loop/server/loophttp_test.go b/loop/server/loophttp_test.go
index 54cfcd3..d755717 100644
--- a/loop/server/loophttp_test.go
+++ b/loop/server/loophttp_test.go
@@ -240,15 +240,15 @@
 func (m *mockAgent) OutsideWorkingDir() string                   { return "/app" }
 func (m *mockAgent) GitOrigin() string                           { return "" }
 func (m *mockAgent) OpenBrowser(url string)                      {}
-func (m *mockAgent) RestartConversation(ctx context.Context, rev string, initialPrompt string) error {
+func (m *mockAgent) CompactConversation(ctx context.Context) error {
+	// Mock implementation - just return nil
 	return nil
 }
-func (m *mockAgent) SuggestReprompt(ctx context.Context) (string, error) { return "", nil }
-func (m *mockAgent) IsInContainer() bool                                 { return false }
-func (m *mockAgent) FirstMessageIndex() int                              { return 0 }
-func (m *mockAgent) DetectGitChanges(ctx context.Context) error          { return nil }
-func (m *mockAgent) GetEndFeedback() *loop.EndFeedback                   { return m.endFeedback }
-func (m *mockAgent) SetEndFeedback(feedback *loop.EndFeedback)           { m.endFeedback = feedback }
+func (m *mockAgent) IsInContainer() bool                        { return false }
+func (m *mockAgent) FirstMessageIndex() int                     { return 0 }
+func (m *mockAgent) DetectGitChanges(ctx context.Context) error { return nil }
+func (m *mockAgent) GetEndFeedback() *loop.EndFeedback          { return m.endFeedback }
+func (m *mockAgent) SetEndFeedback(feedback *loop.EndFeedback)  { m.endFeedback = feedback }
 
 // TestEndFeedback tests the end session feedback functionality
 func TestEndFeedback(t *testing.T) {
@@ -308,7 +308,9 @@
 			t.Errorf("Expected Comment to be 'Could be better', got %s", retrieved.Comment)
 		}
 	}
-} // TestSSEStream tests the SSE stream endpoint
+}
+
+// TestSSEStream tests the SSE stream endpoint
 func TestSSEStream(t *testing.T) {
 	// Create a mock agent with initial messages
 	mockAgent := &mockAgent{
@@ -532,4 +534,20 @@
 	}
 }
 
-// Removing duplicate method definition
+func TestCompactHandler(t *testing.T) {
+	// Test that mock CompactConversation works
+	mockAgent := &mockAgent{
+		messages:     []loop.AgentMessage{},
+		messageCount: 0,
+		sessionID:    "test-session",
+	}
+
+	ctx := context.Background()
+	err := mockAgent.CompactConversation(ctx)
+	if err != nil {
+		t.Errorf("Mock CompactConversation failed: %v", err)
+	}
+
+	// No HTTP endpoint to test anymore - compaction is done via /compact message
+	t.Log("Mock CompactConversation works correctly")
+}
diff --git a/loop/state_string.go b/loop/state_string.go
index 4556a73..ae0987f 100644
--- a/loop/state_string.go
+++ b/loop/state_string.go
@@ -25,11 +25,12 @@
 	_ = x[StateCancelled-14]
 	_ = x[StateBudgetExceeded-15]
 	_ = x[StateError-16]
+	_ = x[StateCompacting-17]
 }
 
-const _State_name = "UnknownReadyWaitingForUserInputSendingToLLMProcessingLLMResponseEndOfTurnToolUseRequestedCheckingForCancellationRunningToolCheckingGitCommitsRunningAutoformattersCheckingBudgetGatheringAdditionalMessagesSendingToolResultsCancelledBudgetExceededError"
+const _State_name = "UnknownReadyWaitingForUserInputSendingToLLMProcessingLLMResponseEndOfTurnToolUseRequestedCheckingForCancellationRunningToolCheckingGitCommitsRunningAutoformattersCheckingBudgetGatheringAdditionalMessagesSendingToolResultsCancelledBudgetExceededErrorCompacting"
 
-var _State_index = [...]uint8{0, 7, 12, 31, 43, 64, 73, 89, 112, 123, 141, 162, 176, 203, 221, 230, 244, 249}
+var _State_index = [...]uint16{0, 7, 12, 31, 43, 64, 73, 89, 112, 123, 141, 162, 176, 203, 221, 230, 244, 249, 259}
 
 func (i State) String() string {
 	if i < 0 || i >= State(len(_State_index)-1) {
diff --git a/loop/statemachine.go b/loop/statemachine.go
index 284c13f..f8d6cc9 100644
--- a/loop/statemachine.go
+++ b/loop/statemachine.go
@@ -47,6 +47,8 @@
 	StateBudgetExceeded
 	// StateError occurs when an error occurred during processing
 	StateError
+	// StateCompacting occurs when the agent is compacting the conversation
+	StateCompacting
 )
 
 // TransitionEvent represents an event that causes a state transition
@@ -189,7 +191,7 @@
 	addTransition(StateReady, StateWaitingForUserInput)
 
 	// Main flow
-	addTransition(StateWaitingForUserInput, StateSendingToLLM, StateError)
+	addTransition(StateWaitingForUserInput, StateSendingToLLM, StateCompacting, StateError)
 	addTransition(StateSendingToLLM, StateProcessingLLMResponse, StateError)
 	addTransition(StateProcessingLLMResponse, StateEndOfTurn, StateToolUseRequested, StateError)
 	addTransition(StateEndOfTurn, StateWaitingForUserInput)
@@ -204,6 +206,9 @@
 	addTransition(StateGatheringAdditionalMessages, StateSendingToolResults, StateError)
 	addTransition(StateSendingToolResults, StateProcessingLLMResponse, StateError)
 
+	// Compaction flow
+	addTransition(StateCompacting, StateWaitingForUserInput, StateError)
+
 	// Terminal states to new turn
 	addTransition(StateCancelled, StateWaitingForUserInput)
 	addTransition(StateBudgetExceeded, StateWaitingForUserInput)
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 43ae3bd..59fb921 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1458,6 +1458,8 @@
                 .agentState=${this.containerState?.agent_state}
                 .llmCalls=${this.containerState?.outstanding_llm_calls || 0}
                 .toolCalls=${this.containerState?.outstanding_tool_calls || []}
+                .firstMessageIndex=${this.containerState?.first_message_index ||
+                0}
               ></sketch-timeline>
             </div>
           </div>
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 8a4f7d5..8c1e9a3 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -16,6 +16,9 @@
   @property()
   open: boolean = false;
 
+  @property()
+  firstMessageIndex: number = 0;
+
   @state()
   showInfo: boolean = false;
 
@@ -375,6 +378,60 @@
       border-left-color: #f44336;
     }
 
+    /* Compact message styling - distinct visual separation */
+    .compact {
+      background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
+      border: 2px solid #fd7e14;
+      border-radius: 12px;
+      margin: 20px 0;
+      padding: 0;
+    }
+
+    .compact .message-content {
+      border-left: 4px solid #fd7e14;
+      background: rgba(253, 126, 20, 0.05);
+      font-weight: 500;
+    }
+
+    .compact .message-text {
+      color: #8b4513;
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    .compact::before {
+      content: "📚 CONVERSATION EPOCH";
+      display: block;
+      text-align: center;
+      font-size: 11px;
+      font-weight: bold;
+      color: #8b4513;
+      background: #fd7e14;
+      color: white;
+      padding: 4px 8px;
+      margin: 0;
+      border-radius: 8px 8px 0 0;
+      letter-spacing: 1px;
+    }
+
+    /* Pre-compaction messages get a subtle diagonal stripe background */
+    .pre-compaction {
+      background: repeating-linear-gradient(
+        45deg,
+        #ffffff,
+        #ffffff 10px,
+        #f8f8f8 10px,
+        #f8f8f8 20px
+      );
+      opacity: 0.85;
+      border-left: 3px solid #ddd;
+    }
+
+    .pre-compaction .message-content {
+      background: rgba(255, 255, 255, 0.7);
+      backdrop-filter: blur(1px);
+    }
+
     /* Make message type display bold but without the IRC-style markers */
     .message-type {
       font-weight: bold;
@@ -917,11 +974,15 @@
     const isEndOfTurn =
       this.message?.end_of_turn && !this.message?.parent_conversation_id;
 
+    const isPreCompaction =
+      this.message?.idx !== undefined &&
+      this.message.idx < this.firstMessageIndex;
+
     return html`
       <div
         class="message ${this.message?.type} ${isEndOfTurn
           ? "end-of-turn"
-          : ""}"
+          : ""} ${isPreCompaction ? "pre-compaction" : ""}"
       >
         <div class="message-container">
           <!-- Left area (empty for simplicity) -->
diff --git a/webui/src/web-components/sketch-timeline.ts b/webui/src/web-components/sketch-timeline.ts
index 22d4b3f..3dd17a2 100644
--- a/webui/src/web-components/sketch-timeline.ts
+++ b/webui/src/web-components/sketch-timeline.ts
@@ -28,6 +28,9 @@
   @property({ attribute: false })
   scrollContainer: Ref<HTMLElement>;
 
+  @property({ attribute: false })
+  firstMessageIndex: number = 0;
+
   static styles = css`
     /* Hide views initially to prevent flash of content */
     .timeline-container .timeline,
@@ -398,6 +401,7 @@
                   .message=${message}
                   .previousMessage=${previousMessage}
                   .open=${false}
+                  .firstMessageIndex=${this.firstMessageIndex}
                 ></sketch-timeline-message>`;
               },
             )}