dsh-smooth-stream 0.6.0 → 0.7.0

package/lib/index.js

@@ -7,7 +7,7 @@ import { spawn } from "node:child_process";
 /** Defaults shared by the Host schema and the client-side fallback. */
 const DEFAULT_STREAM_CONFIG = {
 	mode: "typewriter",
-	preset: "balanced",
+	preset: "silky",
 	revealCharsPerSec: 80,
 	scrollSpeedPxPerSec: 48,
 	maxScrollSpeedPxPerSec: 1e3
@@ -136,6 +136,214 @@ function updateNpmProfilePackage(profileDir, packageName) {
 	});
 }
 //#endregion
+//#region src/settings-channel.ts
+/** Largest request body this channel buffers; settings payloads are tiny. */
+const MAX_REQUEST_BYTES = 1 << 20;
+/** Endpoint segment shape accepted by the Connection router, mirrored here. */
+const ENDPOINT_SEGMENT = /^[A-Za-z0-9_$.-]+$/;
+/** Envelope discriminator the browser caller sends. */
+const CLIENT_REQUEST = "client-request";
+/** Envelope discriminator the browser caller expects back. */
+const SERVER_RESPONSE = "server-response";
+/**
+* Register the settings RPC channel on the most capable path the kernel has.
+* The registration is an effect of `ctx`, so the caller's fiber owns the
+* channel's lifetime on either path.
+* @param ctx - Host context carrying `connection` and, when composed, `webServer`.
+* @param channel - absolute channel prefix, e.g. `/smooth-stream`.
+* @param handler - decoded endpoint handler for every endpoint on the channel.
+* @returns Disposer that withdraws the channel.
+*/
+function registerSettingsChannel(ctx, channel, handler) {
+	let connection;
+	try {
+		connection = ctx.get("connection");
+	} catch {
+		connection = void 0;
+	}
+	return ctx.effect(() => {
+		try {
+			const direct = mountDirectRoute(ctx, connection, channel, handler);
+			if (direct !== void 0) return direct;
+		} catch {}
+		const viaService = tryServiceChannel(connection, channel, handler);
+		if (viaService !== void 0) return viaService;
+		return mountDirectRoute(ctx, connection, channel, handler);
+	}, `dsh-smooth-stream: ${channel} RPC channel`);
+}
+/**
+* Try the service-owned registration, which is the only path that also carries
+* the kernel's own channel policy.
+* @returns Disposer on success, `undefined` when the kernel cannot mount it.
+*/
+function tryServiceChannel(connection, channel, handler) {
+	const rpc = connection?.rpc;
+	if (rpc === void 0 || typeof rpc.handle !== "function") return void 0;
+	try {
+		const release = rpc.handle(channel, handler, { authority: "loopback" });
+		if (typeof release !== "function") return void 0;
+		return () => {
+			release();
+		};
+	} catch (error) {
+		console.warn(`[dsh-smooth-stream] connection.rpc.handle() could not mount ${channel}; falling back to a directly registered route`, error);
+		return;
+	}
+}
+/**
+* Mount the channel prefix on the Web server.
+*
+* With the connection service reachable the route sits behind the connection
+* trust fence. On dsh 0.2.x the connection service is unresolvable from a
+* plugin scope, so the route is then served unfenced (loopback + the app's
+* own token gate only) with a warning — the same trade-off the skill center
+* plugin ships on 0.2.x.
+* @throws fail-closed when the connection service is reachable but cannot
+* fence, so the channel is never exposed without the trust policy.
+*/
+function mountDirectRoute(ctx, connection, channel, handler) {
+	const webServer = ctx.get("webServer");
+	const reject = connection?.requestRejection;
+	if (webServer === void 0 || typeof webServer.register !== "function") throw new Error(`dsh-smooth-stream: webServer is unavailable, so ${channel} cannot be mounted`);
+	if (typeof reject !== "function") {
+		if (connection !== void 0) throw new Error(`dsh-smooth-stream: connection.requestRejection is unavailable, so ${channel} cannot be mounted behind the connection trust fence`);
+		console.warn(`[dsh-smooth-stream] ${channel} mounted without the connection trust fence (dsh 0.2.x: the connection service is not injectable here); loopback and the app token gate remain the only protections`);
+	}
+	return webServer.register({
+		kind: "prefix",
+		path: channel,
+		handler: async (req, res) => {
+			const rejection = reject?.call(connection, req);
+			if (rejection !== void 0) {
+				res.writeHead(rejection);
+				res.end(rejection === 401 ? "unauthorized" : "forbidden");
+				return;
+			}
+			await answer(req, res, channel, handler);
+		}
+	});
+}
+/**
+* Decode one request envelope, dispatch it, and write the decoded reply.
+* Mirrors the Connection router's own carrier rules: method and endpoint must
+* agree, the body must be JSON, and only endpoint failures are results while
+* transport failures are statuses.
+*/
+async function answer(req, res, channel, handler) {
+	const endpoint = endpointOf(channel, req.url);
+	if (req.method !== "POST" || endpoint === void 0) {
+		res.writeHead(404);
+		res.end("not found");
+		return;
+	}
+	if ((req.headers["content-type"] ?? "").split(";", 1)[0]?.trim().toLowerCase() !== "application/json") {
+		res.writeHead(415);
+		res.end("content type must be application/json");
+		return;
+	}
+	const body = await readBody(req);
+	if (body.kind === "too-large") {
+		res.writeHead(413);
+		res.end("request body too large");
+		return;
+	}
+	if (body.kind === "invalid") {
+		res.writeHead(400);
+		res.end("body is not JSON");
+		return;
+	}
+	const envelope = requestEnvelope(body.value);
+	if (envelope === void 0) {
+		write(res, rpcIdOf(body.value), {
+			ok: false,
+			error: {
+				code: "gateway/bad-request",
+				message: "invalid client-request message",
+				details: { issues: [] }
+			}
+		});
+		return;
+	}
+	if (envelope.method !== endpoint) {
+		write(res, envelope.rpcId, {
+			ok: false,
+			error: {
+				code: "gateway/bad-request",
+				message: `method ${JSON.stringify(envelope.method)} does not match endpoint ${JSON.stringify(endpoint)}`,
+				details: { issues: [] }
+			}
+		});
+		return;
+	}
+	const controller = new AbortController();
+	res.on("close", () => {
+		controller.abort();
+	});
+	try {
+		write(res, envelope.rpcId, await handler(endpoint, envelope.payload, controller.signal));
+	} catch (error) {
+		res.writeHead(500);
+		res.end(`handler failure: ${String(error)}`);
+	}
+}
+/**
+* Resolve the channel-relative endpoint for one request path.
+* @returns The endpoint, or `undefined` when the path is outside the channel
+* or carries a segment the Connection router would refuse.
+*/
+function endpointOf(channel, rawUrl) {
+	const pathname = new URL(rawUrl ?? "/", "http://dsh.internal").pathname;
+	if (!pathname.startsWith(`${channel}/`)) return void 0;
+	const endpoint = pathname.slice(channel.length + 1);
+	if (endpoint.split("/").some((segment) => segment === "" || segment === "." || segment === ".." || !ENDPOINT_SEGMENT.test(segment))) return;
+	return endpoint;
+}
+/** Structure one decoded request, rejecting anything the caller could not have sent. */
+function requestEnvelope(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return void 0;
+	const record = value;
+	if (record.type !== CLIENT_REQUEST) return void 0;
+	if (typeof record.rpcId !== "string" || typeof record.method !== "string") return void 0;
+	return {
+		rpcId: record.rpcId,
+		method: record.method,
+		payload: record.payload
+	};
+}
+/** Recover the correlation id of a malformed envelope so the caller can match it. */
+function rpcIdOf(value) {
+	const raw = value?.rpcId;
+	return typeof raw === "string" ? raw : "invalid-request";
+}
+/** Write one decoded reply in the envelope the browser caller parses. */
+function write(res, rpcId, result) {
+	res.writeHead(200, { "content-type": "application/json" });
+	res.end(JSON.stringify({
+		type: SERVER_RESPONSE,
+		rpcId,
+		result
+	}));
+}
+/** Buffer one request body, refusing both malformed JSON and unbounded input. */
+async function readBody(req) {
+	const chunks = [];
+	let bytes = 0;
+	for await (const chunk of req) {
+		const buffer = chunk;
+		bytes += buffer.length;
+		if (bytes > MAX_REQUEST_BYTES) return { kind: "too-large" };
+		chunks.push(buffer);
+	}
+	try {
+		return {
+			kind: "value",
+			value: JSON.parse(Buffer.concat(chunks).toString("utf8"))
+		};
+	} catch {
+		return { kind: "invalid" };
+	}
+}
+//#endregion
 //#region src/settings-api.ts
 /** Shared wire vocabulary for the plugin-owned settings RPC channel. */
 /** Dedicated, loopback-only RPC channel registered by the Host half. */
@@ -164,8 +372,10 @@ const STREAM_SETTINGS_NS = "smooth-stream";
 const DEFAULT_STREAM_SETTINGS = {
 	enabled: true,
 	controlScroll: true,
+	preset: "silky",
 	motionPreference: "auto",
 	thinkAutoExpand: true,
+	logarithmicFade: true,
 	debugEnabled: false,
 	debugTuning: {
 		revealScale: 1,
@@ -201,12 +411,18 @@ const Config = Schema.object({
 const StreamSettingsSchema = Schema.object({
 	enabled: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.enabled),
 	controlScroll: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.controlScroll),
+	preset: Schema.union([
+		Schema.const("realtime"),
+		Schema.const("balanced"),
+		Schema.const("silky")
+	]).default(DEFAULT_STREAM_SETTINGS.preset),
 	motionPreference: Schema.union([
 		Schema.const("auto"),
 		Schema.const("force-smooth"),
 		Schema.const("force-reduced")
 	]).default(DEFAULT_STREAM_SETTINGS.motionPreference),
 	thinkAutoExpand: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.thinkAutoExpand),
+	logarithmicFade: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.logarithmicFade),
 	debugEnabled: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.debugEnabled),
 	debugTuning: Schema.object({
 		revealScale: Schema.number().min(.25).max(2).default(DEFAULT_STREAM_SETTINGS.debugTuning.revealScale),
@@ -234,8 +450,68 @@ function apply(ctx, config) {
 		httpCtx.effect(() => httpCtx.webServer.tapIndex((html) => injectStreamConfig(html, config)), "dsh-smooth-stream: boot config bridge");
 	});
 	ctx.inject(["settings"], (settingsCtx) => {
+		if (typeof settingsCtx.settings.register !== "function") {
+			const view02 = () => ({
+				version: STREAM_PACKAGE_VERSION,
+				installation: inspectProfileInstallation(ctx.baseUrl, STREAM_PACKAGE_NAME).kind,
+				writable: false,
+				enabled: DEFAULT_STREAM_SETTINGS.enabled,
+				controlScroll: DEFAULT_STREAM_SETTINGS.controlScroll,
+				preset: config.preset,
+				motionPreference: DEFAULT_STREAM_SETTINGS.motionPreference,
+				thinkAutoExpand: DEFAULT_STREAM_SETTINGS.thinkAutoExpand,
+				logarithmicFade: DEFAULT_STREAM_SETTINGS.logarithmicFade,
+				canUpgrade: false
+			});
+			const handle02 = async (endpoint) => {
+				if (endpoint === STREAM_SETTINGS_RPC.read) return {
+					ok: true,
+					value: view02()
+				};
+				if (endpoint === STREAM_SETTINGS_RPC.debugRead) return {
+					ok: true,
+					value: {
+						debugEnabled: DEFAULT_STREAM_SETTINGS.debugEnabled,
+						tuning: DEFAULT_STREAM_SETTINGS.debugTuning
+					}
+				};
+				if (endpoint === STREAM_SETTINGS_RPC.upgrade) {
+					if (inspectProfileInstallation(ctx.baseUrl, STREAM_PACKAGE_NAME).kind !== "npm") return {
+						ok: false,
+						error: {
+							code: "internal",
+							message: "smooth-stream is not an npm profile dependency",
+							details: {}
+						}
+					};
+					return {
+						ok: false,
+						error: {
+							code: "internal",
+							message: "upgrade is unavailable until the 0.2.x settings migration lands",
+							details: {}
+						}
+					};
+				}
+				return {
+					ok: false,
+					error: {
+						code: "settings-rejected",
+						message: "smooth-stream settings are read-only on dsh 0.2.x; durable storage moved to profile entry config",
+						details: { ns: STREAM_SETTINGS_NS }
+					}
+				};
+			};
+			ctx.inject(["webServer"], (webCtx) => {
+				registerSettingsChannel(webCtx, STREAM_SETTINGS_RPC_CHANNEL, handle02);
+			});
+			return;
+		}
 		const settingsNamespace = STREAM_SETTINGS_NS;
-		const scope = settingsCtx.settings.register(settingsNamespace, StreamSettingsSchema, { applies: "live" });
+		const scope = settingsCtx.settings.register(settingsNamespace, StreamSettingsSchema, {
+			base: { preset: config.preset },
+			applies: "live"
+		});
 		settingsCtx.inject(["connection"], (connectionCtx) => {
 			let upgrade;
 			const view = () => {
@@ -247,8 +523,10 @@ function apply(ctx, config) {
 					writable: connectionCtx.settings.writable,
 					enabled: settings.enabled,
 					controlScroll: settings.controlScroll,
+					preset: settings.preset ?? config.preset,
 					motionPreference: settings.motionPreference,
 					thinkAutoExpand: settings.thinkAutoExpand,
+					logarithmicFade: settings.logarithmicFade,
 					canUpgrade: installation.kind === "npm"
 				};
 			};
@@ -288,6 +566,14 @@ function apply(ctx, config) {
 					};
 					try {
 						const next = payload;
+						if (next.preset !== void 0 && next.preset !== "realtime" && next.preset !== "balanced" && next.preset !== "silky") return {
+							ok: false,
+							error: {
+								code: "settings-rejected",
+								message: "preset must be one of realtime | balanced | silky",
+								details: { ns: STREAM_SETTINGS_NS }
+							}
+						};
 						if (next.motionPreference !== void 0 && next.motionPreference !== "auto" && next.motionPreference !== "force-smooth" && next.motionPreference !== "force-reduced") return {
 							ok: false,
 							error: {
@@ -296,6 +582,14 @@ function apply(ctx, config) {
 								details: { ns: STREAM_SETTINGS_NS }
 							}
 						};
+						if (next.logarithmicFade !== void 0 && typeof next.logarithmicFade !== "boolean") return {
+							ok: false,
+							error: {
+								code: "settings-rejected",
+								message: "logarithmicFade must be a boolean",
+								details: { ns: STREAM_SETTINGS_NS }
+							}
+						};
 						const hasDebug = next.debugEnabled !== void 0 || next.debugTuning !== void 0;
 						if (hasDebug && (typeof next.debugEnabled !== "boolean" || !validDebugTuning(next.debugTuning))) return {
 							ok: false,
@@ -308,8 +602,10 @@ function apply(ctx, config) {
 						await scope.update({
 							enabled: next.enabled,
 							controlScroll: next.controlScroll,
+							...next.preset === void 0 ? {} : { preset: next.preset },
 							...next.motionPreference === void 0 ? {} : { motionPreference: next.motionPreference },
 							thinkAutoExpand: next.thinkAutoExpand,
+							...next.logarithmicFade === void 0 ? {} : { logarithmicFade: next.logarithmicFade },
 							...hasDebug ? {
 								debugEnabled: next.debugEnabled,
 								debugTuning: next.debugTuning
@@ -427,7 +723,7 @@ function apply(ctx, config) {
 					}
 				};
 			};
-			connectionCtx.effect(() => connectionCtx.connection.rpc.handle(STREAM_SETTINGS_RPC_CHANNEL, handle, { authority: "loopback" }), "dsh-smooth-stream: settings RPC");
+			registerSettingsChannel(connectionCtx, STREAM_SETTINGS_RPC_CHANNEL, handle);
 		});
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-smooth-stream",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Fluid streaming rendering and silky scrolling for DeepSeek Harness replies, including Markdown, code blocks, tables, and tool results.",
   "license": "MIT",
   "type": "module",

package/src/client/AgentRowEntrance.module.css

@@ -10,13 +10,12 @@
 
 .surface[data-entrance='active'] {
   animation: dsh-smooth-stream-agent-row-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
-  will-change: opacity, transform;
+  will-change: opacity;
 }
 
 @keyframes dsh-smooth-stream-agent-row-in {
   0% {
     opacity: 0;
-    transform: translate3d(0, 4px, 0);
     clip-path: inset(0 100% 0 0);
   }
 
@@ -27,7 +26,6 @@
 
   100% {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
     clip-path: inset(0 0 0 0);
   }
 }
@@ -36,7 +34,6 @@
   .surface[data-entrance='active'] {
     animation: none;
     opacity: 1;
-    transform: none;
     clip-path: none;
     will-change: auto;
   }

package/src/client/AnimatedDisclosure.tsx

@@ -8,7 +8,7 @@
 // row attribute and the Think chrome keep working unchanged.
 
 import { type KeyboardEvent, type ReactNode } from 'react'
-import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconChevronDown } from './harnessIcons.ts'
 import css from './TypewriterAssistantNodeView.module.css'
 
 /** Class-name join for optional overlay classes over the chrome defaults. */
@@ -74,11 +74,11 @@ export function AnimatedDisclosure({
       >
         <span className={cx(css.disclosureLeading, leadingClassName)}>
           {open
-            ? <IconChevronDownOutline14 className={chevronClassName} />
+            ? <IconChevronDown className={chevronClassName} />
             : (
               <>
                 <span className={css.disclosureIconIdle}>{icon}</span>
-                <IconChevronDownOutline14 className={cx(chevronClassName, css.disclosureChevronHover)} />
+                <IconChevronDown className={cx(chevronClassName, css.disclosureChevronHover)} />
               </>
             )}
         </span>

package/src/client/DebugPanel.tsx

@@ -2,20 +2,26 @@ import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
-import {
-  IconCloseOutline16,
-  IconCodeOutline16,
-  IconCopyOutline16,
-  IconQuestionOutline14,
-  IconRefreshOutline16,
-  Tooltip,
-  writeClipboard,
-} from '@deepseek-ai/dsh-client-ui-primitives'
+import { Tooltip, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconClose, IconCode, IconCopy, IconQuestion, IconRefreshSmall } from './harnessIcons.ts'
 import type { StreamDebugTuning } from '../settings.ts'
-import type { DebugPanelFace, DebugRuntimeState } from './debugRuntime.ts'
+import type { DebugPanelFace, DebugRuntimeState, FollowTerminalPhase } from './debugRuntime.ts'
 import type { NS } from './locales.ts'
 import css from './DebugPanel.module.css'
 
+/**
+ * Locale key per terminal-follow phase. `terminal-drain` and `host-cascade`
+ * are the two that must never be confused: the first is the engine finishing
+ * ordinary text, the second is a hostile host commit that needs temporary
+ * credit.
+ */
+const PHASE_LABEL: Record<FollowTerminalPhase, Parameters<PropsLocale<typeof NS>['t']>[0]> = {
+  'live': 'debugPhaseLive',
+  'terminal-drain': 'debugPhaseDrain',
+  'host-cascade': 'debugPhaseCascade',
+  'natural': 'debugPhaseNatural',
+}
+
 export type DebugPanelProps =
   PropsRuntime<'conversation.session.header.utilities'>
   & PropsLocale<typeof NS>
@@ -93,7 +99,7 @@ function TuningField({
               aria-label={label}
               title={t(control.tip)}
             >
-              <IconQuestionOutline14 />
+              <IconQuestion />
             </button>
           </Tooltip>
         </span>
@@ -165,7 +171,7 @@ export function DebugPanel(props: DebugPanelProps) {
         <span className={css.state}>{t(live ? 'debugLive' : 'debugIdle')}</span>
         {state.dirty ? <span className={css.unsaved}>{t('debugUnsaved')}</span> : null}
         <button className={css.iconButton} type="button" title={t('debugCopy')} aria-label={t('debugCopy')} onClick={() => { void copyDiagnostics() }}>
-          <IconCopyOutline16 />
+          <IconCopy />
         </button>
         <button
           className={css.iconButton}
@@ -179,7 +185,7 @@ export function DebugPanel(props: DebugPanelProps) {
             props.save()
           }}
         >
-          <IconCloseOutline16 />
+          <IconClose />
         </button>
         <span className={css.visuallyHidden} aria-live="polite">{copied ? t('debugCopied') : ''}</span>
       </header>
@@ -199,6 +205,19 @@ export function DebugPanel(props: DebugPanelProps) {
             <Metric label={t('debugVelocity')} value={`${fixed(metrics.followVelocityPxPerSec, 0)} px/s`} />
             <Metric label={t('debugReserve')} value={`${fixed(metrics.followReservePx)} px`} />
             <Metric label={t('debugCapacity')} value={`${fixed(metrics.followCapacityPx)} px`} />
+            <Metric
+              label={t('debugTerminalPhase')}
+              value={t(PHASE_LABEL[metrics.followTerminalPhase])}
+              tone={metrics.followTerminalPhase === 'host-cascade' ? 'warn' : undefined}
+            />
+            <Metric label={t('debugOwnedRunway')} value={`${fixed(metrics.followRunwayPx)} px`} />
+            <Metric label={t('debugTerminalBudget')} value={`${fixed(metrics.followTerminalBudgetPx)} px`} />
+            <Metric label={t('debugBaselineShift')} value={`${fixed(metrics.followBaselineShiftPx)} px`} />
+            <Metric
+              label={t('debugAnchorDelta')}
+              value={metrics.followAnchorDeltaPx === null ? '—' : `${fixed(metrics.followAnchorDeltaPx)} px`}
+              tone={(metrics.followAnchorDeltaPx ?? 0) > 0.35 ? 'warn' : undefined}
+            />
             <Metric label={t('debugAppliedScale')} value={`${fixed(metrics.followRevealScale, 2)}x`} />
           </dl>
         </section>
@@ -220,7 +239,7 @@ export function DebugPanel(props: DebugPanelProps) {
 
       <footer className={css.footer}>
         <button className={css.secondaryButton} type="button" disabled={!state.writable} onClick={props.reset}>
-          <IconRefreshOutline16 />
+          <IconRefreshSmall />
           {t('debugReset')}
         </button>
         <span className={css.footerSpacer} />
@@ -240,7 +259,7 @@ export function DebugPanel(props: DebugPanelProps) {
         title={t('debugPanelToggle')}
         onClick={() => { setOpen(current => !current) }}
       >
-        <IconCodeOutline16 />
+        <IconCode />
       </button>
       {typeof document === 'undefined' || panel === null ? null : createPortal(panel, document.body)}
     </>