Gitiles
Code Review Sign In
code.v1.dodo.cloud / sketch / 7735844caf9fa4e2d7bbe3bf64d20e86b9bf469e / . / webui / src / web-components / demo / status-demo.html
blob: 4ce5af370aa6703d161dec93221786ae7acb296d [file] [log] [blame]
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]1<!doctype html>
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]2<html>
3 <head>
4 <title>Status Demo</title>
5 <script type="module" src="../sketch-call-status.ts"></script>
6 <style>
7 body {
8 font-family: system-ui, sans-serif;
9 max-width: 800px;
10 margin: 0 auto;
11 padding: 20px;
12 }
13 .demo-section {
14 margin-bottom: 40px;
15 }
16 .demo-item {
17 margin-bottom: 20px;
18 padding: 15px;
19 border: 1px solid #ccc;
20 border-radius: 5px;
21 }
22 h2 {
23 margin-top: 0;
24 }
25 .status-display {
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 height: 60px;
30 background-color: #f5f5f5;
31 border-radius: 4px;
32 margin-top: 10px;
33 }
34 </style>
35 </head>
36 <body>
37 <h1>Status Indicators Demo</h1>
38 <p>This demo shows the status indicators with the DISCONNECTED state.</p>
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]39
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]40 <div class="demo-section">
41 <div class="demo-item">
42 <h2>IDLE State</h2>
43 <div class="status-display">
44 <sketch-call-status id="idle-status"></sketch-call-status>
45 </div>
46 </div>
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]47
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]48 <div class="demo-item">
49 <h2>WORKING State</h2>
50 <div class="status-display">
51 <sketch-call-status id="working-status"></sketch-call-status>
52 </div>
53 </div>
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]54
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]55 <div class="demo-item">
56 <h2>DISCONNECTED State</h2>
57 <div class="status-display">
58 <sketch-call-status id="disconnected-status"></sketch-call-status>
59 </div>
60 </div>
61 </div>
62
63 <script>
64 // Set up the demo after components are defined
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]65 window.addEventListener("DOMContentLoaded", () => {
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]66 // IDLE status
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]67 const idleStatus = document.getElementById("idle-status");
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]68 idleStatus.isIdle = true;
69 idleStatus.isDisconnected = false;
70 idleStatus.llmCalls = 0;
71 idleStatus.toolCalls = [];
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]72
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]73 // WORKING status
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]74 const workingStatus = document.getElementById("working-status");
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]75 workingStatus.isIdle = false;
76 workingStatus.isDisconnected = false;
77 workingStatus.llmCalls = 1;
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]78 workingStatus.toolCalls = ["bash"];
79
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]80 // DISCONNECTED status
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]81 const disconnectedStatus = document.getElementById(
82 "disconnected-status",
83 );
Philip Zeyliger5e357022025-05-16 04:50:34 +0000[diff] [blame]84 disconnectedStatus.isIdle = true;
85 disconnectedStatus.isDisconnected = true;
86 disconnectedStatus.llmCalls = 0;
87 disconnectedStatus.toolCalls = [];
88 });
89 </script>
90 </body>
Autoformatter8c463622025-05-16 21:54:17 +0000[diff] [blame]91</html>