dsh-skin-galactic-opera 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.1.2 - 2026-08-27
+
+### Fixed
+
+- Keeps model/context popovers above the skin overlay layer.
+- Prevents the telemetry mirror from treating input-bar buttons, popovers, listboxes, and menus as telemetry sources.
+
+## 0.1.1 - 2026-08-27
+
+### Added
+
+- Bottom-right HUD telemetry panel that mirrors global DSH session status in a fixed five-line layout: rounds/steps, LLM/tool time, first-token average and throughput, cache hit rate, and input/output token usage.
+
+### Changed
+
+- Preserves pipe-separated telemetry segments as complete information blocks.
+- Filters nearby message-level timing and settings/menu text from the telemetry panel.
+
 ## 0.1.0 - 2026-08-27
 
 Initial public package version.

package/README.md

@@ -24,20 +24,47 @@ This package does not include or recreate any official franchise logos, characte
   - Subtle mouse parallax.
   - Click energy pulse.
   - Hover energy outlines on buttons, inputs, messages, and code blocks.
+  - Bottom telemetry/status information is mirrored into a fixed bottom-right sci-fi panel.
   - Scanner target dot projected from the pointer direction relative to the viewport center; the target lights only when the scanner sweep passes it.
   - Automatic hyperspace burst after submitting a new instruction or message.
 - Respects `prefers-reduced-motion: reduce` by disabling major animations.
 
+## Telemetry panel
+
+When DSH Web exposes bottom status/usage data, the skin keeps the original UI layout in place and mirrors the detected global telemetry into a non-interactive bottom-right HUD panel. The panel is intended to show a consistent five-line status block:
+
+```text
+312 轮 · 8732 步
+LLM 2253m42s · 工具调用 972m8s
+首 token 平均 10.5s · 58 tok/s
+缓存命中 97%
+输入 1369M tok · 输出 2.5M tok
+```
+
+The skin treats each original pipe-separated bottom-bar segment as a complete information block, so combined items such as `首 token 平均 ... · ... tok/s` and `输入 ... · 输出 ...` remain intact. It also filters nearby message-level timing text and settings/menu text so the panel stays focused on global session telemetry.
+
 ## Installation
 
 ### From npm
 
-After this package is published to npm:
+Recommended for most users:
 
 ```powershell
 dsh plugin --profile web add dsh-skin-galactic-opera
 ```
 
+npm package page:
+
+```text
+https://www.npmjs.com/package/dsh-skin-galactic-opera
+```
+
+### From GitHub
+
+```powershell
+dsh plugin --profile web add https://github.com/xmnathan/dsh-skin-galactic-opera.git
+```
+
 ### From a local checkout
 
 From the parent directory of this package:
@@ -111,14 +138,6 @@ dsh-skin-galactic-opera/
 - `lib/index.js`: host-side no-op entry.
 - `lib/client.js`: browser-side theme, decoration, and interaction implementation.
 
-## GitHub topics
-
-Recommended repository topics:
-
-```text
-dsh deepseek-harness dsh-plugin dsh-skin dsh-theme space-opera sci-fi dark-theme hud web-ui
-```
-
 ## License
 
 MIT

package/lib/client.js

@@ -148,6 +148,10 @@ body.dsh-skin-galactic-opera [class*="Frame"] {
   background-color: transparent !important;
 }
 
+body.dsh-skin-galactic-opera :is([role="dialog"], [role="menu"], [role="listbox"], [role="tooltip"], [popover], [data-radix-popper-content-wrapper]) {
+  z-index: 2147483647 !important;
+}
+
 body.dsh-skin-galactic-opera [class*="sidebar"],
 body.dsh-skin-galactic-opera [class*="Sidebar"] {
   background:
@@ -619,6 +623,100 @@ body.dsh-skin-galactic-opera * {
   scrollbar-color: rgba(125, 227, 255, 0.42) rgba(5, 7, 17, 0.40);
 }
 
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-source-hidden {
+  opacity: 0 !important;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[hidden] {
+  display: none !important;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel {
+  position: fixed;
+  right: max(18px, 2.4vmin);
+  bottom: max(18px, 2.4vmin);
+  z-index: 2147483644;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: min(260px, 36vw);
+  max-height: none;
+  overflow: visible;
+  padding: 19px 12px 12px;
+  border: 1px solid rgba(125,227,255,0.48);
+  border-left-color: rgba(255,207,92,0.62);
+  border-bottom-color: rgba(255,71,120,0.36);
+  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 14px);
+  color: rgba(248,251,255,0.92);
+  background:
+    linear-gradient(135deg, rgba(255,207,92,0.20) 0 10px, transparent 11px),
+    linear-gradient(315deg, rgba(125,227,255,0.18) 0 12px, transparent 13px),
+    linear-gradient(180deg, rgba(6,10,26,0.92), rgba(10,17,42,0.84));
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.07),
+    inset 0 0 24px rgba(125,227,255,0.09),
+    0 0 28px rgba(125,227,255,0.22),
+    0 0 52px rgba(255,71,120,0.10);
+  backdrop-filter: blur(12px) saturate(1.35);
+  -webkit-backdrop-filter: blur(12px) saturate(1.35);
+  pointer-events: none;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::before {
+  content: "TELEMETRY";
+  position: absolute;
+  left: 14px;
+  top: 5px;
+  color: rgba(255,207,92,0.82);
+  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  letter-spacing: 0.20em;
+  text-shadow: 0 0 10px rgba(255,207,92,0.42);
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::after {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  border: 1px solid rgba(125,227,255,0.16);
+  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 11px);
+  background:
+    repeating-linear-gradient(90deg, transparent 0 18px, rgba(125,227,255,0.045) 19px, transparent 20px 36px),
+    linear-gradient(90deg, rgba(125,227,255,0.10), transparent 30%, rgba(255,71,120,0.06));
+  pointer-events: none;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-row {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 0;
+  min-width: 0;
+  padding: 3px 0 3px 9px;
+  border-left: 2px solid rgba(125,227,255,0.46);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  text-shadow: 0 0 10px rgba(125,227,255,0.30);
+  white-space: nowrap;
+}
+
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-value {
+  flex: 0 0 auto;
+  color: rgba(248,251,255,0.96);
+  font-size: 10.5px;
+  line-height: 1.25;
+  letter-spacing: 0.035em;
+  text-align: right;
+}
+
+body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
+  flex: 1 1 auto;
+  text-align: left;
+  white-space: nowrap;
+}
+
 @keyframes dsh-skin-stars-drift {
   from { transform: translate3d(0, 0, 0); }
   to { transform: translate3d(-115px, 115px, 0); }
@@ -957,6 +1055,187 @@ body.dsh-skin-galactic-opera * {
 			};
 		}
 
+		function installTelemetryPanel() {
+			if (typeof document === "undefined" || typeof window === "undefined") return () => {};
+			const telemetryPattern = /(?:\d[\d.,KkMm%/]*\s*轮\s*[·•]?\s*\d[\d.,KkMm%/]*\s*步)|(?:\d[\d.,KkMm%/]*\s*(?:rounds?|turns?)\s*[·•]?\s*\d[\d.,KkMm%/]*\s*steps?)|LLM\b|工具调用|(?:首\s*)?(?:token|tokens|tok|toks)\s*平均|(?:token|tokens|tok|toks)\/s|缓存命中|缓存|cache\b|cached\b|输入|输出|prompt\b|completion\b/i;
+			const skipSelector = `#${DECOR_ID}, style, script, textarea, input, select, button, [role=button], [aria-haspopup], [contenteditable=true], [role=dialog], [role=menu], [role=listbox], [role=tooltip], [popover], .dsh-skin-pulse, .dsh-skin-telemetry-panel`;
+			const editableDescendantSelector = "textarea, input, select, [contenteditable=true]";
+			let currentSources = new Set();
+			let lastText = "";
+			let frame = 0;
+			const panel = document.createElement("div");
+			panel.className = "dsh-skin-telemetry-panel";
+			panel.setAttribute("aria-hidden", "true");
+			panel.hidden = true;
+			document.body.appendChild(panel);
+			const isSkippable = (element) => element.closest(skipSelector) !== null;
+			const hasEditableDescendant = (element) => element.querySelector(editableDescendantSelector) !== null;
+			const getTelemetryText = (element) => (element.innerText || element.textContent || "").replace(/\s+/g, " ").trim();
+			const scoreCandidate = (element) => {
+				if (!(element instanceof HTMLElement) || isSkippable(element) || hasEditableDescendant(element)) return 0;
+				const rect = element.getBoundingClientRect();
+				const compactBottomBar = rect.height <= 46 && rect.width <= window.innerWidth && rect.bottom > window.innerHeight - 150;
+				if (rect.width < 12 || rect.height < 8 || (!compactBottomBar && rect.width > Math.min(620, window.innerWidth * 0.72)) || rect.height > 86) return 0;
+				if (rect.bottom < window.innerHeight - 170) return 0;
+				const text = getTelemetryText(element);
+				if (text.length < 2 || text.length > 360 || !telemetryPattern.test(text) || !/\d/.test(text)) return 0;
+				if (/设置\s+设置\s+通用设置|Cmd\/Ctrl\+Enter|使用另一行|排队发送|Agent\s+预设/i.test(text)) return 0;
+				let score = compactBottomBar ? 4 : 1;
+				if (rect.bottom > window.innerHeight - 72) score += 3;
+				if (rect.right > window.innerWidth * 0.45) score += 1;
+				if (/token|tokens|tok|toks/i.test(text)) score += 3;
+				if (/调用|消耗|上下文|usage|context|缓存|命中|输入|输出/i.test(text)) score += 2;
+				if (/轮次|轮|步骤|步数|步|steps?|rounds?|turns?/i.test(text)) score += 2;
+				if (/[·•|；;]/.test(text)) score += 2;
+				if (/button|input|textarea|select/i.test(element.tagName)) score -= 4;
+				return score;
+			};
+			const chooseTelemetryElements = () => {
+				const xs = [0.10, 0.22, 0.34, 0.46, 0.58, 0.70, 0.82, 0.94];
+				const ys = [18, 38, 62, 90, 122, 150];
+				const candidates = new Map();
+				for (const xRatio of xs) for (const yOffset of ys) {
+					const x = window.innerWidth * xRatio;
+					const y = window.innerHeight - yOffset;
+					if (y < 0) continue;
+					for (const base of document.elementsFromPoint(x, y)) {
+						let element = base;
+						for (let depth = 0; element instanceof HTMLElement && depth < 8; depth += 1, element = element.parentElement) {
+							const score = scoreCandidate(element);
+							if (score > 0) candidates.set(element, Math.max(candidates.get(element) ?? 0, score));
+						}
+					}
+				}
+				return [...candidates]
+					.sort(([a, aScore], [b, bScore]) => {
+						if (bScore !== aScore) return bScore - aScore;
+						const ar = a.getBoundingClientRect();
+						const br = b.getBoundingClientRect();
+						return ar.top - br.top || ar.left - br.left;
+					})
+					.filter(([element], index, entries) => !entries.slice(0, index).some(([selected]) => selected.contains(element) || element.contains(selected)))
+					.slice(0, 10)
+					.map(([element]) => element)
+					.sort((a, b) => {
+						const ar = a.getBoundingClientRect();
+						const br = b.getBoundingClientRect();
+						return ar.top - br.top || ar.left - br.left;
+					});
+			};
+			const splitTelemetryRows = (text) => {
+				const normalized = text
+					.replace(/\s*([|；;])\s*/g, " | ")
+					.replace(/\s*([·•])\s*/g, " $1 ")
+					.replace(/\s{2,}/g, " ")
+					.trim();
+				const hasExplicitBlocks = /[|；;]/.test(normalized);
+				const strongParts = normalized.split(/\s+\|\s+|\s*；\s*|\s*;\s*/).map((part) => part.trim()).filter(Boolean);
+				const labelBoundary = /\s+(?=(?:LLM\b|工具调用|缓存命中|缓存|命中|模型|费用|上下文|输入|context\b|usage\b|model\b|cost\b|cache\b|cached\b|prompt\b))/gi;
+				const parts = hasExplicitBlocks ? strongParts : strongParts.flatMap((part) => part
+					.replace(labelBoundary, " | ")
+					.split(/\s+\|\s+/)
+					.map((item) => item.trim())
+					.filter(Boolean));
+				const rows = [];
+				const isRoundOnly = (value) => /^[\d.,KkMm%/]+\s*(?:轮|rounds?|turns?)$/i.test(value);
+				const isStepOnly = (value) => /^[\d.,KkMm%/]+\s*(?:步|steps?)$/i.test(value);
+				const isFirstTokenPrefix = (value) => /^首$/i.test(value);
+				const isTokenAverage = (value) => /^(?:首\s*)?(?:token|tokens|tok|toks)\s*平均(?:\s|[:：]|\d|$)/i.test(value);
+				const isTokenSpeedUnit = (value) => /^(?:token|tokens|tok|toks)\/s$/i.test(value);
+				const isInputOnly = (value) => /^(?:输入|prompt\b)/i.test(value);
+				const isOutputOnly = (value) => /^(?:输出|completion\b)/i.test(value);
+				const isTelemetryRow = (value) => {
+					if (!/\d/.test(value)) return false;
+					if (/^\d{1,2}:\d{2}\b|\b\d{1,2}:\d{2}\b\s*[·•]|用时|发送|排队|Cmd\/Ctrl/i.test(value)) return false;
+					return /(?:\d[\d.,KkMm%/]*\s*轮\s*[·•]?\s*\d[\d.,KkMm%/]*\s*步)|(?:\d[\d.,KkMm%/]*\s*(?:rounds?|turns?)\s*[·•]?\s*\d[\d.,KkMm%/]*\s*steps?)|^LLM\b|^工具调用|^(?:首\s*)?(?:token|tokens|tok|toks)\s*平均(?:\s|[:：]|\d|$)|^(?:缓存命中|缓存|cache\b|cached\b)|^(?:输入|输出|prompt\b|completion\b)/i.test(value);
+				};
+				for (let index = 0; index < parts.length; index += 1) {
+					const part = parts[index];
+					const next = parts[index + 1];
+					const afterNext = parts[index + 2];
+					if (next !== undefined && isFirstTokenPrefix(part) && isTokenAverage(next)) {
+						if (afterNext !== undefined && isTokenSpeedUnit(afterNext)) {
+							rows.push(`${part} ${next} ${afterNext}`);
+							index += 2;
+						} else {
+							rows.push(`${part} ${next}`);
+							index += 1;
+						}
+						continue;
+					}
+					if (next !== undefined && isTokenAverage(part) && isTokenSpeedUnit(next)) {
+						rows.push(`${part} ${next}`);
+						index += 1;
+						continue;
+					}
+					if (next !== undefined && isRoundOnly(part) && isStepOnly(next)) {
+						rows.push(`${part} · ${next}`);
+						index += 1;
+						continue;
+					}
+					if (next !== undefined && isInputOnly(part) && isOutputOnly(next)) {
+						rows.push(`${part} · ${next}`);
+						index += 1;
+						continue;
+					}
+					rows.push(part);
+				}
+				const firstMatch = (predicate) => rows.find((row) => isTelemetryRow(row) && predicate(row));
+				const roundRow = firstMatch((row) => /(?:\d[\d.,KkMm%/]*\s*轮\s*[·•]?\s*\d[\d.,KkMm%/]*\s*步)|(?:\d[\d.,KkMm%/]*\s*(?:rounds?|turns?)\s*[·•]?\s*\d[\d.,KkMm%/]*\s*steps?)/i.test(row));
+				const llmRow = firstMatch((row) => /^LLM\b/i.test(row));
+				const toolRow = firstMatch((row) => /^工具调用/i.test(row));
+				const durationRow = llmRow !== undefined && toolRow !== undefined && !/工具调用/i.test(llmRow) ? `${llmRow} · ${toolRow}` : llmRow ?? toolRow;
+				const firstTokenRow = firstMatch((row) => /^(?:首\s*)?(?:token|tokens|tok|toks)\s*平均(?:\s|[:：]|\d|$)/i.test(row));
+				const cacheRow = firstMatch((row) => /^(?:缓存命中|缓存|cache\b|cached\b)/i.test(row));
+				const inputOutputRow = firstMatch((row) => /^(?:输入|prompt\b)/i.test(row) && /(?:输出|completion\b)/i.test(row))
+					?? (() => {
+						const inputRow = firstMatch((row) => /^(?:输入|prompt\b)/i.test(row));
+						const outputRow = firstMatch((row) => /^(?:输出|completion\b)/i.test(row));
+						return inputRow !== undefined && outputRow !== undefined ? `${inputRow} · ${outputRow}` : inputRow ?? outputRow;
+					})();
+				const fixedRows = [roundRow, durationRow, firstTokenRow, cacheRow, inputOutputRow].filter(Boolean);
+				return fixedRows.slice(0, 5);
+			};
+			const renderPanel = (text) => {
+				const rows = splitTelemetryRows(text);
+				panel.hidden = rows.length === 0;
+				panel.replaceChildren(...rows.map((text) => {
+					const row = document.createElement("div");
+					row.className = "dsh-skin-telemetry-row";
+					const metric = document.createElement("span");
+					metric.className = "dsh-skin-telemetry-value dsh-skin-telemetry-value-full";
+					metric.textContent = text;
+					row.append(metric);
+					return row;
+				}));
+			};
+			const update = () => {
+				frame = 0;
+				const nextSources = new Set(chooseTelemetryElements());
+				const text = [...nextSources].map(getTelemetryText).filter(Boolean).join(" | ");
+				for (const source of currentSources) if (!nextSources.has(source)) source.classList.remove("dsh-skin-telemetry-source-hidden");
+				for (const source of nextSources) if (!currentSources.has(source)) source.classList.add("dsh-skin-telemetry-source-hidden");
+				currentSources = nextSources;
+				if (text === lastText) return;
+				lastText = text;
+				renderPanel(text);
+			};
+			const schedule = () => {
+				if (frame === 0) frame = requestAnimationFrame(update);
+			};
+			const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver(schedule);
+			schedule();
+			observer?.observe(document.body, { childList: true, subtree: true, characterData: true });
+			window.addEventListener("resize", schedule, { passive: true });
+			return () => {
+				observer?.disconnect();
+				window.removeEventListener("resize", schedule);
+				if (frame !== 0) cancelAnimationFrame(frame);
+				for (const source of currentSources) source.classList.remove("dsh-skin-telemetry-source-hidden");
+				panel.remove();
+			};
+		}
+
 		const inject = ["theme"];
 
 		function apply(ctx) {
@@ -965,7 +1244,9 @@ body.dsh-skin-galactic-opera * {
 				if (typeof document !== "undefined") document.body.classList.add("dsh-skin-galactic-opera");
 				const decor = ensureDecor();
 				const disposeInteractions = installInteractions(decor);
+				const disposeTelemetryPanel = installTelemetryPanel();
 				return () => {
+					disposeTelemetryPanel();
 					disposeInteractions();
 					if (typeof document !== "undefined") document.body.classList.remove("dsh-skin-galactic-opera");
 					decor?.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-skin-galactic-opera",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
   "type": "module",
   "main": "lib/index.js",