blob: 2a6b270a14d6d443f9515b9fafe7fd44e3cbdf5a [file] [log] [blame]
Sean McCullough86b56862025-04-18 13:04:03 -07001<html>
2 <head>
3 <title>sketch-network-status demo</title>
4 <link rel="stylesheet" href="demo.css" />
Philip Zeyliger72682df2025-04-23 13:09:46 -07005 <script type="module" src="../sketch-network-status.ts"></script>
Philip Zeyliger5e357022025-05-16 04:50:34 +00006 <script type="module" src="../sketch-call-status.ts"></script>
7 <style>
8 .status-container {
9 margin: 20px 0;
10 padding: 10px;
11 border: 1px solid #ccc;
12 border-radius: 4px;
13 }
14 .label {
15 font-weight: bold;
16 margin-bottom: 5px;
17 }
18 </style>
Sean McCullough86b56862025-04-18 13:04:03 -070019 </head>
20 <body>
Philip Zeyliger5e357022025-05-16 04:50:34 +000021 <h1>Status Indicators Demo</h1>
Autoformatter8c463622025-05-16 21:54:17 +000022
Philip Zeyliger5e357022025-05-16 04:50:34 +000023 <div class="status-container">
24 <div class="label">Connected State:</div>
25 <sketch-call-status
26 .isDisconnected="false"
27 .isIdle="true"
28 .llmCalls="0"
Autoformatter8c463622025-05-16 21:54:17 +000029 .toolCalls="[]"
Philip Zeyliger5e357022025-05-16 04:50:34 +000030 ></sketch-call-status>
31 </div>
Autoformatter8c463622025-05-16 21:54:17 +000032
Philip Zeyliger5e357022025-05-16 04:50:34 +000033 <div class="status-container">
34 <div class="label">Working State:</div>
35 <sketch-call-status
36 .isDisconnected="false"
37 .isIdle="false"
38 .llmCalls="1"
39 .toolCalls='["bash"]'
40 ></sketch-call-status>
41 </div>
Autoformatter8c463622025-05-16 21:54:17 +000042
Philip Zeyliger5e357022025-05-16 04:50:34 +000043 <div class="status-container">
44 <div class="label">Disconnected State:</div>
45 <sketch-call-status
46 .isDisconnected="true"
47 .isIdle="true"
48 .llmCalls="0"
Autoformatter8c463622025-05-16 21:54:17 +000049 .toolCalls="[]"
Philip Zeyliger5e357022025-05-16 04:50:34 +000050 ></sketch-call-status>
51 </div>
Sean McCullough86b56862025-04-18 13:04:03 -070052 </body>
Sean McCullough71941bd2025-04-18 13:31:48 -070053</html>