| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 1 | <html> |
| 2 | <head> |
| 3 | <title>sketch-container-status demo</title> |
| 4 | <link rel="stylesheet" href="demo.css" /> |
| 5 | <script src="/dist/web-components/sketch-container-status.js" type="module"></script> |
| 6 | |
| 7 | <script> |
| 8 | document.addEventListener("DOMContentLoaded", () => { |
| 9 | const containerStatus = document.querySelector('#status-2'); |
| 10 | containerStatus.state = { |
| 11 | hostname: 'example.hostname', |
| 12 | initial_commit: 'decafbad', |
| 13 | message_count: 27, |
| 14 | os: 'linux', |
| 15 | total_usage: { |
| 16 | start_time: 'around lunch', |
| 17 | messages:1337, |
| 18 | input_tokens: 3, |
| 19 | output_tokens: 1000, |
| 20 | cache_read_input_tokens: 28, |
| 21 | cache_creation_input_tokens: 12354, |
| 22 | total_cost_usd: 2.03, |
| 23 | }, |
| 24 | working_dir: '/app', |
| 25 | }; |
| 26 | }); |
| 27 | </script> |
| 28 | |
| 29 | </head> |
| 30 | <body> |
| 31 | <h1>sketch-container-status demo</h1> |
| 32 | |
| 33 | Empty: |
| 34 | <sketch-container-status id="status-1"></sketch-container-status> |
| 35 | |
| 36 | With state fields set: |
| 37 | <sketch-container-status id="status-2"></sketch-container-status> |
| 38 | |
| 39 | </body> |
| 40 | </html> |