Revert trim indicator to simple ellipsis

index.html

@@ -5,306 +5,171 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Message Trimmer Demo - WildChat Conversations</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+        :root {
+            --bg: #0b0b0b;
+            --surface: #111111;
+            --surface-2: #141414;
+            --text: #eaeaea;
+            --muted: #9b9b9b;
+            --border: #1f1f1f;
+            --accent: #8ab4f8; /* subtle blue */
+            --radius: 12px;
         }
 
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            padding: 20px;
+            background: var(--bg);
+            color: var(--text);
+            padding: 24px;
             min-height: 100vh;
+            line-height: 1.45;
         }
 
         .container {
-            max-width: 1200px;
+            max-width: 1100px;
             margin: 0 auto;
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
             overflow: hidden;
         }
 
         header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 30px;
+            background: transparent;
+            border-bottom: 1px solid var(--border);
+            padding: 28px 30px;
             text-align: center;
         }
 
-        h1 {
-            font-size: 2em;
-            margin-bottom: 10px;
-        }
-
-        .subtitle {
-            opacity: 0.9;
-            font-size: 0.95em;
-        }
+        h1 { font-size: 1.75em; font-weight: 700; letter-spacing: 0.2px; }
+        .subtitle { color: var(--muted); font-size: 0.95em; margin-top: 6px; }
 
         .controls {
-            padding: 25px 30px;
-            background: #f8f9fa;
-            border-bottom: 1px solid #e9ecef;
+            padding: 24px 30px;
+            background: var(--surface-2);
+            border-bottom: 1px solid var(--border);
         }
 
-        .control-group {
-            margin-bottom: 20px;
-        }
-
-        .control-group:last-child {
-            margin-bottom: 0;
-        }
+        .control-group { margin-bottom: 18px; }
+        .control-group:last-child { margin-bottom: 0; }
 
         label {
             display: block;
             font-weight: 600;
             margin-bottom: 8px;
-            color: #495057;
+            color: var(--muted);
             font-size: 0.9em;
         }
 
         input[type="range"] {
             width: 100%;
-            height: 6px;
-            border-radius: 3px;
-            background: #dee2e6;
+            height: 4px;
+            border-radius: 2px;
+            background: #222;
             outline: none;
             -webkit-appearance: none;
         }
-
         input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 18px;
-            height: 18px;
-            border-radius: 50%;
-            background: #667eea;
+            -webkit-appearance: none; appearance: none;
+            width: 16px; height: 16px; border-radius: 50%;
+            background: var(--accent);
             cursor: pointer;
+            border: 2px solid #0d0d0d;
+            box-shadow: 0 0 0 2px rgba(138,180,248,0.15);
         }
-
         input[type="range"]::-moz-range-thumb {
-            width: 18px;
-            height: 18px;
-            border-radius: 50%;
-            background: #667eea;
-            cursor: pointer;
-            border: none;
+            width: 16px; height: 16px; border-radius: 50%;
+            background: var(--accent);
+            cursor: pointer; border: 2px solid #0d0d0d;
         }
 
         .value-display {
             display: inline-block;
-            background: #667eea;
-            color: white;
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 0.85em;
-            font-weight: 600;
+            color: var(--accent);
+            padding: 2px 10px;
+            border-radius: 999px;
+            font-size: 0.85em; font-weight: 600;
             margin-left: 10px;
+            border: 1px solid var(--border);
+            background: #0e0e0e;
         }
 
         select {
-            width: 100%;
-            padding: 10px;
-            border: 2px solid #dee2e6;
-            border-radius: 6px;
-            font-size: 0.95em;
-            background: white;
+            width: 100%; padding: 10px 12px;
+            border: 1px solid var(--border); border-radius: 8px;
+            font-size: 0.95em; background: #0f0f0f; color: var(--text);
             cursor: pointer;
         }
+        select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,180,248,0.15); }
 
-        select:focus {
-            outline: none;
-            border-color: #667eea;
-        }
+        .conversation { padding: 26px 30px; }
 
-        .conversation {
-            padding: 30px;
-        }
-
-        .message {
-            margin-bottom: 30px;
-            animation: fadeIn 0.3s ease-in;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .message-header {
-            display: flex;
-            align-items: center;
-            margin-bottom: 12px;
-            gap: 10px;
-        }
+        .message { margin-bottom: 28px; animation: fadeIn 0.25s ease-in; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
 
+        .message-header { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
         .role-badge {
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 0.75em;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .role-user {
-            background: #e7f5ff;
-            color: #1971c2;
-        }
-
-        .role-assistant {
-            background: #f3f0ff;
-            color: #5f3dc4;
-        }
-
-        .char-count {
-            font-size: 0.75em;
-            color: #868e96;
-            font-weight: 500;
+            padding: 6px 12px; border-radius: 999px; font-size: 0.72em; font-weight: 700;
+            text-transform: uppercase; letter-spacing: 0.5px; background: #0f0f0f; color: var(--muted);
+            border: 1px solid var(--border);
         }
+        .char-count { font-size: 0.75em; color: var(--muted); font-weight: 500; }
 
         .message-content {
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 8px;
-            border-left: 4px solid #dee2e6;
-            position: relative;
+            background: var(--surface-2);
+            padding: 18px; border-radius: 10px; border-left: 3px solid var(--border);
         }
+        .message-user .message-content { border-left-color: #2a2a2a; }
+        .message-assistant .message-content { border-left-color: var(--accent); }
 
-        .message-user .message-content {
-            border-left-color: #1971c2;
-        }
-
-        .message-assistant .message-content {
-            border-left-color: #5f3dc4;
-        }
+        .original { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
 
-        .original {
-            margin-bottom: 15px;
-            padding-bottom: 15px;
-            border-bottom: 2px dashed #dee2e6;
-        }
-
-        .trimmed {
-            background: #fff3bf;
-            padding: 15px;
-            border-radius: 6px;
-            border: 2px solid #ffd43b;
+        .trimmed, .no-trim {
+            background: var(--surface);
+            padding: 14px; border-radius: 8px; border: 1px solid var(--border);
         }
+        .trimmed { border-color: rgba(138,180,248,0.35); }
 
         .section-label {
-            font-size: 0.7em;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            color: #495057;
-            margin-bottom: 8px;
-        }
-
-        .trimmed .section-label {
-            color: #e67700;
+            font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
+            color: var(--muted); margin-bottom: 8px;
         }
+        .trimmed .section-label { color: var(--accent); }
 
-        .content-text {
-            line-height: 1.6;
-            color: #212529;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
+        .content-text { line-height: 1.6; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
 
         .stats {
-            margin-top: 10px;
-            padding: 10px;
-            background: rgba(255,255,255,0.7);
-            border-radius: 4px;
-            font-size: 0.8em;
-            color: #495057;
-        }
-
-        .stats strong {
-            color: #212529;
-        }
-
-        .reduction {
-            color: #e67700;
-            font-weight: 600;
+            margin-top: 10px; padding: 10px; border-radius: 6px; font-size: 0.8em; color: var(--muted);
+            background: #0f0f0f; border: 1px solid var(--border);
         }
+        .stats strong { color: var(--text); }
+        .reduction { color: var(--accent); font-weight: 600; }
 
         .code-reference {
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            border-radius: 6px;
-            padding: 20px;
-            margin: 20px 30px;
-            font-family: 'Monaco', 'Menlo', monospace;
-            font-size: 0.85em;
-            line-height: 1.6;
-        }
-
-        .code-reference h3 {
-            margin-bottom: 15px;
-            color: #495057;
-            font-size: 1em;
-        }
-
-        .code-line {
-            color: #212529;
-            margin: 4px 0;
-        }
-
-        .comment {
-            color: #6c757d;
+            background: #0f0f0f; border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin: 20px 30px;
+            font-family: 'Monaco', 'Menlo', monospace; font-size: 0.85em; line-height: 1.6; color: var(--text);
         }
+        .code-reference h3 { margin-bottom: 12px; color: var(--muted); font-size: 1em; font-weight: 600; }
+        .code-line { color: var(--text); margin: 4px 0; }
+        .comment { color: #7a7a7a; }
 
         button {
-            background: #667eea;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.9em;
-            font-weight: 600;
-            margin-top: 10px;
-        }
-
-        button:hover {
-            background: #5568d3;
+            background: #0f0f0f; color: var(--text); border: 1px solid var(--border);
+            padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9em; font-weight: 600; margin-top: 10px;
         }
+        button:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,180,248,0.15); }
 
         .info-box {
-            background: #e7f5ff;
-            border: 2px solid #1971c2;
-            border-radius: 8px;
-            padding: 20px;
-            margin: 20px 30px;
+            background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
+            border-radius: 8px; padding: 18px; margin: 20px 30px;
         }
+        .info-box h3 { color: var(--text); margin-bottom: 8px; font-size: 1em; }
+        .info-box p { color: var(--muted); line-height: 1.6; font-size: 0.9em; }
 
-        .info-box h3 {
-            color: #1971c2;
-            margin-bottom: 10px;
-            font-size: 1em;
-        }
-
-        .info-box p {
-            color: #495057;
-            line-height: 1.6;
-            font-size: 0.9em;
-        }
-
-        .no-trim {
-            background: #d3f9d8;
-            padding: 15px;
-            border-radius: 6px;
-            border: 2px solid #51cf66;
-        }
-
-        .no-trim .section-label {
-            color: #2b8a3e;
-        }
+        /* Focus styles */
+        :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
     </style>
 </head>
 <body>
@@ -318,8 +183,7 @@
             <h3>About This Demo</h3>
             <p>
                 This demo shows how the <strong>trimMiddle()</strong> function works in the LLM router architecture.
-                The function trims messages by keeping the start (60%) and end (40%) with a clear
-                <strong>[... CONTENT TRIMMED ...]</strong> indicator in between,
+                The function trims messages by keeping the start (60%) and end (40%) with an ellipsis in between,
                 reducing token count while preserving context for intent classification.
                 Adjust the max length sliders below to see how different messages are trimmed.
             </p>
@@ -362,7 +226,7 @@
         </div>
 
         <div id="conversationDisplay" class="conversation">
-            <p style="text-align: center; color: #868e96;">Loading conversations...</p>
+            <p style="text-align: center; color: var(--muted);">Loading conversations...</p>
         </div>
     </div>
 
@@ -371,7 +235,7 @@
         function trimMiddle(content, maxLength) {
             if (content.length <= maxLength) return content;
 
-            const indicator = " [... CONTENT TRIMMED ...] ";
+            const indicator = "…";
             const availableLength = maxLength - indicator.length;
 
             if (availableLength <= 0) {
@@ -411,7 +275,7 @@
             } catch (error) {
                 console.error('Error loading conversations:', error);
                 document.getElementById('conversationDisplay').innerHTML =
-                    '<p style="text-align: center; color: #dc3545;">Error loading conversations. Please refresh the page.</p>';
+                    '<p style="text-align: center; color: var(--accent);">Error loading conversations. Please refresh the page.</p>';
             }
         }
 
@@ -460,7 +324,7 @@
                         <div class="message-header">
                             <span class="role-badge role-${message.role}">${message.role}</span>
                             <span class="char-count">${content.length} characters</span>
-                            ${isLastUser ? '<span class="char-count" style="color: #2b8a3e; font-weight: 600;">★ Latest user message - preserved</span>' : ''}
+                            ${isLastUser ? '<span class="char-count" style="color: var(--accent); font-weight: 600;">★ Latest user message · preserved</span>' : ''}
                         </div>
                         <div class="message-content">
                             <div class="original">

trimmer_demo.html

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Message Trimmer Demo - WildChat Conversations</title>
+    <style>
+        :root {
+            --bg: #0b0b0b;
+            --surface: #111111;
+            --surface-2: #141414;
+            --text: #eaeaea;
+            --muted: #9b9b9b;
+            --border: #1f1f1f;
+            --accent: #8ab4f8;
+            --radius: 12px;
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: var(--bg); color: var(--text);
+            padding: 24px; min-height: 100vh; line-height: 1.45;
+        }
+
+        .container { max-width: 1100px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+        header { background: transparent; border-bottom: 1px solid var(--border); padding: 28px 30px; text-align: center; }
+        h1 { font-size: 1.75em; font-weight: 700; letter-spacing: 0.2px; }
+        .subtitle { color: var(--muted); font-size: 0.95em; margin-top: 6px; }
+
+        .controls { padding: 24px 30px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
+        .control-group { margin-bottom: 18px; }
+        .control-group:last-child { margin-bottom: 0; }
+
+        label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--muted); font-size: 0.9em; }
+
+        input[type="range"] { width: 100%; height: 4px; border-radius: 2px; background: #222; outline: none; -webkit-appearance: none; }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid #0d0d0d; box-shadow: 0 0 0 2px rgba(138,180,248,0.15); }
+        input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid #0d0d0d; }
+
+        .value-display { display: inline-block; color: var(--accent); padding: 2px 10px; border-radius: 999px; font-size: 0.85em; font-weight: 600; margin-left: 10px; border: 1px solid var(--border); background: #0e0e0e; }
+
+        select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95em; background: #0f0f0f; color: var(--text); cursor: pointer; }
+        select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,180,248,0.15); }
+
+        .conversation { padding: 26px 30px; }
+        .message { margin-bottom: 28px; animation: fadeIn 0.25s ease-in; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
+
+        .message-header { display: flex; align-items: center; margin-bottom: 10px; gap: 10px; }
+        .role-badge { padding: 6px 12px; border-radius: 999px; font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: #0f0f0f; color: var(--muted); border: 1px solid var(--border); }
+        .char-count { font-size: 0.75em; color: var(--muted); font-weight: 500; }
+
+        .message-content { background: var(--surface-2); padding: 18px; border-radius: 10px; border-left: 3px solid var(--border); }
+        .message-user .message-content { border-left-color: #2a2a2a; }
+        .message-assistant .message-content { border-left-color: var(--accent); }
+
+        .original { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
+        .trimmed, .no-trim { background: var(--surface); padding: 14px; border-radius: 8px; border: 1px solid var(--border); }
+        .trimmed { border-color: rgba(138,180,248,0.35); }
+
+        .section-label { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 8px; }
+        .trimmed .section-label { color: var(--accent); }
+
+        .content-text { line-height: 1.6; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
+        .stats { margin-top: 10px; padding: 10px; background: #0f0f0f; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8em; color: var(--muted); }
+        .stats strong { color: var(--text); }
+        .reduction { color: var(--accent); font-weight: 600; }
+
+        .code-reference { background: #0f0f0f; border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin: 20px 30px; font-family: 'Monaco', 'Menlo', monospace; font-size: 0.85em; line-height: 1.6; color: var(--text); }
+        .code-reference h3 { margin-bottom: 12px; color: var(--muted); font-size: 1em; font-weight: 600; }
+        .code-line { color: var(--text); margin: 4px 0; }
+        .comment { color: #7a7a7a; }
+
+        button { background: #0f0f0f; color: var(--text); border: 1px solid var(--border); padding: 10px 16px; border-radius: 8px; cursor: pointer; font-size: 0.9em; font-weight: 600; margin-top: 10px; }
+        button:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,180,248,0.15); }
+
+        .info-box { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 18px; margin: 20px 30px; }
+        .info-box h3 { color: var(--text); margin-bottom: 8px; font-size: 1em; }
+        .info-box p { color: var(--muted); line-height: 1.6; font-size: 0.9em; }
+
+        :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Message Trimmer Demo</h1>
+            <p class="subtitle">Demonstrating trim functions on real WildChat-1M conversations</p>
+        </header>
+
+        <div class="info-box">
+            <h3>About This Demo</h3>
+            <p>
+                This demo shows how the <strong>trimMiddle()</strong> function works in the LLM router architecture.
+                The function trims messages by keeping the start (60%) and end (40%) with an ellipsis in between,
+                reducing token count while preserving context for intent classification.
+                Adjust the max length sliders below to see how different messages are trimmed.
+            </p>
+        </div>
+
+        <div class="controls">
+            <div class="control-group">
+                <label>
+                    Max Assistant Message Length: <span class="value-display" id="assistantLengthValue">500</span>
+                </label>
+                <input type="range" id="assistantLength" min="50" max="1000" value="500" step="10">
+            </div>
+
+            <div class="control-group">
+                <label>
+                    Max Previous User Message Length: <span class="value-display" id="userLengthValue">400</span>
+                </label>
+                <input type="range" id="userLength" min="50" max="1000" value="400" step="10">
+            </div>
+
+            <div class="control-group">
+                <label>Select Conversation:</label>
+                <select id="conversationSelect">
+                    <option value="0">Loading conversations...</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="code-reference">
+            <h3>Implementation (from src/lib/server/router/arch.ts)</h3>
+            <div class="code-line"><span class="comment">// Trim assistant messages to reduce routing prompt size</span></div>
+            <div class="code-line">if (m.role === "assistant") {</div>
+            <div class="code-line">&nbsp;&nbsp;return { ...m, content: trimMiddle(m.content, maxAssistantLength) };</div>
+            <div class="code-line">}</div>
+            <div class="code-line"></div>
+            <div class="code-line"><span class="comment">// Trim previous user messages (latest preserved)</span></div>
+            <div class="code-line">if (m.role === "user" && idx !== lastUserIndex) {</div>
+            <div class="code-line">&nbsp;&nbsp;return { ...m, content: trimMiddle(m.content, maxPrevUserLength) };</div>
+            <div class="code-line">}</div>
+        </div>
+
+        <div id="conversationDisplay" class="conversation">
+            <p style="text-align: center; color: var(--muted);">Loading conversations...</p>
+        </div>
+    </div>
+
+    <script>
+        // Implementation of trimMiddle function from arch.ts
+        function trimMiddle(content, maxLength) {
+            if (content.length <= maxLength) return content;
+
+            const indicator = "…";
+            const availableLength = maxLength - indicator.length;
+
+            if (availableLength <= 0) {
+                return content.slice(0, maxLength);
+            }
+
+            // Reserve more space for the start (60%)
+            const startLength = Math.ceil(availableLength * 0.6);
+            const endLength = availableLength - startLength;
+
+            if (endLength <= 0) {
+                return content.slice(0, availableLength) + indicator;
+            }
+
+            const start = content.slice(0, startLength);
+            const end = content.slice(-endLength);
+
+            return start + indicator + end;
+        }
+
+        // Fetch and store conversations
+        let conversations = [];
+
+        async function loadConversations() {
+            try {
+                const response = await fetch('https://datasets-server.huggingface.co/rows?dataset=allenai%2FWildChat-1M&config=default&split=train&offset=0&length=100');
+                const data = await response.json();
+
+                // Filter for conversations with multiple turns
+                conversations = data.rows
+                    .filter(row => row.row.conversation && row.row.conversation.length >= 2)
+                    .map(row => row.row.conversation)
+                    .slice(0, 20); // Take first 20 conversations
+
+                populateConversationSelect();
+                displayConversation(0);
+            } catch (error) {
+                console.error('Error loading conversations:', error);
+                document.getElementById('conversationDisplay').innerHTML =
+                    '<p style="text-align: center; color: var(--accent);">Error loading conversations. Please refresh the page.</p>';
+            }
+        }
+
+        function populateConversationSelect() {
+            const select = document.getElementById('conversationSelect');
+            select.innerHTML = conversations.map((conv, idx) => {
+                const preview = conv[0].content.slice(0, 60).replace(/\n/g, ' ');
+                return `<option value="${idx}">Conversation ${idx + 1}: ${preview}...</option>`;
+            }).join('');
+        }
+
+        function displayConversation(index) {
+            const conversation = conversations[index];
+            if (!conversation) return;
+
+            const assistantLength = parseInt(document.getElementById('assistantLength').value);
+            const userLength = parseInt(document.getElementById('userLength').value);
+
+            const lastUserIndex = conversation.map((m, idx) => ({ idx, role: m.role }))
+                .reverse()
+                .find(m => m.role === 'user')?.idx ?? -1;
+
+            let html = '';
+
+            conversation.forEach((message, idx) => {
+                const isUser = message.role === 'user';
+                const isLastUser = idx === lastUserIndex;
+                const content = message.content;
+                let trimmed = content;
+                let shouldTrim = false;
+
+                // Apply trimming logic
+                if (message.role === 'assistant') {
+                    trimmed = trimMiddle(content, assistantLength);
+                    shouldTrim = content.length > assistantLength;
+                } else if (message.role === 'user' && !isLastUser) {
+                    trimmed = trimMiddle(content, userLength);
+                    shouldTrim = content.length > userLength;
+                }
+
+                const reductionPercent = shouldTrim ?
+                    (((content.length - trimmed.length) / content.length) * 100).toFixed(1) : 0;
+
+                html += `
+                    <div class="message message-${message.role}">
+                        <div class="message-header">
+                            <span class="role-badge role-${message.role}">${message.role}</span>
+                            <span class="char-count">${content.length} characters</span>
+                            ${isLastUser ? '<span class="char-count" style="color: var(--accent); font-weight: 600;">★ Latest user message · preserved</span>' : ''}
+                        </div>
+                        <div class="message-content">
+                            <div class="original">
+                                <div class="section-label">Original</div>
+                                <div class="content-text">${escapeHtml(content)}</div>
+                            </div>
+                            <div class="${shouldTrim ? 'trimmed' : 'no-trim'}">
+                                <div class="section-label">${shouldTrim ? 'Trimmed for Router' : 'No Trimming Required'}</div>
+                                <div class="content-text">${escapeHtml(trimmed)}</div>
+                                ${shouldTrim ? `
+                                    <div class="stats">
+                                        <strong>Original:</strong> ${content.length} chars |
+                                        <strong>Trimmed:</strong> ${trimmed.length} chars |
+                                        <span class="reduction">Reduced by ${reductionPercent}%</span>
+                                    </div>
+                                ` : ''}
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+
+            document.getElementById('conversationDisplay').innerHTML = html;
+        }
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // Event listeners
+        document.getElementById('assistantLength').addEventListener('input', (e) => {
+            document.getElementById('assistantLengthValue').textContent = e.target.value;
+            const selectedIndex = parseInt(document.getElementById('conversationSelect').value);
+            displayConversation(selectedIndex);
+        });
+
+        document.getElementById('userLength').addEventListener('input', (e) => {
+            document.getElementById('userLengthValue').textContent = e.target.value;
+            const selectedIndex = parseInt(document.getElementById('conversationSelect').value);
+            displayConversation(selectedIndex);
+        });
+
+        document.getElementById('conversationSelect').addEventListener('change', (e) => {
+            displayConversation(parseInt(e.target.value));
+        });
+
+        // Initialize
+        loadConversations();
+    </script>
+</body>
+</html>