webui/src/web-components/demo/index-generated.html - sketch - Gitiles

 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sketch Web Components - Demo Index</title>
     <link rel="stylesheet" href="demo.css" />
     <style>
       body {
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         max-width: 800px;
         margin: 40px auto;
         padding: 20px;
         line-height: 1.6;
       }

       h1 {
         color: #24292f;
         border-bottom: 1px solid #d1d9e0;
         padding-bottom: 10px;
       }

       .demo-list {
         list-style: none;
         padding: 0;
       }

       .demo-list li {
         margin: 15px 0;
         padding: 15px;
         border: 1px solid #d1d9e0;
         border-radius: 6px;
         background: #f6f8fa;
         transition: background-color 0.2s;
       }

       .demo-list li:hover {
         background: #ffffff;
       }

       .demo-list a {
         text-decoration: none;
         color: #0969da;
         display: block;
       }

       .demo-list a:hover {
         text-decoration: underline;
       }

       .demo-list strong {
         font-size: 16px;
         display: block;
         margin-bottom: 5px;
       }

       .stats {
         background: #fff8dc;
         padding: 15px;
         border-radius: 6px;
         margin: 20px 0;
         border-left: 4px solid #f9c23c;
       }

       .runner-link {
         display: inline-block;
         padding: 10px 20px;
         background: #0969da;
         color: white;
         text-decoration: none;
         border-radius: 6px;
         margin-top: 20px;
       }

       .runner-link:hover {
         background: #0860ca;
       }
     </style>
   </head>
   <body>
     <h1>Sketch Web Components Demo Index</h1>

     <div class="stats">
       <strong>Auto-generated index</strong><br />
       Found 18 demo components • Last updated: 7/21/2025, 3:04:10 AM
     </div>

     <p>
       This page provides an overview of all available component demos. Click on
       any component below to view its interactive demo.
     </p>

     <a href="demo.html" class="runner-link">🚀 Launch Demo Runner</a>

     <h2>Available Component Demos</h2>

     <ul class="demo-list">
       <li>
         <a href="demo.html#sketch-call-status">
           <strong>Call Status Demo</strong> - Display current LLM and tool call
           status with visual indicators
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-chat-input">
           <strong>Chat Input Demo</strong> - Interactive chat input component
           with send functionality
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-container-status">
           <strong>Container Status Demo</strong> - Display container status
           information with usage statistics
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-diff-range-picker">
           <strong>Diff Range Picker Demo</strong> - Component for selecting
           commit ranges for diff views
         </a>
       </li>
       <li>
         <a href="demo.html#mobile-chat">
           <strong>Mobile Chat Demo</strong> - Mobile chat interface with message
           display and scroll behavior
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-push-button">
           <strong>Push Button</strong>
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-app-shell">
           <strong>Sketch App Shell Demo</strong> - Full sketch application shell
           with chat, diff, and terminal views
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-diff2-view">
           <strong>Sketch Monaco Diff View Demo</strong> - Monaco-based diff view
           with range and file pickers using mock data
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-monaco-view">
           <strong>Sketch Monaco Viewer Demo</strong> - Monaco editor with code
           comparison functionality for different languages
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-timeline-viewport">
           <strong>Sketch Timeline Viewport Demo</strong> - Timeline viewport
           rendering with memory leak protection and event-driven approach
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-tool-card">
           <strong>Sketch Tool Card Demo</strong> - Demonstration of different
           tool card components for various tool types
         </a>
       </li>
       <li>
         <a href="demo.html#status-indicators">
           <strong>Status Indicators Demo</strong> - Status indicators showing
           connected, working, and disconnected states without the green
           connection dot
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-theme-toggle">
           <strong>Theme Toggle Demo</strong> - Three-way theme toggle: light
           mode, dark mode, and system preference
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-timeline">
           <strong>Timeline Demo</strong> - Interactive timeline component for
           displaying conversation messages with various states
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-timeline-message">
           <strong>Timeline Message Demo</strong> - Interactive timeline message
           component with various message types and features
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-todo-panel">
           <strong>Todo Panel Demo</strong> - Interactive todo list panel showing
           task progress and allowing comments
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-tool-calls">
           <strong>Tool Calls Demo</strong> - Interactive tool call display with
           various tool types
         </a>
       </li>
       <li>
         <a href="demo.html#sketch-view-mode-select">
           <strong>View Mode Select Demo</strong> - Interactive tab navigation
           for switching between chat, diff, and terminal views
         </a>
       </li>
     </ul>

     <hr style="margin: 40px 0; border: none; border-top: 1px solid #d1d9e0" />

     <p>
       <em
         >This index is automatically generated from available
         <code>*.demo.ts</code> files.</em
       ><br />
       To add a new demo, create a <code>component-name.demo.ts</code> file in
       this directory.
     </p>
   </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Sketch Web Components - Demo Index</title>
	<link rel="stylesheet" href="demo.css" />
	<style>
	body {
	font-family:
	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width: 800px;
	margin: 40px auto;
	padding: 20px;
	line-height: 1.6;
	}

	h1 {
	color: #24292f;
	border-bottom: 1px solid #d1d9e0;
	padding-bottom: 10px;
	}

	.demo-list {
	list-style: none;
	padding: 0;
	}

	.demo-list li {
	margin: 15px 0;
	padding: 15px;
	border: 1px solid #d1d9e0;
	border-radius: 6px;
	background: #f6f8fa;
	transition: background-color 0.2s;
	}

	.demo-list li:hover {
	background: #ffffff;
	}

	.demo-list a {
	text-decoration: none;
	color: #0969da;
	display: block;
	}

	.demo-list a:hover {
	text-decoration: underline;
	}

	.demo-list strong {
	font-size: 16px;
	display: block;
	margin-bottom: 5px;
	}

	.stats {
	background: #fff8dc;
	padding: 15px;
	border-radius: 6px;
	margin: 20px 0;
	border-left: 4px solid #f9c23c;
	}

	.runner-link {
	display: inline-block;
	padding: 10px 20px;
	background: #0969da;
	color: white;
	text-decoration: none;
	border-radius: 6px;
	margin-top: 20px;
	}

	.runner-link:hover {
	background: #0860ca;
	}
	</style>
	</head>
	<body>
	<h1>Sketch Web Components Demo Index</h1>

	<div class="stats">
	<strong>Auto-generated index</strong><br />
	Found 18 demo components • Last updated: 7/21/2025, 3:04:10 AM
	</div>

	<p>
	This page provides an overview of all available component demos. Click on
	any component below to view its interactive demo.
	</p>

	<a href="demo.html" class="runner-link">🚀 Launch Demo Runner</a>

	<h2>Available Component Demos</h2>

	<ul class="demo-list">
	<li>
	<a href="demo.html#sketch-call-status">
	<strong>Call Status Demo</strong> - Display current LLM and tool call
	status with visual indicators
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-chat-input">
	<strong>Chat Input Demo</strong> - Interactive chat input component
	with send functionality
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-container-status">
	<strong>Container Status Demo</strong> - Display container status
	information with usage statistics
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-diff-range-picker">
	<strong>Diff Range Picker Demo</strong> - Component for selecting
	commit ranges for diff views
	</a>
	</li>
	<li>
	<a href="demo.html#mobile-chat">
	<strong>Mobile Chat Demo</strong> - Mobile chat interface with message
	display and scroll behavior
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-push-button">
	<strong>Push Button</strong>
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-app-shell">
	<strong>Sketch App Shell Demo</strong> - Full sketch application shell
	with chat, diff, and terminal views
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-diff2-view">
	<strong>Sketch Monaco Diff View Demo</strong> - Monaco-based diff view
	with range and file pickers using mock data
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-monaco-view">
	<strong>Sketch Monaco Viewer Demo</strong> - Monaco editor with code
	comparison functionality for different languages
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-timeline-viewport">
	<strong>Sketch Timeline Viewport Demo</strong> - Timeline viewport
	rendering with memory leak protection and event-driven approach
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-tool-card">
	<strong>Sketch Tool Card Demo</strong> - Demonstration of different
	tool card components for various tool types
	</a>
	</li>
	<li>
	<a href="demo.html#status-indicators">
	<strong>Status Indicators Demo</strong> - Status indicators showing
	connected, working, and disconnected states without the green
	connection dot
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-theme-toggle">
	<strong>Theme Toggle Demo</strong> - Three-way theme toggle: light
	mode, dark mode, and system preference
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-timeline">
	<strong>Timeline Demo</strong> - Interactive timeline component for
	displaying conversation messages with various states
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-timeline-message">
	<strong>Timeline Message Demo</strong> - Interactive timeline message
	component with various message types and features
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-todo-panel">
	<strong>Todo Panel Demo</strong> - Interactive todo list panel showing
	task progress and allowing comments
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-tool-calls">
	<strong>Tool Calls Demo</strong> - Interactive tool call display with
	various tool types
	</a>
	</li>
	<li>
	<a href="demo.html#sketch-view-mode-select">
	<strong>View Mode Select Demo</strong> - Interactive tab navigation
	for switching between chat, diff, and terminal views
	</a>
	</li>
	</ul>

	<hr style="margin: 40px 0; border: none; border-top: 1px solid #d1d9e0" />

	<p>
	<em
	>This index is automatically generated from available
	<code>*.demo.ts</code> files.</em
	><br />
	To add a new demo, create a <code>component-name.demo.ts</code> file in
	this directory.
	</p>
	</body>
	</html>