pi2web 0.2.0 → 0.2.6

package/web/backend-state.js

@@ -0,0 +1,269 @@
+(() => {
+  'use strict';
+
+  const CONNECTIONS_KEY = 'rpConnections';
+  const LEGACY_BACKEND_ID = 'bk-main';
+
+  function createBackend(entry) {
+    return {
+      id: entry.id,
+      name: String(entry.name || ''),
+      base: String(entry.base || '').replace(/\/$/, ''),
+      token: String(entry.token || ''),
+      saved: Boolean(entry.saved ?? entry.token),
+      status: 'off',
+      error: '',
+      serverInfo: '',
+      statusInfo: null,
+      authRequired: true,
+      voiceEnabled: false,
+      voiceSttEnabled: false,
+      agents: [],
+      terminals: [],
+      workspaces: [],
+      ws: null,
+      reconnectTimer: null,
+      reconnectAttempt: 0,
+      manuallyClosed: false,
+      reconnecting: false
+    };
+  }
+
+  function createBackendId() {
+    return `bk-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+
+  function resourceKey(backendId, remoteId) {
+    return `${backendId}:${remoteId}`;
+  }
+
+  const normalizePath = value =>
+    String(value || '')
+      .split('\\')
+      .join('/')
+      .replace(/\/+/g, '/')
+      .replace(/\/$/, '') || '/';
+  const isInsidePath = (file, dir) => file === dir || file.startsWith(`${dir}/`);
+
+  /**
+   * Picks the Workspace that actually owns a cwd. Callers must pass the Workspaces of one
+   * Backend only: identical paths on two machines are different directories. The deepest
+   * matching root wins so nested Workspaces resolve to the closest one.
+   */
+  function matchWorkspace(workspaces, cwd) {
+    const target = normalizePath(cwd);
+    let best = null,
+      bestLength = -1;
+    for (const workspace of workspaces || []) {
+      const root = normalizePath(workspace.rootPath);
+      if (!isInsidePath(target, root)) continue;
+      if (root.length > bestLength) {
+        best = workspace;
+        bestLength = root.length;
+      }
+    }
+    return best;
+  }
+
+  function splitResourceKey(key) {
+    const value = String(key || '');
+    const separator = value.indexOf(':');
+    if (separator < 0) return {backendId: '', remoteId: value};
+    return {backendId: value.slice(0, separator), remoteId: value.slice(separator + 1)};
+  }
+
+  function migrateLegacySelections(storage) {
+    const selectedAgentId = String(storage.rpAgentId || '');
+    if (selectedAgentId && !selectedAgentId.includes(':')) {
+      const compositeId = resourceKey(LEGACY_BACKEND_ID, selectedAgentId);
+      storage.rpAgentId = compositeId;
+    }
+    for (const key of ['rpTerminalId', 'rpWorkspaceId']) {
+      const value = String(storage[key] || '');
+      if (value && !value.includes(':')) storage[key] = resourceKey(LEGACY_BACKEND_ID, value);
+    }
+    try {
+      const bindings = JSON.parse(storage.rpSessionKeyboardBindings || '[]');
+      if (!Array.isArray(bindings)) return;
+      storage.rpSessionKeyboardBindings = JSON.stringify(
+        bindings.map(binding => {
+          const agentId = String(binding?.agentId || '');
+          return {
+            ...binding,
+            agentId: agentId.includes(':') ? agentId : resourceKey(LEGACY_BACKEND_ID, agentId)
+          };
+        })
+      );
+    } catch {}
+  }
+
+  const normalizeBase = value => String(value || '').replace(/\/$/, '');
+
+  function storedConnections(storage) {
+    const stored = storage.getItem(CONNECTIONS_KEY);
+    if (stored === null) return null;
+    try {
+      const entries = JSON.parse(stored);
+      if (!Array.isArray(entries)) return null;
+      return entries
+        .filter(entry => entry && typeof entry.id === 'string' && typeof entry.base === 'string')
+        .map(entry => ({
+          id: entry.id,
+          name: String(entry.name || ''),
+          base: normalizeBase(entry.base),
+          token: String(entry.token || '')
+        }));
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * The console and the collaboration page share one saved connection list, so neither page
+   * may read a private format. An explicitly stored list stays authoritative, including when
+   * it is empty; the single-backend format is migrated only when no list exists yet.
+   */
+  function savedConnections(storage, origin) {
+    const stored = storedConnections(storage);
+    if (stored) return stored;
+    // A user who declined to save the pairing code still has a base, selections and keyboard bindings.
+    // Migrating without a code keeps their Backend id, so those keep matching after pairing again.
+    if (!storage.rpToken && !storage.rpBase) return [];
+    migrateLegacySelections(storage);
+    return [
+      {
+        id: LEGACY_BACKEND_ID,
+        name: '本机',
+        base: normalizeBase(storage.rpBase || origin),
+        token: String(storage.rpToken || '')
+      }
+    ];
+  }
+
+  /** Connection a page should offer first: the one for `base`, else any with a saved pairing code. */
+  function selectConnection(storage, origin, base = '') {
+    const items = savedConnections(storage, origin);
+    const wanted = normalizeBase(base);
+    return (
+      (wanted && items.find(item => item.base === wanted)) ||
+      items.find(item => item.token) ||
+      items[0] ||
+      null
+    );
+  }
+
+  /** Upserts a connection without touching the other entries. The code is stored only on request. */
+  function rememberConnection(storage, {base, token = '', name = '', remember = false} = {}) {
+    const value = normalizeBase(base);
+    if (!value) return null;
+    const items = savedConnections(storage, value);
+    const existing = items.find(item => item.base === value);
+    const entry = existing || {id: createBackendId(), name: '', base: value, token: ''};
+    if (name) entry.name = String(name);
+    if (!entry.name) entry.name = value;
+    entry.token = remember ? String(token || '') : '';
+    const next = existing ? items : [...items, entry];
+    storage[CONNECTIONS_KEY] = JSON.stringify(
+      next.map(item => ({id: item.id, name: item.name, base: item.base, token: item.token}))
+    );
+    // The list is authoritative from here on, so the migrated single-backend copy of the code must not
+    // survive: keeping it would leave a pairing code behind that the user just asked to forget.
+    delete storage.rpToken;
+    return entry;
+  }
+
+  function loadStoredBackends(storage, origin) {
+    return savedConnections(storage, origin).map(entry =>
+      createBackend({...entry, saved: Boolean(entry.token)})
+    );
+  }
+
+  class BackendRegistry {
+    constructor(storage, origin) {
+      this.storage = storage;
+      this.items = loadStoredBackends(storage, origin);
+    }
+
+    find(id) {
+      return this.items.find(backend => backend.id === id);
+    }
+
+    findByBase(base) {
+      return this.items.find(backend => backend.base === base);
+    }
+
+    connected() {
+      return this.items.filter(backend => backend.status === 'connected');
+    }
+
+    primary() {
+      return this.connected()[0] || null;
+    }
+
+    add(entry) {
+      const backend = createBackend(entry);
+      this.items.push(backend);
+      return backend;
+    }
+
+    remove(backend) {
+      const index = this.items.indexOf(backend);
+      if (index >= 0) this.items.splice(index, 1);
+    }
+
+    persist() {
+      this.storage[CONNECTIONS_KEY] = JSON.stringify(
+        this.items.map(backend => ({
+          id: backend.id,
+          name: backend.name,
+          base: backend.base,
+          token: backend.saved ? backend.token : ''
+        }))
+      );
+      // The list is authoritative now, so the migrated single-backend copy of the code must not survive.
+      delete this.storage.rpToken;
+    }
+
+    deactivate(backend, status = 'off', error = '') {
+      backend.status = status;
+      backend.error = error;
+      backend.reconnecting = false;
+      backend.agents = [];
+      backend.terminals = [];
+      backend.workspaces = [];
+    }
+
+    resources(property, filterBackendId = '') {
+      return this.connected()
+        .filter(backend => !filterBackendId || backend.id === filterBackendId)
+        .flatMap(backend => backend[property]);
+    }
+
+    stamp(backend, item, idProperty) {
+      const remoteId = item[idProperty];
+      return {
+        ...item,
+        backendId: backend.id,
+        backendName: backend.name,
+        remoteId,
+        [idProperty]: resourceKey(backend.id, remoteId)
+      };
+    }
+  }
+
+  window.RemotePiBackendState = {
+    BackendRegistry,
+    CONNECTIONS_KEY,
+    LEGACY_BACKEND_ID,
+    loadStoredBackends,
+    savedConnections,
+    selectConnection,
+    rememberConnection,
+    createBackendId,
+    resourceKey,
+    splitResourceKey,
+    normalizePath,
+    isInsidePath,
+    matchWorkspace
+  };
+})();

package/web/collab.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="color-scheme" content="dark">
+  <meta name="theme-color" content="#2b303b">
+  <title>Remote Pi · 协作看板</title>
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/styles.css">
+  <style>
+    main{grid-template-columns:360px minmax(0,1fr)}
+    article{overflow:auto;padding:16px}
+    .card{margin:0 0 14px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
+    .card h3{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:8px}
+    .card h3 .grow{flex:1}
+    .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+    .row>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
+    .row input,.row select,.row textarea{min-width:150px}
+    .field-help{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45;max-width:520px}
+    .participant-config{padding:8px;border:1px solid var(--line);border-radius:6px;background:#252a33}
+    table{width:100%;border-collapse:collapse;font-size:12px}
+    th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
+    th{color:var(--muted);font-weight:600}
+    .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;background:#3b4252;color:#dfe5ef}
+    .pill.blue{background:var(--blue);color:#16202a}.pill.green{background:var(--green);color:#16210f}
+    .pill.yellow{background:var(--yellow);color:#221c0c}.pill.red{background:var(--red);color:#fff}
+    .session-item{display:block;width:100%;margin:6px 0;padding:10px;text-align:left;background:var(--input);border:1px solid transparent;border-radius:7px}
+    .session-item.selected{border-color:var(--blue)}
+    .session-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .session-item small{display:block;margin-top:4px;color:var(--muted)}
+    .events{max-height:320px;overflow:auto;font:12px ui-monospace,monospace}
+    .events div{padding:3px 0;border-bottom:1px solid #363c48}
+    details.raw pre{max-height:280px;overflow:auto;background:#1d2129;padding:8px;border-radius:6px;font:12px ui-monospace,monospace}
+    .flow-chart{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:6px 2px 10px}
+    .flow-step{flex:0 0 auto;min-width:105px;padding:9px 10px;text-align:center;border:1px solid var(--line);border-radius:7px;background:#252a33;color:var(--muted)}
+    .flow-step b{display:block;color:inherit}.flow-step small{display:block;margin-top:3px}
+    .flow-step.active{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 2px #88c0d022}
+    .flow-step.done{border-color:#607557;color:var(--green);background:#283329}.flow-step.optional{border-style:dashed}
+    .flow-arrow{flex:0 0 auto;color:var(--muted);font-size:18px}.flow-loop{margin-top:2px;color:var(--muted);font-size:12px}
+    .recheck-actions{padding:10px;border:1px solid #6f6449;border-radius:7px;background:#332f24}
+    .round-section{margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:#252a33}
+    .round-section>summary{cursor:pointer;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
+    .round-section>summary b{margin-right:2px}
+    .round-section .round-stats{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
+    .round-section table{margin:6px 0 10px}
+    @media(max-width:700px){main{display:block}aside{height:auto;border-bottom:1px solid var(--line)}article{display:block;height:auto}}
+  </style>
+</head>
+<body>
+<header>
+  <div class="brand"><img src="/icon.svg" alt="" width="32" height="32"><h1>协作看板</h1></div>
+  <a href="/" style="color:var(--blue)">← 返回 Agent 控制台</a>
+  <button id="connect" type="button">输入配对码</button>
+  <button id="refresh" type="button" title="刷新">↻</button>
+  <span id="status" class="muted">未配对</span>
+  <span id="escalationBadge" class="muted"></span>
+</header>
+<main>
+  <aside>
+    <section>
+      <div class="section-title"><h2>协作会话</h2><span><select id="statusFilter" aria-label="状态"><option value="active">进行中</option><option value="">全部</option><option value="finished">已结束</option><option value="aborted">已中止</option></select></span></div>
+      <div id="sessions"><p class="muted">尚未连接</p></div>
+    </section>
+    <section>
+      <div class="section-title"><h2>新建会话</h2></div>
+      <form id="createForm" class="card">
+        <div class="row">
+          <label>类型<select id="newKind"><option value="review">review 评审</option><option value="scoring">scoring 评分</option></select></label>
+          <label>Workspace<select id="newWorkspace"></select></label>
+        </div>
+        <div class="row" style="margin-top:8px">
+          <label style="flex:1">会话标题<input id="newTitle" required placeholder="支付回调评审"><small class="field-help">用于左侧列表、通知邮件和 Agent 任务标题，方便识别会话；它不决定实际评审范围。</small></label>
+          <label>工作目录<input id="newCwd" value="." size="8"><small class="field-help">相对于所选 Workspace，例如 <code>.</code> 或 <code>packages/api</code>。</small></label>
+        </div>
+        <div class="row" style="margin-top:8px">
+          <label>评审 / 评分对象<select id="newSubjectType"><option value="commit_range">Git 提交范围</option><option value="diff">当前未提交改动</option><option value="paths">指定文件或目录</option><option value="free">自定义范围</option></select></label>
+          <label style="flex:1"><span id="newSubjectValueLabel">Git 范围</span><input id="newSubjectValue" required value="HEAD~1..HEAD" placeholder="HEAD~1..HEAD"><small id="newSubjectHelp" class="field-help">填写 Git revision range。中枢会把它放进每个 Agent 的任务包，并记录为评审基线范围。</small></label>
+        </div>
+        <label class="row" style="margin-top:8px;flex-direction:column;align-items:stretch">任务说明 / 评审重点（会原样进入每个 Agent 的任务包）<textarea id="newSubjectNotes" rows="4" placeholder="要开发的功能：……；验收标准：……；评审重点：并发与幂等"></textarea></label>
+        <p class="field-help">Review 会话默认启用共识流程：所有 Agent 完成盲审后统一进行问题投票、重复问题合并投票与分轮讨论；未收敛项交给人工裁定。</p>
+        <div class="row" style="margin-top:8px"><label>争议辩论轮数<input id="newConsensusRounds" type="number" min="1" max="10" step="1" value="3" style="width:90px"><small class="field-help">完成 3 轮“赞成方回应 → 反对方重投”后仍不一致才转人工；Agent 可中途主动上报。</small></label></div>
+        <label class="toggle-row" style="margin-top:8px;display:flex;align-items:center;gap:8px"><input id="newImplementationFirst" type="checkbox" style="width:auto">先开发后评审：会话先进入 implementing，开发 Agent 完工（POST /ready 或托管 Agent 空闲）后自动召集评审</label>
+        <div class="row" style="margin-top:8px"><button type="submit">创建会话</button></div>
+      </form>
+    </section>
+  </aside>
+  <article id="detail"><p class="muted">选择左侧的协作会话，或先创建一个。</p></article>
+</main>
+<dialog id="pairDialog"><form method="dialog" id="pairForm"><h2>连接 Remote Pi</h2><label>服务地址<input id="pairBase" required></label><label>配对码<input id="pairToken" type="password" autocomplete="off" placeholder="服务端使用 --no-auth 时留空" autofocus></label><label class="toggle-row" style="display:flex;align-items:center;gap:8px"><input id="pairRemember" type="checkbox" style="width:auto">在此浏览器保存配对码（仅限可信设备）</label><div class="dialog-actions"><button id="pairCancel" type="button">取消</button><button type="submit">连接</button></div></form></dialog>
+<div id="toast" hidden></div>
+<script src="/backend-state.js"></script>
+<script src="/collab.js"></script>
+</body>
+</html>