fix(remote-control): harden self-hosted session flows (#278)

Co-authored-by: chengzifeng <chengzifeng@meituan.com>
2026-06-18 06:15:51 +00:00 · 2026-04-16 10:46:31 +08:00
parent 5a4c820e1d
commit fe08cacf8d
24 changed files with 1252 additions and 162 deletions
--- a/packages/remote-control-server/web/app.js
+++ b/packages/remote-control-server/web/app.js
@@ -4,18 +4,26 @@
 */
 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, resetReplayState, renderReplayPendingRequests } from "./render.js";
+import { appendEvent, showLoading, isLoading, removeLoading, resetReplayState, renderReplayPendingRequests } from "./render.js";
 import { initTaskPanel, toggleTaskPanel, resetTaskState } from "./task-panel.js";
-import { esc, formatTime, statusClass } from "./utils.js";
+import { esc, formatTime, statusClass, isClosedSessionStatus } from "./utils.js";

 // ============================================================
 // State
 // ============================================================

 let currentSessionId = null;
+let currentSessionStatus = null;
 let dashboardInterval = null;
 let cachedEnvs = [];

+function generateMessageUuid() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `msg_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
+
 // ============================================================
 // Router
 // ============================================================
@@ -43,6 +51,69 @@ function navigate(path) {
 }
 window.navigate = navigate;

+function applySessionStatus(status) {
+  currentSessionStatus = status || null;
+
+  const badge = document.getElementById("session-status");
+  if (badge) {
+    badge.textContent = status || "";
+    badge.className = `status-badge status-${statusClass(status)}`;
+  }
+
+  const closed = isClosedSessionStatus(status);
+  const input = document.getElementById("msg-input");
+  if (input) {
+    input.disabled = closed;
+    input.placeholder = closed ? "Session is closed" : "Type a message...";
+  }
+
+  const actionBtn = document.getElementById("action-btn");
+  if (actionBtn) {
+    actionBtn.disabled = closed;
+    actionBtn.title = closed ? "Session is closed" : "";
+  }
+
+  if (closed) {
+    removeLoading();
+    window.__updateActionBtn?.(false);
+  }
+}
+
+function handleSessionEvent(event) {
+  if (event?.type === "session_status" && typeof event.payload?.status === "string") {
+    applySessionStatus(event.payload.status);
+    if (isClosedSessionStatus(event.payload.status)) {
+      disconnectSSE();
+    }
+  }
+  appendEvent(event);
+}
+
+async function syncClosedSessionState(err, actionLabel) {
+  if (!(err instanceof Error)) {
+    alert(`${actionLabel}: unknown error`);
+    return;
+  }
+
+  if (!currentSessionId || !/session is /i.test(err.message)) {
+    alert(`${actionLabel}: ${err.message}`);
+    return;
+  }
+
+  try {
+    const session = await apiFetchSession(currentSessionId);
+    applySessionStatus(session.status);
+    if (isClosedSessionStatus(session.status)) {
+      appendEvent({ type: "session_status", payload: { status: session.status } });
+      return;
+    }
+  } catch {
+    // Fall back to the original error if the refresh also fails.
+  }
+
+  alert(`${actionLabel}: ${err.message}`);
+}
+
 async function handleRoute() {
  // Ensure we have a UUID
  getUuid();
@@ -86,6 +157,8 @@ async function handleRoute() {
  }

  // Default: /code → dashboard
+  currentSessionId = null;
+  currentSessionStatus = null;
  showPage("dashboard");
  disconnectSSE();
  renderDashboard();
@@ -172,9 +245,7 @@ async function renderSessionDetail(id) {
    document.getElementById("session-id").textContent = session.id;
    document.getElementById("session-env").textContent = session.environment_id || "";
    document.getElementById("session-time").textContent = formatTime(session.created_at);
-    const badge = document.getElementById("session-status");
-    badge.textContent = session.status;
-    badge.className = `status-badge status-${statusClass(session.status)}`;
+    applySessionStatus(session.status);
  } catch (err) {
    alert("Failed to load session: " + err.message);
    navigate("/code/");
@@ -201,7 +272,13 @@ async function renderSessionDetail(id) {
  // Re-render any still-unresolved permission prompts from history
  renderReplayPendingRequests();

-  connectSSE(id, appendEvent, lastSeqNum);
+  if (isClosedSessionStatus(currentSessionStatus)) {
+    appendEvent({ type: "session_status", payload: { status: currentSessionStatus } });
+    disconnectSSE();
+    return;
+  }
+
+  connectSSE(id, handleSessionEvent, lastSeqNum);
 }

 // ============================================================
@@ -237,28 +314,35 @@ function setupControlBar() {
 }

 async function doInterrupt() {
-  if (!currentSessionId) return;
+  if (!currentSessionId || isClosedSessionStatus(currentSessionStatus)) return;
  const btn = document.getElementById("action-btn");
  btn.disabled = true;
  try {
    await apiInterrupt(currentSessionId);
    appendEvent({ type: "interrupt", payload: { message: "Session interrupted" } });
  } catch (err) {
-    alert("Interrupt failed: " + err.message);
+    await syncClosedSessionState(err, "Interrupt failed");
  } finally {
-    btn.disabled = false;
+    btn.disabled = isClosedSessionStatus(currentSessionStatus);
  }
 }

 async function sendMessage() {
  const input = document.getElementById("msg-input");
  const text = input.value.trim();
-  if (!text || !currentSessionId) return;
+  if (!text || !currentSessionId || isClosedSessionStatus(currentSessionStatus)) return;
  input.value = "";
+  const uuid = generateMessageUuid();
  try {
-    await apiSendEvent(currentSessionId, { type: "user", content: text });
+    await apiSendEvent(currentSessionId, {
+      type: "user",
+      uuid,
+      content: text,
+      message: { content: text },
+    });
  } catch (err) {
-    alert("Failed to send: " + err.message);
+    input.value = text;
+    await syncClosedSessionState(err, "Failed to send");
  }
 }

--- a/packages/remote-control-server/web/components.css
+++ b/packages/remote-control-server/web/components.css
@@ -150,6 +150,7 @@ nav {

 .status-active, .status-running { background: var(--green-bg); color: var(--green); }
 .status-idle { background: var(--yellow-bg); color: var(--yellow); }
+.status-inactive { background: #F0ECE7; color: var(--text-secondary); }
 .status-requires_action { background: var(--orange-bg); color: var(--orange); }
 .status-archived { background: #F0ECE7; color: var(--text-secondary); }
 .status-error { background: var(--red-bg); color: var(--red); }
--- a/packages/remote-control-server/web/index.html
+++ b/packages/remote-control-server/web/index.html
@@ -7,7 +7,7 @@
  <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="./style.css" />
+  <link rel="stylesheet" href="/code/style.css" />
 </head>
 <body>
  <!-- Nav Bar -->
@@ -146,6 +146,6 @@
  <!-- 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="./app.js"></script>
+  <script type="module" src="/code/app.js"></script>
 </body>
 </html>
--- a/packages/remote-control-server/web/render.js
+++ b/packages/remote-control-server/web/render.js
@@ -13,11 +13,13 @@ import { processAssistantEvent } from "./task-panel.js";

 const replayPendingRequests = new Map();   // request_id → event data (unresolved)
 const replayRespondedRequests = new Set(); // request_ids that have a response
+const renderedUserUuids = new Set();

 /** Clear replay tracking state (call before each history load) */
 export function resetReplayState() {
  replayPendingRequests.clear();
  replayRespondedRequests.clear();
+  renderedUserUuids.clear();
 }

 /** After replay finishes, render any still-unresolved permission prompts */
@@ -84,6 +86,59 @@ function formatAssistantContent(content) {
  return html;
 }

+function getUserUuid(payload) {
+  if (!payload || typeof payload !== "object") return null;
+  if (typeof payload.uuid === "string" && payload.uuid) return payload.uuid;
+  if (payload.raw && typeof payload.raw === "object" && typeof payload.raw.uuid === "string" && payload.raw.uuid) {
+    return payload.raw.uuid;
+  }
+  return null;
+}
+
+function shouldRenderUserEvent(payload, direction, replay) {
+  const uuid = getUserUuid(payload);
+  if (uuid) {
+    if (renderedUserUuids.has(uuid)) return false;
+    renderedUserUuids.add(uuid);
+    return true;
+  }
+
+  // Legacy fallback with no uuid: keep the previous no-duplicate behavior.
+  // Live inbound user events without a uuid are most likely echoes of a web-
+  // sent message; replay keeps the prior "outbound only" rule as well.
+  return direction === "outbound";
+}
+
+function getMessageContentBlocks(payload) {
+  if (!payload || typeof payload !== "object") return [];
+  const msg = payload.message;
+  if (!msg || typeof msg !== "object" || !Array.isArray(msg.content)) return [];
+  return msg.content.filter((block) => block && typeof block === "object");
+}
+
+function renderEmbeddedToolUseBlocks(payload) {
+  return getMessageContentBlocks(payload)
+    .filter((block) => block.type === "tool_use")
+    .map((block) =>
+      renderToolUse({
+        tool_name: block.name || "tool",
+        tool_input: block.input || {},
+      }),
+    );
+}
+
+function renderEmbeddedToolResultBlocks(payload) {
+  return getMessageContentBlocks(payload)
+    .filter((block) => block.type === "tool_result")
+    .map((block) =>
+      renderToolResult({
+        content: block.content || "",
+        output: block.content || "",
+        is_error: !!block.is_error,
+      }),
+    );
+}
+
 // ============================================================
 // Event Router
 // ============================================================
@@ -103,26 +158,42 @@ export function appendEvent(data, { replay = false } = {}) {
  // During history replay, only render messages & tools — skip interactive/stateful events
  // Exception: unresolved permission/control requests are re-shown as pending prompts.
  if (replay) {
-    let histEl;
+    const histEls = [];
    switch (type) {
      case "user":
-        if (direction === "outbound") histEl = renderUserMessage(payload, direction);
+        {
+          const toolResultEls = renderEmbeddedToolResultBlocks(payload);
+          if (toolResultEls.length > 0) {
+            histEls.push(...toolResultEls);
+            break;
+          }
+          if (shouldRenderUserEvent(payload, direction, true)) {
+            histEls.push(renderUserMessage(payload, direction));
+          }
+        }
        break;
      case "assistant":
        {
+          const toolUseEls = renderEmbeddedToolUseBlocks(payload);
          const text = extractText(payload);
-          if (text && text.trim()) histEl = renderAssistantMessage(payload);
+          if (text && text.trim()) histEls.push(renderAssistantMessage(payload));
+          if (toolUseEls.length > 0) histEls.push(...toolUseEls);
          processAssistantEvent(payload);
        }
        break;
      case "tool_use":
-        histEl = renderToolUse(payload);
+        histEls.push(renderToolUse(payload));
        break;
      case "tool_result":
-        histEl = renderToolResult(payload);
+        histEls.push(renderToolResult(payload));
        break;
      case "error":
-        histEl = renderSystemMessage(`Error: ${payload.message || payload.content || "Unknown error"}`);
+        histEls.push(renderSystemMessage(`Error: ${payload.message || payload.content || "Unknown error"}`));
+        break;
+      case "session_status":
+        if (payload.status === "archived" || payload.status === "inactive") {
+          histEls.push(renderSystemMessage(`Session ${payload.status}`));
+        }
        break;
      case "control_request":
      case "permission_request":
@@ -149,32 +220,42 @@ export function appendEvent(data, { replay = false } = {}) {
      default:
        return;
    }
-    if (histEl) {
+    for (const histEl of histEls) {
      stream.appendChild(histEl);
      stream.scrollTop = stream.scrollHeight;
    }
    return;
  }

-  let el;
+  const els = [];
  let needLoading = false;

  switch (type) {
    case "user":
-      // Skip inbound user messages — they're echoes of what we already sent
-      if (direction === "inbound") return;
-      el = renderUserMessage(payload, direction);
-      needLoading = true;
+      {
+        const toolResultEls = renderEmbeddedToolResultBlocks(payload);
+        if (toolResultEls.length > 0) {
+          els.push(...toolResultEls);
+          break;
+        }
+        if (!shouldRenderUserEvent(payload, direction, false)) return;
+        els.push(renderUserMessage(payload, direction));
+        needLoading = true;
+      }
      break;
    case "partial_assistant":
      // Skip partial assistant — wait for the final "assistant" event
      // to avoid blank/duplicate messages during streaming
      return;
    case "assistant":
-      removeLoading();
      {
+        const toolUseEls = renderEmbeddedToolUseBlocks(payload);
        const text = extractText(payload);
-        if (text && text.trim()) el = renderAssistantMessage(payload);
+        if (text && text.trim()) {
+          removeLoading();
+          els.push(renderAssistantMessage(payload));
+        }
+        if (toolUseEls.length > 0) els.push(...toolUseEls);
        processAssistantEvent(payload);
      }
      break;
@@ -184,10 +265,10 @@ export function appendEvent(data, { replay = false } = {}) {
      // Skip result — it just repeats the assistant message content
      return;
    case "tool_use":
-      el = renderToolUse(payload);
+      els.push(renderToolUse(payload));
      break;
    case "tool_result":
-      el = renderToolResult(payload);
+      els.push(renderToolResult(payload));
      break;
    case "control_request":
    case "permission_request":
@@ -195,27 +276,27 @@ export function appendEvent(data, { replay = false } = {}) {
        const toolName = payload.request.tool_name || "unknown";
        const toolInput = payload.request.input || payload.request.tool_input || {};
        if (toolName === "AskUserQuestion") {
-          el = renderAskUserQuestion({
+          els.push(renderAskUserQuestion({
            request_id: payload.request_id || data.id,
            tool_input: toolInput,
            description: payload.request.description || "",
-          });
+          }));
        } else if (toolName === "ExitPlanMode") {
-          el = renderExitPlanMode({
+          els.push(renderExitPlanMode({
            request_id: payload.request_id || data.id,
            tool_input: toolInput,
            description: payload.request.description || "",
-          });
+          }));
        } else {
-          el = renderPermissionRequest({
+          els.push(renderPermissionRequest({
            request_id: payload.request_id || data.id,
            tool_name: toolName,
            tool_input: toolInput,
            description: payload.request.description || "",
-          });
+          }));
        }
      } else {
-        el = renderSystemMessage(`Control: ${payload.request?.subtype || "unknown"}`);
+        els.push(renderSystemMessage(`Control: ${payload.request?.subtype || "unknown"}`));
      }
      break;
    case "control_response":
@@ -229,16 +310,22 @@ export function appendEvent(data, { replay = false } = {}) {
        const fullText = typeof payload === "string" ? payload : JSON.stringify(payload);
        if (/connecting|waiting|initializing|Remote Control/i.test(msg + " " + fullText)) return;
        if (!msg.trim()) return;
-        el = renderSystemMessage(msg);
+        els.push(renderSystemMessage(msg));
      }
      break;
    case "error":
      removeLoading();
-      el = renderSystemMessage(`Error: ${payload.message || payload.content || "Unknown error"}`);
+      els.push(renderSystemMessage(`Error: ${payload.message || payload.content || "Unknown error"}`));
+      break;
+    case "session_status":
+      if (payload.status === "archived" || payload.status === "inactive") {
+        removeLoading();
+        els.push(renderSystemMessage(`Session ${payload.status}`));
+      }
      break;
    case "interrupt":
      removeLoading();
-      el = renderSystemMessage("Session interrupted");
+      els.push(renderSystemMessage("Session interrupted"));
      break;
    case "system":
      // Skip raw system/init messages — they're noise
@@ -247,11 +334,11 @@ export function appendEvent(data, { replay = false } = {}) {
      // Skip noise from bridge init
      const raw = JSON.stringify(payload);
      if (/Remote Control connecting/i.test(raw)) return;
-      el = renderSystemMessage(`${type}: ${truncate(raw, 200)}`);
+      els.push(renderSystemMessage(`${type}: ${truncate(raw, 200)}`));
    }
  }

-  if (el) {
+  for (const el of els) {
    stream.appendChild(el);
    stream.scrollTop = stream.scrollHeight;
  }
--- a/packages/remote-control-server/web/utils.js
+++ b/packages/remote-control-server/web/utils.js
@@ -19,9 +19,14 @@ export function statusClass(status) {
    active: "active",
    running: "running",
    idle: "idle",
+    inactive: "inactive",
    requires_action: "requires_action",
    archived: "archived",
    error: "error",
  };
  return map[status] || "default";
 }
+
+export function isClosedSessionStatus(status) {
+  return status === "archived" || status === "inactive";
+}