magic-agent 1.0.1 → 1.0.3

package/client-ui/index.html

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>magic-client · 对话</title>
+<!--
+  PC 宿主：把公共的对话 UI 组件（shared/conversation.js）挂到页面上。
+  它自己只做三件事 —— 提供颜色令牌、给一个容器、调 create()。对话怎么渲染、
+  怎么发、怎么答、怎么选引擎/模型/授权，全在共享组件里，与移动端是同一份实现。
+
+  ── 为什么这里只有对话 ──
+    按定稿口径：PC 与移动端都**只提供基础对话 UI**，其余能力（会话列表、工作区、
+    业务模块、设置…）只暴露接口，由第三方对接自己的定制界面。
+    所以这一页刻意不铺侧边栏、不做工作台 —— 组件边界之外的都该是对接方的事。
+
+  ── 视觉 ──
+    颜色取 agents-anywhere 桌面工作台的 oklch 令牌（globals.css 的 :root / .dark），
+    映射到共享组件约定的那组变量名上。于是同一份对话样式在桌面是这套调性、
+    在移动端是 AA 安卓端那套 hex 调性，而**结构尺寸共用**（不存在两份样式漂移）。
+
+  ── 接线 ──
+    GET  /desk/contract /desk/profile   取应用名与通道能力
+    GET  /desk/engines?models=1         组件自己拉（也可由宿主用 engines: 传入）
+    POST /desk/ask  /desk/ask/{id}/control   一轮与打断/收工/回答案
+-->
+<link rel="stylesheet" href="shared/conversation.css">
+<style>
+/* ===== 令牌：AA 桌面工作台的 oklch 值，映射到共享组件的颜色契约 =====
+   契约里的每个名字都必须在宿主这一层给出值 —— 共享样式只用不定义。 */
+:root, [data-theme="light"] {
+  --canvas: oklch(1 0 0);
+  --ink: oklch(0.145 0 0);
+  --ink-soft: oklch(0.27 0 0);
+  --muted: oklch(0.556 0 0);
+  --faint: oklch(0.70 0 0);
+  --border: oklch(0.922 0 0);
+  --subtle: oklch(0.97 0 0);
+  --raised: oklch(1 0 0);
+  --primary-action: oklch(0.205 0 0);
+  --on-primary-action: oklch(0.985 0 0);
+  --app-shadow: oklch(0.145 0 0 / 12%);
+
+  --bubble: oklch(0.97 0 0);
+  --bubble-text: oklch(0.205 0 0);
+  --code: oklch(1 0 0 / 72%);
+  --status-neutral: oklch(0.94 0 0);
+  --status-neutral-text: oklch(0.48 0 0);
+  --activity: oklch(0.97 0 0 / 55%);
+
+  --md-body: oklch(0.205 0 0);
+  --md-muted: oklch(0.556 0 0);
+  --md-border: oklch(0.912 0 0);
+  --md-code-bg: oklch(0.97 0 0);
+  --link: oklch(0.60 0.11 250);
+  --prompt: oklch(0.58 0.16 12);
+  --shimmer: oklch(1 0 0 / 60%);
+  --panel: oklch(0.97 0 0);
+  --panel-border: oklch(0.912 0 0);
+
+  --accent: oklch(0.56 0.10 168);
+  --warning: oklch(0.70 0.15 65);
+  --success: oklch(0.62 0.15 150);
+  --error-surface: oklch(0.97 0.02 20);
+  --error-border: oklch(0.88 0.06 20);
+  --error-text: oklch(0.48 0.17 25);
+  --error-icon: oklch(0.52 0.17 25);
+  --running: oklch(0.70 0.15 160);
+  --transitioning: oklch(0.62 0.17 255);
+  --active: oklch(0.75 0.15 75);
+
+  --r-card: 14px; --r: 9px; --r-full: 999px;
+  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+[data-theme="dark"] {
+  color-scheme: dark;
+  --canvas: oklch(0.145 0 0);
+  --ink: oklch(0.985 0 0);
+  --ink-soft: oklch(0.90 0 0);
+  --muted: oklch(0.708 0 0);
+  --faint: oklch(0.556 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --subtle: oklch(0.269 0 0);
+  --raised: oklch(0.205 0 0);
+  --primary-action: oklch(0.922 0 0);
+  --on-primary-action: oklch(0.205 0 0);
+  --app-shadow: oklch(0 0 0 / 52%);
+
+  --bubble: oklch(0.269 0 0);
+  --bubble-text: oklch(0.97 0 0);
+  --code: oklch(0.18 0 0);
+  --status-neutral: oklch(0.32 0 0);
+  --status-neutral-text: oklch(0.86 0 0);
+  --activity: oklch(0.22 0 0 / 60%);
+
+  --md-body: oklch(0.93 0 0);
+  --md-muted: oklch(0.68 0 0);
+  --md-border: oklch(0.32 0 0);
+  --md-code-bg: oklch(0.269 0 0);
+  --link: oklch(0.78 0.10 250);
+  --prompt: oklch(0.72 0.15 12);
+  --shimmer: oklch(1 0 0 / 18%);
+  --panel: oklch(0.24 0 0);
+  --panel-border: oklch(0.32 0 0);
+
+  --accent: oklch(0.72 0.11 168);
+  --warning: oklch(0.80 0.14 75);
+  --success: oklch(0.75 0.15 150);
+  --error-surface: oklch(0.24 0.05 20);
+  --error-border: oklch(0.38 0.10 20);
+  --error-text: oklch(0.80 0.12 20);
+  --error-icon: oklch(0.72 0.14 22);
+  --running: oklch(0.72 0.15 160);
+  --transitioning: oklch(0.68 0.16 255);
+  --active: oklch(0.80 0.14 75);
+}
+
+@font-face {
+  font-family: 'AA Caveat';
+  src: url('./assets/caveat.woff2') format('woff2');
+  font-display: swap; font-weight: 400 700;
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body {
+  background: var(--canvas); color: var(--ink);
+  font: 14px/1.5 var(--font);
+  overflow: hidden; overscroll-behavior: none;
+  display: flex; flex-direction: column;
+}
+button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
+input, textarea { font: inherit; color: inherit; }
+svg { display: block; }
+
+/* 宿主自己的顶栏：字标 + 主题 + 新会话。组件不管这些。 */
+.bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
+  padding: 10px 16px; border-bottom: 1px solid var(--border); }
+.bar__wm { font-family: 'AA Caveat', cursive; font-weight: 500; font-size: 20px; line-height: 1;
+  margin-right: auto; white-space: nowrap; }
+.bar__t { font-size: 13px; color: var(--muted); max-width: 40vw; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.bar__b { height: 30px; padding: 0 12px; border-radius: var(--r-full);
+  border: 1px solid var(--border); background: var(--raised); font-size: 13px; }
+.bar__b:hover { background: var(--subtle); }
+
+/* 组件挂载点：占满剩下的高度。组件内部自己是 flex 纵向布局。 */
+#conv { flex: 1; min-height: 0; display: flex; }
+
+/* 宿主自己的一条横幅：组件挂载失败时说明原因，而不是留一片空白。 */
+.boot-err { margin: 16px; padding: 14px 16px; border-radius: var(--r-card);
+  border: 1px solid var(--error-border); background: var(--error-surface);
+  color: var(--error-text); font-size: 13.5px; line-height: 1.6; }
+
+@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
+</style>
+</head>
+<body>
+
+<div class="bar">
+  <span class="bar__wm" id="wordmark">magic-client</span>
+  <span class="bar__t" id="title"></span>
+  <button class="bar__b" id="btnNew" type="button">新会话</button>
+  <button class="bar__b" id="btnTheme" type="button">暗色</button>
+</div>
+<div id="conv"></div>
+
+<script src="shared/conversation.js"></script>
+<script src="shared/transport-http.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  /* 两种宿主的基址与令牌：
+     · 桌面/浏览器：插件同源提供页面，令牌在 URL 上（?token=…），基址即同源；
+     · 移动容器：由 boot.js 注入 window.MAGIC_BASE / MAGIC_TOKEN。
+     桌面端不设 MAGIC_BASE，下面这段完全不生效，同源行为逐字节不变。 */
+  var TOKEN = window.MAGIC_TOKEN || new URLSearchParams(location.search).get('token') || '';
+  var BASE = (window.MAGIC_BASE || '').replace(/\/+$/, '');
+
+  var root = document.documentElement;
+  function setTheme(t) {
+    root.setAttribute('data-theme', t);
+    document.getElementById('btnTheme').textContent = t === 'dark' ? '暗色' : '亮色';
+  }
+  setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  document.getElementById('btnTheme').onclick = function () {
+    setTheme(root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
+  };
+
+  function api(path) {
+    return fetch(BASE + path, { headers: TOKEN ? { 'X-Magic-Token': TOKEN } : {} });
+  }
+
+  function showBootError(msg) {
+    var d = document.createElement('div');
+    d.className = 'boot-err';
+    d.textContent = msg;
+    document.getElementById('conv').appendChild(d);
+  }
+
+  var conv = null;
+
+  /* 启动：先把应用名读回来（字标用 profile.app.name），再挂组件。
+     组件自己会去拉引擎清单 —— 宿主不替它做这件事，避免两处各拉一遍。 */
+  (async function boot() {
+    try {
+      var prof = await (await api('/desk/profile')).json();
+      var app = (prof && prof.app) || {};
+      if (app.name) {
+        document.getElementById('wordmark').textContent = app.name;
+        document.title = app.name + ' · 对话';
+      }
+      /* profile 的 ui.themeVars 覆盖主题令牌（模块/项目可借此换调性） */
+      var vars = (prof && prof.ui && prof.ui.themeVars) || {};
+      Object.keys(vars).forEach(function (k) { root.style.setProperty(k, vars[k]); });
+    } catch (e) {
+      showBootError('读 profile 失败：' + (e && e.message ? e.message : e) +
+        '（地址要带 ?token=）—— 对话仍会尝试启动。');
+    }
+
+    try {
+      /* 传输层由宿主注入 —— 组件本身不连后端。
+         这一份是 HTTP 参考实现；掌天瓶那边会换成走 IPC → CLI 的实现。 */
+      var transport = window.MagicTransportHttp({ base: BASE, token: TOKEN });
+      conv = window.MagicConversation.create({
+        el: document.getElementById('conv'),
+        transport: transport,
+        titleEl: document.getElementById('title'),
+      });
+      document.getElementById('btnNew').onclick = function () { conv.newSession(); };
+    } catch (e) {
+      showBootError('对话组件挂载失败：' + (e && e.message ? e.message : e));
+    }
+  })();
+
+  /* 宿主把组件实例挂到 window 上，方便对接方/调试直接拿：
+       window.magicConv.send('…') / .setSession(sid) / .newSession() */
+  window.magicConv = null;
+  var iv = setInterval(function () {
+    if (conv) { window.magicConv = conv; clearInterval(iv); }
+  }, 50);
+})();
+</script>
+</body>
+</html>