dsh-smooth-stream 0.6.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. */
@@ -166,6 +356,7 @@ const DEFAULT_STREAM_SETTINGS = {
 	controlScroll: true,
 	motionPreference: "auto",
 	thinkAutoExpand: true,
+	logarithmicFade: true,
 	debugEnabled: false,
 	debugTuning: {
 		revealScale: 1,
@@ -207,6 +398,7 @@ const StreamSettingsSchema = Schema.object({
 		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),
@@ -249,6 +441,7 @@ function apply(ctx, config) {
 					controlScroll: settings.controlScroll,
 					motionPreference: settings.motionPreference,
 					thinkAutoExpand: settings.thinkAutoExpand,
+					logarithmicFade: settings.logarithmicFade,
 					canUpgrade: installation.kind === "npm"
 				};
 			};
@@ -296,6 +489,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,
@@ -310,6 +511,7 @@ function apply(ctx, config) {
 							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
@@ -427,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.6.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.tsx

@@ -84,6 +84,19 @@ 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

package/src/client/TypewriterAssistantNodeView.tsx

@@ -6,6 +6,7 @@ import { AnimatedDisclosure } from './AnimatedDisclosure.tsx'
 import { notifyFollowCommit } from './teleprompterGlide.ts'
 import { useSmoothStreamContent, type StreamSmoothingPreset } from './useSmoothStreamContent.ts'
 import { useFpsGuard } from './useFpsGuard.ts'
+import { useLogarithmicFade } from './useLogarithmicFade.ts'
 import { FollowHost } from './FollowHost.tsx'
 import { DEFAULT_STREAM_CONFIG, type StreamMode } from '../config.ts'
 import { DEFAULT_STREAM_SETTINGS, type StreamMotionPreference } from '../settings.ts'
@@ -45,6 +46,7 @@ function useMotionReduced(preference: StreamMotionPreference): boolean {
 
 interface AnimatedMarkdownTextProps extends MarkdownProps {
   streaming: boolean
+  logarithmicFade: boolean
   /** Whether the resolved reduced-motion gate keeps the reveal engine off. */
   motionReduced: boolean
   /** True on the last text block: that block owns conversation follow. */
@@ -307,6 +309,7 @@ function AnimatedMarkdownText({
   labels,
   fileMentions,
   streaming,
+  logarithmicFade,
   motionReduced,
   ownFollow,
   followSpeedCpsRef,
@@ -337,6 +340,7 @@ function AnimatedMarkdownText({
   })
   const shown = reduced ? text : displayed
   const live = typing && !reduced
+  useLogarithmicFade(followRootRef, logarithmicFade && !reduced, live, speedCpsRef)
 
   useEffect(() => {
     const root = followRootRef.current
@@ -494,6 +498,7 @@ function AnimatedReasoning({
   preset,
   thinkAutoExpand,
   motionReduced,
+  logarithmicFade,
   shouldHoldBack,
   followSpeedCpsRef,
   followRevealScaleRef,
@@ -504,6 +509,7 @@ function AnimatedReasoning({
   preset: StreamSmoothingPreset
   thinkAutoExpand: boolean
   motionReduced: boolean
+  logarithmicFade: boolean
   shouldHoldBack: () => boolean
   followSpeedCpsRef?: { current: number } | undefined
   followRevealScaleRef?: { current: number } | undefined
@@ -513,6 +519,9 @@ function AnimatedReasoning({
   const [expanded, setExpanded] = useState(running && thinkAutoExpand)
   const [autoClosed, setAutoClosed] = useState(false)
   const summaryRef = useRef<HTMLSpanElement>(null)
+  const fadeRootRef = useRef<HTMLDivElement>(null)
+  const localFadeSpeedRef = useRef(35)
+  const fadeSpeedRef = followSpeedCpsRef ?? localFadeSpeedRef
   const commitAnchorRef = useRef<HTMLDivElement>(null)
   // The running→false flip is the AUTO-close: it collapses instantly and the
   // follower's settle spring absorbs the height step. A later manual toggle
@@ -521,12 +530,13 @@ function AnimatedReasoning({
     enabled: running && !reduced,
     preset,
     shouldHoldBack,
-    speedCpsRef: followSpeedCpsRef,
+    speedCpsRef: fadeSpeedRef,
     revealScaleRef: followRevealScaleRef,
     onRevealCommit: () => { notifyFollowCommit(commitAnchorRef.current) },
   })
   const shown = running && !reduced ? displayed : text
   const summary = running ? latestLine(shown) : firstLine(text)
+  useLogarithmicFade(fadeRootRef, logarithmicFade && !reduced && expanded, running, fadeSpeedRef)
 
   useLayoutEffect(() => {
     // Only the running state owns disclosure while auto-expand is on; with it
@@ -576,7 +586,7 @@ function AnimatedReasoning({
             </>
           )}
         >
-          <div className={css.thinkBody}>{shown}</div>
+          <div ref={fadeRootRef} className={css.thinkBody}>{shown}</div>
         </AnimatedDisclosure>
       </div>
     </div>
@@ -600,6 +610,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
   scrollSpeedPxPerSec: _scrollSpeedPxPerSec = DEFAULT_STREAM_CONFIG.scrollSpeedPxPerSec,
   maxScrollSpeedPxPerSec: _maxScrollSpeedPxPerSec = DEFAULT_STREAM_CONFIG.maxScrollSpeedPxPerSec,
   thinkAutoExpand = DEFAULT_STREAM_SETTINGS.thinkAutoExpand,
+  logarithmicFade = DEFAULT_STREAM_SETTINGS.logarithmicFade,
   controlScroll = true,
   motionPreference = DEFAULT_STREAM_SETTINGS.motionPreference,
   node,
@@ -616,6 +627,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
   scrollSpeedPxPerSec?: number
   maxScrollSpeedPxPerSec?: number
   thinkAutoExpand?: boolean
+  logarithmicFade?: boolean
   controlScroll?: boolean
   motionPreference?: StreamMotionPreference
 }) {
@@ -704,6 +716,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
             labels={markdownLabels}
             fileMentions={mentions}
             streaming={streaming}
+            logarithmicFade={logarithmicFade && data.status !== 'interrupted'}
             motionReduced={reduced}
             ownFollow={!streaming && index === lastFollow}
             followSpeedCpsRef={index === lastFollow ? rootSpeedRef : undefined}
@@ -724,6 +737,7 @@ export const TypewriterAssistantNodeView = memo(function TypewriterAssistantNode
               running={streaming && index === last}
               preset={preset}
               thinkAutoExpand={thinkAutoExpand}
+              logarithmicFade={logarithmicFade && data.status !== 'interrupted'}
               motionReduced={reduced}
               shouldHoldBack={shouldHoldBack}
               followSpeedCpsRef={reasoningOwnsSpeed && index === last ? rootSpeedRef : undefined}

package/src/client/index.ts

@@ -159,6 +159,7 @@ class SettingsCell {
       && next.controlScroll === this.value.controlScroll
       && next.motionPreference === this.value.motionPreference
       && next.thinkAutoExpand === this.value.thinkAutoExpand
+      && next.logarithmicFade === this.value.logarithmicFade
       && next.debugEnabled === this.value.debugEnabled
       && next.debugTuning === this.value.debugTuning
     ) return
@@ -270,6 +271,7 @@ export function apply(ctx: ClientContext): void {
       scrollSpeedPxPerSec: config.scrollSpeedPxPerSec,
       maxScrollSpeedPxPerSec: config.maxScrollSpeedPxPerSec,
       thinkAutoExpand: preferences.thinkAutoExpand,
+      logarithmicFade: preferences.logarithmicFade,
       controlScroll: preferences.controlScroll,
       motionPreference: preferences.motionPreference,
     })

package/src/client/locales.ts

@@ -13,6 +13,7 @@ export type SmoothStreamLocaleKey =
   | 'motionForceSmooth' | 'motionForceSmoothHint'
   | 'motionForceReduced' | 'motionForceReducedHint'
   | 'thinkAutoExpand' | 'thinkAutoExpandHint'
+  | 'logarithmicFade' | 'logarithmicFadeHint'
   | 'debugEnabled' | 'debugEnabledHint' | 'debugUnavailable'
   | 'debugPanelTitle' | 'debugPanelToggle' | 'debugPanelClose' | 'debugGuide'
   | 'debugLive' | 'debugIdle' | 'debugUnsaved'
@@ -50,6 +51,8 @@ export const en: Record<SmoothStreamLocaleKey, string> = {
   motionForceReduced: 'Always raw',
   motionForceReducedHint: 'Render raw text even when the system allows motion.',
   thinkAutoExpand: 'Auto-expand thinking',
+  logarithmicFade: 'Logarithmic fade',
+  logarithmicFadeHint: 'Fade new answer and expanded thinking text into view. Follows the motion preference.',
   thinkAutoExpandHint: 'Open the thinking block while it streams. Turn off to keep it collapsed.',
   debugEnabled: 'Show render diagnostics',
   debugEnabledHint: 'Show live streaming and scroll metrics on the right side of the chat. Tune values there, then save them here.',
@@ -138,6 +141,8 @@ export const zh: Record<SmoothStreamLocaleKey, string> = {
   motionForceReduced: '始终原始',
   motionForceReducedHint: '即使系统允许动效，也直接呈现原始文本。',
   thinkAutoExpand: '自动展开思考',
+  logarithmicFade: '对数淡入',
+  logarithmicFadeHint: '让回答正文和展开的思考文字由淡变实，遵循动效偏好。',
   thinkAutoExpandHint: '思考块在流式时自动展开；关闭后保持折叠，可手动展开。',
   debugEnabled: '显示渲染调试面板',
   debugEnabledHint: '在聊天右侧显示流式渲染和滚动的实时参数，可在面板中调节并在这里保存。',

package/src/client/smooth-stream-card-controller.ts

@@ -26,6 +26,7 @@ export interface SmoothStreamCardState {
   controlScroll: boolean
   motionPreference: StreamMotionPreference
   thinkAutoExpand: boolean
+  logarithmicFade: boolean
   debugEnabled: boolean
   debugTuning: StreamDebugTuning
   debugAvailable: boolean
@@ -54,7 +55,7 @@ export class SmoothStreamCardController {
   private readonly store = createSnapshotStore<SmoothStreamCardState>(this.projection())
   private loaded: StreamSettingsView | undefined
   private loadedDebug: StreamDebugSettingsView | undefined
-  private stagedBase: Pick<StreamSettings, 'enabled' | 'controlScroll' | 'motionPreference' | 'thinkAutoExpand'> | undefined
+  private stagedBase: Pick<StreamSettings, 'enabled' | 'controlScroll' | 'motionPreference' | 'thinkAutoExpand' | 'logarithmicFade'> | undefined
   private stagedDebug: Pick<StreamSettings, 'debugEnabled' | 'debugTuning'> | undefined
   private saving = false
   private failed = false
@@ -92,13 +93,14 @@ export class SmoothStreamCardController {
       hooks: { smoothStreamCard: this.store },
       edit: (patch) => {
         if (this.saving) return
-        if (patch.enabled !== undefined || patch.controlScroll !== undefined || patch.motionPreference !== undefined || patch.thinkAutoExpand !== undefined) {
+        if (patch.enabled !== undefined || patch.controlScroll !== undefined || patch.motionPreference !== undefined || patch.thinkAutoExpand !== undefined || patch.logarithmicFade !== undefined) {
           this.stagedBase = {
             ...this.baseValues(),
             ...(patch.enabled === undefined ? {} : { enabled: patch.enabled }),
             ...(patch.controlScroll === undefined ? {} : { controlScroll: patch.controlScroll }),
             ...(patch.motionPreference === undefined ? {} : { motionPreference: patch.motionPreference }),
             ...(patch.thinkAutoExpand === undefined ? {} : { thinkAutoExpand: patch.thinkAutoExpand }),
+            ...(patch.logarithmicFade === undefined ? {} : { logarithmicFade: patch.logarithmicFade }),
           }
         }
         if (this.loadedDebug !== undefined && (patch.debugEnabled !== undefined || patch.debugTuning !== undefined)) {
@@ -143,12 +145,13 @@ export class SmoothStreamCardController {
     }
   }
 
-  private baseValues(): Pick<StreamSettings, 'enabled' | 'controlScroll' | 'motionPreference' | 'thinkAutoExpand'> {
+  private baseValues(): Pick<StreamSettings, 'enabled' | 'controlScroll' | 'motionPreference' | 'thinkAutoExpand' | 'logarithmicFade'> {
     return this.stagedBase ?? {
       enabled: this.loaded?.enabled ?? DEFAULT_STREAM_SETTINGS.enabled,
       controlScroll: this.loaded?.controlScroll ?? DEFAULT_STREAM_SETTINGS.controlScroll,
       motionPreference: this.loaded?.motionPreference ?? DEFAULT_STREAM_SETTINGS.motionPreference,
       thinkAutoExpand: this.loaded?.thinkAutoExpand ?? DEFAULT_STREAM_SETTINGS.thinkAutoExpand,
+      logarithmicFade: this.loaded?.logarithmicFade ?? DEFAULT_STREAM_SETTINGS.logarithmicFade,
     }
   }