<!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 3 demo components • Last updated: 6/25/2025, 8:50:21 PM
    </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-runner.html" class="runner-link">🚀 Launch Demo Runner</a>

    <h2>Available Component Demos</h2>

    <ul class="demo-list">
      <li>
        <a href="demo-runner.html#sketch-chat-input">
          <strong>Chat Input Demo</strong> - Interactive chat input component
          with send functionality
        </a>
      </li>
      <li>
        <a href="demo-runner.html#sketch-container-status">
          <strong>Container Status Demo</strong> - Display container status
          information with usage statistics
        </a>
      </li>
      <li>
        <a href="demo-runner.html#sketch-tool-calls">
          <strong>Tool Calls Demo</strong> - Interactive tool call display with
          various tool types
        </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>