Gitiles
Code Review Sign In
code.v1.dodo.cloud / sketch / 9dc2f62c6d44f53e057bd7319ffbcbc00ef5f2a0 / . / webui / src / web-components / demo / index-generated.html
blob: 027872fe73f23ba3568424e4792e08a24e4ac508 [file] [log] [blame]
Sean McCullough618bfb22025-06-25 20:52:30 +0000[diff] [blame]1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Sketch Web Components - Demo Index</title>
7 <link rel="stylesheet" href="demo.css" />
8 <style>
9 body {
10 font-family:
11 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12 max-width: 800px;
13 margin: 40px auto;
14 padding: 20px;
15 line-height: 1.6;
16 }
17
18 h1 {
19 color: #24292f;
20 border-bottom: 1px solid #d1d9e0;
21 padding-bottom: 10px;
22 }
23
24 .demo-list {
25 list-style: none;
26 padding: 0;
27 }
28
29 .demo-list li {
30 margin: 15px 0;
31 padding: 15px;
32 border: 1px solid #d1d9e0;
33 border-radius: 6px;
34 background: #f6f8fa;
35 transition: background-color 0.2s;
36 }
37
38 .demo-list li:hover {
39 background: #ffffff;
40 }
41
42 .demo-list a {
43 text-decoration: none;
44 color: #0969da;
45 display: block;
46 }
47
48 .demo-list a:hover {
49 text-decoration: underline;
50 }
51
52 .demo-list strong {
53 font-size: 16px;
54 display: block;
55 margin-bottom: 5px;
56 }
57
58 .stats {
59 background: #fff8dc;
60 padding: 15px;
61 border-radius: 6px;
62 margin: 20px 0;
63 border-left: 4px solid #f9c23c;
64 }
65
66 .runner-link {
67 display: inline-block;
68 padding: 10px 20px;
69 background: #0969da;
70 color: white;
71 text-decoration: none;
72 border-radius: 6px;
73 margin-top: 20px;
74 }
75
76 .runner-link:hover {
77 background: #0860ca;
78 }
79 </style>
80 </head>
81 <body>
82 <h1>Sketch Web Components Demo Index</h1>
83
84 <div class="stats">
85 <strong>Auto-generated index</strong><br />
banksean44f76162025-07-21 03:04:52 +0000[diff] [blame]86 Found 18 demo components • Last updated: 7/21/2025, 3:04:10 AM
Sean McCullough618bfb22025-06-25 20:52:30 +0000[diff] [blame]87 </div>
88
89 <p>
90 This page provides an overview of all available component demos. Click on
91 any component below to view its interactive demo.
92 </p>
93
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]94 <a href="demo.html" class="runner-link">🚀 Launch Demo Runner</a>
Sean McCullough618bfb22025-06-25 20:52:30 +0000[diff] [blame]95
96 <h2>Available Component Demos</h2>
97
98 <ul class="demo-list">
99 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]100 <a href="demo.html#sketch-call-status">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]101 <strong>Call Status Demo</strong> - Display current LLM and tool call
102 status with visual indicators
103 </a>
104 </li>
105 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]106 <a href="demo.html#sketch-chat-input">
Sean McCullough618bfb22025-06-25 20:52:30 +0000[diff] [blame]107 <strong>Chat Input Demo</strong> - Interactive chat input component
108 with send functionality
109 </a>
110 </li>
111 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]112 <a href="demo.html#sketch-container-status">
Sean McCullough618bfb22025-06-25 20:52:30 +0000[diff] [blame]113 <strong>Container Status Demo</strong> - Display container status
114 information with usage statistics
115 </a>
116 </li>
117 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]118 <a href="demo.html#sketch-diff-range-picker">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]119 <strong>Diff Range Picker Demo</strong> - Component for selecting
120 commit ranges for diff views
121 </a>
122 </li>
123 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]124 <a href="demo.html#mobile-chat">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]125 <strong>Mobile Chat Demo</strong> - Mobile chat interface with message
126 display and scroll behavior
127 </a>
128 </li>
129 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]130 <a href="demo.html#sketch-push-button">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]131 <strong>Push Button</strong>
132 </a>
133 </li>
134 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]135 <a href="demo.html#sketch-app-shell">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]136 <strong>Sketch App Shell Demo</strong> - Full sketch application shell
137 with chat, diff, and terminal views
138 </a>
139 </li>
140 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]141 <a href="demo.html#sketch-diff2-view">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]142 <strong>Sketch Monaco Diff View Demo</strong> - Monaco-based diff view
143 with range and file pickers using mock data
144 </a>
145 </li>
146 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]147 <a href="demo.html#sketch-monaco-view">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]148 <strong>Sketch Monaco Viewer Demo</strong> - Monaco editor with code
149 comparison functionality for different languages
150 </a>
151 </li>
152 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]153 <a href="demo.html#sketch-timeline-viewport">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]154 <strong>Sketch Timeline Viewport Demo</strong> - Timeline viewport
155 rendering with memory leak protection and event-driven approach
156 </a>
157 </li>
158 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]159 <a href="demo.html#sketch-tool-card">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]160 <strong>Sketch Tool Card Demo</strong> - Demonstration of different
161 tool card components for various tool types
162 </a>
163 </li>
164 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]165 <a href="demo.html#status-indicators">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]166 <strong>Status Indicators Demo</strong> - Status indicators showing
167 connected, working, and disconnected states without the green
168 connection dot
169 </a>
170 </li>
171 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]172 <a href="demo.html#sketch-theme-toggle">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]173 <strong>Theme Toggle Demo</strong> - Three-way theme toggle: light
174 mode, dark mode, and system preference
175 </a>
176 </li>
177 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]178 <a href="demo.html#sketch-timeline">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]179 <strong>Timeline Demo</strong> - Interactive timeline component for
180 displaying conversation messages with various states
181 </a>
182 </li>
183 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]184 <a href="demo.html#sketch-timeline-message">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]185 <strong>Timeline Message Demo</strong> - Interactive timeline message
186 component with various message types and features
187 </a>
188 </li>
189 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]190 <a href="demo.html#sketch-todo-panel">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]191 <strong>Todo Panel Demo</strong> - Interactive todo list panel showing
192 task progress and allowing comments
193 </a>
194 </li>
195 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]196 <a href="demo.html#sketch-tool-calls">
Sean McCullough618bfb22025-06-25 20:52:30 +0000[diff] [blame]197 <strong>Tool Calls Demo</strong> - Interactive tool call display with
198 various tool types
199 </a>
200 </li>
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]201 <li>
banksean581bd792025-07-20 18:30:12 -0700[diff] [blame]202 <a href="demo.html#sketch-view-mode-select">
bankseand52d39d2025-07-20 14:57:38 -0700[diff] [blame]203 <strong>View Mode Select Demo</strong> - Interactive tab navigation
204 for switching between chat, diff, and terminal views
205 </a>
206 </li>
Sean McCullough618bfb22025-06-25 20:52:30 +0000[diff] [blame]207 </ul>
208
209 <hr style="margin: 40px 0; border: none; border-top: 1px solid #d1d9e0" />
210
211 <p>
212 <em
213 >This index is automatically generated from available
214 <code>*.demo.ts</code> files.</em
215 ><br />
216 To add a new demo, create a <code>component-name.demo.ts</code> file in
217 this directory.
218 </p>
219 </body>
220</html>