dsh-monkeyai-sessions 0.1.7 → 0.1.9

package/lib/client-runtime.cjs

@@ -538,12 +538,19 @@ var t = {
   radiusLg: 10
 };
 var style = {
-  page: { display: "grid", gap: 12, maxWidth: 1080, margin: "0 auto", padding: "16px 18px 24px", color: t.text, height: "100%", minHeight: 0, overflowY: "auto", boxSizing: "border-box", alignContent: "start", fontSize: 13, lineHeight: 1.5 },
+  page: { display: "grid", gap: 14, maxWidth: 1320, margin: "0 auto", padding: "18px 20px 24px", color: t.text, background: "#f7f8fb", height: "100%", minHeight: 0, overflowY: "auto", boxSizing: "border-box", alignContent: "start", fontSize: 13, lineHeight: 1.5 },
   header: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, paddingBottom: 2 },
-  title: { margin: 0, fontSize: 15, fontWeight: 650, letterSpacing: "-0.01em", color: t.text },
+  title: { margin: 0, fontSize: 18, fontWeight: 700, letterSpacing: "-0.025em", color: "#182230" },
+  eyebrow: { margin: 0, fontSize: 10.5, fontWeight: 700, letterSpacing: "0.1em", color: t.text3, textTransform: "uppercase" },
   subtitle: { margin: 0, fontSize: 12, color: t.text3 },
   sectionTitle: { margin: 0, fontSize: 12, fontWeight: 650, color: t.text2, textTransform: "uppercase", letterSpacing: "0.04em" },
-  card: { display: "grid", gap: 10, padding: 14, border: `1px solid ${t.border}`, borderRadius: t.radiusLg, background: t.surface },
+  card: { display: "grid", gap: 10, padding: 14, border: `1px solid ${t.border}`, borderRadius: 12, background: t.surface, boxShadow: "0 2px 8px rgba(16,24,40,0.035)" },
+  toolbarCard: { display: "grid", gap: 10, padding: "13px 15px", border: `1px solid ${t.border}`, borderRadius: 12, background: t.surface, boxShadow: "0 2px 8px rgba(16,24,40,0.035)" },
+  workspace: { display: "grid", gridTemplateColumns: "minmax(248px, 292px) minmax(0, 1fr)", gap: 12, minWidth: 0, alignItems: "stretch" },
+  sessionSidebar: { display: "grid", gridTemplateRows: "auto minmax(0, 1fr) auto", gap: 10, minWidth: 0, padding: 12, border: `1px solid ${t.border}`, borderRadius: 12, background: t.surface, boxShadow: "0 2px 8px rgba(16,24,40,0.035)" },
+  sessionList: { display: "grid", gridTemplateColumns: "1fr", alignContent: "start", gap: 6, minHeight: 0, overflowY: "auto", padding: "1px 3px 2px 1px" },
+  thread: { display: "grid", gridTemplateRows: "auto minmax(0, 1fr) auto", gap: 10, minWidth: 0, height: "min(70vh, 720px)", minHeight: 440, overflow: "hidden", padding: 12 },
+  emptyThread: { display: "grid", placeContent: "center", justifyItems: "center", gap: 9, minWidth: 0, minHeight: "min(70vh, 720px)", padding: 28, border: `1px dashed ${t.border2}`, borderRadius: 12, background: "linear-gradient(145deg, #ffffff 0%, #f8faff 100%)", textAlign: "center" },
   row: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" },
   label: { display: "grid", gap: 4, flex: 1, minWidth: 180, fontSize: 12, fontWeight: 600, color: t.text2 },
   input: { width: "100%", boxSizing: "border-box", padding: "7px 10px", borderRadius: t.radius, border: `1px solid ${t.border2}`, background: t.surface, color: t.text, outline: "none", fontSize: 13, transition: "border-color .15s, box-shadow .15s" },
@@ -562,13 +569,13 @@ var style = {
   sessionTitle: { fontSize: 13, fontWeight: 650, lineHeight: 1.35, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
   sessionMeta: { fontSize: 11.5, color: t.text3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
   chip: { display: "inline-flex", alignItems: "center", gap: 5, padding: "2px 8px", borderRadius: 999, border: `1px solid ${t.border}`, background: t.surfaceAlt, fontSize: 11.5 },
-  events: { display: "flex", flexDirection: "column", gap: 8, height: "56vh", minHeight: 200, overflowY: "auto", padding: "4px 6px 4px 2px" },
+  events: { display: "flex", flexDirection: "column", gap: 10, height: "auto", minHeight: 0, overflowY: "auto", padding: "6px 8px 8px 4px", overscrollBehavior: "contain" },
   event: { padding: "8px 11px", borderRadius: t.radius, background: t.surfaceAlt, border: `1px solid ${t.border}`, overflowWrap: "anywhere", color: t.text },
   bubbleWrap: { display: "flex", gap: 8, alignItems: "flex-start", width: "100%" },
   bubbleWrapUser: { display: "flex", gap: 8, alignItems: "flex-start", justifyContent: "flex-end", width: "100%" },
   avatar: { width: 24, height: 24, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 700, color: "#ffffff", flexShrink: 0, marginTop: 2 },
-  bubble: { maxWidth: "88%", minWidth: 0, flex: "0 1 auto", width: "fit-content", borderRadius: t.radiusLg, padding: "8px 13px", background: t.surfaceAlt, border: `1px solid ${t.border}`, lineHeight: 1.55, fontSize: 13 },
-  bubbleUser: { maxWidth: "88%", minWidth: 0, flex: "0 1 auto", width: "fit-content", borderRadius: t.radiusLg, padding: "8px 13px", background: t.accent, color: "#ffffff", lineHeight: 1.55, fontSize: 13 },
+  bubble: { maxWidth: "88%", minWidth: 0, flex: "0 1 auto", width: "fit-content", borderRadius: 12, padding: "9px 13px", background: t.surface, border: `1px solid ${t.border}`, boxShadow: "0 1px 2px rgba(16,24,40,0.04)", lineHeight: 1.6, fontSize: 13 },
+  bubbleUser: { maxWidth: "88%", minWidth: 0, flex: "0 1 auto", width: "fit-content", borderRadius: 12, padding: "9px 13px", background: "#315fe8", color: "#ffffff", boxShadow: "0 2px 5px rgba(49,95,232,0.18)", lineHeight: 1.6, fontSize: 13 },
   thought: { maxWidth: "88%", borderRadius: t.radiusLg, padding: "7px 11px", background: "#faf7fd", border: `1px solid #e8ddf5`, lineHeight: 1.5, fontSize: 12.5, color: "#5b4a72" },
   thoughtSummary: { cursor: "pointer", color: "#6b4fa0", fontWeight: 650, fontSize: 10.5, letterSpacing: "0.05em", textTransform: "uppercase", userSelect: "none" },
   approval: { padding: "11px 13px", borderRadius: t.radiusLg, border: `1px solid #f0d98c`, background: "#fffbeb", display: "grid", gap: 8 },
@@ -591,6 +598,36 @@ var PANEL_CSS = `
 .mai-panel [data-events]::-webkit-scrollbar-thumb:hover { background: #b8c2cf; }
 .mai-panel .mai-card-hover { transition: border-color .15s, background .15s; }
 .mai-panel .mai-card-hover:not(:disabled):hover { border-color: #b9cdf3 !important; background: #f7faff !important; }
+.mai-panel .mai-toolbar { position: relative; overflow: hidden; }
+.mai-panel .mai-toolbar::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #3568e8 0%, #8baaf4 46%, #e7edfc 100%); }
+.mai-panel .mai-workspace { display: grid; grid-template-columns: minmax(248px, 292px) minmax(0, 1fr); gap: 12px; min-width: 0; align-items: stretch; }
+.mai-panel .mai-session-sidebar { min-height: min(70vh, 720px); }
+.mai-panel .mai-session-list { scrollbar-gutter: stable; }
+.mai-panel .mai-session-card { position: relative; }
+.mai-panel .mai-session-card[aria-current='true']::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: #3568e8; }
+.mai-panel .mai-thread { height: min(70vh, 720px); min-height: 440px; }
+.mai-panel .mai-thread-events { height: auto !important; min-height: 0 !important; }
+.mai-panel .mai-empty-thread { min-height: min(70vh, 720px); }
+.mai-panel .mai-empty-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: #edf2ff; color: #315fe8; box-shadow: inset 0 0 0 1px #dce6ff; }
+.mai-panel .mai-session-meta { overflow-wrap: anywhere; }
+@media (max-width: 900px) {
+  .mai-panel .mai-workspace { grid-template-columns: minmax(0, 1fr); }
+  .mai-panel .mai-session-sidebar { min-height: 0; grid-template-rows: auto minmax(0, auto) auto; }
+  .mai-panel .mai-session-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); max-height: 235px; }
+  .mai-panel .mai-thread { height: 68vh; min-height: 390px; }
+  .mai-panel .mai-empty-thread { min-height: 330px; }
+}
+@media (max-width: 560px) {
+  .mai-panel .mai-page-title { font-size: 16px !important; }
+  .mai-panel .mai-toolbar-controls { align-items: stretch; }
+  .mai-panel .mai-toolbar-controls select { flex-basis: 100% !important; }
+  .mai-panel .mai-session-list { grid-template-columns: 1fr !important; max-height: 210px; }
+  .mai-panel .mai-thread { height: 68vh; min-height: 360px; padding: 10px; }
+  .mai-panel .mai-thread-header { gap: 6px !important; }
+  .mai-panel .mai-thread-header strong { min-width: 100px; }
+  .mai-panel .mai-thread-header select { flex-basis: 100% !important; }
+  .mai-panel .mai-events { gap: 7px; }
+}
 @keyframes mai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
 .mai-panel .mai-pulse { animation: mai-pulse 1.2s ease-in-out infinite; }
 .mai-panel .mai-md > div:first-child > :first-child { margin-top: 0; }
@@ -601,6 +638,24 @@ var PANEL_CSS = `
 function errorText(error) {
   return typeof error?.message === "string" ? error.message : typeof error === "string" ? error : "\u8FDC\u7A0B\u64CD\u4F5C\u5931\u8D25";
 }
+function withTimeout(promise, timeoutMs, label) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(`${label}\u8D85\u65F6\uFF0C\u8BF7\u91CD\u8BD5`)), timeoutMs);
+    Promise.resolve(promise).then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        reject(error);
+      }
+    );
+  });
+}
+function isRemoteStreamCarrierError(error) {
+  return /api gateway: remote stream websocket (?:failed|closed)/i.test(errorText(error));
+}
 function renderMarkdown(text) {
   if (typeof text !== "string" || text === "") return null;
   const blocks = [];
@@ -824,6 +879,7 @@ function RemoteSessionPage({ api }) {
   const authWindowRef = useRef(null);
   const eventsRef = useRef(null);
   const prevScrollHeightRef = useRef(null);
+  const streamGenerationRef = useRef(0);
   const title = useMemo(() => {
     const runtime = runtimeSessions.find((item) => item.id === sessionId);
     const summary = summarySessions.find((item) => item.id === sessionId);
@@ -844,6 +900,7 @@ function RemoteSessionPage({ api }) {
     });
     return () => {
       active = false;
+      streamGenerationRef.current += 1;
       streamRef.current?.dispose();
       streamRef.current = null;
     };
@@ -1006,6 +1063,7 @@ function RemoteSessionPage({ api }) {
     setError("");
     setLoading(true);
     try {
+      streamGenerationRef.current += 1;
       const result = await unwrap(api.listDevices({ accountId, page: 1 }));
       setDevices(result.items);
       const first = result.items.length > 0 ? result.items[0].machineId : "";
@@ -1029,24 +1087,32 @@ function RemoteSessionPage({ api }) {
     setError("");
     setLoading(true);
     setSessionId("");
+    streamGenerationRef.current += 1;
     streamRef.current?.dispose();
     streamRef.current = null;
     setFrames([]);
     setPendingRequests([]);
-    const results = await Promise.allSettled([
-      unwrap(api.listSessions({ accountId, machineId: mid, page: 1, pageSize: 50 })),
-      unwrap(api.listRuntimeSessions({ accountId, machineId: mid }))
-    ]);
-    const errors = [];
-    if (results[0].status === "fulfilled") setSummarySessions(results[0].value.items);
-    else errors.push(`\u4F1A\u8BDD\u6458\u8981\u7D22\u5F15\uFF1A${errorText(results[0].reason)}`);
-    if (results[1].status === "fulfilled") setRuntimeSessions(results[1].value.sessions);
-    else errors.push(`ACP \u4F1A\u8BDD\u5217\u8868\uFF1A${errorText(results[1].reason)}`);
-    setStatus(errors.length === 0 ? "\u4F1A\u8BDD\u5DF2\u5237\u65B0" : "\u90E8\u5206\u4F1A\u8BDD\u6765\u6E90\u4E0D\u53EF\u7528");
-    setError(errors.join("\n"));
-    setLoading(false);
+    try {
+      const results = await Promise.allSettled([
+        withTimeout(Promise.resolve().then(() => unwrap(api.listSessions({ accountId, machineId: mid, page: 1, pageSize: 50 }))), 5e4, "\u4F1A\u8BDD\u6458\u8981\u8BFB\u53D6"),
+        withTimeout(Promise.resolve().then(() => unwrap(api.listRuntimeSessions({ accountId, machineId: mid }))), 5e4, "ACP \u4F1A\u8BDD\u5217\u8868\u8BFB\u53D6")
+      ]);
+      const errors = [];
+      if (results[0].status === "fulfilled") setSummarySessions(results[0].value.items);
+      else errors.push(`\u4F1A\u8BDD\u6458\u8981\u7D22\u5F15\uFF1A${errorText(results[0].reason)}`);
+      if (results[1].status === "fulfilled") setRuntimeSessions(results[1].value.sessions);
+      else errors.push(`ACP \u4F1A\u8BDD\u5217\u8868\uFF1A${errorText(results[1].reason)}`);
+      setStatus(errors.length === 0 ? "\u4F1A\u8BDD\u5DF2\u5237\u65B0" : "\u90E8\u5206\u4F1A\u8BDD\u6765\u6E90\u4E0D\u53EF\u7528");
+      setError(errors.join("\n"));
+    } catch (reason) {
+      setStatus("\u4F1A\u8BDD\u5237\u65B0\u5931\u8D25");
+      setError(errorText(reason));
+    } finally {
+      setLoading(false);
+    }
   }
   async function openSession(session) {
+    const generation = ++streamGenerationRef.current;
     streamRef.current?.dispose();
     streamRef.current = null;
     historyLoadedRef.current = false;
@@ -1063,90 +1129,116 @@ function RemoteSessionPage({ api }) {
     setVisibleCount(RECENT_LIMIT);
     setHistoryLoading(true);
     setStatus("\u6B63\u5728\u8FDE\u63A5\u8FDC\u7A0B\u4F1A\u8BDD");
-    let stream;
-    try {
-      stream = api.followSession({ accountId, machineId, sessionId: session.id, cwd: session.cwd });
-      streamRef.current = stream;
-      setStatus("\u8FDC\u7A0B\u4F1A\u8BDD\u5DF2\u8FDE\u63A5");
-      for await (const frame of stream) {
-        setFrames((current) => [...current, frame]);
-        if (frame.type === "ready" && !historyLoadedRef.current) setStatus("\u6B63\u5728\u56DE\u653E\u4F1A\u8BDD\u5386\u53F2");
-        if (frame.type === "reconnecting") setStatus(frame.message || "\u6B63\u5728\u91CD\u8FDE\u8FDC\u7A0B runtime");
-        if (frame.type === "history_loaded") {
-          historyLoadedRef.current = true;
-          setStatus("\u5386\u53F2\u5DF2\u52A0\u8F7D");
-          setHistoryLoading(false);
-          setSessionStatus((current) => current || "idle");
-          if (frame.model) setCurrentModel(frame.model);
-        }
-        if (frame.type === "history_incomplete") {
-          setStatus("\u5386\u53F2\u4E0D\u5B8C\u6574\uFF1A" + (frame.message || "\u56DE\u653E\u88AB\u4E2D\u65AD"));
-          setHistoryLoading(false);
-        }
-        if (frame.type === "model_switched") {
-          if (frame.data?.model) setCurrentModel(frame.data.model);
-          setSwitchingModel(false);
-          setStatus("\u6A21\u578B\u5DF2\u5207\u6362");
-        }
-        if (frame.type === "model_switch_failed") {
-          setSwitchingModel(false);
-          setError(frame.message || "\u6A21\u578B\u5207\u6362\u88AB\u62D2\u7EDD");
-          setStatus("\u6A21\u578B\u5207\u6362\u5931\u8D25");
-        }
-        if (frame.type === "session_missing") {
-          setError(frame.message || "\u8BE5\u4F1A\u8BDD\u5728\u6240\u9009\u8BBE\u5907\u4E0A\u5DF2\u4E0D\u5B58\u5728\u3002");
-          setStatus("\u8BBE\u5907\u4E0A\u627E\u4E0D\u5230\u8BE5\u4F1A\u8BDD");
-          setHistoryLoading(false);
-        }
-        if (frame.type === "request") {
-          setPendingRequests((current) => [...current.filter((item) => item.requestId !== frame.requestId), frame]);
+    let retries = 0;
+    while (streamGenerationRef.current === generation) {
+      let stream;
+      try {
+        stream = api.followSession({ accountId, machineId, sessionId: session.id, cwd: session.cwd });
+        if (streamGenerationRef.current !== generation) {
+          stream.dispose();
+          return;
         }
-        if (frame.type === "notification" && frame.method === "_monkeyai/session/state") {
-          const status2 = frame.data?.state?.status;
-          if (typeof status2 === "string" && SESSION_STATUS_LABEL[status2]) {
-            setSessionStatus(status2);
-            setTurnActive(status2 === "running");
-            if (status2 !== "running") setStopping(false);
+        streamRef.current = stream;
+        setStatus(retries > 0 ? "\u8FDC\u7A0B\u4F1A\u8BDD\u5DF2\u91CD\u65B0\u8FDE\u63A5" : "\u8FDC\u7A0B\u4F1A\u8BDD\u5DF2\u8FDE\u63A5");
+        for await (const frame of stream) {
+          setFrames((current) => [...current, frame]);
+          if (frame.type === "ready" && !historyLoadedRef.current) setStatus("\u6B63\u5728\u56DE\u653E\u4F1A\u8BDD\u5386\u53F2");
+          if (frame.type === "reconnecting") setStatus(frame.message || "\u6B63\u5728\u91CD\u8FDE\u8FDC\u7A0B runtime");
+          if (frame.type === "history_loaded") {
+            historyLoadedRef.current = true;
+            setStatus("\u5386\u53F2\u5DF2\u52A0\u8F7D");
+            setHistoryLoading(false);
+            setSessionStatus((current) => current || "idle");
+            if (frame.model) setCurrentModel(frame.model);
           }
-        }
-        if (frame.type === "delivery") {
-          const accepted = Boolean(frame.data?.accepted);
-          setLastDelivery({ accepted, code: frame.data?.code, frame: frame.type });
-          setTurnActive(false);
-          setStopping(false);
-          if (accepted) {
-            const cancelled = frame.data?.result?.stopReason === "cancelled";
-            setStatus(cancelled ? "\u56DE\u5408\u5DF2\u505C\u6B62" : "\u56DE\u5408\u5DF2\u5B8C\u6210");
-          } else {
-            setPrompt((current) => current === "" ? lastDraftRef.current || "" : current);
-            setStatus("MonkeyAI \u672A\u63A5\u53D7\u8BE5\u6307\u4EE4\uFF0C\u8349\u7A3F\u5DF2\u4FDD\u7559");
-            if (frame.message) setError(frame.message);
+          if (frame.type === "history_incomplete") {
+            setStatus("\u5386\u53F2\u4E0D\u5B8C\u6574\uFF1A" + (frame.message || "\u56DE\u653E\u88AB\u4E2D\u65AD"));
+            setHistoryLoading(false);
+          }
+          if (frame.type === "model_switched") {
+            if (frame.data?.model) setCurrentModel(frame.data.model);
+            setSwitchingModel(false);
+            setStatus("\u6A21\u578B\u5DF2\u5207\u6362");
+          }
+          if (frame.type === "model_switch_failed") {
+            setSwitchingModel(false);
+            setError(frame.message || "\u6A21\u578B\u5207\u6362\u5931\u8D25");
+            setStatus("\u6A21\u578B\u5207\u6362\u5931\u8D25");
+          }
+          if (frame.type === "session_missing") {
+            setError(frame.message || "\u8BE5\u4F1A\u8BDD\u5728\u6240\u9009\u8BBE\u5907\u4E0A\u5DF2\u4E0D\u5B58\u5728\u3002");
+            setStatus("\u8BBE\u5907\u4E0A\u627E\u4E0D\u5230\u8BE5\u4F1A\u8BDD");
+            setHistoryLoading(false);
+          }
+          if (frame.type === "request") {
+            setPendingRequests((current) => [...current.filter((item) => item.requestId !== frame.requestId), frame]);
+          }
+          if (frame.type === "notification" && frame.method === "_monkeyai/session/state") {
+            const status2 = frame.data?.state?.status;
+            if (typeof status2 === "string" && SESSION_STATUS_LABEL[status2]) {
+              setSessionStatus(status2);
+              setTurnActive(status2 === "running");
+              if (status2 !== "running") setStopping(false);
+            }
+          }
+          if (frame.type === "delivery") {
+            const accepted = Boolean(frame.data?.accepted);
+            setLastDelivery({ accepted, code: frame.data?.code, frame: frame.type });
+            setTurnActive(false);
+            setStopping(false);
+            if (accepted) {
+              const cancelled = frame.data?.result?.stopReason === "cancelled";
+              setStatus(cancelled ? "\u56DE\u5408\u5DF2\u505C\u6B62" : "\u56DE\u5408\u5DF2\u5B8C\u6210");
+            } else {
+              setPrompt((current) => current === "" ? lastDraftRef.current || "" : current);
+              setStatus("MonkeyAI \u672A\u63A5\u53D7\u8BE5\u6307\u4EE4\uFF0C\u8349\u7A3F\u5DF2\u4FDD\u7559");
+              if (frame.message) setError(frame.message);
+            }
+          }
+          if (frame.type === "cancel_sent") {
+            setStopping(false);
+            setStatus("\u5DF2\u8BF7\u6C42\u505C\u6B62\uFF0C\u7B49\u5F85 runtime \u53D6\u6D88");
           }
+          if (frame.type === "response_sent") {
+            setPendingRequests((current) => current.filter((item) => item.requestId !== frame.requestId));
+          }
+          if (frame.type === "response_error") {
+            setError(`\u8FDC\u7A0B\u56DE\u590D\u88AB\u62D2\u7EDD\uFF1A${frame.code || "\u672A\u77E5"}`);
+          }
+          if (frame.type === "error") setError(frame.message || frame.code || "\u8FDC\u7A0B\u4F1A\u8BDD\u9519\u8BEF");
         }
-        if (frame.type === "cancel_sent") {
+        if (streamGenerationRef.current !== generation || streamRef.current !== stream) return;
+        streamRef.current = null;
+        setStatus("\u8FDC\u7A0B\u4F1A\u8BDD\u5DF2\u65AD\u5F00");
+        setHistoryLoading(false);
+        setTurnActive(false);
+        setStopping(false);
+        return;
+      } catch (reason) {
+        if (streamGenerationRef.current !== generation || stream && streamRef.current !== stream) return;
+        if (isRemoteStreamCarrierError(reason)) {
+          retries += 1;
+          try {
+            stream?.dispose();
+          } catch {
+          }
+          streamRef.current = null;
+          setError("");
+          setTurnActive(false);
           setStopping(false);
-          setStatus("\u5DF2\u8BF7\u6C42\u505C\u6B62\uFF0C\u7B49\u5F85 runtime \u53D6\u6D88");
+          setStatus("\u8FDC\u7A0B\u8FDE\u63A5\u4E2D\u65AD\uFF0C\u6B63\u5728\u91CD\u8FDE");
+          const delay = Math.min(1e3 * 2 ** Math.min(retries - 1, 5), 3e4);
+          await new Promise((resolve) => setTimeout(resolve, delay));
+          continue;
         }
-        if (frame.type === "response_sent") {
-          setPendingRequests((current) => current.filter((item) => item.requestId !== frame.requestId));
-        }
-        if (frame.type === "response_error") {
-          setError(`\u8FDC\u7A0B\u56DE\u590D\u88AB\u62D2\u7EDD\uFF1A${frame.code || "\u672A\u77E5"}`);
-        }
-        if (frame.type === "error") setError(frame.message || frame.code || "\u8FDC\u7A0B\u4F1A\u8BDD\u9519\u8BEF");
+        streamRef.current = null;
+        setStatus("\u8FDC\u7A0B\u4F1A\u8BDD\u4E0D\u53EF\u7528");
+        setError(errorText(reason));
+        setHistoryLoading(false);
+        setTurnActive(false);
+        setStopping(false);
+        return;
       }
-      if (streamRef.current !== stream) return;
-      setStatus("\u8FDC\u7A0B\u4F1A\u8BDD\u5DF2\u65AD\u5F00");
-      setHistoryLoading(false);
-      setTurnActive(false);
-      setStopping(false);
-    } catch (reason) {
-      if (stream && streamRef.current !== stream) return;
-      setStatus("\u8FDC\u7A0B\u4F1A\u8BDD\u4E0D\u53EF\u7528");
-      setError(errorText(reason));
-      setHistoryLoading(false);
-      setTurnActive(false);
-      setStopping(false);
     }
   }
   function sendPrompt() {
@@ -1354,9 +1446,14 @@ function RemoteSessionPage({ api }) {
       { style: style.header },
       h(
         "div",
-        { style: { display: "flex", alignItems: "center", gap: 8 } },
-        h(MonkeyIcon, { size: 22 }),
-        h("h1", { style: style.title }, "MonkeyAI \u4F1A\u8BDD")
+        { style: { display: "grid", gap: 1 } },
+        h("p", { style: style.eyebrow }, "\u8FDC\u7A0B\u5DE5\u4F5C\u533A"),
+        h(
+          "div",
+          { style: { display: "flex", alignItems: "center", gap: 8 } },
+          h(MonkeyIcon, { size: 22 }),
+          h("h1", { style: style.title, className: "mai-page-title" }, "MonkeyAI \u4F1A\u8BDD")
+        )
       ),
       h(StatusBadge, { status, live: isLive })
     ),
@@ -1510,16 +1607,21 @@ function RemoteSessionPage({ api }) {
     ) : null,
     currentAccount ? h(
       "section",
-      { style: style.card },
+      { style: style.toolbarCard, className: "mai-toolbar" },
       h(
         "div",
-        { style: style.row },
-        h("h2", { style: { ...style.sectionTitle, flex: 1 } }, "\u8FDC\u7A0B\u4F1A\u8BDD"),
-        h("span", { style: { fontSize: 11, color: t.text3 } }, currentAccount.scopes.filter((s) => s !== "device:connect").join(" \xB7 "))
+        { style: style.row, className: "mai-toolbar-heading" },
+        h(
+          "div",
+          { style: { display: "grid", gap: 1, flex: 1, minWidth: 0 } },
+          h("h2", { style: style.sectionTitle }, "\u8FDC\u7A0B\u4F1A\u8BDD"),
+          h("p", { style: style.subtitle }, "\u9009\u62E9\u8BBE\u5907\uFF0C\u7EE7\u7EED\u5904\u7406 MonkeyAI \u4F1A\u8BDD")
+        ),
+        h("span", { style: style.chip }, currentAccount.scopes.filter((s) => s !== "device:connect").join(" \xB7 "))
       ),
       h(
         "div",
-        { style: style.row },
+        { style: style.row, className: "mai-toolbar-controls" },
         h(
           "select",
           { style: { ...style.input, flex: "1 1 200px" }, value: accountId, onChange: (event) => setAccountId(event.target.value), "aria-label": "\u5DF2\u6388\u6743\u8D26\u53F7" },
@@ -1621,247 +1723,282 @@ function RemoteSessionPage({ api }) {
             }, newSessionBusy ? "\u521B\u5EFA\u4E2D\u2026" : "\u521B\u5EFA")
           )
         )
-      ),
-      sessionOptions.length > 0 ? h("div", { style: style.sessions }, sessionOptions.map((session) => {
-        const flag = session.stale ? "\u5DF2\u8FC7\u671F" : session.deviceStatus && session.deviceStatus !== "online" ? session.deviceStatus === "offline" ? "\u79BB\u7EBF" : session.deviceStatus : "";
-        return h(
-          "button",
-          {
-            style: { ...style.session, ...session.id === sessionId ? style.selected : {} },
-            className: "mai-card-hover",
-            key: session.id,
-            type: "button",
-            disabled: !session.cwd,
-            onClick: () => openSession(session),
-            title: session.cwd ? `\u6253\u5F00 ${session.cwd}` : "ACP \u4F1A\u8BDD\u5217\u8868\u672A\u63D0\u4F9B\u5DE5\u4F5C\u76EE\u5F55"
-          },
-          h("span", { style: style.sessionTitle }, session.title || session.id),
-          h("span", { style: style.sessionMeta }, session.cwd || "\u52A0\u8F7D\u5386\u53F2\u9700\u8981 runtime \u63D0\u4F9B\u5DE5\u4F5C\u76EE\u5F55"),
-          flag !== "" ? h("span", { style: { fontSize: 10.5, fontWeight: 650, color: session.stale ? t.text3 : "#8a6d1d", textTransform: "uppercase", letterSpacing: "0.04em" } }, flag) : null
-        );
-      })) : h("p", { style: style.subtitle }, machineId ? "\u8BE5\u8BBE\u5907\u6682\u65E0\u4F1A\u8BDD\u3002\u53EF\u5728\u4E0A\u65B9\u65B0\u5EFA\uFF0C\u6216\u70B9\u51FB\u5237\u65B0\u3002" : "\u8BF7\u9009\u62E9\u8BBE\u5907\u4EE5\u5217\u51FA\u5176\u4F1A\u8BDD\u3002")
+      )
     ) : null,
-    sessionId ? h(
-      "section",
-      { style: style.card },
+    currentAccount ? h(
+      "div",
+      { className: "mai-workspace" },
       h(
-        "div",
-        { style: style.row },
-        h("button", {
-          type: "button",
-          style: { ...style.button, flexShrink: 0 },
-          title: "\u5173\u95ED\u4F1A\u8BDD\u5E76\u8FD4\u56DE\u5217\u8868",
-          onClick: () => {
-            streamRef.current?.dispose();
-            streamRef.current = null;
-            setSessionId("");
-            setTurnActive(false);
-            setStopping(false);
-            setSessionStatus("");
-            setStatus("\u8FDC\u7A0B\u4F1A\u8BDD\u5DF2\u5173\u95ED");
-          }
-        }, "\u2190"),
-        h("strong", { style: { flex: 1, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title }, title),
-        sessionStatus ? h(
-          "span",
-          {
-            style: {
-              ...style.statusBadge,
-              background: sessionStatus === "running" ? t.accentSoft : sessionStatus === "error" ? t.dangerBg : t.surfaceAlt,
-              borderColor: sessionStatus === "running" ? t.accent : sessionStatus === "error" ? t.dangerBorder : t.border,
-              color: sessionStatus === "running" ? t.accent : sessionStatus === "error" ? t.danger : t.text2
+        "aside",
+        { style: style.sessionSidebar, className: "mai-session-sidebar" },
+        h(
+          "div",
+          { style: { ...style.row, justifyContent: "space-between" } },
+          h("h2", { style: style.sectionTitle }, "\u4F1A\u8BDD\u5217\u8868"),
+          h("span", { style: style.chip }, String(sessionOptions.length))
+        ),
+        sessionOptions.length > 0 ? h("div", { style: style.sessions, className: "mai-session-list" }, sessionOptions.map((session) => {
+          const flag = session.stale ? "\u5DF2\u8FC7\u671F" : session.deviceStatus && session.deviceStatus !== "online" ? session.deviceStatus === "offline" ? "\u79BB\u7EBF" : session.deviceStatus : "";
+          return h(
+            "button",
+            {
+              style: { ...style.session, ...session.id === sessionId ? style.selected : {} },
+              className: "mai-card-hover mai-session-card",
+              "aria-current": session.id === sessionId ? "true" : void 0,
+              key: session.id,
+              type: "button",
+              disabled: !session.cwd,
+              onClick: () => openSession(session),
+              title: session.cwd ? `\u6253\u5F00 ${session.cwd}` : "ACP \u4F1A\u8BDD\u5217\u8868\u672A\u63D0\u4F9B\u5DE5\u4F5C\u76EE\u5F55"
             },
-            title: "\u4F1A\u8BDD\u72B6\u6001\uFF08\u542B\u8FDC\u7AEF\u5BA2\u6237\u7AEF\u53D1\u8D77\u7684\u56DE\u5408\uFF09",
-            "aria-label": `\u4F1A\u8BDD\u72B6\u6001\uFF1A${SESSION_STATUS_LABEL[sessionStatus]}`
-          },
-          sessionStatus === "running" ? h("span", { className: "mai-pulse", style: { ...style.dot, background: t.accent } }) : null,
-          SESSION_STATUS_LABEL[sessionStatus]
-        ) : null,
+            h("span", { style: style.sessionTitle }, session.title || session.id),
+            h("span", { style: style.sessionMeta, className: "mai-session-meta" }, session.cwd || "\u52A0\u8F7D\u5386\u53F2\u9700\u8981 runtime \u63D0\u4F9B\u5DE5\u4F5C\u76EE\u5F55"),
+            flag !== "" ? h("span", { style: { fontSize: 10.5, fontWeight: 650, color: session.stale ? t.text3 : "#8a6d1d", textTransform: "uppercase", letterSpacing: "0.04em" } }, flag) : null
+          );
+        })) : h(
+          "div",
+          { style: { display: "grid", justifyItems: "center", gap: 7, padding: "22px 12px", textAlign: "center" } },
+          h("span", { style: { ...style.avatar, width: 34, height: 34, background: t.surfaceAlt, color: t.text3, fontSize: 17 } }, "\xB7"),
+          h("span", { style: { fontSize: 12, fontWeight: 600, color: t.text2 } }, machineId ? "\u8FD9\u91CC\u8FD8\u6CA1\u6709\u4F1A\u8BDD" : "\u8BF7\u9009\u62E9\u8FDC\u7A0B\u8BBE\u5907"),
+          h("span", { style: { fontSize: 11, color: t.text3 } }, machineId ? "\u5237\u65B0\u4F1A\u8BDD\u6216\u521B\u5EFA\u4E00\u4E2A\u65B0\u4F1A\u8BDD" : "\u4F1A\u8BDD\u5217\u8868\u4F1A\u663E\u793A\u5728\u8FD9\u91CC")
+        ),
         h(
-          "select",
-          {
-            style: { ...style.input, flex: "0 1 190px", minWidth: 130 },
-            value: currentModel,
-            disabled: !hasControl || switchingModel || models.length === 0,
-            title: "\u5207\u6362\u8BE5\u4F1A\u8BDD\u7684\u6A21\u578B",
-            onChange: (event) => {
-              const next = event.target.value;
-              if (next && next !== currentModel) switchSessionModel(next);
-            }
-          },
-          currentModel && !models.some((m) => m.id === currentModel) ? h("option", { value: currentModel }, currentModel.slice(0, 24)) : null,
-          models.map((m) => h("option", { key: m.id, value: m.id }, `${m.displayName} (${Math.round(m.contextWindowTokens / 1e3)}k)`))
+          "div",
+          { style: { borderTop: `1px solid ${t.border}`, paddingTop: 8 } },
+          h("p", { style: { margin: 0, fontSize: 10.5, color: t.text3 } }, machineId ? "\u4F1A\u8BDD\u6765\u81EA\u6240\u9009\u8BBE\u5907\u7684 runtime" : "\u8FDE\u63A5\u8BBE\u5907\u540E\u67E5\u770B\u4F1A\u8BDD")
         )
       ),
-      h(
-        "div",
-        {
-          style: style.events,
-          "aria-live": "polite",
-          "data-events": "",
-          ref: eventsRef,
-          onScroll: (event) => {
-            const el = event.currentTarget;
-            if (el.scrollTop < 60 && visibleCount < displayEntries.length) {
-              prevScrollHeightRef.current = el.scrollHeight;
-              setVisibleCount((count) => Math.min(count + 100, displayEntries.length));
+      sessionId ? h(
+        "section",
+        { style: { ...style.card, ...style.thread }, className: "mai-thread" },
+        h(
+          "div",
+          { style: style.row, className: "mai-thread-header" },
+          h("button", {
+            type: "button",
+            style: { ...style.button, flexShrink: 0 },
+            title: "\u5173\u95ED\u4F1A\u8BDD\u5E76\u8FD4\u56DE\u5217\u8868",
+            onClick: () => {
+              streamGenerationRef.current += 1;
+              streamRef.current?.dispose();
+              streamRef.current = null;
+              setSessionId("");
+              setTurnActive(false);
+              setStopping(false);
+              setSessionStatus("");
+              setStatus("\u8FDC\u7A0B\u4F1A\u8BDD\u5DF2\u5173\u95ED");
             }
-          }
-        },
-        historyLoading ? h(
+          }, "\u2190"),
+          h("strong", { style: { flex: 1, fontSize: 13.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title }, title),
+          sessionStatus ? h(
+            "span",
+            {
+              style: {
+                ...style.statusBadge,
+                background: sessionStatus === "running" ? t.accentSoft : sessionStatus === "error" ? t.dangerBg : t.surfaceAlt,
+                borderColor: sessionStatus === "running" ? t.accent : sessionStatus === "error" ? t.dangerBorder : t.border,
+                color: sessionStatus === "running" ? t.accent : sessionStatus === "error" ? t.danger : t.text2
+              },
+              title: "\u4F1A\u8BDD\u72B6\u6001",
+              "aria-label": `\u4F1A\u8BDD\u72B6\u6001\uFF1A${SESSION_STATUS_LABEL[sessionStatus]}`
+            },
+            sessionStatus === "running" ? h("span", { className: "mai-pulse", style: { ...style.dot, background: t.accent } }) : null,
+            SESSION_STATUS_LABEL[sessionStatus]
+          ) : null,
+          h(
+            "select",
+            {
+              style: { ...style.input, flex: "0 1 190px", minWidth: 130 },
+              value: currentModel,
+              disabled: !hasControl || switchingModel || models.length === 0,
+              title: "\u5207\u6362\u8BE5\u4F1A\u8BDD\u7684\u6A21\u578B",
+              onChange: (event) => {
+                const next = event.target.value;
+                if (next && next !== currentModel) switchSessionModel(next);
+              }
+            },
+            currentModel && !models.some((m) => m.id === currentModel) ? h("option", { value: currentModel }, currentModel.slice(0, 24)) : null,
+            models.map((m) => h("option", { key: m.id, value: m.id }, `${m.displayName} (${Math.round(m.contextWindowTokens / 1e3)}k)`))
+          )
+        ),
+        h(
           "div",
-          { style: { fontSize: 12.5, color: t.text3, textAlign: "center", padding: "32px 12px" } },
-          displayEntries.length > 0 ? `\u6B63\u5728\u52A0\u8F7D\u4F1A\u8BDD\u5386\u53F2\u2026\uFF08\u5DF2\u52A0\u8F7D ${displayEntries.length} \u6761\uFF09` : "\u6B63\u5728\u52A0\u8F7D\u4F1A\u8BDD\u5386\u53F2\u2026"
-        ) : h(
-          import_react.default.Fragment,
-          null,
-          displayEntries.length > visibleCount ? h("div", { style: { fontSize: 11, color: t.text3, textAlign: "center", padding: "6px 0" } }, `\u8FD8\u6709 ${displayEntries.length - visibleCount} \u6761\u66F4\u65E9\u7684\u6D88\u606F \u2014 \u5411\u4E0A\u6EDA\u52A8\u52A0\u8F7D`) : null,
-          displayEntries.slice(-visibleCount).map((entry) => {
-            if (entry.kind === "thought") {
-              return h(
-                "div",
-                { style: { display: "flex", gap: 8, alignItems: "flex-start", justifyContent: "flex-start" }, key: entry.key },
-                h("div", { style: { ...style.avatar, background: "#8a5fd0" } }, "\xB7\xB7\xB7"),
-                h(
-                  "details",
-                  { style: style.thought },
-                  h("summary", { style: style.thoughtSummary }, "\u601D\u8003\u8FC7\u7A0B"),
-                  h("p", { style: { margin: "6px 0 0", whiteSpace: "pre-wrap", overflowWrap: "anywhere", color: "#5b4a72", fontStyle: "italic" } }, entry.text || "")
-                )
-              );
+          {
+            style: style.events,
+            className: "mai-thread-events mai-events",
+            "aria-live": "polite",
+            "data-events": "",
+            ref: eventsRef,
+            onScroll: (event) => {
+              const el = event.currentTarget;
+              if (el.scrollTop < 60 && visibleCount < displayEntries.length) {
+                prevScrollHeightRef.current = el.scrollHeight;
+                setVisibleCount((count) => Math.min(count + 100, displayEntries.length));
+              }
             }
-            if (entry.kind === "message") {
-              const isUser = entry.role === "user";
-              const isThought = entry.role === "thought";
-              const avatarColor = isUser ? "#5a6472" : isThought ? "#8a5fd0" : t.accent;
-              const bubbleStyle = isUser ? style.bubbleUser : isThought ? style.thought : style.bubble;
-              return h(
-                "div",
-                { style: isUser ? style.bubbleWrapUser : style.bubbleWrap, key: entry.key },
-                !isUser ? h("div", { style: { ...style.avatar, background: avatarColor, padding: isUser ? 0 : 3 } }, isThought ? "\xB7\xB7\xB7" : h(MonkeyIcon, { size: 18 })) : null,
-                h(
+          },
+          historyLoading ? h(
+            "div",
+            { style: { fontSize: 12.5, color: t.text3, textAlign: "center", padding: "32px 12px" } },
+            displayEntries.length > 0 ? `\u6B63\u5728\u52A0\u8F7D\u4F1A\u8BDD\u5386\u53F2\u2026\uFF08\u5DF2\u52A0\u8F7D ${displayEntries.length} \u6761\uFF09` : "\u6B63\u5728\u52A0\u8F7D\u4F1A\u8BDD\u5386\u53F2\u2026"
+          ) : h(
+            import_react.default.Fragment,
+            null,
+            displayEntries.length > visibleCount ? h("div", { style: { fontSize: 11, color: t.text3, textAlign: "center", padding: "6px 0" } }, `\u8FD8\u6709 ${displayEntries.length - visibleCount} \u6761\u66F4\u65E9\u7684\u6D88\u606F \u2014 \u5411\u4E0A\u6EDA\u52A8\u52A0\u8F7D`) : null,
+            displayEntries.slice(-visibleCount).map((entry) => {
+              if (entry.kind === "thought") {
+                return h(
                   "div",
-                  { style: bubbleStyle },
-                  h("div", { style: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.04em", marginBottom: 3, opacity: 0.7, textTransform: "uppercase", color: isUser ? "rgba(255,255,255,0.85)" : t.text3 } }, entry.label),
-                  isUser ? h("p", { style: { margin: 0, whiteSpace: "pre-wrap", overflowWrap: "anywhere" } }, entry.text || "") : h("div", { className: "mai-md" }, renderMarkdown(entry.text || ""))
-                ),
-                isUser ? h("div", { style: { ...style.avatar, background: avatarColor } }, "\u6211") : null
-              );
-            }
-            if (entry.kind === "tool") {
-              const statusLabel = entry.status ? TOOL_STATUS_LABEL[entry.status] ?? entry.status : "running";
-              const running = entry.status !== "completed" && entry.status !== "failed" && entry.status !== "cancelled";
-              const statusColor = entry.status === "completed" ? "#2f7d54" : entry.status === "failed" ? t.danger : "#8a6d1d";
-              const statusBg = entry.status === "completed" ? "#e9f5ee" : entry.status === "failed" ? t.dangerBg : "#fdf6e3";
-              return h(
-                "details",
-                { style: { ...style.event, padding: "6px 11px", background: t.surface }, key: entry.key },
-                h(
-                  "summary",
-                  { style: { ...style.row, cursor: "pointer", userSelect: "none", listStyle: "none" } },
-                  h("span", { style: { fontSize: 10, fontWeight: 700, color: t.text3, textTransform: "uppercase", letterSpacing: "0.05em", flexShrink: 0 } }, "\u5DE5\u5177"),
-                  h("span", { style: { fontSize: 12.5, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, minWidth: 0 } }, entry.title || "\u6267\u884C\u4E2D"),
-                  running ? h("span", { className: "mai-pulse", style: { ...style.dot, width: 6, height: 6, background: "#d4a72c" } }) : null,
-                  h("span", { style: { fontSize: 10.5, padding: "1px 8px", borderRadius: 999, background: statusBg, color: statusColor, fontWeight: 650, flexShrink: 0 } }, statusLabel)
-                ),
-                entry.detail ? h("pre", { style: { margin: "6px 0 0", whiteSpace: "pre-wrap", overflowWrap: "anywhere", fontSize: 11.5, maxHeight: 320, overflowY: "auto", background: t.surfaceAlt, borderRadius: 6, padding: "8px 10px" } }, entry.detail) : null
-              );
-            }
-            if (entry.kind === "plan") {
+                  { style: { display: "flex", gap: 8, alignItems: "flex-start", justifyContent: "flex-start" }, key: entry.key },
+                  h("div", { style: { ...style.avatar, background: "#8a5fd0" } }, "\xB7\xB7\xB7"),
+                  h(
+                    "details",
+                    { style: style.thought },
+                    h("summary", { style: style.thoughtSummary }, "\u601D\u8003\u8FC7\u7A0B"),
+                    h("p", { style: { margin: "6px 0 0", whiteSpace: "pre-wrap", overflowWrap: "anywhere", color: "#5b4a72", fontStyle: "italic" } }, entry.text || "")
+                  )
+                );
+              }
+              if (entry.kind === "message") {
+                const isUser = entry.role === "user";
+                const isThought = entry.role === "thought";
+                const avatarColor = isUser ? "#5a6472" : isThought ? "#8a5fd0" : t.accent;
+                const bubbleStyle = isUser ? style.bubbleUser : isThought ? style.thought : style.bubble;
+                return h(
+                  "div",
+                  { style: isUser ? style.bubbleWrapUser : style.bubbleWrap, key: entry.key },
+                  !isUser ? h("div", { style: { ...style.avatar, background: avatarColor, padding: isUser ? 0 : 3 } }, isThought ? "\xB7\xB7\xB7" : h(MonkeyIcon, { size: 18 })) : null,
+                  h(
+                    "div",
+                    { style: bubbleStyle },
+                    h("div", { style: { fontSize: 10.5, fontWeight: 700, letterSpacing: "0.04em", marginBottom: 3, opacity: 0.7, textTransform: "uppercase", color: isUser ? "rgba(255,255,255,0.85)" : t.text3 } }, entry.label),
+                    isUser ? h("p", { style: { margin: 0, whiteSpace: "pre-wrap", overflowWrap: "anywhere" } }, entry.text || "") : h("div", { className: "mai-md" }, renderMarkdown(entry.text || ""))
+                  ),
+                  isUser ? h("div", { style: { ...style.avatar, background: avatarColor } }, "\u6211") : null
+                );
+              }
+              if (entry.kind === "tool") {
+                const statusLabel = entry.status ? TOOL_STATUS_LABEL[entry.status] ?? entry.status : "running";
+                const running = entry.status !== "completed" && entry.status !== "failed" && entry.status !== "cancelled";
+                const statusColor = entry.status === "completed" ? "#2f7d54" : entry.status === "failed" ? t.danger : "#8a6d1d";
+                const statusBg = entry.status === "completed" ? "#e9f5ee" : entry.status === "failed" ? t.dangerBg : "#fdf6e3";
+                return h(
+                  "details",
+                  { style: { ...style.event, padding: "6px 11px", background: t.surface }, key: entry.key },
+                  h(
+                    "summary",
+                    { style: { ...style.row, cursor: "pointer", userSelect: "none", listStyle: "none" } },
+                    h("span", { style: { fontSize: 10, fontWeight: 700, color: t.text3, textTransform: "uppercase", letterSpacing: "0.05em", flexShrink: 0 } }, "\u5DE5\u5177"),
+                    h("span", { style: { fontSize: 12.5, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, minWidth: 0 } }, entry.title || "\u6267\u884C\u4E2D"),
+                    running ? h("span", { className: "mai-pulse", style: { ...style.dot, width: 6, height: 6, background: "#d4a72c" } }) : null,
+                    h("span", { style: { fontSize: 10.5, padding: "1px 8px", borderRadius: 999, background: statusBg, color: statusColor, fontWeight: 650, flexShrink: 0 } }, statusLabel)
+                  ),
+                  entry.detail ? h("pre", { style: { margin: "6px 0 0", whiteSpace: "pre-wrap", overflowWrap: "anywhere", fontSize: 11.5, maxHeight: 320, overflowY: "auto", background: t.surfaceAlt, borderRadius: 6, padding: "8px 10px" } }, entry.detail) : null
+                );
+              }
+              if (entry.kind === "plan") {
+                return h(
+                  "article",
+                  { style: style.event, key: entry.key },
+                  h("div", { style: { fontSize: 10.5, fontWeight: 700, color: t.text3, marginBottom: 3, textTransform: "uppercase", letterSpacing: "0.04em" } }, "\u8BA1\u5212"),
+                  ...entry.entries.map((item, index) => h(
+                    "div",
+                    { style: { display: "flex", gap: 6, fontSize: 12.5, margin: "2px 0" }, key: index },
+                    h("span", { style: { opacity: 0.55 } }, index + 1 + "."),
+                    h(
+                      "span",
+                      { style: { textDecoration: item.status === "completed" ? "line-through" : "none", opacity: item.status === "completed" ? 0.55 : 1 } },
+                      typeof item.content === "string" ? item.content : JSON.stringify(item.content ?? item)
+                    )
+                  ))
+                );
+              }
+              if (entry.kind === "system") {
+                return h("div", { style: { fontSize: 11.5, color: t.text3, textAlign: "center", padding: "2px 0" }, key: entry.key }, entry.label);
+              }
               return h(
                 "article",
                 { style: style.event, key: entry.key },
-                h("div", { style: { fontSize: 10.5, fontWeight: 700, color: t.text3, marginBottom: 3, textTransform: "uppercase", letterSpacing: "0.04em" } }, "\u8BA1\u5212"),
-                ...entry.entries.map((item, index) => h(
-                  "div",
-                  { style: { display: "flex", gap: 6, fontSize: 12.5, margin: "2px 0" }, key: index },
-                  h("span", { style: { opacity: 0.55 } }, index + 1 + "."),
-                  h(
-                    "span",
-                    { style: { textDecoration: item.status === "completed" ? "line-through" : "none", opacity: item.status === "completed" ? 0.55 : 1 } },
-                    typeof item.content === "string" ? item.content : JSON.stringify(item.content ?? item)
-                  )
-                ))
+                h("div", { style: { opacity: 0.6, fontSize: 11, marginBottom: 4 } }, entry.label),
+                h(
+                  "details",
+                  null,
+                  h("summary", { style: style.summary }, "\u67E5\u770B\u8BE6\u60C5"),
+                  h("pre", { style: { margin: "5px 0 0", whiteSpace: "pre-wrap", overflowWrap: "anywhere", fontSize: 11.5 } }, JSON.stringify(entry.data ?? {}, null, 2))
+                )
               );
-            }
-            if (entry.kind === "system") {
-              return h("div", { style: { fontSize: 11.5, color: t.text3, textAlign: "center", padding: "2px 0" }, key: entry.key }, entry.label);
-            }
-            return h(
-              "article",
-              { style: style.event, key: entry.key },
-              h("div", { style: { opacity: 0.6, fontSize: 11, marginBottom: 4 } }, entry.label),
-              h(
-                "details",
-                null,
-                h("summary", { style: style.summary }, "\u67E5\u770B\u8BE6\u60C5"),
-                h("pre", { style: { margin: "5px 0 0", whiteSpace: "pre-wrap", overflowWrap: "anywhere", fontSize: 11.5 } }, JSON.stringify(entry.data ?? {}, null, 2))
-              )
-            );
-          })
-        )
-      ),
-      ...pendingRequests.map((request) => h(ApprovalCard, {
-        key: `${typeof request.requestId}:${request.requestId}`,
-        request,
-        hasControl,
-        onRespond: respond,
-        answerText,
-        setAnswerText,
-        onAnswer: answerQuestion
-      })),
-      h(
-        "form",
-        { style: style.composer, onSubmit: (event) => {
-          event.preventDefault();
-          sendPrompt();
-        } },
-        h("textarea", {
-          style: style.textarea,
-          value: prompt,
-          onChange: (event) => setPrompt(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter" && !event.shiftKey) {
-              event.preventDefault();
-              sendPrompt();
-            }
-          },
-          placeholder: hasControl ? "\u5411\u8FDC\u7A0B\u4F1A\u8BDD\u4E0B\u53D1\u6307\u4EE4\uFF08\u56DE\u8F66\u53D1\u9001\uFF0CShift+\u56DE\u8F66\u6362\u884C\uFF09" : "\u53EA\u8BFB\u6A21\u5F0F\uFF1A\u4E0B\u53D1\u6307\u4EE4\u9700\u8981 session:control \u6743\u9650",
-          disabled: !hasControl
-        }),
-        turnActive ? h(
-          "button",
-          {
-            type: "button",
-            style: style.stopButton,
-            disabled: !hasControl || stopping,
-            onClick: stopTurn,
-            title: stopping ? "\u505C\u6B62\u4E2D\u2026" : "\u505C\u6B62\u5F53\u524D\u56DE\u5408",
-            "aria-label": "\u505C\u6B62\u5F53\u524D\u56DE\u5408"
-          },
-          h("span", { style: style.stopIcon })
-        ) : h(
-          "button",
-          {
-            type: "submit",
-            style: style.sendButton,
-            disabled: !streamRef.current || !hasControl || prompt.trim() === "",
-            title: "\u53D1\u9001\uFF08\u56DE\u8F66\uFF09",
-            "aria-label": "\u53D1\u9001\u6307\u4EE4"
-          },
-          h(
-            "svg",
-            { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { display: "block" } },
-            h("path", { d: "M8 12.5V3.5M8 3.5L4 7.5M8 3.5L12 7.5", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" })
+            })
           )
-        )
-      ),
-      lastDelivery || turnActive ? h(
-        "div",
-        { style: { fontSize: 11.5, color: turnActive ? t.accent : lastDelivery?.accepted ? t.success : lastDelivery?.frame === "pending" ? t.text3 : t.danger, textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 6 } },
-        turnActive ? h("span", { className: "mai-pulse", style: { ...style.dot, background: t.accent } }) : null,
-        turnActive ? stopping ? "\u6B63\u5728\u505C\u6B62\u5F53\u524D\u56DE\u5408\u2026" : sessionStatus === "running" ? "MonkeyAI \u6B63\u5728\u5904\u7406\uFF08\u8FDC\u7AEF\u5BA2\u6237\u7AEF\u53D1\u8D77\uFF09\u2026" : "MonkeyAI \u6B63\u5728\u5904\u7406\u2026" : lastDelivery?.accepted ? "\u56DE\u5408\u5DF2\u7ED3\u675F" : lastDelivery?.frame === "pending" ? "\u7B49\u5F85\u6295\u9012" : "\u6295\u9012\u88AB\u62D2\u7EDD"
-      ) : null
+        ),
+        ...pendingRequests.map((request) => h(ApprovalCard, {
+          key: `${typeof request.requestId}:${request.requestId}`,
+          request,
+          hasControl,
+          onRespond: respond,
+          answerText,
+          setAnswerText,
+          onAnswer: answerQuestion
+        })),
+        h(
+          "form",
+          { style: style.composer, onSubmit: (event) => {
+            event.preventDefault();
+            sendPrompt();
+          } },
+          h("textarea", {
+            style: style.textarea,
+            value: prompt,
+            onChange: (event) => setPrompt(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.shiftKey) {
+                event.preventDefault();
+                sendPrompt();
+              }
+            },
+            placeholder: hasControl ? "\u5411\u8FDC\u7A0B\u4F1A\u8BDD\u4E0B\u53D1\u6307\u4EE4\uFF08\u56DE\u8F66\u53D1\u9001\uFF0CShift+\u56DE\u8F66\u6362\u884C\uFF09" : "\u53EA\u8BFB\u6A21\u5F0F\uFF1A\u4E0B\u53D1\u6307\u4EE4\u9700\u8981 session:control \u6743\u9650",
+            disabled: !hasControl
+          }),
+          turnActive ? h(
+            "button",
+            {
+              type: "button",
+              style: style.stopButton,
+              disabled: !hasControl || stopping,
+              onClick: stopTurn,
+              title: stopping ? "\u505C\u6B62\u4E2D\u2026" : "\u505C\u6B62\u5F53\u524D\u56DE\u5408",
+              "aria-label": "\u505C\u6B62\u5F53\u524D\u56DE\u5408"
+            },
+            h("span", { style: style.stopIcon })
+          ) : h(
+            "button",
+            {
+              type: "submit",
+              style: style.sendButton,
+              disabled: !streamRef.current || !hasControl || prompt.trim() === "",
+              title: "\u53D1\u9001\uFF08\u56DE\u8F66\uFF09",
+              "aria-label": "\u53D1\u9001\u6307\u4EE4"
+            },
+            h(
+              "svg",
+              { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", style: { display: "block" } },
+              h("path", { d: "M8 12.5V3.5M8 3.5L4 7.5M8 3.5L12 7.5", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" })
+            )
+          )
+        ),
+        lastDelivery || turnActive ? h(
+          "div",
+          { style: { fontSize: 11.5, color: turnActive ? t.accent : lastDelivery?.accepted ? t.success : lastDelivery?.frame === "pending" ? t.text3 : t.danger, textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 6 } },
+          turnActive ? h("span", { className: "mai-pulse", style: { ...style.dot, background: t.accent } }) : null,
+          turnActive ? stopping ? "\u6B63\u5728\u505C\u6B62\u5F53\u524D\u56DE\u5408\u2026" : "MonkeyAI \u6B63\u5728\u5904\u7406\u2026" : lastDelivery?.accepted ? "\u56DE\u5408\u5DF2\u7ED3\u675F" : lastDelivery?.frame === "pending" ? "\u7B49\u5F85\u6295\u9012" : "\u6295\u9012\u88AB\u62D2\u7EDD"
+        ) : null
+      ) : h(
+        "section",
+        { style: style.emptyThread, className: "mai-empty-thread" },
+        h("div", { className: "mai-empty-mark" }, h(MonkeyIcon, { size: 26 })),
+        h("p", { style: style.eyebrow }, "\u8FDC\u7A0B\u4F1A\u8BDD"),
+        h("h2", { style: { margin: 0, fontSize: 18, fontWeight: 650, color: "#182230" } }, "\u9009\u62E9\u4E00\u4E2A\u4F1A\u8BDD"),
+        h("p", { style: { ...style.subtitle, maxWidth: 300 } }, sessionOptions.length > 0 ? "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4F1A\u8BDD\uFF0C\u5728\u6B64\u7EE7\u7EED\u5BF9\u8BDD\u3002" : machineId ? "\u5F53\u524D\u8BBE\u5907\u8FD8\u6CA1\u6709\u4F1A\u8BDD\u3002\u53EF\u5728\u4E0A\u65B9\u65B0\u5EFA\u6216\u5237\u65B0\u3002" : "\u5148\u9009\u62E9\u4E00\u4E2A\u8FDC\u7A0B\u8BBE\u5907\u3002")
+      )
     ) : null
   );
 }