writing-agent/web/index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Writing Agent</title>
    <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=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/styles.css?v=20260921-repeatable-split" />
    <script>
      (function () {
        try {
          var t = localStorage.getItem("wa-color-theme") || "modern";
          if (!/^(paper|modern|dark|green)$/.test(t)) t = "modern";
          document.documentElement.setAttribute("data-color-theme", t);
          document.documentElement.setAttribute("data-theme", t);
          var fs = localStorage.getItem("wa-ui-font-scale") || "100";
          var legacy = { sm: 88, md: 100, lg: 112, xl: 125 };
          var percent = legacy[fs] != null ? legacy[fs] : Number(fs);
          if (!isFinite(percent)) percent = 100;
          if (percent > 0 && percent <= 2.5) percent = Math.round(percent * 100);
          percent = Math.min(150, Math.max(80, Math.round(percent / 5) * 5));
          document.documentElement.setAttribute("data-ui-font-scale", String(percent));
          document.documentElement.style.setProperty("--ui-font-scale", String(percent / 100));
        } catch (e) {}
      })();
    </script>
  </head>
  <body data-lifecycle="design" data-nav-level="root">
    <div class="layout">
      <aside class="panel panel-rail" id="panel-books">
        <button
          type="button"
          class="rail-expand"
          id="btn-rail-expand"
          aria-expanded="true"
          aria-controls="rail-body"
          title="展开侧栏"
        >
          <span class="rail-expand-label" id="rail-expand-label">作品</span>
        </button>
        <div class="rail-body" id="rail-body">
          <header class="panel-head rail-head">
            <div class="rail-head-row">
              <nav class="path-bar rail-path" id="book-path-bar" aria-label="位置">
                <ol class="path-bar-list">
                  <li class="path-bar-item path-bar-item-current">
                    <span class="path-seg current" aria-current="page">目录</span>
                  </li>
                </ol>
              </nav>
              <div class="panel-head-actions rail-head-actions">
                <button type="button" class="btn-sm" id="btn-new-book" title="新建">+</button>
                <span class="burst-badge" id="burst-badge" hidden></span>
                <button type="button" class="btn-sm rail-collapse" id="btn-rail-collapse" title="收起侧栏" aria-label="收起侧栏">‹</button>
              </div>
            </div>
            <nav class="rail-tabs" id="rail-tabs" role="tablist" aria-label="作品侧栏" hidden>
              <button type="button" class="rail-tab active" data-rail-tab="books" role="tab" aria-selected="true" title="实例">
                <span class="rail-tab-label">实例</span>
              </button>
              <button type="button" class="rail-tab" data-rail-tab="log" role="tab" aria-selected="false" title="调度">
                <span class="rail-tab-label">调度</span>
              </button>
            </nav>
          </header>

          <div class="rail-panels">
            <div class="rail-tab-panel active" id="rail-panel-books" role="tabpanel" data-rail-panel="books">
              <div class="book-list" id="book-list"></div>
              <div id="book-box-overlay" class="book-box-overlay" hidden aria-hidden="true"></div>
            </div>
            <div class="rail-tab-panel" id="rail-panel-log" role="tabpanel" data-rail-panel="log" hidden>
              <div id="agent-focus" class="agent-focus"></div>
              <div id="tool-trace" class="tool-trace" hidden></div>
              <div id="agent-timeline" class="agent-timeline"></div>
            </div>
          </div>
        </div>
      </aside>

      <main class="panel panel-main">
        <div class="main-chrome" id="main-chrome">
          <header class="main-head" id="main-head">
            <div class="main-head-left" aria-hidden="true"></div>
            <nav class="main-app-nav" aria-label="应用">
              <div id="persona-picker-host" class="persona-picker-host" hidden></div>
              <a href="/modules.html">技能</a>
              <a href="/shells.html">呈现壳</a>
              <a href="/stats.html">Token</a>
              <a href="/settings.html">设置</a>
            </nav>
            <div class="main-head-right">
              <button type="button" class="btn-sm main-head-action" id="btn-save-instance" hidden>
                保存定稿
              </button>
              <button type="button" class="btn-sm main-head-action" id="btn-save-play" hidden>
                保存游玩
              </button>
              <button type="button" class="btn-sm main-head-action" id="btn-export" disabled>
                导出
              </button>
              <details class="more-menu theme-menu" id="theme-menu">
                <summary class="btn-sm more-menu-sum" id="theme-menu-sum" title="主题">
                  <span class="hamburger-icon" aria-hidden="true"></span>
                </summary>
                <div class="more-menu-panel" role="menu">
                  <div class="more-menu-label">主题</div>
                  <button type="button" class="more-menu-item more-theme-item" data-color-theme="paper" role="menuitem">
                    <span class="more-theme-icon" aria-hidden="true">📖</span>
                    <span class="more-theme-copy"><span class="more-theme-name">仿纸暖黄</span><span class="more-theme-desc">经典护眼</span></span>
                  </button>
                  <button type="button" class="more-menu-item more-theme-item" data-color-theme="modern" role="menuitem">
                    <span class="more-theme-icon" aria-hidden="true">✨</span>
                    <span class="more-theme-copy"><span class="more-theme-name">现代清爽</span><span class="more-theme-desc">干净明快</span></span>
                  </button>
                  <button type="button" class="more-menu-item more-theme-item" data-color-theme="dark" role="menuitem">
                    <span class="more-theme-icon" aria-hidden="true">🌙</span>
                    <span class="more-theme-copy"><span class="more-theme-name">夜间暗色</span><span class="more-theme-desc">黑底灰字</span></span>
                  </button>
                  <button type="button" class="more-menu-item more-theme-item" data-color-theme="green" role="menuitem">
                    <span class="more-theme-icon" aria-hidden="true">🍃</span>
                    <span class="more-theme-copy"><span class="more-theme-name">豆沙绿</span><span class="more-theme-desc">自然疗愈</span></span>
                  </button>
                  <div class="more-menu-sep" role="separator"></div>
                  <div class="more-menu-label">字号</div>
                  <div class="more-font-scale" role="group" aria-label="字号">
                    <button type="button" class="more-font-btn" data-font-scale-bump="-1" title="缩小" aria-label="缩小">−</button>
                    <span class="more-font-value" id="theme-font-scale-value">100</span>
                    <button type="button" class="more-font-btn" data-font-scale-bump="1" title="放大" aria-label="放大">+</button>
                  </div>
                </div>
              </details>
            </div>
          </header>
        </div>
        <div class="main-stack">
          <div class="main-body">
            <section class="panel-feed" id="panel-feed">
              <div id="skill-picker" class="skill-picker" hidden></div>
              <div id="message-feed" class="message-feed"></div>
              <div id="workspace-stage" class="workspace-stage" hidden aria-label="验收工作面"></div>
              <div id="workspace-skills" class="workspace-skills" hidden>
                <header class="workspace-skills-head">
                  <nav class="workspace-view-switch" aria-label="工作面">
                    <button type="button" data-skills-close>流程</button>
                    <span class="is-current" aria-current="page">技能</span>
                  </nav>
                </header>
                <iframe
                  id="workspace-skills-frame"
                  class="workspace-skills-frame"
                  title="技能池"
                ></iframe>
              </div>
              <div id="questions-card-host" class="questions-card-host" hidden></div>
            </section>
            <aside id="coord-rail" class="coord-rail" hidden aria-label="侧栏">
              <button
                type="button"
                class="coord-rail-toggle"
                id="btn-coord-toggle"
                aria-expanded="false"
                title="展开 / 收起侧栏"
              >
                <span class="coord-rail-toggle-label" id="coord-rail-toggle-label">对话</span>
                <span id="coord-drawer-count" class="coord-drawer-count"></span>
              </button>
              <div class="coord-rail-panel">
                <header class="coord-rail-head">
                  <span class="coord-rail-title" id="coord-rail-title">此前对话</span>
                  <button type="button" class="btn-sm coord-rail-collapse" id="btn-coord-collapse" title="收起" aria-label="收起侧栏">›</button>
                </header>
                <div id="coord-drawer-body" class="coord-drawer-body"></div>
              </div>
            </aside>
          </div>

          <footer class="composer" id="composer">
            <span class="status" id="status-pill"><span class="status-dot" id="status-dot"></span><span id="status-text">—</span></span>
            <div id="composer-main"></div>
          </footer>
        </div>
      </main>
    </div>

    <dialog id="dialog-new-book" class="dialog">
      <form method="dialog" id="form-new-book">
        <h2>新建作品</h2>
        <p class="dialog-desc">先选进料方式，再选对应配方（两套目录互不共享）。</p>
        <label class="field">
          进料方式
          <select id="select-creation-mode" required>
            <option value="" selected disabled>请选择…</option>
            <option value="recipe">工序编排</option>
            <option value="dictate">对话落盘</option>
          </select>
        </label>
        <p class="dialog-desc" id="creation-mode-desc" hidden></p>
        <label class="field" id="field-director" hidden>
          配方
          <select id="select-director">
            <option value="">请先选择进料方式</option>
          </select>
        </label>
        <p class="dialog-desc" id="director-desc" hidden></p>
        <label class="field">
          名称
          <input id="input-book-title" type="text" placeholder="未命名作品" maxlength="80" autofocus />
        </label>
        <div class="dialog-actions">
          <button type="button" class="btn" value="cancel" id="btn-cancel-new">取消</button>
          <button type="submit" class="btn btn-primary" id="btn-create-book">创建</button>
        </div>
      </form>
    </dialog>

    <div id="book-enter-pop" class="book-enter-pop" hidden role="menu" aria-label="打开作品">
      <button type="button" class="book-enter-item" data-enter="design" role="menuitem">创作</button>
      <button type="button" class="book-enter-item" data-enter="play" role="menuitem">游玩</button>
    </div>

    <menu id="book-action-menu" class="context-menu" hidden>
      <button type="button" class="context-menu-item" id="book-menu-open" data-action="open">打开创作</button>
      <button type="button" class="context-menu-item" id="book-menu-play" data-action="play">用产物开玩</button>
      <button type="button" class="context-menu-item" id="book-menu-save-instance" data-action="save-instance">保存定稿</button>
      <button type="button" class="context-menu-item" id="book-menu-save-play" data-action="save-play">保存游玩</button>
      <button type="button" class="context-menu-item" id="book-menu-export" data-action="export">导出</button>
      <button type="button" class="context-menu-item" id="book-menu-rename" data-action="rename">重命名</button>
      <button type="button" class="context-menu-item" id="book-menu-duplicate" data-action="duplicate">复制备份</button>
      <button type="button" class="context-menu-item" id="book-menu-select" data-action="select-mode">多选</button>
      <button type="button" class="context-menu-item context-menu-danger" id="book-menu-delete" data-action="delete">删除</button>
    </menu>

    <menu id="save-action-menu" class="context-menu" hidden>
      <button type="button" class="context-menu-item" data-save-menu-action="edit-products">编辑产物</button>
    </menu>

    <menu id="dictate-product-menu" class="context-menu" hidden>
      <button type="button" class="context-menu-item" data-dictate-product-action="peek">查看完整内容</button>
      <button type="button" class="context-menu-item" data-dictate-product-action="copy">复制全文</button>
    </menu>

    <menu id="msg-action-menu" class="context-menu" hidden>
      <button type="button" class="context-menu-item" id="msg-menu-context" data-msg-menu-action="view-context" hidden>查看上下文</button>
      <button type="button" class="context-menu-item" id="msg-menu-compare" data-msg-menu-action="compare" hidden>对比</button>
      <button type="button" class="context-menu-item" id="msg-menu-edit" data-msg-menu-action="edit">编辑</button>
      <button type="button" class="context-menu-item" id="msg-menu-copy" data-msg-menu-action="copy">复制</button>
      <button type="button" class="context-menu-item context-menu-separator-before" id="msg-menu-rollback" data-msg-menu-action="rollback" hidden>回退到这里</button>
      <button type="button" class="context-menu-item context-menu-danger" id="msg-menu-delete" data-msg-menu-action="restart">从这里重开</button>
    </menu>

    <div id="msg-peek-panel" class="msg-peek-panel" hidden role="dialog" aria-modal="false" aria-labelledby="msg-peek-title">
      <header class="msg-peek-head" data-peek-drag>
        <div class="msg-peek-head-text">
          <h2 class="msg-peek-title" id="msg-peek-title">完整内容</h2>
          <p class="msg-peek-subtitle" id="msg-peek-subtitle" hidden></p>
        </div>
        <button type="button" class="msg-peek-close" id="msg-peek-close" aria-label="关闭">×</button>
      </header>
      <div class="msg-peek-body" id="msg-peek-body"></div>
      <div class="msg-peek-resize" data-peek-resize="se" title="拖动调整大小" aria-hidden="true"></div>
    </div>

    <menu id="flow-node-menu" class="context-menu" hidden>
      <button type="button" class="context-menu-item" id="flow-menu-view" data-flow-menu-action="view">查看产物</button>
      <button type="button" class="context-menu-item" id="flow-menu-reenter" data-flow-menu-action="reenter">进入继续修改</button>
      <button type="button" class="context-menu-item context-menu-danger context-menu-separator-before" id="flow-menu-delete" data-flow-menu-action="delete">删除产物</button>
    </menu>

    <dialog id="dialog-snapshot-products" class="dialog dialog-wide" aria-labelledby="snapshot-products-title">
      <form method="dialog" class="context-trace-form" id="form-snapshot-products">
        <h2 id="snapshot-products-title">快照产物</h2>
        <p class="dialog-desc" id="snapshot-products-meta"></p>
        <div id="snapshot-products-body" class="step-artifact-body snapshot-products-body"></div>
        <div class="dialog-actions">
          <button type="submit" class="btn btn-primary" value="close">关闭</button>
        </div>
      </form>
    </dialog>

    <dialog id="dialog-step-artifact" class="dialog dialog-wide" aria-labelledby="step-artifact-title">
      <form method="dialog" class="context-trace-form">
        <h2 id="step-artifact-title">产物</h2>
        <div id="step-artifact-body" class="step-artifact-body"></div>
        <div class="dialog-actions">
          <button type="submit" class="btn btn-primary" value="close">关闭</button>
        </div>
      </form>
    </dialog>

    <dialog id="dialog-context-trace" class="dialog dialog-wide" aria-labelledby="context-trace-title">
      <form method="dialog" class="context-trace-form">
        <h2 id="context-trace-title">上下文调用日志</h2>
        <p class="dialog-desc" id="context-trace-meta"></p>
        <pre id="context-trace-body" class="context-trace-body"></pre>
        <div class="dialog-actions">
          <button type="button" class="btn" id="btn-copy-context">复制全文</button>
          <button type="submit" class="btn btn-primary" value="close">关闭</button>
        </div>
      </form>
    </dialog>

    <dialog id="dialog-model-compare-pick" class="dialog" aria-labelledby="compare-pick-title">
      <form method="dialog" id="form-model-compare-pick">
        <h2 id="compare-pick-title">选择要对比的模型</h2>
        <p class="dialog-desc">用同一份已保存的请求上下文，并行调用所选 API 配置。</p>
        <div id="compare-profile-list" class="compare-profile-list"></div>
        <div class="dialog-actions">
          <button type="submit" class="btn" value="cancel">取消</button>
          <button type="button" class="btn btn-primary" id="btn-start-model-compare">开始对比</button>
        </div>
      </form>
    </dialog>

    <dialog id="dialog-model-compare" class="dialog dialog-compare" aria-labelledby="compare-title">
      <div class="compare-shell">
        <div class="dialog-head-row">
          <h2 id="compare-title">模型对比</h2>
          <button type="button" class="btn" id="btn-close-model-compare">关闭</button>
        </div>
        <p class="dialog-desc" id="compare-meta"></p>
        <div id="compare-results" class="compare-results"></div>
      </div>
    </dialog>

    <script type="module" src="/app.js?v=20260921-repeatable-split"></script>
  </body>
</html>