fix: 修复历史数据回显

Author: claude-code-best

packages/remote-control-server/TODO.md

@@ -1,4 +1,5 @@
 - [x] 权限面板的审批逻辑没有相应到
-- [ ] Loading 改为 anthropic 相关的动画, 借鉴 tui 的
+- [x] Loading 改为 anthropic 相关的动画, 借鉴 tui 的
 - [x] 多轮数据时, 非常多的空白和重复消息
 - [x] 历史数据没有拉取
+- [x] 数据重新拉取没有把审批弹窗等显示出来

packages/remote-control-server/src/__tests__/ws-handler.test.ts

@@ -374,6 +374,59 @@ describe("ws-handler", () => {
       expect(lastMsg.response.response.updatedInput).toEqual({ cmd: "ls -la" });
     });
 
+    test("permission_response with updated_permissions", () => {
+      const bus = getEventBus("up1");
+      const ws = createMockWs();
+      handleWebSocketOpen(ws, "up1");
+
+      const permissions = [{ type: "setMode", mode: "acceptEdits", destination: "session" }];
+      bus.publish({
+        id: "ep1",
+        sessionId: "up1",
+        type: "permission_response",
+        payload: {
+          approved: true,
+          request_id: "req-ep1",
+          updated_input: { plan: "my plan" },
+          updated_permissions: permissions,
+        },
+        direction: "outbound",
+      });
+
+      const sent = ws.getSentData();
+      const lastMsg = JSON.parse(sent[sent.length - 1]);
+      expect(lastMsg.type).toBe("control_response");
+      expect(lastMsg.response.subtype).toBe("success");
+      expect(lastMsg.response.response.behavior).toBe("allow");
+      expect(lastMsg.response.response.updatedInput).toEqual({ plan: "my plan" });
+      expect(lastMsg.response.response.updatedPermissions).toEqual(permissions);
+    });
+
+    test("permission_response denied with feedback message", () => {
+      const bus = getEventBus("dm1");
+      const ws = createMockWs();
+      handleWebSocketOpen(ws, "dm1");
+
+      bus.publish({
+        id: "dm1",
+        sessionId: "dm1",
+        type: "permission_response",
+        payload: {
+          approved: false,
+          request_id: "req-dm1",
+          message: "Please add more tests",
+        },
+        direction: "outbound",
+      });
+
+      const sent = ws.getSentData();
+      const lastMsg = JSON.parse(sent[sent.length - 1]);
+      expect(lastMsg.type).toBe("control_response");
+      expect(lastMsg.response.subtype).toBe("error");
+      expect(lastMsg.response.response.behavior).toBe("deny");
+      expect(lastMsg.response.message).toBe("Please add more tests");
+    });
+
     test("does not forward inbound events to WS", () => {
       const bus = getEventBus("no_in");
       const ws = createMockWs();

packages/remote-control-server/src/index.ts

@@ -41,8 +41,9 @@ const stripCodePrefix = (p: string) => p.replace(/^\/code/, "");
 
 // Serve all static files under /code/* from web/ directory
 app.use("/code/*", serveStatic({ root: webDir, rewriteRequestPath: stripCodePrefix }));
-// /code and /code/:sessionId — SPA fallback
+// /code, /code/, and /code/:sessionId — SPA fallback
 app.get("/code", serveStatic({ root: webDir, path: "index.html" }));
+app.get("/code/", serveStatic({ root: webDir, path: "index.html" }));
 app.get("/code/:sessionId", serveStatic({ root: webDir, path: "index.html" }));
 
 // v1 Environment routes

packages/remote-control-server/src/transport/ws-handler.ts

@@ -44,14 +44,26 @@ function toSDKMessage(event: SessionEvent): string {
       msg = { type: "control_response", response: existingResponse };
     } else {
       const updatedInput = payload?.updated_input as Record<string, unknown> | undefined;
+      const updatedPermissions = payload?.updated_permissions as Record<string, unknown>[] | undefined;
+      const feedbackMessage = payload?.message as string | undefined;
       msg = {
         type: "control_response",
         response: {
           subtype: approved ? "success" : "error",
           request_id: payload?.request_id ?? "",
           ...(approved
-            ? { response: { behavior: "allow" as const, ...(updatedInput ? { updatedInput } : {}) } }
-            : { error: "Permission denied by user", response: { behavior: "deny" as const } }),
+            ? {
+                response: {
+                  behavior: "allow" as const,
+                  ...(updatedInput ? { updatedInput } : {}),
+                  ...(updatedPermissions ? { updatedPermissions } : {}),
+                },
+              }
+            : {
+                error: "Permission denied by user",
+                response: { behavior: "deny" as const },
+                ...(feedbackMessage ? { message: feedbackMessage } : {}),
+              }),
         },
       };
     }

packages/remote-control-server/web/app.js

@@ -4,7 +4,7 @@
  */
 import { getUuid, setUuid, apiBind, apiFetchSessions, apiFetchAllSessions, apiFetchEnvironments, apiFetchSession, apiFetchSessionHistory, apiSendEvent, apiSendControl, apiInterrupt, apiCreateSession } from "./api.js";
 import { connectSSE, disconnectSSE } from "./sse.js";
-import { appendEvent, renderPermissionRequest, showLoading, isLoading } from "./render.js";
+import { appendEvent, renderPermissionRequest, showLoading, isLoading, resetReplayState, renderReplayPendingRequests } from "./render.js";
 import { esc, formatTime, statusClass } from "./utils.js";
 
 // ============================================================
@@ -70,7 +70,7 @@ async function handleRoute() {
     } catch (err) {
       console.error("Failed to bind session:", err);
       alert("Session not found or bind failed: " + err.message);
-      history.replaceState(null, "", "/code");
+      history.replaceState(null, "", "/code/");
     }
   }
 
@@ -170,14 +170,15 @@ async function renderSessionDetail(id) {
     badge.className = `status-badge status-${statusClass(session.status)}`;
   } catch (err) {
     alert("Failed to load session: " + err.message);
-    navigate("/code");
+    navigate("/code/");
     return;
   }
   document.getElementById("event-stream").innerHTML = "";
   document.getElementById("permission-area").innerHTML = "";
   document.getElementById("permission-area").classList.add("hidden");
 
   // Load historical events before connecting to live stream
+  resetReplayState();
   let lastSeqNum = 0;
   try {
     const { events } = await apiFetchSessionHistory(id);
@@ -190,6 +191,8 @@ async function renderSessionDetail(id) {
   } catch (err) {
     console.warn("Failed to load session history:", err);
   }
+  // Re-render any still-unresolved permission prompts from history
+  renderReplayPendingRequests();
 
   connectSSE(id, appendEvent, lastSeqNum);
 }
@@ -365,12 +368,83 @@ window._submitAnswers = async function (requestId, btn) {
 };
 
 function removePermissionPrompt(btn) {
-  const prompt = btn.closest(".permission-prompt, .ask-panel");
+  const prompt = btn.closest(".permission-prompt, .ask-panel, .plan-panel");
   if (prompt) prompt.remove();
   const area = document.getElementById("permission-area");
   if (area && area.children.length === 0) area.classList.add("hidden");
 }
 
+// ============================================================
+// ExitPlanMode interactions
+// ============================================================
+
+window._selectPlanOption = function (btn, value) {
+  const panel = btn.closest(".plan-panel");
+  if (!panel) return;
+
+  // Deselect all siblings
+  panel.querySelectorAll(".plan-option").forEach((o) => o.classList.remove("selected"));
+  btn.classList.add("selected");
+  panel._selectedValue = value;
+
+  // Show/hide feedback textarea
+  const feedbackArea = panel.querySelector(".plan-feedback-area");
+  if (feedbackArea) {
+    feedbackArea.classList.toggle("visible", value === "no");
+  }
+};
+
+window._submitPlanResponse = async function (requestId, btn) {
+  const panel = btn.closest(".plan-panel");
+  if (!panel) return;
+
+  const selectedValue = panel._selectedValue;
+  if (!selectedValue) {
+    alert("Please select an option first.");
+    return;
+  }
+
+  btn.disabled = true;
+
+  try {
+    if (selectedValue === "no") {
+      // Rejection with optional feedback
+      const feedbackInput = panel.querySelector(".plan-feedback-input");
+      const feedback = feedbackInput ? feedbackInput.value.trim() : "";
+      await apiSendControl(currentSessionId, {
+        type: "permission_response",
+        approved: false,
+        request_id: requestId,
+        ...(feedback ? { message: feedback } : {}),
+      });
+      removePermissionPrompt(btn);
+    } else {
+      // Approval with permission mode
+      const modeMap = {
+        "yes-accept-edits": "acceptEdits",
+        "yes-default": "default",
+      };
+      const mode = modeMap[selectedValue] || "default";
+      const planContent = panel._planContent || "";
+
+      await apiSendControl(currentSessionId, {
+        type: "permission_response",
+        approved: true,
+        request_id: requestId,
+        ...(planContent ? { updated_input: { plan: planContent } } : {}),
+        updated_permissions: [
+          { type: "setMode", mode, destination: "session" },
+        ],
+      });
+      removePermissionPrompt(btn);
+      showLoading();
+    }
+  } catch (err) {
+    alert("Failed to submit: " + err.message);
+    btn.disabled = false;
+  }
+};
+
 // ============================================================
 // New Session Dialog
 // ============================================================
@@ -486,7 +560,7 @@ function setupIdentityPanel() {
               if (importedUuid) {
                 setUuid(importedUuid);
                 panel.classList.add("hidden");
-                navigate("/code");
+                navigate("/code/");
                 renderDashboard();
                 return;
               }
@@ -495,7 +569,7 @@ function setupIdentityPanel() {
               if (code.data.length >= 32) {
                 setUuid(code.data);
                 panel.classList.add("hidden");
-                navigate("/code");
+                navigate("/code/");
                 renderDashboard();
                 return;
               }

packages/remote-control-server/web/index.html

@@ -7,20 +7,20 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Figtree:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" />
-  <link rel="stylesheet" href="/code/style.css" />
+  <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
   <!-- Nav Bar -->
   <nav id="navbar">
     <div class="nav-inner">
-      <a href="/code" class="nav-logo">
+      <a href="/code/" class="nav-logo">
         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
           <path d="M10 1L12.2 7.8L19 10L12.2 12.2L10 19L7.8 12.2L1 10L7.8 7.8L10 1Z" fill="#D97757"/>
         </svg>
         Remote Control
       </a>
       <div class="nav-links">
-        <a href="/code" class="nav-link" id="nav-dashboard">Dashboard</a>
+        <a href="/code/" class="nav-link" id="nav-dashboard">Dashboard</a>
         <button id="nav-identity" class="nav-link btn-text" title="Identity & QR">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="vertical-align:-2px;margin-right:4px;">
             <path d="M6 8C7.66 8 9 6.66 9 5C9 3.34 7.66 2 6 2C4.34 2 3 3.34 3 5C3 6.66 4.34 8 6 8ZM6 10C3.99 10 0 11.01 0 13V14H12V13C12 11.01 8.01 10 6 10ZM13 8V5H11V8H8V10H11V13H13V10H16V8H13Z" fill="currentColor"/>
@@ -75,7 +75,7 @@ <h3>New Session</h3>
     <div class="session-container">
       <!-- Header -->
       <div class="session-header">
-        <a href="/code" class="back-link">&larr; Dashboard</a>
+        <a href="/code/" class="back-link">&larr; Dashboard</a>
         <div class="session-meta">
           <h2 id="session-title" class="session-detail-title">Session</h2>
           <div class="session-meta-row">
@@ -140,6 +140,6 @@ <h3>Identity</h3>
   <!-- QR Libraries -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
-  <script type="module" src="/code/app.js"></script>
+  <script type="module" src="./app.js"></script>
 </body>
 </html>