<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index1</title>
<link rel="icon" type="image/svg+xml" href="/favicon.ico">
<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=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
<div class="app">
  <div class="header">
    <div class="logo">
      <svg class="logo-icon" width="56" height="56" viewBox="0 0 56 56" fill="none">
        <g style="transform-origin:28px 28px">
          <ellipse cx="28" cy="28" rx="18" ry="6" stroke="var(--accent)" stroke-width="1.5" opacity=".25"/>
          <circle cx="46" cy="28" r="2.5" fill="var(--accent)" opacity=".5"/>
          <circle cx="10" cy="28" r="2" fill="var(--accent)" opacity=".3"/>
        </g>
        <g style="transform-origin:28px 28px">
          <ellipse cx="28" cy="28" rx="18" ry="6" stroke="var(--accent)" stroke-width="1.5" opacity=".25" transform="rotate(60 28 28)"/>
          <circle cx="28" cy="10.2" r="2.5" fill="var(--accent)" opacity=".5" transform="rotate(60 28 28)"/>
        </g>
        <g style="transform-origin:28px 28px">
          <ellipse cx="28" cy="28" rx="18" ry="6" stroke="var(--accent)" stroke-width="1.5" opacity=".25" transform="rotate(120 28 28)"/>
          <circle cx="28" cy="45.8" r="2" fill="var(--accent)" opacity=".4" transform="rotate(120 28 28)"/>
        </g>
        <circle class="core-pulse" cx="28" cy="28" r="4.5" fill="var(--accent)"/>
      </svg>
      <div><span>index</span>1</div>
    </div>
    <div class="header-right">
      <div class="nav-tabs">
        <button class="nav-tab active" data-panel="memory-panel" onclick="switchTab(this)">Memory</button>
        <button class="nav-tab" data-panel="events-panel" onclick="switchTab(this)">Events</button>
        <button class="nav-tab" data-panel="search-panel" onclick="switchTab(this)">Search</button>
        <button class="nav-tab" data-panel="status-panel" onclick="switchTab(this)">Status</button>
      </div>
      <a class="health-indicator" href="javascript:void(0)" onclick="document.querySelector('[data-panel=status-panel]').click()" title="Observer: loading...">
        <div class="health-dot"></div>
      </a>
      <a class="gh-link" href="https://github.com/gladego/index1" target="_blank" rel="noopener" title="GitHub" aria-label="GitHub">
        <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
      </a>
      <button class="theme-btn" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">
        <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
        <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
      </button>
    </div>
  </div>

  <!-- Search -->
  <div id="search-panel" class="panel">
    <div class="search-row">
      <div class="search-box">
        <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        <input type="text" id="search-input" placeholder="Search knowledge base..." autofocus>
        <div class="s-actions">
          <button class="s-clear" id="s-clear" onclick="clearSearch()" aria-label="Clear search">&times;</button>
          <span class="kbd" id="kbd-slash">/</span>
        </div>
      </div>
      <select class="col-select" id="col-filter" onchange="doSearch()" aria-label="Filter collection">
        <option value="">All Projects</option>
      </select>
      <select class="col-select" id="type-filter" onchange="applyTypeFilter()" aria-label="Filter type">
        <option value="">All Types</option>
      </select>
    </div>
    <div id="meta" class="meta-bar" style="display:none"></div>
    <div id="proj-overview" class="proj-overview"></div>
    <div id="results" class="results"></div>
  </div>

  <!-- Memory -->
  <div id="memory-panel" class="panel active">
    <div id="mem-alert" class="mem-alert" style="display:none"></div>
    <div class="mem-toolbar">
      <div class="mem-search-box">
        <svg class="s-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
        <input type="text" id="mem-search" placeholder="Search memories...">
        <button class="s-clear" id="mem-s-clear" onclick="clearMemSearch()" aria-label="Clear search">&times;</button>
      </div>
      <div class="mem-filters">
        <select class="col-select mem-select" id="mem-col-filter" onchange="onMemFilterChange()" aria-label="Filter collection">
          <option value="">All Projects</option>
        </select>
        <select class="col-select mem-select" id="mem-time-filter" onchange="onMemFilterChange()" aria-label="Filter time range">
          <option value="">All</option>
          <option value="today">Today</option>
          <option value="week">This Week</option>
          <option value="month">This Month</option>
        </select>
      </div>
      <div class="mem-actions">
        <label class="chk"><input type="checkbox" id="mem-auto-refresh" checked onchange="toggleAutoRefresh()"> Auto-refresh</label>
        <button class="s-refresh" onclick="loadFacts()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg></button>
      </div>
    </div>
    <div id="mem-stats" class="mem-stats"></div>
    <div id="mem-search-meta" class="meta-bar" style="display:none"></div>
    <div id="mem-facts" class="mem-facts"></div>
    <div id="mem-pager" class="mem-pager"></div>
  </div>

  <!-- Events -->
  <div id="events-panel" class="panel">
    <div class="mem-toolbar">
      <div class="mem-filters">
        <select class="col-select mem-select" id="evt-col-filter" onchange="loadEvents()" aria-label="Filter collection">
          <option value="">All Projects</option>
        </select>
        <select class="col-select mem-select" id="evt-time-filter" onchange="loadEvents()" aria-label="Filter time range">
          <option value="">All</option>
          <option value="today">Today</option>
          <option value="week">This Week</option>
          <option value="month">This Month</option>
        </select>
      </div>
      <div class="mem-actions">
        <span id="evt-total" style="font:12px var(--mono);color:var(--text-3)"></span>
        <label class="chk"><input type="checkbox" id="evt-auto-refresh" checked onchange="toggleEvtAutoRefresh()"> Auto-refresh</label>
        <button class="s-refresh" onclick="loadEvents()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg></button>
      </div>
    </div>
    <div id="evt-list" class="mem-facts"></div>
  </div>

  <!-- Status -->
  <div id="status-panel" class="panel"><div id="status-content"></div></div>


</div>

<!-- Modal -->
<div id="chunk-modal" class="modal-overlay" onclick="if(event.target===this)closeModal()">
  <div class="modal" role="dialog" aria-modal="true">
    <div class="m-bar">
      <button class="m-btn" id="copy-btn" onclick="copyContent()" aria-label="Copy content">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
        <span>Copy</span>
      </button>
      <button class="m-btn" onclick="closeModal()" aria-label="Close">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>
    </div>
    <h2 id="m-title"></h2>
    <div id="m-meta" class="m-meta"></div>
    <div id="m-content" class="m-content"></div>
  </div>
</div>

<div id="toast" class="toast" role="alert"></div>


<script src="/static/js/app.js"></script>
</body>
</html>
