ST-Bionic-Memory-Ecology/panel.html

<div id="st-bme-panel-overlay">
  <div id="st-bme-panel">
    <!-- Header -->
    <div class="bme-panel-header">
      <div class="bme-panel-title">
        <i class="fa-solid fa-brain"></i>
        <span>ST-BME 记忆图谱</span>
        <span class="bme-panel-subtitle" id="bme-panel-status">SYSTEM_ACTIVE</span>
      </div>
      <div class="bme-theme-picker">
        <button class="bme-theme-picker-btn" id="bme-theme-picker-btn" title="切换主题">
          <i class="fa-solid fa-palette"></i>
        </button>
        <div class="bme-theme-dropdown" id="bme-theme-dropdown">
          <button class="bme-theme-option" data-theme="crimson">
            <span class="bme-theme-swatch" style="background: #e94560"></span>赤红合成
          </button>
          <button class="bme-theme-option" data-theme="cyan">
            <span class="bme-theme-swatch" style="background: #00e5ff"></span>霓虹青蓝
          </button>
          <button class="bme-theme-option" data-theme="amber">
            <span class="bme-theme-swatch" style="background: #ffb300"></span>琥珀终端
          </button>
          <button class="bme-theme-option" data-theme="violet">
            <span class="bme-theme-swatch" style="background: #b388ff"></span>紫雾迷离
          </button>
        </div>
      </div>
      <button class="bme-panel-close" id="bme-panel-close" title="关闭">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>

    <!-- Body -->
    <div class="bme-panel-body">
      <!-- Sidebar (Desktop) -->
      <div class="bme-panel-sidebar">
        <div class="bme-tab-list">
          <button class="bme-tab-btn active" data-tab="dashboard">
            <i class="fa-solid fa-chart-simple"></i>
            <span>总览</span>
          </button>
          <button class="bme-tab-btn" data-tab="memory">
            <i class="fa-solid fa-brain"></i>
            <span>记忆</span>
          </button>
          <button class="bme-tab-btn" data-tab="injection">
            <i class="fa-solid fa-syringe"></i>
            <span>注入</span>
          </button>
          <button class="bme-tab-btn" data-tab="actions">
            <i class="fa-solid fa-gear"></i>
            <span>操作</span>
          </button>
          <button class="bme-tab-btn" data-tab="config">
            <i class="fa-solid fa-sliders"></i>
            <span>配置</span>
          </button>
        </div>

        <div class="bme-tab-content">
          <!-- Dashboard Tab -->
          <div class="bme-tab-pane active" id="bme-pane-dashboard">
            <div class="bme-stats-grid">
              <div class="bme-stat-card">
                <div class="bme-stat-label">活跃节点</div>
                <div class="bme-stat-value" id="bme-stat-nodes">0</div>
              </div>
              <div class="bme-stat-card">
                <div class="bme-stat-label">边连接</div>
                <div class="bme-stat-value" id="bme-stat-edges">0</div>
              </div>
              <div class="bme-stat-card">
                <div class="bme-stat-label">已归档</div>
                <div class="bme-stat-value" id="bme-stat-archived">0</div>
              </div>
              <div class="bme-stat-card">
                <div class="bme-stat-label">碎片率</div>
                <div class="bme-stat-value warning" id="bme-stat-frag">0%</div>
              </div>
            </div>

            <div class="bme-config-card">
              <div class="bme-section-header">运行状态</div>
              <div class="bme-config-row">
                <label>当前聊天</label>
                <div class="bme-recent-meta" id="bme-status-chat-id">—</div>
              </div>
              <div class="bme-config-row">
                <label>历史状态</label>
                <div class="bme-recent-meta" id="bme-status-history">—</div>
              </div>
              <div class="bme-config-row">
                <label>向量状态</label>
                <div class="bme-recent-meta" id="bme-status-vector">—</div>
              </div>
              <div class="bme-config-row">
                <label>最近恢复</label>
                <div class="bme-recent-meta" id="bme-status-recovery">—</div>
              </div>
            </div>

            <!-- 移动端图谱预览（仅手机端可见） -->
            <div class="bme-mobile-graph-preview" id="bme-mobile-graph-area">
              <canvas id="bme-mobile-graph-canvas"></canvas>
              <span class="bme-mobile-graph-label">REALTIME</span>
            </div>
            <div class="bme-graph-statusbar bme-mobile-graph-status" id="bme-mobile-graph-status">
              <span><span class="bme-status-dot"></span>NODE_SYNC_ACTIVE</span>
            </div>

            <div class="bme-section-header">最近提取</div>
            <ul class="bme-recent-list" id="bme-recent-extract"></ul>

            <div class="bme-section-header">最近召回</div>
            <ul class="bme-recent-list" id="bme-recent-recall"></ul>
          </div>

          <!-- Memory Browser Tab -->
          <div class="bme-tab-pane" id="bme-pane-memory">
            <div class="bme-search-bar">
              <input type="text" class="bme-search-input" id="bme-memory-search"
                     placeholder="搜索记忆节点..." />
              <select class="bme-filter-select" id="bme-memory-filter">
                <option value="all">全部</option>
                <option value="character">角色</option>
                <option value="event">事件</option>
                <option value="location">地点</option>
                <option value="thread">线索</option>
                <option value="rule">规则</option>
                <option value="synopsis">概要</option>
                <option value="reflection">反思</option>
              </select>
            </div>
            <ul class="bme-memory-list" id="bme-memory-list"></ul>
          </div>

          <!-- Injection Preview Tab -->
          <div class="bme-tab-pane" id="bme-pane-injection">
            <div id="bme-injection-content"></div>
            <div class="bme-injection-token-count" id="bme-injection-tokens"></div>
          </div>

          <!-- Actions Tab -->
          <div class="bme-tab-pane" id="bme-pane-actions">
            <div class="bme-action-grid">
              <button class="bme-action-btn" id="bme-act-extract">
                <i class="fa-solid fa-download"></i>
                <span>手动提取</span>
              </button>
              <button class="bme-action-btn" id="bme-act-compress">
                <i class="fa-solid fa-compress"></i>
                <span>手动压缩</span>
              </button>
              <button class="bme-action-btn" id="bme-act-sleep">
                <i class="fa-solid fa-moon"></i>
                <span>执行遗忘</span>
              </button>
              <button class="bme-action-btn" id="bme-act-synopsis">
                <i class="fa-solid fa-scroll"></i>
                <span>更新概要</span>
              </button>
              <button class="bme-action-btn" id="bme-act-export">
                <i class="fa-solid fa-file-export"></i>
                <span>导出图谱</span>
              </button>
              <button class="bme-action-btn" id="bme-act-import">
                <i class="fa-solid fa-file-import"></i>
                <span>导入图谱</span>
              </button>
              <button class="bme-action-btn danger" id="bme-act-rebuild">
                <i class="fa-solid fa-triangle-exclamation"></i>
                <span>重建图谱</span>
              </button>
              <button class="bme-action-btn" id="bme-act-evolve">
                <i class="fa-solid fa-dna"></i>
                <span>强制进化</span>
              </button>
              <button class="bme-action-btn" id="bme-act-vector-rebuild">
                <i class="fa-solid fa-database"></i>
                <span>重建向量</span>
              </button>
              <button class="bme-action-btn" id="bme-act-vector-range">
                <i class="fa-solid fa-layer-group"></i>
                <span>范围重建</span>
              </button>
              <button class="bme-action-btn" id="bme-act-vector-reembed">
                <i class="fa-solid fa-wand-magic-sparkles"></i>
                <span>直连重嵌</span>
              </button>
            </div>
            <div class="bme-config-card" style="margin-top:16px">
              <div class="bme-section-header">范围重建</div>
              <div class="bme-config-help">
                仅重建与指定楼层范围相交的节点向量。留空时默认按整段聊天处理。
              </div>
              <div class="bme-config-row">
                <label for="bme-range-start">起始楼层</label>
                <input id="bme-range-start" class="bme-config-input" type="number" min="0" max="999999" />
              </div>
              <div class="bme-config-row">
                <label for="bme-range-end">结束楼层</label>
                <input id="bme-range-end" class="bme-config-input" type="number" min="0" max="999999" />
              </div>
            </div>
          </div>

          <!-- Config Tab -->
          <div class="bme-tab-pane" id="bme-pane-config">
            <div class="bme-config-card">
              <div class="bme-section-header">基础开关</div>
              <div class="bme-config-row inline">
                <label class="checkbox_label" for="bme-setting-enabled">
                  <input id="bme-setting-enabled" type="checkbox" />
                  <span>启用 ST-BME 自动记忆</span>
                </label>
              </div>
              <div class="bme-config-row inline">
                <label class="checkbox_label" for="bme-setting-recall-enabled">
                  <input id="bme-setting-recall-enabled" type="checkbox" />
                  <span>启用生成前记忆召回</span>
                </label>
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-extract-every">每 N 条回复提取</label>
                <input id="bme-setting-extract-every" class="bme-config-input" type="number" min="1" max="50" />
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-extract-context-turns">提取上下文轮数</label>
                <input id="bme-setting-extract-context-turns" class="bme-config-input" type="number" min="0" max="20" />
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-inject-depth">注入深度</label>
                <input id="bme-setting-inject-depth" class="bme-config-input" type="number" min="0" max="9999" />
              </div>
            </div>

            <div class="bme-config-card">
              <div class="bme-section-header">记忆 LLM</div>
              <div class="bme-config-help">
                这里配置的是 ST-BME 的第二套记忆 LLM。留空时，提取/召回/概要/反思会复用当前 SillyTavern 聊天模型；填写后会通过 SillyTavern 现有后端代理转发到 OpenAI 兼容接口，不要求改酒馆本体。
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-llm-url">LLM API 地址</label>
                <input id="bme-setting-llm-url" class="bme-config-input" type="text" placeholder="https://api.openai.com/v1" />
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-llm-key">LLM API Key</label>
                <input id="bme-setting-llm-key" class="bme-config-input" type="password" placeholder="sk-..." />
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-llm-model">LLM 模型</label>
                <input id="bme-setting-llm-model" class="bme-config-input" type="text" placeholder="gpt-4.1-mini / qwen-max / deepseek-chat" />
              </div>
              <div class="bme-config-row inline">
                <label class="checkbox_label" for="bme-setting-recall-llm">
                  <input id="bme-setting-recall-llm" type="checkbox" />
                  <span>启用 LLM 精确召回</span>
                </label>
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-recall-max-nodes">LLM 精确召回上限</label>
                <input id="bme-setting-recall-max-nodes" class="bme-config-input" type="number" min="1" max="50" />
              </div>
              <div class="bme-config-actions">
                <button class="menu_button" id="bme-test-llm">
                  <i class="fa-solid fa-plug"></i> 测试记忆 LLM
                </button>
              </div>
            </div>

            <div class="bme-config-card">
              <div class="bme-section-header">Embedding</div>
              <div class="bme-config-help">
                向量支持两种模式：后端索引优先，以及完全独立的直连兜底。后端模式会优先复用酒馆现成 provider；直连模式则继续使用你自己的第二套 URL/Key/Model。
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-embed-mode">向量模式</label>
                <select id="bme-setting-embed-mode" class="bme-config-input">
                  <option value="backend">后端索引</option>
                  <option value="direct">直连兜底</option>
                </select>
              </div>
              <div id="bme-embed-backend-fields">
              <div class="bme-config-row">
                <label for="bme-setting-embed-backend-source">后端向量源</label>
                <select id="bme-setting-embed-backend-source" class="bme-config-input">
                  <option value="openai">OpenAI</option>
                  <option value="openrouter">OpenRouter</option>
                  <option value="cohere">Cohere</option>
                  <option value="mistral">Mistral</option>
                  <option value="electronhub">Electron Hub</option>
                  <option value="chutes">Chutes</option>
                  <option value="nanogpt">NanoGPT</option>
                  <option value="ollama">Ollama</option>
                  <option value="llamacpp">llama.cpp</option>
                  <option value="vllm">vLLM</option>
                </select>
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-embed-backend-model">后端模型</label>
                <input id="bme-setting-embed-backend-model" class="bme-config-input" type="text" placeholder="text-embedding-3-small / nomic-embed-text / BAAI/bge-m3" />
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-embed-backend-url">后端 API 地址</label>
                <input id="bme-setting-embed-backend-url" class="bme-config-input" type="text" placeholder="仅 Ollama / llama.cpp / vLLM 需要填写" />
              </div>
              <div class="bme-config-row inline">
                <label class="checkbox_label" for="bme-setting-embed-auto-suffix">
                  <input id="bme-setting-embed-auto-suffix" type="checkbox" />
                  <span>自动补全 /embeddings 后缀</span>
                </label>
              </div>
              <div class="bme-config-help">
                如果当前页面是 HTTPS 而你填的是 HTTP，本地浏览器可能会拦截混合内容；远程部署时请优先使用 HTTPS 或宿主可访问的同源入口。
              </div>
              </div>
              <div id="bme-embed-direct-fields">
              <div class="bme-config-help">
                直连模式会使用下面这组独立配置：
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-embed-url">Embedding API 地址</label>
                <input id="bme-setting-embed-url" class="bme-config-input" type="text" placeholder="https://api.openai.com/v1" />
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-embed-key">Embedding API Key</label>
                <input id="bme-setting-embed-key" class="bme-config-input" type="password" placeholder="sk-..." />
              </div>
              <div class="bme-config-row">
                <label for="bme-setting-embed-model">Embedding 模型</label>
                <input id="bme-setting-embed-model" class="bme-config-input" type="text" placeholder="text-embedding-3-small" />
              </div>
              <div class="bme-config-actions">
                <button class="menu_button" id="bme-test-embedding">
                  <i class="fa-solid fa-plug"></i> 测试 Embedding
                </button>
              </div>
              </div>
            </div>

            <div class="bme-config-card">
              <div class="bme-section-header">系统提示词</div>
              <div class="bme-config-help">
                留空时使用内置默认提示词。自定义后将完全替换对应环节的 system prompt。
              </div>

              <details class="bme-prompt-group">
                <summary>📝 记忆提取</summary>
                <textarea id="bme-setting-extract-prompt" class="bme-config-textarea" placeholder="留空 = 默认提取 prompt"></textarea>
              </details>

              <details class="bme-prompt-group">
                <summary>🔍 智能召回</summary>
                <textarea id="bme-setting-recall-prompt" class="bme-config-textarea" placeholder="留空 = 默认召回 prompt"></textarea>
              </details>

              <details class="bme-prompt-group">
                <summary>🧬 记忆进化</summary>
                <textarea id="bme-setting-evolution-prompt" class="bme-config-textarea" placeholder="留空 = 默认进化 prompt"></textarea>
              </details>

              <details class="bme-prompt-group">
                <summary>📦 记忆压缩</summary>
                <textarea id="bme-setting-compress-prompt" class="bme-config-textarea" placeholder="留空 = 默认压缩 prompt"></textarea>
              </details>

              <details class="bme-prompt-group">
                <summary>📜 全局概要</summary>
                <textarea id="bme-setting-synopsis-prompt" class="bme-config-textarea" placeholder="留空 = 默认概要 prompt"></textarea>
              </details>

              <details class="bme-prompt-group">
                <summary>💭 反思生成</summary>
                <textarea id="bme-setting-reflection-prompt" class="bme-config-textarea" placeholder="留空 = 默认反思 prompt"></textarea>
              </details>
            </div>


          </div>
        </div>
      </div>

      <!-- Main Graph Area (Desktop) -->
      <div class="bme-panel-main">
        <div class="bme-graph-toolbar">
          <div class="bme-graph-toolbar-title">
            <i class="fa-solid fa-diagram-project"></i>
            <span>实时图谱</span>
          </div>
          <div class="bme-graph-controls">
            <button id="bme-graph-zoom-in" title="放大">
              <i class="fa-solid fa-plus"></i>
            </button>
            <button id="bme-graph-zoom-out" title="缩小">
              <i class="fa-solid fa-minus"></i>
            </button>
            <button id="bme-graph-reset" title="重置">
              <i class="fa-solid fa-arrows-rotate"></i>
            </button>
          </div>
        </div>

        <canvas id="bme-graph-canvas"></canvas>

        <div class="bme-graph-legend" id="bme-graph-legend"></div>

        <div class="bme-graph-statusbar">
          <span><span class="bme-status-dot"></span><span id="bme-status-text">READY</span></span>
          <span id="bme-status-meta">NODES: 0 | EDGES: 0</span>
        </div>

        <!-- Node Detail Slide-in -->
        <div class="bme-node-detail" id="bme-node-detail">
          <div class="bme-node-detail-header">
            <h3 id="bme-detail-title">节点详情</h3>
            <button class="bme-panel-close" id="bme-detail-close">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>
          <div id="bme-detail-body"></div>
        </div>
      </div>

      <!-- Mobile Content Area (conditionally shown) -->
      <div class="bme-mobile-content" id="bme-mobile-content" style="display:none;"></div>
    </div>

    <!-- Mobile Bottom Tab Bar -->
    <div class="bme-panel-tabbar">
      <button class="bme-tab-btn active" data-tab="dashboard">
        <i class="fa-solid fa-chart-simple"></i>
        <span>总览</span>
      </button>
      <button class="bme-tab-btn" data-tab="memory">
        <i class="fa-solid fa-brain"></i>
        <span>记忆</span>
      </button>
      <button class="bme-tab-btn" data-tab="injection">
        <i class="fa-solid fa-syringe"></i>
        <span>注入</span>
      </button>
      <button class="bme-tab-btn" data-tab="actions">
        <i class="fa-solid fa-gear"></i>
        <span>操作</span>
      </button>
      <button class="bme-tab-btn" data-tab="config">
        <i class="fa-solid fa-sliders"></i>
        <span>配置</span>
      </button>
    </div>
  </div>
</div>