@jxgame2020/dsh-token-quota 0.1.30 → 0.1.32

package/lib/index.js

@@ -214,6 +214,7 @@ const TOKEN_QUOTA_SETTINGS_SCHEMA = z.object({
 	]).default("stop"),
 	checkUpdates: z.boolean().default(true),
 	dimWhenIdle: z.boolean().default(false),
+	order: z.array(z.string()).default([]),
 	reset: z.any().default(null),
 	music: z.object({
 		enabled: z.boolean().default(TOKEN_QUOTA_DEFAULT_MUSIC.enabled),
@@ -281,7 +282,8 @@ var TokenQuotaService = class TokenQuotaService extends Service {
 		onFull: "stop",
 		checkUpdates: true,
 		dimWhenIdle: false,
-		music: { ...TOKEN_QUOTA_DEFAULT_MUSIC }
+		music: { ...TOKEN_QUOTA_DEFAULT_MUSIC },
+		order: []
 	});
 	/** Whether update checks are enabled (mirrors the settings document). */
 	checkUpdates = true;
@@ -334,6 +336,7 @@ var TokenQuotaService = class TokenQuotaService extends Service {
 							onFull: doc.onFull === "switchPriority" ? "switchAll" : doc.onFull ?? "stop",
 							checkUpdates: doc.checkUpdates ?? true,
 							dimWhenIdle: doc.dimWhenIdle ?? false,
+							order: Array.isArray(doc.order) ? doc.order : [],
 							reset: doc.reset ?? void 0,
 							music: {
 								enabled: doc.music?.enabled ?? TOKEN_QUOTA_DEFAULT_MUSIC.enabled,
@@ -515,7 +518,7 @@ var TokenQuotaService = class TokenQuotaService extends Service {
 		return this.upgradeCheck;
 	}
 	async doRefreshUpgrade() {
-		const current = "0.1.30";
+		const current = "0.1.32";
 		let latest;
 		try {
 			const response = await fetch(REGISTRY_LATEST_URL, {

package/lib/types/client/TokenQuotaPanel.d.ts

@@ -20,6 +20,8 @@ export interface TokenQuotaPanelInjected {
     setCheckUpdates: (enabled: boolean) => void;
     /** Persist whether the panel dims while the pointer is away / typing. */
     setDimWhenIdle: (enabled: boolean) => void;
+    /** Persist the drag-to-reorder display order of model rows. */
+    setModelOrder: (order: string[]) => void;
     /** Toggle the live music output (requires a user gesture to start audio). */
     setMusicEnabled: (enabled: boolean) => void;
     /** Change the live-music master volume 0..1. */
@@ -40,5 +42,5 @@ export type TokenQuotaPanelComponentProps = PropsRuntime<'shell.overlay'> & Prop
  * @param props - composed slot props.
  * @returns the panel element tree.
  */
-export declare function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored, setOnFull, setReset, setCheckUpdates, checkUpdatesNow, clearLogBefore, setDimWhenIdle, setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession, useStore, actions, useSessions, }: TokenQuotaPanelComponentProps): import("react").JSX.Element;
+export declare function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored, setOnFull, setReset, setCheckUpdates, checkUpdatesNow, clearLogBefore, setDimWhenIdle, setModelOrder, setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession, useStore, actions, useSessions, }: TokenQuotaPanelComponentProps): import("react").JSX.Element;
 //# sourceMappingURL=TokenQuotaPanel.d.ts.map

package/lib/types/client/TokenQuotaPanel.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * callbacks.
  */
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { mergeModelRows } from "./store.js";
+import { mergeModelRows, reorderKeys } from "./store.js";
 import css from './TokenQuotaPanel.module.css';
 /** Compact a token count for display. */
 function formatTokens(n) {
@@ -86,7 +86,7 @@ function loadPanelPos() {
  * @param props - composed slot props.
  * @returns the panel element tree.
  */
-export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored, setOnFull, setReset, setCheckUpdates, checkUpdatesNow, clearLogBefore, setDimWhenIdle, setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession, useStore, actions, useSessions, }) {
+export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored, setOnFull, setReset, setCheckUpdates, checkUpdatesNow, clearLogBefore, setDimWhenIdle, setModelOrder, setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession, useStore, actions, useSessions, }) {
     const [collapsed, setCollapsed] = useState(false);
     const [drafts, setDrafts] = useState({});
     const [editingKey, setEditingKey] = useState(null);
@@ -95,8 +95,12 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
     // so the chat content behind it stays readable; hovering restores it.
     const [hovered, setHovered] = useState(false);
     const [inputActive, setInputActive] = useState(false);
-    // Active settings-dialog tab: quota limits vs. live-music options.
+    // Active settings-dialog tab: quota limits vs. live-music vs. misc.
     const [settingsTab, setSettingsTab] = useState('quota');
+    // Drag-to-reorder state for the model rows: the key being dragged and
+    // the key currently hovered as the drop target.
+    const [dragKey, setDragKey] = useState(null);
+    const [dropKey, setDropKey] = useState(null);
     // Copy-button feedback: which command was just copied (label flips to
     // 「已复制」for a moment so the click is perceivable).
     const [copiedCmd, setCopiedCmd] = useState(null);
@@ -131,6 +135,7 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
     const onFull = useStore(s => s.onFull);
     const checkUpdates = useStore(s => s.checkUpdates);
     const dimWhenIdle = useStore(s => s.dimWhenIdle);
+    const order = useStore(s => s.order);
     const musicEnabled = useStore(s => s.musicEnabled);
     const musicVolume = useStore(s => s.musicVolume);
     const musicStyle = useStore(s => s.musicStyle);
@@ -198,12 +203,27 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
                 clearTimeout(copyTimerRef.current);
         };
     }, []);
-    const rows = useMemo(() => mergeModelRows(groups, snapshot, current), [groups, snapshot, current]);
-    // All directory models, flattened for the monitoring picker.
-    const allModels = useMemo(() => groups.flatMap(group => group.models.map((model) => ({
-        key: `${group.id}/${model.id}`,
-        name: model.name,
-    }))).sort((a, b) => a.key.localeCompare(b.key)), [groups]);
+    const rows = useMemo(() => mergeModelRows(groups, snapshot, current, order), [groups, snapshot, current, order]);
+    // All directory models, flattened for the monitoring picker — same drag
+    // order as the panel rows so both lists read identically.
+    const allModels = useMemo(() => {
+        const list = groups.flatMap(group => group.models.map((model) => ({
+            key: `${group.id}/${model.id}`,
+            name: model.name,
+        })));
+        const rank = new Map(order.map((key, index) => [key, index]));
+        return list.sort((left, right) => {
+            const leftRank = rank.get(left.key);
+            const rightRank = rank.get(right.key);
+            if (leftRank !== undefined && rightRank !== undefined)
+                return leftRank - rightRank;
+            if (leftRank !== undefined)
+                return -1;
+            if (rightRank !== undefined)
+                return 1;
+            return left.key.localeCompare(right.key);
+        });
+    }, [groups, order]);
     const isMonitoredKey = (key) => monitored === null || monitored.includes(key);
     // Log dialog: filter by search, then paginate.
     const filteredLogEntries = useMemo(() => {
@@ -309,11 +329,28 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
                                 ? css.fillWarn
                                 : css.fillIdle;
                         const editing = editingKey === row.key;
-                        return (_jsxs("div", { className: css.row, children: [_jsxs("div", { className: css.rowHeader, children: [_jsxs("span", { className: css.rowName, title: row.key, children: [row.name, row.current && _jsx("span", { className: css.currentBadge, children: t('current') }), sessionId !== undefined && !row.current && (_jsx("button", { type: "button", className: css.selectBtn, onClick: () => { selectModel(sessionId, row.provider, row.model); }, children: t('select') }))] }), _jsxs("span", { className: css.rowMeta, children: [row.limit > 0
+                        return (_jsxs("div", { className: `${css.row}${dragKey === row.key ? ` ${css.rowDragging}` : ''}${dropKey === row.key && dragKey !== row.key ? ` ${css.rowDropTarget}` : ''}`, onDragOver: (event) => {
+                                if (dragKey === null || dragKey === row.key)
+                                    return;
+                                event.preventDefault();
+                                setDropKey(row.key);
+                            }, onDrop: (event) => {
+                                event.preventDefault();
+                                if (dragKey !== null && dragKey !== row.key) {
+                                    setModelOrder(reorderKeys(rows.map(r => r.key), dragKey, row.key));
+                                }
+                                setDragKey(null);
+                                setDropKey(null);
+                            }, onDragEnd: () => { setDragKey(null); setDropKey(null); }, children: [_jsxs("div", { className: css.rowHeader, children: [_jsx("span", { className: css.rowDrag, draggable: true, title: t('reorderHint'), onDragStart: (event) => {
+                                                setDragKey(row.key);
+                                                event.dataTransfer.effectAllowed = 'move';
+                                                // Firefox only starts a drag when some data is set.
+                                                event.dataTransfer.setData('text/plain', row.key);
+                                            }, children: "\u283F" }), _jsxs("span", { className: css.rowName, title: row.key, children: [row.name, row.current && _jsx("span", { className: css.currentBadge, children: t('current') }), sessionId !== undefined && !row.current && (_jsx("button", { type: "button", className: css.selectBtn, onClick: () => { selectModel(sessionId, row.provider, row.model); }, children: t('select') }))] }), _jsxs("span", { className: css.rowMeta, children: [row.limit > 0
                                                     ? `${formatTokens(row.used)} / ${formatTokens(row.limit)}`
                                                     : `${formatTokens(row.used)} · ${t('unlimited')}`, _jsx("button", { type: "button", className: css.gearBtn, title: t('setLimitHint'), onClick: () => { setEditingKey(editing ? null : row.key); }, children: "\u2699" })] })] }), _jsx("div", { className: css.bar, children: _jsx("div", { className: barClass, style: { width: `${pct}%` } }) }), editing && (_jsxs("div", { className: css.controls, children: [_jsx("input", { className: css.input, type: "number", min: 0, step: 10000, placeholder: t('limitPlaceholder'), value: drafts[row.key] ?? '', onChange: (event) => { setDrafts(prev => ({ ...prev, [row.key]: event.target.value })); }, onKeyDown: (event) => { if (event.key === 'Enter')
                                                 commitLimit(row); } }), _jsx("button", { type: "button", className: css.save, onClick: () => { commitLimit(row); }, children: t('save') })] }))] }, row.key));
-                    })] }), dialogOpen && (_jsxs("div", { ref: settingsRef, className: css.dialog, style: settingsPos !== null ? { left: settingsPos.x, top: settingsPos.y, transform: 'none' } : undefined, children: [_jsxs("div", { className: css.dialogHeader, onPointerDown: (event) => { beginDrag(event, settingsRef.current, setSettingsPos); }, children: [_jsx("div", { className: css.dialogTitle, children: t('settingsTitle') }), _jsx("button", { type: "button", className: css.dialogClose, title: t('close'), onClick: () => { actions.setDialogOpen(false); }, onPointerDown: (event) => { event.stopPropagation(); }, children: "\u00D7" })] }), _jsxs("div", { className: css.dialogTabs, role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": settingsTab === 'quota', className: `${css.dialogTab}${settingsTab === 'quota' ? ` ${css.dialogTabActive}` : ''}`, onClick: () => { setSettingsTab('quota'); }, children: t('settingsTabQuota') }), _jsx("button", { type: "button", role: "tab", "aria-selected": settingsTab === 'music', className: `${css.dialogTab}${settingsTab === 'music' ? ` ${css.dialogTabActive}` : ''}`, onClick: () => { setSettingsTab('music'); }, children: t('settingsTabMusic') })] }), settingsTab === 'quota' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.dialogSection, children: [_jsx("div", { className: css.dialogLabel, children: t('monitorLabel') }), _jsx("div", { className: css.monitorHint, children: t('monitorHint') }), _jsx("div", { className: css.monitorList, children: allModels.map(model => (_jsxs("label", { className: css.monitorRow, children: [_jsx("input", { type: "checkbox", checked: monitored === null || monitored.includes(model.key), onChange: (event) => {
+                    })] }), dialogOpen && (_jsxs("div", { ref: settingsRef, className: `${css.dialog} ${css.settingsDialog}`, style: settingsPos !== null ? { left: settingsPos.x, top: settingsPos.y, transform: 'none' } : undefined, children: [_jsxs("div", { className: css.dialogHeader, onPointerDown: (event) => { beginDrag(event, settingsRef.current, setSettingsPos); }, children: [_jsx("div", { className: css.dialogTitle, children: t('settingsTitle') }), _jsx("button", { type: "button", className: css.dialogClose, title: t('close'), onClick: () => { actions.setDialogOpen(false); }, onPointerDown: (event) => { event.stopPropagation(); }, children: "\u00D7" })] }), _jsxs("div", { className: css.dialogTabs, role: "tablist", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": settingsTab === 'quota', className: `${css.dialogTab}${settingsTab === 'quota' ? ` ${css.dialogTabActive}` : ''}`, onClick: () => { setSettingsTab('quota'); }, children: t('settingsTabQuota') }), _jsx("button", { type: "button", role: "tab", "aria-selected": settingsTab === 'music', className: `${css.dialogTab}${settingsTab === 'music' ? ` ${css.dialogTabActive}` : ''}`, onClick: () => { setSettingsTab('music'); }, children: t('settingsTabMusic') }), _jsx("button", { type: "button", role: "tab", "aria-selected": settingsTab === 'other', className: `${css.dialogTab}${settingsTab === 'other' ? ` ${css.dialogTabActive}` : ''}`, onClick: () => { setSettingsTab('other'); }, children: t('settingsTabOther') })] }), settingsTab === 'quota' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.dialogSection, children: [_jsx("div", { className: css.dialogLabel, children: t('monitorLabel') }), _jsx("div", { className: css.monitorHint, children: t('monitorHint') }), _jsx("div", { className: css.monitorList, children: allModels.map(model => (_jsxs("label", { className: css.monitorRow, children: [_jsx("input", { type: "checkbox", checked: monitored === null || monitored.includes(model.key), onChange: (event) => {
                                                         const base = monitored === null ? allModels.map(m => m.key) : monitored;
                                                         const next = new Set(base);
                                                         if (event.target.checked)
@@ -322,7 +359,7 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
                                                             next.delete(model.key);
                                                         // Auto-save on every change; all selected stores as null.
                                                         setMonitored(next.size === allModels.length ? null : [...next]);
-                                                    } }), _jsx("span", { className: css.monitorName, title: model.key, children: model.name })] }, model.key))) })] }), _jsxs("div", { className: css.dialogSection, children: [_jsx("div", { className: css.dialogLabel, children: t('fullActionLabel') }), FULL_ACTIONS.map(action => (_jsxs("label", { className: css.radioRow, children: [_jsx("input", { type: "radio", name: "token-quota-onfull", checked: onFull === action.value, onChange: () => { setOnFull(action.value); } }), _jsx("span", { children: t(action.labelKey) })] }, action.value)))] }), _jsxs("div", { className: css.dialogSection, children: [_jsx("div", { className: css.dialogLabel, children: t('resetLabel') }), _jsx("div", { className: css.monitorHint, children: t('resetHint') }), _jsxs("div", { className: css.resetRow, children: [_jsx("select", { className: css.resetSelect, value: reset?.offsetHours ?? -new Date().getTimezoneOffset() / 60, onChange: (event) => {
+                                                    } }), _jsx("span", { className: css.monitorName, title: model.key, children: model.name })] }, model.key))) })] }), _jsxs("div", { className: css.dialogSection, children: [_jsx("div", { className: css.dialogLabel, children: t('fullActionLabel') }), FULL_ACTIONS.map(action => (_jsxs("label", { className: css.radioRow, children: [_jsx("input", { type: "radio", name: "token-quota-onfull", checked: onFull === action.value, onChange: () => { setOnFull(action.value); } }), _jsx("span", { children: t(action.labelKey) })] }, action.value)))] })] })), settingsTab === 'other' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.dialogSection, children: [_jsx("div", { className: css.dialogLabel, children: t('resetLabel') }), _jsx("div", { className: css.monitorHint, children: t('resetHint') }), _jsxs("div", { className: css.resetRow, children: [_jsx("select", { className: css.resetSelect, value: reset?.offsetHours ?? -new Date().getTimezoneOffset() / 60, onChange: (event) => {
                                                     setReset({
                                                         offsetHours: Number(event.target.value),
                                                         hour: reset?.hour ?? 0,
@@ -340,7 +377,7 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
                                                         hour: reset?.hour ?? 0,
                                                         minute: Number(event.target.value),
                                                     });
-                                                }, children: Array.from({ length: 12 }, (_, i) => i * 5).map(minute => (_jsxs("option", { value: minute, children: [String(minute).padStart(2, '0'), " \u5206"] }, minute))) })] })] }), _jsxs("div", { className: css.dialogSection, children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: dimWhenIdle, onChange: (event) => { setDimWhenIdle(event.target.checked); } }), _jsx("span", { children: t('dimWhenIdleLabel') })] }), _jsx("div", { className: css.dialogHint, children: t('dimWhenIdleHint') })] })] })), settingsTab === 'music' && (_jsxs("div", { className: css.dialogSection, children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: musicEnabled, onChange: (event) => { setMusicEnabled(event.target.checked); } }), _jsx("span", { children: t('musicLabel') })] }), _jsx("div", { className: css.dialogHint, children: t('musicHint') }), musicEnabled && (_jsxs(_Fragment, { children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("span", { children: t('musicVolume') }), _jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: musicVolume, onChange: (event) => { setMusicVolume(Number(event.target.value)); } })] }), _jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("span", { children: t('musicStyle') }), _jsxs("select", { value: musicStyle, onChange: (event) => { setMusicStyle(event.target.value); }, children: [_jsx("option", { value: "major", children: t('musicStyleMajor') }), _jsx("option", { value: "minor", children: t('musicStyleMinor') }), _jsx("option", { value: "pentatonic", children: t('musicStylePentatonic') })] })] }), _jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: musicOnlyCurrentSession, onChange: (event) => { setMusicOnlyCurrentSession(event.target.checked); } }), _jsx("span", { children: t('musicOnlyCurrentSessionLabel') })] }), _jsx("div", { className: css.dialogHint, children: t('musicOnlyCurrentSessionHint') })] }))] })), settingsTab === 'quota' && (_jsx(_Fragment, { children: _jsxs("div", { className: css.dialogSection, children: [_jsxs("div", { className: css.checkUpdatesRow, children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: checkUpdates, onChange: (event) => { setCheckUpdates(event.target.checked); } }), _jsx("span", { children: t('checkUpdatesLabel') })] }), _jsx("button", { type: "button", className: css.checkBtn, disabled: checkingUpdates, onClick: checkUpdatesNow, children: checkingUpdates
+                                                }, children: Array.from({ length: 12 }, (_, i) => i * 5).map(minute => (_jsxs("option", { value: minute, children: [String(minute).padStart(2, '0'), " \u5206"] }, minute))) })] })] }), _jsxs("div", { className: css.dialogSection, children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: dimWhenIdle, onChange: (event) => { setDimWhenIdle(event.target.checked); } }), _jsx("span", { children: t('dimWhenIdleLabel') })] }), _jsx("div", { className: css.dialogHint, children: t('dimWhenIdleHint') })] })] })), settingsTab === 'music' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.dialogSection, children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: musicEnabled, onChange: (event) => { setMusicEnabled(event.target.checked); } }), _jsx("span", { children: t('musicLabel') })] }), _jsx("div", { className: css.dialogHint, children: t('musicHint') })] }), musicEnabled && (_jsxs("div", { className: css.dialogSection, children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("span", { children: t('musicVolume') }), _jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: musicVolume, onChange: (event) => { setMusicVolume(Number(event.target.value)); } })] }), _jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("span", { children: t('musicStyle') }), _jsxs("select", { value: musicStyle, onChange: (event) => { setMusicStyle(event.target.value); }, children: [_jsx("option", { value: "major", children: t('musicStyleMajor') }), _jsx("option", { value: "minor", children: t('musicStyleMinor') }), _jsx("option", { value: "pentatonic", children: t('musicStylePentatonic') })] })] }), _jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: musicOnlyCurrentSession, onChange: (event) => { setMusicOnlyCurrentSession(event.target.checked); } }), _jsx("span", { children: t('musicOnlyCurrentSessionLabel') })] }), _jsx("div", { className: css.dialogHint, children: t('musicOnlyCurrentSessionHint') })] }))] })), settingsTab === 'other' && (_jsx(_Fragment, { children: _jsxs("div", { className: css.dialogSection, children: [_jsxs("div", { className: css.checkUpdatesRow, children: [_jsxs("label", { className: css.checkUpdatesLabel, children: [_jsx("input", { type: "checkbox", checked: checkUpdates, onChange: (event) => { setCheckUpdates(event.target.checked); } }), _jsx("span", { children: t('checkUpdatesLabel') })] }), _jsx("button", { type: "button", className: css.checkBtn, disabled: checkingUpdates, onClick: checkUpdatesNow, children: checkingUpdates
                                                 ? t('checkingUpdates')
                                                 : lastCheckResult === 'up-to-date'
                                                     ? t('checkUpToDate')

package/lib/types/client/index.js

@@ -66,6 +66,29 @@ export function apply(ctx) {
         music.onAction(action);
     });
     ctx.effect(() => () => { sse.close(); }, 'token-quota-ui: music SSE');
+    // Browser autoplay policy: an AudioContext only starts inside a user
+    // gesture. When the switch was left ON and the page reloads, the setting
+    // is enabled but no gesture has happened yet — so the engine stays silent
+    // until the user toggles it off/on. Arm a one-shot gesture listener that
+    // starts the engine on the first click / keypress instead.
+    const autoStartMusic = () => {
+        if (!music.isEnabled || music.started) {
+            if (music.started) {
+                window.removeEventListener('pointerdown', autoStartMusic);
+                window.removeEventListener('keydown', autoStartMusic);
+            }
+            return;
+        }
+        void music.ensureStarted();
+        window.removeEventListener('pointerdown', autoStartMusic);
+        window.removeEventListener('keydown', autoStartMusic);
+    };
+    window.addEventListener('pointerdown', autoStartMusic);
+    window.addEventListener('keydown', autoStartMusic);
+    ctx.effect(() => () => {
+        window.removeEventListener('pointerdown', autoStartMusic);
+        window.removeEventListener('keydown', autoStartMusic);
+    }, 'token-quota-ui: music autostart gestures');
     /** Build a writable music-settings clone with defaults applied. */
     const musicDefaults = (raw) => ({
         enabled: raw?.enabled ?? false,
@@ -227,6 +250,7 @@ export function apply(ctx) {
         bound?.setSettings(lastMonitored, lastOnFull);
         bound?.setCheckUpdates(doc?.checkUpdates ?? true);
         bound?.setDimWhenIdle(doc?.dimWhenIdle ?? false);
+        bound?.setOrder(Array.isArray(doc?.order) ? doc.order : []);
         bound?.setReset(lastReset);
         const musicSettings = musicDefaults(doc?.music);
         lastOnlyCurrentSession = musicSettings.onlyCurrentSession;
@@ -309,6 +333,11 @@ export function apply(ctx) {
         bound?.setDimWhenIdle(enabled);
         void scope.set('dimWhenIdle', enabled);
     };
+    /** Persist the drag-to-reorder display order of model rows. */
+    const setModelOrder = (order) => {
+        bound?.setOrder(order);
+        void scope.set('order', order);
+    };
     const setMusicEnabled = (enabled) => {
         const doc = scope.getSnapshot().value;
         const current = musicDefaults(doc?.music);
@@ -426,6 +455,7 @@ export function apply(ctx) {
             load, setLimit, selectModel, setMonitored, setOnFull, setReset,
             setCheckUpdates, checkUpdatesNow, clearLogBefore, setDimWhenIdle,
             setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession,
+            setModelOrder,
         };
     };
     ctx.slots.inject('shell.overlay', () => ctx.slots.register({

package/lib/types/client/locales.d.ts

@@ -27,6 +27,8 @@ export declare const zh: {
     settingsTitle: string;
     settingsTabQuota: string;
     settingsTabMusic: string;
+    settingsTabOther: string;
+    reorderHint: string;
     monitorLabel: string;
     monitorHint: string;
     monitorAll: string;
@@ -109,6 +111,8 @@ export declare const en: {
     settingsTitle: string;
     settingsTabQuota: string;
     settingsTabMusic: string;
+    settingsTabOther: string;
+    reorderHint: string;
     monitorLabel: string;
     monitorHint: string;
     monitorAll: string;

package/lib/types/client/locales.js

@@ -27,6 +27,8 @@ export const zh = {
     settingsTitle: '设置',
     settingsTabQuota: '限额设置',
     settingsTabMusic: '音乐设置',
+    settingsTabOther: '其它',
+    reorderHint: '拖动排序',
     monitorLabel: '监控模型',
     monitorHint: '未勾选的模型不显示、不计入用量、不受限额限制',
     monitorAll: '全部',
@@ -107,6 +109,8 @@ export const en = {
     settingsTitle: 'Settings',
     settingsTabQuota: 'Quota',
     settingsTabMusic: 'Music',
+    settingsTabOther: 'Other',
+    reorderHint: 'Drag to reorder',
     monitorLabel: 'Monitored models',
     monitorHint: 'Unchecked models are hidden, not metered, and never capped',
     monitorAll: 'All',

package/lib/types/client/music.d.ts

@@ -56,6 +56,8 @@ export declare class TokenQuotaMusic {
     private static readonly STREAM_TIMEOUT_MS;
     /** True once the audio context has been started (needs a user gesture). */
     get started(): boolean;
+    /** True when the master switch is on (mirrors the settings document). */
+    get isEnabled(): boolean;
     /**
      * Start the audio context and probe for a MIDI output (once). Must be
      * called inside a user gesture so the AudioContext can resume.

package/lib/types/client/music.js

@@ -98,6 +98,10 @@ export class TokenQuotaMusic {
     get started() {
         return this.audio !== null;
     }
+    /** True when the master switch is on (mirrors the settings document). */
+    get isEnabled() {
+        return this.enabled;
+    }
     /**
      * Start the audio context and probe for a MIDI output (once). Must be
      * called inside a user gesture so the AudioContext can resume.

package/lib/types/client/store.d.ts

@@ -50,6 +50,11 @@ export interface TokenQuotaPanelState {
     checkUpdates: boolean;
     /** Whether the panel dims while the pointer is away / while typing. */
     dimWhenIdle: boolean;
+    /**
+     * Preferred display order of model keys, written by dragging panel rows.
+     * Keys not listed keep their catalog order after the listed ones.
+     */
+    order: string[];
     /** Live music settings (mirrored from the settings document). */
     musicEnabled: boolean;
     musicVolume: number;
@@ -97,6 +102,8 @@ export type TokenQuotaPanelActions = {
     setSettings: (d: TokenQuotaPanelState, monitored: string[] | null, onFull: TokenQuotaFullAction) => void;
     setCheckUpdates: (d: TokenQuotaPanelState, checkUpdates: boolean) => void;
     setDimWhenIdle: (d: TokenQuotaPanelState, dimWhenIdle: boolean) => void;
+    /** Replace the drag-to-reorder model display order. */
+    setOrder: (d: TokenQuotaPanelState, order: string[]) => void;
     setMusicEnabled: (d: TokenQuotaPanelState, enabled: boolean) => void;
     setMusicVolume: (d: TokenQuotaPanelState, volume: number) => void;
     setMusicStyle: (d: TokenQuotaPanelState, style: TokenQuotaMusicStyle) => void;
@@ -131,7 +138,14 @@ export declare function createTokenQuotaPanelStore(): EngineStoreHandle<TokenQuo
  * @param groups - advisory provider groups of the current session.
  * @param snapshot - latest quota snapshot, or null before the first one.
  * @param current - current model selection reported by the Host.
- * @returns rows sorted by key.
+ * @param order - user's drag-to-reorder preference (model keys); listed keys
+ * come first in that exact order, the rest follow in catalog order.
+ * @returns rows in display order.
+ */
+export declare function mergeModelRows(groups: readonly ModelProviderGroup[], snapshot: TokenQuotaSnapshot | null, current: ModelSelection | null, order?: readonly string[]): ModelQuotaRow[];
+/**
+ * Move one key to another key's position, returning the full reordered key
+ * list (the shape persisted in the settings document's `order`).
  */
-export declare function mergeModelRows(groups: readonly ModelProviderGroup[], snapshot: TokenQuotaSnapshot | null, current: ModelSelection | null): ModelQuotaRow[];
+export declare function reorderKeys(keys: readonly string[], from: string, to: string): string[];
 //# sourceMappingURL=store.d.ts.map

package/lib/types/client/store.js

@@ -28,6 +28,7 @@ export function createTokenQuotaPanelStore() {
             onFull: 'stop',
             checkUpdates: true,
             dimWhenIdle: false,
+            order: [],
             musicEnabled: false,
             musicVolume: 0.5,
             musicStyle: 'pentatonic',
@@ -57,6 +58,7 @@ export function createTokenQuotaPanelStore() {
             setSettings: (d, monitored, onFull) => { d.monitored = monitored; d.onFull = onFull; },
             setCheckUpdates: (d, checkUpdates) => { d.checkUpdates = checkUpdates; },
             setDimWhenIdle: (d, dimWhenIdle) => { d.dimWhenIdle = dimWhenIdle; },
+            setOrder: (d, order) => { d.order = order; },
             setMusicEnabled: (d, enabled) => { d.musicEnabled = enabled; },
             setMusicVolume: (d, volume) => { d.musicVolume = volume; },
             setMusicStyle: (d, style) => { d.musicStyle = style; },
@@ -104,9 +106,11 @@ export function createTokenQuotaPanelStore() {
  * @param groups - advisory provider groups of the current session.
  * @param snapshot - latest quota snapshot, or null before the first one.
  * @param current - current model selection reported by the Host.
- * @returns rows sorted by key.
+ * @param order - user's drag-to-reorder preference (model keys); listed keys
+ * come first in that exact order, the rest follow in catalog order.
+ * @returns rows in display order.
  */
-export function mergeModelRows(groups, snapshot, current) {
+export function mergeModelRows(groups, snapshot, current, order = []) {
     const entryByKey = new Map((snapshot?.entries ?? []).map(entry => [entry.key, entry]));
     const rows = new Map();
     for (const group of groups) {
@@ -137,6 +141,35 @@ export function mergeModelRows(groups, snapshot, current) {
             current: current !== null && current.provider === entry.provider && current.model === entry.model,
         });
     }
-    return [...rows.values()].sort((left, right) => left.key.localeCompare(right.key));
+    // Drag preference first (in its own order), everything else after it,
+    // alphabetically — so a newly discovered model still lands somewhere stable.
+    const rank = new Map(order.map((key, index) => [key, index]));
+    return [...rows.values()].sort((left, right) => {
+        const leftRank = rank.get(left.key);
+        const rightRank = rank.get(right.key);
+        if (leftRank !== undefined && rightRank !== undefined)
+            return leftRank - rightRank;
+        if (leftRank !== undefined)
+            return -1;
+        if (rightRank !== undefined)
+            return 1;
+        return left.key.localeCompare(right.key);
+    });
+}
+/**
+ * Move one key to another key's position, returning the full reordered key
+ * list (the shape persisted in the settings document's `order`).
+ */
+export function reorderKeys(keys, from, to) {
+    const next = [...keys];
+    const fromIndex = next.indexOf(from);
+    const toIndex = next.indexOf(to);
+    if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex)
+        return next;
+    const [moved] = next.splice(fromIndex, 1);
+    if (moved === undefined)
+        return next;
+    next.splice(toIndex, 0, moved);
+    return next;
 }
 //# sourceMappingURL=store.js.map

package/lib/types/index.js

@@ -202,6 +202,8 @@ const TOKEN_QUOTA_SETTINGS_SCHEMA = z.object({
     checkUpdates: z.boolean().default(true),
     // Client-side appearance preference; the host only stores it.
     dimWhenIdle: z.boolean().default(false),
+    // Drag-to-reorder: display order of model keys, written by the panel.
+    order: z.array(z.string()).default([]),
     // `reset` is a user-facing preference outside the validated surface: the
     // panel writes it and the host validates the shape at runtime. `z.any` with
     // a null default keeps it out of the strict fields above.
@@ -273,7 +275,7 @@ export class TokenQuotaService extends Service {
     history = {};
     limits = {};
     monitored = undefined;
-    settingsSource = () => ({ limits: {}, monitored: [], onFull: 'stop', checkUpdates: true, dimWhenIdle: false, music: { ...TOKEN_QUOTA_DEFAULT_MUSIC } });
+    settingsSource = () => ({ limits: {}, monitored: [], onFull: 'stop', checkUpdates: true, dimWhenIdle: false, music: { ...TOKEN_QUOTA_DEFAULT_MUSIC }, order: [] });
     /** Whether update checks are enabled (mirrors the settings document). */
     checkUpdates = true;
     /** Cached upgrade availability; recomputed by {@link refreshUpgrade}. */
@@ -337,6 +339,7 @@ export class TokenQuotaService extends Service {
                             onFull: doc.onFull === 'switchPriority' ? 'switchAll' : (doc.onFull ?? 'stop'),
                             checkUpdates: doc.checkUpdates ?? true,
                             dimWhenIdle: doc.dimWhenIdle ?? false,
+                            order: Array.isArray(doc.order) ? doc.order : [],
                             reset: doc.reset ?? undefined,
                             music: {
                                 enabled: doc.music?.enabled ?? TOKEN_QUOTA_DEFAULT_MUSIC.enabled,

package/lib/types/types.d.ts

@@ -143,6 +143,12 @@ export interface TokenQuotaSettings {
      * an attached MIDI output. Off by default.
      */
     music: TokenQuotaMusicSettings;
+    /**
+     * Preferred display order of model keys (`provider/model`), set by dragging
+     * rows in the panel. Keys not listed here keep their catalog order after the
+     * listed ones. Empty by default (pure catalog/alphabetical order).
+     */
+    order: string[];
 }
 /** Token-quota plugin configuration. */
 export interface TokenQuotaConfig {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jxgame2020/dsh-token-quota",
   "description": "Daily per-model token quota accounting, enforcement, and a floating quota panel for the DeepSeek Harness — a fully self-contained plugin (no core-Harness wiring, no generated RPC contract)",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "publishConfig": {
     "access": "public"
   },