@my-life-buddies/cli 0.13.3 → 0.15.0

package/dist/web/diagnostics.js

@@ -0,0 +1,184 @@
+(() => {
+  "use strict";
+  window.createPreviewDiagnostics = ({ node, formatTime, formatDuration, toast, showError }) => {
+    const $ = id => document.getElementById(id);
+    const models = $("model-records"), logs = $("protocol-log");
+    const modelConversation = $("models-conversation"), logConversation = $("logs-conversation");
+    const kind = $("models-kind"), level = $("logs-level");
+    const modelSearch = $("models-search"), logSearch = $("logs-search");
+    let snapshot = {}, conversation = "", visibleLogs = [];
+    const cached = new Map(), expanded = new Map();
+    const object = value => value && typeof value === "object" && !Array.isArray(value) ? value : {};
+    const json = value => typeof value === "string" ? value : JSON.stringify(value, null, 2);
+    const number = value => typeof value === "number" && Number.isFinite(value) && value >= 0;
+    const metricHelp = {
+      "模型响应耗时": "本次模型请求发出至响应结束。",
+      "模型首字耗时": "本次模型请求发出至首段输出。",
+      "结束原因": "模型停止原因；toolUse 表示请求调用工具。",
+      "输入 Token": "本次调用的输入 Token 数。",
+      "输出 Token": "本次调用的输出 Token 数。",
+      "缓存读取": "本次调用读取缓存的 Token 数。",
+      "缓存写入": "本次调用写入缓存的 Token 数。",
+      "总 Token": "本次调用上报的 Token 总数。",
+    };
+    function section(label, value, key) {
+      const details = node("details", { class: "diagnostic-section", "data-detail": key });
+      details.append(node("summary", {}, label));
+      details.append(node("pre", {}, json(value)));
+      return details;
+    }
+    function metrics(pairs) {
+      const list = node("dl", { class: "diagnostic-metrics" });
+      for (const [label, value] of pairs) {
+        const item = node("div");
+        const detail = node("dd", {}, value);
+        if (metricHelp[label]) {
+          detail.append(node("p", { class: "metric-help" }, metricHelp[label]));
+        }
+        item.append(node("dt", {}, label), detail);
+        list.append(item);
+      }
+      return list;
+    }
+    async function copy(text) {
+      try { await navigator.clipboard.writeText(text); toast("日志已复制"); }
+      catch { showError(new Error("浏览器未允许复制，请展开原始日志后手动选择")); }
+    }
+    function describe(record) {
+      const data = object(record.data), payload = object(data.payload);
+      if (record.kind === "request") {
+        const messages = payload.messages || payload.input;
+        const count = Array.isArray(messages) ? `${messages.length} 条上下文` : "请求上下文";
+        return `${typeof payload.model === "string" ? payload.model : "模型未上报"} · ${count}${Array.isArray(payload.tools) ? ` · ${payload.tools.length} 个工具` : ""}`;
+      }
+      const content = Array.isArray(data.content) ? data.content : [];
+      const texts = content.filter(item => item?.type === "text").map(item => item.text).filter(text => typeof text === "string");
+      const tools = content.filter(item => item?.type === "toolCall").map(item => item.name).filter(name => typeof name === "string");
+      return typeof data.error === "string" ? data.error : tools.length ? `请求工具：${tools.join("、")}` : texts.join(" ") || record.title;
+    }
+    function row(record, model) {
+      const data = object(record.data);
+      const details = node("details", { class: "diagnostic-entry", "data-record": record.id, "data-detail": "entry" });
+      details.dataset.level = data.error || data.stopReason === "error" ? "error" : record.level;
+      const summary = node("summary");
+      summary.append(node("span", { class: "diagnostic-badge", "data-kind": record.kind }, model ? record.kind === "request" ? "请求" : "响应" : record.level.toUpperCase()));
+      const heading = node("span", { class: "diagnostic-heading" });
+      heading.append(node("strong", {}, model ? record.kind === "request" ? "模型请求" : "模型响应" : record.title));
+      if (model) heading.append(node("span", { class: "diagnostic-preview" }, describe(record)));
+      summary.append(heading, node("time", { dateTime: record.timestamp, title: record.timestamp }, formatTime(record.timestamp)));
+      details.append(summary);
+      const body = node("div", { class: "diagnostic-body" });
+      const meta = node("div", { class: "diagnostic-meta" });
+      meta.append(node("span", {}, `${record.convoKey || "未标注会话"} · ${record.source}`));
+      const button = node("button", { type: "button", class: "text-button" }, "复制原始日志");
+      button.addEventListener("click", () => void copy(record.raw));
+      meta.append(button); body.append(meta);
+      if (record.truncated || (model && !record.data)) {
+        body.append(node("p", { class: "diagnostic-warning" }, record.truncated
+          ? "日志已截断，无法还原完整数据。请查看原始日志。"
+          : "尚未收到完整数据，或日志格式无法解析。已保留原始日志。"));
+      }
+      if (model && record.data) {
+        if (record.kind === "request") {
+          const payload = object(data.payload);
+          const messages = payload.messages ?? payload.input;
+          const system = payload.system ?? (Array.isArray(messages) ? messages.filter(item => ["system", "developer"].includes(item?.role)) : undefined);
+          if (system != null && (!Array.isArray(system) || system.length)) body.append(section("系统提示词", system, "system"));
+          if (messages != null) body.append(section(`请求上下文${Array.isArray(messages) ? ` · ${messages.length} 条` : ""}`, messages, "messages"));
+          if (payload.tools != null) body.append(section(`可用工具${Array.isArray(payload.tools) ? ` · ${payload.tools.length} 个` : ""}`, payload.tools, "tools"));
+          const { messages: _messages, input: _input, system: _system, tools: _tools, ...parameters } = payload;
+          body.append(section("模型与请求参数", parameters, "parameters"));
+          body.append(section("完整请求体", data.payload ?? data, "payload"));
+        } else {
+          const usage = object(data.usage);
+          body.append(metrics([
+            ["模型响应耗时", number(data.ms) ? formatDuration(data.ms) : "未上报"],
+            ["模型首字耗时", number(data.firstTokenMs) ? formatDuration(data.firstTokenMs) : "未上报"],
+            ["结束原因", typeof data.stopReason === "string" ? data.stopReason : "未上报"],
+          ]));
+          const tokenFields = [["输入 Token", "input"], ["输出 Token", "output"], ["缓存读取", "cacheRead"], ["缓存写入", "cacheWrite"], ["总 Token", "totalTokens"]];
+          body.append(metrics(tokenFields.map(([label, key]) => [label, number(usage[key]) ? String(usage[key]) : "未上报"])));
+          if (typeof data.error === "string" && data.error) body.append(node("p", { class: "diagnostic-warning" }, data.error));
+          const content = Array.isArray(data.content) ? data.content : [];
+          content.forEach((block, index) => {
+            if (!block || typeof block !== "object") return;
+            const label = block.type === "text" ? "响应正文" : block.type === "thinking" ? "思考内容（日志已提供）" : block.type === "toolCall" ? `工具调用请求 · ${block.name || "未命名"}` : `响应片段 · ${block.type || index + 1}`;
+            body.append(section(label, block.type === "text" ? block.text : block, `content-${index}`));
+          });
+          if (data.content != null && !content.length) body.append(section("响应内容", data.content, "content"));
+          if (data.usage != null) body.append(section("完整用量", data.usage, "usage"));
+        }
+      }
+      body.append(section("原始日志", record.raw, "raw"));
+      details.append(body);
+      return details;
+    }
+    function reconcile(container, records, model, emptyText) {
+      const prefix = model ? "model:" : "log:";
+      const wanted = new Set();
+      records.forEach((record, index) => {
+        const key = prefix + record.id;
+        wanted.add(key);
+        const signature = JSON.stringify(record);
+        let entry = cached.get(key);
+        if (!entry || entry.signature !== signature) {
+          if (entry) expanded.set(key, [...entry.node.querySelectorAll("details"), entry.node].filter(item => item.open).map(item => item.dataset.detail));
+          const element = row(record, model);
+          for (const item of [...element.querySelectorAll("details"), element]) item.open = (expanded.get(key) || []).includes(item.dataset.detail);
+          entry?.node.remove();
+          entry = { node: element, signature };
+          cached.set(key, entry);
+        }
+        if (container.children[index] !== entry.node) container.insertBefore(entry.node, container.children[index] || null);
+      });
+      for (const child of [...container.children]) if (!wanted.has(prefix + child.dataset.record)) child.remove();
+      if (!records.length) {
+        const empty = node("div", { class: "diagnostic-empty" });
+        empty.append(node("strong", {}, emptyText[0]), node("p", {}, emptyText[1]));
+        container.append(empty);
+      }
+    }
+    function updateConversations(records) {
+      const keys = [...new Set(records.map(record => record.convoKey).filter(Boolean))].sort();
+      if (conversation && !keys.includes(conversation)) keys.push(conversation);
+      for (const select of [modelConversation, logConversation]) {
+        if (document.activeElement === select) continue;
+        const signature = JSON.stringify(keys);
+        if (select.dataset.options !== signature) {
+          select.replaceChildren(node("option", { value: "" }, "全部会话"), ...keys.map(key => node("option", { value: key }, key)));
+          select.dataset.options = signature;
+        }
+        select.value = conversation;
+      }
+    }
+    function render() {
+      const runtime = snapshot.diagnostics?.records || [];
+      updateConversations(runtime);
+      const matches = (record, search) => (!conversation || record.convoKey === conversation) && (!search || record.raw.toLocaleLowerCase().includes(search.toLocaleLowerCase()));
+      const modelRecords = runtime.filter(record => record.kind === "request" || record.kind === "response");
+      const filteredModels = modelRecords.filter(record => (!kind.value || record.kind === kind.value) && matches(record, modelSearch.value.trim()));
+      reconcile(models, filteredModels, true, modelRecords.length
+        ? ["没有匹配的模型记录", "试试其他会话、类型或关键词。"]
+        : ["等待模型调用", "启动 DEV 并发送消息后，Runtime 提供的模型请求与响应会出现在这里。旧版本或未输出这些日志的 Runtime 可先查看运行日志。"]);
+      $("models-count").textContent = `${filteredModels.length} 条记录${snapshot.diagnostics?.dropped ? ` · 已淘汰 ${snapshot.diagnostics.dropped} 条较早日志` : ""}`;
+      const events = snapshot.events || [];
+      const deltas = events.filter(event => event.type === "run.output.delta").length;
+      const other = events.filter(event => event.type !== "run.output.delta" && (!snapshot.diagnostics || !/^agent\.(stdout|stderr)$/.test(event.type))).map(event => ({
+        id: event.eventId, timestamp: event.timestamp, source: event.channel, level: /failed|error|stderr/.test(event.type) ? "error" : "info", title: event.summary || event.type,
+        kind: "log", raw: `${event.timestamp} ${event.channel} ${event.type}${event.runId ? ` ${event.runId}` : ""}\n${event.summary || ""}`,
+      }));
+      const allLogs = [...runtime, ...other].sort((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
+      visibleLogs = allLogs.filter(record => (!level.value || record.level === level.value || level.value === "error" && (record.data?.error || record.data?.stopReason === "error")) && matches(record, logSearch.value.trim()));
+      reconcile(logs, visibleLogs, false, allLogs.length ? ["没有匹配的日志", "调整会话、级别或搜索条件后再试。"] : ["等待运行日志", "启动 DEV 后，这里会保留进程输出与连接事件。"]);
+      $("logs-count").textContent = `${visibleLogs.length} 条可见日志${deltas ? ` · 已折叠 ${deltas} 条文字分片事件` : ""}${snapshot.diagnostics?.dropped ? ` · 已淘汰 ${snapshot.diagnostics.dropped} 条较早日志` : ""}`;
+      const retained = new Set([...runtime.map(record => record.id), ...other.map(record => record.id)]);
+      for (const key of cached.keys()) if (!retained.has(key.slice(key.indexOf(":") + 1))) { cached.delete(key); expanded.delete(key); }
+    }
+    for (const select of [modelConversation, logConversation]) {
+      select.addEventListener("change", () => { conversation = select.value; render(); });
+      select.addEventListener("blur", render);
+    }
+    for (const input of [kind, level, modelSearch, logSearch]) input.addEventListener(input.type === "search" ? "input" : "change", render);
+    return { update(next) { snapshot = next; render(); }, copyLogs() { return copy(visibleLogs.map(record => record.raw).join("\n\n")); } };
+  };
+})();

package/dist/web/index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/assets/app.css">
     <script src="/assets/iphone-16-max.js" defer></script>
     <script src="/assets/widgets.js" defer></script>
+    <script src="/assets/diagnostics.js" defer></script>
     <script src="/assets/app.js" defer></script>
     <link rel="stylesheet" href="/assets/widgets.css">
   </head>
@@ -30,16 +31,13 @@
           <p class="sidebar-label">开发调试</p>
           <nav class="debug-tabs" role="tablist" aria-label="本地回合调试视图">
             <button id="tab-overview" role="tab" aria-selected="true" aria-controls="panel-overview" tabindex="0">
-              <svg aria-hidden="true" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg><span>概览</span>
+              <svg aria-hidden="true" viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></svg><span>运行概况</span>
             </button>
-            <button id="tab-timeline" role="tab" aria-selected="false" aria-controls="panel-timeline" tabindex="-1">
-              <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l3.5 2"/></svg><span>执行时间线</span>
-            </button>
-            <button id="tab-context" role="tab" aria-selected="false" aria-controls="panel-context" tabindex="-1">
-              <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 5h13v10H9l-4 4v-4H4Z"/><path d="M8 9h5M8 12h3M18 8h2v10h-7"/></svg><span>对话记录</span>
+            <button id="tab-models" role="tab" aria-selected="false" aria-controls="panel-models" tabindex="-1">
+              <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M4 5h16v14H4ZM8 9h8M8 13h5"/></svg><span>模型调用</span>
             </button>
             <button id="tab-protocol" role="tab" aria-selected="false" aria-controls="panel-protocol" tabindex="-1">
-              <svg aria-hidden="true" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="2"/><path d="m7.5 9 3 3-3 3M13 15h3.5"/></svg><span>协议日志</span>
+              <svg aria-hidden="true" viewBox="0 0 24 24"><rect x="3.5" y="5" width="17" height="14" rx="2"/><path d="m7.5 9 3 3-3 3M13 15h3.5"/></svg><span>运行日志</span>
             </button>
           </nav>
         </div>
@@ -85,6 +83,18 @@
 
         <main class="workspace" id="debug-content">
       <section class="debugger" aria-label="本地回合调试器">
+        <div class="debug-panels">
+          <section id="panel-models" class="debug-panel" role="tabpanel" aria-labelledby="tab-models" hidden>
+            <div class="section-heading"><div><h3>模型调用</h3></div></div>
+            <div class="diagnostic-filters">
+              <label>会话<select id="models-conversation" aria-label="模型会话"><option value="">全部会话</option></select></label>
+              <label>类型<select id="models-kind"><option value="">请求与响应</option><option value="request">模型请求</option><option value="response">模型响应</option></select></label>
+              <label class="diagnostic-search">搜索<input id="models-search" type="search" placeholder="搜索模型、工具或内容" autocomplete="off"></label>
+            </div>
+            <p class="diagnostic-note" id="models-count"></p>
+            <div id="model-records" class="diagnostic-records"></div>
+          </section>
+          <section id="panel-overview" class="debug-panel" role="tabpanel" aria-labelledby="tab-overview">
         <div class="run-strip">
           <div class="run-heading">
             <div class="run-identity">
@@ -93,7 +103,7 @@
                 <h2 id="run-title">尚无本地回合</h2>
                 <span class="status-pill" id="run-status" data-status="idle">等待消息</span>
               </div>
-              <details class="run-reference" id="run-reference" hidden><summary>回合标识</summary>
+              <details class="run-reference" id="run-reference" hidden><summary>本地发送回执 ID</summary>
                 <span id="run-id"></span>
                 <button type="button" class="text-button" id="copy-run-id" disabled>复制 ID</button>
               </details>
@@ -112,28 +122,25 @@
           </div>
 
           <dl class="run-metrics" aria-label="本地回合指标">
-            <div><dt>接收</dt><dd id="metric-accept">未记录</dd></div>
-            <div><dt>首段文字</dt><dd id="metric-first">未记录</dd></div>
-            <div><dt>完整耗时</dt><dd id="metric-response">未记录</dd></div>
-            <div><dt>会话消息</dt><dd id="metric-messages">0</dd></div>
+            <div><dt>消息被接收</dt><dd><span id="metric-accept">未记录</span><p class="metric-help">Preview 发起发送至平台确认接收。</p></dd></div>
+            <div><dt>首字耗时</dt><dd><span id="metric-first">未记录</span><p class="metric-help">Preview 发起发送至收到首段文字。</p></dd></div>
+            <div><dt>回复结束</dt><dd><span id="metric-response">未记录</span><p class="metric-help">Preview 发起发送至观察到回复结束。</p></dd></div>
+            <div><dt>会话消息</dt><dd><span id="metric-messages">0</span><p class="metric-help">当前会话的消息总数，包含历史消息。</p></dd></div>
           </dl>
 
         </div>
-
-        <div class="debug-panels">
-          <section id="panel-overview" class="debug-panel" role="tabpanel" aria-labelledby="tab-overview">
             <div class="overview-grid">
               <article class="run-summary">
                 <div class="section-heading">
-                  <div><h3>执行过程</h3></div>
+                  <div><h3>回复观察</h3></div>
                 </div>
                 <div class="empty-state" id="overview-empty">
                   <h4>发一条消息，开始记录</h4>
-                  <p>右侧发送消息后，这里显示本次执行过程。</p>
+                  <p>右侧发送消息后，这里显示消息发送与回复的观察结果。</p>
                 </div>
                 <div id="overview-content" hidden>
                   <ol class="run-progress" id="run-progress" aria-label="回合执行进度"></ol>
-                  <div class="waterfall" id="waterfall" aria-label="本地回合耗时分布"></div>
+                  <div class="waterfall" id="waterfall" aria-label="消息时间节点，均从发起发送计时"></div>
                   <p class="run-summary-copy" id="run-summary-copy"></p>
                 </div>
               </article>
@@ -148,28 +155,21 @@
                 </dl>
               </article>
             </div>
-          </section>
-
-          <section id="panel-timeline" class="debug-panel" role="tabpanel" aria-labelledby="tab-timeline" hidden>
-            <div class="section-heading">
-              <div><h3>执行时间线</h3><p>查看当前回合的事件。</p></div>
-            </div>
-            <ol class="timeline" id="timeline-list"></ol>
-          </section>
-
-          <section id="panel-context" class="debug-panel" role="tabpanel" aria-labelledby="tab-context" hidden>
-            <div class="section-heading">
-              <div><h3>当前对话记录</h3><p>包含当前会话的历史消息，不限于所选回合。</p></div>
-              <span class="source-label" id="context-source">平台聊天记录</span>
-            </div>
-            <div class="context-list" id="context-list"></div>
+            <details class="diagnostic-history"><summary>消息与连接事件</summary><ol class="timeline" id="timeline-list"></ol></details>
+            <details class="diagnostic-history"><summary>平台对话记录 <span id="context-source">平台聊天记录</span></summary><div class="context-list" id="context-list"></div></details>
           </section>
 
           <section id="panel-protocol" class="debug-panel" role="tabpanel" aria-labelledby="tab-protocol" hidden>
             <div class="section-heading">
-              <div><h3>协议日志</h3><p>查看当前本地连接的完整日志。</p></div>
+              <div><h3>运行日志</h3></div>
               <button class="text-button" id="copy-protocol" type="button">复制可见日志</button>
             </div>
+            <div class="diagnostic-filters">
+              <label>会话<select id="logs-conversation" aria-label="日志会话"><option value="">全部会话</option></select></label>
+              <label>级别<select id="logs-level"><option value="">全部级别</option><option value="error">ERROR</option><option value="warn">WARN</option><option value="info">INFO</option></select></label>
+              <label class="diagnostic-search">搜索<input id="logs-search" type="search" placeholder="搜索日志内容" autocomplete="off"></label>
+            </div>
+            <p class="diagnostic-note" id="logs-count"></p>
             <div class="protocol-log" id="protocol-log" role="log" aria-live="polite"></div>
           </section>
         </div>

package/dist/web/widgets.css

@@ -1,31 +1,62 @@
-/* Native points expressed against the simulator's 415 pt canvas. */
-.widget-shortcut { position:absolute; z-index:3; top:24.1cqw; left:2.89cqw; max-width:calc(100% - 5.78cqw); }
-.widget-shortcut[hidden], .widget-overlay[hidden] { display:none; }
-.widget-pill { display:flex; align-items:center; gap:1.93cqw; min-height:12.53cqw; max-width:62.65cqw; border-radius:99px; padding:1.93cqw 4.82cqw 1.93cqw 3.855cqw; color:#20252b; background:linear-gradient(135deg,#fff,#bbf1a7); border:.5px solid #20252b1f; font-size:3.855cqw; font-weight:400; box-shadow:none; }
-.widget-pill .widget-pill-avatar { width:6.747cqw; height:6.747cqw; flex:none; border-radius:50%; }
+/* iOS ff1845b: dimensions in native points, scaled once with the device canvas. */
+.widget-shortcut { position:absolute; z-index:3; top:calc(var(--widget-unit, 1px) * 100); left:calc(var(--widget-unit, 1px) * 12); max-width:calc(100% - calc(var(--widget-unit, 1px) * 24)); }
+.widget-shortcut[hidden], .widget-overlay[hidden], .widget-more[hidden] { display:none; }
+.widget-pill { display:flex; align-items:center; gap:calc(var(--widget-unit, 1px) * 8); height:calc(var(--widget-unit, 1px) * 52); max-width:calc(var(--widget-unit, 1px) * 260); border-radius:99px; padding:0 calc(var(--widget-unit, 1px) * 20) 0 calc(var(--widget-unit, 1px) * 16); color:#000; background:linear-gradient(110deg,#fff,#bbf1a7); border:calc(var(--widget-unit, 1px) * .5) solid #0000001f; font-size:calc(var(--widget-unit, 1px) * 16); font-weight:400; box-shadow:none; transition:padding .22s ease-in-out; }
+.widget-pill .widget-pill-avatar { width:calc(var(--widget-unit, 1px) * 28); height:calc(var(--widget-unit, 1px) * 28); flex:none; border-radius:50%; }
 .widget-pill-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.widget-chevron { margin-left:1.9cqw; font-size:2.65cqw; }
-.widget-choices,.widget-options { position:absolute; z-index:5; top:calc(100% + 2cqw); left:0; width:55.9cqw; padding:1cqw 0; border-radius:3cqw; background:#f7f7f9; box-shadow:0 3cqw 9cqw #0003; overflow:hidden; }
-.widget-choices button,.widget-options button { display:block; width:100%; min-height:10.6cqw; padding:2.9cqw 3.855cqw; text-align:left; background:transparent; color:#20252b; font-size:3.37cqw; font-weight:400; border-bottom:.3px solid #0002; }
-.widget-overlay { position:absolute; z-index:10; inset:0; display:flex; align-items:center; justify-content:center; background:#0003; animation:widget-fade .2s ease-in-out; }
-.widget-modal { position:relative; width:calc(100% - 7.71cqw); height:min(134.94cqw,calc(100% - 11.57cqw)); max-width:560px; border-radius:5.783cqw; background:#fff; color:#20252b; overflow:hidden; display:flex; flex-direction:column; padding-bottom:2.89cqw; }
-.widget-modal-header { display:flex; gap:1.93cqw; align-items:center; padding:1.93cqw 1.93cqw 0; flex:none; }
-.widget-modal-header button { width:10.6cqw; height:10.6cqw; flex:none; padding:0; background:transparent; color:inherit; font-size:5.3cqw; font-weight:400; }
-.widget-modal-header h3 { flex:1; margin:0; text-align:center; font-size:3.37cqw; font-weight:500; line-height:1.4; }
-.widget-modal-body { flex:1; min-height:0; overflow:auto; text-align:center; font-size:3.37cqw; }
-.widget-modal-body>p,.widget-modal-body>h4 { padding:0 5.78cqw; }
-.widget-modal-body>h4,.widget-loading { margin-top:25%; }
-.widget-modal-body>button { background:#f3f3f5; color:inherit; padding:2.9cqw; border-radius:2cqw; }
-.widget-document { width:100%; height:100%; border:0; display:block; background:white; }
-.widget-options { top:12.5cqw; right:2cqw; left:auto; }
-.widget-options p { padding:3cqw; font-size:3.37cqw; }
-.widget-pin-note { position:absolute; top:14.45cqw; left:50%; transform:translateX(-50%); white-space:nowrap; border-radius:99px; background:#f5f5f5ed; padding:2.9cqw; font-size:2.89cqw; }
-.widget-entry { width:71.57cqw; max-width:100%; padding:2.89cqw; border:.3px solid #dadbdd; border-radius:3.855cqw; background:#fff; color:#20252b; font-size:3.3735cqw; }
-.widget-entry h4 { margin:0 0 2.89cqw; font:500 3.3735cqw/1.5 sans-serif; }
-.widget-entry p { margin:0; color:#717782; line-height:1.5; overflow-wrap:anywhere; }
-.widget-entry-details { display:flex; align-items:center; gap:2.89cqw; }
-.widget-entry-photo { width:15.42cqw; height:15.42cqw; border-radius:50%; object-fit:cover; flex:none; }
-.widget-entry-open { width:100%; min-height:10.6cqw; margin-top:2.89cqw; background:#f3f3f5; color:inherit; border-radius:1.93cqw; font-size:3.3735cqw; font-weight:500; }
+.widget-chevron { margin-left:calc(var(--widget-unit, 1px) * 8); font-size:calc(var(--widget-unit, 1px) * 18); }
+.widget-shortcut[data-phase="collapsed"] .widget-pill { width:calc(var(--widget-unit, 1px) * 52); padding:0 calc(var(--widget-unit, 1px) * 12); }
+.widget-shortcut[data-phase="collapsed"] :is(.widget-pill-title,.widget-chevron) { display:none; }
+.widget-choices,.widget-options { position:absolute; z-index:5; background:#fff; border:calc(var(--widget-unit, 1px) * .3) solid #0000001f; border-radius:calc(var(--widget-unit, 1px) * 16); box-shadow:0 calc(var(--widget-unit, 1px) * 4) calc(var(--widget-unit, 1px) * 16) #0000000d; overflow:auto; }
+.widget-choices { top:calc(100% + calc(var(--widget-unit, 1px) * 8)); left:0; width:calc(var(--widget-unit, 1px) * 240); max-height:calc(var(--widget-unit, 1px) * 320); padding:calc(var(--widget-unit, 1px) * 4) 0; }
+.widget-choices button { display:flex; align-items:center; justify-content:space-between; gap:calc(var(--widget-unit, 1px) * 8); width:100%; min-height:calc(var(--widget-unit, 1px) * 48); padding:calc(var(--widget-unit, 1px) * 12) calc(var(--widget-unit, 1px) * 16); text-align:left; background:transparent; color:#000; font-size:calc(var(--widget-unit, 1px) * 16); font-weight:400; }
+.widget-choices button>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.widget-arrow { color:#0009; }
+.widget-choices button:hover,.widget-options button:hover { background:#f1f3f4; }
+.widget-overlay { position:absolute; z-index:10; inset:0; display:flex; align-items:center; justify-content:center; background:#0003; opacity:1; animation:widget-fade .22s ease-in-out; transition:opacity .22s ease-in-out; }
+.widget-overlay[data-state="closing"] { opacity:0; pointer-events:none; }
+.widget-modal { position:relative; width:calc(100% - calc(var(--widget-unit, 1px) * 32)); height:65%; border-radius:calc(var(--widget-unit, 1px) * 24); background:#fff; color:#000; overflow:hidden; display:flex; flex-direction:column; padding-bottom:calc(var(--widget-unit, 1px) * 12); }
+.widget-modal-header { display:flex; gap:0; align-items:center; min-height:calc(var(--widget-unit, 1px) * 52); padding:calc(var(--widget-unit, 1px) * 4) calc(var(--widget-unit, 1px) * 4) 0; flex:none; }
+.widget-modal-header button,.widget-more-slot { width:calc(var(--widget-unit, 1px) * 44); height:calc(var(--widget-unit, 1px) * 44); flex:none; padding:0; background:transparent; color:#000; font-size:calc(var(--widget-unit, 1px) * 22); font-weight:400; }
+.widget-modal-header h3 { flex:1; min-width:0; margin:0; text-align:center; font-size:calc(var(--widget-unit, 1px) * 14); font-weight:500; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.widget-modal-body { flex:1; position:relative; min-height:0; overflow:hidden; font-size:calc(var(--widget-unit, 1px) * 14); }
+.widget-document { position:absolute; top:0; left:0; border:0; display:block; background:#fff; }
+.widget-loading,.widget-failure { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--widget-unit, 1px) * 12); padding:calc(var(--widget-unit, 1px) * 24); text-align:center; color:#0009; }
+.widget-loading p,.widget-failure p { margin:0; font-size:calc(var(--widget-unit, 1px) * 14); line-height:1.5; }
+.widget-failure h4 { margin:0; font-size:calc(var(--widget-unit, 1px) * 17); font-weight:600; color:#000; }
+.widget-spinner { width:calc(var(--widget-unit, 1px) * 20); height:calc(var(--widget-unit, 1px) * 20); border:calc(var(--widget-unit, 1px) * 2) solid #0002; border-top-color:#0009; border-radius:50%; animation:widget-spin .85s linear infinite; }
+.widget-failure-mark { display:grid; place-items:center; width:calc(var(--widget-unit, 1px) * 32); height:calc(var(--widget-unit, 1px) * 32); border:calc(var(--widget-unit, 1px) * 1.5) solid #0006; border-radius:50%; font-size:calc(var(--widget-unit, 1px) * 22); }
+.widget-failure button { margin-top:calc(var(--widget-unit, 1px) * 4); padding:calc(var(--widget-unit, 1px) * 10) calc(var(--widget-unit, 1px) * 16); border-radius:calc(var(--widget-unit, 1px) * 8); background:#f1f3f4; color:#000; font-size:calc(var(--widget-unit, 1px) * 14); }
+.widget-options { top:calc(var(--widget-unit, 1px) * 52); right:calc(var(--widget-unit, 1px) * 8); width:calc(var(--widget-unit, 1px) * 232); padding:calc(var(--widget-unit, 1px) * 8) 0; }
+/* Menu rhythm and monochrome icons match the native action menu. */
+.widget-options button { position:relative; display:flex; align-items:center; gap:calc(var(--widget-unit, 1px) * 6); width:100%; min-height:calc(var(--widget-unit, 1px) * 36); padding:calc(var(--widget-unit, 1px) * 6) calc(var(--widget-unit, 1px) * 16); text-align:left; background:transparent; color:#000; font-size:calc(var(--widget-unit, 1px) * 14); font-weight:400; }
+.widget-options button+button { margin-top:calc(var(--widget-unit, 1px) * 8); }
+.widget-options button+button::before { content:""; position:absolute; top:calc(var(--widget-unit, 1px) * -4); left:calc(var(--widget-unit, 1px) * 16); right:calc(var(--widget-unit, 1px) * 16); height:calc(var(--widget-unit, 1px) * .3); background:#00000026; }
+.widget-options svg { width:calc(var(--widget-unit, 1px) * 20); height:calc(var(--widget-unit, 1px) * 20); flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
+.widget-options .widget-destructive,.widget-confirm .widget-destructive { color:#d73340; }
+.widget-options button:disabled,.widget-confirm button:disabled { opacity:.45; cursor:wait; }
+.widget-confirm-backdrop { position:absolute; inset:0; z-index:7; display:grid; place-items:center; background:#0003; padding:calc(var(--widget-unit, 1px) * 20); }
+.widget-confirm { width:calc(var(--widget-unit, 1px) * 270); max-width:100%; padding:calc(var(--widget-unit, 1px) * 20) calc(var(--widget-unit, 1px) * 16) calc(var(--widget-unit, 1px) * 10); border-radius:calc(var(--widget-unit, 1px) * 16); background:#fff; text-align:center; }
+.widget-confirm h4 { margin:0 0 calc(var(--widget-unit, 1px) * 8); font-size:calc(var(--widget-unit, 1px) * 17); font-weight:600; }
+.widget-confirm p { margin:0; font-size:calc(var(--widget-unit, 1px) * 13); line-height:1.5; }
+.widget-confirm-actions { display:flex; margin-top:calc(var(--widget-unit, 1px) * 16); border-top:calc(var(--widget-unit, 1px) * .5) solid #0002; }
+.widget-confirm-actions button { flex:1; padding:calc(var(--widget-unit, 1px) * 12); font-size:calc(var(--widget-unit, 1px) * 16); background:transparent; color:#000; }
+.widget-native-share { position:absolute; z-index:6; inset:calc(var(--widget-unit, 1px) * 52) 0 0; padding:calc(var(--widget-unit, 1px) * 28) calc(var(--widget-unit, 1px) * 24); background:#fff; font-size:calc(var(--widget-unit, 1px) * 14); }
+.widget-native-share h4 { margin:0 0 calc(var(--widget-unit, 1px) * 12); font-size:calc(var(--widget-unit, 1px) * 17); }
+.widget-native-share p { line-height:1.6; color:#0009; margin:0 0 calc(var(--widget-unit, 1px) * 24); }
+.widget-native-share button { display:block; width:100%; margin-top:calc(var(--widget-unit, 1px) * 12); padding:calc(var(--widget-unit, 1px) * 12); border-radius:calc(var(--widget-unit, 1px) * 8); color:#000; background:#f1f3f4; font-size:calc(var(--widget-unit, 1px) * 14); }
+.widget-pin-note { position:absolute; z-index:8; top:calc(17.5% + calc(var(--widget-unit, 1px) * 58)); left:50%; transform:translateX(-50%); max-width:90%; border-radius:calc(var(--widget-unit, 1px) * 16); background:#f1f3f4f5; box-shadow:0 calc(var(--widget-unit, 1px) * 4) calc(var(--widget-unit, 1px) * 16) #0001; padding:calc(var(--widget-unit, 1px) * 12) calc(var(--widget-unit, 1px) * 16); font-size:calc(var(--widget-unit, 1px) * 12); text-align:center; }
+.widget-entry { width:calc(var(--widget-unit, 1px) * 297); max-width:100%; padding:calc(var(--widget-unit, 1px) * 12); border:calc(var(--widget-unit, 1px) * .3) solid #00000026; border-radius:calc(var(--widget-unit, 1px) * 16); background:#fff; color:#000; font-size:calc(var(--widget-unit, 1px) * 14); }
+.widget-entry h4 { margin:0 0 calc(var(--widget-unit, 1px) * 12); font:500 calc(var(--widget-unit, 1px) * 14)/1.4 -apple-system,BlinkMacSystemFont,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.widget-entry p { margin:0; color:#000; font-size:calc(var(--widget-unit, 1px) * 14); line-height:1.4; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
+.widget-entry p.widget-secondary { color:#0009; }
+.widget-entry-details { display:flex; align-items:center; gap:calc(var(--widget-unit, 1px) * 12); }
+.widget-entry-photo { width:calc(var(--widget-unit, 1px) * 64); height:calc(var(--widget-unit, 1px) * 64); border-radius:50%; object-fit:cover; flex:none; }
+.widget-entry-open { width:100%; height:calc(var(--widget-unit, 1px) * 40); min-height:0; padding:0; margin-top:calc(var(--widget-unit, 1px) * 12); background:#f1f3f4; color:#000; border-radius:calc(var(--widget-unit, 1px) * 8); font-size:calc(var(--widget-unit, 1px) * 14); font-weight:500; }
+.widget-entry-metadata { display:flex; min-width:0; margin-top:calc(var(--widget-unit, 1px) * 12); font-size:calc(var(--widget-unit, 1px) * 11); line-height:1.4; color:#0009; }
+.widget-creator { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.widget-permission { flex:none; }
 .widget-entry button:focus-visible,.widget-shortcut button:focus-visible,.widget-overlay button:focus-visible { outline:2px solid #007a9b; outline-offset:2px; }
 @keyframes widget-fade { from { opacity:0; } to { opacity:1; } }
-@media(prefers-reduced-motion:reduce) { .widget-overlay { animation-duration:.1s; } }
+@keyframes widget-spin { to { transform:rotate(360deg); } }
+@media(prefers-reduced-motion:reduce) { .widget-overlay { animation-duration:.1s; transition-duration:.1s; } .widget-pill { transition:none; } }