<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Synapse Canvas</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/github-dark.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,650;0,700;1,400;1,500&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css">
<link rel="stylesheet" href="/static/palette.css">
<link rel="stylesheet" href="/static/canvas.css">
</head>
<body>
<!-- Sidebar Navigation -->
<aside id="sidebar">
  <div class="sidebar-header">
    <h1><svg class="brand-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M21.4 7.5c.8.8.8 2.1 0 2.8l-2.8 2.8-7.8-7.8 2.8-2.8c.8-.8 2.1-.8 2.8 0l1.8 1.8 3-3 1.4 1.4-3 3zm-5.8 5.8-1.4-1.4-2.8 2.8-2.1-2.1 2.8-2.8-1.4-1.4-2.8 2.8-1.5-1.4-2.8 2.8c-.8.8-.8 2.1 0 2.8l1.8 1.8-4 4 1.4 1.4 4-4 1.8 1.8c.8.8 2.1.8 2.8 0l2.8-2.8-1.4-1.4z"/></svg> Synapse Canvas</h1>
    <button id="sidebar-collapse" title="Collapse sidebar"><i class="ph ph-caret-left"></i></button>
  </div>
  <nav id="nav-menu">
    <a href="#/" class="nav-link active" data-route="canvas"><i class="ph ph-monitor"></i><span>Canvas</span></a>
    <a href="#/history" class="nav-link nav-sub" data-route="history"><i class="ph ph-clock-counter-clockwise"></i><span>History</span></a>
    <a href="#/dashboard" class="nav-link" data-route="dashboard"><i class="ph ph-squares-four"></i><span>Dashboard</span></a>
    <a href="#/admin" class="nav-link" data-route="admin"><i class="ph ph-crown"></i><span>Agent Control</span></a>
    <a href="#/system" class="nav-link" data-route="system"><i class="ph ph-gear-six"></i><span>System</span></a>
  </nav>
  <div class="sidebar-footer">
    <button id="theme-toggle" title="Toggle light/dark theme"><i class="ph ph-sun"></i><span>Light</span></button>
  </div>
</aside>
<div id="sidebar-overlay"></div>

<!-- Main Content -->
<div id="main-content">
  <header id="topbar">
    <button id="sidebar-toggle" title="Toggle menu"><i class="ph ph-list"></i></button>
    <span id="topbar-title">Canvas</span>
  </header>
  <div id="toast-container"></div>

  <!-- Canvas View (main) -->
  <section id="canvas-view">
    <div id="canvas-spotlight"></div>
  </section>

  <!-- Dashboard View -->
  <section id="dashboard-view" class="view-hidden">
    <div class="dash-grid">
      <div id="dash-agents" class="dash-widget"></div>
      <div id="dash-tasks" class="dash-widget"></div>
      <div id="dash-file-locks" class="dash-widget"></div>
      <div id="dash-worktrees" class="dash-widget"></div>
      <div id="dash-memory" class="dash-widget"></div>
      <div id="dash-errors" class="dash-widget"></div>
    </div>
  </section>

  <!-- History View -->
  <section id="history-view" class="view-hidden">
    <div id="history-scroll">
      <div id="live-feed">
        <div class="live-feed-header">
          <span class="live-feed-dot"></span>
          <span class="live-feed-label">Latest Posts</span>
        </div>
        <div id="live-feed-list" class="live-feed-list"></div>
      </div>
      <div id="cards-area">
        <div id="cards-area-header">
          <h2><i class="ph ph-chat-centered-text"></i> Agent Messages</h2>
          <div id="filter-bar">
            <select id="filter-type">
              <option value="">All types</option>
              <option value="mermaid">mermaid</option>
              <option value="markdown">markdown</option>
              <option value="table">table</option>
              <option value="html">html</option>
              <option value="json">json</option>
              <option value="code">code</option>
              <option value="diff">diff</option>
              <option value="chart">chart</option>
              <option value="image">image</option>
              <option value="log">log</option>
              <option value="status">status</option>
              <option value="metric">metric</option>
              <option value="checklist">checklist</option>
              <option value="timeline">timeline</option>
              <option value="alert">alert</option>
              <option value="file-preview">file-preview</option>
              <option value="trace">trace</option>
              <option value="task-board">task-board</option>
              <option value="progress">progress</option>
              <option value="terminal">terminal</option>
              <option value="dependency-graph">dependency-graph</option>
              <option value="cost">cost</option>
              <option value="tip">tip</option>
            </select>
            <select id="filter-agent">
              <option value="">All agents</option>
            </select>
            <span id="card-count">0 cards</span>
          </div>
        </div>
        <main id="canvas-grid"></main>
      </div>
    </div>
  </section>

  <!-- System View -->
  <section id="system-view" class="view-hidden">
    <div id="system-panel"></div>
  </section>

  <!-- Admin View -->
  <section id="admin-view" class="view-hidden">
    <div id="admin-container">
      <div id="admin-agents-widget">
        <h3 class="admin-section-title"><i class="ph ph-cursor-click"></i> Select Agent</h3>
      </div>
      <div id="admin-splitter" role="separator" aria-orientation="horizontal" tabindex="0"></div>
      <div id="admin-feed-wrap">
        <h3 class="admin-section-title"><i class="ph ph-chat-circle-text"></i> Response</h3>
        <div id="admin-feed"></div>
      </div>
      <div id="admin-input-bar">
        <span id="admin-target-badge">Select agent...</span>
        <textarea id="admin-message-input" placeholder="Type a command..." rows="1"></textarea>
        <button id="admin-send-btn" title="Send (⌘↵)"><i class="ph ph-paper-plane-right"></i></button>
      </div>
    </div>
  </section>
</div>
<script src="/static/canvas.js"></script>
</body>
</html>
