dsh-monkeyai-sessions 0.1.7 → 0.1.9

package/client.js

@@ -543,12 +543,19 @@ window.__ModuleLoader__.load({
       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" },
@@ -567,13 +574,13 @@ window.__ModuleLoader__.load({
       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 },
@@ -596,6 +603,36 @@ window.__ModuleLoader__.load({
     .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; }
@@ -606,6 +643,24 @@ window.__ModuleLoader__.load({
     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 = [];
@@ -829,6 +884,7 @@ window.__ModuleLoader__.load({
       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);
@@ -849,6 +905,7 @@ window.__ModuleLoader__.load({
         });
         return () => {
           active = false;
+          streamGenerationRef.current += 1;
           streamRef.current?.dispose();
           streamRef.current = null;
         };
@@ -1011,6 +1068,7 @@ window.__ModuleLoader__.load({
         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 : "";
@@ -1034,24 +1092,32 @@ window.__ModuleLoader__.load({
         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;
@@ -1068,90 +1134,116 @@ window.__ModuleLoader__.load({
         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() {
@@ -1359,9 +1451,14 @@ window.__ModuleLoader__.load({
           { 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 })
         ),
@@ -1515,16 +1612,21 @@ window.__ModuleLoader__.load({
         ) : 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" },
@@ -1626,247 +1728,282 @@ window.__ModuleLoader__.load({
                 }, 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
       );
     }