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

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 모드, 고정 추론 단계는 추가하지 않습니다. 추론을 지원하지 않는 모델에는 슬라이더를 표시하지 않으며, 그런 모델은 목록에서 고르는 즉시 적용됩니다.
-- 다른 모델로 바꾸면 그 모델이 지원하는 추론 강도에서 슬라이더가 시작되고, 적용 버튼을 눌러야 모델 선택이 적용됩니다. 적용하지 않고 팝오버를 닫으면 모델은 바뀌지 않습니다. 기본값 재설정은 별도 강도 지정을 해제합니다.
+- 다른 모델로 바꾸면 그 모델이 지원하는 추론 강도에서 슬라이더가 시작되고, 슬라이더를 놓거나 추론 강도 조절 키를 놓으면 모델 선택이 적용됩니다. 드래그 중에는 표시만 바뀌고 조작을 마칠 때 한 번 저장합니다. 슬라이더를 조작하거나 적용 버튼을 누르지 않고 팝오버를 닫으면 모델은 바뀌지 않습니다. 기본값 재설정은 별도 강도 지정을 해제합니다.
 - Escape, 바깥 클릭, 스크롤, 창 크기 변경으로 메뉴를 닫습니다. 메뉴의 방향키와 Tab 탐색을 지원합니다. 한국어·영어·중국어(간체)와 DSH 테마 색상을 따릅니다.
 - 기본 모델 슬롯만 우선순위로 대체합니다. 제거하면 기본 선택 UI가 돌아오며 모델 선택은 유지됩니다. 같은 슬롯을 대체하는 다른 플러그인과는 함께 사용하지 마세요.
 

package/dist/client.js

@@ -124,13 +124,16 @@ const inject = [
 	"sessions",
 	"remote",
 	"remote.session",
-	"modelDirectories"
+	"modelDirectories",
+	"shortcuts"
 ];
 const copy = {
 	ko: {
 		model: "모델 선택",
 		effort: "추론 강도",
 		choose: "추론 수준 선택",
+		configure: "추론 수준 설정",
+		openPicker: "모델 피커 열기",
 		reset: "기본값으로 재설정",
 		loading: "모델을 불러오는 중입니다…",
 		empty: "사용할 수 있는 모델이 없습니다.",
@@ -145,6 +148,8 @@ const copy = {
 		model: "Select model",
 		effort: "Reasoning effort",
 		choose: "Select reasoning effort",
+		configure: "Configure reasoning effort",
+		openPicker: "Open model picker",
 		reset: "Reset to default",
 		loading: "Loading models…",
 		empty: "No models available.",
@@ -159,6 +164,8 @@ const copy = {
 		model: "选择模型",
 		effort: "推理强度",
 		choose: "选择推理级别",
+		configure: "设置推理级别",
+		openPicker: "打开模型选择器",
 		reset: "重置为默认值",
 		loading: "正在加载模型…",
 		empty: "没有可用的模型。",
@@ -171,10 +178,79 @@ const copy = {
 	}
 };
 function apply(ctx) {
+	const commandId = "dungsil.model-picker.open";
+	const pickers = /* @__PURE__ */ new Map();
+	const binding = {
+		code: "KeyP",
+		modifiers: ["alt"]
+	};
+	const shortcutCatalog = ctx.shortcuts.runtime === "web" ? ctx.shortcuts.fixedCatalog : ctx.shortcuts.catalog;
+	ctx.effect(() => {
+		const label = () => {
+			const locale = ctx.locale.getSnapshot().active;
+			return copy[locale.startsWith("ko") ? "ko" : locale.startsWith("zh") ? "zh" : "en"].openPicker;
+		};
+		const resolve = () => {
+			const visible = [...pickers].filter(([element]) => element.isConnected && element.getClientRects().length > 0);
+			if (visible.length !== 1) return { status: "pass" };
+			const [, picker] = visible[0];
+			if (picker.disabled) return {
+				status: "blocked",
+				reason: "Model picker is locked or busy"
+			};
+			return {
+				status: "handled",
+				run: picker.open
+			};
+		};
+		if (ctx.shortcuts.runtime === "web") {
+			const unregister = ctx.shortcuts.registerFixed({
+				id: commandId,
+				label,
+				keys: ["Alt", "P"],
+				bindings: [binding],
+				group: "input"
+			});
+			const unobserve = ctx.shortcuts.observeFixedInput((input) => {
+				if (input.type !== "keydown") return;
+				const { gesture, context } = input;
+				if (context.modal || context.region === "terminal" || gesture.code !== "KeyP" || gesture.secondCode || !gesture.alt || gesture.control || gesture.meta || gesture.shift || gesture.repeat || gesture.composing || gesture.defaultPrevented) return;
+				const action = resolve();
+				if (action.status === "pass") return;
+				input.consume();
+				if (action.status === "handled") action.run();
+			});
+			return () => {
+				unobserve();
+				unregister();
+			};
+		}
+		return ctx.shortcuts.register({
+			id: commandId,
+			label,
+			aliases: [
+				"model",
+				"reasoning",
+				"모델",
+				"추론",
+				"模型"
+			],
+			defaults: {
+				"desktop:windows": binding,
+				"desktop:macos": binding,
+				"desktop:linux": binding
+			},
+			regions: ["page", "editable"],
+			modals: [],
+			resolve
+		});
+	}, "ui-model-picker: shortcut");
 	function Picker({ locked, directory }) {
 		const subscribe = (0, react.useCallback)((listener) => directory.store.subscribe(listener), [directory]);
 		const getSnapshot = (0, react.useCallback)(() => directory.store.getSnapshot(), [directory]);
 		const state = (0, react.useSyncExternalStore)(subscribe, getSnapshot);
+		const subscribeShortcuts = (0, react.useCallback)((listener) => shortcutCatalog.subscribe(listener), [shortcutCatalog]);
+		const shortcutKeys = (0, react.useSyncExternalStore)(subscribeShortcuts, () => shortcutCatalog.getSnapshot()).find((entry) => entry.id === commandId)?.keys;
 		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);
@@ -238,7 +314,7 @@ function apply(ctx) {
 			const observer = new ResizeObserver(position);
 			observer.observe(element);
 			const scroll = (event) => {
-				if (!element.contains(event.target)) close();
+				if (!element.contains(event.target)) position();
 			};
 			window.addEventListener("resize", close);
 			window.addEventListener("scroll", scroll, true);
@@ -325,6 +401,20 @@ function apply(ctx) {
 			setPanel("effort");
 			directory.load().catch(() => {});
 		};
+		(0, react.useLayoutEffect)(() => {
+			const element = anchor.current;
+			if (!element) return;
+			pickers.set(element, {
+				disabled,
+				open: () => {
+					if (panel) popup.current?.querySelector("input:not(:disabled), button:not(:disabled)")?.focus();
+					else if (trigger.current) show(trigger.current);
+				}
+			});
+			return () => {
+				pickers.delete(element);
+			};
+		});
 		const selectEffort = (index) => {
 			const target = staged ?? (current ? {
 				provider: current.provider,
@@ -368,21 +458,27 @@ function apply(ctx) {
 			className: "dsh-codex-picker",
 			ref: anchor,
 			"aria-busy": busy,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerTrigger, {
-				className: "dsh-codex-trigger",
-				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: 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) => {
-					if (!disabled) show(event.currentTarget);
-				}
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Tooltip, {
+				label: efforts.length ? text.configure : text.model,
+				shortcutKeys,
+				side: "top",
+				portal: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposerTrigger, {
+					ref: trigger,
+					className: "dsh-codex-trigger",
+					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: locked,
+					"aria-disabled": disabled,
+					"aria-label": `${efforts.length ? text.choose : text.model}: ${model?.name ?? current?.model ?? text.model}${effortLabel ? `, ${effortLabel}` : ""}`,
+					"aria-haspopup": "dialog",
+					"aria-expanded": panel !== null,
+					"aria-controls": panel ? id : void 0,
+					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,
@@ -530,6 +626,19 @@ function apply(ctx) {
 							"aria-valuetext": stagedEfforts[draft]?.name,
 							onChange: (event) => {
 								if (!disabled) setDraft(Number(event.target.value));
+							},
+							onPointerUp: () => selectEffort(draft),
+							onKeyUp: (event) => {
+								if ([
+									"ArrowLeft",
+									"ArrowRight",
+									"ArrowUp",
+									"ArrowDown",
+									"Home",
+									"End",
+									"PageUp",
+									"PageDown"
+								].includes(event.key)) selectEffort(draft);
 							}
 						})]
 					})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dungsil/dsh-plugin-ui-model-picker",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Model and reasoning effort picker for the DeepSeek Harness composer.",
   "license": "MIT",
   "repository": {
@@ -26,15 +26,16 @@
     "access": "public"
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "4.0.5",
-    "@deepseek-ai/dsh-api-session-controller": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-locale": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-store": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-conversation": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-model-selection": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-renderer": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-session": "0.2.1-rc.5",
-    "@deepseek-ai/dsh-client-ui-slots": "0.2.1-rc.5",
+    "@deepseek-ai/cordis": "4.1.0",
+    "@deepseek-ai/dsh-api-session-controller": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-locale": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-shortcuts": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-store": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-conversation": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-model-selection": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-session": "0.2.2-rc.1",
+    "@deepseek-ai/dsh-client-ui-slots": "0.2.2-rc.1",
     "@dungsil/dsh-tsconfig": "0.0.0",
     "@dungsil/dsh-tsdown": "0.0.0",
     "@dungsil/dsh-ui": "0.0.0",
@@ -46,10 +47,10 @@
     "tsdown": "0.23.4"
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.1-rc.5"
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.2.1-rc.5 || ^0.2.2-rc.1"
   },
   "engines": {
-    "dsh": "^0.2.1-rc.5",
+    "dsh": "^0.2.2-rc.1",
     "node": ">=24.9.0"
   },
   "dsh": {
@@ -61,6 +62,7 @@
       "immediately": true,
       "inject": [
         "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-shortcuts",
         "@deepseek-ai/dsh-client-ui-conversation",
         "@deepseek-ai/dsh-client-ui-session",
         "@deepseek-ai/dsh-client-ui-model-selection"