dsh-monkeyai-sessions 0.1.8 → 0.1.10

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, width: "100%", maxWidth: 1320, minWidth: 0, 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; }
@@ -1414,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 })
         ),
@@ -1570,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" },
@@ -1681,248 +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: () => {
-                streamGenerationRef.current += 1;
-                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",
-                "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" : "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
       );
     }