dsh-smooth-stream 0.6.1 → 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
@@ -155,8 +155,17 @@ const SERVER_RESPONSE = "server-response";
 * @returns Disposer that withdraws the channel.
 */
 function registerSettingsChannel(ctx, channel, handler) {
-	const connection = ctx.get("connection");
+	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);
@@ -182,20 +191,29 @@ function tryServiceChannel(connection, channel, handler) {
 	}
 }
 /**
-* 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.
+* 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") throw new Error(`dsh-smooth-stream: connection.requestRejection is unavailable, so ${channel} cannot be mounted behind the connection trust fence`);
+	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);
+			const rejection = reject?.call(connection, req);
 			if (rejection !== void 0) {
 				res.writeHead(rejection);
 				res.end(rejection === 401 ? "unauthorized" : "forbidden");
@@ -354,6 +372,7 @@ const STREAM_SETTINGS_NS = "smooth-stream";
 const DEFAULT_STREAM_SETTINGS = {
 	enabled: true,
 	controlScroll: true,
+	preset: "silky",
 	motionPreference: "auto",
 	thinkAutoExpand: true,
 	logarithmicFade: true,
@@ -392,6 +411,11 @@ 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"),
@@ -426,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 = () => {
@@ -439,6 +523,7 @@ 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,
@@ -481,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: {
@@ -509,6 +602,7 @@ 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 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-smooth-stream",
-  "version": "0.6.1",
+  "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)}
     </>

package/src/client/FrameCoordinator.ts

@@ -0,0 +1,180 @@
+/**
+ * FrameCoordinator: unified per-document frame clock and phased layout scheduler.
+ *
+ * Replaces competing, uncoordinated rAF loops across text reveal, follow
+ * physics, fade painting, and diagnostic sampling. One document owns exactly
+ * one live animation frame while any task is active.
+ *
+ * Strict phase order in every frame:
+ * 1. Read Phase: layout reads ONLY when some task declared them dirty.
+ * 2. Simulate Phase: pure math / integration (pacing, spring, buckets).
+ *    A task returns `true` to stay armed for the next frame.
+ * 3. Write Phase: batched DOM mutations (text nodes, transforms, CSS vars,
+ *    at most one scrollTop write per owner).
+ *
+ * Tasks registered later never overtake earlier ones inside a phase, so a
+ * task's relative order is its registration order.
+ *
+ * `requestRead` is the bridge to the previous frame: a task that just wrote
+ * layout-affecting DOM (pacing revealed text, mutate() batch) declares that
+ * geometry must be re-read at the top of the NEXT frame, before the follow
+ * engine simulates. That keeps the "no layout read after a layout write in
+ * the same frame" invariant without giving up a same-reveal measurement.
+ */
+
+export interface FrameTask {
+  readonly id: string
+  /** Called if any task marked layout as dirty during the frame cycle. */
+  onRead?: ((now: number) => void) | undefined
+  /** Physics, trajectory, and character pace calculation. Returns true if active. */
+  onSimulate?: ((dtMs: number, now: number) => boolean) | undefined
+  /** DOM and visual style mutation phase (transform, text, scrollTop). */
+  onWrite?: ((now: number) => void) | undefined
+}
+
+export class FrameCoordinator {
+  private static coordinators = new WeakMap<Document, FrameCoordinator>()
+
+  private tasks = new Map<string, FrameTask>()
+  private rafId: number | null = null
+  private lastTs: number | null = null
+  /**
+   * Owed layout read. Starts false: a fresh coordinator has no unread writes,
+   * and starting dirty would keep the clock armed forever after the first
+   * frame. Consumers declare reads via {@link markLayoutDirty}.
+   */
+  private layoutDirty = false
+  /** One id per consumer, so an unregister cannot evict a re-registered task. */
+  private nextTaskId = 0
+  private doc: Document
+
+  private constructor(doc: Document) {
+    this.doc = doc
+  }
+
+  static forDocument(doc: Document = document): FrameCoordinator {
+    let coordinator = FrameCoordinator.coordinators.get(doc)
+    if (coordinator === undefined) {
+      coordinator = new FrameCoordinator(doc)
+      FrameCoordinator.coordinators.set(doc, coordinator)
+    }
+    return coordinator
+  }
+
+  /**
+   * Mark that a DOM or geometry change requires a layout read next frame.
+   */
+  markLayoutDirty(): void {
+    this.layoutDirty = true
+    this.ensureLoop()
+  }
+
+  /**
+   * Declare that geometry written since the last frame must be re-read at the
+   * top of the next one, and keep the clock running for it.
+   */
+  requestRead(): void {
+    this.markLayoutDirty()
+  }
+
+  /**
+   * Register or replace an animation/render task. Returns the task id to hand
+   * back to {@link unregisterTask}.
+   */
+  registerTask(task: Omit<FrameTask, 'id'> & { id?: string }): string {
+    const id = task.id ?? `frame-task-${this.nextTaskId++}`
+    this.tasks.set(id, { ...task, id })
+    this.ensureLoop()
+    return id
+  }
+
+  /**
+   * Unregister a task when its stream completes or the element unmounts.
+   */
+  unregisterTask(id: string | null | undefined): void {
+    if (id === null || id === undefined) return
+    this.tasks.delete(id)
+    if (this.tasks.size === 0 && !this.layoutDirty) this.stopLoop()
+  }
+
+  private ensureLoop(): void {
+    if (this.rafId !== null) return
+    const win = this.doc.defaultView ?? (typeof window !== 'undefined' ? window : null)
+    if (win === null) return
+
+    const tick = (now: number) => {
+      this.rafId = null
+
+      if (this.lastTs === null) {
+        this.lastTs = now
+        // First frame after an idle gap only establishes the time base.
+        this.ensureLoop()
+        return
+      }
+
+      const frameIntervalMs = Math.max(0, now - this.lastTs)
+      // Clamp frame delta between 1ms and 100ms to avoid physics explosions
+      // during main-thread hiccups.
+      const dtMs = Math.max(1, Math.min(frameIntervalMs, 100))
+      this.lastTs = now
+
+      // 1. Read phase (only when some task declared layout dirty).
+      if (this.layoutDirty) {
+        this.layoutDirty = false
+        for (const task of this.tasks.values()) task.onRead?.(now)
+      }
+
+      // 2. Simulate phase (pacing step, spring, lag, bucket math).
+      let anyActive = false
+      for (const task of this.tasks.values()) {
+        if (task.onSimulate?.(dtMs, now) === true) anyActive = true
+      }
+
+      // 3. Write phase (transforms, text nodes, CSS variables, scrollTop).
+      for (const task of this.tasks.values()) task.onWrite?.(now)
+
+      // Stay armed while a task is active, while a pending read is owed, or
+      // while callers keep the clock explicitly running.
+      if ((anyActive || this.layoutDirty) && this.rafId === null) {
+        this.ensureLoop()
+      } else if (!anyActive && !this.layoutDirty) {
+        this.lastTs = null
+      }
+    }
+
+    this.rafId = win.requestAnimationFrame(tick)
+  }
+
+  private stopLoop(): void {
+    if (this.rafId !== null) {
+      const win = this.doc.defaultView ?? (typeof window !== 'undefined' ? window : null)
+      win?.cancelAnimationFrame(this.rafId)
+      this.rafId = null
+    }
+    this.lastTs = null
+  }
+
+  /**
+   * Whether this document currently owns a live, still-needed animation
+   * frame. A frame that is merely draining an owed read with no registered
+   * task left is not considered active work.
+   */
+  get active(): boolean {
+    return this.rafId !== null && (this.tasks.size > 0 || this.layoutDirty)
+  }
+
+  /** Number of registered tasks; used by tests to pin the single-clock contract. */
+  get taskCount(): number {
+    return this.tasks.size
+  }
+
+  /**
+   * Release every task, drop any owed read, and stop the clock. Used by tests
+   * for isolation; production consumers unregister their own task.
+   */
+  shutdown(): void {
+    this.tasks.clear()
+    this.layoutDirty = false
+    this.stopLoop()
+  }
+}

package/src/client/SmoothStreamCard.tsx

@@ -8,7 +8,7 @@
 import { useState } from 'react'
 import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import type {} from '@deepseek-ai/dsh-client-ui-settings-plugins/client'
-import { IconChevronDownOutline14, IconRefreshOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconChevronDown, IconRefresh } from './harnessIcons.ts'
 import type { SmoothStreamCardFace } from './smooth-stream-card-controller.ts'
 import css from './SmoothStreamCard.module.css'
 
@@ -43,7 +43,7 @@ export function SmoothStreamCard(props: SmoothStreamCardProps) {
         </span>
         {versionLabel === null ? null : <span className={css.version}>{versionLabel}</span>}
         {state.dirty ? <span className={css.pending}>{t('unsaved')}</span> : null}
-        <IconChevronDownOutline14 className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron} />
+        <IconChevronDown className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron} />
       </button>
       {open
         ? (
@@ -126,6 +126,31 @@ export function SmoothStreamCard(props: SmoothStreamCardProps) {
                     ))}
                   </span>
                 </div>
+                <div className={state.enabled ? css.field : `${css.field} ${css.fieldDisabled}`}>
+                  <span className={css.fieldHead}>
+                    <span className={css.label}>{t('preset')}</span>
+                  </span>
+                  <span className={css.hint}>{t('presetHint')}</span>
+                  <span className={css.choiceRow} role="radiogroup" aria-label={t('preset')}>
+                    {([
+                      ['realtime', 'presetRealtime', 'presetRealtimeHint'],
+                      ['balanced', 'presetBalanced', 'presetBalancedHint'],
+                      ['silky', 'presetSilky', 'presetSilkyHint'],
+                    ] as const).map(([value, label, hint]) => (
+                      <label key={value} className={css.choice} title={t(hint)}>
+                        <input
+                          type="radio"
+                          className={css.choiceInput}
+                          name="smooth-stream-preset"
+                          checked={state.preset === value}
+                          disabled={!state.writable || state.saving || !state.enabled}
+                          onChange={() => { props.edit({ preset: 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>
@@ -169,7 +194,7 @@ export function SmoothStreamCard(props: SmoothStreamCardProps) {
                     title={state.canUpgrade ? undefined : t('updateUnavailable')}
                     onClick={props.upgrade}
                   >
-                    <span aria-hidden="true"><IconRefreshOutline14 /></span>
+                    <span aria-hidden="true"><IconRefresh /></span>
                     {t(state.upgrading ? 'updating' : 'update')}
                   </button>
                 </div>