@khorsheed/dsh-capability-catalog 0.1.95

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

@@ -0,0 +1,13 @@
+import type { CapabilityCatalogKey } from './locales.ts';
+import { type McpGroup } from './mcp-model.ts';
+/** One MCP server tile in the `mcp` segment: name + transport pill + tool count,
+ * with an external enable switch (managed only) and a click-through to the
+ * manage modal. Servers carry no description, so the body shows the tool count. */
+export declare function McpCard({ group, onOpen, onSetEnabled, onRemove, t }: {
+    group: McpGroup;
+    onOpen: () => void;
+    onSetEnabled: (serverName: string, enabled: boolean) => Promise<void>;
+    onRemove: (serverName: string) => Promise<void>;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=McpCards.d.ts.map

package/lib/types/client/McpCards.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconBrowseOutlineMedium, IconTrashOutlineMedium } from './icons.js';
+import { transportLabel } from './mcp-model.js';
+import css from './CapabilityCatalogCard.module.css';
+/** One MCP server tile in the `mcp` segment: name + transport pill + tool count,
+ * with an external enable switch (managed only) and a click-through to the
+ * manage modal. Servers carry no description, so the body shows the tool count. */
+export function McpCard({ group, onOpen, onSetEnabled, onRemove, t }) {
+    const transportText = transportLabel(t, group.transport ?? 'stdio');
+    const body = group.toolCount > 0 ? t('mcpToolCount').replace('{n}', String(group.toolCount)) : t('mcpNoTools');
+    return (_jsxs("div", { className: css.pvCard, children: [_jsxs("button", { type: "button", className: css.pvMain, onClick: onOpen, children: [_jsxs("span", { className: css.pvHead, children: [_jsx("span", { className: css.pvName, children: group.serverName }), _jsx("span", { className: `${css.pvTag} ${group.transport === 'stdio' ? css.tagStdio : group.transport === 'streamable-http' ? css.tagHttp : ''}`, children: transportText })] }), _jsx("span", { className: css.pvDesc, children: body }), _jsx("span", { className: css.pvSub, children: group.managed ? (group.enabled ? t('mcpEnabled') : t('mcpDisabled')) : 'MCP' })] }), _jsxs("div", { className: css.pvFoot, children: [group.managed ? (_jsxs("label", { className: `${css.switch} ${css.mcpFootToggle}`, onClick: (e) => e.stopPropagation(), title: t('mcpEnabled'), children: [_jsx("input", { type: "checkbox", checked: group.enabled, onChange: (e) => void onSetEnabled(group.serverName, e.target.checked), "aria-label": t('mcpEnabled') }), _jsx("span", { className: css.track }), _jsx("span", { className: css.thumb })] })) : null, _jsxs("span", { className: css.mcpCardActions, children: [_jsx("button", { type: "button", className: css.iconButton, onClick: onOpen, "aria-label": t('viewDetail'), title: t('viewDetail'), children: _jsx(IconBrowseOutlineMedium, { size: 16 }) }), group.managed ? (_jsx("button", { type: "button", className: `${css.iconButton} ${css.iconDanger}`, onClick: () => void onRemove(group.serverName), "aria-label": t('mcpRemove'), title: t('mcpRemove'), children: _jsx(IconTrashOutlineMedium, { size: 16 }) })) : null] })] })] }));
+}

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

@@ -0,0 +1,18 @@
+import type { CatalogToolRow } from '@khorsheed/dsh-capability-catalog/types';
+import type { CapabilityCatalogKey } from './locales.ts';
+import { type McpGroup } from './mcp-model.ts';
+/** Manage-modal for one MCP server (opened from the tile): config JSON,
+ * credential inputs, per-tool enable toggles, and discover. Clicking a tool row
+ * opens the SHARED tool detail modal (stacked on top) for its parameter schema —
+ * the manage modal stays server-level. */
+export declare function McpServerManageModal({ group, discovering, onClose, onSetCredential, onSetToolEnabled, onDiscover, onOpenTool, t }: {
+    group: McpGroup;
+    discovering: boolean;
+    onClose: () => void;
+    onSetCredential: (ref: string, value: string) => Promise<boolean>;
+    onSetToolEnabled: (serverName: string, tool: string, enabled: boolean) => Promise<void>;
+    onDiscover: (serverName: string) => Promise<void>;
+    onOpenTool: (tool: CatalogToolRow) => void;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=McpServerManageModal.d.ts.map

package/lib/types/client/McpServerManageModal.js

@@ -0,0 +1,63 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { IconChevronRightOutlineMedium, IconSearchOutlineMedium } from './icons.js';
+import { CredentialField } from './CredentialField.js';
+import { ModalShell } from './ModalShell.js';
+import { configDisplay } from './mcp-model.js';
+import css from './CapabilityCatalogCard.module.css';
+/** The CatalogToolRow the shared tool detail modal needs for one MCP tool row —
+ * live rows pass through; managed rows are synthesized with the server attribution. */
+function mcpToolRowFor(tool, serverName) {
+    if ('channel' in tool)
+        return tool;
+    return {
+        name: tool.name,
+        description: tool.description,
+        channel: 'mcp',
+        confidence: 'exact',
+        serverName,
+        ...(tool.parameters !== undefined ? { parameters: tool.parameters } : {}),
+    };
+}
+/** Manage-modal for one MCP server (opened from the tile): config JSON,
+ * credential inputs, per-tool enable toggles, and discover. Clicking a tool row
+ * opens the SHARED tool detail modal (stacked on top) for its parameter schema —
+ * the manage modal stays server-level. */
+export function McpServerManageModal({ group, discovering, onClose, onSetCredential, onSetToolEnabled, onDiscover, onOpenTool, t }) {
+    const [credValues, setCredValues] = useState({});
+    const [credState, setCredState] = useState({});
+    const [toolQuery, setToolQuery] = useState('');
+    const saveCred = async (ref) => {
+        const value = credValues[ref] ?? '';
+        if (value === '')
+            return;
+        setCredState((s) => ({ ...s, [ref]: 'saving' }));
+        const ok = await onSetCredential(ref, value);
+        setCredState((s) => ({ ...s, [ref]: ok ? 'ok' : 'fail' }));
+        if (ok)
+            setCredValues((s) => ({ ...s, [ref]: '' }));
+    };
+    const runDiscover = async () => {
+        await onDiscover(group.serverName);
+    };
+    const live = group.managed ? group.tools : group.liveTools;
+    const toolQ = toolQuery.trim().toLowerCase();
+    const visibleLive = toolQ === ''
+        ? live
+        : live.filter((tool) => tool.name.toLowerCase().includes(toolQ) || tool.description.toLowerCase().includes(toolQ));
+    // How many of this server's tools are enabled (live-only groups have no
+    // per-tool toggle, so all are treated as enabled).
+    const enabledCount = group.managed ? group.tools.filter((tool) => tool.enabled).length : live.length;
+    return (_jsx(ModalShell, { title: group.serverName, onClose: onClose, t: t, children: _jsxs("div", { className: css.mcpBody, children: [group.managed && group.config !== undefined ? (_jsxs(_Fragment, { children: [_jsxs("details", { className: css.mcpConfigDetails, children: [_jsxs("summary", { className: css.mcpConfigSummary, children: [_jsx("span", { className: css.mcpConfigChevron, children: _jsx(IconChevronRightOutlineMedium, { size: 14 }) }), t('mcpConfig')] }), _jsx("pre", { className: css.mcpConfig, children: configDisplay(group.config) })] }), group.credentials.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: css.mcpBlockLabel, children: t('credentials') }), _jsx("div", { className: css.confHint, children: t('mcpNeedsCred') }), group.credentials.map((decl) => {
+                                    const ref = decl.ref;
+                                    const state = credState[ref] ?? 'idle';
+                                    return (_jsx(CredentialField, { label: decl.label, configured: decl.configured, value: credValues[ref] ?? '', state: state, onChange: (value) => setCredValues((s) => ({ ...s, [ref]: value })), onSave: () => void saveCred(ref), t: t }, ref));
+                                })] })) : null] })) : null, _jsxs("div", { children: [_jsxs("div", { className: css.mcpToolBar, children: [_jsxs("div", { className: css.mcpToolLabelRow, children: [_jsxs("div", { className: css.mcpBlockLabel, children: [t('mcpTools'), _jsx("span", { className: css.tabCnt, children: live.length })] }), live.length > 0 ? _jsxs("span", { className: css.mcpEnabledCount, children: [enabledCount, "/", live.length, " ", t('mcpEnabledOf')] }) : null] }), live.length > 0 ? (_jsxs("div", { className: css.mcpToolSearchBox, children: [_jsx("span", { className: css.searchIcon, children: _jsx(IconSearchOutlineMedium, { size: 14 }) }), _jsx("input", { className: css.mcpToolSearch, type: "search", value: toolQuery, placeholder: t('mcpToolSearchPlaceholder'), "aria-label": t('mcpToolSearchPlaceholder'), onChange: (e) => setToolQuery(e.target.value) })] })) : null] }), live.length === 0 ? (_jsx("div", { className: css.empty, children: t('mcpEmptyTools') })) : visibleLive.length === 0 ? (_jsx("div", { className: css.empty, children: t('toolNoMatch') })) : (_jsx("div", { className: css.mcpTools, children: visibleLive.map((tool) => (_jsx(McpToolRow, { tool: tool, managed: group.managed, serverName: group.serverName, onOpen: (row) => onOpenTool(mcpToolRowFor(row, group.serverName)), onSetToolEnabled: group.managed ? onSetToolEnabled : undefined, t: t }, tool.name))) }))] }), group.managed ? (_jsx("div", { className: css.mcpActions, children: !group.enabled ? (_jsx("span", { className: css.confHint, children: t('mcpNotEnabled') })) : (_jsx("button", { type: "button", className: `${css.mcpActionBtn} ${css.primary}`, disabled: discovering, onClick: () => void runDiscover(), children: discovering ? t('mcpDiscovering') : t('mcpDiscover') })) })) : null] }) }));
+}
+/** One tool row inside a MCP server group: name/desc (click to open the shared
+ * tool detail modal) + a per-tool enable switch (managed servers only). */
+function McpToolRow({ tool, managed, serverName, onOpen, onSetToolEnabled, t }) {
+    const isMcp = managed && 'enabled' in tool;
+    const enabled = isMcp ? tool.enabled : true;
+    return (_jsx("div", { className: css.mcpToolCard, children: _jsxs("div", { className: css.mcpToolRow, children: [_jsxs("button", { type: "button", className: css.mcpToolMain, onClick: () => onOpen(tool), children: [_jsx("span", { className: css.mcpToolName, children: tool.name }), _jsx("span", { className: css.mcpToolDesc, children: tool.description })] }), isMcp ? (_jsxs("label", { className: `${css.switch} ${css.mcpToolToggle}`, onClick: (e) => e.stopPropagation(), title: t('mcpToolToggleHint'), children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (e) => void onSetToolEnabled?.(serverName, tool.name, e.target.checked), "aria-label": t('mcpEnabled') }), _jsx("span", { className: css.track }), _jsx("span", { className: css.thumb })] })) : null] }) }, tool.name));
+}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface MetadataItem {
+    readonly label: ReactNode;
+    readonly value: ReactNode;
+}
+/** Presentational wrapping metadata row shared by content-detail dialogs. */
+export declare function MetadataRow({ items }: {
+    items: readonly MetadataItem[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=MetadataRow.d.ts.map

package/lib/types/client/MetadataRow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import css from './CapabilityCatalogCard.module.css';
+/** Presentational wrapping metadata row shared by content-detail dialogs. */
+export function MetadataRow({ items }) {
+    return (_jsx("div", { className: css.meta, children: items.map((item, index) => (_jsxs("span", { className: css.metaItem, children: [_jsx("span", { className: css.metaKey, children: item.label }), _jsx("span", { className: css.metaVal, children: item.value })] }, index))) }));
+}

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import type { CapabilityCatalogKey } from './locales.ts';
+/** Shared modal chrome for every content dialog in the section (tool detail,
+ * skill detail, MCP manage, the two add forms): a centered overlay with a fixed
+ * head (title + ×) and a scrolling body. Esc and (optionally) mask-click close
+ * it — but only when it is the TOPMOST dialog in the DOM, so a stacked modal
+ * (tool detail over the MCP manage modal) never collapses the one beneath it. */
+export declare function ModalShell({ title, onClose, children, className, closeOnMask, t }: {
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string | undefined;
+    closeOnMask?: boolean;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ModalShell.d.ts.map

package/lib/types/client/ModalShell.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import css from './CapabilityCatalogCard.module.css';
+/** Shared modal chrome for every content dialog in the section (tool detail,
+ * skill detail, MCP manage, the two add forms): a centered overlay with a fixed
+ * head (title + ×) and a scrolling body. Esc and (optionally) mask-click close
+ * it — but only when it is the TOPMOST dialog in the DOM, so a stacked modal
+ * (tool detail over the MCP manage modal) never collapses the one beneath it. */
+export function ModalShell({ title, onClose, children, className, closeOnMask = true, t }) {
+    const overlayRef = useRef(null);
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            const me = overlayRef.current;
+            if (me === null)
+                return;
+            const dialogs = document.querySelectorAll('[role="dialog"][aria-modal="true"]');
+            if (dialogs[dialogs.length - 1] === me)
+                onClose();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [onClose]);
+    return (_jsx("div", { ref: overlayRef, className: css.overlay, role: "dialog", "aria-modal": "true", onClick: (e) => { if (closeOnMask && e.target === e.currentTarget)
+            onClose(); }, children: _jsxs("div", { className: className === undefined ? css.modal : `${css.modal} ${className}`, children: [_jsxs("div", { className: css.modalHead, children: [_jsx("h3", { className: css.modalTitle, children: title }), _jsx("button", { type: "button", className: css.modalClose, onClick: onClose, "aria-label": t('detailClose'), children: "\u00D7" })] }), _jsx("div", { className: css.modalBody, children: children })] }) }));
+}

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

@@ -0,0 +1,38 @@
+/**
+ * The mode chips on a card in the comparison view: which modes load THIS
+ * capability, each chip a one-click jump into that mode.
+ *
+ * The chips are buttons OUTSIDE the card's main button — a nested button is
+ * invalid HTML and would make one click do two things — so the card's open
+ * action and the mode jump stay separate.
+ *
+ * DENSITY is the whole design problem here. An instance can supply seven or
+ * more presets, and the most common capability is in most of them, so a literal
+ * chip per mode turns the row into a two-line wall of pills that says very
+ * little. Three shapes cover the cases, in this order:
+ *
+ * - **in every readable mode** → ONE summary pill (`全部模式 · 7`). This is the
+ *   strongest and most frequent answer, and it is exactly the case where naming
+ *   the modes adds nothing; the title still lists them.
+ * - **a few** (up to `VISIBLE_CHIPS`) → the chips themselves.
+ * - **many, but not all** → the first two chips plus `+N`, which expands the row
+ *   IN PLACE. A hover tooltip would answer "which ones?" but not "take me
+ *   there"; expanding keeps every chip's jump.
+ * @module @khorsheed/dsh-capability-catalog/client/mode-chips
+ */
+import type { CatalogModeChip } from './mode-model.ts';
+import type { CapabilityCatalogKey } from './locales.ts';
+/**
+ * The chip row, or nothing when the comparison attributed no mode (a managed
+ * skill no readable mode delivers, say).
+ * @param modes - the modes that load this capability, in roster order.
+ * @param total - how many modes the comparison actually read (`all` = this many).
+ */
+export declare function ModeChips({ modes, total, onSelect, t }: {
+    modes: readonly CatalogModeChip[];
+    /** Modes read by the comparison; the row says `全部模式 · N` when this many. */
+    total: number;
+    onSelect: (id: string) => void;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=ModeChips.d.ts.map

package/lib/types/client/ModeChips.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The mode chips on a card in the comparison view: which modes load THIS
+ * capability, each chip a one-click jump into that mode.
+ *
+ * The chips are buttons OUTSIDE the card's main button — a nested button is
+ * invalid HTML and would make one click do two things — so the card's open
+ * action and the mode jump stay separate.
+ *
+ * DENSITY is the whole design problem here. An instance can supply seven or
+ * more presets, and the most common capability is in most of them, so a literal
+ * chip per mode turns the row into a two-line wall of pills that says very
+ * little. Three shapes cover the cases, in this order:
+ *
+ * - **in every readable mode** → ONE summary pill (`全部模式 · 7`). This is the
+ *   strongest and most frequent answer, and it is exactly the case where naming
+ *   the modes adds nothing; the title still lists them.
+ * - **a few** (up to `VISIBLE_CHIPS`) → the chips themselves.
+ * - **many, but not all** → the first two chips plus `+N`, which expands the row
+ *   IN PLACE. A hover tooltip would answer "which ones?" but not "take me
+ *   there"; expanding keeps every chip's jump.
+ * @module @khorsheed/dsh-capability-catalog/client/mode-chips
+ */
+import { useState } from 'react';
+import css from './CapabilityCatalogCard.module.css';
+/** How many mode chips a card shows before collapsing the rest into `+N`. */
+const VISIBLE_CHIPS = 2;
+/**
+ * The chip row, or nothing when the comparison attributed no mode (a managed
+ * skill no readable mode delivers, say).
+ * @param modes - the modes that load this capability, in roster order.
+ * @param total - how many modes the comparison actually read (`all` = this many).
+ */
+export function ModeChips({ modes, total, onSelect, t }) {
+    const [expanded, setExpanded] = useState(false);
+    if (modes.length === 0)
+        return null;
+    const names = modes.map(mode => mode.label).join('、');
+    const inEveryMode = modes.length > VISIBLE_CHIPS && modes.length >= total;
+    const hidden = modes.length - VISIBLE_CHIPS;
+    return (_jsxs("div", { className: css.pvModes, children: [_jsx("span", { className: css.pvModesLabel, children: t('modeIn') }), inEveryMode ? (_jsx("span", { className: css.modeChipAll, title: names, children: t('modeEvery').replace('{n}', String(modes.length)) })) : ((expanded ? modes : modes.slice(0, VISIBLE_CHIPS)).map(mode => (_jsx("button", { type: "button", className: css.modeChip, "data-default": mode.isDefault ? 'true' : undefined, title: t('modeChipHint'), onClick: () => onSelect(mode.id), children: mode.label }, mode.id)))), inEveryMode || hidden <= 0 ? null : (_jsx("button", { type: "button", className: css.modeChipMore, title: names, "aria-expanded": expanded, onClick: () => setExpanded(value => !value), children: expanded ? t('modeCollapse') : t('modeMore').replace('{n}', String(hidden)) }))] }));
+}

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

@@ -0,0 +1,11 @@
+import type { CatalogJsonValue } from '@khorsheed/dsh-capability-catalog/types';
+import type { CapabilityCatalogKey } from './locales.ts';
+/** Reusable parameter view: a schema tree with a 结构/JSON toggle and a
+ * one-click 复制 JSON, falling back to the raw JSON block when the schema is not
+ * an object with properties. Used by the (shared) tool detail modal. */
+export declare function SchemaView({ parameters, title, t }: {
+    parameters: CatalogJsonValue | undefined;
+    title?: string;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SchemaView.d.ts.map

package/lib/types/client/SchemaView.js

@@ -0,0 +1,143 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { IconChevronDownOutlineMedium, IconChevronRightOutlineMedium } from './icons.js';
+import css from './CapabilityCatalogCard.module.css';
+/** Pretty-print a tool's parameter JSON (or a no-params hint). */
+function formatParams(parameters, t) {
+    if (parameters === undefined || parameters === null)
+        return t('toolNoParams');
+    if (typeof parameters !== 'object')
+        return String(parameters);
+    if (Array.isArray(parameters))
+        return parameters.length === 0 ? t('toolNoParams') : JSON.stringify(parameters, null, 2);
+    if (Object.keys(parameters).length === 0)
+        return t('toolNoParams');
+    try {
+        return JSON.stringify(parameters, null, 2);
+    }
+    catch {
+        return t('toolNoParams');
+    }
+}
+/** The candidate child schema for a property (array items object, or object with
+ * properties) — used to render an expandable nested table. */
+function nestedSchemaOf(schema) {
+    if (schema === null || typeof schema !== 'object' || Array.isArray(schema))
+        return undefined;
+    const s = schema;
+    if (s['type'] === 'array') {
+        const items = s['items'];
+        if (items !== null && typeof items === 'object' && typeof items['properties'] === 'object') {
+            return items;
+        }
+        return undefined;
+    }
+    if (typeof s['properties'] === 'object' && s['properties'] !== null)
+        return schema;
+    return undefined;
+}
+/** The property entries of an object schema (or null when not tabular). */
+function schemaProps(schema) {
+    if (schema === null || typeof schema !== 'object' || Array.isArray(schema))
+        return null;
+    const props = schema['properties'];
+    if (typeof props !== 'object' || props === null)
+        return null;
+    const entries = Object.entries(props);
+    return entries.length > 0 ? entries : null;
+}
+/** The required-name set of an object schema. */
+function requiredNames(schema) {
+    if (schema === null || typeof schema !== 'object' || Array.isArray(schema))
+        return new Set();
+    const required = schema['required'];
+    return new Set(Array.isArray(required) ? required : []);
+}
+/** A compact type label (array<itemType> / object / string / …). */
+function typeLabel(schema) {
+    const t = schema['type'];
+    if (Array.isArray(t))
+        return t.join('|');
+    if (t === 'array') {
+        const items = schema['items'];
+        if (items !== null && typeof items === 'object') {
+            const it = items['type'];
+            if (typeof it === 'string')
+                return `array<${it}>`;
+            if (typeof items['properties'] === 'object')
+                return 'array<object>';
+        }
+        return 'array';
+    }
+    if (t === undefined && typeof schema['properties'] === 'object')
+        return 'object';
+    return typeof t === 'string' ? t : '';
+}
+/** True when a property schema carries visible nested children (array-of-object
+ * items or object properties). Drives both the chevron and the level gutter. */
+function hasNestedKids(schema) {
+    const nested = nestedSchemaOf(schema);
+    return nested !== undefined && schemaProps(nested) !== null;
+}
+/** One property node in the schema tree: a head row (chevron + mono name +
+ * required `*` + type chip) with the description on a second line aligned to
+ * the name, and nested children inside a guide-lined indent. A parent node's
+ * whole head row is the toggle button (big hit target, one focus stop). Levels
+ * where NO sibling is expandable drop the chevron gutter entirely, so flat
+ * schemas are not indented for nothing. */
+function SchemaNode({ name, schema, required, path, gutter, collapsed, onToggle, t }) {
+    const nested = nestedSchemaOf(schema);
+    const kids = nested === undefined ? null : schemaProps(nested);
+    const kidRequired = nested === undefined ? null : requiredNames(nested);
+    const open = !collapsed.has(path);
+    const type = typeLabel(schema);
+    const desc = typeof schema['description'] === 'string' && schema['description'] !== '' ? schema['description'] : undefined;
+    const head = (_jsxs(_Fragment, { children: [_jsx("span", { className: css.schemaName, children: name }), required ? _jsx("span", { className: css.schemaReq, title: t('paramRequired'), children: "*" }) : null, type !== '' ? _jsx("span", { className: css.schemaType, children: type }) : null] }));
+    return (_jsxs("div", { className: css.schemaNode, children: [kids !== null ? (_jsxs("button", { type: "button", className: css.schemaHeadBtn, onClick: () => onToggle(path), "aria-expanded": open, children: [_jsx("span", { className: css.schemaChevron, children: open ? _jsx(IconChevronDownOutlineMedium, { size: 12 }) : _jsx(IconChevronRightOutlineMedium, { size: 12 }) }), head] })) : (_jsxs("div", { className: css.schemaHead, children: [gutter ? _jsx("span", { className: css.schemaChevronSpacer }) : null, head] })), desc !== undefined ? _jsx("div", { className: css.schemaDesc, "data-gutter": gutter || undefined, children: desc }) : null, kids !== null && open ? (_jsx("div", { className: css.schemaKids, children: kids.map(([kidName, kidSchema]) => {
+                    const kidPath = `${path}.${kidName}`;
+                    return (_jsx(SchemaNode, { name: kidName, schema: kidSchema, required: kidRequired?.has(kidName) ?? false, path: kidPath, gutter: kids.some(([, k]) => hasNestedKids(k)), collapsed: collapsed, onToggle: onToggle, t: t }, kidPath));
+                }) })) : null] }));
+}
+/** The schema tree: one SchemaNode per top-level property. All levels start
+ * EXPANDED (state tracks the collapsed set) — the guide lines keep the full
+ * hierarchy readable at a glance, and deep MCP schemas collapse per node. */
+function SchemaTree({ schema, t }) {
+    const [collapsed, setCollapsed] = useState(() => new Set());
+    const toggle = (key) => {
+        setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    };
+    const props = schemaProps(schema);
+    if (props === null)
+        return null;
+    const required = requiredNames(schema);
+    return (_jsx("div", { className: css.schemaTree, children: props.map(([name, p]) => (_jsx(SchemaNode, { name: name, schema: p, required: required.has(name), path: name, gutter: props.some(([, prop]) => hasNestedKids(prop)), collapsed: collapsed, onToggle: toggle, t: t }, name))) }));
+}
+/** Reusable parameter view: a schema tree with a 结构/JSON toggle and a
+ * one-click 复制 JSON, falling back to the raw JSON block when the schema is not
+ * an object with properties. Used by the (shared) tool detail modal. */
+export function SchemaView({ parameters, title, t }) {
+    const hasTree = parameters !== undefined && parameters !== null && schemaProps(parameters) !== null;
+    const [view, setView] = useState('tree');
+    const [copied, setCopied] = useState(false);
+    useEffect(() => { if (!hasTree)
+        setView('json'); }, [hasTree]);
+    const paramsJson = useMemo(() => formatParams(parameters, t), [parameters, t]);
+    const copyJson = async () => {
+        if (parameters === undefined || parameters === null)
+            return;
+        try {
+            await navigator.clipboard.writeText(JSON.stringify(parameters, null, 2));
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        }
+        catch { /* clipboard may be blocked */ }
+    };
+    return (_jsxs("div", { children: [_jsxs("div", { className: css.toolParamsHead, children: [title !== undefined ? _jsx("span", { className: css.toolDetailParamsTitle, children: title }) : _jsx("span", {}), _jsxs("span", { className: css.toolParamsActions, children: [hasTree ? (_jsxs("span", { className: css.toolParamsTabs, children: [_jsx("button", { type: "button", className: css.toolParamsTab, "data-active": view === 'tree', onClick: () => setView('tree'), children: t('paramsTree') }), _jsx("button", { type: "button", className: css.toolParamsTab, "data-active": view === 'json', onClick: () => setView('json'), children: t('paramsJson') })] })) : null, _jsx("button", { type: "button", className: css.toolCopyBtn, disabled: parameters === undefined || parameters === null, onClick: () => void copyJson(), children: copied ? t('copied') : t('copyJson') })] })] }), parameters === undefined || parameters === null ? (_jsx("div", { className: css.toolParamsEmpty, children: t('toolNoParams') })) : hasTree && view === 'tree' ? (_jsx(SchemaTree, { schema: parameters, t: t })) : (_jsx("div", { className: css.toolParamsBody, children: paramsJson }))] }));
+}

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

@@ -0,0 +1,28 @@
+import type { CatalogSkillRow } from '@khorsheed/dsh-capability-catalog/types';
+import type { CatalogModeChip } from './mode-model.ts';
+import type { CapabilityCatalogKey } from './locales.ts';
+/** Preview card in the skills grid (Agent-preset anatomy): name + source tag,
+* two-line description, provider subtitle, foot actions. In the comparison view
+* a chip row names the modes that load it. */
+export declare function SkillPreviewCard({ skill, tag, modes, modeTotal, onMode, onOpen, onDelete, t }: {
+    skill: CatalogSkillRow;
+    /** Overrides the source tag (the management surface shows a managed skill's
+     * preset scope there, where that policy is the point). */
+    tag?: string | undefined;
+    /** The modes that load this skill (comparison view only). */
+    modes?: readonly CatalogModeChip[] | undefined;
+    /** How many modes the comparison read, so an all-modes row can say so. */
+    modeTotal?: number | undefined;
+    onMode: (id: string) => void;
+    onOpen: () => void;
+    onDelete: () => void;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element;
+/** Second-step modal confirming a destructive skill delete. */
+export declare function DeleteSkillConfirm({ name, onCancel, onConfirm, t }: {
+    name: string;
+    onCancel: () => void;
+    onConfirm: () => void | Promise<void>;
+    t: (key: CapabilityCatalogKey) => string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SkillCards.d.ts.map

package/lib/types/client/SkillCards.js

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Modal } from '@deepseek-ai/dsh-client-ui-primitives';
+import { IconBrowseOutlineMedium, IconTrashOutlineMedium } from './icons.js';
+import { ModeChips } from './ModeChips.js';
+import css from './CapabilityCatalogCard.module.css';
+/** Skill `source` buckets that resolve to a local file the catalog may delete;
+ * everything else (bundled/runtime/skill-badge) is protected and not deletable. */
+const DELETABLE_SOURCES = new Set(['user-dsh', 'user-agents', 'project-dsh', 'project-agents', 'custom']);
+/** Short source tag shown on the card: 内置 / 插件 / 项目 / 自定义 / 用户. */
+const skillSourceTag = (source, t) => {
+    switch (source) {
+        case 'bundled': return t('builtin');
+        case 'runtime': return t('toolPlugin');
+        case 'project-dsh':
+        case 'project-agents': return t('sourceProject');
+        case 'custom': return t('sourceCustom');
+        case 'user-dsh':
+        case 'user-agents': return t('sourceUser');
+        default: return source;
+    }
+};
+/** Preview card in the skills grid (Agent-preset anatomy): name + source tag,
+* two-line description, provider subtitle, foot actions. In the comparison view
+* a chip row names the modes that load it. */
+export function SkillPreviewCard({ skill, tag, modes, modeTotal, onMode, onOpen, onDelete, t }) {
+    const deletable = DELETABLE_SOURCES.has(skill.source);
+    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: skill.name }), _jsx("span", { className: css.pvTag, children: tag ?? skillSourceTag(skill.source, t) })] }), _jsx("span", { className: css.pvDesc, children: skill.description }), _jsx("span", { className: css.pvSub, children: skill.provider })] }), modes === undefined ? null : _jsx(ModeChips, { modes: modes, total: modeTotal ?? 0, onSelect: onMode, t: t }), _jsxs("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 }) }), deletable ? (_jsx("button", { type: "button", className: `${css.iconButton} ${css.iconDanger}`, onClick: onDelete, "aria-label": t('delete'), title: t('delete'), children: _jsx(IconTrashOutlineMedium, { size: 16 }) })) : null] })] }));
+}
+/** Second-step modal confirming a destructive skill delete. */
+export function DeleteSkillConfirm({ name, onCancel, onConfirm, t }) {
+    const [busy, setBusy] = useState(false);
+    const submit = async () => {
+        setBusy(true);
+        try {
+            await onConfirm();
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsx(Modal, { open: true, onClose: onCancel, title: t('delete'), closeLabel: t('close'), description: `${t('confirmDelete')}「${name}」？`, footer: (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: onCancel, children: t('cancel') }), _jsx(Button, { variant: "primary", disabled: busy, onClick: () => void submit(), children: t('delete') })] })) }));
+}

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

@@ -0,0 +1,69 @@
+import type { CatalogPresetOption, CatalogPresetScopeEditResult, CatalogSkillDetail, CatalogSkillFileRead } from '@khorsheed/dsh-capability-catalog/types';
+import type { CatalogModeChip } from './mode-model.ts';
+import type { CapabilityCatalogKey } from './locales.ts';
+export type DetailClaim = {
+    status: 'idle' | 'loading' | 'done';
+    data: CatalogSkillDetail | undefined;
+};
+/** The preset-scope editor's data face for one skill, when the deployment has one. */
+export interface ScopeEditor {
+    /** Whether the skill lives in the plugin's managed root. */
+    managed: boolean;
+    /** The presets its frontmatter currently declares (empty = every preset). */
+    declared: readonly string[];
+    /** A default root still supplying this name, when delivery is refused. */
+    conflict?: string;
+    /** Whether the skill can be adopted out of a default root. */
+    adoptable: boolean;
+    /**
+     * Whether THIS skill's preset scope is writable at all. False for a
+     * plugin-provided or built-in skill: its modes follow the plugin's own row
+     * in each mode's composition, and the host refuses a scope write on it.
+     */
+    writable: boolean;
+    /** The plugin that provides a non-writable skill, when the row names one. */
+    provider?: string;
+    /** Every preset the roster supplies. */
+    options: readonly CatalogPresetOption[];
+    save: (presets: readonly string[]) => Promise<CatalogPresetScopeEditResult>;
+    adopt: (presets: readonly string[]) => Promise<CatalogPresetScopeEditResult>;
+    release: () => Promise<CatalogPresetScopeEditResult>;
+}
+/** Centered modal with a skill's full detail, source browser, metadata and credential config. */
+export declare function SkillDetailModal({ name, claim, onClose, setCredential, readSkillFile, t, scope, modeChips, modesLoading, onModeSelect }: {
+    name: string;
+    claim: DetailClaim;
+    onClose: () => void;
+    setCredential: (key: string, value: string) => Promise<boolean>;
+    readSkillFile: (name: string, path: string) => Promise<CatalogSkillFileRead | undefined>;
+    t: (key: CapabilityCatalogKey) => string;
+    scope?: ScopeEditor | undefined;
+    /** The modes that load this skill, when its scope section cannot say (a
+     * non-writable skill); undefined = not queried, [] = queried and in none. */
+    modeChips?: readonly CatalogModeChip[] | undefined;
+    /** Whether the ask is still in flight. */
+    modesLoading?: boolean;
+    onModeSelect?: (id: string) => void;
+}): import("react").JSX.Element;
+/**
+ * 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 declare function hasUnrenderedMetadata(metadataText: string): boolean;
+/**
+ * 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 declare function redactMetadataSecrets(value: unknown): unknown;
+/** Pretty-print a JSON metadata string for display, with secret-shaped values redacted. */
+export declare function formatMetadata(metadataText: string): string;
+//# sourceMappingURL=SkillDetailModal.d.ts.map