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>`;
               },
             )}