| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>sketch coding assistant</title> |
| <!-- Import the diff2html CSS --> |
| <link rel="stylesheet" href="static/diff2html.min.css" /> |
| <link rel="stylesheet" href="static/timeline.css" /> |
| <link rel="stylesheet" href="static/diff2.css" /> |
| <link rel="stylesheet" href="static/xterm.css" /> |
| <link rel="stylesheet" href="static/tailwind.css" /> |
| </head> |
| <body> |
| <div class="top-banner"> |
| <div class="title-container"> |
| <h1 class="banner-title">sketch coding assistant</h1> |
| <h2 id="chatTitle" class="chat-title"></h2> |
| </div> |
| <div class="info-grid"> |
| <div class="info-item"> |
| <a href="logs" class="text-blue-600 font-medium hover:text-blue-800 hover:underline">Logs</a> |
| </div> |
| <div class="info-item"> |
| <a href="download" class="text-blue-600 font-medium hover:text-blue-800 hover:underline">Download</a> |
| </div> |
| <div class="info-item"> |
| <span id="hostname" class="info-value">Loading...</span> |
| </div> |
| <div class="info-item"> |
| <span id="workingDir" class="info-value">Loading...</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Commit:</span> |
| <span id="initialCommit" class="info-value">Loading...</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Msgs:</span> |
| <span id="messageCount" class="info-value">0</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">In:</span> |
| <span id="inputTokens" class="info-value">0</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Cache Read:</span> |
| <span id="cacheReadInputTokens" class="info-value">0</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Cache Create:</span> |
| <span id="cacheCreationInputTokens" class="info-value">0</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Out:</span> |
| <span id="outputTokens" class="info-value">0</span> |
| </div> |
| <div class="info-item"> |
| <span class="info-label">Cost:</span> |
| <span id="totalCost" class="info-value cost">$0.00</span> |
| </div> |
| </div> |
| <div class="refresh-control"> |
| <div class="view-mode-buttons"> |
| <button |
| id="showConversationButton" |
| class="emoji-button" |
| title="Conversation View" |
| > |
| 💬 |
| </button> |
| <button |
| id="showDiff2Button" |
| class="emoji-button" |
| title="Diff View" |
| > |
| ± |
| </button> |
| <button |
| id="showChartsButton" |
| class="emoji-button" |
| title="Charts View" |
| > |
| 📈 |
| </button> |
| <button |
| id="showTerminalButton" |
| class="emoji-button" |
| title="Terminal View" |
| > |
| 💻 |
| </button> |
| </div> |
| <button id="stopButton" class="refresh-button stop-button">Stop</button> |
| <div class="poll-updates"> |
| <input type="checkbox" id="pollToggle" checked /> |
| <label for="pollToggle">Poll</label> |
| </div> |
| <div class="status-container"> |
| <span id="pollingIndicator" class="polling-indicator"></span> |
| <span id="statusText" class="status-text"></span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="timeline-container"> |
| <div id="timeline" class="timeline empty"></div> |
| <div id="diff2View" class="diff-view" style="display: none"> |
| <div id="diff2Container" class="diff-container"> |
| <div id="diff-view-controls"> |
| <div class="diff-view-format"> |
| <label> |
| <input type="radio" name="diffViewFormat" value="side-by-side" checked> Side-by-side |
| </label> |
| <label> |
| <input type="radio" name="diffViewFormat" value="line-by-line"> Line-by-line |
| </label> |
| </div> |
| </div> |
| <div id="diff2htmlContent" class="diff2html-content"></div> |
| </div> |
| </div> |
| <div id="chartView" class="chart-view" style="display: none"> |
| <div id="chartContainer" class="chart-container"></div> |
| </div> |
| <div id="terminalView" class="terminal-view" style="display: none"> |
| <div id="terminalContainer" class="terminal-container"></div> |
| </div> |
| <div id="diffCommentBox" class="diff-comment-box" style="display: none"> |
| <h3>Add a comment</h3> |
| <div class="selected-line"> |
| Line: |
| <pre id="selectedLine"></pre> |
| </div> |
| <textarea |
| id="diffCommentInput" |
| placeholder="Enter your comment about this line..." |
| ></textarea> |
| <div class="diff-comment-buttons"> |
| <button id="submitDiffComment">Add Comment</button> |
| <button id="cancelDiffComment">Cancel</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="chat-container"> |
| <div class="chat-input-wrapper"> |
| <textarea |
| id="chatInput" |
| placeholder="Type your message here and press Enter to send..." |
| autofocus |
| ></textarea> |
| <button id="sendChatButton">Send</button> |
| </div> |
| </div> |
| |
| <script src="static/timeline.js"></script> |
| </body> |
| </html> |