@leaves615/dsh-llm-ctl 0.1.0

package/lib/menu-filter.js

@@ -0,0 +1,428 @@
+/**
+ * DOM filtering for the model-selection popup (PRD FR3.2 / FR3.3).
+ *
+ * The module owns no state and no event listeners of its own: callers hand it
+ * the popup roots (or a container to search) and it reports what it hid. The
+ * selectors are deliberately fuzzy — the popup's hashed class prefixes change
+ * on every harness build, so only `[class*=...]` matching and the stable
+ * ARIA/role contract may be relied upon.
+ *
+ * @module dsh-llm-ctl/menu-filter
+ */
+/** Stable id of the injected empty-state element. */
+const EMPTY_STATE_ID = 'dsh-llm-ctl-empty';
+/** `Node.DOCUMENT_POSITION_FOLLOWING`, inlined to avoid depending on a DOM global. */
+const DOCUMENT_POSITION_FOLLOWING = 4;
+/** True when an aria-label names the model-selection menu. */
+function isModelMenuLabel(label) {
+    const value = label.toLowerCase();
+    return value.includes('model') || label.includes('推理等级') || value.includes('effort');
+}
+/** True when the node exposes `Element.matches` (avoids `instanceof` on globals). */
+function isElement(node) {
+    return typeof node === 'object' && node !== null && typeof node.matches === 'function';
+}
+/** The groups container of `roots`, or undefined when the roots are malformed. */
+function groupsOf(roots) {
+    const groups = roots?.groups;
+    return groups ?? undefined;
+}
+/** The menu element of `roots`, or undefined when the roots are malformed. */
+function menuOf(roots) {
+    const menu = roots?.menu;
+    return menu ?? undefined;
+}
+/** The first reachable document among the candidates. */
+function documentOf(...candidates) {
+    for (const candidate of candidates) {
+        const owner = candidate?.ownerDocument;
+        if (owner !== undefined && owner !== null)
+            return owner;
+    }
+    return typeof document === 'undefined' ? undefined : document;
+}
+/** The raw class attribute of an element, never its `className` object form. */
+function classAttributeOf(element) {
+    return element.getAttribute('class') ?? '';
+}
+/**
+ * Resolve the container that holds the `section[role="group"]` children.
+ *
+ * The popup wraps the groups in a plain div (no `role`), optionally preceded by
+ * presentation wrappers such as a search-box row.
+ */
+function findGroupsContainer(menu) {
+    for (const candidate of menu.querySelectorAll('div')) {
+        if (candidate.getAttribute('role') !== null)
+            continue;
+        if (candidate.querySelector('[role="group"]') !== null)
+            return candidate;
+    }
+    for (const child of Array.from(menu.children)) {
+        if (child.querySelector('[role="group"]') !== null)
+            return child;
+    }
+    return menu;
+}
+/**
+ * Find the model-selection popup inside a container.
+ *
+ * Matches `div[role="menu"]` whose aria-label mentions the model menu in either
+ * locale ("模型与推理等级", "Model and reasoning effort", or any label containing
+ * `model`/`推理等级`/`effort`). When no labelled candidate exists, an unlabelled
+ * menu that already contains `[role="group"]` is accepted. The first match wins.
+ *
+ * @param root Document, fragment, or element to search within.
+ * @returns The popup roots, or undefined when no model menu is present.
+ */
+export function findModelMenu(root) {
+    try {
+        if (root === undefined || root === null)
+            return undefined;
+        let menu;
+        if (isElement(root) && root.matches('div[role="menu"]') && isModelMenuLabel(root.getAttribute('aria-label') ?? '')) {
+            menu = root;
+        }
+        const candidates = root.querySelectorAll('div[role="menu"]');
+        if (menu === undefined) {
+            for (const candidate of candidates) {
+                if (isModelMenuLabel(candidate.getAttribute('aria-label') ?? '')) {
+                    menu = candidate;
+                    break;
+                }
+            }
+        }
+        if (menu === undefined) {
+            for (const candidate of candidates) {
+                if ((candidate.getAttribute('aria-label') ?? '').trim() !== '')
+                    continue;
+                if (candidate.querySelector('[role="group"]') === null)
+                    continue;
+                menu = candidate;
+                break;
+            }
+        }
+        if (menu === undefined)
+            return undefined;
+        return { menu, groups: findGroupsContainer(menu) };
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Read the provider title of one group: its labelled div, then aria-labelledby. */
+function readGroupTitle(group) {
+    try {
+        const titled = group.querySelector('div[id]');
+        const fromTitle = titled?.textContent?.trim() ?? '';
+        if (fromTitle !== '')
+            return fromTitle;
+        const labelledBy = (group.getAttribute('aria-labelledby') ?? '').trim();
+        if (labelledBy !== '') {
+            const owner = group.ownerDocument;
+            for (const id of labelledBy.split(/\s+/)) {
+                const target = owner?.getElementById(id);
+                const text = target?.textContent?.trim() ?? '';
+                if (text !== '')
+                    return text;
+            }
+        }
+        return (group.getAttribute('aria-label') ?? '').trim();
+    }
+    catch {
+        return '';
+    }
+}
+/** Read the model display name: title attribute, then `[class*="modelName"]`, then all text. */
+function readRowName(row) {
+    try {
+        const title = (row.getAttribute('title') ?? '').trim();
+        if (title !== '')
+            return title;
+        const named = row.querySelector('[class*="modelName"]');
+        const fromClass = named?.textContent?.trim() ?? '';
+        if (fromClass !== '')
+            return fromClass;
+        return (row.textContent ?? '').trim();
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * List every model row of the popup in DOM order, including rows currently hidden.
+ *
+ * @param roots Popup roots from {@link findModelMenu}.
+ * @returns One entry per `[role="menuitemradio"]` inside a `section[role="group"]`.
+ */
+export function listModelRows(roots) {
+    const rows = [];
+    const groups = groupsOf(roots);
+    if (groups === undefined)
+        return rows;
+    try {
+        for (const group of groups.querySelectorAll('section[role="group"]')) {
+            const providerName = readGroupTitle(group);
+            for (const row of group.querySelectorAll('[role="menuitemradio"]')) {
+                rows.push({ row, providerName, modelName: readRowName(row) });
+            }
+        }
+    }
+    catch {
+        // Malformed DOM: keep whatever was collected so far.
+    }
+    return rows;
+}
+/**
+ * Split one query line into provider-scoped and plain terms.
+ *
+ * @param raw Raw query text as typed by the user.
+ * @returns Lowercased provider terms and model terms.
+ */
+export function parseMenuQuery(raw) {
+    const providerTerms = [];
+    const modelTerms = [];
+    for (const token of raw.trim().toLowerCase().split(/\s+/).filter((part) => part.length > 0)) {
+        const providerTerm = token.startsWith('p:') ? token.slice(2) : token.startsWith('provider:') ? token.slice(9) : undefined;
+        if (providerTerm !== undefined) {
+            if (providerTerm.length > 0)
+                providerTerms.push(providerTerm);
+        }
+        else {
+            modelTerms.push(token);
+        }
+    }
+    return { providerTerms, modelTerms };
+}
+/** True when the row matches the (already lowercased, trimmed) query. */
+function matchesQuery(row, query) {
+    const { providerTerms, modelTerms } = parseMenuQuery(query);
+    const provider = row.providerName.toLowerCase();
+    const model = row.modelName.toLowerCase();
+    return providerTerms.every((term) => provider.includes(term)) && modelTerms.every((term) => model.includes(term) || provider.includes(term));
+}
+/**
+ * Apply the query and visibility predicate to every row and collapse empty groups.
+ *
+ * A row is shown only when it passes `isRowVisible` (when supplied) and matches
+ * `query` (when `hideUnmatched` is true). Query tokens match the model or provider
+ * name; a `p:` or `provider:` prefix restricts that token to the provider name.
+ * A group whose rows are all hidden is itself hidden; groups without rows are
+ * left untouched.
+ *
+ * @param roots Popup roots from {@link findModelMenu}.
+ * @param options Filter inputs; omit for "show everything".
+ * @returns Counts of shown rows, hidden rows, and hidden groups.
+ */
+export function applyMenuFilter(roots, options = {}) {
+    const result = { shown: 0, hidden: 0, groupsHidden: 0 };
+    const groups = groupsOf(roots);
+    if (groups === undefined)
+        return result;
+    try {
+        const hideUnmatched = options?.hideUnmatched !== false;
+        const query = hideUnmatched ? (options?.query ?? '').trim().toLowerCase() : '';
+        const isRowVisible = options?.isRowVisible;
+        for (const group of groups.querySelectorAll('section[role="group"]')) {
+            const providerName = readGroupTitle(group);
+            const rows = group.querySelectorAll('[role="menuitemradio"]');
+            let visibleRows = 0;
+            for (const row of rows) {
+                const model = { row, providerName, modelName: readRowName(row) };
+                let visible = true;
+                if (typeof isRowVisible === 'function') {
+                    try {
+                        visible = isRowVisible(model) !== false;
+                    }
+                    catch {
+                        visible = false;
+                    }
+                }
+                if (visible && hideUnmatched && !matchesQuery(model, query))
+                    visible = false;
+                row.style.display = visible ? '' : 'none';
+                if (visible)
+                    visibleRows += 1;
+                else
+                    result.hidden += 1;
+            }
+            result.shown += visibleRows;
+            if (rows.length > 0 && visibleRows === 0) {
+                group.style.display = 'none';
+                result.groupsHidden += 1;
+            }
+            else {
+                group.style.display = '';
+            }
+        }
+    }
+    catch {
+        // Malformed DOM: return the counts accumulated so far.
+    }
+    return result;
+}
+/**
+ * Clear every inline `display` this module may have written.
+ *
+ * Elements are never removed; rows and groups return to their natural layout.
+ *
+ * @param roots Popup roots from {@link findModelMenu}.
+ */
+export function resetMenuFilter(roots) {
+    const groups = groupsOf(roots);
+    if (groups === undefined)
+        return;
+    try {
+        for (const group of groups.querySelectorAll('section[role="group"]')) {
+            group.style.display = '';
+            for (const row of group.querySelectorAll('[role="menuitemradio"]')) {
+                row.style.display = '';
+                delete row.dataset['llmCtlHidden'];
+            }
+        }
+    }
+    catch {
+        // Malformed DOM: nothing to reset.
+    }
+}
+/** True when the element itself is, or contains, a `dsh-model-search-plugin` widget. */
+function containsForeignSearch(element) {
+    if (element.matches('[class*="dsh-model-search-container"]'))
+        return true;
+    if (element.querySelector('[class*="dsh-model-search-container"]') !== null)
+        return true;
+    if (element.matches('input') && classAttributeOf(element).includes('dsh-model-search'))
+        return true;
+    for (const input of element.querySelectorAll('input')) {
+        if (classAttributeOf(input).includes('dsh-model-search'))
+            return true;
+    }
+    return false;
+}
+/** True when `element` precedes `other` in document order. */
+function isBefore(element, other) {
+    if (element === other)
+        return false;
+    if (typeof element.compareDocumentPosition !== 'function')
+        return true;
+    return (element.compareDocumentPosition(other) & DOCUMENT_POSITION_FOLLOWING) !== 0;
+}
+/**
+ * Detect a search widget injected by `dsh-model-search-plugin`.
+ *
+ * A foreign widget sits before the groups container, either as its previous
+ * sibling or anywhere inside the menu (or the menu's parent). When one is found
+ * the caller must not inject a second search box (PRD FR3.2).
+ *
+ * @param roots Popup roots from {@link findModelMenu}.
+ * @returns True when a foreign search widget occupies the slot above the groups.
+ */
+export function hasForeignSearchWidget(roots) {
+    const groups = groupsOf(roots);
+    const menu = menuOf(roots);
+    if (groups === undefined || menu === undefined)
+        return false;
+    try {
+        const previous = groups.previousElementSibling;
+        if (previous !== null && containsForeignSearch(previous))
+            return true;
+        const scopes = [menu];
+        const parent = menu.parentElement;
+        if (parent !== null)
+            scopes.push(parent);
+        const anchor = groups.querySelector('section[role="group"]') ?? groups;
+        for (const scope of scopes) {
+            const widgets = scope.querySelectorAll('[class*="dsh-model-search-container"], input[class*="dsh-model-search-input"]');
+            for (const widget of widgets) {
+                if (widget === anchor || widget.contains(anchor))
+                    continue;
+                if (!isBefore(widget, anchor))
+                    continue;
+                return true;
+            }
+        }
+        return false;
+    }
+    catch {
+        return false;
+    }
+}
+/** Find an already-injected empty state near the popup. */
+function findEmptyState(groups, menu) {
+    const parent = groups?.parentElement ?? menu?.parentElement ?? null;
+    const local = parent?.querySelector(`#${EMPTY_STATE_ID}`);
+    if (local !== undefined && local !== null)
+        return local;
+    const global = documentOf(groups, menu)?.getElementById(EMPTY_STATE_ID);
+    return global ?? undefined;
+}
+/**
+ * Insert (or update) the "everything is filtered out" empty state above the groups.
+ *
+ * The element carries the message text plus one button that invokes `onAction`,
+ * so a caller can restore the hidden entries in one click (PRD FR3.3). Repeated
+ * calls reuse the same element and replace its text, button label, and handler.
+ *
+ * @param roots Popup roots from {@link findModelMenu}.
+ * @param text Message shown before the action button.
+ * @param actionLabel Button label, e.g. "显示 3 个隐藏项".
+ * @param onAction Click handler for that button.
+ * @returns The inserted `#dsh-llm-ctl-empty` element.
+ */
+export function ensureEmptyState(roots, text, actionLabel, onAction) {
+    const groups = groupsOf(roots);
+    const menu = menuOf(roots);
+    const existing = findEmptyState(groups, menu);
+    const owner = documentOf(existing, groups, menu);
+    if (owner === undefined)
+        return (roots?.menu ?? roots?.groups);
+    let element = existing;
+    try {
+        element = element ?? owner.createElement('div');
+        element.id = EMPTY_STATE_ID;
+        element.className = 'dsh-llm-ctl-empty';
+        const message = owner.createElement('span');
+        message.className = 'dsh-llm-ctl-empty-text';
+        message.textContent = text;
+        const action = owner.createElement('button');
+        action.type = 'button';
+        action.className = 'dsh-llm-ctl-empty-action';
+        action.textContent = actionLabel;
+        action.addEventListener('click', (event) => {
+            event.preventDefault();
+            try {
+                onAction();
+            }
+            catch {
+                // A caller-supplied handler must never break the popup.
+            }
+        });
+        element.replaceChildren(message, action);
+        const parent = groups?.parentElement ?? menu?.parentElement ?? null;
+        if (parent !== null) {
+            if (groups !== undefined && groups.parentElement === parent)
+                parent.insertBefore(element, groups);
+            else if (element.parentElement !== parent)
+                parent.appendChild(element);
+        }
+    }
+    catch {
+        // Malformed DOM: return whatever element could be built.
+    }
+    return element ?? (roots?.menu ?? roots?.groups);
+}
+/**
+ * Remove the empty state injected by {@link ensureEmptyState}, if present.
+ *
+ * @param roots Popup roots from {@link findModelMenu}.
+ */
+export function removeEmptyState(roots) {
+    try {
+        const groups = groupsOf(roots);
+        const menu = menuOf(roots);
+        findEmptyState(groups, menu)?.remove();
+    }
+    catch {
+        // Malformed DOM: nothing to remove.
+    }
+}

package/lib/menu-visibility.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Hide-only reconciliation for menus owned by a foreign search widget.
+ *
+ * A foreign plugin (for example dsh-model-search-plugin) owns query filtering,
+ * group collapsing, and empty states in its menu. Rewriting every passing row's
+ * display would wipe its filtering on every poll tick, which is exactly the
+ * type-then-revert symptom. This pass only ever hides rows our own switches
+ * reject, and it only ever restores rows it hid itself (tracked with a data
+ * marker), so the two plugins compose instead of fighting.
+ *
+ * @module dsh-llm-ctl/menu-visibility
+ */
+import type { ModelMenuRoots, ModelMenuRow } from './menu-filter.ts';
+/** Outcome of one hide-only reconciliation pass. */
+export interface VisibilityOnlyResult {
+    hidden: number;
+    restored: number;
+}
+/**
+ * Hide rows rejected by our own switches without touching anything else.
+ *
+ * @param roots Popup roots from findModelMenu.
+ * @param isRowVisible Visibility predicate; rows without a decision stay visible.
+ * @returns Counts of newly hidden and restored rows.
+ */
+export declare function applyVisibilityOnly(roots: ModelMenuRoots, isRowVisible: (row: ModelMenuRow) => boolean): VisibilityOnlyResult;

package/lib/menu-visibility.js

@@ -0,0 +1,77 @@
+/** Marker set on rows hidden by this pass, so only they are ever restored. */
+const HIDDEN_MARKER = 'llmCtlHidden';
+/** Group title with the same fallbacks as the menu parser. */
+function groupTitleOf(group) {
+    try {
+        const titled = group.querySelector('div[id]');
+        if (titled !== null)
+            return (titled.textContent ?? '').trim();
+        const labelledBy = group.getAttribute('aria-labelledby');
+        if (labelledBy !== null && labelledBy.length > 0) {
+            const target = group.ownerDocument?.getElementById(labelledBy);
+            if (target !== null && target !== undefined)
+                return (target.textContent ?? '').trim();
+        }
+        return (group.getAttribute('aria-label') ?? '').trim();
+    }
+    catch {
+        return '';
+    }
+}
+/** Row display name with the same fallbacks as the menu parser. */
+function rowNameOf(row) {
+    try {
+        const title = row.getAttribute('title');
+        if (title !== null && title.trim().length > 0)
+            return title.trim();
+        const named = row.querySelector('[class*="modelName"]');
+        if (named !== null && (named.textContent ?? '').trim().length > 0)
+            return (named.textContent ?? '').trim();
+        return (row.textContent ?? '').trim();
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Hide rows rejected by our own switches without touching anything else.
+ *
+ * @param roots Popup roots from findModelMenu.
+ * @param isRowVisible Visibility predicate; rows without a decision stay visible.
+ * @returns Counts of newly hidden and restored rows.
+ */
+export function applyVisibilityOnly(roots, isRowVisible) {
+    const result = { hidden: 0, restored: 0 };
+    try {
+        for (const group of roots.groups.querySelectorAll('section[role="group"]')) {
+            const providerName = groupTitleOf(group);
+            for (const row of group.querySelectorAll('[role="menuitemradio"]')) {
+                const model = { row, providerName, modelName: rowNameOf(row) };
+                let visible = true;
+                try {
+                    visible = isRowVisible(model) !== false;
+                }
+                catch {
+                    visible = false;
+                }
+                if (!visible) {
+                    if (row.style.display !== 'none')
+                        row.style.display = 'none';
+                    if (row.dataset[HIDDEN_MARKER] !== '1') {
+                        row.dataset[HIDDEN_MARKER] = '1';
+                        result.hidden += 1;
+                    }
+                }
+                else if (row.dataset[HIDDEN_MARKER] === '1') {
+                    row.style.display = '';
+                    delete row.dataset[HIDDEN_MARKER];
+                    result.restored += 1;
+                }
+            }
+        }
+    }
+    catch {
+        // Malformed DOM: return the counts accumulated so far.
+    }
+    return result;
+}

package/lib/queue-dock.d.ts

@@ -0,0 +1,85 @@
+/**
+ * React views for the `conversation.composer.dock` queue seat.
+ *
+ * The dock is the official list slot below the composer card
+ * (`dsh-client-ui-conversation`, kind `list`, scope `session`, no owner
+ * props). Seats render as siblings inside one `display: contents` slot
+ * anchor: the official stats pills (`dsh-client-ui-chat` `StatsPills`,
+ * order 0, `.bOPqQW_root` — a centered 13px tertiary pill row) come first,
+ * our queue pills go last (order 1000). We cannot nest inside the stats
+ * seat's own root (it is owned by another plugin's component), so this panel
+ * mirrors its pill-row language so the two stacked rows read as one dock.
+ *
+ * Each pill is a compact trigger (glyph + count) that opens an anchored
+ * dialog with the full queue or cooling detail — the same interaction the
+ * official stats pills use. The seat returns null while the control plane is
+ * idle so the dock collapses to nothing.
+ *
+ * Pure view over a small state object plus callbacks: shaping and the trigger
+ * markup are testable without a browser. Hover/expanded styles live in the
+ * client half (`client-plugin.ts` `ensureDockStyles`) because inline styles
+ * cannot express `:hover`.
+ *
+ * @module dsh-llm-ctl/queue-dock
+ */
+import React from 'react';
+/** One queued request visible in the dock. */
+export interface QueueDockWaiter {
+    queueId: string;
+    provider: string;
+    origin: 'loop' | 'background';
+    position: number;
+    etaMs: number;
+}
+/** One provider lane currently cooling down. */
+export interface QueueDockLane {
+    provider: string;
+    cooldownRemainingMs: number;
+}
+/** Queue slice the dock renders. */
+export interface QueueDockInput {
+    lanes: readonly QueueDockLane[];
+    waiters: readonly QueueDockWaiter[];
+}
+/** Shaped dock content: the queue and cooling detail behind the pills. */
+export interface QueueDockView {
+    waiters: QueueDockWaiter[];
+    cooling: QueueDockLane[];
+}
+/**
+ * Format milliseconds as a compact human delay.
+ *
+ * @param ms - Non-negative duration in milliseconds.
+ * @returns Compact label such as `850ms`, `12.0s`, or `2m05s`.
+ */
+export declare function formatMs(ms: number): string;
+/**
+ * Shape the dock view, or undefined when the control plane is idle.
+ *
+ * @param queue - Live lanes and waiters from the state poll.
+ * @returns The content to render, or undefined when there is nothing to show.
+ */
+export declare function buildQueueDockView(queue: QueueDockInput): QueueDockView | undefined;
+/** Cancel-button class; hover is styled by the injected dock stylesheet. */
+export declare const DOCK_CANCEL_CLASS = "dsh-llm-ctl-dock-cancel";
+/** Pill-trigger class; hover/expanded styling comes from the dock stylesheet. */
+export declare const DOCK_PILL_CLASS = "dsh-llm-ctl-dock-pill";
+/** Dialog body: one row per waiter, each with its own cancel button. */
+export declare function QueueDetails(props: {
+    waiters: QueueDockWaiter[];
+    onCancel: (queueId: string) => void;
+}): React.ReactElement;
+/** Dialog body: one row per cooling lane. */
+export declare function CoolingDetails(props: {
+    lanes: QueueDockLane[];
+}): React.ReactElement;
+/**
+ * Queue/cooldown pills for the composer dock.
+ *
+ * @param props - Shaped dock view plus the cancel callback.
+ * @returns The rendered pill row.
+ */
+export declare function QueueDockPanel(props: {
+    view: QueueDockView;
+    onCancel: (queueId: string) => void;
+}): React.ReactElement;