dsh-auto-compaction 0.2.0 → 0.2.1

package/lib/client.js

@@ -41,10 +41,11 @@ window.__ModuleLoader__.load({
       { id: "strip", label: "状态条" },
       { id: "ring", label: "进度环" },
       { id: "topbar", label: "顶部条" },
+      { id: "corner", label: "右上角" },
     ];
     var EXAMPLE_WINDOW = 250000, EXAMPLE_RESERVED = 20000, EXAMPLE_HEADROOM = 10000;
 
-    var DISPLAY_STYLES = ["orbit", "strip", "ring", "topbar"];
+    var DISPLAY_STYLES = ["orbit", "strip", "ring", "topbar", "corner"];
     var displayStyle = "orbit";
     var displayStyleListeners = [];
 
@@ -103,7 +104,11 @@ window.__ModuleLoader__.load({
     var STATUS_MUTED = "var(--dsh-text-secondary, var(--dsw-alias-label-secondary, #9aa0a6))";
     var STATUS_FAINT = "var(--dsh-text-tertiary, var(--dsw-alias-label-tertiary, #7f858c))";
     var STATUS_BORDER = "var(--dsh-border, var(--dsw-alias-border-l2, #2c2e33))";
-    var STATUS_PANEL = "var(--dsw-alias-interactive-bg-hover, rgba(127,133,140,.10))";
+    // Opaque elevated surface. The menu token is intentionally translucent
+    // (menu layers add their own backdrop blur); the status surfaces must stay
+    // readable over live conversation text without a blur.
+    var STATUS_SURFACE = "var(--dsw-alias-bg-layer-3, #353638)";
+    var STATUS_PANEL = STATUS_SURFACE;
     var STATUS_ACCENT = "var(--dsw-alias-state-business-primary, #4c8dff)";
     var STATUS_SUCCESS = "var(--dsw-alias-state-success-primary, #3fb950)";
     var STATUS_WARN = "var(--dsw-alias-state-warn-primary, #d29922)";
@@ -166,6 +171,36 @@ window.__ModuleLoader__.load({
       return call(connection, "status", { sessionId: sessionId }, 3500);
     }
 
+    /**
+     * Anchor the corner card to the conversation area instead of the window:
+     * its top lines up with the first message row (below the 对话/轨迹 tabs) and
+     * its right edge keeps the header's inset, so it never covers the tab row.
+     * The width shrinks to the gutter between the message column and the window
+     * edge when the window is narrow.
+     */
+    function cornerPlacement(desiredWidth) {
+      var right = (typeof window === "undefined" ? 0 : window.innerWidth) - 20;
+      var top = 96;
+      var width = desiredWidth;
+      try {
+        var body = document.querySelector("[data-conversation-content]");
+        var br = body && body.getBoundingClientRect();
+        if (br && br.height > 80) {
+          top = Math.round(br.top) + 8;
+          right = Math.round(br.right) - 20;
+        }
+        var card = document.querySelector("[data-composer-card]");
+        var cr = card && card.getBoundingClientRect();
+        if (cr && cr.width > 120) {
+          var clearance = parseFloat(getComputedStyle(card).getPropertyValue("--dsh-composer-side-clearance")) || 16;
+          var columnRight = Math.round(cr.right) - clearance;
+          width = Math.max(184, Math.min(desiredWidth, right - columnRight - 10));
+        }
+      } catch (error) { /* keep the window-corner fallback */ }
+      width = Math.max(160, Math.min(width, right - 12));
+      return { left: Math.max(8, Math.round(right - width)), top: Math.round(top), width: Math.round(width) };
+    }
+
     function StatusDock(props) {
       ensureStatusStyles();
       var connection = props.connection;
@@ -344,7 +379,7 @@ window.__ModuleLoader__.load({
             h("span", { style: {
               display: "inline-flex", alignItems: "center", gap: 7, height: 26, padding: "0 11px",
               borderRadius: 999, border: "1px solid " + STATUS_ACCENT,
-              background: "var(--dsw-specific-menu, #23252a)", color: STATUS_TEXT, fontSize: 11, whiteSpace: "nowrap",
+              background: STATUS_SURFACE, color: STATUS_TEXT, fontSize: 11, whiteSpace: "nowrap",
             } },
               h("span", { className: "dsh-handoff-pulse", style: { width: 7, height: 7, borderRadius: "50%", background: STATUS_ACCENT } }),
               "压缩中 · " + statusStep(status) + " · " + clockText(startedAt)
@@ -352,6 +387,43 @@ window.__ModuleLoader__.load({
           );
           return ReactDOM.createPortal(h(React.Fragment, null, topLine, pill), document.body);
         }
+        if (themeStyle === "corner") {
+          var place = cornerPlacement(268);
+          return ReactDOM.createPortal(
+            h("div", {
+              role: "status",
+              "aria-live": "polite",
+              "data-dsh-handoff-status": "running",
+              title: "压缩期间发送的消息会排队",
+              style: {
+                position: "fixed",
+                left: place.left,
+                top: place.top,
+                zIndex: 70,
+                pointerEvents: "none",
+                boxSizing: "border-box",
+                width: place.width,
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 8,
+                padding: "9px 11px",
+                borderRadius: 10,
+                background: STATUS_SURFACE,
+                border: "1px solid " + STATUS_BORDER,
+                borderLeft: "2px solid " + STATUS_ACCENT,
+                boxShadow: "0 14px 34px rgba(0,0,0,.38)",
+              },
+            },
+              h("span", { className: "dsh-handoff-pulse", style: { width: 8, height: 8, borderRadius: "50%", background: STATUS_ACCENT, flex: "0 0 auto", marginTop: 5 } }),
+              h("div", { style: { minWidth: 0, flex: 1 } },
+                h("div", { style: { fontSize: 12, fontWeight: 600, color: STATUS_TEXT, lineHeight: "17px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, title),
+                h("div", { style: { marginTop: 2, fontSize: 10.5, color: STATUS_MUTED, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } },
+                  clockText(startedAt) + " · " + statusStep(status) + (place.width >= 216 ? " · 消息会排队" : ""))
+              )
+            ),
+            document.body
+          );
+        }
         var indicator = themeStyle === "ring"
           ? h("div", { style: { position: "relative", width: 64, height: 64 } },
             h("div", { style: {
@@ -388,13 +460,13 @@ window.__ModuleLoader__.load({
           // scrim here would falsely suggest the conversation is frozen.
         };
         var cardStyle = {
-          width: 260,
+          width: 264,
           maxWidth: "82%",
-          background: "var(--dsw-specific-menu, #23252a)",
+          background: STATUS_SURFACE,
           border: "1px solid " + STATUS_BORDER,
           borderRadius: 14,
           padding: "16px 16px 14px",
-          boxShadow: "0 22px 50px rgba(0,0,0,.34)",
+          boxShadow: "0 20px 46px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
@@ -406,9 +478,9 @@ window.__ModuleLoader__.load({
           h("div", { role: "status", "aria-live": "polite", "data-dsh-handoff-status": "running", style: overlayStyle },
             h("div", { style: cardStyle },
               indicator,
-              h("div", { style: { fontSize: 12.5, fontWeight: 500, color: STATUS_TEXT } }, title),
+              h("div", { style: { fontSize: 12.5, fontWeight: 600, color: STATUS_TEXT } }, title),
               h("div", { style: { fontSize: 11, color: STATUS_MUTED } }, cardSub),
-              h("div", { style: { fontSize: 10.5, color: STATUS_FAINT } }, "完成后整段历史收成一条交接文档")
+              h("div", { style: { fontSize: 10.5, color: STATUS_MUTED, opacity: 0.85 } }, "完成后整段历史收成一条交接文档")
             )
           ),
           document.body
@@ -429,6 +501,7 @@ window.__ModuleLoader__.load({
           borderLeft: "3px solid " + color,
           borderRadius: 8,
           background: STATUS_PANEL,
+          boxShadow: "0 8px 22px rgba(0,0,0,.28)",
           color: STATUS_TEXT,
           fontSize: 12,
           lineHeight: "18px",
@@ -486,7 +559,7 @@ window.__ModuleLoader__.load({
     function ThemePreview(props) {
       var style = normalizeDisplayStyle(props.theme);
       var chatChildren = [
-        h("div", { key: "user", style: { marginLeft: "auto", maxWidth: "78%", border: "1px solid rgba(76,141,255,.24)", background: "rgba(76,141,255,.14)", borderRadius: "7px 7px 2px 7px", padding: "4px 6px", fontSize: 9, color: "#d9dbde" } }, "请完整读取这个文件并总结…"),
+        h("div", { key: "user", style: { marginLeft: "auto", maxWidth: "62%", border: "1px solid rgba(76,141,255,.24)", background: "rgba(76,141,255,.14)", borderRadius: "7px 7px 2px 7px", padding: "4px 6px", fontSize: 9, color: "#d9dbde" } }, "请完整读取这个文件并总结…"),
         h("div", { key: "lines", style: { display: "flex", flexDirection: "column", gap: 4, marginTop: 6 } },
           h("i", { key: "l1", style: { height: 4, borderRadius: 99, background: C.line } }),
           h("i", { key: "l2", style: { height: 4, borderRadius: 99, background: C.line, width: "88%" } }),
@@ -525,6 +598,14 @@ window.__ModuleLoader__.load({
             )
           )
         );
+      } else if (style === "corner") {
+        overlay = h("div", { style: { position: "absolute", right: 8, top: 9, boxSizing: "border-box", width: 104, display: "flex", alignItems: "flex-start", gap: 4, padding: "4px 5px", borderRadius: 5, background: "#23252a", border: "1px solid " + C.line, borderLeft: "2px solid " + C.accent } },
+          h("span", { className: "dsh-handoff-pulse", style: { width: 4, height: 4, borderRadius: "50%", background: C.accent, marginTop: 4, flex: "0 0 auto" } }),
+          h("div", { style: { minWidth: 0 } },
+            h("div", { style: { fontSize: 7, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, "正在压缩历史会话"),
+            h("div", { style: { fontSize: 6.5, color: C.muted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, "00:42 · 2/3 写文档")
+          )
+        );
       }
       var strip = style === "strip"
         ? h("div", { style: { margin: "0 8px 4px", border: "1px solid " + C.line, borderLeft: "2px solid " + C.accent, borderRadius: 5, background: "#212226", padding: "4px 6px" } },
@@ -547,7 +628,7 @@ window.__ModuleLoader__.load({
             h("span", { style: { marginLeft: "auto", fontSize: 8.5, color: C.muted, border: "1px solid " + C.line, borderRadius: 999, padding: "0 6px" } }, "轻量本地")
           ),
           h("div", { style: { flex: 1, minHeight: 0, padding: (style === "topbar" ? 22 : 7) + "px 8px 7px", position: "relative", overflow: "hidden" } },
-            style === "topbar" ? overlay : null,
+            (style === "topbar" || style === "corner") ? overlay : null,
             chatChildren,
             (style === "ring" || style === "orbit") ? overlay : null
           ),

package/lib/index.js

@@ -60,7 +60,7 @@ function trace(message) {
 
 let lastOpenRequest = "";
 
-const DISPLAY_STYLES = new Set(["orbit", "strip", "ring", "topbar"]);
+const DISPLAY_STYLES = new Set(["orbit", "strip", "ring", "topbar", "corner"]);
 
 function normalizeDisplayStyle(value) {
   return typeof value === "string" && DISPLAY_STYLES.has(value) ? value : "orbit";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-auto-compaction",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -51,6 +51,6 @@
     "access": "public"
   },
   "dependencies": {
-    "dsh-auto-compaction-engine": "^0.2.0"
+    "dsh-auto-compaction-engine": "^0.2.1"
   }
 }