magic-agent 2.4.3 → 2.6.0

package/client-ui-mobile/scripts.js

@@ -0,0 +1,539 @@
+/* 脚本页（移动端「发现 → 脚本」）—— 独立子页面模块。
+ *
+ * 为什么单独一个文件：跟需求页（reqs.js）同一条纪律 —— 这一页的 DOM、渲染、
+ * 启停与日志流式全在一处，不往 index.html 那 6900 行里塞。
+ *
+ * 这一页回答的是「这台桌面上那几个脚本，现在跑着没有、日志长什么样」。
+ * 用户自己登记脚本（路径 + 参数），服务端负责 spawn / 杀进程组 / 收日志。
+ *
+ * 与宿主（index.html）的边界：只通过 mount(host) 注入的能力交互 ——
+ *   getBase / getToken（切环境后是活的，必须 getter，不能传快照）、
+ *   hEl / elSpan / svgUse / toast / hideAll / setActive /
+ *   showRoot（回清单）/ showDetail（进详情）/ openSheet（表单抽屉）。
+ *
+ * 数据形状见 CLIENT-CONTRACT §2（/desk/scripts）：
+ *   GET  /desk/scripts → {scripts:[{id,name,path,args[],cwd,note,
+ *                            state:{state,pid,exitCode,startedAt,endedAt,logSeq,error}}]}
+ *   GET  /desk/scripts/{id}/log?after=<seq> → SSE
+ *        event: line  {seq,text}
+ *        event: state {state,exitCode,pid,...}
+ */
+(function () {
+  'use strict';
+
+  var H = null;              // 宿主（index.html 注入）
+  var els = {};              // 本页内部元素
+  var ITEMS = [];            // 最近一次清单
+  var DETAIL = null;         // 二级视图：{id}
+  var LOG_SEQ = {};          // id → 已经拿到的最后一行 seq（断线重连的 after）
+  var LOG_TEXT = {};         // id → 日志文本（切页回来还在）
+  var STREAMING = {};        // id → 正在跑的日志流（防重复订阅）
+  var BUSY = {};             // id → 正在进行的动作（启停），防重复点
+
+  /* ── 状态文案与徽标 ──
+     状态是服务端给的，不在客户端猜：running / stopped / done / failed。 */
+  var STATE_TEXT = {
+    running: '运行中',
+    stopped: '已停止',
+    done: '已结束',
+    failed: '失败',
+  };
+  var STATE_BADGE = {
+    running: 'pbadge--run',
+    stopped: 'pbadge--stop',
+    done: 'pbadge--done',
+    failed: 'pbadge--fail',
+  };
+  function stateText(s) { return STATE_TEXT[s] || s || '未知'; }
+  function stateBadge(s) { return STATE_BADGE[s] || 'pbadge--stop'; }
+
+  /* 宿主能力的短名（函数体里沿用原 index 的写法）。 */
+  function hEl(tag, cls, text) { return H.hEl(tag, cls, text); }
+  function elSpan(cls, text) { return H.elSpan(cls, text); }
+  function svgUse(id, size) { return H.svgUse(id, size); }
+  function toast(msg) { return H.toast(msg); }
+
+  /* ── 路径显示 ──
+     ⚠️ 末级目录名要**同时认 '\\' 与 '/'**：桌面可能是 Windows，路径是
+        D:\tools\build.cmd，只按 '/' 切会得到整条路径（记忆 project_client_path_handling）。
+        下发给服务端的路径保持原样（后端自己按 Windows 口径处理）。 */
+  function baseName(p) {
+    var s = String(p || '').replace(/\\/g, '/').replace(/\/+$/, '');
+    var parts = s.split('/').filter(Boolean);
+    return parts.pop() || String(p || '');
+  }
+
+  function api(path) { return H.getBase() + path; }
+  function headers() { return H.getToken() ? { 'X-Magic-Token': H.getToken() } : {}; }
+  function jsonHeaders() {
+    var h = headers();
+    h['Content-Type'] = 'application/json';
+    return h;
+  }
+
+  /* ── 表单 → 请求体 ──
+     单独拎出来（而不是塞在 commit 里）是为了能**单独测**：
+     这一段负责把「用户填的一堆字符串」变成后端要的形状，
+     形状错了服务端会直接 400，用户在手机上却看不出哪填错了。
+
+     ⚠️ 环境变量：一行一条，空行忽略。**不去校验 KEY=VALUE** ——
+        后端会校验并回一句人话错误，前端再抄一遍只会两处规则不同步。
+        ⚠️ 参数按空白切分（不过 shell，服务端拿到的是独立 argv 元素）。 */
+  function buildPayload(inputs) {
+    var args = String(inputs.args.value || '').trim();
+    var env = String(inputs.env.value || '').split('\n')
+      .map(function (s) { return s.trim(); })
+      .filter(function (s) { return s !== ''; });
+    return {
+      name: String(inputs.name.value || '').trim(),
+      path: String(inputs.path.value || '').trim(),
+      args: args ? args.split(/\s+/) : [],
+      env: env,
+      cwd: String(inputs.cwd.value || '').trim(),
+      interpreter: String(inputs.interpreter.value || '').trim(),
+      note: String(inputs.note.value || '').trim(),
+    };
+  }
+
+  /* ── 一级：脚本清单 ── */
+  function renderList() {
+    if (!els.list) return;
+    var frag = document.createDocumentFragment();
+    if (!ITEMS.length) {
+      frag.appendChild(hEl('div', 'history__hint',
+        '还没有脚本。点右上角「添加」登记一个脚本文件（路径 + 参数），就能在这里启停它、看它的日志。'));
+      els.list.replaceChildren(frag);
+      return;
+    }
+    frag.appendChild(hEl('div', 'history__group', '已登记'));
+    ITEMS.forEach(function (it) {
+      var row = hEl('button', 'plugin'); row.type = 'button';
+      var ico = hEl('span', 'plugin__ico' + (it.state && it.state.state === 'running' ? ' is-on' : ''));
+      ico.appendChild(svgUse('#i-cpu', 22));
+      var col = hEl('span', 'plugin__col');
+      col.appendChild(hEl('span', 'plugin__t', it.name || baseName(it.path)));
+      var sub = baseName(it.path);
+      if (it.args && it.args.length) sub += ' · ' + it.args.join(' ');
+      col.appendChild(hEl('span', 'plugin__s', sub));
+      row.appendChild(ico); row.appendChild(col);
+      var st = (it.state && it.state.state) || 'stopped';
+      row.appendChild(elSpan('pbadge ' + stateBadge(st), stateText(st)));
+      row.onclick = function () { openDetail(it.id); };
+      frag.appendChild(row);
+    });
+    frag.appendChild(hEl('div', 'pd__note',
+      '脚本在**这台桌面**上跑（不是手机上）；停止会连它自己起的子进程一起收掉。'));
+    els.list.replaceChildren(frag);
+  }
+
+  function loadList(quiet) {
+    if (!els.list) return;
+    if (!quiet) els.list.innerHTML = '<div class="history__hint">读取中…</div>';
+    return fetch(api('/desk/scripts'), { headers: headers() })
+      .then(function (r) {
+        if (r.status === 404) throw new Error('当前桌面端没有脚本能力（需要较新版本）');
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        return r.json();
+      })
+      .then(function (j) {
+        ITEMS = (j && j.scripts) || [];
+        renderList();
+      })
+      .catch(function (e) {
+        if (quiet && ITEMS.length) return;
+        els.list.innerHTML = '';
+        els.list.appendChild(hEl('div', 'history__hint',
+          '读取脚本清单失败：' + ((e && e.message) || e)));
+      });
+  }
+
+  /* ── 二级：详情（启停 + 日志）── */
+  function currentItem(id) {
+    for (var i = 0; i < ITEMS.length; i++) if (ITEMS[i].id === id) return ITEMS[i];
+    return null;
+  }
+
+  function openDetail(id) {
+    DETAIL = { id: id };
+    /* 日志从头看（服务端环形缓冲里最近的几百行），seq 归零重收一遍。
+       ⚠️ 必须把上一条订阅**中止**掉再重开：否则那条连接还挂在服务端，
+          新订阅被 STREAMING 挡掉 → 页面只剩历史日志、再没有新行。 */
+    abortStream(id);
+    LOG_SEQ[id] = 0;
+    LOG_TEXT[id] = '';
+    H.showDetail();
+    renderDetail();
+    streamLog(id);
+  }
+
+  function backToList() {
+    if (DETAIL) abortStream(DETAIL.id);
+    DETAIL = null;
+    H.showRoot();
+    loadList(true);
+  }
+
+  function renderDetail() {
+    if (!els.detailBody || !DETAIL) return;
+    var it = currentItem(DETAIL.id);
+    var box = els.detailBody;
+    box.innerHTML = '';
+    if (!it) {
+      box.appendChild(hEl('div', 'history__hint', '这个脚本不在清单里了（可能已被删除）。'));
+      return;
+    }
+    var st = (it.state && it.state.state) || 'stopped';
+    var wrap = hEl('div', 'pd');
+
+    var head = hEl('div', 'pd__head');
+    head.appendChild(hEl('span', 'pd__name', it.name || baseName(it.path)));
+    head.appendChild(elSpan('pbadge ' + stateBadge(st), stateText(st)));
+    wrap.appendChild(head);
+
+    /* 状态说明：把「服务端说的」摊开，不让用户猜。 */
+    if (it.state && it.state.error) {
+      var err = hEl('div', 'pd__note', '⚠ ' + it.state.error);
+      err.style.color = 'var(--error-text)';
+      wrap.appendChild(err);
+    }
+    if (st === 'running' && it.state && it.state.pid) {
+      wrap.appendChild(hEl('div', 'pd__note', '进程 PID ' + it.state.pid));
+    }
+    if (st === 'done' || st === 'failed') {
+      wrap.appendChild(hEl('div', 'pd__note',
+        '退出码 ' + (it.state && it.state.exitCode != null ? it.state.exitCode : '-')));
+    }
+
+    /* 脚本定义：路径 / 参数 / 工作目录，一行一条，别挤成一段。 */
+    wrap.appendChild(hEl('div', 'pd__note', '路径：' + it.path));
+    if (it.interpreter) {
+      wrap.appendChild(hEl('div', 'pd__note', '解释器：' + it.interpreter));
+    }
+    if (it.args && it.args.length) {
+      wrap.appendChild(hEl('div', 'pd__note', '参数：' + it.args.join(' ')));
+    }
+    if (it.env && it.env.length) {
+      wrap.appendChild(hEl('div', 'pd__note', '环境变量：' + it.env.join(' · ')));
+    }
+    if (it.cwd) wrap.appendChild(hEl('div', 'pd__note', '工作目录：' + it.cwd));
+    if (it.note) wrap.appendChild(hEl('div', 'pd__note', '备注：' + it.note));
+
+    /* 动作：启停是主角，编辑/删除次要。 */
+    var actions = hEl('div', 'pd__actions');
+    var running = st === 'running';
+    var runBtn = hEl('button', 'btn btn--filled', running ? '停止' : '启动');
+    runBtn.type = 'button';
+    runBtn.disabled = !!BUSY[it.id];
+    runBtn.onclick = function () { running ? stopScript(it.id) : startScript(it.id); };
+    actions.appendChild(runBtn);
+
+    var editBtn = hEl('button', 'btn btn--outlined', '编辑');
+    editBtn.type = 'button';
+    editBtn.onclick = function () { openForm(it); };
+    actions.appendChild(editBtn);
+
+    var delBtn = hEl('button', 'btn btn--outlined', '删除');
+    delBtn.type = 'button';
+    delBtn.onclick = function () { removeScript(it); };
+    actions.appendChild(delBtn);
+    wrap.appendChild(actions);
+
+    /* 日志区：真实输出，不是「已启动」三个字。 */
+    var logWrap = hEl('div', 'pd__sec');
+    logWrap.appendChild(hEl('div', 'pd__h', '日志'));
+    var log = hEl('pre', 'pd__log pd__log--script', LOG_TEXT[it.id] || '');
+    log.id = 'scriptLog';
+    logWrap.appendChild(log);
+    wrap.appendChild(logWrap);
+
+    box.appendChild(wrap);
+    if (els.detailTitle) els.detailTitle.textContent = it.name || baseName(it.path);
+    scrollLog();
+  }
+
+  function scrollLog() {
+    var log = document.getElementById('scriptLog');
+    if (log) log.scrollTop = log.scrollHeight;
+  }
+
+  function appendLog(id, text) {
+    LOG_TEXT[id] = (LOG_TEXT[id] || '') + text + '\n';
+    if (DETAIL && DETAIL.id === id) {
+      var log = document.getElementById('scriptLog');
+      if (log) {
+        log.textContent = LOG_TEXT[id];
+        log.scrollTop = log.scrollHeight;
+      }
+    }
+  }
+
+  /* ── 日志流（SSE）──
+     手解 SSE（跟插件页同一套写法）：fetch + ReadableStream，
+     因为要带自定义头 X-Magic-Token，EventSource 带不了。
+     ⚠️ 每条订阅带一个 AbortController：切页/重开时要能**中止**它 ——
+        服务端那条 SSE 会一直挂着到脚本结束，不中止就会漏连接、
+        而且重开详情时旧订阅还占着 STREAMING，新订阅起不来。 */
+  function streamLog(id) {
+    if (STREAMING[id]) return;
+    var ctrl = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+    STREAMING[id] = ctrl || true;
+    var after = LOG_SEQ[id] || 0;
+    var opts = { headers: headers() };
+    if (ctrl) opts.signal = ctrl.signal;
+    fetch(api('/desk/scripts/' + encodeURIComponent(id) + '/log?after=' + after), opts)
+      .then(function (resp) {
+        if (!resp.ok || !resp.body) throw new Error('HTTP ' + resp.status);
+        var reader = resp.body.getReader(), dec = new TextDecoder(), buf = '';
+        return (function pump() {
+          return reader.read().then(function (chunk) {
+            if (chunk.done) return null;
+            buf += dec.decode(chunk.value, { stream: true });
+            var blocks = buf.split('\n\n');
+            buf = blocks.pop();
+            blocks.forEach(function (b) { handleBlock(id, b); });
+            return pump();
+          });
+        })();
+      })
+      .catch(function (e) {
+        /* 主动中止不算错误（我们自己切的页 / 重开了详情）。 */
+        if (e && e.name === 'AbortError') return;
+        if (DETAIL && DETAIL.id === id) toast('日志流中断：' + ((e && e.message) || e));
+      })
+      .then(function () { delete STREAMING[id]; });
+  }
+
+  /* 中止某个脚本的日志订阅。 */
+  function abortStream(id) {
+    var c = STREAMING[id];
+    if (c && c.abort) c.abort();
+    delete STREAMING[id];
+  }
+
+  function handleBlock(id, block) {
+    var name = '', data = '';
+    block.split('\n').forEach(function (ln) {
+      if (ln.indexOf('event: ') === 0) name = ln.slice(7).trim();
+      else if (ln.indexOf('data: ') === 0) data += ln.slice(6);
+    });
+    if (!data) return;
+    var ev; try { ev = JSON.parse(data); } catch (e) { return; }
+    if (name === 'line') {
+      if (ev.seq) LOG_SEQ[id] = ev.seq;
+      appendLog(id, ev.text == null ? '' : String(ev.text));
+      return;
+    }
+    if (name === 'state') {
+      /* 状态变了：更新徽标 + 停掉订阅（服务端在非 running 时也会自己收尾）。 */
+      var it = currentItem(id);
+      if (it) it.state = ev;
+      if (DETAIL && DETAIL.id === id) {
+        renderDetail();
+        if (ev && ev.state && ev.state !== 'running') {
+          loadList(true);
+        }
+      }
+    }
+  }
+
+  /* ── 启停 ── */
+  function startScript(id) {
+    if (BUSY[id]) return;
+    BUSY[id] = 'start';
+    renderDetail();
+    fetch(api('/desk/scripts/' + encodeURIComponent(id) + '/start'), { method: 'POST', headers: headers() })
+      .then(function (r) {
+        return r.json().then(function (d) {
+          if (!r.ok) throw new Error((d && d.error) || ('HTTP ' + r.status));
+          return d;
+        });
+      })
+      .then(function () {
+        delete BUSY[id];
+        toast('已启动');
+        /* 重开一条订阅：上一条可能已经因为「脚本结束」被服务端收尾了，
+           也可能还挂着 —— 两种情况都要先中止，否则新订阅起不来。 */
+        abortStream(id);
+        LOG_SEQ[id] = 0;
+        LOG_TEXT[id] = '';
+        loadList(true);
+        renderDetail();
+        streamLog(id);
+      })
+      .catch(function (e) {
+        delete BUSY[id];
+        toast('启动失败：' + ((e && e.message) || e));
+        loadList(true);
+        renderDetail();
+      });
+  }
+
+  function stopScript(id) {
+    if (BUSY[id]) return;
+    BUSY[id] = 'stop';
+    renderDetail();
+    fetch(api('/desk/scripts/' + encodeURIComponent(id) + '/stop'), { method: 'POST', headers: headers() })
+      .then(function (r) {
+        return r.json().then(function (d) {
+          if (!r.ok) throw new Error((d && d.error) || ('HTTP ' + r.status));
+          return d;
+        });
+      })
+      .then(function () {
+        delete BUSY[id];
+        toast('已停止');
+        loadList(true);
+        renderDetail();
+      })
+      .catch(function (e) {
+        delete BUSY[id];
+        toast('停止失败：' + ((e && e.message) || e));
+        loadList(true);
+        renderDetail();
+      });
+  }
+
+  function removeScript(it) {
+    if (!window.confirm('删除脚本「' + (it.name || baseName(it.path)) + '」？配置与日志都会被删掉。')) return;
+    fetch(api('/desk/scripts/' + encodeURIComponent(it.id)), { method: 'DELETE', headers: headers() })
+      .then(function (r) {
+        return r.json().then(function (d) {
+          if (!r.ok) throw new Error((d && d.error) || ('HTTP ' + r.status));
+          return d;
+        });
+      })
+      .then(function () {
+        toast('已删除');
+        delete LOG_TEXT[it.id];
+        delete LOG_SEQ[it.id];
+        backToList();
+      })
+      .catch(function (e) { toast('删除失败：' + ((e && e.message) || e)); });
+  }
+
+  /* ── 新增 / 编辑表单（宿主抽屉）──
+     ⚠️ 不用 window.prompt：悬浮球与 Android WebView 都没实现它，调用只会静默返回 null
+        （表现就是「点了没反应」，见 index.html 的同款说明）。 */
+  function openForm(it) {
+    var editing = !!(it && it.id);
+    var def = it || { name: '', path: '', args: [], cwd: '', interpreter: '', env: [], note: '' };
+    H.openSheet(editing ? '编辑脚本' : '添加脚本', function (body) {
+      var fields = [
+        { key: 'name', label: '名称', value: def.name || '', placeholder: '留空 = 用文件名' },
+        { key: 'path', label: '脚本文件路径（绝对路径）', value: def.path || '', placeholder: 'D:\\tools\\build.cmd' },
+        { key: 'interpreter', label: '解释器（可空）', value: def.interpreter || '', placeholder: '如 C:\\Python313\\python.exe' },
+        { key: 'args', label: '参数（空格分隔）', value: (def.args || []).join(' '), placeholder: '可选，例如 --port 8080' },
+        { key: 'env', label: '环境变量（每行一个 KEY=VALUE）', value: (def.env || []).join('\n'), placeholder: '可选，例如 PYTHONUNBUFFERED=1' },
+        { key: 'cwd', label: '工作目录（可空）', value: def.cwd || '', placeholder: '留空 = 脚本所在目录' },
+        { key: 'note', label: '备注（可空）', value: def.note || '', placeholder: '给自己看的说明' },
+      ];
+      var err = hEl('div', 'field__err'); err.hidden = true;
+      var inputs = {};
+      fields.forEach(function (f) {
+        var box = hEl('div', 'field');
+        var lab = hEl('label', '', f.label);
+        box.appendChild(lab);
+        /* 环境变量是多行的（一条一行填），其余单行。 */
+        if (f.key === 'env') {
+          var ta = document.createElement('textarea');
+          ta.value = f.value;
+          ta.placeholder = f.placeholder;
+          ta.setAttribute('autocapitalize', 'off');
+          ta.setAttribute('autocorrect', 'off');
+          ta.setAttribute('spellcheck', 'false');
+          box.appendChild(ta);
+          inputs[f.key] = ta;
+        } else {
+          var inp = document.createElement('input');
+          inp.type = 'text';
+          inp.value = f.value;
+          if (f.placeholder) inp.placeholder = f.placeholder;
+          inp.setAttribute('autocapitalize', 'off');
+          inp.setAttribute('autocorrect', 'off');
+          inp.setAttribute('spellcheck', 'false');
+          box.appendChild(inp);
+          inputs[f.key] = inp;
+        }
+        body.appendChild(box);
+      });
+      body.appendChild(err);
+      var ok = hEl('button', 'btn btn--filled', editing ? '保存' : '添加');
+      ok.type = 'button';
+      body.appendChild(ok);
+
+      function commit() {
+        var path = String(inputs.path.value || '').trim();
+        if (!path) {
+          err.textContent = '要填脚本文件的绝对路径';
+          err.hidden = false;
+          inputs.path.focus();
+          return;
+        }
+        var payload = buildPayload(inputs);
+        var req = editing
+          ? fetch(api('/desk/scripts/' + encodeURIComponent(it.id)), {
+              method: 'PUT', headers: jsonHeaders(), body: JSON.stringify(payload) })
+          : fetch(api('/desk/scripts'), {
+              method: 'POST', headers: jsonHeaders(), body: JSON.stringify(payload) });
+        ok.disabled = true;
+        req.then(function (r) {
+          return r.json().then(function (d) {
+            if (!r.ok) throw new Error((d && d.error) || ('HTTP ' + r.status));
+            return d;
+          });
+        })
+          .then(function (d) {
+            H.closeSheet();
+            toast(editing ? '已保存' : '已添加');
+            loadList(true);
+            if (DETAIL && DETAIL.id === d.id) renderDetail();
+          })
+          .catch(function (e) {
+            ok.disabled = false;
+            err.textContent = (e && e.message) || String(e);
+            err.hidden = false;
+          });
+      }
+      ok.onclick = commit;
+      inputs.path.onkeydown = function (e) { if (e.key === 'Enter') { e.preventDefault(); commit(); } };
+      setTimeout(function () { try { inputs.path.focus(); } catch (e) {} }, 30);
+    });
+  }
+
+  /* ── 挂载 ── */
+  function mount(host) {
+    H = host;
+    var root = H.rootEl, detail = H.detailEl;
+    if (!root || !detail) return;
+    root.innerHTML =
+      '<div class="history__top">' +
+        '<button class="topbar__icon" id="btnScriptsBack" aria-label="返回"><svg width="20" height="20"><use href="#i-back"/></svg></button>' +
+        '<span class="history__title">脚本</span>' +
+        '<button class="history__disconnect" id="btnScriptsAdd" type="button">添加</button>' +
+      '</div>' +
+      '<div class="history__list" id="scriptList"></div>';
+    detail.innerHTML =
+      '<div class="history__top">' +
+        '<button class="topbar__icon" id="btnScriptDetailBack" aria-label="返回"><svg width="20" height="20"><use href="#i-back"/></svg></button>' +
+        '<span class="history__title" id="scriptDetailTitle">脚本</span>' +
+      '</div>' +
+      '<div class="history__list" id="scriptDetailBody"></div>';
+    els.list = root.querySelector('#scriptList');
+    els.detailBody = detail.querySelector('#scriptDetailBody');
+    els.detailTitle = detail.querySelector('#scriptDetailTitle');
+    var back = root.querySelector('#btnScriptsBack');
+    if (back) back.onclick = function () { H.backToDiscover(); };
+    var add = root.querySelector('#btnScriptsAdd');
+    if (add) add.onclick = function () { openForm(null); };
+    var dback = detail.querySelector('#btnScriptDetailBack');
+    if (dback) dback.onclick = function () { backToList(); };
+  }
+
+  /* 进入「发现 → 脚本」：拉一次清单（只读，不启停任何东西）。 */
+  function show() {
+    DETAIL = null;
+    loadList(false);
+  }
+
+  window.MagicScripts = { mount: mount, show: show };
+})();