@khorsheed/dsh-local-agent-claude-code 0.2.0-rc.1 → 0.2.0-rc.3

package/lib/types/client/SettingsCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
 import { IconChevronDownOutlineMedium } from './icons.js';
 // The shared auth block is bundled from the family core's source — the
@@ -7,10 +7,9 @@ import { IconChevronDownOutlineMedium } from './icons.js';
 // the block carries no runtime identity to share.
 import { ProviderAuthBlock, } from '@khorsheed/dsh-local-agent/src/client/ProviderAuthBlock.tsx';
 import { AuthStatusDot } from '@khorsheed/dsh-local-agent/src/client/AuthStatusDot.tsx';
-import { useHarnessAuthStatus } from '@khorsheed/dsh-local-agent/src/client/auth-status.ts';
+import { publishAuthStatus, useHarnessAuthStatus } from '@khorsheed/dsh-local-agent/src/client/auth-status.ts';
+import { ModelListSection } from '@khorsheed/dsh-local-agent/src/client/ModelListSection.tsx';
 import css from './SettingsCard.module.css';
-/** How many previously-saved model identifiers the input suggests. */
-const RECENT_MODEL_LIMIT = 5;
 /**
  * The staged card state both settings surfaces share: the resident-mode and
  * model edits write through the bound settingsScope immediately
@@ -22,145 +21,111 @@ const RECENT_MODEL_LIMIT = 5;
  * @param useSettings - the bound settings hook from the inject hooks compartment.
  * @param scope - the bound settings scope the writes go through.
  * @param modelInfo - the harness's memberless model surface read; absent degrades to the bare input.
+ * @param endpointAuth - the harness's endpoint credential face; absent hides the credential form.
  * @param t - copy.
  */
-function useCardState(active, useSettings, scope, modelInfo, t) {
+function useCardState(active, useSettings, scope, endpointAuth) {
     const snapshot = useSettings(value => value);
     const [saved, setSaved] = useState(false);
     const [error, setError] = useState(false);
     const ready = snapshot.status === 'ready' && snapshot.writable;
     const live = snapshot.value?.live ?? false;
-    // The model input is a DRAFT until saved: `null` means "showing whatever the
-    // scope holds", so an external write (another tab, a YAML reload) still
-    // reaches the field while the user is not typing in it.
-    const storedModel = snapshot.value?.model ?? '';
-    const recentModels = snapshot.value?.recentModels ?? [];
-    const [modelDraft, setModelDraft] = useState(null);
-    const [modelSaved, setModelSaved] = useState(false);
-    const [modelError, setModelError] = useState(false);
-    const modelValue = modelDraft ?? storedModel;
-    // The broker's model surface: fetched while the surface is active and after
-    // every save (the save changes the settings layer the surface reports). `null`
-    // means the gateway answered null (a brokerless core) or the read was
-    // never wired — the card then degrades to the bare input, no effective
-    // line, the recent-models suggestions.
-    const [modelSurface, setModelSurface] = useState(null);
+    // The endpoint credential form talks to the harness's OWN credential store
+    // through the endpointAuth face — never the settings scope, so no key ever
+    // lands in the profile patch document. baseUrl echoes (it is not a
+    // secret); the two keys never do — a set key shows as a "configured"
+    // placeholder and the input holds only the draft of a REPLACEMENT. A blank
+    // write clears the field (the config layer then answers for it again).
+    const [endpointState, setEndpointState] = useState(null);
+    const [baseUrlDraft, setBaseUrlDraft] = useState(null);
+    const [apiKeyDraft, setApiKeyDraft] = useState(null);
+    const [authTokenDraft, setAuthTokenDraft] = useState(null);
+    const [endpointSaved, setEndpointSaved] = useState(false);
+    const [endpointError, setEndpointError] = useState(false);
+    const endpointDirty = baseUrlDraft !== null || apiKeyDraft !== null || authTokenDraft !== null;
+    const endpointUnavailable = endpointAuth === undefined || endpointState === 'unavailable';
+    const endpointLoading = !endpointUnavailable && endpointState === null;
+    const apiKeyConfigured = endpointState !== null && endpointState !== 'unavailable' && endpointState.apiKeySet;
+    const authTokenConfigured = endpointState !== null && endpointState !== 'unavailable' && endpointState.authTokenSet;
     useEffect(() => {
-        if (!active || modelInfo === undefined)
+        if (!active || endpointAuth === undefined)
             return;
         let stale = false;
-        void modelInfo().then((info) => { if (!stale)
-            setModelSurface(info ?? null); }, () => { if (!stale)
-            setModelSurface(null); });
+        void endpointAuth.read().then((state) => { if (!stale)
+            setEndpointState(state ?? 'unavailable'); }, () => { if (!stale)
+            setEndpointState('unavailable'); });
         return () => { stale = true; };
-    }, [active, modelSaved, modelInfo]);
-    /**
-     * Commit the model field. A blank value UNSETS the key rather than storing
-     * an empty string, so the field re-inherits the YAML composition base — and
-     * with no base, the harness is back to passing no model at all.
-     */
-    const saveModel = () => {
-        const next = modelValue.trim();
-        setModelSaved(false);
-        setModelError(false);
-        const write = next === '' ? scope.unset('model') : scope.set('model', next);
-        void write.then(async () => {
-            // Most-recent-first, deduplicated, capped: the suggestion list is a
-            // memory of what this instance has actually run, never a catalog.
-            if (next !== '') {
-                await scope.set('recentModels', [next, ...recentModels.filter(value => value !== next)].slice(0, RECENT_MODEL_LIMIT));
-            }
-            setModelDraft(null);
-            setModelSaved(true);
-        }, () => { setModelError(true); });
-    };
+    }, [active, endpointAuth, endpointSaved]);
     const write = (field, value) => {
         setSaved(false);
         setError(false);
         void scope.set(field, value).then(() => { setSaved(true); }, () => { setError(true); });
     };
-    // The suggestion vocabulary: the broker's deduped union when the surface
-    // answered, the card's own recent-models memory when it did not. Never a
-    // hardcoded catalog. A non-empty list turns the field into a select-like
-    // control: the always-visible chevron opens the same vocabulary as a menu.
-    const choices = modelSurface !== null ? modelSurface.choices : recentModels;
-    const [modelMenuOpen, setModelMenuOpen] = useState(false);
-    const [modelMenuUp, setModelMenuUp] = useState(false);
-    const modelFieldRef = useRef(null);
-    // Click-outside and Esc close the model menu (the member composer's picker
-    // pattern); the upward flip is measured when the menu opens.
-    useEffect(() => {
-        if (!modelMenuOpen)
+    // The credential save: one `configureEndpoint` call carrying only the
+    // dirty fields (a blank draft clears its field); the answer is the
+    // post-write resolved state, so the chips and the auth probe flip without
+    // a re-read.
+    const saveEndpoint = () => {
+        if (endpointAuth === undefined)
             return;
-        const onPointerDown = (event) => {
-            if (modelFieldRef.current?.contains(event.target) === true)
-                return;
-            setModelMenuOpen(false);
-        };
-        const onKeyDown = (event) => {
-            if (event.key === 'Escape')
-                setModelMenuOpen(false);
-        };
-        document.addEventListener('mousedown', onPointerDown);
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('mousedown', onPointerDown);
-            document.removeEventListener('keydown', onKeyDown);
+        setEndpointSaved(false);
+        setEndpointError(false);
+        const fields = {
+            ...baseUrlDraft !== null ? { baseUrl: baseUrlDraft.trim() === '' ? null : baseUrlDraft.trim() } : {},
+            ...apiKeyDraft !== null ? { apiKey: apiKeyDraft.trim() === '' ? null : apiKeyDraft.trim() } : {},
+            ...authTokenDraft !== null ? { authToken: authTokenDraft.trim() === '' ? null : authTokenDraft.trim() } : {},
         };
-    }, [modelMenuOpen]);
-    const toggleModelMenu = () => {
-        if (!modelMenuOpen) {
-            const rect = modelFieldRef.current?.getBoundingClientRect();
-            if (rect !== undefined) {
-                const spaceBelow = window.innerHeight - rect.bottom;
-                setModelMenuUp(spaceBelow < 260 && rect.top > spaceBelow);
+        void endpointAuth.write(fields).then((state) => {
+            if (state !== undefined && state !== null) {
+                setEndpointState(state);
+                // Flip the status dot with the write's own answer — the next
+                // scheduled probe confirms it, but the save reads as done NOW.
+                publishAuthStatus('claude-code', state.apiKeySet || state.authTokenSet ? 'authenticated' : 'anonymous');
             }
-        }
-        setModelMenuOpen(open => !open);
+            setBaseUrlDraft(null);
+            setApiKeyDraft(null);
+            setAuthTokenDraft(null);
+            setEndpointSaved(true);
+        }, () => { setEndpointError(true); });
     };
-    // An unset field DISPLAYS the default it follows (dimmed, as the input's
-    // placeholder — inherited, never pinned), down the chain the broker
-    // reports: the scoped config's model, then a cli-builtin source that still
-    // names its default (a harness catalog's isDefault entry), then the last
-    // observed model the records know, and last the generic copy.
-    const inheritedModel = modelSurface !== null && modelSurface.cliDefault !== undefined && modelSurface.cliDefault !== ''
-        ? modelSurface.cliDefault
-        : modelSurface !== null && modelSurface.source === 'cli-builtin' && modelSurface.effective !== undefined && modelSurface.effective !== ''
-            ? modelSurface.effective
-            : modelSurface !== null && modelSurface.lastObserved !== undefined && modelSurface.lastObserved !== ''
-                ? modelSurface.lastObserved
-                : undefined;
-    const modelPlaceholder = inheritedModel ?? t('model.placeholder');
-    // The menu's leading item: the same chain, spelled as the follow-default
-    // choice. It reads checked while the field is unset, and picking it clears
-    // the draft back to follow-default (a save then unsets the key).
-    const modelDefaultItem = modelSurface !== null && modelSurface.cliDefault !== undefined && modelSurface.cliDefault !== ''
-        ? t('model.menuDefaultCliConfig', { model: modelSurface.cliDefault })
-        : modelSurface !== null && modelSurface.source === 'cli-builtin' && modelSurface.effective !== undefined && modelSurface.effective !== ''
-            ? t('model.menuDefaultCliBuiltin', { model: modelSurface.effective })
-            : modelSurface !== null && modelSurface.lastObserved !== undefined && modelSurface.lastObserved !== ''
-                ? t('model.menuDefaultLastObserved', { model: modelSurface.lastObserved })
-                : t('model.menuDefault');
     return {
-        snapshot, saved, error, ready, live, storedModel, modelValue, modelSaved,
-        modelError, choices, modelMenuOpen, modelMenuUp, modelFieldRef,
-        modelPlaceholder, modelDefaultItem, saveModel, write, toggleModelMenu,
-        setModelDraft, setModelMenuOpen,
+        snapshot, saved, error, ready, live, write,
+        endpointState, endpointUnavailable, endpointLoading,
+        baseUrlValue: baseUrlDraft ?? (endpointState !== null && endpointState !== 'unavailable' ? endpointState.baseUrl ?? '' : ''),
+        apiKeyConfigured, authTokenConfigured, apiKeyDraft, authTokenDraft,
+        endpointSaved, endpointError, endpointDirty,
+        saveEndpoint, setBaseUrlDraft, setApiKeyDraft, setAuthTokenDraft,
     };
 }
-/** The card body both settings surfaces share: the auth block, the default-model block, and the resident-mode block. */
-function CardBody({ state, auth, authT, renderModelPicker, useSessions, t }) {
-    const { snapshot, saved, error, ready, live, storedModel, modelValue, modelSaved, modelError, choices, modelMenuOpen, modelMenuUp, modelFieldRef, modelPlaceholder, modelDefaultItem, saveModel, write, toggleModelMenu, setModelDraft, setModelMenuOpen, } = state;
-    // The free-text input, single-sourced for both presentations: bare when no
-    // vocabulary exists (a fresh install degrades to exactly the pre-picker
-    // field), or inside the select-like field next to its chevron. No datalist:
-    // the chevron menu is the single choice list.
-    const modelInputElement = (_jsx("input", { type: "text", className: css.modelInput, value: modelValue, placeholder: modelPlaceholder, "aria-label": t('model.title'), disabled: !ready, onChange: (event) => { setModelDraft(event.target.value); } }));
-    return (_jsxs("div", { className: css.body, children: [_jsxs("section", { className: css.block, children: [_jsx("h3", { className: css.blockTitle, children: t('auth.title') }), _jsx(ProviderAuthBlock, { harness: { id: 'claude-code', label: 'Claude Code' }, useSessions: useSessions, status: auth.status, runCommand: auth.runCommand, t: authT })] }), _jsxs("section", { className: css.block, children: [_jsxs("h3", { className: css.blockTitle, children: [t('model.title'), _jsx(Tooltip, { label: t('model.info'), side: "bottom", maxWidth: 360, children: _jsx("button", { type: "button", className: css.info, "aria-label": t('model.info.aria'), children: "\u24D8" }) })] }), _jsxs("div", { className: css.row, children: [renderModelPicker?.({ value: modelValue, onChange: setModelDraft, disabled: !ready, defaultLabel: modelDefaultItem }) ?? (choices.length > 0 ? (_jsxs("div", { className: css.modelField, ref: modelFieldRef, children: [modelInputElement, _jsx("button", { type: "button", className: css.modelMenuButton, "aria-label": t('model.menu'), "aria-haspopup": "menu", "aria-expanded": modelMenuOpen, disabled: !ready, onClick: () => { toggleModelMenu(); }, children: _jsx(IconChevronDownOutlineMedium, { className: modelMenuOpen ? `${css.modelMenuChevron} ${css.modelMenuChevronOpen}` : css.modelMenuChevron }) }), modelMenuOpen && (_jsxs("div", { className: modelMenuUp ? `${css.modelMenu} ${css.modelMenuUp}` : css.modelMenu, role: "menu", "aria-label": t('model.menu'), children: [_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": modelValue.trim() === '', className: modelValue.trim() === '' ? `${css.modelItemDefault} ${css.modelItemCurrent}` : css.modelItemDefault, onClick: () => { setModelDraft(''); setModelMenuOpen(false); }, children: [_jsx("span", { className: css.modelItemLabel, children: modelDefaultItem }), _jsx("span", { className: css.modelItemCheck, "aria-hidden": true, children: modelValue.trim() === '' ? '✓' : '' })] }), choices.map(choice => (_jsxs("button", { type: "button", role: "menuitemradio", "aria-checked": choice === modelValue, className: choice === modelValue ? css.modelItemCurrent : css.modelItem, onClick: () => { setModelDraft(choice); setModelMenuOpen(false); }, children: [_jsx("span", { className: css.modelItemLabel, children: choice }), _jsx("span", { className: css.modelItemCheck, "aria-hidden": true, children: choice === modelValue ? '✓' : '' })] }, choice)))] }))] })) : modelInputElement), _jsx("button", { type: "button", className: css.modelSave, disabled: !ready || modelValue.trim() === storedModel, onClick: () => { saveModel(); }, children: t('model.save') })] }), modelSaved && _jsx("span", { className: css.saved, children: t('model.applied') }), modelError && _jsx("span", { className: css.errorText, children: t('model.error') })] }), _jsxs("section", { className: css.block, children: [_jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.rowLabel, children: [t('live.title'), _jsx(Tooltip, { label: t('live.info'), side: "bottom", maxWidth: 360, children: _jsx("button", { type: "button", className: css.info, "aria-label": t('live.info.aria'), children: "\u24D8" }) })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": live, "aria-label": t('live.title'), className: live ? `${css.switch} ${css.switchOn}` : css.switch, disabled: !ready, onClick: () => { write('live', !live); }, children: _jsx("span", { className: css.knob }) })] }), saved && _jsx("span", { className: css.saved, children: t('live.applied') }), error && _jsx("span", { className: css.errorText, children: t('live.error') }), snapshot.status === 'unavailable' && (_jsx("span", { className: css.hint, children: t('live.unavailable') }))] })] }));
+/** The card body both settings surfaces share: the auth block, the model-list section, and the resident-mode block. */
+function CardBody({ state, active, auth, authT, modelList, modelDirectory, checkEndpoint, useSessions, t }) {
+    const { snapshot, saved, error, ready, live, write, endpointUnavailable, endpointLoading, baseUrlValue, apiKeyConfigured, authTokenConfigured, apiKeyDraft, authTokenDraft, endpointSaved, endpointError, endpointDirty, saveEndpoint, setBaseUrlDraft, setApiKeyDraft, setAuthTokenDraft, } = state;
+    // The verify button: runs the gateway's `checkEndpoint` Remote against the
+    // SAVED endpoint (unsaved drafts deliberately disable it — what it verifies
+    // is the saved configuration) and shows the verdict inline. Session-less:
+    // a settings card may have no main agent session to run a slash command.
+    const [checking, setChecking] = useState(false);
+    const [checkText, setCheckText] = useState(null);
+    const runCheck = () => {
+        if (checkEndpoint === undefined)
+            return;
+        setChecking(true);
+        setCheckText(null);
+        void checkEndpoint().then((text) => {
+            setCheckText(text ?? t('endpoint.checkUnavailable'));
+            setChecking(false);
+        }, () => {
+            setCheckText(t('endpoint.checkFailed'));
+            setChecking(false);
+        });
+    };
+    return (_jsxs("div", { className: css.body, children: [_jsxs("section", { className: css.block, children: [_jsxs("h3", { className: css.blockTitle, children: [t('auth.title'), _jsx(Tooltip, { label: t('endpoint.info'), side: "bottom", maxWidth: 360, children: _jsx("button", { type: "button", className: css.info, "aria-label": t('endpoint.info.aria'), children: "\u24D8" }) })] }), _jsx(ProviderAuthBlock, { harness: { id: 'claude-code', label: 'Claude Code' }, useSessions: useSessions, status: auth.status, runCommand: auth.runCommand, t: authT }), endpointUnavailable && (_jsx("span", { className: css.hint, children: t('endpoint.unavailable') })), !endpointUnavailable && (_jsxs("div", { className: css.endpointFields, children: [_jsxs("label", { className: css.endpointField, children: [_jsx("span", { className: css.endpointLabel, children: t('endpoint.baseUrl') }), _jsx("input", { type: "text", className: css.modelInput, value: baseUrlValue, placeholder: t('endpoint.baseUrl.placeholder'), "aria-label": t('endpoint.baseUrl'), disabled: endpointLoading, onChange: (event) => { setBaseUrlDraft(event.currentTarget.value); } })] }), _jsxs("label", { className: css.endpointField, children: [_jsxs("span", { className: css.endpointLabel, children: [t('endpoint.apiKey'), apiKeyConfigured && _jsx("span", { className: css.configuredChip, children: t('endpoint.configured') })] }), _jsx("input", { type: "password", className: css.modelInput, value: apiKeyDraft ?? '', placeholder: apiKeyConfigured ? t('endpoint.secret.configured') : t('endpoint.secret.placeholder'), "aria-label": t('endpoint.apiKey'), autoComplete: "off", disabled: endpointLoading, onChange: (event) => { setApiKeyDraft(event.currentTarget.value); } })] }), _jsxs("label", { className: css.endpointField, children: [_jsxs("span", { className: css.endpointLabel, children: [t('endpoint.authToken'), authTokenConfigured && _jsx("span", { className: css.configuredChip, children: t('endpoint.configured') })] }), _jsx("input", { type: "password", className: css.modelInput, value: authTokenDraft ?? '', placeholder: authTokenConfigured ? t('endpoint.secret.configured') : t('endpoint.secret.placeholder'), "aria-label": t('endpoint.authToken'), autoComplete: "off", disabled: endpointLoading, onChange: (event) => { setAuthTokenDraft(event.currentTarget.value); } })] }), _jsxs("div", { className: css.row, children: [_jsx("button", { type: "button", className: css.modelSave, disabled: endpointLoading || !endpointDirty, onClick: () => { saveEndpoint(); }, children: t('endpoint.save') }), checkEndpoint !== undefined && (_jsx("button", { type: "button", className: css.modelSave, disabled: endpointLoading || endpointDirty || checking, title: endpointDirty ? t('endpoint.checkDirtyHint') : undefined, onClick: () => { runCheck(); }, children: checking ? t('endpoint.checking') : t('endpoint.check') })), endpointSaved && _jsx("span", { className: css.saved, children: t('endpoint.applied') }), endpointError && _jsx("span", { className: css.errorText, children: t('endpoint.error') })] }), checkText !== null && _jsx("span", { className: css.hint, children: checkText })] }))] }), _jsx(ModelListSection, { active: active, modelList: modelList, modelDirectory: modelDirectory, directoryRefresh: endpointSaved, t: authT }), _jsxs("section", { className: css.block, children: [_jsxs("div", { className: css.row, children: [_jsxs("span", { className: css.rowLabel, children: [t('live.title'), _jsx(Tooltip, { label: t('live.info'), side: "bottom", maxWidth: 360, children: _jsx("button", { type: "button", className: css.info, "aria-label": t('live.info.aria'), children: "\u24D8" }) })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": live, "aria-label": t('live.title'), className: live ? `${css.switch} ${css.switchOn}` : css.switch, disabled: !ready, onClick: () => { write('live', !live); }, children: _jsx("span", { className: css.knob }) })] }), saved && _jsx("span", { className: css.saved, children: t('live.applied') }), error && _jsx("span", { className: css.errorText, children: t('live.error') }), snapshot.status === 'unavailable' && (_jsx("span", { className: css.hint, children: t('live.unavailable') }))] })] }));
 }
 /**
- * The claude-code harness settings card in the 0.1.5 plugin configuration
- * tab: the same collapsible chrome the official plugin cards use,
+ * The claude-code harness settings card of the retired 0.1.5 plugin
+ * configuration tab (no longer registered; the live surface is the
+ * plugins.item entry below): the same collapsible chrome the official plugin
+ * cards use,
  * re-implemented locally (the bundle-purity gate forbids value-importing the
  * official chrome — the context-guard pattern), with the at-a-glance
  * credential dot in the header. Explanation copy lives in hover/focus bubbles
@@ -169,9 +134,9 @@ function CardBody({ state, auth, authT, renderModelPicker, useSessions, t }) {
  * @returns the card.
  */
 export function ClaudeCodeSettingsCard(props) {
-    const { useSettings, scope, auth, authT, renderModelPicker, modelInfo, useSessions, t } = props;
+    const { useSettings, scope, auth, authT, modelList, modelDirectory, checkEndpoint, endpointAuth, useSessions, t } = props;
     const [open, setOpen] = useState(false);
-    const state = useCardState(open, useSettings, scope, modelInfo, t);
+    const state = useCardState(open, useSettings, scope, endpointAuth);
     // The at-a-glance credential dot in the collapsed header: every mount
     // re-probes (a credential expiring mid-session must flip the dot at the
     // next view); the bus dedupes identical results, so no re-render storm.
@@ -180,19 +145,32 @@ export function ClaudeCodeSettingsCard(props) {
         : authStatus === 'anonymous' ? 'settings.notAuthenticated'
             : authStatus === 'checking' ? 'loading' : 'error');
     const title = t('card.title');
-    return (_jsxs("li", { className: open ? `${css.card} ${css.cardOpen}` : css.card, children: [_jsxs("button", { type: "button", className: css.header, "aria-expanded": open, "aria-label": `${t(open ? 'card.collapse' : 'card.expand')}: ${title}`, onClick: () => { setOpen(!open); }, children: [_jsxs("span", { className: css.headText, children: [_jsxs("span", { className: css.nameRow, children: [_jsx("span", { className: css.name, children: title }), _jsx(AuthStatusDot, { status: authStatus, label: dotLabel })] }), _jsx("span", { className: css.description, children: t('card.description') })] }), _jsx(IconChevronDownOutlineMedium, { className: open ? `${css.chevron} ${css.chevronOpen}` : css.chevron })] }), open && _jsx(CardBody, { state: state, auth: auth, authT: authT, renderModelPicker: renderModelPicker, useSessions: useSessions, t: t })] }));
+    return (_jsxs("li", { className: open ? `${css.card} ${css.cardOpen}` : css.card, children: [_jsxs("button", { type: "button", className: css.header, "aria-expanded": open, "aria-label": `${t(open ? 'card.collapse' : 'card.expand')}: ${title}`, onClick: () => { setOpen(!open); }, children: [_jsxs("span", { className: css.headText, children: [_jsxs("span", { className: css.nameRow, children: [_jsx("span", { className: css.name, children: title }), _jsx(AuthStatusDot, { status: authStatus, label: dotLabel })] }), _jsx("span", { className: css.description, children: t('card.description') })] }), _jsx(IconChevronDownOutlineMedium, { className: open ? `${css.chevron} ${css.chevronOpen}` : css.chevron })] }), open && _jsx(CardBody, { state: state, active: open, auth: auth, authT: authT, modelList: modelList, modelDirectory: modelDirectory, checkEndpoint: checkEndpoint, useSessions: useSessions, t: t })] }));
 }
 /**
- * The bundle's configuration on the alpha.2 Plugins page
- * (`plugins.bundle.config`, keyed by package name): the page draws the title,
- * the icon, and the crumb itself, so the entry renders the one-liner for the
- * `summary` view and the bare form — with its own save control — for `page`.
+ * The provider's card on the Plugins page (the `plugins.item` entry
+ * client/index.ts registers while the Host serves the namespace AND the core
+ * predates the family card): the page
+ * draws the title, the icon, and the crumb itself, so the entry renders the
+ * one-liner for the `summary` view and the bare form — with its own save
+ * control — for `page`.
  * @param props - the owner view, the injected scope/auth faces, and copy.
  * @returns the entry.
  */
-export function ClaudeCodeBundleConfig({ view, useSettings, scope, auth, authT, renderModelPicker, modelInfo, useSessions, t }) {
-    const state = useCardState(view === 'page', useSettings, scope, modelInfo, t);
+export function ClaudeCodeBundleConfig({ view, useSettings, scope, auth, authT, modelList, modelDirectory, checkEndpoint, endpointAuth, useSessions, t }) {
+    const state = useCardState(view === 'page', useSettings, scope, endpointAuth);
     if (view === 'summary')
         return _jsx("span", { className: css.description, children: t('card.description') });
-    return _jsx(CardBody, { state: state, auth: auth, authT: authT, renderModelPicker: renderModelPicker, useSessions: useSessions, t: t });
+    return _jsx(CardBody, { state: state, active: view === 'page', auth: auth, authT: authT, modelList: modelList, modelDirectory: modelDirectory, checkEndpoint: checkEndpoint, useSessions: useSessions, t: t });
+}
+/**
+ * The harness's section inside the core's「本机 Agent 委派」family card: the
+ * same useCardState + CardBody the plugins.item page view renders — the
+ * collapsible chrome belongs to the family card now.
+ * @param props - the injected scope/auth faces, the forwarded session seat, and copy.
+ * @returns the section body.
+ */
+export function ClaudeCodeCardSection({ active, useSettings, scope, auth, authT, modelList, modelDirectory, checkEndpoint, endpointAuth, useSessions, t }) {
+    const state = useCardState(active, useSettings, scope, endpointAuth);
+    return _jsx(CardBody, { state: state, active: active, auth: auth, authT: authT, modelList: modelList, modelDirectory: modelDirectory, checkEndpoint: checkEndpoint, useSessions: useSessions, t: t });
 }

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

@@ -1,35 +1,22 @@
-/**
- * Local-agent-claude-code plugin, browser half: the claude-code settings
- * surface, one face per install shape and host line — a standalone install
- * renders the bundle's own configuration on its Plugins-page detail view
- * (`plugins.bundle.config`, keyed by package name), a family-bundle install
- * renders the same card through the row-level configure entry on the
- * BUNDLE's detail view (`plugins.row.config`, keyed
- * `@khorsheed/dsh-bundle-local-agent#local-agent-claude-code`, the row id the
- * bundle's patch declares), and 0.1.5 renders the `settings.plugin.item`
- * card (keyed to the `local-agent-claude-code` settings namespace the host
- * half registers) in the official Plugins → 可配置插件 tab. The card carries the family core's
- * shared ProviderAuthBlock (login/logout/manual-handoff, backed by the core's
- * localAgentGateway Remote and the commands channel), the default-model block
- * (free-text write plus the gateway's model surface: the effective-model line
- * and the suggestion vocabulary), and the resident-mode switch, whose writes
- * ride the bound settingsScope — the host watcher hot-applies them, no
- * reload. Every read degrades: an absent gateway renders the auth block's
- * 'unavailable' state and drops the model surface, an unregistered namespace
- * disables the live controls.
- * @module @khorsheed/dsh-local-agent-claude-code/client
- */
 import type { Context } from '@deepseek-ai/cordis';
 import { en, NS, zh, type LocalAgentClaudeCodeKey } from './locales.ts';
-export { ClaudeCodeBundleConfig, ClaudeCodeSettingsCard } from './SettingsCard.tsx';
-export type { ClaudeLiveSettings, ClaudeCodeBundleConfigProps, ClaudeCodeSettingsCardInjected, ClaudeCodeSettingsCardProps, } from './SettingsCard.tsx';
+export { ClaudeCodeBundleConfig, ClaudeCodeCardSection, ClaudeCodeSettingsCard } from './SettingsCard.tsx';
+export type { ClaudeLiveSettings, ClaudeCodeBundleConfigProps, ClaudeCodeCardSectionProps, ClaudeCodeSettingsCardInjected, ClaudeCodeSettingsCardProps, } from './SettingsCard.tsx';
 export { en, NS, zh };
 export type { LocalAgentClaudeCodeKey };
-/** Required services: slot registry, settings scope, command Remote, and locale registry. */
+/**
+ * Required services: slot registry, command Remote, and locale registry. The
+ * settings scope is NOT a static inject — its service name differs per host
+ * line (`settingsScope` on 0.1.5, `configForms` on rc.1), so a static entry
+ * would pend the whole client plugin on the other line; bindSettingsScope
+ * probes the serving one instead (the settings client package is a declared
+ * client inject, so one of them is always already up). The card track probes
+ * `configForms` through the same kind of deferred inject (see apply).
+ */
 export declare const inject: string[];
 /**
  * Client plugin body: register the dictionaries and the claude-code settings
- * surfaces bound to the local-agent-claude-code namespace.
+ * card bound to the local-agent-claude-code namespace.
  * @param ctx - client root context.
  */
 export declare function apply(ctx: Context): void;

package/lib/types/client/index.js

@@ -1,23 +1,49 @@
 import { bindSettingsScope } from '@khorsheed/dsh-local-agent/src/client/settings-scope.ts';
+/**
+ * Local-agent-claude-code plugin, browser half: the claude-code settings card
+ * — a section of the family core's「本机 Agent 委派」family card on the
+ * Plugins page (registered through the core's
+ * `localAgentUi.registerHarnessCard` while the Host serves the
+ * `local-agent-claude-code` namespace), or this package's own `plugins.item`
+ * entry when the core predates the family card (the declare-and-degrade
+ * fallback). Every install shape serves the row's
+ * volatile Config under the row id — standalone install, family bundle, or
+ * mode pack — so the card follows the served namespace rather than any
+ * carrier bundle, and a composition without the row shows no trace of it. The
+ * card carries the family core's shared ProviderAuthBlock
+ * (login/logout/manual-handoff, backed by the core's localAgentGateway Remote
+ * and the commands channel), the default-model block (free-text write plus
+ * the gateway's model surface: the effective-model line and the suggestion
+ * vocabulary), and the resident-mode switch, whose writes ride the bound
+ * settingsScope — the host watcher hot-applies them, no reload. Every read
+ * degrades: an absent gateway renders the auth block's 'unavailable' state
+ * and drops the model surface, an unregistered namespace disables the live
+ * controls.
+ * @module @khorsheed/dsh-local-agent-claude-code/client
+ */
+import { createElement, useSyncExternalStore } from 'react';
 import { en, NS, zh } from './locales.js';
-import { ClaudeCodeBundleConfig, ClaudeCodeSettingsCard, } from './SettingsCard.js';
-export { ClaudeCodeBundleConfig, ClaudeCodeSettingsCard } from './SettingsCard.js';
+import { ClaudeCodeBundleConfig, ClaudeCodeCardSection, } from './SettingsCard.js';
+export { ClaudeCodeBundleConfig, ClaudeCodeCardSection, ClaudeCodeSettingsCard } from './SettingsCard.js';
 export { en, NS, zh };
 /**
- * This bundle's package name — the key the Plugins page dispatches
- * `plugins.bundle.config` entries on (identity triangle: cordis.patch.yml,
- * tsdown.config.ts, invariant.ts).
+ * Required services: slot registry, command Remote, and locale registry. The
+ * settings scope is NOT a static inject — its service name differs per host
+ * line (`settingsScope` on 0.1.5, `configForms` on rc.1), so a static entry
+ * would pend the whole client plugin on the other line; bindSettingsScope
+ * probes the serving one instead (the settings client package is a declared
+ * client inject, so one of them is always already up). The card track probes
+ * `configForms` through the same kind of deferred inject (see apply).
  */
-const PACKAGE_NAME = '@khorsheed/dsh-local-agent-claude-code';
-/** Required services: slot registry, settings scope, command Remote, and locale registry. */
 export const inject = ['slots', 'remote', 'remote.commands', 'locale'];
 /**
  * Client plugin body: register the dictionaries and the claude-code settings
- * surfaces bound to the local-agent-claude-code namespace.
+ * card bound to the local-agent-claude-code namespace.
  * @param ctx - client root context.
  */
 export function apply(ctx) {
     ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'local-agent-claude-code: dictionaries');
+    const t = ctx.locale.bind(NS);
     const scope = bindSettingsScope(ctx, 'local-agent-claude-code');
     // The auth block's copy lives in the family core's dictionary; binding is
     // stable per namespace and late dictionary registration still resolves.
@@ -27,21 +53,58 @@ export function apply(ctx) {
     // never matters, and degrade to the auth block's 'unavailable' state when
     // the core client is absent.
     const gateway = () => ctx.get('remote.localAgentGateway');
-    // Both settings surfaces inject the same face.
-    const cardInject = () => ({
+    // The card's inject face minus the hooks compartment — the family-card
+    // section consumes this verbatim; the standalone card's slot registration
+    // adds the hooks compartment back below.
+    const cardFace = () => ({
         scope,
-        hooks: { settings: scope },
         authT,
-        renderModelPicker: props => ctx.get('localAgentUi')?.renderHarnessModelPicker('claude-code', props),
-        // The model surface read behind the default-model block's effective
-        // line and suggestions. 'claude-code' is the harness name the host
-        // half registers; a core predating the model broker (or an absent
-        // gateway) degrades to the bare free-text input.
-        modelInfo: () => {
+        // The curated model list's read/write faces, over the same Remotes.
+        modelList: {
+            read: () => {
+                const gw = gateway();
+                if (gw === undefined || typeof gw.modelList !== 'function')
+                    return Promise.resolve(undefined);
+                return gw.modelList('claude-code').then(result => (result.ok ? result.value : undefined));
+            },
+            write: (models) => {
+                const gw = gateway();
+                if (gw === undefined || typeof gw.configureModelList !== 'function')
+                    return Promise.resolve(undefined);
+                return gw.configureModelList('claude-code', models).then(result => (result.ok ? result.value : undefined));
+            },
+        },
+        // The endpoint's served catalog for the add dialog. A core predating
+        // modelDirectory leaves the dialog with its reason.
+        modelDirectory: (refresh) => {
+            const gw = gateway();
+            if (gw === undefined || typeof gw.modelDirectory !== 'function')
+                return Promise.resolve(undefined);
+            return gw.modelDirectory('claude-code', undefined, refresh ?? false).then(result => (result.ok ? result.value : undefined));
+        },
+        // The verify button's probe, over the session-less gateway Remote. A core
+        // predating `checkEndpoint` hides the button (declare-and-degrade).
+        checkEndpoint: () => {
             const gw = gateway();
-            if (gw === undefined || typeof gw.harnessModel !== 'function')
+            if (gw === undefined || typeof gw.checkEndpoint !== 'function')
                 return Promise.resolve(undefined);
-            return gw.harnessModel('claude-code').then(result => (result.ok ? result.value : undefined));
+            return gw.checkEndpoint('claude-code').then(result => (result.ok ? result.value : undefined));
+        },
+        // The credential form's read/write face, over the same session-less
+        // Remotes. Absent on a core that predates them — the card hides the form.
+        endpointAuth: {
+            read: () => {
+                const gw = gateway();
+                if (gw === undefined || typeof gw.endpointAuth !== 'function')
+                    return Promise.resolve(undefined);
+                return gw.endpointAuth('claude-code').then(result => (result.ok ? result.value : undefined));
+            },
+            write: (fields) => {
+                const gw = gateway();
+                if (gw === undefined || typeof gw.configureEndpoint !== 'function')
+                    return Promise.resolve(undefined);
+                return gw.configureEndpoint('claude-code', fields).then(result => (result.ok ? result.value : undefined));
+            },
         },
         auth: {
             status: name => 
@@ -53,35 +116,57 @@ export function apply(ctx) {
                 .then(result => (result.ok ? result.value?.result.text : undefined)),
         },
     });
-    // The settings surface follows the host line AND the install shape — three
-    // tracks, all riding slots.inject so each fires only where its declaration
-    // exists. Standalone install: the package's own Plugins-page detail view
-    // (`plugins.bundle.config`, keyed by package name). Installed as a family
-    // member: the member is no longer the profile's direct dependency, so only
-    // the bundle gets a detail view — the card rides the row-level slot
-    // (`plugins.row.config`, keyed `<bundle package>#<row id>` with the row id
-    // the bundle's patch declares) and the bundle's page gains a configure
-    // entry opening it. 0.1.5: the legacy configurable-plugins tab card
-    // (`settings.plugin.item`, keyed by the settings namespace) through a
-    // string-keyed duck narrow of the same service (the slot name is gone from
-    // the alpha.2 SlotMap).
-    ctx.slots.inject('plugins.bundle.config', () => ctx.slots.register({
-        name: 'plugins.bundle.config',
-        key: PACKAGE_NAME,
-        locale: NS,
-        inject: cardInject,
-    }, ClaudeCodeBundleConfig));
-    ctx.slots.inject('plugins.row.config', () => ctx.slots.register({
-        name: 'plugins.row.config',
-        key: '@khorsheed/dsh-bundle-local-agent#local-agent-claude-code',
-        locale: NS,
-        inject: cardInject,
-    }, ClaudeCodeBundleConfig));
-    const legacy = ctx.slots;
-    legacy.inject('settings.plugin.item', () => legacy.register({
-        name: 'settings.plugin.item',
-        key: 'local-agent-claude-code',
-        locale: NS,
-        inject: cardInject,
-    }, ClaudeCodeSettingsCard));
+    // The settings card injects this face.
+    const cardInject = () => ({ ...cardFace(), hooks: { settings: scope } });
+    // The family-card section render bypasses the slot renderer's inject.hooks
+    // materialization, so bind the scope's selector hook here with the same
+    // semantics (a uSES subscription over the scope's own subscribe/getSnapshot).
+    const subscribeScope = (listener) => scope.subscribe(listener);
+    const readScope = () => scope.getSnapshot();
+    const useSettings = (select) => select(useSyncExternalStore(subscribeScope, readScope));
+    // One Plugins-page seat gated on the SERVED NAMESPACE, never on the install
+    // shape: whichever composition carries the `local-agent-claude-code` row —
+    // standalone install, family bundle, or mode pack — serves the row's
+    // volatile Config under the row id, and `whileServed` keeps the
+    // registration alive for exactly that span (the official companion
+    // convention), so a composition without the row shows no trace of the card.
+    // This replaces the retired per-shape seats: `plugins.row.config` hardcoded
+    // one carrier bundle into its key, and the host deleted
+    // `settings.plugin.item`. The probe rides a deferred inject because
+    // configForms exists only on the alpha.2+ host line; a 0.1.5 host never
+    // fires it, and a configForms predating whileServed (0.1.6-alpha.2) skips
+    // the card.
+    ctx.inject(['configForms'], (formsCtx) => {
+        const forms = formsCtx.configForms;
+        if (typeof forms.whileServed !== 'function')
+            return;
+        return forms.whileServed(['local-agent-claude-code'], () => {
+            // The family card owns the Plugins-page seat when the core's client
+            // provides it: a core new enough answers registerHarnessCard, and this
+            // package renders as a section of the「本机 Agent 委派」card instead of
+            // its own entry. The probe runs at serve time — a host round-trip past
+            // client plugin boot — so a composed core has already provided the
+            // service; an old or absent core keeps the standalone card below.
+            const ui = ctx.get('localAgentUi');
+            if (typeof ui?.registerHarnessCard === 'function') {
+                return ui.registerHarnessCard({
+                    name: 'claude-code',
+                    // The retired standalone card's order, kept as the section order.
+                    order: 130,
+                    locale: NS,
+                    label: () => t('card.title'),
+                    render: ({ active, useSessions }) => createElement(ClaudeCodeCardSection, { active, useSessions, ...cardFace(), useSettings, t }),
+                });
+            }
+            return ctx.slots.inject('plugins.item', () => ctx.slots.register({
+                name: 'plugins.item',
+                id: 'local-agent-claude-code',
+                // Community cards sort after the official settings pages (orders 10-40).
+                order: 130,
+                label: () => t('card.title'),
+                locale: NS,
+                inject: cardInject,
+            }, ClaudeCodeBundleConfig));
+        });
+    });
 }