@jxgame2020/dsh-token-quota 0.1.32 → 0.1.34

package/lib/index.js

@@ -215,6 +215,17 @@ const TOKEN_QUOTA_SETTINGS_SCHEMA = z.object({
 	checkUpdates: z.boolean().default(true),
 	dimWhenIdle: z.boolean().default(false),
 	order: z.array(z.string()).default([]),
+	notes: z.array(z.object({
+		id: z.string(),
+		title: z.string().default(""),
+		text: z.string().default(""),
+		x: z.number().default(80),
+		y: z.number().default(80),
+		width: z.number().default(220),
+		height: z.number().default(220),
+		collapsed: z.boolean().default(false),
+		visible: z.boolean().default(true)
+	})).default([]),
 	reset: z.any().default(null),
 	music: z.object({
 		enabled: z.boolean().default(TOKEN_QUOTA_DEFAULT_MUSIC.enabled),
@@ -283,7 +294,8 @@ var TokenQuotaService = class TokenQuotaService extends Service {
 		checkUpdates: true,
 		dimWhenIdle: false,
 		music: { ...TOKEN_QUOTA_DEFAULT_MUSIC },
-		order: []
+		order: [],
+		notes: []
 	});
 	/** Whether update checks are enabled (mirrors the settings document). */
 	checkUpdates = true;
@@ -337,6 +349,20 @@ var TokenQuotaService = class TokenQuotaService extends Service {
 							checkUpdates: doc.checkUpdates ?? true,
 							dimWhenIdle: doc.dimWhenIdle ?? false,
 							order: Array.isArray(doc.order) ? doc.order : [],
+							notes: Array.isArray(doc.notes) ? doc.notes.slice(0, 5).flatMap((note) => {
+								if (typeof note.id !== "string") return [];
+								return [{
+									id: note.id,
+									title: note.title ?? "",
+									text: note.text ?? "",
+									x: note.x ?? 80,
+									y: note.y ?? 80,
+									width: note.width ?? 220,
+									height: note.height ?? 220,
+									collapsed: note.collapsed ?? false,
+									visible: note.visible ?? true
+								}];
+							}) : [],
 							reset: doc.reset ?? void 0,
 							music: {
 								enabled: doc.music?.enabled ?? TOKEN_QUOTA_DEFAULT_MUSIC.enabled,
@@ -518,7 +544,7 @@ var TokenQuotaService = class TokenQuotaService extends Service {
 		return this.upgradeCheck;
 	}
 	async doRefreshUpgrade() {
-		const current = "0.1.32";
+		const current = "0.1.34";
 		let latest;
 		try {
 			const response = await fetch(REGISTRY_LATEST_URL, {

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

@@ -1,6 +1,6 @@
 import type { PropsLocale, PropsRuntime, PropsStore } from '@deepseek-ai/dsh-client-ui-slots';
 import type { SessionId } from '@deepseek-ai/dsh-session/types';
-import type { TokenQuotaFullAction, TokenQuotaMusicStyle, TokenQuotaReset } from '@jxgame2020/dsh-token-quota/types';
+import type { TokenQuotaFullAction, TokenQuotaMusicStyle, TokenQuotaNote, TokenQuotaReset } from '@jxgame2020/dsh-token-quota/types';
 import type { createTokenQuotaPanelStore } from './store.ts';
 /** Injected business face: data loading and mutations wired in `apply`. */
 export interface TokenQuotaPanelInjected {
@@ -22,6 +22,8 @@ export interface TokenQuotaPanelInjected {
     setDimWhenIdle: (enabled: boolean) => void;
     /** Persist the drag-to-reorder display order of model rows. */
     setModelOrder: (order: string[]) => void;
+    /** Persist the floating scratchpad notes (content, title, placement). */
+    saveNotes: (notes: TokenQuotaNote[]) => 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. */
@@ -42,5 +44,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, setModelOrder, 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, saveNotes, setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession, useStore, actions, useSessions, }: TokenQuotaPanelComponentProps): import("react").JSX.Element;
 //# sourceMappingURL=TokenQuotaPanel.d.ts.map

package/lib/types/client/TokenQuotaPanel.js

@@ -10,6 +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 { TOKEN_QUOTA_MAX_NOTES } from '@jxgame2020/dsh-token-quota/types';
 import { mergeModelRows, reorderKeys } from "./store.js";
 import css from './TokenQuotaPanel.module.css';
 /** Compact a token count for display. */
@@ -63,6 +64,46 @@ function beginDrag(event, el, apply) {
     window.addEventListener('pointerup', onUp);
     window.addEventListener('pointercancel', onUp);
 }
+/**
+ * Pointer-driven resize of a note window from its bottom-right grip. Sizes are
+ * absolute pixels derived from the element's rect at grab time, so the window
+ * keeps its top-left anchor while the pointer moves. A floor keeps a window
+ * from collapsing to nothing.
+ */
+function beginResize(event, el, apply) {
+    if (el === null)
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const rect = el.getBoundingClientRect();
+    const onMove = (ev) => {
+        apply({
+            width: Math.max(NOTE_MIN_WIDTH, Math.round(rect.width + (ev.clientX - startX))),
+            height: Math.max(NOTE_MIN_HEIGHT, Math.round(rect.height + (ev.clientY - startY))),
+        });
+    };
+    const onUp = () => {
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+        window.removeEventListener('pointercancel', onUp);
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+}
+/** First visible character of a note title, for its header chip. */
+function noteInitial(title) {
+    const trimmed = title.trim();
+    if (trimmed === '')
+        return '·';
+    return Array.from(trimmed)[0] ?? '·';
+}
+/** Default geometry of a new note; later notes cascade so they don't stack. */
+const NOTE_DEFAULT_SIZE = 220;
+const NOTE_MIN_WIDTH = 150;
+const NOTE_MIN_HEIGHT = 70;
 /** Persisted panel placement so a dragged position survives reloads. */
 const PANEL_POS_KEY = 'dsh-token-quota:panel-pos';
 function loadPanelPos() {
@@ -86,7 +127,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, setModelOrder, setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession, useStore, actions, useSessions, }) {
+export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored, setOnFull, setReset, setCheckUpdates, checkUpdatesNow, clearLogBefore, setDimWhenIdle, setModelOrder, saveNotes, setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession, useStore, actions, useSessions, }) {
     const [collapsed, setCollapsed] = useState(false);
     const [drafts, setDrafts] = useState({});
     const [editingKey, setEditingKey] = useState(null);
@@ -101,6 +142,144 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
     // the key currently hovered as the drop target.
     const [dragKey, setDragKey] = useState(null);
     const [dropKey, setDropKey] = useState(null);
+    // ---- Floating scratchpad notes -------------------------------------------
+    // The notes live in local state while the panel is mounted: every keystroke
+    // updates this copy (so typing is never laggy) and a debounced write pushes
+    // it to the Host. Seeding happens exactly once, when the Host's document
+    // first arrives, so a background settings poll cannot clobber the text.
+    const storedNotes = useStore(s => s.notes);
+    const storedNotesLoaded = useStore(s => s.notesLoaded);
+    const [notes, setNotes] = useState([]);
+    const notesSeeded = useRef(false);
+    const notesTimer = useRef(null);
+    // Latest value awaiting a debounced write, so an unmount can flush it.
+    const notesPending = useRef(null);
+    // Context menu opened by right-clicking a note chip.
+    const [noteMenu, setNoteMenu] = useState(null);
+    // Note window that was touched last, painted above its siblings.
+    const [activeNote, setActiveNote] = useState(null);
+    // Note whose title is being edited (id) plus the in-progress draft. The
+    // title is a plain label until the pencil is pressed, so the title bar
+    // stays fully draggable the rest of the time.
+    const [editingTitle, setEditingTitle] = useState(null);
+    const [titleDraft, setTitleDraft] = useState('');
+    useEffect(() => {
+        if (!storedNotesLoaded || notesSeeded.current)
+            return;
+        notesSeeded.current = true;
+        setNotes(storedNotes);
+    }, [storedNotesLoaded, storedNotes]);
+    // Flush a pending debounced write when the panel goes away, so keystrokes
+    // typed in the last fraction of a second are not lost.
+    useEffect(() => () => {
+        if (notesTimer.current !== null)
+            window.clearTimeout(notesTimer.current);
+        const pending = notesPending.current;
+        if (pending !== null) {
+            notesPending.current = null;
+            saveNotes(pending);
+        }
+    }, []);
+    /**
+     * Apply a note change locally and persist it. Structural changes (create,
+     * close, collapse, drop) write straight through; free-form edits (typing,
+     * dragging, resizing) are debounced so a keystroke doesn't hit the Host.
+     */
+    const commitNotes = (next, immediate = true) => {
+        setNotes(next);
+        if (notesTimer.current !== null)
+            window.clearTimeout(notesTimer.current);
+        if (immediate) {
+            notesPending.current = null;
+            saveNotes(next);
+            return;
+        }
+        notesPending.current = next;
+        notesTimer.current = window.setTimeout(() => {
+            notesTimer.current = null;
+            const pending = notesPending.current;
+            notesPending.current = null;
+            if (pending !== null)
+                saveNotes(pending);
+        }, 400);
+    };
+    const patchNote = (id, patch, immediate = true) => {
+        commitNotes(notes.map(note => (note.id === id ? { ...note, ...patch } : note)), immediate);
+    };
+    /** Create a note, auto-titled 新建N with the lowest unused number. */
+    const createNote = () => {
+        if (notes.length >= TOKEN_QUOTA_MAX_NOTES)
+            return;
+        let index = 1;
+        const used = new Set(notes.map(note => /^新建(\d+)$/.exec(note.title.trim())?.[1]).filter(Boolean));
+        while (used.has(String(index)))
+            index += 1;
+        const step = notes.length * 28;
+        commitNotes([...notes, {
+                id: `note-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`,
+                title: `新建${index}`,
+                text: '',
+                x: 120 + step,
+                y: 140 + step,
+                width: NOTE_DEFAULT_SIZE,
+                height: NOTE_DEFAULT_SIZE,
+                collapsed: false,
+                visible: true,
+            }]);
+    };
+    /** Commit the title draft and leave edit mode. */
+    const commitTitle = (id) => {
+        patchNote(id, { title: titleDraft }, true);
+        setEditingTitle(null);
+    };
+    const closeNote = (id) => { patchNote(id, { visible: false }); };
+    const removeNote = (id) => {
+        commitNotes(notes.filter(note => note.id !== id));
+        setNoteMenu(null);
+    };
+    /**
+     * Title-bar drag with a click/drag threshold: moving the pointer past a few
+     * pixels drags the window, while a plain click focuses the title input for
+     * editing. A title that is already being edited keeps native text behaviour
+     * (selection, caret placement) instead of turning into a window drag.
+     */
+    const beginNoteBarDrag = (event, id) => {
+        const win = event.currentTarget.parentElement;
+        if (win === null)
+            return;
+        if (event.target.closest('button') !== null)
+            return;
+        // While the title is being edited the input keeps native text behaviour.
+        if (event.target.closest('input') !== null)
+            return;
+        event.preventDefault();
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const rect = win.getBoundingClientRect();
+        let dragging = false;
+        const onMove = (ev) => {
+            if (!dragging) {
+                if (Math.abs(ev.clientX - startX) < 3 && Math.abs(ev.clientY - startY) < 3)
+                    return;
+                dragging = true;
+                const active = document.activeElement;
+                if (active instanceof HTMLElement)
+                    active.blur();
+            }
+            patchNote(id, {
+                x: Math.round(rect.left + (ev.clientX - startX)),
+                y: Math.round(rect.top + (ev.clientY - startY)),
+            }, false);
+        };
+        const onUp = () => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('pointercancel', onUp);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('pointercancel', onUp);
+    };
     // Copy-button feedback: which command was just copied (label flips to
     // 「已复制」for a moment so the click is perceivable).
     const [copiedCmd, setCopiedCmd] = useState(null);
@@ -318,39 +497,45 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
     const panelDimClass = dimWhenIdle
         ? (hovered || upgradeFlash ? '' : inputActive ? css.panelDimStrong : css.panelDim)
         : '';
-    return (_jsxs("div", { ref: panelRef, className: `${css.panel}${panelDimClass !== '' ? ` ${panelDimClass}` : ''}`, style: panelPos !== null ? { left: panelPos.x, top: panelPos.y, right: 'auto' } : undefined, onPointerEnter: () => { setHovered(true); }, onPointerLeave: () => { setHovered(false); }, children: [_jsxs("div", { className: css.header, onPointerDown: (event) => { beginDrag(event, panelRef.current, applyPanelPos); }, children: [_jsxs("div", { className: css.headerText, children: [_jsxs("div", { className: css.title, children: [t('title'), __TOKEN_QUOTA_VERSION__ !== undefined && __TOKEN_QUOTA_VERSION__ !== '' && (upgrade !== null
-                                        ? (_jsxs("span", { className: `${css.version} ${css.versionNew}`, title: t('upgradeAvailableHint'), children: ["v", __TOKEN_QUOTA_VERSION__, " \u2192 v", upgrade.latestVersion] }))
-                                        : (_jsxs("span", { className: css.version, children: ["v", __TOKEN_QUOTA_VERSION__] })))] }), _jsx("div", { className: css.subtitle, children: t('subtitle') })] }), _jsxs("div", { className: css.headerActions, onPointerDown: (event) => { event.stopPropagation(); }, children: [_jsx("button", { type: "button", "aria-pressed": musicEnabled, className: `${css.settingsBtn}${musicEnabled ? ` ${css.settingsBtnActive}` : ''}`, title: `${t('musicLabel')}：${musicEnabled ? t('musicOn') : t('musicOff')}`, onClick: () => { setMusicEnabled(!musicEnabled); }, children: "\u266A" }), _jsx("button", { type: "button", className: css.settingsBtn, onClick: () => { actions.setLogOpen(true); }, children: t('logs') }), _jsx("button", { type: "button", className: css.settingsBtn, onClick: openSettings, children: t('settings') }), _jsx("button", { type: "button", className: css.collapse, onClick: () => { setCollapsed(true); }, children: t('collapse') })] })] }), _jsxs("div", { className: css.body, children: [loading && _jsx("div", { className: css.notice, children: t('loading') }), error !== null && _jsx("div", { className: css.noticeError, children: error }), fullNotice !== null && (_jsx("div", { className: css.fullNotice, role: "alert", children: fullNotice })), upgrade !== null && !upgradeDismissed && (_jsxs("div", { className: `${css.upgradeBanner}${upgradeFlash ? ` ${css.upgradeBannerFlash}` : ''}`, role: "alert", children: [_jsx("div", { className: css.upgradeBannerText, children: t('upgradeAvailable').replace('{version}', upgrade.latestVersion) }), _jsx("div", { className: css.upgradeCommands, children: upgrade.commands.map(cmd => (_jsxs("div", { className: css.upgradeCommandRow, children: [_jsx("code", { className: css.upgradeCommand, children: cmd }), _jsx("button", { type: "button", className: `${css.copyBtn}${copiedCmd === cmd ? ` ${css.copyBtnDone}` : ''}`, onClick: () => { copyUpgradeCommand(cmd); }, children: copiedCmd === cmd ? t('copied') : t('copy') })] }, cmd))) }), _jsx("div", { className: css.upgradeHint, children: t('upgradeHint') }), _jsx("button", { type: "button", className: css.upgradeClose, onClick: () => { actions.setUpgradeDismissed(true); }, "aria-label": t('close'), children: "\u00D7" })] })), !loading && error === null && visibleRows.length === 0 && (_jsx("div", { className: css.notice, children: monitored !== null && monitored.length === 0 ? t('noMonitored') : t('waiting') })), visibleRows.map((row) => {
-                        const state = barStateOf(row);
-                        const pct = row.limit > 0 ? Math.min(100, Math.round((row.used / row.limit) * 100)) : 0;
-                        const barClass = state === 'over'
-                            ? css.fillOver
-                            : state === 'warn'
-                                ? css.fillWarn
-                                : css.fillIdle;
-                        const editing = editingKey === row.key;
-                        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} ${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) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: panelRef, className: `${css.panel}${panelDimClass !== '' ? ` ${panelDimClass}` : ''}`, style: panelPos !== null ? { left: panelPos.x, top: panelPos.y, right: 'auto' } : undefined, onPointerEnter: () => { setHovered(true); }, onPointerLeave: () => { setHovered(false); }, children: [_jsxs("div", { className: css.header, onPointerDown: (event) => { beginDrag(event, panelRef.current, applyPanelPos); }, children: [_jsxs("div", { className: css.headerText, children: [_jsxs("div", { className: css.title, children: [t('title'), __TOKEN_QUOTA_VERSION__ !== undefined && __TOKEN_QUOTA_VERSION__ !== '' && (upgrade !== null
+                                                ? (_jsxs("span", { className: `${css.version} ${css.versionNew}`, title: t('upgradeAvailableHint'), children: ["v", __TOKEN_QUOTA_VERSION__, " \u2192 v", upgrade.latestVersion] }))
+                                                : (_jsxs("span", { className: css.version, children: ["v", __TOKEN_QUOTA_VERSION__] })))] }), _jsxs("div", { className: css.notesBar, onPointerDown: (event) => { event.stopPropagation(); }, children: [notes.map((note) => {
+                                                const open = note.visible && !note.collapsed;
+                                                return (_jsx("button", { type: "button", className: `${css.noteChip}${open ? ` ${css.noteChipOpen}` : ''}`, title: note.title.trim() === '' ? t('noteUntitled') : note.title, onClick: () => { patchNote(note.id, { visible: true, collapsed: false }); }, onContextMenu: (event) => {
+                                                        event.preventDefault();
+                                                        setNoteMenu({ id: note.id, x: event.clientX, y: event.clientY });
+                                                    }, children: noteInitial(note.title) }, note.id));
+                                            }), _jsxs("button", { type: "button", className: css.noteNew, disabled: notes.length >= TOKEN_QUOTA_MAX_NOTES, title: notes.length >= TOKEN_QUOTA_MAX_NOTES ? t('noteMaxHint') : t('noteNewHint'), onClick: createNote, children: [_jsxs("svg", { viewBox: "0 0 16 16", width: "13", height: "13", "aria-hidden": "true", children: [_jsx("path", { d: "M4 1.6h4.6L12.4 5.4v9H4z", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinejoin: "round" }), _jsx("path", { d: "M8.4 1.6v3.9h4", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinejoin: "round" })] }), _jsx("span", { className: css.noteNewPlus, children: "+" })] })] })] }), _jsxs("div", { className: css.headerActions, onPointerDown: (event) => { event.stopPropagation(); }, children: [_jsx("button", { type: "button", "aria-pressed": musicEnabled, className: `${css.settingsBtn}${musicEnabled ? ` ${css.settingsBtnActive}` : ''}`, title: `${t('musicLabel')}：${musicEnabled ? t('musicOn') : t('musicOff')}`, onClick: () => { setMusicEnabled(!musicEnabled); }, children: "\u266A" }), _jsx("button", { type: "button", className: css.settingsBtn, onClick: () => { actions.setLogOpen(true); }, children: t('logs') }), _jsx("button", { type: "button", className: css.settingsBtn, onClick: openSettings, children: t('settings') }), _jsx("button", { type: "button", className: css.collapse, onClick: () => { setCollapsed(true); }, children: t('collapse') })] })] }), _jsxs("div", { className: css.body, children: [loading && _jsx("div", { className: css.notice, children: t('loading') }), error !== null && _jsx("div", { className: css.noticeError, children: error }), fullNotice !== null && (_jsx("div", { className: css.fullNotice, role: "alert", children: fullNotice })), upgrade !== null && !upgradeDismissed && (_jsxs("div", { className: `${css.upgradeBanner}${upgradeFlash ? ` ${css.upgradeBannerFlash}` : ''}`, role: "alert", children: [_jsx("div", { className: css.upgradeBannerText, children: t('upgradeAvailable').replace('{version}', upgrade.latestVersion) }), _jsx("div", { className: css.upgradeCommands, children: upgrade.commands.map(cmd => (_jsxs("div", { className: css.upgradeCommandRow, children: [_jsx("code", { className: css.upgradeCommand, children: cmd }), _jsx("button", { type: "button", className: `${css.copyBtn}${copiedCmd === cmd ? ` ${css.copyBtnDone}` : ''}`, onClick: () => { copyUpgradeCommand(cmd); }, children: copiedCmd === cmd ? t('copied') : t('copy') })] }, cmd))) }), _jsx("div", { className: css.upgradeHint, children: t('upgradeHint') }), _jsx("button", { type: "button", className: css.upgradeClose, onClick: () => { actions.setUpgradeDismissed(true); }, "aria-label": t('close'), children: "\u00D7" })] })), !loading && error === null && visibleRows.length === 0 && (_jsx("div", { className: css.notice, children: monitored !== null && monitored.length === 0 ? t('noMonitored') : t('waiting') })), visibleRows.map((row) => {
+                                const state = barStateOf(row);
+                                const pct = row.limit > 0 ? Math.min(100, Math.round((row.used / row.limit) * 100)) : 0;
+                                const barClass = state === 'over'
+                                    ? css.fillOver
+                                    : state === 'warn'
+                                        ? css.fillWarn
+                                        : css.fillIdle;
+                                const editing = editingKey === row.key;
+                                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} ${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)
@@ -386,6 +571,21 @@ export function TokenQuotaPanel({ t, load, setLimit, selectModel, setMonitored,
                                                         : t('checkUpdatesNow') })] }), lastCheckResult === 'error' && upgradeError !== null && (_jsx("div", { className: css.checkErrorHint, role: "alert", children: upgradeError }))] }) }))] })), logOpen && (_jsxs("div", { ref: logRef, className: `${css.dialog} ${css.logDialog}`, style: logPos !== null ? { left: logPos.x, top: logPos.y, transform: 'none' } : undefined, children: [_jsxs("div", { className: css.logHeader, onPointerDown: (event) => { beginDrag(event, logRef.current, setLogPos); }, children: [_jsx("div", { className: css.dialogTitle, children: t('logsTitle') }), _jsxs("div", { className: css.logToolbar, onPointerDown: (event) => { event.stopPropagation(); }, children: [_jsx("input", { type: "search", className: css.logSearch, placeholder: t('logSearchPlaceholder'), value: logSearch, onChange: (event) => { actions.setLogSearch(event.target.value); } }), _jsx("button", { type: "button", className: css.logClearBtn, onClick: () => { actions.setLogClearOpen(true); }, children: t('logClear') })] }), _jsx("button", { type: "button", className: css.dialogClose, title: t('close'), onClick: () => { actions.setLogOpen(false); }, children: "\u00D7" })] }), log !== null && filteredLogEntries.length === 0 && (_jsx("div", { className: css.notice, children: logSearch.trim() !== '' ? t('logNoMatch') : t('logEmpty') })), _jsx("div", { className: css.logScroll, children: _jsxs("table", { className: css.logTable, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t('logDay') }), _jsx("th", { children: t('logModel') }), _jsx("th", { className: css.logUsedCol, children: t('logUsed') })] }) }), _jsx("tbody", { children: logPageEntries.map(entry => (_jsxs("tr", { children: [_jsx("td", { className: css.logDayCol, children: entry.day }), _jsx("td", { className: css.logModelCol, title: entry.key, children: entry.key }), _jsx("td", { className: css.logUsedCol, children: formatTokens(entry.used) })] }, `${entry.day}/${entry.key}`))) })] }) }), _jsxs("div", { className: css.logPager, children: [_jsx("span", { className: css.logPagerInfo, children: t('logPagerInfo')
                                     .replace('{from}', String(logCurrentPage * logPageSize + 1))
                                     .replace('{to}', String(Math.min((logCurrentPage + 1) * logPageSize, filteredLogEntries.length)))
-                                    .replace('{total}', String(filteredLogEntries.length)) }), _jsxs("div", { className: css.logPagerControls, children: [_jsx("button", { type: "button", className: css.logPagerBtn, disabled: logCurrentPage <= 0, onClick: () => { actions.setLogPage(logCurrentPage - 1); }, children: "\u2039" }), _jsxs("span", { className: css.logPagerPages, children: [logCurrentPage + 1, " / ", logTotalPages] }), _jsx("button", { type: "button", className: css.logPagerBtn, disabled: logCurrentPage >= logTotalPages - 1, onClick: () => { actions.setLogPage(logCurrentPage + 1); }, children: "\u203A" }), _jsx("select", { className: css.logPageSizeSelect, value: logPageSize, onChange: (event) => { actions.setLogPageSize(Number(event.target.value)); }, children: [10, 15, 20, 50, 100].map(size => (_jsxs("option", { value: size, children: [size, t('logPerPage')] }, size))) })] })] })] })), logClearOpen && (_jsx("div", { className: css.dialogOverlay, children: _jsxs("div", { className: `${css.dialog} ${css.logClearDialog}`, children: [_jsx("div", { className: css.dialogTitle, children: t('logClearTitle') }), _jsx("div", { className: css.dialogBody, children: t('logClearHint') }), _jsx("input", { type: "date", className: css.logClearDate, value: logClearBefore, onChange: (event) => { actions.setLogClearBefore(event.target.value); } }), _jsxs("div", { className: css.dialogActions, children: [_jsx("button", { type: "button", className: css.checkBtn, disabled: logClearBefore === '' || logClearing, onClick: () => { clearLogBefore(logClearBefore); }, children: logClearing ? t('logClearing') : t('logClearConfirm') }), _jsx("button", { type: "button", className: css.checkBtn, onClick: () => { actions.setLogClearOpen(false); }, children: t('logClearCancel') })] })] }) }))] }));
+                                    .replace('{total}', String(filteredLogEntries.length)) }), _jsxs("div", { className: css.logPagerControls, children: [_jsx("button", { type: "button", className: css.logPagerBtn, disabled: logCurrentPage <= 0, onClick: () => { actions.setLogPage(logCurrentPage - 1); }, children: "\u2039" }), _jsxs("span", { className: css.logPagerPages, children: [logCurrentPage + 1, " / ", logTotalPages] }), _jsx("button", { type: "button", className: css.logPagerBtn, disabled: logCurrentPage >= logTotalPages - 1, onClick: () => { actions.setLogPage(logCurrentPage + 1); }, children: "\u203A" }), _jsx("select", { className: css.logPageSizeSelect, value: logPageSize, onChange: (event) => { actions.setLogPageSize(Number(event.target.value)); }, children: [10, 15, 20, 50, 100].map(size => (_jsxs("option", { value: size, children: [size, t('logPerPage')] }, size))) })] })] })] })), logClearOpen && (_jsx("div", { className: css.dialogOverlay, children: _jsxs("div", { className: `${css.dialog} ${css.logClearDialog}`, children: [_jsx("div", { className: css.dialogTitle, children: t('logClearTitle') }), _jsx("div", { className: css.dialogBody, children: t('logClearHint') }), _jsx("input", { type: "date", className: css.logClearDate, value: logClearBefore, onChange: (event) => { actions.setLogClearBefore(event.target.value); } }), _jsxs("div", { className: css.dialogActions, children: [_jsx("button", { type: "button", className: css.checkBtn, disabled: logClearBefore === '' || logClearing, onClick: () => { clearLogBefore(logClearBefore); }, children: logClearing ? t('logClearing') : t('logClearConfirm') }), _jsx("button", { type: "button", className: css.checkBtn, onClick: () => { actions.setLogClearOpen(false); }, children: t('logClearCancel') })] })] }) })), notes.filter(note => note.visible).map((note) => (_jsxs("div", { className: `${css.noteWin}${note.collapsed ? ` ${css.noteWinCollapsed}` : ''}`, style: {
+                    left: `${note.x}px`,
+                    top: `${note.y}px`,
+                    width: `${note.width}px`,
+                    zIndex: activeNote === note.id ? 62 : 60,
+                    ...(note.collapsed ? {} : { height: `${note.height}px` }),
+                }, onPointerDown: () => { setActiveNote(note.id); }, children: [_jsxs("div", { className: css.noteWinBar, onPointerDown: (event) => { beginNoteBarDrag(event, note.id); }, onDoubleClick: () => { patchNote(note.id, { collapsed: false }); }, children: [_jsx("span", { className: css.noteWinGripBar, "aria-hidden": "true", children: "\u283F" }), editingTitle === note.id
+                                ? (_jsxs(_Fragment, { children: [_jsx("input", { className: css.noteWinTitle, value: titleDraft, autoFocus: true, placeholder: t('noteUntitled'), onChange: (event) => { setTitleDraft(event.target.value); }, onKeyDown: (event) => {
+                                                if (event.key === 'Enter')
+                                                    commitTitle(note.id);
+                                                if (event.key === 'Escape')
+                                                    setEditingTitle(null);
+                                            } }), _jsx("button", { type: "button", className: css.noteWinBtn, title: t('noteConfirmTitle'), onClick: () => { commitTitle(note.id); }, children: "\u2713" })] }))
+                                : (_jsxs(_Fragment, { children: [_jsx("span", { className: css.noteWinTitleText, title: note.title.trim() === '' ? t('noteUntitled') : note.title, children: note.title.trim() === '' ? t('noteUntitled') : note.title }), _jsx("button", { type: "button", className: css.noteWinBtn, title: t('noteEditTitle'), onClick: () => { setEditingTitle(note.id); setTitleDraft(note.title); }, children: "\u270E" })] })), _jsx("button", { type: "button", className: css.noteWinBtn, title: note.collapsed ? t('noteExpand') : t('noteCollapse'), onClick: () => { patchNote(note.id, { collapsed: !note.collapsed }); }, children: note.collapsed ? '▸' : '▾' }), _jsx("button", { type: "button", className: css.noteWinBtn, title: t('noteClose'), onClick: () => { closeNote(note.id); }, children: "\u00D7" })] }), !note.collapsed && (_jsxs(_Fragment, { children: [_jsx("textarea", { className: css.noteWinText, value: note.text, placeholder: t('notePlaceholder'), spellCheck: false, onChange: (event) => { patchNote(note.id, { text: event.target.value }, false); } }), _jsx("span", { className: css.noteWinResize, title: t('noteResizeHint'), onPointerDown: (event) => {
+                                    beginResize(event, event.currentTarget.parentElement, size => { patchNote(note.id, size, false); });
+                                } })] }))] }, note.id))), noteMenu !== null && (_jsxs(_Fragment, { children: [_jsx("div", { className: css.noteMenuBackdrop, onPointerDown: () => { setNoteMenu(null); }, onContextMenu: (event) => { event.preventDefault(); setNoteMenu(null); } }), _jsxs("div", { className: css.noteMenu, style: { left: `${noteMenu.x}px`, top: `${noteMenu.y}px` }, children: [_jsx("button", { type: "button", className: css.noteMenuItem, onClick: () => { closeNote(noteMenu.id); setNoteMenu(null); }, children: t('noteClose') }), _jsx("button", { type: "button", className: css.noteMenuItem, onClick: () => { removeNote(noteMenu.id); }, children: t('noteDelete') })] })] }))] }));
 }
 //# sourceMappingURL=TokenQuotaPanel.js.map

package/lib/types/client/index.js

@@ -1,3 +1,4 @@
+import { TOKEN_QUOTA_MAX_NOTES } from '@jxgame2020/dsh-token-quota/types';
 import { createTokenQuotaPanelStore } from "./store.js";
 import { TokenQuotaPanel } from "./TokenQuotaPanel.js";
 import { TokenQuotaMusic } from "./music.js";
@@ -89,6 +90,30 @@ export function apply(ctx) {
         window.removeEventListener('pointerdown', autoStartMusic);
         window.removeEventListener('keydown', autoStartMusic);
     }, 'token-quota-ui: music autostart gestures');
+    /**
+     * Coerce the persisted note array into complete notes: older documents may
+     * lack fields added later, and a hand-edited file may hold junk. The cap is
+     * enforced here too so a tampered document cannot grow past it.
+     */
+    const normalizeNotes = (raw) => {
+        if (!Array.isArray(raw))
+            return [];
+        return raw.slice(0, TOKEN_QUOTA_MAX_NOTES).flatMap((note) => {
+            if (typeof note !== 'object' || note === null || typeof note.id !== 'string')
+                return [];
+            return [{
+                    id: note.id,
+                    title: typeof note.title === 'string' ? note.title : '',
+                    text: typeof note.text === 'string' ? note.text : '',
+                    x: typeof note.x === 'number' ? note.x : 80,
+                    y: typeof note.y === 'number' ? note.y : 80,
+                    width: typeof note.width === 'number' ? note.width : 220,
+                    height: typeof note.height === 'number' ? note.height : 220,
+                    collapsed: note.collapsed === true,
+                    visible: note.visible !== false,
+                }];
+        });
+    };
     /** Build a writable music-settings clone with defaults applied. */
     const musicDefaults = (raw) => ({
         enabled: raw?.enabled ?? false,
@@ -251,6 +276,7 @@ export function apply(ctx) {
         bound?.setCheckUpdates(doc?.checkUpdates ?? true);
         bound?.setDimWhenIdle(doc?.dimWhenIdle ?? false);
         bound?.setOrder(Array.isArray(doc?.order) ? doc.order : []);
+        bound?.setNotes(normalizeNotes(doc?.notes));
         bound?.setReset(lastReset);
         const musicSettings = musicDefaults(doc?.music);
         lastOnlyCurrentSession = musicSettings.onlyCurrentSession;
@@ -338,6 +364,10 @@ export function apply(ctx) {
         bound?.setOrder(order);
         void scope.set('order', order);
     };
+    /** Persist the floating scratchpad notes (content, title, placement). */
+    const saveNotes = (notes) => {
+        void scope.set('notes', notes.slice(0, TOKEN_QUOTA_MAX_NOTES));
+    };
     const setMusicEnabled = (enabled) => {
         const doc = scope.getSnapshot().value;
         const current = musicDefaults(doc?.music);
@@ -455,7 +485,7 @@ export function apply(ctx) {
             load, setLimit, selectModel, setMonitored, setOnFull, setReset,
             setCheckUpdates, checkUpdatesNow, clearLogBefore, setDimWhenIdle,
             setMusicEnabled, setMusicVolume, setMusicStyle, setMusicOnlyCurrentSession,
-            setModelOrder,
+            setModelOrder, saveNotes,
         };
     };
     ctx.slots.inject('shell.overlay', () => ctx.slots.register({

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

@@ -29,6 +29,17 @@ export declare const zh: {
     settingsTabMusic: string;
     settingsTabOther: string;
     reorderHint: string;
+    noteNewHint: string;
+    noteMaxHint: string;
+    noteUntitled: string;
+    noteEditTitle: string;
+    noteConfirmTitle: string;
+    noteCollapse: string;
+    noteExpand: string;
+    noteClose: string;
+    noteDelete: string;
+    noteResizeHint: string;
+    notePlaceholder: string;
     monitorLabel: string;
     monitorHint: string;
     monitorAll: string;
@@ -113,6 +124,17 @@ export declare const en: {
     settingsTabMusic: string;
     settingsTabOther: string;
     reorderHint: string;
+    noteNewHint: string;
+    noteMaxHint: string;
+    noteUntitled: string;
+    noteEditTitle: string;
+    noteConfirmTitle: string;
+    noteCollapse: string;
+    noteExpand: string;
+    noteClose: string;
+    noteDelete: string;
+    noteResizeHint: string;
+    notePlaceholder: string;
     monitorLabel: string;
     monitorHint: string;
     monitorAll: string;

package/lib/types/client/locales.js

@@ -29,6 +29,17 @@ export const zh = {
     settingsTabMusic: '音乐设置',
     settingsTabOther: '其它',
     reorderHint: '拖动排序',
+    noteNewHint: '新建笔记（最多 5 个）',
+    noteMaxHint: '最多 5 个笔记',
+    noteUntitled: '未命名',
+    noteEditTitle: '编辑标题',
+    noteConfirmTitle: '完成编辑',
+    noteCollapse: '收起',
+    noteExpand: '展开',
+    noteClose: '关闭',
+    noteDelete: '删除',
+    noteResizeHint: '拖动改变大小',
+    notePlaceholder: '在这里记录…',
     monitorLabel: '监控模型',
     monitorHint: '未勾选的模型不显示、不计入用量、不受限额限制',
     monitorAll: '全部',
@@ -111,6 +122,17 @@ export const en = {
     settingsTabMusic: 'Music',
     settingsTabOther: 'Other',
     reorderHint: 'Drag to reorder',
+    noteNewHint: 'New note (max 5)',
+    noteMaxHint: 'At most 5 notes',
+    noteUntitled: 'Untitled',
+    noteEditTitle: 'Edit title',
+    noteConfirmTitle: 'Done',
+    noteCollapse: 'Collapse',
+    noteExpand: 'Expand',
+    noteClose: 'Close',
+    noteDelete: 'Delete',
+    noteResizeHint: 'Drag to resize',
+    notePlaceholder: 'Write here…',
     monitorLabel: 'Monitored models',
     monitorHint: 'Unchecked models are hidden, not metered, and never capped',
     monitorAll: 'All',

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

@@ -9,7 +9,7 @@
  */
 import { type EngineStoreHandle } from '@deepseek-ai/dsh-client-store';
 import type { ModelProviderGroup, ModelSelection } from '@deepseek-ai/dsh-api-session-controller/types';
-import type { TokenQuotaFullAction, TokenQuotaLog, TokenQuotaMusicStyle, TokenQuotaReset, TokenQuotaSnapshot, TokenQuotaUpgrade } from '@jxgame2020/dsh-token-quota/types';
+import type { TokenQuotaFullAction, TokenQuotaLog, TokenQuotaMusicStyle, TokenQuotaNote, TokenQuotaReset, TokenQuotaSnapshot, TokenQuotaUpgrade } from '@jxgame2020/dsh-token-quota/types';
 /** One rendered model row: directory identity merged with the quota snapshot. */
 export interface ModelQuotaRow {
     /** Stable key `provider/model`. */
@@ -55,6 +55,14 @@ export interface TokenQuotaPanelState {
      * Keys not listed keep their catalog order after the listed ones.
      */
     order: string[];
+    /** Floating scratchpad notes as persisted by the Host. */
+    notes: TokenQuotaNote[];
+    /**
+     * Whether the notes above have been read from the Host at least once. The
+     * panel seeds its local editing copy exactly once, on this flip, so a
+     * background poll can never clobber what the user is typing.
+     */
+    notesLoaded: boolean;
     /** Live music settings (mirrored from the settings document). */
     musicEnabled: boolean;
     musicVolume: number;
@@ -104,6 +112,8 @@ export type TokenQuotaPanelActions = {
     setDimWhenIdle: (d: TokenQuotaPanelState, dimWhenIdle: boolean) => void;
     /** Replace the drag-to-reorder model display order. */
     setOrder: (d: TokenQuotaPanelState, order: string[]) => void;
+    /** Adopt the Host's persisted notes and mark them as loaded. */
+    setNotes: (d: TokenQuotaPanelState, notes: TokenQuotaNote[]) => void;
     setMusicEnabled: (d: TokenQuotaPanelState, enabled: boolean) => void;
     setMusicVolume: (d: TokenQuotaPanelState, volume: number) => void;
     setMusicStyle: (d: TokenQuotaPanelState, style: TokenQuotaMusicStyle) => void;

package/lib/types/client/store.js

@@ -29,6 +29,8 @@ export function createTokenQuotaPanelStore() {
             checkUpdates: true,
             dimWhenIdle: false,
             order: [],
+            notes: [],
+            notesLoaded: false,
             musicEnabled: false,
             musicVolume: 0.5,
             musicStyle: 'pentatonic',
@@ -59,6 +61,7 @@ export function createTokenQuotaPanelStore() {
             setCheckUpdates: (d, checkUpdates) => { d.checkUpdates = checkUpdates; },
             setDimWhenIdle: (d, dimWhenIdle) => { d.dimWhenIdle = dimWhenIdle; },
             setOrder: (d, order) => { d.order = order; },
+            setNotes: (d, notes) => { d.notes = notes; d.notesLoaded = true; },
             setMusicEnabled: (d, enabled) => { d.musicEnabled = enabled; },
             setMusicVolume: (d, volume) => { d.musicVolume = volume; },
             setMusicStyle: (d, style) => { d.musicStyle = style; },