@khorsheed/dsh-capability-catalog 0.1.95

package/lib/types/client/SkillDetailModal.js

@@ -0,0 +1,167 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { IconChevronDownOutlineMedium, IconChevronRightOutlineMedium, IconCopyOutlineMedium } from './icons.js';
+import { BundleFileTree } from './BundleFileTree.js';
+import { CredentialField } from './CredentialField.js';
+import { MetadataRow } from './MetadataRow.js';
+import { ModalShell } from './ModalShell.js';
+import css from './CapabilityCatalogCard.module.css';
+/** Why a skill with no writable preset scope has no editor. */
+function providedScopeNote(t, provider) {
+    return provider === undefined
+        ? t('scopeBuiltin')
+        : t('scopeProvided').replace('{provider}', provider);
+}
+/** Centered modal with a skill's full detail, source browser, metadata and credential config. */
+export function SkillDetailModal({ name, claim, onClose, setCredential, readSkillFile, t, scope, modeChips, modesLoading, onModeSelect }) {
+    const [credValues, setCredValues] = useState({});
+    const [credState, setCredState] = useState({});
+    const [copied, setCopied] = useState(false);
+    const [sourceOpen, setSourceOpen] = useState(false);
+    const data = claim.data;
+    // Source browser: the selected bundle file and its content (right pane).
+    const [srcFile, setSrcFile] = useState('');
+    const [srcContent, setSrcContent] = useState(undefined);
+    const [srcLoading, setSrcLoading] = useState(false);
+    // Preset-scope editor: the pending selection, the busy flag, and the last message.
+    const [scopePick, setScopePick] = useState(null);
+    const [scopeBusy, setScopeBusy] = useState(false);
+    const [scopeMsg, setScopeMsg] = useState(null);
+    const saveCred = async (key) => {
+        const value = credValues[key] ?? '';
+        if (value === '')
+            return;
+        setCredState((s) => ({ ...s, [key]: 'saving' }));
+        const ok = await setCredential(key, value);
+        setCredState((s) => ({ ...s, [key]: ok ? 'ok' : 'fail' }));
+    };
+    const copySource = async () => {
+        const text = (srcFile === '' || srcFile === 'SKILL.md') ? data?.content : srcContent;
+        if (text === undefined)
+            return;
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        }
+        catch { /* clipboard may be blocked */ }
+    };
+    const pickedScope = scopePick ?? scope?.declared ?? [];
+    /** Run one scope mutation, then report its outcome in place. */
+    const runScope = async (action) => {
+        setScopeBusy(true);
+        setScopeMsg(null);
+        try {
+            const result = await action();
+            setScopeMsg(result.ok ? t('scopeSaved') : `${t('scopeError')}: ${result.error ?? ''}`);
+            if (result.ok)
+                setScopePick(null);
+        }
+        finally {
+            setScopeBusy(false);
+        }
+    };
+    const toggleScope = (id) => {
+        setScopePick(pickedScope.includes(id) ? pickedScope.filter(value => value !== id) : [...pickedScope, id]);
+    };
+    // Select a bundle file for the source pane. SKILL.md's body is already in the
+    // detail (no extra RPC); other files load on demand.
+    const selectSource = (path) => {
+        setSrcFile(path);
+        if (path === 'SKILL.md') {
+            setSrcLoading(false);
+            setSrcContent(data?.content);
+            return;
+        }
+        setSrcLoading(true);
+        setSrcContent(undefined);
+        void readSkillFile(name, path).then(res => {
+            setSrcContent(res?.content);
+            setSrcLoading(false);
+        });
+    };
+    return (_jsxs(ModalShell, { title: name, onClose: onClose, t: t, children: [claim.status === 'loading' ? _jsx("div", { className: css.empty, children: t('loading') }) : null, claim.status === 'done' && data === undefined ? _jsx("div", { className: css.empty, children: t('loadFailed') }) : null, claim.status === 'done' && data !== undefined ? (_jsxs(_Fragment, { children: [_jsx(MetadataRow, { items: [
+                            { label: t('source'), value: data.source },
+                            { label: t('provider'), value: data.provider },
+                            { label: t('modelInvocable'), value: data.modelInvocable ? t('yes') : t('no') },
+                            ...(data.whenToUse !== undefined ? [{ label: t('whenToUse'), value: data.whenToUse }] : []),
+                        ] }), _jsx("p", { className: css.detailDesc, children: data.description }), scope !== undefined ? (_jsxs("section", { className: css.scopeBox, children: [_jsxs("div", { className: css.scopeHead, children: [_jsx("span", { className: css.scopeTitle, children: t('scopeSection') }), _jsx("button", { type: "button", className: css.scopeInfo, title: `${t('scopeHint')}\n\n${t('scopeProbe')}`, "aria-label": t('scopeInfoLabel'), children: "i" })] }), scope.options.length === 0 ? (_jsx("div", { className: css.scopeHint, children: t('scopeUnavailable') })) : !scope.writable ? (_jsxs(_Fragment, { children: [_jsx("div", { className: css.scopeHint, children: providedScopeNote(t, scope.provider) }), modesLoading === true ? (_jsx("div", { className: css.scopeHint, children: t('modeBusy') })) : modeChips === undefined ? null : modeChips.length === 0 ? (_jsx("div", { className: css.scopeHint, children: t('modeNone') })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: css.scopeModes, children: [_jsx("span", { className: css.pvModesLabel, children: t('modeIn') }), modeChips.map(chip => (_jsx("button", { type: "button", className: css.modeChip, "data-default": chip.isDefault ? 'true' : undefined, title: t('modeChipHint'), onClick: () => onModeSelect?.(chip.id), children: chip.label }, chip.id)))] }), _jsx("div", { className: css.scopeHint, children: t('modeChipsCost') })] }))] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: css.scopeGrid, children: scope.options.map((option) => (_jsxs("label", { className: css.scopeItem, title: option.description, children: [_jsx("input", { type: "checkbox", checked: pickedScope.includes(option.id), disabled: scopeBusy, onChange: () => toggleScope(option.id) }), _jsx("span", { children: option.name ?? option.id }), option.broken !== undefined ? _jsx("span", { className: css.scopeBadge, children: t('scopeBroken') }) : null] }, option.id))) }), _jsxs("div", { className: css.scopeActions, children: [scope.managed ? (_jsx("button", { type: "button", className: css.addBtn, disabled: scopeBusy, onClick: () => void runScope(() => scope.save(pickedScope)), children: scopeBusy ? t('scopeSaving') : t('scopeSave') })) : null, scope.managed ? (_jsx("button", { type: "button", className: css.addBtn, disabled: scopeBusy, onClick: () => void runScope(() => scope.release()), children: t('scopeRelease') })) : scope.adoptable ? (_jsx("button", { type: "button", className: css.addBtn, disabled: scopeBusy, onClick: () => void runScope(() => scope.adopt(pickedScope)), children: t('scopeAdopt') })) : null, scopeMsg !== null ? _jsx("span", { className: css.scopeHint, children: scopeMsg }) : null] }), scope.conflict !== undefined ? (_jsxs("div", { className: css.scopeConflict, children: [t('scopeConflict'), ": ", scope.conflict] })) : null] }))] })) : null, data.metadataText !== undefined && hasUnrenderedMetadata(data.metadataText) ? (_jsxs("details", { className: css.source, children: [_jsx("summary", { className: css.sourceTitle, children: t('frontmatterMetadata') }), _jsx("pre", { className: css.codeBlk, children: formatMetadata(data.metadataText) })] })) : null, data.credentials !== undefined && data.credentials.length > 0 ? (_jsxs("details", { className: css.conf, open: true, children: [_jsx("summary", { className: css.confTitle, children: t('credentials') }), _jsx("div", { className: css.confHint, children: t('credentialsHint') }), data.credentials.map((decl) => {
+                                const key = decl.key;
+                                const label = decl.label ?? key;
+                                const state = credState[key] ?? 'idle';
+                                const configured = decl.configured || state === 'ok';
+                                return (_jsx(CredentialField, { label: label, configured: configured, value: credValues[key] ?? '', state: state, onChange: (value) => setCredValues((s) => ({ ...s, [key]: value })), onSave: () => void saveCred(key), t: t }, key));
+                            })] })) : null, data.environmentRefs !== undefined && data.environmentRefs.length > 0 ? (_jsxs("details", { className: css.conf, children: [_jsx("summary", { className: css.confTitle, children: t('envRefs') }), _jsx("div", { className: css.confHint, children: t('envRefsHint') }), _jsx("div", { className: css.envRefList, children: data.environmentRefs.map((ref) => (_jsx("span", { className: css.envRef, children: ref }, ref))) })] })) : null, (() => {
+                        const files = data.files !== undefined && data.files.length > 0 ? data.files : ['SKILL.md'];
+                        const single = files.length <= 1;
+                        return (_jsxs("section", { className: css.sourceSection, children: [_jsxs("button", { type: "button", className: css.sourceTrigger, onClick: () => setSourceOpen((o) => !o), "aria-expanded": sourceOpen, children: [_jsx("span", { className: css.sourceChevron, children: sourceOpen ? _jsx(IconChevronDownOutlineMedium, { size: 16 }) : _jsx(IconChevronRightOutlineMedium, { size: 16 }) }), _jsx("span", { className: css.sourceLabel, children: t('viewSource') })] }), sourceOpen ? (single ? (_jsxs("div", { className: css.sourceSingle, children: [_jsxs("div", { className: css.sourceBar, children: [_jsx("span", { className: css.sourceBarFile, children: srcFile === '' || srcFile === 'SKILL.md' ? 'SKILL.md' : srcFile }), _jsx("button", { type: "button", className: css.sourceCopy, onClick: () => void copySource(), "aria-label": t('copy'), children: copied ? t('copied') : _jsxs("span", { className: css.codeCopyIcon, children: [_jsx(IconCopyOutlineMedium, { size: 16 }), " ", t('copy')] }) })] }), _jsx("div", { className: css.detailPane, children: srcLoading ? _jsx("div", { className: css.empty, children: t('loading') })
+                                                : (srcFile === '' || srcFile === 'SKILL.md') ? _jsx("pre", { className: css.codeBlk, children: data.content })
+                                                    : srcContent === undefined ? _jsx("div", { className: css.empty, children: t('loadFailed') })
+                                                        : _jsx("pre", { className: css.codeBlk, children: srcContent }) })] })) : (_jsxs("div", { className: css.split, children: [_jsx("div", { className: css.treePane, children: _jsx(BundleFileTree, { files: files, selectedPath: srcFile === '' ? 'SKILL.md' : srcFile, onSelect: selectSource }) }), _jsxs("div", { className: css.detailPane, children: [_jsx("button", { type: "button", className: css.codeCopy, onClick: () => void copySource(), "aria-label": t('copy'), children: copied ? _jsx("span", { children: t('copied') }) : _jsxs("span", { className: css.codeCopyIcon, children: [_jsx(IconCopyOutlineMedium, { size: 16 }), " ", t('copy')] }) }), srcLoading ? _jsx("div", { className: css.empty, children: t('loading') })
+                                                    : (srcFile === '' || srcFile === 'SKILL.md') ? _jsx("pre", { className: css.codeBlk, children: data.content })
+                                                        : srcContent === undefined ? _jsx("div", { className: css.empty, children: t('loadFailed') })
+                                                            : _jsx("pre", { className: css.codeBlk, children: srcContent })] })] }))) : null] }));
+                    })()] })) : null] }));
+}
+/**
+ * Metadata keys this modal already renders in a dedicated place.
+ *
+ * `presetScope` is edited by the scope section and visible in the source pane;
+ * `credentials` is the credential form above (its values live in the credential
+ * store, never in the frontmatter). Repeating either as raw JSON is noise, and
+ * an empty `metadata` block appearing because someone declared a credential is
+ * worse than noise — it reads as a defect.
+ */
+const RENDERED_METADATA_KEYS = new Set(['presetScope', 'credentials']);
+/**
+ * Whether a skill's metadata holds anything the modal does not already render.
+ * @param metadataText - the serialized metadata object.
+ * @returns whether the block is worth showing.
+ */
+export function hasUnrenderedMetadata(metadataText) {
+    try {
+        const parsed = JSON.parse(metadataText);
+        if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed))
+            return true;
+        return Object.keys(parsed).some(key => !RENDERED_METADATA_KEYS.has(key));
+    }
+    catch {
+        return true;
+    }
+}
+/** Keys whose VALUE is replaced before a metadata dump is displayed. */
+const SECRET_KEY_PATTERN = /key|token|secret|password/i;
+/** The placeholder a secret-shaped metadata value renders as. */
+const REDACTED = '···';
+/**
+ * Replace secret-shaped VALUES in a metadata object before display.
+ *
+ * The metadata block prints whatever frontmatter carries, and today nothing
+ * secret lives there (credential values are stored in the credential service,
+ * never in the file). This is a display guard for the day someone puts an
+ * inline token in a metadata key: the block still shows the key and its shape,
+ * but not the value. Matching is on the KEY (recursively, so a nested
+ * `auth.token` is covered) — a value-shaped heuristic would redact prose.
+ * @param value - any parsed metadata value.
+ * @returns the same shape with secret-keyed values replaced.
+ */
+export function redactMetadataSecrets(value) {
+    if (Array.isArray(value))
+        return value.map(entry => redactMetadataSecrets(entry));
+    if (value === null || typeof value !== 'object')
+        return value;
+    const out = {};
+    for (const [key, entry] of Object.entries(value)) {
+        out[key] = SECRET_KEY_PATTERN.test(key) ? REDACTED : redactMetadataSecrets(entry);
+    }
+    return out;
+}
+/** Pretty-print a JSON metadata string for display, with secret-shaped values redacted. */
+export function formatMetadata(metadataText) {
+    try {
+        return JSON.stringify(redactMetadataSecrets(JSON.parse(metadataText)), null, 2);
+    }
+    catch {
+        return metadataText;
+    }
+}

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

@@ -0,0 +1,28 @@
+import type { CatalogToolRow } from '@khorsheed/dsh-capability-catalog/types';
+import type { CapabilityCatalogKey } from './locales.ts';
+import type { CatalogModeChip, ModeComparison } from './mode-model.ts';
+import type { McpGroup } from './mcp-model.ts';
+export type ToolSegment = 'all' | 'builtin' | 'plugin' | 'mcp';
+/** Human label for one tool's channel pill. */
+export declare function toolTag(tool: CatalogToolRow, t: (key: CapabilityCatalogKey) => string): string;
+/** Origin / ownership subtitle for a tool card. */
+export declare function toolOrigin(tool: CatalogToolRow, t: (key: CapabilityCatalogKey) => string): string;
+/** The tools tab's card views following the segment filter. `all` renders both the
+ * builtin/plugin tool cards AND the MCP server cards in ONE grid (so the 16px gap
+ * stays uniform across them); the other segments render one set. */
+export declare function ToolCards({ loading, visibleTools, mcpGroups, segment, comparison, modeChipsFor, onMode, onOpenTool, onOpenServer, onSetEnabled, onRemove, t }: {
+    loading: boolean;
+    visibleTools: readonly CatalogToolRow[];
+    mcpGroups: readonly McpGroup[];
+    segment: ToolSegment;
+    /** The comparison model, or null when the grid shows one mode's face. */
+    comparison: ModeComparison | null;
+    modeChipsFor: (ids: readonly string[] | undefined) => readonly CatalogModeChip[];
+    onMode: (id: string) => void;
+    onOpenTool: (tool: CatalogToolRow) => void;
+    onOpenServer: (name: string) => void;
+    onSetEnabled: (serverName: string, enabled: boolean) => Promise<void>;
+    onRemove: (serverName: string) => Promise<void>;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=ToolCards.d.ts.map

package/lib/types/client/ToolCards.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBrowseOutlineMedium } from './icons.js';
+import { McpCard } from './McpCards.js';
+import { ModeChips } from './ModeChips.js';
+import css from './CapabilityCatalogCard.module.css';
+/** Human label for one tool's channel pill. */
+export function toolTag(tool, t) {
+    if (tool.channel === 'mcp')
+        return tool.serverName !== undefined ? `MCP · ${tool.serverName}` : 'MCP';
+    if (tool.channel === 'plugin')
+        return t('toolPlugin');
+    if (tool.channel === 'builtin')
+        return t('toolBuiltin');
+    return tool.channel;
+}
+/** Origin / ownership subtitle for a tool card. */
+export function toolOrigin(tool, t) {
+    if (tool.channel === 'mcp')
+        return tool.serverName ?? 'MCP';
+    if (tool.channel === 'plugin')
+        return tool.owner ?? t('toolPlugin');
+    return t('toolBuiltin');
+}
+/** Tool preview card — same anatomy as the skill cards (shared .pvCard / .grid),
+* so tools and skills carry ONE style that can be optimized together. In the
+* comparison view a chip row names the modes that load it. */
+function ToolCard({ tool, modes, modeTotal, onMode, onOpen, t }) {
+    return (_jsxs("div", { className: css.pvCard, "data-modes": modes === undefined ? undefined : 'true', children: [_jsxs("button", { type: "button", className: css.pvMain, onClick: onOpen, children: [_jsxs("span", { className: css.pvHead, children: [_jsx("span", { className: css.pvName, children: tool.name }), _jsx("span", { className: `${css.pvTag} ${tool.channel === 'mcp' ? css.tagMcp : tool.channel === 'plugin' ? css.tagPlugin : ''}`, children: toolTag(tool, t) })] }), _jsx("span", { className: css.pvDesc, children: tool.description }), _jsx("span", { className: css.pvSub, children: toolOrigin(tool, t) })] }), modes === undefined ? null : _jsx(ModeChips, { modes: modes, total: modeTotal ?? 0, onSelect: onMode, t: t }), _jsx("div", { className: css.pvFoot, children: _jsx("button", { type: "button", className: css.iconButton, onClick: onOpen, "aria-label": t('viewDetail'), title: t('viewDetail'), children: _jsx(IconBrowseOutlineMedium, { size: 16 }) }) })] }));
+}
+/** The tools tab's card views following the segment filter. `all` renders both the
+ * builtin/plugin tool cards AND the MCP server cards in ONE grid (so the 16px gap
+ * stays uniform across them); the other segments render one set. */
+export function ToolCards({ loading, visibleTools, mcpGroups, segment, comparison, modeChipsFor, onMode, onOpenTool, onOpenServer, onSetEnabled, onRemove, t }) {
+    if (loading)
+        return null;
+    const showsToolCards = segment !== 'mcp';
+    const showsMcpServers = segment !== 'builtin' && segment !== 'plugin';
+    const total = (showsToolCards ? visibleTools.length : 0) + (showsMcpServers ? mcpGroups.length : 0);
+    /** The chips for one tool, or undefined when it has no row (see the skill card). */
+    const chipsForTool = (tool) => {
+        if (comparison === null)
+            return undefined;
+        const chips = modeChipsFor(comparison.toolModes.get(tool.name));
+        return chips.length === 0 ? undefined : chips;
+    };
+    if (total === 0) {
+        return segment === 'mcp'
+            ? _jsx("div", { className: css.empty, children: t('mcpServerEmpty') })
+            : _jsx("div", { className: css.empty, children: t('toolNoMatch') });
+    }
+    return (_jsxs("div", { className: css.grid, children: [showsToolCards ? visibleTools.map((tool) => (_jsx(ToolCard, { tool: tool, modes: chipsForTool(tool), modeTotal: comparison?.modes ?? 0, onMode: onMode, onOpen: () => onOpenTool(tool), t: t }, tool.name))) : null, showsMcpServers ? mcpGroups.map((g) => (_jsx(McpCard, { group: g, onOpen: () => onOpenServer(g.serverName), onSetEnabled: onSetEnabled, onRemove: onRemove, t: t }, g.serverName))) : null] }));
+}

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

@@ -0,0 +1,12 @@
+import type { CatalogToolRow } from '@khorsheed/dsh-capability-catalog/types';
+import type { CapabilityCatalogKey } from './locales.ts';
+/** Tool detail modal: description (clamped when it overflows, expandable) +
+ * channel/origin + parameter schema tree. Also serves MCP tools opened from the
+ * server manage modal — one detail view for every tool. No footer button — the
+ * ×, Esc, and mask-click close it (ModalShell). */
+export declare function ToolDetailModal({ tool, onClose, t }: {
+    tool: CatalogToolRow;
+    onClose: () => void;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ToolDetailModal.d.ts.map

package/lib/types/client/ToolDetailModal.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ModalShell } from './ModalShell.js';
+import { MetadataRow } from './MetadataRow.js';
+import { SchemaView } from './SchemaView.js';
+import { toolOrigin, toolTag } from './ToolCards.js';
+import css from './CapabilityCatalogCard.module.css';
+/** Tool detail modal: description (clamped when it overflows, expandable) +
+ * channel/origin + parameter schema tree. Also serves MCP tools opened from the
+ * server manage modal — one detail view for every tool. No footer button — the
+ * ×, Esc, and mask-click close it (ModalShell). */
+export function ToolDetailModal({ tool, onClose, t }) {
+    const [descExpanded, setDescExpanded] = useState(false);
+    // Show the expand toggle only when the description actually overflows the clamp.
+    const descRef = useRef(null);
+    const [descOverflow, setDescOverflow] = useState(false);
+    useEffect(() => {
+        const el = descRef.current;
+        if (el === null) {
+            setDescOverflow(false);
+            return;
+        }
+        setDescOverflow(el.scrollHeight > el.clientHeight + 1);
+    }, [tool.description]);
+    return (_jsxs(ModalShell, { title: tool.name, onClose: onClose, t: t, children: [_jsx(MetadataRow, { items: [
+                    { label: t('source'), value: toolTag(tool, t) },
+                    { label: t('provider'), value: toolOrigin(tool, t) },
+                ] }), _jsxs("div", { className: css.toolDetailDesc, children: [_jsx("p", { ref: descRef, className: `${css.toolDesc} ${descExpanded ? css.toolDescExpanded : css.toolDescClamp}`, children: tool.description }), descOverflow ? (_jsx("button", { type: "button", className: css.toolDescToggle, onClick: () => setDescExpanded(e => !e), children: descExpanded ? t('toolCollapse') : t('toolExpand') })) : null] }), _jsx(SchemaView, { parameters: tool.parameters, title: t('toolParams'), t: t })] }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Generated by scripts/sync-icon-artwork.mts from @deepseek-ai/dsh-client-ui-primitives
+ * (v0.1.7-rc.1, harness 46a7f68b09) — do not edit by hand. The 0.1.5 and rc.1 host lines
+ * share no icon export name, so the rc.1 artwork is inlined here: pure SVG,
+ * no host runtime identity, identical on every line. Re-run the generator
+ * after adding an icon import or bumping the harness checkout.
+ *
+ * @module @khorsheed/dsh-capability-catalog/client
+ */
+/** Shared props for every product icon component (mirrors the upstream IconProps). */
+export interface IconProps {
+    /** Square edge in px; defaults to the glyph's own drawn size. */
+    size?: number | undefined;
+    /** Extra class for layout placement; color rides currentColor. */
+    className?: string | undefined;
+}
+export declare const IconBrowseOutlineMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconChevronDownOutlineMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconChevronRightOutlineMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconCopyOutlineMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconFolderCloseMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconFolderOpenMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconFolderOpenOutlineMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconSearchOutlineMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+export declare const IconTrashOutlineMedium: ({ size, className }: IconProps) => import("react").JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

package/lib/types/client/icons.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const IconBrowseOutlineMedium = ({ size = 16, className }) => (_jsxs("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: [_jsx("path", { d: "M4.9375 5.90295H11.0625", stroke: "currentColor" }), _jsx("path", { d: "M4.9375 9.02991H8.27841", stroke: "currentColor" }), _jsx("path", { d: "M12.5 1.32617C13.3039 1.32617 14 1.95171 14 2.77637V13.2246C13.9996 14.0489 13.3036 14.6738 12.5 14.6738H3.5C2.69637 14.6738 2.00042 14.0489 2 13.2246V2.77637C2 1.95171 2.69613 1.32617 3.5 1.32617H12.5ZM3.5 2.32617C3.1993 2.32617 3 2.55186 3 2.77637V13.2246C3.00044 13.4489 3.19963 13.6738 3.5 13.6738H12.5C12.8004 13.6738 12.9996 13.4489 13 13.2246V2.77637C13 2.55186 12.8007 2.32617 12.5 2.32617H3.5Z", fill: "currentColor" })] }));
+export const IconChevronDownOutlineMedium = ({ size = 14, className }) => (_jsx("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: _jsx("path", { d: "M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6", stroke: "currentColor" }) }));
+export const IconChevronRightOutlineMedium = ({ size = 14, className }) => (_jsx("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: _jsx("path", { d: "M6 12L9.29289 8.70711C9.68342 8.31658 9.68342 7.68342 9.29289 7.29289L6 4", stroke: "currentColor" }) }));
+export const IconCopyOutlineMedium = ({ size = 16, className }) => (_jsxs("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: [_jsx("rect", { x: "1.52075", y: "4.07373", width: "10.3932", height: "10.3932", rx: "2", stroke: "currentColor" }), _jsx("path", { d: "M11.9792 1.53296C13.36 1.53296 14.4792 2.65225 14.4792 4.03296V9.42847C14.4792 10.3756 13.9521 11.1987 13.1755 11.6228V10.3298C13.3652 10.0787 13.4792 9.7674 13.4792 9.42847V4.03296C13.4792 3.20453 12.8077 2.53296 11.9792 2.53296H6.58374C6.27966 2.53301 5.99684 2.6235 5.7605 2.77905H4.42358C4.85652 2.03463 5.66056 1.53304 6.58374 1.53296H11.9792Z", fill: "currentColor" })] }));
+export const IconFolderCloseMedium = ({ size = 16, className }) => (_jsxs("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: [_jsx("path", { d: "M1.50439 3.11059C1.50439 2.55831 1.95211 2.1106 2.50439 2.1106H5.43389C5.67773 2.1106 5.91318 2.19969 6.09593 2.36113L7.71649 3.79265C7.89924 3.95409 8.1347 4.04319 8.3785 4.04319H13.4958C14.0481 4.04319 14.4958 4.4909 14.4958 5.04319V12.8894C14.4958 13.4417 14.0481 13.8894 13.4958 13.8894H2.50439C1.95211 13.8894 1.50439 13.4417 1.50439 12.8894V4.04319V3.11059Z", stroke: "currentColor" }), _jsx("path", { d: "M3.63501 7.66614H12.3647", stroke: "currentColor" })] }));
+export const IconFolderOpenMedium = ({ size = 16, className }) => (_jsxs("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: [_jsx("path", { d: "M2.55912 7.93683C2.67584 7.49906 3.0723 7.19446 3.52536 7.19446H13.6491C14.3061 7.19446 14.7846 7.81725 14.6153 8.45209L13.4411 12.856C13.3244 13.2938 12.9279 13.5984 12.4748 13.5984H2.35113C1.69411 13.5984 1.21562 12.9756 1.38489 12.3407L2.55912 7.93683Z", fill: "currentColor", opacity: "0.16" }), _jsx("path", { d: "M13.6491 6.69446C14.6346 6.69453 15.3522 7.62895 15.0983 8.58118L13.9245 12.9845C13.7494 13.6412 13.1539 14.0988 12.4743 14.0988H2.35126C1.36574 14.0988 0.648153 13.1643 0.902044 12.212L2.07587 7.80774C2.25102 7.15128 2.84567 6.69455 3.52509 6.69446H13.6491ZM3.52509 7.69446C3.29865 7.69455 3.10004 7.84674 3.04169 8.06555L1.86786 12.4698C1.78345 12.7872 2.02285 13.0988 2.35126 13.0988H12.4743C12.7007 13.0988 12.8992 12.9463 12.9577 12.7277L14.1325 8.32336C14.2171 8.00598 13.9776 7.69453 13.6491 7.69446H3.52509Z", fill: "currentColor" }), _jsx("path", { d: "M4.7666 1.90137C5.13227 1.90144 5.48571 2.03525 5.75977 2.27734L7.27246 3.61328C7.36379 3.69382 7.48174 3.73828 7.60352 3.73828H12.3994C13.2276 3.73841 13.8993 4.41005 13.8994 5.23828V6.7168C13.8183 6.70327 13.735 6.69436 13.6494 6.69434H12.8994V5.23828C12.8993 4.96233 12.6754 4.73841 12.3994 4.73828H7.60352C7.23781 4.73828 6.88446 4.60438 6.61035 4.3623L5.09766 3.02637C5.00636 2.94576 4.88838 2.90144 4.7666 2.90137H2.0498C1.77366 2.90137 1.5498 3.12523 1.5498 3.40137V9.78223L0.902344 12.2119C0.648452 13.1642 1.36604 14.0986 2.35156 14.0986H2.0498C1.2214 14.0986 0.549838 13.427 0.549805 12.5986V3.40137C0.549805 2.57294 1.22138 1.90137 2.0498 1.90137H4.7666Z", fill: "currentColor" })] }));
+export const IconFolderOpenOutlineMedium = ({ size = 16, className }) => (_jsxs("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: [_jsx("path", { d: "M12.3994 13.5986H2.04956C1.49728 13.5986 1.04956 13.1509 1.04956 12.5986V3.40137C1.04956 2.84908 1.49728 2.40137 2.04956 2.40137H4.76632C5.01016 2.40137 5.24561 2.49046 5.42836 2.6519L6.94088 3.98799C7.12364 4.14943 7.35908 4.23852 7.60293 4.23852H12.3994C12.9517 4.23852 13.3994 4.68624 13.3994 5.23852V7.16991", stroke: "currentColor" }), _jsx("path", { d: "M2.55911 7.93683C2.67584 7.49906 3.07229 7.19446 3.52536 7.19446H13.6491C14.3061 7.19446 14.7846 7.81725 14.6153 8.45209L13.4411 12.856C13.3244 13.2938 12.9279 13.5984 12.4748 13.5984H2.35113C1.69411 13.5984 1.21562 12.9756 1.38489 12.3407L2.55911 7.93683Z", stroke: "currentColor" })] }));
+export const IconSearchOutlineMedium = ({ size = 16, className }) => (_jsxs("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: [_jsx("path", { d: "M6.58727 11.8586C9.55061 11.8586 11.9529 9.45637 11.9529 6.49304C11.9529 3.5297 9.55061 1.12744 6.58727 1.12744C3.62394 1.12744 1.22168 3.5297 1.22168 6.49304C1.22168 9.45637 3.62394 11.8586 6.58727 11.8586Z", stroke: "currentColor" }), _jsx("path", { d: "M10.2991 10.3933L14.7783 14.8725", stroke: "currentColor" })] }));
+export const IconTrashOutlineMedium = ({ size = 16, className }) => (_jsxs("svg", { width: size, height: size, className: className, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", strokeWidth: 1.3, children: [_jsx("path", { d: "M1.28149 3.88831H14.7187", stroke: "currentColor" }), _jsx("path", { d: "M5.41602 3.88833V2.47962C5.41602 2.29282 5.52492 2.11366 5.71876 1.98157C5.9126 1.84948 6.17551 1.77527 6.44964 1.77527H9.55053C9.82466 1.77527 10.0876 1.84948 10.2814 1.98157C10.4753 2.11366 10.5842 2.29282 10.5842 2.47962V3.88833", stroke: "currentColor" }), _jsx("path", { d: "M2.57349 3.88831L3.19366 13.2943C3.21937 13.5502 3.33952 13.7872 3.53065 13.9593C3.72178 14.1313 3.97016 14.2259 4.22729 14.2246H11.7728C12.0299 14.2259 12.2783 14.1313 12.4694 13.9593C12.6605 13.7872 12.7807 13.5502 12.8064 13.2943L13.4266 3.88831", stroke: "currentColor" }), _jsx("path", { d: "M6.44946 6.98926V11.1238", stroke: "currentColor" }), _jsx("path", { d: "M9.55054 6.98926V11.1238", stroke: "currentColor" })] }));

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

@@ -0,0 +1,21 @@
+/**
+ * Capability-catalog client plugin, browser half. Mounts the generated
+ * `capabilityCatalog` Remote namespace and registers a standalone settings
+ * section (`settings.section`) named 工具与技能, which lists the registered
+ * skills as collapsible cards.
+ * @module @khorsheed/dsh-capability-catalog/client
+ */
+import type { Context } from '@deepseek-ai/cordis';
+import type { TypertRemoteNamespaceMap } from '@deepseek-ai/dsh-typert-protocol';
+/** The capabilityCatalog Remote namespace, as mounted by this plugin. */
+export type CapabilityCatalogRemote = TypertRemoteNamespaceMap['capabilityCatalog'];
+/** Required services: the slot ledger, the remote channel, and the copy. */
+export declare const inject: string[];
+/**
+ * Client plugin body: mount the Remote, register the dictionaries, and the
+ * settings card.
+ * @param ctx - client root context.
+ * @returns disposer unwinding the mounted Remote namespace.
+ */
+export declare function apply(ctx: Context): Promise<() => Promise<void>>;
+//# sourceMappingURL=index.d.ts.map

package/lib/types/client/index.js

@@ -0,0 +1,196 @@
+import catalogRemote from '@khorsheed/dsh-capability-catalog/remote';
+import { en, NS, zh } from './locales.js';
+import { refreshUntilSettled } from './settle.js';
+import { CapabilityCatalogCard } from './CapabilityCatalogCard.js';
+/** Required services: the slot ledger, the remote channel, and the copy. */
+export const inject = ['slots', 'remote', 'locale'];
+/**
+ * Client plugin body: mount the Remote, register the dictionaries, and the
+ * settings card.
+ * @param ctx - client root context.
+ * @returns disposer unwinding the mounted Remote namespace.
+ */
+export async function apply(ctx) {
+    const disposers = [];
+    try {
+        disposers.push(await ctx.remote.$mount(catalogRemote));
+    }
+    catch (error) {
+        ctx.logger.error(error);
+    }
+    const remote = ctx.get('remote.capabilityCatalog');
+    ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'capability-catalog: dictionaries');
+    const t = ctx.locale.bind(NS);
+    // A tiny external store holding the last snapshot; refreshed on open and on
+    // every mode switch. `presetId` names the MODE the grid is showing: it rides
+    // into the scope of the read, so the panel's data and its mode control can
+    // never disagree about which face is on screen.
+    let snapshot;
+    const listeners = new Set();
+    const refresh = async (presetId) => {
+        try {
+            const carried = await remote?.snapshotAt(presetId, undefined);
+            if (carried === undefined || !carried.ok)
+                return;
+            snapshot = carried.value;
+            for (const l of [...listeners])
+                l();
+        }
+        catch (error) {
+            ctx.logger.error(error);
+        }
+    };
+    const catalogHook = {
+        getSnapshot: () => snapshot,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        refresh,
+    };
+    // Every mode's face, read ONCE per session and shared by both consumers: the
+    // comparison grid and a detail modal asking where a plugin-provided skill is
+    // loadable. Reading it composes presets nothing has mounted, so a second
+    // caller must never pay for it again — hence the cache plus a single-flight
+    // promise (two opens racing would otherwise compose the same presets twice).
+    // `force` re-reads after a mutation that can change a face (an MCP connect, a
+    // skill write), and clears both slots so a failed read is retried too.
+    let facesCache;
+    let facesPending;
+    const modeFaces = async (force = false) => {
+        if (force) {
+            facesCache = undefined;
+            facesPending = undefined;
+        }
+        if (facesCache !== undefined)
+            return facesCache;
+        facesPending ??= (async () => {
+            try {
+                const carried = await remote?.modeFaces(undefined);
+                return carried !== undefined && carried.ok ? carried.value : [];
+            }
+            catch (error) {
+                ctx.logger.error(error);
+                return [];
+            }
+        })();
+        const faces = await facesPending;
+        facesCache = faces;
+        return faces;
+    };
+    /** Drop the cached faces after a write that can change what a mode holds. */
+    const invalidateModeFaces = () => {
+        facesCache = undefined;
+        facesPending = undefined;
+    };
+    const injected = {
+        hooks: {
+            catalog: catalogHook,
+        },
+        refresh,
+        // A skill write reaches the registry through the host's watcher, a moment
+        // after the operation returns; one refresh therefore reads stale rows.
+        refreshSettled: (settled, presetId) => refreshUntilSettled(() => snapshot, () => refresh(presetId), settled),
+        detail: async (name, presetId) => {
+            const carried = await remote?.detail(name, undefined, presetId);
+            return carried !== undefined && carried.ok ? carried.value : undefined;
+        },
+        readSkillFile: async (name, path, presetId) => {
+            const carried = await remote?.readSkillFile(name, path, undefined, presetId);
+            return carried !== undefined && carried.ok ? carried.value : undefined;
+        },
+        listDirSkills: async (dirPath) => {
+            const carried = await remote?.listDirSkills(dirPath);
+            return carried !== undefined && carried.ok ? carried.value : [];
+        },
+        setCredential: async (key, value) => {
+            const carried = await remote?.setCredential({ key, value });
+            return carried !== undefined && carried.ok ? carried.value : false;
+        },
+        addSkill: async (request) => {
+            const carried = await remote?.addSkill(request);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : { ok: false, error: 'remote absent' };
+        },
+        deleteSkill: async (name, presetId) => {
+            const carried = await remote?.deleteSkill(name, undefined, presetId);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : { ok: false, error: 'remote absent' };
+        },
+        pickDirectory: async () => {
+            const carried = await remote?.pickDirectory();
+            return carried !== undefined && carried.ok ? carried.value : null;
+        },
+        modeFaces,
+        mcpSnapshot: async () => {
+            const carried = await remote?.mcpSnapshot();
+            return carried !== undefined && carried.ok ? carried.value : { servers: [], tools: {}, credentials: [] };
+        },
+        mcpAdd: async (config) => {
+            const carried = await remote?.mcpAdd(config);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : false;
+        },
+        mcpRemove: async (serverName) => {
+            const carried = await remote?.mcpRemove(serverName);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : false;
+        },
+        mcpSetEnabled: async (serverName, enabled) => {
+            const carried = await remote?.mcpSetEnabled(serverName, enabled);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : undefined;
+        },
+        mcpSetCredential: async (ref, value) => {
+            const carried = await remote?.mcpSetCredential(ref, value);
+            return carried !== undefined && carried.ok ? carried.value : false;
+        },
+        mcpSetToolEnabled: async (serverName, tool, enabled) => {
+            const carried = await remote?.mcpSetToolEnabled(serverName, tool, enabled);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : undefined;
+        },
+        mcpDiscover: async (serverName) => {
+            const carried = await remote?.mcpDiscover(serverName);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : [];
+        },
+        presetScopeStatus: async () => {
+            const carried = await remote?.presetScopeStatus();
+            return carried !== undefined && carried.ok ? carried.value : undefined;
+        },
+        presetScopeRoster: async () => {
+            const carried = await remote?.presetScopeRoster();
+            return carried !== undefined && carried.ok ? carried.value : [];
+        },
+        presetScopeSet: async (name, presets) => {
+            const carried = await remote?.presetScopeSet({ name, presets });
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : { ok: false, error: 'remote absent' };
+        },
+        presetScopeAdopt: async (name, presets) => {
+            const carried = await remote?.presetScopeAdopt({ name, presets });
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : { ok: false, error: 'remote absent' };
+        },
+        presetScopeRelease: async (name) => {
+            const carried = await remote?.presetScopeRelease(name);
+            invalidateModeFaces();
+            return carried !== undefined && carried.ok ? carried.value : { ok: false, error: 'remote absent' };
+        },
+    };
+    void refresh();
+    ctx.slots.inject('settings.section', () => ctx.slots.register({
+        name: 'settings.section',
+        id: 'capabilities',
+        // After the Plugins section (order 15).
+        order: 20,
+        label: () => t('section.nav'),
+        locale: NS,
+        inject: () => injected,
+    }, CapabilityCatalogCard));
+    return async () => {
+        for (const dispose of disposers.reverse())
+            await dispose();
+    };
+}