@qzsy/dsh-command-palette 1.4.0 → 1.5.0

package/README.md

@@ -77,6 +77,16 @@ initials, or any mixed form.
   movement inside the query. IME composition is never intercepted, so pinyin
   candidate selection keeps working. Focus returns to whatever had it before
   opening.
+- **Mobile**: at `(max-width: 720px), (pointer: coarse) and (max-width: 1024px)`
+  the palette becomes a bottom sheet at 90% of the layer height. It opens
+  without focusing the search input, so the soft keyboard stays closed until
+  the user taps the field. All keyboard hints (Esc key, row shortcuts, footer
+  key legend) are hidden; the footer only remains for the subagent toggle.
+- **Unread count**: the sidebar row shows the number of Sessions that finished
+  successfully but have not been viewed (the green 已完成 badge; failed,
+  archived, blank and subagent Sessions are excluded). The collapsed rail shows
+  a dot instead. The always-mounted overlay computes the count and mirrors it
+  into a plugin-local store read by the sidebar glyph.
 - **Sidebar entry**: the *命令面板 / Command palette* row joins the global panel
   stack directly below 自动化任务 / Automations (glyph-only in the collapsed
   rail). Choosing it opens the overlay without switching the main panel: the row

package/dist/client.js

@@ -89,6 +89,7 @@ window.__ModuleLoader__.load({
 			'footer.filter': '切换分类',
 			'footer.close': '关闭',
 			'trigger.label': '命令面板',
+			'trigger.unread': '{n} 个会话已完成，尚未查看',
 			'trigger.title': '打开命令面板',
 			'time.now': '刚刚',
 			'time.short.m': '{n}m',
@@ -155,6 +156,7 @@ window.__ModuleLoader__.load({
 			'footer.filter': 'Change filter',
 			'footer.close': 'Close',
 			'trigger.label': 'Command palette',
+			'trigger.unread': '{n} sessions finished, not yet viewed',
 			'trigger.title': 'Open command palette',
 			'time.now': 'now',
 			'time.short.m': '{n}m',
@@ -764,7 +766,7 @@ window.__ModuleLoader__.load({
 		const CSS = [
 			'.dshcp-layer{position:fixed;inset:0;z-index:1200;display:flex;justify-content:center;align-items:flex-start;padding:min(12vh,120px) 20px 20px;pointer-events:none}',
 			'.dshcp-backdrop{position:absolute;inset:0;background:var(--dsw-alias-bg-mask-1);backdrop-filter:var(--dsw-mask-blur);pointer-events:auto;animation:dshcp-fade .12s var(--ds-ease-out,ease-out)}',
-			'.dshcp-panel{position:relative;pointer-events:auto;box-sizing:border-box;display:flex;flex-direction:column;width:min(680px,100%);max-height:min(600px,74vh);overflow:hidden;border:0.5px solid var(--dsw-alias-border-l1);border-radius:16px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);box-shadow:var(--dsw-elevation-prominent);font-family:var(--dsw-font-family,inherit);animation:dshcp-pop .14s var(--ds-ease-out,ease-out)}',
+			'.dshcp-panel{position:relative;pointer-events:auto;box-sizing:border-box;display:flex;flex-direction:column;width:min(680px,100%);max-height:min(600px,74vh,100%);overflow:hidden;border:0.5px solid var(--dsw-alias-border-l1);border-radius:16px;background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);box-shadow:var(--dsw-elevation-prominent);font-family:var(--dsw-font-family,inherit);animation:dshcp-pop .14s var(--ds-ease-out,ease-out)}',
 			'.dshcp-panel:focus{outline:none}',
 			'@keyframes dshcp-fade{from{opacity:0}to{opacity:1}}',
 			'@keyframes dshcp-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}',
@@ -818,7 +820,16 @@ window.__ModuleLoader__.load({
 			'.dshcp-projectBadge{display:inline-flex;align-items:center;max-width:100%;height:19px;padding:0 7px;border-radius:999px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);font-size:11px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
 			'[data-dshcp-reveal]{animation:dshcp-reveal 1.2s var(--ds-ease-out,ease-out)}',
 			'@keyframes dshcp-reveal{0%{box-shadow:inset 0 0 0 2px var(--dsw-alias-state-business-primary)}100%{box-shadow:inset 0 0 0 2px transparent}}',
-			'@media (prefers-reduced-motion:reduce){.dshcp-backdrop,.dshcp-panel{animation:none}.dshcp-badge[data-tone=running] .dshcp-badgeDot{animation:none}[data-dshcp-reveal]{animation:none;box-shadow:inset 0 0 0 2px var(--dsw-alias-state-business-primary)}}'
+			'.dshcp-layer[data-mobile=true]{align-items:flex-end;padding:0}',
+			'.dshcp-layer[data-mobile=true] .dshcp-panel{width:100%;height:90%;max-height:90%;border-bottom:none;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:dshcp-sheet .2s var(--ds-ease-out,ease-out)}',
+			'@keyframes dshcp-sheet{from{transform:translateY(100%)}to{transform:none}}',
+			'.dshcp-layer[data-mobile=true] .dshcp-input{font-size:16px}',
+			'.dshcp-layer[data-mobile=true] .dshcp-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}',
+			'.dshcp-layer[data-mobile=true] .dshcp-tab{flex:none}',
+			'.dshcp-glyph{position:relative;display:inline-flex}',
+			'.dshcp-glyphDot{position:absolute;top:-2px;right:-3px;width:7px;height:7px;border-radius:50%;background:var(--dsw-alias-state-success-primary)}',
+			'.dshcp-unreadCount{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:20px;height:18px;padding:0 6px;border-radius:999px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-state-success-primary);font-size:11px;line-height:16px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}',
+			'@media (prefers-reduced-motion:reduce){.dshcp-backdrop,.dshcp-panel,.dshcp-layer[data-mobile=true] .dshcp-panel{animation:none}.dshcp-badge[data-tone=running] .dshcp-badgeDot{animation:none}[data-dshcp-reveal]{animation:none;box-shadow:inset 0 0 0 2px var(--dsw-alias-state-business-primary)}}'
 		].join('');
 		const STYLE_ATTR = 'data-dsh-command-palette';
 		function installStyles() {
@@ -840,8 +851,63 @@ window.__ModuleLoader__.load({
 		 * Glyph rendered inside the sidebar's global panel row. The shell owns the
 		 * row, label, tooltip and rail sizing; this component only supplies artwork.
 		 */
-		function PalettePanelGlyph({ size }) {
-			return h(IconSearch, { size });
+		function PalettePanelGlyph({ size, t }) {
+			const count = useUnreadCount();
+			const wide = size !== 18;
+			const label = count > 0 ? t('trigger.unread', { n: count }) : undefined;
+			return h(React.Fragment, null,
+				h('span', { className: 'dshcp-glyph', title: label },
+					h(IconSearch, { size }),
+					!wide && count > 0 ? h('span', { className: 'dshcp-glyphDot', 'aria-hidden': 'true' }) : null),
+				wide && count > 0 ? h('span', { className: 'dshcp-unreadCount', 'aria-label': label }, count > 99 ? '99+' : String(count)) : null);
+		}
+
+		/**
+		 * Unread completions shown on the sidebar row. The panel-list slot is not
+		 * documented to receive the session status hook, so the always-mounted
+		 * overlay computes the count and mirrors it into this plugin-local store.
+		 */
+		const unreadStore = createStore({ count: 0 });
+		function useUnreadCount() {
+			const read = () => unreadStore.getSnapshot().count;
+			if (typeof React.useSyncExternalStore === 'function') return React.useSyncExternalStore(unreadStore.subscribe, read, read);
+			const [count, setCount] = useState(read);
+			useEffect(() => unreadStore.subscribe(() => setCount(read())), []);
+			return count;
+		}
+
+		/**
+		 * Sessions that finished successfully and the user has not opened yet: the
+		 * same rows that carry the green 已完成 badge in the default palette view
+		 * (archived, blank and subagent Sessions excluded; failures count as 出错).
+		 */
+		function countUnreadCompletions(sessions, workspaces, statuses, failures) {
+			const archived = new Set(workspaces?.archivedSessionIds ?? []);
+			let count = 0;
+			for (const row of Object.values(sessions?.byId ?? {})) {
+				if (row === undefined || row === null || row.blank === true || archived.has(row.id) || row.origin === 'subagent') continue;
+				const state = sessionState(row, statuses?.get?.(row.id), failures?.get?.(row.id));
+				if (state !== null && state.tone === 'done') count += 1;
+			}
+			return count;
+		}
+
+		/** Breakpoint shared with the quick-commands plugin. */
+		const MOBILE_QUERY = '(max-width: 720px), (pointer: coarse) and (max-width: 1024px)';
+		function isMobileLayout() {
+			return typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(MOBILE_QUERY).matches;
+		}
+		function useMobileLayout() {
+			const [mobile, setMobile] = useState(isMobileLayout);
+			useEffect(() => {
+				if (typeof window.matchMedia !== 'function') return undefined;
+				const query = window.matchMedia(MOBILE_QUERY);
+				const update = () => setMobile(query.matches);
+				update();
+				query.addEventListener?.('change', update);
+				return () => query.removeEventListener?.('change', update);
+			}, []);
+			return mobile;
 		}
 		//#endregion
 
@@ -1046,8 +1112,22 @@ window.__ModuleLoader__.load({
 		function Palette(props) {
 			const { usePalette } = props;
 			const open = usePalette((state) => state.open);
-			if (!open) return null;
-			return h(PaletteDialog, props);
+			return h(React.Fragment, null,
+				h(UnreadMirror, props),
+				open ? h(PaletteDialog, props) : null);
+		}
+
+		function UnreadMirror({ useSessions, useWorkspaces, useSessionStatus, useSessionFailures }) {
+			const sessions = useSessions((value) => value);
+			const workspaces = useWorkspaces((value) => value);
+			const statuses = useSessionStatus((value) => value);
+			const failures = useSessionFailures((value) => value) ?? EMPTY_FAILURES;
+			const count = useMemo(() => countUnreadCompletions(sessions, workspaces, statuses, failures), [sessions, workspaces, statuses, failures]);
+			useEffect(() => {
+				if (unreadStore.getSnapshot().count !== count) unreadStore.set({ count });
+			}, [count]);
+			useEffect(() => () => unreadStore.set({ count: 0 }), []);
+			return null;
 		}
 
 		function PaletteDialog({ usePalette, useShortcutCatalog, useSessions, useWorkspaces, useSessionStatus, useSessionFailures, actions, t }) {
@@ -1060,6 +1140,7 @@ window.__ModuleLoader__.load({
 			const [includeSubagents, setIncludeSubagents] = useState(false);
 			const [gitEntries, setGitEntries] = useState(() => gitStatusCache.entries);
 			const inputRef = useRef(null);
+			const mobile = useMobileLayout();
 			const panelRef = useRef(null);
 			const activeRowRef = useRef(null);
 			const sessions = useSessions((value) => value);
@@ -1118,7 +1199,9 @@ window.__ModuleLoader__.load({
 
 			useEffect(() => {
 				const frame = window.requestAnimationFrame(() => {
-					inputRef.current?.focus();
+					// Phones open without the soft keyboard: focus the sheet, not the input.
+					const target = isMobileLayout() ? panelRef.current : inputRef.current;
+					target?.focus({ preventScroll: true });
 				});
 				return () => window.cancelAnimationFrame(frame);
 			}, []);
@@ -1322,7 +1405,7 @@ window.__ModuleLoader__.load({
 						item.badge !== null && item.badge !== undefined
 							? h('span', { className: 'dshcp-badge', 'data-tone': item.badge.tone, title: item.badge.title }, h('span', { className: 'dshcp-badgeDot' }), item.badge.label)
 							: null,
-						item.keys !== undefined && item.keys.length > 0
+						!mobile && item.keys !== undefined && item.keys.length > 0
 							? h('span', { className: 'dshcp-keys' }, item.keys.map((key, keyIndex) => h('kbd', { key: keyIndex, className: 'dshcp-key' }, key)))
 							: item.meta !== undefined && item.meta !== '' ? h('span', { className: 'dshcp-meta' }, item.meta) : null));
 				}
@@ -1334,11 +1417,28 @@ window.__ModuleLoader__.load({
 				rows.push(h('div', { key: 'files-error', className: 'dshcp-status' }, t('files.error')));
 			}
 
+			const subagentToggle = subagentCount > 0 && (filter === 'all' || filter === 'sessions')
+				? h('button', {
+					className: 'dshcp-toggle',
+					type: 'button',
+					title: includeSubagents ? t('subagents.hide', { n: subagentCount }) : t('subagents.show', { n: subagentCount }),
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => setIncludeSubagents((value) => !value)
+				}, includeSubagents ? t('subagents.hide', { n: subagentCount }) : t('subagents.show', { n: subagentCount }))
+				: null;
+			// Touch layouts have no keyboard to hint at.
+			const footerHints = mobile ? null : [
+				h('span', { key: 'select', className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '↑'), h('kbd', { className: 'dshcp-hintKey' }, '↓'), t('footer.select')),
+				h('span', { key: 'open', className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '↵'), t('footer.open')),
+				h('span', { key: 'filter', className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '←'), h('kbd', { className: 'dshcp-hintKey' }, '→'), t('footer.filter')),
+				h('span', { key: 'close', className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, 'Esc'), t('footer.close'))
+			];
+			const showToggle = subagentCount > 0 && (filter === 'all' || filter === 'sessions');
 			const placeholder = filter === 'files'
 				? currentSessionId === undefined ? t('empty.files.noSession') : t('placeholder.files', { name: currentProject ?? t('item.noWorkspace') })
 				: t('placeholder');
 			return h(React.Fragment, null,
-				h('div', { className: 'dshcp-layer' },
+				h('div', { className: 'dshcp-layer', 'data-mobile': mobile },
 					h('div', { className: 'dshcp-backdrop', onMouseDown: close }),
 					h('div', {
 						className: 'dshcp-panel',
@@ -1367,7 +1467,7 @@ window.__ModuleLoader__.load({
 								spellCheck: false,
 								onChange: (event) => setQuery(event.target.value)
 							}),
-							h('span', { className: 'dshcp-escKey' }, 'Esc')),
+							mobile ? null : h('span', { className: 'dshcp-escKey' }, 'Esc')),
 						h('div', { className: 'dshcp-tabs', role: 'tablist' },
 							filterButton('all', t('tab.all')),
 							filterButton('sessions', t('tab.sessions')),
@@ -1375,12 +1475,12 @@ window.__ModuleLoader__.load({
 							filterButton('files', t('tab.files')),
 							filterButton('actions', t('tab.actions'))),
 						h('div', { className: 'dshcp-list', id: 'dshcp-listbox', role: 'listbox', 'aria-label': t('command.open') }, rows),
-						h('div', { className: 'dshcp-footer' },
-							h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '↑'), h('kbd', { className: 'dshcp-hintKey' }, '↓'), t('footer.select')),
-							h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '↵'), t('footer.open')),
-							h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '←'), h('kbd', { className: 'dshcp-hintKey' }, '→'), t('footer.filter')),
-							h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, 'Esc'), t('footer.close')),
-							subagentCount > 0 && (filter === 'all' || filter === 'sessions')
+						mobile && !showToggle ? null : h('div', { className: 'dshcp-footer' },
+							mobile ? null : h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '↑'), h('kbd', { className: 'dshcp-hintKey' }, '↓'), t('footer.select')),
+							mobile ? null : h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '↵'), t('footer.open')),
+							mobile ? null : h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, '←'), h('kbd', { className: 'dshcp-hintKey' }, '→'), t('footer.filter')),
+							mobile ? null : h('span', { className: 'dshcp-hint' }, h('kbd', { className: 'dshcp-hintKey' }, 'Esc'), t('footer.close')),
+							showToggle
 								? h('button', {
 									className: 'dshcp-toggle',
 									type: 'button',
@@ -1637,7 +1737,7 @@ window.__ModuleLoader__.load({
 				order: 20,
 				label: () => t('trigger.label'),
 				locale: NS
-			}, PalettePanelGlyph));
+			}, (props) => h(PalettePanelGlyph, { ...props, t })));
 			interceptSidebarSelection(ctx, actions);
 			adoptShortcut(ctx);
 		}
@@ -1656,7 +1756,8 @@ window.__ModuleLoader__.load({
 			sessionBadge,
 			summarizeSessionRows,
 			sessionItems,
-			workspaceItems
+			workspaceItems,
+			countUnreadCompletions
 		};
 
 		return { inject, apply, __test };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qzsy/dsh-command-palette",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Command+K palette for recent sessions, workspaces, files, and actions with pinyin search and live session status.",
   "type": "module",
   "license": "MIT",

package/scripts/verify-status.mjs

@@ -245,6 +245,7 @@ function runChecks({ plugin, registration, source }) {
 
   check('surface: __test exposes the documented helpers', () => {
     const expected = [
+      'countUnreadCompletions',
       'createFailureStore',
       'installFailureFeed',
       'normalizeFailureMessage',
@@ -756,6 +757,18 @@ function runChecks({ plugin, registration, source }) {
     equal(row.badge, { tone: 'running', label: '工作中' }, 'badge');
     equal(row.status, { running: true }, 'status payload');
   });
+
+  check('unread: counts unread successes only, skipping failed, archived, blank and subagent rows', () => {
+    const sessions = { byId: {
+      a: { id: 'a' }, b: { id: 'b' }, c: { id: 'c' }, d: { id: 'd', blank: true },
+      e: { id: 'e', origin: 'subagent' }, f: { id: 'f' }, g: { id: 'g' }
+    } };
+    const unread = { completionUnread: true };
+    const statuses = new Map([['a', unread], ['b', unread], ['c', unread], ['d', unread], ['e', unread], ['f', { completionUnread: true, running: true }], ['g', {}]]);
+    const failures = new Map([['b', { message: 'x', at: NOW }]]);
+    equal(api.countUnreadCompletions(sessions, { archivedSessionIds: ['c'] }, statuses, failures), 1, 'unread count');
+    equal(api.countUnreadCompletions(undefined, undefined, undefined, undefined), 0, 'empty snapshot');
+  });
 }
 
 // ---------------------------------------------------------------------------