@klarkxy/dsh-session-manager 0.3.0 → 0.3.2

package/lib/client.js

@@ -65,18 +65,20 @@ const text = {
 		settingsMode: "继续灰影",
 		modeFixed: "固定文本",
 		modeAuto: "模型生成",
-		settingsModeHint: "输入框为空时显示的灰色继续文本：Tab 填入，点击发送。",
+		settingsModeHint: "输入框为空时显示建议；按 Tab 填入，点击直接发送。",
+		continueSourceLabel: "内容来源",
 		continueTextLabel: "固定文本内容",
 		continueTextPlaceholder: "留空使用默认「继续」",
-		ghostModelLabel: "灰影模型",
-		ghostModelHint: "只在上一轮结束后生成一次，并缓存在这个会话中；留空跟随会话或宿主默认。",
-		welcomeBackGroup: "欢迎回来",
-		recapEnabledLabel: "欢迎回来摘要",
-		recapEnabledHint: "回到空闲的会话时，在对话顶部生成回顾卡片。",
-		recapMinutesLabel: "摘要阈值（分钟）",
-		compactEnabledLabel: "压缩建议",
-		compactEnabledHint: "空闲较久时，回到会话会建议先压缩上下文。",
-		compactMinutesLabel: "建议阈值（分钟）",
+		ghostModelLabel: "生成模型",
+		ghostModelHint: "每轮结束后生成一次并缓存；不选择时使用当前会话或宿主的默认模型。",
+		welcomeBackGroup: "回到会话时",
+		recapEnabledLabel: "显示会话摘要",
+		recapEnabledHint: "在对话中回顾上次进展。",
+		recapMinutesLabel: "离开多久后显示摘要",
+		compactEnabledLabel: "建议压缩上下文",
+		compactEnabledHint: "长时间离开后，建议先压缩上下文。",
+		compactMinutesLabel: "离开多久后显示建议",
+		minutesUnit: "分钟",
 		modelLabel: "摘要模型",
 		modelFollowOption: "当前会话 / 宿主默认模型",
 		modelGroupHint: "只用于欢迎回来摘要；留空跟随会话或宿主默认。",
@@ -119,18 +121,20 @@ const text = {
 		settingsMode: "Continue ghost",
 		modeFixed: "Fixed text",
 		modeAuto: "Model-generated",
-		settingsModeHint: "The grey continuation shown on an empty composer: Tab fills it, clicking sends it.",
+		settingsModeHint: "Show a suggestion when the composer is empty. Press Tab to fill it, or click to send.",
+		continueSourceLabel: "Source",
 		continueTextLabel: "Fixed text",
 		continueTextPlaceholder: "Empty uses the default \"Continue\"",
-		ghostModelLabel: "Ghost model",
-		ghostModelHint: "Generated once after the previous turn ends and cached for this session; empty follows the conversation or host default.",
-		welcomeBackGroup: "Welcome back",
-		recapEnabledLabel: "Welcome-back recap",
-		recapEnabledHint: "Shows a recap card at the top of the conversation when you return to an idle session.",
-		recapMinutesLabel: "Recap threshold (minutes)",
-		compactEnabledLabel: "Compaction suggestion",
-		compactEnabledHint: "Suggests compacting the context when you return after a longer idle stretch.",
-		compactMinutesLabel: "Suggestion threshold (minutes)",
+		ghostModelLabel: "Generation model",
+		ghostModelHint: "Generated once after each turn and cached. The default follows the current conversation or host.",
+		welcomeBackGroup: "When you return",
+		recapEnabledLabel: "Show session recap",
+		recapEnabledHint: "Review your previous progress in the conversation.",
+		recapMinutesLabel: "Show recap after",
+		compactEnabledLabel: "Suggest context compaction",
+		compactEnabledHint: "Suggest compacting the context after a long time away.",
+		compactMinutesLabel: "Show suggestion after",
+		minutesUnit: "minutes",
 		modelLabel: "Recap model",
 		modelFollowOption: "Current conversation / host default",
 		modelGroupHint: "Used only for the welcome-back recap; empty follows the conversation or host default.",
@@ -418,6 +422,17 @@ ${scope} {
 /* --- Layout scaffolding. --- */
 & .dsh-ui-stack { display: flex; flex-direction: column; gap: 12px; }
 & .dsh-ui-stack-lg { display: flex; flex-direction: column; gap: 20px; }
+/* Plugin detail pages share one reading column. These are layout recipes;
+ * controls keep their own primitive styles. Form spacing follows the host's
+ * settings-form/fields.module.css and SettingsForm.module.css. */
+& .dsh-ui-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; min-width: 0; }
+& .dsh-ui-form { display: flex; flex-direction: column; gap: 0; min-width: 0; }
+&.dsh-ui-form > .dsh-ui-field, & .dsh-ui-form > .dsh-ui-field { padding: 12px 0; }
+& .dsh-ui-form-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; min-width: 0; }
+& .dsh-ui-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
+@media (max-width: 560px) {
+  & .dsh-ui-fields-grid { grid-template-columns: minmax(0, 1fr); }
+}
 & .dsh-ui-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
 & .dsh-ui-row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
 & .dsh-ui-spacer { flex: 1; min-width: 0; }
@@ -445,6 +460,9 @@ ${scope} {
  * official primitive, so this only owns the vertical rhythm. --- */
 & .dsh-ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
 & .dsh-ui-field + .dsh-ui-field { border-top: 0.5px solid var(--dsw-alias-border-l2); padding-top: 12px; }
+/* Grid fields share a row, so the stacked-field divider must not win later in
+ * the cascade. Reset it here, after the field recipe. */
+& .dsh-ui-fields-grid > .dsh-ui-field { padding: 0; border: 0; }
 & .dsh-ui-label { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--dsw-alias-label-primary); }
 & .dsh-ui-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
 & .dsh-ui-help { font-size: 12px; line-height: 1.6; color: var(--dsw-alias-label-secondary); }
@@ -635,7 +653,7 @@ ${scope} {
   & *, & *::before, & *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
 }
 }
-`.replace(/^& (\.dsh-ui-[a-z0-9-]+)(?![+>~])/gm, (_match, className) => `&${className}, & ${className}`);
+`.replace(/^& (\.dsh-ui-[a-z0-9-]+)(?=\s*\{)/gm, (_match, className) => `&${className}, & ${className}`);
 }
 //#endregion
 //#region ../dsh-model-route/src/route.ts
@@ -867,7 +885,14 @@ function useModelCatalog(load, options = {}) {
 		refresh
 	};
 }
-/** Also accepts a mapped state from a caller that owns broader async orchestration. */
+/**
+* Also accepts a mapped state from a caller that owns broader async orchestration.
+*
+* The dsh-ui-* classes carry the styling and resolve through the consuming
+* plugin's own officialUiCss scope (every consumer mounts its root class, so
+* e.g. `.dsh-model-hub .dsh-ui-loading` paints this); dsh-model-catalog-status
+* stays as a structural hook for tests and layout, never a colour source.
+*/
 function ModelCatalogStatus({ state, locale }) {
 	const zh = locale?.toLowerCase().startsWith("zh") === true;
 	const copy = zh ? {
@@ -883,15 +908,17 @@ function ModelCatalogStatus({ state, locale }) {
 	};
 	if (!state.loading && !state.error && state.failures.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "dsh-model-catalog-status",
+		className: "dsh-model-catalog-status dsh-ui-stack",
 		lang: zh ? "zh" : "en",
 		children: [
 			state.loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				role: "status",
+				className: "dsh-ui-loading",
 				children: copy.loading
 			}) : null,
 			state.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 				role: "alert",
+				className: "dsh-ui-error dsh-ui-wrap",
 				children: [
 					copy.error,
 					": ",
@@ -900,20 +927,27 @@ function ModelCatalogStatus({ state, locale }) {
 			}) : null,
 			state.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				role: "status",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: copy.partial }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: state.failures.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-					failure.name || failure.id,
-					": ",
-					failure.message
-				] }, `${failure.id}:${index}`)) })]
+				className: "dsh-ui-meta",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: copy.partial }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "dsh-ui-list",
+					children: state.failures.map((failure, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
+						failure.name || failure.id,
+						": ",
+						failure.message
+					] }, `${failure.id}:${index}`))
+				})]
 			}) : null,
-			state.error || state.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-				type: "button",
-				size: "sm",
-				disabled: state.loading,
-				onClick: () => {
-					state.refresh();
-				},
-				children: copy.retry
+			state.error || state.failures.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "dsh-ui-actions",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					type: "button",
+					size: "sm",
+					disabled: state.loading,
+					onClick: () => {
+						state.refresh();
+					},
+					children: copy.retry
+				})
 			}) : null
 		]
 	});
@@ -973,7 +1007,8 @@ function groupModelMenuChoices(choices, query) {
 * Sticky group headings, subsequence ranking, highlight walking and focus
 * hand-back all match the host. SYNC POINT: when the host's ModelSelect or
 * ModelSelect.module.css changes, this copy must be re-transcribed; styles
-* below may only reference --dsw-* theme tokens, never literal colors.
+* below may only reference allowlisted theme tokens (the --dsw-* set plus the
+* host's --ds-* motion tokens), never literal colors.
 *
 * It statically imports the primitives, so only browser clients should load
 * this entry; host code and node tests use the core entry (`./index.ts`).
@@ -1481,7 +1516,8 @@ function ModelMenu(props) {
 * sticky group headings (MenuGroup's own CSS), and the l1-stroke prominent
 * elevation at portal z-index 1100. The trigger mirrors the composer's 28px
 * model pill, chevron rotating open. MenuSurface paints fill and backdrop.
-* Only --dsw-* theme tokens may appear here — a literal color is a bug.
+* Only allowlisted --dsw- and --ds- theme tokens may appear here — a literal
+* color is a bug.
 */
 const modelMenuCss = `
 .dsh-model-menu-root { min-width: 0; position: relative; display: inline-flex; }
@@ -1504,12 +1540,14 @@ const modelMenuCss = `
   display: flex;
 }
 .dsh-model-menu-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
-.dsh-model-menu-trigger:focus-visible:not([data-selection-focus]) { box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); }
+.dsh-model-menu-trigger:focus-visible:not([data-selection-focus]) { box-shadow: 0 0 0 var(--dsw-focus-ring-width) var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); }
 .dsh-model-menu-trigger:disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
 .dsh-model-menu-triggerLabel { text-overflow: ellipsis; white-space: nowrap; min-width: 0; overflow: hidden; }
 .dsh-model-menu-triggerEffort { text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--dsw-alias-label-caption); flex-shrink: 1000; overflow: hidden; }
-.dsh-model-menu-chevron { color: var(--dsw-alias-label-caption); flex: none; transition: transform 0.12s; }
+.dsh-model-menu-chevron { color: var(--dsw-alias-label-caption); flex: none; transition: transform var(--ds-transition-duration) var(--ds-ease-in-out); }
 .dsh-model-menu-chevronOpen { transform: rotate(180deg); }
+/* Portal overlay: the host publishes no z-index token, so the card keeps the
+ * native menu layer's 1100 verbatim. */
 .dsh-model-menu-menu {
   z-index: 1100;
   --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
@@ -1535,6 +1573,8 @@ const modelMenuCss = `
 .dsh-model-menu-searchWithQuery { padding-right: 34px; }
 .dsh-model-menu-searchRow .dsh-model-menu-search input { padding: 0; font-size: 12px; line-height: normal; }
 .dsh-model-menu-searchRow .dsh-model-menu-search input::placeholder { color: var(--dsw-alias-label-caption); }
+/* The clear button is a circle by geometry (border-radius: 50%), a shape the
+ * radius token scale does not describe. */
 .dsh-model-menu-searchClear {
   width: 24px;
   height: 24px;
@@ -1624,25 +1664,88 @@ ${modelMenuCss}
   min-width: 0;
 }
 .${FREE_CHAT_ROOT} .dsh-free-alert { margin: 0; }
-/* Settings page: a feature is its toggle row plus the nested well that holds
- * the fields the switch gates. The well reuses the nested-card surface
- * (layer-2 on layer-1) so the grouping reads without another heading. */
+/* Settings page: one quiet reading surface. Rules, not nested wells, separate
+ * sections; dependent controls align with the feature they belong to. */
+.${FREE_CHAT_ROOT} .dsm-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+}
+.${FREE_CHAT_ROOT} .dsm-setting {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.${FREE_CHAT_ROOT} .dsm-setting + .dsm-setting {
+  padding-top: 20px;
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+.${FREE_CHAT_ROOT} .dsm-setting-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.${FREE_CHAT_ROOT} .dsm-ghost-controls {
+  display: grid;
+  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
+  align-items: start;
+  gap: 16px;
+}
+/* SegmentedTabs is 42px tall; its adjacent text controls share that baseline. */
+.${FREE_CHAT_ROOT} .dsm-ghost-controls .dsh-model-menu-trigger,
+.${FREE_CHAT_ROOT} .dsm-ghost-controls .dsm-ghost-input {
+  height: 42px;
+}
 .${FREE_CHAT_ROOT} .dsm-feature + .dsm-feature {
+  margin-top: 4px;
   border-top: 0.5px solid var(--dsw-alias-border-l2);
 }
-.${FREE_CHAT_ROOT} .dsm-subs {
+.${FREE_CHAT_ROOT} .dsm-feature > .dsh-ui-toggle-row { padding: 8px 0; }
+.${FREE_CHAT_ROOT} .dsm-feature-options {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin: 0 0 4px;
-  padding: 12px;
-  border-radius: var(--dsw-radius-md);
-  background: var(--dsw-alias-bg-layer-2);
+  gap: 8px;
+  padding: 4px 0 8px;
 }
-.${FREE_CHAT_ROOT} .dsm-subs[data-disabled='true'] .dsh-ui-label {
+.${FREE_CHAT_ROOT} .dsm-feature-options[data-disabled='true'] .dsh-ui-label,
+.${FREE_CHAT_ROOT} .dsm-feature-options[data-disabled='true'] .dsh-ui-meta {
   color: var(--dsw-alias-label-tertiary);
 }
-.${FREE_CHAT_ROOT} .dsm-minutes { width: 120px; }
+.${FREE_CHAT_ROOT} .dsm-compact-options { max-width: calc(50% - 10px); }
+.${FREE_CHAT_ROOT} .dsm-model-field .dsh-model-menu-root,
+.${FREE_CHAT_ROOT} .dsm-model-field .dsh-model-menu-trigger {
+  width: 100%;
+  max-width: none;
+}
+.${FREE_CHAT_ROOT} .dsm-model-field .dsh-model-menu-trigger {
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 10px;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+  color: var(--dsw-alias-label-primary);
+}
+.${FREE_CHAT_ROOT} .dsm-model-field .dsh-model-menu-triggerLabel {
+  flex: 1;
+  text-align: left;
+}
+.${FREE_CHAT_ROOT} .dsm-settings-footer .dsh-ui-notice--error {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+.${FREE_CHAT_ROOT} .dsm-minutes-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.${FREE_CHAT_ROOT} .dsm-minutes { width: 88px; }
+@media (max-width: 560px) {
+  .${FREE_CHAT_ROOT} .dsm-ghost-controls { grid-template-columns: minmax(0, 1fr); }
+  .${FREE_CHAT_ROOT} .dsm-compact-options { max-width: none; }
+}
 /* Welcome-back card: one flat full-width row at the latest turn's tail in the
  * chat flow — a single bordered surface with the recap laid out inline, no
  * nested box. */
@@ -1703,20 +1806,6 @@ ${modelMenuCss}
 `;
 //#endregion
 //#region src/free-panel.tsx
-function FreeChatIcon({ size }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-		width: size,
-		height: size,
-		viewBox: "0 0 16 16",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M2.5 3.5h11v7.5h-4.2L6 13.5V11H2.5z",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "1.2"
-		})
-	});
-}
 /** Create failures used to surface inside the standalone panel. The panel is gone,
 * so they get a small overlay instead; closing it dismisses the stored notice. */
 function CreateNoticeDialog(props) {
@@ -1914,7 +2003,7 @@ function TemporaryWorkspacePicker(props) {
 			}] : [], {
 				id: "::temporary-workspace",
 				label: uiText(locale, "tempWorkspace"),
-				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FreeChatIcon, { size: 16 }),
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconNewChatOutlineRegular, { size: 16 }),
 				disabled: busy
 			}],
 			onSelect: (id) => {
@@ -1927,6 +2016,7 @@ function TemporaryWorkspacePicker(props) {
 		}),
 		props.open && workspaces.phase === "pending" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			role: "status",
+			className: `dsh-free-chat dsh-ui-loading`,
 			children: props.t("picker.loading")
 		}),
 		props.renderSlot(TEMP_WORKSPACE_FLOW_SLOT, {
@@ -1962,6 +2052,7 @@ function TemporaryWorkspacePicker(props) {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
 			open: failure !== void 0,
+			className: FREE_CHAT_ROOT,
 			title: props.t("folderError.title"),
 			closeLabel: props.t("close"),
 			onClose: () => setFailure(void 0),
@@ -1986,6 +2077,7 @@ function TemporaryWorkspaceNotice({ model, locale }) {
 	const state = (0, react.useSyncExternalStore)(model.subscribe, model.getSnapshot, model.getSnapshot);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Modal, {
 		open: state.failure !== void 0,
+		className: FREE_CHAT_ROOT,
 		title: uiText(locale, "createFailed"),
 		closeLabel: uiText(locale, "close"),
 		onClose: model.dismissFailure,
@@ -2795,11 +2887,11 @@ function createContinueModel(host) {
 		load(sessionId) {
 			if (sessionId === "" || lifetime.signal.aborted || inflight.has(sessionId)) return;
 			const current = read(sessionId);
-			if (current.text !== void 0 && current.seq === void 0) return;
+			if (current.text !== void 0 && current.seq === void 0 && current.pending !== true) return;
 			const ticket = new AbortController();
 			inflight.set(sessionId, ticket);
 			const signal = AbortSignal.any([lifetime.signal, ticket.signal]);
-			callContinueSuggest(host, sessionId, current.seq, signal).then((value) => {
+			callContinueSuggest(host, sessionId, current.text ? current.seq : void 0, signal).then((value) => {
 				if (signal.aborted || inflight.get(sessionId) !== ticket) return;
 				write(sessionId, value);
 			}).catch(() => {}).finally(() => {
@@ -2838,7 +2930,9 @@ async function callContinueSuggest(host, sessionId, knownSeq, signal) {
 	const seq = typeof value?.seq === "number" && Number.isSafeInteger(value.seq) && value.seq >= 0 ? value.seq : void 0;
 	return {
 		text,
-		...seq === void 0 ? {} : { seq }
+		...seq === void 0 ? {} : { seq },
+		...value?.pending === true ? { pending: true } : {},
+		...value?.fallback === true ? { fallback: true } : {}
 	};
 }
 function createPresenceConfigModel(host, delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))) {
@@ -3295,8 +3389,10 @@ function ContinueGhost(props) {
 	const blank = props.useSession?.((state) => state.blank) ?? true;
 	const running = props.useSessionStatus?.((state) => state.get(sessionId)?.running === true) ?? false;
 	const snapshot = (0, react.useSyncExternalStore)(props.model.subscribe, () => props.model.getSnapshot(sessionId), () => props.model.getSnapshot(sessionId));
-	const text = snapshot.text ?? uiText(props.locale, "continueDefault");
-	const active = sessionId !== "" && !blank && bare && draft === "" && phase === "plain";
+	const shown = running || snapshot.pending === true || snapshot.text === void 0 ? "" : snapshot.text ?? (snapshot.fallback === true ? uiText(props.locale, "continueDefault") : "");
+	const idle = sessionId !== "" && !blank && bare && draft === "" && phase === "plain" && !running;
+	const active = shown !== "" && idle;
+	const text = shown;
 	const latest = (0, react.useRef)({
 		active,
 		text
@@ -3312,18 +3408,18 @@ function ContinueGhost(props) {
 		const finished = wasRunning.current && !running;
 		wasRunning.current = running;
 		if (finished && sessionId !== "") props.model.invalidate(sessionId);
-		if (active && !running) props.model.load(sessionId);
+		if (idle && !running) props.model.load(sessionId);
 	}, [
 		props.model,
-		active,
+		idle,
 		running,
 		sessionId
 	]);
 	(0, react.useEffect)(() => {
-		if (active && !running && snapshot.text === void 0) props.model.load(sessionId);
+		if (idle && !running && snapshot.text === void 0) props.model.load(sessionId);
 	}, [
 		props.model,
-		active,
+		idle,
 		running,
 		sessionId,
 		snapshot
@@ -3618,118 +3714,136 @@ function SessionManagerSettings(props) {
 		});
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `${FREE_CHAT_ROOT} dsh-ui-panel`,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "dsh-ui-card",
+		className: `${FREE_CHAT_ROOT} dsh-ui-page`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "dsm-settings",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "dsm-setting",
+				"aria-labelledby": `${tabsId}-ghost-heading`,
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "dsh-ui-heading",
-						children: copy("settingsMode")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-						className: "dsh-ui-hint",
-						children: copy("settingsModeHint")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
-						label: copy("settingsMode"),
-						items: [{
-							id: `${tabsId}-fixed`,
-							panelId: fixedPanelId,
-							value: "fixed",
-							label: copy("modeFixed")
-						}, {
-							id: `${tabsId}-auto`,
-							panelId: autoPanelId,
-							value: "auto",
-							label: copy("modeAuto")
-						}],
-						value: draft.continueMode,
-						onChange: (value) => edit({
-							...draft,
-							continueMode: value
-						})
-					}) }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						role: "tabpanel",
-						id: fixedPanelId,
-						"aria-labelledby": `${tabsId}-fixed`,
-						hidden: draft.continueMode !== "fixed",
-						children: draft.continueMode === "fixed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-							className: "dsh-ui-field",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "dsh-ui-label",
-								children: copy("continueTextLabel")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
-								value: draft.continueText,
-								placeholder: copy("continueTextPlaceholder"),
-								onChange: (event) => edit({
-									...draft,
-									continueText: event.target.value
-								})
-							})]
-						}) : null
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+						className: "dsm-setting-header",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							id: `${tabsId}-ghost-heading`,
+							className: "dsh-ui-title",
+							children: copy("settingsMode")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dsh-ui-hint",
+							children: copy("settingsModeHint")
+						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						role: "tabpanel",
-						id: autoPanelId,
-						"aria-labelledby": `${tabsId}-auto`,
-						hidden: draft.continueMode !== "auto",
-						children: draft.continueMode === "auto" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsh-ui-field",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dsm-ghost-controls",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ui-field",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ui-label",
-									children: copy("ghostModelLabel")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
-									locale: props.locale,
-									open: ghostMenuOpen,
-									onOpenChange: setGhostMenuOpen,
-									listClassName: FREE_CHAT_ROOT,
-									anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-										type: "button",
-										className: "dsh-model-menu-trigger",
-										"aria-label": `${copy("ghostModelLabel")}: ${ghostLabel}`,
-										"aria-haspopup": "menu",
-										"aria-expanded": ghostMenuOpen,
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "dsh-model-menu-triggerLabel",
-											children: ghostLabel
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${ghostMenuOpen ? " dsh-model-menu-chevronOpen" : ""}` })]
-									}),
-									choices: selectableChoices,
-									selected: ghostRoute,
-									onPick: (route) => edit({
-										...draft,
-										ghostModel: modelRouteKey(route.provider, route.model)
-									}),
-									leading: [{
-										id: "follow",
-										label: copy("modelFollowOption"),
-										selected: !ghostRoute
+									children: copy("continueSourceLabel")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.SegmentedTabs, {
+									label: copy("continueSourceLabel"),
+									items: [{
+										id: `${tabsId}-fixed`,
+										panelId: fixedPanelId,
+										value: "fixed",
+										label: copy("modeFixed")
+									}, {
+										id: `${tabsId}-auto`,
+										panelId: autoPanelId,
+										value: "auto",
+										label: copy("modeAuto")
 									}],
-									onPickLeading: () => edit({
+									value: draft.continueMode,
+									onChange: (value) => edit({
 										...draft,
-										ghostModel: ""
-									}),
-									modelValue: ghostLabel
-								}) }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-									className: "dsh-ui-hint",
-									children: copy("ghostModelHint")
-								})
-							]
-						}) : null
-					})
+										continueMode: value
+									})
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								role: "tabpanel",
+								id: fixedPanelId,
+								"aria-labelledby": `${tabsId}-fixed`,
+								hidden: draft.continueMode !== "fixed",
+								children: draft.continueMode === "fixed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+									className: "dsh-ui-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ui-label",
+										children: copy("continueTextLabel")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+										className: "dsm-ghost-input",
+										value: draft.continueText,
+										placeholder: copy("continueTextPlaceholder"),
+										onChange: (event) => edit({
+											...draft,
+											continueText: event.target.value
+										})
+									})]
+								}) : null
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								role: "tabpanel",
+								id: autoPanelId,
+								"aria-labelledby": `${tabsId}-auto`,
+								hidden: draft.continueMode !== "auto",
+								children: draft.continueMode === "auto" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ui-field dsm-model-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ui-label",
+										children: copy("ghostModelLabel")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+										locale: props.locale,
+										open: ghostMenuOpen,
+										onOpenChange: setGhostMenuOpen,
+										listClassName: FREE_CHAT_ROOT,
+										anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dsh-model-menu-trigger",
+											"aria-label": `${copy("ghostModelLabel")}: ${ghostLabel}`,
+											"aria-haspopup": "menu",
+											"aria-expanded": ghostMenuOpen,
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "dsh-model-menu-triggerLabel",
+												children: ghostLabel
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${ghostMenuOpen ? " dsh-model-menu-chevronOpen" : ""}` })]
+										}),
+										choices: selectableChoices,
+										selected: ghostRoute,
+										onPick: (route) => edit({
+											...draft,
+											ghostModel: modelRouteKey(route.provider, route.model)
+										}),
+										leading: [{
+											id: "follow",
+											label: copy("modelFollowOption"),
+											selected: !ghostRoute
+										}],
+										onPickLeading: () => edit({
+											...draft,
+											ghostModel: ""
+										}),
+										modelValue: ghostLabel
+									})]
+								}) : null
+							})
+						]
+					}),
+					draft.continueMode === "auto" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-ui-hint",
+						children: copy("ghostModelHint")
+					}) : null
 				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "dsh-ui-card",
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "dsm-setting",
+				"aria-labelledby": `${tabsId}-return-heading`,
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: "dsh-ui-heading",
-						children: copy("welcomeBackGroup")
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+						className: "dsm-setting-header",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							id: `${tabsId}-return-heading`,
+							className: "dsh-ui-title",
+							children: copy("welcomeBackGroup")
+						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dsm-feature",
@@ -3753,84 +3867,82 @@ function SessionManagerSettings(props) {
 								})
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dsm-subs",
+							className: "dsm-feature-options",
 							"data-disabled": draft.recapEnabled ? void 0 : "true",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dsh-ui-fields-grid",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 									className: "dsh-ui-field",
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: "dsh-ui-label",
 										children: copy("recapMinutesLabel")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
-										className: "dsm-minutes",
-										value: draft.recapMinutes,
-										inputMode: "numeric",
-										disabled: !draft.recapEnabled,
-										"aria-invalid": recapInvalid || void 0,
-										"aria-describedby": recapInvalid ? `${tabsId}-recap-error` : void 0,
-										onChange: (event) => edit({
-											...draft,
-											recapMinutes: event.target.value
-										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "dsm-minutes-control",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+											className: "dsm-minutes",
+											value: draft.recapMinutes,
+											inputMode: "numeric",
+											disabled: !draft.recapEnabled,
+											"aria-invalid": recapInvalid || void 0,
+											"aria-describedby": recapInvalid ? `${tabsId}-recap-error` : void 0,
+											onChange: (event) => edit({
+												...draft,
+												recapMinutes: event.target.value
+											})
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dsh-ui-meta",
+											children: copy("minutesUnit")
+										})]
 									})]
 								}), recapInvalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 									id: `${tabsId}-recap-error`,
 									className: "dsh-ui-error",
 									role: "alert",
 									children: copy("minutesInvalid")
-								}) : null] }),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "dsh-ui-field",
-									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: "dsh-ui-label",
-											children: copy("modelLabel")
+								}) : null] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dsh-ui-field dsm-model-field",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ui-label",
+										children: copy("modelLabel")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
+										locale: props.locale,
+										open: menuOpen,
+										onOpenChange: setMenuOpen,
+										listClassName: FREE_CHAT_ROOT,
+										anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+											type: "button",
+											className: "dsh-model-menu-trigger",
+											disabled: !draft.recapEnabled,
+											"aria-label": `${copy("modelLabel")}: ${selectedLabel}`,
+											"aria-haspopup": "menu",
+											"aria-expanded": menuOpen,
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "dsh-model-menu-triggerLabel",
+												children: selectedLabel
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${menuOpen ? " dsh-model-menu-chevronOpen" : ""}` })]
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelMenu, {
-											locale: props.locale,
-											open: menuOpen,
-											onOpenChange: setMenuOpen,
-											listClassName: FREE_CHAT_ROOT,
-											anchor: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-												type: "button",
-												className: "dsh-model-menu-trigger",
-												disabled: !draft.recapEnabled,
-												"aria-label": `${copy("modelLabel")}: ${selectedLabel}`,
-												"aria-haspopup": "menu",
-												"aria-expanded": menuOpen,
-												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-													className: "dsh-model-menu-triggerLabel",
-													children: selectedLabel
-												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutlineRegular, { className: `dsh-model-menu-chevron${menuOpen ? " dsh-model-menu-chevronOpen" : ""}` })]
-											}),
-											choices: selectableChoices,
-											selected: selectedRoute,
-											onPick: (route) => edit({
-												...draft,
-												model: modelRouteKey(route.provider, route.model)
-											}),
-											leading: [{
-												id: "follow",
-												label: copy("modelFollowOption"),
-												selected: !selectedRoute
-											}],
-											onPickLeading: () => edit({
-												...draft,
-												model: ""
-											}),
-											modelValue: selectedLabel
-										}) }),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-											className: "dsh-ui-hint",
-											children: copy("modelGroupHint")
-										})
-									]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelCatalogStatus, {
-									state: catalog,
-									locale: props.locale
-								})
-							]
+										choices: selectableChoices,
+										selected: selectedRoute,
+										onPick: (route) => edit({
+											...draft,
+											model: modelRouteKey(route.provider, route.model)
+										}),
+										leading: [{
+											id: "follow",
+											label: copy("modelFollowOption"),
+											selected: !selectedRoute
+										}],
+										onPickLeading: () => edit({
+											...draft,
+											model: ""
+										}),
+										modelValue: selectedLabel
+									})]
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModelCatalogStatus, {
+								state: catalog,
+								locale: props.locale
+							})]
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -3855,24 +3967,30 @@ function SessionManagerSettings(props) {
 								})
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dsm-subs",
+							className: "dsm-feature-options dsm-compact-options",
 							"data-disabled": draft.compactEnabled ? void 0 : "true",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 								className: "dsh-ui-field",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-ui-label",
 									children: copy("compactMinutesLabel")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
-									className: "dsm-minutes",
-									value: draft.compactMinutes,
-									inputMode: "numeric",
-									disabled: !draft.compactEnabled,
-									"aria-invalid": compactInvalid || void 0,
-									"aria-describedby": compactInvalid ? `${tabsId}-compact-error` : void 0,
-									onChange: (event) => edit({
-										...draft,
-										compactMinutes: event.target.value
-									})
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "dsm-minutes-control",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Input, {
+										className: "dsm-minutes",
+										value: draft.compactMinutes,
+										inputMode: "numeric",
+										disabled: !draft.compactEnabled,
+										"aria-invalid": compactInvalid || void 0,
+										"aria-describedby": compactInvalid ? `${tabsId}-compact-error` : void 0,
+										onChange: (event) => edit({
+											...draft,
+											compactMinutes: event.target.value
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dsh-ui-meta",
+										children: copy("minutesUnit")
+									})]
 								})]
 							}), compactInvalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 								id: `${tabsId}-compact-error`,
@@ -3883,34 +4001,33 @@ function SessionManagerSettings(props) {
 						})]
 					})
 				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "dsh-ui-actions",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-						variant: "primary",
-						disabled: invalid || snapshot.saving,
-						onClick: save,
-						children: snapshot.saving ? copy("settingsSaving") : copy("saveSettings")
-					}),
-					snapshot.saved ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-ui-notice",
-						role: "status",
-						children: copy("settingsSaved")
-					}) : null,
-					externalChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-ui-notice dsh-ui-notice--error",
-						role: "alert",
-						children: copy("externalChange")
-					}) : null,
-					snapshot.failure ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "dsh-ui-notice dsh-ui-notice--error",
-						role: "alert",
-						children: failureText(props.locale, snapshot.failure)
-					}) : null
-				]
-			})
-		]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "dsh-ui-form-footer dsm-settings-footer",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					variant: "primary",
+					disabled: invalid || snapshot.saving,
+					onClick: save,
+					children: snapshot.saving ? copy("settingsSaving") : copy("saveSettings")
+				}),
+				snapshot.saved ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-ui-notice",
+					role: "status",
+					children: copy("settingsSaved")
+				}) : null,
+				externalChange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-ui-notice dsh-ui-notice--error",
+					role: "alert",
+					children: copy("externalChange")
+				}) : null,
+				snapshot.failure ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-ui-notice dsh-ui-notice--error",
+					role: "alert",
+					children: failureText(props.locale, snapshot.failure)
+				}) : null
+			]
+		})]
 	});
 }
 //#endregion