@dungsil/dsh-plugin-ui-model-picker 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,24 @@
-# Temporary Holding Version
+# Model Picker · 모델 피커
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+![모델 선택 팝오버의 라이트 모드와 다크 모드를 꼭짓점 대각선으로 나눈 미리보기](./assets/light-dark-preview.webp)
+
+DSH Web 입력창에서 모델과 추론 강도를 선택합니다. 하나의 선택 버튼을 누르면 추론 강도 팝오버가 먼저 열리며, 팝오버 안의 모델명을 눌러 모델 목록으로 이동합니다.
+
+위 이미지는 플러그인 컴포넌트에 예시 모델 목록과 테마 색상을 제공한 검증 화면을 각각 캡처해 합성했습니다. 표시된 모델명과 추론 단계는 예시이며, 실제 목록은 연결한 제공자가 결정합니다.
+
+## 사용 방법
+
+1. DSH 플러그인 설치 화면에서 `@dungsil/dsh-plugin-ui-model-picker`를 설치하고 활성화합니다.
+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가 돌아오며 모델 선택은 유지됩니다. 같은 슬롯을 대체하는 다른 플러그인과는 함께 사용하지 마세요.
+
+DSH가 제공하는 옵션과 플랫폼 글꼴에 따라 세부 모양은 다를 수 있습니다.

package/cordis.patch.yml

@@ -0,0 +1,3 @@
+- insert:
+    - id: dungsil-ui-model-picker
+      name: '@dungsil/dsh-plugin-ui-model-picker'

package/dist/client.js

@@ -0,0 +1,430 @@
+window.__ModuleLoader__.load({ id: "@dungsil/dsh-plugin-ui-model-picker", factory(require) { const module = { exports: {} }; const exports = module.exports;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+let react_dom = require("react-dom");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/styles.ts
+const styles = `
+.dsh-codex-picker { display: flex; align-items: center; min-width: 0; border-radius: 16px; color: var(--dsw-alias-label-primary, #252525); font: 13px/20px system-ui, sans-serif; }
+.dsh-codex-picker button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; height: 28px; padding: 0 6px; border-radius: 14px; min-width: 0; }
+.dsh-codex-picker:hover { background: var(--dsw-alias-interactive-bg-hover, #8881); }
+.dsh-codex-picker .dsh-codex-trigger { display: flex; gap: 5px; align-items: center; }
+.dsh-codex-name { display: var(--dsh-composer-model-text-display, block); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(220px, 32vw); }
+.dsh-codex-effort { color: var(--dsw-alias-label-tertiary, #777); }
+.dsh-codex-popover { position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: 256px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l1, #e8e8e8); border-radius: 16px; background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #252525); box-shadow: 0 5px 12px #0000000d, 0 2px 4px #00000005; font: 13px/20px system-ui, sans-serif; }
+.dsh-codex-popover::backdrop { background: transparent; }
+.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: 6px; }
+.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: #3983ff; 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-reset { display: grid; place-items: center; width: 24px; height: 24px; color: var(--dsw-alias-label-tertiary, #999); }
+.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 { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 30px; padding: 5px 10px; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
+.dsh-codex-option:hover, .dsh-codex-option[aria-checked=true] { background: var(--dsw-alias-interactive-bg-hover, #f4f4f4); }
+.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 { flex: 0 0 14px; }
+.dsh-codex-slider { padding: 10px 2px 3px; }
+.dsh-codex-rail { position: relative; height: 28px; }
+.dsh-codex-track { position: absolute; inset: 3px 0; border-radius: 20px; background: linear-gradient(to right, #3983ff var(--dsh-codex-progress), var(--dsw-alias-interactive-bg-hover, #e8e8e8) 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; }
+.dsh-codex-track span[data-filled=true] { background: #ffffff80; }
+.dsh-codex-slider input { appearance: none; -webkit-appearance: none; position: relative; display: block; width: 100%; height: 28px; padding: 0; margin: 0; background: transparent; cursor: pointer; }
+.dsh-codex-slider input::-webkit-slider-runnable-track { height: 28px; background: transparent; }
+.dsh-codex-slider input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; border: 1px solid #0000000a; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; }
+.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-popover [role=alert] { color: var(--dsw-alias-state-error-primary, #b54424); }
+.dsh-codex-picker button:focus-visible, .dsh-codex-popover :focus-visible { outline: 2px solid var(--dsw-focus-ring-color, #3186ce); outline-offset: 2px; }
+.dsh-codex-picker button:disabled, .dsh-codex-popover :disabled { opacity: .5; cursor: default; }
+`;
+// src/client.tsx
+const name = "dungsil-ui-model-picker";
+const inject = [
+	"slots",
+	"locale",
+	"sessions",
+	"modelDirectories"
+];
+const copy = {
+	ko: {
+		model: "모델 선택",
+		effort: "추론 강도",
+		choose: "추론 수준 선택",
+		default: "제공자 기본값",
+		reset: "기본값으로 재설정",
+		loading: "모델을 불러오는 중입니다…",
+		empty: "사용할 수 있는 모델이 없습니다.",
+		partial: "일부 제공자의 모델을 불러오지 못했습니다.",
+		missing: "현재 모델을 사용할 수 없습니다.",
+		error: "변경하지 못했습니다. 현재 선택을 확인한 뒤 다시 시도하세요.",
+		retry: "모델 목록 새로고침",
+		busy: "변경 중…"
+	},
+	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.",
+		partial: "Some providers could not be loaded.",
+		missing: "The current model is unavailable.",
+		error: "Could not change the selection. Check the current selection before retrying.",
+		retry: "Reload models",
+		busy: "Changing…"
+	},
+	zh: {
+		model: "选择模型",
+		effort: "推理强度",
+		choose: "选择推理级别",
+		default: "提供商默认值",
+		reset: "重置为默认值",
+		loading: "正在加载模型…",
+		empty: "没有可用的模型。",
+		partial: "部分提供商的模型加载失败。",
+		missing: "当前模型不可用。",
+		error: "更改失败。请确认当前选择后重试。",
+		retry: "刷新模型列表",
+		busy: "正在更改…"
+	}
+};
+function apply(ctx) {
+	function Picker({ locked, directory }) {
+		const state = (0, react.useSyncExternalStore)(directory.store.subscribe, directory.store.getSnapshot);
+		const locale = (0, react.useSyncExternalStore)((fn) => ctx.locale.subscribe(fn), () => ctx.locale.getSnapshot().active);
+		const text = copy[locale.startsWith("ko") ? "ko" : locale.startsWith("zh") ? "zh" : "en"];
+		const [panel, setPanel] = (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 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 effective = current?.reasoningEffort ?? reasoning?.defaultEffort;
+		const effortIndex = efforts.findIndex((item) => item.id === effective);
+		const effortLabel = efforts[effortIndex]?.name ?? state.retainedEffort;
+		const busy = state.status === "selecting";
+		const disabled = locked || busy;
+		(0, react.useEffect)(() => {
+			mounted.current = true;
+			directory.load().catch(() => {});
+			return () => {
+				mounted.current = false;
+			};
+		}, [directory]);
+		const close = () => {
+			setPanel(null);
+			trigger.current?.focus();
+		};
+		(0, react.useEffect)(() => {
+			if (!panel || !popup.current || !anchor.current) return;
+			const element = popup.current;
+			element.setAttribute("popover", "auto");
+			element.showPopover();
+			const position = () => {
+				const box = anchor.current.getBoundingClientRect();
+				element.style.left = `${Math.max(8, Math.min(box.right - element.offsetWidth, window.innerWidth - element.offsetWidth - 8))}px`;
+				const above = box.top - element.offsetHeight - 8;
+				element.style.top = `${Math.max(8, above >= 8 ? above : Math.min(box.bottom + 8, window.innerHeight - element.offsetHeight - 8))}px`;
+			};
+			position();
+			const observer = new ResizeObserver(position);
+			observer.observe(element);
+			const toggle = (event) => {
+				if (event.newState === "closed") setPanel(null);
+			};
+			const scroll = (event) => {
+				if (!element.contains(event.target)) close();
+			};
+			element.addEventListener("toggle", toggle);
+			window.addEventListener("resize", close);
+			window.addEventListener("scroll", scroll, true);
+			const keydown = (event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					close();
+					return;
+				}
+				if (![
+					"ArrowDown",
+					"ArrowUp",
+					"Home",
+					"End"
+				].includes(event.key) || event.target instanceof HTMLInputElement) return;
+				const buttons = [...element.querySelectorAll("button:not(:disabled)")];
+				if (!buttons.length) return;
+				event.preventDefault();
+				const index = buttons.indexOf(document.activeElement);
+				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();
+			return () => {
+				observer.disconnect();
+				window.removeEventListener("resize", close);
+				window.removeEventListener("scroll", scroll, true);
+				element.removeEventListener("keydown", keydown);
+				element.removeEventListener("toggle", toggle);
+				element.hidePopover();
+			};
+		}, [panel]);
+		(0, react.useEffect)(() => {
+			if (locked) setPanel(null);
+		}, [locked]);
+		(0, react.useEffect)(() => {
+			setPanel(null);
+		}, [
+			current?.provider,
+			current?.model,
+			current?.reasoningEffort
+		]);
+		const select = async (selection) => {
+			if (disabled || pending.current) return;
+			pending.current = true;
+			setFailed(false);
+			try {
+				const result = await directory.select(selection);
+				if (!mounted.current) return;
+				if (result.ok) close();
+				else setFailed(true);
+			} catch {
+				if (mounted.current) setFailed(true);
+			} finally {
+				pending.current = false;
+			}
+		};
+		const show = (button) => {
+			trigger.current = button;
+			setDraft(Math.max(0, effortIndex));
+			setFailed(false);
+			setPanel(panel ? null : "effort");
+			directory.load().catch(() => {});
+		};
+		const selectEffort = (index) => {
+			if (!current || !efforts[index]) return;
+			const effort = efforts[index].id;
+			select({
+				provider: current.provider,
+				model: current.model,
+				...effort === void 0 ? {} : { reasoningEffort: effort }
+			});
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "dsh-codex-picker",
+			ref: anchor,
+			"aria-busy": busy,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "dsh-codex-trigger",
+				disabled,
+				"aria-label": `${text.choose}: ${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),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "dsh-codex-name",
+					children: panel ? text.choose : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [model?.name ?? current?.model ?? text.model, effortLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "dsh-codex-effort",
+						children: effortLabel
+					})] })] })
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					children: "⌄"
+				})]
+			})
+		}), panel && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id,
+			ref: popup,
+			role: "dialog",
+			"aria-label": panel === "model" ? text.model : text.effort,
+			className: "dsh-codex-popover",
+			children: [
+				panel === "model" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "dsh-codex-back",
+					onClick: () => setPanel("effort"),
+					children: ["‹ ", text.effort]
+				}) : /* @__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)("span", {
+								"aria-hidden": "true",
+								children: "›"
+							})
+						] })]
+					}), /* @__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)("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 16 16",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.2",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 4a5.5 5.5 0 1 1-1 6M3 1v3h3" })
+						})
+					})]
+				}),
+				state.status === "loading" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dsh-codex-notice",
+					role: "status",
+					children: text.loading
+				}),
+				busy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dsh-codex-notice",
+					role: "status",
+					children: text.busy
+				}),
+				(failed || state.error) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dsh-codex-notice",
+					role: "alert",
+					children: text.error
+				}),
+				state.failures.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dsh-codex-notice",
+					role: "status",
+					children: text.partial
+				}),
+				state.routable === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "dsh-codex-notice",
+					role: "status",
+					children: text.missing
+				}),
+				panel === "model" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						role: "radiogroup",
+						"aria-label": text.model,
+						children: state.groups.map((provider) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+							"aria-label": provider.name,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dsh-codex-provider",
+								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,
+								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 }
+									});
+								},
+								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",
+									children: provider.id === current?.provider && option.id === current?.model ? "✓" : ""
+								})]
+							}, option.id))]
+						}, provider.id))
+					}),
+					state.status !== "loading" && !state.groups.some((provider) => provider.models.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "dsh-codex-notice",
+						role: "status",
+						children: text.empty
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "dsh-codex-option",
+						disabled: busy,
+						onClick: () => {
+							setFailed(false);
+							directory.load().catch(() => {});
+						},
+						children: text.retry
+					})
+				] }) : efforts.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}%` },
+						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"))
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							id: `${id}-effort`,
+							type: "range",
+							min: 0,
+							max: efforts.length - 1,
+							step: 1,
+							value: draft,
+							disabled: disabled || efforts.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));
+							}
+						})]
+					})
+				})
+			]
+		}), document.body)] });
+	}
+	ctx.slots.inject("conversation.input.model", () => ctx.slots.register({
+		name: "conversation.input.model",
+		priority: -100
+	}, (props) => ctx.sessions.subagentAddress(props.sessionId) === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Picker, {
+		locked: props.locked,
+		directory: ctx.modelDirectories.directoryFor(props.sessionId)
+	}, props.sessionId) : null));
+	ctx.effect(() => {
+		const style = document.createElement("style");
+		style.textContent = styles;
+		document.head.append(style);
+		return () => style.remove();
+	}, "ui-model-picker: styles");
+}
+exports.apply = apply;
+exports.inject = inject;
+exports.name = name;
+
+return module.exports; } });

package/dist/index.js

@@ -0,0 +1,3 @@
+// src/index.ts
+function apply() {}
+export { apply };

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Model Picker",
+    "description": "A compact composer picker with model menus and a reasoning effort slider."
+  }
+}

package/locale/ko.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "모델 피커",
+    "description": "입력창에서 모델 메뉴와 추론 강도 슬라이더를 사용합니다."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "模型选择器",
+    "description": "在输入框中使用模型菜单和推理强度滑块。"
+  }
+}

package/package.json

@@ -1,6 +1,89 @@
 {
   "name": "@dungsil/dsh-plugin-ui-model-picker",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Model and reasoning effort picker for the DeepSeek Harness composer.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dungsil/dsh-plugins.git",
+    "directory": "packages/ui-model-picker"
+  },
+  "files": [
+    "dist",
+    "locale",
+    "assets",
+    "cordis.patch.yml"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./client": "./dist/client.js",
+    "./package.json": "./package.json",
+    "./locale/*.json": "./locale/*.json"
+  },
+  "publishConfig": {
+    "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",
+    "@dungsil/dsh-tsconfig": "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"
+  },
+  "engines": {
+    "dsh": "^0.2.1-rc.5",
+    "node": ">=24.9.0"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": [
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-session",
+        "@deepseek-ai/dsh-client-ui-model-selection"
+      ]
+    }
+  },
+  "market": {
+    "order": 9,
+    "title": {
+      "en": "Model Picker",
+      "ko": "모델 피커",
+      "zh": "模型选择器"
+    },
+    "description": {
+      "en": "A compact composer picker with model menus and a reasoning effort slider.",
+      "ko": "입력창에서 모델 메뉴와 추론 강도 슬라이더를 사용합니다.",
+      "zh": "在输入框中使用模型菜单和推理强度滑块。"
+    },
+    "category": "ui",
+    "labels": [],
+    "keywords": [
+      "models",
+      "reasoning",
+      "composer"
+    ]
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test test/*.test.mjs"
+  }
 }