dsh-smooth-stream 0.5.0 → 0.6.1

package/lib/index.js

@@ -136,6 +136,196 @@ 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) {
+	const connection = ctx.get("connection");
+	return ctx.effect(() => {
+		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 fence intact.
+* @throws when the kernel exposes neither the fence nor a Web server, so the
+* failure is reported instead of silently leaving the card unreachable.
+*/
+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") throw new Error(`dsh-smooth-stream: connection.requestRejection is unavailable, so ${channel} cannot be mounted behind the connection trust fence`);
+	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,7 +354,9 @@ const STREAM_SETTINGS_NS = "smooth-stream";
 const DEFAULT_STREAM_SETTINGS = {
 	enabled: true,
 	controlScroll: true,
+	motionPreference: "auto",
 	thinkAutoExpand: true,
+	logarithmicFade: true,
 	debugEnabled: false,
 	debugTuning: {
 		revealScale: 1,
@@ -200,7 +392,13 @@ const Config = Schema.object({
 const StreamSettingsSchema = Schema.object({
 	enabled: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.enabled),
 	controlScroll: Schema.boolean().default(DEFAULT_STREAM_SETTINGS.controlScroll),
+	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),
@@ -241,7 +439,9 @@ function apply(ctx, config) {
 					writable: connectionCtx.settings.writable,
 					enabled: settings.enabled,
 					controlScroll: settings.controlScroll,
+					motionPreference: settings.motionPreference,
 					thinkAutoExpand: settings.thinkAutoExpand,
+					logarithmicFade: settings.logarithmicFade,
 					canUpgrade: installation.kind === "npm"
 				};
 			};
@@ -281,6 +481,22 @@ function apply(ctx, config) {
 					};
 					try {
 						const next = payload;
+						if (next.motionPreference !== void 0 && next.motionPreference !== "auto" && next.motionPreference !== "force-smooth" && next.motionPreference !== "force-reduced") return {
+							ok: false,
+							error: {
+								code: "settings-rejected",
+								message: "motionPreference must be one of auto | force-smooth | force-reduced",
+								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,
@@ -293,7 +509,9 @@ function apply(ctx, config) {
 						await scope.update({
 							enabled: next.enabled,
 							controlScroll: next.controlScroll,
+							...next.motionPreference === void 0 ? {} : { motionPreference: next.motionPreference },
 							thinkAutoExpand: next.thinkAutoExpand,
+							...next.logarithmicFade === void 0 ? {} : { logarithmicFade: next.logarithmicFade },
 							...hasDebug ? {
 								debugEnabled: next.debugEnabled,
 								debugTuning: next.debugTuning
@@ -411,7 +629,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.5.0",
+  "version": "0.6.1",
   "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/LogarithmicFade.module.css

@@ -0,0 +1,160 @@
+/* Shared buckets change paint only; original DOM, layout and colors survive. */
+.scope::highlight(dsh-smooth-stream-log-fade-0),
+.scope *::highlight(dsh-smooth-stream-log-fade-0) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 0.00000%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-1),
+.scope *::highlight(dsh-smooth-stream-log-fade-1) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 3.22581%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-2),
+.scope *::highlight(dsh-smooth-stream-log-fade-2) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 6.45161%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-3),
+.scope *::highlight(dsh-smooth-stream-log-fade-3) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 9.67742%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-4),
+.scope *::highlight(dsh-smooth-stream-log-fade-4) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 12.90323%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-5),
+.scope *::highlight(dsh-smooth-stream-log-fade-5) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 16.12903%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-6),
+.scope *::highlight(dsh-smooth-stream-log-fade-6) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 19.35484%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-7),
+.scope *::highlight(dsh-smooth-stream-log-fade-7) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 22.58065%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-8),
+.scope *::highlight(dsh-smooth-stream-log-fade-8) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 25.80645%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-9),
+.scope *::highlight(dsh-smooth-stream-log-fade-9) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 29.03226%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-10),
+.scope *::highlight(dsh-smooth-stream-log-fade-10) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 32.25806%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-11),
+.scope *::highlight(dsh-smooth-stream-log-fade-11) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 35.48387%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-12),
+.scope *::highlight(dsh-smooth-stream-log-fade-12) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 38.70968%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-13),
+.scope *::highlight(dsh-smooth-stream-log-fade-13) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 41.93548%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-14),
+.scope *::highlight(dsh-smooth-stream-log-fade-14) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 45.16129%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-15),
+.scope *::highlight(dsh-smooth-stream-log-fade-15) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 48.38710%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-16),
+.scope *::highlight(dsh-smooth-stream-log-fade-16) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 51.61290%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-17),
+.scope *::highlight(dsh-smooth-stream-log-fade-17) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 54.83871%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-18),
+.scope *::highlight(dsh-smooth-stream-log-fade-18) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 58.06452%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-19),
+.scope *::highlight(dsh-smooth-stream-log-fade-19) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 61.29032%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-20),
+.scope *::highlight(dsh-smooth-stream-log-fade-20) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 64.51613%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-21),
+.scope *::highlight(dsh-smooth-stream-log-fade-21) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 67.74194%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-22),
+.scope *::highlight(dsh-smooth-stream-log-fade-22) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 70.96774%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-23),
+.scope *::highlight(dsh-smooth-stream-log-fade-23) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 74.19355%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-24),
+.scope *::highlight(dsh-smooth-stream-log-fade-24) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 77.41935%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-25),
+.scope *::highlight(dsh-smooth-stream-log-fade-25) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 80.64516%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-26),
+.scope *::highlight(dsh-smooth-stream-log-fade-26) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 83.87097%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-27),
+.scope *::highlight(dsh-smooth-stream-log-fade-27) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 87.09677%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-28),
+.scope *::highlight(dsh-smooth-stream-log-fade-28) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 90.32258%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-29),
+.scope *::highlight(dsh-smooth-stream-log-fade-29) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 93.54839%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-30),
+.scope *::highlight(dsh-smooth-stream-log-fade-30) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 96.77419%, transparent);
+}
+
+.scope::highlight(dsh-smooth-stream-log-fade-31),
+.scope *::highlight(dsh-smooth-stream-log-fade-31) {
+  color: color-mix(in srgb, var(--dsh-smooth-stream-fade-color, currentColor) 100.00000%, transparent);
+}

package/src/client/SmoothStreamCard.module.css

@@ -157,6 +157,40 @@
   outline-offset: 2px;
 }
 
+.choiceRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  margin: 2px 0 0;
+  padding: 0;
+}
+
+.choice {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.choiceInput {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--dsw-alias-brand-primary);
+  cursor: pointer;
+}
+
+.choice:has(.choiceInput:disabled) {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.choiceInput:disabled {
+  cursor: default;
+}
+
 .hint {
   margin: 0;
   font-size: 12px;

package/src/client/SmoothStreamCard.tsx

@@ -84,6 +84,48 @@ export function SmoothStreamCard(props: SmoothStreamCardProps) {
                   </span>
                   <span className={css.hint}>{t('controlScrollHint')}</span>
                 </label>
+                <label className={state.enabled ? css.field : `${css.field} ${css.fieldDisabled}`}>
+                  <span className={css.fieldHead}>
+                    <span className={css.label}>{t('logarithmicFade')}</span>
+                    <input
+                      type="checkbox"
+                      className={css.toggle}
+                      checked={state.logarithmicFade}
+                      disabled={!state.writable || state.saving || !state.enabled}
+                      onChange={(event) => { props.edit({ logarithmicFade: event.target.checked }) }}
+                    />
+                  </span>
+                  <span className={css.hint}>{t('logarithmicFadeHint')}</span>
+                </label>
+                {/* Motion preference is a radio group, so this row is a div:
+                    nesting the choice labels inside a field <label> would be
+                    illegal HTML (label within label) and browsers route the
+                    inner click away, so React never sees onChange. */}
+                <div className={state.enabled ? css.field : `${css.field} ${css.fieldDisabled}`}>
+                  <span className={css.fieldHead}>
+                    <span className={css.label}>{t('motionPreference')}</span>
+                  </span>
+                  <span className={css.hint}>{t('motionPreferenceHint')}</span>
+                  <span className={css.choiceRow} role="radiogroup" aria-label={t('motionPreference')}>
+                    {([
+                      ['auto', 'motionAuto', 'motionAutoHint'],
+                      ['force-smooth', 'motionForceSmooth', 'motionForceSmoothHint'],
+                      ['force-reduced', 'motionForceReduced', 'motionForceReducedHint'],
+                    ] as const).map(([value, label, hint]) => (
+                      <label key={value} className={css.choice} title={t(hint)}>
+                        <input
+                          type="radio"
+                          className={css.choiceInput}
+                          name="smooth-stream-motion"
+                          checked={state.motionPreference === value}
+                          disabled={!state.writable || state.saving || !state.enabled}
+                          onChange={() => { props.edit({ motionPreference: value }) }}
+                        />
+                        {t(label)}
+                      </label>
+                    ))}
+                  </span>
+                </div>
                 <label className={state.enabled ? css.field : `${css.field} ${css.fieldDisabled}`}>
                   <span className={css.fieldHead}>
                     <span className={css.label}>{t('thinkAutoExpand')}</span>