deepseek-harness-background 0.2.1 → 0.3.2

package/lib/client.js

@@ -4,28 +4,85 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		//#region \0rolldown/runtime.js
+		var __create = Object.create;
+		var __defProp = Object.defineProperty;
+		var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+		var __getOwnPropNames = Object.getOwnPropertyNames;
+		var __getProtoOf = Object.getPrototypeOf;
+		var __hasOwnProp = Object.prototype.hasOwnProperty;
+		var __copyProps = (to, from, except, desc) => {
+			if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+				key = keys[i];
+				if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+			return to;
+		};
+		var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+			value: mod,
+			enumerable: true
+		}) : target, mod));
+		//#endregion
 		let react = require("react");
+		react = __toESM(react, 1);
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react_dom = require("react-dom");
+		react_dom = __toESM(react_dom, 1);
 		//#region src/client/background-css.ts
 		/**
 		* Background CSS — the stylesheet injected once into the document when the
 		* plugin first runs. It defines the behind-body wallpaper layer, the scrim,
-		* and the frosted-glass panels, all driven by CSS variables the painter writes
-		* onto `document.body`. Kept in a single idempotent `<style data-plugin-css>`
-		* tag (mirrors the reference `dsh-wallpaper-engine` bundle).
+		* and the frosted-glass surfaces, all driven by CSS variables the painter
+		* writes onto `document.body`. Kept in a single idempotent
+		* `<style data-plugin-css>` tag (mirrors the reference `dsh-wallpaper-engine`
+		* bundle).
 		*/
 		/** Unique id stamped on the injected style element (dedup key). */
 		const BACKGROUND_CSS_TAG = "deepseek-harness-background/styles";
 		/** Body attribute the painter sets while a wallpaper is active. */
 		const ACTIVE_ATTR = "data-dsh-bg";
 		/**
+		* Body attribute the painter sets only while the glass is actually on (a
+		* wallpaper is active AND panelOpacity < 1). The explicit-fill rules below —
+		* whitelisted buttons, popovers and badges whose official fills are not
+		* token-mediated — key on this gate so they return to the exact official
+		* paints when the user maxes the panel-opacity slider.
+		*/
+		const GLASS_ATTR = "data-dsh-bg-glass";
+		/**
 		* The backdrop CSS. The wallpaper is a fixed `z-index:-2` element (below the
-		* scrim at `-1`, below the UI). While active, the official surface tokens are
-		* made transparent (so the wallpaper shows through every column) and the
-		* opaque input / bubble surfaces turn into translucent frosted glass.
-		* Selectors target authored attributes (`data-dsh-bg`, `data-composer-card`)
-		* and CSS-module SUFFIX conventions (`_bubble`) — the same stable anchors the
-		* reference engine uses, since hashed prefixes change across shell rebuilds.
+		* scrim at `-1`, below the UI). While active, the app frame + sidebar fills
+		* turn transparent so all columns share one backdrop.
+		*
+		* Frosted glass is a WHITELIST, not a blanket: only the surfaces that float
+		* as small cards/buttons over the wallpaper are glassed — composer card,
+		* message bubbles, code surfaces (blocks, inline code, tool IO cards,
+		* skill/MCP call cards), the three chrome buttons (new session, composer +
+		* button, scroll-to-bottom), the load-earlier history button, the composer
+		* dock family (agent task strips: TodoPanel / GoalBar / QueueDock) and its
+		* takeover panels (approval, question, plan review), the subagent lineage
+		* popover, the home hero "preview" badge, the sidebar build badge, and the
+		* timeline rail (timeline-css.ts). Every glassed surface shares ONE recipe:
+		* fill from the painter's --dsw-specific-input-major token (same alpha
+		* curve + theme dimming), the full shared blur/saturate/brightness chain
+		* driven by the glass-blur slider, and the shared sheen vars — so no
+		* surface reads heavier than the composer card. Dialogs, the settings UI,
+		* menus, tooltips, toasts and every hover/accent fill keep the OFFICIAL
+		* opaque paints — they are reading surfaces and must stay legible.
+		*
+		* Selectors target authored attributes (`data-dsh-bg`, `data-composer-card`,
+		* `data-terminal`…), the `:global` `.md-code-block` anchor, and CSS-module
+		* SUFFIX conventions (`_bubble`, `_newSession`…) audited for collisions:
+		* `_bubble` excludes `role="tooltip"` (Tooltip.module.css shares the suffix),
+		* `_add` is scoped under `[data-composer-card]` (DiffBlock line markers share
+		* it), `_newSession` excludes `Label` (the button's inner label span) and
+		* `_toBottom` excludes `Slot` (the zero-height sticky wrapper) — both share
+		* the substring with the chrome control but must keep their own paint, and
+		* the subagent popover is `role="tree"` + `_menu` so the generic menu
+		* surface stays untouched.
 		*/
 		const BACKGROUND_CSS = `
   .dsh-bg-layer {
@@ -58,22 +115,165 @@ window.__ModuleLoader__.load({
     --dsw-specific-sidebar-fill: transparent;
   }
 
-  /* Frosted glass over the opaque conversation surfaces (composer + bubbles).
-     The surface translucency is driven by --dsw-specific-input-major /
-     --dsw-specific-bubble, which the painter writes (theme-aware) so that a
-     fully-opaque panel restores the official surfaces. The blur here comes
-     from --bg-glass-blur; a faint top-weighted specular sheen makes the
-     translucent surfaces read as wet glass. */
-  body[data-dsh-bg] [data-composer-card],
-  body[data-dsh-bg] [class*="_bubble"] {
-    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02));
-    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.6)) brightness(var(--bg-glass-brightness, 1.04)) contrast(1.01);
-    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.6)) brightness(var(--bg-glass-brightness, 1.04)) contrast(1.01);
+  /* ---- Whitelisted frosted-glass sheet ---------------------------------
+     Fills come from the --dsw-* tokens the painter overrides on body ONLY for
+     this list's own surfaces (input/bubble/code/tip); this block adds the
+     shared wet-glass sheen + blur from --bg-glass-blur. Exposure is calibrated
+     per scheme (the painter writes --bg-glass-brightness / --bg-glass-sheen):
+     light glass slightly DIMS, dark glass keeps a slight lift. Gated on the
+     GLASS ATTR (wallpaper active AND panelOpacity < 1): maxing the panel
+     slider returns these surfaces to the exact official paints. */
+  body[data-dsh-bg-glass] [data-composer-card],
+  body[data-dsh-bg-glass] [class*="_bubble"]:not([role="tooltip"]),
+  body[data-dsh-bg-glass] .md-code-block,
+  body[data-dsh-bg-glass] [data-terminal],
+  body[data-dsh-bg-glass] [data-diff],
+  body[data-dsh-bg-glass] [data-read],
+  body[data-dsh-bg-glass] [data-search],
+  body[data-dsh-bg-glass] [data-web],
+  body[data-dsh-bg-glass] [class*="_ioCard"],
+  body[data-dsh-bg-glass] [class*="_instructionsCard"],
+  body[data-dsh-bg-glass] [class*="_markdown"] :not(pre) > code {
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, var(--bg-glass-highlight, 0.32)),
+      inset 0 1px 0 rgba(255, 255, 255, 0.32),
       inset 0 -1px 0 rgba(255, 255, 255, 0.08),
       inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
-      0 12px 40px rgba(0, 0, 0, var(--bg-glass-shadow, 0.12));
+      0 12px 40px rgba(0, 0, 0, 0.12);
+  }
+
+  /* The sticky code-block header officially occludes scrolled code with
+     bg-base (transparent under a wallpaper): refill it with the banner token
+     (itself translucent glass) so code stays hidden beneath the sticky bar. */
+  body[data-dsh-bg] .md-code-block [class*="_bannerWrap"] {
+    background-color: var(--dsw-alias-markdown-code-block-banner);
+  }
+
+  /* The sidebar build badge paints with the label-ink token — a TEXT token we
+     must not override globally — so it gets a theme-aware translucent ink. */
+  body[data-dsh-bg] [class*="_buildRevision"] {
+    background-color: rgba(15, 17, 21, 0.62);
+  }
+  body[data-ds-dark-theme][data-dsh-bg] [class*="_buildRevision"] {
+    background-color: rgba(249, 250, 251, 0.62);
+  }
+
+  /* The empty-state hero glow asset would wash out the wallpaper behind the
+     welcome message — dim it so the art stays visible. */
+  body[data-dsh-bg] [class*="_heroGlow"] {
+    opacity: 0.2;
+  }
+
+  /* ---- Whitelisted chrome buttons --------------------------------------
+     These three buttons' official fills ride button-* tokens shared with
+     unrelated surfaces, so instead of overriding the tokens they get explicit
+     paints — but the SAME glass recipe as the composer card and bubbles:
+     fill = the painter's --dsw-specific-input-major token (the identical
+     translucent white + theme curve), filter = the sheet's exact
+     blur/saturate/brightness chain (blur follows the glass-blur slider, no
+     caps), sheen = the shared sheen vars. Hover = the same white glass at the
+     boosted alpha var. Gated on data-dsh-bg-glass (off when the panel is
+     fully opaque). */
+  body[data-dsh-bg-glass] [class*="_newSession"]:not([class*="Label"]),
+  body[data-dsh-bg-glass] [data-composer-card] [class*="_add"],
+  body[data-dsh-bg-glass] [class*="_toBottom"]:not([class*="Slot"]) {
+    background-color: var(--dsw-specific-input-major);
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.32),
+      inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
+      0 4px 14px rgba(0, 0, 0, 0.08);
+  }
+  body[data-dsh-bg-glass] [class*="_newSession"]:not([class*="Label"]):hover,
+  body[data-dsh-bg-glass] [data-composer-card] [class*="_add"]:hover:not(:disabled),
+  body[data-dsh-bg-glass] [class*="_toBottom"]:not([class*="Slot"]):hover {
+    background-color: color-mix(in srgb, rgb(255 255 255) calc(var(--bg-glass-alpha-strong, 0.8) * 100%), transparent);
+  }
+  /* Collapsed rail renders the new-session control as a bare icon — keep the
+     official transparent paint (and its official translucent hover). */
+  body[data-dsh-bg-glass] [class*="_collapsed"] [class*="_newSession"],
+  body[data-dsh-bg-glass] [class*="_collapsed"] [class*="_newSession"]:hover {
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+  }
+
+  /* ---- Subagent lineage popover (title-bar expanded list) --------------
+     Its official fill rides the menu token shared with every dropdown; glass
+     THIS popover explicitly via its role="tree" + _menu combination so real
+     menus stay officially opaque and legible. Same unified recipe: the
+     composer fill token + the full shared filter chain (the official
+     elevation shadow stays). */
+  body[data-dsh-bg-glass] [role="tree"][class*="_menu"] {
+    background-color: var(--dsw-specific-input-major);
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+  }
+
+  /* ---- Home hero "preview" badge (top-right superscript pill) ----------
+     Officially the state-business-tertiary pastel; re-emit the same hue as
+     glass but with the UNIFIED alpha curve (color-mix against the painter's
+     --bg-glass-alpha) and the shared blur chain, so it sits on the wallpaper
+     with exactly the glass strength of the composer card. */
+  body[data-dsh-bg-glass] [class*="_previewBadge"] {
+    background-color: color-mix(in srgb, rgb(228 237 253) calc(var(--bg-glass-alpha, 0.72) * 100%), transparent);
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+  }
+  body[data-ds-dark-theme][data-dsh-bg-glass] [class*="_previewBadge"] {
+    background-color: color-mix(in srgb, rgb(52 65 91) calc(var(--bg-glass-alpha, 0.72) * 100%), transparent);
+  }
+
+  /* ---- Composer dock family: task strips + takeover panels --------------
+     The agent task strips (TodoPanel, GoalBar, QueueDock — one dock column
+     above the composer) and the composer takeovers (approval, question,
+     plan review) paint with tokens the painter turns translucent
+     (--dsw-specific-tip / --dsw-specific-input-major) but their own styles
+     never blur anything: translucent-without-blur reads as bare
+     transparency, not frosted glass. Give each the shared sheen + filter
+     chain; their fills stay token-driven so the panel-opacity slider keeps
+     driving them. Anchors are the components' own stable data attributes
+     plus a structural child, so no generic class suffix is swept in. */
+  body[data-dsh-bg-glass] [data-testid="todo-panel"],
+  body[data-dsh-bg-glass] [data-goal-bar] > div,
+  body[data-dsh-bg-glass] [data-queue-dock] > div,
+  body[data-dsh-bg-glass] [data-approval-key] > div,
+  body[data-dsh-bg-glass] [data-question-key] > section,
+  body[data-dsh-bg-glass] [data-plan-review-key] > section {
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+  }
+
+  /* ---- "Load earlier" history button (top of long conversations) --------
+     Its official fill is an opaque solid button token that is deliberately
+     NOT overridden, so unlike the tip family it needs an explicit glass
+     fill too — same recipe as the three chrome buttons above. */
+  body[data-dsh-bg-glass] [class*="_older"] button {
+    background-color: var(--dsw-specific-input-major);
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, var(--bg-glass-sheen, 0.07)), rgba(255, 255, 255, var(--bg-glass-sheen-mid, 0.02)) 38%, rgba(255, 255, 255, 0.01));
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.32),
+      inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
+      0 4px 14px rgba(0, 0, 0, 0.08);
+  }
+  body[data-dsh-bg-glass] [class*="_older"] button:hover:not(:disabled) {
+    background-color: color-mix(in srgb, rgb(255 255 255) calc(var(--bg-glass-alpha-strong, 0.8) * 100%), transparent);
+  }
+
+  /* Sidebar build badge: translucent ink already, but it sat directly on
+     the wallpaper without frost. Join the shared blur chain under the same
+     gate (its theme-aware ink fills from the active block above). */
+  body[data-dsh-bg-glass] [class*="_buildRevision"] {
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
   }
 `;
 		/**
@@ -96,6 +296,12 @@ window.__ModuleLoader__.load({
 		const DEFAULT_SCRIM = .25;
 		/** Default panel opacity (0..1); 1 = fully opaque official surfaces, 0 = fully transparent glass. */
 		const DEFAULT_PANEL_OPACITY = .15;
+		/**
+		* Session-projection key this plugin owns in the client-visible value map —
+		* the host fold registers it (src/projection.ts) and the rail reads it
+		* (src/client/timeline.tsx); one shared constant so the two can never drift.
+		*/
+		const TIMELINE_PROJECTION_KEY = "bgTimeline";
 		/** Default background rendering mode. */
 		const DEFAULT_FIT = "cover";
 		/** Image positioning modes. `cover` fills the frame (cropping as needed); `contain` fits the whole image inside the frame (letterboxing). */
@@ -117,22 +323,102 @@ window.__ModuleLoader__.load({
 		const LAYER_CLASS = "dsh-bg-layer";
 		const IMAGE_CLASS = "dsh-bg-image";
 		const SCRIM_CLASS = "dsh-bg-scrim";
-		/** Surface tokens this painter overwrites (restored on dispose). */
-		const SURFACE_TOKENS = ["--dsw-specific-input-major", "--dsw-specific-bubble"];
+		/** Body style properties the painter owns while a wallpaper paints: the app
+		* frame and sidebar fills go transparent so every column shares one art.
+		* Inline values outrank any stylesheet rule (the body[data-dsh-bg] gate only
+		* covers the CSS copy), so a sourceless section must actively restore them. */
+		const FRAME_TOKENS = ["--dsw-alias-bg-base", "--dsw-specific-sidebar-fill"];
+		/**
+		* White-glass tokens — the WHITELISTED surfaces only. Everything that floats
+		* as a small card over the wallpaper: the composer input stack, message
+		* bubbles, the markdown code surfaces (blocks + banner + inline code), and
+		* the agent task strip family (`--dsw-specific-tip`: TodoPanel + GoalBar +
+		* QueueDock share one dock column and one fill token). Menus, dialogs, the
+		* settings UI, tooltips, toasts, hover fills and every accent keep the
+		* OFFICIAL token values — they are reading surfaces and must stay legible.
+		* `factor` scales the alpha relative to the input surface.
+		*/
+		const GLASS_SURFACE_TOKENS = [
+			{
+				token: "--dsw-specific-input-major",
+				factor: 1
+			},
+			{
+				token: "--dsw-specific-bubble",
+				factor: .8
+			},
+			{
+				token: "--dsw-alias-markdown-code-block",
+				factor: 1
+			},
+			{
+				token: "--dsw-alias-markdown-code-block-banner",
+				factor: 1
+			},
+			{
+				token: "--dsw-alias-markdown-inline-code",
+				factor: .9
+			},
+			{
+				token: "--dsw-specific-tip",
+				factor: 1
+			}
+		];
+		/** Every token the glass owns (save/restore key set). */
+		const GLASS_TOKENS = GLASS_SURFACE_TOKENS.map(({ token }) => token);
 		/** Fraction of the official white surface alpha kept at the most transparent panel setting. */
 		const GLASS_MIN_ALPHA = .05;
+		/** Base white-glass alpha for one panelOpacity (the curve every surface shares). */
+		function glassAlpha(panelOpacity) {
+			const alpha = GLASS_MIN_ALPHA + panelOpacity * .85;
+			return Math.max(0, Math.min(.9, alpha));
+		}
+		/**
+		* Saturation boost that rides the blur radius. Gentler than the reference
+		* engine (1.1 + blur * 0.02, capped at 1.6): stacking a hot saturate on top of
+		* the brightness/sheen layers pushed bright wallpapers into clipping.
+		*/
+		function glassSaturate(blur) {
+			if (blur <= 0) return 1;
+			return Math.round(Math.min(1.6, 1.1 + blur * .02) * 1e3) / 1e3;
+		}
+		/**
+		* Exposure calibration per scheme. Light glass neither boosts brightness nor
+		* stacks a heavy sheen (mainstream frosted recipes — macOS vibrancy, Windows
+		* acrylic, common web glass — blur + saturate + tint without a positive
+		* brightness gain); dark glass keeps the reference engine's slight lift, which
+		* stops the white-glass fills from turning muddy.
+		*/
+		function glassExposure(inDark) {
+			return inDark ? {
+				brightness: "1.04",
+				sheen: "0.16",
+				sheenMid: "0.05"
+			} : {
+				brightness: "0.98",
+				sheen: "0.07",
+				sheenMid: "0.02"
+			};
+		}
+		/**
+		* The theme-aware base alpha for one panelOpacity — THE curve every glass
+		* surface shares (surface tokens, bare alpha knobs and the settings preview
+		* included). Single-sourced here so the live painter and the preview card
+		* cannot drift.
+		*/
+		function glassBaseAlpha(panelOpacity, inDark) {
+			return glassAlpha(panelOpacity) * (inDark ? .4 : .8);
+		}
 		/**
 		* The theme-aware glass surface alphas for one panelOpacity: the input-surface
 		* token and the bubble token share one curve, dimmed per scheme. Shared by the
 		* live painter and the settings-row preview card so the two cannot drift.
 		*/
 		function glassSurfaceAlphas(panelOpacity, inDark) {
-			const alpha = GLASS_MIN_ALPHA + panelOpacity * .85;
-			const clamped = Math.max(0, Math.min(.9, alpha));
-			const factor = inDark ? .4 : .8;
+			const alpha = glassBaseAlpha(panelOpacity, inDark);
 			return {
-				major: `rgba(255, 255, 255, ${(clamped * factor).toFixed(3)})`,
-				bubble: `rgba(255, 255, 255, ${(clamped * factor * .8).toFixed(3)})`
+				major: `rgba(255, 255, 255, ${alpha.toFixed(3)})`,
+				bubble: `rgba(255, 255, 255, ${(alpha * .8).toFixed(3)})`
 			};
 		}
 		/**
@@ -160,7 +446,7 @@ window.__ModuleLoader__.load({
 			rememberOnce(prop) {
 				if (this.savedTokens.has(prop) || this.savedVars.has(prop)) return;
 				const value = document.body.style.getPropertyValue(prop);
-				if (SURFACE_TOKENS.includes(prop)) this.savedTokens.set(prop, value);
+				if (GLASS_TOKENS.includes(prop)) this.savedTokens.set(prop, value);
 				else this.savedVars.set(prop, value);
 			}
 			/**
@@ -175,20 +461,21 @@ window.__ModuleLoader__.load({
 					return;
 				}
 				injectBackgroundCss();
-				this.rememberOnce("--dsw-alias-bg-base");
-				this.rememberOnce("--dsw-specific-sidebar-fill");
-				document.body.style.setProperty("--dsw-alias-bg-base", "transparent");
-				document.body.style.setProperty("--dsw-specific-sidebar-fill", "transparent");
 				const url = backgroundImageUrl(settings, uploadBase);
 				if (url === "") {
 					this.observer?.disconnect();
 					this.observer = void 0;
+					this.restoreFrameTokens();
 					this.applySurfaceGlass(settings, true);
 					this.active = false;
 					this.removeLayers();
 					document.body.removeAttribute(ACTIVE_ATTR);
 					return;
 				}
+				for (const prop of FRAME_TOKENS) {
+					this.rememberOnce(prop);
+					document.body.style.setProperty(prop, "transparent");
+				}
 				if (!this.layer) {
 					this.layer = document.createElement("div");
 					this.layer.className = LAYER_CLASS;
@@ -214,7 +501,7 @@ window.__ModuleLoader__.load({
 				this.setVar("--bg-wallpaper-scale", (1 + settings.wallpaperBlur * .006).toFixed(4));
 				this.setVar("--bg-scrim", String(settings.scrim));
 				this.setVar("--bg-glass-blur", `${settings.blur}px`);
-				this.setVar("--bg-glass-saturate", String(1.15 + settings.blur * .03));
+				this.setVar("--bg-glass-saturate", String(glassSaturate(settings.blur)));
 				this.applySurfaceGlass(settings, false);
 				if (!this.observer) {
 					this.observer = new MutationObserver(() => this.applySurfaceGlass(this.settings, false));
@@ -230,6 +517,20 @@ window.__ModuleLoader__.load({
 				document.body.style.setProperty(name, value);
 			}
 			/**
+			* Return the owned frame-transparency properties to their saved state (or
+			* remove them when this session never overrode them). dispose() restores
+			* everything wholesale; this targeted variant serves the sourceless path,
+			* where the painter keeps running for a later source.
+			*/
+			restoreFrameTokens() {
+				for (const prop of FRAME_TOKENS) {
+					this.rememberOnce(prop);
+					const original = this.savedVars.get(prop);
+					if (original !== void 0 && original !== "") document.body.style.setProperty(prop, original);
+					else document.body.style.removeProperty(prop);
+				}
+			}
+			/**
 			* Update one effect knob without re-running the full apply. This is the hot
 			* path for slider drags (many events per second): only the single CSS
 			* variable changes, the DOM layers are untouched.
@@ -247,7 +548,7 @@ window.__ModuleLoader__.load({
 						break;
 					case "blur":
 						this.setVar("--bg-glass-blur", `${value}px`);
-						this.setVar("--bg-glass-saturate", String(1.15 + Number(value) * .03));
+						this.setVar("--bg-glass-saturate", String(glassSaturate(Number(value))));
 						break;
 					case "wallpaperBlur":
 						this.setVar("--bg-wallpaper-blur", `${value}px`);
@@ -266,9 +567,9 @@ window.__ModuleLoader__.load({
 			applySurfaceGlass(settings, forceRestore) {
 				const s = document.body.style;
 				const inDark = document.body.dataset.dsDarkTheme !== void 0;
-				for (const token of SURFACE_TOKENS) this.rememberOnce(token);
+				for (const token of GLASS_TOKENS) this.rememberOnce(token);
 				const restore = () => {
-					for (const token of SURFACE_TOKENS) {
+					for (const token of GLASS_TOKENS) {
 						const original = this.savedTokens.get(token);
 						if (original !== void 0 && original !== "") s.setProperty(token, original);
 						else s.removeProperty(token);
@@ -276,12 +577,22 @@ window.__ModuleLoader__.load({
 				};
 				if (forceRestore || settings === void 0 || settings.panelOpacity >= 1) {
 					restore();
+					document.body.removeAttribute(GLASS_ATTR);
 					this.setVar("--bg-glass-blur", "0px");
+					this.setVar("--bg-glass-brightness", "1");
+					s.removeProperty("--bg-glass-alpha");
+					s.removeProperty("--bg-glass-alpha-strong");
 					return;
 				}
-				const { major, bubble } = glassSurfaceAlphas(settings.panelOpacity, inDark);
-				s.setProperty("--dsw-specific-input-major", major);
-				s.setProperty("--dsw-specific-bubble", bubble);
+				document.body.setAttribute(GLASS_ATTR, "on");
+				const exposure = glassExposure(inDark);
+				this.setVar("--bg-glass-brightness", exposure.brightness);
+				this.setVar("--bg-glass-sheen", exposure.sheen);
+				this.setVar("--bg-glass-sheen-mid", exposure.sheenMid);
+				const base = glassBaseAlpha(settings.panelOpacity, inDark);
+				for (const { token, factor } of GLASS_SURFACE_TOKENS) s.setProperty(token, `rgba(255, 255, 255, ${(base * factor).toFixed(3)})`);
+				this.setVar("--bg-glass-alpha", base.toFixed(3));
+				this.setVar("--bg-glass-alpha-strong", Math.min(.9, base * 1.5).toFixed(3));
 			}
 			/** Remove the wallpaper + scrim layers and clear the active attribute. */
 			removeLayers() {
@@ -302,6 +613,7 @@ window.__ModuleLoader__.load({
 				this.removeLayers();
 				const s = document.body.style;
 				document.body.removeAttribute(ACTIVE_ATTR);
+				document.body.removeAttribute(GLASS_ATTR);
 				for (const [prop, value] of this.savedTokens) s.setProperty(prop, value);
 				for (const [prop, value] of this.savedVars) s.setProperty(prop, value);
 				this.savedTokens.clear();
@@ -343,6 +655,7 @@ window.__ModuleLoader__.load({
 			"--bg-wallpaper-scale",
 			"--bg-glass-blur",
 			"--bg-glass-saturate",
+			"--bg-glass-brightness",
 			"--bg-preview-glass"
 		];
 		/**
@@ -362,11 +675,13 @@ window.__ModuleLoader__.load({
 			const inDark = document.body.dataset.dsDarkTheme !== void 0;
 			if (settings.panelOpacity >= 1) {
 				s.setProperty("--bg-glass-blur", "0px");
+				s.setProperty("--bg-glass-brightness", "1");
 				s.setProperty("--bg-preview-glass", "var(--dsw-alias-bg-layer-1)");
 				return;
 			}
 			s.setProperty("--bg-glass-blur", `${settings.blur}px`);
-			s.setProperty("--bg-glass-saturate", String(1.15 + settings.blur * .03));
+			s.setProperty("--bg-glass-saturate", String(glassSaturate(settings.blur)));
+			s.setProperty("--bg-glass-brightness", glassExposure(inDark).brightness);
 			s.setProperty("--bg-preview-glass", glassSurfaceAlphas(settings.panelOpacity, inDark).bubble);
 		}
 		/** Remove every preview variable from an element (restores CSS defaults). */
@@ -400,7 +715,16 @@ window.__ModuleLoader__.load({
 			"background.contain": "完整",
 			"background.clear": "清除背景",
 			"background.uploadFailed": "上传失败，请重试",
-			"background.saveFailed": "保存失败，请重试"
+			"background.saveFailed": "保存失败，请重试",
+			"background.timeline": "会话时间线",
+			"background.timelineHint": "右侧消息导航轨，悬停展开问题列表（DeepSeek 官网风格）",
+			"timeline.railLabel": "对话时间线",
+			"timeline.roleUser": "用户",
+			"timeline.noText": "（无文本内容）",
+			"timeline.marksOnly": "★ 只看标记",
+			"timeline.mark": "标记为重点",
+			"timeline.unmark": "取消重点标记",
+			"timeline.noMarks": "还没有标记的重点"
 		};
 		/** English copy. */
 		const en = {
@@ -427,7 +751,16 @@ window.__ModuleLoader__.load({
 			"background.contain": "Contain",
 			"background.clear": "Clear background",
 			"background.uploadFailed": "Upload failed, try again",
-			"background.saveFailed": "Save failed, try again"
+			"background.saveFailed": "Save failed, try again",
+			"background.timeline": "Conversation timeline",
+			"background.timelineHint": "Message rail at the right edge; hover to expand the question list (DeepSeek web style)",
+			"timeline.railLabel": "Chat timeline",
+			"timeline.roleUser": "User",
+			"timeline.noText": "(no text)",
+			"timeline.marksOnly": "★ Marked only",
+			"timeline.mark": "Mark as key point",
+			"timeline.unmark": "Unmark key point",
+			"timeline.noMarks": "No marked key points"
 		};
 		//#endregion
 		//#region node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -522,6 +855,9 @@ window.__ModuleLoader__.load({
 				};
 				const promise = run();
 				this.pending = promise;
+				promise.then(() => {
+					if (this.pending === promise) this.pending = void 0;
+				});
 				return promise;
 			}
 			/**
@@ -549,7 +885,7 @@ window.__ModuleLoader__.load({
 		const settingsClient = new SettingsClient();
 		//#endregion
 		//#region \0dsh-css:D:\Project\deepseek-harness-background\src\client\SettingsRow.module.css.mjs
-		const css = ".-ozqdq_row{border-bottom:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:14px;padding:16px 0;display:flex}.-ozqdq_header{flex-direction:column;gap:4px;display:flex}.-ozqdq_titleRow{justify-content:space-between;align-items:center;gap:12px;min-height:22px;display:flex}.-ozqdq_clearBtn{border-radius:12px;flex:none;height:24px;padding:0 10px;font-size:12px;line-height:24px}.-ozqdq_title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}.-ozqdq_desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}.-ozqdq_preview{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:12px;height:132px;position:relative;overflow:hidden}.-ozqdq_previewImg{object-fit:var(--bg-object-fit,cover);width:100%;height:100%;opacity:var(--bg-opacity,1);filter:blur(var(--bg-wallpaper-blur,0px));transform:scale(var(--bg-wallpaper-scale,1));display:block;position:absolute;inset:0}.-ozqdq_previewScrim{background:rgba(255, 255, 255, var(--bg-scrim,.25));position:absolute;inset:0}body[data-ds-dark-theme] .-ozqdq_previewScrim{background:rgba(0, 0, 0, var(--bg-scrim,.25))}.-ozqdq_previewGlass{background:var(--bg-preview-glass,#ffffff24);width:44%;height:46px;backdrop-filter:blur(var(--bg-glass-blur,16px)) saturate(var(--bg-glass-saturate,1.6));border:1px solid #ffffff38;border-radius:10px;justify-content:center;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:inset 0 1px #ffffff4d}.-ozqdq_previewGlassText{color:#fff;opacity:.8;text-shadow:0 1px 2px #00000059;white-space:nowrap;font-size:11px;line-height:1}.-ozqdq_previewEmpty{color:var(--dsw-alias-label-tertiary);justify-content:center;align-items:center;font-size:12px;line-height:1.5;display:flex;position:absolute;inset:0}.-ozqdq_section{flex-direction:column;gap:8px;display:flex}.-ozqdq_sectionLabel{color:var(--dsw-alias-label-tertiary);letter-spacing:.01em;font-size:12px;font-weight:500;line-height:18px}.-ozqdq_sourceRow{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.-ozqdq_urlRow{align-items:center;gap:8px;display:flex}.-ozqdq_urlInput{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);min-width:0;height:32px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;flex:1;padding:0 10px;font-size:13px;line-height:1.5}.-ozqdq_urlInput::placeholder{color:var(--dsw-alias-label-dimmed)}.-ozqdq_urlInput:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.-ozqdq_hint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}.-ozqdq_enabledBadge{white-space:nowrap;background:var(--dsw-alias-state-success-tertiary);color:var(--dsw-alias-state-success-primary);border-radius:999px;align-items:center;gap:4px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.-ozqdq_btn{border:1px solid var(--dsw-alias-border-l2);height:28px;font:inherit;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:14px;justify-content:center;align-items:center;padding:0 12px;font-size:12px;line-height:18px;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.-ozqdq_btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.-ozqdq_btn:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.-ozqdq_btn:disabled{opacity:.45;cursor:default}.-ozqdq_btnPrimary{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);border-color:#0000}.-ozqdq_btnPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}.-ozqdq_btnDanger{color:var(--dsw-alias-label-error)}.-ozqdq_btnDanger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger)}.-ozqdq_sliderRow{align-items:center;gap:10px;display:flex}.-ozqdq_sliderLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:18px;margin:0}.-ozqdq_slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--dsw-alias-brand-primary) var(--bg-fill,0%), var(--dsw-alias-border-l3) var(--bg-fill,0%));border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-track{background:var(--dsw-alias-border-l3);border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-progress{background:var(--dsw-alias-brand-primary);border-radius:2px;height:4px}.-ozqdq_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%;margin-top:-5px}.-ozqdq_slider::-moz-range-thumb{border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%}.-ozqdq_slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:hover::-moz-range-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:active::-webkit-slider-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:active::-moz-range-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:focus-visible{outline:none}.-ozqdq_slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_slider:focus-visible::-moz-range-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_sliderValue{text-align:right;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);flex:0 0 52px;font-size:13px;line-height:1.5}.-ozqdq_segRow{align-items:center;gap:10px;display:flex}.-ozqdq_segLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_segGroup{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:9px;flex:1;gap:2px;min-width:0;padding:2px;display:inline-flex}.-ozqdq_segBtn{height:24px;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;flex:1;padding:0 16px;font-size:12px;line-height:24px}.-ozqdq_segBtn:hover:not(.-ozqdq_segActive){color:var(--dsw-alias-label-primary)}.-ozqdq_segActive{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font-weight:500}.-ozqdq_error{color:var(--dsw-alias-label-error);font-size:12px;line-height:1.5}.-ozqdq_clearRow{align-items:center;gap:10px;display:flex}@media (prefers-reduced-motion:reduce){.-ozqdq_btn{transition:none}}";
+		const css = ".-ozqdq_row{border-bottom:1px solid var(--dsw-alias-border-l2);flex-direction:column;gap:14px;padding:16px 0;display:flex}.-ozqdq_header{flex-direction:column;gap:4px;display:flex}.-ozqdq_titleRow{justify-content:space-between;align-items:center;gap:12px;min-height:22px;display:flex}.-ozqdq_clearBtn{border-radius:12px;flex:none;height:24px;padding:0 10px;font-size:12px;line-height:24px}.-ozqdq_title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}.-ozqdq_desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}.-ozqdq_preview{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:12px;height:132px;position:relative;overflow:hidden}.-ozqdq_previewImg{object-fit:var(--bg-object-fit,cover);width:100%;height:100%;opacity:var(--bg-opacity,1);filter:blur(var(--bg-wallpaper-blur,0px));transform:scale(var(--bg-wallpaper-scale,1));display:block;position:absolute;inset:0}.-ozqdq_previewScrim{background:rgba(255, 255, 255, var(--bg-scrim,.25));position:absolute;inset:0}body[data-ds-dark-theme] .-ozqdq_previewScrim{background:rgba(0, 0, 0, var(--bg-scrim,.25))}.-ozqdq_previewGlass{background:var(--bg-preview-glass,#ffffff24);width:44%;height:46px;backdrop-filter:blur(var(--bg-glass-blur,16px)) saturate(var(--bg-glass-saturate,1.42)) brightness(var(--bg-glass-brightness,1));border:1px solid #ffffff38;border-radius:10px;justify-content:center;align-items:center;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:inset 0 1px #ffffff4d}.-ozqdq_previewGlassText{color:#0f172ac7;text-shadow:0 1px 2px #fff6;white-space:nowrap;font-size:11px;line-height:1}body[data-ds-dark-theme] .-ozqdq_previewGlassText{color:#ffffffd9;text-shadow:0 1px 2px #00000059}.-ozqdq_previewEmpty{color:var(--dsw-alias-label-tertiary);justify-content:center;align-items:center;font-size:12px;line-height:1.5;display:flex;position:absolute;inset:0}.-ozqdq_section{flex-direction:column;gap:8px;display:flex}.-ozqdq_sectionLabel{color:var(--dsw-alias-label-tertiary);letter-spacing:.01em;font-size:12px;font-weight:500;line-height:18px}.-ozqdq_sourceRow{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.-ozqdq_urlRow{align-items:center;gap:8px;display:flex}.-ozqdq_urlInput{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);min-width:0;height:32px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;flex:1;padding:0 10px;font-size:13px;line-height:1.5}.-ozqdq_urlInput::placeholder{color:var(--dsw-alias-label-dimmed)}.-ozqdq_urlInput:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.-ozqdq_hint{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:1.5}.-ozqdq_enabledBadge{white-space:nowrap;background:var(--dsw-alias-state-success-tertiary);color:var(--dsw-alias-state-success-primary);border-radius:999px;align-items:center;gap:4px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px;display:inline-flex}.-ozqdq_btn{border:1px solid var(--dsw-alias-border-l2);height:28px;font:inherit;color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;background:0 0;border-radius:14px;justify-content:center;align-items:center;padding:0 12px;font-size:12px;line-height:18px;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.-ozqdq_btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover)}.-ozqdq_btn:active:not(:disabled){background:var(--dsw-alias-interactive-bg-active)}.-ozqdq_btn:disabled{opacity:.45;cursor:default}.-ozqdq_btnPrimary{background:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground);border-color:#0000}.-ozqdq_btnPrimary:hover:not(:disabled){background:var(--dsw-alias-button-primary-hover)}.-ozqdq_btnDanger{color:var(--dsw-alias-label-error)}.-ozqdq_btnDanger:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover-danger)}.-ozqdq_sliderRow{align-items:center;gap:10px;display:flex}.-ozqdq_sliderLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:18px;margin:0}.-ozqdq_slider::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--dsw-alias-brand-primary) var(--bg-fill,0%), var(--dsw-alias-border-l3) var(--bg-fill,0%));border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-track{background:var(--dsw-alias-border-l3);border-radius:2px;height:4px}.-ozqdq_slider::-moz-range-progress{background:var(--dsw-alias-brand-primary);border-radius:2px;height:4px}.-ozqdq_slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%;margin-top:-5px}.-ozqdq_slider::-moz-range-thumb{border:2px solid var(--dsw-alias-brand-primary);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), 0 1px 3px #00000047;background:#fff;border-radius:50%}.-ozqdq_slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:hover::-moz-range-thumb{box-shadow:0 0 0 5px color-mix(in srgb, var(--dsw-alias-brand-primary) 18%, transparent), 0 1px 4px #0000004d}.-ozqdq_slider:active::-webkit-slider-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:active::-moz-range-thumb{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent), 0 1px 5px #00000052;transform:scale(1.12)}.-ozqdq_slider:focus-visible{outline:none}.-ozqdq_slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_slider:focus-visible::-moz-range-thumb{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_sliderValue{text-align:right;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary);flex:0 0 52px;font-size:13px;line-height:1.5}.-ozqdq_segRow{align-items:center;gap:10px;display:flex}.-ozqdq_segLabel{color:var(--dsw-alias-label-primary);flex:0 0 96px;font-size:13px;line-height:1.5}.-ozqdq_segGroup{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:9px;flex:1;gap:2px;min-width:0;padding:2px;display:inline-flex}.-ozqdq_segBtn{height:24px;font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:7px;flex:1;padding:0 16px;font-size:12px;line-height:24px}.-ozqdq_segBtn:hover:not(.-ozqdq_segActive){color:var(--dsw-alias-label-primary)}.-ozqdq_segActive{background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);font-weight:500}.-ozqdq_error{color:var(--dsw-alias-label-error);font-size:12px;line-height:1.5}.-ozqdq_clearRow{align-items:center;gap:10px;display:flex}.-ozqdq_switch{background:var(--dsw-alias-border-l3);cursor:pointer;border:none;border-radius:11px;flex:none;width:40px;height:22px;padding:0;transition:background-color .15s;position:relative}.-ozqdq_switch[aria-checked=true]{background:var(--dsw-alias-brand-primary)}.-ozqdq_switch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.-ozqdq_switchKnob{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000047}.-ozqdq_switch[aria-checked=true] .-ozqdq_switchKnob{transform:translate(18px)}@media (prefers-reduced-motion:reduce){.-ozqdq_btn,.-ozqdq_switch,.-ozqdq_switchKnob{transition:none}}";
 		const tagId = "deepseek-harness-background/SettingsRow.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -559,38 +895,40 @@ window.__ModuleLoader__.load({
 			document.head.appendChild(tag);
 		}
 		var SettingsRow_module_css_default = {
-			"segActive": "-ozqdq_segActive",
 			"error": "-ozqdq_error",
-			"sliderLabel": "-ozqdq_sliderLabel",
-			"previewEmpty": "-ozqdq_previewEmpty",
-			"row": "-ozqdq_row",
 			"urlRow": "-ozqdq_urlRow",
-			"slider": "-ozqdq_slider",
-			"sliderValue": "-ozqdq_sliderValue",
+			"switch": "-ozqdq_switch",
+			"hint": "-ozqdq_hint",
+			"titleRow": "-ozqdq_titleRow",
 			"clearRow": "-ozqdq_clearRow",
-			"preview": "-ozqdq_preview",
-			"clearBtn": "-ozqdq_clearBtn",
-			"btn": "-ozqdq_btn",
-			"segLabel": "-ozqdq_segLabel",
+			"previewGlass": "-ozqdq_previewGlass",
+			"previewEmpty": "-ozqdq_previewEmpty",
+			"sourceRow": "-ozqdq_sourceRow",
+			"urlInput": "-ozqdq_urlInput",
+			"segGroup": "-ozqdq_segGroup",
+			"previewScrim": "-ozqdq_previewScrim",
 			"previewGlassText": "-ozqdq_previewGlassText",
-			"btnPrimary": "-ozqdq_btnPrimary",
-			"header": "-ozqdq_header",
 			"title": "-ozqdq_title",
-			"previewScrim": "-ozqdq_previewScrim",
-			"sectionLabel": "-ozqdq_sectionLabel",
-			"enabledBadge": "-ozqdq_enabledBadge",
-			"titleRow": "-ozqdq_titleRow",
-			"previewGlass": "-ozqdq_previewGlass",
+			"sliderValue": "-ozqdq_sliderValue",
+			"sliderLabel": "-ozqdq_sliderLabel",
+			"switchKnob": "-ozqdq_switchKnob",
+			"btn": "-ozqdq_btn",
 			"desc": "-ozqdq_desc",
 			"sliderRow": "-ozqdq_sliderRow",
+			"segRow": "-ozqdq_segRow",
+			"sectionLabel": "-ozqdq_sectionLabel",
+			"enabledBadge": "-ozqdq_enabledBadge",
+			"segActive": "-ozqdq_segActive",
+			"btnDanger": "-ozqdq_btnDanger",
 			"previewImg": "-ozqdq_previewImg",
-			"hint": "-ozqdq_hint",
 			"segBtn": "-ozqdq_segBtn",
-			"segGroup": "-ozqdq_segGroup",
-			"urlInput": "-ozqdq_urlInput",
-			"btnDanger": "-ozqdq_btnDanger",
-			"segRow": "-ozqdq_segRow",
-			"sourceRow": "-ozqdq_sourceRow",
+			"clearBtn": "-ozqdq_clearBtn",
+			"preview": "-ozqdq_preview",
+			"row": "-ozqdq_row",
+			"segLabel": "-ozqdq_segLabel",
+			"header": "-ozqdq_header",
+			"slider": "-ozqdq_slider",
+			"btnPrimary": "-ozqdq_btnPrimary",
 			"section": "-ozqdq_section"
 		};
 		//#endregion
@@ -623,7 +961,8 @@ window.__ModuleLoader__.load({
 			panelOpacity: DEFAULT_PANEL_OPACITY,
 			blur: 16,
 			wallpaperBlur: 0,
-			fit: DEFAULT_FIT
+			fit: DEFAULT_FIT,
+			timeline: true
 		};
 		/** Per-field slider geometry: 5% steps for ratios, fine px steps for radii so
 		* the two blur sliders feel smooth near small values. Bounds come from the
@@ -671,7 +1010,7 @@ window.__ModuleLoader__.load({
 		}
 		/** Field-wise equality for distinguishing our own saves from external changes. */
 		function sameSettings(a, b) {
-			return a.enabled === b.enabled && a.uploadId === b.uploadId && a.url === b.url && a.opacity === b.opacity && a.scrim === b.scrim && a.panelOpacity === b.panelOpacity && a.blur === b.blur && a.wallpaperBlur === b.wallpaperBlur && a.fit === b.fit;
+			return a.enabled === b.enabled && a.uploadId === b.uploadId && a.url === b.url && a.opacity === b.opacity && a.scrim === b.scrim && a.panelOpacity === b.panelOpacity && a.blur === b.blur && a.wallpaperBlur === b.wallpaperBlur && a.fit === b.fit && a.timeline === b.timeline;
 		}
 		/**
 		* A stepped range control. While dragging it re-renders only itself: the value
@@ -909,6 +1248,16 @@ window.__ModuleLoader__.load({
 				paintLive(next);
 				saveNow(next);
 			};
+			const handleTimelineToggle = () => {
+				markEditing();
+				const next = {
+					...draftRef.current,
+					timeline: !draftRef.current.timeline
+				};
+				draftRef.current = next;
+				setDraft(next);
+				saveNow(next);
+			};
 			const sourceUrl = draft.uploadId ? `${BACKGROUND_API_PREFIX}/image/${draft.uploadId}` : draft.url;
 			const hasImage = sourceUrl !== "";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1071,6 +1420,29 @@ window.__ModuleLoader__.load({
 										children: t(mode === "cover" ? "background.cover" : "background.contain")
 									}, mode))
 								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: SettingsRow_module_css_default.segRow,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: SettingsRow_module_css_default.segLabel,
+										children: t("background.timeline")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										role: "switch",
+										"aria-checked": draft.timeline,
+										"aria-label": t("background.timeline"),
+										title: t("background.timelineHint"),
+										className: SettingsRow_module_css_default.switch,
+										onClick: handleTimelineToggle,
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: SettingsRow_module_css_default.switchKnob })
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: SettingsRow_module_css_default.hint,
+										children: t("background.timelineHint")
+									})
+								]
 							})
 						]
 					}),
@@ -1092,17 +1464,984 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/timeline-css.ts
+		/**
+		* Timeline CSS — the conversation scroll-navigation rail (DeepSeek web
+		* ScrollNav structure, rebuilt on this plugin's frosted-glass system).
+		*
+		* Structure and metrics mirror the official chat.deepseek.com stylesheet
+		* (module map extracted from the shipped bundle; v0.1.4 of the reference port
+		* dsh-chat-timeline widens the panel to 260px and adds bookmarks):
+		*   nav 34px-wide rail, fixed right edge, vertically centered; collapsed
+		*   blurred capsule (height − 8px); expanding panel (max 260px, radius 16)
+		*   whose scroll area holds 30px rows (tick indicator + fading-in title);
+		*   32px gradient fade veils top/bottom, expanded-only, shown while that
+		*   side actually clips.
+		*
+		* Deviations from the reference port, all fidelity fixes:
+		*   - The filter bar collapses to zero height while idle instead of staying
+		*     in layout invisibly (it pushed every tick ~33px down).
+		*   - Short stacks center vertically; overflowing stacks are bottom-pinned
+		*     by the component so the newest tick hugs the capsule's bottom edge
+		*     (the official idle strategy — the reference port flowed ticks from
+		*     the top and clipped the newest away).
+		*
+		* Glass integration: the official chat.deepseek.com paints (light
+		* rgba(255,255,255,.8)/.94, dark rgba(21,21,23,.6)/rgba(28,28,32,.95),
+		* 5px collapsed / 16px expanded blur) remain as the NO-GLASS fallback.
+		* While the plugin's glass system is on (`body[data-dsh-bg-glass]`), the
+		* rail joins the SAME unified recipe as the composer card and bubbles:
+		* fill = the painter's `--dsw-specific-input-major` token, blur/saturate/
+		* brightness = the shared `--bg-glass-*` variables, i.e. the glass-blur
+		* slider. Class prefix `dsbt-` deliberately avoids every
+		* `[class*="_xxx"]` anchor of the plugin's glass sheet (underscores only).
+		*/
+		/** Unique id stamped on the injected style element (dedup key). */
+		const TIMELINE_CSS_TAG = "deepseek-harness-background/timeline";
+		/** Inject the timeline stylesheet once. Idempotent (dedup key on the tag). */
+		function injectTimelineCss() {
+			if (typeof document === "undefined") return;
+			if (document.querySelector(`style[data-plugin-css="deepseek-harness-background/timeline"]`)) return;
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "deepseek-harness-background";
+			tag.dataset.pluginCss = TIMELINE_CSS_TAG;
+			tag.textContent = TIMELINE_CSS;
+			document.head.appendChild(tag);
+		}
+		const TIMELINE_CSS = `
+  .dsbt-nav {
+    user-select: none; -webkit-user-select: none;
+    /* Filter-bar chrome height shared by the bar itself and the top veil's
+       expanded offset. */
+    --dsbt-bar-h: 33px;
+    z-index: 90; align-items: center; width: 34px;
+    height: var(--dsbt-h, 300px);
+    transition: right .2s ease, opacity .2s ease;
+    display: flex; position: fixed; top: 50%; right: 16px;
+    transform: translateY(-50%); pointer-events: auto;
+  }
+  @media (max-width: 767px) { .dsbt-nav { display: none; } }
+
+  /* Collapsed capsule — frosted strip behind the tick marks. Official paint:
+     light rgba(255,255,255,.8), dark rgba(21,21,23,.6), 5px blur. */
+  .dsbt-bg {
+    background-color: rgba(255, 255, 255, .8);
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, .28),
+      inset 0 0 0 .5px rgba(255, 255, 255, .1),
+      0 6px 18px rgba(0, 0, 0, .07);
+    border-radius: 16px; width: 34px;
+    height: calc(var(--dsbt-h, 300px) - 8px); max-height: calc(var(--dsbt-h, 300px) - 8px);
+    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
+    transition: opacity .2s ease; pointer-events: none;
+  }
+  body[data-ds-dark-theme] .dsbt-bg {
+    background-color: rgba(21, 21, 23, .6);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, .09),
+      inset 0 0 0 .5px rgba(255, 255, 255, .05),
+      0 6px 18px rgba(0, 0, 0, .3);
+  }
+  .dsbt-bg.dsbt-bg-hide { opacity: 0; }
+
+  /* Expanding panel — exactly the capsule's box (identical height in both
+     states), width animates 34px -> measured fit (max 260px). Official
+     hover-state paint: white/black frosted glass at ~94% alpha, 16px blur. */
+  .dsbt-wrap {
+    width: 34px;
+    height: calc(var(--dsbt-h, 300px) - 8px); max-height: calc(var(--dsbt-h, 300px) - 8px);
+    border: 1px solid transparent; border-radius: 16px;
+    flex-direction: column; align-items: stretch;
+    transition: width .22s cubic-bezier(.4, 0, .2, 1), background-color .2s ease,
+      box-shadow .2s ease, border-color .2s ease;
+    display: flex; position: absolute; top: 50%; right: 0;
+    transform: translateY(-50%);
+    overflow: hidden; box-sizing: border-box; background: transparent;
+    pointer-events: none;
+  }
+  .dsbt-wrap.dsbt-show {
+    pointer-events: auto;
+    width: min(var(--dsbt-w, 260px), 260px);
+    background-color: rgba(255, 255, 255, .94);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    border-color: rgba(0, 0, 0, .06);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
+  }
+  body[data-ds-dark-theme] .dsbt-wrap.dsbt-show {
+    background-color: rgba(28, 28, 32, .95);
+    border-color: rgba(255, 255, 255, .08);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .25);
+  }
+
+  /* Content fade veils — the official ::before/::after pair rebuilt as
+     elements: a bar of the panel's OWN fill color masked to nothing over
+     32px (solid -> mask == gradient-to-transparent, but works with the
+     translucent fill). They belong to the EXPANDED panel only — the idle
+     capsule hard-clips its ticks at the rounded ends like the official
+     strip — and while expanded the top veil starts BELOW the filter bar,
+     not over it. Shown only while that side actually clips. */
+  .dsbt-fade {
+    z-index: 2; pointer-events: none; opacity: 0;
+    background-color: rgba(255, 255, 255, .94);
+    -webkit-mask-image: linear-gradient(#000 20.19%, transparent 100%);
+    mask-image: linear-gradient(#000 20.19%, transparent 100%);
+    width: 100%; height: 32px; transition: opacity .2s ease;
+    position: absolute; left: 0; top: 0;
+  }
+  body[data-ds-dark-theme] .dsbt-fade { background-color: rgba(28, 28, 32, .95); }
+  .dsbt-fade.dsbt-fade-bot { top: auto; bottom: 0; transform: rotate(180deg); }
+  .dsbt-wrap.dsbt-show .dsbt-fade.dsbt-fade-on { opacity: 1; }
+  .dsbt-wrap.dsbt-show .dsbt-fade:not(.dsbt-fade-bot) { top: var(--dsbt-bar-h, 33px); }
+
+  /* Filter bar — "marked only" toggle pinned above the scroll area while
+     expanded. Collapsed, it collapses to ZERO height (not just opacity): a
+     transparent-but-in-layout bar pushed every tick ~33px down, one of the
+     reasons the idle capsule read as off-alignment. */
+  .dsbt-filterbar {
+    height: var(--dsbt-bar-h, 33px);
+    padding: 8px 12px 4px; display: flex; justify-content: flex-end;
+    align-items: center; border-bottom: 1px solid rgba(0, 0, 0, .05);
+    box-sizing: border-box; flex: none; overflow: hidden;
+    transition: opacity .2s ease, height .2s ease, padding .2s ease,
+      border-color .2s ease;
+  }
+  .dsbt-wrap:not(.dsbt-show) .dsbt-filterbar {
+    height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
+    border-bottom-color: transparent;
+  }
+  body[data-ds-dark-theme] .dsbt-filterbar { border-bottom-color: rgba(255, 255, 255, .06); }
+  .dsbt-filterbtn {
+    font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 10px;
+    border: 1px solid rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .03);
+    color: rgba(0, 0, 0, .65); cursor: pointer; transition: all .15s ease;
+    display: inline-flex; align-items: center; gap: 3px; font-family: inherit;
+  }
+  .dsbt-filterbtn:hover { background: rgba(0, 0, 0, .07); color: rgba(0, 0, 0, .9); }
+  .dsbt-filterbtn.dsbt-filteron {
+    background: rgba(245, 158, 11, .12); border-color: #f59e0b;
+    color: #b45309; font-weight: 600;
+  }
+  body[data-ds-dark-theme] .dsbt-filterbtn {
+    border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05);
+    color: rgba(255, 255, 255, .7);
+  }
+  body[data-ds-dark-theme] .dsbt-filterbtn:hover { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .95); }
+  body[data-ds-dark-theme] .dsbt-filterbtn.dsbt-filteron {
+    background: rgba(251, 191, 36, .18); border-color: #fbbf24; color: #fbbf24;
+  }
+
+  /* Scroll area — rows hug the right edge; scrolls only when overfull. The
+     auto-margin pseudo pair vertically centers the stack when it fits the
+     capsule (short conversations), and resolves to zero free space when it
+     overflows, so bottom-pinned scrolling behaves like a plain column. */
+  .dsbt-page {
+    padding: 15px 0 15px 24px; box-sizing: border-box;
+    overscroll-behavior: contain; flex: 1 1 auto; min-height: 0;
+    flex-direction: column; align-items: flex-end; display: flex;
+    position: relative; width: 100%; overflow: hidden;
+  }
+  .dsbt-page::before, .dsbt-page::after {
+    content: ''; flex: none; margin-block: auto;
+  }
+  .dsbt-wrap.dsbt-show .dsbt-page {
+    overflow-y: auto; overflow-x: hidden;
+    scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .15) transparent;
+  }
+  body[data-ds-dark-theme] .dsbt-wrap.dsbt-show .dsbt-page { scrollbar-color: rgba(255, 255, 255, .25) transparent; }
+  .dsbt-page::-webkit-scrollbar { width: 4px; }
+  .dsbt-page::-webkit-scrollbar-track { background: transparent; }
+  .dsbt-page::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 4px; }
+  body[data-ds-dark-theme] .dsbt-page::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); }
+
+  /* Empty state (filtered list with no marks). */
+  .dsbt-empty {
+    font-size: 12px; line-height: 18px; padding: 16px 12px;
+    color: rgba(0, 0, 0, .45); text-align: center; width: 100%; box-sizing: border-box;
+  }
+  body[data-ds-dark-theme] .dsbt-empty { color: rgba(255, 255, 255, .45); }
+
+  /* One message row: 30px, star bookmark + tick indicator at the right,
+     title fading in. */
+  /* Row shell: layout + shared ink only — the interactive hit areas are the
+     sibling .dsbt-jump / .dsbt-star buttons below. */
+  .dsbt-item {
+    height: 30px; min-height: 30px; flex-shrink: 0;
+    justify-content: flex-end; align-items: center;
+    width: calc(100% - 4px); margin-right: 4px;
+    display: flex; box-sizing: border-box;
+    color: var(--dsw-alias-label-tertiary, rgba(0, 0, 0, .65));
+    transition: color .15s ease;
+  }
+
+  /* Jump target: a real button so Enter/Space work natively without nesting
+     an interactive element inside another. */
+  .dsbt-jump {
+    cursor: pointer; background: none; border: none; margin: 0; padding: 0;
+    font: inherit; line-height: 20px; text-align: right; color: inherit;
+    flex: 1 1 auto; min-width: 0; height: 100%;
+    display: flex; align-items: center; justify-content: flex-end;
+  }
+  .dsbt-jump:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; border-radius: 6px; }
+  .dsbt-item:hover { color: var(--dsw-alias-label-primary, rgba(0, 0, 0, .95)); }
+  body[data-ds-dark-theme] .dsbt-item { color: rgba(255, 255, 255, .65); }
+  body[data-ds-dark-theme] .dsbt-item:hover { color: rgba(255, 255, 255, .95); }
+  .dsbt-title {
+    font-size: 13px; line-height: 20px; flex: 1 1 auto; min-width: 0;
+    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
+    margin-right: 6px; text-align: right; color: inherit;
+    opacity: 0; transition: opacity .12s ease, color .15s ease;
+  }
+  .dsbt-show .dsbt-title { opacity: 1; }
+
+  /* Star bookmark — appears on row hover while the panel is expanded; gold
+     when marked. A real sibling button next to the jump target, so marking
+     stays keyboard-operable without nested interactive elements. */
+  .dsbt-star {
+    font-size: 13px; line-height: 16px; width: 18px; height: 18px;
+    display: inline-flex; align-items: center; justify-content: center;
+    opacity: 0; cursor: pointer; transition: all .15s ease; margin-right: 6px;
+    flex-shrink: 0; color: rgba(0, 0, 0, .25); border-radius: 4px; user-select: none;
+    -webkit-user-select: none;
+    background: none; border: none; padding: 0; font-family: inherit;
+  }
+  .dsbt-star:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; opacity: .9; }
+  .dsbt-wrap.dsbt-show .dsbt-item:hover .dsbt-star { opacity: .75; }
+  .dsbt-wrap.dsbt-show .dsbt-star:hover { opacity: 1; transform: scale(1.2); color: #d97706; }
+  .dsbt-wrap.dsbt-show .dsbt-star.dsbt-staron { opacity: 1; color: #f59e0b; }
+  body[data-ds-dark-theme] .dsbt-star { color: rgba(255, 255, 255, .25); }
+  body[data-ds-dark-theme] .dsbt-wrap.dsbt-show .dsbt-star:hover { color: #fde047; }
+  body[data-ds-dark-theme] .dsbt-wrap.dsbt-show .dsbt-star.dsbt-staron { opacity: 1; color: #fbbf24; }
+
+  .dsbt-ind { flex-shrink: 0; justify-content: center; align-items: center; width: 16px; height: 20px; display: flex; }
+  .dsbt-line {
+    background-color: var(--dsw-alias-border-l4, rgba(0, 0, 0, .16));
+    border-radius: 4px; flex-shrink: 0; width: 8px; height: 2px;
+    transition: background-color .2s ease, transform .2s ease, width .2s ease, height .2s ease;
+  }
+  .dsbt-item:hover .dsbt-line { background-color: var(--dsw-alias-label-primary, rgba(0, 0, 0, .9)); }
+  .dsbt-item.dsbt-active { color: var(--dsw-alias-state-business-primary, #4d6bfe); }
+  .dsbt-item.dsbt-active .dsbt-title { color: var(--dsw-alias-state-business-primary, #4d6bfe); font-weight: 500; }
+  .dsbt-item.dsbt-active .dsbt-line {
+    background-color: var(--dsw-alias-state-business-primary, #4d6bfe);
+    transform-origin: 50%; transform: scale(1.5);
+  }
+  body[data-ds-dark-theme] .dsbt-item.dsbt-active { color: var(--dsw-alias-state-business-primary, #4d6bfe); }
+  body[data-ds-dark-theme] .dsbt-line { background-color: rgba(255, 255, 255, .2); }
+  body[data-ds-dark-theme] .dsbt-item:hover .dsbt-line { background-color: rgba(255, 255, 255, .9); }
+
+  /* Marked (key-point) rows: a wider golden tick in both themes; the active
+     state keeps its brand-blue scale so reading position always wins. */
+  .dsbt-item.dsbt-marked .dsbt-line { background-color: #d97706; width: 10px; height: 2.5px; }
+  .dsbt-item.dsbt-marked:hover .dsbt-line { background-color: #b45309; }
+  .dsbt-item.dsbt-marked.dsbt-active .dsbt-line {
+    background-color: var(--dsw-alias-state-business-primary, #4d6bfe);
+    transform-origin: 50%; transform: scale(1.5);
+  }
+  body[data-ds-dark-theme] .dsbt-item.dsbt-marked .dsbt-line { background-color: #fbbf24; width: 10px; height: 2.5px; }
+  body[data-ds-dark-theme] .dsbt-item.dsbt-marked:hover .dsbt-line { background-color: #fde047; }
+
+  /* ---- Unified glass integration -----------------------------------------
+     Glass system on (wallpaper active + panelOpacity < 1): the rail joins
+     the composer/bubble recipe — the same translucent fill token and the
+     same blur/saturate/brightness chain (the glass-blur slider drives it,
+     no fixed 5/16px). Placed after the dark-theme rules so equal-specificity
+     overrides win in both schemes. */
+  body[data-dsh-bg-glass] .dsbt-bg,
+  body[data-dsh-bg-glass] .dsbt-wrap.dsbt-show {
+    background-color: var(--dsw-specific-input-major);
+    -webkit-backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+    backdrop-filter: blur(var(--bg-glass-blur, 16px)) saturate(var(--bg-glass-saturate, 1.42)) brightness(var(--bg-glass-brightness, 1)) contrast(1.01);
+  }
+  body[data-dsh-bg-glass] .dsbt-fade {
+    background-color: var(--dsw-specific-input-major);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dsbt-nav, .dsbt-bg, .dsbt-wrap, .dsbt-fade, .dsbt-title, .dsbt-line, .dsbt-jump, .dsbt-star, .dsbt-filterbtn, .dsbt-filterbar { transition: none; }
+  }
+`;
+		//#endregion
+		//#region src/client/timeline.tsx
+		/**
+		* Conversation timeline rail — DeepSeek web ScrollNav rebuilt on this
+		* plugin's frosted-glass system (styles: ./timeline-css.ts).
+		*
+		* Collapsed: a fixed 34px-wide frosted capsule at the right edge, vertically
+		* centered, one tick per user message (active tick scaled + brand blue,
+		* key-point bookmarks golden). Hovering expands the SAME box into a frosted
+		* panel listing every user question (title fades in; >8 messages widen to
+		* 260px, otherwise the width fits the longest title). Both states share one
+		* computed outer height, so expanding never jumps, and 32px fade veils mask
+		* the clipped edge on each side while that side actually scrolls.
+		*
+		* Enhancements ported from dsh-chat-timeline v0.1.4 (MIT):
+		* - Key-point bookmarks: star a question in the expanded panel, persisted per
+		*   session in localStorage; marked rows show a golden tick in the capsule
+		*   and a "marked only" filter narrows the list.
+		* - Jump stabilization: the reading-position tracker freezes while a smooth
+		*   jump animates (cleared 150ms after the last scroll event, plus an 800ms
+		*   fallback), so the panel cannot jitter mid-jump.
+		* - Rewind integration: messages withdrawn by a rewind command node are
+		*   filtered out of the rail.
+		*
+		* Data source, fastest first: the host-side `bgTimeline` session projection
+		* (src/projection.ts — a complete enumeration of the session's user messages
+		* delivered through the projection baseline/push channel) -> the loaded chat
+		* node window. The conversation's own lazy loading is never driven from here;
+		* clicking a row pages older history on demand, scrolls the conversation to
+		* the target row, and keeps the rail's own active row visible.
+		*
+		* Collapsed idle strategy (official ScrollNav behavior): the tick stack is
+		* pinned to the BOTTOM inner edge — the newest question's tick always sits at
+		* the bottom of the capsule, older ticks clip away at the top. Hovering
+		* expands the SAME box and scrolls the active row into view instead.
+		*
+		* The rail reads the shared settings transport: it renders unless
+		* `timeline: false`. Its glass paints are self-contained official values
+		* (see timeline-css.ts), independent of the plugin's token overrides.
+		*/
+		if (typeof document !== "undefined") injectTimelineCss();
+		const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+		/** Extract preview text from a user message's ContentBlock list. */
+		function userTextOf(content) {
+			if (!Array.isArray(content)) return "";
+			let out = "";
+			for (const block of content) if (block !== null && typeof block === "object" && block.type === "text") {
+				const text = block.text;
+				if (typeof text === "string") out += text;
+			}
+			return out.trim().slice(0, 80);
+		}
+		/**
+		* Stable bookmark key for one entry: the durable message key, falling back to
+		* the anchor seq — so marks survive history reloads. Entries with neither are
+		* not markable (empty key).
+		* @param m - the entry (or any shaped object).
+		*/
+		function markKeyOf(m) {
+			if (m === null || typeof m !== "object") return "";
+			const rec = m;
+			if (typeof rec.key === "string" && rec.key !== "") return `key:${rec.key}`;
+			return typeof rec.seq === "number" ? `seq:${rec.seq}` : "";
+		}
+		/** localStorage key prefix for the per-session marked-key lists. */
+		const MARKS_STORAGE_PREFIX = "dsbt_marks_";
+		/**
+		* Read the marked keys for one session from localStorage.
+		* @param sessionId - the session the marks belong to.
+		*/
+		function readMarks(sessionId) {
+			if (typeof window === "undefined" || !sessionId) return [];
+			try {
+				const raw = window.localStorage.getItem(MARKS_STORAGE_PREFIX + sessionId);
+				if (!raw) return [];
+				const parsed = JSON.parse(raw);
+				return Array.isArray(parsed) ? parsed.filter((k) => typeof k === "string") : [];
+			} catch {
+				return [];
+			}
+		}
+		/**
+		* Persist the marked keys for one session (removes the key when empty).
+		* @param sessionId - the session the marks belong to.
+		* @param marks - the marked-key list.
+		*/
+		function writeMarks(sessionId, marks) {
+			if (typeof window === "undefined" || !sessionId) return;
+			try {
+				if (!Array.isArray(marks) || marks.length === 0) window.localStorage.removeItem(MARKS_STORAGE_PREFIX + sessionId);
+				else window.localStorage.setItem(MARKS_STORAGE_PREFIX + sessionId, JSON.stringify(marks));
+			} catch {}
+		}
+		/**
+		* Extract the rewind target seq from a rewind outcome text.
+		* @param text - the command outcome text.
+		*/
+		function rewindTargetOfOutcome(text) {
+			if (typeof text !== "string") return void 0;
+			const digits = (/rewound.*?(?:target\s+)?(\d+)/i.exec(text) ?? /#(\d+)/.exec(text))?.[1];
+			if (digits === void 0) return void 0;
+			const n = Number.parseInt(digits, 10);
+			return Number.isFinite(n) ? n : void 0;
+		}
+		/**
+		* Is this rewind command a preview/dry-run (marks the target hidden without
+		* an outcome)?
+		* @param command - the command payload.
+		*/
+		function isRewindPreviewCommand(command) {
+			if (command.args === null || typeof command.args !== "object") return false;
+			const args = command.args;
+			return args.preview === true || args.dryRun === true;
+		}
+		/**
+		* Collect the seq numbers a rewind hid: preview commands hide their target
+		* directly; successful commands hide their own row plus every node anchored
+		* inside the rewound span [target, sourceEventSeq].
+		* @param chat - a chat snapshot (loosely typed on purpose).
+		*/
+		function hiddenSeqsOfChat(chat) {
+			const hidden = rewindHiddenSeqsOfChat(chat);
+			const spans = rewindSpansOfChat(chat);
+			if (spans.length === 0) return hidden;
+			const nodes = chat.nodes;
+			if (nodes === void 0 || typeof nodes.values !== "function") return hidden;
+			for (const node of nodes.values()) {
+				if (node === null || typeof node !== "object") continue;
+				const anchor = typeof node.anchorSeq === "number" ? node.anchorSeq : void 0;
+				if (anchor === void 0) continue;
+				if (spans.some((span) => anchor >= span.start && anchor <= span.end)) hidden.add(anchor);
+			}
+			return hidden;
+		}
+		/**
+		* Seq numbers a rewind hid directly: successful commands hide their own row;
+		* preview commands hide their target.
+		* @param chat - a chat snapshot (loosely typed on purpose).
+		*/
+		function rewindHiddenSeqsOfChat(chat) {
+			const hidden = /* @__PURE__ */ new Set();
+			if (chat === null || typeof chat !== "object") return hidden;
+			const nodes = chat.nodes;
+			if (nodes === void 0 || typeof nodes.values !== "function") return hidden;
+			for (const node of nodes.values()) {
+				if (node === null || typeof node !== "object") continue;
+				if (node.kind !== "command") continue;
+				const command = node.data;
+				if (command === null || typeof command !== "object") continue;
+				if (command.name !== "rewind") continue;
+				if (isRewindPreviewCommand(command)) {
+					if (typeof command.seq === "number") hidden.add(command.seq);
+					continue;
+				}
+				const outcome = command.outcome;
+				if (outcome === null || typeof outcome !== "object" || outcome.kind !== "success") continue;
+				if (typeof command.seq === "number") hidden.add(command.seq);
+			}
+			return hidden;
+		}
+		/**
+		* The [target, sourceEventSeq] spans successful rewind commands cut — the
+		* range form of hiding, needed to filter sources that are NOT chat nodes
+		* (the host projection) by plain seq membership.
+		* @param chat - a chat snapshot (loosely typed on purpose).
+		*/
+		function rewindSpansOfChat(chat) {
+			const spans = [];
+			if (chat === null || typeof chat !== "object") return spans;
+			const nodes = chat.nodes;
+			if (nodes === void 0 || typeof nodes.values !== "function") return spans;
+			for (const node of nodes.values()) {
+				if (node === null || typeof node !== "object") continue;
+				if (node.kind !== "command") continue;
+				const command = node.data;
+				if (command === null || typeof command !== "object") continue;
+				if (command.name !== "rewind") continue;
+				if (isRewindPreviewCommand(command)) continue;
+				const outcome = command.outcome;
+				if (outcome === null || typeof outcome !== "object" || outcome.kind !== "success") continue;
+				const marker = outcome.sourceEventSeq;
+				if (typeof marker !== "number") continue;
+				const target = rewindTargetOfOutcome(outcome.text);
+				if (target !== void 0) spans.push({
+					start: target,
+					end: marker
+				});
+			}
+			return spans;
+		}
+		/**
+		* Enumerate user messages from the loaded chat-node snapshot (the client-side
+		* collector; sorted by anchor sequence, rewind-hidden entries dropped).
+		* @param snapshot - a session snapshot (loosely typed on purpose).
+		*/
+		function collectMessages(snapshot) {
+			const chat = snapshot?.chat;
+			const nodes = chat?.nodes;
+			if (nodes === void 0 || typeof nodes.values !== "function") return [];
+			const hidden = hiddenSeqsOfChat(chat);
+			const out = [];
+			for (const node of nodes.values()) {
+				if (node === null || typeof node !== "object") continue;
+				if (node.kind !== "user") continue;
+				const data = node.data;
+				if (data === null || typeof data !== "object" || typeof data.time !== "number" || !Array.isArray(data.content)) continue;
+				const key = typeof node.key === "string" ? node.key : void 0;
+				if (key === void 0) continue;
+				const seq = typeof node.anchorSeq === "number" ? node.anchorSeq : 0;
+				if (hidden.has(seq)) continue;
+				out.push({
+					seq,
+					time: data.time,
+					text: userTextOf(data.content),
+					key
+				});
+			}
+			out.sort((a, b) => a.seq - b.seq);
+			return out;
+		}
+		/** Resolve the DOM anchor key of one entry (direct key form only). */
+		function resolveAnchorKey(m) {
+			return typeof m.key === "string" && m.key !== "" ? m.key : void 0;
+		}
+		/** The user-message node definition kind in ui-conversation. */
+		const INPUT_MESSAGE_KIND = "input-message";
+		/**
+		* Rebuild a chat row's DOM anchor key from the durable message id — the same
+		* engine formula as conversationContextKey(kind, id) for the input-message
+		* definition (`13:input-message<id>`), so projected entries can jump even
+		* when their chat node is not loaded yet.
+		* @param id - the durable message id carried by the projection entry.
+		*/
+		function inputAnchorKeyOf(id) {
+			return `13:${INPUT_MESSAGE_KIND}${id}`;
+		}
+		/**
+		* Validate one projected wire value into rail entries (defensive: the value
+		* crosses the wire and may be absent, partial, or stale).
+		* @param value - the raw useProjection(TIMELINE_PROJECTION_KEY) snapshot.
+		*/
+		function normalizeProjectedTimeline(value) {
+			if (value === null || typeof value !== "object") return [];
+			const raw = value.messages;
+			if (!Array.isArray(raw)) return [];
+			const seen = /* @__PURE__ */ new Set();
+			const out = [];
+			for (const item of raw) {
+				if (item === null || typeof item !== "object") continue;
+				const rec = item;
+				if (typeof rec.seq !== "number" || !Number.isFinite(rec.seq)) continue;
+				if (seen.has(rec.seq)) continue;
+				seen.add(rec.seq);
+				out.push({
+					seq: rec.seq,
+					time: typeof rec.time === "number" ? rec.time : 0,
+					text: typeof rec.text === "string" ? rec.text.slice(0, 80) : "",
+					...typeof rec.id === "string" && rec.id !== "" ? { key: inputAnchorKeyOf(rec.id) } : {}
+				});
+			}
+			out.sort((a, b) => a.seq - b.seq);
+			return out;
+		}
+		/**
+		* Rail messages with the fastest source first: the host projection covers the
+		* WHOLE session (and already excludes rewind cuts), so it wins whenever it
+		* has anything; otherwise fall back to the loaded chat-node window. The
+		* projection path still applies locally-known rewind hiding so a cut lands
+		* instantly even before the next projection push arrives.
+		* @param snapshot - the session conversation snapshot (node fallback).
+		* @param projected - the raw bgTimeline projection value.
+		*/
+		function railMessages(snapshot, projected) {
+			const projectedMessages = normalizeProjectedTimeline(projected);
+			if (projectedMessages.length > 0) {
+				const chat = snapshot?.chat;
+				const hidden = rewindHiddenSeqsOfChat(chat);
+				const spans = rewindSpansOfChat(chat);
+				if (hidden.size === 0 && spans.length === 0) return projectedMessages;
+				return projectedMessages.filter((m) => !hidden.has(m.seq) && !spans.some((span) => m.seq >= span.start && m.seq <= span.end));
+			}
+			return collectMessages(snapshot);
+		}
+		/**
+		* Outer rail height for a message count: rows + breathing room, clamped so
+		* both states always share the exact same height (never jumps on expand).
+		* @param count - number of user messages.
+		*/
+		function railHeightFor(count) {
+			return Math.max(140, Math.min(300, count * 30 + 38));
+		}
+		/** Longest-title width estimate bounds. */
+		const RAIL_MIN_WIDTH = 96;
+		const RAIL_MAX_WIDTH = 260;
+		/**
+		* Measure the expanded-panel width for the given titles (canvas text metrics;
+		* falls back to the max width when measurement is unavailable). Accounts for
+		* the star column so a marked row never clips its tick.
+		* @param texts - the message previews.
+		*/
+		function railWidthFor(texts) {
+			if (texts.length > 8) return RAIL_MAX_WIDTH;
+			let widest = 0;
+			if (typeof document !== "undefined") {
+				const ctx = document.createElement("canvas").getContext("2d");
+				if (ctx) {
+					ctx.font = `13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
+					for (const t of texts) {
+						const w = ctx.measureText(t === "" ? "…" : t).width;
+						if (w > widest) widest = w;
+					}
+				}
+			}
+			return Math.round(Math.max(RAIL_MIN_WIDTH, Math.min(RAIL_MAX_WIDTH, widest + 6 + 24 + 16 + 12)));
+		}
+		/** Ensure the target node is loaded, then scroll its row into view. */
+		async function jumpToMessage(sessionsService, sessionId, key) {
+			const session = sessionsService.binding(sessionId)?.session;
+			if (session === void 0) return false;
+			let guard = 0;
+			while (guard++ < 120) {
+				const snapshot = session.getSnapshot();
+				if (snapshot?.chat?.nodes?.get(key) !== void 0) break;
+				if (snapshot?.hasMore !== true) return false;
+				if (snapshot.loadingOlder === true) {
+					await delay(50);
+					continue;
+				}
+				await session.loadOlder();
+			}
+			const row = document.querySelector("[data-conversation-scroll]")?.querySelector(`[data-chat-anchor-key="${CSS.escape(key)}"]`) ?? null;
+			if (row === null) return false;
+			const reducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			row.scrollIntoView({
+				behavior: reducedMotion ? "auto" : "smooth",
+				block: "center"
+			});
+			return true;
+		}
+		/**
+		* Scroll only the rail itself so the active row stays visible (min distance).
+		* offsetTop math instead of getBoundingClientRect: stable while the panel's
+		* own smooth scroll animates (no feedback loop with live rects).
+		*/
+		function scrollTimelineItemIntoView(page, item) {
+			const pageTop = page.scrollTop;
+			const pageBottom = pageTop + page.clientHeight;
+			const itemTop = item.offsetTop;
+			const itemBottom = itemTop + item.offsetHeight;
+			if (itemTop < pageTop) page.scrollTop = Math.max(0, itemTop - 10);
+			else if (itemBottom > pageBottom) page.scrollTop = itemBottom - page.clientHeight + 10;
+		}
+		/** Is another timeline rail already mounted (e.g. dsh-chat-timeline)? */
+		function otherRailPresent() {
+			return document.querySelector(".dsct_nav") !== null;
+		}
+		/**
+		* The timeline rail component. Portaled to body; registered into the
+		* conversation input dock purely to bind per-session lifecycle.
+		*/
+		function TimelineRail(props) {
+			const { sessionId, sessionsService, useProjection, t } = props;
+			const settings = react.default.useSyncExternalStore(settingsClient.subscribe, settingsClient.getSnapshot);
+			const timelineUnknown = settings.status === "loading";
+			const timelineDisabled = settings.value?.timeline === false;
+			const session = sessionId !== void 0 && sessionsService !== void 0 ? sessionsService.binding(sessionId)?.session : void 0;
+			const subscribeSession = react.default.useCallback((listener) => session === void 0 ? () => {} : session.subscribe(listener), [session]);
+			const snapshotSession = react.default.useCallback(() => session === void 0 ? void 0 : session.getSnapshot(), [session]);
+			const nodeSnapshot = react.default.useSyncExternalStore(subscribeSession, snapshotSession);
+			const projected = useProjection !== void 0 ? useProjection(TIMELINE_PROJECTION_KEY) : void 0;
+			const messages = react.default.useMemo(() => railMessages(nodeSnapshot, projected), [nodeSnapshot, projected]);
+			const [activeIndex, setActiveIndex] = react.default.useState(-1);
+			const [show, setShow] = react.default.useState(false);
+			const [rightOffset, setRightOffset] = react.default.useState(16);
+			const [railWidth, setRailWidth] = react.default.useState(RAIL_MAX_WIDTH);
+			const [fades, setFades] = react.default.useState({
+				top: false,
+				bottom: false
+			});
+			const [hidden, setHidden] = react.default.useState(() => otherRailPresent());
+			const [marks, setMarks] = react.default.useState(() => readMarks(sessionId));
+			const [marksOnly, setMarksOnly] = react.default.useState(false);
+			const [isNarrow, setIsNarrow] = react.default.useState(() => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(max-width: 767px)").matches);
+			const pageRef = react.default.useRef(null);
+			const activeItemRef = react.default.useRef(null);
+			const jumpPendingRef = react.default.useRef(false);
+			const jumpFallbackRef = react.default.useRef(void 0);
+			react.default.useEffect(() => {
+				setMarks(readMarks(sessionId));
+				setMarksOnly(false);
+			}, [sessionId]);
+			const markedSet = react.default.useMemo(() => new Set(marks), [marks]);
+			const marksRef = react.default.useRef(marks);
+			marksRef.current = marks;
+			const toggleMark = react.default.useCallback((m) => {
+				const k = markKeyOf(m);
+				if (k === "") return;
+				const prev = marksRef.current;
+				const next = prev.includes(k) ? prev.filter((x) => x !== k) : [...prev, k];
+				marksRef.current = next;
+				setMarks(next);
+				writeMarks(sessionId, next);
+			}, [sessionId]);
+			react.default.useEffect(() => {
+				if (typeof window.matchMedia !== "function") return;
+				const mql = window.matchMedia("(max-width: 767px)");
+				const onChange = (e) => setIsNarrow(e.matches);
+				mql.addEventListener("change", onChange);
+				return () => mql.removeEventListener("change", onChange);
+			}, []);
+			react.default.useEffect(() => {
+				setRailWidth(railWidthFor(messages.map((m) => m.text)));
+			}, [messages]);
+			react.default.useEffect(() => {
+				if (messages.length === 0) return;
+				const indexByKey = /* @__PURE__ */ new Map();
+				messages.forEach((m, i) => {
+					const key = resolveAnchorKey(m);
+					if (key !== void 0) indexByKey.set(key, i);
+				});
+				const sp = document.querySelector("[data-conversation-scroll]");
+				if (sp === null) return;
+				const rows = sp.querySelectorAll("[data-chat-anchor-key]");
+				let settleTimer;
+				let frame = 0;
+				const nearRows = /* @__PURE__ */ new Set();
+				const updateActive = () => {
+					if (jumpPendingRef.current) return;
+					const rect = sp.getBoundingClientRect();
+					if (rect.height === 0) return;
+					const candidates = nearRows.size > 0 ? nearRows : rows;
+					const line = rect.top + rect.height * .4;
+					let best = -1;
+					let bestDist = Infinity;
+					for (const row of candidates) {
+						const key = row.getAttribute("data-chat-anchor-key");
+						if (key === null) continue;
+						const idx = indexByKey.get(key) ?? -1;
+						if (idx === -1) continue;
+						const r = row.getBoundingClientRect();
+						const dist = Math.abs(r.top + r.height / 2 - line);
+						if (dist < bestDist) {
+							bestDist = dist;
+							best = idx;
+						}
+					}
+					setActiveIndex(best);
+				};
+				const scheduleMeasure = () => {
+					if (frame !== 0) return;
+					frame = window.requestAnimationFrame(() => {
+						frame = 0;
+						updateActive();
+					});
+				};
+				let io;
+				if (typeof IntersectionObserver === "function") {
+					io = new IntersectionObserver((entries) => {
+						for (const entry of entries) if (entry.isIntersecting) nearRows.add(entry.target);
+						else nearRows.delete(entry.target);
+						scheduleMeasure();
+					}, { root: sp });
+					rows.forEach((row) => io?.observe(row));
+				}
+				const onScroll = () => {
+					if (settleTimer !== void 0) clearTimeout(settleTimer);
+					settleTimer = window.setTimeout(() => {
+						settleTimer = void 0;
+						if (jumpPendingRef.current) {
+							jumpPendingRef.current = false;
+							if (jumpFallbackRef.current !== void 0) {
+								clearTimeout(jumpFallbackRef.current);
+								jumpFallbackRef.current = void 0;
+							}
+							updateActive();
+						}
+					}, 150);
+					scheduleMeasure();
+				};
+				sp.addEventListener("scroll", onScroll, { passive: true });
+				const interval = window.setInterval(scheduleMeasure, 2e3);
+				scheduleMeasure();
+				return () => {
+					io?.disconnect();
+					if (frame !== 0) cancelAnimationFrame(frame);
+					if (settleTimer !== void 0) clearTimeout(settleTimer);
+					if (jumpFallbackRef.current !== void 0) {
+						clearTimeout(jumpFallbackRef.current);
+						jumpFallbackRef.current = void 0;
+					}
+					sp.removeEventListener("scroll", onScroll);
+					clearInterval(interval);
+				};
+			}, [messages]);
+			const syncFades = react.default.useCallback(() => {
+				const page = pageRef.current;
+				if (page === null) {
+					setFades({
+						top: false,
+						bottom: false
+					});
+					return;
+				}
+				const canTop = page.scrollTop > 2;
+				const canBot = page.scrollTop + page.clientHeight < page.scrollHeight - 2;
+				setFades((prev) => prev.top === canTop && prev.bottom === canBot ? prev : {
+					top: canTop,
+					bottom: canBot
+				});
+			}, []);
+			react.default.useEffect(syncFades, [
+				syncFades,
+				show,
+				messages.length,
+				marksOnly
+			]);
+			react.default.useLayoutEffect(() => {
+				if (!show) return;
+				const page = pageRef.current;
+				const item = activeItemRef.current;
+				if (page === null || item === null) return;
+				scrollTimelineItemIntoView(page, item);
+				syncFades();
+			}, [
+				activeIndex,
+				messages.length,
+				marksOnly,
+				show,
+				syncFades
+			]);
+			const height = railHeightFor(messages.length);
+			react.default.useLayoutEffect(() => {
+				if (show) return;
+				const page = pageRef.current;
+				if (page === null) return;
+				page.scrollTop = page.scrollHeight;
+			}, [
+				show,
+				messages.length,
+				marksOnly,
+				height
+			]);
+			react.default.useEffect(() => {
+				let raf = 0;
+				const measure = () => {
+					raf = 0;
+					const sp = document.querySelector("[data-conversation-scroll]");
+					if (sp === null) return;
+					const rect = sp.getBoundingClientRect();
+					if (rect.width === 0 && rect.height === 0) return;
+					const next = Math.max(8, Math.round(window.innerWidth - rect.right + 12));
+					setRightOffset((prev) => Math.abs(prev - next) > .5 ? next : prev);
+				};
+				const schedule = () => {
+					if (raf === 0) raf = window.requestAnimationFrame(measure);
+				};
+				const sp = document.querySelector("[data-conversation-scroll]");
+				const ro = typeof ResizeObserver === "function" && sp !== null ? new ResizeObserver(schedule) : null;
+				if (ro !== null && sp !== null) ro.observe(sp);
+				window.addEventListener("resize", schedule);
+				const guard = window.setInterval(() => setHidden(otherRailPresent()), 2e3);
+				measure();
+				return () => {
+					if (raf !== 0) cancelAnimationFrame(raf);
+					ro?.disconnect();
+					window.removeEventListener("resize", schedule);
+					clearInterval(guard);
+				};
+			}, []);
+			if (timelineUnknown || timelineDisabled || sessionId === void 0 || sessionsService === void 0 || isNarrow || hidden || messages.length === 0) return null;
+			const activeKey = activeIndex >= 0 && activeIndex < messages.length ? markKeyOf(messages[activeIndex]) : "";
+			const displayMessages = marksOnly ? messages.filter((m) => markedSet.has(markKeyOf(m))) : messages;
+			return react_dom.default.createPortal(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "dsbt-nav",
+				style: {
+					right: rightOffset,
+					["--dsbt-h"]: `${height}px`,
+					["--dsbt-w"]: `${railWidth}px`
+				},
+				role: "navigation",
+				"aria-label": t("timeline.railLabel"),
+				onMouseEnter: () => setShow(true),
+				onMouseLeave: () => setShow(false),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: show ? "dsbt-bg dsbt-bg-hide" : "dsbt-bg" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: show ? "dsbt-wrap dsbt-show" : "dsbt-wrap",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dsbt-filterbar",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: marksOnly ? "dsbt-filterbtn dsbt-filteron" : "dsbt-filterbtn",
+								"aria-pressed": marksOnly,
+								onClick: () => setMarksOnly((v) => !v),
+								children: [t("timeline.marksOnly"), marks.length > 0 ? ` (${marks.length})` : ""]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: fades.top ? "dsbt-fade dsbt-fade-on" : "dsbt-fade",
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: fades.bottom ? "dsbt-fade dsbt-fade-bot dsbt-fade-on" : "dsbt-fade dsbt-fade-bot",
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dsbt-page",
+							ref: pageRef,
+							onScroll: syncFades,
+							children: displayMessages.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dsbt-empty",
+								children: t("timeline.noMarks")
+							}) : displayMessages.map((m) => {
+								const key = resolveAnchorKey(m);
+								const mk = markKeyOf(m);
+								const marked = markedSet.has(mk);
+								const isActive = activeKey !== "" && mk === activeKey;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: `dsbt-item${isActive ? " dsbt-active" : ""}${marked ? " dsbt-marked" : ""}`,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: "dsbt-jump",
+											ref: isActive ? activeItemRef : void 0,
+											title: `${marked ? "★ " : ""}${m.text === "" ? t("timeline.noText") : m.text}`,
+											"aria-label": `${marked ? "★ " : ""}${t("timeline.roleUser")}: ${m.text.slice(0, 60) || t("timeline.noText")}`,
+											"aria-current": isActive ? "location" : void 0,
+											onClick: () => {
+												if (key === void 0) return;
+												jumpPendingRef.current = true;
+												if (jumpFallbackRef.current !== void 0) clearTimeout(jumpFallbackRef.current);
+												jumpFallbackRef.current = window.setTimeout(() => {
+													jumpFallbackRef.current = void 0;
+													jumpPendingRef.current = false;
+												}, 800);
+												jumpToMessage(sessionsService, sessionId, key).catch(() => {});
+											},
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "dsbt-title",
+												children: m.text === "" ? t("timeline.noText") : m.text
+											})
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											className: marked ? "dsbt-star dsbt-staron" : "dsbt-star",
+											"aria-pressed": marked,
+											"aria-label": marked ? t("timeline.unmark") : t("timeline.mark"),
+											onClick: () => toggleMark(m),
+											children: "★"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dsbt-ind",
+											"aria-hidden": true,
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dsbt-line" })
+										})
+									]
+								}, m.seq);
+							})
+						})
+					]
+				})]
+			}), document.body);
+		}
+		//#endregion
 		//#region src/client/index.ts
 		/**
-		* Service injections this entry declares: the `slots` (runtime) and `locale`
-		* services only — the settings surface talks to the plugin's own host route
-		* over plain same-origin fetch, so no settings/connection service is needed.
+		* Service injections this entry declares: `slots` + `locale` for the settings
+		* surface and the timeline slot seat, and `sessions` so the timeline rail can
+		* enumerate user messages and jump between them. The settings surface itself
+		* talks to the plugin's own host route over plain same-origin fetch.
 		*/
-		const inject = ["slots", "locale"];
+		const inject = [
+			"slots",
+			"locale",
+			"sessions"
+		];
 		/**
-		* Client plugin body: paint the persisted background live and register the
-		* General-settings row.
-		* @param ctx - client cordis context (slots/locale injected).
+		* Client plugin body: paint the persisted background live, register the
+		* General-settings row, and mount the conversation timeline rail.
+		* @param ctx - client cordis context (slots/locale/sessions injected).
 		*/
 		function apply(ctx) {
 			const paint = () => {
@@ -1126,6 +2465,13 @@ window.__ModuleLoader__.load({
 				order: 600,
 				locale: "ui-background"
 			}, BackgroundSettingsRow));
+			ctx.slots.inject("conversation.input.dock", () => ctx.slots.register({
+				name: "conversation.input.dock",
+				id: "deepseek-harness-background.timeline",
+				order: 45,
+				locale: "ui-background",
+				inject: () => ({ sessionsService: ctx.sessions })
+			}, TimelineRail));
 			ctx.effect(() => () => {
 				unsubscribe();
 				backgroundPainter.dispose();