@my-life-buddies/cli 0.1.2 → 0.2.0

package/dist/web/app.css

@@ -228,7 +228,7 @@
   .workspace {
     min-height: calc(100dvh - 4.5rem);
     display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
+    grid-template-columns: minmax(0, 1fr) minmax(26rem, 32rem);
     background: var(--color-paper);
   }
 }
@@ -365,16 +365,17 @@
     inset-block-start: 4.5rem;
     display: grid;
     grid-template-rows: auto minmax(0, 1fr) auto;
-    padding: var(--space-xl) var(--space-lg) var(--space-md);
+    padding: var(--space-md) var(--space-md) var(--space-xs);
     border-inline-start: var(--rule-hair) solid var(--color-rule);
     background: var(--color-paper-soft);
   }
 
-  .simulator-caption { min-height: var(--control-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
+  .simulator-actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
+  .simulator-caption { min-height: var(--control-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
   .simulator-caption h2 { margin: 0; color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; }
 
-  .device-stage { min-height: 0; display: grid; place-items: center; padding-block: var(--space-md) var(--space-xs); container-type: size; }
-  .phone { --phone-width: min(22rem, 90cqw, 45cqh); width: var(--phone-width); aspect-ratio: 415 / 843; container-type: inline-size; }
+  .device-stage { min-height: 0; display: grid; place-items: center; padding-block: var(--space-sm) 0; container-type: size; }
+  .phone { --phone-width: min(27rem, 96cqw, 48cqh); width: var(--phone-width); aspect-ratio: 415 / 843; container-type: inline-size; }
   .phone iphone-16-max { --width: var(--phone-width); display: block; width: 100%; filter: drop-shadow(var(--shadow-phone)); }
   .phone-screen { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 10.6024cqw minmax(0, 1fr) auto; padding: 11.0843cqw 0 0; overflow: clip; background: var(--color-phone-paper); color: var(--color-phone-ink); font-family: var(--font-body); }
 
@@ -389,7 +390,8 @@
   .buddy-identity { min-width: 0; }
   .chat-navigation h3 { margin: 0; overflow: hidden; font-size: 3.3735cqw; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
 
-  .chat-messages { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 2.8916cqw 3.8554cqw 4.8193cqw; background: var(--color-phone-paper); color: var(--color-phone-ink); scrollbar-width: none; }
+  .chat-messages { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 2.8916cqw 3.8554cqw 4.8193cqw; background: var(--color-phone-paper); color: var(--color-phone-ink); scrollbar-width: none; }
+  .latest-messages { position: absolute; z-index: 2; bottom: 19cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2cqw 3cqw; border-radius: 5cqw; background: var(--color-phone-paper); color: var(--color-phone-ink); border: 1px solid var(--color-rule); box-shadow: var(--shadow-whisper); font-size: 3cqw; }
   .chat-messages::-webkit-scrollbar { display: none; }
   .chat-empty { min-height: 100%; display: block; }
   .chat-date { align-self: center; margin: 0 0 2.8916cqw; color: var(--color-phone-muted); font-size: 2.6506cqw; }
@@ -457,10 +459,15 @@
 
   .debug-tabs button:active, .simulator-device:active, .button:active:not(:disabled), .icon-button:active { transform: translateY(1px); }
 
+  @media (max-width: 95rem) {
+    .overview-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
+    .environment-note { padding-inline-start: 0; border-inline-start: 0; }
+  }
+
   @media (max-width: 78rem) {
     .workspace { grid-template-columns: minmax(0, 1fr); }
-    .simulator-area { min-height: 45rem; max-height: none; position: static; border-block-start: var(--rule-hair) solid var(--color-rule); border-inline-start: 0; }
-    .phone { --phone-width: min(21rem, 84cqw, 42cqh); }
+    .simulator-area { min-height: 52rem; height: 90dvh; max-height: none; position: static; border-block-start: var(--rule-hair) solid var(--color-rule); border-inline-start: 0; }
+    .phone { --phone-width: min(27rem, 94cqw, 48cqh); }
   }
 
   @media (max-width: 58rem) {

package/dist/web/app.js

@@ -9,6 +9,8 @@
     devControl: $("#dev-control"),
     errorBanner: $("#error-banner"),
     errorMessage: $("#error-message"),
+    resetConversation: $("#reset-conversation"),
+    latestMessages: $("#latest-messages"),
     pairDevice: $("#pair-device"),
     pairingPanel: $("#pairing-panel"),
     pairingBody: $("#pairing-body"),
@@ -63,6 +65,10 @@
     reportedFailureRevision: -1,
     polling: undefined,
     pollingBusy: false,
+    resetting: false,
+    resetUnavailable: false,
+    sending: false,
+    simulatorRequest: 0,
     toastTimer: undefined,
   };
 
@@ -230,7 +236,10 @@
           ? "正在输入…"
           : "正在思考…"
         : "DEV 在线";
-    elements.messageInput.disabled = phase !== "ready" || Boolean(active);
+    elements.resetConversation.disabled = phase !== "ready" || Boolean(active) || state.resetting || state.sending || state.resetUnavailable;
+    elements.resetConversation.title = state.resetUnavailable ? "当前平台暂不支持重开会话" : active ? "请等待当前回复完成后再清空" : "结束当前开发版对话，开始一段全新会话";
+    elements.devControl.disabled ||= state.resetting;
+    elements.messageInput.disabled = phase !== "ready" || Boolean(active) || state.resetting || state.sending;
     elements.sendMessage.hidden = Boolean(active);
     updateSendButton();
     syncPolling();
@@ -424,7 +433,20 @@
     }
   }
 
+  let messageSignature = "";
+  let followMessages = true;
+
+  function followLatestMessages() {
+    followMessages = true;
+    elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
+    elements.latestMessages.hidden = true;
+  }
+
   function renderMessages() {
+    const signature = JSON.stringify([state.simulator.messages, Boolean(state.simulator.activeRun)]);
+    if (signature === messageSignature) return;
+    messageSignature = signature;
+    const previousTop = elements.chatMessages.scrollTop;
     clear(elements.chatMessages);
     const messages = state.simulator.messages || [];
     if (!messages.length && !state.simulator.activeRun) {
@@ -451,9 +473,11 @@
       row.append(messageAvatar("assistant"), indicator);
       elements.chatMessages.append(row);
     }
-    window.requestAnimationFrame(() => {
-      elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
-    });
+    if (followMessages) followLatestMessages();
+    else {
+      elements.chatMessages.scrollTop = previousTop;
+      elements.latestMessages.hidden = false;
+    }
   }
 
   function renderDebug() {
@@ -470,17 +494,21 @@
   }
 
   async function refreshDebug() {
+    const request = state.simulatorRequest;
     const value = await api("/api/debug");
+    if (state.resetting || request !== state.simulatorRequest) return;
     state.debug = value.debug;
     renderDebug();
   }
 
   async function refreshSimulator() {
     if (state.dev.phase !== "ready" || state.pollingBusy) return;
+    if (state.resetting) return;
+    const request = state.simulatorRequest;
     state.pollingBusy = true;
     try {
       const value = await api("/api/simulator/state");
-      state.simulator = value.state;
+      if (state.resetting || request !== state.simulatorRequest || !applySimulatorState(value.state)) return;
       renderDev();
       renderMessages();
       renderContext();
@@ -517,7 +545,7 @@
   }
 
   function updateSendButton() {
-    const ready = state.dev.phase === "ready" && !state.simulator.activeRun;
+    const ready = state.dev.phase === "ready" && !state.simulator.activeRun && !state.resetting && !state.sending;
     elements.sendMessage.disabled = !ready || !elements.messageInput.value.trim();
   }
 
@@ -526,7 +554,10 @@
   async function sendMessage(event) {
     event.preventDefault();
     const text = elements.messageInput.value;
-    if (!text.trim() || state.dev.phase !== "ready" || state.simulator.activeRun) return;
+    if (!text.trim() || state.dev.phase !== "ready" || state.simulator.activeRun || state.resetting || state.sending) return;
+    state.sending = true;
+    followLatestMessages();
+    renderDev();
     elements.messageInput.disabled = true;
     elements.sendMessage.disabled = true;
     // Keep the logical message identity after an unknown outcome; retries are user initiated.
@@ -550,6 +581,8 @@
       await refreshSimulator();
     } catch (cause) {
       showError(cause);
+    } finally {
+      state.sending = false;
       renderDev();
     }
   }
@@ -626,6 +659,43 @@
     }
   }
 
+  function applySimulatorState(next) {
+    if ((next.conversationRevision || 0) < (state.simulator.conversationRevision || 0)) return false;
+    state.simulator = next;
+    return true;
+  }
+
+  async function resetConversation() {
+    if (elements.resetConversation.disabled) return;
+    if (!window.confirm("清空当前对话并重新开始？\n这会结束当前开发版会话，重置聊天上下文、记忆和该会话的主动服务。旧记录仅在服务端留档；搭子资料和工程文件会保留。")) return;
+    state.resetting = true;
+    state.simulatorRequest++;
+    elements.resetConversation.textContent = "正在清空…";
+    renderDev();
+    try {
+      const value = await api("/api/simulator/reset", { method: "POST", body: JSON.stringify({ confirm: true }) });
+      applySimulatorState(value.state);
+      applyDevState(value.dev);
+      state.debug = value.debug;
+      state.selectedRunId = "";
+      state.followLatestRun = true;
+      pendingSend = undefined;
+      elements.messageInput.value = "";
+      followMessages = true;
+      renderAll();
+      toast("对话已清空，可以重新开始");
+    } catch (cause) {
+      if (cause?.code === "RESET_UNSUPPORTED") state.resetUnavailable = true;
+      showError(cause);
+    } finally {
+      state.resetting = false;
+      elements.resetConversation.textContent = "清空对话";
+      renderDev();
+      resizeComposer();
+      await refreshSimulator();
+    }
+  }
+
   function connectEvents() {
     const events = new EventSource("/api/events");
     events.addEventListener("dev.state", (event) => {
@@ -638,7 +708,7 @@
     events.addEventListener("simulator.state", (event) => {
       try {
         const value = JSON.parse(event.data);
-        state.simulator = value.state;
+        if (!applySimulatorState(value.state)) return;
         state.debug = value.debug;
         renderDev();
         renderDebug();
@@ -671,6 +741,13 @@
     }
   }
 
+  elements.resetConversation.addEventListener("click", () => void resetConversation());
+  elements.latestMessages.addEventListener("click", followLatestMessages);
+  elements.chatMessages.addEventListener("scroll", () => {
+    const chat = elements.chatMessages;
+    followMessages = chat.scrollHeight - chat.clientHeight - chat.scrollTop <= 32;
+    elements.latestMessages.hidden = followMessages;
+  }, { passive: true });
   elements.devControl.addEventListener("click", () => void controlDev());
   elements.composer.addEventListener("submit", (event) => void sendMessage(event));
   elements.messageInput.addEventListener("input", resizeComposer);

package/dist/web/index.html

@@ -178,10 +178,13 @@
       <section class="simulator-area" aria-label="搭搭 App 模拟器">
         <div class="simulator-caption">
           <h2>模拟私聊场景</h2>
+          <div class="simulator-actions">
+          <button class="simulator-device" id="reset-conversation" type="button" disabled>清空对话</button>
           <button class="simulator-device" id="pair-device" type="button" aria-expanded="false" aria-controls="pairing-panel">
             <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M8 2.75h8A2.25 2.25 0 0 1 18.25 5v14A2.25 2.25 0 0 1 16 21.25H8A2.25 2.25 0 0 1 5.75 19V5A2.25 2.25 0 0 1 8 2.75Z"/><path d="M10 18.25h4"/></svg>
             <span>真机预览</span>
           </button>
+          </div>
         </div>
 
         <div class="device-stage">
@@ -207,6 +210,7 @@
                   <div class="chat-empty" id="chat-empty" aria-label="暂无消息"></div>
                 </div>
 
+                <button id="latest-messages" class="latest-messages" type="button" hidden>回到最新消息 ↓</button>
                 <form class="composer" id="composer">
                   <button class="composer-tool composer-add" type="button" aria-label="添加内容（预览中不可用）" disabled tabindex="-1">
                     <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@my-life-buddies/cli",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "description": "搭搭 Developer Platform 命令行工具",
   "publishConfig": {
@@ -39,7 +39,7 @@
     "ws": "8.21.3"
   },
   "devDependencies": {
-    "@buddy/cli-core": "0.1.2",
-    "@buddy/preview": "0.1.2"
+    "@buddy/cli-core": "0.2.0",
+    "@buddy/preview": "0.2.0"
   }
 }