| Earl Lee | 2e463fb | 2025-04-17 11:22:22 -0700 | [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 coding assistant</title> |
| 7 | <!-- Import the diff2html CSS --> |
| 8 | <link rel="stylesheet" href="static/diff2html.min.css" /> |
| 9 | <link rel="stylesheet" href="static/timeline.css" /> |
| 10 | <link rel="stylesheet" href="static/diff2.css" /> |
| 11 | <link rel="stylesheet" href="static/xterm.css" /> |
| 12 | <link rel="stylesheet" href="static/tailwind.css" /> |
| 13 | </head> |
| 14 | <body> |
| 15 | <div class="top-banner"> |
| 16 | <div class="title-container"> |
| 17 | <h1 class="banner-title">sketch coding assistant</h1> |
| 18 | <h2 id="chatTitle" class="chat-title"></h2> |
| 19 | </div> |
| 20 | <div class="info-grid"> |
| 21 | <div class="info-item"> |
| 22 | <a href="logs" class="text-blue-600 font-medium hover:text-blue-800 hover:underline">Logs</a> |
| 23 | </div> |
| 24 | <div class="info-item"> |
| 25 | <a href="download" class="text-blue-600 font-medium hover:text-blue-800 hover:underline">Download</a> |
| 26 | </div> |
| 27 | <div class="info-item"> |
| 28 | <span id="hostname" class="info-value">Loading...</span> |
| 29 | </div> |
| 30 | <div class="info-item"> |
| 31 | <span id="workingDir" class="info-value">Loading...</span> |
| 32 | </div> |
| 33 | <div class="info-item"> |
| 34 | <span class="info-label">Commit:</span> |
| 35 | <span id="initialCommit" class="info-value">Loading...</span> |
| 36 | </div> |
| 37 | <div class="info-item"> |
| 38 | <span class="info-label">Msgs:</span> |
| 39 | <span id="messageCount" class="info-value">0</span> |
| 40 | </div> |
| 41 | <div class="info-item"> |
| 42 | <span class="info-label">In:</span> |
| 43 | <span id="inputTokens" class="info-value">0</span> |
| 44 | </div> |
| 45 | <div class="info-item"> |
| 46 | <span class="info-label">Cache Read:</span> |
| 47 | <span id="cacheReadInputTokens" class="info-value">0</span> |
| 48 | </div> |
| 49 | <div class="info-item"> |
| 50 | <span class="info-label">Cache Create:</span> |
| 51 | <span id="cacheCreationInputTokens" class="info-value">0</span> |
| 52 | </div> |
| 53 | <div class="info-item"> |
| 54 | <span class="info-label">Out:</span> |
| 55 | <span id="outputTokens" class="info-value">0</span> |
| 56 | </div> |
| 57 | <div class="info-item"> |
| 58 | <span class="info-label">Cost:</span> |
| 59 | <span id="totalCost" class="info-value cost">$0.00</span> |
| 60 | </div> |
| 61 | </div> |
| 62 | <div class="refresh-control"> |
| 63 | <div class="view-mode-buttons"> |
| 64 | <button |
| 65 | id="showConversationButton" |
| 66 | class="emoji-button" |
| 67 | title="Conversation View" |
| 68 | > |
| 69 | 💬 |
| 70 | </button> |
| 71 | <button |
| 72 | id="showDiff2Button" |
| 73 | class="emoji-button" |
| 74 | title="Diff View" |
| 75 | > |
| 76 | ± |
| 77 | </button> |
| 78 | <button |
| 79 | id="showChartsButton" |
| 80 | class="emoji-button" |
| 81 | title="Charts View" |
| 82 | > |
| 83 | 📈 |
| 84 | </button> |
| 85 | <button |
| 86 | id="showTerminalButton" |
| 87 | class="emoji-button" |
| 88 | title="Terminal View" |
| 89 | > |
| 90 | 💻 |
| 91 | </button> |
| 92 | </div> |
| 93 | <button id="stopButton" class="refresh-button stop-button">Stop</button> |
| 94 | <div class="poll-updates"> |
| 95 | <input type="checkbox" id="pollToggle" checked /> |
| 96 | <label for="pollToggle">Poll</label> |
| 97 | </div> |
| 98 | <div class="status-container"> |
| 99 | <span id="pollingIndicator" class="polling-indicator"></span> |
| 100 | <span id="statusText" class="status-text"></span> |
| 101 | </div> |
| 102 | </div> |
| 103 | </div> |
| 104 | |
| 105 | <div class="timeline-container"> |
| 106 | <div id="timeline" class="timeline empty"></div> |
| 107 | <div id="diff2View" class="diff-view" style="display: none"> |
| 108 | <div id="diff2Container" class="diff-container"> |
| 109 | <div id="diff-view-controls"> |
| 110 | <div class="diff-view-format"> |
| 111 | <label> |
| 112 | <input type="radio" name="diffViewFormat" value="side-by-side" checked> Side-by-side |
| 113 | </label> |
| 114 | <label> |
| 115 | <input type="radio" name="diffViewFormat" value="line-by-line"> Line-by-line |
| 116 | </label> |
| 117 | </div> |
| 118 | </div> |
| 119 | <div id="diff2htmlContent" class="diff2html-content"></div> |
| 120 | </div> |
| 121 | </div> |
| 122 | <div id="chartView" class="chart-view" style="display: none"> |
| 123 | <div id="chartContainer" class="chart-container"></div> |
| 124 | </div> |
| 125 | <div id="terminalView" class="terminal-view" style="display: none"> |
| 126 | <div id="terminalContainer" class="terminal-container"></div> |
| 127 | </div> |
| 128 | <div id="diffCommentBox" class="diff-comment-box" style="display: none"> |
| 129 | <h3>Add a comment</h3> |
| 130 | <div class="selected-line"> |
| 131 | Line: |
| 132 | <pre id="selectedLine"></pre> |
| 133 | </div> |
| 134 | <textarea |
| 135 | id="diffCommentInput" |
| 136 | placeholder="Enter your comment about this line..." |
| 137 | ></textarea> |
| 138 | <div class="diff-comment-buttons"> |
| 139 | <button id="submitDiffComment">Add Comment</button> |
| 140 | <button id="cancelDiffComment">Cancel</button> |
| 141 | </div> |
| 142 | </div> |
| 143 | </div> |
| 144 | |
| 145 | <div class="chat-container"> |
| 146 | <div class="chat-input-wrapper"> |
| 147 | <textarea |
| 148 | id="chatInput" |
| 149 | placeholder="Type your message here and press Enter to send..." |
| 150 | autofocus |
| 151 | ></textarea> |
| 152 | <button id="sendChatButton">Send</button> |
| 153 | </div> |
| 154 | </div> |
| 155 | |
| 156 | <script src="static/timeline.js"></script> |
| 157 | </body> |
| 158 | </html> |