| banksean | e59a2e1 | 2025-06-28 01:38:19 +0000 | [diff] [blame] | 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>Sketch Timeline Manual Test</title> |
| 7 | <link rel="stylesheet" href="/dist/tailwind.css" /> |
| 8 | <style> |
| 9 | body { |
| 10 | font-family: |
| 11 | system-ui, |
| 12 | -apple-system, |
| 13 | sans-serif; |
| 14 | margin: 0; |
| 15 | padding: 20px; |
| 16 | } |
| 17 | .test-container { |
| 18 | max-width: 800px; |
| 19 | margin: 0 auto; |
| 20 | } |
| 21 | .test-section { |
| 22 | margin: 40px 0; |
| 23 | padding: 20px; |
| 24 | border: 1px solid #e1e5e9; |
| 25 | border-radius: 8px; |
| 26 | } |
| 27 | .test-section h3 { |
| 28 | margin: 0 0 15px 0; |
| 29 | color: #24292f; |
| 30 | } |
| 31 | .timeline-wrapper { |
| 32 | height: 400px; |
| 33 | border: 1px solid #ccc; |
| 34 | border-radius: 6px; |
| 35 | margin: 15px 0; |
| 36 | } |
| 37 | </style> |
| 38 | </head> |
| 39 | <body> |
| 40 | <div class="test-container"> |
| 41 | <h1>Sketch Timeline Component Test</h1> |
| 42 | <p> |
| 43 | This page tests the converted SketchTimeline component using Tailwind |
| 44 | CSS. |
| 45 | </p> |
| 46 | |
| 47 | <div class="test-section"> |
| 48 | <h3>Empty Timeline (Welcome State)</h3> |
| 49 | <div class="timeline-wrapper"> |
| 50 | <sketch-timeline id="empty-timeline"></sketch-timeline> |
| 51 | </div> |
| 52 | </div> |
| 53 | |
| 54 | <div class="test-section"> |
| 55 | <h3>Timeline with Messages</h3> |
| 56 | <div class="timeline-wrapper"> |
| 57 | <sketch-timeline id="messages-timeline"></sketch-timeline> |
| 58 | </div> |
| 59 | </div> |
| 60 | |
| 61 | <div class="test-section"> |
| 62 | <h3>Timeline with Thinking State</h3> |
| 63 | <div class="timeline-wrapper"> |
| 64 | <sketch-timeline id="thinking-timeline"></sketch-timeline> |
| 65 | </div> |
| 66 | </div> |
| 67 | |
| 68 | <div class="test-section"> |
| 69 | <h3>Controls</h3> |
| 70 | <button id="add-message">Add Message</button> |
| 71 | <button id="toggle-thinking">Toggle Thinking</button> |
| 72 | <button id="clear-messages">Clear Messages</button> |
| 73 | </div> |
| 74 | </div> |
| 75 | |
| 76 | <script type="module"> |
| 77 | // Import the timeline component |
| 78 | import "../sketch-timeline.js"; |
| 79 | |
| 80 | // Mock messages |
| 81 | function createMockMessage(props = {}) { |
| 82 | return { |
| 83 | idx: props.idx || 0, |
| 84 | type: props.type || "agent", |
| 85 | content: props.content || "Hello world", |
| 86 | timestamp: props.timestamp || "2023-05-15T12:00:00Z", |
| 87 | elapsed: props.elapsed || 1500000000, |
| 88 | end_of_turn: props.end_of_turn || false, |
| 89 | conversation_id: props.conversation_id || "conv123", |
| 90 | tool_calls: props.tool_calls || [], |
| 91 | commits: props.commits || [], |
| 92 | usage: props.usage, |
| 93 | hide_output: props.hide_output || false, |
| 94 | ...props, |
| 95 | }; |
| 96 | } |
| 97 | |
| 98 | // Get timeline elements |
| 99 | const emptyTimeline = document.getElementById("empty-timeline"); |
| 100 | const messagesTimeline = document.getElementById("messages-timeline"); |
| 101 | const thinkingTimeline = document.getElementById("thinking-timeline"); |
| 102 | |
| 103 | // Set up messages timeline |
| 104 | const messages = [ |
| 105 | createMockMessage({ |
| 106 | idx: 0, |
| 107 | content: "Hello! I'm a user message.", |
| 108 | type: "user", |
| 109 | timestamp: "2023-05-15T12:00:00Z", |
| 110 | }), |
| 111 | createMockMessage({ |
| 112 | idx: 1, |
| 113 | content: "And I'm an agent response with some details.", |
| 114 | type: "agent", |
| 115 | timestamp: "2023-05-15T12:01:00Z", |
| 116 | usage: { |
| 117 | input_tokens: 15, |
| 118 | output_tokens: 42, |
| 119 | cost_usd: 0.001234, |
| 120 | }, |
| 121 | }), |
| 122 | createMockMessage({ |
| 123 | idx: 2, |
| 124 | content: "Here's a message with tool calls.", |
| 125 | type: "agent", |
| 126 | timestamp: "2023-05-15T12:02:00Z", |
| 127 | tool_calls: [ |
| 128 | { |
| 129 | name: "bash", |
| 130 | input: "echo 'Hello World'", |
| 131 | tool_call_id: "call_123", |
| 132 | args: '{"command": "echo \'Hello World\'"}', |
| 133 | result: "Hello World", |
| 134 | }, |
| 135 | ], |
| 136 | }), |
| 137 | ]; |
| 138 | |
| 139 | messagesTimeline.messages = messages; |
| 140 | thinkingTimeline.messages = messages.slice(0, 2); |
| 141 | |
| 142 | // Set initial load complete |
| 143 | setTimeout(() => { |
| 144 | messagesTimeline.isInitialLoadComplete = true; |
| 145 | thinkingTimeline.isInitialLoadComplete = true; |
| 146 | messagesTimeline.requestUpdate(); |
| 147 | thinkingTimeline.requestUpdate(); |
| 148 | }, 100); |
| 149 | |
| 150 | // Set thinking state |
| 151 | thinkingTimeline.llmCalls = 1; |
| 152 | thinkingTimeline.toolCalls = ["bash"]; |
| 153 | |
| 154 | // Control buttons |
| 155 | let messageCount = messages.length; |
| 156 | document.getElementById("add-message").addEventListener("click", () => { |
| 157 | const newMessage = createMockMessage({ |
| 158 | idx: messageCount++, |
| 159 | content: `New message added at ${new Date().toLocaleTimeString()}`, |
| 160 | type: messageCount % 2 === 0 ? "user" : "agent", |
| 161 | timestamp: new Date().toISOString(), |
| 162 | }); |
| 163 | messages.push(newMessage); |
| 164 | messagesTimeline.messages = [...messages]; |
| 165 | }); |
| 166 | |
| 167 | document |
| 168 | .getElementById("toggle-thinking") |
| 169 | .addEventListener("click", () => { |
| 170 | if (thinkingTimeline.llmCalls > 0) { |
| 171 | thinkingTimeline.llmCalls = 0; |
| 172 | thinkingTimeline.toolCalls = []; |
| 173 | } else { |
| 174 | thinkingTimeline.llmCalls = 1; |
| 175 | thinkingTimeline.toolCalls = ["bash"]; |
| 176 | } |
| 177 | }); |
| 178 | |
| 179 | document |
| 180 | .getElementById("clear-messages") |
| 181 | .addEventListener("click", () => { |
| 182 | messages.length = 0; |
| 183 | messagesTimeline.messages = []; |
| 184 | messageCount = 0; |
| 185 | }); |
| 186 | </script> |
| 187 | </body> |
| 188 | </html> |