dsh-smooth-stream 0.3.4 → 0.4.0

package/lib/index.js

@@ -145,6 +145,8 @@ const STREAM_SETTINGS_RPC_CHANNEL = "/smooth-stream";
 const STREAM_SETTINGS_RPC = {
 	read: "settings.read",
 	write: "settings.write",
+	debugRead: "debug.read",
+	debugWrite: "debug.write",
 	upgrade: "plugin.upgrade"
 };
 //#endregion
@@ -160,7 +162,23 @@ const STREAM_SETTINGS_RPC = {
 /** Settings namespace registered by the Host and served through the plugin RPC. */
 const STREAM_SETTINGS_NS = "smooth-stream";
 /** Defaults shared by the Host schema and the client-side fallback. */
-const DEFAULT_STREAM_SETTINGS = { thinkAutoExpand: true };
+const DEFAULT_STREAM_SETTINGS = {
+	enabled: true,
+	thinkAutoExpand: true,
+	autoCollapse: true,
+	debugEnabled: false,
+	debugTuning: {
+		revealScale: 1,
+		queuePressure: .85,
+		maxRevealCps: 600,
+		springStiffness: 130,
+		springDamping: 24,
+		springMass: 1,
+		runwayPx: 48,
+		reserveResponseMs: 180,
+		backpressureMinScale: .55
+	}
+};
 //#endregion
 //#region src/plugin.ts
 /** Display name shown by the Host loader while the plugin is mounted. */
@@ -180,7 +198,23 @@ const Config = Schema.object({
 * Schema of the user-owned settings section. The Host keeps it in the durable
 * settings provider while the browser edits it through the plugin RPC below.
 */
-const StreamSettingsSchema = Schema.object({ thinkAutoExpand: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.thinkAutoExpand) });
+const StreamSettingsSchema = Schema.object({
+	enabled: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.enabled),
+	thinkAutoExpand: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.thinkAutoExpand),
+	autoCollapse: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.autoCollapse),
+	debugEnabled: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.debugEnabled),
+	debugTuning: Schema.object({
+		revealScale: Schema.number().min(.25).max(2).default(DEFAULT_STREAM_SETTINGS.debugTuning.revealScale),
+		queuePressure: Schema.number().min(0).max(2).default(DEFAULT_STREAM_SETTINGS.debugTuning.queuePressure),
+		maxRevealCps: Schema.number().min(120).max(1e3).default(DEFAULT_STREAM_SETTINGS.debugTuning.maxRevealCps),
+		springStiffness: Schema.number().min(40).max(320).default(DEFAULT_STREAM_SETTINGS.debugTuning.springStiffness),
+		springDamping: Schema.number().min(8).max(80).default(DEFAULT_STREAM_SETTINGS.debugTuning.springDamping),
+		springMass: Schema.number().min(.5).max(3).default(DEFAULT_STREAM_SETTINGS.debugTuning.springMass),
+		runwayPx: Schema.number().min(0).max(120).default(DEFAULT_STREAM_SETTINGS.debugTuning.runwayPx),
+		reserveResponseMs: Schema.number().min(60).max(600).default(DEFAULT_STREAM_SETTINGS.debugTuning.reserveResponseMs),
+		backpressureMinScale: Schema.number().min(.25).max(1).default(DEFAULT_STREAM_SETTINGS.debugTuning.backpressureMinScale)
+	})
+});
 /**
 * Host half: log the resolved configuration and bridge it to the browser
 * half. The web boot graph carries no per-entry config, so the validated
@@ -200,25 +234,40 @@ function apply(ctx, config) {
 			let upgrade;
 			const view = () => {
 				const installation = inspectProfileInstallation(connectionCtx.baseUrl, STREAM_PACKAGE_NAME);
+				const settings = scope.get();
 				return {
 					version: STREAM_PACKAGE_VERSION,
 					installation: installation.kind,
 					writable: connectionCtx.settings.writable,
-					thinkAutoExpand: scope.get().thinkAutoExpand,
+					enabled: settings.enabled,
+					thinkAutoExpand: settings.thinkAutoExpand,
+					autoCollapse: settings.autoCollapse,
 					canUpgrade: installation.kind === "npm"
 				};
 			};
+			const debugView = () => {
+				const settings = scope.get();
+				return {
+					debugEnabled: settings.debugEnabled,
+					tuning: { ...settings.debugTuning }
+				};
+			};
+			const validDebugTuning = (value) => {
+				if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+				const tuning = value;
+				return typeof tuning.revealScale === "number" && tuning.revealScale >= .25 && tuning.revealScale <= 2 && typeof tuning.queuePressure === "number" && tuning.queuePressure >= 0 && tuning.queuePressure <= 2 && typeof tuning.maxRevealCps === "number" && tuning.maxRevealCps >= 120 && tuning.maxRevealCps <= 1e3 && typeof tuning.springStiffness === "number" && tuning.springStiffness >= 40 && tuning.springStiffness <= 320 && typeof tuning.springDamping === "number" && tuning.springDamping >= 8 && tuning.springDamping <= 80 && typeof tuning.springMass === "number" && tuning.springMass >= .5 && tuning.springMass <= 3 && typeof tuning.runwayPx === "number" && tuning.runwayPx >= 0 && tuning.runwayPx <= 120 && typeof tuning.reserveResponseMs === "number" && tuning.reserveResponseMs >= 60 && tuning.reserveResponseMs <= 600 && typeof tuning.backpressureMinScale === "number" && tuning.backpressureMinScale >= .25 && tuning.backpressureMinScale <= 1;
+			};
 			const handle = async (endpoint, payload) => {
 				if (endpoint === STREAM_SETTINGS_RPC.read) return {
 					ok: true,
 					value: view()
 				};
 				if (endpoint === STREAM_SETTINGS_RPC.write) {
-					if (typeof payload !== "object" || payload === null || typeof payload.thinkAutoExpand !== "boolean") return {
+					if (typeof payload !== "object" || payload === null || Array.isArray(payload) || typeof payload.enabled !== "boolean" || typeof payload.thinkAutoExpand !== "boolean" || typeof payload.autoCollapse !== "boolean") return {
 						ok: false,
 						error: {
 							code: "settings-rejected",
-							message: "thinkAutoExpand must be a boolean",
+							message: "enabled, thinkAutoExpand and autoCollapse must be booleans",
 							details: { ns: STREAM_SETTINGS_NS }
 						}
 					};
@@ -231,7 +280,25 @@ function apply(ctx, config) {
 						}
 					};
 					try {
-						await scope.update({ thinkAutoExpand: payload.thinkAutoExpand });
+						const next = payload;
+						const hasDebug = next.debugEnabled !== void 0 || next.debugTuning !== void 0;
+						if (hasDebug && (typeof next.debugEnabled !== "boolean" || !validDebugTuning(next.debugTuning))) return {
+							ok: false,
+							error: {
+								code: "settings-rejected",
+								message: "debugEnabled and debugTuning must be provided together and be valid",
+								details: { ns: STREAM_SETTINGS_NS }
+							}
+						};
+						await scope.update({
+							enabled: next.enabled,
+							thinkAutoExpand: next.thinkAutoExpand,
+							autoCollapse: next.autoCollapse,
+							...hasDebug ? {
+								debugEnabled: next.debugEnabled,
+								debugTuning: next.debugTuning
+							} : {}
+						});
 					} catch {
 						return {
 							ok: false,
@@ -247,6 +314,56 @@ function apply(ctx, config) {
 						value: view()
 					};
 				}
+				if (endpoint === STREAM_SETTINGS_RPC.debugRead) return {
+					ok: true,
+					value: debugView()
+				};
+				if (endpoint === STREAM_SETTINGS_RPC.debugWrite) {
+					if (typeof payload !== "object" || payload === null || Array.isArray(payload)) return {
+						ok: false,
+						error: {
+							code: "settings-rejected",
+							message: "debug settings must be an object",
+							details: { ns: STREAM_SETTINGS_NS }
+						}
+					};
+					const next = payload;
+					if (typeof next.debugEnabled !== "boolean" || !validDebugTuning(next.tuning)) return {
+						ok: false,
+						error: {
+							code: "settings-rejected",
+							message: "debugEnabled and tuning are malformed",
+							details: { ns: STREAM_SETTINGS_NS }
+						}
+					};
+					if (!connectionCtx.settings.writable) return {
+						ok: false,
+						error: {
+							code: "settings-rejected",
+							message: "smooth-stream debug settings are read-only",
+							details: { ns: STREAM_SETTINGS_NS }
+						}
+					};
+					try {
+						await scope.update({
+							debugEnabled: next.debugEnabled,
+							debugTuning: next.tuning
+						});
+					} catch {
+						return {
+							ok: false,
+							error: {
+								code: "settings-rejected",
+								message: "smooth-stream debug settings update failed",
+								details: { ns: STREAM_SETTINGS_NS }
+							}
+						};
+					}
+					return {
+						ok: true,
+						value: debugView()
+					};
+				}
 				if (endpoint === STREAM_SETTINGS_RPC.upgrade) {
 					const installation = inspectProfileInstallation(connectionCtx.baseUrl, STREAM_PACKAGE_NAME);
 					if (installation.kind !== "npm") return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-smooth-stream",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Fluid streaming rendering and silky scrolling for DeepSeek Harness replies, including Markdown, code blocks, tables, and tool results.",
   "license": "MIT",
   "type": "module",
@@ -77,13 +77,6 @@
       ]
     }
   },
-  "scripts": {
-    "build": "tsdown",
-    "build:repro": "esbuild repro/main.tsx --bundle --format=esm --platform=browser --loader:.css=local-css --outfile=repro/bundle.js",
-    "prepare": "tsdown",
-    "test": "vitest run",
-    "typecheck": "tsc -p tsconfig.json --pretty false"
-  },
   "dependencies": {
     "@deepseek-ai/dsh-settings": "0.1.0-rc.6"
   },
@@ -160,5 +153,12 @@
     "tsdown": "^0.22.2",
     "typescript": "^5.9.2",
     "vitest": "^4.1.8"
+  },
+  "scripts": {
+    "benchmark": "node scripts/run-stream-benchmark.mjs",
+    "build": "tsdown",
+    "build:repro": "esbuild repro/main.tsx --bundle --format=esm --platform=browser --loader:.css=local-css --outfile=repro/bundle.js",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --pretty false"
   }
-}
+}

package/src/client/DebugPanel.module.css

@@ -0,0 +1,370 @@
+.trigger,
+.iconButton {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+}
+
+.trigger:hover,
+.iconButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.iconButton:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.triggerActive {
+  border-color: var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.trigger:focus-visible,
+.iconButton:focus-visible,
+.secondaryButton:focus-visible,
+.primaryButton:focus-visible,
+.number:focus-visible,
+.range:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
+.panel {
+  position: fixed;
+  top: 88px;
+  right: 16px;
+  bottom: 16px;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  width: min(328px, calc(100vw - 32px));
+  min-height: 280px;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  box-shadow: 0 12px 32px color-mix(in srgb, var(--dsw-alias-label-primary) 14%, transparent);
+  color: var(--dsw-alias-label-primary);
+}
+
+.panelHeader {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 0 8px 0 14px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+.statusDot {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--dsw-alias-label-caption);
+}
+
+.statusLive {
+  background: var(--dsw-alias-state-success-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent);
+}
+
+.title {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.state,
+.unsaved {
+  flex: none;
+  font-size: 10px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+.unsaved {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.scrollArea {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.section {
+  padding: 14px;
+}
+
+.guide {
+  margin: 0;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.section + .section {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.section h2 {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 16px;
+  margin: 0;
+}
+
+.metric {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+  padding: 5px 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l2) 65%, transparent);
+}
+
+.metric dt {
+  min-width: 0;
+  overflow: hidden;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--dsw-alias-label-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric dd {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--dsw-alias-label-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metric dd[data-tone='good'] {
+  color: var(--dsw-alias-state-success-primary);
+}
+
+.metric dd[data-tone='warn'] {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+.control {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 6px 0;
+}
+
+.controlHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.controlLabel {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  gap: 4px;
+}
+
+.infoButton {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: help;
+}
+
+.infoButton:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.infoButton:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
+.numberWrap {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: 4px;
+}
+
+.number {
+  box-sizing: border-box;
+  width: 68px;
+  height: 26px;
+  padding: 2px 6px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 5px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.unit {
+  width: 30px;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+}
+
+.range {
+  width: 100%;
+  height: 18px;
+  margin: 0;
+  accent-color: var(--dsw-alias-state-business-primary);
+  cursor: pointer;
+}
+
+.range:disabled,
+.number:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.footer {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  min-height: 50px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.footerSpacer {
+  flex: 1;
+}
+
+.secondaryButton,
+.primaryButton {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-height: 30px;
+  padding: 4px 9px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 11px;
+  line-height: 18px;
+  cursor: pointer;
+}
+
+.primaryButton {
+  border-color: transparent;
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+}
+
+.secondaryButton:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.secondaryButton:disabled,
+.primaryButton:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.visuallyHidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .trigger,
+  .iconButton {
+    width: 44px;
+    height: 44px;
+  }
+
+  .panel {
+    top: auto;
+    right: 12px;
+    bottom: max(12px, env(safe-area-inset-bottom));
+    left: 12px;
+    width: auto;
+    max-height: min(70dvh, 640px);
+  }
+
+  .secondaryButton,
+  .primaryButton {
+    min-height: 44px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .statusLive {
+    box-shadow: none;
+  }
+}