@dungsil/dsh-plugin-ui-model-picker 0.2.3 → 0.2.5

package/README.md

@@ -2,22 +2,22 @@
 
 ![모델 선택 팝오버의 라이트 모드와 다크 모드를 꼭짓점 대각선으로 나눈 미리보기](./assets/light-dark-preview.webp)
 
-DSH Web 입력창에서 모델과 추론 강도를 선택합니다. 하나의 선택 버튼을 누르면 추론 강도 팝오버가 먼저 열리며, 팝오버 안의 모델명을 눌러 모델 목록으로 이동합니다.
+DSH Web 입력창에서 모델과 추론 강도를 선택합니다. 하나의 선택 버튼을 누르면 추론 강도 팝오버가 먼저 열리며, 팝오버 안의 모델명을 눌러 모델 목록으로 이동합니다. 모델을 고르면 실제 모델은 바로 바뀌지 않고 추론 강도 슬라이더가 이어서 표시되며, 적용 버튼을 누르면 모델과 강도가 함께 적용됩니다.
 
 위 이미지는 플러그인 컴포넌트에 예시 모델 목록과 테마 색상을 제공한 검증 화면을 각각 캡처해 합성했습니다. 표시된 모델명과 추론 단계는 예시이며, 실제 목록은 연결한 제공자가 결정합니다.
 
 ## 사용 방법
 
 1. DSH 플러그인 설치 화면에서 `@dungsil/dsh-plugin-ui-model-picker`를 설치하고 활성화합니다.
-2. 입력창 오른쪽 선택 버튼을 눌러 추론 강도 슬라이더를 엽니다. 방향키와 Home/End 키도 사용할 수 있습니다.
-3. 모델을 바꾸려면 팝오버 상단의 모델명 부분을 누르고 제공자별 모델을 선택합니다. 오른쪽 위 재설정 아이콘은 기본 추론 강도를 복원합니다.
+2. 입력창 오른쪽 선택 버튼을 눌러 추론 강도 슬라이더를 엽니다. 방향키와 Home/End 키도 사용할 수 있습니다. 원하는 강도를 고른 뒤 적용 버튼을 누릅니다.
+3. 모델을 바꾸려면 팝오버 상단의 모델명 부분을 누르고 제공자별 모델을 선택합니다. 추론 강도를 지원하는 모델을 고르면 슬라이더가 이어서 나타나며, 적용 버튼을 눌러야 모델이 적용됩니다. 오른쪽 위 재설정 아이콘은 기본 추론 강도를 복원합니다.
 
 ## 동작과 호환성
 
 - DSH `0.2.1-rc.5` 이상 `0.3.0` 미만의 Web UI를 지원합니다. 기본 `ui-model-selection` 기능이 활성화되어 있어야 합니다.
 - 공용 모델 디렉터리와 선택 API를 그대로 사용하므로 `/model` 명령과 선택 상태를 공유합니다. 별도 모델 설정을 저장하거나 API 키를 다루지 않습니다.
-- 실제 제공자 목록과 모델별 추론 메타데이터만 사용합니다. 별도 모델 목록, Fast 모드, 고정 추론 단계는 추가하지 않습니다. 추론을 지원하지 않는 모델에는 슬라이더를 표시하지 않으며, 팝오버 안에서 모델은 계속 바꿀 수 있습니다.
-- 다른 모델로 바꾸면 새 모델의 기본 추론 강도를 사용합니다. 기본값 재설정은 별도 강도 지정을 해제합니다.
+- 실제 제공자 목록과 모델별 추론 메타데이터만 사용합니다. 별도 모델 목록, Fast 모드, 고정 추론 단계는 추가하지 않습니다. 추론을 지원하지 않는 모델에는 슬라이더를 표시하지 않으며, 그런 모델은 목록에서 고르는 즉시 적용됩니다.
+- 다른 모델로 바꾸면 그 모델이 지원하는 추론 강도에서 슬라이더가 시작되고, 적용 버튼을 눌러야 모델 선택이 적용됩니다. 적용하지 않고 팝오버를 닫으면 모델은 바뀌지 않습니다. 기본값 재설정은 별도 강도 지정을 해제합니다.
 - Escape, 바깥 클릭, 스크롤, 창 크기 변경으로 메뉴를 닫습니다. 메뉴의 방향키와 Tab 탐색을 지원합니다. 한국어·영어·중국어(간체)와 DSH 테마 색상을 따릅니다.
 - 기본 모델 슬롯만 우선순위로 대체합니다. 제거하면 기본 선택 UI가 돌아오며 모델 선택은 유지됩니다. 같은 슬롯을 대체하는 다른 플러그인과는 함께 사용하지 마세요.
 

package/dist/client.js

@@ -29,7 +29,7 @@ function IconResetOutlineRegular() {
 }
 // ../../tools/ui/src/composer.tsx
 const composerStyles = `
-:where(.dsh-plugin-composer-trigger) { display: flex; align-items: center; gap: 4px; min-width: 0; height: 28px; padding: 0 4px 0 8px; border: 0; border-radius: var(--dsw-radius-sm); background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 13px; line-height: 20px; cursor: pointer; }
+:where(.dsh-plugin-composer-trigger) { display: flex; align-items: center; gap: 4px; min-width: 0; height: 28px; padding: 0 4px 0 8px; border: 0; border-radius: var(--dsw-radius-sm); background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 13px; line-height: 1.5385; cursor: pointer; }
 :where(.dsh-plugin-composer-trigger):disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
 .dsh-plugin-composer-icon, .dsh-plugin-composer-chevron { display: inline-flex; flex: none; }
 .dsh-plugin-composer-label, .dsh-plugin-composer-detail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -68,36 +68,39 @@ const ComposerTrigger = /* @__PURE__ */ (0, react.forwardRef)(function ComposerT
 const styles = `${composerStyles}
 .dsh-codex-picker { display: flex; align-items: center; min-width: 0; }
 .dsh-codex-trigger { max-width: min(360px, 45cqw); font-weight: 400; outline: none; }
-.dsh-codex-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
 .dsh-codex-trigger:focus-visible:not([data-dsh-automatic-focus]) { box-shadow: 0 0 0 2px var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); }
 .dsh-codex-trigger .dsh-plugin-composer-icon { display: var(--dsh-composer-model-icon-display, none); }
 .dsh-codex-trigger .dsh-plugin-composer-chevron { transition: transform .12s; }
 .dsh-codex-trigger .dsh-plugin-composer-label, .dsh-codex-trigger .dsh-plugin-composer-detail { display: var(--dsh-composer-model-text-display, block); }
 .dsh-codex-trigger .dsh-plugin-composer-detail { flex-shrink: 1000; }
-.dsh-codex-popover { position: fixed; z-index: 1100; display: flex; flex-direction: column; inset: auto; margin: 0; box-sizing: border-box; width: 256px; max-width: calc(100vw - 32px); max-height: min(360px, calc(100dvh - 96px)); overflow: hidden; padding: 4px; border: 0; --dsw-elevation-stroke-color: var(--dsw-alias-border-l1); --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2); --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2); background: transparent; color: var(--dsw-alias-label-primary); box-shadow: var(--dsw-elevation-prominent); font: 13px/20px var(--dsw-font-family, system-ui); }
+.dsh-codex-popover { position: fixed; z-index: 1100; display: flex; flex-direction: column; inset: auto; margin: 0; box-sizing: border-box; width: 256px; max-width: calc(100vw - 32px); max-height: min(360px, calc(100dvh - 96px)); overflow: hidden; padding: 4px; border: 0; --dsw-elevation-stroke-color: var(--dsw-alias-border-l1); --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2); --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2); background: transparent; color: var(--dsw-alias-label-primary); box-shadow: var(--dsw-elevation-prominent); font: 13px/1.5385 var(--dsw-font-family, system-ui); }
 @media (prefers-reduced-motion: reduce) {
   .dsh-codex-trigger .dsh-plugin-composer-chevron { transition: none; }
 }
-.dsh-codex-popover > :not([role=radiogroup]) { flex-shrink: 0; }
-.dsh-codex-popover [role=radiogroup] { min-height: 0; overflow-y: auto; }
-.dsh-codex-header { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: start; gap: 4px; }
-.dsh-codex-model, .dsh-codex-reset, .dsh-codex-back { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: var(--dsw-radius-md); }
+.dsh-codex-popover > :not(.dsh-codex-models) { flex-shrink: 0; }
+.dsh-codex-models { min-height: 0; overflow-y: auto; }
+.dsh-codex-header { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: 4px; }
+.dsh-codex-model, .dsh-codex-reset, .dsh-codex-back, .dsh-codex-apply { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: var(--dsw-radius-md); }
 .dsh-codex-popover svg { flex: none; vertical-align: middle; }
-.dsh-codex-model { grid-column: 2; justify-self: center; min-width: 0; max-width: 100%; padding: 2px 10px 3px; text-align: center; }
-.dsh-codex-model strong { display: block; color: var(--dsw-alias-state-business-primary); font-size: 14px; line-height: 20px; font-weight: 600; }
-.dsh-codex-model > span { display: block; color: var(--dsw-alias-label-tertiary, #777); font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.dsh-codex-model:hover, .dsh-codex-reset:hover, .dsh-codex-back:hover { background: var(--dsw-alias-interactive-bg-hover, #f2f2f2); }
+.dsh-codex-model { justify-self: center; min-width: 0; max-width: 100%; padding: 2px 2px 3px; text-align: center; }
+.dsh-codex-model strong { display: block; color: var(--dsw-alias-state-business-primary); font-size: 14px; line-height: 1.4286; font-weight: 600; }
+.dsh-codex-model > span { display: block; color: var(--dsw-alias-label-tertiary, #777); font-size: 12px; line-height: 1.4167; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dsh-codex-reset { display: grid; place-items: center; width: 24px; height: 24px; color: var(--dsw-alias-label-tertiary, #999); }
 .dsh-codex-reset svg { width: 16px; height: 16px; }
 .dsh-codex-back { padding: 4px 8px; color: var(--dsw-alias-label-tertiary, #777); }
 .dsh-codex-popover h2, .dsh-codex-provider { margin: 0; padding: 6px 10px; font-size: 12px; font-weight: 400; color: var(--dsw-alias-label-tertiary, #777); }
 .dsh-codex-provider { font-size: 11px; padding-top: 10px; }
 .dsh-codex-option { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 34px; padding: 5px 7px; border: 0; border-radius: var(--dsw-radius-md); color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
-.dsh-codex-option:hover:not(:disabled), .dsh-codex-option:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
+.dsh-codex-option:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
+@media (hover: hover) {
+  .dsh-codex-trigger:hover:not(:disabled), .dsh-codex-option:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+  .dsh-codex-model:hover, .dsh-codex-reset:hover, .dsh-codex-back:hover, .dsh-codex-apply:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, #f2f2f2); }
+}
 .dsh-codex-option span:first-child { min-width: 0; overflow-wrap: anywhere; }
 .dsh-codex-option small { display: block; color: var(--dsw-alias-label-tertiary, #777); font-size: 11px; }
 .dsh-codex-option .dsh-codex-check { display: grid; place-items: center; flex: 0 0 14px; }
 .dsh-codex-slider { padding: 10px 2px 3px; }
+.dsh-codex-apply { padding: 3px 8px; color: var(--dsw-alias-label-tertiary, #777); font-size: 12px; line-height: 1.5; }
 .dsh-codex-rail { position: relative; height: 28px; }
 .dsh-codex-track { position: absolute; inset: 3px 0; border-radius: 20px; background: linear-gradient(to right, var(--dsw-alias-state-business-primary) var(--dsh-codex-progress), var(--dsw-alias-interactive-bg-hover) var(--dsh-codex-progress)); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
 .dsh-codex-track span { width: 4px; height: 4px; border-radius: 50%; background: #b8b8b8; }
@@ -108,6 +111,7 @@ const styles = `${composerStyles}
 .dsh-codex-slider input::-moz-range-track { height: 28px; background: transparent; }
 .dsh-codex-slider input::-moz-range-thumb { width: 26px; height: 26px; border: 1px solid #0000000a; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; }
 .dsh-codex-notice { padding: 6px 10px; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
+.dsh-codex-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 .dsh-codex-popover [role=alert] { color: var(--dsw-alias-state-error-primary, #b54424); }
 .dsh-codex-popover :focus-visible { outline: 2px solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary)); outline-offset: -2px; }
 .dsh-codex-popover :disabled { color: var(--dsw-alias-label-dimmed); cursor: default; }
@@ -127,7 +131,6 @@ const copy = {
 		model: "모델 선택",
 		effort: "추론 강도",
 		choose: "추론 수준 선택",
-		default: "제공자 기본값",
 		reset: "기본값으로 재설정",
 		loading: "모델을 불러오는 중입니다…",
 		empty: "사용할 수 있는 모델이 없습니다.",
@@ -135,13 +138,13 @@ const copy = {
 		missing: "현재 모델을 사용할 수 없습니다.",
 		error: "변경하지 못했습니다. 현재 선택을 확인한 뒤 다시 시도하세요.",
 		retry: "모델 목록 새로고침",
-		busy: "변경 중…"
+		busy: "변경 중…",
+		apply: "적용"
 	},
 	en: {
 		model: "Select model",
 		effort: "Reasoning effort",
 		choose: "Select reasoning effort",
-		default: "Provider default",
 		reset: "Reset to default",
 		loading: "Loading models…",
 		empty: "No models available.",
@@ -149,13 +152,13 @@ const copy = {
 		missing: "The current model is unavailable.",
 		error: "Could not change the selection. Check the current selection before retrying.",
 		retry: "Reload models",
-		busy: "Changing…"
+		busy: "Changing…",
+		apply: "Apply"
 	},
 	zh: {
 		model: "选择模型",
 		effort: "推理强度",
 		choose: "选择推理级别",
-		default: "提供商默认值",
 		reset: "重置为默认值",
 		loading: "正在加载模型…",
 		empty: "没有可用的模型。",
@@ -163,7 +166,8 @@ const copy = {
 		missing: "当前模型不可用。",
 		error: "更改失败。请确认当前选择后重试。",
 		retry: "刷新模型列表",
-		busy: "正在更改…"
+		busy: "正在更改…",
+		apply: "应用"
 	}
 };
 function apply(ctx) {
@@ -174,25 +178,28 @@ function apply(ctx) {
 		const { active: locale } = useLocaleSnapshot(ctx.locale);
 		const text = copy[locale.startsWith("ko") ? "ko" : locale.startsWith("zh") ? "zh" : "en"];
 		const [requestedPanel, setPanel] = (0, react.useState)(null);
+		const [staged, setStaged] = (0, react.useState)(null);
 		const [draft, setDraft] = (0, react.useState)(0);
 		const [failed, setFailed] = (0, react.useState)(false);
 		const trigger = (0, react.useRef)(null);
 		const anchor = (0, react.useRef)(null);
 		const popup = (0, react.useRef)(null);
 		const pending = (0, react.useRef)(false);
+		const sliderSelection = (0, react.useRef)(null);
 		const mounted = (0, react.useRef)(true);
 		const id = (0, react.useId)();
 		const current = state.current;
 		const model = state.groups.find((item) => item.id === current?.provider)?.models.find((item) => item.id === current?.model);
 		const reasoning = model?.reasoning;
-		const efforts = reasoning?.efforts.length ? [...reasoning.defaultEffort === void 0 ? [{
-			id: void 0,
-			name: text.default
-		}] : [], ...reasoning.efforts] : [];
-		const panel = requestedPanel === "effort" && !efforts.length ? "model" : requestedPanel;
+		const efforts = reasoning?.efforts ?? [];
+		const stagedGroup = staged ? state.groups.find((item) => item.id === staged.provider) : void 0;
+		const stagedModel = staged ? stagedGroup?.models.find((item) => item.id === staged.model) : model;
+		const stagedEfforts = (stagedModel?.reasoning)?.efforts ?? [];
+		const panel = requestedPanel === "effort" && !stagedEfforts.length ? "model" : requestedPanel;
 		const effective = current?.reasoningEffort ?? reasoning?.defaultEffort;
 		const effortIndex = efforts.findIndex((item) => item.id === effective);
 		const effortLabel = efforts.length ? efforts[effortIndex]?.name ?? state.retainedEffort : void 0;
+		const stagedName = stagedModel?.name ?? (staged ? staged.model : current?.model) ?? text.model;
 		const busy = state.status === "selecting";
 		const disabled = locked || busy;
 		(0, react.useEffect)(() => {
@@ -203,10 +210,21 @@ function apply(ctx) {
 			};
 		}, [directory]);
 		const close = () => {
+			sliderSelection.current = null;
 			setPanel(null);
+			setStaged(null);
 			if (trigger.current) (0, _deepseek_ai_dsh_client_ui_primitives.focusWithoutRing)(trigger.current);
 		};
-		(0, _deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(anchor, panel !== null, () => setPanel(null), popup);
+		const restorePopupFocus = () => {
+			if (!popup.current?.contains(document.activeElement)) return;
+			const target = trigger.current?.disabled ? anchor.current?.parentElement?.querySelector("button:not(:disabled), input:not(:disabled), textarea:not(:disabled), [tabindex=\"0\"]") : trigger.current;
+			if (target) (0, _deepseek_ai_dsh_client_ui_primitives.focusWithoutRing)(target);
+		};
+		(0, _deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(anchor, panel !== null, () => {
+			sliderSelection.current = null;
+			setPanel(null);
+			setStaged(null);
+		}, popup);
 		(0, react.useLayoutEffect)(() => {
 			if (!panel || !popup.current || !anchor.current) return;
 			const element = popup.current;
@@ -243,7 +261,7 @@ function apply(ctx) {
 				buttons[event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === "ArrowUp" ? -1 : 1) + buttons.length) % buttons.length]?.focus();
 			};
 			element.addEventListener("keydown", keydown);
-			(element.querySelector("[aria-checked=true]") ?? element.querySelector("input:not(:disabled)") ?? element.querySelector("button:not(:disabled)"))?.focus();
+			(element.querySelector("[aria-current=true]") ?? element.querySelector("input:not(:disabled)") ?? element.querySelector("button:not(:disabled)"))?.focus();
 			return () => {
 				observer.disconnect();
 				window.removeEventListener("resize", close);
@@ -252,25 +270,44 @@ function apply(ctx) {
 			};
 		}, [panel]);
 		(0, react.useEffect)(() => {
-			if (locked) setPanel(null);
+			if (locked) {
+				restorePopupFocus();
+				sliderSelection.current = null;
+				setPanel(null);
+				setStaged(null);
+			}
 		}, [locked]);
 		(0, react.useEffect)(() => {
+			const selection = sliderSelection.current;
+			sliderSelection.current = null;
+			if (selection && current?.provider === selection.provider && current?.model === selection.model && current?.reasoningEffort === selection.reasoningEffort) {
+				setStaged(null);
+				return;
+			}
+			restorePopupFocus();
 			setPanel(null);
+			setStaged(null);
 		}, [
 			current?.provider,
 			current?.model,
 			current?.reasoningEffort
 		]);
-		const select = async (selection) => {
+		const select = async (selection, keepSlider = false) => {
 			if (disabled || pending.current) return;
 			pending.current = true;
+			sliderSelection.current = keepSlider ? selection : null;
 			setFailed(false);
 			try {
 				const result = await directory.select(selection);
 				if (!mounted.current) return;
-				if (result.ok) close();
-				else setFailed(true);
+				if (result.ok) {
+					if (!keepSlider) close();
+				} else {
+					sliderSelection.current = null;
+					setFailed(true);
+				}
 			} catch {
+				sliderSelection.current = null;
 				if (mounted.current) setFailed(true);
 			} finally {
 				pending.current = false;
@@ -282,19 +319,50 @@ function apply(ctx) {
 				close();
 				return;
 			}
+			setStaged(null);
 			setDraft(Math.max(0, effortIndex));
 			setFailed(false);
 			setPanel("effort");
 			directory.load().catch(() => {});
 		};
 		const selectEffort = (index) => {
-			if (!current || !efforts[index]) return;
-			const effort = efforts[index].id;
-			select({
+			const target = staged ?? (current ? {
 				provider: current.provider,
-				model: current.model,
-				...effort === void 0 ? {} : { reasoningEffort: effort }
+				model: current.model
+			} : null);
+			const effort = stagedEfforts[index];
+			if (!target || !effort) return;
+			select({
+				provider: target.provider,
+				model: target.model,
+				reasoningEffort: effort.id
+			}, true);
+		};
+		const stageModel = (provider, option) => {
+			const same = provider === current?.provider && option.id === current?.model;
+			const optionReasoning = option.reasoning;
+			const optionEfforts = optionReasoning?.efforts ?? [];
+			if (optionEfforts.length < 2) {
+				if (same) {
+					close();
+					return;
+				}
+				const effort = optionReasoning?.defaultEffort;
+				select({
+					provider,
+					model: option.id,
+					...effort === void 0 ? {} : { reasoningEffort: effort }
+				});
+				return;
+			}
+			const preferredEffort = same ? current?.reasoningEffort ?? optionReasoning?.defaultEffort : optionReasoning?.defaultEffort ?? current?.reasoningEffort;
+			setStaged({
+				provider,
+				model: option.id
 			});
+			setDraft(Math.max(0, optionEfforts.findIndex((item) => item.id === preferredEffort)));
+			setFailed(false);
+			setPanel("effort");
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "dsh-codex-picker",
@@ -305,13 +373,16 @@ function apply(ctx) {
 				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconDataOutlineRegular, { size: 16 }),
 				label: model?.name ?? current?.model ?? text.model,
 				detail: effortLabel,
-				disabled,
+				disabled: locked,
+				"aria-disabled": disabled,
 				"aria-label": `${efforts.length ? text.choose : text.model}: ${model?.name ?? current?.model ?? text.model}${effortLabel ? `, ${effortLabel}` : ""}`,
 				title: `${model?.name ?? current?.model ?? text.model}${effortLabel ? ` ${effortLabel}` : ""}`,
 				"aria-haspopup": "dialog",
 				"aria-expanded": panel !== null,
 				"aria-controls": panel ? id : void 0,
-				onClick: (event) => show(event.currentTarget)
+				onClick: (event) => {
+					if (!disabled) show(event.currentTarget);
+				}
 			})
 		}), panel && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_deepseek_ai_dsh_client_ui_primitives.MenuSurface, {
 			id,
@@ -320,7 +391,7 @@ function apply(ctx) {
 			"aria-label": panel === "model" ? text.model : text.effort,
 			className: "dsh-codex-popover",
 			children: [
-				panel === "model" ? efforts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				panel === "model" ? stagedEfforts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					className: "dsh-codex-back",
 					onClick: () => setPanel("effort"),
@@ -331,31 +402,47 @@ function apply(ctx) {
 					]
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 					className: "dsh-codex-header",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-						type: "button",
-						className: "dsh-codex-model",
-						disabled,
-						"aria-label": `${text.model}: ${model?.name ?? current?.model ?? text.model}`,
-						onClick: () => setPanel("model"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: efforts[draft]?.name ?? effortLabel ?? text.default }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-							model?.name ?? current?.model ?? text.model,
-							" ",
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { size: 14 })
-						] })]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						className: "dsh-codex-reset",
-						disabled: disabled || !current,
-						"aria-label": text.reset,
-						title: text.reset,
-						onClick: () => {
-							if (current) select({
-								provider: current.provider,
-								model: current.model
-							});
-						},
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconResetOutlineRegular, {})
-					})]
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-codex-reset",
+							disabled: locked || !(staged ?? current),
+							"aria-disabled": disabled || !(staged ?? current),
+							"aria-label": text.reset,
+							title: text.reset,
+							onClick: () => {
+								const target = staged ?? (current ? {
+									provider: current.provider,
+									model: current.model
+								} : null);
+								if (target) select(target);
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconResetOutlineRegular, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "dsh-codex-model",
+							disabled: locked,
+							"aria-disabled": disabled,
+							title: stagedName,
+							onClick: () => {
+								if (!disabled) setPanel("model");
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: stagedEfforts[draft]?.name }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+								stagedName,
+								" ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronRightOutlineRegular, { size: 14 })
+							] })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "dsh-codex-apply",
+							disabled: locked,
+							"aria-disabled": disabled,
+							onClick: () => selectEffort(draft),
+							children: text.apply
+						})
+					]
 				}),
 				state.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 					className: "dsh-codex-notice",
@@ -363,7 +450,7 @@ function apply(ctx) {
 					children: text.loading
 				}),
 				busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "dsh-codex-notice",
+					className: panel === "effort" ? "dsh-codex-status" : "dsh-codex-notice",
 					role: "status",
 					children: text.busy
 				}),
@@ -384,7 +471,8 @@ function apply(ctx) {
 				}),
 				panel === "model" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						role: "radiogroup",
+						className: "dsh-codex-models",
+						role: "group",
 						"aria-label": text.model,
 						children: state.groups.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 							"aria-label": provider.name,
@@ -393,18 +481,10 @@ function apply(ctx) {
 								children: provider.name
 							}), provider.models.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
-								role: "radio",
-								"aria-checked": provider.id === current?.provider && option.id === current?.model,
+								"aria-current": provider.id === current?.provider && option.id === current?.model ? "true" : void 0,
 								className: "dsh-codex-option",
 								disabled,
-								onClick: () => {
-									const effort = provider.id === current?.provider && option.id === current?.model ? current.reasoningEffort : option.reasoning?.defaultEffort;
-									select({
-										provider: provider.id,
-										model: option.id,
-										...effort === void 0 ? {} : { reasoningEffort: effort }
-									});
-								},
+								onClick: () => stageModel(provider.id, option),
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [option.name, option.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: option.description })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: "dsh-codex-check",
 									"aria-hidden": "true",
@@ -428,36 +508,28 @@ function apply(ctx) {
 						},
 						children: text.retry
 					})
-				] }) : efforts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				] }) : stagedEfforts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dsh-codex-slider",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dsh-codex-rail",
-						style: { "--dsh-codex-progress": `${efforts.length > 1 ? draft / (efforts.length - 1) * 100 : 0}%` },
+						style: { "--dsh-codex-progress": `${stagedEfforts.length > 1 ? draft / (stagedEfforts.length - 1) * 100 : 0}%` },
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dsh-codex-track",
 							"aria-hidden": "true",
-							children: efforts.map((effort, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-filled": index <= draft }, effort.id ?? "default"))
+							children: stagedEfforts.map((effort, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { "data-filled": index <= draft }, effort.id))
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 							id: `${id}-effort`,
 							type: "range",
 							min: 0,
-							max: efforts.length - 1,
+							max: stagedEfforts.length - 1,
 							step: 1,
 							value: draft,
-							disabled: disabled || efforts.length < 2,
+							disabled: locked || stagedEfforts.length < 2,
+							"aria-disabled": disabled || stagedEfforts.length < 2,
 							"aria-label": text.effort,
-							"aria-valuetext": efforts[draft]?.name,
-							onChange: (event) => setDraft(Number(event.target.value)),
-							onPointerUp: (event) => selectEffort(Number(event.currentTarget.value)),
-							onKeyUp: (event) => {
-								if ([
-									"ArrowLeft",
-									"ArrowRight",
-									"ArrowUp",
-									"ArrowDown",
-									"Home",
-									"End"
-								].includes(event.key)) selectEffort(Number(event.currentTarget.value));
+							"aria-valuetext": stagedEfforts[draft]?.name,
+							onChange: (event) => {
+								if (!disabled) setDraft(Number(event.target.value));
 							}
 						})]
 					})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dungsil/dsh-plugin-ui-model-picker",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Model and reasoning effort picker for the DeepSeek Harness composer.",
   "license": "MIT",
   "repository": {
@@ -40,6 +40,7 @@
     "@dungsil/dsh-ui": "0.0.0",
     "@types/react": "18.3.31",
     "@types/react-dom": "18.3.7",
+    "happy-dom": "21.0.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tsdown": "0.23.4"
@@ -88,6 +89,7 @@
   },
   "scripts": {
     "build": "tsdown",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "node --test test/*.test.mjs"
   }
 }