| 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" /> |
| Sean McCullough | 618bfb2 | 2025-06-25 20:52:30 +0000 | [diff] [blame] | 5 | <link rel="stylesheet" href="/dist/tailwind.css" /> |
| Philip Zeyliger | 72682df | 2025-04-23 13:09:46 -0700 | [diff] [blame] | 6 | <script type="module" src="../sketch-container-status.ts"></script> |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 7 | |
| 8 | <script> |
| 9 | document.addEventListener("DOMContentLoaded", () => { |
| Sean McCullough | 71941bd | 2025-04-18 13:31:48 -0700 | [diff] [blame] | 10 | const containerStatus = document.querySelector("#status-2"); |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 11 | containerStatus.state = { |
| Sean McCullough | 71941bd | 2025-04-18 13:31:48 -0700 | [diff] [blame] | 12 | hostname: "example.hostname", |
| 13 | initial_commit: "decafbad", |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 14 | message_count: 27, |
| Sean McCullough | 71941bd | 2025-04-18 13:31:48 -0700 | [diff] [blame] | 15 | os: "linux", |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 16 | total_usage: { |
| Sean McCullough | 71941bd | 2025-04-18 13:31:48 -0700 | [diff] [blame] | 17 | start_time: "around lunch", |
| 18 | messages: 1337, |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 19 | input_tokens: 3, |
| 20 | output_tokens: 1000, |
| 21 | cache_read_input_tokens: 28, |
| 22 | cache_creation_input_tokens: 12354, |
| 23 | total_cost_usd: 2.03, |
| Sean McCullough | 71941bd | 2025-04-18 13:31:48 -0700 | [diff] [blame] | 24 | }, |
| 25 | working_dir: "/app", |
| Philip Zeyliger | 6dc90c0 | 2025-07-03 20:12:49 -0700 | [diff] [blame] | 26 | session_id: "demo-session-123", |
| 27 | skaband_addr: "https://sketch.dev", |
| 28 | open_ports: [ |
| 29 | { proto: "tcp", port: 22, process: "ssh", pid: 100 }, |
| 30 | { proto: "tcp", port: 80, process: "nginx", pid: 200 }, |
| 31 | { proto: "tcp", port: 3000, process: "node", pid: 300 }, |
| 32 | { proto: "tcp", port: 8080, process: "python", pid: 400 }, |
| Autoformatter | e48f2bb | 2025-07-04 04:15:26 +0000 | [diff] [blame] | 33 | { proto: "tcp", port: 9000, process: "go", pid: 500 }, |
| 34 | ], |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 35 | }; |
| 36 | }); |
| 37 | </script> |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 38 | </head> |
| 39 | <body> |
| 40 | <h1>sketch-container-status demo</h1> |
| 41 | |
| 42 | Empty: |
| 43 | <sketch-container-status id="status-1"></sketch-container-status> |
| 44 | |
| 45 | With state fields set: |
| 46 | <sketch-container-status id="status-2"></sketch-container-status> |
| Sean McCullough | 86b5686 | 2025-04-18 13:04:03 -0700 | [diff] [blame] | 47 | </body> |
| Sean McCullough | 71941bd | 2025-04-18 13:31:48 -0700 | [diff] [blame] | 48 | </html> |