static/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>通用算法问题求解 Agent</title>
    <link rel="stylesheet" href="/static/styles.css" />
  </head>
  <body>
    <div class="app-layout">
      <aside class="history-sidebar">
        <div class="sidebar-header">
          <div>
            <h2>历史记录</h2>
            <p>归档问答，点击查看结果。</p>
          </div>
          <button id="refresh-history-btn" class="ghost-btn" type="button">刷新</button>
        </div>
        <div class="history-list" id="history-list"></div>
      </aside>

      <main class="chat-shell">
        <header class="topbar">
          <div>
            <h1>通用算法问题求解 Agent</h1>
            <p>输入算法问题后，后台 Agent 会展示完整工作流过程，并生成 PDF 求解报告。</p>
          </div>
          <div class="status-stack">
            <div class="model-fixed"><span>模型</span><strong>agnes-2.0-flash</strong></div>
            <div class="status-pill" id="api-status">API 状态加载中</div>
            <div class="status-pill" id="artifact-status">报告未生成</div>
          </div>
        </header>

        <section class="agent-bar">
          <div class="agent-config">
            <div>
              <h2>Agent 配置</h2>
              <p>API Key 从后端 .env 或 Hugging Face Secrets 读取。模型固定为 agnes-2.0-flash，接口固定为 Agnes Chat Completions。</p>
            </div>
            <div class="config-grid readonly-config">
              <div class="config-note">AGNES_API_KEY</div>
              <div class="config-note">https://apihub.agnes-ai.com/v1/chat/completions</div>
            </div>
          </div>
          <div class="tool-list">
            <div class="tool-item"><strong>Retriever</strong><span>检索知识与工具说明</span></div>
            <div class="tool-item"><strong>Script Runner</strong><span>脚本执行与样例验证</span></div>
            <div class="tool-item"><strong>Evaluator</strong><span>检查结果是否可信</span></div>
            <div class="tool-item"><strong>Report Writer</strong><span>生成 PDF / LaTeX</span></div>
          </div>
        </section>

        <section class="chat-panel">
          <div class="chat-header">
            <div>
              <h2>当前问答</h2>
              <p>Memory → Planner → Retriever → Executor → Script Runner → Evaluator → Loop Controller → Reflector → Artifact Writer</p>
            </div>
            <div class="chat-actions">
              <button id="new-chat-btn" class="ghost-btn" type="button">新建对话</button>
              <button id="clear-screen-btn" class="ghost-btn" type="button">清空屏幕</button>
            </div>
          </div>

          <div class="chat-log" id="timeline">
            <div class="empty-state">从右下方输入问题开始。</div>
          </div>

          <div class="composer">
            <textarea
              id="question"
              placeholder="例如：给定 n 个任务，每个任务有开始时间、结束时间和收益，要求选择互不重叠的任务使总收益最大。请设计算法并用脚本验证样例。"
            ></textarea>
            <button id="run-btn" type="button">发送</button>
          </div>
        </section>
      </main>
    </div>

    <script>
      window.MathJax = {
        tex: {
          inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
          ],
          displayMath: [
            ["$$", "$$"],
            ["\\[", "\\]"],
          ],
          processEscapes: true,
        },
        options: {
          skipHtmlTags: ["script", "noscript", "style", "textarea", "code"],
        },
        startup: {
          typeset: false,
        },
      };
    </script>
    <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
    <script src="/static/app.js"></script>
  </body>
</html>